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).

[Pizzapops]

@Aris-t2
I finally tinkered with the compact grid addons.




The black theme (Dark 1.2) has is not ideal. but other black themes get ugly.
Grid_Addons_91.zip

[Pizzapops]

@Aris-t2
Looks like Mozilla added to the about:addons themes page. Colorways didn't affect my grid display but does not seem necessary.

y.

[Aris-t2]

You are right, there is no point for this info to be there.

section[section="2"] :is(h2,h3){
  display: none !important;
}

[Pizzapops]

@Aris-t2
I noticed lately that the options button is missing for extensions. Win 10 , FX Nightly, 4.1.1. For a test, I used the userContent.css in 4.1.1 an only activated 2 additional lines: show buttons instead of popups & replace labels with icons. The Options button has no icon. All versions from the last Mozilla release are the same. Waterfox 4.03 still works. Did Mozilla Mozilla move, rename or delete the icon?

[Aris-t2]

Please test the latest pre build.

[glennpc]

Buttons on right side not lining up the same way as they did using latest FF Nightly.
I am using addonlists_show_buttons_instead_of_menu_popup.css

[Aris-t2]

@glennpc
Check custom_css_for_fx_v4.1.3pre4.zip.

[glennpc]

@Aris-t2
Thank you! Buttons look good again.

On another note, is there any way to hide the Colorways from showing under Themes?

[2BeeOrNot]

@glennpc
This works for me:

/* hide Colorways section */
.monochromatic-addon-list { display: none !important; }

[glennpc]

Thank you so much 2BeeOrNot!

[Pizzapops]

Looks like DEV crew is tinkering with Nightly Addons. After current update, the Extensions icon is stuck on the far right of the address bar and cannot be moved. Clicking on it produces a drop-down menu of extensions. The bottom line is a selection for Manage Extensions and will get you the "normal" manage pages.

Note: When using Black7375 code, the button goes straight to old manage pages but still cannot be moved.

[Aris-t2]

One more non-movable button, great.

I might add an option to hide it completely on next update, but it can not become "movable" by CSS. A JS script on the other hand could solve this.

[glennpc]

On Fx 110, addonlists_show_buttons_instead_of_menu_popup.css is now overlapping with the remove button:

[Aris-t2]

Test latest dev build https://github.com/Aris-t2/CustomCSSforFx/releases/tag/4.2.9pre

[Pizzapops]

The unmovable "Unified Extensions" buttons (addons) can be removed using Ghacks.net post.

1. Open about:config in a new tab. Click on Accept the Risk and Continue button.
2. Type or paste the following flag's name in the text box. extensions.unifiedExtensions.enabled
3. toggle it to false and restart Firefox.

The locked addons icon will be gone and a moveable old style icon should be available.

This worked for me for Fx 106, Beta and Nightly.

[gabri25ele]

The unmovable "Unified Extensions" buttons (addons) can be removed using Ghacks.net post.

Ghacks was late this time, on reddit they recommended it as early as January 16

[Speravir]

@Pizzapops and @gabri25ele

1. This issue as about the addon manager available through about:addons, not about the new unified extensions button and popup menu. You could add your notes to Unified Extensions button and menu #547, instead.
2. This said: From what I read the setting extensions.unifiedExtensions.enabled is temporary only and will be removed in the future. The button can be made movable with a userscript, but perhaps it will be made so by default if there are enough supporters, cf. Extension button | Firefox Support Forum | Mozilla Support and links found there.

[SlaveOfCats]

Not sure how long this has been happening, I just noticed it in FF 108. In the Add-ons Manager, some add-ons open their Options page in the Add-ons Manager tab rather than a new tab. I have two that do that, and for those, the display is just a little messed up.

For Firefox Multi-Account Container add-on, the button near the end of the page is cut off:

For Keyword Search, I can scroll to see all of the options, but there is a lot of available space on the page, so I wonder why scrolling is necessary:

I have the following enabled:

• addons_manager_alternative_appearance.css
• addonlists_show_buttons_instead_of_menu_popup.css
• addonlists_hide_report_button.css
• addonlists_show_addon_version_number.css
• addonlists_hide_recommended_icon.css
• recentupdates_category_always_visible.css
• availableupdates_category_always_visible.css
• availableupdates_category_last_category.css
• recommendations_category_always_hidden.css

I'm using CSSforFx 4.2.9v3.

[Aris-t2]

Unfortunately this is a Firefox bug. This happens here too without any custom code inside chrome folder.

[Aris-t2]

Forgot to say, this only happens for zoom levels 90% and lower. When using default zoom level of 100% this issue is not present.

[Aris-t2]

Adding this to userContent.css or my_userContent.css should help.

@-moz-document url-prefix(about:addons),
	url-prefix(chrome://mozapps/content/extensions/aboutaddons.xhtml) {
					
	/* fix Firefox bug */
	#addon-inline-options {
	  height: unset !important;
	  min-height: 100% !important;
	}
	
	.inline-options-stack {
	  height: unset !important;
	  min-height: 500px !important;
	}
}

[SlaveOfCats]

Thanks for the code, I appreciate it. It worked great for Keyword Search, but it made half of the options for Multi-account Container inaccessible.

I can live with FF's bugs. :-)

[Aris-t2]

I looked into this again. See 4.3.0v5

The area gets a fixed height value by Firefox, but that value is not always suitable.
I increased it to a much higher one for now and also tested a few add-ons with inline settings. Everything shows up. You will see a scrollbar, although it might not be required.

@-moz-document url-prefix(about:addons),
	url-prefix(chrome://mozapps/content/extensions/aboutaddons.xhtml) {
	#addon-inline-options {
	  height: 2000px !important;
	  min-height: unset !important;
	  max-height: unset !important;
	  overflow-y: auto !important;
	}
	
	.inline-options-stack {
	  height: unset !important;
	  min-height: calc(100vh - 200px) !important;
	  max-height: calc(100vh - 200px) !important;
	  overflow-y: auto !important;
	}
}

[Pizzapops]

Aris,
Thanks for all the help over the past years. Eighteen months of knee surgery caused me to fall behind on adapting to Mozilla'."IMPROVEMENTS" to Firefox. I made a feeble attempt to update my several portable versions of Firefox. ESR & Waterfox are useable but still need some fixes. I have switched totally to Vivaldi.

Regards and keep up the good work,
Pizzapops

[p1nkyy]

Hello, sorry for out of topic question but is it possible to go to Add-on Manager from the Extensions button in the Toolbar?
Right now here's how my Extension button looks like:

Also is it possible to open the Options of an Add-on in a new tab instead of in the Add-on Manager? How? Thank you in advance.

[Aris-t2]

It is not possible, if overflow_menu_horizontal_remove_text.css is active. The item to go to add-ons manager gets hidden on purpose.

[p1nkyy]

Which one is not possible? I don't have overflow_menu_horizontal_remove_text.css but the 2 behavior I described aren't able to be done anyway.