Seriously hacking the new Addons Manager

[patrickjdempsey]

Wow, cool... that is an oldy!

[Blisset2]

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

The Size Sorter is very important because there are very heavy addons (20-30 MBs) and very light addons (10-100 KBs) and this makes the difference from a Firefox Startup in 3-4 seconds to a Firefox startup in 30-40 seconds.

Look this
http://img146.imageshack.us/img146/3025/firefox366secondstoload.png

Therefore knowing the size of each addon means to know how this slow Firefox. The Size Sorter is very useful.

The idea has been voted in the 3rd position in Firefox Beta Forum, this means people takes it in good account.
http://firefox.uservoice.com/forums/57440-firefox-4-beta/suggestions/890849-speed-up-firefox-startup-?page=2&ref=title

[malliz]

Please don't cross post it's against forum rules. One copy of that pic as a thumbnail would have been more than enough

[patrickjdempsey]

@Blisset2, The Size sorter is not in the latest nightlies since In-Content UI landed and in-fact, they are not even showing size in the "detail view" either. While I don't think file size merits being in the list part of the UI, I don't see any reason to remove it from the "detail view" as they have decided, but that's none of my business. File size may be in indicator of an irresponsibly designed add-on but I doubt it's the main factor in slowing down Firefox. I certainly don't think file size alone is a very accurate diagnostic tool, and in-fact equating large file size with slow start-ups might even be dangerous by giving people the completely wrong idea. For instance, that assumption would follow that small add-ons should be overlooked when troubleshooting, even though a small relatively simple add-on can cause all kinds of problems.

I've been working on In-Content UI hacks. Unfortunately, the structural changes that landed with In-Content UI severely breaks my hacks in several fundamental ways. The structural order I preferred: Category Strip, Header + Sorters, List-box is no longer possible. I've tried all different combinations of negative margins to attempt to rearrange the structure, but even though it visually looks good, the Header buttons end up unresponsive to the mouse. I thought there was some kind of "click-through" option in HTML/XUL that allowed you to have a transparent element over top of buttons and the buttons would still work... but my searches have been fruitless.

[patrickjdempsey]

I thought there was some kind of "click-through" option in HTML/XUL that allowed you to have a transparent element over top of buttons and the buttons would still work... but my searches have been fruitless.

Duhh.... I forgot about z-index!!!! OK folks, I'm whipping up something good!

[patrickjdempsey]

This is what I've got so far. As you can see I've stuffed everything into the header

[Blisset2]

@Blisset2, The Size sorter is not in the latest nightlies since In-Content UI landed and in-fact, they are not even showing size in the "detail view" either.

So, in next Firefox we will see no sizes neither in details view? I think this is very stupid, considering the big importance people gave to it voting in the Beta Forum.

I doubt it's the main factor in slowing down Firefox

You can test it, disable big addons and you will see Firefox startup very faster. Enable 10 big addons and difference is 30-40 seconds slower, if you instead enable 20 small addons the difference is less than 10 seconds. The Size generally is proportional to loading time.

[patrickjdempsey]

Please stop spreading that idea around, it's dangerous and unfounded. As I said before:

I certainly don't think file size alone is a very accurate diagnostic tool, and in-fact equating large file size with slow start-ups might even be dangerous by giving people the completely wrong idea. For instance, that assumption would follow that small add-ons should be overlooked when troubleshooting, even though a small relatively simple add-on can cause all kinds of problems.

If you really think this is a major factor, then just look at that information on AMO and simply don't install any "big" addons... however you choose to quantify "big". Also, please take your arguments about this out of this thread and back to the Builds forum where they belong. I placed this thread in Theme Development because it's about information regarding how to hack the Addons Manager for fellow themers. It is not and I will not tolerate it being a complaints box for Firefox 4.0.

[patrickjdempsey]

Is it just me or does the new Add-ons Manager inappropriately mix up the use of buttons and text links? For instance, there is a Restart text-link which should be a button and the "More" buttons should be a text-link. Huh?

Edit: Ah-ha! Weirdness... the "More" button.. *is* a button but in the default theme they are stripping out the button styling and restyling it to look like a text-link. How weird is that?

[patrickjdempsey]

I've run into several stumbling blocks where some styles for parts of the AOM are specified in XUL. I've written a bug on it:
https://bugzilla.mozilla.org/show_bug.cgi?id=593754

[patrickjdempsey]

Well, here are the juicier tid-bits from my latest version. I've left out all of the mundane basic styling stuff that should be self-explanatory. This is actually a version for a theme, not just a hack. Anyone who is interested in a hack for the default based on the latest changes, let me know.

First, the binding for globalBindings.xml:

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>


I'm putting all of my code for 4.0 into a separate file called extensions40.css that I'm calling from extensions.css... a smarter way to do it would be to use an overlay and load it via the chrome.manifest, but this works.

Code: Select all

/************* rearrange everything ***********/

/* load the binding that makes categories horizontal and centered */
#addons-page #categories > scrollbox > .scrollbox-innerbox {
  -moz-binding: url("chrome://global/skin/globalBindings.xml#addons-richlistbox"); }

/* puts categories on top of addons */
#addons-page > #header + hbox { -moz-box-orient: vertical !important; }

/* places category labels under icons */
#addons-page .category {-moz-box-orient: vertical !important; }

/* rearrange the z-index of elements so buttons still work */
#addons-page #header + hbox {
position: relative !important; z-index: 1 !important;}
#addons-page #header {
position: relative !important; z-index: 2 !important;}
#addons-page  #search-filter {
position: relative !important; z-index: 3 !important;}

/* rearrange the order of items in the header */
#header #back-btn { -moz-box-ordinal-group: 1 !important;}
#header #header-searching { -moz-box-ordinal-group: 2 !important;}
#header #forward-btn { -moz-box-ordinal-group: 3 !important;}
#header #header-utils-btn { -moz-box-ordinal-group: 4 !important;}
#header #header-search { -moz-box-ordinal-group: 5 !important;}
#header #updates-container { -moz-box-ordinal-group: 6 !important;}
#header spacer { -moz-box-ordinal-group: 7 !important;}


/*********** categories *********/

/* reproduce the instructions from your 3.x theme for #topBar/.viewSelector */
#addons-page #categories > scrollbox > .scrollbox-innerbox {
margin: 0px; /*makes your category background fill the space */
color: color;
background: color image repeat position;
border: none; border-bottom: 1px solid color; }

/* sets category width and height */
#addons-page .category:not([disabled]) {
/* min-width based on narrowest label, width allows stretch to fit  */
min-width: 7.5em; width: 100%;
height: 55px; /* remember this value for calculations below */
padding: 5px; opacity: 1; }


/*********** addons header *************/

#addons-page #header {
-moz-appearance: none!important;
height: 40px; /* remember this value for calculations below */
padding: 2px;  margin: 0px;
/* transparent background and border is important */
background: transparent none;
border: none; border-bottom: 1px transparent;
color: -moz-DialogText; font: message-box; }

/* force header to be below categories using the following calculations:
categories height:55px + header height:40px + header borders:1px = 96px
total height:96px - header height:40px = 56px */
#addons-page #header { margin-top: 56px; margin-bottom: -96px;}

/* shift header over to leave room for the sorters */
#addons-page #header { -moz-margin-end: 18em !important;}

/* hide forward button */
#addons-page #forward-btn { display: none; }


/************ search filters *************/

/* hide "Search:" label */
#addons-page  #search-filter-label { display: none !important; }

#addons-page  #search-filter {
/* pull search filters down into header space */
height: 20px; margin-top: 0px; margin-bottom: -20px;
/* force search filters to the right */
-moz-box-direction: reverse; }


/********** searching throbber ************/

#header-searching {
list-style-image: url("chrome://global/skin/icons/loading_16.png");
/* force throbber into center of back button */
-moz-margin-start: -25px; -moz-margin-end: 10px; }

/* hide when not active */
#header-searching:not([active="true"]) { opacity: 0;}


/******* sorters ********/

/* sorter bar */
#addons-page .view-header {
/* height of sorters bar should match height of header */
height: 40px; padding:0px; margin: 0px;
/* top and bottom border widths should match header */
border-top: none; border-bottom: 1px solid rgba(0,0,0,.4);
/* place the background image and color you would like here */
background: url("chrome://browser/skin/toolbox-fade.png"),
url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png");
background-color: -moz-dialog; background-repeat: repeat-x;
background-position: top, bottom; }
 
.sorter {
-moz-appearance: none;
/* do not need bottom border because it touches header */
border: 1px solid rgba(0,0,0,.3); border-bottom: none;
/* push to the bottom, margin + height should equal header height */
margin: 20px 0px 0px; height: 20px; }

 
/********** details panel ***********/

#detail-view  {
/* top padding needs to be same height as header to leave room for it */
margin: 0; padding-top:40px;
/* reproduce the background image and color from the sorter bar here */
background: url("chrome://browser/skin/toolbox-fade.png"),
url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png");
background-color: -moz-dialog; background-repeat: repeat-x;
background-position: top, bottom; }
 
 
/*********** remove/uninstall button *****************/

/* move installation date over to make room for remove button */
.addon > hbox > .fade + .fade > label { -moz-margin-end: 30px;}

/* move remove button over */
#addons-page .remove-button {
-moz-margin-start: -30px; -moz-margin-end: 10px; }


[patrickjdempsey]

This isn't a *final* version by far, just something to play with for anyone interested. I hope the notes are adequate to figure out what I'm doing. If anyone has any suggestions on a different way to go about all of this, I'd appreciate them.

[Philip Chee]

This isn't a *final* version by far, just something to play with for anyone interested. I hope the notes are adequate to figure out what I'm doing. If anyone has any suggestions on a different way to go about all of this, I'd appreciate them.

What licence are these styles released under, if you don't mind me asking?

Phil

[Philip Chee]

And if you're preferring the over/under layout, this may help:

https://addons.mozilla.org/en-US/firefox/addon/9405/

Can you make it compatible with SeaMonkey 2.0? Thanks. And does this work on trunk if I disable compatibility checking?

Phil

[patrickjdempsey]

This isn't a *final* version by far, just something to play with for anyone interested. I hope the notes are adequate to figure out what I'm doing. If anyone has any suggestions on a different way to go about all of this, I'd appreciate them.

What licence are these styles released under, if you don't mind me asking?

Phil

Under the take it and run with it license Phil. There are still some usability issues with it especially dealing with alerts and warnings. I need to file a bug on the AOM because there should probably be some attributes passed to elements when warnings are launched so they can be styled properly.