The Tor Browser / file revision

 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */

 /* vim: set 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 {Cu, Ci, ChromeWorker} = require("chrome");

 let TiltGL = require("devtools/tilt/tilt-gl");

 let TiltUtils = require("devtools/tilt/tilt-utils");

 let TiltVisualizerStyle = require("devtools/tilt/tilt-visualizer-style");

 let {EPSILON, TiltMath, vec3, mat4, quat4} = require("devtools/tilt/tilt-math");

 let {TargetFactory} = require("devtools/framework/target");

 Cu.import("resource://gre/modules/Services.jsm");

 Cu.import("resource:///modules/devtools/gDevTools.jsm");

 const ELEMENT_MIN_SIZE = 4;

 const INVISIBLE_ELEMENTS = {

   "head": true,

   "base": true,

   "basefont": true,

   "isindex": true,

   "link": true,

   "meta": true,

   "option": true,

   "script": true,

   "style": true,

   "title": true

 };

 // a node is represented in the visualization mesh as a rectangular stack

 // of 5 quads composed of 12 vertices; we draw these as triangles using an

 // index buffer of 12 unsigned int elements, obviously one for each vertex;

 // if a webpage has enough nodes to overflow the index buffer elements size,

 // weird things may happen; thus, when necessary, we'll split into groups

 const MAX_GROUP_NODES = Math.pow(2, Uint16Array.BYTES_PER_ELEMENT * 8) / 12 - 1;

 const WIREFRAME_COLOR = [0, 0, 0, 0.25];

 const INTRO_TRANSITION_DURATION = 1000;

 const OUTRO_TRANSITION_DURATION = 800;

 const INITIAL_Z_TRANSLATION = 400;

 const MOVE_INTO_VIEW_ACCURACY = 50;

 const MOUSE_CLICK_THRESHOLD = 10;

 const MOUSE_INTRO_DELAY = 200;

 const ARCBALL_SENSITIVITY = 0.5;

 const ARCBALL_ROTATION_STEP = 0.15;

 const ARCBALL_TRANSLATION_STEP = 35;

 const ARCBALL_ZOOM_STEP = 0.1;

 const ARCBALL_ZOOM_MIN = -3000;

 const ARCBALL_ZOOM_MAX = 500;

 const ARCBALL_RESET_SPHERICAL_FACTOR = 0.1;

 const ARCBALL_RESET_LINEAR_FACTOR = 0.01;

 const TILT_CRAFTER = "resource:///modules/devtools/tilt/TiltWorkerCrafter.js";

 const TILT_PICKER = "resource:///modules/devtools/tilt/TiltWorkerPicker.js";

 /**

  * Initializes the visualization presenter and controller.

  *

  * @param {Object} aProperties

  *                 an object containing the following properties:

  *        {Window} chromeWindow: a reference to the top level window

  *        {Window} contentWindow: the content window holding the visualized doc

  *       {Element} parentNode: the parent node to hold the visualization

  *        {Object} notifications: necessary notifications for Tilt

  *      {Function} onError: optional, function called if initialization failed

  *      {Function} onLoad: optional, function called if initialization worked

  */

 function TiltVisualizer(aProperties)

 {

   // make sure the properties parameter is a valid object

   aProperties = aProperties || {};

   /**

    * Save a reference to the top-level window.

    */

   this.chromeWindow = aProperties.chromeWindow;

   this.tab = aProperties.tab;

   /**

    * The canvas element used for rendering the visualization.

    */

   this.canvas = TiltUtils.DOM.initCanvas(aProperties.parentNode, {

     focusable: true,

     append: true

   });

   /**

    * Visualization logic and drawing loop.

    */

   this.presenter = new TiltVisualizer.Presenter(this.canvas,

     aProperties.chromeWindow,

     aProperties.contentWindow,

     aProperties.notifications,

     aProperties.onError || null,

     aProperties.onLoad || null);

   /**

    * Visualization mouse and keyboard controller.

    */

   this.controller = new TiltVisualizer.Controller(this.canvas, this.presenter);

 }

 exports.TiltVisualizer = TiltVisualizer;

 TiltVisualizer.prototype = {

   /**

    * Initializes the visualizer.

    */

   init: function TV_init()

   {

     this.presenter.init();

     this.bindToInspector(this.tab);

   },

   /**

    * Checks if this object was initialized properly.

    *

    * @return {Boolean} true if the object was initialized properly

    */

   isInitialized: function TV_isInitialized()

   {

     return this.presenter && this.presenter.isInitialized() &&

            this.controller && this.controller.isInitialized();

   },

   /**

    * Removes the overlay canvas used for rendering the visualization.

    */

   removeOverlay: function TV_removeOverlay()

   {

     if (this.canvas && this.canvas.parentNode) {

       this.canvas.parentNode.removeChild(this.canvas);

     }

   },

   /**

    * Explicitly cleans up this visualizer and sets everything to null.

    */

   cleanup: function TV_cleanup()

   {

     this.unbindInspector();

     if (this.controller) {

       TiltUtils.destroyObject(this.controller);

     }

     if (this.presenter) {

       TiltUtils.destroyObject(this.presenter);

     }

     let chromeWindow = this.chromeWindow;

     TiltUtils.destroyObject(this);

     TiltUtils.clearCache();

     TiltUtils.gc(chromeWindow);

   },

   /**

    * Listen to the inspector activity.

    */

   bindToInspector: function TV_bindToInspector(aTab)

   {

     this._browserTab = aTab;

     this.onNewNodeFromInspector = this.onNewNodeFromInspector.bind(this);

     this.onNewNodeFromTilt = this.onNewNodeFromTilt.bind(this);

     this.onInspectorReady = this.onInspectorReady.bind(this);

     this.onToolboxDestroyed = this.onToolboxDestroyed.bind(this);

     gDevTools.on("inspector-ready", this.onInspectorReady);

     gDevTools.on("toolbox-destroyed", this.onToolboxDestroyed);

     Services.obs.addObserver(this.onNewNodeFromTilt,

                              this.presenter.NOTIFICATIONS.HIGHLIGHTING,

                              false);

     Services.obs.addObserver(this.onNewNodeFromTilt,

                              this.presenter.NOTIFICATIONS.UNHIGHLIGHTING,

                              false);

     let target = TargetFactory.forTab(aTab);

     let toolbox = gDevTools.getToolbox(target);

     if (toolbox) {

       let panel = toolbox.getPanel("inspector");

       if (panel) {

         this.inspector = panel;

         this.inspector.selection.on("new-node", this.onNewNodeFromInspector);

         this.onNewNodeFromInspector();

       }

     }

   },

   /**

    * Unregister inspector event listeners.

    */

   unbindInspector: function TV_unbindInspector()

   {

     this._browserTab = null;

     if (this.inspector) {

       if (this.inspector.selection) {

         this.inspector.selection.off("new-node", this.onNewNodeFromInspector);

       }

       this.inspector = null;

     }

     gDevTools.off("inspector-ready", this.onInspectorReady);

     gDevTools.off("toolbox-destroyed", this.onToolboxDestroyed);

     Services.obs.removeObserver(this.onNewNodeFromTilt,

                                 this.presenter.NOTIFICATIONS.HIGHLIGHTING);

     Services.obs.removeObserver(this.onNewNodeFromTilt,

                                 this.presenter.NOTIFICATIONS.UNHIGHLIGHTING);

   },

   /**

    * When a new inspector is started.

    */

   onInspectorReady: function TV_onInspectorReady(event, toolbox, panel)

   {

     if (toolbox.target.tab === this._browserTab) {

       this.inspector = panel;

       this.inspector.selection.on("new-node", this.onNewNodeFromInspector);

       this.onNewNodeFromTilt();

     }

   },

   /**

    * When the toolbox, therefor the inspector, is closed.

    */

   onToolboxDestroyed: function TV_onToolboxDestroyed(event, tab)

   {

     if (tab === this._browserTab &&

         this.inspector) {

       if (this.inspector.selection) {

         this.inspector.selection.off("new-node", this.onNewNodeFromInspector);

       }

       this.inspector = null;

     }

   },

   /**

    * When a new node is selected in the inspector.

    */

   onNewNodeFromInspector: function TV_onNewNodeFromInspector()

   {

     if (this.inspector &&

         this.inspector.selection.reason != "tilt") {

       let selection = this.inspector.selection;

       let canHighlightNode = selection.isNode() &&

                               selection.isConnected() &&

                               selection.isElementNode();

       if (canHighlightNode) {

         this.presenter.highlightNode(selection.node);

       } else {

         this.presenter.highlightNodeFor(-1);

       }

     }

   },

   /**

    * When a new node is selected in Tilt.

    */

   onNewNodeFromTilt: function TV_onNewNodeFromTilt()

   {

     if (!this.inspector) {

       return;

     }

     let nodeIndex = this.presenter._currentSelection;

     if (nodeIndex < 0) {

       this.inspector.selection.setNodeFront(null, "tilt");

     }

     let node = this.presenter._traverseData.nodes[nodeIndex];

     node = this.inspector.walker.frontForRawNode(node);

     this.inspector.selection.setNodeFront(node, "tilt");

   },

 };

 /**

  * This object manages the visualization logic and drawing loop.

  *

  * @param {HTMLCanvasElement} aCanvas

  *                            the canvas element used for rendering

  * @param {Window} aChromeWindow

  *                 a reference to the top-level window

  * @param {Window} aContentWindow

  *                 the content window holding the document to be visualized

  * @param {Object} aNotifications

  *                 necessary notifications for Tilt

  * @param {Function} onError

  *                   function called if initialization failed

  * @param {Function} onLoad

  *                   function called if initialization worked

  */

 TiltVisualizer.Presenter = function TV_Presenter(

   aCanvas, aChromeWindow, aContentWindow, aNotifications, onError, onLoad)

 {

   /**

    * A canvas overlay used for drawing the visualization.

    */

   this.canvas = aCanvas;

   /**

    * Save a reference to the top-level window, to access Tilt.

    */

   this.chromeWindow = aChromeWindow;

   /**

    * The content window generating the visualization

    */

   this.contentWindow = aContentWindow;

   /**

    * Shortcut for accessing notifications strings.

    */

   this.NOTIFICATIONS = aNotifications;

   /**

    * Use the default node callback function

    */

   this.nodeCallback = null;

   /**

    * Create the renderer, containing useful functions for easy drawing.

    */

   this._renderer = new TiltGL.Renderer(aCanvas, onError, onLoad);

   /**

    * A custom shader used for drawing the visualization mesh.

    */

   this._visualizationProgram = null;

   /**

    * The combined mesh representing the document visualization.

    */

   this._texture = null;

   this._meshData = null;

   this._meshStacks = null;

   this._meshWireframe = null;

   this._traverseData = null;

   /**

    * A highlight quad drawn over a stacked dom node.

    */

   this._highlight = {

     disabled: true,

     v0: vec3.create(),

     v1: vec3.create(),

     v2: vec3.create(),

     v3: vec3.create()

   };

   /**

    * Scene transformations, exposing offset, translation and rotation.

    * Modified by events in the controller through delegate functions.

    */

   this.transforms = {

     zoom: 1,

     offset: vec3.create(),      // mesh offset, aligned to the viewport center

     translation: vec3.create(), // scene translation, on the [x, y, z] axis

     rotation: quat4.create()    // scene rotation, expressed as a quaternion

   };

   /**

    * Variables holding information about the initial and current node selected.

    */

   this._currentSelection = -1; // the selected node index

   this._initialMeshConfiguration = false; // true if the 3D mesh was configured

   /**

    * Variable specifying if the scene should be redrawn.

    * This should happen usually when the visualization is translated/rotated.

    */

   this._redraw = true;

   /**

    * Total time passed since the rendering started.

    * If the rendering is paused, this property won't get updated.

    */

   this._time = 0;

   /**

    * Frame delta time (the ammount of time passed for each frame).

    * This is used to smoothly interpolate animation transfroms.

    */

   this._delta = 0;

   this._prevFrameTime = 0;

   this._currFrameTime = 0;

 };

 TiltVisualizer.Presenter.prototype = {

   /**

    * Initializes the presenter and starts the animation loop

    */

   init: function TVP_init()

   {

     this._setup();

     this._loop();

   },

   /**

    * The initialization logic.

    */

   _setup: function TVP__setup()

   {

     let renderer = this._renderer;

     // if the renderer was destroyed, don't continue setup

     if (!renderer || !renderer.context) {

       return;

     }

     // create the visualization shaders and program to draw the stacks mesh

     this._visualizationProgram = new renderer.Program({

       vs: TiltVisualizer.MeshShader.vs,

       fs: TiltVisualizer.MeshShader.fs,

       attributes: ["vertexPosition", "vertexTexCoord", "vertexColor"],

       uniforms: ["mvMatrix", "projMatrix", "sampler"]

     });

     // get the document zoom to properly scale the visualization

     this.transforms.zoom = this._getPageZoom();

     // bind the owner object to the necessary functions

     TiltUtils.bindObjectFunc(this, "^_on");

     TiltUtils.bindObjectFunc(this, "_loop");

     this._setupTexture();

     this._setupMeshData();

     this._setupEventListeners();

     this.canvas.focus();

   },

   /**

    * Get page zoom factor.

    * @return {Number}

    */

   _getPageZoom: function TVP__getPageZoom() {

     return this.contentWindow

       .QueryInterface(Ci.nsIInterfaceRequestor)

       .getInterface(Ci.nsIDOMWindowUtils)

       .fullZoom;

   },

   /**

    * The animation logic.

    */

   _loop: function TVP__loop()

   {

     let renderer = this._renderer;

     // if the renderer was destroyed, don't continue rendering

     if (!renderer || !renderer.context) {

       return;

     }

     // prepare for the next frame of the animation loop

     this.chromeWindow.mozRequestAnimationFrame(this._loop);

     // only redraw if we really have to

     if (this._redraw) {

       this._redraw = false;

       this._drawVisualization();

     }

     // update the current presenter transfroms from the controller

     if ("function" === typeof this._controllerUpdate) {

       this._controllerUpdate(this._time, this._delta);

     }

     this._handleFrameDelta();

     this._handleKeyframeNotifications();

   },

   /**

    * Calculates the current frame delta time.

    */

   _handleFrameDelta: function TVP__handleFrameDelta()

   {

     this._prevFrameTime = this._currFrameTime;

     this._currFrameTime = this.chromeWindow.mozAnimationStartTime;

     this._delta = this._currFrameTime - this._prevFrameTime;

   },

   /**

    * Draws the visualization mesh and highlight quad.

    */

   _drawVisualization: function TVP__drawVisualization()

   {

     let renderer = this._renderer;

     let transforms = this.transforms;

     let w = renderer.width;

     let h = renderer.height;

     let ih = renderer.initialHeight;

     // if the mesh wasn't created yet, don't continue rendering

     if (!this._meshStacks || !this._meshWireframe) {

       return;

     }

     // clear the context to an opaque black background

     renderer.clear();

     renderer.perspective();

     // apply a transition transformation using an ortho and perspective matrix

     let ortho = mat4.ortho(0, w, h, 0, -1000, 1000);

     if (!this._isExecutingDestruction) {

       let f = this._time / INTRO_TRANSITION_DURATION;

       renderer.lerp(renderer.projMatrix, ortho, f, 8);

     } else {

       let f = this._time / OUTRO_TRANSITION_DURATION;

       renderer.lerp(renderer.projMatrix, ortho, 1 - f, 8);

     }

     // apply the preliminary transformations to the model view

     renderer.translate(w * 0.5, ih * 0.5, -INITIAL_Z_TRANSLATION);

     // calculate the camera matrix using the rotation and translation

     renderer.translate(transforms.translation[0], 0,

                        transforms.translation[2]);

     renderer.transform(quat4.toMat4(transforms.rotation));

     // offset the visualization mesh to center

     renderer.translate(transforms.offset[0],

                        transforms.offset[1] + transforms.translation[1], 0);

     renderer.scale(transforms.zoom, transforms.zoom);

     // draw the visualization mesh

     renderer.strokeWeight(2);

     renderer.depthTest(true);

     this._drawMeshStacks();

     this._drawMeshWireframe();

     this._drawHighlight();

     // make sure the initial transition is drawn until finished

     if (this._time < INTRO_TRANSITION_DURATION ||

         this._time < OUTRO_TRANSITION_DURATION) {

       this._redraw = true;

     }

     this._time += this._delta;

   },

   /**

    * Draws the meshStacks object.

    */

   _drawMeshStacks: function TVP__drawMeshStacks()

   {

     let renderer = this._renderer;

     let mesh = this._meshStacks;

     let visualizationProgram = this._visualizationProgram;

     let texture = this._texture;

     let mvMatrix = renderer.mvMatrix;

     let projMatrix = renderer.projMatrix;

     // use the necessary shader

     visualizationProgram.use();

     for (let i = 0, len = mesh.length; i < len; i++) {

       let group = mesh[i];

       // bind the attributes and uniforms as necessary

       visualizationProgram.bindVertexBuffer("vertexPosition", group.vertices);

       visualizationProgram.bindVertexBuffer("vertexTexCoord", group.texCoord);

       visualizationProgram.bindVertexBuffer("vertexColor", group.color);

       visualizationProgram.bindUniformMatrix("mvMatrix", mvMatrix);

       visualizationProgram.bindUniformMatrix("projMatrix", projMatrix);

       visualizationProgram.bindTexture("sampler", texture);

       // draw the vertices as TRIANGLES indexed elements

       renderer.drawIndexedVertices(renderer.context.TRIANGLES, group.indices);

     }

     // save the current model view and projection matrices

     mesh.mvMatrix = mat4.create(mvMatrix);

     mesh.projMatrix = mat4.create(projMatrix);

   },

   /**

    * Draws the meshWireframe object.

    */

   _drawMeshWireframe: function TVP__drawMeshWireframe()

   {

     let renderer = this._renderer;

     let mesh = this._meshWireframe;

     for (let i = 0, len = mesh.length; i < len; i++) {

       let group = mesh[i];

       // use the necessary shader

       renderer.useColorShader(group.vertices, WIREFRAME_COLOR);

       // draw the vertices as LINES indexed elements

       renderer.drawIndexedVertices(renderer.context.LINES, group.indices);

     }

   },

   /**

    * Draws a highlighted quad around a currently selected node.

    */

   _drawHighlight: function TVP__drawHighlight()

   {

     // check if there's anything to highlight (i.e any node is selected)

     if (!this._highlight.disabled) {

       // set the corresponding state to draw the highlight quad

       let renderer = this._renderer;

       let highlight = this._highlight;

       renderer.depthTest(false);

       renderer.fill(highlight.fill, 0.5);

       renderer.stroke(highlight.stroke);

       renderer.strokeWeight(highlight.strokeWeight);

       renderer.quad(highlight.v0, highlight.v1, highlight.v2, highlight.v3);

     }

   },

   /**

    * Creates or refreshes the texture applied to the visualization mesh.

    */

   _setupTexture: function TVP__setupTexture()

   {

     let renderer = this._renderer;

     // destroy any previously created texture

     TiltUtils.destroyObject(this._texture); this._texture = null;

     // if the renderer was destroyed, don't continue setup

     if (!renderer || !renderer.context) {

       return;

     }

     // get the maximum texture size

     this._maxTextureSize =

       renderer.context.getParameter(renderer.context.MAX_TEXTURE_SIZE);

     // use a simple shim to get the image representation of the document

     // this will be removed once the MOZ_window_region_texture bug #653656

     // is finished; currently just converting the document image to a texture

     // applied to the mesh

     this._texture = new renderer.Texture({

       source: TiltGL.TextureUtils.createContentImage(this.contentWindow,

                                                      this._maxTextureSize),

       format: "RGB"

     });

     if ("function" === typeof this._onSetupTexture) {

       this._onSetupTexture();

       this._onSetupTexture = null;

     }

   },

   /**

    * Create the combined mesh representing the document visualization by

    * traversing the document & adding a stack for each node that is drawable.

    *

    * @param {Object} aMeshData

    *                 object containing the necessary mesh verts, texcoord etc.

    */

   _setupMesh: function TVP__setupMesh(aMeshData)

   {

     let renderer = this._renderer;

     // destroy any previously created mesh

     TiltUtils.destroyObject(this._meshStacks); this._meshStacks = [];

     TiltUtils.destroyObject(this._meshWireframe); this._meshWireframe = [];

     // if the renderer was destroyed, don't continue setup

     if (!renderer || !renderer.context) {

       return;

     }

     // save the mesh data for future use

     this._meshData = aMeshData;

     // create a sub-mesh for each group in the mesh data

     for (let i = 0, len = aMeshData.groups.length; i < len; i++) {

       let group = aMeshData.groups[i];

       // create the visualization mesh using the vertices, texture coordinates

       // and indices computed when traversing the document object model

       this._meshStacks.push({

         vertices: new renderer.VertexBuffer(group.vertices, 3),

         texCoord: new renderer.VertexBuffer(group.texCoord, 2),

         color: new renderer.VertexBuffer(group.color, 3),

         indices: new renderer.IndexBuffer(group.stacksIndices)

       });

       // additionally, create a wireframe representation to make the

       // visualization a bit more pretty

       this._meshWireframe.push({

         vertices: this._meshStacks[i].vertices,

         indices: new renderer.IndexBuffer(group.wireframeIndices)

       });

     }

     // configure the required mesh transformations and background only once

     if (!this._initialMeshConfiguration) {

       this._initialMeshConfiguration = true;

       // set the necessary mesh offsets

       this.transforms.offset[0] = -renderer.width * 0.5;

       this.transforms.offset[1] = -renderer.height * 0.5;

       // make sure the canvas is opaque now that the initialization is finished

       this.canvas.style.background = TiltVisualizerStyle.canvas.background;

       this._drawVisualization();

       this._redraw = true;

     }

     if ("function" === typeof this._onSetupMesh) {

       this._onSetupMesh();

       this._onSetupMesh = null;

     }

   },

   /**

    * Computes the mesh vertices, texture coordinates etc. by groups of nodes.

    */

   _setupMeshData: function TVP__setupMeshData()

   {

     let renderer = this._renderer;

     // if the renderer was destroyed, don't continue setup

     if (!renderer || !renderer.context) {

       return;

     }

     // traverse the document and get the depths, coordinates and local names

     this._traverseData = TiltUtils.DOM.traverse(this.contentWindow, {

       nodeCallback: this.nodeCallback,

       invisibleElements: INVISIBLE_ELEMENTS,

       minSize: ELEMENT_MIN_SIZE,

       maxX: this._texture.width,

       maxY: this._texture.height

     });

     let worker = new ChromeWorker(TILT_CRAFTER);

     worker.addEventListener("message", function TVP_onMessage(event) {

       this._setupMesh(event.data);

     }.bind(this), false);

     // calculate necessary information regarding vertices, texture coordinates

     // etc. in a separate thread, as this process may take a while

     worker.postMessage({

       maxGroupNodes: MAX_GROUP_NODES,

       style: TiltVisualizerStyle.nodes,

       texWidth: this._texture.width,

       texHeight: this._texture.height,

       nodesInfo: this._traverseData.info

     });

   },

   /**

    * Sets up event listeners necessary for the presenter.

    */

   _setupEventListeners: function TVP__setupEventListeners()

   {

     this.contentWindow.addEventListener("resize", this._onResize, false);

   },

   /**

    * Called when the content window of the current browser is resized.

    */

   _onResize: function TVP_onResize(e)

   {

     let zoom = this._getPageZoom();

     let width = e.target.innerWidth * zoom;

     let height = e.target.innerHeight * zoom;

     // handle aspect ratio changes to update the projection matrix

     this._renderer.width = width;

     this._renderer.height = height;

     this._redraw = true;

   },

   /**

    * Highlights a specific node.

    *

    * @param {Element} aNode

    *                  the html node to be highlighted

    * @param {String} aFlags

    *                 flags specifying highlighting options

    */

   highlightNode: function TVP_highlightNode(aNode, aFlags)

   {

     this.highlightNodeFor(this._traverseData.nodes.indexOf(aNode), aFlags);

   },

   /**

    * Picks a stacked dom node at the x and y screen coordinates and highlights

    * the selected node in the mesh.

    *

    * @param {Number} x

    *                 the current horizontal coordinate of the mouse

    * @param {Number} y

    *                 the current vertical coordinate of the mouse

    * @param {Object} aProperties

    *                 an object containing the following properties:

    *      {Function} onpick: function to be called after picking succeeded

    *      {Function} onfail: function to be called after picking failed

    */

   highlightNodeAt: function TVP_highlightNodeAt(x, y, aProperties)

   {

     // make sure the properties parameter is a valid object

     aProperties = aProperties || {};

     // try to pick a mesh node using the current x, y coordinates

     this.pickNode(x, y, {

       /**

        * Mesh picking failed (nothing was found for the picked point).

        */

       onfail: function TVP_onHighlightFail()

       {

         this.highlightNodeFor(-1);

         if ("function" === typeof aProperties.onfail) {

           aProperties.onfail();

         }

       }.bind(this),

       /**

        * Mesh picking succeeded.

        *

        * @param {Object} aIntersection

        *                 object containing the intersection details

        */

       onpick: function TVP_onHighlightPick(aIntersection)

       {

         this.highlightNodeFor(aIntersection.index);

         if ("function" === typeof aProperties.onpick) {

           aProperties.onpick();

         }

       }.bind(this)

     });

   },

   /**

    * Sets the corresponding highlight coordinates and color based on the

    * information supplied.

    *

    * @param {Number} aNodeIndex

    *                 the index of the node in the this._traverseData array

    * @param {String} aFlags

    *                 flags specifying highlighting options

    */

   highlightNodeFor: function TVP_highlightNodeFor(aNodeIndex, aFlags)

   {

     this._redraw = true;

     // if the node was already selected, don't do anything

     if (this._currentSelection === aNodeIndex) {

       return;

     }

     // if an invalid or nonexisted node is specified, disable the highlight

     if (aNodeIndex < 0) {

       this._currentSelection = -1;

       this._highlight.disabled = true;

       Services.obs.notifyObservers(this.contentWindow, this.NOTIFICATIONS.UNHIGHLIGHTING, null);

       return;

     }

     let highlight = this._highlight;

     let info = this._traverseData.info[aNodeIndex];

     let style = TiltVisualizerStyle.nodes;

     highlight.disabled = false;

     highlight.fill = style[info.name] || style.highlight.defaultFill;

     highlight.stroke = style.highlight.defaultStroke;

     highlight.strokeWeight = style.highlight.defaultStrokeWeight;

     let x = info.coord.left;

     let y = info.coord.top;

     let w = info.coord.width;

     let h = info.coord.height;

     let z = info.coord.depth + info.coord.thickness;

     vec3.set([x,     y,     z], highlight.v0);

     vec3.set([x + w, y,     z], highlight.v1);

     vec3.set([x + w, y + h, z], highlight.v2);

     vec3.set([x,     y + h, z], highlight.v3);

     this._currentSelection = aNodeIndex;

     // if something is highlighted, make sure it's inside the current viewport;

     // the point which should be moved into view is considered the center [x, y]

     // position along the top edge of the currently selected node

     if (aFlags && aFlags.indexOf("moveIntoView") !== -1)

     {

       this.controller.arcball.moveIntoView(vec3.lerp(

         vec3.scale(this._highlight.v0, this.transforms.zoom, []),

         vec3.scale(this._highlight.v1, this.transforms.zoom, []), 0.5));

     }

     Services.obs.notifyObservers(this.contentWindow, this.NOTIFICATIONS.HIGHLIGHTING, null);

   },

   /**

    * Deletes a node from the visualization mesh.

    *

    * @param {Number} aNodeIndex

    *                 the index of the node in the this._traverseData array;

    *                 if not specified, it will default to the current selection

    */

   deleteNode: function TVP_deleteNode(aNodeIndex)

   {

     // we probably don't want to delete the html or body node.. just sayin'

     if ((aNodeIndex = aNodeIndex || this._currentSelection) < 1) {

       return;

     }

     let renderer = this._renderer;

     let groupIndex = parseInt(aNodeIndex / MAX_GROUP_NODES);

     let nodeIndex = parseInt((aNodeIndex + (groupIndex ? 1 : 0)) % MAX_GROUP_NODES);

     let group = this._meshStacks[groupIndex];

     let vertices = group.vertices.components;

     for (let i = 0, k = 36 * nodeIndex; i < 36; i++) {

       vertices[i + k] = 0;

     }

     group.vertices = new renderer.VertexBuffer(vertices, 3);

     this._highlight.disabled = true;

     this._redraw = true;

     Services.obs.notifyObservers(this.contentWindow, this.NOTIFICATIONS.NODE_REMOVED, null);

   },

   /**

    * Picks a stacked dom node at the x and y screen coordinates and issues

    * a callback function with the found intersection.

    *

    * @param {Number} x

    *                 the current horizontal coordinate of the mouse

    * @param {Number} y

    *                 the current vertical coordinate of the mouse

    * @param {Object} aProperties

    *                 an object containing the following properties:

    *      {Function} onpick: function to be called at intersection

    *      {Function} onfail: function to be called if no intersections

    */

   pickNode: function TVP_pickNode(x, y, aProperties)

   {

     // make sure the properties parameter is a valid object

     aProperties = aProperties || {};

     // if the mesh wasn't created yet, don't continue picking

     if (!this._meshStacks || !this._meshWireframe) {

       return;

     }

     let worker = new ChromeWorker(TILT_PICKER);

     worker.addEventListener("message", function TVP_onMessage(event) {

       if (event.data) {

         if ("function" === typeof aProperties.onpick) {

           aProperties.onpick(event.data);

         }

       } else {

         if ("function" === typeof aProperties.onfail) {

           aProperties.onfail();

         }

       }

     }, false);

     let zoom = this._getPageZoom();

     let width = this._renderer.width * zoom;

     let height = this._renderer.height * zoom;

     x *= zoom;

     y *= zoom;

     // create a ray following the mouse direction from the near clipping plane

     // to the far clipping plane, to check for intersections with the mesh,

     // and do all the heavy lifting in a separate thread

     worker.postMessage({

       vertices: this._meshData.allVertices,

       // create the ray destined for 3D picking

       ray: vec3.createRay([x, y, 0], [x, y, 1], [0, 0, width, height],

         this._meshStacks.mvMatrix,

         this._meshStacks.projMatrix)

     });

   },

   /**

    * Delegate translation method, used by the controller.

    *

    * @param {Array} aTranslation

    *                the new translation on the [x, y, z] axis

    */

   setTranslation: function TVP_setTranslation(aTranslation)

   {

     let x = aTranslation[0];

     let y = aTranslation[1];

     let z = aTranslation[2];

     let transforms = this.transforms;

     // only update the translation if it's not already set

     if (transforms.translation[0] !== x ||

         transforms.translation[1] !== y ||

         transforms.translation[2] !== z) {

       vec3.set(aTranslation, transforms.translation);

       this._redraw = true;

     }

   },

   /**

    * Delegate rotation method, used by the controller.

    *

    * @param {Array} aQuaternion

    *                the rotation quaternion, as [x, y, z, w]

    */

   setRotation: function TVP_setRotation(aQuaternion)

   {

     let x = aQuaternion[0];

     let y = aQuaternion[1];

     let z = aQuaternion[2];

     let w = aQuaternion[3];

     let transforms = this.transforms;

     // only update the rotation if it's not already set

     if (transforms.rotation[0] !== x ||

         transforms.rotation[1] !== y ||

         transforms.rotation[2] !== z ||

         transforms.rotation[3] !== w) {

       quat4.set(aQuaternion, transforms.rotation);

       this._redraw = true;

     }

   },

   /**

    * Handles notifications at specific frame counts.

    */

   _handleKeyframeNotifications: function TV__handleKeyframeNotifications()

   {

     if (!TiltVisualizer.Prefs.introTransition && !this._isExecutingDestruction) {

       this._time = INTRO_TRANSITION_DURATION;

     }

     if (!TiltVisualizer.Prefs.outroTransition && this._isExecutingDestruction) {

       this._time = OUTRO_TRANSITION_DURATION;

     }

     if (this._time >= INTRO_TRANSITION_DURATION &&

        !this._isInitializationFinished &&

        !this._isExecutingDestruction) {

       this._isInitializationFinished = true;

       Services.obs.notifyObservers(this.contentWindow, this.NOTIFICATIONS.INITIALIZED, null);

       if ("function" === typeof this._onInitializationFinished) {

         this._onInitializationFinished();

       }

     }

     if (this._time >= OUTRO_TRANSITION_DURATION &&

        !this._isDestructionFinished &&

         this._isExecutingDestruction) {

       this._isDestructionFinished = true;

       Services.obs.notifyObservers(this.contentWindow, this.NOTIFICATIONS.BEFORE_DESTROYED, null);

       if ("function" === typeof this._onDestructionFinished) {

         this._onDestructionFinished();

       }

     }

   },

   /**

    * Starts executing the destruction sequence and issues a callback function

    * when finished.

    *

    * @param {Function} aCallback

    *                   the destruction finished callback

    */

   executeDestruction: function TV_executeDestruction(aCallback)

   {

     if (!this._isExecutingDestruction) {

       this._isExecutingDestruction = true;

       this._onDestructionFinished = aCallback;

       // if we execute the destruction after the initialization finishes,

       // proceed normally; otherwise, skip everything and immediately issue

       // the callback

       if (this._time > OUTRO_TRANSITION_DURATION) {

         this._time = 0;

         this._redraw = true;

       } else {

         aCallback();

       }

     }

   },

   /**

    * Checks if this object was initialized properly.

    *

    * @return {Boolean} true if the object was initialized properly

    */

   isInitialized: function TVP_isInitialized()

   {

     return this._renderer && this._renderer.context;

   },

   /**

    * Function called when this object is destroyed.

    */

   _finalize: function TVP__finalize()

   {

     TiltUtils.destroyObject(this._visualizationProgram);

     TiltUtils.destroyObject(this._texture);

     if (this._meshStacks) {

       this._meshStacks.forEach(function(group) {

         TiltUtils.destroyObject(group.vertices);

         TiltUtils.destroyObject(group.texCoord);

         TiltUtils.destroyObject(group.color);

         TiltUtils.destroyObject(group.indices);

       });

     }

     if (this._meshWireframe) {

       this._meshWireframe.forEach(function(group) {

         TiltUtils.destroyObject(group.indices);

       });

     }

     TiltUtils.destroyObject(this._renderer);

     // Closing the tab would result in contentWindow being a dead object,

     // so operations like removing event listeners won't work anymore.

     if (this.contentWindow == this.chromeWindow.content) {

       this.contentWindow.removeEventListener("resize", this._onResize, false);

     }

   }

 };

 /**

  * A mouse and keyboard controller implementation.

  *

  * @param {HTMLCanvasElement} aCanvas

  *                            the visualization canvas element

  * @param {TiltVisualizer.Presenter} aPresenter

  *                                   the presenter instance to control

  */

 TiltVisualizer.Controller = function TV_Controller(aCanvas, aPresenter)

 {

   /**

    * A canvas overlay on which mouse and keyboard event listeners are attached.

    */

   this.canvas = aCanvas;

   /**

    * Save a reference to the presenter to modify its model-view transforms.

    */

   this.presenter = aPresenter;

   this.presenter.controller = this;

   /**

    * The initial controller dimensions and offset, in pixels.

    */

   this._zoom = aPresenter.transforms.zoom;

   this._left = (aPresenter.contentWindow.pageXOffset || 0) * this._zoom;

   this._top = (aPresenter.contentWindow.pageYOffset || 0) * this._zoom;

   this._width = aCanvas.width;

   this._height = aCanvas.height;

   /**

    * Arcball used to control the visualization using the mouse.

    */

   this.arcball = new TiltVisualizer.Arcball(

     this.presenter.chromeWindow, this._width, this._height, 0,

     [

       this._width + this._left < aPresenter._maxTextureSize ? -this._left : 0,

       this._height + this._top < aPresenter._maxTextureSize ? -this._top : 0

     ]);

   /**

    * Object containing the rotation quaternion and the translation amount.

    */

   this._coordinates = null;

   // bind the owner object to the necessary functions

   TiltUtils.bindObjectFunc(this, "_update");

   TiltUtils.bindObjectFunc(this, "^_on");

   // add the necessary event listeners

   this.addEventListeners();

   // attach this controller's update function to the presenter ondraw event

   this.presenter._controllerUpdate = this._update;

 };

 TiltVisualizer.Controller.prototype = {

   /**

    * Adds events listeners required by this controller.

    */

   addEventListeners: function TVC_addEventListeners()

   {

     let canvas = this.canvas;

     let presenter = this.presenter;

     // bind commonly used mouse and keyboard events with the controller

     canvas.addEventListener("mousedown", this._onMouseDown, false);

     canvas.addEventListener("mouseup", this._onMouseUp, false);

     canvas.addEventListener("mousemove", this._onMouseMove, false);

     canvas.addEventListener("mouseover", this._onMouseOver, false);

     canvas.addEventListener("mouseout", this._onMouseOut, false);

     canvas.addEventListener("MozMousePixelScroll", this._onMozScroll, false);

     canvas.addEventListener("keydown", this._onKeyDown, false);

     canvas.addEventListener("keyup", this._onKeyUp, false);

     canvas.addEventListener("blur", this._onBlur, false);

     // handle resize events to change the arcball dimensions

     presenter.contentWindow.addEventListener("resize", this._onResize, false);

   },

   /**

    * Removes all added events listeners required by this controller.

    */

   removeEventListeners: function TVC_removeEventListeners()

   {

     let canvas = this.canvas;

     let presenter = this.presenter;

     canvas.removeEventListener("mousedown", this._onMouseDown, false);

     canvas.removeEventListener("mouseup", this._onMouseUp, false);

     canvas.removeEventListener("mousemove", this._onMouseMove, false);

     canvas.removeEventListener("mouseover", this._onMouseOver, false);

     canvas.removeEventListener("mouseout", this._onMouseOut, false);

     canvas.removeEventListener("MozMousePixelScroll", this._onMozScroll, false);

     canvas.removeEventListener("keydown", this._onKeyDown, false);

     canvas.removeEventListener("keyup", this._onKeyUp, false);

     canvas.removeEventListener("blur", this._onBlur, false);

     // Closing the tab would result in contentWindow being a dead object,

     // so operations like removing event listeners won't work anymore.

     if (presenter.contentWindow == presenter.chromeWindow.content) {

       presenter.contentWindow.removeEventListener("resize", this._onResize, false);

     }

   },

   /**

    * Function called each frame, updating the visualization camera transforms.

    *

    * @param {Number} aTime

    *                 total time passed since rendering started

    * @param {Number} aDelta

    *                 the current animation frame delta

    */

   _update: function TVC__update(aTime, aDelta)

   {

     this._time = aTime;

     this._coordinates = this.arcball.update(aDelta);

     this.presenter.setRotation(this._coordinates.rotation);

     this.presenter.setTranslation(this._coordinates.translation);

   },

   /**

    * Called once after every time a mouse button is pressed.

    */

   _onMouseDown: function TVC__onMouseDown(e)

   {

     e.target.focus();

     e.preventDefault();

     e.stopPropagation();

     if (this._time < MOUSE_INTRO_DELAY) {

       return;

     }

     // calculate x and y coordinates using using the client and target offset

     let button = e.which;

     this._downX = e.clientX - e.target.offsetLeft;

     this._downY = e.clientY - e.target.offsetTop;

     this.arcball.mouseDown(this._downX, this._downY, button);

   },

   /**

    * Called every time a mouse button is released.

    */

   _onMouseUp: function TVC__onMouseUp(e)

   {

     e.preventDefault();

     e.stopPropagation();

     if (this._time < MOUSE_INTRO_DELAY) {

       return;

     }

     // calculate x and y coordinates using using the client and target offset

     let button = e.which;

     let upX = e.clientX - e.target.offsetLeft;

     let upY = e.clientY - e.target.offsetTop;

     // a click in Tilt is issued only when the mouse pointer stays in

     // relatively the same position

     if (Math.abs(this._downX - upX) < MOUSE_CLICK_THRESHOLD &&

         Math.abs(this._downY - upY) < MOUSE_CLICK_THRESHOLD) {

       this.presenter.highlightNodeAt(upX, upY);

     }

     this.arcball.mouseUp(upX, upY, button);

   },

   /**

    * Called every time the mouse moves.

    */

   _onMouseMove: function TVC__onMouseMove(e)

   {

     e.preventDefault();

     e.stopPropagation();

     if (this._time < MOUSE_INTRO_DELAY) {

       return;

     }

     // calculate x and y coordinates using using the client and target offset

     let moveX = e.clientX - e.target.offsetLeft;

     let moveY = e.clientY - e.target.offsetTop;

     this.arcball.mouseMove(moveX, moveY);

   },

   /**

    * Called when the mouse leaves the visualization bounds.

    */

   _onMouseOver: function TVC__onMouseOver(e)

   {

     e.preventDefault();

     e.stopPropagation();

     this.arcball.mouseOver();

   },

   /**

    * Called when the mouse leaves the visualization bounds.

    */

   _onMouseOut: function TVC__onMouseOut(e)

   {

     e.preventDefault();

     e.stopPropagation();

     this.arcball.mouseOut();

   },

   /**

    * Called when the mouse wheel is used.

    */

   _onMozScroll: function TVC__onMozScroll(e)

   {

     e.preventDefault();

     e.stopPropagation();

     this.arcball.zoom(e.detail);

   },

   /**

    * Called when a key is pressed.

    */

   _onKeyDown: function TVC__onKeyDown(e)

   {

     let code = e.keyCode || e.which;

     if (!e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) {

       e.preventDefault();

       e.stopPropagation();

       this.arcball.keyDown(code);

     } else {

       this.arcball.cancelKeyEvents();

     }

     if (e.keyCode === e.DOM_VK_ESCAPE) {

       let {TiltManager} = require("devtools/tilt/tilt");

       let tilt =

         TiltManager.getTiltForBrowser(this.presenter.chromeWindow);

       e.preventDefault();

       e.stopPropagation();

       tilt.destroy(tilt.currentWindowId, true);

     }

   },

   /**

    * Called when a key is released.

    */

   _onKeyUp: function TVC__onKeyUp(e)

   {

     let code = e.keyCode || e.which;

     if (code === e.DOM_VK_X) {

       this.presenter.deleteNode();

     }

     if (code === e.DOM_VK_F) {

       let highlight = this.presenter._highlight;

       let zoom = this.presenter.transforms.zoom;

       this.arcball.moveIntoView(vec3.lerp(

         vec3.scale(highlight.v0, zoom, []),

         vec3.scale(highlight.v1, zoom, []), 0.5));

     }

     if (!e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) {

       e.preventDefault();

       e.stopPropagation();

       this.arcball.keyUp(code);

     }

   },

   /**

    * Called when the canvas looses focus.

    */

   _onBlur: function TVC__onBlur(e) {

     this.arcball.cancelKeyEvents();

   },

   /**

    * Called when the content window of the current browser is resized.

    */

   _onResize: function TVC__onResize(e)

   {

     let zoom = this.presenter._getPageZoom();

     let width = e.target.innerWidth * zoom;

     let height = e.target.innerHeight * zoom;

     this.arcball.resize(width, height);

   },

   /**

    * Checks if this object was initialized properly.

    *

    * @return {Boolean} true if the object was initialized properly

    */

   isInitialized: function TVC_isInitialized()

   {

     return this.arcball ? true : false;

   },

   /**

    * Function called when this object is destroyed.

    */

   _finalize: function TVC__finalize()

   {

     TiltUtils.destroyObject(this.arcball);

     TiltUtils.destroyObject(this._coordinates);

     this.removeEventListeners();

     this.presenter.controller = null;

     this.presenter._controllerUpdate = null;

   }

 };

 /**

  * This is a general purpose 3D rotation controller described by Ken Shoemake

  * in the Graphics Interface ’92 Proceedings. It features good behavior

  * easy implementation, cheap execution.

  *

  * @param {Window} aChromeWindow

  *                 a reference to the top-level window

  * @param {Number} aWidth

  *                 the width of canvas

  * @param {Number} aHeight

  *                 the height of canvas

  * @param {Number} aRadius

  *                 optional, the radius of the arcball

  * @param {Array} aInitialTrans

  *                optional, initial vector translation

  * @param {Array} aInitialRot

  *                optional, initial quaternion rotation

  */

 TiltVisualizer.Arcball = function TV_Arcball(

   aChromeWindow, aWidth, aHeight, aRadius, aInitialTrans, aInitialRot)

 {

   /**

    * Save a reference to the top-level window to set/remove intervals.

    */

   this.chromeWindow = aChromeWindow;

   /**

    * Values retaining the current horizontal and vertical mouse coordinates.

    */

   this._mousePress = vec3.create();

   this._mouseRelease = vec3.create();

   this._mouseMove = vec3.create();

   this._mouseLerp = vec3.create();

   this._mouseButton = -1;

   /**

    * Object retaining the current pressed key codes.

    */

   this._keyCode = {};

   /**

    * The vectors representing the mouse coordinates mapped on the arcball

    * and their perpendicular converted from (x, y) to (x, y, z) at specific

    * events like mousePressed and mouseDragged.

    */

   this._startVec = vec3.create();

   this._endVec = vec3.create();

   this._pVec = vec3.create();

   /**

    * The corresponding rotation quaternions.

    */

   this._lastRot = quat4.create();

   this._deltaRot = quat4.create();

   this._currentRot = quat4.create(aInitialRot);

   /**

    * The current camera translation coordinates.

    */

   this._lastTrans = vec3.create();

   this._deltaTrans = vec3.create();

   this._currentTrans = vec3.create(aInitialTrans);

   this._zoomAmount = 0;

   /**

    * Additional rotation and translation vectors.

    */

   this._additionalRot = vec3.create();

   this._additionalTrans = vec3.create();

   this._deltaAdditionalRot = quat4.create();

   this._deltaAdditionalTrans = vec3.create();

   // load the keys controlling the arcball

   this._loadKeys();

   // set the current dimensions of the arcball

   this.resize(aWidth, aHeight, aRadius);

 };

 TiltVisualizer.Arcball.prototype = {

   /**

    * Call this function whenever you need the updated rotation quaternion

    * and the zoom amount. These values will be returned as "rotation" and

    * "translation" properties inside an object.

    *

    * @param {Number} aDelta

    *                 the current animation frame delta

    *

    * @return {Object} the rotation quaternion and the translation amount

    */

   update: function TVA_update(aDelta)

   {

     let mousePress = this._mousePress;

     let mouseRelease = this._mouseRelease;

     let mouseMove = this._mouseMove;

     let mouseLerp = this._mouseLerp;

     let mouseButton = this._mouseButton;

     // smoothly update the mouse coordinates

     mouseLerp[0] += (mouseMove[0] - mouseLerp[0]) * ARCBALL_SENSITIVITY;

     mouseLerp[1] += (mouseMove[1] - mouseLerp[1]) * ARCBALL_SENSITIVITY;

     // cache the interpolated mouse coordinates

     let x = mouseLerp[0];

     let y = mouseLerp[1];

     // the smoothed arcball rotation may not be finished when the mouse is

     // pressed again, so cancel the rotation if other events occur or the

     // animation finishes

     if (mouseButton === 3 || x === mouseRelease[0] && y === mouseRelease[1]) {

       this._rotating = false;

     }

     let startVec = this._startVec;

     let endVec = this._endVec;

     let pVec = this._pVec;

     let lastRot = this._lastRot;

     let deltaRot = this._deltaRot;

     let currentRot = this._currentRot;

     // left mouse button handles rotation

     if (mouseButton === 1 || this._rotating) {

       // the rotation doesn't stop immediately after the left mouse button is

       // released, so add a flag to smoothly continue it until it ends

       this._rotating = true;

       // find the sphere coordinates of the mouse positions

       this._pointToSphere(x, y, this.width, this.height, this.radius, endVec);

       // compute the vector perpendicular to the start & end vectors

       vec3.cross(startVec, endVec, pVec);

       // if the begin and end vectors don't coincide

       if (vec3.length(pVec) > 0) {

         deltaRot[0] = pVec[0];

         deltaRot[1] = pVec[1];

         deltaRot[2] = pVec[2];

         // in the quaternion values, w is cosine (theta / 2),

         // where theta is the rotation angle

         deltaRot[3] = -vec3.dot(startVec, endVec);

       } else {

         // return an identity rotation quaternion

         deltaRot[0] = 0;

         deltaRot[1] = 0;

         deltaRot[2] = 0;

         deltaRot[3] = 1;

       }

       // calculate the current rotation based on the mouse click events

       quat4.multiply(lastRot, deltaRot, currentRot);

     } else {

       // save the current quaternion to stack rotations

       quat4.set(currentRot, lastRot);

     }

     let lastTrans = this._lastTrans;

     let deltaTrans = this._deltaTrans;

     let currentTrans = this._currentTrans;

     // right mouse button handles panning

     if (mouseButton === 3) {

       // calculate a delta translation between the new and old mouse position

       // and save it to the current translation

       deltaTrans[0] = mouseMove[0] - mousePress[0];

       deltaTrans[1] = mouseMove[1] - mousePress[1];

       currentTrans[0] = lastTrans[0] + deltaTrans[0];

       currentTrans[1] = lastTrans[1] + deltaTrans[1];

     } else {

       // save the current panning to stack translations

       lastTrans[0] = currentTrans[0];

       lastTrans[1] = currentTrans[1];

     }

     let zoomAmount = this._zoomAmount;

     let keyCode = this._keyCode;

     // mouse wheel handles zooming

     deltaTrans[2] = (zoomAmount - currentTrans[2]) * ARCBALL_ZOOM_STEP;

     currentTrans[2] += deltaTrans[2];

     let additionalRot = this._additionalRot;

     let additionalTrans = this._additionalTrans;

     let deltaAdditionalRot = this._deltaAdditionalRot;

     let deltaAdditionalTrans = this._deltaAdditionalTrans;

     let rotateKeys = this.rotateKeys;

     let panKeys = this.panKeys;

     let zoomKeys = this.zoomKeys;

     let resetKey = this.resetKey;

     // handle additional rotation and translation by the keyboard

     if (keyCode[rotateKeys.left]) {

       additionalRot[0] -= ARCBALL_SENSITIVITY * ARCBALL_ROTATION_STEP;

     }

     if (keyCode[rotateKeys.right]) {

       additionalRot[0] += ARCBALL_SENSITIVITY * ARCBALL_ROTATION_STEP;

     }

     if (keyCode[rotateKeys.up]) {

       additionalRot[1] += ARCBALL_SENSITIVITY * ARCBALL_ROTATION_STEP;

     }

     if (keyCode[rotateKeys.down]) {

       additionalRot[1] -= ARCBALL_SENSITIVITY * ARCBALL_ROTATION_STEP;

     }

     if (keyCode[panKeys.left]) {

       additionalTrans[0] -= ARCBALL_SENSITIVITY * ARCBALL_TRANSLATION_STEP;

     }

     if (keyCode[panKeys.right]) {

       additionalTrans[0] += ARCBALL_SENSITIVITY * ARCBALL_TRANSLATION_STEP;

     }

     if (keyCode[panKeys.up]) {

       additionalTrans[1] -= ARCBALL_SENSITIVITY * ARCBALL_TRANSLATION_STEP;

     }

     if (keyCode[panKeys.down]) {

       additionalTrans[1] += ARCBALL_SENSITIVITY * ARCBALL_TRANSLATION_STEP;

     }

     if (keyCode[zoomKeys["in"][0]] ||

         keyCode[zoomKeys["in"][1]] ||

         keyCode[zoomKeys["in"][2]]) {

       this.zoom(-ARCBALL_TRANSLATION_STEP);

     }

     if (keyCode[zoomKeys["out"][0]] ||

         keyCode[zoomKeys["out"][1]]) {

       this.zoom(ARCBALL_TRANSLATION_STEP);

     }

     if (keyCode[zoomKeys["unzoom"]]) {

       this._zoomAmount = 0;

     }

     if (keyCode[resetKey]) {

       this.reset();

     }

     // update the delta key rotations and translations

     deltaAdditionalRot[0] +=

       (additionalRot[0] - deltaAdditionalRot[0]) * ARCBALL_SENSITIVITY;

     deltaAdditionalRot[1] +=

       (additionalRot[1] - deltaAdditionalRot[1]) * ARCBALL_SENSITIVITY;

     deltaAdditionalRot[2] +=

       (additionalRot[2] - deltaAdditionalRot[2]) * ARCBALL_SENSITIVITY;

     deltaAdditionalTrans[0] +=

       (additionalTrans[0] - deltaAdditionalTrans[0]) * ARCBALL_SENSITIVITY;

     deltaAdditionalTrans[1] +=

       (additionalTrans[1] - deltaAdditionalTrans[1]) * ARCBALL_SENSITIVITY;

     // create an additional rotation based on the key events

     quat4.fromEuler(

       deltaAdditionalRot[0],

       deltaAdditionalRot[1],

       deltaAdditionalRot[2], deltaRot);

     // create an additional translation based on the key events

     vec3.set([deltaAdditionalTrans[0], deltaAdditionalTrans[1], 0], deltaTrans);

     // handle the reset animation steps if necessary

     if (this._resetInProgress) {

       this._nextResetStep(aDelta || 1);

     }

     // return the current rotation and translation

     return {

       rotation: quat4.multiply(deltaRot, currentRot),

       translation: vec3.add(deltaTrans, currentTrans)

     };

   },

   /**

    * Function handling the mouseDown event.

    * Call this when the mouse was pressed.

    *

    * @param {Number} x

    *                 the current horizontal coordinate of the mouse

    * @param {Number} y

    *                 the current vertical coordinate of the mouse

    * @param {Number} aButton

    *                 which mouse button was pressed

    */

   mouseDown: function TVA_mouseDown(x, y, aButton)

   {

     // save the mouse down state and prepare for rotations or translations

     this._mousePress[0] = x;

     this._mousePress[1] = y;

     this._mouseButton = aButton;

     this._cancelReset();

     this._save();

     // find the sphere coordinates of the mouse positions

     this._pointToSphere(

       x, y, this.width, this.height, this.radius, this._startVec);

     quat4.set(this._currentRot, this._lastRot);

   },

   /**

    * Function handling the mouseUp event.

    * Call this when a mouse button was released.

    *

    * @param {Number} x

    *                 the current horizontal coordinate of the mouse

    * @param {Number} y

    *                 the current vertical coordinate of the mouse

    */

   mouseUp: function TVA_mouseUp(x, y)

   {

     // save the mouse up state and prepare for rotations or translations

     this._mouseRelease[0] = x;

     this._mouseRelease[1] = y;

     this._mouseButton = -1;

   },

   /**

    * Function handling the mouseMove event.

    * Call this when the mouse was moved.

    *

    * @param {Number} x

    *                 the current horizontal coordinate of the mouse

    * @param {Number} y

    *                 the current vertical coordinate of the mouse

    */

   mouseMove: function TVA_mouseMove(x, y)

   {

     // save the mouse move state and prepare for rotations or translations

     // only if the mouse is pressed

     if (this._mouseButton !== -1) {

       this._mouseMove[0] = x;

       this._mouseMove[1] = y;

     }

   },

   /**

    * Function handling the mouseOver event.

    * Call this when the mouse enters the context bounds.

    */

   mouseOver: function TVA_mouseOver()

   {

     // if the mouse just entered the parent bounds, stop the animation

     this._mouseButton = -1;

   },

   /**

    * Function handling the mouseOut event.

    * Call this when the mouse leaves the context bounds.

    */

   mouseOut: function TVA_mouseOut()

   {

     // if the mouse leaves the parent bounds, stop the animation

     this._mouseButton = -1;

   },

   /**

    * Function handling the arcball zoom amount.

    * Call this, for example, when the mouse wheel was scrolled or zoom keys

    * were pressed.

    *

    * @param {Number} aZoom

    *                 the zoom direction and speed

    */

   zoom: function TVA_zoom(aZoom)

   {

     this._cancelReset();

     this._zoomAmount = TiltMath.clamp(this._zoomAmount - aZoom,

       ARCBALL_ZOOM_MIN, ARCBALL_ZOOM_MAX);

   },

   /**

    * Function handling the keyDown event.

    * Call this when a key was pressed.

    *

    * @param {Number} aCode

    *                 the code corresponding to the key pressed

    */

   keyDown: function TVA_keyDown(aCode)

   {

     this._cancelReset();

     this._keyCode[aCode] = true;

   },

   /**

    * Function handling the keyUp event.

    * Call this when a key was released.

    *

    * @param {Number} aCode

    *                 the code corresponding to the key released

    */

   keyUp: function TVA_keyUp(aCode)

   {

     this._keyCode[aCode] = false;

   },

   /**

    * Maps the 2d coordinates of the mouse location to a 3d point on a sphere.

    *

    * @param {Number} x

    *                 the current horizontal coordinate of the mouse

    * @param {Number} y

    *                 the current vertical coordinate of the mouse

    * @param {Number} aWidth

    *                 the width of canvas

    * @param {Number} aHeight

    *                 the height of canvas

    * @param {Number} aRadius

    *                 optional, the radius of the arcball

    * @param {Array} aSphereVec

    *                a 3d vector to store the sphere coordinates

    */

   _pointToSphere: function TVA__pointToSphere(

     x, y, aWidth, aHeight, aRadius, aSphereVec)

   {

     // adjust point coords and scale down to range of [-1..1]

     x = (x - aWidth * 0.5) / aRadius;

     y = (y - aHeight * 0.5) / aRadius;

     // compute the square length of the vector to the point from the center

     let normal = 0;

     let sqlength = x * x + y * y;

     // if the point is mapped outside of the sphere

     if (sqlength > 1) {

       // calculate the normalization factor

       normal = 1 / Math.sqrt(sqlength);

       // set the normalized vector (a point on the sphere)

       aSphereVec[0] = x * normal;

       aSphereVec[1] = y * normal;

       aSphereVec[2] = 0;

     } else {

       // set the vector to a point mapped inside the sphere

       aSphereVec[0] = x;

       aSphereVec[1] = y;

       aSphereVec[2] = Math.sqrt(1 - sqlength);

     }

   },

   /**

    * Cancels all pending transformations caused by key events.

    */

   cancelKeyEvents: function TVA_cancelKeyEvents()

   {

     this._keyCode = {};

   },

   /**

    * Cancels all pending transformations caused by mouse events.

    */

   cancelMouseEvents: function TVA_cancelMouseEvents()

   {

     this._rotating = false;

     this._mouseButton = -1;

   },

   /**

    * Incremental translation method.

    *

    * @param {Array} aTranslation

    *                the translation ammount on the [x, y] axis

    */

   translate: function TVP_translate(aTranslation)

   {

     this._additionalTrans[0] += aTranslation[0];

     this._additionalTrans[1] += aTranslation[1];

   },

   /**

    * Incremental rotation method.

    *

    * @param {Array} aRotation

    *                the rotation ammount along the [x, y, z] axis

    */

   rotate: function TVP_rotate(aRotation)

   {

     // explicitly rotate along y, x, z values because they're eulerian angles

     this._additionalRot[0] += TiltMath.radians(aRotation[1]);

     this._additionalRot[1] += TiltMath.radians(aRotation[0]);

     this._additionalRot[2] += TiltMath.radians(aRotation[2]);

   },

   /**

    * Moves a target point into view only if it's outside the currently visible

    * area bounds (in which case it also resets any additional transforms).

    *

    * @param {Arary} aPoint

    *                the [x, y] point which should be brought into view

    */

   moveIntoView: function TVA_moveIntoView(aPoint) {

     let visiblePointX = -(this._currentTrans[0] + this._additionalTrans[0]);

     let visiblePointY = -(this._currentTrans[1] + this._additionalTrans[1]);

     if (aPoint[1] - visiblePointY - MOVE_INTO_VIEW_ACCURACY > this.height ||

         aPoint[1] - visiblePointY + MOVE_INTO_VIEW_ACCURACY < 0 ||

         aPoint[0] - visiblePointX > this.width ||

         aPoint[0] - visiblePointX < 0) {

       this.reset([0, -aPoint[1]]);

     }

   },

   /**

    * Resize this implementation to use different bounds.

    * This function is automatically called when the arcball is created.

    *

    * @param {Number} newWidth

    *                 the new width of canvas

    * @param {Number} newHeight

    *                 the new  height of canvas

    * @param {Number} newRadius

    *                 optional, the new radius of the arcball

    */

   resize: function TVA_resize(newWidth, newHeight, newRadius)

   {

     if (!newWidth || !newHeight) {

       return;

     }

     // set the new width, height and radius dimensions

     this.width = newWidth;

     this.height = newHeight;

     this.radius = newRadius ? newRadius : Math.min(newWidth, newHeight);

     this._save();

   },

   /**

    * Starts an animation resetting the arcball transformations to identity.

    *

    * @param {Array} aFinalTranslation

    *                optional, final vector translation

    * @param {Array} aFinalRotation

    *                optional, final quaternion rotation

    */

   reset: function TVA_reset(aFinalTranslation, aFinalRotation)

   {

     if ("function" === typeof this._onResetStart) {

       this._onResetStart();

       this._onResetStart = null;

     }

     this.cancelMouseEvents();

     this.cancelKeyEvents();

     this._cancelReset();

     this._save();

     this._resetFinalTranslation = vec3.create(aFinalTranslation);

     this._resetFinalRotation = quat4.create(aFinalRotation);

     this._resetInProgress = true;

   },

   /**

    * Cancels the current arcball reset animation if there is one.

    */

   _cancelReset: function TVA__cancelReset()

   {

     if (this._resetInProgress) {

       this._resetInProgress = false;

       this._save();

       if ("function" === typeof this._onResetFinish) {

         this._onResetFinish();

         this._onResetFinish = null;

         this._onResetStep = null;

       }

     }

   },

   /**

    * Executes the next step in the arcball reset animation.

    *

    * @param {Number} aDelta

    *                 the current animation frame delta

    */

   _nextResetStep: function TVA__nextResetStep(aDelta)

   {

     // a very large animation frame delta (in case of seriously low framerate)

     // would cause all the interpolations to become highly unstable

     aDelta = TiltMath.clamp(aDelta, 1, 100);

     let fNearZero = EPSILON * EPSILON;

     let fInterpLin = ARCBALL_RESET_LINEAR_FACTOR * aDelta;

     let fInterpSph = ARCBALL_RESET_SPHERICAL_FACTOR;

     let fTran = this._resetFinalTranslation;

     let fRot = this._resetFinalRotation;

     let t = vec3.create(fTran);

     let r = quat4.multiply(quat4.inverse(quat4.create(this._currentRot)), fRot);

     // reset the rotation quaternion and translation vector

     vec3.lerp(this._currentTrans, t, fInterpLin);

     quat4.slerp(this._currentRot, r, fInterpSph);

     // also reset any additional transforms by the keyboard or mouse

     vec3.scale(this._additionalTrans, fInterpLin);

     vec3.scale(this._additionalRot, fInterpLin);

     this._zoomAmount *= fInterpLin;

     // clear the loop if the all values are very close to zero

     if (vec3.length(vec3.subtract(this._lastRot, fRot, [])) < fNearZero &&

         vec3.length(vec3.subtract(this._deltaRot, fRot, [])) < fNearZero &&

         vec3.length(vec3.subtract(this._currentRot, fRot, [])) < fNearZero &&

         vec3.length(vec3.subtract(this._lastTrans, fTran, [])) < fNearZero &&

         vec3.length(vec3.subtract(this._deltaTrans, fTran, [])) < fNearZero &&

         vec3.length(vec3.subtract(this._currentTrans, fTran, [])) < fNearZero &&

         vec3.length(this._additionalRot) < fNearZero &&

         vec3.length(this._additionalTrans) < fNearZero) {

       this._cancelReset();

     }

     if ("function" === typeof this._onResetStep) {

       this._onResetStep();

     }

   },

   /**

    * Loads the keys to control this arcball.

    */

   _loadKeys: function TVA__loadKeys()

   {

     this.rotateKeys = {

       "up": Ci.nsIDOMKeyEvent["DOM_VK_W"],

       "down": Ci.nsIDOMKeyEvent["DOM_VK_S"],

       "left": Ci.nsIDOMKeyEvent["DOM_VK_A"],

       "right": Ci.nsIDOMKeyEvent["DOM_VK_D"],

     };

     this.panKeys = {

       "up": Ci.nsIDOMKeyEvent["DOM_VK_UP"],

       "down": Ci.nsIDOMKeyEvent["DOM_VK_DOWN"],

       "left": Ci.nsIDOMKeyEvent["DOM_VK_LEFT"],

       "right": Ci.nsIDOMKeyEvent["DOM_VK_RIGHT"],

     };

     this.zoomKeys = {

       "in": [

         Ci.nsIDOMKeyEvent["DOM_VK_I"],

         Ci.nsIDOMKeyEvent["DOM_VK_ADD"],

         Ci.nsIDOMKeyEvent["DOM_VK_EQUALS"],

       ],

       "out": [

         Ci.nsIDOMKeyEvent["DOM_VK_O"],

         Ci.nsIDOMKeyEvent["DOM_VK_SUBTRACT"],

       ],

       "unzoom": Ci.nsIDOMKeyEvent["DOM_VK_0"]

     };

     this.resetKey = Ci.nsIDOMKeyEvent["DOM_VK_R"];

   },

   /**

    * Saves the current arcball state, typically after resize or mouse events.

    */

   _save: function TVA__save()

   {

     if (this._mousePress) {

       let x = this._mousePress[0];

       let y = this._mousePress[1];

       this._mouseMove[0] = x;

       this._mouseMove[1] = y;

       this._mouseRelease[0] = x;

       this._mouseRelease[1] = y;

       this._mouseLerp[0] = x;

       this._mouseLerp[1] = y;

     }

   },

   /**

    * Function called when this object is destroyed.

    */

   _finalize: function TVA__finalize()

   {

     this._cancelReset();

   }

 };

 /**

  * Tilt configuration preferences.

  */

 TiltVisualizer.Prefs = {

   /**

    * Specifies if Tilt is enabled or not.

    */

   get enabled()

   {

     return this._enabled;

   },

   set enabled(value)

   {

     TiltUtils.Preferences.set("enabled", "boolean", value);

     this._enabled = value;

   },

   get introTransition()

   {

     return this._introTransition;

   },

   set introTransition(value)

   {

     TiltUtils.Preferences.set("intro_transition", "boolean", value);

     this._introTransition = value;

   },

   get outroTransition()

   {

     return this._outroTransition;

   },

   set outroTransition(value)

   {

     TiltUtils.Preferences.set("outro_transition", "boolean", value);

     this._outroTransition = value;

   },

   /**

    * Loads the preferences.

    */

   load: function TVC_load()

   {

     let prefs = TiltVisualizer.Prefs;

     let get = TiltUtils.Preferences.get;

     prefs._enabled = get("enabled", "boolean");

     prefs._introTransition = get("intro_transition", "boolean");

     prefs._outroTransition = get("outro_transition", "boolean");

   }

 };

 /**

  * A custom visualization shader.

  *

  * @param {Attribute} vertexPosition: the vertex position

  * @param {Attribute} vertexTexCoord: texture coordinates used by the sampler

  * @param {Attribute} vertexColor: specific [r, g, b] color for each vertex

  * @param {Uniform} mvMatrix: the model view matrix

  * @param {Uniform} projMatrix: the projection matrix

  * @param {Uniform} sampler: the texture sampler to fetch the pixels from

  */

 TiltVisualizer.MeshShader = {

   /**

    * Vertex shader.

    */

   vs: [

     "attribute vec3 vertexPosition;",

     "attribute vec2 vertexTexCoord;",

     "attribute vec3 vertexColor;",

     "uniform mat4 mvMatrix;",

     "uniform mat4 projMatrix;",

     "varying vec2 texCoord;",

     "varying vec3 color;",

     "void main() {",

     "  gl_Position = projMatrix * mvMatrix * vec4(vertexPosition, 1.0);",

     "  texCoord = vertexTexCoord;",

     "  color = vertexColor;",

     "}"

   ].join("\n"),

   /**

    * Fragment shader.

    */

   fs: [

     "#ifdef GL_ES",

     "precision lowp float;",

     "#endif",

     "uniform sampler2D sampler;",

     "varying vec2 texCoord;",

     "varying vec3 color;",

     "void main() {",

     "  if (texCoord.x < 0.0) {",

     "    gl_FragColor = vec4(color, 1.0);",

     "  } else {",

     "    gl_FragColor = vec4(texture2D(sampler, texCoord).rgb, 1.0);",

     "  }",

     "}"

   ].join("\n")

 };