1376313 - Firefox Nightly for Mac has un-Mac-like dark title bar (looks like Windows)

Status: VERIFIED WORKSFORME

(Firefox :: Theme, defect)

Description

[Jen Simmons [:jensimmons]]

Nightly updated itself a few days ago and now it looks like this:
https://monosnap.com/file/4JfQfxvGuXAnNQhylsHt6hogNMrb7T.png

I'm very surprised to see a black bar at the top of the page. 

Talking to friends who use Windows, I understand that this kind of visual styling makes sense in the Windows ecosystem. But on a Mac, this is horrible. It's distracting. The nav bar background now pulls more visual focus than anything else on my screen. And that's not justified. If I were a regular user of Firefox (and not a Mozilla employee), and this is what downloaded to my computer in November 2017, I would immediately stop using Firefox and banish it from my life forever. I would not even bother to see if it were as fast as the claims. This gives off the impression that it was designed by somebody who doesn't understand macOS. That would make me question everything about the software, and if I could trust it at all. 

I'm hoping this is a bug. Somehow it shipped by mistake. Or that it's just the first step in a bunch of steps, and it will be changed again very soon — changed back to a light grey bar of one flavor or another. 

I've been using a Mac for years. And have used hundreds of programs. I can't remember ever seeing one with a bar design that stands out like this. The tech press will have a field day hating on this look. Please don't ship this. And if you don't believe me, then test it with real Mac users. 

Meanwhile, I now dread using Nightly. Even though I a major project of mine just shipped in Nightly's Dev Tools, and I spend much of my time doing demos of Nightly. I keep trying to ignore the GIANT BLACK BAR, and just get over myself. But it gets me every time. Shocks me. Frustrates me. Angers me. It's just too far out there. It grabs all the focus.

I need to make some videos soon, and I'm not sure what I'm going to do. I guess I switch to the Compact Light theme. I would much rather demo the "real" Nightly — and avoid having to teach everyone how to get their copy of Nightly to look like mine. I seriously hope that's not the official response — that Windows-minded folks won out in a battle over Firefox for Mac's design, and said "well, if users hate it, they can switch themes". Because people will not do that. They will quit the browser and never open it again.

Comment 1

[Jen Simmons [:jensimmons]]

Another view, with more windows, showing what can easily / typically happen for a busy Mac user:
https://bugzilla.mozilla.org/show_bug.cgi?id=1376313

I'm on Firefox Nightly 56.0a1 2017-06-23.

Friends are reporting their copies of Nightly are "up-to-date" at 2017-06-21. And they don't have the black bar.

Comment 2

[Jen Simmons [:jensimmons]]

Sorry, this is the link for the last comment: https://monosnap.com/file/ougIbOaCfI7zY9X4etzI6QJ2nfKaMg.png
(Airplane internet uploads images slowly. Fingers paste URLs quickly. Bugzilla has no edit function.)

Comment 3

[:Gijs (he/him)]

Hopefully Stephen can clarify the design, which I think is also supposed to use vibrancy ( https://people-mozilla.org/~shorlander/projects/photon/Mockups/macOS.html ).

Comment 4

[Stephen Horlander [:shorlander]]

Hello, thanks for using Nightly and thanks for the feedback! :)

The Firefox front-end Visual UI changes (Photon) are currently in progress on Nightly. Things will be changing and evolving as we build and evaluate on our way to release in 57.

The dark tab-strip is by design but it isn't quite finished yet. Hopefully as we get closer to the final implementation things will feel more cohesive.

Comment 7

[Clément Lefèvre]

Attachment: older MacOS (10.9)

It looks like the design is now considered as finalized from what I've been told, and that maximized windows weren't considered on http://design.firefox.com/people/shorlander/photon/Mockups/macOS.html
I'm joining here a screenshot of how currently looks the default theme (compact variant) on OS X 10.9 with a maximized window.

As :jensimmons, I still think it is both grabbing the attention too much and creating a contrast making it kind of difficult to read efficiently things on it, the grey/black/grey contrast being a large cause (system bar/tabs bar/url bar).
Furthermore, OS X 10.9 doesn't have a dark system theme.

Maybe OS X version and system theme should be considered here?
And it looks like the mockups were not using a fully black bar.

What do you think about this?

Comment 8

[Julien Wajsberg [:julienw]]

[Tracking Requested - why for this release]:
this looks like an unfortunate side-effect of Photon on Mac ?

Comment 9

[Adolfo Jayme]

Re: comment 8: By design; nothing to see here.

Comment 10

[Julien Wajsberg [:julienw]]

I don't think it is as this is different on other MacOS versions. See the following attachment.

Comment 11

[Julien Wajsberg [:julienw]]

Attachment: recent MacOS X (10.12.6)

Comment 12

[Julien Wajsberg [:julienw]]

Comment on attachment 8907530 [details]
older MacOS (10.9)

(I think this one is 10.9; Clément please precise if this is wrong)

Comment 13

[Julien Wajsberg [:julienw]]

I believe this should look the same on all supported MacOS versions. Although what I believe isn't very important, Firefox' UI designers should decide. I don't think the bug can be closed by anyone else :)

Comment 14

[Clément Lefèvre]

(In reply to Julien Wajsberg [:julienw] from comment #12)
> Comment on attachment 8907530 [details]
> older MacOS (10.9)
> 
> (I think this one is 10.9; Clément please precise if this is wrong)

Mine is default theme on macOS 10.9. However I think yours is not the default theme due to tab bar color. It probably is the light theme.

Comment 15

[Clément Lefèvre]

(In reply to Clément Lefèvre from comment #14)
> (In reply to Julien Wajsberg [:julienw] from comment #12)
> > Comment on attachment 8907530 [details]
> > older MacOS (10.9)
> > 
> > (I think this one is 10.9; Clément please precise if this is wrong)
> 
> Mine is default theme on macOS 10.9. However I think yours is not the
> default theme due to tab bar color. It probably is the light theme.

Plus this screenshot probably have both titlebar and drag space enabled.

Comment 16

[Julien Wajsberg [:julienw]]

Hey Dão, I've been told you could decide here. :)

Comment 17

[(inactive) Nihanth Subramanya [:nhnt11]]

The "recent MacOS (10.12.6)" screenshot was taken with the title bar enabled. The gray background for the tab strip in this case was a conscious, discussed decision, as having the gray title bar but dark/translucent tab strip did not look nice. If you enable the title bar (the option is at the bottom left of the customize mode view), it should look the same way in 10.9 as well. If it doesn't, please file another bug.

Comment 18

[(inactive) Nihanth Subramanya [:nhnt11]]

(In reply to Clément Lefèvre from comment #7)
> Created attachment 8907530 [details]
> older MacOS (10.9)
> 
> It looks like the design is now considered as finalized from what I've been
> told, and that maximized windows weren't considered on
> http://design.firefox.com/people/shorlander/photon/Mockups/macOS.html
> I'm joining here a screenshot of how currently looks the default theme
> (compact variant) on OS X 10.9 with a maximized window.
> 
> As :jensimmons, I still think it is both grabbing the attention too much and
> creating a contrast making it kind of difficult to read efficiently things
> on it, the grey/black/grey contrast being a large cause (system bar/tabs
> bar/url bar).
> Furthermore, OS X 10.9 doesn't have a dark system theme.
> 
> Maybe OS X version and system theme should be considered here?
> And it looks like the mockups were not using a fully black bar.
> 
> What do you think about this?

I want to chime in here with my 2c:

The translucent effect we're using on newer MacOS versions was introduced in 10.10, that's why we are using a solid background in 10.9. It's not completely black, I believe we matched the shade of dark gray that is used when translucency is disabled in MacOS System Preferences.

Either way, debating about whether to change this look specifically on 10.9 should be in a separate bug, I think - could you file one? This bug as I understand it was contesting the overall decision to use a dark/translucent tab strip, and Stephen already commented on this and closed the bug in comment 4.

Comment 19

[Clément Lefèvre]

Comment on attachment 8907530 [details]
older MacOS (10.9)

This attachment is without titlebar enabled, and is the one I ask to reopen the bug for at first. While being a little bit aged now, my screenshot is still correct. The tab bar is really black and not dark as for more recent OS X.
So the answer… actually doesn't really answer to the first part of the bug which is about the contrast created in the default situation  when titlebar is disabled and that tab bar is either black or dark.

Comment 20

[Clément Lefèvre]

(In reply to Nihanth Subramanya [:nhnt11] from comment #18)
> (In reply to Clément Lefèvre from comment #7)
> > Created attachment 8907530 [details]
> > older MacOS (10.9)
> > 
> > It looks like the design is now considered as finalized from what I've been
> > told, and that maximized windows weren't considered on
> > http://design.firefox.com/people/shorlander/photon/Mockups/macOS.html
> > I'm joining here a screenshot of how currently looks the default theme
> > (compact variant) on OS X 10.9 with a maximized window.
> > 
> > As :jensimmons, I still think it is both grabbing the attention too much and
> > creating a contrast making it kind of difficult to read efficiently things
> > on it, the grey/black/grey contrast being a large cause (system bar/tabs
> > bar/url bar).
> > Furthermore, OS X 10.9 doesn't have a dark system theme.
> > 
> > Maybe OS X version and system theme should be considered here?
> > And it looks like the mockups were not using a fully black bar.
> > 
> > What do you think about this?
> 
> I want to chime in here with my 2c:
> 
> The translucent effect we're using on newer MacOS versions was introduced in
> 10.10, that's why we are using a solid background in 10.9. It's not
> completely black, I believe we matched the shade of dark gray that is used
> when translucency is disabled in MacOS System Preferences.
> 
> Either way, debating about whether to change this look specifically on 10.9
> should be in a separate bug, I think - could you file one? This bug as I
> understand it was contesting the overall decision to use a dark/translucent
> tab strip, and Stephen already commented on this and closed the bug in
> comment 4.

Actually, it may need two separate bugs but I was not sure here.

To try to sum up:

- 10.9 doesn't have translucent effect so instead it's set to black color.
- Mockups did only consider windowed mode, not maximized one. Maximized window result to the system bar being grey, the url bar being grey, but a black or dark part between them which is the tab bar. This create contrast, catching the attention on this bar without any real reason and still haven't an easy readability.
- I could also add among many other usability issues for example the impossibility to read favicons like GitHub's one which is black. Black on black.

So here are the questions:
- Should 10.9 be treated differently?
- What about the mockups that didn't considered the presence of the system bar just on top of the tab bar when window is maximized?

I'll go a little bit deeper here: I'm regularly holding booths for Mozilla and presenting new things and so on. I currently don't feel comfortable bringing my laptop and showing them this due to the abovementionned problems impacting usability.

Someone else suggested me, at least for 10.9, to default to light theme or make the default act as the light one.
We can also discuss it on IRC so that it's easier to communicate about it than here.