Attachment 360426 Details for Bug 193089 – Patch for landing

[patch] Patch for landing

bug-193089-20190128200129.patch (text/plain), 9.39 KB, created by Matt Baker on 2019-01-28 20:01:30 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Matt Baker

Created: 2019-01-28 20:01:30 PST

Size: 9.39 KB

patch

obsolete

>Subversion Revision: 240632
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 3cb28d4a97d15fdeb10637ab577e8b458b645ae5..565e1cde72e5890f42d3be14c347fd5011a5e582 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 Devin Rousso.
>+
>+        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-28  Commit Queue  <commit-queue@webkit.org>
> 
>         Unreviewed, rolling out r240351.
>diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>index ebe29d52f9c7cb851f89c5a0b6eeb934d5352f31..0d9fa4cd31e2cf97161ef461a707a921aa0507d8 100644
>--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
>@@ -490,6 +490,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";
>@@ -858,6 +859,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..27b041963ec94789b2478f68195a80b1976fa29b 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));
>+        if (this.selected && this.treeOutline && this.treeOutline.selectedTreeElements.length > 1) {
>+            let forceHidden = !this.treeOutline.selectedTreeElements.every((treeElement) => treeElement.isNodeHidden);
>+            let label = forceHidden ? WI.UIString("Hide Elements") : WI.UIString("Show Elements");
>+            contextMenu.appendItem(label, () => {
>+                if (this.treeOutline)
>+                    this.treeOutline.toggleSelectedElementsVisibility(forceHidden);
>+            });
>+        } 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..7bfa538bceb19a1526079c9bb4055aaa2e16b7f7 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,12 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
>             treeElement.updateSelectionArea();
>     }
> 
>+    toggleSelectedElementsVisibility(forceHidden)
>+    {
>+        for (let treeElement of this.selectedTreeElements)
>+            treeElement.toggleElementVisibility(forceHidden);
>+    }
>+
>     _selectedNodeChanged()
>     {
>         this.dispatchEventToListeners(WI.DOMTreeOutline.Event.SelectedNodeChanged);
>@@ -534,14 +540,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 forceHidden = !this.selectedTreeElements.every((treeElement) => treeElement.isNodeHidden);
>+        this.toggleSelectedElementsVisibility(forceHidden);
>     }
> };
>

Actions: View | Formatted Diff | Diff

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