[DevTools] Extracted EventListenersTreeOutline

Source/devtools/front_end/components/EventListenersTreeOutline.js

+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @constructor
+ * @param {!Element} element
+ * @param {string} objectGroup
+ */
+WebInspector.EventListenersTreeOutline = function(element, objectGroup)

[pfeldman, 2015/05/22 16:11:23]

The name is unfortunate since this is not a tree outline.

[kozy, 2015/05/22 17:43:43]

Renamed to EventListenersView

+{
+    this._element = element;
+    this._objectGroup = objectGroup;
+    this._treeOutline = new TreeOutline(true);

[pfeldman, 2015/05/22 16:11:23]

Please use TreeOutlineInShadow

[kozy, 2015/05/22 17:43:43]

Done.

+    this._treeOutline.setComparator(WebInspector.EventListenersTreeElement.comparator);
+    this._treeOutline.element.classList.add("event-listener-tree", "outline-disclosure", "monospace");

[pfeldman, 2015/05/22 16:11:23]

You would not need the outline-disclosure

[kozy, 2015/05/22 17:43:43]

Removed.

+    this._linkifier = new WebInspector.Linkifier();
+    this._treeItemMap = new Map();

[pfeldman, 2015/05/22 16:11:23]

Annotate the type please.

[kozy, 2015/05/22 17:43:43]

Done.

+    this._isEmpty = true;
+    this._lastRuntimeAgents = new Set();

[pfeldman, 2015/05/22 16:11:22]

Ditto. Also, is this a leak?

[kozy, 2015/05/22 17:43:43]

releaseObjectGroup logic is shifted to EventListenerssSidebarPane.

+}
+
+WebInspector.EventListenersTreeOutline.prototype = {
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {?Array<!WebInspector.EventListener>} eventListeners
+     */
+    _addNodeEventListeners: function(node, eventListeners)
+    {
+        if (!eventListeners)
+            return;
+        for (var eventListener of eventListeners) {
+            var treeItem = this._getTreeElementForType(eventListener.type());
+            treeItem.addNodeEventListener(eventListener, node);
+        }
+    },
+
+    /**
+     * @param {string} type
+     * @return {!WebInspector.EventListenersTreeElement}
+     */
+    _getTreeElementForType: function(type)

[pfeldman, 2015/05/22 16:11:23]

no get prefixes in Blink, but in this case getOrCreate..

[kozy, 2015/05/22 17:43:43]

Done.

+    {
+        var treeItem = this._treeItemMap.get(type);
+        if (!treeItem) {
+            treeItem = new WebInspector.EventListenersTreeElement(type, this._linkifier);
+            this._treeItemMap.set(type, treeItem);
+            this._treeOutline.appendChild(treeItem);
+            if (this._isEmpty) {

[pfeldman, 2015/05/22 16:11:23]

You could get child count from root node instead, but you don't need it.

[kozy, 2015/05/22 17:43:43]

Done.

+                this._isEmpty = false;
+                this._element.removeChildren();
+                this._element.appendChild(this._treeOutline.element);

[pfeldman, 2015/05/22 16:11:22]

No need to do this lazily, just remove the placeholder unconditionally. It is
noop if it is removed.

[kozy, 2015/05/22 17:43:43]

Done.

+            }
+        }
+        return treeItem;
+    },
+
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @return {!Promise}
+     */
+    addNodeEventListeners: function(node)
+    {
+        return new Promise(addEventListeners.bind(this));
+        /**
+         * @param {function(?)} fulfill
+         * @param {function(*)} reject
+         * @this {WebInspector.EventListenersTreeOutline}
+         */
+        function addEventListeners(fulfill, reject)
+        {
+            /**
+             * @param {?Array<!WebInspector.EventListener>} listeners
+             * @this {WebInspector.EventListenersTreeOutline}
+             */
+            function listenersCallback(listeners)
+            {
+                this._addNodeEventListeners(node, listeners);
+                fulfill(undefined);
+            }
+            /**
+             * @param {?WebInspector.RemoteObject} object
+             * @this {WebInspector.EventListenersTreeOutline}
+             */
+            function objectCallback(object)
+            {
+                if (object)
+                    object.getEventListeners(listenersCallback.bind(this));
+                else
+                    reject(undefined);
+            }
+            this._lastRuntimeAgents.add(node.target().runtimeAgent());
+            node.resolveToObject(this._objectGroup, objectCallback.bind(this));

[pfeldman, 2015/05/22 16:11:23]

Reverse the order of functions and calls so that they went top -> bottom

[kozy, 2015/05/22 17:43:43]

Done.

+        }
+    },
+
+    reset: function()
+    {
+        this._treeItemMap = new Map();
+        this._element.removeChildren();
+        this._treeOutline.removeChildren();
+        this._linkifier.reset();
+        this._isEmpty = true;
+        this._element.createChild("div", "info").textContent = WebInspector.UIString("No Event Listeners");
+        for (var runtimeAgent of this._lastRuntimeAgents)
+            runtimeAgent.releaseObjectGroup(this._objectGroup);
+        this._lastRuntimeAgents.clear();
+    }
+}
+
+/**
+ * @constructor
+ * @extends {TreeElement}
+ * @param {string} type
+ * @param {!WebInspector.Linkifier} linkifier
+ */
+WebInspector.EventListenersTreeElement = function(type, linkifier)

[pfeldman, 2015/05/22 16:11:22]

You don't seem to override anything, don't inherit.

[kozy, 2015/05/22 17:43:43]

I use this object in line 55: this._treeOutline.appendChild(treeItem);
appendChild function signature contains TreeElement.

+{
+    TreeElement.call(this, type);
+    this.toggleOnClick = true;
+    this.selectable = false;
+    this._linkifier = linkifier;
+}
+
+/**
+ * @param {!TreeElement} element1
+ * @param {!TreeElement} element2
+ * @return {number}
+ */
+WebInspector.EventListenersTreeElement.comparator = function(element1, element2) {
+    if (element1.title === element2.title)
+        return 0;
+    return element1.title > element2.title ? 1 : -1;
+}
+
+WebInspector.EventListenersTreeElement.prototype = {
+    /**
+     * @param {!WebInspector.EventListener} eventListener
+     * @param {!WebInspector.DOMNode} node
+     */
+    addNodeEventListener: function(eventListener, node)
+    {
+        var treeElement = new WebInspector.NodeEventListenerBar(eventListener, node, this._linkifier);
+        this.appendChild(/** @type {!TreeElement} */ (treeElement));
+    },
+
+    __proto__: TreeElement.prototype
+}
+
+/**
+ * @constructor
+ * @extends {TreeElement}
+ * @param {!WebInspector.EventListener} eventListener
+ * @param {!WebInspector.Linkifier} linkifier
+ */
+WebInspector.EventListenerBar = function(eventListener, linkifier)
+{
+    TreeElement.call(this, "", true);
+    this._eventListener = eventListener;
+    this.editable = false;
+}
+
+WebInspector.EventListenerBar.prototype = {
+    onpopulate: function()
+    {
+        var properties = [];
+        var eventListener = this._eventListener;
+        var runtimeModel = eventListener.target().runtimeModel;
+        properties.push(runtimeModel.createRemotePropertyFromPrimitiveValue("useCapture", eventListener.useCapture()));
+        if (typeof eventListener.handler() !== "undefined")
+            properties.push(new WebInspector.RemoteObjectProperty("handler", eventListener.handler()));
+        WebInspector.ObjectPropertyTreeElement.populateWithProperties(this, properties, [], true, null);
+    },
+
+    __proto__: TreeElement.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.EventListenerBar}
+ * @param {!WebInspector.EventListener} eventListener
+ * @param {!WebInspector.DOMNode} node
+ * @param {!WebInspector.Linkifier} linkifier
+ */
+WebInspector.NodeEventListenerBar = function(eventListener, node, linkifier)
+{
+    WebInspector.EventListenerBar.call(this, eventListener, linkifier);
+    this._setNodeTitle(node, linkifier);
+}
+
+WebInspector.NodeEventListenerBar.prototype = {
+    /**
+     * @param {!WebInspector.DOMNode} node
+     * @param {!WebInspector.Linkifier} linkifier
+     */
+    _setNodeTitle: function(node, linkifier)
+    {
+        var title = this.listItemElement.createChild("span");
+        var subtitle = this.listItemElement.createChild("span", "event-listener-tree-subtitle");
+        subtitle.appendChild(linkifier.linkifyRawLocation(this._eventListener.location(), this._eventListener.sourceName()));
+        if (node.nodeType() === Node.DOCUMENT_NODE) {
+            title.textContent = "document";
+            return;
+        }
+        if (this._eventListener.isSelected) {
+            title.textContent = WebInspector.DOMPresentationUtils.simpleSelector(node);
+            return;
+        }
+        title.appendChild(WebInspector.DOMPresentationUtils.linkifyNodeReference(node));
+    },
+
+    __proto__: WebInspector.EventListenerBar.prototype
+}