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 Inspector

Assignee:

Devin Rousso <hi>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

commit-queue, hi, inspector-bugzilla-changes, joepeck, webkit-bug-importer

Priority:

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

Devin Rousso

Reported 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.

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
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.

Devin Rousso

Comment 1 2019-08-14 14:38:19 PDT

Created attachment 376311 [details] Patch

Devin Rousso

Comment 2 2019-08-14 14:38:35 PDT

Created attachment 376312 [details] [Image] After Patch is applied

Joseph Pecoraro

Comment 3 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.

Joseph Pecoraro

Comment 4 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.

Devin Rousso

Comment 5 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

Devin Rousso

Comment 6 2019-08-16 10:17:46 PDT

Created attachment 376509 [details] Patch

Joseph Pecoraro

Comment 7 2019-08-16 12:05:58 PDT

Comment on attachment 376509 [details] Patch r=me

WebKit Commit Bot

Comment 8 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>

WebKit Commit Bot

Comment 9 2019-08-16 12:35:53 PDT

All reviewed patches have been landed. Closing bug.

Radar WebKit Bug Importer

Comment 10 2019-08-16 12:36:18 PDT

<rdar://problem/54402848>

Note You need to log in before you can comment on or make changes to this bug.