1476626 - [Style Editor] Toggle style sheet visibility - eyeball icon disappears when resizing the browser width

Status: VERIFIED FIXED

(DevTools :: Style Editor, defect, P3)

Description

[Anca Soncutean, Desktop QA]

Attachment: screenshot issue.png

[Affected versions]: 
- 61.0.1 (20180704003137)
- 62.0b9 (20180713213322)
- 63.0a1 (2018-07-18)

[Affected platforms]:
- Windows 10 x64
- Ubuntu 16.04 x64
- macOS 10.13

[Steps to reproduce]:
1. Open any desired website
2. Press Shift+F7 keys
3. Reduce the browser width 
4. Click on the Toggle style sheet eyeball icon 

[Expected result]:
- The Toggle style sheet eyeball icon turns grey out

[Actual result]:
- The Toggle style sheet eyeball icon disappears 

[Regression range]: 
- Last good revision: 04821a70c739a00d12e12df651c0989441e22728 (2016-07-13)
  First bad revision: 08f8a5aacd8308a73f6040fe522be7ba38497561 (2016-07-14)
  Pushlog:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=04821a70c739a00d12e12df651c0989441e22728&tochange=08f8a5aacd8308a73f6040fe522be7ba38497561

[Additional Notes]:
- This issue is triggered regardless of the Style Editor localization (left, right or in separate window).

Comment 1

[Patrick Brosset <:pbro>]

Just tested on firefox 62, with macOS, and I was not able to reproduce the issue so far.
Quick question: does it still work if you click the empty area where the icon should be?

Comment 2

[Anca Soncutean, Desktop QA]

Attachment: screencast with the issue.gif

Yes, the functionality of the button doesn't seem to be affected.

Comment 3

[Florens Verschelde :fvsch]

Looks like stale styles in `devtools/client/themes/styleeditor.css`.

It looks like previously the `.stylesheet-enabled` button used a background sprite with two 24x24 images, with some `background-position` changes to toggle images, and when it was changed to a SVG icon and `opacity:0.3` the "small width" styles were not changed accordingly.

Comment 4

[Florens Verschelde :fvsch]

Attachment: bug-1476626-stylesheet-enabled-visibility-narrow.patch

Remove outdated styles that made the "Toggle style sheet visibility" icon misaligned (if off) or invisible (if on) in portrait mode.

Also removes an outline:0 style that does not seem relevant for the `<label>` element used here (it can't receive focus). Tested with and without this style, with clicks and tab navigation, and it doesn’t add an outline in any situation.

Comment 5

[Razvan Caliman [:rcaliman]]

Comment on attachment 8996446 [details] [diff] [review]
bug-1476626-stylesheet-enabled-visibility-narrow.patch

Review of attachment 8996446 [details] [diff] [review]:
-----------------------------------------------------------------

Looks good. Thank you for fixing this!

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/8ab9f8c268ff
styleeditor stylesheet-enabled visibility in narrow windows. r=gl

Comment 7

[Eliza Balazs [:ebalazs_]]

https://hg.mozilla.org/mozilla-central/rev/8ab9f8c268ff

Comment 8

[Ryan VanderMeulen [:RyanVM]]

Seems minor enough that it can ride the trains, but feel free to nominate for Beta uplift if you feel strongly otherwise.

Comment 9

[Martin Balfanz [:mbalfanz]]

Agreed on riding the trains instead of uplifting.

Comment 10

[Anca Soncutean, Desktop QA]

This issue is fixed on Fx 63.0b6 buildID: 20180913141435 on Windows 10 x64, macOS 10.13 and Ubuntu 16.04 x64.