[DevTools] Support JQuery event listeners

Source/devtools/front_end/components/EventListenersUtils.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.
+
+/**
+ * @typedef {{type: string, useCapture: boolean, handler: function()}}
+ */
+WebInspector.FrameworkEventListener;

[pfeldman, 2015/09/02 22:55:34]

What is the difference between all of these types? Lets distinguish between the
types that exist on the frontend and on the backend.

[kozy, 2015/09/03 16:27:52]

Rename page types to Page*

+
+/**
+ * @typedef {{type:string, useCapture:boolean, handler:!WebInspector.RemoteObject, location:!WebInspector.DebuggerModel.Location}}
+ */
+WebInspector.EventListenerData;
+
+/**
+ * @typedef {{eventListeners:!Array<!{type:string, handler:function(), useCapture:boolean}>, internalHandlers:?Array<function()>}}
+ */
+WebInspector.FrameworkEventListenerRawResult;
+
+/**
+ * @typedef {{eventListeners:!Array<!WebInspector.EventListener>, internalHandlers:?WebInspector.RemoteArray}}
+ */
+WebInspector.FrameworkEventListenersResult;
+
+/**
+ * @param {!WebInspector.RemoteObject} object
+ * @return {!Promise<!WebInspector.FrameworkEventListenersResult>}
+ */
+WebInspector.EventListener.frameworkEventListeners = function(object)
+{
+    var listenersResult = /** @type {!WebInspector.FrameworkEventListenersResult} */({eventListeners: []});
+    return object.callFunctionPromise(frameworkEventListeners, undefined)
+                 .then(assertCallFunctionResult)
+                 .then(frameworkEventListenersCallback)
+                 .then(returnResult)
+                 .catchException(listenersResult);
+
+    /**
+     * @param {!WebInspector.RemoteObject} object
+     * @return {!Promise<undefined>}
+     */
+    function frameworkEventListenersCallback(object)

[pfeldman, 2015/09/02 22:55:34]

You should call them based on what they do, not what they are processing result
from. This one would be called getOwnProperties.

[kozy, 2015/09/03 16:27:52]

Done.

+    {
+        return object.getOwnPropertiesPromise().then(propertiesCallback);

[pfeldman, 2015/09/02 22:55:34]

Why is propertiesCallback now here? Stack it above and call
createEventListeners?

[kozy, 2015/09/03 16:27:52]

Done.

+    }
+
+    /**
+     * @param {!{properties: ?Array<!WebInspector.RemoteObjectProperty>, internalProperties: ?Array<!WebInspector.RemoteObjectProperty>}} result
+     * @return {!Promise<undefined>}
+     */
+    function propertiesCallback(result)
+    {
+        if (!result.properties)
+            throw new Error("Object properties is empty");
+        var promises = [];
+        for (var property of result.properties) {
+            if (property.name === "eventListeners" && property.value) {
+                promises.push(WebInspector.RemoteArray.objectAsArray(property.value)

[pfeldman, 2015/09/02 22:55:34]

Extract this into the method that returns eventListeners.

[kozy, 2015/09/03 16:27:52]

Done.

+                                                      .map(toEventListener)
+                                                      .then(nonEmptyObjects)
+                                                      .then(eventListenersCallback));

[pfeldman, 2015/09/02 22:55:34]

Promise<eventListeners>

[kozy, 2015/09/03 16:27:52]

Done.

+            }
+            if (property.name === "internalHandlers" && property.value) {
+                promises.push(WebInspector.RemoteArray.objectAsArray(property.value)

[pfeldman, 2015/09/02 22:55:34]

Extract this into the method that returns Promise<internalHandlers>.

[kozy, 2015/09/03 16:27:52]

Done.

+                                                      .map(toTargetFunction)
+                                                      .then(WebInspector.RemoteArray.createFromRemoteObjects)
+                                                      .then(internalHandlersCallback));
+            }
+        }
+        return /** @type {!Promise<undefined>} */(Promise.all(promises));
+
+        /**
+         * @param {!WebInspector.RemoteObject} listenerObject
+         * @return {!Promise<?WebInspector.EventListener>}
+         */
+        function toEventListener(listenerObject)
+        {
+            var eventListenerData = /** @type {!WebInspector.EventListenerData} */({});
+            var promises = [];
+
+            promises.push(listenerObject.callFunctionJSONPromise(truncateFrameworkEventListener, undefined).then(truncateFrameworkEventListenerCallback));
+
+            /**
+             * @suppressReceiverCheck
+             * @this {WebInspector.FrameworkEventListener}
+             * @return {!{type:string, useCapture:boolean}}
+             */
+            function truncateFrameworkEventListener()
+            {
+                return {type: this.type, useCapture: this.useCapture};
+            }
+
+            /**
+             * @param {!{type:string, useCapture: boolean}} truncatedListener
+             * @return {undefined}
+             */
+            function truncateFrameworkEventListenerCallback(truncatedListener)

[pfeldman, 2015/09/02 22:55:34]

strip the Callback suffixes in all over the place, those are promises, not
callbacks.

[kozy, 2015/09/03 16:27:52]

Done.

+            {
+                eventListenerData.type = truncatedListener.type;
+                eventListenerData.useCapture = truncatedListener.useCapture;
+                return undefined;
+            }
+
+            promises.push(listenerObject.callFunctionPromise(handlerFunction).then(assertCallFunctionResult)
+                                        .then(toTargetFunction)
+                                        .then(toTargetFunctionCallback));
+
+            /**
+             * @suppressReceiverCheck
+             * @return {function()}
+             * @this {WebInspector.FrameworkEventListener}
+             */
+            function handlerFunction()
+            {
+                return this.handler;
+            }
+
+            /**
+             * @param {!WebInspector.RemoteObject} functionObject
+             * @return {!Promise<undefined>}
+             */
+            function toTargetFunctionCallback(functionObject)
+            {
+                eventListenerData.handler = functionObject;
+                return /** @type {!Promise<undefined>} */(functionObject.functionDetailsPromise().then(targetFunctionDetailsCallback));
+            }
+
+            /**
+             * @param {?WebInspector.DebuggerModel.FunctionDetails} functionDetails
+             */
+            function targetFunctionDetailsCallback(functionDetails)
+            {
+                if (!functionDetails || !functionDetails.location)
+                    throw new Error("Empty function details or function details location");
+                eventListenerData.location = functionDetails.location;
+            }
+
+            return Promise.all(promises).then(createEventListener).catchException(/** @type {?WebInspector.EventListener} */(null));
+
+            /**
+             * @return {!WebInspector.EventListener}
+             */
+            function createEventListener()
+            {
+                return new WebInspector.EventListener(eventListenerData.handler._target,
+                                                      eventListenerData.type,
+                                                      eventListenerData.useCapture,
+                                                      eventListenerData.handler,
+                                                      eventListenerData.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;
+            }
+        }
+    }
+
+    /**
+     * @param {!Array<!WebInspector.EventListener>} eventListeners
+     */
+    function eventListenersCallback(eventListeners)
+    {
+        listenersResult.eventListeners = eventListeners;
+    }
+
+    /**
+     * @param {!WebInspector.RemoteArray} internalHandlers
+     */
+    function internalHandlersCallback(internalHandlers)
+    {
+        listenersResult.internalHandlers = internalHandlers;
+    }
+
+    /**
+     * @return {!WebInspector.FrameworkEventListenersResult}
+     */
+    function returnResult()
+    {
+        return 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");
+        return result.object;
+    }
+
+    /*
+    frameworkEventListeners fetcher functions should produce following output:
+        {
+          // framework event listeners
+          "eventListeners": [
+            {
+              "handler": function(),
+              "useCapture": true,
+              "type": "change"
+            },
+            ...
+          ],
+          // internal framework event handlers
+          "internalHandlers": [
+            function(),
+            function(),
+            ...
+          ]
+        }
+    */
+    /**
+     * @suppressReceiverCheck
+     * @return {!WebInspector.FrameworkEventListenerRawResult}
+     * @this {Object}
+     */
+    function frameworkEventListeners()
+    {
+        var eventListeners = [];
+        var internalHandlers = [];
+        var fetchers = [jQueryFetcher];
+        try {
+            if (self.devtoolsFrameworkEventListeners && isArrayLike(self.devtoolsFrameworkEventListeners))
+                fetchers = fetchers.concat(self.devtoolsFrameworkEventListeners);
+        } catch (e) {
+        }
+
+        for (var i = 0; i < fetchers.length; ++i) {
+            try {
+                var fetcherResult = fetchers[i](this);
+                eventListeners = eventListeners.concat(fetcherResult.eventListeners);
+                if (fetcherResult.internalHandlers)
+                    internalHandlers = internalHandlers.concat(fetcherResult.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 jQueryFetcher(node)
+        {
+            if (!node || !(node instanceof Node))
+                return {eventListeners: []};
+            var jQuery = /** @type {?{fn,data,_data}}*/(window["jQuery"]);
+            if (!jQuery || !jQuery.fn)
+                return {eventListeners: []};
+            var jQueryFunction = /** @type {function(!Node)} */(jQuery);
+            var data = jQuery._data || jQuery.data;
+
+            var eventListeners = [];
+            var internalHandlers = [];
+
+            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
+                            };
+                            eventListeners.push(listener);
+                        }
+                    }
+                }
+                var nodeData = data(node);
+                if (typeof nodeData.handle === "function")
+                    internalHandlers.push(nodeData.handle);
+            }
+            var entry = jQueryFunction(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
+                            };
+                            eventListeners.push(listener);
+                        }
+                    }
+                }
+                if (entry && entry["$handle"])
+                    internalHandlers.push(entry["$handle"]);
+            }
+            return {eventListeners: eventListeners, internalHandlers: internalHandlers};
+        }
+    }
+}