WebInspector: Switch hide element shortcut in ElementsPanel to use a selector
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Mar 2013 01:58:44 +0000 (01:58 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 1 Mar 2013 01:58:44 +0000 (01:58 +0000)
https://bugs.webkit.org/show_bug.cgi?id=110641

Patch by Eberhard Graether <egraether@google.com> on 2013-02-28
Reviewed by Pavel Feldman.

This change switches the shortcut for adding visibility:hidden to an element's style
to toggling a class name on the element and injecting a style rule into the element's
document instead. This way it is possible to change the visibility of all child
elements as well.

Test: inspector/elements/hide-shortcut.html

Source/WebCore:

* inspector/front-end/CSSStyleModel.js:
* inspector/front-end/ElementsTreeOutline.js:
(WebInspector.ElementsTreeOutline.prototype._onkeydown):
(WebInspector.ElementsTreeOutline.prototype.resolvedNode.toggleClassAndInjectStyleRule):
(WebInspector.ElementsTreeOutline.prototype.):
(WebInspector.ElementsTreeOutline.prototype._toggleHideShortcut):

LayoutTests:

* inspector/elements/hide-shortcut-expected.txt: Added.
* inspector/elements/hide-shortcut.html: Added.
* inspector/elements/resources/hide-shortcut-iframe.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/inspector/elements/hide-shortcut-expected.txt [new file with mode: 0644]
LayoutTests/inspector/elements/hide-shortcut.html [new file with mode: 0644]
LayoutTests/inspector/elements/resources/hide-shortcut-iframe.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/CSSStyleModel.js
Source/WebCore/inspector/front-end/ElementsTreeOutline.js

index 4d73f5a..e3f99fb 100644 (file)
@@ -1,3 +1,21 @@
+2013-02-28  Eberhard Graether  <egraether@google.com>
+
+        WebInspector: Switch hide element shortcut in ElementsPanel to use a selector
+        https://bugs.webkit.org/show_bug.cgi?id=110641
+
+        Reviewed by Pavel Feldman.
+
+        This change switches the shortcut for adding visibility:hidden to an element's style
+        to toggling a class name on the element and injecting a style rule into the element's
+        document instead. This way it is possible to change the visibility of all child
+        elements as well.
+
+        Test: inspector/elements/hide-shortcut.html
+
+        * inspector/elements/hide-shortcut-expected.txt: Added.
+        * inspector/elements/hide-shortcut.html: Added.
+        * inspector/elements/resources/hide-shortcut-iframe.html: Added.
+
 2013-02-28  Seokju Kwon  <seokju.kwon@gmail.com>
 
         [EFL] Focus problem in inspector/extensions/extensions-panel.html
diff --git a/LayoutTests/inspector/elements/hide-shortcut-expected.txt b/LayoutTests/inspector/elements/hide-shortcut-expected.txt
new file mode 100644 (file)
index 0000000..6f7c88c
--- /dev/null
@@ -0,0 +1,27 @@
+Tests the hide shortcut, which toggles visibility:hidden on the node and it's ancestors. Bug 110641
+
+parent
+child
+
+
+Running: testSetUp
+
+Running: testToggleHideShortcutOn
+=== Added hide shortcut ===
+=== Parent node is hidden ===
+visibility: hidden;
+=== Child node is hidden ===
+visibility: hidden;
+
+Running: testToggleHideShortcutOff
+=== Removed hide shortcut ===
+=== Parent node is visible ===
+visibility: visible;
+=== Child node is visible ===
+visibility: visible;
+
+Running: testToggleHideShortcutOnInFrame
+=== Added hide shortcut in frame ===
+=== Frame node is hidden ===
+visibility: hidden;
+
diff --git a/LayoutTests/inspector/elements/hide-shortcut.html b/LayoutTests/inspector/elements/hide-shortcut.html
new file mode 100644 (file)
index 0000000..0f9e64a
--- /dev/null
@@ -0,0 +1,128 @@
+<html>
+<head>
+<script src="../../http/tests/inspector/inspector-test.js"></script>
+<script src="../../http/tests/inspector/elements-test.js"></script>
+<script>
+
+function test()
+{
+    var treeOutline;
+    var parentNode;
+    var childNode;
+    var frameNode;
+
+    WebInspector.showPanel("elements");
+    InspectorTest.runTestSuite([
+        function testSetUp(next)
+        {
+            treeOutline = WebInspector.panels.elements.treeOutline;
+
+            InspectorTest.nodeWithId("parent-node", callback);
+
+            function callback(node)
+            {
+                parentNode = node
+                InspectorTest.nodeWithId("child-node", callback2);
+            }
+
+            function callback2(node)
+            {
+                childNode = node;
+                InspectorTest.nodeWithId("frame-node", callback3);
+            }
+
+            function callback3(node)
+            {
+                frameNode = node;
+                next();
+            }
+        },
+
+        function testToggleHideShortcutOn(next)
+        {
+            treeOutline._toggleHideShortcut(parentNode, callback);
+
+            function callback()
+            {
+                InspectorTest.addResult("=== Added hide shortcut ===");
+                WebInspector.cssModel.getComputedStyleAsync(parentNode.id, callback2);
+            }
+
+            function callback2(style)
+            {
+                InspectorTest.addResult("=== Parent node is hidden ===");
+                InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
+                WebInspector.cssModel.getComputedStyleAsync(childNode.id, callback3);
+            }
+
+            function callback3(style)
+            {
+                InspectorTest.addResult("=== Child node is hidden ===");
+                InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
+                next();
+            }
+        },
+
+        function testToggleHideShortcutOff(next)
+        {
+            treeOutline._toggleHideShortcut(parentNode, callback);
+
+            function callback()
+            {
+                InspectorTest.addResult("=== Removed hide shortcut ===");
+                WebInspector.cssModel.getComputedStyleAsync(parentNode.id, callback2);
+            }
+
+            function callback2(style)
+            {
+                InspectorTest.addResult("=== Parent node is visible ===");
+                InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
+                WebInspector.cssModel.getComputedStyleAsync(childNode.id, callback3);
+            }
+
+            function callback3(style)
+            {
+                InspectorTest.addResult("=== Child node is visible ===");
+                InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
+                next();
+            }
+        },
+
+        function testToggleHideShortcutOnInFrame(next)
+        {
+            treeOutline._toggleHideShortcut(frameNode, callback);
+
+            function callback()
+            {
+                InspectorTest.addResult("=== Added hide shortcut in frame ===");
+                WebInspector.cssModel.getComputedStyleAsync(frameNode.id, callback2);
+            }
+
+            function callback2(style)
+            {
+                InspectorTest.addResult("=== Frame node is hidden ===");
+                InspectorTest.addResult(style.getLiveProperty("visibility").propertyText);
+                next();
+            }
+        }
+    ]);
+}
+</script>
+</head>
+
+<body>
+<p>
+Tests the hide shortcut, which toggles visibility:hidden on the node and it's ancestors.
+<a href="https://bugs.webkit.org/show_bug.cgi?id=110641">Bug 110641</a>
+</p>
+
+<div id="parent-node">parent
+    <div style="visibility:hidden">hidden
+        <div id="child-node" style="visibility:visible">child</div>
+    </div>
+</div>
+
+<iframe src="resources/hide-shortcut-iframe.html" onload="runTest()">
+
+</body>
+</html>
diff --git a/LayoutTests/inspector/elements/resources/hide-shortcut-iframe.html b/LayoutTests/inspector/elements/resources/hide-shortcut-iframe.html
new file mode 100644 (file)
index 0000000..fc3090d
--- /dev/null
@@ -0,0 +1,7 @@
+<html>
+<head>
+</head>
+<body>
+<div id="frame-node">iframe</div>
+</body>
+</html>
index 3fbfef5..4ff02a0 100644 (file)
@@ -1,3 +1,24 @@
+2013-02-28  Eberhard Graether  <egraether@google.com>
+
+        WebInspector: Switch hide element shortcut in ElementsPanel to use a selector
+        https://bugs.webkit.org/show_bug.cgi?id=110641
+
+        Reviewed by Pavel Feldman.
+
+        This change switches the shortcut for adding visibility:hidden to an element's style
+        to toggling a class name on the element and injecting a style rule into the element's
+        document instead. This way it is possible to change the visibility of all child
+        elements as well.
+
+        Test: inspector/elements/hide-shortcut.html
+
+        * inspector/front-end/CSSStyleModel.js:
+        * inspector/front-end/ElementsTreeOutline.js:
+        (WebInspector.ElementsTreeOutline.prototype._onkeydown):
+        (WebInspector.ElementsTreeOutline.prototype.resolvedNode.toggleClassAndInjectStyleRule):
+        (WebInspector.ElementsTreeOutline.prototype.):
+        (WebInspector.ElementsTreeOutline.prototype._toggleHideShortcut):
+
 2013-02-28  Ryuan Choi  <ryuan.choi@samsung.com>
 
         [EFL] Build break with --no-web-audio and --no-video
index 2db3c8f..95d99ea 100644 (file)
@@ -554,29 +554,6 @@ WebInspector.CSSStyleModel.prototype = {
         return new WebInspector.UILocation(uiSourceCode, rawLocation.lineNumber, rawLocation.columnNumber);
     },
 
-    /**
-     * @param {DOMAgent.NodeId} nodeId
-     */
-    toggleInlineVisibility: function(nodeId)
-    {
-        /**
-         * @param {WebInspector.CSSStyleDeclaration} inlineStyles
-         */
-        function callback(inlineStyles)
-        {
-            var visibility = inlineStyles.getLiveProperty("visibility");
-            if (visibility) {
-                if (visibility.value === "hidden")
-                    visibility.setText("", false, true);
-                else
-                    visibility.setValue("hidden", false, true);
-            } else
-                inlineStyles.appendProperty("visibility", "hidden");
-        }
-
-        this.getInlineStylesAsync(nodeId, callback.bind(this));
-    },
-
     __proto__: WebInspector.Object.prototype
 }
 
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
 }