1252418 - Inspector sidebar collapse icon is blurry in vertical mode on windows 10

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P1)

Description

[Patrick Brosset <:pbro>]

Attachment: horizontal.PNG

Bug 1189492 made the inspector sidebar collapse feature also work when docked to the side.
I just tested it in FF47 now (on windows10) and realized that the icon used in vertical mode is sort of blurry.
I'll attach both icons to illustrate the difference.
This might come from the fact that the icon is css transformed.

Comment 1

[Patrick Brosset <:pbro>]

Attachment: vertical.PNG

Comment 2

[Patrick Brosset <:pbro>]

Ah, interesting fact, if you apply the rotate(90deg) transform to the image inside the toolbarbutton instead of on the toolbarbutton itself, then the image is crisp!

Comment 3

[Patrick Brosset <:pbro>]

Flagging as P1 so we find a workaround quickly before this new feature lands.

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: MozReview Request: Bug 1252418 - Apply transform(90) on image to fix blurry icon;r=pbrosset

Apparently applying rotate(90) on #inspector-pane-toggle makes the icon blurry
on some platforms (at least windows 10).

Applying the same rotate directly on the image seems to fix the issue.

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

Comment 5

[Patrick Brosset <:pbro>]

Comment on attachment 8725204 [details]
MozReview Request: Bug 1252418 - Apply transform(90) on image to fix blurry icon;r=pbrosset

https://reviewboard.mozilla.org/r/37361/#review33921

Works beautifully for me on windows 10. Thanks for the prompt fix!

Comment 6

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/31134c5883ff

Comment 7

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

https://hg.mozilla.org/mozilla-central/rev/31134c5883ff