Closed Bug 943765 Opened 9 years ago Closed 9 years ago

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


(Firefox :: General, defect, P3)




Firefox 30
Tracking Status
firefox29 --- verified
firefox30 --- verified


(Reporter: MattN, Assigned: MattN)



(Keywords: polish)


(3 files, 1 obsolete file)

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.
For larger highlights


For smaller highlights

Michael, do you want it to be a circle even for the bookmark highlights? 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 ?
Flags: needinfo?(mmaslaney)
We can do a min-height circle over the star glyph.
Flags: needinfo?(mmaslaney)
The Add-ons highlight should also be a complete circle.
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?
Assignee: mmaslaney → MattN+bmo
I believe that works. 
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);
Whiteboard: [can-fix-on-aurora]
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 ( - not a circle), Add-ons ( - not a circle), or Customization ( - 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. ( 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.
Priority: P4 → P3
40% seems to work for the targets I tested (all of the current ones).
Attachment #8370573 - Flags: review?(bmcbride)
Summary: UITour: Make highlights circles → UITour: Make highlights circle when the target is close to being square
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.
Attachment #8370573 - Flags: review?(bmcbride) → review-
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?
Whiteboard: [can-fix-on-aurora]
An inline style seemed to be the most straightforward way. The attribute seemed like overkill for now.
Attachment #8370573 - Attachment is obsolete: true
Attachment #8370592 - Flags: review?(bmcbride)
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!
Attachment #8370592 - Flags: review?(bmcbride) → review+
Whiteboard: [fixed-in-fx-team]
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
Attachment #8370592 - Flags: approval-mozilla-aurora?
Closed: 9 years ago
Flags: in-testsuite+
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 30
Attachment #8370592 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Keywords: verifyme
Verified as fixed on latest Nightly (build ID: 20140302030203) latest Aurora (build ID: 20140303004002).
The highlights are now shown as circles.
Keywords: verifyme
You need to log in before you can comment on or make changes to this bug.