MozillaZine

Seriously hacking the new Addons Manager

Discuss application theming and theme development.
patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 13th, 2010, 2:29 am

Edit: 10/29/10 Please refer to page 4 for the most recent hacks:
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:

Image

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.
Last edited by patrickjdempsey on October 29th, 2010, 5:33 pm, edited 8 times in total.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted August 13th, 2010, 6:25 pm

Nice job, Patrick. This is WAY better than the one that is being shipped. You completely eliminated the wasted space by getting rid of that awful sidebar and reducing the font sizes. I like the feel of familiarity, too, with the tabs on top. =D>

Just one teeny tiny observation is that I see you are defining font-size with "px". I don't know if you tested this on Linux, but I ran into issues a while back and had to make sure everything was using "pt" instead.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 13th, 2010, 10:11 pm

CatThief wrote:Just one teeny tiny observation is that I see you are defining font-size with "px". I don't know if you tested this on Linux, but I ran into issues a while back and had to make sure everything was using "pt" instead.


Yeah, this is just to hack the default for personal purposes. For an internal theme solution, the best thing would just be to change the percentage font sizes back down to sensible sizes.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 15th, 2010, 2:01 pm

I've also love to be able to remove the Show More button but I'm not sure if they actually plan on *using* it or not. More information is gained by double-clicking on each item and I don't see any reason of having the file size and "website" link in this menu, it just seems like extra for the sake of extra. In fact, I don't see any relevance of having the file size listed at all, and certainly not being able to "sort" by it. Of course, removing the "Size" sorter makes having that whole huge empty toolbar with two items in it seem like a waste. It would be nice to move those up to the search toolbar! I'm also not really getting the point of the ratings graphs. Is that for your personal rankings? Will the ratings be piped in from AMO or sent to AMO? The date updated tag is nice, it gives you an idea of how up-to-date your add-ons are. I'm also pretty positive the Undo button is completely useless.

It's really too bad that it would require an extension to add a restart button into the search toolbar. I never understood why they didn't just do that in previous versions instead of having that annoying notification box... but this item-specific-restart behavior is even MORE annoying IMO.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 15th, 2010, 3:04 pm

Modifications to clean up the entries:

Code: Select all
/** Remove unwanted UI elements **/

/* Size sorter */
#addons-page .sort-controls .sorter[anonid="btn-size"],     
/* Unknown dates (common on Personas) */
#addons-page .addon label[value="Unknown"],
/* (disabled) tag for Themes */
#addons-page #addon-list .addon[type="theme"] .disabled-postfix,
/* Show More button */
#addons-page #search-list .extra-details + hbox,
#addons-page #addon-list .extra-details + hbox,     
#addons-page #updates-list .extra-details + hbox,             
/* Show More details box */
#addons-page #search-list .extra-details,
#addons-page #addon-list .extra-details, 
#addons-page #updates-list .extra-details,                           
/* Ratings */
#addons-page #search-list .incompatible-warning + hbox,
#addons-page #addon-list .incompatible-warning + hbox,
#addons-page #updates-list .incompatible-warning + hbox
{ display: none !important;}


/** move sorters up to main toolbar **/

/* remove header name */
#addons-page #header-name { display: none !important;}

/* reverse header layout */
#addons-page #header { -moz-box-direction: reverse !important;}

/* hide sorter bar */
#addons-page .view-header {
height: 0 !important;
padding:0  !important;}

/* move sorters up */
#addons-page .sort-controls {
margin-top: -2.5em !important;
margin-bottom: 3px !important;
padding: 2px !important;}

/* make sorters looks like normal sorters */
#addons-page .sort-controls .sorter {
-moz-border-radius: 0px!important;
border: 1px solid rgba(0,0,0,.3) !important;
margin: 0 !important;}
Last edited by patrickjdempsey on August 16th, 2010, 11:19 pm, edited 1 time in total.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 15th, 2010, 7:13 pm

If you want to center the main category items, add pack="center" to your binding:

Code: Select all
  <binding id="addons-richlistbox"
           extends="chrome://global/content/bindings/richlistbox.xml#richlistbox">
    <content>
      <children includes="listheader"/>
      <xul:scrollbox orient="horizontal" pack="center">
        <children/>
      </xul:scrollbox>
    </content>
  </binding>


Another screen shot with all of the cleaning up:

Image
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 16th, 2010, 12:04 pm

Hmm... moving the sort buttons to the search toolbar appears to work fine when hacking the default Manager, but when doing it in a custom extensions.css file they do not respond to mouse clicks. I'm going to have to go back to the drawing board on that one! I might be able to put the fade style in the list-header and make the header completely transparent and then move it over 12em or so to leave room for the sort buttons.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted August 16th, 2010, 8:38 pm

I completely agree with all of the things you said. This thing is grossly large in every way, and the layout is a waste of space cluttered with unwanted gadgets. Just look how beautifully you brought it all under control with such a stylish and compact appearance. Your end result is superb!!!

I'm not sure what the plan is for the ratings. As for the Undo button, it actually worked for me when I tested it after disabling an extension.

Hold onto your hat, 'cause if you think this is bad prepare yourself for Options being placed inside a tab as well. It's all on the list of features to come in the new and improved Firefox 4 UI.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 16th, 2010, 11:20 pm

Aha! Finally found the trick for getting the sorters to work in the header-bar. Apparently the spacer element in the header is blocking the sorter? Weird stuff. So I'm nudging it over a bit when the sorters are shown.

Code: Select all
/* shift header spacer over because it blocks the sorters */
#addons-page #header #header-name:not([value="Get Add-ons"]):not([hidden="true"])
~ spacer { -moz-margin-end: 13em;}
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

aaron

User avatar
 
Posts: 3130
Joined: November 4th, 2002, 8:49 pm
Location: Texas

Post Posted August 17th, 2010, 7:32 am

I don't know why *everything* has to be in a tab nowadays.....

Good work Patrick.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 17th, 2010, 2:19 pm

Because someone has decided that Firefox (with no aspirations of becoming an operating system UI) should follow the workflow of Chrome (which was designed from the ground up to be an operating system UI). I honestly really liked the concept illustrations but as they have gone forward it's proven to be just too rigid and too *large* of a design. It looks cool in the illustrations, but in practical use, it just isn't practical. Oh well, 3rd-party Theme developers to the rescue.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 17th, 2010, 4:57 pm

I've been hacking together a Beta version of Stratini Padded anyone is welcome to check out:

https://addons.mozilla.org/en-US/firefo ... -2.2.3pre2

Right now, it's *really* messy with the 3.x and 4.0 styles mixed together in extensions.css... I thought at one point it would be OK to do that, but now it's just a confusing mess and I think I'll split them and just have two totally different style-sheets. It doesn't look like the screen-shot yet and I'm still missing several images, but it works at least!
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 26th, 2010, 6:53 pm

Well.... looks like I'll have to redo some of this to better support the "In-context" Add-On's Manager UI now appearing in 4.0b5pre.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 28th, 2010, 7:57 pm

As of build 20100828, I can no longer inspect the individual addon list-items using either DOM Inspector or the built-in Inspect tool. I've filed a bug on it, but this may make it more difficult to liberally theme the AOM.

https://bugzilla.mozilla.org/show_bug.cgi?id=591700
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Paenglab

User avatar
 
Posts: 198
Joined: December 30th, 2006, 2:20 am
Location: Switzerland

Post Posted August 29th, 2010, 4:10 am

No problem to inspect the items in AOM. Which version of DOMi are you using? I'm using v 2.0.7.
For me it works directly when I'm on AOM and open DOMi and use 'Select Element By Click'. Also 'Inspect Chrome Document' > 'Add-ons Manager' works.
Nuvola theme for Firefox and Thunderbird

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest