Attachment 360402 Details for Bug 193089 – Patch

[patch] Patch

bug-193089-20190128171623.patch (text/plain), 9.51 KB, created by Matt Baker on 2019-01-28 17:16:24 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Matt Baker

Created: 2019-01-28 17:16:24 PST

Size: 9.51 KB

patch

obsolete

>Subversion Revision: 240556
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index ffddf7c4c6be26091f8a4312fd3ddd2ad0174d4f..46a8004af45dc11e6e9ff7304dd945122e5ed306 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,38 @@
>+2019-01-28  Matt Baker  <mattbaker@apple.com>
>+
>+        Web Inspector: Elements tab should toggle visibility for all selected nodes
>+        https://bugs.webkit.org/show_bug.cgi?id=193089
>+        <rdar://problem/47009256>
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Update "Toggle Visibility" command in DOM tree for multiple selection.
>+        When both visible and hidden elements are selected in the DOM tree,
>+        the toggle command behaves contextually. If one or more elements are
>+        visible, they are hidden, otherwise they are shown. The context menu
>+        shows "Hide Elements" or "Show Elements", respectively.
>+
>+        When only one element is selected, or the context menu target element
>+        is not selected, the command continues to be "Toggle Visibility".
>+
>+        * Localizations/en.lproj/localizedStrings.js:
>+
>+        * UserInterface/Views/DOMTreeElement.js:
>+        (WI.DOMTreeElement.prototype.get isNodeHidden): Added.
>+        (WI.DOMTreeElement.prototype.toggleElementVisibility.inspectedPage_node_injectStyleAndToggleClass):
>+        (WI.DOMTreeElement.prototype.toggleElementVisibility):
>+        (WI.DOMTreeElement.prototype._populateTagContextMenu):
>+
>+        * UserInterface/Views/DOMTreeOutline.js:
>+        (WI.DOMTreeOutline):
>+        (WI.DOMTreeOutline.prototype.toggleSelectedElementsVisibility):  Added.
>+        Provide a public method for toggling the visibility of selected DOM nodes.
>+        Used by the "H" keyboard shortcut and DOMTreeElement context menu.
>+
>+        (WI.DOMTreeOutline.prototype._hideElements):
>+        (WI.DOMTreeOutline.prototype._hideElement): Deleted.
>+        Rename for multiple selection.
>+
> 2019-01-26  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: handle CSS Color 4 color syntaxes
>diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>index bf92bafb669cd61242f3c629d9fde46533667564..e75fb21dc89446984ef1a39bcce322b78072f8a4 100644
>--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>@@ -487,6 +487,7 @@ localizedStrings["Heap Snapshot Object (%s)"] = "Heap Snapshot Object (%s)";
> localizedStrings["Height"] = "Height";
> localizedStrings["Hide Console"] = "Hide Console";
> localizedStrings["Hide Console (%s)"] = "Hide Console (%s)";
>+localizedStrings["Hide Elements"] = "Hide Elements";
> localizedStrings["Hide Grid"] = "Hide Grid";
> localizedStrings["Hide Path"] = "Hide Path";
> localizedStrings["Hide Rulers"] = "Hide Rulers";
>@@ -855,6 +856,7 @@ localizedStrings["Show All"] = "Show All";
> localizedStrings["Show All Nodes (%d More)"] = "Show All Nodes (%d More)";
> localizedStrings["Show Console"] = "Show Console";
> localizedStrings["Show Console tab"] = "Show Console tab";
>+localizedStrings["Show Elements"] = "Show Elements";
> localizedStrings["Show Grid"] = "Show Grid";
> localizedStrings["Show Path"] = "Show Path";
> localizedStrings["Show Remaining (%d)"] = "Show Remaining (%d)";
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
>index d5d0fafe5e5fcda3ba94eaad3df385049e2c60fe..b037328a66748136284eb9403bc6520aa5599ba3 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
>@@ -292,7 +292,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
>         return this.children[index];
>     }
> 
>-    toggleElementVisibility()
>+    toggleElementVisibility(forceHidden)
>     {
>         let effectiveNode = this.representedObject;
>         if (effectiveNode.isPseudoElement()) {
>@@ -305,21 +305,20 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
>         if (effectiveNode.nodeType() !== Node.ELEMENT_NODE)
>             return;
> 
>-        function inspectedPage_node_injectStyleAndToggleClass() {
>-            let hideElementStyleSheetIdOrClassName = "__WebInspectorHideElement__";
>-            let styleElement = document.getElementById(hideElementStyleSheetIdOrClassName);
>+        function inspectedPage_node_injectStyleAndToggleClass(hiddenClassName, force) {
>+            let styleElement = document.getElementById(hiddenClassName);
>             if (!styleElement) {
>                 styleElement = document.createElement("style");
>-                styleElement.id = hideElementStyleSheetIdOrClassName;
>-                styleElement.textContent = "." + hideElementStyleSheetIdOrClassName + " { visibility: hidden !important; }";
>+                styleElement.id = hiddenClassName;
>+                styleElement.textContent = `.${hiddenClassName} { visibility: hidden !important; }`;
>                 document.head.appendChild(styleElement);
>             }
> 
>-            this.classList.toggle(hideElementStyleSheetIdOrClassName);
>+            this.classList.toggle(hiddenClassName, force);
>         }
> 
>         WI.RemoteObject.resolveNode(effectiveNode).then((object) => {
>-            object.callFunction(inspectedPage_node_injectStyleAndToggleClass, undefined, false, () => { });
>+            object.callFunction(inspectedPage_node_injectStyleAndToggleClass, [WI.DOMTreeElement.HideElementStyleSheetIdOrClassName, forceHidden], false);
>             object.release();
>         });
>     }
>@@ -725,7 +724,15 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
> 
>         this._populateNodeContextMenu(contextMenu, subMenus);
> 
>-        contextMenu.appendItem(WI.UIString("Toggle Visibility"), this.toggleElementVisibility.bind(this));
>+        let selectedTreeElements = this.treeOutline ? this.treeOutline.selectedTreeElements : [];
>+        if (this.selected && selectedTreeElements.length > 1) {
>+            let allHidden = selectedTreeElements.every((treeElement) => treeElement.isNodeHidden);
>+            let label = allHidden ? WI.UIString("Show Elements") : WI.UIString("Hide Elements");
>+            contextMenu.appendItem(label, () => {
>+                this.treeOutline.toggleSelectedElementsVisibility(!allHidden);
>+            });
>+        } else
>+            contextMenu.appendItem(WI.UIString("Toggle Visibility"), this.toggleElementVisibility.bind(this));
> 
>         subMenus.add.appendItem(WI.UIString("Attribute"), this._addNewAttribute.bind(this), !isNonShadowEditable);
> 
>@@ -1745,6 +1752,12 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
>         return !!this.representedObject.enabledPseudoClasses.length;
>     }
> 
>+    get isNodeHidden()
>+    {
>+        let classes = this.representedObject.getAttribute("class");
>+        return classes && classes.includes(WI.DOMTreeElement.HideElementStyleSheetIdOrClassName);
>+    }
>+
>     _nodePseudoClassesDidChange(event)
>     {
>         if (this._elementCloseTag)
>@@ -1877,3 +1890,4 @@ WI.DOMTreeElement.BreakpointStatus = {
> WI.DOMTreeElement.HighlightStyleClassName = "highlight";
> WI.DOMTreeElement.SearchHighlightStyleClassName = "search-highlight";
> WI.DOMTreeElement.BouncyHighlightStyleClassName = "bouncy-highlight";
>+WI.DOMTreeElement.HideElementStyleSheetIdOrClassName = "__WebInspectorHideElement__";
>diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
>index 0dc324afb9a9c01d974ae131b5eca602daee9293..18056ba619b875572ee8bea89ee2a4d6570439a0 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
>+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
>@@ -54,8 +54,8 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
>         this._editing = false;
>         this._visible = false;
> 
>-        this._hideElementKeyboardShortcut = new WI.KeyboardShortcut(null, "H", this._hideElement.bind(this), this.element);
>-        this._hideElementKeyboardShortcut.implicitlyPreventsDefault = false;
>+        this._hideElementsKeyboardShortcut = new WI.KeyboardShortcut(null, "H", this._hideElements.bind(this), this.element);
>+        this._hideElementsKeyboardShortcut.implicitlyPreventsDefault = false;
> 
>         WI.settings.showShadowDOM.addEventListener(WI.Setting.Event.Changed, this._showShadowDOMSettingChanged, this);
>     }
>@@ -195,6 +195,16 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
>             treeElement.updateSelectionArea();
>     }
> 
>+    toggleSelectedElementsVisibility(forceHidden)
>+    {
>+        let selectedTreeElements = this.selectedTreeElements;
>+        if (!selectedTreeElements.length)
>+            return;
>+
>+        for (let treeElement of selectedTreeElements)
>+            treeElement.toggleElementVisibility(forceHidden);
>+    }
>+
>     _selectedNodeChanged()
>     {
>         this.dispatchEventToListeners(WI.DOMTreeOutline.Event.SelectedNodeChanged);
>@@ -534,14 +544,15 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
>             this.selectDOMNode(nodeToSelect);
>     }
> 
>-    _hideElement(event, keyboardShortcut)
>+    _hideElements(event, keyboardShortcut)
>     {
>         if (!this.selectedTreeElement || WI.isEditingAnyField())
>             return;
> 
>         event.preventDefault();
> 
>-        this.selectedTreeElement.toggleElementVisibility();
>+        let allHidden = this.selectedTreeElements.every((treeElement) => treeElement.isNodeHidden);
>+        this.toggleSelectedElementsVisibility(!allHidden);
>     }
> };
>

Actions: View | Formatted Diff | Diff

Attachments on bug 193089: 358241 | 358246 | 360402 | 360404 | 360426