943765 - UITour: Make highlights circle when the target is close to being square

Status: VERIFIED FIXED

(Firefox :: General, defect, P3)

Description

[Matthew N. [:MattN]]

Michael would like the highlights to always be circles. It seems like we can set a min-height/width that would work for the tab, new tab button and nav-bar items and then hopefully the larger items in the menu panel are already square which leads to a circle highlight.

Comment 1

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

For larger highlights

max-height:70px;


For smaller highlights

min-height:36px;

Comment 2

[Holly Habstritt Gaal [:Habber]]

Michael, do you want it to be a circle even for the bookmark highlights? http://cl.ly/image/0c0y3v0Y0X0X If so, this would be a pretty large circle. Would you like a small circle to highlight over just the star or a large circle over the menu and star ?

Comment 3

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

We can do a min-height circle over the star glyph.

Comment 4

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

Attachment: Screen Shot 2013-12-12 at 1.38.33 PM.png

The Add-ons highlight should also be a complete circle.

Comment 5

[Matthew N. [:MattN]]

How about instead of hard-coding which targets shouldn't be circles, we make highlights into a circle if their dimensions are within ±N% (e.g. 10). Is that too magical?

Comment 6

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

Attachment: [e-mail]

I believe that works. 

https://www.dropbox.com/s/ubyqobbgpvl025e/UI_Highlights.zip 
The above link has highlighted states for each of the four screens. All are either max-height or min-height circles, with the exception of the URL bar.

/* URL Bar: */

border-radius: 3px;
background: rgba(0,149,220,0.40);
border: 1px solid #FFFFFF;
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.50);

Comment 7

[Holly Habstritt Gaal [:Habber]]

Hey Matt, I wanted to be sure to clarify something about this bug. Where people are commenting about the highlight states not being circles is where a single icon is highlighted, like the menu (http://cl.ly/image/201Q1A472O1q - not a circle), Add-ons (http://cl.ly/image/403d3S0O0H0g - not a circle), or Customization (http://cl.ly/image/3p0Q2g2x003n - this one looks great). 

Highlights that are pointing out more than one thing or a rectangle, like the two-button, are fine with the oblong shape. (http://cl.ly/image/3y1P0E2v2t0N) We had one giant circle over these at one point and what is there now looks much better. 

If having the different shapes (perfect circle for highlighting a single icon and oblong for highlighting 2 icons) is a concern, just let us know.

Comment 8

[Matthew N. [:MattN]]

Attachment: v.1 Make highlights circles using the larger dimension if the dimensions are within 40% of eachother

40% seems to work for the targets I tested (all of the current ones).

Comment 9

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Comment on attachment 8370573 [details] [diff] [review]
v.1 Make highlights circles using the larger dimension if the dimensions are within 40% of eachother

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

This isn't quite enough to make it a circle for items like the add-ons button, at least on Windows. There, the width and height are 89px - but the border radius is only 40px, so you get a circle with 4 flat sides. Should have a 100% border-radius when we know we want a circle.

Comment 10

[Matthew N. [:MattN]]

Yeah, sorry I forgot about that. Would you prefer an inline style to override the border-radius in this case or shall I set some attribute and have a content stylesheet rule that sets the border-radius when that exists?

Comment 11

[Matthew N. [:MattN]]

Attachment: v.2 Add border-radius: 100%; style

An inline style seemed to be the most straightforward way. The attribute seemed like overkill for now.

Comment 12

[Blair McBride [:Unfocused] (UNAVAILABLE)]

Comment on attachment 8370592 [details] [diff] [review]
v.2 Add border-radius: 100%; style

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

That works. Ship it!

Comment 13

[Matthew N. [:MattN]]

Excellent! https://hg.mozilla.org/integration/fx-team/rev/36caecbe4162

Comment 14

[Matthew N. [:MattN]]

Comment on attachment 8370592 [details] [diff] [review]
v.2 Add border-radius: 100%; style

[Approval Request Comment]
Bug caused by (feature/regressing bug #): Australis UI Tour feature
User impact if declined: Highlights may not look as nice (rounded rectangles or ellipses).
Testing completed (on m-c, etc.): Manual and mochitest on m-c
Risk to taking this patch (and alternatives if risky): Low. Only impacts highlight functionality of the tour.
String or IDL/UUID changes made by this patch: None

Comment 15

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/36caecbe4162

Comment 16

[Matthew N. [:MattN]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/d4fb83c6c1fd

Comment 17

[Cornel Ionce [:noni] [Hubs QA]]

Verified as fixed on latest Nightly (build ID: 20140302030203) latest Aurora (build ID: 20140303004002).
The highlights are now shown as circles.