[Firefox-72.01] - addonlists_show_buttons_instead_of_menu_popup_fx72

[Acid-Crash]

1. Describe the issue There is an issue with about:addons options dropDown menu. On localised Firefox some entries (Reset All Add-ons to Update Automatically) lack width

2. What should have happened instead? Width should be sufficient for the each element

3. Steps to reproduce the issue? Switch to non english locale (screenshot demonstrares RU locale) Enable _addonlists_show_buttons_instead_of_menu_popupfx72 go to about:addons

4. SCREENSHOTS with/without this projects files (drag & drop images into this post)

5. System information

   • OS & OS version: Win10x64
   • OS theme name: Default
   • DPI / HiDPI resolution: 100
   • Firefox version: 72.01
   • Firefox theme / lw-theme: default
   • This projects settings the issue occurs with:

/* Firefox Quantum userContent.css tweaks *******************************************************/
/* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **********/
/* Github: https://github.com/aris-t2/customcssforfx ********************************************/
/************************************************************************************************/

/*************************************************************************************************

[!] Firefox 68+ (look for '_fx68')
  - new 'alternative appearance' option
  - new 'alternative appearance' option (AERO background color)
  - new 'restore version number' option for active add-ons
  - new 'compact appearance' option
  - new 'more compact appearance' option
  - new 'compact categories' option
  - new 'replace menu popup with buttons' option
  - new 'replace button labels with icons' option
  - new 'colorized icon' option for 'replace button labels with icons' option
  - new 'show buttons on hover only' option
  - new 'hide manage/expand button' option
  - new 'hide report button' option

  - old add-ons manager > show 'version number for add-ons' does not work with the html based add-on manager
  - old add-ons manager > show 'last update date' does not work with the html based add-on manager
  - old add-ons manager > alternative appearance does not work with the html based add-on manager
  - old add-ons manager > compact appearance does not work with the html based add-on manager
  - most old 'other' add-ons manager settings do not work with the html based add-on manager
  --> use 'about:config > extensions.htmlaboutaddons.enabled > false' temporary workaround for the old settings

[!] Firefox 69+
  - 'about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true' (or custom styles will not be loaded)

[!] Firefox 70+
  - 'about:config >  extensions.htmlaboutaddons.enabled > false' workaround does not work anymore

[!] Firefox 72+ (look for '_fx72')
 - new 'compact categories' option
 - new 'replace menu popup with buttons' option 

*************************************************************************************************/

/*************************************************************************************************

  README

  Finding profile folder: address bar > about:support > Profile Folder > Open Folder
  CSS files and sub-folders belong into \PROFILEFOLDER\chrome\ directory.
  \chrome\config\
  \chrome\css\
  \chrome\image\
  \chrome\userChrome.css
  \chrome\userContent.css

  ENABLING options: remove the combination of / and * before '@import'
  DISABLING options: add the combination of / and * before '@import'

  FIREFOX BUGS (nothing CSS code can do about):
  - some '@import' calls might not work properly on macOS and Linux
  - some '@import' calls might not work properly, if multi-process mode (e10s) is disabled
  - in both cases CSS code has to be added to userContent.css file manually

  Some CSS tweaks won't work, if '@namespace' references are used inside .css files!

  All options have significant categories and names.

  GENERAL SUPPORT / DISCUSSION THREAD: github.com/Aris-t2/CustomCSSforFx/issues/211

*************************************************************************************************/

/************************************************************************************************/
/* about:addons (settings split into different areas for Firefox 60-67, 68+ and 60+) ************/
/************************************************************************************************/

/* FIREFOX 68+ #################################################################################*/
/* addons page appearance - [only use one at a time] (incl. version number & buttons) ***********/
/* @import "./css/aboutaddons/addons_manager_alternative_appearance_fx68.css"; /**/
/* @import "./css/aboutaddons/addons_manager_alternative_appearance_aero_fx68.css"; /**/    /* <-- AERO colors */

/* version number for active add-ons [Fx 68+] ***************************************************/
@import "./css/aboutaddons/addonlists_show_addon_version_number_fx68.css"; /**/

/* compact item lists - [only use one at a time] ************************************************/
/* @import "./css/aboutaddons/addonlists_compact_fx68.css"; /**/ /* best with alternative_appearance_fx68 */
/* @import "./css/aboutaddons/addonlists_compact_fx72.css"; /**/ /* best with alternative_appearance_fx68 */
/* @import "./css/aboutaddons/addonlists_compact_more_compact_fx68.css"; /**/ /* best with alternative_appearance_fx68 */
/* @import "./css/aboutaddons/addonlists_compact_more_compact_fx72.css"; /**/ /* best with alternative_appearance_fx68 */

/* button settings (requires addons_manager_alternative_appearance_fx68) ************************/
/* - buttons instead of menupopup - [only use one at a time] ************************************/
/* @import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_fx68.css"; /**/
@import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_fx72.css"; /**/
/* @import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_compact_view_fx72.css"; /**/
/* @import "./css/aboutaddons/addonlists_show_buttons_instead_of_menu_popup_more_compact_view_fx72.css"; /**/
/* - buttons icons instead of labels (requires above option) - [only use one at a time] *********/
/* @import "./css/aboutaddons/addonlists_replace_button_labels_with_icons_fx68.css"; /**/
/* @import "./css/aboutaddons/addonlists_replace_button_labels_with_icons_fx72.css"; /**/
/* - other button settings **********************************************************************/
@import "./css/aboutaddons/addonlists_hide_report_button_fx68.css"; /**/
@import "./css/aboutaddons/addonlists_hide_manage_button_fx68.css"; /**/
/* @import "./css/aboutaddons/addonlists_colorized_button_icons_fx68.css"; /**/ /* requires replace_button_labels_with_icons option */
/* @import "./css/aboutaddons/addonlists_only_show_buttons_on_hover_fx68.css"; /**/

/* addons page appearance extra [requires one 'alternative appearance option' to be active] *****/
/* @import "./css/aboutaddons/addons_manager_alternative_appearance_compact_categories_fx68.css"; /**/

/* other settings *******************************************************************************/
/* @import "./css/aboutaddons/addonlists_hide_recommended_icon_fx68.css"; /**/
/* @import "./css/aboutaddons/addonlists_hide_allowed_in_private_windows_icon_fx68.css"; /**/

/* FIREFOX 60-67 ###############################################################################*/
/* NOTE: 'Version number for add-ons' will stop working soon when Mozilla drops XBL support. *****
         See https://bugzilla.mozilla.org/show_bug.cgi?id=1397874 *******************************/

/* version number for add-ons [Fx 60-67] - [only use one at a time] *****************************/
/* [!] version number's xml file now restores add-on 'description' on Firefox 64+ ***************/
/* @import "./css/aboutaddons/addonlists_show_addon_version_number.css"; /**/
/* @import "./css/aboutaddons/addonlists_show_addon_version_number_hide_description.css";

/* show 'last updated' date for add-ons [Fx 60-67] - [only use one at a time] *******************/
/* @import "./css/aboutaddons/addonlists_show_addon_date_last_updated.css"; /**/
/* @import "./css/aboutaddons/addonlists_show_addon_date_last_updated_start_position.css"; /**/

/* addons page appearance [Fx 60-67] - [only use one at a time] *********************************/
/* @import "./css/aboutaddons/addons_manager_alternative_appearance.css"; /**/
/* @import "./css/aboutaddons/addons_manager_alternative_appearance_aero.css"; /**/ /* <-- AERO colors */
/* @import "./css/aboutaddons/addons_manager_alternative_appearance_v2.css"; /**/
/* @import "./css/aboutaddons/addons_manager_alternative_appearance_v2_aero.css"; /**/  /* <-- AERO colors */

/* addons page appearance extra [requires one 'alternative appearance option' to be active] *****/
/* @import "./css/aboutaddons/addons_manager_alternative_appearance_compact_categories.css"; /**/

/* compact item lists [Fx 60-67] - [only use one at a time] *************************************/
/* @import "./css/aboutaddons/addonlists_compact.css"; /**/
/* @import "./css/aboutaddons/addonlists_compact_more_compact.css"; /**/

/* other settings [Fx 60-67] ********************************************************************/
/* @import "./css/aboutaddons/addonlists_disabled_addons_colorized_icons.css"; /**/ 
/* @import "./css/aboutaddons/addonlists_disabled_tag_hidden.css"; /**/
/* @import "./css/aboutaddons/addonlists_only_show_buttons_on_hover.css"; /**/
/* @import "./css/aboutaddons/addonlists_replace_button_labels_with_icons.css"; /**/    
/* @import "./css/aboutaddons/addonlists_move_button_to_start.css"; /**/
/* @import "./css/aboutaddons/addonlists_green_dot_hidden.css"; /**/    
/* @import "./css/aboutaddons/details_page_alternative_content_order.css"; /**/ 
/* @import "./css/aboutaddons/details_page_switch_banner_label_position_for_themes.css"; /**/
/* @import "./css/aboutaddons/search_category_always_visible.css"; /**/ /* not for recent Fx versions */

/* FIREFOX 60+ #################################################################################*/
@import "./css/aboutaddons/addonlists_private_browsing_notice_hidden.css"; /**/
@import "./css/aboutaddons/recentupdates_category_always_visible.css"; /**/
@import "./css/aboutaddons/recentupdates_category_last_category.css"; /**/
/* @import "./css/aboutaddons/availableupdates_category_always_visible.css"; /**/
@import "./css/aboutaddons/availableupdates_category_last_category.css"; /**/

/************************************************************************************************/
/* about:preferences ****************************************************************************/
/************************************************************************************************/

/* preferences page appearance - [only use one at a time] ***************************************/
/* @import "./css/aboutpreferences/preferences_alternative_appearance.css"; /**/
/* @import "./css/aboutpreferences/preferences_alternative_appearance_aero.css"; /**/   /* <-- AERO colors */
/* @import "./css/aboutpreferences/preferences_alternative_appearance_v2.css"; /**/

/************************************************************************************************/
/* about:newtab / about:home ********************************************************************/
/************************************************************************************************/

/* a dark appearance for inbuilt 'Dark' theme is present by default in Firefox 61+ **************/
/* @import "./css/aboutnewtab/dark_appearance.css"; /**/
/* alternative background color for about:newtab/home pages 'Dark' theme present in Firefox 61+ */
/* @import "./css/aboutnewtab/dark_appearance_alternative_background.css"; /**/

/************************************************************************************************/
/* about:config (Firefox 67+) *******************************************************************/
/************************************************************************************************/

/* @import "./css/aboutconfig/aboutconfig_compact_appearance.css"; /**/

/************************************************************************************************/
/* WEB CONTENT **********************************************************************************/
/************************************************************************************************/

/* top level image on white background - [only use one at a time] *******************************/
/* [!] this settings can sometimes cause glitches ***********************************************/
/* @import "./css/webcontent/toplevel_image_classic_v1.css"; /**/
/* @import "./css/webcontent/toplevel_image_classic_v2.css"; /**/

/* Screenshots - internal browser add-on ********************************************************/
/* @import "./css/webcontent/screenshots_alternative_save_ui.css"; /**/

/* CUSTOM SCROLLBARS VARIABLES (Firefox 63+ only) - EXPERIMENTAL ********************************/
/* [!] Might not work on every page! This issue is for Mozilla to solve. ************************/
/* [!] not compatible with custom scrollbar JavaScipt userChrome scripts ************************/
/* [!] custom size values only compatible with 'web content' scrollbars at the moment ***********/
/* [!] more info inside 'custom_scrollbar_appearance.css' file **********************************/
/* @import "./config/custom_scrollbar_appearance.css"; /**/     /* <--- EXPERIMENTAL */

/* Autofill forms (Firefox 67+ only) - disable CSS3 filter background ***************************/
/* @import "./css/webcontent/autofill_forms_background_white.css"; /**/ 

/************************************************************************************************/
/************************************************************************************************/
/* Create a new file "my_userContent.css" and add own/custom code to it. ************************/
@import "./my_userContent.css"; /**/
/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/

[Aris-t2]

Unfortunately there is no way to fully detect the currently used locale on every required level (link) to add code to the file. You have to override the code manually. For Russian locale you need this for example:

    addon-page-options panel-list {
      max-width: 400px !important;
    }

    addon-page-options panel-list panel-item {
      min-width: 380px !important;
      width: 380px !important;
    }

    link:-moz-any([href$="panel-item.css"],[href$="panel-list.css"]) ~ button label[accesskey] {
      min-width: 390px !important;
      width: 390px !important;
    }

[Acid-Crash]

Understood. I'll try later this evening. THX

[Acid-Crash]

Yup. Works. 440px were sufficient.

[Aris-t2]

Found a nice workaround. No need to manually adjust the width anymore. I will add 440px for Russian locale on next update.

[Acid-Crash]

BTW, right now I use the following technique for identify Locale switches. But within UserJS to define different labels, not sure if this can be adapted for userContent

[Aris-t2]

This worked for two of the three rules ( html[lang...] ... code), but the last one required a different approach. Using variables is the solution in this case.