Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (218520 => 218521)
--- trunk/Source/WebInspectorUI/ChangeLog 2017-06-20 01:04:15 UTC (rev 218520)
+++ trunk/Source/WebInspectorUI/ChangeLog 2017-06-20 01:17:02 UTC (rev 218521)
@@ -1,3 +1,34 @@
+2017-06-19 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: Unify contextmenu items for all node links/previews
+ https://bugs.webkit.org/show_bug.cgi?id=173187
+
+ Reviewed by Joseph Pecoraro.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ * UserInterface/Views/ContextMenuUtilities.js:
+ (WebInspector.appendContextMenuItemsForDOMNode.didGetFunctionDetails): Added.
+ (WebInspector.appendContextMenuItemsForDOMNode.didGetProperty): Added.
+ (WebInspector.appendContextMenuItemsForDOMNode.didResolveNode): Added.
+ (WebInspector.appendContextMenuItemsForDOMNode): Added.
+ * UserInterface/Views/DOMTreeElement.js:
+ (WebInspector.DOMTreeElement.prototype._populateTagContextMenu):
+ (WebInspector.DOMTreeElement.prototype._populateNodeContextMenu):
+ (WebInspector.DOMTreeElement.prototype._showCustomElementDefinition): Deleted.
+ * UserInterface/Views/DOMTreeOutline.js:
+ (WebInspector.DOMTreeOutline.prototype.populateContextMenu):
+ (WebInspector.DOMTreeOutline.prototype._populateContextMenu.revealElement): Deleted.
+ (WebInspector.DOMTreeOutline.prototype._populateContextMenu.logElement): Deleted.
+ (WebInspector.DOMTreeOutline.prototype._populateContextMenu): Deleted.
+ * UserInterface/Views/RulesStyleDetailsPanel.js:
+ (WebInspector.RulesStyleDetailsPanel.prototype.refresh.insertMediaOrInheritanceLabel):
+ Unify common DOM node context menu actions into a single helper function.
+
+ * UserInterface/Base/DOMUtilities.js:
+ (WebInspector.linkifyNodeReference):
+ (WebInspector.linkifyNodeReferenceElement):
+ Rework parameters to use options dictionary.
+
2017-06-16 Matt Baker <mattba...@apple.com>
Web Inspector: Instrument 2D/WebGL canvas contexts in the backend
Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (218520 => 218521)
--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2017-06-20 01:04:15 UTC (rev 218520)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2017-06-20 01:17:02 UTC (rev 218521)
@@ -509,6 +509,7 @@
localizedStrings["Log Frame Text"] = "Log Frame Text";
localizedStrings["Log Frame Value"] = "Log Frame Value";
localizedStrings["Log Message"] = "Log Message";
+localizedStrings["Log Node"] = "Log Node";
localizedStrings["Log Symbol"] = "Log Symbol";
localizedStrings["Log Value"] = "Log Value";
localizedStrings["Log WebSocket"] = "Log WebSocket";
@@ -728,6 +729,7 @@
localizedStrings["Selected Frame"] = "Selected Frame";
localizedStrings["Selected Item"] = "Selected Item";
localizedStrings["Selected Items"] = "Selected Items";
+localizedStrings["Selected Node"] = "Selected Node";
localizedStrings["Selected Symbol"] = "Selected Symbol";
localizedStrings["Selected Value"] = "Selected Value";
localizedStrings["Selected WebSocket"] = "Selected WebSocket";
Modified: trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js (218520 => 218521)
--- trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js 2017-06-20 01:04:15 UTC (rev 218520)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js 2017-06-20 01:17:02 UTC (rev 218521)
@@ -57,24 +57,21 @@
return link;
};
-WebInspector.linkifyNodeReference = function(node, maxLength)
+WebInspector.linkifyNodeReference = function(node, options = {})
{
let displayName = node.displayName;
- if (!isNaN(maxLength))
- displayName = displayName.truncate(maxLength);
+ if (!isNaN(options.maxLength))
+ displayName = displayName.truncate(options.maxLength);
let link = document.createElement("span");
link.append(displayName);
- return WebInspector.linkifyNodeReferenceElement(node, link, displayName);
+ return WebInspector.linkifyNodeReferenceElement(node, link, Object.shallowMerge(options, {displayName}));
};
-WebInspector.linkifyNodeReferenceElement = function(node, element, displayName)
+WebInspector.linkifyNodeReferenceElement = function(node, element, options = {})
{
- if (!displayName)
- displayName = node.displayName;
-
element.setAttribute("role", "link");
- element.title = displayName;
+ element.title = options.displayName || node.displayName;
let nodeType = node.nodeType();
if ((nodeType !== Node.DOCUMENT_NODE || node.parentNode) && nodeType !== Node.TEXT_NODE)
@@ -83,6 +80,10 @@
element.addEventListener("click", WebInspector.domTreeManager.inspectElement.bind(WebInspector.domTreeManager, node.id));
element.addEventListener("mouseover", WebInspector.domTreeManager.highlightDOMNode.bind(WebInspector.domTreeManager, node.id, "all"));
element.addEventListener("mouseout", WebInspector.domTreeManager.hideDOMNodeHighlight.bind(WebInspector.domTreeManager));
+ element.addEventListener("contextmenu", (event) => {
+ let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+ WebInspector.appendContextMenuItemsForDOMNode(contextMenu, node, options);
+ });
return element;
};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js (218520 => 218521)
--- trunk/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js 2017-06-20 01:04:15 UTC (rev 218520)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js 2017-06-20 01:17:02 UTC (rev 218521)
@@ -98,3 +98,100 @@
contextMenu.appendSeparator();
}
};
+
+WebInspector.appendContextMenuItemsForDOMNode = function(contextMenu, domNode, options = {})
+{
+ console.assert(contextMenu instanceof WebInspector.ContextMenu);
+ if (!(contextMenu instanceof WebInspector.ContextMenu))
+ return;
+
+ console.assert(domNode instanceof WebInspector.DOMNode);
+ if (!(domNode instanceof WebInspector.DOMNode))
+ return;
+
+ let isElement = domNode.nodeType() === Node.ELEMENT_NODE;
+
+ contextMenu.appendSeparator();
+
+ if (domNode.ownerDocument && isElement) {
+ contextMenu.appendItem(WebInspector.UIString("Copy Selector Path"), () => {
+ let cssPath = WebInspector.cssPath(domNode);
+ InspectorFrontendHost.copyText(cssPath);
+ });
+ }
+
+ if (domNode.ownerDocument && !domNode.isPseudoElement()) {
+ contextMenu.appendItem(WebInspector.UIString("Copy XPath"), () => {
+ let xpath = WebInspector.xpath(domNode);
+ InspectorFrontendHost.copyText(xpath);
+ });
+ }
+
+ if (domNode.isCustomElement()) {
+ contextMenu.appendSeparator();
+ contextMenu.appendItem(WebInspector.UIString("Jump to Definition"), () => {
+ function didGetFunctionDetails(error, response) {
+ if (error)
+ return;
+
+ let location = response.location;
+ let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId, WebInspector.mainTarget);
+ if (!sourceCode)
+ return;
+
+ let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber || 0);
+ WebInspector.showSourceCodeLocation(sourceCodeLocation, {
+ ignoreNetworkTab: true,
+ ignoreSearchTab: true,
+ });
+ }
+
+ function didGetProperty(error, result, wasThrown) {
+ if (error || result.type !== "function")
+ return;
+
+ DebuggerAgent.getFunctionDetails(result.objectId, didGetFunctionDetails);
+ result.release();
+ }
+
+ function didResolveNode(remoteObject) {
+ if (!remoteObject)
+ return;
+
+ remoteObject.getProperty("constructor", didGetProperty);
+ remoteObject.release();
+ }
+
+ WebInspector.RemoteObject.resolveNode(domNode, "", didResolveNode);
+ });
+ }
+
+ if (WebInspector.domDebuggerManager.supported && isElement && !domNode.isPseudoElement() && domNode.ownerDocument) {
+ contextMenu.appendSeparator();
+
+ const allowEditing = false;
+ WebInspector.DOMBreakpointTreeController.appendBreakpointContextMenuItems(contextMenu, domNode, allowEditing);
+ }
+
+ contextMenu.appendSeparator();
+
+ if (!options.excludeRevealElement && domNode.ownerDocument) {
+ contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), () => {
+ WebInspector.domTreeManager.inspectElement(domNode.id);
+ });
+ }
+
+ if (!options.excludeLogElement && !domNode.isInUserAgentShadowTree() && !domNode.isPseudoElement()) {
+ let label = isElement ? WebInspector.UIString("Log Element") : WebInspector.UIString("Log Node");
+ contextMenu.appendItem(label, () => {
+ WebInspector.RemoteObject.resolveNode(domNode, WebInspector.RuntimeManager.ConsoleObjectGroup, (remoteObject) => {
+ if (!remoteObject)
+ return;
+
+ let text = isElement ? WebInspector.UIString("Selected Element") : WebInspector.UIString("Selected Node");
+ const addSpecialUserLogClass = true;
+ WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, remoteObject, addSpecialUserLogClass);
+ });
+ });
+ }
+};
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (218520 => 218521)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2017-06-20 01:04:15 UTC (rev 218520)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2017-06-20 01:17:02 UTC (rev 218521)
@@ -752,7 +752,6 @@
}
this._populateNodeContextMenu(contextMenu);
- this.treeOutline._populateContextMenu(contextMenu, this.representedObject);
}
_populateForcedPseudoStateItems(subMenu)
@@ -790,34 +789,6 @@
contextMenu.appendItem(WebInspector.UIString("Delete Node"), this.remove.bind(this));
if (node.nodeType() === Node.ELEMENT_NODE)
contextMenu.appendItem(WebInspector.UIString("Scroll Into View"), this._scrollIntoView.bind(this));
-
- contextMenu.appendSeparator();
-
- if (node.nodeType() === Node.ELEMENT_NODE) {
- contextMenu.appendItem(WebInspector.UIString("Copy Selector Path"), () => {
- let cssPath = WebInspector.cssPath(this.representedObject);
- InspectorFrontendHost.copyText(cssPath);
- });
- }
-
- if (!node.isPseudoElement()) {
- contextMenu.appendItem(WebInspector.UIString("Copy XPath"), () => {
- let xpath = WebInspector.xpath(this.representedObject);
- InspectorFrontendHost.copyText(xpath);
- });
- }
-
- if (node.isCustomElement()) {
- contextMenu.appendSeparator();
- contextMenu.appendItem(WebInspector.UIString("Jump to Definition"), this._showCustomElementDefinition.bind(this));
- }
-
- if (WebInspector.domDebuggerManager.supported && node.nodeType() === Node.ELEMENT_NODE) {
- contextMenu.appendSeparator();
-
- const allowEditing = false;
- WebInspector.DOMBreakpointTreeController.appendBreakpointContextMenuItems(contextMenu, node, allowEditing);
- }
}
_startEditing()
@@ -1570,40 +1541,6 @@
WebInspector.RemoteObject.resolveNode(node, "", resolvedNode);
}
- _showCustomElementDefinition()
- {
- const node = this.representedObject;
- WebInspector.RemoteObject.resolveNode(node, "", (remoteObject) => {
- if (!remoteObject)
- return;
-
- remoteObject.getProperty("constructor", (error, result, wasThrown) => {
- if (error || result.type !== "function")
- return;
-
- DebuggerAgent.getFunctionDetails(result.objectId, (error, response) => {
- if (error)
- return;
-
- let location = response.location;
- let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId, WebInspector.mainTarget);
- if (!sourceCode)
- return;
-
- let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber || 0);
-
- const options = {
- ignoreNetworkTab: true,
- ignoreSearchTab: true,
- };
- WebInspector.showSourceCodeLocation(sourceCodeLocation, options);
- });
- result.release();
- });
- remoteObject.release();
- });
- }
-
_editAsHTML()
{
var treeOutline = this.treeOutline;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js (218520 => 218521)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2017-06-20 01:04:15 UTC (rev 218520)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js 2017-06-20 01:17:02 UTC (rev 218521)
@@ -257,6 +257,9 @@
treeElement._populateNodeContextMenu(contextMenu);
}
+ const options = {excludeRevealElement: this._excludeRevealElementContextMenu};
+ WebInspector.appendContextMenuItemsForDOMNode(contextMenu, treeElement.representedObject, options);
+
super.populateContextMenu(contextMenu, event, treeElement);
}
@@ -470,32 +473,6 @@
this._elementsTreeUpdater._updateModifiedNodes();
}
- _populateContextMenu(contextMenu, domNode)
- {
- function revealElement()
- {
- WebInspector.domTreeManager.inspectElement(domNode.id);
- }
-
- function logElement()
- {
- WebInspector.RemoteObject.resolveNode(domNode, WebInspector.RuntimeManager.ConsoleObjectGroup, function(remoteObject) {
- if (!remoteObject)
- return;
- let text = WebInspector.UIString("Selected Element");
- WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, remoteObject, true);
- });
- }
-
- contextMenu.appendSeparator();
-
- if (!this._excludeRevealElementContextMenu)
- contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), revealElement);
-
- if (!domNode.isInUserAgentShadowTree())
- contextMenu.appendItem(WebInspector.UIString("Log Element"), logElement);
- }
-
_showShadowDOMSettingChanged(event)
{
var nodeToSelect = this.selectedTreeElement ? this.selectedTreeElement.representedObject : null;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (218520 => 218521)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2017-06-20 01:04:15 UTC (rev 218520)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js 2017-06-20 01:17:02 UTC (rev 218521)
@@ -177,12 +177,16 @@
var prefixElement = document.createElement("strong");
prefixElement.textContent = WebInspector.UIString("Inherited From: ");
- var inheritedLabel = document.createElement("div");
+ let inheritedLabel = newDOMFragment.appendChild(document.createElement("div"));
inheritedLabel.className = "label";
+
inheritedLabel.appendChild(prefixElement);
- inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node, 100));
- newDOMFragment.appendChild(inheritedLabel);
+ inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node, {
+ maxLength: 100,
+ excludeRevealElement: true,
+ }));
+
hasMediaOrInherited.push(inheritedLabel);
}
