Web Inspector: Unify contextmenu items for all node links/previews
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Jun 2017 01:17:02 +0000 (01:17 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 20 Jun 2017 01:17:02 +0000 (01:17 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@218521 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js
Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js
Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js
Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js

index 6a717d1..03a6595 100644 (file)
@@ -1,3 +1,34 @@
+2017-06-19  Devin Rousso  <drousso@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  <mattbaker@apple.com>
 
         Web Inspector: Instrument 2D/WebGL canvas contexts in the backend
index 05ac39e..c5eb049 100644 (file)
@@ -509,6 +509,7 @@ localizedStrings["Log Element"] = "Log Element";
 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 Element"] = "Selected Element";
 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";
index b363724..fc99002 100644 (file)
@@ -57,24 +57,21 @@ WebInspector.linkifyAccessibilityNodeReference = function(node)
     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 @@ WebInspector.linkifyNodeReferenceElement = function(node, element, displayName)
     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;
 };
index 1c5fd75..6a4668d 100644 (file)
@@ -98,3 +98,100 @@ WebInspector.appendContextMenuItemsForSourceCode = function(contextMenu, sourceC
         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);
+            });
+        });
+    }
+};
index 2672694..70855f5 100644 (file)
@@ -752,7 +752,6 @@ WebInspector.DOMTreeElement = class DOMTreeElement extends WebInspector.TreeElem
         }
 
         this._populateNodeContextMenu(contextMenu);
-        this.treeOutline._populateContextMenu(contextMenu, this.representedObject);
     }
 
     _populateForcedPseudoStateItems(subMenu)
@@ -790,34 +789,6 @@ WebInspector.DOMTreeElement = class DOMTreeElement extends WebInspector.TreeElem
             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.DOMTreeElement = class DOMTreeElement extends WebInspector.TreeElem
         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;
index b85ff02..9db85ea 100644 (file)
@@ -257,6 +257,9 @@ WebInspector.DOMTreeOutline = class DOMTreeOutline extends WebInspector.TreeOutl
             treeElement._populateNodeContextMenu(contextMenu);
         }
 
+        const options = {excludeRevealElement: this._excludeRevealElementContextMenu};
+        WebInspector.appendContextMenuItemsForDOMNode(contextMenu, treeElement.representedObject, options);
+
         super.populateContextMenu(contextMenu, event, treeElement);
     }
 
@@ -470,32 +473,6 @@ WebInspector.DOMTreeOutline = class DOMTreeOutline extends WebInspector.TreeOutl
             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;
index 5953dba..38d1fa8 100644 (file)
@@ -177,11 +177,15 @@ WebInspector.RulesStyleDetailsPanel = class RulesStyleDetailsPanel extends WebIn
                 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);
             }