Changeset 249513 in webkit

Timestamp:

Sep 4, 2019 7:15:48 PM (5 years ago)

Author:

Devin Rousso

Message:

Web Inspector: unify the interaction of show/hide status icons in Sources and Canvas
​https://bugs.webkit.org/show_bug.cgi?id=201470

Reviewed by Joseph Pecoraro.

Rather than "fading" the tree element's text when the underlying represented object is
disabled/blackboxed, we should just "fade" the icon. The "fade" shouldn't change when the
tree element is selected. The image of the status eye also shouldn't change depending on
whether the underlying represented object is disabled/blackboxed, as it being visible (even
if it's "faded") is already enough of an indicator.

It should also be possible to toggle the disabled/blackboxed state via the context menu.

• UserInterface/Views/ContextMenuUtilities.js:

(WI.appendContextMenuItemsForSourceCode):

• UserInterface/Views/SourceCodeTreeElement.css:

(.tree-outline:not(.navigation-sidebar-panel-content-tree-outline) .item .status > .toggle-script-blackboxed, .tree-outline .item:not(:hover) .status > .toggle-script-blackboxed:not(.blackboxed)): Added.
(.tree-outline:not(.navigation-sidebar-panel-content-tree-outline) .item .status > .toggle-script-blackboxed, .tree-outline .item:not(:hover, .selected) .status > .toggle-script-blackboxed:not(.blackboxed)): Deleted.

• UserInterface/Models/ShaderProgram.js:

(WI.ShaderProgram):
(WI.ShaderProgram.prototype.get disabled): Added.
(WI.ShaderProgram.prototype.set disabled): Added.
(WI.ShaderProgram.prototype.toggleDisabled): Deleted.

• UserInterface/Views/ShaderProgramTreeElement.js:

(WI.ShaderProgramTreeElement.prototype.onattach):
(WI.ShaderProgramTreeElement.prototype.ondetach): Added.
(WI.ShaderProgramTreeElement.prototype.canSelectOnMouseDown):
(WI.ShaderProgramTreeElement.prototype.populateContextMenu): Added.
(WI.ShaderProgramTreeElement.prototype._disabledImageElementClicked):
(WI.ShaderProgramTreeElement.prototype._handleShaderProgramDisabledChanged): Added.

• UserInterface/Views/ShaderProgramTreeElement.css:

(.tree-outline .item.shader-program .status > img): Added.
(.tree-outline .item.shader-program:not(:hover, .selected, .disabled) .status > img): Added.
(.tree-outline .item.shader-program.disabled .status > img): Added.
(@media (prefers-color-scheme: dark) .tree-outline .item.shader-program .status > img): Added.
(.item.shader-program .status > img): Deleted.
(.item.shader-program.disabled:hover .status > img): Deleted.
(.item.shader-program:not(:hover, .selected, .disabled) .status > img): Deleted.
(.item.shader-program.disabled > :not(.status)): Deleted.
(@media (prefers-color-scheme: dark) .item.shader-program .status > img): Deleted.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Models/ShaderProgram.js (modified) (5 diffs)
• UserInterface/Views/ContextMenuUtilities.js (modified) (1 diff)
• UserInterface/Views/ShaderProgramTreeElement.css (modified) (3 diffs)
• UserInterface/Views/ShaderProgramTreeElement.js (modified) (2 diffs)
• UserInterface/Views/SourceCodeTreeElement.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2019-09-04  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: unify the interaction of show/hide status icons in Sources and Canvas
+        https://bugs.webkit.org/show_bug.cgi?id=201470
+
+        Reviewed by Joseph Pecoraro.
+
+        Rather than "fading" the tree element's text when the underlying represented object is
+        disabled/blackboxed, we should just "fade" the icon. The "fade" shouldn't change when the
+        tree element is selected. The image of the status eye also shouldn't change depending on
+        whether the underlying represented object is disabled/blackboxed, as it being visible (even
+        if it's "faded") is already enough of an indicator.
+
+        It should also be possible to toggle the disabled/blackboxed state via the context menu.
+
+        * UserInterface/Views/ContextMenuUtilities.js:
+        (WI.appendContextMenuItemsForSourceCode):
+        * UserInterface/Views/SourceCodeTreeElement.css:
+        (.tree-outline:not(.navigation-sidebar-panel-content-tree-outline) .item .status > .toggle-script-blackboxed, .tree-outline .item:not(:hover) .status > .toggle-script-blackboxed:not(.blackboxed)): Added.
+        (.tree-outline:not(.navigation-sidebar-panel-content-tree-outline) .item .status > .toggle-script-blackboxed, .tree-outline .item:not(:hover, .selected) .status > .toggle-script-blackboxed:not(.blackboxed)): Deleted.
+
+        * UserInterface/Models/ShaderProgram.js:
+        (WI.ShaderProgram):
+        (WI.ShaderProgram.prototype.get disabled): Added.
+        (WI.ShaderProgram.prototype.set disabled): Added.
+        (WI.ShaderProgram.prototype.toggleDisabled): Deleted.
+        * UserInterface/Views/ShaderProgramTreeElement.js:
+        (WI.ShaderProgramTreeElement.prototype.onattach):
+        (WI.ShaderProgramTreeElement.prototype.ondetach): Added.
+        (WI.ShaderProgramTreeElement.prototype.canSelectOnMouseDown):
+        (WI.ShaderProgramTreeElement.prototype.populateContextMenu): Added.
+        (WI.ShaderProgramTreeElement.prototype._disabledImageElementClicked):
+        (WI.ShaderProgramTreeElement.prototype._handleShaderProgramDisabledChanged): Added.
+        * UserInterface/Views/ShaderProgramTreeElement.css:
+        (.tree-outline .item.shader-program .status > img): Added.
+        (.tree-outline .item.shader-program:not(:hover, .selected, .disabled) .status > img): Added.
+        (.tree-outline .item.shader-program.disabled .status > img): Added.
+        (@media (prefers-color-scheme: dark) .tree-outline .item.shader-program .status > img): Added.
+        (.item.shader-program .status > img): Deleted.
+        (.item.shader-program.disabled:hover .status > img): Deleted.
+        (.item.shader-program:not(:hover, .selected, .disabled) .status > img): Deleted.
+        (.item.shader-program.disabled > :not(.status)): Deleted.
+        (@media (prefers-color-scheme: dark) .item.shader-program .status > img): Deleted.
+
 2019-09-04  Joseph Pecoraro  <pecoraro@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Models/ShaderProgram.js

@@ -24 +24 @@
  */
 
-WI.ShaderProgram = class ShaderProgram
+WI.ShaderProgram = class ShaderProgram extends WI.Object
 {
     constructor(identifier, canvas)
@@ -30 +30 @@
         console.assert(identifier);
         console.assert(canvas instanceof WI.Canvas);
+
+        super();
 
         this._identifier = identifier;
@@ -41 +43 @@
     get identifier() { return this._identifier; }
     get canvas() { return this._canvas; }
-    get disabled() { return this._disabled; }
 
     get displayName()
     {
         return WI.UIString("Program %d").format(this._uniqueDisplayNumber);
+    }
+
+    get disabled()
+    {
+        return this._disabled;
+    }
+
+    set disabled(disabled)
+    {
+        if (this._disabled === disabled)
+            return;
+
+        this._disabled = disabled;
+
+        CanvasAgent.setShaderProgramDisabled(this._identifier, disabled);
+
+        this.dispatchEventToListeners(ShaderProgram.Event.DisabledChanged);
     }
 
@@ -66 +84 @@
     {
         this._updateShader(CanvasAgent.ShaderType.Fragment, source);
-    }
-
-    toggleDisabled(callback)
-    {
-        CanvasAgent.setShaderProgramDisabled(this._identifier, !this._disabled, (error) => {
-            console.assert(!error, error);
-            if (error)
-                return;
-
-            this._disabled = !this._disabled;
-            callback();
-        });
     }
 
@@ -122 +128 @@
     Vertex: "shader-type-vertex",
 };
+
+WI.ShaderProgram.Event = {
+    DisabledChanged: "shader-program-disabled-changed",
+};

trunk/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js

@@ -85 +85 @@
     contextMenu.appendSeparator();
 
+    if (sourceCode.supportsScriptBlackboxing) {
+        let isBlackboxed = WI.debuggerManager.isScriptBlackboxed(sourceCode);
+        contextMenu.appendItem(isBlackboxed ? WI.UIString("Include script when debugging") : WI.UIString("Ignore script when debugging"), () => {
+            WI.debuggerManager.setShouldBlackboxScript(sourceCode, !isBlackboxed);
+        });
+    }
+
+    contextMenu.appendSeparator();
+
     WI.appendContextMenuItemsForURL(contextMenu, sourceCode.url, {sourceCode, location});
 

trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.css

@@ -24 +24 @@
  */
 
-.item.shader-program .status > img {
+ .tree-outline .item.shader-program .status > img {
     width: 18px;
     margin-top: 2px;
@@ -30 +30 @@
 }
 
-.item.shader-program.disabled:hover .status > img {
-    content: url(../Images/Show.svg);
-}
-
-.item.shader-program:not(:hover, .selected, .disabled) .status > img {
+.tree-outline .item.shader-program:not(:hover, .selected, .disabled) .status > img {
     display: none;
 }
@@ -42 +38 @@
 }
 
-.item.shader-program.disabled > :not(.status) {
+.tree-outline .item.shader-program.disabled .status > img {
     opacity: 0.5;
 }
 
 @media (prefers-color-scheme: dark) {
-    .item.shader-program .status > img {
+    .tree-outline .item.shader-program .status > img {
         filter: invert();
     }

trunk/Source/WebInspectorUI/UserInterface/Views/ShaderProgramTreeElement.js

@@ -45 +45 @@
         super.onattach();
 
+        this.representedObject.addEventListener(WI.ShaderProgram.Event.DisabledChanged, this._handleShaderProgramDisabledChanged, this);
+
         this.element.addEventListener("mouseover", this._handleMouseOver.bind(this));
         this.element.addEventListener("mouseout", this._handleMouseOut.bind(this));
     }
 
+    ondetach()
+    {
+        this.representedObject.removeEventListener(WI.ShaderProgram.Event.DisabledChanged, this._handleShaderProgramDisabledChanged, this);
+
+        super.ondetach();
+    }
+
     canSelectOnMouseDown(event)
     {
-        return !this._statusElement.contains(event.target);
+        if (this._disabledImageElement.contains(event.target))
+            return false;
+        return super.canSelectOnMouseDown(event);
+    }
+
+    populateContextMenu(contextMenu, event)
+    {
+        let disabled = this.representedObject.disabled;
+        contextMenu.appendItem(disabled ? WI.UIString("Enable Program") : WI.UIString("Disable Program"), () => {
+            this.representedObject.disabled = !disabled;
+        });
+
+        contextMenu.appendSeparator();
+
+        super.populateContextMenu(contextMenu, event);
     }
 
@@ -58 +81 @@
     _disabledImageElementClicked(event)
     {
-        this.representedObject.toggleDisabled(() => {
-            this._listItemNode.classList.toggle("disabled", !!this.representedObject.disabled);
-            this._disabledImageElement.title = this.representedObject.disabled ? WI.UIString("Enable Program") : WI.UIString("Disable Program");
-        });
+        this.representedObject.disabled = !this.representedObject.disabled;
+    }
+
+    _handleShaderProgramDisabledChanged(event)
+    {
+        this._listItemNode.classList.toggle("disabled", !!this.representedObject.disabled);
+        this._disabledImageElement.title = this.representedObject.disabled ? WI.UIString("Enable Program") : WI.UIString("Disable Program");
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/SourceCodeTreeElement.css

@@ -31 +31 @@
 
 .tree-outline:not(.navigation-sidebar-panel-content-tree-outline) .item .status > .toggle-script-blackboxed,
-.tree-outline .item:not(:hover, .selected) .status > .toggle-script-blackboxed:not(.blackboxed) {
+.tree-outline .item:not(:hover) .status > .toggle-script-blackboxed:not(.blackboxed) {
     display: none;
 }