HTML based add-on manager / about:addons

[Aris-t2]

With current CustomCSSforFx we are able to... ... use a visually clean and full sized add-ons manager again (enabled by default). ... restore add-ons version number (for enabled add-ons only). ... use buttons instead of the ugly menu popup (may cause overlapping on small screens). ... use (very) compact add-on lists. ... show buttons on hover state only. ... replace button labels with icons (affect all button within add-ons page). ... colorize button icons, if above option is active. ... hide 'report' and 'manage/expand' buttons. ... hide 'recommended' and 'allow in private window' icons

Options have to be set inside userContent.css.

[krystian3w]

Maybe still no works for Firefox interface.

[Aris-t2]

@chamaramokai

You have to enable the option inside userContent.css, if it should work on websites! Tested on Nightly and yes, this question is wrong here inside "[Firefox 68+] HTML based add-on manager / about:addons - changes & new options" thread.

There is a thread for this: [Firefox 64+] Basic 'scrollbar appearance' properties setable via userChrome.css/userContent.css

General questions can be asked in this thread too: [!] GENERAL discussion, feedback, questions belong here! (v8)

[chamaramokai]

Thank you for the quick response, worked perfectly. I'll post any other questions i have in the future in the proper spot you have linked.

[ImSpecial]

Hey Aris! I use your css that gives me this, my question is what do I edit if I want to compress them a little bit? Basically I have a little scroll bar I want to remove and have all my addons show without needing to scroll down the page, I only want them compressed a little, like 2px or whatever, for that reason I don't like your alternatives (1) (2) .

[Aris-t2]

@ImSpecial

Try to modify the top and bottom padding values;

addon-card:not([expanded="true"]) .addon.card {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

[Pizzapops]

@Aris-t2 I had to modify addonlists_hide_in_private_windows_icon_fx68.css and addonlists_hide_reccommended_icon_fx68.css for them to work in current FX70 Nightly.

@-moz-document  url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {

.addon-badge-private-browsing-allowed {
    background-image: none !important;
  }
}

@-moz-document  url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {

.addon-badge-recommended {
    background-image: none !important;
    background:transparent !important;
  }
}

[Aris-t2]

Thanks for the note.

[Pizzapops]

A few minor mods to my column addons list display and the dark version that I prefer. If interested, please see the readme file in the zip file. Yes, I have a lot of disabled extensions and ugly themes. It helps in visualizing the end results of my work. The goal is to see maximum items with no scrollbars. addonlist_columns_3.zip

[irvinm]

With recent versions of Firefox, they have been trying to add native support for dark themes. In doing so they have added some about:config values to support this:

user_pref("browser.in-content.dark-mode", true); user_pref("ui.systemUsesDarkTheme", 1);

With these values enabled and "addons_manager_alternative_appearance_fx68.css" (with default other options in userContent.css), leaves it in a mixed color state:

Disabling "addons_manager_alternative_appearance_fx68.css" looks like this:

Is there an easier way to allow dark colors, but also retain the wider spacing? [I usually use the "compact" CSS as well] I could obviously find\replace all of the colors I want to change within addons_manager_alternative_appearance.css and addons_manager_alternative_appearance_fx68.css but that might make my upgrade process for this customization a lot harder.

Or maybe the question is: Are there plans to support darker colors? I do see there are some hard coded color values in the CSS. Or would it make sense to have a way to ignore colors while retaining other changes?

[Aris-t2]

I will add support in the future. Looks like code has to be set inside own queries:

@supports -moz-bool-pref("browser.in-content.dark-mode") {
@media (prefers-color-scheme: dark) {
}}

[gabri25ele]

Is possibile to have in grey the addons disabled also without "./css/aboutaddons/addons_manager_alternative_appearance_fx68.css"?

[Aris-t2]

Could you explain this differently? Not sure what you mean here.

[gabri25ele]

Could you explain this differently? Not sure what you mean here.

addons disabled list is grey

only with this option (./css/aboutaddons/addons_manager_alternative_appearance_fx68.css)

I have not found any other methods, remaining with the default style of firefox (69)

[Aris-t2]

@gabri25ele

Remove this rules (ll. 41-45) https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/aboutaddons/addons_manager_alternative_appearance_fx68.css#L41

[gabri25ele]

@gabri25ele

Remove this rules (ll. 41-45) https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/aboutaddons/addons_manager_alternative_appearance_fx68.css#L41

no. 🤨 why don't we understand? let's start from zero. take the extensions page without any changes.

the disabled addons are in the same hue of the enabled addons. If I would like to change the hue (and only the hue) of disabled addons (like previous firefox versions or like this https://user-images.githubusercontent.com/33927879/65025328-d108ff80-d936-11e9-9a76-04090fdebbe2.png), what Can I do?

[Aris-t2]

    section[section="1"]  .addon.card {
      background: blue !important;
    }

Look through the file for more details on how to modify stuff there: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/aboutaddons/addons_manager_alternative_appearance_fx68.css

[gabri25ele]

yes that but only that and no one in the css? that was my initial question I can delete all the text except for that

/ reduce opacity for disabled add-ons / section[section="1"] { color: grey !important; opacity: 0.6 !important; filter: greyscale !important; }

ok, works, I thought it was to be changed the userContent.css

[hopalongrock]

I use addons_manager_alternative_appearance_fx68.css, and the blue highlight disturbs my eyes.

How can I disable the blue background (i.e. no highlight) here. That is, the color of the selected addon should not be different from the others.

For me the the mouse cursor is enough.

[Aris-t2]

Remove lines 27-33: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/aboutaddons/addons_manager_alternative_appearance_fx68.css#L27

[hopalongrock]

Thanks, fine.

[Pizzapops]

Oct 10, 2019 Nightly update made changes in about:addons that affect colors. Especially noticeable on my dark/columns mod. The white areas should be dark gray. Time to dig through ShadowFoxContent.css and make adjustments. None of the other about pages have been affected (yet). More Mozilla change for the sake of change?

[Acid-Crash]

I believe this is an actual bug. On vanilla about:addons also have some incosistency in terms of background-color

[Pizzapops]

@Aris-t2 @Acid-Crash It must have been a Mozilla bug. Today's update is back to normal.

[irvinm]

Using FF70 and CustomCSSforFx v2.8.0 I've almost got about:addons the way I would like it but have a easy question I think. I want to be able to slide the addon names lower and within the browser, I can see they are currently handled with ".addon-name-container" (The red outline in the 1st picture) and if I change the value of "margin-top" from "-3px" to "5px" the names nicely center with this configuration.

I can't seem to find the right context\syntax to use within my userContent.css to make that happen.

I was able to slide the buttons down by using some CSS I found in another thread around some recent FF72 issues:

addon-list .more-options-menu :-moz-any(addon-options,plugin-options) panel-list {
  margin-top: 5px !important;
}

Final result changing the values within the browser only:

PS. The reason for the custom changes was that if I used addonlists_compact_more_compact_fx68.css, the buttons were basically over lapping and were difficult to use. I am trying to space things out a little more by simply using slightly larger icons and then adjusting the addon title text and the buttons.

[Aris-t2]

Your changes look good to me. I'm currently tweaking the code for the Fx72 version of this all and some results will be backported to the Fx68 version of the add-on manager files.

[irvinm]

Thanks @Aris-t2. The problem (as a userContent.css noob) is that I can't figure out what statement I should do to implement the change for the addon name.

I tried this (and some variants) and it didn't work. I could only change it dynamically in the browser.

.addon-name-containter {
   margin-top: 5px !important;
}

[irvinm]

Sorry to bother ... I figured it out. I found the code and copied the CSS path to get the desired solution. (Slowly learning ...)

html body div#main div addon-list section addon-card div.card.addon div.addon-card-collapsed div.card-contents div.addon-name-container {
    margin-top: 4px !important; 
}   

[Pizzapops]

Fx72 Addons Manager - grid version After Nightly 72 broke my column Addon manager, I saw a two column grid based one posted by MrOtherGuy. I ask if it could be expanded to more columns. Recently he posted a grid based multi-column version. THANKS MOG I have modified it to my personal preferences.

Try it if you care to. Fx72_AddonMgrGrid.zip

[Pizzapops]

Fx72Addons Manager - my columns update After working with MOG's work, I returned to making my addons manager compatible with Nightly 72. It now works! Includes dark version. You can try it too. Fx72_AddonMgrColumns.zip

Note: I do not take responsibility for drive space used or time used to evaluate.

[Pizzapops]

@Aris-t2 While working on the add-ons managers, I opened addons_manager_alternative_appearance.css and EmEditor gave me a syntax error. This also happens with the V2 and fx68 versions.

Also: Today's Nightly update caused hiding the private windows icons to be nonfunctional. **Disreguard........My typo error in userContent.css!

[Aris-t2]

I will look into the errors. Most likely there are tons of others.

[Pizzapops]

@Aris-t2 Today's Nightly 72 update makes me think the the MOZ Devs are just making changes just to irritate us.

[Acid-Crash]

IMHO those togglers are kinda nice. At least they don't take alot of space.

[Aris-t2]

I managed to work around the new changes and restore the other buttons back except the switch/toggler. Looks fine for me.

Not sure what to do with the themes area, there is a new enable/disable button, that might be replaced with a similar switch later.

[Acid-Crash]

Taking into account previous changes it might be good to wait for a couple of day and have a look if new changes emerge for the themes section

[Pizzapops]

I agree with @Acid-Crash, wait for the themes section to catch up with extensions page. I think the changes are some "me too" envy of the Chrome/ Vivaldi crowd. This is the current Vivaldi Developer extensions page:

[Aris-t2]

I pushed an update today anyways, but in general it always is a good idea to wait. ;-)

I'm not a fan of the Chromium (Chrome/Vivaldi) extension page as it misses add-ons main options button, but that is just my opinion. After using Vivaldi as my main browser for over half a year now, I got used to it. There is no much need for configuration after setting up everything.

Mine looks like this:

[HAMiDY25]

Doesn't work anymore?

addonlists_disabled_addons_colorized_icons.css

FF70 x64 Win10 1803 x64

[krystian3w]

I suppose possible override effect if image not use canvas.

[Aris-t2]

@HAMiDY25 That option is not supported on Fx 68+. However the non-colorized icons for disabled add-ons will be "fixed" on next update. Last one broke it.

[Acid-Crash]

Hi @Aris-t2 I have a question regarding _addonlists_show_buttons_instead_of_menu_popupfx72 On FF72 when I do not use _addons_manager_alternative_appearancefx68 I get the following result


I do understand that there is a clarification about this within userContent.css
But maybe it is possible to return those buttons back to the initial card container without that prerequest?

P.S. IF needed here is my current config

```css /* 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+ or 60-70+) **********/ /************************************************************************************************/ /* 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_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/72) *********************/ /* - 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_more_compact_fx72.css"; /**//* for addonlists_compact_more_compact_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-70+ ##############################################################################*/ @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]

I could not mange to restore "the old" habit where it was enough to use "position: relative" to keep the buttons where they initially have to be. Position absolute requires fixed values, but I guess one can use own left or right values in your case.

addon-list addon-card:not([expanded="true"]) panel-list {
  left: 420px !important;
  right: unset !important;
}

[Acid-Crash]

Thx, I'll try, Still, I recon there is no way to make it adapt to an actual window size?

[Aris-t2]

If there is, I have not found it yet. You can percent values for left/right rules and they will adapt to window size, but are still too glitchy.

[Aris-t2]

@Acid-Crash I posted a new version. There are separate options now and button position should work fine even without using the "alternative appearance".

@Pizzapops Sorry, but the "new changes" might have an effect on your custom grid/row view, if both styles are active.

[Acid-Crash]

Hi @Aris-t2. Yup, the latest update works fine. The best thing is, that it's compatible with my custom TwoRow layout.


THX for the help!

UPD. Minor bug found.

Seems like this can be fixed with

addon-page-options panel-list panel-item[accesskey][checked] {--icon: none !important;}

[Pizzapops]

@Aris-t2 The "new changes" will require a rework of my column/grid view. Due to holidays and a local project, I can not work on it until January.

[Aris-t2]

@Acid-Crash Thanks for the note.

@Pizzapops By then Mozilla will most likely have changed the code a few more times. ;-)

[Pizzapops]

@Aris-t2 I squeezed in some time to adapt the grid add-ons manager to 72+ & 2.93. Grid_addon_mgr_191214.zip The two css files go in the Chrome/css/aboutaddons folder. The replacement userContent.css only deals with about:addons . Other preferences from standard UserContent will have to be added. It is zoom compatible and adjusts for sidebar. The code is a little sloppy but it works (so far). Time to catch up on sleep.

Update: minor mods. More compact theme/extension detains. Grid_addon_mgr_200225.zip

[ImSpecial]

Looks like Firefox 72.0 broke some padding/made some stupid blue On/Off switches?

https://i.imgur.com/vRVAdAs.png https://i.imgur.com/AgWK87c.png