WebKit Bugzilla
Attachment 360426 Details for
Bug 193089
: Web Inspector: Elements tab should toggle visibility for all selected nodes
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch for landing
bug-193089-20190128200129.patch (text/plain), 9.39 KB, created by
Matt Baker
on 2019-01-28 20:01:30 PST
(
hide
)
Description:
Patch for landing
Filename:
MIME Type:
Creator:
Matt Baker
Created:
2019-01-28 20:01:30 PST
Size:
9.39 KB
patch
obsolete
>Subversion Revision: 240632 >diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index 3cb28d4a97d15fdeb10637ab577e8b458b645ae5..565e1cde72e5890f42d3be14c347fd5011a5e582 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 ebe29d52f9c7cb851f89c5a0b6eeb934d5352f31..0d9fa4cd31e2cf97161ef461a707a921aa0507d8 100644 >--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >@@ -490,6 +490,7 @@ localizedStrings["Heap Snapshot Object (%s)"] = "Heap Snapshot Object (%s)"; > 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"] = "Show All"; > 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 d5d0fafe5e5fcda3ba94eaad3df385049e2c60fe..27b041963ec94789b2478f68195a80b1976fa29b 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >@@ -292,7 +292,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > return this.children[index]; > } > >- toggleElementVisibility() >+ toggleElementVisibility(forceHidden) > { > let effectiveNode = this.representedObject; > if (effectiveNode.isPseudoElement()) { >@@ -305,21 +305,20 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > 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 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > > 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 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > 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.BreakpointStatus = { > 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 0dc324afb9a9c01d974ae131b5eca602daee9293..7bfa538bceb19a1526079c9bb4055aaa2e16b7f7 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js >+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js >@@ -54,8 +54,8 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline > 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 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline > treeElement.updateSelectionArea(); > } > >+ toggleSelectedElementsVisibility(forceHidden) >+ { >+ for (let treeElement of this.selectedTreeElements) >+ treeElement.toggleElementVisibility(forceHidden); >+ } >+ > _selectedNodeChanged() > { > this.dispatchEventToListeners(WI.DOMTreeOutline.Event.SelectedNodeChanged); >@@ -534,14 +540,15 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline > 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); > } > }; >
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 193089
:
358241
|
358246
|
360402
|
360404
| 360426