head.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557
  1. /* Any copyright is dedicated to the Public Domain.
  2. http://creativecommons.org/publicdomain/zero/1.0/ */
  3. "use strict";
  4. var { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
  5. var { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
  6. var { Task } = require("devtools/shared/task");
  7. var Services = require("Services");
  8. var { gDevTools } = require("devtools/client/framework/devtools");
  9. var { TargetFactory } = require("devtools/client/framework/target");
  10. var { DebuggerServer } = require("devtools/server/main");
  11. var { generateUUID } = Cc["@mozilla.org/uuid-generator;1"].getService(Ci.nsIUUIDGenerator);
  12. var Promise = require("promise");
  13. var Services = require("Services");
  14. var { WebAudioFront } = require("devtools/shared/fronts/webaudio");
  15. var DevToolsUtils = require("devtools/shared/DevToolsUtils");
  16. var flags = require("devtools/shared/flags");
  17. var audioNodes = require("devtools/server/actors/utils/audionodes.json");
  18. var mm = null;
  19. const FRAME_SCRIPT_UTILS_URL = "chrome://devtools/content/shared/frame-script-utils.js";
  20. const EXAMPLE_URL = "http://example.com/browser/devtools/client/webaudioeditor/test/";
  21. const SIMPLE_CONTEXT_URL = EXAMPLE_URL + "doc_simple-context.html";
  22. const COMPLEX_CONTEXT_URL = EXAMPLE_URL + "doc_complex-context.html";
  23. const SIMPLE_NODES_URL = EXAMPLE_URL + "doc_simple-node-creation.html";
  24. const MEDIA_NODES_URL = EXAMPLE_URL + "doc_media-node-creation.html";
  25. const BUFFER_AND_ARRAY_URL = EXAMPLE_URL + "doc_buffer-and-array.html";
  26. const DESTROY_NODES_URL = EXAMPLE_URL + "doc_destroy-nodes.html";
  27. const CONNECT_PARAM_URL = EXAMPLE_URL + "doc_connect-param.html";
  28. const CONNECT_MULTI_PARAM_URL = EXAMPLE_URL + "doc_connect-multi-param.html";
  29. const IFRAME_CONTEXT_URL = EXAMPLE_URL + "doc_iframe-context.html";
  30. const AUTOMATION_URL = EXAMPLE_URL + "doc_automation.html";
  31. // Enable logging for all the tests. Both the debugger server and frontend will
  32. // be affected by this pref.
  33. var gEnableLogging = Services.prefs.getBoolPref("devtools.debugger.log");
  34. Services.prefs.setBoolPref("devtools.debugger.log", false);
  35. // All tests are asynchronous.
  36. waitForExplicitFinish();
  37. var gToolEnabled = Services.prefs.getBoolPref("devtools.webaudioeditor.enabled");
  38. flags.testing = true;
  39. registerCleanupFunction(() => {
  40. flags.testing = false;
  41. info("finish() was called, cleaning up...");
  42. Services.prefs.setBoolPref("devtools.debugger.log", gEnableLogging);
  43. Services.prefs.setBoolPref("devtools.webaudioeditor.enabled", gToolEnabled);
  44. Cu.forceGC();
  45. });
  46. /**
  47. * Call manually in tests that use frame script utils after initializing
  48. * the web audio editor. Call after init but before navigating to a different page.
  49. */
  50. function loadFrameScripts() {
  51. mm = gBrowser.selectedBrowser.messageManager;
  52. mm.loadFrameScript(FRAME_SCRIPT_UTILS_URL, false);
  53. }
  54. function addTab(aUrl, aWindow) {
  55. info("Adding tab: " + aUrl);
  56. let deferred = Promise.defer();
  57. let targetWindow = aWindow || window;
  58. let targetBrowser = targetWindow.gBrowser;
  59. targetWindow.focus();
  60. let tab = targetBrowser.selectedTab = targetBrowser.addTab(aUrl);
  61. let linkedBrowser = tab.linkedBrowser;
  62. BrowserTestUtils.browserLoaded(linkedBrowser).then(function () {
  63. info("Tab added and finished loading: " + aUrl);
  64. deferred.resolve(tab);
  65. });
  66. return deferred.promise;
  67. }
  68. function removeTab(aTab, aWindow) {
  69. info("Removing tab.");
  70. let deferred = Promise.defer();
  71. let targetWindow = aWindow || window;
  72. let targetBrowser = targetWindow.gBrowser;
  73. let tabContainer = targetBrowser.tabContainer;
  74. tabContainer.addEventListener("TabClose", function onClose(aEvent) {
  75. tabContainer.removeEventListener("TabClose", onClose, false);
  76. info("Tab removed and finished closing.");
  77. deferred.resolve();
  78. }, false);
  79. targetBrowser.removeTab(aTab);
  80. return deferred.promise;
  81. }
  82. function once(aTarget, aEventName, aUseCapture = false) {
  83. info("Waiting for event: '" + aEventName + "' on " + aTarget + ".");
  84. let deferred = Promise.defer();
  85. for (let [add, remove] of [
  86. ["on", "off"], // Use event emitter before DOM events for consistency
  87. ["addEventListener", "removeEventListener"],
  88. ["addListener", "removeListener"]
  89. ]) {
  90. if ((add in aTarget) && (remove in aTarget)) {
  91. aTarget[add](aEventName, function onEvent(...aArgs) {
  92. aTarget[remove](aEventName, onEvent, aUseCapture);
  93. info("Got event: '" + aEventName + "' on " + aTarget + ".");
  94. deferred.resolve(...aArgs);
  95. }, aUseCapture);
  96. break;
  97. }
  98. }
  99. return deferred.promise;
  100. }
  101. function reload(aTarget, aWaitForTargetEvent = "navigate") {
  102. aTarget.activeTab.reload();
  103. return once(aTarget, aWaitForTargetEvent);
  104. }
  105. function navigate(aTarget, aUrl, aWaitForTargetEvent = "navigate") {
  106. executeSoon(() => aTarget.activeTab.navigateTo(aUrl));
  107. return once(aTarget, aWaitForTargetEvent);
  108. }
  109. /**
  110. * Call manually in tests that use frame script utils after initializing
  111. * the shader editor. Call after init but before navigating to different pages.
  112. */
  113. function loadFrameScripts() {
  114. mm = gBrowser.selectedBrowser.messageManager;
  115. mm.loadFrameScript(FRAME_SCRIPT_UTILS_URL, false);
  116. }
  117. /**
  118. * Adds a new tab, and instantiate a WebAudiFront object.
  119. * This requires calling removeTab before the test ends.
  120. */
  121. function initBackend(aUrl) {
  122. info("Initializing a web audio editor front.");
  123. if (!DebuggerServer.initialized) {
  124. DebuggerServer.init();
  125. DebuggerServer.addBrowserActors();
  126. }
  127. return Task.spawn(function* () {
  128. let tab = yield addTab(aUrl);
  129. let target = TargetFactory.forTab(tab);
  130. yield target.makeRemote();
  131. let front = new WebAudioFront(target.client, target.form);
  132. return { target, front };
  133. });
  134. }
  135. /**
  136. * Adds a new tab, and open the toolbox for that tab, selecting the audio editor
  137. * panel.
  138. * This requires calling teardown before the test ends.
  139. */
  140. function initWebAudioEditor(aUrl) {
  141. info("Initializing a web audio editor pane.");
  142. return Task.spawn(function* () {
  143. let tab = yield addTab(aUrl);
  144. let target = TargetFactory.forTab(tab);
  145. yield target.makeRemote();
  146. Services.prefs.setBoolPref("devtools.webaudioeditor.enabled", true);
  147. let toolbox = yield gDevTools.showToolbox(target, "webaudioeditor");
  148. let panel = toolbox.getCurrentPanel();
  149. return { target, panel, toolbox };
  150. });
  151. }
  152. /**
  153. * Close the toolbox, destroying all panels, and remove the added test tabs.
  154. */
  155. function teardown(aTarget) {
  156. info("Destroying the web audio editor.");
  157. return gDevTools.closeToolbox(aTarget).then(() => {
  158. while (gBrowser.tabs.length > 1) {
  159. gBrowser.removeCurrentTab();
  160. }
  161. });
  162. }
  163. // Due to web audio will fire most events synchronously back-to-back,
  164. // and we can't yield them in a chain without missing actors, this allows
  165. // us to listen for `n` events and return a promise resolving to them.
  166. //
  167. // Takes a `front` object that is an event emitter, the number of
  168. // programs that should be listened to and waited on, and an optional
  169. // `onAdd` function that calls with the entire actors array on program link
  170. function getN(front, eventName, count, spread) {
  171. let actors = [];
  172. let deferred = Promise.defer();
  173. info(`Waiting for ${count} ${eventName} events`);
  174. front.on(eventName, function onEvent(...args) {
  175. let actor = args[0];
  176. if (actors.length !== count) {
  177. actors.push(spread ? args : actor);
  178. }
  179. info(`Got ${actors.length} / ${count} ${eventName} events`);
  180. if (actors.length === count) {
  181. front.off(eventName, onEvent);
  182. deferred.resolve(actors);
  183. }
  184. });
  185. return deferred.promise;
  186. }
  187. function get(front, eventName) { return getN(front, eventName, 1); }
  188. function get2(front, eventName) { return getN(front, eventName, 2); }
  189. function get3(front, eventName) { return getN(front, eventName, 3); }
  190. function getSpread(front, eventName) { return getN(front, eventName, 1, true); }
  191. function get2Spread(front, eventName) { return getN(front, eventName, 2, true); }
  192. function get3Spread(front, eventName) { return getN(front, eventName, 3, true); }
  193. function getNSpread(front, eventName, count) { return getN(front, eventName, count, true); }
  194. /**
  195. * Waits for the UI_GRAPH_RENDERED event to fire, but only
  196. * resolves when the graph was rendered with the correct count of
  197. * nodes and edges.
  198. */
  199. function waitForGraphRendered(front, nodeCount, edgeCount, paramEdgeCount) {
  200. let deferred = Promise.defer();
  201. let eventName = front.EVENTS.UI_GRAPH_RENDERED;
  202. info(`Wait for graph rendered with ${nodeCount} nodes, ${edgeCount} edges`);
  203. front.on(eventName, function onGraphRendered(_, nodes, edges, pEdges) {
  204. let paramEdgesDone = paramEdgeCount != null ? paramEdgeCount === pEdges : true;
  205. info(`Got graph rendered with ${nodes} / ${nodeCount} nodes, ` +
  206. `${edges} / ${edgeCount} edges`);
  207. if (nodes === nodeCount && edges === edgeCount && paramEdgesDone) {
  208. front.off(eventName, onGraphRendered);
  209. deferred.resolve();
  210. }
  211. });
  212. return deferred.promise;
  213. }
  214. function checkVariableView(view, index, hash, description = "") {
  215. info("Checking Variable View");
  216. let scope = view.getScopeAtIndex(index);
  217. let variables = Object.keys(hash);
  218. // If node shouldn't display any properties, ensure that the 'empty' message is
  219. // visible
  220. if (!variables.length) {
  221. ok(isVisible(scope.window.$("#properties-empty")),
  222. description + " should show the empty properties tab.");
  223. return;
  224. }
  225. // Otherwise, iterate over expected properties
  226. variables.forEach(variable => {
  227. let aVar = scope.get(variable);
  228. is(aVar.target.querySelector(".name").getAttribute("value"), variable,
  229. "Correct property name for " + variable);
  230. let value = aVar.target.querySelector(".value").getAttribute("value");
  231. // Cast value with JSON.parse if possible;
  232. // will fail when displaying Object types like "ArrayBuffer"
  233. // and "Float32Array", but will match the original value.
  234. try {
  235. value = JSON.parse(value);
  236. }
  237. catch (e) {}
  238. if (typeof hash[variable] === "function") {
  239. ok(hash[variable](value),
  240. "Passing property value of " + value + " for " + variable + " " + description);
  241. }
  242. else {
  243. is(value, hash[variable],
  244. "Correct property value of " + hash[variable] + " for " + variable + " " + description);
  245. }
  246. });
  247. }
  248. function modifyVariableView(win, view, index, prop, value) {
  249. let deferred = Promise.defer();
  250. let scope = view.getScopeAtIndex(index);
  251. let aVar = scope.get(prop);
  252. scope.expand();
  253. win.on(win.EVENTS.UI_SET_PARAM, handleSetting);
  254. win.on(win.EVENTS.UI_SET_PARAM_ERROR, handleSetting);
  255. // Focus and select the variable to begin editing
  256. win.focus();
  257. aVar.focus();
  258. EventUtils.sendKey("RETURN", win);
  259. // Must wait for the scope DOM to be available to receive
  260. // events
  261. executeSoon(() => {
  262. info("Setting " + value + " for " + prop + "....");
  263. for (let c of (value + "")) {
  264. EventUtils.synthesizeKey(c, {}, win);
  265. }
  266. EventUtils.sendKey("RETURN", win);
  267. });
  268. function handleSetting(eventName) {
  269. win.off(win.EVENTS.UI_SET_PARAM, handleSetting);
  270. win.off(win.EVENTS.UI_SET_PARAM_ERROR, handleSetting);
  271. if (eventName === win.EVENTS.UI_SET_PARAM)
  272. deferred.resolve();
  273. if (eventName === win.EVENTS.UI_SET_PARAM_ERROR)
  274. deferred.reject();
  275. }
  276. return deferred.promise;
  277. }
  278. function findGraphEdge(win, source, target, param) {
  279. let selector = ".edgePaths .edgePath[data-source='" + source + "'][data-target='" + target + "']";
  280. if (param) {
  281. selector += "[data-param='" + param + "']";
  282. }
  283. return win.document.querySelector(selector);
  284. }
  285. function findGraphNode(win, node) {
  286. let selector = ".nodes > g[data-id='" + node + "']";
  287. return win.document.querySelector(selector);
  288. }
  289. function click(win, element) {
  290. EventUtils.sendMouseEvent({ type: "click" }, element, win);
  291. }
  292. function mouseOver(win, element) {
  293. EventUtils.sendMouseEvent({ type: "mouseover" }, element, win);
  294. }
  295. function command(button) {
  296. let ev = button.ownerDocument.createEvent("XULCommandEvent");
  297. ev.initCommandEvent("command", true, true, button.ownerDocument.defaultView, 0, false, false, false, false, null);
  298. button.dispatchEvent(ev);
  299. }
  300. function isVisible(element) {
  301. return !element.getAttribute("hidden");
  302. }
  303. /**
  304. * Used in debugging, returns a promise that resolves in `n` milliseconds.
  305. */
  306. function wait(n) {
  307. let { promise, resolve } = Promise.defer();
  308. setTimeout(resolve, n);
  309. info("Waiting " + n / 1000 + " seconds.");
  310. return promise;
  311. }
  312. /**
  313. * Clicks a graph node based on actorID or passing in an element.
  314. * Returns a promise that resolves once UI_INSPECTOR_NODE_SET is fired and
  315. * the tabs have rendered, completing all RDP requests for the node.
  316. */
  317. function clickGraphNode(panelWin, el, waitForToggle = false) {
  318. let { promise, resolve } = Promise.defer();
  319. let promises = [
  320. once(panelWin, panelWin.EVENTS.UI_INSPECTOR_NODE_SET),
  321. once(panelWin, panelWin.EVENTS.UI_PROPERTIES_TAB_RENDERED),
  322. once(panelWin, panelWin.EVENTS.UI_AUTOMATION_TAB_RENDERED)
  323. ];
  324. if (waitForToggle) {
  325. promises.push(once(panelWin, panelWin.EVENTS.UI_INSPECTOR_TOGGLED));
  326. }
  327. // Use `el` as the element if it is one, otherwise
  328. // assume it's an ID and find the related graph node
  329. let element = el.tagName ? el : findGraphNode(panelWin, el);
  330. click(panelWin, element);
  331. return Promise.all(promises);
  332. }
  333. /**
  334. * Returns the primitive value of a grip's value, or the
  335. * original form that the string grip.type comes from.
  336. */
  337. function getGripValue(value) {
  338. if (~["boolean", "string", "number"].indexOf(typeof value)) {
  339. return value;
  340. }
  341. switch (value.type) {
  342. case "undefined": return undefined;
  343. case "Infinity": return Infinity;
  344. case "-Infinity": return -Infinity;
  345. case "NaN": return NaN;
  346. case "-0": return -0;
  347. case "null": return null;
  348. default: return value;
  349. }
  350. }
  351. /**
  352. * Counts how many nodes and edges are currently in the graph.
  353. */
  354. function countGraphObjects(win) {
  355. return {
  356. nodes: win.document.querySelectorAll(".nodes > .audionode").length,
  357. edges: win.document.querySelectorAll(".edgePaths > .edgePath").length
  358. };
  359. }
  360. /**
  361. * Forces cycle collection and GC, used in AudioNode destruction tests.
  362. */
  363. function forceNodeCollection() {
  364. ContentTask.spawn(gBrowser.selectedBrowser, {}, function*() {
  365. // Kill the reference keeping stuff alive.
  366. content.wrappedJSObject.keepAlive = null;
  367. // Collect the now-deceased nodes.
  368. Cu.forceGC();
  369. Cu.forceCC();
  370. Cu.forceGC();
  371. Cu.forceCC();
  372. });
  373. }
  374. /**
  375. * Takes a `values` array of automation value entries,
  376. * looking for the value at `time` seconds, checking
  377. * to see if the value is close to `expected`.
  378. */
  379. function checkAutomationValue(values, time, expected) {
  380. // Remain flexible on values as we can approximate points
  381. let EPSILON = 0.01;
  382. let value = getValueAt(values, time);
  383. ok(Math.abs(value - expected) < EPSILON, "Timeline value at " + time + " with value " + value + " should have value very close to " + expected);
  384. /**
  385. * Entries are ordered in `values` according to time, so if we can't find an exact point
  386. * on a time of interest, return the point in between the threshold. This should
  387. * get us a very close value.
  388. */
  389. function getValueAt(values, time) {
  390. for (let i = 0; i < values.length; i++) {
  391. if (values[i].delta === time) {
  392. return values[i].value;
  393. }
  394. if (values[i].delta > time) {
  395. return (values[i - 1].value + values[i].value) / 2;
  396. }
  397. }
  398. return values[values.length - 1].value;
  399. }
  400. }
  401. /**
  402. * Wait for all inspector tabs to complete rendering.
  403. */
  404. function waitForInspectorRender(panelWin, EVENTS) {
  405. return Promise.all([
  406. once(panelWin, EVENTS.UI_PROPERTIES_TAB_RENDERED),
  407. once(panelWin, EVENTS.UI_AUTOMATION_TAB_RENDERED)
  408. ]);
  409. }
  410. /**
  411. * Takes a string `script` and evaluates it directly in the content
  412. * in potentially a different process.
  413. */
  414. function evalInDebuggee(script) {
  415. let deferred = Promise.defer();
  416. if (!mm) {
  417. throw new Error("`loadFrameScripts()` must be called when using MessageManager.");
  418. }
  419. let id = generateUUID().toString();
  420. mm.sendAsyncMessage("devtools:test:eval", { script: script, id: id });
  421. mm.addMessageListener("devtools:test:eval:response", handler);
  422. function handler({ data }) {
  423. if (id !== data.id) {
  424. return;
  425. }
  426. mm.removeMessageListener("devtools:test:eval:response", handler);
  427. deferred.resolve(data.value);
  428. }
  429. return deferred.promise;
  430. }
  431. /**
  432. * Takes an AudioNode type and returns it's properties (from audionode.json)
  433. * as keys and their default values as keys
  434. */
  435. function nodeDefaultValues(nodeName) {
  436. let fn = NODE_CONSTRUCTORS[nodeName];
  437. if (typeof fn === "undefined") return {};
  438. let init = nodeName === "AudioDestinationNode" ? "destination" : `create${fn}()`;
  439. let definition = JSON.stringify(audioNodes[nodeName].properties);
  440. let evalNode = evalInDebuggee(`
  441. let ins = (new AudioContext()).${init};
  442. let props = ${definition};
  443. let answer = {};
  444. for(let k in props) {
  445. if (props[k].param) {
  446. answer[k] = ins[k].defaultValue;
  447. } else if (typeof ins[k] === "object" && ins[k] !== null) {
  448. answer[k] = ins[k].toString().slice(8, -1);
  449. } else {
  450. answer[k] = ins[k];
  451. }
  452. }
  453. answer;`);
  454. return evalNode;
  455. }
  456. const NODE_CONSTRUCTORS = {
  457. "MediaStreamAudioDestinationNode": "MediaStreamDestination",
  458. "AudioBufferSourceNode": "BufferSource",
  459. "ScriptProcessorNode": "ScriptProcessor",
  460. "AnalyserNode": "Analyser",
  461. "GainNode": "Gain",
  462. "DelayNode": "Delay",
  463. "BiquadFilterNode": "BiquadFilter",
  464. "WaveShaperNode": "WaveShaper",
  465. "PannerNode": "Panner",
  466. "ConvolverNode": "Convolver",
  467. "ChannelSplitterNode": "ChannelSplitter",
  468. "ChannelMergerNode": "ChannelMerger",
  469. "DynamicsCompressorNode": "DynamicsCompressor",
  470. "OscillatorNode": "Oscillator",
  471. "StereoPannerNode": "StereoPanner"
  472. };