Doorhanger button border makes buttons look like they are 1px different in height

VERIFIED FIXED in Firefox 53

Status

()

Firefox
Theme
--
trivial
VERIFIED FIXED
a year ago
2 months ago

People

(Reporter: dthayer, Assigned: dthayer)

Tracking

53 Branch
Firefox 54
Points:
---

Firefox Tracking Flags

(firefox52 unaffected, firefox53 verified, firefox54 verified)

Details

(Whiteboard: [fce-active-legacy])

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(1 attachment)

(Assignee)

Description

a year ago
I've been working on bug 893505 which uses doorhangers for the new application update workflow, and this has just been bothering me.

Linking two images for comparison:

(Border over both)
http://pasteboard.co/q0dh2ylX4.png

(Border over just one button)
http://pasteboard.co/q0hchQ1Sp.png

I tweaked the css for the second image to demonstrate the difference. The issue is that the gray border is darker than the light gray button, but it is lighter than the blue button, so it makes the top of the light gray button sharper, and the top of the blue button fuzzier, making it feel like the blue button is 1px or a 1/2px shorter.
Yeah, the border should overlap the button: e.g. https://people-mozilla.org/~shorlander/styleguide/ui-elements/panel.html
Looks valid to me. Doug, would you like to fix this yourself? Ideally the blue button would just receive a darker border as shown in shorlanders example.
(Assignee)

Comment 3

a year ago
Sure!
(Assignee)

Updated

a year ago
Assignee: nobody → dothayer
Comment hidden (mozreview-request)
(Assignee)

Updated

a year ago
Attachment #8830073 - Flags: review?(dao+bmo)
(Assignee)

Comment 5

a year ago
Wasn't sure who to link for review so I linked Dão. Assuming that's reasonable?
Comment hidden (mozreview-request)
I made a mozscreenshots push for you to check screenshots cross-platform. (https://developer.mozilla.org/en-US/docs/Mozilla/QA/Browser_screenshots)

(In reply to Doug Thayer [:dthayer] from comment #5)
> Wasn't sure who to link for review so I linked Dão. Assuming that's
> reasonable?

Absolutely.
(Assignee)

Updated

a year ago
Whiteboard: [fce-active]

Comment 9

a year ago
mozreview-review
Comment on attachment 8830073 [details]
Bug 1333469 - Doorhanger button border makes buttons look like they are 1px different in height

https://reviewboard.mozilla.org/r/106990/#review108612
Attachment #8830073 - Flags: review?(dao+bmo) → review+
(Assignee)

Updated

a year ago
Keywords: checkin-needed

Comment 10

a year ago
Pushed by dgottwald@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/53723e0f6284
Doorhanger button border makes buttons look like they are 1px different in height r=dao
Keywords: checkin-needed

Comment 11

a year ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/53723e0f6284
Status: NEW → RESOLVED
Last Resolved: a year ago
status-firefox54: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 54
Doug, want to request uplift to 53 for this? The new buttons landed in 53 and that would make it consistent.
status-firefox52: --- → unaffected
status-firefox53: --- → affected
Flags: needinfo?(dothayer)
(Assignee)

Comment 13

a year ago
Comment on attachment 8830073 [details]
Bug 1333469 - Doorhanger button border makes buttons look like they are 1px different in height

Approval Request Comment
[Feature/Bug causing the regression]: #1267604
[User impact if declined]: Users would see a minor discrepancy between doorhanger button styles between 53 and 54.
[Is this code covered by automated tests?]: No, though there is a mozscreenshots config for doorhangers which covers this.
[Has the fix been verified in Nightly?]: Yes.
[Needs manual test from QE? If yes, steps to reproduce]: No.
[List of other uplifts needed for the feature/fix]: None.
[Is the change risky?]: No.
[Why is the change risky/not risky?]: It is a minor style change, moving a 1px border from an outer element to the inner elements.
[String changes made/needed]:
Flags: needinfo?(dothayer)
Attachment #8830073 - Flags: approval-mozilla-aurora?
I have reproduced this bug with Nightly 54.0a1 (2017-01-24) (64-bit) on Windows 7 , 64 Bit !

This bug's fix is verified with latest Nightly!

Build    ID : 20170201030207
User Agent  : Mozilla/5.0(Windows NT 6.1; Win64; x64; rv:54.0) Gecko/20100101 Firefox/54.0

[bugday-20170201]
Thanks!
Status: RESOLVED → VERIFIED
status-firefox54: fixed → verified
Comment on attachment 8830073 [details]
Bug 1333469 - Doorhanger button border makes buttons look like they are 1px different in height

CSS only, fix was verified on Nightly, Aurora53+
Attachment #8830073 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+

Comment 17

a year ago
bugherderuplift
https://hg.mozilla.org/releases/mozilla-aurora/rev/cc89652117d4
status-firefox53: affected → fixed
I have reproduced this bug with Nightly 54.0a1 (2017-01-24) (64-bit) on Windows 7 , 64 Bit!

This bug's fix is verified with latest Developer Edition (Aurora)!

Build   ID : 20170215004022
User Agent : Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:53.0) Gecko/20100101 Firefox/53.0
[bugday-20170215]
Thanks
status-firefox53: fixed → verified
Depends on: 1349562

Updated

2 months ago
Whiteboard: [fce-active] → [fce-active-legacy]
You need to log in before you can comment on or make changes to this bug.