[DevTools] Support JQuery event listeners

Source/devtools/front_end/components/EventListenersView.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
  */
 WebInspector.EventListenersView = function(element)
 {
     this._element = element;
     this._treeOutline = new TreeOutlineInShadow("event-listener-tree");
     this._treeOutline.registerRequiredCSS("components/objectValue.css");
     this._treeOutline.registerRequiredCSS("components/eventListenersView.css");
     this._treeOutline.setComparator(WebInspector.EventListenersTreeElement.comparator);
     this._treeOutline.element.classList.add("monospace");
     this._element.appendChild(this._treeOutline.element)
     this._emptyHolder = createElementWithClass("div", "info");
     this._emptyHolder.textContent = WebInspector.UIString("No Event Listeners");
     this._linkifier = new WebInspector.Linkifier();
     /** @type {!Map<string, !WebInspector.EventListenersTreeElement>} */
     this._treeItemMap = new Map();
+    /** @type {!Array<!TreeElement>} */
+    this._listenerTreeElements = [];
 }
 
 WebInspector.EventListenersView.prototype = {
     /**
      * @param {!Array<!WebInspector.RemoteObject>} objects
      * @return {!Promise<undefined>}
      */
     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;
+        }
+    },
+
     /**
      * @param {string} type
      * @return {!WebInspector.EventListenersTreeElement}
      */
     _getOrCreateTreeElementForType: function(type)
     {
         var treeItem = this._treeItemMap.get(type);
         if (!treeItem) {
             treeItem = new WebInspector.EventListenersTreeElement(type, this._linkifier);
             this._treeItemMap.set(type, treeItem);
             this._treeOutline.appendChild(treeItem);
             this._emptyHolder.remove();
         }
         return treeItem;
     },
 
     addEmptyHolderIfNeeded: function()
     {
         if (!this._treeOutline.firstChild() && !this._emptyHolder.parentNode)
            this._element.appendChild(this._emptyHolder);
     },
 
     reset: function()
     {
         this._treeItemMap = new Map();
+        this._listenerTreeElements = [];
         this._treeOutline.removeChildren();
         this._linkifier.reset();
     },
 
     _eventListenersArrivedForTest: function()
     {
     }
 }
 
 /**
@@ skipping 18 matching lines @@
 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.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
 }
 
 /**
  * @constructor
  * @extends {TreeElement}
  * @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);
 }
 
 WebInspector.ObjectEventListenerBar.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);
     },
 
     /**
      * @param {!WebInspector.RemoteObject} object
      * @param {!WebInspector.Linkifier} linkifier
      */
     _setTitle: function(object, 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()));
         title.appendChild(WebInspector.ObjectPropertiesSection.createValueElement(object, false));
     },
 
+    /**
+     * @return {string}
+     */
+    listenerType: function()
+    {
+        return this._listenerType;
+    },
+
     __proto__: TreeElement.prototype
-}
+}