Changeset 218521 in webkit


Ignore:
Timestamp:
Jun 19, 2017 6:17:02 PM (7 years ago)
Author:
Devin Rousso
Message:

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.

Location:
trunk/Source/WebInspectorUI
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r218440 r218521  
     12017-06-19  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Unify contextmenu items for all node links/previews
     4        https://bugs.webkit.org/show_bug.cgi?id=173187
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * Localizations/en.lproj/localizedStrings.js:
     9        * UserInterface/Views/ContextMenuUtilities.js:
     10        (WebInspector.appendContextMenuItemsForDOMNode.didGetFunctionDetails): Added.
     11        (WebInspector.appendContextMenuItemsForDOMNode.didGetProperty): Added.
     12        (WebInspector.appendContextMenuItemsForDOMNode.didResolveNode): Added.
     13        (WebInspector.appendContextMenuItemsForDOMNode): Added.
     14        * UserInterface/Views/DOMTreeElement.js:
     15        (WebInspector.DOMTreeElement.prototype._populateTagContextMenu):
     16        (WebInspector.DOMTreeElement.prototype._populateNodeContextMenu):
     17        (WebInspector.DOMTreeElement.prototype._showCustomElementDefinition): Deleted.
     18        * UserInterface/Views/DOMTreeOutline.js:
     19        (WebInspector.DOMTreeOutline.prototype.populateContextMenu):
     20        (WebInspector.DOMTreeOutline.prototype._populateContextMenu.revealElement): Deleted.
     21        (WebInspector.DOMTreeOutline.prototype._populateContextMenu.logElement): Deleted.
     22        (WebInspector.DOMTreeOutline.prototype._populateContextMenu): Deleted.
     23        * UserInterface/Views/RulesStyleDetailsPanel.js:
     24        (WebInspector.RulesStyleDetailsPanel.prototype.refresh.insertMediaOrInheritanceLabel):
     25        Unify common DOM node context menu actions into a single helper function.
     26
     27        * UserInterface/Base/DOMUtilities.js:
     28        (WebInspector.linkifyNodeReference):
     29        (WebInspector.linkifyNodeReferenceElement):
     30        Rework parameters to use options dictionary.
     31
    1322017-06-16  Matt Baker  <mattbaker@apple.com>
    233

  • trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

    r218159 r218521  
    510510localizedStrings["Log Frame Value"] = "Log Frame Value";
    511511localizedStrings["Log Message"] = "Log Message";
     512localizedStrings["Log Node"] = "Log Node";
    512513localizedStrings["Log Symbol"] = "Log Symbol";
    513514localizedStrings["Log Value"] = "Log Value";
    … …  
    729730localizedStrings["Selected Item"] = "Selected Item";
    730731localizedStrings["Selected Items"] = "Selected Items";
     732localizedStrings["Selected Node"] = "Selected Node";
    731733localizedStrings["Selected Symbol"] = "Selected Symbol";
    732734localizedStrings["Selected Value"] = "Selected Value";

  • trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js

    r213765 r218521  
    5858};
    5959
    60 WebInspector.linkifyNodeReference = function(node, maxLength)
     60WebInspector.linkifyNodeReference = function(node, options = {})
    6161{
    6262    let displayName = node.displayName;
    63     if (!isNaN(maxLength))
    64         displayName = displayName.truncate(maxLength);
     63    if (!isNaN(options.maxLength))
     64        displayName = displayName.truncate(options.maxLength);
    6565
    6666    let link = document.createElement("span");
    6767    link.append(displayName);
    68     return WebInspector.linkifyNodeReferenceElement(node, link, displayName);
    69 };
    70 
    71 WebInspector.linkifyNodeReferenceElement = function(node, element, displayName)
    72 {
    73     if (!displayName)
    74         displayName = node.displayName;
    75 
     68    return WebInspector.linkifyNodeReferenceElement(node, link, Object.shallowMerge(options, {displayName}));
     69};
     70
     71WebInspector.linkifyNodeReferenceElement = function(node, element, options = {})
     72{
    7673    element.setAttribute("role", "link");
    77     element.title = displayName;
     74    element.title = options.displayName || node.displayName;
    7875
    7976    let nodeType = node.nodeType();
    … …  
    8481    element.addEventListener("mouseover", WebInspector.domTreeManager.highlightDOMNode.bind(WebInspector.domTreeManager, node.id, "all"));
    8582    element.addEventListener("mouseout", WebInspector.domTreeManager.hideDOMNodeHighlight.bind(WebInspector.domTreeManager));
     83    element.addEventListener("contextmenu", (event) => {
     84        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
     85        WebInspector.appendContextMenuItemsForDOMNode(contextMenu, node, options);
     86    });
    8687
    8788    return element;

  • trunk/Source/WebInspectorUI/UserInterface/Views/ContextMenuUtilities.js

    r213738 r218521  
    9999    }
    100100};
     101
     102WebInspector.appendContextMenuItemsForDOMNode = function(contextMenu, domNode, options = {})
     103{
     104    console.assert(contextMenu instanceof WebInspector.ContextMenu);
     105    if (!(contextMenu instanceof WebInspector.ContextMenu))
     106        return;
     107
     108    console.assert(domNode instanceof WebInspector.DOMNode);
     109    if (!(domNode instanceof WebInspector.DOMNode))
     110        return;
     111
     112    let isElement = domNode.nodeType() === Node.ELEMENT_NODE;
     113
     114    contextMenu.appendSeparator();
     115
     116    if (domNode.ownerDocument && isElement) {
     117        contextMenu.appendItem(WebInspector.UIString("Copy Selector Path"), () => {
     118            let cssPath = WebInspector.cssPath(domNode);
     119            InspectorFrontendHost.copyText(cssPath);
     120        });
     121    }
     122
     123    if (domNode.ownerDocument && !domNode.isPseudoElement()) {
     124        contextMenu.appendItem(WebInspector.UIString("Copy XPath"), () => {
     125            let xpath = WebInspector.xpath(domNode);
     126            InspectorFrontendHost.copyText(xpath);
     127        });
     128    }
     129
     130    if (domNode.isCustomElement()) {
     131        contextMenu.appendSeparator();
     132        contextMenu.appendItem(WebInspector.UIString("Jump to Definition"), () => {
     133            function didGetFunctionDetails(error, response) {
     134                if (error)
     135                    return;
     136
     137                let location = response.location;
     138                let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId, WebInspector.mainTarget);
     139                if (!sourceCode)
     140                    return;
     141
     142                let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber || 0);
     143                WebInspector.showSourceCodeLocation(sourceCodeLocation, {
     144                    ignoreNetworkTab: true,
     145                    ignoreSearchTab: true,
     146                });
     147            }
     148
     149            function didGetProperty(error, result, wasThrown) {
     150                if (error || result.type !== "function")
     151                    return;
     152
     153                DebuggerAgent.getFunctionDetails(result.objectId, didGetFunctionDetails);
     154                result.release();
     155            }
     156
     157            function didResolveNode(remoteObject) {
     158                if (!remoteObject)
     159                    return;
     160
     161                remoteObject.getProperty("constructor", didGetProperty);
     162                remoteObject.release();
     163            }
     164
     165            WebInspector.RemoteObject.resolveNode(domNode, "", didResolveNode);
     166        });
     167    }
     168
     169    if (WebInspector.domDebuggerManager.supported && isElement && !domNode.isPseudoElement() && domNode.ownerDocument) {
     170        contextMenu.appendSeparator();
     171
     172        const allowEditing = false;
     173        WebInspector.DOMBreakpointTreeController.appendBreakpointContextMenuItems(contextMenu, domNode, allowEditing);
     174    }
     175
     176    contextMenu.appendSeparator();
     177
     178    if (!options.excludeRevealElement && domNode.ownerDocument) {
     179        contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), () => {
     180            WebInspector.domTreeManager.inspectElement(domNode.id);
     181        });
     182    }
     183
     184    if (!options.excludeLogElement && !domNode.isInUserAgentShadowTree() && !domNode.isPseudoElement()) {
     185        let label = isElement ? WebInspector.UIString("Log Element") : WebInspector.UIString("Log Node");
     186        contextMenu.appendItem(label, () => {
     187            WebInspector.RemoteObject.resolveNode(domNode, WebInspector.RuntimeManager.ConsoleObjectGroup, (remoteObject) => {
     188                if (!remoteObject)
     189                    return;
     190
     191                let text = isElement ? WebInspector.UIString("Selected Element") : WebInspector.UIString("Selected Node");
     192                const addSpecialUserLogClass = true;
     193                WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, remoteObject, addSpecialUserLogClass);
     194            });
     195        });
     196    }
     197};

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js

    r215755 r218521  
    753753
    754754        this._populateNodeContextMenu(contextMenu);
    755         this.treeOutline._populateContextMenu(contextMenu, this.representedObject);
    756755    }
    757756
    … …  
    791790        if (node.nodeType() === Node.ELEMENT_NODE)
    792791            contextMenu.appendItem(WebInspector.UIString("Scroll Into View"), this._scrollIntoView.bind(this));
    793 
    794         contextMenu.appendSeparator();
    795 
    796         if (node.nodeType() === Node.ELEMENT_NODE) {
    797             contextMenu.appendItem(WebInspector.UIString("Copy Selector Path"), () => {
    798                 let cssPath = WebInspector.cssPath(this.representedObject);
    799                 InspectorFrontendHost.copyText(cssPath);
    800             });
    801         }
    802 
    803         if (!node.isPseudoElement()) {
    804             contextMenu.appendItem(WebInspector.UIString("Copy XPath"), () => {
    805                 let xpath = WebInspector.xpath(this.representedObject);
    806                 InspectorFrontendHost.copyText(xpath);
    807             });
    808         }
    809 
    810         if (node.isCustomElement()) {
    811             contextMenu.appendSeparator();
    812             contextMenu.appendItem(WebInspector.UIString("Jump to Definition"), this._showCustomElementDefinition.bind(this));
    813         }
    814 
    815         if (WebInspector.domDebuggerManager.supported && node.nodeType() === Node.ELEMENT_NODE) {
    816             contextMenu.appendSeparator();
    817 
    818             const allowEditing = false;
    819             WebInspector.DOMBreakpointTreeController.appendBreakpointContextMenuItems(contextMenu, node, allowEditing);
    820         }
    821792    }
    822793
    … …  
    15711542    }
    15721543
    1573     _showCustomElementDefinition()
    1574     {
    1575         const node = this.representedObject;
    1576         WebInspector.RemoteObject.resolveNode(node, "", (remoteObject) => {
    1577             if (!remoteObject)
    1578                 return;
    1579 
    1580             remoteObject.getProperty("constructor", (error, result, wasThrown) => {
    1581                 if (error || result.type !== "function")
    1582                     return;
    1583 
    1584                 DebuggerAgent.getFunctionDetails(result.objectId, (error, response) => {
    1585                     if (error)
    1586                         return;
    1587 
    1588                     let location = response.location;
    1589                     let sourceCode = WebInspector.debuggerManager.scriptForIdentifier(location.scriptId, WebInspector.mainTarget);
    1590                     if (!sourceCode)
    1591                         return;
    1592 
    1593                     let sourceCodeLocation = sourceCode.createSourceCodeLocation(location.lineNumber, location.columnNumber || 0);
    1594 
    1595                     const options = {
    1596                         ignoreNetworkTab: true,
    1597                         ignoreSearchTab: true,
    1598                     };
    1599                     WebInspector.showSourceCodeLocation(sourceCodeLocation, options);
    1600                 });
    1601                 result.release();
    1602             });
    1603             remoteObject.release();
    1604         });
    1605     }
    1606 
    16071544    _editAsHTML()
    16081545    {

  • trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.js

    r211829 r218521  
    258258        }
    259259
     260        const options = {excludeRevealElement: this._excludeRevealElementContextMenu};
     261        WebInspector.appendContextMenuItemsForDOMNode(contextMenu, treeElement.representedObject, options);
     262
    260263        super.populateContextMenu(contextMenu, event, treeElement);
    261264    }
    … …  
    469472        if (this._elementsTreeUpdater)
    470473            this._elementsTreeUpdater._updateModifiedNodes();
    471     }
    472 
    473     _populateContextMenu(contextMenu, domNode)
    474     {
    475         function revealElement()
    476         {
    477             WebInspector.domTreeManager.inspectElement(domNode.id);
    478         }
    479 
    480         function logElement()
    481         {
    482             WebInspector.RemoteObject.resolveNode(domNode, WebInspector.RuntimeManager.ConsoleObjectGroup, function(remoteObject) {
    483                 if (!remoteObject)
    484                     return;
    485                 let text = WebInspector.UIString("Selected Element");
    486                 WebInspector.consoleLogViewController.appendImmediateExecutionWithResult(text, remoteObject, true);
    487             });
    488         }
    489 
    490         contextMenu.appendSeparator();
    491 
    492         if (!this._excludeRevealElementContextMenu)
    493             contextMenu.appendItem(WebInspector.UIString("Reveal in DOM Tree"), revealElement);
    494 
    495         if (!domNode.isInUserAgentShadowTree())
    496             contextMenu.appendItem(WebInspector.UIString("Log Element"), logElement);
    497474    }
    498475

  • trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js

    r217911 r218521  
    178178                prefixElement.textContent = WebInspector.UIString("Inherited From: ");
    179179
    180                 var inheritedLabel = document.createElement("div");
     180                let inheritedLabel = newDOMFragment.appendChild(document.createElement("div"));
    181181                inheritedLabel.className = "label";
     182
    182183                inheritedLabel.appendChild(prefixElement);
    183                 inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node, 100));
    184                 newDOMFragment.appendChild(inheritedLabel);
     184
     185                inheritedLabel.appendChild(WebInspector.linkifyNodeReference(style.node, {
     186                    maxLength: 100,
     187                    excludeRevealElement: true,
     188                }));
    185189
    186190                hasMediaOrInherited.push(inheritedLabel);
Note: See TracChangeset for help on using the changeset viewer.