941387 - UITour: Implement the new highlight styling and animation

Status: RESOLVED FIXED

(Firefox :: General, defect, P3)

Description

[Matthew N. [:MattN]]

Michael has a proposal for some different colours and possibly a change in animation.

Comment 1

[Matthew N. [:MattN]]

Michael, can you give details about the colour values?

Comment 2

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

Attachment: [e-mail]

/* Element Highlight: */

border-radius: 40px;

background-image: -o-radial-gradient(50% 100%, rgba(0,149,220,0.25) 50%, rgba(0,149,220,0.35) 100%);
background-image: -moz-radial-gradient(50% 100%, rgba(0,149,220,0.25) 50%, rgba(0,149,220,0.35) 100%);
background-image: -webkit-radial-gradient(50% 100%, rgba(0,149,220,0.25) 50%, rgba(0,149,220,0.35) 100%);
background-image: -ms-radial-gradient(50% 100%, rgba(0,149,220,0.25) 50%, rgba(0,149,220,0.35) 100%);
background-image: radial-gradient(50% 100%, rgba(0,149,220,0.25) 50%, rgba(0,149,220,0.35) 100%);

border: 1px solid #FFFFFF;

-moz-box-shadow:    0px 0px 3px 0px rgba(0,0,0,0.50);
-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.50);
box-shadow:         0px 0px 3px 0px rgba(0,0,0,0.50);

Comment 3

[Matthew N. [:MattN]]

Attachment: Screen Shot of menu button highlight with v.1

Thanks mmaslaney,

The result looks a bit different than the spec (attachment 8336360 [details]) so I'm asking for your ui-review.

Comment 4

[Matthew N. [:MattN]]

Attachment: v.1 CSS from comment 2

Comment 5

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Comment on attachment 8339061 [details] [diff] [review]
v.1 CSS from comment 2

Review of attachment 8339061 [details] [diff] [review]:
-----------------------------------------------------------------

It should really be a perfect circle, except in cases like the urlbar and search bar.

Might be easiest to just specify this as part of the UITour.targets map?

Also, the colour does indeed look off.

Comment 6

[Blair McBride [:Unfocused] (UNAVAILABLE)]

(In reply to mmaslaney from comment #2)
> -webkit-box-shadow:

Oh really?

Comment 7

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

Haha, Sketch spits out the CSS for all Engines...

Comment 8

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

Working on the color adjustment, the vibrancy is off compared with the spec.

Comment 9

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

NEW SPEC

radial-gradient(50% 100%, rgba(0, 150, 220, 0.3) 50%, rgba(0, 150, 220, 0.5) 100%)

Color saturation might be due to the skewed circles, which will be adjusted. Either way, I went ahead and bumped up the transparency to better match the mock. If the colors seem to vibrant after the shape adjustment, We can always revert back to the previous specs.

Comment 10

[Matthew N. [:MattN]]

(In reply to Blair McBride [:Unfocused] from comment #5)
> Comment on attachment 8339061 [details] [diff] [review]
> v.1 CSS from comment 2
>
> It should really be a perfect circle, except in cases like the urlbar and
> search bar.

That's bug 943765.

> Might be easiest to just specify this as part of the UITour.targets map?
> 
> Also, the colour does indeed look off.

I'll update the colour with the new details from comment 9.

Comment 11

[Matthew N. [:MattN]]

Attachment: v.1.1 CSS from comment 2 + comment 9

Include CSS change from comment 9.

Comment 12

[Matthew N. [:MattN]]

Attachment: Screen shot of menu button highlight with v.1.1

This is better but still not the identical to the mockup. Good enough for now?

Comment 13

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

Can we try bumping up the outer transparency to:


radial-gradient(50% 100%, rgba(0, 150, 220, 0.3) 50%, rgba(0, 150, 220, 0.6) 100%)

Comment 14

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

Comment on attachment 8342709 [details]
Screen shot of menu button highlight with v.1.1

radial-gradient(50% 100%, rgba(0, 149, 220, 0.4) 50%, rgba(0, 149, 220, 0.6) 100%)

Comment 15

[Matthew N. [:MattN]]

Attachment: v.1.2 Address comment 14 (ui-r=mmaslaney on IRC)

[17:31:17]  <MattN>	 …http://grab.by/sAka (bottom one)
[17:32:07]  <mmaslaney>	 MattN: Beautiful, thanks for the tweak.

Comment 16

[Matthew N. [:MattN]]

https://hg.mozilla.org/integration/fx-team/rev/37234a461bea

Comment 17

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Er, late thought: Does this still look ok on a HiDPI display?

Comment 18

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/37234a461bea

Comment 19

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

Matt, would you mind providing a screen shot of the UI highlight on a darker theme? I'm going to create an alternative to the default.

Comment 20

[Matthew N. [:MattN]]

(In reply to Blair McBride [:Unfocused] from comment #17)
> Er, late thought: Does this still look ok on a HiDPI display?
Yep, LGTM.

Comment 21

[Matthew N. [:MattN]]

Attachment: Bookmark highlight on Frozen Fox (dark LWT)

(In reply to mmaslaney from comment #19)
> Matt, would you mind providing a screen shot of the UI highlight on a darker
> theme? I'm going to create an alternative to the default.

Here is one on Frozen Fox. Since this change is now in Nightly, you can test other combinations/themes in your own build if you still have the preferences set from the work week.

If you would like a change, please file a new bug blocking this one since this one is already resolved.