Closed Bug 943765 Opened 7 years ago Closed 6 years ago
UITour: Make highlights circle when the target is close to being square
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 ?
We can do a min-height circle over the star glyph.
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);
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.
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?
An inline style seemed to be the most straightforward way. The attribute seemed like overkill for now.
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?
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 30
Attachment #8370592 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Verified as fixed on latest Nightly (build ID: 20140302030203) latest Aurora (build ID: 20140303004002). The highlights are now shown as circles.
You need to log in before you can comment on or make changes to this bug.