Skip to content

Commit fbc9d4f

Browse files
rcaliman-applercaliman-apple
committed
Web Inspector: Elements: Some context menu options don't make sense when multiple DOM nodes are selected
https://bugs.webkit.org/show_bug.cgi?id=307780 rdar://170307979 Reviewed by Devin Rousso. Prevent creation of context menu options that apply only to a single DOM node when there are multiple nodes selected. * Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js: (WI.DOMTreeElement.prototype.populateDOMNodeContextMenu): * Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js: (WI.DOMTreeOutline.prototype.populateContextMenu): Canonical link: https://commits.webkit.org/307485@main
1 parent 6617034 commit fbc9d4f

File tree

2 files changed

+47
-40
lines changed

2 files changed

+47
-40
lines changed

‎Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js‎

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -814,53 +814,54 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
814814
let isNonShadowEditable = isEditableNode && (!this.representedObject.isInUserAgentShadowTree() || WI.DOMManager.supportsEditingUserAgentShadowTrees());
815815
let alreadyEditingHTML = this._htmlEditElement && WI.isBeingEdited(this._htmlEditElement);
816816
let openTagTreeElement = this.isElementCloseTag ? this.treeOutline.findTreeElement(this.representedObject) : this;
817+
let selectedTreeElements = this.treeOutline.selectedTreeElements;
817818

818819
if (isEditableNode) {
819820
if (!DOMTreeElement.ForbiddenClosingTagElements.has(this.representedObject.nodeNameInCorrectCase())) {
820-
subMenus.add.appendItem(WI.UIString("Child", "A submenu item of 'Add' to append DOM nodes to the selected DOM node"), () => {
821+
subMenus.add?.appendItem(WI.UIString("Child", "A submenu item of 'Add' to append DOM nodes to the selected DOM node"), () => {
821822
openTagTreeElement._addHTML();
822823
}, alreadyEditingHTML);
823824
}
824825

825-
subMenus.add.appendItem(WI.UIString("Previous Sibling", "A submenu item of 'Add' to add DOM nodes before the selected DOM node"), () => {
826+
subMenus.add?.appendItem(WI.UIString("Previous Sibling", "A submenu item of 'Add' to add DOM nodes before the selected DOM node"), () => {
826827
openTagTreeElement._addPreviousSibling();
827828
}, alreadyEditingHTML);
828829

829-
subMenus.add.appendItem(WI.UIString("Next Sibling", "A submenu item of 'Add' to add DOM nodes after the selected DOM node"), () => {
830+
subMenus.add?.appendItem(WI.UIString("Next Sibling", "A submenu item of 'Add' to add DOM nodes after the selected DOM node"), () => {
830831
openTagTreeElement._addNextSibling();
831832
}, alreadyEditingHTML);
832833
}
833834

834835
if (isNonShadowEditable) {
835-
subMenus.add.appendItem(WI.UIString("Attribute"), () => {
836+
subMenus.add?.appendItem(WI.UIString("Attribute"), () => {
836837
openTagTreeElement._addNewAttribute();
837838
});
838839
}
839840

840841
if (this.editable) {
841-
subMenus.edit.appendItem(WI.UIString("HTML"), () => {
842+
subMenus.edit?.appendItem(WI.UIString("HTML"), () => {
842843
this._editAsHTML();
843844
}, alreadyEditingHTML);
844845
}
845846

846847
if (isNonShadowEditable) {
847848
if (attributeName) {
848-
subMenus.edit.appendItem(WI.UIString("Attribute"), () => {
849+
subMenus.edit?.appendItem(WI.UIString("Attribute"), () => {
849850
this._startEditingAttribute(attributeNode, event.target);
850851
}, WI.isBeingEdited(attributeNode));
851852
}
852853

853854
if (InspectorBackend.hasCommand("DOM.setNodeName") && !DOMTreeElement.UneditableTagNames.has(this.representedObject.nodeNameInCorrectCase())) {
854855
let tagNameNode = event.target.closest(".html-tag-name");
855856

856-
subMenus.edit.appendItem(WI.UIString("Tag", "A submenu item of 'Edit' to change DOM element's tag name"), () => {
857+
subMenus.edit?.appendItem(WI.UIString("Tag", "A submenu item of 'Edit' to change DOM element's tag name"), () => {
857858
this._startEditingTagName(tagNameNode);
858859
}, WI.isBeingEdited(tagNameNode));
859860
}
860861
}
861862

862863
if (textNode && this.editable) {
863-
subMenus.edit.appendItem(WI.UIString("Text"), () => {
864+
subMenus.edit?.appendItem(WI.UIString("Text"), () => {
864865
this._startEditingTextNode(textNode);
865866
}, WI.isBeingEdited(textNode));
866867
}
@@ -885,40 +886,42 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement
885886
});
886887
}
887888

888-
if (attributeName) {
889-
subMenus.copy.appendItem(WI.UIString("Attribute"), () => {
890-
let text = attributeName;
891-
let attributeValue = this.representedObject.getAttribute(attributeName);
892-
if (attributeValue)
893-
text += "=\"" + attributeValue.replace(/"/g, "\\\"") + "\"";
894-
InspectorFrontendHost.copyText(text);
895-
});
896-
}
889+
if (selectedTreeElements.length === 1) {
890+
if (attributeName) {
891+
subMenus.copy.appendItem(WI.UIString("Attribute"), () => {
892+
let text = attributeName;
893+
let attributeValue = this.representedObject.getAttribute(attributeName);
894+
if (attributeValue)
895+
text += "=\"" + attributeValue.replace(/"/g, "\\\"") + "\"";
896+
InspectorFrontendHost.copyText(text);
897+
});
898+
}
897899

898-
if (textNode && textNode.textContent.length) {
899-
subMenus.copy.appendItem(WI.UIString("Text"), () => {
900-
InspectorFrontendHost.copyText(textNode.textContent);
901-
});
902-
}
900+
if (textNode?.textContent.length) {
901+
subMenus.copy.appendItem(WI.UIString("Text"), () => {
902+
InspectorFrontendHost.copyText(textNode.textContent);
903+
});
904+
}
903905

904-
if (this.editable && (!this.selected || this.treeOutline.selectedTreeElements.length === 1)) {
905-
subMenus.delete.appendItem(WI.UIString("Node"), () => {
906-
this.remove();
907-
});
908-
}
906+
if (this.editable) {
907+
subMenus.delete.appendItem(WI.UIString("Node"), () => {
908+
this.remove();
909+
});
910+
}
909911

910-
if (attributeName && isNonShadowEditable) {
911-
subMenus.delete.appendItem(WI.UIString("Attribute"), () => {
912-
this.representedObject.removeAttribute(attributeName);
913-
});
912+
if (attributeName && isNonShadowEditable) {
913+
subMenus.delete.appendItem(WI.UIString("Attribute"), () => {
914+
this.representedObject.removeAttribute(attributeName);
915+
});
916+
}
914917
}
915918

916919
for (let subMenu of Object.values(subMenus))
917920
contextMenu.pushItem(subMenu);
918921

919922
if (this.treeOutline.editable) {
920-
if (this.selected && this.treeOutline && this.treeOutline.selectedTreeElements.length > 1) {
921-
let forceHidden = !this.treeOutline.selectedTreeElements.every((treeElement) => treeElement.isNodeHidden);
923+
if (this.selected && selectedTreeElements.length > 1) {
924+
let forceHidden = !selectedTreeElements.every((treeElement) => treeElement.isNodeHidden);
922925
let label = forceHidden ? WI.UIString("Hide Elements") : WI.UIString("Show Elements");
923926
contextMenu.appendItem(label, () => {
924927
this.treeOutline.toggleSelectedElementsVisibility(forceHidden);

‎Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -288,12 +288,15 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
288288

289289
populateContextMenu(contextMenu, event, treeElement)
290290
{
291-
let subMenus = {
292-
add: new WI.ContextSubMenuItem(contextMenu, WI.UIString("Add")),
293-
edit: new WI.ContextSubMenuItem(contextMenu, WI.UIString("Edit")),
294-
copy: new WI.ContextSubMenuItem(contextMenu, WI.UIString("Copy")),
295-
delete: new WI.ContextSubMenuItem(contextMenu, WI.UIString("Delete")),
296-
};
291+
let subMenus = {};
292+
293+
if (this.selectedTreeElements.length === 1) {
294+
subMenus.add = new WI.ContextSubMenuItem(contextMenu, WI.UIString("Add"));
295+
subMenus.edit = new WI.ContextSubMenuItem(contextMenu, WI.UIString("Edit"));
296+
}
297+
298+
subMenus.copy = new WI.ContextSubMenuItem(contextMenu, WI.UIString("Copy"));
299+
subMenus.delete = new WI.ContextSubMenuItem(contextMenu, WI.UIString("Delete"));
297300

298301
if (this.editable && treeElement.selected && this.selectedTreeElements.length > 1) {
299302
subMenus.delete.appendItem(WI.UIString("Nodes"), () => {
@@ -315,7 +318,8 @@ WI.DOMTreeOutline = class DOMTreeOutline extends WI.TreeOutline
315318
if (treeElement.bindRevealDescendantBreakpointsMenuItemHandler)
316319
options.revealDescendantBreakpointsMenuItemHandler = treeElement.bindRevealDescendantBreakpointsMenuItemHandler();
317320

318-
WI.appendContextMenuItemsForDOMNode(contextMenu, treeElement.representedObject, options);
321+
if (this.selectedTreeElements.length === 1)
322+
WI.appendContextMenuItemsForDOMNode(contextMenu, treeElement.representedObject, options);
319323

320324
super.populateContextMenu(contextMenu, event, treeElement);
321325
}

0 commit comments

Comments
 (0)