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

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[Alex Thayer [:alexical] (she/her)]

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.

Comment 1

[Stephen Horlander [:shorlander]]

Yeah, the border should overlap the button: e.g. https://people-mozilla.org/~shorlander/styleguide/ui-elements/panel.html

Comment 2

[Johann Hofmann [:johannh]]

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.

Comment 3

[Alex Thayer [:alexical] (she/her)]

Sure!

Comment 4

[Alex Thayer [:alexical] (she/her)]

Attachment: Bug 1333469 - Doorhanger button border makes buttons look like they are 1px different in height

Review commit: https://reviewboard.mozilla.org/r/106990/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/106990/

Comment 5

[Alex Thayer [:alexical] (she/her)]

Wasn't sure who to link for review so I linked Dão. Assuming that's reasonable?

Comment 6

[Alex Thayer [:alexical] (she/her)]

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

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/106990/diff/1-2/

Comment 7

[Johann Hofmann [:johannh]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=247938b59796

Comment 8

[Johann Hofmann [:johannh]]

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.

Comment 9

[Dão Gottwald [:dao]]

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

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/53723e0f6284
Doorhanger button border makes buttons look like they are 1px different in height r=dao

Comment 11

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/53723e0f6284

Comment 12

[Johann Hofmann [:johannh]]

Doug, want to request uplift to 53 for this? The new buttons landed in 53 and that would make it consistent.

Comment 13

[Alex Thayer [:alexical] (she/her)]

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]:

Comment 14

[Mohammad Maruf Rahman]

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]

Comment 15

[Jared Wein [:jaws] (please needinfo? me)]

Thanks!

Comment 16

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

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+

Comment 17

[Ryan VanderMeulen [:RyanVM]]

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

Comment 18

[Mohammad Maruf Rahman]

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]

Comment 19

[Johann Hofmann [:johannh]]

Thanks