Bug 200736

Summary: Web Inspector: there should be an opposite icon for Eye.svg when we want to hide things instead of showing them
Product: WebKit Reporter: Devin Rousso <hi>
Component: Web InspectorAssignee: Devin Rousso <hi>
Status: RESOLVED FIXED    
Severity: Normal CC: commit-queue, hi, inspector-bugzilla-changes, joepeck, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
See Also: https://bugs.webkit.org/show_bug.cgi?id=17240
Attachments:
Description Flags
Patch
none
[Image] After Patch is applied
none
Patch none

Description Devin Rousso 2019-08-14 14:31:23 PDT
We currently use Eye.svg for disabling, or turning "off", Shader Programs, but it's not very clear that clicking on the eye (which looks like "show me this", not "hide this") will do that.  Furthermore, a greyed out version also isn't clear that the Shader Program is disabled, instead making the user think that the disable toggle is somehow "not working".  A better icon would fix these issues.
Comment 1 Devin Rousso 2019-08-14 14:38:19 PDT
Created attachment 376311 [details]
Patch
Comment 2 Devin Rousso 2019-08-14 14:38:35 PDT
Created attachment 376312 [details]
[Image] After Patch is applied
Comment 3 Joseph Pecoraro 2019-08-16 01:23:35 PDT
Comment on attachment 376311 [details]
Patch

Shouldn't such a toggle be toggling between Eye / Hide?

• Enabled has "Hide" icon => click => Disable + Show "Eye" icon
• Disabled has "Eye" icon => click => Enable + Show "Hide" icon

I like not applying the opacity filter to the status button.
Comment 4 Joseph Pecoraro 2019-08-16 01:30:00 PDT
> • Enabled has "Hide" icon => click => Disable + Show "Eye" icon
> • Disabled has "Eye" icon => click => Enable + Show "Hide" icon

Err, probably invert the icons I suggested. You probably want the Hide icon to show when the script is disabled, as that is the "status" of the shader. Clicking will change the status.
Comment 5 Devin Rousso 2019-08-16 10:15:31 PDT
(In reply to Joseph Pecoraro from comment #4)
> > • Enabled has "Hide" icon => click => Disable + Show "Eye" icon
> > • Disabled has "Eye" icon => click => Enable + Show "Hide" icon
> 
> Err, probably invert the icons I suggested. You probably want the Hide icon to show when the script is disabled, as that is the "status" of the shader. Clicking will change the status.
My only issue with doing something like this is that if we use a simple `:hover` selector, then as soon as the user clicks to disable the shader, the "Eye" suddenly becomes a "Hide" as the `.disabled:hover` would now apply.  Ideally, we'd wait till the _next_ time the user hovers over the icon to switch from "Hide.svg" to "Eye.svg". 

Then again, breakpoints switch immediately after the click, so maybe I'm overthinking things :P
Comment 6 Devin Rousso 2019-08-16 10:17:46 PDT
Created attachment 376509 [details]
Patch
Comment 7 Joseph Pecoraro 2019-08-16 12:05:58 PDT
Comment on attachment 376509 [details]
Patch

r=me
Comment 8 WebKit Commit Bot 2019-08-16 12:35:51 PDT
Comment on attachment 376509 [details]
Patch

Clearing flags on attachment: 376509

Committed r248782: <https://trac.webkit.org/changeset/248782>
Comment 9 WebKit Commit Bot 2019-08-16 12:35:53 PDT
All reviewed patches have been landed.  Closing bug.
Comment 10 Radar WebKit Bug Importer 2019-08-16 12:36:18 PDT
<rdar://problem/54402848>