1050804 - Support OS X Yosemite-like "overscroll", displaying blurred root scroll frame content outside the scrollcontainer

Status: RESOLVED WONTFIX

(Core :: Graphics, defect)

Description

[:Gijs (he/him)]

See this mockup:

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

Basically, we'll need to be able to have part of the page displayed outside the viewport, with some measure of blur applied to it.

Comment 1

[Milan Sreckovic [:milan] (needinfo for best results)]

I can't figure from the mockup what we're talking about.

Comment 2

[Markus Stange [:mstange]]

It's hard to see in the Firefox mockup, but it's easier to see in the Messages app in the background: Behind the toolbar a bit of the page content is visible, in a blurred form. In the Firefox window you can only really see it at the top of the "W" and the "ill" from "We" and "mozilla" where a bit of the red text bleeds through into the toolbar.

Comment 3

[Markus Stange [:mstange]]

Attachment: somewhat of a visual spec

What OS X does to the colors of the stuff behind the toolbar looks something like this. Specifically, after blurring and making it light grayish, they seem to overdrive the saturation a little.

Comment 4

[Brandon Cheng]

(In reply to Markus Stange [:mstange] from comment #3)
> Created attachment 8474550 [details]
> somewhat of a visual spec
> 
> What OS X does to the colors of the stuff behind the toolbar looks something
> like this. Specifically, after blurring and making it light grayish, they
> seem to overdrive the saturation a little.

I imagine this will be implemented through a native API call in Yosemite exposable through -moz-appearance.

Comment 5

[Markus Stange [:mstange]]

Attachment: what I have now

This is how far I've got up to now. The biggest hurdle is going to be the active tab, which must cover the tabstrip separator line. It can't just "erase" the line, it needs to cover it with its own background. Lightweight themes have the same problem: with those, the active theme background image is duplicated in the background of the active tab. But if we want to use that approach with the vibrant toolbar background, we must support clipping it to a rounded shape dynamically, on the compositor, which probably means we need to add support for accelerated SVG masks (e.g. through mask layers), which is going to its own chunk of work.

Another aspect that needs to be improved is the performance. We'll want to retain the blurred result between compositions and only recalculate it when necessary.

Comment 6

[Markus Stange [:mstange]]

Attachment: testcase

This is the testcase I've been using to experiment with locally. The magic attributes that make this work will go away in the final patch.

Comment 7

[Markus Stange [:mstange]]

Attachment: wip

(this is very rough, better not look at it too closely)

Comment 8

[Markus Stange [:mstange]]

(In reply to Brandon Cheng from comment #4)
> (In reply to Markus Stange [:mstange] from comment #3)
> > Created attachment 8474550 [details]
> > somewhat of a visual spec
> > 
> > What OS X does to the colors of the stuff behind the toolbar looks something
> > like this. Specifically, after blurring and making it light grayish, they
> > seem to overdrive the saturation a little.
> 
> I imagine this will be implemented through a native API call in Yosemite
> exposable through -moz-appearance.

The native API that OS X exposes isn't usable for us. It would require us to use Core Animation for compositing, but we have our own compositor. There may be a private API that Core Animation uses internally to get the correct color transform, though. Not sure if we should go looking for it or just recreate the color transform based on observed outputs.

Comment 9

[Markus Stange [:mstange]]

(In reply to Brandon Cheng from comment #4)
> I imagine this will be implemented through a native API call in Yosemite
> exposable through -moz-appearance.

But yes, -moz-appearance is how we will tell the platform code where to use the effect.

Comment 10

[Markus Stange [:mstange]]

(In reply to Markus Stange [:mstange] from comment #5)
> The biggest hurdle is going to be the
> active tab, which must cover the tabstrip separator line.

The easy way out here, is, of course, to make the active tab completely opaque with just a gray-to-gray gradient. Then the rectangular toolbar underneath can start with opaque gray (which connects to the active tab bottom gray) and make that fade into the vibrancy background towards the bottom of the toolbar.
It won't look good, but it's an option, I guess.

Comment 11

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

After spending some time with Yosemite, I'm pretty sure we shouldn't implement this feature. When the effect is noticeable, it mostly shows up as a flash in the periphery of your field of vision, which becomes annoying quickly.

Michel, what do you think?

Comment 12

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

One hundred percent agree. I view it as more of a problem, rather than a feature.