1053176 - [10.10] Figure out transparency design for OS X Yosemite

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[:Gijs (he/him)]

The initial design looks like: attachment 8440728 [details] . There's also:

http://people.mozilla.org/~mmaslaney/firefox/Australis-OSX-Yosemite-Scroll.png

(note the blurry shades of grey and red on the toolbar, including the selected tab, which are reflecting the content of the page as scrolled "under" the toolbar) 

--

For context, AIUI (my VM somehow disables lots of transparency - so please correct me if I'm wrong...) builtin apps do the following:

Builtin OS X apps seem to use a flat-ish grey for the unified titlebar-and-toolbar, and when scrolling down, they use transparency to show the app's own content "underneath" the toolbar.

For sidebars like the Finder sidebar and for global menubar menus, they show the desktop background / any windows that are behind the main window, in other words, they show non-app-content underneath - but with very high blur factors, so it basically just shows shades of color.

--

The Firefox design, when looking at the design files, does both of these. The titlebar/tabstrip (minus selected tab) shows non-app-content underneath. The toolbar (plus the selected tab) shows the scrolled content underneath.

--

There are several technical difficulties which are very worrisome about this design:

0) We can't easily do the kind of blurred transparency on a non-rect surface, ie the selected tab
1) Even if we could, it's a single set of nodes (ie the selected tab) inside a container (ie the tabstrip) that we want to have different transparency/layering (per the design) - this is scary, and without knowing more about how the native OS X views will be controlled from the DOM/CSS, it seems very tricky; it's possible we'd need to resort to displaying the selected tab from a different element, which would then have a host of problems to do with tab dragging/rearranging, etc. From an engineering perspective, I'd be inclined to say we couldn't/shouldn't do this at all.
2) We don't know how hard the overscroll stuff will be to implement (tracked in bug 1050804)

--

As was noted in bug 1020551 comment #1, Yosemite will release this fall, and Firefox 34, currently on trunk, is actually our last release even still in fall.

I think that because of the technical difficulties involved with the current design, the transparency as suggested there is unlikely to make 34. Here is what I think we might be able to do, assuming the core/widget folks have time to help out shipping this:

0) keep everything opaque, adjust the greys used to the shades used in 10.10. I think this is something of a bare minimum that we should do to not stand out *a lot* - but it will need some design work, because we currently rely on different shades of grey separating the toolbar and the tabstrip/titlebar, with the toolbar being lighter. The new titlebars on 10.10 are lighter, and so it'll need some massaging to get that to both fit in and provide the right contrast/separation.

1) just implement transparency underneath the titlebar/tabstrip, showing non-app-content, with the toolbar and selected tab remaining opaque (even when scrolled). AIUI, while this might not be trivial, it shouldn't be too much of a stretch. However, there doesn't seem to be much precedent for the transparent titlebar/toolbar (*showing non-app-content, rather than scrolled-out-of-view app content!*) with other apps.

2) we could potentially do non-app-content-transparency for the titlebar/tabstrip as above, and if/when we implement the overscrolled-webpage stuff, we can layer this in for pages which are scrolled up *across all of the titlebar, tabstrip and toolbar* . We'd have to ensure that the blurs/translucent colors used on the different bars are different enough that we keep enough contrast to (a) read the background tabs, and (b) distinguish the selected/hovered tabs visually.


Michael, needinfo'ing you first... I only noticed bug 1020551 comment 4 after our meeting, and the more I thought about it, the more it worried me. I'm hoping you have a chance to look at this and advise/revise how you think we should do this. I've CC'd various other people who I guess might be interested from either a UX/implementation perspective. :-)

Comment 1

[Michael Maslaney [:mmaslaney] ([e-mail])]

Making the title bar transparent was a conscious decision from the design team. While Yosemite uses the transparency effect in apps like Messenger, it usually keeps the title bars opaque. But We feel that the transparency effect plays nicely with Australis design principle of highlighting the active tab, while de-emphasizing the background. In addition, the active tab and toolbar will utilize the style of traditional Yosemite title bars.