[DevTools] Support JQuery event listeners

Source/devtools/front_end/components/EventListenersView.js

Index: Source/devtools/front_end/components/EventListenersView.js
diff --git a/Source/devtools/front_end/components/EventListenersView.js b/Source/devtools/front_end/components/EventListenersView.js
index e3bf926111d538c13b8cb6e9c3707aa72a153a7b..9c0232596ee570d8c010c537510e0c71738a4f58 100644
--- a/Source/devtools/front_end/components/EventListenersView.js
+++ b/Source/devtools/front_end/components/EventListenersView.js
@@ -20,6 +20,8 @@ WebInspector.EventListenersView = function(element)
     this._linkifier = new WebInspector.Linkifier();
     /** @type {!Map<string, !WebInspector.EventListenersTreeElement>} */
     this._treeItemMap = new Map();
+    /** @type {!Array<!TreeElement>} */
+    this._listenerTreeElements = [];
 }
 
 WebInspector.EventListenersView.prototype = {
@@ -30,34 +32,101 @@ WebInspector.EventListenersView.prototype = {
     addObjects: function(objects)
     {
         var promises = [];
-        for (var i = 0; i < objects.length; ++i)
+        for (var i = 0; i < objects.length; ++i) {
             promises.push(objects[i].eventListeners());
+            promises.push(objects[i].frameworkEventListeners(devtoolsFrameworkEventListeners));

[pfeldman, 2015/08/24 23:29:43]

Where is this global method defined?

+            promises.push(objects[i].frameworkInternalEventHandlers(devtoolsFrameworkInternalHandlers));

[pfeldman, 2015/08/24 23:29:43]

ditto

+        }
         return Promise.all(promises).then(listenersCallback.bind(this));
         /**
-         * @param {!Array<?Array<!WebInspector.EventListener>>} listeners
+         * @param {!Array<?Array<!WebInspector.EventListener>|!WebInspector.RemoteObject>} listeners
          * @this {WebInspector.EventListenersView}
          */
         function listenersCallback(listeners)
         {
             this.reset();
-            for (var i = 0; i < listeners.length; ++i)
-                this._addObjectEventListeners(objects[i], listeners[i]);
-            this.addEmptyHolderIfNeeded();
-            this._eventListenersArrivedForTest();
+            var promises = [];
+            for (var i = 0; i < listeners.length / 3; ++i)
+                promises.push(this._addObjectPromise.call(this, objects[i],

[pfeldman, 2015/08/24 23:29:43]

How do you encode the listeners? Please provide schema in the comment.

+                    /** @type {?Array<!WebInspector.EventListener>} */(listeners[i * 3]),
+                    /** @type {?Array<!WebInspector.EventListener>} */(listeners[i * 3 + 1]),
+                    /** @type {?WebInspector.RemoteObject} */(listeners[i * 3 + 2])));
+
+            return Promise.all(promises).then(finish.bind(this));
+
+            /**
+             * @this {WebInspector.EventListenersView}
+             */
+            function finish()
+            {
+                this.addEmptyHolderIfNeeded();
+                this._eventListenersArrivedForTest();
+            }
         }
     },
 
     /**
      * @param {!WebInspector.RemoteObject} object
-     * @param {?Array<!WebInspector.EventListener>} eventListeners
+     * @param {?Array<!WebInspector.EventListener>} listeners
+     * @param {?Array<!WebInspector.EventListener>} frameworkListeners
+     * @param {?WebInspector.RemoteObject} frameworkInternalHandlers
+     * @return {!Promise<undefined>}
      */
-    _addObjectEventListeners: function(object, eventListeners)
+    _addObjectPromise: function(object, listeners, frameworkListeners, frameworkInternalHandlers)
     {
-        if (!eventListeners)
-            return;
-        for (var eventListener of eventListeners) {
-            var treeItem = this._getOrCreateTreeElementForType(eventListener.type());
-            treeItem.addObjectEventListener(eventListener, object);
+        return new Promise(promiseConstructor.bind(this));
+
+        /**
+         * @param {function(?)} fulfill
+         * @param {function(*)} reject
+         * @this {WebInspector.EventListenersView}
+         */
+        function promiseConstructor(fulfill, reject)
+        {
+            var promises = [];
+            for (var i = 0; i < listeners.length; ++i)
+                promises.push(frameworkInternalHandlers.callFunctionJSONPromise(hasInSet, [WebInspector.RemoteObject.toCallArgument(listeners[i].handler())]).then(add.bind(this, "normal", listeners[i])));

[pfeldman, 2015/08/24 23:29:43]

This is hard to parse, could you refactor this? It does not need to fit one
line.

+            for (var i = 0; i < frameworkListeners.length; ++i)
+                promises.push(Promise.resolve().then(add.bind(this, "frameworkUser", frameworkListeners[i])));
+            Promise.all(promises).then(fulfill);
+
+            /**
+             * @suppressReceiverCheck
+             * @this {Object}
+             */
+            function hasInSet(f)
+            {
+                return this.has(f);
+            }
+
+            /**
+             * @param {string} type
+             * @param {!WebInspector.EventListener} listener
+             * @param {*} isInternal
+             * @this {WebInspector.EventListenersView}
+             */
+            function add(type, listener, isInternal)
+            {
+                var treeItem = this._getOrCreateTreeElementForType(listener.type());
+                this._listenerTreeElements.push(treeItem.addObjectEventListener(listener, object, !isInternal ? type : "frameworkInternal"));
+                return treeItem;
+            }
+        }
+    },
+
+    /**
+     * @param {boolean} showUserListeners
+     */
+    showFrameworkUserEventListeners: function(showUserListeners)
+    {
+        for (var listenerTreeElement of  this._listenerTreeElements) {
+            var listenerType = listenerTreeElement.listenerType();
+            var hidden = false;
+            if (listenerType === "frameworkUser" && !showUserListeners)
+                hidden = true;
+            if (listenerType === "frameworkInternal" && showUserListeners)
+                hidden = true;
+            listenerTreeElement.hidden = hidden;
         }
     },
 
@@ -86,6 +155,7 @@ WebInspector.EventListenersView.prototype = {
     reset: function()
     {
         this._treeItemMap = new Map();
+        this._listenerTreeElements = [];
         this._treeOutline.removeChildren();
         this._linkifier.reset();
     },
@@ -124,11 +194,14 @@ WebInspector.EventListenersTreeElement.prototype = {
     /**
      * @param {!WebInspector.EventListener} eventListener
      * @param {!WebInspector.RemoteObject} object
+     * @param {string} listenerType
+     * @return {!WebInspector.ObjectEventListenerBar}
      */
-    addObjectEventListener: function(eventListener, object)
+    addObjectEventListener: function(eventListener, object, listenerType)
     {
-        var treeElement = new WebInspector.ObjectEventListenerBar(eventListener, object, this._linkifier);
+        var treeElement = new WebInspector.ObjectEventListenerBar(eventListener, object, this._linkifier, listenerType);
         this.appendChild(/** @type {!TreeElement} */ (treeElement));
+        return treeElement;
     },
 
     __proto__: TreeElement.prototype
@@ -140,13 +213,15 @@ WebInspector.EventListenersTreeElement.prototype = {
  * @param {!WebInspector.EventListener} eventListener
  * @param {!WebInspector.RemoteObject} object
  * @param {!WebInspector.Linkifier} linkifier
+ * @param {string} listenerType
  */
-WebInspector.ObjectEventListenerBar = function(eventListener, object, linkifier)
+WebInspector.ObjectEventListenerBar = function(eventListener, object, linkifier, listenerType)
 {
     TreeElement.call(this, "", true);
     this._eventListener = eventListener;
     this.editable = false;
     this.selectable = false;
+    this._listenerType = listenerType;
     this._setTitle(object, linkifier);
 }
 
@@ -174,5 +249,13 @@ WebInspector.ObjectEventListenerBar.prototype = {
         title.appendChild(WebInspector.ObjectPropertiesSection.createValueElement(object, false));
     },
 
+    /**
+     * @return {string}
+     */
+    listenerType: function()
+    {
+        return this._listenerType;
+    },
+
     __proto__: TreeElement.prototype
-}
+}