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.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@240639 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
index 3cb28d4..565e1cd 100644
--- a/Source/WebInspectorUI/ChangeLog
+++ b/Source/WebInspectorUI/ChangeLog
@@ -1,3 +1,38 @@
+2019-01-28 Matt Baker <mattbaker@apple.com>
+
+ 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 <commit-queue@webkit.org>
Unreviewed, rolling out r240351.
diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
index ebe29d5..0d9fa4c 100644
--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
@@ -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)";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
index d5d0faf..27b0419 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
@@ -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__";
diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
index 0dc324a..7bfa538 100644
--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
@@ -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,14 +540,15 @@
this.selectDOMNode(nodeToSelect);
}
- _hideElement(event, keyboardShortcut)
+ _hideElements(event, keyboardShortcut)
{
if (!this.selectedTreeElement || WI.isEditingAnyField())
return;
event.preventDefault();
- this.selectedTreeElement.toggleElementVisibility();
+ let forceHidden = !this.selectedTreeElements.every((treeElement) => treeElement.isNodeHidden);
+ this.toggleSelectedElementsVisibility(forceHidden);
}
};
