- Revision
- 241057
- Author
- alanc...@apple.com
- Date
- 2019-02-06 14:16:19 -0800 (Wed, 06 Feb 2019)
Log Message
Cherry-pick r240639. rdar://problem/47774511
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: https://svn.webkit.org/repository/webkit/trunk@240639 268f45cc-cd09-0410-ab3c-d52691b4dbfc
Modified Paths
Diff
Modified: branches/safari-607-branch/Source/WebInspectorUI/ChangeLog (241056 => 241057)
--- branches/safari-607-branch/Source/WebInspectorUI/ChangeLog 2019-02-06 22:16:17 UTC (rev 241056)
+++ branches/safari-607-branch/Source/WebInspectorUI/ChangeLog 2019-02-06 22:16:19 UTC (rev 241057)
@@ -1,5 +1,80 @@
2019-02-05 Alan Coon <alanc...@apple.com>
+ Cherry-pick r240639. rdar://problem/47774511
+
+ 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: https://svn.webkit.org/repository/webkit/trunk@240639 268f45cc-cd09-0410-ab3c-d52691b4dbfc
+
+ 2019-01-28 Matt Baker <mattba...@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-02-05 Alan Coon <alanc...@apple.com>
+
Cherry-pick r240594. rdar://problem/47774537
REGRESSION(?): Web Inspector: Can have multiple Timelines selected after edit mode
Modified: branches/safari-607-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (241056 => 241057)
--- branches/safari-607-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2019-02-06 22:16:17 UTC (rev 241056)
+++ branches/safari-607-branch/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2019-02-06 22:16:19 UTC (rev 241057)
@@ -476,6 +476,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";
@@ -840,6 +841,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: branches/safari-607-branch/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (241056 => 241057)
--- branches/safari-607-branch/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2019-02-06 22:16:17 UTC (rev 241056)
+++ branches/safari-607-branch/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2019-02-06 22:16:19 UTC (rev 241057)
@@ -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: branches/safari-607-branch/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (241056 => 241057)
--- branches/safari-607-branch/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2019-02-06 22:16:17 UTC (rev 241056)
+++ branches/safari-607-branch/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2019-02-06 22:16:19 UTC (rev 241057)
@@ -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);
}
};
