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.