Bug 200736 - Web Inspector: there should be an opposite icon for Eye.svg when we want to hide things instead of showing them
Summary: Web Inspector: there should be an opposite icon for Eye.svg when we want to h...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Devin Rousso
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-08-14 14:31 PDT by Devin Rousso
Modified: 2019-08-16 12:36 PDT (History)
5 users (show)

See Also:


Attachments
Patch (3.32 KB, patch)
2019-08-14 14:38 PDT, Devin Rousso
no flags Details | Formatted Diff | Diff
[Image] After Patch is applied (21.51 KB, image/png)
2019-08-14 14:38 PDT, Devin Rousso
no flags Details
Patch (6.40 KB, patch)
2019-08-16 10:17 PDT, Devin Rousso
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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>