- Revision
- 240639
- Author
- [email protected]
- Date
- 2019-01-28 21:21:41 -0800 (Mon, 28 Jan 2019)
Log Message
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.
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (240638 => 240639)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-01-29 04:49:39 UTC (rev 240638)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-01-29 05:21:41 UTC (rev 240639)
@@ -1,3 +1,38 @@
+2019-01-28 Matt Baker <[email protected]>
+
+ 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 <[email protected]>
Unreviewed, rolling out r240351.
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (240638 => 240639)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2019-01-29 04:49:39 UTC (rev 240638)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2019-01-29 05:21:41 UTC (rev 240639)
@@ -490,6 +490,7 @@
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 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)";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (240638 => 240639)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2019-01-29 04:49:39 UTC (rev 240638)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2019-01-29 05:21:41 UTC (rev 240639)
@@ -292,7 +292,7 @@
return this.children[index];
}
- toggleElementVisibility()
+ toggleElementVisibility(forceHidden)
{
let effectiveNode = this.representedObject;
if (effectiveNode.isPseudoElement()) {
@@ -305,21 +305,20 @@
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 @@
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 @@
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.HighlightStyleClassName = "highlight";
WI.DOMTreeElement.SearchHighlightStyleClassName = "search-highlight";
WI.DOMTreeElement.BouncyHighlightStyleClassName = "bouncy-highlight";
+WI.DOMTreeElement.HideElementStyleSheetIdOrClassName = "__WebInspectorHideElement__";
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (240638 => 240639)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2019-01-29 04:49:39 UTC (rev 240638)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2019-01-29 05:21:41 UTC (rev 240639)
@@ -54,8 +54,8 @@
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 @@
treeElement.updateSelectionArea();
}
+ toggleSelectedElementsVisibility(forceHidden)
+ {
+ for (let treeElement of this.selectedTreeElements)
+ treeElement.toggleElementVisibility(forceHidden);
+ }
+
_selectedNodeChanged()
{
this.dispatchEventToListeners(WI.DOMTreeOutline.Event.SelectedNodeChanged);
@@ -534,7 +540,7 @@
this.selectDOMNode(nodeToSelect);
}
- _hideElement(event, keyboardShortcut)
+ _hideElements(event, keyboardShortcut)
{
if (!this.selectedTreeElement || WI.isEditingAnyField())
return;
@@ -541,7 +547,8 @@
event.preventDefault();
- this.selectedTreeElement.toggleElementVisibility();
+ let forceHidden = !this.selectedTreeElements.every((treeElement) => treeElement.isNodeHidden);
+ this.toggleSelectedElementsVisibility(forceHidden);
}
};
