DevTools: properly inject elements panel context menu items.

Source/devtools/front_end/elements/ElementsTreeOutline.js

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008 Matt Lilek <webkit@mattlilek.com>
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 16 matching lines @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @constructor
  * @extends {TreeOutline}
  * @param {!WebInspector.Target} target
  * @param {boolean=} omitRootDOMNode
  * @param {boolean=} selectEnabled
- * @param {function(!WebInspector.ContextMenu, !WebInspector.DOMNode)=} contextMenuCallback
  * @param {function(!WebInspector.DOMNode, string, boolean)=} setPseudoClassCallback
  */
-WebInspector.ElementsTreeOutline = function(target, omitRootDOMNode, selectEnabled, contextMenuCallback, setPseudoClassCallback)
+WebInspector.ElementsTreeOutline = function(target, omitRootDOMNode, selectEnabled, setPseudoClassCallback)
 {
     this._target = target;
     this._domModel = target.domModel;
     this.element = document.createElement("ol");
     this.element.className = "elements-tree-outline";
     this.element.addEventListener("mousedown", this._onmousedown.bind(this), false);
     this.element.addEventListener("mousemove", this._onmousemove.bind(this), false);
     this.element.addEventListener("mouseout", this._onmouseout.bind(this), false);
     this.element.addEventListener("dragstart", this._ondragstart.bind(this), false);
     this.element.addEventListener("dragover", this._ondragover.bind(this), false);
     this.element.addEventListener("dragleave", this._ondragleave.bind(this), false);
     this.element.addEventListener("drop", this._ondrop.bind(this), false);
     this.element.addEventListener("dragend", this._ondragend.bind(this), false);
     this.element.addEventListener("keydown", this._onkeydown.bind(this), false);
     this.element.addEventListener("webkitAnimationEnd", this._onAnimationEnd.bind(this), false);
+    this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), false);
 
     TreeOutline.call(this, this.element);
 
     this._includeRootDOMNode = !omitRootDOMNode;
     this._selectEnabled = selectEnabled;
     /** @type {?WebInspector.DOMNode} */
     this._rootDOMNode = null;
     /** @type {?WebInspector.DOMNode} */
     this._selectedDOMNode = null;
     this._eventSupport = new WebInspector.Object();
 
     this._visible = false;
     this._pickNodeMode = false;
 
-    this.element.addEventListener("contextmenu", this._contextMenuEventFired.bind(this), true);
-    this._contextMenuCallback = contextMenuCallback;
     this._setPseudoClassCallback = setPseudoClassCallback;
     this._createNodeDecorators();
 }
 
 /** @typedef {{node: !WebInspector.DOMNode, isCut: boolean}} */
 WebInspector.ElementsTreeOutline.ClipboardData;
 
 /**
  * @enum {string}
  */
@@ skipping 681 matching lines @@
 
         if (!treeElement._editing && WebInspector.KeyboardShortcut.hasNoModifiers(keyboardEvent) && keyboardEvent.keyCode === WebInspector.KeyboardShortcut.Keys.H.code) {
             this._toggleHideShortcut(node);
             event.consume(true);
             return;
         }
     },
 
     _contextMenuEventFired: function(event)
     {
         var treeElement = this._treeElementFromEvent(event);

[sergeyv, 2014/09/24 16:17:29]

do we still need this check?

[pfeldman, 2014/09/24 16:23:13]

Done.

         if (!treeElement || treeElement.treeOutline !== this)
             return;
 
         var contextMenu = new WebInspector.ContextMenu(event);
-        contextMenu.appendApplicableItems(treeElement._node);
-        contextMenu.show();
-    },
-
-    populateContextMenu: function(contextMenu, event)
-    {
-        var treeElement = this._treeElementFromEvent(event);
-        if (!treeElement || treeElement.treeOutline !== this)
-            return;
 
         var isPseudoElement = !!treeElement._node.pseudoType();
         var isTag = treeElement._node.nodeType() === Node.ELEMENT_NODE && !isPseudoElement;
         var textNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-text-node");
         if (textNode && textNode.classList.contains("bogus"))
             textNode = null;
         var commentNode = event.target.enclosingNodeOrSelfWithClass("webkit-html-comment");
         contextMenu.appendApplicableItems(event.target);
         if (textNode) {
             contextMenu.appendSeparator();
             treeElement._populateTextContextMenu(contextMenu, textNode);
         } else if (isTag) {
             contextMenu.appendSeparator();
             treeElement._populateTagContextMenu(contextMenu, event);
         } else if (commentNode) {
             contextMenu.appendSeparator();
             treeElement._populateNodeContextMenu(contextMenu);
         } else if (isPseudoElement) {
             treeElement._populateScrollIntoView(contextMenu);
-        } else if (treeElement._node.isShadowRoot()) {
-            this.treeOutline._populateContextMenu(contextMenu, treeElement._node);
         }
+
+        contextMenu.appendApplicableItems(treeElement._node);
+        contextMenu.show();
     },
 
     _updateModifiedNodes: function()
     {
         if (this._elementsTreeUpdater)
             this._elementsTreeUpdater._updateModifiedNodes();
     },
 
-    _populateContextMenu: function(contextMenu, node)
-    {
-        if (this._contextMenuCallback)
-            this._contextMenuCallback(contextMenu, node);
-    },
-
     handleShortcut: function(event)
     {
         var node = this.selectedDOMNode();
         var treeElement = this.getCachedTreeElement(node);
         if (!node || !treeElement)
             return;
 
         if (event.keyIdentifier === "F2" && treeElement.hasEditableNode()) {
             this._toggleEditAsHTML(node);
             event.handled = true;
@@ skipping 792 matching lines @@
         var newAttribute = event.target.enclosingNodeOrSelfWithClass("add-attribute");
         if (attribute && !newAttribute)
             contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Edit attribute" : "Edit Attribute"), this._startEditingAttribute.bind(this, attribute, event.target));
         contextMenu.appendSeparator();
         if (this.treeOutline._setPseudoClassCallback) {
             var pseudoSubMenu = contextMenu.appendSubMenuItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Force element state" : "Force Element State"));
             this._populateForcedPseudoStateItems(pseudoSubMenu);
             contextMenu.appendSeparator();
         }
         this._populateNodeContextMenu(contextMenu);
-        this.treeOutline._populateContextMenu(contextMenu, this._node);
         this._populateScrollIntoView(contextMenu);
     },
 
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     _populateScrollIntoView: function(contextMenu)
     {
         contextMenu.appendSeparator();
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Scroll into view" : "Scroll into View"), this._scrollIntoView.bind(this));
@@ skipping 1278 matching lines @@
         var treeOutline = new WebInspector.ElementsTreeOutline(node.target(), false, false);
         treeOutline.rootDOMNode = node;
         treeOutline.element.classList.add("outline-disclosure");
         if (!treeOutline.children[0].hasChildren)
             treeOutline.element.classList.add("single-node");
         treeOutline.setVisible(true);
         treeOutline.element.treeElementForTest = treeOutline.children[0];
         return treeOutline.element;
     }
 }