UITour: Implement the new highlight styling and animation

RESOLVED FIXED in Firefox 28

Status

()

P3
normal
RESOLVED FIXED
5 years ago
5 years ago

People

(Reporter: MattN, Assigned: MattN)

Tracking

Trunk
Firefox 28
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments, 4 obsolete attachments)

Michael has a proposal for some different colours and possibly a change in animation.
Michael, can you give details about the colour values?
Assignee: nobody → MattN+bmo
Status: NEW → ASSIGNED
Flags: needinfo?(mmaslaney)
Created attachment 8336360 [details]
FX_onboarding_Specs@2x.png

/* 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);
Flags: needinfo?(mmaslaney)
Created attachment 8339060 [details]
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.
Attachment #8339060 - Flags: ui-review?(mmaslaney)
Created attachment 8339061 [details] [diff] [review]
v.1 CSS from comment 2
Attachment #8339061 - Flags: review?(bmcbride)
Attachment #8339060 - Attachment is patch: false
Attachment #8339060 - Attachment mime type: text/plain → image/png
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.
Attachment #8339061 - Flags: review?(bmcbride) → review-
(In reply to mmaslaney from comment #2)
> -webkit-box-shadow:

Oh really?
Haha, Sketch spits out the CSS for all Engines...
Working on the color adjustment, the vibrancy is off compared with the spec.
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.
(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.
Created attachment 8342706 [details] [diff] [review]
v.1.1 CSS from comment 2 + comment 9

Include CSS change from comment 9.
Attachment #8339061 - Attachment is obsolete: true
Attachment #8342706 - Flags: review?(bmcbride)
Created attachment 8342709 [details]
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?
Attachment #8339060 - Attachment is obsolete: true
Attachment #8339060 - Flags: ui-review?(mmaslaney)
Attachment #8342709 - Flags: ui-review?(mmaslaney)
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 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%)
Created attachment 8342779 [details] [diff] [review]
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.
Attachment #8342706 - Attachment is obsolete: true
Attachment #8342709 - Attachment is obsolete: true
Attachment #8342706 - Flags: review?(bmcbride)
Attachment #8342709 - Flags: ui-review?(mmaslaney)
Attachment #8342779 - Flags: ui-review+
Attachment #8342779 - Flags: review?(bmcbride)
Attachment #8342779 - Flags: review?(bmcbride) → review+
Er, late thought: Does this still look ok on a HiDPI display?
https://hg.mozilla.org/mozilla-central/rev/37234a461bea
Status: ASSIGNED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 28
Flags: needinfo?(MattN+bmo)
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.
(In reply to Blair McBride [:Unfocused] from comment #17)
> Er, late thought: Does this still look ok on a HiDPI display?
Yep, LGTM.
Flags: needinfo?(MattN+bmo)
Created attachment 8346390 [details]
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.
Attachment #8346390 - Flags: ui-review?(mmaslaney)
Attachment #8346390 - Flags: ui-review?(mmaslaney) → ui-review-
You need to log in before you can comment on or make changes to this bug.