WebKit Bugzilla
Attachment 368869 Details for
Bug 197541
: Web Inspector: Elements: context menu items in DOM tree should work when not clicking directly on the node representation
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-197541-20190502191624.patch (text/plain), 13.41 KB, created by
Devin Rousso
on 2019-05-02 19:16:25 PDT
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Devin Rousso
Created:
2019-05-02 19:16:25 PDT
Size:
13.41 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index 9dc8d0d299134976d3b6231c068015fb9849519b..1c7d9ca1e3f0c90bfb41801fe9a63ee35a0edd2e 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,20 @@ >+2019-05-02 Devin Rousso <drousso@apple.com> >+ >+ Web Inspector: Elements: context menu items in DOM tree should work when not clicking directly on the node representation >+ https://bugs.webkit.org/show_bug.cgi?id=197541 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ * UserInterface/Views/DOMTreeElement.js: >+ (WI.DOMTreeElement.prototype.populateDOMNodeContextMenu): Added. >+ (WI.DOMTreeElement.prototype._populateTagContextMenu): Deleted. >+ (WI.DOMTreeElement.prototype._populateTextContextMenu): Deleted. >+ (WI.DOMTreeElement.prototype._populateNodeContextMenu): Deleted. >+ * UserInterface/Views/DOMTreeOutline.js: >+ (WI.DOMTreeOutline.prototype.populateContextMenu): >+ * UserInterface/Views/ContextMenuUtilities.js: >+ (WI.appendContextMenuItemsForDOMNode): >+ > 2019-04-29 Alex Christensen <achristensen@webkit.org> > > <rdar://problem/50299396> Fix internal High Sierra build >diff --git a/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js b/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js >index e1b126f3eb8f3911d866e1d8fe33c8fe204096d7..c435f7d4caf1a5e0f9149e0718a659a53faa64c0 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js >+++ b/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js >@@ -207,6 +207,20 @@ WI.appendContextMenuItemsForDOMNode = function(contextMenu, domNode, options = { > contextMenu.appendSeparator(); > } > >+ if (WI.cssManager.canForcePseudoClasses() && domNode.attached) { >+ contextMenu.appendSeparator(); >+ >+ let pseudoSubMenu = contextMenu.appendSubMenuItem(WI.UIString("Forced Pseudo-Classes")); >+ >+ let enabledPseudoClasses = domNode.enabledPseudoClasses; >+ WI.CSSManager.ForceablePseudoClasses.forEach((pseudoClass) => { >+ let enabled = enabledPseudoClasses.includes(pseudoClass); >+ pseudoSubMenu.appendCheckboxItem(pseudoClass.capitalize(), () => { >+ domNode.setPseudoClassEnabled(pseudoClass, !enabled); >+ }, enabled); >+ }); >+ } >+ > if (WI.domDebuggerManager.supported && isElement && !domNode.isPseudoElement() && attached) { > contextMenu.appendSeparator(); > >diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >index 0be9b0806e4cbd9515843135e0506a4830d3541f..c39534b3e9c7325ba62f4e053dac78c0709324b6 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >@@ -730,33 +730,10 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > return false; > } > >- _populateTagContextMenu(contextMenu, event, subMenus) >+ populateDOMNodeContextMenu(contextMenu, subMenus, event) > { >- let node = this.representedObject; >- let isNonShadowEditable = !node.isInUserAgentShadowTree() && this.editable; >- let attached = node.attached; >- >- if (event.target && event.target.tagName === "A") >- WI.appendContextMenuItemsForURL(contextMenu, event.target.href, {frame: node.frame}); >- >- contextMenu.appendSeparator(); >- >- this._populateNodeContextMenu(contextMenu, subMenus); >- >- 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); >- > let attribute = event.target.closest(".html-attribute"); >- subMenus.edit.appendItem(WI.UIString("Attribute"), this._startEditingAttribute.bind(this, attribute, event.target), !attribute || ! isNonShadowEditable); >+ let textNode = event.target.closest(".html-text-node"); > > let attributeName = null; > if (attribute) { >@@ -765,68 +742,109 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > attributeName = attributeNameElement.textContent.trim(); > } > >- let attributeValue = node.getAttribute(attributeName); >- subMenus.copy.appendItem(WI.UIString("Attribute"), () => { >- let text = attributeName; >- if (attributeValue) >- text += "=\"" + attributeValue.replace(/"/g, "\\\"") + "\""; >- InspectorFrontendHost.copyText(text); >- }, !attribute || !isNonShadowEditable); >- >- subMenus.delete.appendItem(WI.UIString("Attribute"), () => { >- node.removeAttribute(attributeName); >- }, !attribute || !isNonShadowEditable); >- >- subMenus.edit.appendItem(WI.UIString("Tag"), () => { >- this._startEditingTagName(); >- }, !isNonShadowEditable); >+ if (event.target && event.target.tagName === "A") >+ WI.appendContextMenuItemsForURL(contextMenu, event.target.href, {frame: this.representedObject.frame}); > > contextMenu.appendSeparator(); > >- if (WI.cssManager.canForcePseudoClasses() && attached) { >- let pseudoSubMenu = contextMenu.appendSubMenuItem(WI.UIString("Forced Pseudo-Classes")); >+ let isEditableNode = this.representedObject.nodeType() === Node.ELEMENT_NODE && this.editable; >+ let isNonShadowEditable = !this.representedObject.isInUserAgentShadowTree() && this.editable; >+ let forbiddenClosingTag = WI.DOMTreeElement.ForbiddenClosingTagElements.has(this.representedObject.nodeNameInCorrectCase()); > >- let enabledPseudoClasses = node.enabledPseudoClasses; >- WI.CSSManager.ForceablePseudoClasses.forEach((pseudoClass) => { >- let enabled = enabledPseudoClasses.includes(pseudoClass); >- pseudoSubMenu.appendCheckboxItem(pseudoClass.capitalize(), () => { >- node.setPseudoClassEnabled(pseudoClass, !enabled); >- }, enabled); >+ if (isEditableNode) { >+ if (!forbiddenClosingTag) { >+ subMenus.add.appendItem(WI.UIString("Child"), () => { >+ this._addHTML(); >+ }); >+ } >+ >+ subMenus.add.appendItem(WI.UIString("Previous Sibling"), () => { >+ this._addPreviousSibling(); > }); > >- contextMenu.appendSeparator(); >+ subMenus.add.appendItem(WI.UIString("Next Sibling"), () => { >+ this._addNextSibling(); >+ }); > } >- } > >- _populateTextContextMenu(contextMenu, textNode, subMenus) >- { >- this._populateNodeContextMenu(contextMenu, subMenus); >+ if (isNonShadowEditable) { >+ subMenus.add.appendItem(WI.UIString("Attribute"), () => { >+ this._addNewAttribute(); >+ }); >+ } > >- subMenus.edit.appendItem(WI.UIString("Text"), this._startEditingTextNode.bind(this, textNode), !this.editable); >+ if (this.editable) { >+ subMenus.edit.appendItem(WI.UIString("HTML"), () => { >+ this._editAsHTML(); >+ }); >+ } > >- subMenus.copy.appendItem(WI.UIString("Text"), () => { >- InspectorFrontendHost.copyText(textNode.textContent); >- }, !textNode.textContent.length); >- } >+ if (isNonShadowEditable) { >+ if (attributeName) { >+ subMenus.edit.appendItem(WI.UIString("Attribute"), () => { >+ this._startEditingAttribute(attribute, event.target); >+ }); >+ } > >- _populateNodeContextMenu(contextMenu, subMenus) >- { >- let node = this.representedObject; >+ subMenus.edit.appendItem(WI.UIString("Tag"), () => { >+ this._startEditingTagName(); >+ }); >+ } > >- let isEditableNode = node.nodeType() === Node.ELEMENT_NODE && this.editable; >- let forbiddenClosingTag = WI.DOMTreeElement.ForbiddenClosingTagElements.has(node.nodeNameInCorrectCase()); >- subMenus.add.appendItem(WI.UIString("Child"), this._addHTML.bind(this), forbiddenClosingTag || !isEditableNode); >- subMenus.add.appendItem(WI.UIString("Previous Sibling"), this._addPreviousSibling.bind(this), !isEditableNode); >- subMenus.add.appendItem(WI.UIString("Next Sibling"), this._addNextSibling.bind(this), !isEditableNode); >+ if (textNode && this.editable) { >+ subMenus.edit.appendItem(WI.UIString("Text"), () => { >+ this._startEditingTextNode(textNode); >+ }); >+ } > >- subMenus.edit.appendItem(WI.UIString("HTML"), this._editAsHTML.bind(this), !this.editable); >- subMenus.copy.appendItem(WI.UIString("HTML"), this._copyHTML.bind(this), node.isPseudoElement()); >+ if (!this.representedObject.isPseudoElement()) { >+ subMenus.copy.appendItem(WI.UIString("HTML"), () => { >+ this._copyHTML(); >+ }); >+ } > >- if (!this.selected || this.treeOutline.selectedTreeElements.length === 1) >- subMenus.delete.appendItem(WI.UIString("Node"), this.remove.bind(this), !this.editable); >+ if (attributeName && isNonShadowEditable) { >+ subMenus.copy.appendItem(WI.UIString("Attribute"), () => { >+ let text = attributeName; >+ let attributeValue = this.representedObject.getAttribute(attributeName); >+ if (attributeValue) >+ text += "=\"" + attributeValue.replace(/"/g, "\\\"") + "\""; >+ InspectorFrontendHost.copyText(text); >+ }); >+ } >+ >+ if (textNode && textNode.textContent.length) { >+ subMenus.copy.appendItem(WI.UIString("Text"), () => { >+ InspectorFrontendHost.copyText(textNode.textContent); >+ }); >+ } >+ >+ if (this.editable && (!this.selected || this.treeOutline.selectedTreeElements.length === 1)) { >+ subMenus.delete.appendItem(WI.UIString("Node"), () => { >+ this.remove(); >+ }); >+ } >+ >+ if (attributeName && isNonShadowEditable) { >+ subMenus.delete.appendItem(WI.UIString("Attribute"), () => { >+ this.representedObject.removeAttribute(attributeName); >+ }); >+ } > > for (let subMenu of Object.values(subMenus)) > contextMenu.pushItem(subMenu); >+ >+ 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, () => { >+ this.treeOutline.toggleSelectedElementsVisibility(forceHidden); >+ }); >+ } else { >+ contextMenu.appendItem(WI.UIString("Toggle Visibility"), () => { >+ this.toggleElementVisibility(); >+ }); >+ } > } > > _startEditing() >diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js >index 7a091390cc38eb1f7691f070c0269ad4ae6c38ce..73c42d5a5b38e2df61ded225869d2849fbed8307 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js >+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js >@@ -272,11 +272,6 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline > > populateContextMenu(contextMenu, event, treeElement) > { >- let tag = event.target.closest(".html-tag"); >- let textNode = event.target.closest(".html-text-node"); >- let commentNode = event.target.closest(".html-comment"); >- let pseudoElement = event.target.closest(".html-pseudo-element"); >- > let subMenus = { > add: new WI.ContextSubMenuItem(contextMenu, WI.UIString("Add")), > edit: new WI.ContextSubMenuItem(contextMenu, WI.UIString("Edit")), >@@ -287,12 +282,8 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline > if (treeElement.selected && this.selectedTreeElements.length > 1) > subMenus.delete.appendItem(WI.UIString("Nodes"), () => { this.ondelete(); }, !this._editable); > >- if (tag && treeElement._populateTagContextMenu) >- treeElement._populateTagContextMenu(contextMenu, event, subMenus); >- else if (textNode && treeElement._populateTextContextMenu) >- treeElement._populateTextContextMenu(contextMenu, textNode, subMenus); >- else if ((commentNode || pseudoElement) && treeElement._populateNodeContextMenu) >- treeElement._populateNodeContextMenu(contextMenu, subMenus); >+ if (treeElement.populateDOMNodeContextMenu) >+ treeElement.populateDOMNodeContextMenu(contextMenu, subMenus, event, subMenus); > > let options = { > excludeRevealElement: this._excludeRevealElementContextMenu,
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 197541
: 368869 |
368885