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 31st, 2010, 4:42 pm

Wow, cool... that is an oldy!
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/

Blisset2
 
Posts: 8
Joined: September 2nd, 2010, 4:49 pm

Post Posted September 3rd, 2010, 2:16 am

patrickjdempsey wrote:....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
Last edited by Blisset2 on September 4th, 2010, 3:47 am, edited 1 time in total.

malliz
Folder@Home

User avatar
 
Posts: 43708
Joined: December 7th, 2002, 4:34 am
Location: Australia

Post Posted September 3rd, 2010, 2:25 am

Please don't cross post it's against forum rules. One copy of that pic as a thumbnail would have been more than enough
What sort of man would put a known criminal in charge of a major branch of government? Apart from, say, the average voter.
"Terry Pratchett"

patrickjdempsey

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

Post Posted September 3rd, 2010, 3:06 am

@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.
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 September 3rd, 2010, 5:59 am

patrickjdempsey wrote: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!
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 September 3rd, 2010, 10:05 am

Image
Image

This is what I've got so far. As you can see I've stuffed everything into the header
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/

Blisset2
 
Posts: 8
Joined: September 2nd, 2010, 4:49 pm

Post Posted September 4th, 2010, 3:58 am

patrickjdempsey wrote:@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

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

Post Posted September 4th, 2010, 2:14 pm

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.
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 September 5th, 2010, 3:33 pm

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?
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 September 5th, 2010, 11:08 pm

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
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 September 6th, 2010, 2:41 am

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; }
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 September 7th, 2010, 2:43 pm

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

Philip Chee

User avatar
 
Posts: 6475
Joined: March 1st, 2005, 3:03 pm

Post Posted September 17th, 2010, 4:04 am

patrickjdempsey wrote: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

User avatar
 
Posts: 6475
Joined: March 1st, 2005, 3:03 pm

Post Posted September 17th, 2010, 4:07 am

mcdavis wrote: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

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

Post Posted September 17th, 2010, 4:44 am

Philip Chee wrote:
patrickjdempsey wrote: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.
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/

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest