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
[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).
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?
Priority: -- → P3
Yes, the functionality of the button doesn't seem to be affected.
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] bug-1476626-stylesheet-enabled-visibility-narrow.patch Review of attachment 8996446 [details] [diff] [review]: ----------------------------------------------------------------- Looks good. Thank you for fixing this!
Attachment #8996446 - Flags: review?(rcaliman) → review+
Pushed by email@example.com: https://hg.mozilla.org/integration/mozilla-inbound/rev/8ab9f8c268ff styleeditor stylesheet-enabled visibility in narrow windows. r=gl
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.
You need to log in before you can comment on or make changes to this bug.