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 September 17th, 2010, 5:17 am

BTW, this is the latest iteration on the latest nightly:

Image

Making the control buttons vertical really helps save space I think. There are still random bugs coming and going with the nightlies that effect layout. I'll be able to provide more exposition on the styling of it with some variations when it all settles down.
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 October 25th, 2010, 2:21 am

Well, they've gone and simplified the structure of the item entries... which is nice, but it makes the vertical control buttons take up more space. Back to the drawing board! I would also really love to kill off all of the individual restart buttons and replace them with a global restart via XBL, but i'm not sure if that is possible considering that restart is linked to the addon installer.
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 October 29th, 2010, 1:41 pm

Style the Details Panel like AMO:

Image

The following code will work inside of a theme. It's not an override style for the default theme, although it could be turned into one with some modifications. Who knows if AMO will change their styling when the new version rolls out, but this is kinda fun for now!

Code: Select all
/* HACK FIREFOX 4.0 ADDON DETAILS PAGES TO LOOK LIKE ADDONS.MOZILLA.ORG
by Patrick J. Dempsey */

.detail-view-container {
background: -moz-linear-gradient(top, rgb(204, 217, 234), white) ;
padding: 15px ;
color: black ;
}

#detail-summary { -moz-box-ordinal-group: 1 ;}
#detail-desc-container { -moz-box-ordinal-group: 2 ;}
#detail-controls {  -moz-box-ordinal-group: 3 ;}
#detail-contributions {  -moz-box-ordinal-group: 4 ;}
#detail-grid {  -moz-box-ordinal-group: 5 ;}

#detail-view .loading { display: none; }

/* hide the spacers on each side of the detail view */
.global-warning ~ hbox > spacer { display: none;}

/************** detail notifications ****************/

#detail-notifications > hbox {
background-color: rgb(255,229,127) ;
border: 0px ;
-moz-border-radius: 7px ;
padding: 3px ;
color: black ;
margin-bottom: 10px ;
}

#detail-notifications label {
color: black ;
}

/****************** detail summary *************/

#detail-icon {
  -moz-margin-start: 3px;
  -moz-margin-end: -35px;
}

#detail-summary { -moz-margin-start: 40px;}

#detail-icon:not([src=""]) {
background-color: white ;
border: 0px ;
-moz-border-radius: 4px ;
padding: 3px ;
height: 38px ;
width: 38px ;
}

#detail-icon[src=""] {
display: none ;
}

#detail-view[active="false"] #detail-icon {
opacity: 0.5 ;
}

#detail-name {
font-size: 200% ;
font-family: serif ;
color: rgb(198,55,23) ;
}

#detail-view[active="false"] #detail-summary label {
color: dimgrey ;
}

#detail-version {
font-size: 180% ;
font-family: serif ;
color: navy ;
}

#detail-desc-container,
#detail-contributions,
#detail-grid,
#detail-controls {
background-color: white ;
padding: 10px ;
border: 5px solid ;
-moz-border-top-colors: rgb(181,217,229) rgb(181,217,229) rgb(181,217,229) rgb(181,217,229) rgb(46,81,134) ;
-moz-border-left-colors: rgb(181,217,229) rgb(181,217,229) rgb(181,217,229) rgb(181,217,229) rgb(46,81,134) ;
-moz-border-right-colors: rgb(181,217,229) rgb(181,217,229) rgb(181,217,229) rgb(181,217,229) rgb(46,81,134) ;
-moz-border-bottom-colors: rgb(181,217,229) rgb(181,217,229) rgb(181,217,229) rgb(181,217,229) rgb(46,81,134) ;
-moz-border-radius: 7px ;
}

/************** detail description *****************/

#detail-desc-container {
-moz-border-radius-bottomleft: 0px ;
-moz-border-radius-bottomright: 0px ;
border-bottom: 0px ;
margin-bottom: 0px ;
margin-top: 10px ;
}

#detail-screenshot {
background-color: white ;
border: 3px solid rgb(201,232,243) ;
max-width: 200px !important;
-moz-transform:  scaleY(1) !important;
}

#detail-desc {
/*maxlength: 300 ;*/
outline: solid transparent;
white-space: pre-wrap;
}

/*********** detail contributions *************/

#detail-controls,
#detail-contributions {
-moz-border-radius: 0px ;
border-bottom: 0px ;
border-top: 0px ;
margin-bottom: 0px ;
margin-top: 0px ;
}

#detail-contributions > description,
#detail-contributions > hbox {
margin: 0px ;
padding: 10px ;
background-color: rgb(200,232,243) ;
}

#detail-contributions > description {
-moz-border-radius-topleft: 7px ;
-moz-border-radius-topright: 7px ;
font-size: 150% ;
font-family: serif ;
font-style: italic ;
}

#detail-contributions > hbox {
-moz-border-radius-bottomleft: 7px ;
-moz-border-radius-bottomright: 7px ;
}

#detail-contrib-suggested {
color: dimgrey ;
}

#detail-contrib-btn {
-moz-border-radius: 0.9em ;
height: 1.8em ;
font-size: 120% ;
font-weight: bold ;
color: white ;
background: -moz-linear-gradient(top, rgb(119,187,255), rgb(51,153,255)) ;
border: 1px solid rgb(0,85,238) ;
padding: 1px ;
padding-left: 10px ;
padding-right: 10px ;
}

/*****************    detail grid   ***************/

#detail-grid {
-moz-border-radius-topleft: 0px ;
-moz-border-radius-topright: 0px ;
border-top: 0px ;
margin-top: 0px ;
background: -moz-linear-gradient(bottom, rgb(239,248,251), white) ;
}

#detail-grid .detail-row-label {
font-weight: bold ;
}

#detail-grid row {
border-bottom: 1px dotted rgb(165,201,213) ;
}


/*****************    detail controls   ***************/


#detail-controls button {
margin-left: 8px ;
margin-right: 8px ;
-moz-border-radius: 0.9em ;
height: 1.8em ;
font-size: 120% ;
font-weight: bold ;
padding: 1px ;
padding-left: 10px ;
padding-right: 10px ;
}

#detail-prefs-btn {
color: rgb(46,81,134) ;
background: -moz-linear-gradient(top,  rgb(239,248,251),  rgb(181,217,229)) ;
border: 1px solid rgb(46,81,134) ;
}

#detail-install-btn,
#detail-enable-btn {
color: white ;
background: -moz-linear-gradient(top, rgb(147,200,94), rgb(85,168,2)) ;
border: 1px solid rgb(58,116,4) ;
}

#detail-disable-btn {
color: dimgrey ;
background: -moz-linear-gradient(top, rgb(255,238,163), rgb(241,225,166)) ;
border: 1px solid rgb(170,119,0) ;
}
Last edited by patrickjdempsey on October 30th, 2010, 1:04 am, edited 2 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/

patrickjdempsey

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

Post Posted October 29th, 2010, 5:30 pm

Image

Image


I have greatly simplified the AOM as I want it to look as similar to the old addons manager in 3.x as possible. I also wanted the background to match the addons.mozilla.org style in the details panels. I'm listing here exactly the code I'm using in Stratini Padded, so some of the styling may not fit into your theme. Of course things like colors and background images will need to be changed for your themes. I've tried to include as many notes as possible to explain what I'm doing and why. In some cases you may want to revive certain things I've omitted per your personal tastes. I've also cleaned out stuff that was lingering from earlier hacks. If you are still using the older hacks in this thread you will need to do so as well.

Code: Select all
/* HACK FIREFOX 4.0 ADDONS MANAGER TO LOOK LIKE FIREFOX 3.x
by Patrick J. Dempsey */

/* import DETAILS style */
@import url(chrome://mozapps/skin/extensions/amostyleaom.css);


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

/* 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 > #header + hbox { -moz-box-orient: vertical !important; }

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

/* general margin and padding cleanup */
#addons-page #header,
#view-container .list,
#categories { margin: 0; padding: 0;}

/* rearrange the z-index of elements so buttons still work */
#addons-page #header + hbox {
position: relative !important; z-index: 5 !important;}
#addons-page #header {
position: relative !important; z-index: 10 !important;}

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

 
/*********************  CATEGORIES ******************/
                   
/* View buttons */
#addons-page #categories > scrollbox > .scrollbox-innerbox {
  border: none;
  margin: 0px;
  -moz-padding-start: 10px;
  color: white;
  background: highlight url("chrome://browser/skin/preferences/background.png")  repeat-x center;
    border-bottom: 1px solid rgba(0,0,0,.4);
}

.category {
  border: none;
  -moz-appearance: none;
  -moz-box-align: center;
  overflow: hidden;
  min-height: 55px;
}

.category-name { font-size: 120%; }

#addons-page .category-icon {
  list-style-image: url("chrome://mozapps/skin/extensions/viewButtons.png");
}

#addons-page .category:not([selected="true"]):hover {
  background-image: none;
  background: highlight url("chrome://browser/skin/preferences/hover.png") repeat-x center !important;
  color: white;
}

#addons-page .category[selected="true"] {
  background-image: none;
  background: highlight url("chrome://browser/skin/preferences/selected.png") repeat-x center !important;
  color: black;
}

.category-icon {
  width: 32px;
  height: 32px;
}

#category-extensions > .category-icon {
  -moz-image-region: rect(0px, 32px,  32px, 0px)
}

#category-themes > .category-icon {
  -moz-image-region: rect(0px, 64px,  32px, 32px)
}

#category-languages > .category-icon {
  -moz-image-region: rect(0px, 96px,  32px, 64px)
}

#category-searchengines > .category-icon,
#category-plugins > .category-icon {
  -moz-image-region: rect(0px, 128px, 32px, 96px)
}

#category-availableUpdates > .category-icon {
  -moz-image-region: rect(0px, 160px, 32px, 128px)
}

#category-recentUpdates > .category-icon {
  -moz-image-region: rect(0px, 192px, 32px, 160px)
}

#category-discover > .category-icon {
  -moz-image-region: rect(0px, 224px, 32px, 192px)
}

#category-search > .category-icon {
  -moz-image-region: rect(0px, 256px, 32px, 225px)
}

/* sets category width and height */
#addons-page .category:not([disabled]) {
min-width: 7.5em;
width: 100%;
height: 55px;
padding: 5px;
opacity: 1;}

/* hides disabled categories */
#addons-page .category[disabled] {
min-width: 0px;
width: 0px;
height: 0px;
padding: 0px;
opacity: 0;}

/* I have no idea what these are so I suppress them*/
.category-badge[value="0"] { visibility: hidden; }


/*********************** HEADER ****************************/

/* Move HEADER below CATEGORIES */
/* categories 55px + header 35px + header border 1px = 91px - 40px = 51px */
#addons-page #header {
margin-top: 51px;
margin-bottom: -91px;}

#addons-page #header {
-moz-appearance: none!important;
height: 35px;
padding: 2px;
color: -moz-DialogText;
font: message-box;
border-top: none;
border-bottom: 1px solid rgba(0,0,0,.4);
background: -moz-dialog url("chrome://browser/skin/toolbox-fade.png") repeat-x top;
-moz-box-shadow: inset 0 1px 2px rgba(255,255,255,.8),
 inset 0 .5em .5em rgba(255,255,255,.6);
}

/* move everything else down to make room for the HEADER */
#view-port { margin-top: 35px; }


/***********  SEARCH/UPDATES PANEL ***************/

/* move search-filters down below HEADER */
#addons-page  #search-filter {
height: 20px;
margin-bottom: 0px;
border-bottom: 1px solid rgba(0,0,0,.4);
-moz-box-shadow: inset 0pt 0.5em 0.5em rgba(0, 0, 0, 0.05);
}

/* hide search list if no search results found */
#updates-list-empty:not([hidden="true"]) ~ #updates-list,
#search-list-empty:not([hidden="true"]) ~ #search-list { visibility: hidden; }

/* hide useless button in empty search results */
#updates-list-empty .addon-control,
#search-list-empty .addon-control { visibility: hidden; }

/* center label in empty search results */
#updates-list-empty label,
#search-list-empty label {
text-align: center;
font-size: 150%;}


/************* header icons ***************/

#addons-page #header-utils-btn {
  min-width: 4.5em;
  list-style-image: url("chrome://mozapps/skin/extensions/utilities.png");
  padding: 5px;
  padding-top: 0px;
  padding-bottom: 0px; }
 
/* corrects a bug caused by theme rules elsewhere */
#addons-page .button-menu-dropmarker {
background: transparent none !important; }

#back-btn {
-moz-border-radius: 50%;
padding: 2px;
min-width: 26px !important; width: 26px !important;
height: 26px !important;
list-style-image: url("chrome://mozapps/skin/extensions/go-back.png");
}
#back-btn:-moz-locale-dir(rtl) { -moz-transform: scaleX(-1);}

/* I don't like the forward button, so I always hide it */
#addons-page #forward-btn { display: none; }

#header-searching { list-style-image: url("chrome://global/skin/icons/loading_16.png"); }

/* height of search bar */
#header-search { height: 22px; }


/****************** SORTERS ******************/

/* remove the sort controls, because I think they are useless
 if you want to add them back they need to be rearranged to fit */
.sort-controls {  display: none; }


/****************** WARNINGS ****************/

/* wide warnings in panels that they don't matter */
#detail-view .global-warning-container,
#search-view .global-warning-container { display: none!important;}

/* move WARNINGS down below HEADER */
#addons-page[warning] .global-warning-container {
height: 20px !important;
margin-bottom: 0px !important;
border-bottom: 1px solid rgba(0,0,0,.4);
background: rgb(250,190,26) url("chrome://browser/skin/toolbox-fade.png") repeat-x top;
}

#addons-page[warning] .global-warning {
margin: 0 ;
background: transparent  none;
color: black;
position: relative !important;
z-index: 4 !important;
}

/* hide warning spacer */
.global-warning + spacer {display:none !important;}

/* centers the warning */
#addons-page[warning] .global-warning-container {
-moz-box-orient: vertical !important;}

.global-warning .button-link { color:-moz-nativehyperlinktext; padding: 0px;}

.warning-icon {
  opacity: 0.7;
  list-style-image: url("chrome://global/skin/icons/warning-16.png");
  height: 16px;
  width: 16px;
  margin: 2px;
}


/******************** Addons LIST *********************/

/* background matches addons.mozilla.org and the Get Addon-ons page */
.list {
  -moz-appearance: none;
  background: -moz-linear-gradient(top, rgb(204, 217, 234), white) ;
  margin: 0px;  border: none;
}

.addon {
  margin: 0px;
  border: 0px;
  border-bottom: 1px dotted rgba(0,0,0,.5);
  -moz-border-radius: 0px;
  background-color: transparent;
  color: black;
  padding: 2px;
}

/* disabled items */
.addon[status="uninstalled"],
.addon:not([active="true"]) {
  color: dimgrey;}

.addon[status="uninstalled"]:not([selected="true"]):not([pending]) button:not(:hover),
.addon:not([active="true"]):not([selected="true"]):not([pending]) button:not(:hover),
.addon[status="uninstalled"] .icon,
.addon:not([active="true"]) .icon {
opacity: 0.6; }

.addon[status="uninstalled"]:not([selected="true"]):not([pending]) .text-link:not(:hover),
.addon:not([active="true"]):not([selected="true"]):not([pending])  .text-link:not(:hover) {
  color: dimgrey;}
 
   
.addon:not([active="true"])[selected="true"] .icon {
opacity: 0.8; }


.addon[selected="true"][active="true"]:not([pending]) {
  background-image: url("chrome://mozapps/skin/extensions/itemEnabledFader.png");
  background-color: Highlight;
  color: HighlightText;
}
.addon[selected="true"][active="true"]:not([pending]) .text-link {
color: HighlightText; }

.addon[selected="true"]:not([active="true"]):not([pending]) {
  background-image: url("chrome://mozapps/skin/extensions/itemDisabledFader.png");
}

/* pending items*/
.addon[selected="true"][pending] {
  background-image: -moz-linear-gradient(top, InfoBackground, rgb(250,190,26))!important;
}

.addon:not([selected="true"])[pending] {
  background-color: InfoBackground !important;
  background-image: none !important;
}
 

/***************** addons icons ****************/

.addon .icon {
  margin: 7px 5px;
  width: 32px;
  height: 32px;
  list-style-image: url("chrome://mozapps/skin/xpinstall/xpinstallItemGeneric.png");}

.addon[type="theme"] .icon {
  list-style-image: url("chrome://mozapps/skin/extensions/themeGeneric.png");}

.addon[type="plugin"] .icon {
  list-style-image: url("chrome://mozapps/skin/plugins/pluginGeneric.png");}


/***************** addon name ************************/

.name-container { margin-bottom: 0px; }
.creator { margin-top: -2px; }

#addons-page .details-container,
#addons-page .category-name,
#addons-page .category-badge {
-moz-margin-start: 3px;
-moz-margin-end: 3px; }

.addon .name,
.addon .version
.addon .update-postfix { 
font-size: 115; }

/* name BOLD like in 3.x */
.addon .name { font-weight: bold; }

/* kill off weird spacing around author name */
.addon .creator > label { margin-left: 1px; margin-right: 1px; }

/* hide the "More" button.  I don't like it */
.addon .details { display: none; }

/* hide the (disabled) label since we already have "disabled" styling */
.addon .disabled-postfix { display: none; }

/* hide Release Notes.... which don't currently work anyway */
.addon .relnotes-container { display: none; }



/****************** control buttons *******************/

/* make control buttons vertical*/
.addon .control-container {
  -moz-box-align: center;
  -moz-box-pack: end;
  padding: 2px;
-moz-box-orient: vertical !important;
-moz-box-direction: reverse !important;
}

#addons-page button > .button-box { padding: 2px; }

/* remove weird extra space above control buttons */
.addon .icon-container + vbox hbox + hbox {
margin-top: -0.95em !important;}

.addon-control {
-moz-padding-start: 6px !important;
-moz-padding-end: 6px !important;
margin: 1px;
margin-bottom: 2px;}

/* hide unused buttons */
.addon-control[disabled="true"] { display: none; }

/* made Options button a slightly different style */
.addon-control[label="Options"] {
color: -moz-FieldText;
background-color: -moz-Field;
}

/* make button-links look like links instead of butons */
.button-link {
  -moz-appearance: none;
  background: none transparent;
  -moz-box-shadow: none; border: none;
  text-decoration: underline;
  color: -moz-nativehyperlinktext; cursor: pointer;
  min-width: 0; padding: 0; margin: 0 3px; }


/************ list item WARNINGS ***************/

.warning {
  color: rgb(220,60,60);
  -moz-box-align: start;}

.addon[selected] .warning-icon { opacity: 1;}

.addon .basicinfo-container { -moz-box-align: start;}

.addon .details-container {
  -moz-box-align: end;
  -moz-margin-start: 20px;}



/*************************** download progress ***************************/

/* I'm having problems getting this stuff to work, if anyone has ideas, let me know */

.download-progress {
  background-image: -moz-linear-gradient(#E1E1E1, #FEFEFE);
  border-radius: 10000px;
  border: 1px solid #555;
  width: 200px;
  min-height: 24px!important;
}

.download-progress .start-cap,
.download-progress[complete] .end-cap,
.download-progress .progress .progress-bar {
  -moz-appearance: none;
  background-image: -moz-linear-gradient(#84A9D9, #5183C0);
}

.download-progress .progress {
  background-color: transparent;
  min-height: 24px!important;
}

.download-progress .start-cap, .download-progress .end-cap {
  width: 12px;
  min-height: 24px!important;
}

.download-progress .start-cap:-moz-locale-dir(ltr),
.download-progress .end-cap:-moz-locale-dir(rtl) {
  border-radius: 10000px 0 0 10000px;
}

.download-progress .end-cap:-moz-locale-dir(ltr),
.download-progress .start-cap:-moz-locale-dir(rtl) {
  border-radius: 0 10000px 10000px 0;
}

.download-progress .progress {
  -moz-appearance: none;
  padding: 0px;
  margin: 0px;
  border: none;
  height: 22px !important;
}

.download-progress button {
  -moz-appearance: none;
  border: 0px;
  border-radius: 10000px;
  min-width: 16px;
  width: 16px;
  height: 16px;
  margin: 3px;
  padding: 0px;
}

.download-progress .status-container { -moz-box-align: center; }

.download-progress button > .button-box {
padding: 0px !important;
margin: 0px !important;
}

/* from download.css */

.download-progress button {
  list-style-image: url(chrome://mozapps/skin/downloads/downloadButtons.png);
}

.download-progress .cancel {
  -moz-image-region: rect(0px, 32px, 16px, 16px);}

.download-progress .cancel:hover {
  -moz-image-region: rect(16px, 32px, 32px, 16px);}
 
.download-progress .cancel:active {
  -moz-image-region: rect(32px, 32px, 48px, 16px);}

.download-progress .pause {
  -moz-image-region: rect(0px, 48px, 16px, 32px);}
 
.download-progress .pause:hover {
  -moz-image-region: rect(16px, 48px, 32px, 32px);}
 
.download-progress .pause:active {
  -moz-image-region: rect(32px, 48px, 48px, 32px);}


You can see both style sets running in Stratini Padded 2.3b10:
https://addons.mozilla.org/en-US/firefo ... n-2.3pre10
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/

T0morrow

User avatar
 
Posts: 298
Joined: April 9th, 2010, 9:16 am

Post Posted November 11th, 2010, 10:18 am

Can this be done via userChrome.css?
Or do we need to use some special theme once 4.0 goes final?

I would much prefer the 1st option as it would allow me to use pretty much any compatible theme.
But especially the large font is what bothers me about the new AM.

D555

User avatar
 
Posts: 152
Joined: August 17th, 2005, 9:52 pm

Post Posted November 11th, 2010, 1:30 pm

Patrik, how to use these styles ? ... with 'stylish' extension ?

And never the less, would you make it like a single SM\FF extension ? It would be great!
I suppose there are many people on Gecko who doesn't like new addons manager view ;) .

patrickjdempsey

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

Post Posted November 11th, 2010, 4:26 pm

T0morrow and D55, these latest and greatest versions are for internal use in Themes. (Thus being in the Theme Development category). They can be converted for use in a userStyle by adding prodigious !important tags.... but things like font-size will be screwed up and there are probably many places where the default theme styling will still come through. You can see the first iteration at the top of the thread for examples of how to resize the fonts, although I think many of the element names have changed since then. I might get around to building a userStyle for it but probably not any time soon. If anyone has ambitions of building a userStyle around this, please feel free... I'm posting this work for everyone.
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/

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted December 12th, 2010, 8:18 am

Is there a way to make the downloading/installing progressmeter for an add-on appear on demand, like when you're updating? It would be nice if you could turn it on and leave it on while you're styling it.

Also - is the pause button supposed to work? It doesn't seem to.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

Paenglab

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

Post Posted December 12th, 2010, 10:35 am

You can go in DOMi to the class "install-status". In DOM Node you see the "hidden true". Double click it and change it to false. The progressmeter should appear. When you go down the tree to .progress you can give it also in DOM Node with "Insert" a "value 50". Now the progressmeter has a progress of 50%.
Nuvola theme for Firefox and Thunderbird

patrickjdempsey

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

Post Posted December 12th, 2010, 7:00 pm

@mcdavis.... something is broken with these progress meter things... I've had a really difficult time getting them to do anything resembling what I tell them to do... maybe one of my other styles is interfering but I stopped working on them because they were just so frustrating.

@Paenglab, thank you for that... should make it easier to figure out what's really going on with these things!
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/

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted December 13th, 2010, 12:07 am

thanks guys. paenglab, your suggestion is working great.

we'll see how the rest of it goes ... i may end up having to rework my basic toolkit progressmeter element as part of this.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

patrickjdempsey

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

Post Posted December 22nd, 2010, 5:05 pm

OK... I am NOT a fan of this whole hidden toolbar for "in-content UI" thing... for a variety of reasons...

1. It makes navigation between non-UI tabs and UI-tabs confusing and jumpy... no thanks.
2. It creates a totally different UI behavior for tabs-on-top and tabs-on-bottom... and that is simply NOT acceptable IMO.
3. It breaks all of those new notifiers and such... what is the point of these weird new behaviors if they are only seen in one configuration but not another?? So now there is just a floating "arrow panel" that doesn't really point to anything? Huh?
4. It means I would have to create a whole new rule set to deal with tabs in this mode, no thanks my tabs are already TOO complicated as it is.

I think I'll keep Firefox consistent. I know that the traditionalist view is that Themes should only style Firefox and not dramatically change behavior, but I'm fed up and I feel like I have no choice. I will probably only be bringing a few themes forward into Firefox 4.0 anyway, and the ones I do will be the ones I use. So without further ado, here is the hack for forcing the toolbars to not be hidden in In-Content-UI mode:

Code: Select all
#main-window[disablechrome] toolbar[collapsed="false"] { visibility:visible !important;}
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/

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted December 22nd, 2010, 8:07 pm

patrickjdempsey wrote:3. It breaks all of those new notifiers and such... what is the point of these weird new behaviors if they are only seen in one configuration but not another?? So now there is just a floating "arrow panel" that doesn't really point to anything?


Are you saying that if you get an arrow panel notification while AOM is hiding toolbars, the arrow panel is still pointing to the hidden toolbar?
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

patrickjdempsey

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

Post Posted December 23rd, 2010, 12:48 am

mcdavis wrote:Are you saying that if you get an arrow panel notification while AOM is hiding toolbars, the arrow panel is still pointing to the hidden toolbar?


That is exactly what I'm saying...

Image

Install your theme by dragging it into the AOM to test for yourself.
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 December 23rd, 2010, 12:49 am

Also, maybe bringing the bookmarks toolbar and other toolbars back isn't needed... just showing the Navigation Toolbar is enough to make things feel right for me:

Code: Select all
#main-window[disablechrome] #nav-bar[collapsed="false"] { visibility:visible !important;}
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