Last Comment Bug 649480 - Change appmenu button color on Nightly/Aurora builds
: Change appmenu button color on Nightly/Aurora builds
Status: RESOLVED FIXED
:
Product: Firefox
Classification: Client Software
Component: Theme (show other bugs)
: Trunk
: All Windows 7
: -- normal with 6 votes (vote)
: Firefox 8
Assigned To: :Gavin Sharp [email: gavin@gavinsharp.com]
:
Mentors:
: 608964 (view as bug list)
Depends on: 673406 648368
Blocks:
  Show dependency treegraph
 
Reported: 2011-04-12 13:44 PDT by :Margaret Leibovic
Modified: 2013-12-27 14:28 PST (History)
28 users (show)
gavin.sharp: in‑testsuite-
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
App Button Color Mockup (27.79 KB, image/png)
2011-04-12 13:46 PDT, Stephen Horlander [:shorlander]
no flags Details
patch (6.62 KB, patch)
2011-04-13 14:24 PDT, :Gavin Sharp [email: gavin@gavinsharp.com]
no flags Details | Diff | Review
patch (8.85 KB, patch)
2011-04-19 17:12 PDT, :Gavin Sharp [email: gavin@gavinsharp.com]
no flags Details | Diff | Review
patch using ifdefs (8.38 KB, patch)
2011-06-17 20:50 PDT, :Gavin Sharp [email: gavin@gavinsharp.com]
no flags Details | Diff | Review
ifdef patch (8.37 KB, patch)
2011-07-18 15:49 PDT, :Gavin Sharp [email: gavin@gavinsharp.com]
dao+bmo: review+
Details | Diff | Review

Description :Margaret Leibovic 2011-04-12 13:44:52 PDT
We want a black "Nightly" button and a blue "Aurora" button, as shown here:

http://www.stephenhorlander.com/pages/channel-buttons/app-button-channel-colors.html
Comment 1 Stephen Horlander [:shorlander] 2011-04-12 13:46:47 PDT
Created attachment 525501 [details]
App Button Color Mockup
Comment 2 bogas04 2011-04-13 04:30:28 PDT
The mockup shows grey navbar for nightly and aurora , is there a separate bug for that too?
Comment 3 Stephen Horlander [:shorlander] 2011-04-13 06:13:24 PDT
(In reply to comment #2)
> The mockup shows grey navbar for nightly and aurora , is there a separate bug
> for that too?

No, I just happened to do the app button colors in a mockup that was playing around with desaturated toolbar colors.
Comment 4 bogas04 2011-04-13 06:24:06 PDT
(In reply to comment #3)
> (In reply to comment #2)
> > The mockup shows grey navbar for nightly and aurora , is there a separate bug
> > for that too?
> 
> No, I just happened to do the app button colors in a mockup that was playing
> around with desaturated toolbar colors.

oh.
also , the mockup spots idk less shadows on toolbar buttons (?) , is it also going to be fixed in some follow-up bug of bug 603790
Comment 5 Stephen Horlander [:shorlander] 2011-04-13 06:54:11 PDT
(In reply to comment #4)
> also , the mockup spots idk less shadows on toolbar buttons (?) , is it also
> going to be fixed in some follow-up bug of bug 603790

Yes. The plans for the continued refinement and evolution of the theme are underway. Nothing concrete yet though. But this is veering off-topic :)
Comment 6 :Gavin Sharp [email: gavin@gavinsharp.com] 2011-04-13 14:24:51 PDT
Created attachment 525809 [details] [diff] [review]
patch

This implements the channel-dependent appmenu button styling. The values here are mostly wrong, Stephen said he can help fill those in correctly.
Comment 7 :Gavin Sharp [email: gavin@gavinsharp.com] 2011-04-19 17:12:02 PDT
Created attachment 527156 [details] [diff] [review]
patch

Updated with colors from Stephen; I think this is fully functional. I'm starting to think it would be odd for nightly builds (channel=nightly) and self-builds (channel=default) to have different button colors even though they have the same branding, though. It seems like this should be tied to branding, rather than the channel... I could use a different pref whose value is set in the branding prefs file.
Comment 8 Dão Gottwald [:dao] 2011-06-14 07:18:02 PDT
Comment on attachment 527156 [details] [diff] [review]
patch

>+  #appmenu-button[channel=nightly] {
>+    -moz-border-left-colors: hsla(0,0%,100%,.5) hsla(210,59%,13%,.9);
>+    -moz-border-bottom-colors: hsla(0,0%,100%,.5) hsla(210,59%,13%,.9);
>+    -moz-border-right-colors: hsla(0,0%,100%,.5) hsla(210,59%,13%,.9);
>+  }
>+
>+  #appmenu-button[channel=aurora] {
>+    -moz-border-left-colors: hsla(0,0%,100%,.5) hsla(214,89%,21%,.9);
>+    -moz-border-bottom-colors: hsla(0,0%,100%,.5) hsla(214,89%,21%,.9);
>+    -moz-border-right-colors: hsla(0,0%,100%,.5) hsla(214,89%,21%,.9);
>+  }

Any reason why this isn't just using label=Nightly/Aurora?

The colors for nightly and aurora seem similar enough that you'll mostly only notice the difference in a side-by-side comparison, which may not be worth the extra code. Presumably some color in between could be shared between the two.
Comment 9 Alex Faaborg [:faaborg] (Firefox UX) 2011-06-14 15:07:22 PDT
I think Stephen picked these colors pretty carefully.  Users won't normally have both running (although with a plan to use separate profiles they might).  The use case is more about composite screen shots that show all three.  It might depend on the calibration of one's monitor, but for me nightly and aurora look very different.  So overall, well worth the extra line of code for brand purposes.
Comment 10 Dão Gottwald [:dao] 2011-06-14 22:05:03 PDT
(In reply to comment #9)
> I think Stephen picked these colors pretty carefully.  Users won't normally
> have both running (although with a plan to use separate profiles they
> might).  The use case is more about composite screen shots that show all
> three.  It might depend on the calibration of one's monitor, but for me
> nightly and aurora look very different.

Yes, I didn't question that the difference is obvious when shown side by side. I still don't think that's worth caring about. The really interesting question is whether it would hurt the nightly brand if the button was a tad lighter and whether it would hurt the aurora brand if the button was a tad darker.

> So overall, well worth the extra line of code for brand purposes.

It's not one extra line of code. (I only quoted an excerpt of the patch.)
Comment 11 Alex Faaborg [:faaborg] (Firefox UX) 2011-06-16 15:16:10 PDT
>The really interesting question is whether it would hurt the nightly brand if >the button was a tad lighter and whether it would hurt the aurora brand if the >button was a tad darker.

We could introduce a lighter shade of blue for aurora, but overall I want three different buttons, and I want nightly to be black (because that makes it awesome).  I'm hesitant for us to bikeshed this too much, but yeah, I really want special buttons for each version, so either way the code needs to be at this level of complexity, regardless of the colors selected.
Comment 12 Dão Gottwald [:dao] 2011-06-16 16:10:27 PDT
I know where you're coming from. At the same time, I can't accept arbitrary levels of complexity, for obvious reasons. The complexity here is particularly troubling because we're reimplementing a good part of the button styling with differently weighted CSS selectors (which are competing e.g. against the styling for the button in private browsing mode) and without nightly testers testing what we're going to ship to end users.

Gavin: Can we get a patch using ifdefs? That would avoid the CSS selector mess.
Comment 13 Alex Faaborg [:faaborg] (Firefox UX) 2011-06-16 16:26:55 PDT
This is going to initially sound really off topic, but one of the usability problems we are having with sync is that we lack a good ambient indicator that an instance of Firefox is associated with a particular person's sync account (so for instance, if you save a password it isn't just saved locally but it is also uploaded to that person's sync account).  As a possible solution we are playing around with letting you specify your favorite color as part of the sync/firefox account sign up process.  This then gets applied to the Firefox button, and also gets us around the problem that not everyone likes orange.  Mockup here:

(scroll down to "these aren't my passwords" next to a portal joke)
http://people.mozilla.com/~faaborg/files/projects/sync/usabilityProblems/#

So the black/blue/orange would just be the starting default value before the user had a chance to modify it (assuming they decided to, they could also just keep the default).

Would it be easier for us to insert a pref to hold the button color, and then query that, in preparation for it potentially changing more in the future?
Comment 14 Dão Gottwald [:dao] 2011-06-16 16:43:55 PDT
It wouldn't be easier in the sense that the ability to pick up any color would need to be implemented first. But if this were in place, this particular change would be easy, since we can set branding-specific prefs.
Comment 15 :Gavin Sharp [email: gavin@gavinsharp.com] 2011-06-17 20:50:42 PDT
Created attachment 540201 [details] [diff] [review]
patch using ifdefs

Here's another patch using ifdefs. I chose to use the current orange #ifdef MOZ_OFFICIAL_BRANDING, the Aurora color #if MOZ_UPDATE_CHANNEL == aurora, and the Nightly color otherwise. That bakes in assumptions about branding vs. update channels, which is somewhat bothersome, but probably won't be much of a problem in practice?
Comment 16 Cimilli İbo 2011-06-21 22:15:52 PDT
waiting it to be landed.
Comment 17 Alex Faaborg [:faaborg] (Firefox UX) 2011-07-06 14:04:05 PDT
Any update on when we'll be landing this?
Comment 18 Can 2011-07-14 05:46:03 PDT
(In reply to comment #17)
> Any update on when we'll be landing this?

i'm curious about that too.
Comment 19 :Gavin Sharp [email: gavin@gavinsharp.com] 2011-07-18 15:49:15 PDT
Created attachment 546653 [details] [diff] [review]
ifdef patch

This ifdef patch is a little bit annoying, but I don't think I'll be able to come up with a better solution unless the styles are simplified so there are fewer differences between the various stylings. I guess we should just go with this for now.
Comment 20 :Gavin Sharp [email: gavin@gavinsharp.com] 2011-07-21 11:20:14 PDT
https://hg.mozilla.org/integration/fx-team/rev/23d62ec418d3
Comment 21 :Gavin Sharp [email: gavin@gavinsharp.com] 2011-07-21 18:08:29 PDT
http://hg.mozilla.org/mozilla-central/rev/23d62ec418d3
Comment 22 bogas04 2011-07-21 18:27:23 PDT
is UX branch also having separate colour?
Comment 23 Ekanan Ketunuti 2011-07-21 18:29:59 PDT
yes, i guess. when merge m-c to ux
Comment 24 bogas04 2011-07-21 18:30:56 PDT
i meant is UX branch going to have DIFFERENT COLOUR just like nightly , aurora and beta/final branches?
Comment 25 Eddward 2011-07-21 18:41:10 PDT
*** Bug 608964 has been marked as a duplicate of this bug. ***
Comment 26 :Gavin Sharp [email: gavin@gavinsharp.com] 2011-07-21 18:49:29 PDT
No, UX will be the same as Nightly.
Comment 27 pal-moz 2011-07-22 02:18:49 PDT
(In reply to comment #21)
> http://hg.mozilla.org/mozilla-central/rev/23d62ec418d3

no checkin on Aurora ?
Comment 28 :Gavin Sharp [email: gavin@gavinsharp.com] 2011-07-22 08:10:27 PDT
No, I don't think this will be landing on Aurora builds (it will migrate over on the next trunk->aurora transition).
Comment 29 pal-moz 2011-07-22 16:24:25 PDT
(In reply to comment #1)
> Created attachment 525501 [details]
> App Button Color Mockup

(In reply to comment #28)
> No, I don't think this will be landing on Aurora builds (it will migrate
> over on the next trunk->aurora transition).

OK, then Aurora button color will be changed after Firefox 8a2 ?
Firefox 7a2 (on Aurora channel now) button color is not changed ?
Comment 30 :Gavin Sharp [email: gavin@gavinsharp.com] 2011-07-22 16:40:52 PDT
That's correct.
Comment 31 Simona B [:simonab] 2011-07-25 04:56:52 PDT
Mozilla/5.0 (Windows NT 5.1; rv:8.0a1) Gecko/20110724 Firefox/8.0a1

Verified issue on Windows XP and Windows 7 on the Nightly builds. Appmenu button for the Nightly builds is now black.

Waiting for the change to land in Aurora builds also.
Comment 32 Laura Mesa [:lmesa] [:lvmesa] 2011-08-09 08:44:50 PDT
For the record, it would be much appreciated if grace and I were cc'ed on bugs like this in the future because this affects the branding of the product. Are there plans for a similar change for Mac or linux in the future?
Comment 33 Asa Dotzler [:asa] 2011-08-09 08:54:16 PDT
I don't think mac and Linux have an App button like Windows so I don't know how this could apply there.
Comment 34 Stephen Horlander [:shorlander] 2011-08-09 08:56:38 PDT
(In reply to Asa Dotzler [:asa] from comment #33)
> I don't think mac and Linux have an App button like Windows so I don't know
> how this could apply there.

Linux has an optional button but we don't have any immediate plans to give it the same treatment.
Comment 35 Laura Mesa [:lmesa] [:lvmesa] 2011-08-09 08:57:38 PDT
I know they don't have the similar button, but was more asking if there was a similar type of color change in the works--a colored title bar? Something similar?
Comment 36 Alex Faaborg [:faaborg] (Firefox UX) 2011-08-09 10:56:01 PDT
>it would be much appreciated if grace and I were cc'ed on bugs like this in the >future because this affects the branding of the product.

Sorry about that, we did discuss this with Mayumi back when we were working on the branding of the three channels (and landing new icons and about windows).  I'll be sure to cc you and grace in the future, although it of course might be awhile before we make any other significant brand changes.
Comment 37 Siddhartha Dugar [:sdrocking] 2011-08-15 09:13:38 PDT
The colors shown on https://wiki.mozilla.org/Releases#Upcoming_Releases for Aurora and Nightly channels are purple and blue respectively. Also the program icons are predominantly purple and blue. But this bug colors the buttons in the opposite way. There should be some consistency.

Note You need to log in before you can comment on or make changes to this bug.