- Revision
- 136974
- Author
- [email protected]
- Date
- 2012-12-07 12:52:36 -0800 (Fri, 07 Dec 2012)
Log Message
Web Inspector: Add shortcut to set visibility:hidden on elements in the ElementsPanel
https://bugs.webkit.org/show_bug.cgi?id=104146
Patch by Eberhard Graether <[email protected]> on 2012-12-07
Reviewed by Pavel Feldman.
This change adds the shortcut H to set and unset visibility:hidden on the inline style
of elements in the Elementspanel. This feature makes it easier to look for elements that
cause bad rendering performance, because visibility:hidden does not paint the element,
but preserves the layout.
No new tests.
* English.lproj/localizedStrings.js:
* inspector/front-end/CSSStyleModel.js:
(WebInspector.CSSStyleModel.prototype.toggleInlineVisibility):
* inspector/front-end/ElementsPanelDescriptor.js:
(WebInspector.ElementsPanelDescriptor.prototype.registerShortcuts):
* inspector/front-end/ElementsTreeOutline.js:
(WebInspector.ElementsTreeOutline.prototype.handleShortcut):
* inspector/front-end/KeyboardShortcut.js:
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (136973 => 136974)
--- trunk/Source/WebCore/ChangeLog 2012-12-07 20:47:08 UTC (rev 136973)
+++ trunk/Source/WebCore/ChangeLog 2012-12-07 20:52:36 UTC (rev 136974)
@@ -1,3 +1,26 @@
+2012-12-07 Eberhard Graether <[email protected]>
+
+ Web Inspector: Add shortcut to set visibility:hidden on elements in the ElementsPanel
+ https://bugs.webkit.org/show_bug.cgi?id=104146
+
+ Reviewed by Pavel Feldman.
+
+ This change adds the shortcut H to set and unset visibility:hidden on the inline style
+ of elements in the Elementspanel. This feature makes it easier to look for elements that
+ cause bad rendering performance, because visibility:hidden does not paint the element,
+ but preserves the layout.
+
+ No new tests.
+
+ * English.lproj/localizedStrings.js:
+ * inspector/front-end/CSSStyleModel.js:
+ (WebInspector.CSSStyleModel.prototype.toggleInlineVisibility):
+ * inspector/front-end/ElementsPanelDescriptor.js:
+ (WebInspector.ElementsPanelDescriptor.prototype.registerShortcuts):
+ * inspector/front-end/ElementsTreeOutline.js:
+ (WebInspector.ElementsTreeOutline.prototype.handleShortcut):
+ * inspector/front-end/KeyboardShortcut.js:
+
2012-12-07 Andreas Kling <[email protected]>
Improve our decoded data size estimation for style sheets.
Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js (136973 => 136974)
--- trunk/Source/WebCore/English.lproj/localizedStrings.js 2012-12-07 20:47:08 UTC (rev 136973)
+++ trunk/Source/WebCore/English.lproj/localizedStrings.js 2012-12-07 20:52:36 UTC (rev 136974)
@@ -645,6 +645,7 @@
localizedStrings["Close"] = "Close";
localizedStrings["Close Others"] = "Close Others";
localizedStrings["Close All"] = "Close All";
+localizedStrings["Hide element"] = "Hide element";
localizedStrings["Toggle edit as HTML"] = "Toggle edit as HTML";
localizedStrings["Pin navigator"] = "Pin navigator";
localizedStrings["Show navigator"] = "Show navigator";
Modified: trunk/Source/WebCore/inspector/front-end/CSSStyleModel.js (136973 => 136974)
--- trunk/Source/WebCore/inspector/front-end/CSSStyleModel.js 2012-12-07 20:47:08 UTC (rev 136973)
+++ trunk/Source/WebCore/inspector/front-end/CSSStyleModel.js 2012-12-07 20:52:36 UTC (rev 136974)
@@ -530,6 +530,29 @@
return sourceMapping ? sourceMapping.rawLocationToUILocation(rawLocation) : null;
},
+ /**
+ * @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
}
Modified: trunk/Source/WebCore/inspector/front-end/ElementsPanelDescriptor.js (136973 => 136974)
--- trunk/Source/WebCore/inspector/front-end/ElementsPanelDescriptor.js 2012-12-07 20:47:08 UTC (rev 136973)
+++ trunk/Source/WebCore/inspector/front-end/ElementsPanelDescriptor.js 2012-12-07 20:52:36 UTC (rev 136974)
@@ -63,6 +63,7 @@
elementsSection.addRelatedKeys(expandCollapse, WebInspector.UIString("Expand/collapse"));
elementsSection.addAlternateKeys(WebInspector.ElementsPanelDescriptor.ShortcutKeys.EditAttribute, WebInspector.UIString("Edit attribute"));
+ elementsSection.addAlternateKeys(WebInspector.ElementsPanelDescriptor.ShortcutKeys.HideElement, WebInspector.UIString("Hide element"));
elementsSection.addAlternateKeys(WebInspector.ElementsPanelDescriptor.ShortcutKeys.ToggleEditAsHTML, WebInspector.UIString("Toggle edit as HTML"));
var stylesPaneSection = WebInspector.shortcutsScreen.section(WebInspector.UIString("Styles Pane"));
@@ -107,6 +108,10 @@
WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.Enter)
],
+ HideElement: [
+ WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.H)
+ ],
+
ToggleEditAsHTML: [
WebInspector.KeyboardShortcut.makeDescriptor(WebInspector.KeyboardShortcut.Keys.F2)
],
Modified: trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js (136973 => 136974)
--- trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js 2012-12-07 20:47:08 UTC (rev 136973)
+++ trunk/Source/WebCore/inspector/front-end/ElementsTreeOutline.js 2012-12-07 20:52:36 UTC (rev 136974)
@@ -559,6 +559,10 @@
}
}
+ if (event.keyCode === WebInspector.KeyboardShortcut.Keys.H.code) {
+ WebInspector.cssModel.toggleInlineVisibility(node.id);
+ return;
+ }
},
_toggleEditAsHTML: function(node)
Modified: trunk/Source/WebCore/inspector/front-end/KeyboardShortcut.js (136973 => 136974)
--- trunk/Source/WebCore/inspector/front-end/KeyboardShortcut.js 2012-12-07 20:47:08 UTC (rev 136973)
+++ trunk/Source/WebCore/inspector/front-end/KeyboardShortcut.js 2012-12-07 20:52:36 UTC (rev 136974)
@@ -90,7 +90,8 @@
Period: { code: 190, name: "." },
Slash: { code: 191, name: "/" },
Apostrophe: { code: 192, name: "`" },
- SingleQuote: { code: 222, name: "\'" }
+ SingleQuote: { code: 222, name: "\'" },
+ H: { code: 72, name: "H" }
};
/**
