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.

[p1nkyy]

Hi, how to activate this? Didn't see any option in the userChrome.css other than Add-on Bar and I'm pretty sure this is different than Add-on Bar options. I do see the aboutaddons folder where there are several addons_manager_alternative_appearance.css inside

[Acid-Crash]

Hi @Aris-t2. Just checked out the new version. Congrats on bringing back control buttons. This is superb! A small suggestion thought, it would be good to have an option for icons instead of the labels on those buttons (on some locales those labes sure take alot of space)

UPD. or maybe reduce font size for those labels...

[Aris-t2]

@p1nkyy Options are set inside userContent.css.

@Acid-Crash I planned to look into the "button settings" later.

[p1nkyy]

@p1nkyy Options are set inside userContent.css.

Ah yes, sorry, didn't realize my Add-on Manager has changed. Thanks for your work maintaining this. You don't know how grateful I am!

[yochaym]

hi aris

it seems the shadow dom can be pierced. so you can use display flex on the .list in the shadow-root (instead of the inline-grid on the panel-list children) which will make it easier to justify and reorder the panel-items...

[Pizzapops]

@Aris-t2 The body columns work fine with the new more compact css file. No scroll bars w/ full screen. It can be 2 or 3 columns, 4, if text buttons are replaced with icons.

/* Firefox Quantum userChrome.css tweaks - about:addons with columns*********************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************Pizzapops***/

@import "./addonlists_compact_fx68.css";

@namespace html "http://www.w3.org/1999/xhtml";
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

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

    :root {
      --addon-icon-size: 24px !important;
    }
    body {
        height: 1020px !important; */ /* should be flexible */
        columns: 720px 2 !important; /* 3 optional */
        column-width: 600px !important; /* decrease if icon menu */
        column-gap: 40px !important;
        column-rule: 4px double #45A1FF !important;
    }
    .addon.card .addon-description {
      display: none !important;
    }

    addon-list[type="theme"] .addon.card {
      min-height: 25px !important;
    }

    .more-options-menu panel-list {
      top: 6px !important;
    }

    button {
      padding: 0px 2px !important; 
    }

}

[Aris-t2]

@yochaym Can your provide an example? This could help to improve the button code as custom button code affects all buttons atm, meaning editing the install, removed, pref ... buttons also affects those on the more details page.

@Pizzapops Looks great.

So far the the WIP of the button icon option:

[Pizzapops]

@Aris-t2 Looks good! Can the options and update icons be moved the left of the icons display?

[yochaym]

try with only this code in usercontent.css:

:-moz-any(plugin-options, addon-options) > panel-list {
    display: block !important;
    overflow: hidden !important;
    right: 0px !important;
    left: unset !important;
    top: 50%;
    transform: translatey(-50%);
    box-shadow: none !important;
}

div.arrow.top ~ div.list {
    display: flex !important;
    justify-content: end;
}

panel-item[action] {
    margin: 0 4px;
    background: var(--in-content-table-background);
}

panel-item[action="expand"] {
    display: none;
}

panel-item[action="preferences"] {
    order: -1;
}

[Aris-t2]

@Pizzapops All buttons are tied together right now. You could move all of the to top, right, bottom or left. Haven't tried to get separate buttons out of that area.

More settings incoming (2.5.9)

• replace button labels with icons
• show buttons on hover only

@yochaym This looks good, but what I actually meant is have you found a way to remove the button text without using the "button" tag. The "button" tag is used globally multiple times on add-on page and changing it affects every area.

[Achille-Grs]

Firefox 68. Simple appereance, center alignment and alinement for title and search!

[yochaym]

you can target just the panel-items button by using

link[href$="panel-item.css"] ~ button { }

if you don't mind the ugly... or something just on panel-item using

panel-item { color: transparent; fill: black; }

[Aris-t2]

Thanks, I didn't knew the trick with the $ in href$="panel-item.css". Now things can become slightly cleaner.

[bege10]

Thank you, Aris-t2! I load addons_manager_alternative_appearance_fx68.css with UserCSSLoader.uc.js and it works great. But addonlists_replace_button_labels_with_icons.css and addonlists_show_addon_date_last_updated.css don't work. What may be the reason?

[Speravir]

@bege10 I assume you speak of the UserCSSLoader in this updated version (Endor’s Github), right?

@Aris-t2 Now using addonlists_replace_button_labels_with_icons_fx68.css I would love to add some colour to the icons for distinction. If I understood how they are inserted I would even try it on my own, but I do not get it. And for the most right section there is unfortunately no button (not your fault, though).

[bege10]

@Speravir The version I use has almost the same code with changed createElement to createXULElement. It works much easier than editing userChrome.css and userContent.css

[Aris-t2]

@bege10 For Fx68+ you need to use addonlists_replace_button_labels_with_icons_fx68.css file.

addonlists_show_addon_date_last_updated.css is not available for Fx68+. This information is not part of the card tags anymore and can therefore not be made visible the way it was before.

@Speravir

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/aboutaddons/addonlists_replace_button_labels_with_icons_fx68.css#L26

The "fill" or "color" rules should help here:

fill: #002233 !important;

-->

panel-item[action="toggle-disabled"][data-l10n-id="disable-addon-button"] {
  --icon: url("chrome://browser/skin/zoom-out.svg") !important;
  fill: #002233 !important;
}

Edit: I will create an option for this at a later point.

Edit 2: the file would look like this:

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/

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

    panel-item[action="toggle-disabled"][data-l10n-id="disable-addon-button"] {
       fill: red !important;
    }

    panel-item[action="toggle-disabled"][data-l10n-id="enable-addon-button"] {
      fill: green !important;
    }

    panel-item[data-l10n-id="remove-addon-button"] {
      fill: red !important;
    }

    panel-item[data-l10n-id="install-update-button"] {
      fill: blue !important;
    }

    panel-item[data-l10n-id="preferences-addon-button"] {
      fill: grey !important;
    }

    panel-item[data-l10n-id="report-addon-button"] {
      fill: orange !important;
    }

    panel-item[data-l10n-id="manage-addon-button"] {
      fill: blue !important;
    }

    panel-item[data-l10n-id="ask-to-activate-button"] {
      fill: red !important;
    }

    panel-item[data-l10n-id="always-activate-button"] {
      fill: green !important;
    }

    panel-item[data-l10n-id="never-activate-button"] {
      fill: red !important;
    }

}

[Acid-Crash]

Hi @Aris-t2 Is it possible to remove/hide moreOprions/manageAddon button (chrome://browser/skin/chevron.svg) for _addonlists_replace_button_labels_withicons I feel like it does the same as if I click on the addon card, so I don't see any point in showing it in the first place...

UPD. looks like on release you need to add panel-item[data-l10n-id="expand-addon-button"] to exisiting panel-item[data-l10n-id="manage-addon-button"] because the icon seems to be invisible

[Aris-t2]

Doesn't look like we can hide the button like this:

panel-item[data-l10n-id="manage-addon-button"] { display: none !important; }

I don't see this one ( panel-item[data-l10n-id="expand-addon-button"] ) in my add-on manager, even with an icon.

Edit:

Button hiding works like this:

    panel-item[data-l10n-id="manage-addon-button"] {
      --icon: url("chrome://browser/skin/chevron.svg") !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      z-index: -1000 !important;
      opacity: 0 !important;
    }

Settings opacity only would hide the button to, but the rest moves the button out of the way to release the space, where the button was.

[Acid-Crash]

I don't see this one ( panel-item[data-l10n-id="expand-addon-button"] ) in my add-on manager, even with an icon.

Here how it looks in FF68

And here how it looks in Nightly

P.S. I'm on Win10

[Aris-t2]

OK, thanks.

[yochaym]

hi aris

please check the code example again. it makes it easy to rearrange the panel-items... in this instance hiding the expand panel-item and moving preferences to be first on the left.

[Speravir]

@bege10

It works much easier than editing userChrome.css and userContent.css

I used it once, too, but it went dysfunctional with Fx57, IIRC. I should give it a try again.

@Aris-t2

https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/aboutaddons/addonlists_replace_button_labels_with_icons_fx68.css#L26

Oops. It must have been too late in the night for me (or too early in the morning).

Edit 2: the file would look like this: …

A BIG thank you, works fine!

[Aris-t2]

@ yochaym Thanks again, used your cleaner method to restore the buttons. (Unused buttons don't appear anymore too, like did with my previous method).

@Speravir Option to colorize icons is now part of the latest version.

@Acid-Crash The "manage" button is now gone too. ;-)

[Speravir]

Option to colorize icons is now part of the latest version.

I noticed, thanks once again.

Not that important. but I also noticed that apparently most icons cannot be filled with colour. Luckily the two most “dangerous” (for removing and reporting addons) have a colour, though.

[Aris-t2]

@Speravir I can not confirm that. All button icons can be colorized here. Maybe color names work while hex colors do not?

Add-on with options

Plugin

[Speravir]

I can not confirm that. All button icons can be colorized here. Maybe color names work while hex colors do not?

Now that is strange. I just now intentionally restarted Firefox with deactivating everything else in my userContent.css, but it did not change here. In your (imported) userContent.css these are the only active styles for about:addons:

• addons_manager_alternative_appearance_aero_fx68.css
• addonlists_replace_button_labels_with_icons_fx68.css
• addonlists_colorized_button_icons_fx68.css
• addonlists_private_browsing_notice_hidden.css

[Aris-t2]

Looks like this for me in Fx68 and 70:

[Pizzapops]

@Aris-t2 Your mods are looking great! It seems like the html rollback to older about:addons was dropped yesterday in Nightly. My buttons are matched to toolbar buttons and icon colors were tweaked. I still have to work on my addon[expanded] page. If I switch my about pages from shadowfox dark to standard white, the buttons background and border disappear but they do show in the hovered state. Odd..

[bege10]

addonlists_colorized_button_icons_fx68.css v2.6.0 Windows 7 Professional 64 bit SP1 Firefox 68.0 64-bit

Only remove and report buttons are colorized.

[Aris-t2]

@bege10 I could reproduce this on Win7. Next update will fix the issue.

[Speravir]

That’s the issue I wrote above, good that it’s solved. Obviously I forgot important information.

[Aris-t2]

This issue was present in Fx 68 on Win 7, but not on Win10 and not with Fx70+ (at least for me), but after I ran my Win7 VM I could reproduce it. The -moz-context-properties: fill; rule was missing for "buttons/items", where Mozilla was not offering icons by default.

[krystian3w]

All interfaces should be Moz://a converted from XML/XUL/XBL to HTML5?

[Aris-t2]

Is this a general question?

Mozilla plans to replace everything xul related in time... no ETA on what will be replaced when...

[Acid-Crash]

Hi @Aris-t2. Some time ago we've been discussing the possibility to make extension panel 2-column style. The background for this was the need to keep visual contact with the specific extension (minimum scroll) when toggling its state (enabled-disabled) In the end I was able to achieve this (not without the help from StackOverflow)))
Maybe you find it useful

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

  @media (min-width: 960px) {

    addon-list[type="extension"] {display: flex;}
    addon-list[type="extension"] section[section="0"] {flex: 0 0 50%;}
    addon-list[type="extension"] section[section="1"] {
        flex: 1;
        margin-left: 10px;
        margin-top: -32px !important;
    }

    addon-list[type="extension"] addon-card:not([expanded]) .card-contents {width: 540px !important;}

  }

}

}

Here is how it looks by default


And here is a pic with some minor personal bells and whistles plus CustomCSSforFx enabled


Ahhh, still need some help(( When deleting addon the message-bar-stack section gets all messed up.

[Aris-t2]

@Acid-Crash You could move that item on top of the add-on list like a popup:

    message-bar-stack {
      position: absolute;
      top: 0 !important;
      left: 40% !important;
      right: 40% !important;
      z-index: 1000 !important;
    }

[Acid-Crash]

THX, now it works fine

UPD. there is still an overlap when deleting multiple entries.

UPD2. With the help of this I was able to get it right https://stackoverflow.com/questions/50447477/how-do-i-make-the-first-grid-item-span-100

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

  @media (min-width: 960px) {

    addon-list[type="extension"] {display: grid; grid-template-columns: repeat(2, 1fr);}
    addon-list[type="extension"] message-bar-stack {grid-column: 1 / -1;}
    addon-list[type="extension"] section[section="1"] {margin-left: 15px;}

    addon-list h2.list-section-heading {margin-top: 15px !important;}
    addon-list[type="extension"] addon-card:not([expanded]) .card-contents {width: 540px !important;}
    addon-list[type="extension"] addon-card .addon-description {font-size: 12px !important;}

  }

}


[Pizzapops]

@Aris-t2 I am still tweaking with add-on columns. I prefer something more compact with no scrollbars but admire @Acid-Crash's direction. This zip has 2 files to be placed in the ./css/aboutaddons folder and the userContent.css file I used. 07.27 Update: addons_compact_columns_V2.zip

Is there any way to sort themes and move Dark/Default/Light to end of list?

[Pizzapops]

@Aris-t2 When I did the column add-on display, I opted to comment out your opacity for disabled add-ons.

    /* section[section="1"] {
      color: grey !important;
      opacity: 0.6 !important;
      filter: greyscale !important; 
    } */

The last few days, it seems that Mozilla have added it into Nightly code. Inspector shows:

addon-card:not([expanded]) > .addon.card[active="false"] {
    opacity: 0.6 !important;
    transition: opacity 150ms, box-shadow 150ms!important; 
    }

I have been unsuccessful in disabling it. I believe it is a Mozilla "superfluous 
redundancy". There is section header for Enabled  & Disabled and every 
disabled add-on has the text notifier (disabled). Help?

Update: I finally figured it out. 

addon-card:not([expanded]) > .addon.card[active="false"] {
    opacity: 1 !important; 
    color: grey !important;
    }
Icons and theme stay full color, text muted.

Update 2: highight text fix.

addon-card:not([expanded]) > .addon.card[active="false"]:hover {
      color: HighlightText !important;
    }

[Aris-t2]

I tested this and it worked too:

addon-card:not([expanded]) > .addon.card[active="false"],
addon-card:not([expanded])[panelopen] > .addon.card[active="false"],
addon-card:not([expanded]) > .addon.card[active="false"]:focus-within,
addon-card:not([expanded]) > .addon.card[active="false"]:hover {
  opacity: 1 !important;
  transition: unset !important;
}

[ImSpecial]

Hi Aris, I use your "addons_manager_alternative_appearance_fx68.css" basically the very first pic in the OP, I'm wondering though if there is something I can add to it to make the zoom level about 90% for that page.

Basically open the "add-on page", hold CTRL+Scroll Wheel down to decrease the zoom level to either 90%-80%, and I find that much better to look at, is there a way to achieve this without having to manually adjust the zoom level with the mouse each time?

[Aris-t2]

You could try to add scale rule to about add-ons content, something like this example:

#main * {
  -moz-transform: scale(.97) !important;
}

[Aris-t2]

I though some sort of scaling would be easier than changing font sizes, margins, paddings, widths and heights for everything within add-on mangers ui, I guess I was wrong. ;-)

[ImSpecial]

Yeah, it actually breaks a ton of random sites too I've noticed, I've had to revert the change and I guess I'll just deal with it currently as is, thanks though.

There is apparently this bug in Firefox too, where pages don't but should remember their "zoom level", since I have both these set as;

"browser.zoom.siteSpecific" set as True "privacy.resistFingerprinting" set as False

about:addons page should remember... so maybe if this gets fixed Firefox will just remember my 90% zoom preference.

https://bugzilla.mozilla.org/show_bug.cgi?id=1567723

[Aris-t2]

Zoom level on about:addons sticks for me on beta and Nightly, haven't tested release channel.

[Speravir]

Regarding zoom: This seems to be a bug in Firefox: According to a comment by Semtex503 in Is it possible to have the "about:addons" load at 90% page zoom? (FireFoxCSS subreddit) this is the bugzilla ticket 1567723 - New Tab Page zoom would not work properly (apparently only New Tab Page mentioned).

[Speravir]

Aris, now having addonlists_show_addon_version_number_fx68.css active I sometimes fooled myself, when updates came very quick. I read the version number and thought “Hmm, I did this update already yesterday why is there still an update info?" Id took frequently some time to understand my error: The shown number is now this of the old, active version, not of the update (this has been different in the past). So I decided it would be better to remove the version number in the update pane, maybe you want to add this as additional (inactive?) rule for users of the above mentioned rule:

@-moz-document  url-prefix(chrome://mozapps/content/extensions/aboutaddons.html) {
div[current-view="updates"] .addon-name[title]::after { display:none !important; }
}

[Aris-t2]

On my Fx69 beta and Nightly I set zoom to 90% a while ago and it still is set to it. Not sure, if the bug only affects a specific version of Firefox, but I was not able to reproduce it.

Good call about the version number bug:

I will replace the initial rule with div:not([current-view="updates"]) .addon-name[title]::after.

[chamaramokai]

Not sure what is wrong with my settings i am trying to use the custom_scrollbar_appearance.css to change the colours for my bar to be "scrollbar-color: grey black;" but it's not changing anything on my scrollbar to any colour on firefox 68.0.2 sorry if this is the wrong spot to post, first time posting. first screenshot is userchrome.css file, second it custom_scrollbar_appearance.css third is my current fx scrollbar comparison on the right with the one with the settings i double checked on what it should look like in the middle. everything else works fine thank you for the continued support for fx57+.