WebInspector: Switch hide element shortcut in ElementsPanel to use a selector
[WebKit-https.git] / Source / WebCore / inspector / front-end / ElementsTreeOutline.js
index 05d74fd..b62bef5 100644 (file)
@@ -483,7 +483,7 @@ WebInspector.ElementsTreeOutline.prototype = {
             return;
 
         if (!treeElement._editing && WebInspector.KeyboardShortcut.hasNoModifiers(keyboardEvent) && keyboardEvent.keyCode === WebInspector.KeyboardShortcut.Keys.H.code) {
-            WebInspector.cssModel.toggleInlineVisibility(node.id);
+            this._toggleHideShortcut(node);
             event.consume(true);
             return;
         }
@@ -610,6 +610,48 @@ WebInspector.ElementsTreeOutline.prototype = {
         return newTreeItem;
     },
 
+    /**
+     * Runs a script on the node's remote object that toggles a class name on
+     * the node and injects a stylesheet into the head of the node's document
+     * containing a rule to set "visibility: hidden" on the class and all it's
+     * ancestors.
+     *
+     * @param {WebInspector.DOMNode} node
+     * @param {function(?WebInspector.RemoteObject)=} userCallback
+     */
+    _toggleHideShortcut: function(node, userCallback)
+    {
+        function resolvedNode(object)
+        {
+            if (!object)
+                return;
+
+            function toggleClassAndInjectStyleRule()
+            {
+                const className = "__web-inspector-hide-shortcut__";
+                const styleTagId = "__web-inspector-hide-shortcut-style__";
+                const styleRule = ".__web-inspector-hide-shortcut__, .__web-inspector-hide-shortcut__ * { visibility: hidden !important; }";
+
+                this.classList.toggle(className);
+
+                var style = document.head.querySelector("style#" + styleTagId);
+                if (style)
+                    return;
+
+                style = document.createElement("style");
+                style.id = styleTagId;
+                style.type = "text/css";
+                style.innerHTML = styleRule;
+                document.head.appendChild(style);
+            }
+
+            object.callFunction(toggleClassAndInjectStyleRule, undefined, userCallback);
+            object.release();
+        }
+
+        WebInspector.RemoteObject.resolveNode(node, "", resolvedNode);
+    },
+
     __proto__: TreeOutline.prototype
 }