wip: devtools api

gadget_devtools.html

@@ -23,10 +23,11 @@
 		-> BROWSER_PASSWORD="password"
 
 		Usage:
-		var devtools;
-		this.getDeclaredGadget("devtools")
-			.push(function (subgadget) {
-				devtools = subgadget;
+		var devtools = gadget.getDevtools()
+			.push(function () {
+				console.log(devtools.Page.description) // "..."
+				console.log(devtools.Page.enable.description); // "..."
+				console.log(devtools.Page.enable.experimental); // false
 				return devtools.Page.enable();
 			})
 			.push(function () {
@@ -36,13 +37,12 @@
 				return devtools.Page.loadEventFired();
 			})
 		
-		The variable devtools contains this gadget. This gadget has several
-		subobjects according to the protocol, e.g. Page. Each subobjects has
-		methods and events. Both of them can be used like regular functions.
-		Calling a method will trigger it, and calling an event will wait
-		until the browser triggers it. Some methods will return some types,
-		which we encode as objects. See the references on how to use the
-		different methods, events, and types.
+		This devtools object has several subobjects according to the
+		protocol, e.g. Page. Each subobjects has methods and events. Both of
+		them can be used like regular functions. Calling a method will trigger
+		it, and calling an event will wait until the browser triggers it. Some
+		methods will return some types, which we encode as objects. See the
+		references on how to use the different methods, events, and types.
 
 		References:
 		https://chromedevtools.github.io/devtools-protocol

gadget_devtools.js

@@ -6,7 +6,7 @@ var BROWSER_PASSWORD = "ignored";
 (function(window, rJS, RSVP) {
 	"use strict";
 	/**
-	 * Makes an HTTP get request to the browser to retrieve some JSON data.
+	 * Makes an HTTP GET request to the browser to retrieve some JSON data.
 	 *  
 	 * @param {String} path The path of the json file.
 	 * @returns The promise for the the JSON data as object. 
@@ -29,6 +29,39 @@ var BROWSER_PASSWORD = "ignored";
 			return new RSVP.Promise(callback);
 		});
 	}
+	/**
+	 * Adds the method API from the method JSON data to the object.
+	 * 
+	 * @param {object} object The container for the method.
+	 * @param {object} method The method data from the protocol.
+	 */
+	function addMethodAPI (object, method) {
+		var callback = (sender, params) => {
+			return sender(`${object.domain}.${method.name}`, params);
+		}
+		callback["description"] = method.description;
+		callback["experimental"] = method.experimental ? true : false;
+		callback["type"] = "method";
+		object[method.name] = callback;
+	}
+	/**
+	 * Adds the event API from the event JSON data to the object.
+	 * 
+	 * @param {object} object The container for the event.
+	 * @param {object} event The event data from the protocol.
+	 */
+	function addEventAPI (object, event) {
+		// todo
+	}
+	/**
+	 * Adds the type API from the type JSON data to the object.
+	 * 
+	 * @param {object} object The container for the type. 
+	 * @param {object} type The type data from the protocol.
+	 */
+	function addTypeAPI (object, type) {
+		// todo
+	}
 	/**
 	 * Returns the devtools API for the given domain. Domains are defined
 	 * by the devtools protocol, e.g. Page. Each domain defines multiple
@@ -37,30 +70,78 @@ var BROWSER_PASSWORD = "ignored";
 	 * @param {object} domain The domain data from the devtools API.
 	 * @returns The promise for the devtools API object and its name.
 	 */
-	function getDevtoolsAPI(domain) {
+	function getDevtoolsAPI (domain) {
+		var callback = (resolve) => {
+			var object = {};
+			object["domain"] = domain.domain;
+			object["description"] = domain.description;
+			object["experimental"] = domain.experimental ? true : false;
+			(domain.commands || []).forEach((method) => {
+				addMethodAPI(object, method);
+			});
+			(domain.events || []).forEach((event) => {
+				addEventAPI(object, event);
+			});
+			(domain.types || []).forEach((type) => {
+				addTypeAPI(object, type);
+			});
+			resolve([domain.domain, object]);
+		}
+		return RSVP.Queue().push(function () {
+			return new RSVP.Promise(callback);
+		});
+	}
+	/**
+	 * Wraps the devtools API inside the gadget state which handels the
+	 * connection with specific targets.
+	 * 
+	 * @param {*} gadget
+	 * @param {*} devtoolsAPI 
+	 */
+	function getWrappedDevtoolsAPI (gadget, devtoolsAPI) {
 		var callback = (resolve) => {
-			console.log(domain.domain);
-			resolve({name: domain.domain, object: null});
+			// handle connection over websocket
+			// wrap devtools function with sender
+			// special case for Browser/Target domain
+			resolve(devtoolsAPI);
 		}
 		return RSVP.Queue().push(function () {
 			return new RSVP.Promise(callback);
-		});		
+		});
 	}
 
-	var gadget = rJS(window);
-	gadget.declareService(function () {
+	rJS(window)
+	.setState({
+		wsBrowser: null,
+		wsTargets: [],
+		targetIndex: null,
+		messages: {},
+		devtools: {},
+	})
+	.declareService(function () {
+		var gadget = this;
 		return getBrowserJSON("json/protocol")
 			.push(function (result) {
-				var promises = [];
-				for (let i = 0; i < result.domains.length; i++) {
-					promises.push(getDevtoolsAPI(result.domains[i]));
-				}
+				var promises = result.domains.map(getDevtoolsAPI);
 				return RSVP.all(promises);
 			})
 			.push(function (result) {
-				for (let i = 0; i < result.length; i++) {
-					gadget[result[i].name] = result[i].object;
-				}
+				var devtools = devtools = Object.fromEntries(result);
+				return getWrappedDevtoolsAPI(gadget, devtools);
+			})
+			.push(function (result) {
+				return gadget.changeState({devtools: result});
 			})
+
+	})
+	.declareMethod("getDevtools", function () {
+		var gadget = this;
+		return RSVP.Queue().push(function () {
+			return gadget.state.devtools;
+		})
+	})
+	.onStateChange(function (ignored) {
+		var gadget = this;
+		console.log(gadget.state.devtools);
 	})
 }(window, rJS, RSVP));
\ No newline at end of file