mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-09-06 15:58:39 +09:00
import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo
This commit is contained in:
Roy Tam
commit
dcd9973243
150858 changed files with 23884658 additions and 0 deletions
232
devtools/client/webaudioeditor/controller.js
Normal file
232
devtools/client/webaudioeditor/controller.js
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
/**
|
||||
* A collection of `AudioNodeModel`s used throughout the editor
|
||||
* to keep track of audio nodes within the audio context.
|
||||
*/
|
||||
var gAudioNodes = new AudioNodesCollection();
|
||||
|
||||
/**
|
||||
* Initializes the web audio editor views
|
||||
*/
|
||||
function startupWebAudioEditor() {
|
||||
return all([
|
||||
WebAudioEditorController.initialize(),
|
||||
ContextView.initialize(),
|
||||
InspectorView.initialize(),
|
||||
PropertiesView.initialize(),
|
||||
AutomationView.initialize()
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroys the web audio editor controller and views.
|
||||
*/
|
||||
function shutdownWebAudioEditor() {
|
||||
return all([
|
||||
WebAudioEditorController.destroy(),
|
||||
ContextView.destroy(),
|
||||
InspectorView.destroy(),
|
||||
PropertiesView.destroy(),
|
||||
AutomationView.destroy()
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Functions handling target-related lifetime events.
|
||||
*/
|
||||
var WebAudioEditorController = {
|
||||
/**
|
||||
* Listen for events emitted by the current tab target.
|
||||
*/
|
||||
initialize: Task.async(function* () {
|
||||
this._onTabNavigated = this._onTabNavigated.bind(this);
|
||||
this._onThemeChange = this._onThemeChange.bind(this);
|
||||
|
||||
gTarget.on("will-navigate", this._onTabNavigated);
|
||||
gTarget.on("navigate", this._onTabNavigated);
|
||||
gFront.on("start-context", this._onStartContext);
|
||||
gFront.on("create-node", this._onCreateNode);
|
||||
gFront.on("connect-node", this._onConnectNode);
|
||||
gFront.on("connect-param", this._onConnectParam);
|
||||
gFront.on("disconnect-node", this._onDisconnectNode);
|
||||
gFront.on("change-param", this._onChangeParam);
|
||||
gFront.on("destroy-node", this._onDestroyNode);
|
||||
|
||||
// Hook into theme change so we can change
|
||||
// the graph's marker styling, since we can't do this
|
||||
// with CSS
|
||||
gDevTools.on("pref-changed", this._onThemeChange);
|
||||
|
||||
// Store the AudioNode definitions from the WebAudioFront, if the method exists.
|
||||
// If not, get the JSON directly. Using the actor method is preferable so the client
|
||||
// knows exactly what methods are supported on the server.
|
||||
let actorHasDefinition = yield gTarget.actorHasMethod("webaudio", "getDefinition");
|
||||
if (actorHasDefinition) {
|
||||
AUDIO_NODE_DEFINITION = yield gFront.getDefinition();
|
||||
} else {
|
||||
AUDIO_NODE_DEFINITION = require("devtools/server/actors/utils/audionodes.json");
|
||||
}
|
||||
|
||||
// Make sure the backend is prepared to handle audio contexts.
|
||||
// Since actors are created lazily on the first request to them, we need to send an
|
||||
// early request to ensure the CallWatcherActor is running and watching for new window
|
||||
// globals.
|
||||
gFront.setup({ reload: false });
|
||||
}),
|
||||
|
||||
/**
|
||||
* Remove events emitted by the current tab target.
|
||||
*/
|
||||
destroy: function () {
|
||||
gTarget.off("will-navigate", this._onTabNavigated);
|
||||
gTarget.off("navigate", this._onTabNavigated);
|
||||
gFront.off("start-context", this._onStartContext);
|
||||
gFront.off("create-node", this._onCreateNode);
|
||||
gFront.off("connect-node", this._onConnectNode);
|
||||
gFront.off("connect-param", this._onConnectParam);
|
||||
gFront.off("disconnect-node", this._onDisconnectNode);
|
||||
gFront.off("change-param", this._onChangeParam);
|
||||
gFront.off("destroy-node", this._onDestroyNode);
|
||||
gDevTools.off("pref-changed", this._onThemeChange);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when page is reloaded to show the reload notice and waiting
|
||||
* for an audio context notice.
|
||||
*/
|
||||
reset: function () {
|
||||
$("#content").hidden = true;
|
||||
ContextView.resetUI();
|
||||
InspectorView.resetUI();
|
||||
PropertiesView.resetUI();
|
||||
},
|
||||
|
||||
// Since node events (create, disconnect, connect) are all async,
|
||||
// we have to make sure to wait that the node has finished creating
|
||||
// before performing an operation on it.
|
||||
getNode: function* (nodeActor) {
|
||||
let id = nodeActor.actorID;
|
||||
let node = gAudioNodes.get(id);
|
||||
|
||||
if (!node) {
|
||||
let { resolve, promise } = defer();
|
||||
gAudioNodes.on("add", function createNodeListener(createdNode) {
|
||||
if (createdNode.id === id) {
|
||||
gAudioNodes.off("add", createNodeListener);
|
||||
resolve(createdNode);
|
||||
}
|
||||
});
|
||||
node = yield promise;
|
||||
}
|
||||
return node;
|
||||
},
|
||||
|
||||
/**
|
||||
* Fired when the devtools theme changes (light, dark, etc.)
|
||||
* so that the graph can update marker styling, as that
|
||||
* cannot currently be done with CSS.
|
||||
*/
|
||||
_onThemeChange: function (event, data) {
|
||||
window.emit(EVENTS.THEME_CHANGE, data.newValue);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called for each location change in the debugged tab.
|
||||
*/
|
||||
_onTabNavigated: Task.async(function* (event, {isFrameSwitching}) {
|
||||
switch (event) {
|
||||
case "will-navigate": {
|
||||
// Clear out current UI.
|
||||
this.reset();
|
||||
|
||||
// When switching to an iframe, ensure displaying the reload button.
|
||||
// As the document has already been loaded without being hooked.
|
||||
if (isFrameSwitching) {
|
||||
$("#reload-notice").hidden = false;
|
||||
$("#waiting-notice").hidden = true;
|
||||
} else {
|
||||
// Otherwise, we are loading a new top level document,
|
||||
// so we don't need to reload anymore and should receive
|
||||
// new node events.
|
||||
$("#reload-notice").hidden = true;
|
||||
$("#waiting-notice").hidden = false;
|
||||
}
|
||||
|
||||
// Clear out stored audio nodes
|
||||
gAudioNodes.reset();
|
||||
|
||||
window.emit(EVENTS.UI_RESET);
|
||||
break;
|
||||
}
|
||||
case "navigate": {
|
||||
// TODO Case of bfcache, needs investigating
|
||||
// bug 994250
|
||||
break;
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Called after the first audio node is created in an audio context,
|
||||
* signaling that the audio context is being used.
|
||||
*/
|
||||
_onStartContext: function () {
|
||||
$("#reload-notice").hidden = true;
|
||||
$("#waiting-notice").hidden = true;
|
||||
$("#content").hidden = false;
|
||||
window.emit(EVENTS.START_CONTEXT);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when a new node is created. Creates an `AudioNodeView` instance
|
||||
* for tracking throughout the editor.
|
||||
*/
|
||||
_onCreateNode: function (nodeActor) {
|
||||
gAudioNodes.add(nodeActor);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called on `destroy-node` when an AudioNode is GC'd. Removes
|
||||
* from the AudioNode array and fires an event indicating the removal.
|
||||
*/
|
||||
_onDestroyNode: function (nodeActor) {
|
||||
gAudioNodes.remove(gAudioNodes.get(nodeActor.actorID));
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when a node is connected to another node.
|
||||
*/
|
||||
_onConnectNode: Task.async(function* ({ source: sourceActor, dest: destActor }) {
|
||||
let source = yield WebAudioEditorController.getNode(sourceActor);
|
||||
let dest = yield WebAudioEditorController.getNode(destActor);
|
||||
source.connect(dest);
|
||||
}),
|
||||
|
||||
/**
|
||||
* Called when a node is conneceted to another node's AudioParam.
|
||||
*/
|
||||
_onConnectParam: Task.async(function* ({ source: sourceActor, dest: destActor, param }) {
|
||||
let source = yield WebAudioEditorController.getNode(sourceActor);
|
||||
let dest = yield WebAudioEditorController.getNode(destActor);
|
||||
source.connect(dest, param);
|
||||
}),
|
||||
|
||||
/**
|
||||
* Called when a node is disconnected.
|
||||
*/
|
||||
_onDisconnectNode: Task.async(function* (nodeActor) {
|
||||
let node = yield WebAudioEditorController.getNode(nodeActor);
|
||||
node.disconnect();
|
||||
}),
|
||||
|
||||
/**
|
||||
* Called when a node param is changed.
|
||||
*/
|
||||
_onChangeParam: Task.async(function* ({ actor, param, value }) {
|
||||
let node = yield WebAudioEditorController.getNode(actor);
|
||||
window.emit(EVENTS.CHANGE_PARAM, node, param, value);
|
||||
})
|
||||
};
|
||||
110
devtools/client/webaudioeditor/includes.js
Normal file
110
devtools/client/webaudioeditor/includes.js
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
"use strict";
|
||||
|
||||
var { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
|
||||
|
||||
const { loader, require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
|
||||
const { XPCOMUtils } = require("resource://gre/modules/XPCOMUtils.jsm");
|
||||
const { EventTarget } = require("sdk/event/target");
|
||||
const { Task } = require("devtools/shared/task");
|
||||
const { Class } = require("sdk/core/heritage");
|
||||
const EventEmitter = require("devtools/shared/event-emitter");
|
||||
const DevToolsUtils = require("devtools/shared/DevToolsUtils");
|
||||
const Services = require("Services");
|
||||
const { gDevTools } = require("devtools/client/framework/devtools");
|
||||
const { LocalizationHelper } = require("devtools/shared/l10n");
|
||||
const { ViewHelpers } = require("devtools/client/shared/widgets/view-helpers");
|
||||
|
||||
const STRINGS_URI = "devtools/client/locales/webaudioeditor.properties";
|
||||
const L10N = new LocalizationHelper(STRINGS_URI);
|
||||
|
||||
loader.lazyRequireGetter(this, "LineGraphWidget",
|
||||
"devtools/client/shared/widgets/LineGraphWidget");
|
||||
|
||||
// `AUDIO_NODE_DEFINITION` defined in the controller's initialization,
|
||||
// which describes all the properties of an AudioNode
|
||||
var AUDIO_NODE_DEFINITION;
|
||||
|
||||
// Override DOM promises with Promise.jsm helpers
|
||||
const { defer, all } = require("promise");
|
||||
|
||||
/* Events fired on `window` to indicate state or actions*/
|
||||
const EVENTS = {
|
||||
// Fired when the first AudioNode has been created, signifying
|
||||
// that the AudioContext is being used and should be tracked via the editor.
|
||||
START_CONTEXT: "WebAudioEditor:StartContext",
|
||||
|
||||
// When the devtools theme changes.
|
||||
THEME_CHANGE: "WebAudioEditor:ThemeChange",
|
||||
|
||||
// When the UI is reset from tab navigation.
|
||||
UI_RESET: "WebAudioEditor:UIReset",
|
||||
|
||||
// When a param has been changed via the UI and successfully
|
||||
// pushed via the actor to the raw audio node.
|
||||
UI_SET_PARAM: "WebAudioEditor:UISetParam",
|
||||
|
||||
// When a node is to be set in the InspectorView.
|
||||
UI_SELECT_NODE: "WebAudioEditor:UISelectNode",
|
||||
|
||||
// When the inspector is finished setting a new node.
|
||||
UI_INSPECTOR_NODE_SET: "WebAudioEditor:UIInspectorNodeSet",
|
||||
|
||||
// When the inspector is finished rendering in or out of view.
|
||||
UI_INSPECTOR_TOGGLED: "WebAudioEditor:UIInspectorToggled",
|
||||
|
||||
// When an audio node is finished loading in the Properties tab.
|
||||
UI_PROPERTIES_TAB_RENDERED: "WebAudioEditor:UIPropertiesTabRendered",
|
||||
|
||||
// When an audio node is finished loading in the Automation tab.
|
||||
UI_AUTOMATION_TAB_RENDERED: "WebAudioEditor:UIAutomationTabRendered",
|
||||
|
||||
// When the Audio Context graph finishes rendering.
|
||||
// Is called with two arguments, first representing number of nodes
|
||||
// rendered, second being the number of edge connections rendering (not counting
|
||||
// param edges), followed by the count of the param edges rendered.
|
||||
UI_GRAPH_RENDERED: "WebAudioEditor:UIGraphRendered",
|
||||
|
||||
// Called when the inspector splitter is moved and resized.
|
||||
UI_INSPECTOR_RESIZE: "WebAudioEditor:UIInspectorResize"
|
||||
};
|
||||
XPCOMUtils.defineConstant(this, "EVENTS", EVENTS);
|
||||
|
||||
/**
|
||||
* The current target and the Web Audio Editor front, set by this tool's host.
|
||||
*/
|
||||
var gToolbox, gTarget, gFront;
|
||||
|
||||
/**
|
||||
* Convenient way of emitting events from the panel window.
|
||||
*/
|
||||
EventEmitter.decorate(this);
|
||||
|
||||
/**
|
||||
* DOM query helper.
|
||||
*/
|
||||
function $(selector, target = document) { return target.querySelector(selector); }
|
||||
function $$(selector, target = document) { return target.querySelectorAll(selector); }
|
||||
|
||||
/**
|
||||
* Takes an iterable collection, and a hash. Return the first
|
||||
* object in the collection that matches the values in the hash.
|
||||
* From Backbone.Collection#findWhere
|
||||
* http://backbonejs.org/#Collection-findWhere
|
||||
*/
|
||||
function findWhere(collection, attrs) {
|
||||
let keys = Object.keys(attrs);
|
||||
for (let model of collection) {
|
||||
if (keys.every(key => model[key] === attrs[key])) {
|
||||
return model;
|
||||
}
|
||||
}
|
||||
return void 0;
|
||||
}
|
||||
|
||||
function mixin(source, ...args) {
|
||||
args.forEach(obj => Object.keys(obj).forEach(prop => source[prop] = obj[prop]));
|
||||
return source;
|
||||
}
|
||||
288
devtools/client/webaudioeditor/models.js
Normal file
288
devtools/client/webaudioeditor/models.js
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
"use strict";
|
||||
|
||||
// Import as different name `coreEmit`, so we don't conflict
|
||||
// with the global `window` listener itself.
|
||||
const { emit: coreEmit } = require("sdk/event/core");
|
||||
|
||||
/**
|
||||
* Representational wrapper around AudioNodeActors. Adding and destroying
|
||||
* AudioNodes should be performed through the AudioNodes collection.
|
||||
*
|
||||
* Events:
|
||||
* - `connect`: node, destinationNode, parameter
|
||||
* - `disconnect`: node
|
||||
*/
|
||||
const AudioNodeModel = Class({
|
||||
extends: EventTarget,
|
||||
|
||||
// Will be added via AudioNodes `add`
|
||||
collection: null,
|
||||
|
||||
initialize: function (actor) {
|
||||
this.actor = actor;
|
||||
this.id = actor.actorID;
|
||||
this.type = actor.type;
|
||||
this.bypassable = actor.bypassable;
|
||||
this._bypassed = false;
|
||||
this.connections = [];
|
||||
},
|
||||
|
||||
/**
|
||||
* Stores connection data inside this instance of this audio node connecting
|
||||
* to another node (destination). If connecting to another node's AudioParam,
|
||||
* the second argument (param) must be populated with a string.
|
||||
*
|
||||
* Connecting nodes is idempotent. Upon new connection, emits "connect" event.
|
||||
*
|
||||
* @param AudioNodeModel destination
|
||||
* @param String param
|
||||
*/
|
||||
connect: function (destination, param) {
|
||||
let edge = findWhere(this.connections, { destination: destination.id, param: param });
|
||||
|
||||
if (!edge) {
|
||||
this.connections.push({ source: this.id, destination: destination.id, param: param });
|
||||
coreEmit(this, "connect", this, destination, param);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Clears out all internal connection data. Emits "disconnect" event.
|
||||
*/
|
||||
disconnect: function () {
|
||||
this.connections.length = 0;
|
||||
coreEmit(this, "disconnect", this);
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the bypass status of the audio node.
|
||||
*
|
||||
* @return Boolean
|
||||
*/
|
||||
isBypassed: function () {
|
||||
return this._bypassed;
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the bypass value of an AudioNode.
|
||||
*
|
||||
* @param Boolean enable
|
||||
* @return Promise
|
||||
*/
|
||||
bypass: function (enable) {
|
||||
this._bypassed = enable;
|
||||
return this.actor.bypass(enable).then(() => coreEmit(this, "bypass", this, enable));
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a promise that resolves to an array of objects containing
|
||||
* both a `param` name property and a `value` property.
|
||||
*
|
||||
* @return Promise->Object
|
||||
*/
|
||||
getParams: function () {
|
||||
return this.actor.getParams();
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a promise that resolves to an object containing an
|
||||
* array of event information and an array of automation data.
|
||||
*
|
||||
* @param String paramName
|
||||
* @return Promise->Array
|
||||
*/
|
||||
getAutomationData: function (paramName) {
|
||||
return this.actor.getAutomationData(paramName);
|
||||
},
|
||||
|
||||
/**
|
||||
* Takes a `dagreD3.Digraph` object and adds this node to
|
||||
* the graph to be rendered.
|
||||
*
|
||||
* @param dagreD3.Digraph
|
||||
*/
|
||||
addToGraph: function (graph) {
|
||||
graph.addNode(this.id, {
|
||||
type: this.type,
|
||||
label: this.type.replace(/Node$/, ""),
|
||||
id: this.id,
|
||||
bypassed: this._bypassed
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Takes a `dagreD3.Digraph` object and adds edges to
|
||||
* the graph to be rendered. Separate from `addToGraph`,
|
||||
* as while we depend on D3/Dagre's constraints, we cannot
|
||||
* add edges for nodes that have not yet been added to the graph.
|
||||
*
|
||||
* @param dagreD3.Digraph
|
||||
*/
|
||||
addEdgesToGraph: function (graph) {
|
||||
for (let edge of this.connections) {
|
||||
let options = {
|
||||
source: this.id,
|
||||
target: edge.destination
|
||||
};
|
||||
|
||||
// Only add `label` if `param` specified, as this is an AudioParam
|
||||
// connection then. `label` adds the magic to render with dagre-d3,
|
||||
// and `param` is just more explicitly the param, ignoring
|
||||
// implementation details.
|
||||
if (edge.param) {
|
||||
options.label = options.param = edge.param;
|
||||
}
|
||||
|
||||
graph.addEdge(null, this.id, edge.destination, options);
|
||||
}
|
||||
},
|
||||
|
||||
toString: () => "[object AudioNodeModel]",
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Constructor for a Collection of `AudioNodeModel` models.
|
||||
*
|
||||
* Events:
|
||||
* - `add`: node
|
||||
* - `remove`: node
|
||||
* - `connect`: node, destinationNode, parameter
|
||||
* - `disconnect`: node
|
||||
*/
|
||||
const AudioNodesCollection = Class({
|
||||
extends: EventTarget,
|
||||
|
||||
model: AudioNodeModel,
|
||||
|
||||
initialize: function () {
|
||||
this.models = new Set();
|
||||
this._onModelEvent = this._onModelEvent.bind(this);
|
||||
},
|
||||
|
||||
/**
|
||||
* Iterates over all models within the collection, calling `fn` with the
|
||||
* model as the first argument.
|
||||
*
|
||||
* @param Function fn
|
||||
*/
|
||||
forEach: function (fn) {
|
||||
this.models.forEach(fn);
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates a new AudioNodeModel, passing through arguments into the AudioNodeModel
|
||||
* constructor, and adds the model to the internal collection store of this
|
||||
* instance.
|
||||
*
|
||||
* Emits "add" event on instance when completed.
|
||||
*
|
||||
* @param Object obj
|
||||
* @return AudioNodeModel
|
||||
*/
|
||||
add: function (obj) {
|
||||
let node = new this.model(obj);
|
||||
node.collection = this;
|
||||
|
||||
this.models.add(node);
|
||||
|
||||
node.on("*", this._onModelEvent);
|
||||
coreEmit(this, "add", node);
|
||||
return node;
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes an AudioNodeModel from the internal collection. Calls `delete` method
|
||||
* on the model, and emits "remove" on this instance.
|
||||
*
|
||||
* @param AudioNodeModel node
|
||||
*/
|
||||
remove: function (node) {
|
||||
this.models.delete(node);
|
||||
coreEmit(this, "remove", node);
|
||||
},
|
||||
|
||||
/**
|
||||
* Empties out the internal collection of all AudioNodeModels.
|
||||
*/
|
||||
reset: function () {
|
||||
this.models.clear();
|
||||
},
|
||||
|
||||
/**
|
||||
* Takes an `id` from an AudioNodeModel and returns the corresponding
|
||||
* AudioNodeModel within the collection that matches that id. Returns `null`
|
||||
* if not found.
|
||||
*
|
||||
* @param Number id
|
||||
* @return AudioNodeModel|null
|
||||
*/
|
||||
get: function (id) {
|
||||
return findWhere(this.models, { id: id });
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the count for how many models are a part of this collection.
|
||||
*
|
||||
* @return Number
|
||||
*/
|
||||
get length() {
|
||||
return this.models.size;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns detailed information about the collection. used during tests
|
||||
* to query state. Returns an object with information on node count,
|
||||
* how many edges are within the data graph, as well as how many of those edges
|
||||
* are for AudioParams.
|
||||
*
|
||||
* @return Object
|
||||
*/
|
||||
getInfo: function () {
|
||||
let info = {
|
||||
nodes: this.length,
|
||||
edges: 0,
|
||||
paramEdges: 0
|
||||
};
|
||||
|
||||
this.models.forEach(node => {
|
||||
let paramEdgeCount = node.connections.filter(edge => edge.param).length;
|
||||
info.edges += node.connections.length - paramEdgeCount;
|
||||
info.paramEdges += paramEdgeCount;
|
||||
});
|
||||
return info;
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds all nodes within the collection to the passed in graph,
|
||||
* as well as their corresponding edges.
|
||||
*
|
||||
* @param dagreD3.Digraph
|
||||
*/
|
||||
populateGraph: function (graph) {
|
||||
this.models.forEach(node => node.addToGraph(graph));
|
||||
this.models.forEach(node => node.addEdgesToGraph(graph));
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when a stored model emits any event. Used to manage
|
||||
* event propagation, or listening to model events to react, like
|
||||
* removing a model from the collection when it's destroyed.
|
||||
*/
|
||||
_onModelEvent: function (eventName, node, ...args) {
|
||||
if (eventName === "remove") {
|
||||
// If a `remove` event from the model, remove it
|
||||
// from the collection, and let the method handle the emitting on
|
||||
// the collection
|
||||
this.remove(node);
|
||||
} else {
|
||||
// Pipe the event to the collection
|
||||
coreEmit(this, eventName, node, ...args);
|
||||
}
|
||||
},
|
||||
|
||||
toString: () => "[object AudioNodeCollection]",
|
||||
});
|
||||
10
devtools/client/webaudioeditor/moz.build
Normal file
10
devtools/client/webaudioeditor/moz.build
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
# vim: set filetype=python:
|
||||
# This Source Code Form is subject to the terms of the Mozilla Public
|
||||
# License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
DevToolsModules(
|
||||
'panel.js'
|
||||
)
|
||||
|
||||
BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
|
||||
71
devtools/client/webaudioeditor/panel.js
Normal file
71
devtools/client/webaudioeditor/panel.js
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
|
||||
/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
|
||||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
"use strict";
|
||||
|
||||
const { Cc, Ci, Cu, Cr } = require("chrome");
|
||||
const EventEmitter = require("devtools/shared/event-emitter");
|
||||
const { WebAudioFront } = require("devtools/shared/fronts/webaudio");
|
||||
var Promise = require("promise");
|
||||
|
||||
function WebAudioEditorPanel(iframeWindow, toolbox) {
|
||||
this.panelWin = iframeWindow;
|
||||
this._toolbox = toolbox;
|
||||
this._destroyer = null;
|
||||
|
||||
EventEmitter.decorate(this);
|
||||
}
|
||||
|
||||
exports.WebAudioEditorPanel = WebAudioEditorPanel;
|
||||
|
||||
WebAudioEditorPanel.prototype = {
|
||||
open: function () {
|
||||
let targetPromise;
|
||||
|
||||
// Local debugging needs to make the target remote.
|
||||
if (!this.target.isRemote) {
|
||||
targetPromise = this.target.makeRemote();
|
||||
} else {
|
||||
targetPromise = Promise.resolve(this.target);
|
||||
}
|
||||
|
||||
return targetPromise
|
||||
.then(() => {
|
||||
this.panelWin.gToolbox = this._toolbox;
|
||||
this.panelWin.gTarget = this.target;
|
||||
|
||||
this.panelWin.gFront = new WebAudioFront(this.target.client, this.target.form);
|
||||
return this.panelWin.startupWebAudioEditor();
|
||||
})
|
||||
.then(() => {
|
||||
this.isReady = true;
|
||||
this.emit("ready");
|
||||
return this;
|
||||
})
|
||||
.then(null, function onError(aReason) {
|
||||
console.error("WebAudioEditorPanel open failed. " +
|
||||
aReason.error + ": " + aReason.message);
|
||||
});
|
||||
},
|
||||
|
||||
// DevToolPanel API
|
||||
|
||||
get target() {
|
||||
return this._toolbox.target;
|
||||
},
|
||||
|
||||
destroy: function () {
|
||||
// Make sure this panel is not already destroyed.
|
||||
if (this._destroyer) {
|
||||
return this._destroyer;
|
||||
}
|
||||
|
||||
return this._destroyer = this.panelWin.shutdownWebAudioEditor().then(() => {
|
||||
// Destroy front to ensure packet handler is removed from client
|
||||
this.panelWin.gFront.destroy();
|
||||
this.emit("destroyed");
|
||||
});
|
||||
}
|
||||
};
|
||||
6
devtools/client/webaudioeditor/test/.eslintrc.js
Normal file
6
devtools/client/webaudioeditor/test/.eslintrc.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
"use strict";
|
||||
|
||||
module.exports = {
|
||||
// Extend from the shared list of defined globals for mochitests.
|
||||
"extends": "../../../.eslintrc.mochitests.js"
|
||||
};
|
||||
BIN
devtools/client/webaudioeditor/test/440hz_sine.ogg
Normal file
BIN
devtools/client/webaudioeditor/test/440hz_sine.ogg
Normal file
Binary file not shown.
77
devtools/client/webaudioeditor/test/browser.ini
Normal file
77
devtools/client/webaudioeditor/test/browser.ini
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
[DEFAULT]
|
||||
tags = devtools
|
||||
subsuite = devtools
|
||||
support-files =
|
||||
doc_simple-context.html
|
||||
doc_complex-context.html
|
||||
doc_simple-node-creation.html
|
||||
doc_buffer-and-array.html
|
||||
doc_media-node-creation.html
|
||||
doc_destroy-nodes.html
|
||||
doc_connect-param.html
|
||||
doc_connect-multi-param.html
|
||||
doc_iframe-context.html
|
||||
doc_automation.html
|
||||
doc_bug_1112378.html
|
||||
doc_bug_1125817.html
|
||||
doc_bug_1130901.html
|
||||
doc_bug_1141261.html
|
||||
440hz_sine.ogg
|
||||
head.js
|
||||
|
||||
[browser_audionode-actor-get-param-flags.js]
|
||||
[browser_audionode-actor-get-params-01.js]
|
||||
[browser_audionode-actor-get-params-02.js]
|
||||
[browser_audionode-actor-get-set-param.js]
|
||||
[browser_audionode-actor-type.js]
|
||||
[browser_audionode-actor-source.js]
|
||||
[browser_audionode-actor-bypass.js]
|
||||
[browser_audionode-actor-bypassable.js]
|
||||
[browser_audionode-actor-connectnode-disconnect.js]
|
||||
[browser_audionode-actor-connectparam.js]
|
||||
skip-if = true # bug 1092571
|
||||
# [browser_audionode-actor-add-automation-event.js] bug 1134036
|
||||
# [browser_audionode-actor-get-automation-data-01.js] bug 1134036
|
||||
# [browser_audionode-actor-get-automation-data-02.js] bug 1134036
|
||||
# [browser_audionode-actor-get-automation-data-03.js] bug 1134036
|
||||
[browser_callwatcher-01.js]
|
||||
[browser_callwatcher-02.js]
|
||||
[browser_webaudio-actor-simple.js]
|
||||
[browser_webaudio-actor-destroy-node.js]
|
||||
[browser_webaudio-actor-connect-param.js]
|
||||
# [browser_webaudio-actor-automation-event.js] bug 1134036
|
||||
|
||||
# [browser_wa_automation-view-01.js] bug 1134036
|
||||
# [browser_wa_automation-view-02.js] bug 1134036
|
||||
[browser_wa_controller-01.js]
|
||||
[browser_wa_destroy-node-01.js]
|
||||
[browser_wa_first-run.js]
|
||||
[browser_wa_graph-click.js]
|
||||
[browser_wa_graph-markers.js]
|
||||
[browser_wa_graph-render-01.js]
|
||||
[browser_wa_graph-render-02.js]
|
||||
[browser_wa_graph-render-03.js]
|
||||
[browser_wa_graph-render-04.js]
|
||||
[browser_wa_graph-render-05.js]
|
||||
skip-if = true # bug 1092571
|
||||
[browser_wa_graph-render-06.js]
|
||||
[browser_wa_graph-selected.js]
|
||||
[browser_wa_graph-zoom.js]
|
||||
[browser_wa_inspector.js]
|
||||
[browser_wa_inspector-toggle.js]
|
||||
[browser_wa_inspector-width.js]
|
||||
[browser_wa_inspector-bypass-01.js]
|
||||
[browser_wa_navigate.js]
|
||||
[browser_wa_properties-view.js]
|
||||
[browser_wa_properties-view-edit-01.js]
|
||||
skip-if = true # bug 1010423
|
||||
[browser_wa_properties-view-edit-02.js]
|
||||
skip-if = true # bug 1010423
|
||||
[browser_wa_properties-view-media-nodes.js]
|
||||
skip-if = os == 'mac' # bug 1216542
|
||||
[browser_wa_properties-view-params.js]
|
||||
[browser_wa_properties-view-params-objects.js]
|
||||
[browser_wa_reset-01.js]
|
||||
[browser_wa_reset-02.js]
|
||||
[browser_wa_reset-03.js]
|
||||
[browser_wa_reset-04.js]
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test AudioNode#addAutomationEvent();
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
|
||||
let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
get3(front, "create-node")
|
||||
]);
|
||||
let count = 0;
|
||||
let counter = () => count++;
|
||||
front.on("automation-event", counter);
|
||||
|
||||
let t0 = 0, t1 = 0.1, t2 = 0.2, t3 = 0.3, t4 = 0.4, t5 = 0.6, t6 = 0.7, t7 = 1;
|
||||
let curve = [-1, 0, 1];
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.2, t0]);
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.3, t1]);
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.4, t2]);
|
||||
yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [1, t3]);
|
||||
yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [0.15, t4]);
|
||||
yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [0.75, t5]);
|
||||
yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [0.5, t6]);
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueCurveAtTime", [curve, t7, t7 - t6]);
|
||||
yield oscNode.addAutomationEvent("frequency", "setTargetAtTime", [20, 2, 5]);
|
||||
|
||||
ok(true, "successfully set automation events for valid automation events");
|
||||
|
||||
try {
|
||||
yield oscNode.addAutomationEvent("frequency", "notAMethod", 20, 2, 5);
|
||||
ok(false, "non-automation methods should not be successful");
|
||||
} catch (e) {
|
||||
ok(/invalid/.test(e.message), "AudioNode:addAutomationEvent fails for invalid automation methods");
|
||||
}
|
||||
|
||||
try {
|
||||
yield oscNode.addAutomationEvent("invalidparam", "setValueAtTime", 0.2, t0);
|
||||
ok(false, "automating non-AudioParams should not be successful");
|
||||
} catch (e) {
|
||||
ok(/invalid/.test(e.message), "AudioNode:addAutomationEvent fails for a non AudioParam");
|
||||
}
|
||||
|
||||
front.off("automation-event", counter);
|
||||
|
||||
is(count, 9,
|
||||
"when calling `addAutomationEvent`, the WebAudioActor should still fire `automation-event`.");
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test AudioNode#bypass(), AudioNode#isBypassed()
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
|
||||
let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
get3(front, "create-node")
|
||||
]);
|
||||
|
||||
is((yield gainNode.isBypassed()), false, "Nodes start off unbypassed.");
|
||||
|
||||
info("Calling node#bypass(true)");
|
||||
let isBypassed = yield gainNode.bypass(true);
|
||||
|
||||
is(isBypassed, true, "node.bypass(true) resolves to true");
|
||||
is((yield gainNode.isBypassed()), true, "Node is now bypassed.");
|
||||
|
||||
info("Calling node#bypass(false)");
|
||||
isBypassed = yield gainNode.bypass(false);
|
||||
|
||||
is(isBypassed, false, "node.bypass(false) resolves to false");
|
||||
is((yield gainNode.isBypassed()), false, "Node back to being unbypassed.");
|
||||
|
||||
info("Calling node#bypass(true) on unbypassable node");
|
||||
isBypassed = yield destNode.bypass(true);
|
||||
|
||||
is(isBypassed, false, "node.bypass(true) resolves to false for unbypassable node");
|
||||
is((yield gainNode.isBypassed()), false, "Unbypassable node is unaffect");
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test AudioNode#bypassable
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_NODES_URL);
|
||||
let [_, nodes] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
getN(front, "create-node", 14)
|
||||
]);
|
||||
|
||||
let actualBypassability = nodes.map(node => node.bypassable);
|
||||
let expectedBypassability = [
|
||||
false, // AudioDestinationNode
|
||||
true, // AudioBufferSourceNode
|
||||
true, // ScriptProcessorNode
|
||||
true, // AnalyserNode
|
||||
true, // GainNode
|
||||
true, // DelayNode
|
||||
true, // BiquadFilterNode
|
||||
true, // WaveShaperNode
|
||||
true, // PannerNode
|
||||
true, // ConvolverNode
|
||||
false, // ChannelSplitterNode
|
||||
false, // ChannelMergerNode
|
||||
true, // DynamicsCompressNode
|
||||
true, // OscillatorNode
|
||||
];
|
||||
|
||||
expectedBypassability.forEach((bypassable, i) => {
|
||||
is(actualBypassability[i], bypassable, `${nodes[i].type} has correct ".bypassable" status`);
|
||||
});
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that AudioNodeActor#connectNode() and AudioNodeActor#disconnect() work.
|
||||
* Uses the editor front as the actors do not retain connect state.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let [dest, osc, gain] = actors;
|
||||
|
||||
info("Disconnecting oscillator...");
|
||||
osc.disconnect();
|
||||
yield Promise.all([
|
||||
waitForGraphRendered(panelWin, 3, 1),
|
||||
once(gAudioNodes, "disconnect")
|
||||
]);
|
||||
ok(true, "Oscillator disconnected, event emitted.");
|
||||
|
||||
info("Reconnecting oscillator...");
|
||||
osc.connectNode(gain);
|
||||
yield Promise.all([
|
||||
waitForGraphRendered(panelWin, 3, 2),
|
||||
once(gAudioNodes, "connect")
|
||||
]);
|
||||
ok(true, "Oscillator reconnected.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that AudioNodeActor#connectParam() work.
|
||||
* Uses the editor front as the actors do not retain connect state.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let [dest, osc, gain] = actors;
|
||||
|
||||
yield osc.disconnect();
|
||||
|
||||
osc.connectParam(gain, "gain");
|
||||
yield Promise.all([
|
||||
waitForGraphRendered(panelWin, 3, 1, 1),
|
||||
once(gAudioNodes, "connect")
|
||||
]);
|
||||
ok(true, "Oscillator connect to Gain's Gain AudioParam, event emitted.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test AudioNode#addAutomationEvent() checking automation values, also using
|
||||
* a curve as the last event to check duration spread.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
|
||||
let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
get3(front, "create-node")
|
||||
]);
|
||||
|
||||
let t0 = 0, t1 = 0.1, t2 = 0.2, t3 = 0.3, t4 = 0.4, t5 = 0.6, t6 = 0.7, t7 = 1;
|
||||
let curve = [-1, 0, 1];
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.2, t0]);
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.3, t1]);
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [0.4, t2]);
|
||||
yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [1, t3]);
|
||||
yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [0.15, t4]);
|
||||
yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [0.75, t5]);
|
||||
yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [0.05, t6]);
|
||||
// End with a curve here so we can get proper results on the last event (which takes into account
|
||||
// duration)
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueCurveAtTime", [curve, t6, t7 - t6]);
|
||||
|
||||
let { events, values } = yield oscNode.getAutomationData("frequency");
|
||||
|
||||
is(events.length, 8, "8 recorded events returned.");
|
||||
is(values.length, 2000, "2000 value points returned.");
|
||||
|
||||
checkAutomationValue(values, 0.05, 0.2);
|
||||
checkAutomationValue(values, 0.1, 0.3);
|
||||
checkAutomationValue(values, 0.15, 0.3);
|
||||
checkAutomationValue(values, 0.2, 0.4);
|
||||
checkAutomationValue(values, 0.25, 0.7);
|
||||
checkAutomationValue(values, 0.3, 1);
|
||||
checkAutomationValue(values, 0.35, 0.575);
|
||||
checkAutomationValue(values, 0.4, 0.15);
|
||||
checkAutomationValue(values, 0.45, 0.15 * Math.pow(0.75 / 0.15, 0.05 / 0.2));
|
||||
checkAutomationValue(values, 0.5, 0.15 * Math.pow(0.75 / 0.15, 0.5));
|
||||
checkAutomationValue(values, 0.55, 0.15 * Math.pow(0.75 / 0.15, 0.15 / 0.2));
|
||||
checkAutomationValue(values, 0.6, 0.75);
|
||||
checkAutomationValue(values, 0.65, 0.75 * Math.pow(0.05 / 0.75, 0.5));
|
||||
checkAutomationValue(values, 0.705, -1); // Increase this time a bit to prevent off by the previous exponential amount
|
||||
checkAutomationValue(values, 0.8, 0);
|
||||
checkAutomationValue(values, 0.9, 1);
|
||||
checkAutomationValue(values, 1, 1);
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test AudioNode#addAutomationEvent() when automation series ends with
|
||||
* `setTargetAtTime`, which approaches its target to infinity.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
|
||||
let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
get3(front, "create-node")
|
||||
]);
|
||||
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [300, 0.1]);
|
||||
yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [500, 0.4]);
|
||||
yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [200, 0.6]);
|
||||
// End with a setTargetAtTime event, as the target approaches infinity, which will
|
||||
// give us more points to render than the default 2000
|
||||
yield oscNode.addAutomationEvent("frequency", "setTargetAtTime", [1000, 2, 0.5]);
|
||||
|
||||
var { events, values } = yield oscNode.getAutomationData("frequency");
|
||||
|
||||
is(events.length, 4, "4 recorded events returned.");
|
||||
is(values.length, 4000, "4000 value points returned when ending with exponentiall approaching automator.");
|
||||
|
||||
checkAutomationValue(values, 2.01, 215.055);
|
||||
checkAutomationValue(values, 2.1, 345.930);
|
||||
checkAutomationValue(values, 3, 891.601);
|
||||
checkAutomationValue(values, 5, 998.01);
|
||||
|
||||
// Refetch the automation data to ensure it recalculates correctly (bug 1118071)
|
||||
var { events, values } = yield oscNode.getAutomationData("frequency");
|
||||
|
||||
checkAutomationValue(values, 2.01, 215.055);
|
||||
checkAutomationValue(values, 2.1, 345.930);
|
||||
checkAutomationValue(values, 3, 891.601);
|
||||
checkAutomationValue(values, 5, 998.01);
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test that `cancelScheduledEvents` clears out events on and after
|
||||
* its argument.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
|
||||
let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
get3(front, "create-node")
|
||||
]);
|
||||
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [300, 0]);
|
||||
yield oscNode.addAutomationEvent("frequency", "linearRampToValueAtTime", [500, 0.9]);
|
||||
yield oscNode.addAutomationEvent("frequency", "setValueAtTime", [700, 1]);
|
||||
yield oscNode.addAutomationEvent("frequency", "exponentialRampToValueAtTime", [1000, 2]);
|
||||
yield oscNode.addAutomationEvent("frequency", "cancelScheduledValues", [1]);
|
||||
|
||||
var { events, values } = yield oscNode.getAutomationData("frequency");
|
||||
|
||||
is(events.length, 2, "2 recorded events returned.");
|
||||
is(values.length, 2000, "2000 value points returned");
|
||||
|
||||
checkAutomationValue(values, 0, 300);
|
||||
checkAutomationValue(values, 0.5, 411.15);
|
||||
checkAutomationValue(values, 0.9, 499.9);
|
||||
checkAutomationValue(values, 1, 499.9);
|
||||
checkAutomationValue(values, 2, 499.9);
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test AudioNode#getParamFlags()
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_NODES_URL);
|
||||
let [_, nodes] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
getN(front, "create-node", 15)
|
||||
]);
|
||||
|
||||
let allNodeParams = yield Promise.all(nodes.map(node => node.getParams()));
|
||||
let nodeTypes = [
|
||||
"AudioDestinationNode",
|
||||
"AudioBufferSourceNode", "ScriptProcessorNode", "AnalyserNode", "GainNode",
|
||||
"DelayNode", "BiquadFilterNode", "WaveShaperNode", "PannerNode", "ConvolverNode",
|
||||
"ChannelSplitterNode", "ChannelMergerNode", "DynamicsCompressorNode", "OscillatorNode",
|
||||
"StereoPannerNode"
|
||||
];
|
||||
|
||||
// For some reason nodeTypes.forEach and params.forEach fail here so we use
|
||||
// simple for loops.
|
||||
for (let i = 0; i < nodeTypes.length; i++) {
|
||||
let type = nodeTypes[i];
|
||||
let params = allNodeParams[i];
|
||||
|
||||
for (let {param, value, flags} of params) {
|
||||
let testFlags = yield nodes[i].getParamFlags(param);
|
||||
ok(typeof testFlags === "object", type + " has flags from #getParamFlags(" + param + ")");
|
||||
|
||||
if (param === "buffer") {
|
||||
is(flags.Buffer, true, "`buffer` params have Buffer flag");
|
||||
}
|
||||
else if (param === "bufferSize" || param === "frequencyBinCount") {
|
||||
is(flags.readonly, true, param + " is readonly");
|
||||
}
|
||||
else if (param === "curve") {
|
||||
is(flags["Float32Array"], true, "`curve` param has Float32Array flag");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test AudioNode#getParams()
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_NODES_URL);
|
||||
let [_, nodes] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
getN(front, "create-node", 15)
|
||||
]);
|
||||
|
||||
yield loadFrameScripts();
|
||||
|
||||
let allNodeParams = yield Promise.all(nodes.map(node => node.getParams()));
|
||||
let nodeTypes = [
|
||||
"AudioDestinationNode",
|
||||
"AudioBufferSourceNode", "ScriptProcessorNode", "AnalyserNode", "GainNode",
|
||||
"DelayNode", "BiquadFilterNode", "WaveShaperNode", "PannerNode", "ConvolverNode",
|
||||
"ChannelSplitterNode", "ChannelMergerNode", "DynamicsCompressorNode", "OscillatorNode",
|
||||
"StereoPannerNode"
|
||||
];
|
||||
|
||||
let defaults = yield Promise.all(nodeTypes.map(type => nodeDefaultValues(type)));
|
||||
|
||||
nodeTypes.map((type, i) => {
|
||||
let params = allNodeParams[i];
|
||||
|
||||
params.forEach(({param, value, flags}) => {
|
||||
ok(param in defaults[i], "expected parameter for " + type);
|
||||
|
||||
ok(typeof flags === "object", type + " has a flags object");
|
||||
|
||||
if (param === "buffer") {
|
||||
is(flags.Buffer, true, "`buffer` params have Buffer flag");
|
||||
}
|
||||
else if (param === "bufferSize" || param === "frequencyBinCount") {
|
||||
is(flags.readonly, true, param + " is readonly");
|
||||
}
|
||||
else if (param === "curve") {
|
||||
is(flags["Float32Array"], true, "`curve` param has Float32Array flag");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that default properties are returned with the correct type
|
||||
* from the AudioNode actors.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_NODES_URL);
|
||||
let [_, nodes] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
getN(front, "create-node", 15)
|
||||
]);
|
||||
|
||||
yield loadFrameScripts();
|
||||
|
||||
let allParams = yield Promise.all(nodes.map(node => node.getParams()));
|
||||
let types = [
|
||||
"AudioDestinationNode", "AudioBufferSourceNode", "ScriptProcessorNode",
|
||||
"AnalyserNode", "GainNode", "DelayNode", "BiquadFilterNode", "WaveShaperNode",
|
||||
"PannerNode", "ConvolverNode", "ChannelSplitterNode", "ChannelMergerNode",
|
||||
"DynamicsCompressorNode", "OscillatorNode", "StereoPannerNode"
|
||||
];
|
||||
|
||||
let defaults = yield Promise.all(types.map(type => nodeDefaultValues(type)));
|
||||
|
||||
info(JSON.stringify(defaults));
|
||||
|
||||
allParams.forEach((params, i) => {
|
||||
compare(params, defaults[i], types[i]);
|
||||
});
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
||||
function compare(actual, expected, type) {
|
||||
actual.forEach(({ value, param }) => {
|
||||
value = getGripValue(value);
|
||||
if (typeof expected[param] === "function") {
|
||||
ok(expected[param](value), type + " has a passing value for " + param);
|
||||
}
|
||||
else {
|
||||
is(value, expected[param], type + " has correct default value and type for " + param);
|
||||
}
|
||||
});
|
||||
|
||||
info(Object.keys(expected).join(",") + " - " + JSON.stringify(expected));
|
||||
|
||||
is(actual.length, Object.keys(expected).length,
|
||||
type + " has correct amount of properties.");
|
||||
}
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test AudioNode#getParam() / AudioNode#setParam()
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
|
||||
let [_, [destNode, oscNode, gainNode]] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
get3(front, "create-node")
|
||||
]);
|
||||
|
||||
let freq = yield oscNode.getParam("frequency");
|
||||
info(typeof freq);
|
||||
is(freq, 440, "AudioNode:getParam correctly fetches AudioParam");
|
||||
|
||||
let type = yield oscNode.getParam("type");
|
||||
is(type, "sine", "AudioNode:getParam correctly fetches non-AudioParam");
|
||||
|
||||
type = yield oscNode.getParam("not-a-valid-param");
|
||||
ok(type.type === "undefined",
|
||||
"AudioNode:getParam correctly returns a grip value for `undefined` for an invalid param.");
|
||||
|
||||
let resSuccess = yield oscNode.setParam("frequency", 220);
|
||||
freq = yield oscNode.getParam("frequency");
|
||||
is(freq, 220, "AudioNode:setParam correctly sets a `number` AudioParam");
|
||||
is(resSuccess, undefined, "AudioNode:setParam returns undefined for correctly set AudioParam");
|
||||
|
||||
resSuccess = yield oscNode.setParam("type", "square");
|
||||
type = yield oscNode.getParam("type");
|
||||
is(type, "square", "AudioNode:setParam correctly sets a `string` non-AudioParam");
|
||||
is(resSuccess, undefined, "AudioNode:setParam returns undefined for correctly set AudioParam");
|
||||
|
||||
try {
|
||||
yield oscNode.setParam("frequency", "hello");
|
||||
ok(false, "setParam with invalid types should throw");
|
||||
} catch (e) {
|
||||
ok(/is not a finite floating-point/.test(e.message), "AudioNode:setParam returns error with correct message when attempting an invalid assignment");
|
||||
is(e.type, "TypeError", "AudioNode:setParam returns error with correct type when attempting an invalid assignment");
|
||||
freq = yield oscNode.getParam("frequency");
|
||||
is(freq, 220, "AudioNode:setParam does not modify value when an error occurs");
|
||||
}
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test AudioNode#source
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_NODES_URL);
|
||||
let [_, nodes] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
getN(front, "create-node", 14)
|
||||
]);
|
||||
|
||||
let actualTypes = nodes.map(node => node.type);
|
||||
let isSourceResult = nodes.map(node => node.source);
|
||||
|
||||
actualTypes.forEach((type, i) => {
|
||||
let shouldBeSource = type === "AudioBufferSourceNode" || type === "OscillatorNode";
|
||||
if (shouldBeSource)
|
||||
is(isSourceResult[i], true, type + "'s `source` is `true`");
|
||||
else
|
||||
is(isSourceResult[i], false, type + "'s `source` is `false`");
|
||||
});
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test AudioNode#type
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_NODES_URL);
|
||||
let [_, nodes] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
getN(front, "create-node", 14)
|
||||
]);
|
||||
|
||||
let actualTypes = nodes.map(node => node.type);
|
||||
let expectedTypes = [
|
||||
"AudioDestinationNode",
|
||||
"AudioBufferSourceNode", "ScriptProcessorNode", "AnalyserNode", "GainNode",
|
||||
"DelayNode", "BiquadFilterNode", "WaveShaperNode", "PannerNode", "ConvolverNode",
|
||||
"ChannelSplitterNode", "ChannelMergerNode", "DynamicsCompressorNode", "OscillatorNode"
|
||||
];
|
||||
|
||||
expectedTypes.forEach((type, i) => {
|
||||
is(actualTypes[i], type, type + " successfully created with correct type");
|
||||
});
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Bug 1130901
|
||||
* Tests to ensure that calling call/apply on methods wrapped
|
||||
* via CallWatcher do not throw a security permissions error:
|
||||
* "Error: Permission denied to access property 'call'"
|
||||
*/
|
||||
|
||||
const BUG_1130901_URL = EXAMPLE_URL + "doc_bug_1130901.html";
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(BUG_1130901_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
|
||||
|
||||
let rendered = waitForGraphRendered(panelWin, 3, 0);
|
||||
reload(target);
|
||||
yield rendered;
|
||||
|
||||
ok(true, "Successfully created a node from AudioContext via `call`.");
|
||||
ok(true, "Successfully created a node from AudioContext via `apply`.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Bug 1112378
|
||||
* Tests to ensure that errors called on wrapped functions via call-watcher
|
||||
* correctly looks like the error comes from the content, not from within the devtools.
|
||||
*/
|
||||
|
||||
const BUG_1112378_URL = EXAMPLE_URL + "doc_bug_1112378.html";
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(BUG_1112378_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
|
||||
|
||||
loadFrameScripts();
|
||||
|
||||
let rendered = waitForGraphRendered(panelWin, 2, 0);
|
||||
reload(target);
|
||||
yield rendered;
|
||||
|
||||
let error = yield evalInDebuggee("throwError()");
|
||||
is(error.lineNumber, 21, "error has correct lineNumber");
|
||||
is(error.columnNumber, 11, "error has correct columnNumber");
|
||||
is(error.name, "TypeError", "error has correct name");
|
||||
is(error.message, "Argument 1 is not valid for any of the 2-argument overloads of AudioNode.connect.", "error has correct message");
|
||||
is(error.stringified, "TypeError: Argument 1 is not valid for any of the 2-argument overloads of AudioNode.connect.", "error is stringified correctly");
|
||||
is(error.instanceof, true, "error is correctly an instanceof TypeError");
|
||||
is(error.fileName, "http://example.com/browser/devtools/client/webaudioeditor/test/doc_bug_1112378.html", "error has correct fileName");
|
||||
|
||||
error = yield evalInDebuggee("throwDOMException()");
|
||||
is(error.lineNumber, 37, "exception has correct lineNumber");
|
||||
is(error.columnNumber, 0, "exception has correct columnNumber");
|
||||
is(error.code, 9, "exception has correct code");
|
||||
is(error.result, 2152923145, "exception has correct result");
|
||||
is(error.name, "NotSupportedError", "exception has correct name");
|
||||
is(error.message, "Operation is not supported", "exception has correct message");
|
||||
is(error.stringified, "NotSupportedError: Operation is not supported", "exception is stringified correctly");
|
||||
is(error.instanceof, true, "exception is correctly an instance of DOMException");
|
||||
is(error.filename, "http://example.com/browser/devtools/client/webaudioeditor/test/doc_bug_1112378.html", "exception has correct filename");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that automation view shows the correct view depending on if events
|
||||
* or params exist.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(AUTOMATION_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS } = panelWin;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
let $tabbox = $("#web-audio-editor-tabs");
|
||||
|
||||
// Oscillator node
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[1]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS);
|
||||
$tabbox.selectedIndex = 1;
|
||||
|
||||
ok(isVisible($("#automation-graph-container")), "graph container should be visible");
|
||||
ok(isVisible($("#automation-content")), "automation content should be visible");
|
||||
ok(!isVisible($("#automation-no-events")), "no-events panel should not be visible");
|
||||
ok(!isVisible($("#automation-empty")), "empty panel should not be visible");
|
||||
|
||||
// Gain node
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[2]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS);
|
||||
$tabbox.selectedIndex = 1;
|
||||
|
||||
ok(!isVisible($("#automation-graph-container")), "graph container should not be visible");
|
||||
ok(isVisible($("#automation-content")), "automation content should be visible");
|
||||
ok(isVisible($("#automation-no-events")), "no-events panel should be visible");
|
||||
ok(!isVisible($("#automation-empty")), "empty panel should not be visible");
|
||||
|
||||
// destination node
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[0]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS);
|
||||
$tabbox.selectedIndex = 1;
|
||||
|
||||
ok(!isVisible($("#automation-graph-container")), "graph container should not be visible");
|
||||
ok(!isVisible($("#automation-content")), "automation content should not be visible");
|
||||
ok(!isVisible($("#automation-no-events")), "no-events panel should not be visible");
|
||||
ok(isVisible($("#automation-empty")), "empty panel should be visible");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that automation view selects the first parameter by default and
|
||||
* switching between AudioParam rerenders the graph.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(AUTOMATION_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, AutomationView } = panelWin;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
// Oscillator node
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[1]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS);
|
||||
click(panelWin, $("#automation-tab"));
|
||||
|
||||
ok(AutomationView._selectedParamName, "frequency",
|
||||
"AutomatioView is set on 'frequency'");
|
||||
ok($(".automation-param-button[data-param='frequency']").getAttribute("selected"),
|
||||
"frequency param should be selected on load");
|
||||
ok(!$(".automation-param-button[data-param='detune']").getAttribute("selected"),
|
||||
"detune param should not be selected on load");
|
||||
ok(isVisible($("#automation-content")), "automation content should be visible");
|
||||
ok(isVisible($("#automation-graph-container")), "graph container should be visible");
|
||||
ok(!isVisible($("#automation-no-events")), "no-events panel should not be visible");
|
||||
|
||||
click(panelWin, $(".automation-param-button[data-param='detune']"));
|
||||
yield once(panelWin, EVENTS.UI_AUTOMATION_TAB_RENDERED);
|
||||
|
||||
ok(true, "automation tab rerendered");
|
||||
|
||||
ok(AutomationView._selectedParamName, "detune",
|
||||
"AutomatioView is set on 'detune'");
|
||||
ok(!$(".automation-param-button[data-param='frequency']").getAttribute("selected"),
|
||||
"frequency param should not be selected after clicking detune");
|
||||
ok($(".automation-param-button[data-param='detune']").getAttribute("selected"),
|
||||
"detune param should be selected after clicking detune");
|
||||
ok(isVisible($("#automation-content")), "automation content should be visible");
|
||||
ok(!isVisible($("#automation-graph-container")), "graph container should not be visible");
|
||||
ok(isVisible($("#automation-no-events")), "no-events panel should be visible");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Bug 1125817
|
||||
* Tests to ensure that disconnecting a node immediately
|
||||
* after creating it does not fail.
|
||||
*/
|
||||
|
||||
const BUG_1125817_URL = EXAMPLE_URL + "doc_bug_1125817.html";
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(BUG_1125817_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
|
||||
|
||||
let events = Promise.all([
|
||||
once(gAudioNodes, "add", 2),
|
||||
once(gAudioNodes, "disconnect"),
|
||||
waitForGraphRendered(panelWin, 2, 0)
|
||||
]);
|
||||
reload(target);
|
||||
yield events;
|
||||
|
||||
ok(true, "Successfully disconnected a just-created node.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that the destruction node event is fired and that the nodes are no
|
||||
* longer stored internally in the tool, that the graph is updated properly, and
|
||||
* that selecting a soon-to-be dead node clears the inspector.
|
||||
*
|
||||
* All done in one test since this test takes a few seconds to clear GC.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(DESTROY_NODES_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, gAudioNodes } = panelWin;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
getNSpread(gAudioNodes, "add", 13),
|
||||
waitForGraphRendered(panelWin, 13, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [created] = yield events;
|
||||
|
||||
// Flatten arrays of event arguments and take the first (AudioNodeModel)
|
||||
// and get its ID.
|
||||
let actorIDs = created.map(ev => ev[0].id);
|
||||
|
||||
// Click a soon-to-be dead buffer node
|
||||
yield clickGraphNode(panelWin, actorIDs[5]);
|
||||
|
||||
let destroyed = getN(gAudioNodes, "remove", 10);
|
||||
|
||||
// Force a CC in the child process to collect the orphaned nodes.
|
||||
forceNodeCollection();
|
||||
|
||||
// Wait for destruction and graph to re-render
|
||||
yield Promise.all([destroyed, waitForGraphRendered(panelWin, 3, 2)]);
|
||||
|
||||
// Test internal storage
|
||||
is(panelWin.gAudioNodes.length, 3, "All nodes should be GC'd except one gain, osc and dest node.");
|
||||
|
||||
// Test graph rendering
|
||||
ok(findGraphNode(panelWin, actorIDs[0]), "dest should be in graph");
|
||||
ok(findGraphNode(panelWin, actorIDs[1]), "osc should be in graph");
|
||||
ok(findGraphNode(panelWin, actorIDs[2]), "gain should be in graph");
|
||||
|
||||
let { nodes, edges } = countGraphObjects(panelWin);
|
||||
|
||||
is(nodes, 3, "Only 3 nodes rendered in graph.");
|
||||
is(edges, 2, "Only 2 edges rendered in graph.");
|
||||
|
||||
// Test that the inspector reset to no node selected
|
||||
ok(isVisible($("#web-audio-editor-details-pane-empty")),
|
||||
"InspectorView empty message should show if the currently selected node gets collected.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
49
devtools/client/webaudioeditor/test/browser_wa_first-run.js
Normal file
49
devtools/client/webaudioeditor/test/browser_wa_first-run.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
//
|
||||
// Whitelisting this test.
|
||||
// As part of bug 1077403, the leaking uncaught rejection should be fixed.
|
||||
//
|
||||
thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Connection closed");
|
||||
|
||||
/**
|
||||
* Tests that the reloading/onContentLoaded hooks work.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { gFront, $ } = panel.panelWin;
|
||||
|
||||
is($("#reload-notice").hidden, false,
|
||||
"The 'reload this page' notice should initially be visible.");
|
||||
is($("#waiting-notice").hidden, true,
|
||||
"The 'waiting for an audio context' notice should initially be hidden.");
|
||||
is($("#content").hidden, true,
|
||||
"The tool's content should initially be hidden.");
|
||||
|
||||
let navigating = once(target, "will-navigate");
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
reload(target);
|
||||
|
||||
yield navigating;
|
||||
|
||||
is($("#reload-notice").hidden, true,
|
||||
"The 'reload this page' notice should be hidden when navigating.");
|
||||
is($("#waiting-notice").hidden, false,
|
||||
"The 'waiting for an audio context' notice should be visible when navigating.");
|
||||
is($("#content").hidden, true,
|
||||
"The tool's content should still be hidden.");
|
||||
|
||||
yield started;
|
||||
|
||||
is($("#reload-notice").hidden, true,
|
||||
"The 'reload this page' notice should be hidden after context found.");
|
||||
is($("#waiting-notice").hidden, true,
|
||||
"The 'waiting for an audio context' notice should be hidden after context found.");
|
||||
is($("#content").hidden, false,
|
||||
"The tool's content should not be hidden anymore.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that the clicking on a node in the GraphView opens and sets
|
||||
* the correct node in the InspectorView
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(COMPLEX_CONTEXT_URL);
|
||||
let panelWin = panel.panelWin;
|
||||
let { gFront, $, $$, InspectorView } = panelWin;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
getN(gFront, "create-node", 8),
|
||||
waitForGraphRendered(panel.panelWin, 8, 8)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors, _] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
|
||||
|
||||
yield clickGraphNode(panelWin, nodeIds[1], true);
|
||||
|
||||
ok(InspectorView.isVisible(), "InspectorView visible after selecting a node.");
|
||||
is(InspectorView.getCurrentAudioNode().id, nodeIds[1], "InspectorView has correct node set.");
|
||||
|
||||
yield clickGraphNode(panelWin, nodeIds[2]);
|
||||
|
||||
ok(InspectorView.isVisible(), "InspectorView still visible after selecting another node.");
|
||||
is(InspectorView.getCurrentAudioNode().id, nodeIds[2], "InspectorView has correct node set on second node.");
|
||||
|
||||
yield clickGraphNode(panelWin, nodeIds[2]);
|
||||
is(InspectorView.getCurrentAudioNode().id, nodeIds[2], "Clicking the same node again works (idempotent).");
|
||||
|
||||
yield clickGraphNode(panelWin, $("rect", findGraphNode(panelWin, nodeIds[3])));
|
||||
is(InspectorView.getCurrentAudioNode().id, nodeIds[3], "Clicking on a <rect> works as expected.");
|
||||
|
||||
yield clickGraphNode(panelWin, $("tspan", findGraphNode(panelWin, nodeIds[4])));
|
||||
is(InspectorView.getCurrentAudioNode().id, nodeIds[4], "Clicking on a <tspan> works as expected.");
|
||||
|
||||
ok(InspectorView.isVisible(),
|
||||
"InspectorView still visible after several nodes have been clicked.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that the SVG marker styling is updated when devtools theme changes.
|
||||
*/
|
||||
|
||||
const { setTheme } = require("devtools/client/shared/theme");
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, MARKER_STYLING } = panelWin;
|
||||
|
||||
let currentTheme = Services.prefs.getCharPref("devtools.theme");
|
||||
|
||||
ok(MARKER_STYLING.light, "Marker styling exists for light theme.");
|
||||
ok(MARKER_STYLING.dark, "Marker styling exists for dark theme.");
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
|
||||
is(getFill($("#arrowhead")), MARKER_STYLING[currentTheme],
|
||||
"marker initially matches theme.");
|
||||
|
||||
// Switch to light
|
||||
setTheme("light");
|
||||
is(getFill($("#arrowhead")), MARKER_STYLING.light,
|
||||
"marker styling matches light theme on change.");
|
||||
|
||||
// Switch to dark
|
||||
setTheme("dark");
|
||||
is(getFill($("#arrowhead")), MARKER_STYLING.dark,
|
||||
"marker styling matches dark theme on change.");
|
||||
|
||||
// Switch to dark again
|
||||
setTheme("dark");
|
||||
is(getFill($("#arrowhead")), MARKER_STYLING.dark,
|
||||
"marker styling remains dark.");
|
||||
|
||||
// Switch to back to light again
|
||||
setTheme("light");
|
||||
is(getFill($("#arrowhead")), MARKER_STYLING.light,
|
||||
"marker styling switches back to light once again.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
||||
/**
|
||||
* Returns a hex value found in styling for an element. So parses
|
||||
* <marker style="fill: #abcdef"> and returns "#abcdef"
|
||||
*/
|
||||
function getFill(el) {
|
||||
return el.getAttribute("style").match(/(#.*)$/)[1];
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that SVG nodes and edges were created for the Graph View.
|
||||
*/
|
||||
|
||||
var connectCount = 0;
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
gAudioNodes.on("connect", onConnectNode);
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let [destId, oscId, gainId] = actors.map(actor => actor.actorID);
|
||||
|
||||
ok(findGraphNode(panelWin, oscId).classList.contains("type-OscillatorNode"), "found OscillatorNode with class");
|
||||
ok(findGraphNode(panelWin, gainId).classList.contains("type-GainNode"), "found GainNode with class");
|
||||
ok(findGraphNode(panelWin, destId).classList.contains("type-AudioDestinationNode"), "found AudioDestinationNode with class");
|
||||
is(findGraphEdge(panelWin, oscId, gainId).toString(), "[object SVGGElement]", "found edge for osc -> gain");
|
||||
is(findGraphEdge(panelWin, gainId, destId).toString(), "[object SVGGElement]", "found edge for gain -> dest");
|
||||
|
||||
yield wait(1000);
|
||||
|
||||
is(connectCount, 2, "Only two node connect events should be fired.");
|
||||
|
||||
gAudioNodes.off("connect", onConnectNode);
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
||||
function onConnectNode() {
|
||||
++connectCount;
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests more edge rendering for complex graphs.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(COMPLEX_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$ } = panelWin;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
getN(gFront, "create-node", 8),
|
||||
waitForGraphRendered(panelWin, 8, 8)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIDs = actors.map(actor => actor.actorID);
|
||||
|
||||
let types = ["AudioDestinationNode", "OscillatorNode", "GainNode", "ScriptProcessorNode",
|
||||
"OscillatorNode", "GainNode", "AudioBufferSourceNode", "BiquadFilterNode"];
|
||||
|
||||
|
||||
types.forEach((type, i) => {
|
||||
ok(findGraphNode(panelWin, nodeIDs[i]).classList.contains("type-" + type), "found " + type + " with class");
|
||||
});
|
||||
|
||||
let edges = [
|
||||
[1, 2, "osc1 -> gain1"],
|
||||
[1, 3, "osc1 -> proc"],
|
||||
[2, 0, "gain1 -> dest"],
|
||||
[4, 5, "osc2 -> gain2"],
|
||||
[5, 0, "gain2 -> dest"],
|
||||
[6, 7, "buf -> filter"],
|
||||
[4, 7, "osc2 -> filter"],
|
||||
[7, 0, "filter -> dest"],
|
||||
];
|
||||
|
||||
edges.forEach(([source, target, msg], i) => {
|
||||
is(findGraphEdge(panelWin, nodeIDs[source], nodeIDs[target]).toString(), "[object SVGGElement]",
|
||||
"found edge for " + msg);
|
||||
});
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests to ensure that selected nodes stay selected on graph redraw.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS } = panelWin;
|
||||
|
||||
let events = Promise.all([
|
||||
getN(gFront, "create-node", 3),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let [dest, osc, gain] = actors;
|
||||
|
||||
yield clickGraphNode(panelWin, gain.actorID);
|
||||
ok(findGraphNode(panelWin, gain.actorID).classList.contains("selected"),
|
||||
"Node selected once.");
|
||||
|
||||
// Disconnect a node to trigger a rerender
|
||||
osc.disconnect();
|
||||
|
||||
yield once(panelWin, EVENTS.UI_GRAPH_RENDERED);
|
||||
|
||||
ok(findGraphNode(panelWin, gain.actorID).classList.contains("selected"),
|
||||
"Node still selected after rerender.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests audio param connection rendering.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(CONNECT_MULTI_PARAM_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS } = panelWin;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
getN(gFront, "create-node", 5),
|
||||
waitForGraphRendered(panelWin, 5, 2, 3)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIDs = actors.map(actor => actor.actorID);
|
||||
|
||||
let [, carrier, gain, mod1, mod2] = nodeIDs;
|
||||
|
||||
let edges = [
|
||||
[mod1, gain, "gain", "mod1 -> gain[gain]"],
|
||||
[mod2, carrier, "frequency", "mod2 -> carrier[frequency]"],
|
||||
[mod2, carrier, "detune", "mod2 -> carrier[detune]"]
|
||||
];
|
||||
|
||||
edges.forEach(([source, target, param, msg], i) => {
|
||||
let edge = findGraphEdge(panelWin, source, target, param);
|
||||
ok(edge.classList.contains("param-connection"), "edge is classified as a param-connection");
|
||||
});
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests to ensure that param connections trigger graph redraws
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS } = panelWin;
|
||||
|
||||
let events = Promise.all([
|
||||
getN(gFront, "create-node", 3),
|
||||
waitForGraphRendered(panelWin, 3, 2, 0)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let [dest, osc, gain] = actors;
|
||||
|
||||
yield osc.disconnect();
|
||||
|
||||
osc.connectParam(gain, "gain");
|
||||
yield waitForGraphRendered(panelWin, 3, 1, 1);
|
||||
ok(true, "Graph re-rendered upon param connection");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests to ensure that param connections trigger graph redraws
|
||||
*/
|
||||
|
||||
const BUG_1141261_URL = EXAMPLE_URL + "doc_bug_1141261.html";
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(BUG_1141261_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS } = panelWin;
|
||||
|
||||
let events = Promise.all([
|
||||
getN(gFront, "create-node", 3),
|
||||
waitForGraphRendered(panelWin, 3, 1, 0)
|
||||
]);
|
||||
reload(target);
|
||||
yield events;
|
||||
|
||||
ok(true, "Graph correctly shows gain node as disconnected");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that SVG nodes and edges were created for the Graph View.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS } = panelWin;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let [destId, oscId, gainId] = actors.map(actor => actor.actorID);
|
||||
|
||||
ok(!findGraphNode(panelWin, destId).classList.contains("selected"),
|
||||
"No nodes selected on start. (destination)");
|
||||
ok(!findGraphNode(panelWin, oscId).classList.contains("selected"),
|
||||
"No nodes selected on start. (oscillator)");
|
||||
ok(!findGraphNode(panelWin, gainId).classList.contains("selected"),
|
||||
"No nodes selected on start. (gain)");
|
||||
|
||||
yield clickGraphNode(panelWin, oscId);
|
||||
|
||||
ok(findGraphNode(panelWin, oscId).classList.contains("selected"),
|
||||
"Selected node has class 'selected'.");
|
||||
ok(!findGraphNode(panelWin, destId).classList.contains("selected"),
|
||||
"Non-selected nodes do not have class 'selected'.");
|
||||
ok(!findGraphNode(panelWin, gainId).classList.contains("selected"),
|
||||
"Non-selected nodes do not have class 'selected'.");
|
||||
|
||||
yield clickGraphNode(panelWin, gainId);
|
||||
|
||||
ok(!findGraphNode(panelWin, oscId).classList.contains("selected"),
|
||||
"Previously selected node no longer has class 'selected'.");
|
||||
ok(!findGraphNode(panelWin, destId).classList.contains("selected"),
|
||||
"Non-selected nodes do not have class 'selected'.");
|
||||
ok(findGraphNode(panelWin, gainId).classList.contains("selected"),
|
||||
"Newly selected node now has class 'selected'.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
43
devtools/client/webaudioeditor/test/browser_wa_graph-zoom.js
Normal file
43
devtools/client/webaudioeditor/test/browser_wa_graph-zoom.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that the graph's scale and position is reset on a page reload.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, ContextView } = panelWin;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
yield Promise.all([
|
||||
waitForGraphRendered(panelWin, 3, 2),
|
||||
reload(target),
|
||||
]);
|
||||
|
||||
is(ContextView.getCurrentScale(), 1, "Default graph scale is 1.");
|
||||
is(ContextView.getCurrentTranslation()[0], 20, "Default x-translation is 20.");
|
||||
is(ContextView.getCurrentTranslation()[1], 20, "Default y-translation is 20.");
|
||||
|
||||
// Change both attribute and D3's internal store
|
||||
panelWin.d3.select("#graph-target").attr("transform", "translate([100, 400]) scale(10)");
|
||||
ContextView._zoomBinding.scale(10);
|
||||
ContextView._zoomBinding.translate([100, 400]);
|
||||
|
||||
is(ContextView.getCurrentScale(), 10, "After zoom, scale is 10.");
|
||||
is(ContextView.getCurrentTranslation()[0], 100, "After zoom, x-translation is 100.");
|
||||
is(ContextView.getCurrentTranslation()[1], 400, "After zoom, y-translation is 400.");
|
||||
|
||||
yield Promise.all([
|
||||
waitForGraphRendered(panelWin, 3, 2),
|
||||
reload(target),
|
||||
]);
|
||||
|
||||
is(ContextView.getCurrentScale(), 1, "After refresh, graph scale is 1.");
|
||||
is(ContextView.getCurrentTranslation()[0], 20, "After refresh, x-translation is 20.");
|
||||
is(ContextView.getCurrentTranslation()[1], 20, "After refresh, y-translation is 20.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that nodes are correctly bypassed when bypassing.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, gAudioNodes } = panelWin;
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
// Wait for the node to be set as well as the inspector to come fully into the view
|
||||
yield clickGraphNode(panelWin, findGraphNode(panelWin, nodeIds[1]), true);
|
||||
|
||||
let $bypass = $("toolbarbutton.bypass");
|
||||
|
||||
is((yield actors[1].isBypassed()), false, "AudioNodeActor is not bypassed by default.");
|
||||
is($bypass.checked, true, "Button is 'on' for normal nodes");
|
||||
is($bypass.disabled, false, "Bypass button is not disabled for normal nodes");
|
||||
|
||||
command($bypass);
|
||||
yield once(gAudioNodes, "bypass");
|
||||
|
||||
is((yield actors[1].isBypassed()), true, "AudioNodeActor is bypassed.");
|
||||
is($bypass.checked, false, "Button is 'off' when clicked");
|
||||
is($bypass.disabled, false, "Bypass button is not disabled after click");
|
||||
ok(findGraphNode(panelWin, nodeIds[1]).classList.contains("bypassed"),
|
||||
"AudioNode has 'bypassed' class.");
|
||||
|
||||
command($bypass);
|
||||
yield once(gAudioNodes, "bypass");
|
||||
|
||||
is((yield actors[1].isBypassed()), false, "AudioNodeActor is no longer bypassed.");
|
||||
is($bypass.checked, true, "Button is back on when clicked");
|
||||
is($bypass.disabled, false, "Bypass button is not disabled after click");
|
||||
ok(!findGraphNode(panelWin, nodeIds[1]).classList.contains("bypassed"),
|
||||
"AudioNode no longer has 'bypassed' class.");
|
||||
|
||||
yield clickGraphNode(panelWin, findGraphNode(panelWin, nodeIds[0]));
|
||||
|
||||
is((yield actors[0].isBypassed()), false, "Unbypassable AudioNodeActor is not bypassed.");
|
||||
is($bypass.checked, false, "Button is 'off' for unbypassable nodes");
|
||||
is($bypass.disabled, true, "Bypass button is disabled for unbypassable nodes");
|
||||
|
||||
command($bypass);
|
||||
is((yield actors[0].isBypassed()), false,
|
||||
"Clicking button on unbypassable node does not change bypass state on actor.");
|
||||
is($bypass.checked, false, "Button is still 'off' for unbypassable nodes");
|
||||
is($bypass.disabled, true, "Bypass button is still disabled for unbypassable nodes");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that the inspector toggle button shows and hides
|
||||
* the inspector panel as intended.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, InspectorView } = panelWin;
|
||||
let gVars = InspectorView._propsView;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
|
||||
|
||||
// Open inspector pane
|
||||
$("#inspector-pane-toggle").click();
|
||||
yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
|
||||
|
||||
ok(InspectorView.isVisible(), "InspectorView shown after toggling.");
|
||||
|
||||
ok(isVisible($("#web-audio-editor-details-pane-empty")),
|
||||
"InspectorView empty message should still be visible.");
|
||||
ok(!isVisible($("#web-audio-editor-tabs")),
|
||||
"InspectorView tabs view should still be hidden.");
|
||||
|
||||
// Close inspector pane
|
||||
$("#inspector-pane-toggle").click();
|
||||
yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
|
||||
|
||||
ok(!InspectorView.isVisible(), "InspectorView back to being hidden.");
|
||||
|
||||
// Open again to test node loading while open
|
||||
$("#inspector-pane-toggle").click();
|
||||
yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
|
||||
|
||||
ok(InspectorView.isVisible(), "InspectorView being shown.");
|
||||
ok(!isVisible($("#web-audio-editor-tabs")),
|
||||
"InspectorView tabs are still hidden.");
|
||||
|
||||
yield clickGraphNode(panelWin, findGraphNode(panelWin, nodeIds[1]));
|
||||
|
||||
ok(!isVisible($("#web-audio-editor-details-pane-empty")),
|
||||
"Empty message hides even when loading node while open.");
|
||||
ok(isVisible($("#web-audio-editor-tabs")),
|
||||
"Switches to tab view when loading node while open.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test that the WebAudioInspector's Width is saved as
|
||||
* a preference
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, InspectorView } = panelWin;
|
||||
let gVars = InspectorView._propsView;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
|
||||
|
||||
// Open inspector pane
|
||||
$("#inspector-pane-toggle").click();
|
||||
yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
|
||||
|
||||
let newInspectorWidth = 500;
|
||||
|
||||
// Setting width to new_inspector_width
|
||||
$("#web-audio-inspector").setAttribute("width", newInspectorWidth);
|
||||
|
||||
// Width should be 500 after reloading
|
||||
events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
[actors] = yield events;
|
||||
nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
// Open inspector pane
|
||||
$("#inspector-pane-toggle").click();
|
||||
yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
|
||||
|
||||
yield clickGraphNode(panelWin, findGraphNode(panelWin, nodeIds[1]));
|
||||
|
||||
// Getting the width of the audio inspector
|
||||
let width = $("#web-audio-inspector").getAttribute("width");
|
||||
|
||||
is(width, newInspectorWidth, "WebAudioEditor's Inspector width should be saved as a preference");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
46
devtools/client/webaudioeditor/test/browser_wa_inspector.js
Normal file
46
devtools/client/webaudioeditor/test/browser_wa_inspector.js
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that inspector view opens on graph node click, and
|
||||
* loads the correct node inside the inspector.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, InspectorView } = panelWin;
|
||||
let gVars = InspectorView._propsView;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
|
||||
ok(isVisible($("#web-audio-editor-details-pane-empty")),
|
||||
"InspectorView empty message should show when no node's selected.");
|
||||
ok(!isVisible($("#web-audio-editor-tabs")),
|
||||
"InspectorView tabs view should be hidden when no node's selected.");
|
||||
|
||||
// Wait for the node to be set as well as the inspector to come fully into the view
|
||||
yield clickGraphNode(panelWin, findGraphNode(panelWin, nodeIds[1]), true);
|
||||
|
||||
ok(InspectorView.isVisible(), "InspectorView shown once node selected.");
|
||||
ok(!isVisible($("#web-audio-editor-details-pane-empty")),
|
||||
"InspectorView empty message hidden when node selected.");
|
||||
ok(isVisible($("#web-audio-editor-tabs")),
|
||||
"InspectorView tabs view visible when node selected.");
|
||||
|
||||
is($("#web-audio-editor-tabs").selectedIndex, 0,
|
||||
"default tab selected should be the parameters tab.");
|
||||
|
||||
yield clickGraphNode(panelWin, findGraphNode(panelWin, nodeIds[2]));
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
44
devtools/client/webaudioeditor/test/browser_wa_navigate.js
Normal file
44
devtools/client/webaudioeditor/test/browser_wa_navigate.js
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests naviating from a page to another will repopulate
|
||||
* the audio graph if both pages have an AudioContext.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $ } = panelWin;
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
yield events;
|
||||
|
||||
var { nodes, edges } = countGraphObjects(panelWin);
|
||||
is(nodes, 3, "should only be 3 nodes.");
|
||||
is(edges, 2, "should only be 2 edges.");
|
||||
|
||||
events = Promise.all([
|
||||
getN(gFront, "create-node", 15),
|
||||
waitForGraphRendered(panelWin, 15, 0)
|
||||
]);
|
||||
navigate(target, SIMPLE_NODES_URL);
|
||||
yield events;
|
||||
|
||||
is($("#reload-notice").hidden, true,
|
||||
"The 'reload this page' notice should be hidden after context found after navigation.");
|
||||
is($("#waiting-notice").hidden, true,
|
||||
"The 'waiting for an audio context' notice should be hidden after context found after navigation.");
|
||||
is($("#content").hidden, false,
|
||||
"The tool's content should reappear without closing and reopening the toolbox.");
|
||||
|
||||
var { nodes, edges } = countGraphObjects(panelWin);
|
||||
is(nodes, 15, "after navigation, should have 15 nodes");
|
||||
is(edges, 0, "after navigation, should have 0 edges.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that properties are updated when modifying the VariablesView.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
|
||||
let gVars = PropertiesView._propsView;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[1]));
|
||||
// Wait for the node to be set as well as the inspector to come fully into the view
|
||||
yield Promise.all([
|
||||
waitForInspectorRender(panelWin, EVENTS),
|
||||
once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED)
|
||||
]);
|
||||
|
||||
let setAndCheck = setAndCheckVariable(panelWin, gVars);
|
||||
|
||||
checkVariableView(gVars, 0, {
|
||||
"type": "sine",
|
||||
"frequency": 440,
|
||||
"detune": 0
|
||||
}, "default loaded string");
|
||||
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[2]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS),
|
||||
checkVariableView(gVars, 0, {
|
||||
"gain": 0
|
||||
}, "default loaded number");
|
||||
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[1]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS),
|
||||
yield setAndCheck(0, "type", "square", "square", "sets string as string");
|
||||
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[2]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS),
|
||||
yield setAndCheck(0, "gain", "0.005", 0.005, "sets number as number");
|
||||
yield setAndCheck(0, "gain", "0.1", 0.1, "sets float as float");
|
||||
yield setAndCheck(0, "gain", ".2", 0.2, "sets float without leading zero as float");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
||||
function setAndCheckVariable(panelWin, gVars) {
|
||||
return Task.async(function* (varNum, prop, value, expected, desc) {
|
||||
yield modifyVariableView(panelWin, gVars, varNum, prop, value);
|
||||
var props = {};
|
||||
props[prop] = expected;
|
||||
checkVariableView(gVars, varNum, props, desc);
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that properties are not updated when modifying the VariablesView.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(COMPLEX_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
|
||||
let gVars = PropertiesView._propsView;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
getN(gFront, "create-node", 8),
|
||||
waitForGraphRendered(panelWin, 8, 8)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[3]));
|
||||
// Wait for the node to be set as well as the inspector to come fully into the view
|
||||
yield Promise.all([
|
||||
waitForInspectorRender(panelWin, EVENTS),
|
||||
once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED),
|
||||
]);
|
||||
|
||||
let errorEvent = once(panelWin, EVENTS.UI_SET_PARAM_ERROR);
|
||||
|
||||
try {
|
||||
yield modifyVariableView(panelWin, gVars, 0, "bufferSize", 2048);
|
||||
} catch (e) {
|
||||
// we except modifyVariableView to fail here, because bufferSize is not writable
|
||||
}
|
||||
|
||||
yield errorEvent;
|
||||
|
||||
checkVariableView(gVars, 0, {bufferSize: 4096}, "check that unwritable variable is not updated");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that params view correctly displays all properties for nodes
|
||||
* correctly, with default values and correct types.
|
||||
*/
|
||||
|
||||
var MEDIA_PERMISSION = "media.navigator.permission.disabled";
|
||||
|
||||
function waitForDeviceClosed() {
|
||||
info("Checking that getUserMedia streams are no longer in use.");
|
||||
|
||||
let temp = {};
|
||||
Cu.import("resource:///modules/webrtcUI.jsm", temp);
|
||||
let webrtcUI = temp.webrtcUI;
|
||||
|
||||
if (!webrtcUI.showGlobalIndicator)
|
||||
return Promise.resolve();
|
||||
|
||||
let deferred = Promise.defer();
|
||||
|
||||
const message = "webrtc:UpdateGlobalIndicators";
|
||||
let ppmm = Cc["@mozilla.org/parentprocessmessagemanager;1"]
|
||||
.getService(Ci.nsIMessageBroadcaster);
|
||||
ppmm.addMessageListener(message, function listener(aMessage) {
|
||||
info("Received " + message + " message");
|
||||
if (!aMessage.data.showGlobalIndicator) {
|
||||
ppmm.removeMessageListener(message, listener);
|
||||
deferred.resolve();
|
||||
}
|
||||
});
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(MEDIA_NODES_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
|
||||
let gVars = PropertiesView._propsView;
|
||||
|
||||
// Auto enable getUserMedia
|
||||
let mediaPermissionPref = Services.prefs.getBoolPref(MEDIA_PERMISSION);
|
||||
Services.prefs.setBoolPref(MEDIA_PERMISSION, true);
|
||||
|
||||
yield loadFrameScripts();
|
||||
|
||||
let events = Promise.all([
|
||||
getN(gFront, "create-node", 4),
|
||||
waitForGraphRendered(panelWin, 4, 0)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
let types = [
|
||||
"AudioDestinationNode", "MediaElementAudioSourceNode",
|
||||
"MediaStreamAudioSourceNode", "MediaStreamAudioDestinationNode"
|
||||
];
|
||||
|
||||
let defaults = yield Promise.all(types.map(type => nodeDefaultValues(type)));
|
||||
|
||||
for (let i = 0; i < types.length; i++) {
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[i]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS);
|
||||
checkVariableView(gVars, 0, defaults[i], types[i]);
|
||||
}
|
||||
|
||||
// Reset permissions on getUserMedia
|
||||
Services.prefs.setBoolPref(MEDIA_PERMISSION, mediaPermissionPref);
|
||||
|
||||
yield teardown(target);
|
||||
|
||||
yield waitForDeviceClosed();
|
||||
});
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that params view correctly displays non-primitive properties
|
||||
* like AudioBuffer and Float32Array in properties of AudioNodes.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(BUFFER_AND_ARRAY_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
|
||||
let gVars = PropertiesView._propsView;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
getN(gFront, "create-node", 3),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[2]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS);
|
||||
checkVariableView(gVars, 0, {
|
||||
"curve": "Float32Array"
|
||||
}, "WaveShaper's `curve` is listed as an `Float32Array`.");
|
||||
|
||||
let aVar = gVars.getScopeAtIndex(0).get("curve");
|
||||
let state = aVar.target.querySelector(".theme-twisty").hasAttribute("invisible");
|
||||
ok(state, "Float32Array property should not have a dropdown.");
|
||||
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[1]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS);
|
||||
checkVariableView(gVars, 0, {
|
||||
"buffer": "AudioBuffer"
|
||||
}, "AudioBufferSourceNode's `buffer` is listed as an `AudioBuffer`.");
|
||||
|
||||
aVar = gVars.getScopeAtIndex(0).get("buffer");
|
||||
state = aVar.target.querySelector(".theme-twisty").hasAttribute("invisible");
|
||||
ok(state, "AudioBuffer property should not have a dropdown.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that params view correctly displays all properties for nodes
|
||||
* correctly, with default values and correct types.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_NODES_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
|
||||
let gVars = PropertiesView._propsView;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
yield loadFrameScripts();
|
||||
|
||||
let events = Promise.all([
|
||||
getN(gFront, "create-node", 15),
|
||||
waitForGraphRendered(panelWin, 15, 0)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
let types = [
|
||||
"AudioDestinationNode", "AudioBufferSourceNode", "ScriptProcessorNode",
|
||||
"AnalyserNode", "GainNode", "DelayNode", "BiquadFilterNode", "WaveShaperNode",
|
||||
"PannerNode", "ConvolverNode", "ChannelSplitterNode", "ChannelMergerNode",
|
||||
"DynamicsCompressorNode", "OscillatorNode"
|
||||
];
|
||||
|
||||
let defaults = yield Promise.all(types.map(type => nodeDefaultValues(type)));
|
||||
|
||||
for (let i = 0; i < types.length; i++) {
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[i]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS);
|
||||
checkVariableView(gVars, 0, defaults[i], types[i]);
|
||||
}
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests that params view shows params when they exist, and are hidden otherwise.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, $$, EVENTS, PropertiesView } = panelWin;
|
||||
let gVars = PropertiesView._propsView;
|
||||
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
// Gain node
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[2]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS);
|
||||
|
||||
ok(isVisible($("#properties-content")), "Parameters shown when they exist.");
|
||||
ok(!isVisible($("#properties-empty")),
|
||||
"Empty message hidden when AudioParams exist.");
|
||||
|
||||
// Destination node
|
||||
click(panelWin, findGraphNode(panelWin, nodeIds[0]));
|
||||
yield waitForInspectorRender(panelWin, EVENTS);
|
||||
|
||||
ok(!isVisible($("#properties-content")),
|
||||
"Parameters hidden when they don't exist.");
|
||||
ok(isVisible($("#properties-empty")),
|
||||
"Empty message shown when no AudioParams exist.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
67
devtools/client/webaudioeditor/test/browser_wa_reset-01.js
Normal file
67
devtools/client/webaudioeditor/test/browser_wa_reset-01.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
//
|
||||
// Whitelisting this test.
|
||||
// As part of bug 1077403, the leaking uncaught rejection should be fixed.
|
||||
//
|
||||
thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Connection closed");
|
||||
|
||||
/**
|
||||
* Tests that reloading a tab will properly listen for the `start-context`
|
||||
* event and reshow the tools after reloading.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { gFront, $ } = panel.panelWin;
|
||||
|
||||
is($("#reload-notice").hidden, false,
|
||||
"The 'reload this page' notice should initially be visible.");
|
||||
is($("#waiting-notice").hidden, true,
|
||||
"The 'waiting for an audio context' notice should initially be hidden.");
|
||||
is($("#content").hidden, true,
|
||||
"The tool's content should initially be hidden.");
|
||||
|
||||
let navigating = once(target, "will-navigate");
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
reload(target);
|
||||
|
||||
yield navigating;
|
||||
|
||||
is($("#reload-notice").hidden, true,
|
||||
"The 'reload this page' notice should be hidden when navigating.");
|
||||
is($("#waiting-notice").hidden, false,
|
||||
"The 'waiting for an audio context' notice should be visible when navigating.");
|
||||
is($("#content").hidden, true,
|
||||
"The tool's content should still be hidden.");
|
||||
|
||||
yield started;
|
||||
|
||||
is($("#reload-notice").hidden, true,
|
||||
"The 'reload this page' notice should be hidden after context found.");
|
||||
is($("#waiting-notice").hidden, true,
|
||||
"The 'waiting for an audio context' notice should be hidden after context found.");
|
||||
is($("#content").hidden, false,
|
||||
"The tool's content should not be hidden anymore.");
|
||||
|
||||
navigating = once(target, "will-navigate");
|
||||
started = once(gFront, "start-context");
|
||||
|
||||
reload(target);
|
||||
|
||||
yield Promise.all([navigating, started]);
|
||||
let rendered = waitForGraphRendered(panel.panelWin, 3, 2);
|
||||
|
||||
is($("#reload-notice").hidden, true,
|
||||
"The 'reload this page' notice should be hidden after context found after reload.");
|
||||
is($("#waiting-notice").hidden, true,
|
||||
"The 'waiting for an audio context' notice should be hidden after context found after reload.");
|
||||
is($("#content").hidden, false,
|
||||
"The tool's content should reappear without closing and reopening the toolbox.");
|
||||
|
||||
yield rendered;
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
37
devtools/client/webaudioeditor/test/browser_wa_reset-02.js
Normal file
37
devtools/client/webaudioeditor/test/browser_wa_reset-02.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests reloading a tab with the tools open properly cleans up
|
||||
* the graph.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $ } = panelWin;
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
yield events;
|
||||
|
||||
let { nodes, edges } = countGraphObjects(panelWin);
|
||||
is(nodes, 3, "should only be 3 nodes.");
|
||||
is(edges, 2, "should only be 2 edges.");
|
||||
|
||||
events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
yield events;
|
||||
|
||||
({ nodes, edges } = countGraphObjects(panelWin));
|
||||
is(nodes, 3, "after reload, should only be 3 nodes.");
|
||||
is(edges, 2, "after reload, should only be 2 edges.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
48
devtools/client/webaudioeditor/test/browser_wa_reset-03.js
Normal file
48
devtools/client/webaudioeditor/test/browser_wa_reset-03.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Tests reloading a tab with the tools open properly cleans up
|
||||
* the inspector and selected node.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
|
||||
let { panelWin } = panel;
|
||||
let { gFront, $, InspectorView } = panelWin;
|
||||
|
||||
let events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
let [actors] = yield events;
|
||||
let nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
yield clickGraphNode(panelWin, nodeIds[1], true);
|
||||
ok(InspectorView.isVisible(), "InspectorView visible after selecting a node.");
|
||||
is(InspectorView.getCurrentAudioNode().id, nodeIds[1], "InspectorView has correct node set.");
|
||||
|
||||
/**
|
||||
* Reload
|
||||
*/
|
||||
|
||||
events = Promise.all([
|
||||
get3(gFront, "create-node"),
|
||||
waitForGraphRendered(panelWin, 3, 2)
|
||||
]);
|
||||
reload(target);
|
||||
[actors] = yield events;
|
||||
nodeIds = actors.map(actor => actor.actorID);
|
||||
|
||||
ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
|
||||
is(InspectorView.getCurrentAudioNode(), null,
|
||||
"InspectorView has no current node set on reset.");
|
||||
|
||||
yield clickGraphNode(panelWin, nodeIds[2], true);
|
||||
ok(InspectorView.isVisible(),
|
||||
"InspectorView visible after selecting a node after a reset.");
|
||||
is(InspectorView.getCurrentAudioNode().id, nodeIds[2], "InspectorView has correct node set upon clicking graph node after a reset.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
66
devtools/client/webaudioeditor/test/browser_wa_reset-04.js
Normal file
66
devtools/client/webaudioeditor/test/browser_wa_reset-04.js
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
//
|
||||
// Whitelisting this test.
|
||||
// As part of bug 1077403, the leaking uncaught rejection should be fixed.
|
||||
//
|
||||
thisTestLeaksUncaughtRejectionsAndShouldBeFixed("Error: Connection closed");
|
||||
|
||||
/**
|
||||
* Tests that switching to an iframe works fine.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
Services.prefs.setBoolPref("devtools.command-button-frames.enabled", true);
|
||||
|
||||
let { target, panel, toolbox } = yield initWebAudioEditor(IFRAME_CONTEXT_URL);
|
||||
let { gFront, $ } = panel.panelWin;
|
||||
|
||||
is($("#reload-notice").hidden, false,
|
||||
"The 'reload this page' notice should initially be visible.");
|
||||
is($("#waiting-notice").hidden, true,
|
||||
"The 'waiting for an audio context' notice should initially be hidden.");
|
||||
is($("#content").hidden, true,
|
||||
"The tool's content should initially be hidden.");
|
||||
|
||||
let btn = toolbox.doc.getElementById("command-button-frames");
|
||||
ok(!btn.firstChild, "The frame list button has no children");
|
||||
|
||||
// Open frame menu and wait till it's available on the screen.
|
||||
let menu = toolbox.showFramesMenu({target: btn});
|
||||
yield once(menu, "open");
|
||||
|
||||
let frames = menu.items;
|
||||
is(frames.length, 2, "We have both frames in the list");
|
||||
|
||||
// Select the iframe
|
||||
frames[1].click();
|
||||
|
||||
let navigating = once(target, "will-navigate");
|
||||
|
||||
yield navigating;
|
||||
|
||||
is($("#reload-notice").hidden, false,
|
||||
"The 'reload this page' notice should still be visible when switching to a frame.");
|
||||
is($("#waiting-notice").hidden, true,
|
||||
"The 'waiting for an audio context' notice should be kept hidden when switching to a frame.");
|
||||
is($("#content").hidden, true,
|
||||
"The tool's content should still be hidden.");
|
||||
|
||||
navigating = once(target, "will-navigate");
|
||||
let started = once(gFront, "start-context");
|
||||
|
||||
reload(target);
|
||||
|
||||
yield Promise.all([navigating, started]);
|
||||
|
||||
is($("#reload-notice").hidden, true,
|
||||
"The 'reload this page' notice should be hidden after reloading the frame.");
|
||||
is($("#waiting-notice").hidden, true,
|
||||
"The 'waiting for an audio context' notice should be hidden after reloading the frame.");
|
||||
is($("#content").hidden, false,
|
||||
"The tool's content should appear after reload.");
|
||||
|
||||
yield teardown(target);
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test that the WebAudioActor receives and emits the `automation-event` events
|
||||
* with correct arguments from the content.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(AUTOMATION_URL);
|
||||
let events = [];
|
||||
|
||||
let expected = [
|
||||
["setValueAtTime", 0.2, 0],
|
||||
["linearRampToValueAtTime", 1, 0.3],
|
||||
["exponentialRampToValueAtTime", 0.75, 0.6],
|
||||
["setValueCurveAtTime", [-1, 0, 1], 0.7, 0.3],
|
||||
];
|
||||
|
||||
front.on("automation-event", onAutomationEvent);
|
||||
|
||||
let [_, __, [destNode, oscNode, gainNode], [connect1, connect2]] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
once(front, "start-context"),
|
||||
get3(front, "create-node"),
|
||||
get2(front, "connect-node")
|
||||
]);
|
||||
|
||||
is(events.length, 4, "correct number of events fired");
|
||||
|
||||
function onAutomationEvent(e) {
|
||||
let { eventName, paramName, args } = e;
|
||||
let exp = expected[events.length];
|
||||
|
||||
is(eventName, exp[0], "correct eventName in event");
|
||||
is(paramName, "frequency", "correct paramName in event");
|
||||
is(args.length, exp.length - 1, "correct length in args");
|
||||
|
||||
args.forEach((a, i) => {
|
||||
// In the case of an array
|
||||
if (typeof a === "object") {
|
||||
a.forEach((f, j) => is(f, exp[i + 1][j], `correct argument in Float32Array: ${f}`));
|
||||
} else {
|
||||
is(a, exp[i + 1], `correct ${i + 1}th argument in args: ${a}`);
|
||||
}
|
||||
});
|
||||
events.push([eventName].concat(args));
|
||||
}
|
||||
|
||||
front.off("automation-event", onAutomationEvent);
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test the `connect-param` event on the web audio actor.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(CONNECT_PARAM_URL);
|
||||
let [, , [destNode, carrierNode, modNode, gainNode], , connectParam] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
once(front, "start-context"),
|
||||
getN(front, "create-node", 4),
|
||||
get2(front, "connect-node"),
|
||||
once(front, "connect-param")
|
||||
]);
|
||||
|
||||
info(connectParam);
|
||||
|
||||
is(connectParam.source.actorID, modNode.actorID, "`connect-param` has correct actor for `source`");
|
||||
is(connectParam.dest.actorID, gainNode.actorID, "`connect-param` has correct actor for `dest`");
|
||||
is(connectParam.param, "gain", "`connect-param` has correct parameter name for `param`");
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test `destroy-node` event on WebAudioActor.
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(DESTROY_NODES_URL);
|
||||
|
||||
let [, , created] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
once(front, "start-context"),
|
||||
// Should create dest, gain, and oscillator node and 10
|
||||
// disposable buffer nodes
|
||||
getN(front, "create-node", 13)
|
||||
]);
|
||||
|
||||
let waitUntilDestroyed = getN(front, "destroy-node", 10);
|
||||
|
||||
// Force CC so we can ensure it's run to clear out dead AudioNodes
|
||||
forceNodeCollection();
|
||||
|
||||
let destroyed = yield waitUntilDestroyed;
|
||||
|
||||
destroyed.forEach((node, i) => {
|
||||
ok(node.type, "AudioBufferSourceNode", "Only buffer nodes are destroyed");
|
||||
ok(actorIsInList(created, destroyed[i]),
|
||||
"`destroy-node` called only on AudioNodes in current document.");
|
||||
});
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
|
||||
function actorIsInList(list, actor) {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (list[i].actorID === actor.actorID)
|
||||
return list[i];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
/**
|
||||
* Test basic communication of Web Audio actor
|
||||
*/
|
||||
|
||||
add_task(function* () {
|
||||
let { target, front } = yield initBackend(SIMPLE_CONTEXT_URL);
|
||||
let [_, __, [destNode, oscNode, gainNode], [connect1, connect2]] = yield Promise.all([
|
||||
front.setup({ reload: true }),
|
||||
once(front, "start-context"),
|
||||
get3(front, "create-node"),
|
||||
get2(front, "connect-node")
|
||||
]);
|
||||
|
||||
is(destNode.type, "AudioDestinationNode", "WebAudioActor:create-node returns AudioNodeActor for AudioDestination");
|
||||
is(oscNode.type, "OscillatorNode", "WebAudioActor:create-node returns AudioNodeActor");
|
||||
is(gainNode.type, "GainNode", "WebAudioActor:create-node returns AudioNodeActor");
|
||||
|
||||
let { source, dest } = connect1;
|
||||
is(source.actorID, oscNode.actorID, "WebAudioActor:connect-node returns correct actor with ID on source (osc->gain)");
|
||||
is(dest.actorID, gainNode.actorID, "WebAudioActor:connect-node returns correct actor with ID on dest (osc->gain)");
|
||||
|
||||
({ source, dest } = connect2);
|
||||
is(source.actorID, gainNode.actorID, "WebAudioActor:connect-node returns correct actor with ID on source (gain->dest)");
|
||||
is(dest.actorID, destNode.actorID, "WebAudioActor:connect-node returns correct actor with ID on dest (gain->dest)");
|
||||
|
||||
yield removeTab(target.tab);
|
||||
});
|
||||
30
devtools/client/webaudioeditor/test/doc_automation.html
Normal file
30
devtools/client/webaudioeditor/test/doc_automation.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
let osc = ctx.createOscillator();
|
||||
let gain = ctx.createGain();
|
||||
gain.gain.value = 0;
|
||||
osc.frequency.setValueAtTime(0.2, 0);
|
||||
osc.frequency.linearRampToValueAtTime(1, 0.3);
|
||||
osc.frequency.exponentialRampToValueAtTime(0.75, 0.6);
|
||||
osc.frequency.setValueCurveAtTime(new Float32Array([-1, 0, 1]), 0.7, 0.3);
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(0);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let audioURL = "http://example.com/browser/devtools/client/webaudioeditor/test/440hz_sine.ogg";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
let bufferNode = ctx.createBufferSource();
|
||||
let shaperNode = ctx.createWaveShaper();
|
||||
shaperNode.curve = generateWaveShapingCurve();
|
||||
|
||||
let xhr = getBuffer(audioURL, () => {
|
||||
ctx.decodeAudioData(xhr.response, (buffer) => {
|
||||
bufferNode.buffer = buffer;
|
||||
bufferNode.connect(shaperNode);
|
||||
shaperNode.connect(ctx.destination);
|
||||
});
|
||||
});
|
||||
|
||||
function generateWaveShapingCurve() {
|
||||
let frames = 65536;
|
||||
let curve = new Float32Array(frames);
|
||||
let n = frames;
|
||||
let n2 = n / 2;
|
||||
|
||||
for (let i = 0; i < n; ++i) {
|
||||
let x = (i - n2) / n2;
|
||||
let y = Math.atan(5 * x) / (0.5 * Math.PI);
|
||||
}
|
||||
|
||||
return curve;
|
||||
}
|
||||
|
||||
function getBuffer (url, callback) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", url, true);
|
||||
xhr.responseType = "arraybuffer";
|
||||
xhr.onload = callback;
|
||||
xhr.send();
|
||||
return xhr;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
57
devtools/client/webaudioeditor/test/doc_bug_1112378.html
Normal file
57
devtools/client/webaudioeditor/test/doc_bug_1112378.html
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
let osc = ctx.createOscillator();
|
||||
|
||||
function throwError () {
|
||||
try {
|
||||
osc.connect({});
|
||||
} catch (e) {
|
||||
return {
|
||||
lineNumber: e.lineNumber,
|
||||
fileName: e.fileName,
|
||||
columnNumber: e.columnNumber,
|
||||
message: e.message,
|
||||
instanceof: e instanceof TypeError,
|
||||
stringified: e.toString(),
|
||||
name: e.name
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function throwDOMException () {
|
||||
try {
|
||||
osc.frequency.setValueAtTime(0, -1);
|
||||
} catch (e) {
|
||||
return {
|
||||
lineNumber: e.lineNumber,
|
||||
columnNumber: e.columnNumber,
|
||||
filename: e.filename,
|
||||
message: e.message,
|
||||
code: e.code,
|
||||
result: e.result,
|
||||
instanceof: e instanceof DOMException,
|
||||
stringified: e.toString(),
|
||||
name: e.name
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
23
devtools/client/webaudioeditor/test/doc_bug_1125817.html
Normal file
23
devtools/client/webaudioeditor/test/doc_bug_1125817.html
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
let osc = ctx.createOscillator();
|
||||
osc.frequency.value = 200;
|
||||
osc.disconnect();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
22
devtools/client/webaudioeditor/test/doc_bug_1130901.html
Normal file
22
devtools/client/webaudioeditor/test/doc_bug_1130901.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
ctx.createOscillator.call(ctx);
|
||||
ctx.createGain.apply(ctx, []);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
25
devtools/client/webaudioeditor/test/doc_bug_1141261.html
Normal file
25
devtools/client/webaudioeditor/test/doc_bug_1141261.html
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
let osc = ctx.createOscillator();
|
||||
let gain = ctx.createGain();
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
gain.disconnect();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
44
devtools/client/webaudioeditor/test/doc_complex-context.html
Normal file
44
devtools/client/webaudioeditor/test/doc_complex-context.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
/*
|
||||
↱ proc
|
||||
osc → gain →
|
||||
osc → gain → destination
|
||||
buffer →↳ filter →
|
||||
*/
|
||||
let ctx = new AudioContext();
|
||||
let osc1 = ctx.createOscillator();
|
||||
let gain1 = ctx.createGain();
|
||||
let proc = ctx.createScriptProcessor();
|
||||
osc1.connect(gain1);
|
||||
osc1.connect(proc);
|
||||
gain1.connect(ctx.destination);
|
||||
|
||||
let osc2 = ctx.createOscillator();
|
||||
let gain2 = ctx.createGain();
|
||||
osc2.connect(gain2);
|
||||
gain2.connect(ctx.destination);
|
||||
|
||||
let buf = ctx.createBufferSource();
|
||||
let filter = ctx.createBiquadFilter();
|
||||
buf.connect(filter);
|
||||
osc2.connect(filter);
|
||||
filter.connect(ctx.destination);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
let carrier = ctx.createOscillator();
|
||||
let gain = ctx.createGain();
|
||||
let modulator = ctx.createOscillator();
|
||||
let modulator2 = ctx.createOscillator();
|
||||
carrier.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
modulator.connect(gain.gain);
|
||||
modulator2.connect(carrier.frequency);
|
||||
modulator2.connect(carrier.detune);
|
||||
modulator.start(0);
|
||||
modulator2.start(0);
|
||||
carrier.start(0);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
28
devtools/client/webaudioeditor/test/doc_connect-param.html
Normal file
28
devtools/client/webaudioeditor/test/doc_connect-param.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
let carrier = ctx.createOscillator();
|
||||
let modulator = ctx.createOscillator();
|
||||
let gain = ctx.createGain();
|
||||
carrier.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
modulator.connect(gain.gain);
|
||||
modulator.start(0);
|
||||
carrier.start(0);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
36
devtools/client/webaudioeditor/test/doc_destroy-nodes.html
Normal file
36
devtools/client/webaudioeditor/test/doc_destroy-nodes.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
// Keep the nodes we want to GC alive until we are ready for them to
|
||||
// be collected. We will zero this reference by force from the devtools
|
||||
// side.
|
||||
var keepAlive = [];
|
||||
(function () {
|
||||
let ctx = new AudioContext();
|
||||
let osc = ctx.createOscillator();
|
||||
let gain = ctx.createGain();
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
keepAlive.push(ctx.createBufferSource());
|
||||
}
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
gain.gain.value = 0;
|
||||
osc.start();
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
14
devtools/client/webaudioeditor/test/doc_iframe-context.html
Normal file
14
devtools/client/webaudioeditor/test/doc_iframe-context.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page with an iframe</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<iframe id="frame" src="doc_simple-context.html" />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
let audio = new Audio();
|
||||
let meNode, msNode, mdNode;
|
||||
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia;
|
||||
|
||||
navigator.getUserMedia({ audio: true, fake: true }, stream => {
|
||||
meNode = ctx.createMediaElementSource(audio);
|
||||
msNode = ctx.createMediaStreamSource(stream);
|
||||
mdNode = ctx.createMediaStreamDestination();
|
||||
}, () => {});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
33
devtools/client/webaudioeditor/test/doc_simple-context.html
Normal file
33
devtools/client/webaudioeditor/test/doc_simple-context.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
let osc = ctx.createOscillator();
|
||||
let gain = ctx.createGain();
|
||||
gain.gain.value = 0;
|
||||
|
||||
// Connect multiple times to test that it's disregarded.
|
||||
osc.connect(gain);
|
||||
gain.connect(ctx.destination);
|
||||
gain.connect(ctx.destination);
|
||||
gain.connect(ctx.destination);
|
||||
gain.connect(ctx.destination);
|
||||
gain.connect(ctx.destination);
|
||||
gain.connect(ctx.destination);
|
||||
osc.start(0);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!-- Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ -->
|
||||
<!doctype html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Web Audio Editor test page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script type="text/javascript;version=1.8">
|
||||
"use strict";
|
||||
|
||||
let ctx = new AudioContext();
|
||||
let NODE_CREATION_METHODS = [
|
||||
"createBufferSource", "createScriptProcessor", "createAnalyser",
|
||||
"createGain", "createDelay", "createBiquadFilter", "createWaveShaper",
|
||||
"createPanner", "createConvolver", "createChannelSplitter", "createChannelMerger",
|
||||
"createDynamicsCompressor", "createOscillator", "createStereoPanner"
|
||||
];
|
||||
let nodes = NODE_CREATION_METHODS.map(method => ctx[method]());
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
556
devtools/client/webaudioeditor/test/head.js
Normal file
556
devtools/client/webaudioeditor/test/head.js
Normal file
|
|
@ -0,0 +1,556 @@
|
|||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
"use strict";
|
||||
|
||||
var { classes: Cc, interfaces: Ci, utils: Cu, results: Cr } = Components;
|
||||
|
||||
var { require } = Cu.import("resource://devtools/shared/Loader.jsm", {});
|
||||
var { Task } = require("devtools/shared/task");
|
||||
var Services = require("Services");
|
||||
var { gDevTools } = require("devtools/client/framework/devtools");
|
||||
var { TargetFactory } = require("devtools/client/framework/target");
|
||||
var { DebuggerServer } = require("devtools/server/main");
|
||||
var { generateUUID } = Cc["@mozilla.org/uuid-generator;1"].getService(Ci.nsIUUIDGenerator);
|
||||
|
||||
var Promise = require("promise");
|
||||
var Services = require("Services");
|
||||
var { WebAudioFront } = require("devtools/shared/fronts/webaudio");
|
||||
var DevToolsUtils = require("devtools/shared/DevToolsUtils");
|
||||
var flags = require("devtools/shared/flags");
|
||||
var audioNodes = require("devtools/server/actors/utils/audionodes.json");
|
||||
var mm = null;
|
||||
|
||||
const FRAME_SCRIPT_UTILS_URL = "chrome://devtools/content/shared/frame-script-utils.js";
|
||||
const EXAMPLE_URL = "http://example.com/browser/devtools/client/webaudioeditor/test/";
|
||||
const SIMPLE_CONTEXT_URL = EXAMPLE_URL + "doc_simple-context.html";
|
||||
const COMPLEX_CONTEXT_URL = EXAMPLE_URL + "doc_complex-context.html";
|
||||
const SIMPLE_NODES_URL = EXAMPLE_URL + "doc_simple-node-creation.html";
|
||||
const MEDIA_NODES_URL = EXAMPLE_URL + "doc_media-node-creation.html";
|
||||
const BUFFER_AND_ARRAY_URL = EXAMPLE_URL + "doc_buffer-and-array.html";
|
||||
const DESTROY_NODES_URL = EXAMPLE_URL + "doc_destroy-nodes.html";
|
||||
const CONNECT_PARAM_URL = EXAMPLE_URL + "doc_connect-param.html";
|
||||
const CONNECT_MULTI_PARAM_URL = EXAMPLE_URL + "doc_connect-multi-param.html";
|
||||
const IFRAME_CONTEXT_URL = EXAMPLE_URL + "doc_iframe-context.html";
|
||||
const AUTOMATION_URL = EXAMPLE_URL + "doc_automation.html";
|
||||
|
||||
// Enable logging for all the tests. Both the debugger server and frontend will
|
||||
// be affected by this pref.
|
||||
var gEnableLogging = Services.prefs.getBoolPref("devtools.debugger.log");
|
||||
Services.prefs.setBoolPref("devtools.debugger.log", false);
|
||||
|
||||
// All tests are asynchronous.
|
||||
waitForExplicitFinish();
|
||||
|
||||
var gToolEnabled = Services.prefs.getBoolPref("devtools.webaudioeditor.enabled");
|
||||
|
||||
flags.testing = true;
|
||||
|
||||
registerCleanupFunction(() => {
|
||||
flags.testing = false;
|
||||
info("finish() was called, cleaning up...");
|
||||
Services.prefs.setBoolPref("devtools.debugger.log", gEnableLogging);
|
||||
Services.prefs.setBoolPref("devtools.webaudioeditor.enabled", gToolEnabled);
|
||||
Cu.forceGC();
|
||||
});
|
||||
|
||||
/**
|
||||
* Call manually in tests that use frame script utils after initializing
|
||||
* the web audio editor. Call after init but before navigating to a different page.
|
||||
*/
|
||||
function loadFrameScripts() {
|
||||
mm = gBrowser.selectedBrowser.messageManager;
|
||||
mm.loadFrameScript(FRAME_SCRIPT_UTILS_URL, false);
|
||||
}
|
||||
|
||||
function addTab(aUrl, aWindow) {
|
||||
info("Adding tab: " + aUrl);
|
||||
|
||||
let deferred = Promise.defer();
|
||||
let targetWindow = aWindow || window;
|
||||
let targetBrowser = targetWindow.gBrowser;
|
||||
|
||||
targetWindow.focus();
|
||||
let tab = targetBrowser.selectedTab = targetBrowser.addTab(aUrl);
|
||||
let linkedBrowser = tab.linkedBrowser;
|
||||
|
||||
BrowserTestUtils.browserLoaded(linkedBrowser).then(function () {
|
||||
info("Tab added and finished loading: " + aUrl);
|
||||
deferred.resolve(tab);
|
||||
});
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function removeTab(aTab, aWindow) {
|
||||
info("Removing tab.");
|
||||
|
||||
let deferred = Promise.defer();
|
||||
let targetWindow = aWindow || window;
|
||||
let targetBrowser = targetWindow.gBrowser;
|
||||
let tabContainer = targetBrowser.tabContainer;
|
||||
|
||||
tabContainer.addEventListener("TabClose", function onClose(aEvent) {
|
||||
tabContainer.removeEventListener("TabClose", onClose, false);
|
||||
info("Tab removed and finished closing.");
|
||||
deferred.resolve();
|
||||
}, false);
|
||||
|
||||
targetBrowser.removeTab(aTab);
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function once(aTarget, aEventName, aUseCapture = false) {
|
||||
info("Waiting for event: '" + aEventName + "' on " + aTarget + ".");
|
||||
|
||||
let deferred = Promise.defer();
|
||||
|
||||
for (let [add, remove] of [
|
||||
["on", "off"], // Use event emitter before DOM events for consistency
|
||||
["addEventListener", "removeEventListener"],
|
||||
["addListener", "removeListener"]
|
||||
]) {
|
||||
if ((add in aTarget) && (remove in aTarget)) {
|
||||
aTarget[add](aEventName, function onEvent(...aArgs) {
|
||||
aTarget[remove](aEventName, onEvent, aUseCapture);
|
||||
info("Got event: '" + aEventName + "' on " + aTarget + ".");
|
||||
deferred.resolve(...aArgs);
|
||||
}, aUseCapture);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function reload(aTarget, aWaitForTargetEvent = "navigate") {
|
||||
aTarget.activeTab.reload();
|
||||
return once(aTarget, aWaitForTargetEvent);
|
||||
}
|
||||
|
||||
function navigate(aTarget, aUrl, aWaitForTargetEvent = "navigate") {
|
||||
executeSoon(() => aTarget.activeTab.navigateTo(aUrl));
|
||||
return once(aTarget, aWaitForTargetEvent);
|
||||
}
|
||||
|
||||
/**
|
||||
* Call manually in tests that use frame script utils after initializing
|
||||
* the shader editor. Call after init but before navigating to different pages.
|
||||
*/
|
||||
function loadFrameScripts() {
|
||||
mm = gBrowser.selectedBrowser.messageManager;
|
||||
mm.loadFrameScript(FRAME_SCRIPT_UTILS_URL, false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a new tab, and instantiate a WebAudiFront object.
|
||||
* This requires calling removeTab before the test ends.
|
||||
*/
|
||||
function initBackend(aUrl) {
|
||||
info("Initializing a web audio editor front.");
|
||||
|
||||
if (!DebuggerServer.initialized) {
|
||||
DebuggerServer.init();
|
||||
DebuggerServer.addBrowserActors();
|
||||
}
|
||||
|
||||
return Task.spawn(function* () {
|
||||
let tab = yield addTab(aUrl);
|
||||
let target = TargetFactory.forTab(tab);
|
||||
|
||||
yield target.makeRemote();
|
||||
|
||||
let front = new WebAudioFront(target.client, target.form);
|
||||
return { target, front };
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a new tab, and open the toolbox for that tab, selecting the audio editor
|
||||
* panel.
|
||||
* This requires calling teardown before the test ends.
|
||||
*/
|
||||
function initWebAudioEditor(aUrl) {
|
||||
info("Initializing a web audio editor pane.");
|
||||
|
||||
return Task.spawn(function* () {
|
||||
let tab = yield addTab(aUrl);
|
||||
let target = TargetFactory.forTab(tab);
|
||||
|
||||
yield target.makeRemote();
|
||||
|
||||
Services.prefs.setBoolPref("devtools.webaudioeditor.enabled", true);
|
||||
let toolbox = yield gDevTools.showToolbox(target, "webaudioeditor");
|
||||
let panel = toolbox.getCurrentPanel();
|
||||
return { target, panel, toolbox };
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the toolbox, destroying all panels, and remove the added test tabs.
|
||||
*/
|
||||
function teardown(aTarget) {
|
||||
info("Destroying the web audio editor.");
|
||||
|
||||
return gDevTools.closeToolbox(aTarget).then(() => {
|
||||
while (gBrowser.tabs.length > 1) {
|
||||
gBrowser.removeCurrentTab();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Due to web audio will fire most events synchronously back-to-back,
|
||||
// and we can't yield them in a chain without missing actors, this allows
|
||||
// us to listen for `n` events and return a promise resolving to them.
|
||||
//
|
||||
// Takes a `front` object that is an event emitter, the number of
|
||||
// programs that should be listened to and waited on, and an optional
|
||||
// `onAdd` function that calls with the entire actors array on program link
|
||||
function getN(front, eventName, count, spread) {
|
||||
let actors = [];
|
||||
let deferred = Promise.defer();
|
||||
info(`Waiting for ${count} ${eventName} events`);
|
||||
front.on(eventName, function onEvent(...args) {
|
||||
let actor = args[0];
|
||||
if (actors.length !== count) {
|
||||
actors.push(spread ? args : actor);
|
||||
}
|
||||
info(`Got ${actors.length} / ${count} ${eventName} events`);
|
||||
if (actors.length === count) {
|
||||
front.off(eventName, onEvent);
|
||||
deferred.resolve(actors);
|
||||
}
|
||||
});
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function get(front, eventName) { return getN(front, eventName, 1); }
|
||||
function get2(front, eventName) { return getN(front, eventName, 2); }
|
||||
function get3(front, eventName) { return getN(front, eventName, 3); }
|
||||
function getSpread(front, eventName) { return getN(front, eventName, 1, true); }
|
||||
function get2Spread(front, eventName) { return getN(front, eventName, 2, true); }
|
||||
function get3Spread(front, eventName) { return getN(front, eventName, 3, true); }
|
||||
function getNSpread(front, eventName, count) { return getN(front, eventName, count, true); }
|
||||
|
||||
/**
|
||||
* Waits for the UI_GRAPH_RENDERED event to fire, but only
|
||||
* resolves when the graph was rendered with the correct count of
|
||||
* nodes and edges.
|
||||
*/
|
||||
function waitForGraphRendered(front, nodeCount, edgeCount, paramEdgeCount) {
|
||||
let deferred = Promise.defer();
|
||||
let eventName = front.EVENTS.UI_GRAPH_RENDERED;
|
||||
info(`Wait for graph rendered with ${nodeCount} nodes, ${edgeCount} edges`);
|
||||
front.on(eventName, function onGraphRendered(_, nodes, edges, pEdges) {
|
||||
let paramEdgesDone = paramEdgeCount != null ? paramEdgeCount === pEdges : true;
|
||||
info(`Got graph rendered with ${nodes} / ${nodeCount} nodes, ` +
|
||||
`${edges} / ${edgeCount} edges`);
|
||||
if (nodes === nodeCount && edges === edgeCount && paramEdgesDone) {
|
||||
front.off(eventName, onGraphRendered);
|
||||
deferred.resolve();
|
||||
}
|
||||
});
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function checkVariableView(view, index, hash, description = "") {
|
||||
info("Checking Variable View");
|
||||
let scope = view.getScopeAtIndex(index);
|
||||
let variables = Object.keys(hash);
|
||||
|
||||
// If node shouldn't display any properties, ensure that the 'empty' message is
|
||||
// visible
|
||||
if (!variables.length) {
|
||||
ok(isVisible(scope.window.$("#properties-empty")),
|
||||
description + " should show the empty properties tab.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, iterate over expected properties
|
||||
variables.forEach(variable => {
|
||||
let aVar = scope.get(variable);
|
||||
is(aVar.target.querySelector(".name").getAttribute("value"), variable,
|
||||
"Correct property name for " + variable);
|
||||
let value = aVar.target.querySelector(".value").getAttribute("value");
|
||||
|
||||
// Cast value with JSON.parse if possible;
|
||||
// will fail when displaying Object types like "ArrayBuffer"
|
||||
// and "Float32Array", but will match the original value.
|
||||
try {
|
||||
value = JSON.parse(value);
|
||||
}
|
||||
catch (e) {}
|
||||
if (typeof hash[variable] === "function") {
|
||||
ok(hash[variable](value),
|
||||
"Passing property value of " + value + " for " + variable + " " + description);
|
||||
}
|
||||
else {
|
||||
is(value, hash[variable],
|
||||
"Correct property value of " + hash[variable] + " for " + variable + " " + description);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function modifyVariableView(win, view, index, prop, value) {
|
||||
let deferred = Promise.defer();
|
||||
let scope = view.getScopeAtIndex(index);
|
||||
let aVar = scope.get(prop);
|
||||
scope.expand();
|
||||
|
||||
win.on(win.EVENTS.UI_SET_PARAM, handleSetting);
|
||||
win.on(win.EVENTS.UI_SET_PARAM_ERROR, handleSetting);
|
||||
|
||||
// Focus and select the variable to begin editing
|
||||
win.focus();
|
||||
aVar.focus();
|
||||
EventUtils.sendKey("RETURN", win);
|
||||
|
||||
// Must wait for the scope DOM to be available to receive
|
||||
// events
|
||||
executeSoon(() => {
|
||||
info("Setting " + value + " for " + prop + "....");
|
||||
for (let c of (value + "")) {
|
||||
EventUtils.synthesizeKey(c, {}, win);
|
||||
}
|
||||
EventUtils.sendKey("RETURN", win);
|
||||
});
|
||||
|
||||
function handleSetting(eventName) {
|
||||
win.off(win.EVENTS.UI_SET_PARAM, handleSetting);
|
||||
win.off(win.EVENTS.UI_SET_PARAM_ERROR, handleSetting);
|
||||
if (eventName === win.EVENTS.UI_SET_PARAM)
|
||||
deferred.resolve();
|
||||
if (eventName === win.EVENTS.UI_SET_PARAM_ERROR)
|
||||
deferred.reject();
|
||||
}
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function findGraphEdge(win, source, target, param) {
|
||||
let selector = ".edgePaths .edgePath[data-source='" + source + "'][data-target='" + target + "']";
|
||||
if (param) {
|
||||
selector += "[data-param='" + param + "']";
|
||||
}
|
||||
return win.document.querySelector(selector);
|
||||
}
|
||||
|
||||
function findGraphNode(win, node) {
|
||||
let selector = ".nodes > g[data-id='" + node + "']";
|
||||
return win.document.querySelector(selector);
|
||||
}
|
||||
|
||||
function click(win, element) {
|
||||
EventUtils.sendMouseEvent({ type: "click" }, element, win);
|
||||
}
|
||||
|
||||
function mouseOver(win, element) {
|
||||
EventUtils.sendMouseEvent({ type: "mouseover" }, element, win);
|
||||
}
|
||||
|
||||
function command(button) {
|
||||
let ev = button.ownerDocument.createEvent("XULCommandEvent");
|
||||
ev.initCommandEvent("command", true, true, button.ownerDocument.defaultView, 0, false, false, false, false, null);
|
||||
button.dispatchEvent(ev);
|
||||
}
|
||||
|
||||
function isVisible(element) {
|
||||
return !element.getAttribute("hidden");
|
||||
}
|
||||
|
||||
/**
|
||||
* Used in debugging, returns a promise that resolves in `n` milliseconds.
|
||||
*/
|
||||
function wait(n) {
|
||||
let { promise, resolve } = Promise.defer();
|
||||
setTimeout(resolve, n);
|
||||
info("Waiting " + n / 1000 + " seconds.");
|
||||
return promise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clicks a graph node based on actorID or passing in an element.
|
||||
* Returns a promise that resolves once UI_INSPECTOR_NODE_SET is fired and
|
||||
* the tabs have rendered, completing all RDP requests for the node.
|
||||
*/
|
||||
function clickGraphNode(panelWin, el, waitForToggle = false) {
|
||||
let { promise, resolve } = Promise.defer();
|
||||
let promises = [
|
||||
once(panelWin, panelWin.EVENTS.UI_INSPECTOR_NODE_SET),
|
||||
once(panelWin, panelWin.EVENTS.UI_PROPERTIES_TAB_RENDERED),
|
||||
once(panelWin, panelWin.EVENTS.UI_AUTOMATION_TAB_RENDERED)
|
||||
];
|
||||
|
||||
if (waitForToggle) {
|
||||
promises.push(once(panelWin, panelWin.EVENTS.UI_INSPECTOR_TOGGLED));
|
||||
}
|
||||
|
||||
// Use `el` as the element if it is one, otherwise
|
||||
// assume it's an ID and find the related graph node
|
||||
let element = el.tagName ? el : findGraphNode(panelWin, el);
|
||||
click(panelWin, element);
|
||||
|
||||
return Promise.all(promises);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the primitive value of a grip's value, or the
|
||||
* original form that the string grip.type comes from.
|
||||
*/
|
||||
function getGripValue(value) {
|
||||
if (~["boolean", "string", "number"].indexOf(typeof value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
switch (value.type) {
|
||||
case "undefined": return undefined;
|
||||
case "Infinity": return Infinity;
|
||||
case "-Infinity": return -Infinity;
|
||||
case "NaN": return NaN;
|
||||
case "-0": return -0;
|
||||
case "null": return null;
|
||||
default: return value;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Counts how many nodes and edges are currently in the graph.
|
||||
*/
|
||||
function countGraphObjects(win) {
|
||||
return {
|
||||
nodes: win.document.querySelectorAll(".nodes > .audionode").length,
|
||||
edges: win.document.querySelectorAll(".edgePaths > .edgePath").length
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Forces cycle collection and GC, used in AudioNode destruction tests.
|
||||
*/
|
||||
function forceNodeCollection() {
|
||||
ContentTask.spawn(gBrowser.selectedBrowser, {}, function*() {
|
||||
// Kill the reference keeping stuff alive.
|
||||
content.wrappedJSObject.keepAlive = null;
|
||||
|
||||
// Collect the now-deceased nodes.
|
||||
Cu.forceGC();
|
||||
Cu.forceCC();
|
||||
Cu.forceGC();
|
||||
Cu.forceCC();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Takes a `values` array of automation value entries,
|
||||
* looking for the value at `time` seconds, checking
|
||||
* to see if the value is close to `expected`.
|
||||
*/
|
||||
function checkAutomationValue(values, time, expected) {
|
||||
// Remain flexible on values as we can approximate points
|
||||
let EPSILON = 0.01;
|
||||
|
||||
let value = getValueAt(values, time);
|
||||
ok(Math.abs(value - expected) < EPSILON, "Timeline value at " + time + " with value " + value + " should have value very close to " + expected);
|
||||
|
||||
/**
|
||||
* Entries are ordered in `values` according to time, so if we can't find an exact point
|
||||
* on a time of interest, return the point in between the threshold. This should
|
||||
* get us a very close value.
|
||||
*/
|
||||
function getValueAt(values, time) {
|
||||
for (let i = 0; i < values.length; i++) {
|
||||
if (values[i].delta === time) {
|
||||
return values[i].value;
|
||||
}
|
||||
if (values[i].delta > time) {
|
||||
return (values[i - 1].value + values[i].value) / 2;
|
||||
}
|
||||
}
|
||||
return values[values.length - 1].value;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Wait for all inspector tabs to complete rendering.
|
||||
*/
|
||||
function waitForInspectorRender(panelWin, EVENTS) {
|
||||
return Promise.all([
|
||||
once(panelWin, EVENTS.UI_PROPERTIES_TAB_RENDERED),
|
||||
once(panelWin, EVENTS.UI_AUTOMATION_TAB_RENDERED)
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Takes a string `script` and evaluates it directly in the content
|
||||
* in potentially a different process.
|
||||
*/
|
||||
function evalInDebuggee(script) {
|
||||
let deferred = Promise.defer();
|
||||
|
||||
if (!mm) {
|
||||
throw new Error("`loadFrameScripts()` must be called when using MessageManager.");
|
||||
}
|
||||
|
||||
let id = generateUUID().toString();
|
||||
mm.sendAsyncMessage("devtools:test:eval", { script: script, id: id });
|
||||
mm.addMessageListener("devtools:test:eval:response", handler);
|
||||
|
||||
function handler({ data }) {
|
||||
if (id !== data.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
mm.removeMessageListener("devtools:test:eval:response", handler);
|
||||
deferred.resolve(data.value);
|
||||
}
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
/**
|
||||
* Takes an AudioNode type and returns it's properties (from audionode.json)
|
||||
* as keys and their default values as keys
|
||||
*/
|
||||
function nodeDefaultValues(nodeName) {
|
||||
let fn = NODE_CONSTRUCTORS[nodeName];
|
||||
|
||||
if (typeof fn === "undefined") return {};
|
||||
|
||||
let init = nodeName === "AudioDestinationNode" ? "destination" : `create${fn}()`;
|
||||
|
||||
let definition = JSON.stringify(audioNodes[nodeName].properties);
|
||||
|
||||
let evalNode = evalInDebuggee(`
|
||||
let ins = (new AudioContext()).${init};
|
||||
let props = ${definition};
|
||||
let answer = {};
|
||||
|
||||
for(let k in props) {
|
||||
if (props[k].param) {
|
||||
answer[k] = ins[k].defaultValue;
|
||||
} else if (typeof ins[k] === "object" && ins[k] !== null) {
|
||||
answer[k] = ins[k].toString().slice(8, -1);
|
||||
} else {
|
||||
answer[k] = ins[k];
|
||||
}
|
||||
}
|
||||
answer;`);
|
||||
|
||||
return evalNode;
|
||||
}
|
||||
|
||||
const NODE_CONSTRUCTORS = {
|
||||
"MediaStreamAudioDestinationNode": "MediaStreamDestination",
|
||||
"AudioBufferSourceNode": "BufferSource",
|
||||
"ScriptProcessorNode": "ScriptProcessor",
|
||||
"AnalyserNode": "Analyser",
|
||||
"GainNode": "Gain",
|
||||
"DelayNode": "Delay",
|
||||
"BiquadFilterNode": "BiquadFilter",
|
||||
"WaveShaperNode": "WaveShaper",
|
||||
"PannerNode": "Panner",
|
||||
"ConvolverNode": "Convolver",
|
||||
"ChannelSplitterNode": "ChannelSplitter",
|
||||
"ChannelMergerNode": "ChannelMerger",
|
||||
"DynamicsCompressorNode": "DynamicsCompressor",
|
||||
"OscillatorNode": "Oscillator",
|
||||
"StereoPannerNode": "StereoPanner"
|
||||
};
|
||||
159
devtools/client/webaudioeditor/views/automation.js
Normal file
159
devtools/client/webaudioeditor/views/automation.js
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Functions handling the audio node inspector UI.
|
||||
*/
|
||||
|
||||
var AutomationView = {
|
||||
|
||||
/**
|
||||
* Initialization function called when the tool starts up.
|
||||
*/
|
||||
initialize: function () {
|
||||
this._buttons = $("#automation-param-toolbar-buttons");
|
||||
this.graph = new LineGraphWidget($("#automation-graph"), { avg: false });
|
||||
this.graph.selectionEnabled = false;
|
||||
|
||||
this._onButtonClick = this._onButtonClick.bind(this);
|
||||
this._onNodeSet = this._onNodeSet.bind(this);
|
||||
this._onResize = this._onResize.bind(this);
|
||||
|
||||
this._buttons.addEventListener("click", this._onButtonClick);
|
||||
window.on(EVENTS.UI_INSPECTOR_RESIZE, this._onResize);
|
||||
window.on(EVENTS.UI_INSPECTOR_NODE_SET, this._onNodeSet);
|
||||
},
|
||||
|
||||
/**
|
||||
* Destruction function called when the tool cleans up.
|
||||
*/
|
||||
destroy: function () {
|
||||
this._buttons.removeEventListener("click", this._onButtonClick);
|
||||
window.off(EVENTS.UI_INSPECTOR_RESIZE, this._onResize);
|
||||
window.off(EVENTS.UI_INSPECTOR_NODE_SET, this._onNodeSet);
|
||||
},
|
||||
|
||||
/**
|
||||
* Empties out the props view.
|
||||
*/
|
||||
resetUI: function () {
|
||||
this._currentNode = null;
|
||||
},
|
||||
|
||||
/**
|
||||
* On a new node selection, create the Automation panel for
|
||||
* that specific node.
|
||||
*/
|
||||
build: Task.async(function* () {
|
||||
let node = this._currentNode;
|
||||
|
||||
let props = yield node.getParams();
|
||||
let params = props.filter(({ flags }) => flags && flags.param);
|
||||
|
||||
this._createParamButtons(params);
|
||||
|
||||
this._selectedParamName = params[0] ? params[0].param : null;
|
||||
this.render();
|
||||
}),
|
||||
|
||||
/**
|
||||
* Renders the graph for specified `paramName`. Called when
|
||||
* the parameter view is changed, or when new param data events
|
||||
* are fired for the currently specified param.
|
||||
*/
|
||||
render: Task.async(function* () {
|
||||
let node = this._currentNode;
|
||||
let paramName = this._selectedParamName;
|
||||
// Escape if either node or parameter name does not exist.
|
||||
if (!node || !paramName) {
|
||||
this._setState("no-params");
|
||||
window.emit(EVENTS.UI_AUTOMATION_TAB_RENDERED, null);
|
||||
return;
|
||||
}
|
||||
|
||||
let { values, events } = yield node.getAutomationData(paramName);
|
||||
this._setState(events.length ? "show" : "no-events");
|
||||
yield this.graph.setDataWhenReady(values);
|
||||
window.emit(EVENTS.UI_AUTOMATION_TAB_RENDERED, node.id);
|
||||
}),
|
||||
|
||||
/**
|
||||
* Create the buttons for each AudioParam, that when clicked,
|
||||
* render the graph for that AudioParam.
|
||||
*/
|
||||
_createParamButtons: function (params) {
|
||||
this._buttons.innerHTML = "";
|
||||
params.forEach((param, i) => {
|
||||
let button = document.createElement("toolbarbutton");
|
||||
button.setAttribute("class", "devtools-toolbarbutton automation-param-button");
|
||||
button.setAttribute("data-param", param.param);
|
||||
// Set label to the parameter name, should not be L10N'd
|
||||
button.setAttribute("label", param.param);
|
||||
|
||||
// If first button, set to 'selected' for styling
|
||||
if (i === 0) {
|
||||
button.setAttribute("selected", true);
|
||||
}
|
||||
|
||||
this._buttons.appendChild(button);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Internally sets the current audio node and rebuilds appropriate
|
||||
* views.
|
||||
*/
|
||||
_setAudioNode: function (node) {
|
||||
this._currentNode = node;
|
||||
if (this._currentNode) {
|
||||
this.build();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggles the subviews to display messages whether or not
|
||||
* the audio node has no AudioParams, no automation events, or
|
||||
* shows the graph.
|
||||
*/
|
||||
_setState: function (state) {
|
||||
let contentView = $("#automation-content");
|
||||
let emptyView = $("#automation-empty");
|
||||
|
||||
let graphView = $("#automation-graph-container");
|
||||
let noEventsView = $("#automation-no-events");
|
||||
|
||||
contentView.hidden = state === "no-params";
|
||||
emptyView.hidden = state !== "no-params";
|
||||
|
||||
graphView.hidden = state !== "show";
|
||||
noEventsView.hidden = state !== "no-events";
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handlers
|
||||
*/
|
||||
|
||||
_onButtonClick: function (e) {
|
||||
Array.forEach($$(".automation-param-button"), $btn => $btn.removeAttribute("selected"));
|
||||
let paramName = e.target.getAttribute("data-param");
|
||||
e.target.setAttribute("selected", true);
|
||||
this._selectedParamName = paramName;
|
||||
this.render();
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the inspector is resized.
|
||||
*/
|
||||
_onResize: function () {
|
||||
this.graph.refresh();
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the inspector view determines a node is selected.
|
||||
*/
|
||||
_onNodeSet: function (_, id) {
|
||||
this._setAudioNode(id != null ? gAudioNodes.get(id) : null);
|
||||
}
|
||||
};
|
||||
314
devtools/client/webaudioeditor/views/context.js
Normal file
314
devtools/client/webaudioeditor/views/context.js
Normal file
|
|
@ -0,0 +1,314 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
"use strict";
|
||||
|
||||
/* import-globals-from ../includes.js */
|
||||
|
||||
const { debounce } = require("sdk/lang/functional");
|
||||
const flags = require("devtools/shared/flags");
|
||||
|
||||
// Globals for d3 stuff
|
||||
// Default properties of the graph on rerender
|
||||
const GRAPH_DEFAULTS = {
|
||||
translate: [20, 20],
|
||||
scale: 1
|
||||
};
|
||||
|
||||
// Sizes of SVG arrows in graph
|
||||
const ARROW_HEIGHT = 5;
|
||||
const ARROW_WIDTH = 8;
|
||||
|
||||
// Styles for markers as they cannot be done with CSS.
|
||||
const MARKER_STYLING = {
|
||||
light: "#AAA",
|
||||
dark: "#CED3D9"
|
||||
};
|
||||
Object.defineProperty(this, "MARKER_STYLING", {
|
||||
value: MARKER_STYLING,
|
||||
enumerable: true,
|
||||
writable: false
|
||||
});
|
||||
|
||||
const GRAPH_DEBOUNCE_TIMER = 100;
|
||||
|
||||
// `gAudioNodes` events that should require the graph
|
||||
// to redraw
|
||||
const GRAPH_REDRAW_EVENTS = ["add", "connect", "disconnect", "remove"];
|
||||
|
||||
/**
|
||||
* Functions handling the graph UI.
|
||||
*/
|
||||
var ContextView = {
|
||||
/**
|
||||
* Initialization function, called when the tool is started.
|
||||
*/
|
||||
initialize: function () {
|
||||
this._onGraphClick = this._onGraphClick.bind(this);
|
||||
this._onThemeChange = this._onThemeChange.bind(this);
|
||||
this._onStartContext = this._onStartContext.bind(this);
|
||||
this._onEvent = this._onEvent.bind(this);
|
||||
|
||||
this.draw = debounce(this.draw.bind(this), GRAPH_DEBOUNCE_TIMER);
|
||||
$("#graph-target").addEventListener("click", this._onGraphClick, false);
|
||||
|
||||
window.on(EVENTS.THEME_CHANGE, this._onThemeChange);
|
||||
window.on(EVENTS.START_CONTEXT, this._onStartContext);
|
||||
gAudioNodes.on("*", this._onEvent);
|
||||
},
|
||||
|
||||
/**
|
||||
* Destruction function, called when the tool is closed.
|
||||
*/
|
||||
destroy: function () {
|
||||
// If the graph was rendered at all, then the handler
|
||||
// for zooming in will be set. We must remove it to prevent leaks.
|
||||
if (this._zoomBinding) {
|
||||
this._zoomBinding.on("zoom", null);
|
||||
}
|
||||
$("#graph-target").removeEventListener("click", this._onGraphClick, false);
|
||||
|
||||
window.off(EVENTS.THEME_CHANGE, this._onThemeChange);
|
||||
window.off(EVENTS.START_CONTEXT, this._onStartContext);
|
||||
gAudioNodes.off("*", this._onEvent);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when a page is reloaded and waiting for a "start-context" event
|
||||
* and clears out old content
|
||||
*/
|
||||
resetUI: function () {
|
||||
this.clearGraph();
|
||||
this.resetGraphTransform();
|
||||
},
|
||||
|
||||
/**
|
||||
* Clears out the rendered graph, called when resetting the SVG elements to draw again,
|
||||
* or when resetting the entire UI tool
|
||||
*/
|
||||
clearGraph: function () {
|
||||
$("#graph-target").innerHTML = "";
|
||||
},
|
||||
|
||||
/**
|
||||
* Moves the graph back to its original scale and translation.
|
||||
*/
|
||||
resetGraphTransform: function () {
|
||||
// Only reset if the graph was ever drawn.
|
||||
if (this._zoomBinding) {
|
||||
let { translate, scale } = GRAPH_DEFAULTS;
|
||||
// Must set the `zoomBinding` so the next `zoom` event is in sync with
|
||||
// where the graph is visually (set by the `transform` attribute).
|
||||
this._zoomBinding.scale(scale);
|
||||
this._zoomBinding.translate(translate);
|
||||
d3.select("#graph-target")
|
||||
.attr("transform", "translate(" + translate + ") scale(" + scale + ")");
|
||||
}
|
||||
},
|
||||
|
||||
getCurrentScale: function () {
|
||||
return this._zoomBinding ? this._zoomBinding.scale() : null;
|
||||
},
|
||||
|
||||
getCurrentTranslation: function () {
|
||||
return this._zoomBinding ? this._zoomBinding.translate() : null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Makes the corresponding graph node appear "focused", removing
|
||||
* focused styles from all other nodes. If no `actorID` specified,
|
||||
* make all nodes appear unselected.
|
||||
*/
|
||||
focusNode: function (actorID) {
|
||||
// Remove class "selected" from all nodes
|
||||
Array.forEach($$(".nodes > g"), $node => $node.classList.remove("selected"));
|
||||
// Add to "selected"
|
||||
if (actorID) {
|
||||
this._getNodeByID(actorID).classList.add("selected");
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Takes an actorID and returns the corresponding DOM SVG element in the graph
|
||||
*/
|
||||
_getNodeByID: function (actorID) {
|
||||
return $(".nodes > g[data-id='" + actorID + "']");
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the appropriate class on an SVG node when its bypass
|
||||
* status is toggled.
|
||||
*/
|
||||
_bypassNode: function (node, enabled) {
|
||||
let el = this._getNodeByID(node.id);
|
||||
el.classList[enabled ? "add" : "remove"]("bypassed");
|
||||
},
|
||||
|
||||
/**
|
||||
* This method renders the nodes currently available in `gAudioNodes` and is
|
||||
* throttled to be called at most every `GRAPH_DEBOUNCE_TIMER` milliseconds.
|
||||
* It's called whenever the audio context routing changes, after being debounced.
|
||||
*/
|
||||
draw: function () {
|
||||
// Clear out previous SVG information
|
||||
this.clearGraph();
|
||||
|
||||
let graph = new dagreD3.Digraph();
|
||||
let renderer = new dagreD3.Renderer();
|
||||
gAudioNodes.populateGraph(graph);
|
||||
|
||||
// Post-render manipulation of the nodes
|
||||
let oldDrawNodes = renderer.drawNodes();
|
||||
renderer.drawNodes(function (graph, root) {
|
||||
let svgNodes = oldDrawNodes(graph, root);
|
||||
svgNodes.each(function (n) {
|
||||
let node = graph.node(n);
|
||||
let classString = "audionode type-" + node.type + (node.bypassed ? " bypassed" : "");
|
||||
this.setAttribute("class", classString);
|
||||
this.setAttribute("data-id", node.id);
|
||||
this.setAttribute("data-type", node.type);
|
||||
});
|
||||
return svgNodes;
|
||||
});
|
||||
|
||||
// Post-render manipulation of edges
|
||||
let oldDrawEdgePaths = renderer.drawEdgePaths();
|
||||
let defaultClasses = "edgePath enter";
|
||||
|
||||
renderer.drawEdgePaths(function (graph, root) {
|
||||
let svgEdges = oldDrawEdgePaths(graph, root);
|
||||
svgEdges.each(function (e) {
|
||||
let edge = graph.edge(e);
|
||||
|
||||
// We have to manually specify the default classes on the edges
|
||||
// as to not overwrite them
|
||||
let edgeClass = defaultClasses + (edge.param ? (" param-connection " + edge.param) : "");
|
||||
|
||||
this.setAttribute("data-source", edge.source);
|
||||
this.setAttribute("data-target", edge.target);
|
||||
this.setAttribute("data-param", edge.param ? edge.param : null);
|
||||
this.setAttribute("class", edgeClass);
|
||||
});
|
||||
|
||||
return svgEdges;
|
||||
});
|
||||
|
||||
// Override Dagre-d3's post render function by passing in our own.
|
||||
// This way we can leave styles out of it.
|
||||
renderer.postRender((graph, root) => {
|
||||
// We have to manually set the marker styling since we cannot
|
||||
// do this currently with CSS, although it is in spec for SVG2
|
||||
// https://svgwg.org/svg2-draft/painting.html#VertexMarkerProperties
|
||||
// For now, manually set it on creation, and the `_onThemeChange`
|
||||
// function will fire when the devtools theme changes to update the
|
||||
// styling manually.
|
||||
let theme = Services.prefs.getCharPref("devtools.theme");
|
||||
let markerColor = MARKER_STYLING[theme];
|
||||
if (graph.isDirected() && root.select("#arrowhead").empty()) {
|
||||
root
|
||||
.append("svg:defs")
|
||||
.append("svg:marker")
|
||||
.attr("id", "arrowhead")
|
||||
.attr("viewBox", "0 0 10 10")
|
||||
.attr("refX", ARROW_WIDTH)
|
||||
.attr("refY", ARROW_HEIGHT)
|
||||
.attr("markerUnits", "strokewidth")
|
||||
.attr("markerWidth", ARROW_WIDTH)
|
||||
.attr("markerHeight", ARROW_HEIGHT)
|
||||
.attr("orient", "auto")
|
||||
.attr("style", "fill: " + markerColor)
|
||||
.append("svg:path")
|
||||
.attr("d", "M 0 0 L 10 5 L 0 10 z");
|
||||
}
|
||||
|
||||
// Reselect the previously selected audio node
|
||||
let currentNode = InspectorView.getCurrentAudioNode();
|
||||
if (currentNode) {
|
||||
this.focusNode(currentNode.id);
|
||||
}
|
||||
|
||||
// Fire an event upon completed rendering, with extra information
|
||||
// if in testing mode only.
|
||||
let info = {};
|
||||
if (flags.testing) {
|
||||
info = gAudioNodes.getInfo();
|
||||
}
|
||||
window.emit(EVENTS.UI_GRAPH_RENDERED, info.nodes, info.edges, info.paramEdges);
|
||||
});
|
||||
|
||||
let layout = dagreD3.layout().rankDir("LR");
|
||||
renderer.layout(layout).run(graph, d3.select("#graph-target"));
|
||||
|
||||
// Handle the sliding and zooming of the graph,
|
||||
// store as `this._zoomBinding` so we can unbind during destruction
|
||||
if (!this._zoomBinding) {
|
||||
this._zoomBinding = d3.behavior.zoom().on("zoom", function () {
|
||||
var ev = d3.event;
|
||||
d3.select("#graph-target")
|
||||
.attr("transform", "translate(" + ev.translate + ") scale(" + ev.scale + ")");
|
||||
});
|
||||
d3.select("svg").call(this._zoomBinding);
|
||||
|
||||
// Set initial translation and scale -- this puts D3's awareness of
|
||||
// the graph in sync with what the user sees originally.
|
||||
this.resetGraphTransform();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handlers
|
||||
*/
|
||||
|
||||
/**
|
||||
* Called once "start-context" is fired, indicating that there is an audio
|
||||
* context being created to view so render the graph.
|
||||
*/
|
||||
_onStartContext: function () {
|
||||
this.draw();
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when `gAudioNodes` fires an event -- most events (listed
|
||||
* in GRAPH_REDRAW_EVENTS) qualify as a redraw event.
|
||||
*/
|
||||
_onEvent: function (eventName, ...args) {
|
||||
// If bypassing, just toggle the class on the SVG node
|
||||
// rather than rerendering everything
|
||||
if (eventName === "bypass") {
|
||||
this._bypassNode.apply(this, args);
|
||||
}
|
||||
if (~GRAPH_REDRAW_EVENTS.indexOf(eventName)) {
|
||||
this.draw();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Fired when the devtools theme changes.
|
||||
*/
|
||||
_onThemeChange: function (eventName, theme) {
|
||||
let markerColor = MARKER_STYLING[theme];
|
||||
let marker = $("#arrowhead");
|
||||
if (marker) {
|
||||
marker.setAttribute("style", "fill: " + markerColor);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Fired when a click occurs in the graph.
|
||||
*
|
||||
* @param Event e
|
||||
* Click event.
|
||||
*/
|
||||
_onGraphClick: function (e) {
|
||||
let node = findGraphNodeParent(e.target);
|
||||
// If node not found (clicking outside of an audio node in the graph),
|
||||
// then ignore this event
|
||||
if (!node)
|
||||
return;
|
||||
|
||||
let id = node.getAttribute("data-id");
|
||||
|
||||
this.focusNode(id);
|
||||
window.emit(EVENTS.UI_SELECT_NODE, id);
|
||||
}
|
||||
};
|
||||
189
devtools/client/webaudioeditor/views/inspector.js
Normal file
189
devtools/client/webaudioeditor/views/inspector.js
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
"use strict";
|
||||
|
||||
/* import-globals-from ../includes.js */
|
||||
|
||||
const MIN_INSPECTOR_WIDTH = 300;
|
||||
|
||||
// Strings for rendering
|
||||
const EXPAND_INSPECTOR_STRING = L10N.getStr("expandInspector");
|
||||
const COLLAPSE_INSPECTOR_STRING = L10N.getStr("collapseInspector");
|
||||
|
||||
/**
|
||||
* Functions handling the audio node inspector UI.
|
||||
*/
|
||||
|
||||
var InspectorView = {
|
||||
_currentNode: null,
|
||||
|
||||
// Set up config for view toggling
|
||||
_collapseString: COLLAPSE_INSPECTOR_STRING,
|
||||
_expandString: EXPAND_INSPECTOR_STRING,
|
||||
_toggleEvent: EVENTS.UI_INSPECTOR_TOGGLED,
|
||||
_animated: true,
|
||||
_delayed: true,
|
||||
|
||||
/**
|
||||
* Initialization function called when the tool starts up.
|
||||
*/
|
||||
initialize: function () {
|
||||
// Set up view controller
|
||||
this.el = $("#web-audio-inspector");
|
||||
this.splitter = $("#inspector-splitter");
|
||||
this.el.setAttribute("width", Services.prefs.getIntPref("devtools.webaudioeditor.inspectorWidth"));
|
||||
this.button = $("#inspector-pane-toggle");
|
||||
mixin(this, ToggleMixin);
|
||||
this.bindToggle();
|
||||
|
||||
// Hide inspector view on startup
|
||||
this.hideImmediately();
|
||||
|
||||
this._onNodeSelect = this._onNodeSelect.bind(this);
|
||||
this._onDestroyNode = this._onDestroyNode.bind(this);
|
||||
this._onResize = this._onResize.bind(this);
|
||||
this._onCommandClick = this._onCommandClick.bind(this);
|
||||
|
||||
this.splitter.addEventListener("mouseup", this._onResize);
|
||||
for (let $el of $$("#audio-node-toolbar toolbarbutton")) {
|
||||
$el.addEventListener("command", this._onCommandClick);
|
||||
}
|
||||
window.on(EVENTS.UI_SELECT_NODE, this._onNodeSelect);
|
||||
gAudioNodes.on("remove", this._onDestroyNode);
|
||||
},
|
||||
|
||||
/**
|
||||
* Destruction function called when the tool cleans up.
|
||||
*/
|
||||
destroy: function () {
|
||||
this.unbindToggle();
|
||||
this.splitter.removeEventListener("mouseup", this._onResize);
|
||||
|
||||
$("#audio-node-toolbar toolbarbutton").removeEventListener("command", this._onCommandClick);
|
||||
for (let $el of $$("#audio-node-toolbar toolbarbutton")) {
|
||||
$el.removeEventListener("command", this._onCommandClick);
|
||||
}
|
||||
window.off(EVENTS.UI_SELECT_NODE, this._onNodeSelect);
|
||||
gAudioNodes.off("remove", this._onDestroyNode);
|
||||
|
||||
this.el = null;
|
||||
this.button = null;
|
||||
this.splitter = null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Takes a AudioNodeView `node` and sets it as the current
|
||||
* node and scaffolds the inspector view based off of the new node.
|
||||
*/
|
||||
setCurrentAudioNode: Task.async(function* (node) {
|
||||
this._currentNode = node || null;
|
||||
|
||||
// If no node selected, set the inspector back to "no AudioNode selected"
|
||||
// view.
|
||||
if (!node) {
|
||||
$("#web-audio-editor-details-pane-empty").removeAttribute("hidden");
|
||||
$("#web-audio-editor-tabs").setAttribute("hidden", "true");
|
||||
window.emit(EVENTS.UI_INSPECTOR_NODE_SET, null);
|
||||
}
|
||||
// Otherwise load up the tabs view and hide the empty placeholder
|
||||
else {
|
||||
$("#web-audio-editor-details-pane-empty").setAttribute("hidden", "true");
|
||||
$("#web-audio-editor-tabs").removeAttribute("hidden");
|
||||
this._buildToolbar();
|
||||
window.emit(EVENTS.UI_INSPECTOR_NODE_SET, this._currentNode.id);
|
||||
}
|
||||
}),
|
||||
|
||||
/**
|
||||
* Returns the current AudioNodeView.
|
||||
*/
|
||||
getCurrentAudioNode: function () {
|
||||
return this._currentNode;
|
||||
},
|
||||
|
||||
/**
|
||||
* Empties out the props view.
|
||||
*/
|
||||
resetUI: function () {
|
||||
// Set current node to empty to load empty view
|
||||
this.setCurrentAudioNode();
|
||||
|
||||
// Reset AudioNode inspector and hide
|
||||
this.hideImmediately();
|
||||
},
|
||||
|
||||
_buildToolbar: function () {
|
||||
let node = this.getCurrentAudioNode();
|
||||
|
||||
let bypassable = node.bypassable;
|
||||
let bypassed = node.isBypassed();
|
||||
let button = $("#audio-node-toolbar .bypass");
|
||||
|
||||
if (!bypassable) {
|
||||
button.setAttribute("disabled", true);
|
||||
} else {
|
||||
button.removeAttribute("disabled");
|
||||
}
|
||||
|
||||
if (!bypassable || bypassed) {
|
||||
button.removeAttribute("checked");
|
||||
} else {
|
||||
button.setAttribute("checked", true);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handlers
|
||||
*/
|
||||
|
||||
/**
|
||||
* Called on EVENTS.UI_SELECT_NODE, and takes an actorID `id`
|
||||
* and calls `setCurrentAudioNode` to scaffold the inspector view.
|
||||
*/
|
||||
_onNodeSelect: function (_, id) {
|
||||
this.setCurrentAudioNode(gAudioNodes.get(id));
|
||||
|
||||
// Ensure inspector is visible when selecting a new node
|
||||
this.show();
|
||||
},
|
||||
|
||||
_onResize: function () {
|
||||
if (this.el.getAttribute("width") < MIN_INSPECTOR_WIDTH) {
|
||||
this.el.setAttribute("width", MIN_INSPECTOR_WIDTH);
|
||||
}
|
||||
Services.prefs.setIntPref("devtools.webaudioeditor.inspectorWidth", this.el.getAttribute("width"));
|
||||
window.emit(EVENTS.UI_INSPECTOR_RESIZE);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when `DESTROY_NODE` is fired to remove the node from props view if
|
||||
* it's currently selected.
|
||||
*/
|
||||
_onDestroyNode: function (node) {
|
||||
if (this._currentNode && this._currentNode.id === node.id) {
|
||||
this.setCurrentAudioNode(null);
|
||||
}
|
||||
},
|
||||
|
||||
_onCommandClick: function (e) {
|
||||
let node = this.getCurrentAudioNode();
|
||||
let button = e.target;
|
||||
let command = button.getAttribute("data-command");
|
||||
let checked = button.getAttribute("checked");
|
||||
|
||||
if (button.getAttribute("disabled")) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (command === "bypass") {
|
||||
if (checked) {
|
||||
button.removeAttribute("checked");
|
||||
node.bypass(true);
|
||||
} else {
|
||||
button.setAttribute("checked", true);
|
||||
node.bypass(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
163
devtools/client/webaudioeditor/views/properties.js
Normal file
163
devtools/client/webaudioeditor/views/properties.js
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
"use strict";
|
||||
|
||||
const { VariablesView } = require("resource://devtools/client/shared/widgets/VariablesView.jsm");
|
||||
|
||||
const GENERIC_VARIABLES_VIEW_SETTINGS = {
|
||||
searchEnabled: false,
|
||||
editableValueTooltip: "",
|
||||
editableNameTooltip: "",
|
||||
preventDisableOnChange: true,
|
||||
preventDescriptorModifiers: false,
|
||||
eval: () => {}
|
||||
};
|
||||
|
||||
/**
|
||||
* Functions handling the audio node inspector UI.
|
||||
*/
|
||||
|
||||
var PropertiesView = {
|
||||
|
||||
/**
|
||||
* Initialization function called when the tool starts up.
|
||||
*/
|
||||
initialize: function () {
|
||||
this._onEval = this._onEval.bind(this);
|
||||
this._onNodeSet = this._onNodeSet.bind(this);
|
||||
|
||||
window.on(EVENTS.UI_INSPECTOR_NODE_SET, this._onNodeSet);
|
||||
this._propsView = new VariablesView($("#properties-content"), GENERIC_VARIABLES_VIEW_SETTINGS);
|
||||
this._propsView.eval = this._onEval;
|
||||
},
|
||||
|
||||
/**
|
||||
* Destruction function called when the tool cleans up.
|
||||
*/
|
||||
destroy: function () {
|
||||
window.off(EVENTS.UI_INSPECTOR_NODE_SET, this._onNodeSet);
|
||||
this._propsView = null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Empties out the props view.
|
||||
*/
|
||||
resetUI: function () {
|
||||
this._propsView.empty();
|
||||
this._currentNode = null;
|
||||
},
|
||||
|
||||
/**
|
||||
* Internally sets the current audio node and rebuilds appropriate
|
||||
* views.
|
||||
*/
|
||||
_setAudioNode: function (node) {
|
||||
this._currentNode = node;
|
||||
if (this._currentNode) {
|
||||
this._buildPropertiesView();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Reconstructs the `Properties` tab in the inspector
|
||||
* with the `this._currentNode` as it's source.
|
||||
*/
|
||||
_buildPropertiesView: Task.async(function* () {
|
||||
let propsView = this._propsView;
|
||||
let node = this._currentNode;
|
||||
propsView.empty();
|
||||
|
||||
let audioParamsScope = propsView.addScope("AudioParams");
|
||||
let props = yield node.getParams();
|
||||
|
||||
// Disable AudioParams VariableView expansion
|
||||
// when there are no props i.e. AudioDestinationNode
|
||||
this._togglePropertiesView(!!props.length);
|
||||
|
||||
props.forEach(({ param, value, flags }) => {
|
||||
let descriptor = {
|
||||
value: value,
|
||||
writable: !flags || !flags.readonly,
|
||||
};
|
||||
let item = audioParamsScope.addItem(param, descriptor);
|
||||
|
||||
// No items should currently display a dropdown
|
||||
item.twisty = false;
|
||||
});
|
||||
|
||||
audioParamsScope.expanded = true;
|
||||
|
||||
window.emit(EVENTS.UI_PROPERTIES_TAB_RENDERED, node.id);
|
||||
}),
|
||||
|
||||
/**
|
||||
* Toggles the display of the "empty" properties view when
|
||||
* node has no properties to display.
|
||||
*/
|
||||
_togglePropertiesView: function (show) {
|
||||
let propsView = $("#properties-content");
|
||||
let emptyView = $("#properties-empty");
|
||||
(show ? propsView : emptyView).removeAttribute("hidden");
|
||||
(show ? emptyView : propsView).setAttribute("hidden", "true");
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the scope for AudioParams in the
|
||||
* VariablesView.
|
||||
*
|
||||
* @return Scope
|
||||
*/
|
||||
_getAudioPropertiesScope: function () {
|
||||
return this._propsView.getScopeAtIndex(0);
|
||||
},
|
||||
|
||||
/**
|
||||
* Event handlers
|
||||
*/
|
||||
|
||||
/**
|
||||
* Called when the inspector view determines a node is selected.
|
||||
*/
|
||||
_onNodeSet: function (_, id) {
|
||||
this._setAudioNode(gAudioNodes.get(id));
|
||||
},
|
||||
|
||||
/**
|
||||
* Executed when an audio prop is changed in the UI.
|
||||
*/
|
||||
_onEval: Task.async(function* (variable, value) {
|
||||
let ownerScope = variable.ownerView;
|
||||
let node = this._currentNode;
|
||||
let propName = variable.name;
|
||||
let error;
|
||||
|
||||
if (!variable._initialDescriptor.writable) {
|
||||
error = new Error("Variable " + propName + " is not writable.");
|
||||
} else {
|
||||
// Cast value to proper type
|
||||
try {
|
||||
let number = parseFloat(value);
|
||||
if (!isNaN(number)) {
|
||||
value = number;
|
||||
} else {
|
||||
value = JSON.parse(value);
|
||||
}
|
||||
error = yield node.actor.setParam(propName, value);
|
||||
}
|
||||
catch (e) {
|
||||
error = e;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO figure out how to handle and display set prop errors
|
||||
// and enable `test/brorwser_wa_properties-view-edit.js`
|
||||
// Bug 994258
|
||||
if (!error) {
|
||||
ownerScope.get(propName).setGrip(value);
|
||||
window.emit(EVENTS.UI_SET_PARAM, node.id, propName, value);
|
||||
} else {
|
||||
window.emit(EVENTS.UI_SET_PARAM_ERROR, node.id, propName, value);
|
||||
}
|
||||
})
|
||||
};
|
||||
103
devtools/client/webaudioeditor/views/utils.js
Normal file
103
devtools/client/webaudioeditor/views/utils.js
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
|
||||
* You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* Takes an element in an SVG graph and iterates over
|
||||
* ancestors until it finds the graph node container. If not found,
|
||||
* returns null.
|
||||
*/
|
||||
|
||||
function findGraphNodeParent(el) {
|
||||
// Some targets may not contain `classList` property
|
||||
if (!el.classList)
|
||||
return null;
|
||||
|
||||
while (!el.classList.contains("nodes")) {
|
||||
if (el.classList.contains("audionode"))
|
||||
return el;
|
||||
else
|
||||
el = el.parentNode;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Object for use with `mix` into a view.
|
||||
* Must have the following properties defined on the view:
|
||||
* - `el`
|
||||
* - `button`
|
||||
* - `_collapseString`
|
||||
* - `_expandString`
|
||||
* - `_toggleEvent`
|
||||
*
|
||||
* Optional properties on the view can be defined to specify default
|
||||
* visibility options.
|
||||
* - `_animated`
|
||||
* - `_delayed`
|
||||
*/
|
||||
var ToggleMixin = {
|
||||
|
||||
bindToggle: function () {
|
||||
this._onToggle = this._onToggle.bind(this);
|
||||
this.button.addEventListener("mousedown", this._onToggle, false);
|
||||
},
|
||||
|
||||
unbindToggle: function () {
|
||||
this.button.removeEventListener("mousedown", this._onToggle);
|
||||
},
|
||||
|
||||
show: function () {
|
||||
this._viewController({ visible: true });
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
this._viewController({ visible: false });
|
||||
},
|
||||
|
||||
hideImmediately: function () {
|
||||
this._viewController({ visible: false, delayed: false, animated: false });
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a boolean indicating whether or not the view.
|
||||
* is currently being shown.
|
||||
*/
|
||||
isVisible: function () {
|
||||
return !this.el.classList.contains("pane-collapsed");
|
||||
},
|
||||
|
||||
/**
|
||||
* Toggles the visibility of the view.
|
||||
*
|
||||
* @param object visible
|
||||
* - visible: boolean indicating whether the panel should be shown or not
|
||||
* - animated: boolean indiciating whether the pane should be animated
|
||||
* - delayed: boolean indicating whether the pane's opening should wait
|
||||
* a few cycles or not
|
||||
*/
|
||||
_viewController: function ({ visible, animated, delayed }) {
|
||||
let flags = {
|
||||
visible: visible,
|
||||
animated: animated != null ? animated : !!this._animated,
|
||||
delayed: delayed != null ? delayed : !!this._delayed,
|
||||
callback: () => window.emit(this._toggleEvent, visible)
|
||||
};
|
||||
|
||||
ViewHelpers.togglePane(flags, this.el);
|
||||
|
||||
if (flags.visible) {
|
||||
this.button.classList.remove("pane-collapsed");
|
||||
this.button.setAttribute("tooltiptext", this._collapseString);
|
||||
}
|
||||
else {
|
||||
this.button.classList.add("pane-collapsed");
|
||||
this.button.setAttribute("tooltiptext", this._expandString);
|
||||
}
|
||||
},
|
||||
|
||||
_onToggle: function () {
|
||||
this._viewController({ visible: !this.isVisible() });
|
||||
}
|
||||
};
|
||||
141
devtools/client/webaudioeditor/webaudioeditor.xul
Normal file
141
devtools/client/webaudioeditor/webaudioeditor.xul
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<?xml version="1.0"?>
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://devtools/skin/webaudioeditor.css" type="text/css"?>
|
||||
<!DOCTYPE window [
|
||||
<!ENTITY % debuggerDTD SYSTEM "chrome://devtools/locale/webaudioeditor.dtd">
|
||||
%debuggerDTD;
|
||||
]>
|
||||
|
||||
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
|
||||
|
||||
<script type="application/javascript;version=1.8"
|
||||
src="chrome://devtools/content/shared/theme-switching.js"/>
|
||||
|
||||
<script type="application/javascript" src="chrome://devtools/content/shared/vendor/d3.js"/>
|
||||
<script type="application/javascript" src="chrome://devtools/content/shared/vendor/dagre-d3.js"/>
|
||||
<script type="application/javascript" src="includes.js"/>
|
||||
<script type="application/javascript" src="models.js"/>
|
||||
<script type="application/javascript" src="controller.js"/>
|
||||
<script type="application/javascript" src="views/utils.js"/>
|
||||
<script type="application/javascript" src="views/context.js"/>
|
||||
<script type="application/javascript" src="views/inspector.js"/>
|
||||
<script type="application/javascript" src="views/properties.js"/>
|
||||
<script type="application/javascript" src="views/automation.js"/>
|
||||
|
||||
<vbox class="theme-body" flex="1">
|
||||
<hbox id="reload-notice"
|
||||
class="notice-container"
|
||||
align="center"
|
||||
pack="center"
|
||||
flex="1">
|
||||
<button id="requests-menu-reload-notice-button"
|
||||
class="devtools-toolbarbutton"
|
||||
standalone="true"
|
||||
label="&webAudioEditorUI.reloadNotice1;"
|
||||
oncommand="gFront.setup({ reload: true });"/>
|
||||
<label id="requests-menu-reload-notice-label"
|
||||
class="plain"
|
||||
value="&webAudioEditorUI.reloadNotice2;"/>
|
||||
</hbox>
|
||||
<hbox id="waiting-notice"
|
||||
class="notice-container devtools-throbber"
|
||||
align="center"
|
||||
pack="center"
|
||||
flex="1"
|
||||
hidden="true">
|
||||
<label id="requests-menu-waiting-notice-label"
|
||||
class="plain"
|
||||
value="&webAudioEditorUI.emptyNotice;"/>
|
||||
</hbox>
|
||||
|
||||
<vbox id="content"
|
||||
flex="1"
|
||||
hidden="true">
|
||||
<toolbar id="web-audio-toolbar" class="devtools-toolbar">
|
||||
<spacer flex="1"></spacer>
|
||||
<toolbarbutton id="inspector-pane-toggle" class="devtools-toolbarbutton"
|
||||
tabindex="0"/>
|
||||
</toolbar>
|
||||
<splitter class="devtools-horizontal-splitter"/>
|
||||
<box id="web-audio-content-pane"
|
||||
class="devtools-responsive-container"
|
||||
flex="1">
|
||||
<hbox flex="1">
|
||||
<box id="web-audio-graph" flex="1">
|
||||
<vbox flex="1">
|
||||
<svg id="graph-svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g id="graph-target" transform="translate(20,20)"/>
|
||||
</svg>
|
||||
</vbox>
|
||||
</box>
|
||||
</hbox>
|
||||
<splitter id="inspector-splitter" class="devtools-side-splitter"/>
|
||||
<vbox id="web-audio-inspector" hidden="true">
|
||||
<deck id="web-audio-editor-details-pane" flex="1">
|
||||
<vbox id="web-audio-editor-details-pane-empty" flex="1">
|
||||
<label value="&webAudioEditorUI.inspectorEmpty;"></label>
|
||||
</vbox>
|
||||
<tabbox id="web-audio-editor-tabs"
|
||||
class="devtools-sidebar-tabs"
|
||||
handleCtrlTab="false">
|
||||
<toolbar id="audio-node-toolbar" class="devtools-toolbar">
|
||||
<hbox class="devtools-toolbarbutton-group">
|
||||
<toolbarbutton class="bypass devtools-toolbarbutton"
|
||||
data-command="bypass"
|
||||
tabindex="0"/>
|
||||
</hbox>
|
||||
</toolbar>
|
||||
<tabs>
|
||||
<tab id="properties-tab"
|
||||
label="&webAudioEditorUI.tab.properties2;"/>
|
||||
<!-- bug 1134036
|
||||
<tab id="automation-tab"
|
||||
label="&webAudioEditorUI.tab.automation;"/>
|
||||
-->
|
||||
</tabs>
|
||||
<tabpanels flex="1">
|
||||
<!-- Properties Panel -->
|
||||
<tabpanel id="properties-tabpanel"
|
||||
class="tabpanel-content">
|
||||
<vbox id="properties-content" flex="1" hidden="true">
|
||||
</vbox>
|
||||
<vbox id="properties-empty" flex="1" hidden="true">
|
||||
<label value="&webAudioEditorUI.propertiesEmpty;"></label>
|
||||
</vbox>
|
||||
</tabpanel>
|
||||
|
||||
<!-- Automation Panel -->
|
||||
<tabpanel id="automation-tabpanel"
|
||||
class="tabpanel-content">
|
||||
<vbox id="automation-content" flex="1" hidden="true">
|
||||
<toolbar id="automation-param-toolbar" class="devtools-toolbar">
|
||||
<hbox id="automation-param-toolbar-buttons" class="devtools-toolbarbutton-group">
|
||||
</hbox>
|
||||
</toolbar>
|
||||
<box id="automation-graph-container" flex="1">
|
||||
<canvas id="automation-graph"></canvas>
|
||||
</box>
|
||||
<vbox id="automation-no-events" flex="1" hidden="true">
|
||||
<label value="&webAudioEditorUI.automationNoEvents;"></label>
|
||||
</vbox>
|
||||
</vbox>
|
||||
<vbox id="automation-empty" flex="1" hidden="true">
|
||||
<label value="&webAudioEditorUI.automationEmpty;"></label>
|
||||
</vbox>
|
||||
</tabpanel>
|
||||
</tabpanels>
|
||||
</tabbox>
|
||||
</deck>
|
||||
</vbox>
|
||||
</box>
|
||||
</vbox>
|
||||
</vbox>
|
||||
|
||||
</window>
|
||||
Loading…
Add table
Add a link
Reference in a new issue