MozillaZine

Scratching my head

Discuss application theming and theme development.
ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted May 10th, 2014, 3:11 pm

Your add-on, Aeon Colors 7, has been fully reviewed by an editor and is now available for download in our gallery at https://addons.mozilla.org/addon/aeon-colors/

Reviewer:
(redacted)

Comments:
This version has been approved for the public.
You have set a compatibility for version 6 of your theme of 14-30. Please do not set compatibility for versions the theme obviously isn't fully compatibile with.

Notes:
1) Custom toolbars (like the Roboform toolbar) are completely unusuable, because the add-on bar is still visible.
2) The volume button isn't styled properly. It was updated in Firefox 28.
Please fix above items in your next update.

3) The More Info button in the identity popup is unstyled.
4) about: is unstyled.
5) No Service icon in the Add-ons Manager
6) about:networking is unstyled / lacks it's stylesheet.
7) Toolbarbutton orient is set to the wrong value for some buttons
Thank you!

Tested on Windows 7 with Firefox 29


I have fixed items 3-6. I also discovered that the New Add-on buttons were invisible, and I can't find the file Firefox uses. So I used the Inspector to find their ID's, ginned up some original code, and now they appear where they should.

However, I have some questions

1. Where do you get info on custom toolbars?
2. What is the Volume button, where can one see it, and where does its code live?
3. What's this about Toolbarbutton orientation?

Thanks

Ed
Firefox: Sic transit gloria mundi.

Paenglab

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

Post Posted May 11th, 2014, 12:57 am

To 1. I don't know what he means with unusable when the #addon-bar is shown. But the #addon-bar is still in FX 29 and up below the #PersonalToolbar.
To 2. The volume slider in <video> element. A page with some test videos is here http://www.double.co.nz/video_test/. The CSS file you have to check is global/media/videocontrols.css. Before the volume slider was vertical and now horizontal.
To 3. Hard to tell without an example but I think it's some buttons have the text beside the icon and other below.

Best would be you're asking the reviewer for screenshots where you can see the issues.
Nuvola theme for Firefox and Thunderbird

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted May 11th, 2014, 3:10 am

Thank you for the link.

We are specifically told not to ask reviewers. Hence, this thread.
Firefox: Sic transit gloria mundi.

Red_Fat_Lazy_Cat

User avatar
 
Posts: 564
Joined: April 16th, 2003, 12:45 pm
Location: The ottoman near the fireplace

Post Posted May 15th, 2014, 6:50 pm

Paenglab wrote:To 1. I don't know what he means with unusable when the #addon-bar is shown. But the #addon-bar is still in FX 29 and up below the #PersonalToolbar.


While it's still hidden in the bowels of Fx 29, it no longer has any styling associated with it. And prior to Fx 29 we had this:

Code: Select all
#addon-bar {
  min-height: 24px;
}


That min-height can (and will) cause theme breakage. A case in point: install Classic Theme Restorer and turn on the tabs on bottom option. I guess the solution would be to hide any add-on bar styling from Firefox 29+. Something like that would do:

Code: Select all
#browser-bottombox #addon-bar {
  min-height: 24px;
}
Some people say that cats are sneaky, evil, and cruel. True, and they have many other fine qualities as well. -- Missy Dizick

My Firefox themes: Red Cats (blue & green flavor), Curacao

LoudNoise
Moderator

User avatar
 
Posts: 40048
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Post Posted May 15th, 2014, 7:41 pm

ehume wrote:Thank you for the link.

We are specifically told not to ask reviewers. Hence, this thread.


:( Making this into a sticky at least for a while.
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."

Frank Lion

User avatar
 
Posts: 20041
Joined: April 23rd, 2004, 6:59 pm
Location: ... The Exorcist....United Kingdom

Post Posted May 15th, 2014, 8:16 pm

ehume wrote:Thank you for the link.

We are specifically told not to ask reviewers.

Bah, slap them around a bit, they'll soon fess up. :)

Your browser/browser.css line 5159, comment all of this out and you're done -

Code: Select all
#addon-bar {
  min-height: 28px;
  border-top: 1px solid ThreeDShadow !important;
}


Short story content/browser has that bar with all guns blazing, visibility turned on and the only thing holding it back is a height: 0 !important;

Red_Fat_Lazy_Cat wrote: A case in point: install Classic Theme Restorer and turn on the tabs on bottom option.

That is more a CTR problem, which was coded only for default and uses a -moz-box-ordinal-group : 100 for #TabsToolbar and make no allowance or coding for #addon-bar. That will work on default. But this is how you actually do Tabs on Bottom without breakings - viewtopic.php?p=13372259#p13372259

Still, my time is limited these days, and I only really popped in to say Hi to Ed :). Plus, I'd be no use here anyway, as I know damn all about this geeky coding stuff.
Metal Lion latest SeaMonkey & Thunderbird Themes - Sea Monkey and Silver Sea Monkey
"The only thing necessary for the triumph of evil, is for good men to do nothing." - Edmund Burke (attrib.)

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted May 15th, 2014, 9:50 pm

Thank you very much, Frank. Deleting reference to the #addon-bar did the trick. I didn't need the interesting stuff in your link.

And Hi There! I hope you're finding fun things to do.
Firefox: Sic transit gloria mundi.

jorgev

User avatar
 
Posts: 53
Joined: May 26th, 2005, 9:54 am
Location: Costa Rica

Post Posted May 16th, 2014, 1:54 pm

ehume wrote:We are specifically told not to ask reviewers. Hence, this thread.

Yes, since the reviewer list is private and only monitored by a handful of people, technical questions are best asked in public developer forums. In the case of theme development it would be this one.

For those particular questions, however, since they relate to the review itself, I think it's fine to reply to the review message and ask. I know the distinction is subjective, but we're trying to keep the review list on-topic, and also technical discussions are open as possible so others can benefit from them. Asking us never hurts, though, even if the answer is to ask in a different place.
Jorge Villalobos
Add-ons Developer Relations Lead, Mozilla

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted May 16th, 2014, 10:09 pm

I've read the comments in the IMPORTANT.TXT. You are a very generous man, Frank.


BTW -- In which file do we put the Windows Controls fix?
Firefox: Sic transit gloria mundi.

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted May 24th, 2014, 8:55 pm

My Downloads button dies when I click on it. How do I fix that?
Firefox: Sic transit gloria mundi.

Paenglab

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

Post Posted May 25th, 2014, 12:02 am

You could try to add

@import url(chrome://browser/skin/downloads/downloads.css);

in browser.css. Here and for a other theme author it solved this.
Nuvola theme for Firefox and Thunderbird

mcdavis

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

Post Posted May 25th, 2014, 12:51 pm

@Ed, Did Paenglab's suggestion do what you needed?
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted May 25th, 2014, 4:58 pm

I just got home and tried it. Alas, it did not work.
Firefox: Sic transit gloria mundi.

mcdavis

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

Post Posted May 25th, 2014, 5:47 pm

Here's some context:

- In Fx29, rules for the downloads tbb exist in browser.css
- Rules for the downloads tbb used to exist in chrome://browser/skin/downloads/indicator.css, but as of Fx27 that file doesn't get used any more, and those rules got moved into browser.css
- Rules for the popup from the downloads tbb are separate; those go in chrome://browser/skin/downloads/downloads.css
- The DOM of the downloads tbb changes the first time you click. Before clicking it, it's just a plain old tbb like the others, although with a different binding. The first time it's clicked, it initializes itself to add a stack with a progressmeter and a place for the icon, within the toolbarbutton itself.
- If your icon disappears the first time you click it, that's why; you need rules to put that icon not on .toolbutton-icon like usual, but instead on this new DOM.
- I might have to add some amendments to this description based on which range of Firefox you're supporting

- Here's the DOM of the downloads tbb.

Code: Select all
/* ------------------------------------------
 *
 *  DOM Structure for Downloads Indicator Button
 *
 *      Toolbar Button (Fx15, as of 5/9/2012):
 *
 *          toolbarbutton#downloads-indicator.toolbarbutton-1.chromeclass-toolbar-additional
 *            stack#downloads-indicator-anchor.toolbarbutton-icon
 *              vbox#downloads-indicator-progress-area
 *                description#downloads-indicator-counter
 *                progressmeter#downloads-indicator-progress.plain [+]
 *              vbox#downloads-indicator-icon
 *              vbox#downloads-indicator-notification
 *
 *      Toolbar Button (Fx20, as of 3/30/2013):
 *
 *          toolbarbutton#downloads-indicator.toolbarbutton-1.chromeclass-toolbar-additional
 *            stack#downloads-indicator-anchor.toolbarbutton-icon
 *              vbox#downloads-indicator-progress-area
 *                description#downloads-indicator-counter
 *                progressmeter#downloads-indicator-progress.plain [+]
 *              vbox#downloads-indicator-icon
 *              vbox#downloads-indicator-notification
 *      >     label.toolbarbutton-text
 *
 *      Toolbar Button (Fx27, as of 11/3/2013):
 *
 *          - renamed to #downloads-button
 *          - removes vbox#downloads-indicator-notification
 *
 *      >   toolbarbutton#downloads-button.toolbarbutton-1.chromeclass-toolbar-additional
 *            stack#downloads-indicator-anchor.toolbarbutton-icon
 *              vbox#downloads-indicator-progress-area
 *                description#downloads-indicator-counter
 *                progressmeter#downloads-indicator-progress.plain [+]
 *              vbox#downloads-indicator-icon
 *      >     image.toolbarbutton-icon
 *            label.toolbarbutton-text
 *
 *          - animated notification is reimplemented separately from the tbb
 *
 *          #mainPopupSet
 *            [...]
 *            hbox#downloads-animation-container
 *              vbox#downloads-notification-anchor
 *                vbox#downloads-indicator-notification
 *            [...]
 *
 *      Toolbar Button (Fx29, as of 2014-05-25):
 *
 *          - base .toolbarbutton-1 binding now includes label.toolbarbutton-multiline-text
 *
 *          toolbarbutton#downloads-button.toolbarbutton-1.chromeclass-toolbar-additional
 *            stack#downloads-indicator-anchor.toolbarbutton-icon
 *              vbox#downloads-indicator-progress-area
 *                description#downloads-indicator-counter
 *                progressmeter#downloads-indicator-progress.plain [+]
 *              vbox#downloads-indicator-icon
 *            image.toolbarbutton-icon
 *            label.toolbarbutton-text
 *      >     label.toolbarbutton-multiline-text
 *      >       #text
 *      >       html:span
 *
 * ------------------------------------------
 */



- Here's the DOM of the downloads popup. It's possible this is out of date, since the last time I updated that was back for Fx20, and I haven't checked for Fx29 yet.

Code: Select all
/* ------------------------------------------
 *
 *  DOM Structure for Downloads Panel
 *
 *      Popup (Fx15, as of 5/9/2012):
 *
 *          popupset
 *            panel#downloadsPanel[type="arrow"]
 *              box.panel-arrowcontainer
 *                box.panel-arrowbox [+]
 *                box.panel-arrowcontent
 *                  box.panel-inner-arrowcontent
 *                    menupopup#downloadsContextMenu.download-state [+]
 *                    richlistbox#downloadsListBox.plain [+]
 *                    button#downloadsHistory.plain [+]
 *                    box.panel-inner-arrowcontentfooter
 *
 *      Popup (Fx16):
 *
 *          popupset
 *            panel#downloadsPanel[type="arrow"]
 *              box.panel-arrowcontainer
 *                box.panel-arrowbox [+]
 *                box.panel-arrowcontent
 *                  menupopup#downloadsContextMenu.download-state [+]
 *                  richlistbox#downloadsListBox.plain [+]
 *                  button#downloadsHistory.plain [+]
 *                  box.panel-inner-arrowcontentfooter
 *
 *      Popup (Fx19):
 *
 *          popupset
 *            panel#downloadsPanel
 *              box.panel-arrowcontainer
 *                box.panel-arrowbox [+]
 *                box.panel-arrowcontent
 *                  menupopup#downloadsContextMenu.download-state [+]
 *                  richlistbox#downloadsListBox.plain [+]
 *          >       hbox#downloadsSummary
 *          >         image.downloadTypeIcon
 *          >         vbox
 *          >           description#downloadsSummaryDescription.downloadTarget
 *          >           progressmeter#downloadsSummaryProgress.downloadProgress [+]
 *          >           description#downloadsSummaryDetails.downloadDetails
 *                  button#downloadsHistory.plain [+]
 *                  box.panel-inner-arrowcontentfooter
 *
 *      Popup (Fx20):
 *
 *          popupset
 *            panel#downloadsPanel
 *              box.panel-arrowcontainer
 *                box.panel-arrowbox [+]
 *                box.panel-arrowcontent
 *                  menupopup#downloadsContextMenu.download-state [+]
 *                  richlistbox#downloadsListBox.plain [+]
 *          >       vbox#downloadsFooter
 *          >         hbox#downloadsSummary
 *          >           image.downloadTypeIcon
 *          >           vbox
 *          >             description#downloadsSummaryDescription
 *          >             progressmeter#downloadsSummaryProgress.downloadProgress [+]
 *          >             description#downloadsSummaryDetails
 *          >         button#downloadsHistory.plain [+]
 *                  box.panel-inner-arrowcontentfooter
 *
 *      Richlistitem (Download Item) in Richlistbox (Fx15, as of 5/9/2012):
 *
 *          richlistitem#downloadsItem_8.download-state
 *            hbox.downloadInfo
 *              vbox
 *                image.downloadTypeIcon
 *                image.downloadTypeIcon.blockedIcon
 *              vbox
 *                description.downloadTarget
 *                progressmeter.downloadProgress [+]
 *                description.downloadDetails
 *            hbox.downloadButtonContainer
 *              button.downloadButton.downloadCancel [+]
 *              button.downloadButton.downloadRetry [+]
 *              button.downloadButton.downloadShow [+]
 *
 *      Richlistitem (Download Item) in Richlistbox (Fx17, as of Bug 760607):
 *
 *          richlistitem#downloadsItem_8.download-state
 *            image.downloadTypeIcon
 *            image.downloadTypeIcon.blockedIcon
 *            vbox
 *              description.downloadTarget
 *              progressmeter.downloadProgress[anonid="progressmeter"] [+]
 *              description.downloadDetails
 *            button.downloadButton.downloadCancel [+]
 *            button.downloadButton.downloadRetry [+]
 *            button.downloadButton.downloadShow [+]
 *
 *      Richlistitem (Download Item) in Richlistbox (Fx20, as of Bug 828302):
 *
 *          richlistitem#downloadsItem_8.download-state
 *            image.downloadTypeIcon
 *            image.downloadTypeIcon.blockedIcon
 *      >     vbox.downloadContainer
 *              description.downloadTarget
 *              progressmeter.downloadProgress[anonid="progressmeter"] [+]
 *              description.downloadDetails
 *      >     stack
 *      >       button.downloadButton.downloadCancel [+]
 *      >       button.downloadButton.downloadRetry [+]
 *      >       button.downloadButton.downloadShow [+]
 *
 * ------------------------------------------
 */

Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

mcdavis

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

Post Posted May 25th, 2014, 6:00 pm

These are the rules I have. They haven't been updated for Fx29 yet (they still refer to modes text and icons+text and to multiple iconsize values, all of which are gone for Fx29) so YMMV, but the comments have some good information. Also, my icon/image file names may be different from the ones used in the default theme.

Code: Select all
/*** Downloads indicator toolbarbutton ***/

/* The outermost toolbarbutton, having .toolbarbutton-1 */
#downloads-button {
  /* magic number: wide enough that width doesn't change between download states */
  min-width: 38px;
}

#downloads-indicator-anchor {
  /* min sizes to work with large icons mode */
  min-width: 24px;
  min-height: 24px;
}

toolbar[iconsize="small"] #downloads-indicator-anchor {
  /* smaller sizes to work with small icons */
  min-width: 16px;
  min-height: 16px;
}

/*** Progress text (counter) and progress bar ***/

#downloads-indicator-counter {
  height: 9px;
  margin: 0;
  color: #bbbbbb;
  font-size: 95%;
  line-height: 9px;
  text-align: center;
  text-shadow: 0 1px 0px rgba(0,0,0,0.9);
}

toolbar[iconsize="small"] #downloads-indicator-counter {
  font-size: 9px;
}

#downloads-indicator:hover > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
  color: #fdfdfd;
}

/* When showing time remaining, progressmeter is too low because of counter font size, so snug it up. */
toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"]:not([paused]) #downloads-indicator-counter {
  margin-top: -1px;
  margin-bottom: -1px;
}

/* We don't care about Personas yet.
 * #downloads-indicator-counter:-moz-lwtheme-brighttext {
 *   color: white;
 *   text-shadow: 0 0 1px rgba(0,0,0,.7),
 *                0 1px 1.5px rgba(0,0,0,.5);
 * }
 */

/* Font size makes the counter too tall when not showing time remaining, so use a smaller font size. */
toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[paused="true"] #downloads-indicator-counter {
  font-size: 1px;
}

/* NOTE: the following comment was written regarding Firefox 20.  It may or may not still be true
 * for Firefox 27 and up, as of Bug 845408.
 *
 * The next few rules handle the case of a visible progressmeter in the tbb but no counter.
 * This occurs with a paused download, and the result is showing a smaller icon above the progressmeter,
 * where the counter would otherwise be if a download were active.
 *
 * This icon is smaller than usual for the given toolbar iconsize.
 * If in large icons mode and in either text+icons or icons only and showing the progressmeter
 * (with either the normal or alert icon showing), use a 16px icon as bg image.
 * If in small icons mode and in either text+icons or icons only and showing the progressmeter
 * (with either the normal or alert icon showing), use a 10px icon as bg image.
 * The rule is that any icon+progressmeter or time-remaining-text+progressmeter must occupy
 * the same vertical space as would the icon on a regular tbb-1 in the the same toolbar mode,
 * namely, 24px vertical size in large icons mode and 16px vertical size in small icons mode.
 * After removing space for the progressmeter, this leaves 16px icon height in large icons mode
 * and 10px icon height in small icons mode.
 *
 * Note that we use [progress="true"]:not([counter]) rather than [progress="true"][paused="true"] to avoid
 * a missing icon that would otherwise occur when both of the following are true:
 *
 * - there is at least one paused download
 * - there is one and only one running download, and that download completes
 *
 * After the download completes, it's virus-scanned and may trigger other activity (such as playing media),
 * both of which have a non-zero duration.  Attr [paused] is removed while there's any running download, and
 * apparently isn't re-added until after virus scan/other activity.  This means that using [paused] in the
 * selector can and does result in a missing icon, for a brief but noticable time, when the download completes.
 * However, [counter] is removed the instant the download completes, which makes it suitable for use in the
 * selector to apply the icon in the paused state, so that's what we do (and the def theme does too).
 *
 * The sequence of events wrt attr in this case seems like this:
 *
 *                                                                          attr state following event
 *   event                                                                  paused  counter     progress    attention
 *   ---------------------------------------------------------------------  ------  ----------  ----------  ---------
 *   1. start with only paused downloads                                    true    -           true        -
 *   2. start a new download                                                -       true        true        -
 *   3. active download completes                                           -       -           true        ?
 *   4. virus scan starts, possibly followed by other activity              -       -           true        ?
 *   5. virus scan/other activity finished                                  true    -           true        true
 *   6. finish with only paused downloads                                   true    -           true        true
 *
 *
 * NOTE for Firefox 27: there's a similar but separate issue when switching from paused to running, in which case the full-sized
 * icon on #downloads-indicator-icon flashes for a significant fraction of a second after [paused] is removed and
 * before [progress] and [counter] are added.  For this issue, however, there is no readily-apparent fix.
 * See nlnext.notes.txt for Bug 845408.
 */

toolbar:not([iconsize="small"]):not([mode="text"]) #downloads-button[progress="true"] #downloads-indicator-counter {
  height: 16px;
  background-size: 16px;
}

toolbar:not([iconsize="small"]):not([mode="text"]) #downloads-button[progress="true"]:not([counter]) #downloads-indicator-counter {
  background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow.png), 0, 16, 16, 0 ) center no-repeat;
}

toolbar:not([iconsize="small"]):not([mode="text"]) #downloads-button[progress="true"]:not([counter]):hover #downloads-indicator-counter {
  background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow.png), 16, 16, 32, 0 ) center no-repeat;
}

toolbar:not([iconsize="small"]):not([mode="text"]) #downloads-button[progress="true"]:not([counter])[attention="true"] #downloads-indicator-counter {
  background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow.png), 0, 32, 16, 16 ) center no-repeat;
}

toolbar:not([iconsize="small"]):not([mode="text"]) #downloads-button[progress="true"]:not([counter])[attention="true"]:hover #downloads-indicator-counter {
  background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow.png), 16, 32, 32, 16 ) center no-repeat;
}

/* In small icons switch to a 10px icon. */
toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"] #downloads-indicator-counter {
  height: 10px;
  background-size: 10px;
}

toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"]:not([counter]) #downloads-indicator-counter {
  background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow-small.png), 0, 10, 10, 0 ) center no-repeat;
}

toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"]:not([counter]):hover #downloads-indicator-counter {
  background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow-small.png), 10, 10, 20, 0 ) center no-repeat;
}

toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"]:not([counter])[attention="true"] #downloads-indicator-counter {
  background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow-small.png), 0, 20, 10, 10 ) center no-repeat;
}

toolbar[iconsize="small"]:not([mode="text"]) #downloads-button[progress="true"]:not([counter])[attention="true"]:hover #downloads-indicator-counter {
  background: -moz-image-rect( url(chrome://browser/skin/downloads/downloads-indicator-arrow-small.png), 10, 20, 20, 10 ) center no-repeat;
}

#downloads-indicator-progress {
  height: 4px;
  min-width: 0;
  min-height: 0;
  margin-top: 2px !important; /* important because .plain */
  margin-bottom: 2px !important; /* important because .plain */
  border-radius: 1px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

toolbar[iconsize="small"] #downloads-indicator-progress {
  margin-top: 1px !important; /* important because .plain */
  margin-bottom: 1px !important; /* important because .plain */
}

#downloads-indicator-progress > .progress-bar {
  min-width: 0;
  min-height: 0;
  border: 1px solid;
  -moz-border-end: none;
  border-color: #bdc969 transparent #b3bd58 #b1bc5b;
  border-radius: 1px 0 0 1px;
  background-image: -moz-linear-gradient(#b8c15c, #b8c15c);
  background-color: transparent;
}

#downloads-indicator-progress:-moz-locale-dir(rtl) > .progress-bar {
  border-color: #bdc969 #b1bc5b #b3bd58 transparent;
  border-radius: 0 1px 1px 0;
}

#downloads-indicator-progress > .progress-remainder {
  min-width: 0;
  min-height: 0;
  border: 1px solid;
  -moz-border-start: none;
  border-color: #979f40 #909829 #8b931e transparent;
  border-radius: 0 1px 1px 0;
  background-image: -moz-linear-gradient(#000000, #090909);
}

#downloads-indicator-progress:-moz-locale-dir(rtl) > .progress-remainder {
  border-color: #979f40 transparent #8b931e #909829;
  border-radius: 1px 0 0 1px;
}

#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
  border-color: #a6a6a6 transparent #868686 #999999;
  background-image: -moz-linear-gradient(#6d6d6d, #6d6d6d);
}

#downloads-button[paused]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-bar {
  border-color: #a6a6a6 #999999 #868686 transparent;
}

#downloads-button[paused] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
  border-color: #a6a6a6 #929292 #868686 transparent;
}

#downloads-button[paused]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-progress > .progress-remainder {
  border-color: #a6a6a6 transparent #868686 #929292;
}

/*** Main indicator icon ***/

/* Note that unlike typical tbb-1, the icon isn't always carried on .toolbarbutton-icon, and
 * it's not always applied with list-style-image.  Rather, once the indicator overlay has been applied,
 * and the internal elements of the downloads-button have been fully instantiated, it's applied
 * as a background image, either here or on #downloads-indicator-counter.  Once the indicator overlay
 * has been applied, this is where the toolbarbutton icon (possibly glowing to indicate alert) is applied
 * if and only if the progressmeter isn't showing, i.e., when there's no download either paused or active.
 * If there exists one or more paused or active downloads, then #downloads-indicator-icon is hidden by content CSS and,
 * if there are no active downloads, the icon is shown as background-image on #downloads-indicator-counter.
 *
 * Summary of icon location for Fx27:
 *
 *  if not initialized or if in palette
 *    icon on image.toolbarbutton-icon, like normal tbb-1
 *  else (initialized and not in palette)
 *    if any download running then
 *      no icon shown
 *    else if any paused download then
 *      icon shown on description#downloads-indicator-counter
 *    else
 *      icon shown on vbox#downloads-indicator-icon
 *
 */

#downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon {
  background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                              0, 144, 24, 120) center no-repeat;
}

#downloads-button:not([attention]):hover > #downloads-indicator-anchor > #downloads-indicator-icon {
  background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                              24, 144, 48, 120) center no-repeat;
}

toolbar[iconsize="small"] #downloads-button:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon {
  background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"),
                              0, 96, 16, 80) center no-repeat;
}

toolbar[iconsize="small"] #downloads-button:not([attention]):hover > #downloads-indicator-anchor > #downloads-indicator-icon {
  background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"),
                              16, 96, 32, 80) center no-repeat;
}

/* We don't care about Personas styling yet.
 * #downloads-indicator-icon:-moz-lwtheme-brighttext {
 *   background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"),
 *                               0, 144, 24, 120) center no-repeat;
 * }
 */

/* Show a glowing icon when a download has completed. */

#downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
  background: -moz-image-rect(url("chrome://browser/skin/downloads/download-glow.png"),
                              0, 24, 24, 0) center no-repeat;
}

toolbar[iconsize="small"] #downloads-button[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
  background: -moz-image-rect(url("chrome://browser/skin/downloads/download-glow.png"),
                              0, 24, 24, 0) center no-repeat;
  background-size: 16px;
}

/*** Toolbarbutton label ***/

/* For some reason, our rule in toolbarbutton.css doesn't apply to .toolbarbutton-text
 * when under #downloads-button (even though it has the same binding as a toolbarbutton-1)
 * so reapply this needed setting.
 */
toolbar:not([mode="icons"]) #downloads-button > .toolbarbutton-text {
  margin: 0;
}

/* In text-only mode, since the progressmeter and counter are hidden, use colored text ("Downloads") to indicate downloads state,
 * with running taking priority over alerting, just like the way in modes other than text-only the counter text (time remaining) replaces the alert icon.
 * Fx19 has no label, so this is Fx20 and up.
 */
toolbar[mode="text"] #downloads-button[attention="true"] > .toolbarbutton-text {
  color: #ddb575; /* arbitrary one-off color, picked out of the alert icon */
}

toolbar[mode="text"] #downloads-button[attention="true"]:hover .toolbarbutton-text,
toolbar[mode="text"] #downloads-button[attention="true"][open="true"] .toolbarbutton-text {
  /* color: #f7cb83; like alert normal, but brightness plus 10 */
  color: #ffd187; /* like alert normal, but brightness bumped up to 100% */
}

toolbar[mode="text"] #downloads-button[counter="true"]:not([paused="true"]) .toolbarbutton-text {
  /* color: #9ed46c; arbitrary one-off color */
  color: #88d442; /* arbitrary one-off color */

}

toolbar[mode="text"] #downloads-button[counter="true"]:not([paused="true"]):hover .toolbarbutton-text,
toolbar[mode="text"] #downloads-button[counter="true"]:not([paused="true"])[open="true"] .toolbarbutton-text {
  /* color: #99ed4a; like running normal, but brightness plus 10 */
  color: #a4ff4f; /* like running normal, but brightness bumped up to 100% */
}

/*** Event notification ***/

#downloads-animation-container {
  /* Limit the size of #mainPopupSet, which would otherwise occupy space at the top of the window. */
  min-width: 1px;
  min-height: 1px;
  height: 1px;
  margin-bottom: -1px;
  /* Makes the outermost stack element positioned, so that its contents are
   * rendered over the main browser window in the Z order.  This is required by
   * the animated event notification.
   */
  position: relative;
  /* z-index prevents the selected tab from overlapping the notification animation.
   * Possibly only needed for OS X, but taking for all platforms. See Bug 827899.
   */
  z-index: 5;
}

@-moz-keyframes downloadsIndicatorNotificationStartRight {
  /* This animation is used as the "download starting" animation for both Fx19 and down and for Fx20 and up. */
  from { opacity: 0; -moz-transform: translate(-128px, 128px) scale(8); transform: translate(-128px, 128px) scale(8); }
  20%  { opacity: .85; -moz-animation-timing-function: ease-out; }
  to   { opacity: 0; -moz-transform: translate(0) scale(1); transform: translate(0) scale(1); }
}

@-moz-keyframes downloadsIndicatorNotificationStartLeft {
  /* This animation is used as the "download starting" animation for both Fx19 and down and for Fx20 and up. */
  from { opacity: 0; -moz-transform: translate(128px, 128px) scale(8); transform: translate(128px, 128px) scale(8); }
  20%  { opacity: .85; -moz-animation-timing-function: ease-out; }
  to   { opacity: 0; -moz-transform: translate(0) scale(1); transform: translate(0) scale(1); }
}

@-moz-keyframes downloadsIndicatorNotificationFinish {
  /* This animation is used as the "download finished" animation for Fx20 and up. */
  from { opacity: 0; -moz-transform: scale(1); transform: scale(1); }
  20%  { opacity: .65; -moz-animation-timing-function: ease-in; }
  to   { opacity: 0; -moz-transform: scale(8); transform: scale(8); }
}

#downloads-indicator-notification {
  opacity: 0;
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
  height: 16px;
  width: 16px;
}

#downloads-button[notification="true"] > #downloads-indicator-anchor > #downloads-indicator-notification,
#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-notification,
#downloads-notification-anchor[notification="start"] > #downloads-indicator-notification {
  /* #downloads-indicator[notification="true"] is for Fx19 and down.
   * #downloads-indicator[notification="start"] is for Fx20 and up.
   * #downloads-indicator-anchor[notification="start"] is for Fx27 and up.
   * download-notification.png could be used for Fx19, but it's the same as download-notification-start.png,
   * so we combine the rules instead.
   */
  background-image: url("chrome://browser/skin/downloads/download-notification-start.png");
  -moz-animation-name: downloadsIndicatorNotificationStartRight;
  -moz-animation-duration: 1s;
}

#downloads-button[notification="true"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification,
#downloads-button[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-anchor > #downloads-indicator-notification,
#downloads-notification-anchor[notification="start"]:-moz-locale-dir(rtl) > #downloads-indicator-notification {
  -moz-animation-name: downloadsIndicatorNotificationStartLeft;
}

#downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-notification,
#downloads-notification-anchor[notification="finish"] > #downloads-indicator-notification {
  /* #downloads-button[notification="finish"] makes this specific to Fx20 and up. */
  /* #downloads-indicator-anchor[notification="finish"] makes this specific to Fx27 and up. */
  background-image: url("chrome://browser/skin/downloads/download-notification-finish.png");
  -moz-animation-name: downloadsIndicatorNotificationFinish;
  -moz-animation-duration: 1s;
}
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 2 guests