Closed Bug 1476626 Opened 3 years ago Closed 3 years ago

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


(DevTools :: Style Editor, defect, P3)



(firefox-esr52 wontfix, firefox-esr60 wontfix, firefox61 wontfix, firefox62 wontfix, firefox63 verified)

Firefox 63
Tracking Status
firefox-esr52 --- wontfix
firefox-esr60 --- wontfix
firefox61 --- wontfix
firefox62 --- wontfix
firefox63 --- verified


(Reporter: Anca, Assigned: fvsch)


(Keywords: regression)


(3 files)

Attached image 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)

[Additional Notes]:
- This issue is triggered regardless of the Style Editor localization (left, right or in separate window).
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?
Flags: needinfo?(anca.soncutean)
Priority: -- → P3
Yes, the functionality of the button doesn't seem to be affected.
Flags: needinfo?(anca.soncutean)
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.
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.
Attachment #8996446 - Flags: review?(gl)
Attachment #8996446 - Flags: review?(gl) → review?(rcaliman)
Comment on attachment 8996446 [details] [diff] [review]

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

Looks good. Thank you for fixing this!
Attachment #8996446 - Flags: review?(rcaliman) → review+
Assignee: nobody → florens
Keywords: checkin-needed
Pushed by
styleeditor stylesheet-enabled visibility in narrow windows. r=gl
Keywords: checkin-needed
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 63
Seems minor enough that it can ride the trains, but feel free to nominate for Beta uplift if you feel strongly otherwise.
Agreed on riding the trains instead of uplifting.
This issue is fixed on Fx 63.0b6 buildID: 20180913141435 on Windows 10 x64, macOS 10.13 and Ubuntu 16.04 x64.
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.