Web Inspector: there should be an opposite icon for Eye.svg when we want to hide...
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Aug 2019 19:35:45 +0000 (19:35 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 16 Aug 2019 19:35:45 +0000 (19:35 +0000)
https://bugs.webkit.org/show_bug.cgi?id=200736

Reviewed by Joseph Pecoraro.

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

The new hide icon is clearer, as it uses a strikethrough, rather than some shading/greying.

* UserInterface/Views/ShaderProgramTreeElement.css:
(.item.shader-program .status > img):
(.item.shader-program.disabled:matches:hover .status > img): Added.
(.item.shader-program.disabled > :not(.status)): Added.
(.item.shader-program.disabled > *): Deleted.
* UserInterface/Images/Hide.svg: Added.

* UserInterface/Views/ObjectTreePropertyTreeElement.css:
(.object-tree-property .getter):
* UserInterface/Images/Show.svg: Renamed from UserInterface/Images/Eye.svg.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@248782 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Images/Hide.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Images/Show.svg [moved from Source/WebInspectorUI/UserInterface/Images/Eye.svg with 100% similarity]
Source/WebInspectorUI/UserInterface/Views/ObjectTreePropertyTreeElement.css
Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css

index a3dd247..5d9a4f5 100644 (file)
@@ -1,5 +1,30 @@
 2019-08-16  Devin Rousso  <drousso@apple.com>
 
+        Web Inspector: there should be an opposite icon for Eye.svg when we want to hide things instead of showing them
+        https://bugs.webkit.org/show_bug.cgi?id=200736
+
+        Reviewed by Joseph Pecoraro.
+
+        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".
+
+        The new hide icon is clearer, as it uses a strikethrough, rather than some shading/greying.
+
+        * UserInterface/Views/ShaderProgramTreeElement.css:
+        (.item.shader-program .status > img):
+        (.item.shader-program.disabled:matches:hover .status > img): Added.
+        (.item.shader-program.disabled > :not(.status)): Added.
+        (.item.shader-program.disabled > *): Deleted.
+        * UserInterface/Images/Hide.svg: Added.
+
+        * UserInterface/Views/ObjectTreePropertyTreeElement.css:
+        (.object-tree-property .getter):
+        * UserInterface/Images/Show.svg: Renamed from UserInterface/Images/Eye.svg.
+
+2019-08-16  Devin Rousso  <drousso@apple.com>
+
         Web Inspector: rename "Invalid Characters" to "Invisible Characters" for clarity
         https://bugs.webkit.org/show_bug.cgi?id=200808
 
diff --git a/Source/WebInspectorUI/UserInterface/Images/Hide.svg b/Source/WebInspectorUI/UserInterface/Images/Hide.svg
new file mode 100644 (file)
index 0000000..96eb4ed
--- /dev/null
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2019 Apple Inc. All rights reserved. -->
+<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" viewBox="0 0 16 11">
+    <path fill="none" stroke="currentColor" d="M 7.942 8.124 C 6.53 8.124 5.385 6.95 5.385 5.499 C 5.385 4.05 6.53 2.875 7.942 2.875 C 9.355 2.875 10.5 4.05 10.5 5.499 C 10.5 6.95 9.355 8.124 7.942 8.124 M 7.942 1.0 C 3.923 1.0 1.001 5.499 1.001 5.499 C 1.001 5.499 3.923 9.999 7.942 9.999 C 11.962 9.999 14.884 5.499 14.884 5.499 C 14.884 5.499 11.962 1.0 7.942 1.0"/>
+    <path fill="currentColor" d="M 7.942 4.375 C 7.337 4.375 6.846 4.878 6.846 5.5 C 6.846 6.121 7.337 6.625 7.942 6.625 C 8.548 6.625 9.038 6.121 9.038 5.5 C 9.038 4.878 8.548 4.375 7.942 4.375"/>
+    <path stroke="currentColor" d="M 15.5 2 L 0.5 9"></path>
+</svg>
index 13267e8..fd325e4 100644 (file)
 .object-tree-property .getter {
     top: 1px;
 
-    content: url(../Images/Eye.svg);
+    content: url(../Images/Show.svg);
 
     width: 16px;
     height: 11px;
index ce4aed3..5689591 100644 (file)
 .item.shader-program .status > img {
     width: 18px;
     margin-top: 2px;
-    content: url(../Images/Eye.svg);
+    content: url(../Images/Hide.svg);
+}
+
+.item.shader-program.disabled:hover .status > img {
+    content: url(../Images/Show.svg);
 }
 
 .item.shader-program:not(:hover, .selected, .disabled) .status > img {
@@ -37,7 +41,7 @@
     filter: invert();
 }
 
-.item.shader-program.disabled > * {
+.item.shader-program.disabled > :not(.status) {
     opacity: 0.5;
 }