1973508 - Grayed out eye icon for system stylesheets can be confusing

Status: RESOLVED FIXED

(DevTools :: Style Editor, defect, P3)

Description

[Julian Descottes [:jdescottes]]

User agent stylesheets can't be disabled, so the "eye" icon is rendered slightly greyed out. But this could be confusing for users who might think this means the stylesheet IS disabled. We do have a title tooltip which clarifies this but this requires hovering the icon.

I feel like the very low contrast on selected stylesheets might make it worse.
Another option is to remove the icon completely? But it might lead to the same confusion.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

We could tweak the icon so it would have a lock icon next to it or something? Or just have a lock icon so it's clear those can't be disabled not edited.
(we do have a lock already, here https://searchfox.org/mozilla-central/rev/edcefd70b7aac8e3163a4a266462ad146746a414/devtools/client/themes/images/lock.svg)

Comment 2

[Julian Descottes [:jdescottes]]

We could also put the lock icon next to "user agent" in the rule view.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1973508 - [devtools] Use lock icon for disable/enable stylesheet button on read-only (e.g. UA) stylesheets. r=#devtools.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Julian Descottes [:jdescottes] from comment #2)

We could also put the lock icon next to "user agent" in the rule view.

filed Bug 1973935

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/0e3041c48656
https://hg.mozilla.org/integration/autoland/rev/a119201a9b17
[devtools] Use lock icon for disable/enable stylesheet button on read-only (e.g. UA) stylesheets. r=devtools-reviewers,jdescottes.

Comment 6

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/a119201a9b17

Comment 7

[Alex Finder]

(In reply to Pulsebot from comment #5)

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/0e3041c48656
https://hg.mozilla.org/integration/autoland/rev/a119201a9b17
[devtools] Use lock icon for disable/enable stylesheet button on read-only
(e.g. UA) stylesheets. r=devtools-reviewers,jdescottes.

Perfherder has detected a devtools performance change from push a119201a9b17aae5f30f8913ae863077949beafa.

If you have any questions, please reach out to a performance sheriff. Alternatively, you can find help on Slack by joining #perf-help, and on Matrix you can find help by joining #perftest.

Improvements:

Ratio	Test	Platform	Options	Absolute values (old vs new)
4%	damp jstracer.webconsole-performance.DAMP	windows11-64-24h2-shippable	e10s fission stylo webrender	2,079.26 -> 2,004.06

Details of the alert can be found in the alert summary, including links to graphs and comparisons for each of the affected tests.

If you need the profiling jobs you can trigger them yourself from treeherder job view or ask a performance sheriff to do that for you.

You can run all of these tests on try with ./mach try perf --alert 45867

The following documentation link provides more information about this command.

Comment 8

[Julian Descottes [:jdescottes]]

re perf alert: data seems very noisy and bimodal. Hard to say if this is really an improvement.