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.