Style Details Panel like AMO: viewtopic.php?p=10070927#p10070927
Style Addons Manager ilke 3.x: viewtopic.php?p=10071503#p10071503
I've been playing around with 4.0 and I've found that I can't even use the new Addons Manager at all. It's completely designed from the ground-up to be used by people running high-resolution wide-screen monitors with Firefox maximized. I *never* run maximized... I am doing too much multi-tasking to do that. At first I just dramatically reduced the cartoon font sizes down and tried to kill some of the padding, but that didn't help as much as I thought it would. I was still getting a horizontal scroll bar at the bottom with virtually all of my *important buttons* obscured by the overflow. I also wanted to get back to the more familiar orientation of the old Addons Manager so I could reuse more of my style elements from my themes for Firefox 3.x. So I fixed it:
Unfortunately, this hack requires a BINDING to orient the category buttons horizontally, so this hack will not work in a userStyle. I thought I would share my methods here so anyone could use them in a theme if they so wished. First step, the binding, you need to throw this into your globalBinding.xml file:
Code: Select all
<binding id="addons-richlistbox"
extends="chrome://global/content/bindings/richlistbox.xml#richlistbox">
<content>
<children includes="listheader"/>
<xul:scrollbox orient="horizontal">
<children/>
</xul:scrollbox>
</content>
</binding>
Now for the CSS. I"m using !important tags on everything because for now I'm not building my own AOM, just forcing this hack on the default theme. (I have removed the mozapps skin package in 4.0 by adding appversion<3.7 to mozapps line of chrome.manifest). So be aware that if you are building this from scratch you will not need some of the manipulations I have here, mostly just the binding, the orientations and the method for hiding disabled categories. This could be used verbatim in a Firebird-style "light-weight" theme. I've tried to label everything.
Code: Select all
/* use smaller fonts */
#addons-page { font-size: 12px !important;}
#addons-page #categories { font-size: 8px !important; }
#addons-page .addon .name,
#addons-page .addon .version,
#addons-page .addon .disabled-postfix,
#addons-page #header-name { font-size:14px !important; }
/*** categories ***/
/* load the binding that makes categories horizontal */
#addons-page #categories > scrollbox > .scrollbox-innerbox {
-moz-binding: url("chrome://global/skin/globalBindings.xml#addons-richlistbox"); }
/* puts categories on top of addons */
#addons-page > hbox { -moz-box-orient: vertical !important; }
/* places category labels under icons */
#addons-page .category {-moz-box-orient: vertical !important; }
/* sets category width and height */
#addons-page .category:not([disabled]) {
min-width: 7em !important;
width: 100% !important;
height: 55px !important;
padding: 5px !important;}
#addons-page .details-container,
#addons-page .category-name,
#addons-page .category-badge {
-moz-margin-start: 3px !important;
-moz-margin-end: 3px !important; }
/* hides disabled categories */
#addons-page .category[disabled] {
width: 0px !important; padding: 0px !important; }
/* hides unneeded splitter between categories and addons */
#addons-page .pane-splitter { display: none !important; }
/*** addons lists ***/
#addons-page #header {
min-width: 9em !important;
height: 30px !important;
padding: 2px !important; }
/* thin-out search filter bar */
#addons-page #search-list .search-filter { padding: 3px !important;}
/** Restyle entries **/
#addons-page button > .button-box { padding: 2px !important; }
#addons-page #search-list .addon,
#addons-page #addon-list .addon,
#addons-page #updates-list .addon {
background-image: none !important;
padding: 2px !important;
border: 2px solid rgba(0,0,0,.1) !important; }
/* makes "active" addon border black to stand out */
#addons-page #search-list .addon[active="true"][selected="true"],
#addons-page #addon-list .addon[active="true"][selected="true"],
#addons-page #updates-list .addon[active="true"][selected="true"] {
border-color: rgba(0,0,0,.5) !important; }
/* makes "pending" addon border yellow instead of red */
#addons-page #search-list .addon[pending="true"],
#addons-page #addon-list .addon[pending="true"],
#addons-page #updates-list .addon[pending="true"] {
border-color: rgb(250,190,26) !important; }
/* makes disabled addons more obvious */
#addons-page #search-list .addon:not([active="true"]),
#addons-page #addon-list .addon:not([active="true"]),
#addons-page #updates-list .addon:not([active="true"]) {
background-color: rgba(0,0,0,.05) !important; }
#addons-page #search-list .addon:not([active="true"]) .icon,
#addons-page #addon-list .addon:not([active="true"]) .icon,
#addons-page #updates-list .addon:not([active="true"]) .icon {
opacity: 0.6 !important; }
Edit 8/15/10: Updated style of add-on entries to include updates and searches.