1101807 - Implement OS X Yosemite text field’s fine dropshadow for the Awesomebar and Search bar

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

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

Mocks and Specs provided through Invision: http://invis.io/KJ1Q1MQ7S

Comment 1

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

Attachment: [e-mail]

Comment 2

[Alexander Ploner]

Attachment: comparision for low-dpi screens.png

I'd really like to see those changes in Firefox, so I started to work on this.

While working on it I got some questions:

1) Should those changes apply for ´min-resolution: 2dppx´ only?
I first thought that way, but then I tested my updated design on a low-dpi display. It looked much more like the real Yosemite drop shadow. I compared it with the search box in the Finder (see ´comparision for low-dpi screens.png´). Updating the existing styles is easier than creating new ones so I want to be sure about that first ;).

2) Are more detailed specs with colors (+alpha) and the use of shadows vs. borders available?
I was able to create exactly the same drop shadow for the input fields as shown in the spec image by changing the shadows height from 1px to .5px. Also the thinner and darker border at the top of the #nav-bar was no problem. But other changes (=> round back button) seem to be a way more complicated.

3) Can someone provide the new tab top stroke graphics?

4) Should all changes apply for lightweight themes as well?

As soon as question 1) is answered, I'll upload a patch with my current state.

Comment 3

[Alexander Ploner]

Oh, I've realized that questions 2 (=> bug 1101805) and 3 (=> bug 1101811) are not in the scope of this bug and should be answered there.

Comment 4

[Alexander Ploner]

Attachment: bug-1101807-v1.patch

This patch updates the drop shadow.
It applies for all resolutions and both theme types.

Comment 5

[Dão Gottwald [:dao]]

Comment on attachment 8641976 [details] [diff] [review]
bug-1101807-v1.patch

rs=me assuming this gets us closer to native look even for low-DPI. Thanks!

Comment 6

[:Gijs (he/him)]

This is CSS-only so it doesn't need a trypush.

Comment 7

[:Gijs (he/him)]

(In reply to Alexander Ploner from comment #2)
> Created attachment 8640791 [details]
> comparision for low-dpi screens.png
> 
> I'd really like to see those changes in Firefox, so I started to work on
> this.
> 
> While working on it I got some questions:
> 
> 1) Should those changes apply for ´min-resolution: 2dppx´ only?
> I first thought that way, but then I tested my updated design on a low-dpi
> display. It looked much more like the real Yosemite drop shadow. I compared
> it with the search box in the Finder (see ´comparision for low-dpi
> screens.png´). Updating the existing styles is easier than creating new ones
> so I want to be sure about that first ;).

You already have r+ but to make this explicit: I think the current patch is the right solution, yes.

> 2) Are more detailed specs with colors (+alpha) and the use of shadows vs.
> borders available?
> I was able to create exactly the same drop shadow for the input fields as
> shown in the spec image by changing the shadows height from 1px to .5px.
> Also the thinner and darker border at the top of the #nav-bar was no
> problem. But other changes (=> round back button) seem to be a way more
> complicated.

This is bug 1101805, but it would probably be useful if someone did provide more details there.

> 3) Can someone provide the new tab top stroke graphics?

This is bug 1101811, and it's missing images. Michael will hopefully reply there. If you've not heard by the end of the week, please feel free to ping me.

> 4) Should all changes apply for lightweight themes as well?

Certainly this change should, as it does with your patch.

Clearing needinfo here, because I don't think there's anything left.

Comment 8

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/83b8721b9b8c

Comment 9

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/83b8721b9b8c