Changeset 245495 in webkit


Ignore:
Timestamp:
May 17, 2019 9:44:34 PM (5 years ago)
Author:
Devin Rousso
Message:

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 Timothy Hatcher.

  • 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):

Location:
trunk/Source/WebInspectorUI
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebInspectorUI/ChangeLog

    r245494 r245495  
     12019-05-17  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Elements: context menu items in DOM tree should work when not clicking directly on the node representation
     4        https://bugs.webkit.org/show_bug.cgi?id=197541
     5
     6        Reviewed by Timothy Hatcher.
     7
     8        * UserInterface/Views/DOMTreeElement.js:
     9        (WI.DOMTreeElement.prototype.populateDOMNodeContextMenu): Added.
     10        (WI.DOMTreeElement.prototype._populateTagContextMenu): Deleted.
     11        (WI.DOMTreeElement.prototype._populateTextContextMenu): Deleted.
     12        (WI.DOMTreeElement.prototype._populateNodeContextMenu): Deleted.
     13        * UserInterface/Views/DOMTreeOutline.js:
     14        (WI.DOMTreeOutline.prototype.populateContextMenu):
     15        * UserInterface/Views/ContextMenuUtilities.js:
     16        (WI.appendContextMenuItemsForDOMNode):
     17
    1182019-05-17  Joonghun Park  <pjh0718@gmail.com>
    219

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

    r245060 r245495  
    208208    }
    209209
     210    if (WI.cssManager.canForcePseudoClasses() && domNode.attached) {
     211        contextMenu.appendSeparator();
     212
     213        let pseudoSubMenu = contextMenu.appendSubMenuItem(WI.UIString("Forced Pseudo-Classes"));
     214
     215        let enabledPseudoClasses = domNode.enabledPseudoClasses;
     216        WI.CSSManager.ForceablePseudoClasses.forEach((pseudoClass) => {
     217            let enabled = enabledPseudoClasses.includes(pseudoClass);
     218            pseudoSubMenu.appendCheckboxItem(pseudoClass.capitalize(), () => {
     219                domNode.setPseudoClassEnabled(pseudoClass, !enabled);
     220            }, enabled);
     221        });
     222    }
     223
    210224    if (WI.domDebuggerManager.supported && isElement && !domNode.isPseudoElement() && attached) {
    211225        contextMenu.appendSeparator();

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

    r245060 r245495  
    731731    }
    732732
    733     _populateTagContextMenu(contextMenu, event, subMenus)
    734     {
    735         let node = this.representedObject;
    736         let isNonShadowEditable = !node.isInUserAgentShadowTree() && this.editable;
    737         let attached = node.attached;
    738 
    739         if (event.target && event.target.tagName === "A")
    740             WI.appendContextMenuItemsForURL(contextMenu, event.target.href, {frame: node.frame});
    741 
    742         contextMenu.appendSeparator();
    743 
    744         this._populateNodeContextMenu(contextMenu, subMenus);
    745 
    746         if (this.selected && this.treeOutline && this.treeOutline.selectedTreeElements.length > 1) {
    747             let forceHidden = !this.treeOutline.selectedTreeElements.every((treeElement) => treeElement.isNodeHidden);
    748             let label = forceHidden ? WI.UIString("Hide Elements") : WI.UIString("Show Elements");
    749             contextMenu.appendItem(label, () => {
    750                 if (this.treeOutline)
    751                     this.treeOutline.toggleSelectedElementsVisibility(forceHidden);
    752             });
    753         } else
    754             contextMenu.appendItem(WI.UIString("Toggle Visibility"), this.toggleElementVisibility.bind(this));
    755 
    756         subMenus.add.appendItem(WI.UIString("Attribute"), this._addNewAttribute.bind(this), !isNonShadowEditable);
    757 
     733    populateDOMNodeContextMenu(contextMenu, subMenus, event)
     734    {
    758735        let attribute = event.target.closest(".html-attribute");
    759         subMenus.edit.appendItem(WI.UIString("Attribute"), this._startEditingAttribute.bind(this, attribute, event.target), !attribute || ! isNonShadowEditable);
     736        let textNode = event.target.closest(".html-text-node");
    760737
    761738        let attributeName = null;
    … …  
    766743        }
    767744
    768         let attributeValue = node.getAttribute(attributeName);
    769         subMenus.copy.appendItem(WI.UIString("Attribute"), () => {
    770             let text = attributeName;
    771             if (attributeValue)
    772                 text += "=\"" + attributeValue.replace(/"/g, "\\\"") + "\"";
    773             InspectorFrontendHost.copyText(text);
    774         }, !attribute || !isNonShadowEditable);
    775 
    776         subMenus.delete.appendItem(WI.UIString("Attribute"), () => {
    777             node.removeAttribute(attributeName);
    778         }, !attribute || !isNonShadowEditable);
    779 
    780         subMenus.edit.appendItem(WI.UIString("Tag"), () => {
    781             this._startEditingTagName();
    782         }, !isNonShadowEditable);
     745        if (event.target && event.target.tagName === "A")
     746            WI.appendContextMenuItemsForURL(contextMenu, event.target.href, {frame: this.representedObject.frame});
    783747
    784748        contextMenu.appendSeparator();
    785749
    786         if (WI.cssManager.canForcePseudoClasses() && attached) {
    787             let pseudoSubMenu = contextMenu.appendSubMenuItem(WI.UIString("Forced Pseudo-Classes"));
    788 
    789             let enabledPseudoClasses = node.enabledPseudoClasses;
    790             WI.CSSManager.ForceablePseudoClasses.forEach((pseudoClass) => {
    791                 let enabled = enabledPseudoClasses.includes(pseudoClass);
    792                 pseudoSubMenu.appendCheckboxItem(pseudoClass.capitalize(), () => {
    793                     node.setPseudoClassEnabled(pseudoClass, !enabled);
    794                 }, enabled);
     750        let isEditableNode = this.representedObject.nodeType() === Node.ELEMENT_NODE && this.editable;
     751        let isNonShadowEditable = !this.representedObject.isInUserAgentShadowTree() && this.editable;
     752        let forbiddenClosingTag = WI.DOMTreeElement.ForbiddenClosingTagElements.has(this.representedObject.nodeNameInCorrectCase());
     753
     754        if (isEditableNode) {
     755            if (!forbiddenClosingTag) {
     756                subMenus.add.appendItem(WI.UIString("Child"), () => {
     757                    this._addHTML();
     758                });
     759            }
     760
     761            subMenus.add.appendItem(WI.UIString("Previous Sibling"), () => {
     762                this._addPreviousSibling();
    795763            });
    796764
    797             contextMenu.appendSeparator();
    798         }
    799     }
    800 
    801     _populateTextContextMenu(contextMenu, textNode, subMenus)
    802     {
    803         this._populateNodeContextMenu(contextMenu, subMenus);
    804 
    805         subMenus.edit.appendItem(WI.UIString("Text"), this._startEditingTextNode.bind(this, textNode), !this.editable);
    806 
    807         subMenus.copy.appendItem(WI.UIString("Text"), () => {
    808             InspectorFrontendHost.copyText(textNode.textContent);
    809         }, !textNode.textContent.length);
    810     }
    811 
    812     _populateNodeContextMenu(contextMenu, subMenus)
    813     {
    814         let node = this.representedObject;
    815 
    816         let isEditableNode = node.nodeType() === Node.ELEMENT_NODE && this.editable;
    817         let forbiddenClosingTag = WI.DOMTreeElement.ForbiddenClosingTagElements.has(node.nodeNameInCorrectCase());
    818         subMenus.add.appendItem(WI.UIString("Child"), this._addHTML.bind(this), forbiddenClosingTag || !isEditableNode);
    819         subMenus.add.appendItem(WI.UIString("Previous Sibling"), this._addPreviousSibling.bind(this), !isEditableNode);
    820         subMenus.add.appendItem(WI.UIString("Next Sibling"), this._addNextSibling.bind(this), !isEditableNode);
    821 
    822         subMenus.edit.appendItem(WI.UIString("HTML"), this._editAsHTML.bind(this), !this.editable);
    823         subMenus.copy.appendItem(WI.UIString("HTML"), this._copyHTML.bind(this), node.isPseudoElement());
    824 
    825         if (!this.selected || this.treeOutline.selectedTreeElements.length === 1)
    826             subMenus.delete.appendItem(WI.UIString("Node"), this.remove.bind(this), !this.editable);
     765            subMenus.add.appendItem(WI.UIString("Next Sibling"), () => {
     766                this._addNextSibling();
     767            });
     768        }
     769
     770        if (isNonShadowEditable) {
     771            subMenus.add.appendItem(WI.UIString("Attribute"), () => {
     772                this._addNewAttribute();
     773            });
     774        }
     775
     776        if (this.editable) {
     777            subMenus.edit.appendItem(WI.UIString("HTML"), () => {
     778                this._editAsHTML();
     779            });
     780        }
     781
     782        if (isNonShadowEditable) {
     783            if (attributeName) {
     784                subMenus.edit.appendItem(WI.UIString("Attribute"), () => {
     785                    this._startEditingAttribute(attribute, event.target);
     786                });
     787            }
     788
     789            subMenus.edit.appendItem(WI.UIString("Tag"), () => {
     790                this._startEditingTagName();
     791            });
     792        }
     793
     794        if (textNode && this.editable) {
     795            subMenus.edit.appendItem(WI.UIString("Text"), () => {
     796                this._startEditingTextNode(textNode);
     797            });
     798        }
     799
     800        if (!this.representedObject.isPseudoElement()) {
     801            subMenus.copy.appendItem(WI.UIString("HTML"), () => {
     802                this._copyHTML();
     803            });
     804        }
     805
     806        if (attributeName && isNonShadowEditable) {
     807            subMenus.copy.appendItem(WI.UIString("Attribute"), () => {
     808                let text = attributeName;
     809                let attributeValue = this.representedObject.getAttribute(attributeName);
     810                if (attributeValue)
     811                    text += "=\"" + attributeValue.replace(/"/g, "\\\"") + "\"";
     812                InspectorFrontendHost.copyText(text);
     813            });
     814        }
     815
     816        if (textNode && textNode.textContent.length) {
     817            subMenus.copy.appendItem(WI.UIString("Text"), () => {
     818                InspectorFrontendHost.copyText(textNode.textContent);
     819            });
     820        }
     821
     822        if (this.editable && (!this.selected || this.treeOutline.selectedTreeElements.length === 1)) {
     823            subMenus.delete.appendItem(WI.UIString("Node"), () => {
     824                this.remove();
     825            });
     826        }
     827
     828        if (attributeName && isNonShadowEditable) {
     829            subMenus.delete.appendItem(WI.UIString("Attribute"), () => {
     830                this.representedObject.removeAttribute(attributeName);
     831            });
     832        }
    827833
    828834        for (let subMenu of Object.values(subMenus))
    829835            contextMenu.pushItem(subMenu);
     836
     837        if (this.selected && this.treeOutline && this.treeOutline.selectedTreeElements.length > 1) {
     838            let forceHidden = !this.treeOutline.selectedTreeElements.every((treeElement) => treeElement.isNodeHidden);
     839            let label = forceHidden ? WI.UIString("Hide Elements") : WI.UIString("Show Elements");
     840            contextMenu.appendItem(label, () => {
     841                this.treeOutline.toggleSelectedElementsVisibility(forceHidden);
     842            });
     843        } else {
     844            contextMenu.appendItem(WI.UIString("Toggle Visibility"), () => {
     845                this.toggleElementVisibility();
     846            });
     847        }
    830848    }
    831849

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

    r244946 r245495  
    273273    populateContextMenu(contextMenu, event, treeElement)
    274274    {
    275         let tag = event.target.closest(".html-tag");
    276         let textNode = event.target.closest(".html-text-node");
    277         let commentNode = event.target.closest(".html-comment");
    278         let pseudoElement = event.target.closest(".html-pseudo-element");
    279 
    280275        let subMenus = {
    281276            add: new WI.ContextSubMenuItem(contextMenu, WI.UIString("Add")),
    … …  
    288283            subMenus.delete.appendItem(WI.UIString("Nodes"), () => { this.ondelete(); }, !this._editable);
    289284
    290         if (tag && treeElement._populateTagContextMenu)
    291             treeElement._populateTagContextMenu(contextMenu, event, subMenus);
    292         else if (textNode && treeElement._populateTextContextMenu)
    293             treeElement._populateTextContextMenu(contextMenu, textNode, subMenus);
    294         else if ((commentNode || pseudoElement) && treeElement._populateNodeContextMenu)
    295             treeElement._populateNodeContextMenu(contextMenu, subMenus);
     285        if (treeElement.populateDOMNodeContextMenu)
     286            treeElement.populateDOMNodeContextMenu(contextMenu, subMenus, event, subMenus);
    296287
    297288        let options = {
Note: See TracChangeset for help on using the changeset viewer.