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

VERIFIED FIXED in Firefox 29

Status

()

defect
P3
normal
VERIFIED FIXED
6 years ago
5 years ago

People

(Reporter: MattN, Assigned: MattN)

Tracking

({polish})

Trunk
Firefox 30
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(firefox29 verified, firefox30 verified)

Details

Attachments

(3 attachments, 1 obsolete attachment)

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

max-height:70px;


For smaller highlights

min-height:36px;
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 ?
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. 

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);
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 (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.
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+
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?
https://hg.mozilla.org/mozilla-central/rev/36caecbe4162
Status: ASSIGNED → RESOLVED
Closed: 5 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.
Status: RESOLVED → VERIFIED
Keywords: verifyme
You need to log in before you can comment on or make changes to this bug.