The locationbar/identitybox_labels_hidden.css CSS feature isn't making the labelless identity box button to have a consistent width with other address bar buttons

[Aleksandra0056]

1. Does the issue occur without any files inside /chrome/ folder?

No.

2. Issue description:

• If the identity box label is hidden using the locationbar/identitybox_labels_hidden.css CSS feature, the button itself doesn't have a shrunk width which makes the identity box button width (in my case extension button) inconsistent.
• The labelless identity box address bar button has a width of 32 pixels, which is incorrect and inconsistent with other buttons.
• The other address bar buttons have a width of 28 pixels, which is correct.

Expected results:

The labelless identity box button should have a consistent width with other toolbar buttons (i.e. 28 pixels).

userChrome.css file:

Click to expand...

/= Import Lepton stylesheet (Chrome) ==============================/
@import url("css/leptonChrome.css");

/= CustomCSSforFx importing =======================================/
/* @import url("css/toolbars/addonbar_status_in_addonbar.css"); */
@import url("css/appbutton/appbutton_in_titlebar_icon_only.css");
@import url("css/buttons/buttons_on_navbar_classic_appearance.css");
@import url("css/buttons/buttons_on_bookmarks_toolbar_classic_appearance.css");
@import url("css/buttons/buttons_on_bookmarks_toolbar_classic_appearance_items.css");
@import url("css/buttons/custom_backforward_large_ff3_strata.css");
@import url("css/generalui/close_icon_red.css");
@import url("css/generalui/popup_items_hover_appearance_aero.css");
@import url("css/generalui/set_as_desktop_background_menuitems_hidden.css");
@import url("css/locationbar/ac_popup_megabar_result_highlighting_aero.css");
@import url("css/locationbar/identitybox_labels_hidden.css");
@import url("css/locationbar/identitybox_padlock_icon_arrow.css");
@import url("css/locationbar/identitybox_replace_search_icon_with_globe.css");
@import url("css/locationbar/urlbar_icons_aero_appearance.css");
@import url("css/locationbar/urlbar_restore_visible_border.css");
@import url("css/locationbar/zoom_button_hidden.css");
@import url("css/tabs/missing_tab_favicon_restored_globe_v2.css");
@import url("css/tabs/tab_close_hidden_for_only_one_visible_tab.css");
@import url("css/tabs/tab_throbber_green.css");

/= Icons tweaks ===================================================/

/* Menu-bar icons */
#menu_HelpPopup_reportPhishingtoolmenu {
--menuitem-image: url("../icons/toolbar/warning.svg") !important;
}

#feedbackPage {
--menuitem-image: url("../icons/toolbar/feedback.svg") !important;
}

#helpSafeMode {
--menuitem-image: url("../icons/toolbar/tsht.svg") !important;
}

#troubleShooting {
--menuitem-image: url("../icons/toolbar/tsht_m.svg") !important;
}

#fileMenu-restart-item {
--menuitem-image: url("../icons/toolbar/restart.svg") !important;
}

/* Panel and menu icons */

#context-viewpartialsource-selection,
#context-viewsource {
--menuitem-image: url("../icons/toolbar/code.svg") !important;
}

#appMenu-bookmarks-button {
list-style-image: url("icons/toolbar/bkm_empty.svg") !important;
}

#appMenu_feedbackPage {
list-style-image: url("icons/toolbar/feedback.svg") !important;
}

#appMenu_helpSafeMode {
list-style-image: url("icons/toolbar/tsht.svg") !important;
}

#appMenu_troubleShooting {
list-style-image: url("icons/toolbar/tsht_m.svg") !important;
}

#appMenu_menu_HelpPopup_reportPhishingtoolmenu {
list-style-image: url("icons/toolbar/warning.svg") !important;
}

/* Toolbar icons*/

#home-button {
list-style-image: url("icons/toolbar/spd_dial.svg") !important;
-moz-image-region: auto !important;
}

#reload-button {
list-style-image: url("icons/toolbar/reload_2arrows.svg") !important;
-moz-image-region: auto !important;
}

/= Menu-bar tweaks ================================================/

/* Disable spacer in menu-bar */
#toolbar-menubar > spacer {
display: none !important;
}

/* Hide the menu-bar */
#menubar-items {
display: none !important;
}

/= Tab-bar tweaks =================================================/

/* Close Tab button size */
#TabsToolbar .tabbrowser-tab .tab-close-button {
width: 17px !important;
height: 17px !important;
padding: 2px !important;
}

/= Extensions icons tweaks ========================================/

/* Go Up /
toolbarbutton[id="080395d5-2f2d-44ff-8320-79747016b5d4"] .toolbarbutton-icon {
list-style-image: url("icons/extensions/1.svg") !important; }

and: toolbarbutton[id*="080395d5-2f2d-44ff-8320-79747016b5d4"] .toolbarbutton-icon {
list-style-image: url("icons/extensions/1.svg") !important; }

/* Reload button /
toolbarbutton[id="96999337-8b64-424f-92a7-259f1faf930b"] .toolbarbutton-icon {
list-style-image: url("icons/extensions/2.svg") !important; }

and: toolbarbutton[id*="96999337-8b64-424f-92a7-259f1faf930b"] .toolbarbutton-icon {
list-style-image: url("icons/extensions/2.svg") !important; }

/* Stop button /
toolbarbutton[id="ca48401e-96a5-47ea-8009-7c2f62efe060"] .toolbarbutton-icon {
list-style-image: url("icons/extensions/3.svg") !important; }

and: toolbarbutton[id*="ca48401e-96a5-47ea-8009-7c2f62efe060"] .toolbarbutton-icon {
list-style-image: url("icons/extensions/3.svg") !important; }

/* VPS Button /
toolbarbutton[id="mpopp-view-page-source"] .toolbarbutton-icon {
list-style-image: url("icons/toolbar/code.svg") !important; }

and: toolbarbutton[id*="mpopp-view-page-source"] .toolbarbutton-icon {
list-style-image: url("icons/toolbar/code.svg") !important; }

3. Does the issue occur with the most recent version of CustomCSSforFx?

Yes, I have the latest version 4.5.8.

4. Screenshots showing the issue:

The protection button has the correct width (28 pixels):

The identity box button (in the extension site) has an incorrect width (32 pixels):

5. System information:

• OS & OS version: Windows 10 19045.4894
• OS architecture: 64-bit
• DPI/HiDPI/scaling value: 100%
• Firefox version: 131.0.0
• Firefox architecture: 64-bit
• Firefox theme: Firefox UI Fix

[Aris-t2]

Tweaking this should be possible.