[DevTools] Support JQuery event listeners

Source/devtools/front_end/components/EventListenersUtils.js

Index: Source/devtools/front_end/components/EventListenersUtils.js
diff --git a/Source/devtools/front_end/components/EventListenersUtils.js b/Source/devtools/front_end/components/EventListenersUtils.js
new file mode 100644
index 0000000000000000000000000000000000000000..1563d0f86465db5f7dfd50281d6aec27e194c5a1
--- /dev/null
+++ b/Source/devtools/front_end/components/EventListenersUtils.js
@@ -0,0 +1,312 @@
+// 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.
+
+/**
+ * @param {!WebInspector.RemoteObject} object
+ * @return {!Promise<!{eventListeners:!Array<!WebInspector.EventListener>, internalHandlers:?WebInspector.RemoteArray}>}
+ */
+WebInspector.EventListener.frameworkEventListeners = function(object)
+{
+    var listenersResult = {eventListeners: []};

[pfeldman, 2015/09/02 21:13:25]

use proper types, approach this as any other type in the front-end.

[kozy, 2015/09/02 22:40:20]

Done.

+    return object.callFunctionPromise(frameworkEventListenersGetter, undefined)
+                 .then(assertCallFunctionResult)
+                 .then(getterCallback)
+                 .then(propertiesCallback)
+                 .then(returnResult);

[pfeldman, 2015/09/02 21:13:26]

catch()

[kozy, 2015/09/02 22:40:20]

Done.

+
+    /**
+     * @param {!WebInspector.RemoteObject} object
+     * @return {!Promise<!{properties: ?Array<!WebInspector.RemoteObjectProperty>, internalProperties: ?Array<!WebInspector.RemoteObjectProperty>}>}
+     */
+    function getterCallback(object)
+    {
+        return object.getOwnPropertiesPromise();
+    }
+
+    /**
+     * @param {!{properties: ?Array<!WebInspector.RemoteObjectProperty>, internalProperties: ?Array<!WebInspector.RemoteObjectProperty>}} result
+     * @return {!Promise<void>}

[pfeldman, 2015/09/02 21:13:26]

annotate properly

[kozy, 2015/09/02 22:40:20]

Done.

+     */
+    function propertiesCallback(result)
+    {
+        if (!result.properties)
+            return Promise.resolve();

[pfeldman, 2015/09/02 21:13:25]

resolve(undefined)

[kozy, 2015/09/02 22:40:20]

Done.

+        var promises = [];
+        for (var property of result.properties) {
+            if (property.name === "eventListeners" && property.value) {
+                promises.push(WebInspector.RemoteArray.objectAsArray(property.value)
+                                                      .map(toEventListener)
+                                                      .then(nonEmptyObjects)
+                                                      .then(storeResultTo.bind(null, listenersResult, "eventListeners")));

[pfeldman, 2015/09/02 21:13:25]

This is non-compiler-friendly.

[kozy, 2015/09/02 22:40:19]

Replaced.

+            }
+            if (property.name === "internalHandlers" && property.value) {
+                promises.push(WebInspector.RemoteArray.objectAsArray(property.value)
+                                                      .map(toTargetFunction)
+                                                      .then(WebInspector.RemoteArray.createFromRemoteObjects)
+                                                      .then(storeResultTo.bind(null, listenersResult, "internalHandlers")));
+            }
+        }
+        return /** @type {!Promise<void>} */(Promise.all(promises));
+
+        /**
+         * @param {!WebInspector.RemoteObject} listenerObject
+         * @return {!Promise<?WebInspector.EventListener>}
+         */
+        function toEventListener(listenerObject)
+        {
+            /** @type {?} */
+            var eventListenerData = {};
+            var promises = [];
+
+            promises.push(listenerObject.callFunctionJSONPromise(identity, undefined).then(storeResultTo.bind(null, eventListenerData, "jsonData")));

[pfeldman, 2015/09/02 21:13:25]

remove the storeResulTo

[kozy, 2015/09/02 22:40:20]

Done.

+            promises.push(listenerObject.callFunctionPromise(listenerEffectiveFunction).then(assertCallFunctionResult)
+                                       .then(toTargetFunction)
+                                       .then(storeFunctionWithDetails));
+            return Promise.all(promises).then(createEventListener.bind(null, eventListenerData)).catchException(/** @type {?WebInspector.EventListener} */(null));
+
+            /**
+             * @suppressReceiverCheck
+             * @this {T}
+             * @return {T}
+             * @template T
+             */
+            function identity()

[pfeldman, 2015/09/02 21:13:26]

rename this to something meaningful.

[kozy, 2015/09/02 22:40:20]

Done.

+            {
+                return this;

[pfeldman, 2015/09/02 21:13:26]

You should return what you need here:

{ type: this.type, useCapture: this.useCapture }

[kozy, 2015/09/02 22:40:20]

Done.

+            }
+
+            /**
+             * @suppressReceiverCheck
+             * @return {function()}
+             * @this {Object}
+             */
+            function listenerEffectiveFunction()
+            {
+                if (typeof this.handler === "function")
+                    return this.handler;
+                return typeof this.handler === "object" ? (this.handler.handlerEvent || this.handler.constructor) : null;

[pfeldman, 2015/09/02 21:13:26]

What is handlerEvent?

[kozy, 2015/09/02 22:40:19]

Removed.

+            }
+
+            /**
+             * @param {!WebInspector.RemoteObject} functionObject
+             * @return {!Promise<void>}
+             */
+            function storeFunctionWithDetails(functionObject)
+            {
+                eventListenerData.handlerFunction = functionObject;
+                return /** @type {!Promise<void>} */(functionObject.functionDetailsPromise().then(storeResultTo.bind(null, eventListenerData, "handlerDetails")));

[pfeldman, 2015/09/02 21:13:25]

Remove all storeTo

[kozy, 2015/09/02 22:40:19]

Done.

+            }
+
+            /**
+             * @param {!{jsonData: {type:string, useCapture:boolean, handler:function()}, handlerFunction: !WebInspector.RemoteObject, handlerDetails: !WebInspector.DebuggerModel.FunctionDetails}} eventListenerData
+             * @return {!WebInspector.EventListener}
+             */
+            function createEventListener(eventListenerData)
+            {
+                return new WebInspector.EventListener(eventListenerData.handlerFunction._target,
+                                                      eventListenerData.jsonData.type,
+                                                      eventListenerData.jsonData.useCapture,
+                                                      eventListenerData.handlerFunction,
+                                                      /** @type {!WebInspector.DebuggerModel.Location}} */ (eventListenerData.handlerDetails.location),
+                                                      "frameworkUser");
+            }
+        }
+
+        /**
+         * @param {!WebInspector.RemoteObject} functionObject
+         * @return {!Promise<!WebInspector.RemoteObject>}
+         */
+        function toTargetFunction(functionObject)
+        {
+            return WebInspector.RemoteFunction.objectAsFunction(functionObject).targetFunction();
+        }
+
+        /**
+         * @param {!Array<?T>} objects
+         * @return {!Array<!T>}
+         * @template T
+         */
+        function nonEmptyObjects(objects)
+        {
+            return objects.filter(filterOutEmpty);
+
+            /**
+             * @param {?T} object
+             * @return {boolean}
+             * @template T
+             */
+            function filterOutEmpty(object)
+            {
+                return !!object;
+            }
+        }
+    }
+
+    /**
+     * @return {!{eventListeners:!Array<!WebInspector.EventListener>, internalHandlers:?WebInspector.RemoteArray}}
+     */
+    function returnResult()
+    {
+        return /**@type {!{eventListeners:!Array<!WebInspector.EventListener>, internalHandlers:?WebInspector.RemoteArray}} */(listenersResult);
+    }
+
+    /**
+     * @param {!WebInspector.CallFunctionResult} result
+     * @return {!WebInspector.RemoteObject}
+     */
+    function assertCallFunctionResult(result)
+    {
+        if (result.wasThrown || !result.object)
+            throw new Error("Exception in callFunction or empty result");

[pfeldman, 2015/09/02 21:13:25]

We don't throw on expected / user errors.

[kozy, 2015/09/02 22:40:20]

Errors are encapsulated in this file. Can I still use it?

+        return result.object;
+    }
+
+    /*
+    frameworkEventListeners getter functions should produce following output:
+        {
+          // framework event listeners
+          "eventListeners": [
+            {
+              "handler": function()|Object,

[pfeldman, 2015/09/02 21:13:26]

Why handler is not a function?

[kozy, 2015/09/02 22:40:19]

function()

+              "useCapture": true,
+              "type": "change"
+            },
+            ...
+          ],
+          // internal framework event handlers
+          "internalHandlers": [
+            function(),
+            function(),
+            ...
+          ]
+        }
+    */
+    /**
+     * @suppressReceiverCheck
+     * @return {!{eventListeners:!Array<!{type:string, handler:(function()|!Object), useCapture:boolean}>, internalHandlers:?Array<function()>}}
+     * @this {Object}
+     */
+    function frameworkEventListenersGetter()

[pfeldman, 2015/09/02 21:13:26]

Could you typedef what it returns?

[kozy, 2015/09/02 22:40:19]

Done.

+    {
+        var eventListeners = [];
+        var internalHandlers = [];
+        var getters = [jQueryGetter];
+        try {
+            if (self.devtoolsFrameworkEventListeners && isArrayLike(self.devtoolsFrameworkEventListeners))
+                getters = getters.concat(self.devtoolsFrameworkEventListeners);
+        } catch (e) {
+        }
+
+        for (var i = 0; i < getters.length; ++i) {
+            try {
+                var getterResult = getters[i](this);
+                eventListeners = eventListeners.concat(getterResult.eventListeners);
+                internalHandlers = internalHandlers.concat(getterResult.internalHandlers);
+            } catch (e) {
+            }
+        }
+        var result = {eventListeners: eventListeners};
+        if (internalHandlers.length)
+            result.internalHandlers = internalHandlers;
+        return result;
+
+        /**
+         * @param {?Object} obj
+         * @return {boolean}
+         */
+        function isArrayLike(obj)
+        {
+            if (!obj || typeof obj !== "object")
+                return false;
+            try {
+                if (typeof obj.splice === "function") {
+                    var len = obj.length;
+                    return typeof len === "number" && (len >>> 0 === len && (len > 0 || 1 / len > 0));
+                }
+            } catch (e) {
+            }
+            return false;
+        }
+
+        function jQueryGetter(node)
+        {
+            return {eventListeners: jQueryEventListeners(node), internalHandlers: jQueryInternalHandlers(node)};
+        }
+
+        /**
+         * @param {?Object} node
+         * @return {!Array<!{handler:function(), useCapture: boolean, type:string}>}
+         * @suppress {missingProperties|undefinedVars}
+         */
+        function jQueryEventListeners(node)
+        {
+            if (!node || !(node instanceof Node))
+                return [];
+            var hasJQuery = (typeof jQuery !== 'undefined') && jQuery.fn;

[pfeldman, 2015/09/02 21:13:26]

Should be window["jQuery"]

[kozy, 2015/09/02 22:40:20]

Done.

+            if (!hasJQuery)
+                return [];
+            var listeners = [];
+            var data = jQuery._data || jQuery.data;
+            if (typeof data === "function") {
+                var events = data(node, "events");
+                for (var type in events) {
+                    for (var key in events[type]) {
+                        var frameworkListener = events[type][key];
+                        if (typeof frameworkListener === "object" || typeof frameworkListener === "function") {
+                            var listener = {
+                                handler: frameworkListener.handler || frameworkListener,
+                                useCapture: true,
+                                type: type
+                            };
+                            listeners.push(listener);
+                        }
+                    }
+                }
+            }
+            var entry = jQuery(node)[0];
+            if (entry) {
+                var entryEvents = entry["$events"];
+                for (var type in entryEvents) {
+                    var events = entryEvents[type];
+                    for (var key in events) {
+                        if (typeof events[key] === "function") {
+                            var listener = {
+                                handler: events[key],
+                                useCapture: true,
+                                type: type
+                            };
+                            listeners.push(listener);
+                        }
+                    }
+                }
+            }
+            return listeners;
+        }
+
+        /**
+         * @param {?Object} node
+         * @return {!Array<function()>}
+         * @suppress {missingProperties|undefinedVars}
+         */
+        function jQueryInternalHandlers(node)

[pfeldman, 2015/09/02 21:13:26]

Embed into the one above.

[kozy, 2015/09/02 22:40:20]

Done.

+        {
+            if (!(node instanceof Node))
+                return [];
+            var hasJQuery = (typeof jQuery !== 'undefined') && jQuery.fn;
+            if (!hasJQuery)
+                return [];
+            var handlers = [];
+            var data = jQuery._data || jQuery.data;
+            if (typeof data === "function") {
+                var nodeData = data(node);
+                if (typeof nodeData.handle === "function")
+                    handlers.push(nodeData.handle);
+            }
+            var entry = jQuery(node)[0];
+            if (entry && entry["$handle"])
+                handlers.push(entry["$handle"]);
+            return handlers;
+        }
+    }
+}