[DevTools] Event Listeners Sidebar shows window listeners

Source/devtools/front_end/elements/EventListenersSidebarPane.js

Index: Source/devtools/front_end/elements/EventListenersSidebarPane.js
diff --git a/Source/devtools/front_end/elements/EventListenersSidebarPane.js b/Source/devtools/front_end/elements/EventListenersSidebarPane.js
index 9fa00c3bab4ce9761abe9e7f02357f8d85b6802b..49c2bcd8b69832186993498771797d1606aa64cc 100644
--- a/Source/devtools/front_end/elements/EventListenersSidebarPane.js
+++ b/Source/devtools/front_end/elements/EventListenersSidebarPane.js
@@ -30,10 +30,11 @@
 /**
  * @constructor
  * @extends {WebInspector.ElementsSidebarPane}
+ * @param {string} title
  */
-WebInspector.EventListenersSidebarPane = function()
+WebInspector.BaseEventListenersSidebarPane = function(title)
 {
-    WebInspector.ElementsSidebarPane.call(this, WebInspector.UIString("Event Listeners"));
+    WebInspector.ElementsSidebarPane.call(this, WebInspector.UIString(title));
     this.registerRequiredCSS("components/objectValue.css");
     this.bodyElement.classList.add("events-pane");
 
@@ -45,6 +46,59 @@ WebInspector.EventListenersSidebarPane = function()
     refreshButton.addEventListener("click", this.update.bind(this), false);
     refreshButton.title = WebInspector.UIString("Refresh");
 
+    this._linkifier = new WebInspector.Linkifier();
+}
+
+WebInspector.BaseEventListenersSidebarPane.prototype = {
+    /**
+     * @param {!WebInspector.Throttler.FinishCallback} finishCallback
+     * @param {?Array.<!WebInspector.DOMModel.EventListener>} eventListeners
+     */
+    _onEventListeners: function(finishCallback, eventListeners)
+    {
+        if (!eventListeners) {
+            finishCallback();
+            return;
+        }
+
+        var body = this.bodyElement;
+        var treeItemMap = new Map();
+        eventListeners.stableSort(compareListeners);
+
+        /**
+         * @param {!WebInspector.DOMModel.EventListener} a
+         * @param {!WebInspector.DOMModel.EventListener} b
+         * @return {number}
+         */
+        function compareListeners(a, b)
+        {
+            var aType = a.payload().type;
+            var bType = b.payload().type;
+            return aType === bType ? 0 :
+                aType > bType ? 1 : -1;
+        }
+
+        for (var i = 0; i < eventListeners.length; ++i)
+            this._addListener(eventListeners[i], treeItemMap);
+        if (treeItemMap.size === 0)
+            body.createChild("div", "info").textContent = WebInspector.UIString("No Event Listeners");
+        else
+            body.appendChild(this._treeOutline.element);
+
+        finishCallback();
+    },
+
+    __proto__: WebInspector.ElementsSidebarPane.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.BaseEventListenersSidebarPane}
+ */
+WebInspector.EventListenersSidebarPane = function()
+{
+    WebInspector.BaseEventListenersSidebarPane.call(this, "Event Listeners");
+
     this.settingsSelectElement = this.titleElement.createChild("select", "select-filter");
 
     var option = this.settingsSelectElement.createChild("option");
@@ -62,8 +116,6 @@ WebInspector.EventListenersSidebarPane = function()
         this.settingsSelectElement[1].selected = true;
     this.settingsSelectElement.addEventListener("click", consumeEvent, false);
     this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false);
-
-    this._linkifier = new WebInspector.Linkifier();
 }
 
 WebInspector.EventListenersSidebarPane._objectGroupName = "event-listeners-sidebar-pane";
@@ -97,57 +149,22 @@ WebInspector.EventListenersSidebarPane.prototype = {
         node.eventListeners(WebInspector.EventListenersSidebarPane._objectGroupName, this._onEventListeners.bind(this, finishCallback));
     },
 
-    /**
-     * @param {!WebInspector.Throttler.FinishCallback} finishCallback
-     * @param {?Array.<!WebInspector.DOMModel.EventListener>} eventListeners
-     */
-    _onEventListeners: function(finishCallback, eventListeners)
+    _addListener: function (eventListener, treeItemMap)
     {
-        if (!eventListeners) {
-            finishCallback();
-            return;
-        }
-
-        var body = this.bodyElement;
         var node = this.node();
         var selectedNodeOnly = "selected" === WebInspector.settings.eventListenersFilter.get();
-        var treeItemMap = new Map();
-        eventListeners.stableSort(compareListeners);
-
-        /**
-         * @param {!WebInspector.DOMModel.EventListener} a
-         * @param {!WebInspector.DOMModel.EventListener} b
-         * @return {number}
-         */
-        function compareListeners(a, b)
-        {
-            var aType = a.payload().type;
-            var bType = b.payload().type;
-            return aType === bType ? 0 :
-                aType > bType ? 1 : -1;
-        }
-
-        for (var i = 0; i < eventListeners.length; ++i) {
-            var eventListener = eventListeners[i];
-            if (selectedNodeOnly && (node.id !== eventListener.payload().nodeId))
-                continue;
-            if (eventListener.location().script().isInternalScript())
-                continue; // ignore event listeners generated by monitorEvent
-            var type = eventListener.payload().type;
-            var treeItem = treeItemMap.get(type);
-            if (!treeItem) {
-                treeItem = new WebInspector.EventListenersTreeElement(type, node.id, this._linkifier);
-                treeItemMap.set(type, treeItem);
-                this._treeOutline.appendChild(treeItem);
-            }
-            treeItem.addListener(eventListener);
+        if (selectedNodeOnly && (node.id !== eventListener.payload().nodeId))
+            return;
+        if (eventListener.location().script().isInternalScript())
+            return; // ignore event listeners generated by monitorEvent
+        var type = eventListener.payload().type;
+        var treeItem = treeItemMap.get(type);
+        if (!treeItem) {
+            treeItem = new WebInspector.EventListenersTreeElement(type, node.id, this._linkifier);
+            treeItemMap.set(type, treeItem);
+            this._treeOutline.appendChild(treeItem);
         }
-        if (treeItemMap.size === 0)
-            body.createChild("div", "info").textContent = WebInspector.UIString("No Event Listeners");
-        else
-            body.appendChild(this._treeOutline.element);
-
-        finishCallback();
+        treeItem.addListener(eventListener);
     },
 
     _changeSetting: function()
@@ -157,7 +174,7 @@ WebInspector.EventListenersSidebarPane.prototype = {
         this.update();
     },
 
-    __proto__: WebInspector.ElementsSidebarPane.prototype
+    __proto__: WebInspector.BaseEventListenersSidebarPane.prototype
 }
 
 /**
@@ -261,3 +278,158 @@ WebInspector.EventListenerBar.prototype = {
 
     __proto__: TreeElement.prototype
 }
+
+/**
+ * @constructor
+ * @extends {WebInspector.BaseEventListenersSidebarPane}
+ */
+WebInspector.ObjectEventListenersSidebarPane = function()

[pfeldman, 2015/04/10 08:45:11]

Lets use file-per-class, these are not small classes.

[kozy, 2015/04/13 14:26:54]

Done.

+{
+    WebInspector.BaseEventListenersSidebarPane.call(this, "Object Event Listeners");
+    WebInspector.context.addFlavorChangeListener(WebInspector.ExecutionContext, this.update, this);
+}
+
+WebInspector.ObjectEventListenersSidebarPane._objectGroupName = "object-event-listeners-sidebar-pane";
+
+WebInspector.ObjectEventListenersSidebarPane.prototype = {
+    /**
+     * @override
+     * @param {!WebInspector.Throttler.FinishCallback} finishCallback
+     * @protected
+     */
+    doUpdate: function(finishCallback)
+    {
+        if (this._lastRequestedContext) {
+            this._lastRequestedContext.target().runtimeAgent().releaseObjectGroup(WebInspector.ObjectEventListenersSidebarPane._objectGroupName);
+            delete this._lastRequestedContext;
+        }
+
+        var body = this.bodyElement;
+        body.removeChildren();
+        this._treeOutline.removeChildren();
+
+        var executionContext = WebInspector.context.flavor(WebInspector.ExecutionContext);
+        if (!executionContext)
+            return;
+
+        this._lastRequestedContext = executionContext;
+
+        executionContext.evaluate("window", WebInspector.ObjectEventListenersSidebarPane._objectGroupName, false, true, false, false, this._addListenersFromObject.bind(this, executionContext.target(), finishCallback));
+    },
+
+    /**
+     * @param {!WebInspector.Target} target
+     * @param {!WebInspector.Throttler.FinishCallback} finishCallback
+     * @param {!WebInspector.RemoteObject} object
+     */
+    _addListenersFromObject: function(target, finishCallback, object)
+    {
+        var description = object.description;
+        /**
+         * @param {function(?Array.<!WebInspector.DOMModel.EventListener>)} callback
+         * @param {?Protocol.Error} error
+         * @param {!Array.<!DOMAgent.EventListener>} payloads
+         */
+        function mycallback(callback, error, payloads)
+        {
+            if (error) {
+                callback(null);
+                return;
+            }
+            callback(payloads.map(function(payload) {
+                return new WebInspector.RuntimeModel.EventListener(target, payload, description ? description : "Object");
+            }))
+        }
+        target.runtimeAgent().getEventListeners(object.objectId, WebInspector.ObjectEventListenersSidebarPane._objectGroupName, mycallback.bind(null, this._onEventListeners.bind(this, finishCallback)));
+    },
+
+    _addListener: function (eventListener, treeItemMap)

[pfeldman, 2015/04/10 08:45:11]

Annotate.

[kozy, 2015/04/13 14:26:54]

Done.

+    {
+        if (eventListener.location().script().isInternalScript())
+            return; // ignore event listeners generated by monitorEvent
+        var type = eventListener.payload().type;
+        var treeItem = treeItemMap.get(type);
+        if (!treeItem) {
+            treeItem = new WebInspector.ObjectEventListenersTreeElement(type, this._linkifier);
+            treeItemMap.set(type, treeItem);
+            this._treeOutline.appendChild(treeItem);
+        }
+        treeItem.addListener(eventListener);
+    },
+
+    __proto__: WebInspector.BaseEventListenersSidebarPane.prototype
+}
+
+/**
+ * @constructor
+ * @extends {TreeElement}
+ */
+WebInspector.ObjectEventListenersTreeElement = function(title, linkifier)
+{
+    this._linkifier = linkifier;
+
+    TreeElement.call(this, title);
+    this.toggleOnClick = true;
+    this.selectable = false;
+}
+
+WebInspector.ObjectEventListenersTreeElement.prototype = {
+    /**
+     * @param {!WebInspector.RuntimeModel.EventListener} eventListener
+     */
+    addListener: function(eventListener)
+    {
+        var treeElement = new WebInspector.ObjectEventListenerBar(eventListener, this._linkifier);
+        this.appendChild(treeElement);
+    },
+
+    __proto__: TreeElement.prototype
+}
+
+/**
+ * @constructor
+ * @extends {TreeElement}
+ * @param {!WebInspector.RuntimeModel.EventListener} eventListener
+ * @param {!WebInspector.Linkifier} linkifier
+ */
+WebInspector.ObjectEventListenerBar = function(eventListener, linkifier)
+{
+    TreeElement.call(this, "", true);
+
+    var target = eventListener.target();
+    this._runtimeModel = target.runtimeModel;
+    this._eventListener = eventListener;
+    this._setNodeTitle(linkifier);
+    this.editable = false;
+}
+
+WebInspector.ObjectEventListenerBar.prototype = {
+    onpopulate: function()
+    {
+        var properties = [];
+        var payload = this._eventListener.payload();
+
+        properties.push(this._runtimeModel.createRemotePropertyFromPrimitiveValue("useCapture", payload.useCapture));
+        properties.push(this._runtimeModel.createRemotePropertyFromPrimitiveValue("attachment", payload.isAttribute ? "attribute" : "script"));

[pfeldman, 2015/04/10 08:45:11]

What is this?

[kozy, 2015/04/13 14:26:54]

Removed.

+        if (typeof payload.handler !== "undefined") {
+            var remoteObject = this._runtimeModel.createRemoteObject(payload.handler);
+            properties.push(new WebInspector.RemoteObjectProperty("handler", remoteObject));
+        }
+
+        WebInspector.ObjectPropertyTreeElement.populateWithProperties(this, properties, [], true, null);
+    },
+
+    /**
+     * @param {!WebInspector.Linkifier} linkifier
+     */
+    _setNodeTitle: function(linkifier)
+    {
+        this.listItemElement.removeChildren();
+        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()));
+        title.textContent = this._eventListener.description();
+    },
+
+    __proto__: TreeElement.prototype
+}