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
+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
--- /dev/null
+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;
+
--- /dev/null
+<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>
--- /dev/null
+<html>
+<head>
+</head>
+<body>
+<div id="frame-node">iframe</div>
+</body>
+</html>
+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
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
}
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;
}
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
}
git://git.webkit.org / WebKit-https.git / commitdiff