From bc3ed29333aa51cdc292f7dd2c6539254b5abdab Mon Sep 17 00:00:00 2001 From: Panos Astithas Date: Thu, 23 Feb 2012 09:41:00 +0200 Subject: [PATCH 01/29] Bug 697040 - The Script Debugger onNewScript notifications don't always fire; r=jimb,dcamp,rcampbell --- .../test/browser_dbg_debuggerstatement.js | 3 +- .../debugger/test/browser_dbg_listtabs.js | 2 +- .../debugger/server/dbg-browser-actors.js | 64 ++++++++++++++++--- .../debugger/server/dbg-script-actors.js | 11 +++- 4 files changed, 67 insertions(+), 13 deletions(-) diff --git a/browser/devtools/debugger/test/browser_dbg_debuggerstatement.js b/browser/devtools/debugger/test/browser_dbg_debuggerstatement.js index 520a8e53cda..a6a8fd7ca6b 100644 --- a/browser/devtools/debugger/test/browser_dbg_debuggerstatement.js +++ b/browser/devtools/debugger/test/browser_dbg_debuggerstatement.js @@ -34,7 +34,8 @@ function test_early_debugger_statement(aActor) gClient.addListener("paused", paused); // This should continue without nesting an event loop and calling // the onPaused hook, because we haven't attached yet. - gTab.linkedBrowser.contentWindow.wrappedJSObject.runDebuggerStatement(); + // TODO: uncomment this when bug 723563 is fixed. + //gTab.linkedBrowser.contentWindow.wrappedJSObject.runDebuggerStatement(); gClient.removeListener("paused", paused); diff --git a/browser/devtools/debugger/test/browser_dbg_listtabs.js b/browser/devtools/debugger/test/browser_dbg_listtabs.js index 8cca2953590..9c48ad8c66b 100644 --- a/browser/devtools/debugger/test/browser_dbg_listtabs.js +++ b/browser/devtools/debugger/test/browser_dbg_listtabs.js @@ -87,7 +87,7 @@ function test_attach_removed_tab() }); gClient.request({ to: gTab2Actor, type: "attach" }, function(aResponse) { - is(aResponse.type, "exited", "Tab should consider itself exited."); + is(aResponse.error, "noSuchActor", "Tab should be gone."); finish_test(); }); } diff --git a/toolkit/devtools/debugger/server/dbg-browser-actors.js b/toolkit/devtools/debugger/server/dbg-browser-actors.js index 69db4acb430..bb7798eb6fe 100644 --- a/toolkit/devtools/debugger/server/dbg-browser-actors.js +++ b/toolkit/devtools/debugger/server/dbg-browser-actors.js @@ -67,6 +67,7 @@ function BrowserRootActor(aConnection) this._actorFactories = null; this.onTabClosed = this.onTabClosed.bind(this); + this._onWindowCreated = this.onWindowCreated.bind(this); windowMediator.addListener(this); } @@ -75,6 +76,10 @@ BrowserRootActor.prototype = { * Return a 'hello' packet as specified by the Remote Debugging Protocol. */ sayHello: function BRA_sayHello() { + // Create the tab actor for the selected tab right away so that it gets a + // chance to listen to onNewScript notifications. + this._preInitTabActor(); + return { from: "root", applicationType: "browser", traits: [] }; @@ -114,10 +119,6 @@ BrowserRootActor.prototype = { while (e.hasMoreElements()) { let win = e.getNext(); - // Watch the window for tab closes so we can invalidate - // actors as needed. - this.watchWindow(win); - // List the tabs in this browser. let selectedBrowser = win.getBrowser().selectedBrowser; let browsers = win.getBrowser().browsers; @@ -178,16 +179,61 @@ BrowserRootActor.prototype = { this.exitTabActor(aEvent.target.linkedBrowser); }, + /** + * Handle location changes, by preinitializing a tab actor. + */ + onWindowCreated: function BRA_onWindowCreated(evt) { + if (evt.target === this.browser.contentDocument) { + this._preInitTabActor(); + } + }, + /** * Exit the tab actor of the specified tab. */ exitTabActor: function BRA_exitTabActor(aWindow) { + this.browser.removeEventListener("DOMWindowCreated", this._onWindowCreated, true); let actor = this._tabActors.get(aWindow); if (actor) { actor.exit(); } }, + /** + * Create the tab actor in the selected tab right away so that it gets a + * chance to listen to onNewScript notifications. + */ + _preInitTabActor: function BRA__preInitTabActor() { + let actorPool = new ActorPool(this.conn); + + // Walk over open browser windows. + let e = windowMediator.getEnumerator("navigator:browser"); + while (e.hasMoreElements()) { + let win = e.getNext(); + + // Watch the window for tab closes so we can invalidate + // actors as needed. + this.watchWindow(win); + + this.browser = win.getBrowser().selectedBrowser; + let actor = this._tabActors.get(this.browser); + if (actor) { + actor._detach(); + } + actor = new BrowserTabActor(this.conn, this.browser); + actor.parentID = this.actorID; + this._tabActors.set(this.browser, actor); + + actorPool.addActor(actor); + } + + this._tabActorPool = actorPool; + this.conn.addActorPool(this._tabActorPool); + + // Watch for globals being created in this tab. + this.browser.addEventListener("DOMWindowCreated", this._onWindowCreated, true); + }, + // nsIWindowMediatorListener onWindowTitleChange: function BRA_onWindowTitleChange(aWindow, aTitle) { }, onOpenWindow: function BRA_onOpenWindow(aWindow) { }, @@ -195,7 +241,7 @@ BrowserRootActor.prototype = { if (aWindow.getBrowser) { this.unwatchWindow(aWindow); } - }, + } } /** @@ -220,6 +266,7 @@ function BrowserTabActor(aConnection, aBrowser) this._browser = aBrowser; this._onWindowCreated = this.onWindowCreated.bind(this); + this._attach(); } // XXX (bug 710213): BrowserTabActor attach/detach/exit/disconnect is a @@ -290,7 +337,7 @@ BrowserTabActor.prototype = { this._pushContext(); // Watch for globals being created in this tab. - this.browser.addEventListener("DOMWindowCreated", this._onWindowCreated, true); + this.browser.addEventListener("DOMWindowCreated", this._onWindowCreated, false); this._attached = true; }, @@ -331,7 +378,7 @@ BrowserTabActor.prototype = { return; } - this.browser.removeEventListener("DOMWindowCreated", this._onWindowCreated, true); + this.browser.removeEventListener("DOMWindowCreated", this._onWindowCreated, false); this._popContext(); @@ -397,8 +444,7 @@ BrowserTabActor.prototype = { url: this.browser.contentDocument.URL }); } } - }, - + } }; /** diff --git a/toolkit/devtools/debugger/server/dbg-script-actors.js b/toolkit/devtools/debugger/server/dbg-script-actors.js index 3238f75afa9..cc894c9a7cf 100644 --- a/toolkit/devtools/debugger/server/dbg-script-actors.js +++ b/toolkit/devtools/debugger/server/dbg-script-actors.js @@ -99,12 +99,19 @@ ThreadActor.prototype = { this._dbg = new Debugger(); } + // TODO: Remove this horrible hack when bug 723563 is fixed. + // Make sure that a chrome window is not added as a debuggee when opening + // the debugger in an empty tab or during tests. + if (aGlobal.location && + (aGlobal.location.protocol == "about:" || + aGlobal.location.protocol == "chrome:")) { + return; + } + this.dbg.addDebuggee(aGlobal); this.dbg.uncaughtExceptionHook = this.uncaughtExceptionHook.bind(this); this.dbg.onDebuggerStatement = this.onDebuggerStatement.bind(this); this.dbg.onNewScript = this.onNewScript.bind(this); - // Keep the debugger disabled until a client attaches. - this.dbg.enabled = false; }, /** From 32380b1455e5ee1dcd4cd644ef383d189afcb607 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Sun, 29 Jan 2012 20:00:10 +0200 Subject: [PATCH 02/29] Bug 719042 - Tilt should use the new Highlighter API; r=rcampbell --- browser/devtools/highlighter/inspector.jsm | 4 +- browser/devtools/tilt/Tilt.jsm | 50 +++++++++++----------- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm index 8191e658689..8202ff9bd5b 100644 --- a/browser/devtools/highlighter/inspector.jsm +++ b/browser/devtools/highlighter/inspector.jsm @@ -584,10 +584,10 @@ InspectorUI.prototype = { this.restoreToolState(this.winID); this.win.focus(); + this.highlighter.highlight(); + Services.obs.notifyObservers({wrappedJSObject: this}, INSPECTOR_NOTIFICATIONS.OPENED, null); - - this.highlighter.highlight(); }, /** diff --git a/browser/devtools/tilt/Tilt.jsm b/browser/devtools/tilt/Tilt.jsm index f5b999d3e33..7645a4e477e 100644 --- a/browser/devtools/tilt/Tilt.jsm +++ b/browser/devtools/tilt/Tilt.jsm @@ -286,16 +286,18 @@ Tilt.prototype = { // FIXME: this shouldn't be done here, see bug #705131 let onOpened = function() { - if (this.currentInstance) { - this.chromeWindow.InspectorUI.stopInspecting(); - this.inspectButton.disabled = true; - this.highlighterContainer.style.display = "none"; + if (this.inspector && this.highlighter && this.currentInstance) { + this.inspector.stopInspecting(); + this.inspector.inspectToolbutton.disabled = true; + this.highlighter.hide(); } }.bind(this); let onClosed = function() { - this.inspectButton.disabled = false; - this.highlighterContainer.style.display = ""; + if (this.inspector && this.highlighter) { + this.inspector.inspectToolbutton.disabled = false; + this.highlighter.show(); + } }.bind(this); Services.obs.addObserver(onOpened, @@ -337,6 +339,22 @@ Tilt.prototype = { return this.visualizers[this.currentWindowId]; }, + /** + * Gets the current InspectorUI instance. + */ + get inspector() + { + return this.chromeWindow.InspectorUI; + }, + + /** + * Gets the current Highlighter instance from the InspectorUI. + */ + get highlighter() + { + return this.inspector.highlighter; + }, + /** * Gets the Tilt button in the Inspector toolbar. */ @@ -344,25 +362,5 @@ Tilt.prototype = { { return this.chromeWindow.document.getElementById( "inspector-3D-button"); - }, - - /** - * Gets the Inspect button in the Inspector toolbar. - * FIXME: this shouldn't be needed here, remove after bug #705131 - */ - get inspectButton() - { - return this.chromeWindow.document.getElementById( - "inspector-inspect-toolbutton"); - }, - - /** - * Gets the Highlighter contaniner stack. - * FIXME: this shouldn't be needed here, remove after bug #705131 - */ - get highlighterContainer() - { - return this.chromeWindow.document.getElementById( - "highlighter-container"); } }; From 000cbf4555cb81c8fcee2e6cdc48807415e77e53 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Thu, 2 Feb 2012 15:28:26 +0200 Subject: [PATCH 03/29] Bug 723435 - Properly cleanup enabled vertex attributes after a program is used in Tilt; r=rcampbell --- browser/devtools/tilt/TiltGL.jsm | 34 +++++++++++++--------- browser/devtools/tilt/TiltWorkerCrafter.js | 3 -- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/browser/devtools/tilt/TiltGL.jsm b/browser/devtools/tilt/TiltGL.jsm index 4e081e2ad27..0ece261c657 100644 --- a/browser/devtools/tilt/TiltGL.jsm +++ b/browser/devtools/tilt/TiltGL.jsm @@ -864,21 +864,29 @@ TiltGL.Program.prototype = { // use the the program if it wasn't already set this._context.useProgram(this._ref); + this.cleanupVertexAttrib(); - // check if the required vertex attributes aren't already set - if (utils._enabledAttributes < this._attributes.length) { - utils._enabledAttributes = this._attributes.length; - - // enable any necessary vertex attributes using the cache - for (let i in this._attributes) { - if (this._attributes.hasOwnProperty(i)) { - this._context.enableVertexAttribArray(this._attributes[i]); - } - } + // enable any necessary vertex attributes using the cache + for each (let attribute in this._attributes) { + this._context.enableVertexAttribArray(attribute); + utils._enabledAttributes.push(attribute); } } }, + /** + * Disables all currently enabled vertex attribute arrays. + */ + cleanupVertexAttrib: function TGLP_cleanupVertexAttrib() + { + let utils = TiltGL.ProgramUtils; + + for each (let attribute in utils._enabledAttributes) { + this._context.disableVertexAttribArray(attribute); + } + utils._enabledAttributes = []; + }, + /** * Binds a vertex buffer as an array buffer for a specific shader attribute. * @@ -949,9 +957,9 @@ TiltGL.Program.prototype = { { let gl = this._context; - gl.uniform1i(this._uniforms[aSampler], 0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, aTexture._ref); + gl.uniform1i(this._uniforms[aSampler], 0); }, /** @@ -1177,7 +1185,7 @@ TiltGL.ProgramUtils = { /** * Represents the current enabled attributes. */ - _enabledAttributes: -1 + _enabledAttributes: [] }; /** @@ -1615,5 +1623,5 @@ TiltGL.create3DContext = function TGL_create3DContext(aCanvas, aFlags) TiltGL.clearCache = function TGL_clearCache() { TiltGL.ProgramUtils._activeProgram = -1; - TiltGL.ProgramUtils._enabledAttributes = -1; + TiltGL.ProgramUtils._enabledAttributes = []; }; diff --git a/browser/devtools/tilt/TiltWorkerCrafter.js b/browser/devtools/tilt/TiltWorkerCrafter.js index 4f89a6f7181..5a90a45047b 100644 --- a/browser/devtools/tilt/TiltWorkerCrafter.js +++ b/browser/devtools/tilt/TiltWorkerCrafter.js @@ -38,9 +38,6 @@ ***** END LICENSE BLOCK *****/ "use strict"; -const SIXTEEN_OVER_255 = 16 / 255; -const ONE_OVER_255 = 1 / 255; - /** * Given the initialization data (thickness, sizes and information about * each DOM node) this worker sends back the arrays representing From 90b51b27622e2f5393f7c97c77623a83e7fb2039 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Fri, 3 Feb 2012 12:29:02 +0200 Subject: [PATCH 04/29] Bug 720992 - Tilt should use mozAnimation for all its animations, instead of intervals; r=rcampbell --- browser/devtools/tilt/Tilt.jsm | 1 - browser/devtools/tilt/TiltVisualizer.jsm | 199 +++++++++++------- .../browser_tilt_arcball-reset-typeahead.js | 12 ++ .../tilt/test/browser_tilt_arcball-reset.js | 12 ++ .../browser_tilt_picking_highlight01-offs.js | 2 +- .../test/browser_tilt_picking_highlight01.js | 2 +- .../tilt/test/browser_tilt_visualizer.js | 1 - 7 files changed, 145 insertions(+), 84 deletions(-) diff --git a/browser/devtools/tilt/Tilt.jsm b/browser/devtools/tilt/Tilt.jsm index 7645a4e477e..58bb4c33ee0 100644 --- a/browser/devtools/tilt/Tilt.jsm +++ b/browser/devtools/tilt/Tilt.jsm @@ -127,7 +127,6 @@ Tilt.prototype = { chromeWindow: this.chromeWindow, contentWindow: this.chromeWindow.gBrowser.selectedBrowser.contentWindow, parentNode: this.chromeWindow.gBrowser.selectedBrowser.parentNode, - requestAnimationFrame: this.chromeWindow.mozRequestAnimationFrame, notifications: this.NOTIFICATIONS }); diff --git a/browser/devtools/tilt/TiltVisualizer.jsm b/browser/devtools/tilt/TiltVisualizer.jsm index 17945b2ec4a..3054eb1bd07 100644 --- a/browser/devtools/tilt/TiltVisualizer.jsm +++ b/browser/devtools/tilt/TiltVisualizer.jsm @@ -57,21 +57,21 @@ const INVISIBLE_ELEMENTS = { const STACK_THICKNESS = 15; const WIREFRAME_COLOR = [0, 0, 0, 0.25]; -const INTRO_TRANSITION_DURATION = 50; -const OUTRO_TRANSITION_DURATION = 40; +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 = 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_FACTOR = 0.9; -const ARCBALL_RESET_INTERVAL = 1000 / 60; +const ARCBALL_RESET_SPHERICAL_FACTOR = 0.1; +const ARCBALL_RESET_LINEAR_FACTOR = 0.01; const TILT_CRAFTER = "resource:///modules/devtools/TiltWorkerCrafter.js"; const TILT_PICKER = "resource:///modules/devtools/TiltWorkerPicker.js"; @@ -92,7 +92,6 @@ let EXPORTED_SYMBOLS = ["TiltVisualizer"]; * {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 - * {Function} requestAnimationFrame: responsible with scheduling loops * {Object} notifications: necessary notifications for Tilt * {Function} onError: optional, function called if initialization failed * {Function} onLoad: optional, function called if initialization worked @@ -121,7 +120,6 @@ function TiltVisualizer(aProperties) this.presenter = new TiltVisualizer.Presenter(this.canvas, aProperties.chromeWindow, aProperties.contentWindow, - aProperties.requestAnimationFrame, aProperties.notifications, aProperties.onError || null, aProperties.onLoad || null); @@ -184,8 +182,6 @@ TiltVisualizer.prototype = { * a reference to the top-level window * @param {Window} aContentWindow * the content window holding the document to be visualized - * @param {Function} aRequestAnimationFrame - * function responsible with scheduling loop frames * @param {Object} aNotifications * necessary notifications for Tilt * @param {Function} onError @@ -194,8 +190,7 @@ TiltVisualizer.prototype = { * function called if initialization worked */ TiltVisualizer.Presenter = function TV_Presenter( - aCanvas, aChromeWindow, aContentWindow, aRequestAnimationFrame, aNotifications, - onError, onLoad) + aCanvas, aChromeWindow, aContentWindow, aNotifications, onError, onLoad) { /** * A canvas overlay used for drawing the visualization. @@ -271,14 +266,29 @@ TiltVisualizer.Presenter = function TV_Presenter( this.redraw = true; /** - * A frame counter, incremented each time the scene is redrawn. + * Total time passed since the rendering started. + * If the rendering is paused, this property won't get updated. */ - this.frames = 0; + 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; + + this.setup(); + this.loop(); +}; + +TiltVisualizer.Presenter.prototype = { /** * The initialization logic. */ - let setup = function TVP_setup() + setup: function TVP_setup() { let renderer = this.renderer; let inspector = this.chromeWindow.InspectorUI; @@ -301,16 +311,20 @@ TiltVisualizer.Presenter = function TV_Presenter( this.transforms.zoom = inspector.highlighter.zoom; } + // 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(); - }.bind(this); + }, /** * The animation logic. */ - let loop = function TVP_loop() + loop: function TVP_loop() { let renderer = this.renderer; @@ -320,7 +334,7 @@ TiltVisualizer.Presenter = function TV_Presenter( } // prepare for the next frame of the animation loop - aRequestAnimationFrame(loop); + this.chromeWindow.mozRequestAnimationFrame(this.loop); // only redraw if we really have to if (this.redraw) { @@ -330,17 +344,22 @@ TiltVisualizer.Presenter = function TV_Presenter( // call the attached ondraw function and handle all keyframe notifications if ("function" === typeof this.ondraw) { - this.ondraw(this.frames); + this.ondraw(this.time, this.delta); } + this.handleFrameDelta(); this.handleKeyframeNotifications(); - }.bind(this); + }, - setup(); - loop(); -}; - -TiltVisualizer.Presenter.prototype = { + /** + * 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. @@ -365,10 +384,10 @@ TiltVisualizer.Presenter.prototype = { let ortho = mat4.ortho(0, w, h, 0, -1000, 1000); if (!this.isExecutingDestruction) { - let f = this.frames / INTRO_TRANSITION_DURATION; + let f = this.time / INTRO_TRANSITION_DURATION; renderer.lerp(renderer.projMatrix, ortho, f, 8); } else { - let f = this.frames / OUTRO_TRANSITION_DURATION; + let f = this.time / OUTRO_TRANSITION_DURATION; renderer.lerp(renderer.projMatrix, ortho, 1 - f, 8); } @@ -395,11 +414,11 @@ TiltVisualizer.Presenter.prototype = { this.drawHighlight(); // make sure the initial transition is drawn until finished - if (this.frames < INTRO_TRANSITION_DURATION || - this.frames < OUTRO_TRANSITION_DURATION) { + if (this.time < INTRO_TRANSITION_DURATION || + this.time < OUTRO_TRANSITION_DURATION) { this.redraw = true; } - this.frames++; + this.time += this.delta; }, /** @@ -615,9 +634,6 @@ TiltVisualizer.Presenter.prototype = { */ setupEventListeners: function TVP_setupEventListeners() { - // bind the owner object to the necessary functions - TiltUtils.bindObjectFunc(this, "^on"); - this.contentWindow.addEventListener("resize", this.onResize, false); }, @@ -793,8 +809,7 @@ TiltVisualizer.Presenter.prototype = { this.highlight.disabled = true; this.redraw = true; - Services.obs.notifyObservers(null, - this.NOTIFICATIONS.NODE_REMOVED, null); + Services.obs.notifyObservers(null, this.NOTIFICATIONS.NODE_REMOVED, null); }, /** @@ -909,15 +924,17 @@ TiltVisualizer.Presenter.prototype = { handleKeyframeNotifications: function TV_handleKeyframeNotifications() { if (!TiltVisualizer.Prefs.introTransition && !this.isExecutingDestruction) { - this.frames = INTRO_TRANSITION_DURATION; + this.time = INTRO_TRANSITION_DURATION; } if (!TiltVisualizer.Prefs.outroTransition && this.isExecutingDestruction) { - this.frames = OUTRO_TRANSITION_DURATION; + this.time = OUTRO_TRANSITION_DURATION; } - if (this.frames === INTRO_TRANSITION_DURATION && + if (this.time >= INTRO_TRANSITION_DURATION && + !this.initializationFinished && !this.isExecutingDestruction) { + this.initializationFinished = true; Services.obs.notifyObservers(null, this.NOTIFICATIONS.INITIALIZED, null); if ("function" === typeof this.onInitializationFinished) { @@ -925,9 +942,11 @@ TiltVisualizer.Presenter.prototype = { } } - if (this.frames === OUTRO_TRANSITION_DURATION && + if (this.time >= OUTRO_TRANSITION_DURATION && + !this.destructionFinished && this.isExecutingDestruction) { + this.destructionFinished = true; Services.obs.notifyObservers(null, this.NOTIFICATIONS.BEFORE_DESTROYED, null); if ("function" === typeof this.onDestructionFinished) { @@ -953,8 +972,8 @@ TiltVisualizer.Presenter.prototype = { // proceed normally; otherwise, skip everything and immediately issue // the callback - if (this.frames > OUTRO_TRANSITION_DURATION) { - this.frames = 0; + if (this.time > OUTRO_TRANSITION_DURATION) { + this.time = 0; this.redraw = true; } else { aCallback(); @@ -1052,7 +1071,7 @@ TiltVisualizer.Controller = function TV_Controller(aCanvas, aPresenter) this.addEventListeners(); // attach this controller's update function to the presenter ondraw event - aPresenter.ondraw = this.update; + this.presenter.ondraw = this.update; }; TiltVisualizer.Controller.prototype = { @@ -1106,13 +1125,15 @@ TiltVisualizer.Controller.prototype = { /** * Function called each frame, updating the visualization camera transforms. * - * @param {Number} aFrames - * the current animation frame count + * @param {Number} aTime + * total time passed since rendering started + * @param {Number} aDelta + * the current animation frame delta */ - update: function TVC_update(aFrames) + update: function TVC_update(aTime, aDelta) { - this.frames = aFrames; - this.coordinates = this.arcball.update(); + this.time = aTime; + this.coordinates = this.arcball.update(aDelta); this.presenter.setRotation(this.coordinates.rotation); this.presenter.setTranslation(this.coordinates.translation); @@ -1127,7 +1148,7 @@ TiltVisualizer.Controller.prototype = { e.preventDefault(); e.stopPropagation(); - if (this.frames < MOUSE_INTRO_DELAY) { + if (this.time < MOUSE_INTRO_DELAY) { return; } @@ -1147,7 +1168,7 @@ TiltVisualizer.Controller.prototype = { e.preventDefault(); e.stopPropagation(); - if (this.frames < MOUSE_INTRO_DELAY) { + if (this.time < MOUSE_INTRO_DELAY) { return; } @@ -1175,7 +1196,7 @@ TiltVisualizer.Controller.prototype = { e.preventDefault(); e.stopPropagation(); - if (this.frames < MOUSE_INTRO_DELAY) { + if (this.time < MOUSE_INTRO_DELAY) { return; } @@ -1304,6 +1325,7 @@ TiltVisualizer.Controller.prototype = { TiltUtils.destroyObject(this.coordinates); this.removeEventListeners(); + this.presenter.controller = null; this.presenter.ondraw = null; } }; @@ -1394,9 +1416,12 @@ TiltVisualizer.Arcball.prototype = { * 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() + update: function TVA_update(aDelta) { let mousePress = this._mousePress; let mouseRelease = this._mouseRelease; @@ -1559,6 +1584,11 @@ TiltVisualizer.Arcball.prototype = { // 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), @@ -1583,7 +1613,7 @@ TiltVisualizer.Arcball.prototype = { this._mousePress[0] = x; this._mousePress[1] = y; this._mouseButton = aButton; - this._cancelResetInterval(); + this._cancelReset(); this._save(); // find the sphere coordinates of the mouse positions @@ -1659,7 +1689,7 @@ TiltVisualizer.Arcball.prototype = { */ zoom: function TVA_zoom(aZoom) { - this._cancelResetInterval(); + this._cancelReset(); this._zoomAmount = TiltMath.clamp(this._zoomAmount - aZoom, ARCBALL_ZOOM_MIN, ARCBALL_ZOOM_MAX); }, @@ -1673,7 +1703,7 @@ TiltVisualizer.Arcball.prototype = { */ keyDown: function TVA_keyDown(aCode) { - this._cancelResetInterval(); + this._cancelReset(); this._keyCode[aCode] = true; }, @@ -1808,43 +1838,48 @@ TiltVisualizer.Arcball.prototype = { this.onResetStart = null; } - let func = this._nextResetIntervalStep.bind(this); - this.cancelMouseEvents(); this.cancelKeyEvents(); - this._cancelResetInterval(); + this._cancelReset(); this._save(); this._resetFinalTranslation = vec3.create(aFinalTranslation); this._resetFinalRotation = quat4.create(aFinalRotation); - this._resetInterval = - this.chromeWindow.setInterval(func, ARCBALL_RESET_INTERVAL); + this._resetInProgress = true; }, /** * Cancels the current arcball reset animation if there is one. */ - _cancelResetInterval: function TVA__cancelResetInterval() + _cancelReset: function TVA__cancelReset() { - if (this._resetInterval) { - this.chromeWindow.clearInterval(this._resetInterval); - - this._resetInterval = null; + 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 */ - _nextResetIntervalStep: function TVA__nextResetIntervalStep() + _nextResetStep: function TVA__nextResetStep(aDelta) { - let fDelta = EPSILON * EPSILON; + // 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; @@ -1852,25 +1887,29 @@ TiltVisualizer.Arcball.prototype = { let r = quat4.multiply(quat4.inverse(quat4.create(this._currentRot)), fRot); // reset the rotation quaternion and translation vector - vec3.lerp(this._currentTrans, t, ARCBALL_RESET_FACTOR / 4); - quat4.slerp(this._currentRot, r, 1 - ARCBALL_RESET_FACTOR); + 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, ARCBALL_RESET_FACTOR); - vec3.scale(this._additionalRot, ARCBALL_RESET_FACTOR); - this._zoomAmount *= ARCBALL_RESET_FACTOR; + 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, [])) < fDelta && - vec3.length(vec3.subtract(this._deltaRot, fRot, [])) < fDelta && - vec3.length(vec3.subtract(this._currentRot, fRot, [])) < fDelta && - vec3.length(vec3.subtract(this._lastTrans, fTran, [])) < fDelta && - vec3.length(vec3.subtract(this._deltaTrans, fTran, [])) < fDelta && - vec3.length(vec3.subtract(this._currentTrans, fTran, [])) < fDelta && - vec3.length(this._additionalRot) < fDelta && - vec3.length(this._additionalTrans) < fDelta) { + 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._cancelResetInterval(); + this._cancelReset(); + } + + if ("function" === typeof this.onResetStep) { + this.onResetStep(); } }, @@ -1929,7 +1968,7 @@ TiltVisualizer.Arcball.prototype = { */ finalize: function TVA_finalize() { - this._cancelResetInterval(); + this._cancelReset(); } }; diff --git a/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js b/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js index d81672a819a..6c0ea861454 100644 --- a/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js +++ b/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js @@ -66,6 +66,18 @@ function performTest(canvas, arcball, callback) { info("Starting arcball reset animation."); }; + arcball.onResetStep = function() { + info("\nlastRot: " + quat4.str(arcball._lastRot) + + "\ndeltaRot: " + quat4.str(arcball._deltaRot) + + "\ncurrentRot: " + quat4.str(arcball._currentRot) + + "\nlastTrans: " + vec3.str(arcball._lastTrans) + + "\ndeltaTrans: " + vec3.str(arcball._deltaTrans) + + "\ncurrentTrans: " + vec3.str(arcball._currentTrans) + + "\nadditionalRot: " + vec3.str(arcball._additionalRot) + + "\nadditionalTrans: " + vec3.str(arcball._additionalTrans) + + "\nzoomAmount: " + arcball._zoomAmount); + }; + arcball.onResetFinish = function() { ok(isApproxVec(arcball._lastRot, [0, 0, 0, 1]), "The arcball _lastRot field wasn't reset correctly."); diff --git a/browser/devtools/tilt/test/browser_tilt_arcball-reset.js b/browser/devtools/tilt/test/browser_tilt_arcball-reset.js index 899345863b3..7f85103f624 100644 --- a/browser/devtools/tilt/test/browser_tilt_arcball-reset.js +++ b/browser/devtools/tilt/test/browser_tilt_arcball-reset.js @@ -64,6 +64,18 @@ function performTest(canvas, arcball, callback) { info("Starting arcball reset animation."); }; + arcball.onResetStep = function() { + info("\nlastRot: " + quat4.str(arcball._lastRot) + + "\ndeltaRot: " + quat4.str(arcball._deltaRot) + + "\ncurrentRot: " + quat4.str(arcball._currentRot) + + "\nlastTrans: " + vec3.str(arcball._lastTrans) + + "\ndeltaTrans: " + vec3.str(arcball._deltaTrans) + + "\ncurrentTrans: " + vec3.str(arcball._currentTrans) + + "\nadditionalRot: " + vec3.str(arcball._additionalRot) + + "\nadditionalTrans: " + vec3.str(arcball._additionalTrans) + + "\nzoomAmount: " + arcball._zoomAmount); + }; + arcball.onResetFinish = function() { ok(isApproxVec(arcball._lastRot, [0, 0, 0, 1]), "The arcball _lastRot field wasn't reset correctly."); diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js index 48485154998..f4e430c2fdc 100644 --- a/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js +++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js @@ -40,7 +40,7 @@ function whenHighlighting() { "Highlighting a node didn't work properly."); ok(!presenter.highlight.disabled, "After highlighting a node, it should be highlighted. D'oh."); - ok(presenter.controller.arcball._resetInterval, + ok(presenter.controller.arcball._resetInProgress, "Highlighting a node that's not already visible should trigger a reset!"); executeSoon(function() { diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js index 46ae839e71b..27ee04b93fd 100644 --- a/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js +++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js @@ -39,7 +39,7 @@ function whenHighlighting() { "Highlighting a node didn't work properly."); ok(!presenter.highlight.disabled, "After highlighting a node, it should be highlighted. D'oh."); - ok(!presenter.controller.arcball._resetInterval, + ok(!presenter.controller.arcball._resetInProgress, "Highlighting a node that's already visible shouldn't trigger a reset."); executeSoon(function() { diff --git a/browser/devtools/tilt/test/browser_tilt_visualizer.js b/browser/devtools/tilt/test/browser_tilt_visualizer.js index b1c87b6773e..666506536fa 100644 --- a/browser/devtools/tilt/test/browser_tilt_visualizer.js +++ b/browser/devtools/tilt/test/browser_tilt_visualizer.js @@ -19,7 +19,6 @@ function test() { chromeWindow: window, contentWindow: gBrowser.selectedBrowser.contentWindow, parentNode: gBrowser.selectedBrowser.parentNode, - requestAnimationFrame: window.mozRequestAnimationFrame, inspectorUI: window.InspectorUI, onError: function onWebGLError() From bc88b44e93da18e9ebe7296fe20111adc1d50b99 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Fri, 3 Feb 2012 12:55:15 +0200 Subject: [PATCH 05/29] Bug 723588 - Tilt outro animation doesn't correctly align the 3D mesh with the 2D webpage if the HTML panel is open; r=rcampbell --- browser/devtools/tilt/TiltGL.jsm | 2 ++ browser/devtools/tilt/TiltVisualizer.jsm | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/browser/devtools/tilt/TiltGL.jsm b/browser/devtools/tilt/TiltGL.jsm index 0ece261c657..9cb1844dea4 100644 --- a/browser/devtools/tilt/TiltGL.jsm +++ b/browser/devtools/tilt/TiltGL.jsm @@ -92,6 +92,8 @@ TiltGL.Renderer = function TGL_Renderer(aCanvas, onError, onLoad) */ this.width = aCanvas.width; this.height = aCanvas.height; + this.initialWidth = this.width; + this.initialHeight = this.height; /** * The current model view matrix. diff --git a/browser/devtools/tilt/TiltVisualizer.jsm b/browser/devtools/tilt/TiltVisualizer.jsm index 3054eb1bd07..a548dfb020c 100644 --- a/browser/devtools/tilt/TiltVisualizer.jsm +++ b/browser/devtools/tilt/TiltVisualizer.jsm @@ -370,6 +370,7 @@ TiltVisualizer.Presenter.prototype = { 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) { @@ -392,7 +393,7 @@ TiltVisualizer.Presenter.prototype = { } // apply the preliminary transformations to the model view - renderer.translate(w * 0.5, h * 0.5, -INITIAL_Z_TRANSLATION); + 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, From 3f5a32478c2e2210ef2f3fd12ecb9459889c6df6 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Tue, 7 Feb 2012 11:44:55 +0200 Subject: [PATCH 06/29] Bug 723937 - Make sure all the obviously private properties in Tilt start with an underscore; r=rcampbell --- browser/devtools/tilt/Tilt.jsm | 73 +-- browser/devtools/tilt/TiltUtils.jsm | 4 +- browser/devtools/tilt/TiltVisualizer.jsm | 467 +++++++++--------- .../browser_tilt_arcball-reset-typeahead.js | 12 +- .../tilt/test/browser_tilt_arcball-reset.js | 12 +- .../tilt/test/browser_tilt_arcball.js | 4 +- .../tilt/test/browser_tilt_controller.js | 6 +- .../tilt/test/browser_tilt_picking.js | 4 +- .../tilt/test/browser_tilt_picking_delete.js | 10 +- .../browser_tilt_picking_highlight01-offs.js | 6 +- .../test/browser_tilt_picking_highlight01.js | 6 +- .../test/browser_tilt_picking_highlight02.js | 6 +- .../test/browser_tilt_picking_highlight03.js | 6 +- .../tilt/test/browser_tilt_utils05.js | 4 - .../tilt/test/browser_tilt_utils06.js | 2 +- .../tilt/test/browser_tilt_visualizer.js | 30 +- .../devtools/tilt/test/browser_tilt_zoom.js | 2 +- browser/devtools/tilt/test/head.js | 2 + 18 files changed, 332 insertions(+), 324 deletions(-) diff --git a/browser/devtools/tilt/Tilt.jsm b/browser/devtools/tilt/Tilt.jsm index 58bb4c33ee0..ff795005220 100644 --- a/browser/devtools/tilt/Tilt.jsm +++ b/browser/devtools/tilt/Tilt.jsm @@ -140,7 +140,7 @@ Tilt.prototype = { }, /** - * Destroys a specific instance of the visualizer. + * Starts destroying a specific instance of the visualizer. * * @param {String} aId * the identifier of the instance in the visualizers array @@ -149,43 +149,49 @@ Tilt.prototype = { */ destroy: function T_destroy(aId, aAnimateFlag) { - // if the visualizer is already destroyed, don't do anything - if (!this.visualizers[aId]) { + // if the visualizer is destroyed or destroying, don't do anything + if (!this.visualizers[aId] || this._isDestroying) { + return; + } + this._isDestroying = true; + + let controller = this.visualizers[aId].controller; + let presenter = this.visualizers[aId].presenter; + + let content = presenter.contentWindow; + let pageXOffset = content.pageXOffset * presenter.transforms.zoom; + let pageYOffset = content.pageYOffset * presenter.transforms.zoom; + TiltUtils.setDocumentZoom(this.chromeWindow, presenter.transforms.zoom); + + // if we're not doing any outro animation, just finish destruction directly + if (!aAnimateFlag) { + this._finish(aId); return; } - if (!this.isDestroying) { - this.isDestroying = true; + // otherwise, trigger the outro animation and notify necessary observers + Services.obs.notifyObservers(null, TILT_NOTIFICATIONS.DESTROYING, null); - let finalize = function T_finalize(aId) { - this.visualizers[aId].removeOverlay(); - this.visualizers[aId].cleanup(); - this.visualizers[aId] = null; + controller.removeEventListeners(); + controller.arcball.reset([-pageXOffset, -pageYOffset]); + presenter.executeDestruction(this._finish.bind(this, aId)); + }, - this.isDestroying = false; - this.chromeWindow.gBrowser.selectedBrowser.focus(); - Services.obs.notifyObservers(null, TILT_NOTIFICATIONS.DESTROYED, null); - }; + /** + * Finishes detroying a specific instance of the visualizer. + * + * @param {String} aId + * the identifier of the instance in the visualizers array + */ + _finish: function T__finish(aId) + { + this.visualizers[aId].removeOverlay(); + this.visualizers[aId].cleanup(); + this.visualizers[aId] = null; - if (!aAnimateFlag) { - finalize.call(this, aId); - return; - } - - let controller = this.visualizers[aId].controller; - let presenter = this.visualizers[aId].presenter; - - let content = presenter.contentWindow; - let pageXOffset = content.pageXOffset * presenter.transforms.zoom; - let pageYOffset = content.pageYOffset * presenter.transforms.zoom; - - Services.obs.notifyObservers(null, TILT_NOTIFICATIONS.DESTROYING, null); - TiltUtils.setDocumentZoom(this.chromeWindow, presenter.transforms.zoom); - - controller.removeEventListeners(); - controller.arcball.reset([-pageXOffset, -pageYOffset]); - presenter.executeDestruction(finalize.bind(this, aId)); - } + this._isDestroying = false; + this.chromeWindow.gBrowser.selectedBrowser.focus(); + Services.obs.notifyObservers(null, TILT_NOTIFICATIONS.DESTROYED, null); }, /** @@ -359,7 +365,6 @@ Tilt.prototype = { */ get tiltButton() { - return this.chromeWindow.document.getElementById( - "inspector-3D-button"); + return this.chromeWindow.document.getElementById("inspector-3D-button"); } }; diff --git a/browser/devtools/tilt/TiltUtils.jsm b/browser/devtools/tilt/TiltUtils.jsm index c7c86589221..2b87aa5adb8 100644 --- a/browser/devtools/tilt/TiltUtils.jsm +++ b/browser/devtools/tilt/TiltUtils.jsm @@ -518,8 +518,8 @@ TiltUtils.destroyObject = function TU_destroyObject(aScope) } // objects in Tilt usually use a function to handle internal destruction - if ("function" === typeof aScope.finalize) { - aScope.finalize(); + if ("function" === typeof aScope._finalize) { + aScope._finalize(); } for (let i in aScope) { if (aScope.hasOwnProperty(i)) { diff --git a/browser/devtools/tilt/TiltVisualizer.jsm b/browser/devtools/tilt/TiltVisualizer.jsm index a548dfb020c..ff30530124b 100644 --- a/browser/devtools/tilt/TiltVisualizer.jsm +++ b/browser/devtools/tilt/TiltVisualizer.jsm @@ -215,25 +215,25 @@ TiltVisualizer.Presenter = function TV_Presenter( /** * Create the renderer, containing useful functions for easy drawing. */ - this.renderer = new TiltGL.Renderer(aCanvas, onError, onLoad); + this._renderer = new TiltGL.Renderer(aCanvas, onError, onLoad); /** * A custom shader used for drawing the visualization mesh. */ - this.visualizationProgram = null; + this._visualizationProgram = null; /** * The combined mesh representing the document visualization. */ - this.texture = null; - this.meshStacks = null; - this.meshWireframe = null; - this.traverseData = null; + this._texture = null; + this._meshStacks = null; + this._meshWireframe = null; + this._traverseData = null; /** * A highlight quad drawn over a stacked dom node. */ - this.highlight = { + this._highlight = { disabled: true, v0: vec3.create(), v1: vec3.create(), @@ -263,24 +263,25 @@ TiltVisualizer.Presenter = function TV_Presenter( * Variable specifying if the scene should be redrawn. * This should happen usually when the visualization is translated/rotated. */ - this.redraw = true; + this._redraw = true; /** * Total time passed since the rendering started. * If the rendering is paused, this property won't get updated. */ - this.time = 0; + 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; + this._delta = 0; + this._prevFrameTime = 0; + this._currFrameTime = 0; - this.setup(); - this.loop(); + + this._setup(); + this._loop(); }; TiltVisualizer.Presenter.prototype = { @@ -288,9 +289,9 @@ TiltVisualizer.Presenter.prototype = { /** * The initialization logic. */ - setup: function TVP_setup() + _setup: function TVP__setup() { - let renderer = this.renderer; + let renderer = this._renderer; let inspector = this.chromeWindow.InspectorUI; // if the renderer was destroyed, don't continue setup @@ -299,7 +300,7 @@ TiltVisualizer.Presenter.prototype = { } // create the visualization shaders and program to draw the stacks mesh - this.visualizationProgram = new renderer.Program({ + this._visualizationProgram = new renderer.Program({ vs: TiltVisualizer.MeshShader.vs, fs: TiltVisualizer.MeshShader.fs, attributes: ["vertexPosition", "vertexTexCoord", "vertexColor"], @@ -312,21 +313,21 @@ TiltVisualizer.Presenter.prototype = { } // bind the owner object to the necessary functions - TiltUtils.bindObjectFunc(this, "^on"); - TiltUtils.bindObjectFunc(this, "loop"); + TiltUtils.bindObjectFunc(this, "^_on"); + TiltUtils.bindObjectFunc(this, "_loop"); - this.setupTexture(); - this.setupMeshData(); - this.setupEventListeners(); + this._setupTexture(); + this._setupMeshData(); + this._setupEventListeners(); this.canvas.focus(); }, /** * The animation logic. */ - loop: function TVP_loop() + _loop: function TVP__loop() { - let renderer = this.renderer; + let renderer = this._renderer; // if the renderer was destroyed, don't continue rendering if (!renderer || !renderer.context) { @@ -334,46 +335,46 @@ TiltVisualizer.Presenter.prototype = { } // prepare for the next frame of the animation loop - this.chromeWindow.mozRequestAnimationFrame(this.loop); + this.chromeWindow.mozRequestAnimationFrame(this._loop); // only redraw if we really have to - if (this.redraw) { - this.redraw = false; - this.drawVisualization(); + if (this._redraw) { + this._redraw = false; + this._drawVisualization(); } - // call the attached ondraw function and handle all keyframe notifications - if ("function" === typeof this.ondraw) { - this.ondraw(this.time, this.delta); + // update the current presenter transfroms from the controller + if ("function" === typeof this._controllerUpdate) { + this._controllerUpdate(this._time, this._delta); } - this.handleFrameDelta(); - this.handleKeyframeNotifications(); + this._handleFrameDelta(); + this._handleKeyframeNotifications(); }, /** * Calculates the current frame delta time. */ - handleFrameDelta: function TVP_handleFrameDelta() + _handleFrameDelta: function TVP__handleFrameDelta() { - this.prevFrameTime = this.currFrameTime; - this.currFrameTime = this.chromeWindow.mozAnimationStartTime; - this.delta = this.currFrameTime - this.prevFrameTime; + 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() + _drawVisualization: function TVP__drawVisualization() { - let renderer = this.renderer; + 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) { + if (!this._meshStacks || !this._meshWireframe) { return; } @@ -384,11 +385,11 @@ TiltVisualizer.Presenter.prototype = { // 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; + 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; + let f = this._time / OUTRO_TRANSITION_DURATION; renderer.lerp(renderer.projMatrix, ortho, 1 - f, 8); } @@ -410,28 +411,28 @@ TiltVisualizer.Presenter.prototype = { // draw the visualization mesh renderer.strokeWeight(2); renderer.depthTest(true); - this.drawMeshStacks(); - this.drawMeshWireframe(); - this.drawHighlight(); + 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; + if (this._time < INTRO_TRANSITION_DURATION || + this._time < OUTRO_TRANSITION_DURATION) { + this._redraw = true; } - this.time += this.delta; + this._time += this._delta; }, /** * Draws the meshStacks object. */ - drawMeshStacks: function TVP_drawMeshStacks() + _drawMeshStacks: function TVP__drawMeshStacks() { - let renderer = this.renderer; - let mesh = this.meshStacks; + let renderer = this._renderer; + let mesh = this._meshStacks; - let visualizationProgram = this.visualizationProgram; - let texture = this.texture; + let visualizationProgram = this._visualizationProgram; + let texture = this._texture; let mvMatrix = renderer.mvMatrix; let projMatrix = renderer.projMatrix; @@ -458,10 +459,10 @@ TiltVisualizer.Presenter.prototype = { /** * Draws the meshWireframe object. */ - drawMeshWireframe: function TVP_drawMeshWireframe() + _drawMeshWireframe: function TVP__drawMeshWireframe() { - let renderer = this.renderer; - let mesh = this.meshWireframe; + let renderer = this._renderer; + let mesh = this._meshWireframe; // use the necessary shader renderer.useColorShader(mesh.vertices, WIREFRAME_COLOR); @@ -473,14 +474,14 @@ TiltVisualizer.Presenter.prototype = { /** * Draws a highlighted quad around a currently selected node. */ - drawHighlight: function TVP_drawHighlight() + _drawHighlight: function TVP__drawHighlight() { // check if there's anything to highlight (i.e any node is selected) - if (!this.highlight.disabled) { + if (!this._highlight.disabled) { // set the corresponding state to draw the highlight quad - let renderer = this.renderer; - let highlight = this.highlight; + let renderer = this._renderer; + let highlight = this._highlight; renderer.depthTest(false); renderer.fill(highlight.fill, 0.5); @@ -493,12 +494,12 @@ TiltVisualizer.Presenter.prototype = { /** * Creates or refreshes the texture applied to the visualization mesh. */ - setupTexture: function TVP_setupTexture() + _setupTexture: function TVP__setupTexture() { - let renderer = this.renderer; + let renderer = this._renderer; // destroy any previously created texture - TiltUtils.destroyObject(this.texture); + TiltUtils.destroyObject(this._texture); this._texture = null; // if the renderer was destroyed, don't continue setup if (!renderer || !renderer.context) { @@ -506,22 +507,22 @@ TiltVisualizer.Presenter.prototype = { } // get the maximum texture size - this.maxTextureSize = + 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({ + this._texture = new renderer.Texture({ source: TiltGL.TextureUtils.createContentImage(this.contentWindow, - this.maxTextureSize), + this._maxTextureSize), format: "RGB" }); - if ("function" === typeof this.onSetupTexture) { - this.onSetupTexture(); - this.onSetupTexture = null; + if ("function" === typeof this._onSetupTexture) { + this._onSetupTexture(); + this._onSetupTexture = null; } }, @@ -529,16 +530,16 @@ TiltVisualizer.Presenter.prototype = { * Create the combined mesh representing the document visualization by * traversing the document & adding a stack for each node that is drawable. * - * @param {Object} aData + * @param {Object} aMeshData * object containing the necessary mesh verts, texcoord etc. */ - setupMesh: function TVP_setupMesh(aData) + _setupMesh: function TVP__setupMesh(aMeshData) { - let renderer = this.renderer; + let renderer = this._renderer; // destroy any previously created mesh - TiltUtils.destroyObject(this.meshStacks); - TiltUtils.destroyObject(this.meshWireframe); + TiltUtils.destroyObject(this._meshStacks); this._meshStacks = null; + TiltUtils.destroyObject(this._meshWireframe); this._meshWireframe = null; // if the renderer was destroyed, don't continue setup if (!renderer || !renderer.context) { @@ -546,22 +547,22 @@ TiltVisualizer.Presenter.prototype = { } // save the mesh data for future use - this.meshData = aData; + this._meshData = aMeshData; // create the visualization mesh using the vertices, texture coordinates // and indices computed when traversing the document object model - this.meshStacks = { - vertices: new renderer.VertexBuffer(aData.vertices, 3), - texCoord: new renderer.VertexBuffer(aData.texCoord, 2), - color: new renderer.VertexBuffer(aData.color, 3), - indices: new renderer.IndexBuffer(aData.stacksIndices) + this._meshStacks = { + vertices: new renderer.VertexBuffer(aMeshData.vertices, 3), + texCoord: new renderer.VertexBuffer(aMeshData.texCoord, 2), + color: new renderer.VertexBuffer(aMeshData.color, 3), + indices: new renderer.IndexBuffer(aMeshData.stacksIndices) }; // additionally, create a wireframe representation to make the // visualization a bit more pretty - this.meshWireframe = { - vertices: this.meshStacks.vertices, - indices: new renderer.IndexBuffer(aData.wireframeIndices) + this._meshWireframe = { + vertices: this._meshStacks.vertices, + indices: new renderer.IndexBuffer(aMeshData.wireframeIndices) }; // if there's no initial selection made, highlight the required node @@ -583,22 +584,22 @@ TiltVisualizer.Presenter.prototype = { // make sure the canvas is opaque now that the initialization is finished this.canvas.style.background = TiltVisualizerStyle.canvas.background; - this.drawVisualization(); - this.redraw = true; + this._drawVisualization(); + this._redraw = true; } - if ("function" === typeof this.onSetupMesh) { - this.onSetupMesh(); - this.onSetupMesh = null; + if ("function" === typeof this._onSetupMesh) { + this._onSetupMesh(); + this._onSetupMesh = null; } }, /** * Computes the mesh vertices, texture coordinates etc. */ - setupMeshData: function TVP_setupMeshData() + _setupMeshData: function TVP__setupMeshData() { - let renderer = this.renderer; + let renderer = this._renderer; // if the renderer was destroyed, don't continue setup if (!renderer || !renderer.context) { @@ -606,17 +607,17 @@ TiltVisualizer.Presenter.prototype = { } // traverse the document and get the depths, coordinates and local names - this.traverseData = TiltUtils.DOM.traverse(this.contentWindow, { + this._traverseData = TiltUtils.DOM.traverse(this.contentWindow, { invisibleElements: INVISIBLE_ELEMENTS, minSize: ELEMENT_MIN_SIZE, - maxX: this.texture.width, - maxY: this.texture.height + 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); + this._setupMesh(event.data); }.bind(this), false); // calculate necessary information regarding vertices, texture coordinates @@ -624,34 +625,34 @@ TiltVisualizer.Presenter.prototype = { worker.postMessage({ thickness: STACK_THICKNESS, style: TiltVisualizerStyle.nodes, - texWidth: this.texture.width, - texHeight: this.texture.height, - nodesInfo: this.traverseData.info + texWidth: this._texture.width, + texHeight: this._texture.height, + nodesInfo: this._traverseData.info }); }, /** * Sets up event listeners necessary for the presenter. */ - setupEventListeners: function TVP_setupEventListeners() + _setupEventListeners: function TVP__setupEventListeners() { - this.contentWindow.addEventListener("resize", this.onResize, false); + this.contentWindow.addEventListener("resize", this._onResize, false); }, /** * Called when the content window of the current browser is resized. */ - onResize: function TVP_onResize(e) + _onResize: function TVP_onResize(e) { let zoom = this.chromeWindow.InspectorUI.highlighter.zoom; 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._renderer.width = width; + this._renderer.height = height; - this.redraw = true; + this._redraw = true; }, /** @@ -664,7 +665,7 @@ TiltVisualizer.Presenter.prototype = { */ highlightNode: function TVP_highlightNode(aNode, aFlags) { - this.highlightNodeFor(this.traverseData.nodes.indexOf(aNode), aFlags); + this.highlightNodeFor(this._traverseData.nodes.indexOf(aNode), aFlags); }, /** @@ -722,13 +723,13 @@ TiltVisualizer.Presenter.prototype = { * information supplied. * * @param {Number} aNodeIndex - * the index of the node in the this.traverseData array + * 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; + this._redraw = true; // if the node was already selected, don't do anything if (this._currentSelection === aNodeIndex) { @@ -738,15 +739,15 @@ TiltVisualizer.Presenter.prototype = { // if an invalid or nonexisted node is specified, disable the highlight if (aNodeIndex < 0) { this._currentSelection = -1; - this.highlight.disabled = true; + this._highlight.disabled = true; Services.obs.notifyObservers(null, this.NOTIFICATIONS.UNHIGHLIGHTING, null); return; } - let highlight = this.highlight; - let info = this.traverseData.info[aNodeIndex]; - let node = this.traverseData.nodes[aNodeIndex]; + let highlight = this._highlight; + let info = this._traverseData.info[aNodeIndex]; + let node = this._traverseData.nodes[aNodeIndex]; let style = TiltVisualizerStyle.nodes; highlight.disabled = false; @@ -778,8 +779,8 @@ TiltVisualizer.Presenter.prototype = { 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)); + vec3.scale(this._highlight.v0, this.transforms.zoom, []), + vec3.scale(this._highlight.v1, this.transforms.zoom, []), 0.5)); } Services.obs.notifyObservers(null, this.NOTIFICATIONS.HIGHLIGHTING, null); @@ -789,7 +790,7 @@ TiltVisualizer.Presenter.prototype = { * Deletes a node from the visualization mesh. * * @param {Number} aNodeIndex - * the index of the node in the this.traverseData array; + * 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) @@ -799,16 +800,16 @@ TiltVisualizer.Presenter.prototype = { return; } - let renderer = this.renderer; - let meshData = this.meshData; + let renderer = this._renderer; + let vertices = this._meshData.vertices; for (let i = 0, k = 36 * aNodeIndex; i < 36; i++) { - meshData.vertices[i + k] = 0; + vertices[i + k] = 0; } - this.meshStacks.vertices = new renderer.VertexBuffer(meshData.vertices, 3); - this.highlight.disabled = true; - this.redraw = true; + this._meshStacks.vertices = new renderer.VertexBuffer(vertices, 3); + this._highlight.disabled = true; + this._redraw = true; Services.obs.notifyObservers(null, this.NOTIFICATIONS.NODE_REMOVED, null); }, @@ -832,7 +833,7 @@ TiltVisualizer.Presenter.prototype = { aProperties = aProperties || {}; // if the mesh wasn't created yet, don't continue picking - if (!this.meshStacks || !this.meshWireframe) { + if (!this._meshStacks || !this._meshWireframe) { return; } @@ -851,9 +852,9 @@ TiltVisualizer.Presenter.prototype = { }, false); let zoom = this.chromeWindow.InspectorUI.highlighter.zoom; - let width = this.renderer.width * zoom; - let height = this.renderer.height * zoom; - let mesh = this.meshStacks; + let width = this._renderer.width * zoom; + let height = this._renderer.height * zoom; + let mesh = this._meshStacks; x *= zoom; y *= zoom; @@ -890,7 +891,7 @@ TiltVisualizer.Presenter.prototype = { transforms.translation[2] !== z) { vec3.set(aTranslation, transforms.translation); - this.redraw = true; + this._redraw = true; } }, @@ -915,43 +916,43 @@ TiltVisualizer.Presenter.prototype = { transforms.rotation[3] !== w) { quat4.set(aQuaternion, transforms.rotation); - this.redraw = true; + this._redraw = true; } }, /** * Handles notifications at specific frame counts. */ - handleKeyframeNotifications: function TV_handleKeyframeNotifications() + _handleKeyframeNotifications: function TV__handleKeyframeNotifications() { - if (!TiltVisualizer.Prefs.introTransition && !this.isExecutingDestruction) { - this.time = INTRO_TRANSITION_DURATION; + if (!TiltVisualizer.Prefs.introTransition && !this._isExecutingDestruction) { + this._time = INTRO_TRANSITION_DURATION; } - if (!TiltVisualizer.Prefs.outroTransition && this.isExecutingDestruction) { - this.time = OUTRO_TRANSITION_DURATION; + if (!TiltVisualizer.Prefs.outroTransition && this._isExecutingDestruction) { + this._time = OUTRO_TRANSITION_DURATION; } - if (this.time >= INTRO_TRANSITION_DURATION && - !this.initializationFinished && - !this.isExecutingDestruction) { + if (this._time >= INTRO_TRANSITION_DURATION && + !this._isInitializationFinished && + !this._isExecutingDestruction) { - this.initializationFinished = true; + this._isInitializationFinished = true; Services.obs.notifyObservers(null, this.NOTIFICATIONS.INITIALIZED, null); - if ("function" === typeof this.onInitializationFinished) { - this.onInitializationFinished(); + if ("function" === typeof this._onInitializationFinished) { + this._onInitializationFinished(); } } - if (this.time >= OUTRO_TRANSITION_DURATION && - !this.destructionFinished && - this.isExecutingDestruction) { + if (this._time >= OUTRO_TRANSITION_DURATION && + !this._isDestructionFinished && + this._isExecutingDestruction) { - this.destructionFinished = true; + this._isDestructionFinished = true; Services.obs.notifyObservers(null, this.NOTIFICATIONS.BEFORE_DESTROYED, null); - if ("function" === typeof this.onDestructionFinished) { - this.onDestructionFinished(); + if ("function" === typeof this._onDestructionFinished) { + this._onDestructionFinished(); } } }, @@ -965,17 +966,17 @@ TiltVisualizer.Presenter.prototype = { */ executeDestruction: function TV_executeDestruction(aCallback) { - if (!this.isExecutingDestruction) { - this.isExecutingDestruction = true; - this.onDestructionFinished = 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; + if (this._time > OUTRO_TRANSITION_DURATION) { + this._time = 0; + this._redraw = true; } else { aCallback(); } @@ -989,33 +990,33 @@ TiltVisualizer.Presenter.prototype = { */ isInitialized: function TVP_isInitialized() { - return this.renderer && this.renderer.context; + return this._renderer && this._renderer.context; }, /** * Function called when this object is destroyed. */ - finalize: function TVP_finalize() + _finalize: function TVP__finalize() { - TiltUtils.destroyObject(this.visualizationProgram); - TiltUtils.destroyObject(this.texture); + TiltUtils.destroyObject(this._visualizationProgram); + TiltUtils.destroyObject(this._texture); - if (this.meshStacks) { - TiltUtils.destroyObject(this.meshStacks.vertices); - TiltUtils.destroyObject(this.meshStacks.texCoord); - TiltUtils.destroyObject(this.meshStacks.color); - TiltUtils.destroyObject(this.meshStacks.indices); + if (this._meshStacks) { + TiltUtils.destroyObject(this._meshStacks.vertices); + TiltUtils.destroyObject(this._meshStacks.texCoord); + TiltUtils.destroyObject(this._meshStacks.color); + TiltUtils.destroyObject(this._meshStacks.indices); } - if (this.meshWireframe) { - TiltUtils.destroyObject(this.meshWireframe.indices); + if (this._meshWireframe) { + TiltUtils.destroyObject(this._meshWireframe.indices); } - TiltUtils.destroyObject(this.highlight); + TiltUtils.destroyObject(this._renderer); + TiltUtils.destroyObject(this._highlight); TiltUtils.destroyObject(this.transforms); - TiltUtils.destroyObject(this.renderer); - this.contentWindow.removeEventListener("resize", this.onResize, false); + this.contentWindow.removeEventListener("resize", this._onResize, false); } }; @@ -1043,36 +1044,36 @@ TiltVisualizer.Controller = function TV_Controller(aCanvas, aPresenter) /** * 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; + 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.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 + 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; + this._coordinates = null; // bind the owner object to the necessary functions - TiltUtils.bindObjectFunc(this, "update"); - TiltUtils.bindObjectFunc(this, "^on"); + 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.ondraw = this.update; + this.presenter._controllerUpdate = this._update; }; TiltVisualizer.Controller.prototype = { @@ -1086,19 +1087,19 @@ TiltVisualizer.Controller.prototype = { 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("keypress", this.onKeyPress, true); - canvas.addEventListener("blur", this.onBlur, false); + 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("keypress", this._onKeyPress, true); + canvas.addEventListener("blur", this._onBlur, false); // handle resize events to change the arcball dimensions - presenter.contentWindow.addEventListener("resize", this.onResize, false); + presenter.contentWindow.addEventListener("resize", this._onResize, false); }, /** @@ -1109,18 +1110,18 @@ TiltVisualizer.Controller.prototype = { 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("keypress", this.onKeyPress, true); - canvas.removeEventListener("blur", this.onBlur, false); + 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("keypress", this._onKeyPress, true); + canvas.removeEventListener("blur", this._onBlur, false); - presenter.contentWindow.removeEventListener("resize", this.onResize,false); + presenter.contentWindow.removeEventListener("resize", this._onResize, false); }, /** @@ -1131,25 +1132,25 @@ TiltVisualizer.Controller.prototype = { * @param {Number} aDelta * the current animation frame delta */ - update: function TVC_update(aTime, aDelta) + _update: function TVC__update(aTime, aDelta) { - this.time = aTime; - this.coordinates = this.arcball.update(aDelta); + this._time = aTime; + this._coordinates = this.arcball.update(aDelta); - this.presenter.setRotation(this.coordinates.rotation); - this.presenter.setTranslation(this.coordinates.translation); + 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) + _onMouseDown: function TVC__onMouseDown(e) { e.target.focus(); e.preventDefault(); e.stopPropagation(); - if (this.time < MOUSE_INTRO_DELAY) { + if (this._time < MOUSE_INTRO_DELAY) { return; } @@ -1164,12 +1165,12 @@ TiltVisualizer.Controller.prototype = { /** * Called every time a mouse button is released. */ - onMouseUp: function TVC_onMouseUp(e) + _onMouseUp: function TVC__onMouseUp(e) { e.preventDefault(); e.stopPropagation(); - if (this.time < MOUSE_INTRO_DELAY) { + if (this._time < MOUSE_INTRO_DELAY) { return; } @@ -1192,12 +1193,12 @@ TiltVisualizer.Controller.prototype = { /** * Called every time the mouse moves. */ - onMouseMove: function TVC_onMouseMove(e) + _onMouseMove: function TVC__onMouseMove(e) { e.preventDefault(); e.stopPropagation(); - if (this.time < MOUSE_INTRO_DELAY) { + if (this._time < MOUSE_INTRO_DELAY) { return; } @@ -1211,7 +1212,7 @@ TiltVisualizer.Controller.prototype = { /** * Called when the mouse leaves the visualization bounds. */ - onMouseOver: function TVC_onMouseOver(e) + _onMouseOver: function TVC__onMouseOver(e) { e.preventDefault(); e.stopPropagation(); @@ -1222,7 +1223,7 @@ TiltVisualizer.Controller.prototype = { /** * Called when the mouse leaves the visualization bounds. */ - onMouseOut: function TVC_onMouseOut(e) + _onMouseOut: function TVC__onMouseOut(e) { e.preventDefault(); e.stopPropagation(); @@ -1233,7 +1234,7 @@ TiltVisualizer.Controller.prototype = { /** * Called when the mouse wheel is used. */ - onMozScroll: function TVC_onMozScroll(e) + _onMozScroll: function TVC__onMozScroll(e) { e.preventDefault(); e.stopPropagation(); @@ -1244,7 +1245,7 @@ TiltVisualizer.Controller.prototype = { /** * Called when a key is pressed. */ - onKeyDown: function TVC_onKeyDown(e) + _onKeyDown: function TVC__onKeyDown(e) { let code = e.keyCode || e.which; @@ -1260,7 +1261,7 @@ TiltVisualizer.Controller.prototype = { /** * Called when a key is released. */ - onKeyUp: function TVC_onKeyUp(e) + _onKeyUp: function TVC__onKeyUp(e) { let code = e.keyCode || e.which; @@ -1277,7 +1278,7 @@ TiltVisualizer.Controller.prototype = { /** * Called when a key is pressed. */ - onKeyPress: function TVC_onKeyPress(e) + _onKeyPress: function TVC__onKeyPress(e) { let tilt = this.presenter.chromeWindow.Tilt; @@ -1291,14 +1292,14 @@ TiltVisualizer.Controller.prototype = { /** * Called when the canvas looses focus. */ - onBlur: function TVC_onBlur(e) { + _onBlur: function TVC__onBlur(e) { this.arcball.cancelKeyEvents(); }, /** * Called when the content window of the current browser is resized. */ - onResize: function TVC_onResize(e) + _onResize: function TVC__onResize(e) { let zoom = this.presenter.chromeWindow.InspectorUI.highlighter.zoom; let width = e.target.innerWidth * zoom; @@ -1320,14 +1321,14 @@ TiltVisualizer.Controller.prototype = { /** * Function called when this object is destroyed. */ - finalize: function TVC_finalize() + _finalize: function TVC__finalize() { TiltUtils.destroyObject(this.arcball); - TiltUtils.destroyObject(this.coordinates); + TiltUtils.destroyObject(this._coordinates); this.removeEventListeners(); this.presenter.controller = null; - this.presenter.ondraw = null; + this.presenter._controllerUpdate = null; } }; @@ -1460,7 +1461,7 @@ TiltVisualizer.Arcball.prototype = { this._rotating = true; // find the sphere coordinates of the mouse positions - this.pointToSphere(x, y, this.width, this.height, this.radius, endVec); + 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); @@ -1618,7 +1619,7 @@ TiltVisualizer.Arcball.prototype = { this._save(); // find the sphere coordinates of the mouse positions - this.pointToSphere( + this._pointToSphere( x, y, this.width, this.height, this.radius, this._startVec); quat4.set(this._currentRot, this._lastRot); @@ -1736,7 +1737,7 @@ TiltVisualizer.Arcball.prototype = { * @param {Array} aSphereVec * a 3d vector to store the sphere coordinates */ - pointToSphere: function TVA_pointToSphere( + _pointToSphere: function TVA__pointToSphere( x, y, aWidth, aHeight, aRadius, aSphereVec) { // adjust point coords and scale down to range of [-1..1] @@ -1834,9 +1835,9 @@ TiltVisualizer.Arcball.prototype = { */ reset: function TVA_reset(aFinalTranslation, aFinalRotation) { - if ("function" === typeof this.onResetStart) { - this.onResetStart(); - this.onResetStart = null; + if ("function" === typeof this._onResetStart) { + this._onResetStart(); + this._onResetStart = null; } this.cancelMouseEvents(); @@ -1858,10 +1859,10 @@ TiltVisualizer.Arcball.prototype = { this._resetInProgress = false; this._save(); - if ("function" === typeof this.onResetFinish) { - this.onResetFinish(); - this.onResetFinish = null; - this.onResetStep = null; + if ("function" === typeof this._onResetFinish) { + this._onResetFinish(); + this._onResetFinish = null; + this._onResetStep = null; } } }, @@ -1909,8 +1910,8 @@ TiltVisualizer.Arcball.prototype = { this._cancelReset(); } - if ("function" === typeof this.onResetStep) { - this.onResetStep(); + if ("function" === typeof this._onResetStep) { + this._onResetStep(); } }, @@ -1967,7 +1968,7 @@ TiltVisualizer.Arcball.prototype = { /** * Function called when this object is destroyed. */ - finalize: function TVA_finalize() + _finalize: function TVA__finalize() { this._cancelReset(); } diff --git a/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js b/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js index 6c0ea861454..2cb99eb0624 100644 --- a/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js +++ b/browser/devtools/tilt/test/browser_tilt_arcball-reset-typeahead.js @@ -62,11 +62,11 @@ function performTest(canvas, arcball, callback) { window.setTimeout(function() { info("Synthesizing arcball reset key press."); - arcball.onResetStart = function() { + arcball._onResetStart = function() { info("Starting arcball reset animation."); }; - arcball.onResetStep = function() { + arcball._onResetStep = function() { info("\nlastRot: " + quat4.str(arcball._lastRot) + "\ndeltaRot: " + quat4.str(arcball._deltaRot) + "\ncurrentRot: " + quat4.str(arcball._currentRot) + @@ -78,7 +78,7 @@ function performTest(canvas, arcball, callback) { "\nzoomAmount: " + arcball._zoomAmount); }; - arcball.onResetFinish = function() { + arcball._onResetFinish = function() { ok(isApproxVec(arcball._lastRot, [0, 0, 0, 1]), "The arcball _lastRot field wasn't reset correctly."); ok(isApproxVec(arcball._deltaRot, [0, 0, 0, 1]), @@ -101,8 +101,10 @@ function performTest(canvas, arcball, callback) { ok(isApproxVec([arcball._zoomAmount], [0]), "The arcball _zoomAmount field wasn't reset correctly."); - info("Finishing arcball reset test."); - callback(); + executeSoon(function() { + info("Finishing arcball reset test."); + callback(); + }); }; EventUtils.synthesizeKey("VK_R", { type: "keydown" }); diff --git a/browser/devtools/tilt/test/browser_tilt_arcball-reset.js b/browser/devtools/tilt/test/browser_tilt_arcball-reset.js index 7f85103f624..42a0ac2de75 100644 --- a/browser/devtools/tilt/test/browser_tilt_arcball-reset.js +++ b/browser/devtools/tilt/test/browser_tilt_arcball-reset.js @@ -60,11 +60,11 @@ function performTest(canvas, arcball, callback) { window.setTimeout(function() { info("Synthesizing arcball reset key press."); - arcball.onResetStart = function() { + arcball._onResetStart = function() { info("Starting arcball reset animation."); }; - arcball.onResetStep = function() { + arcball._onResetStep = function() { info("\nlastRot: " + quat4.str(arcball._lastRot) + "\ndeltaRot: " + quat4.str(arcball._deltaRot) + "\ncurrentRot: " + quat4.str(arcball._currentRot) + @@ -76,7 +76,7 @@ function performTest(canvas, arcball, callback) { "\nzoomAmount: " + arcball._zoomAmount); }; - arcball.onResetFinish = function() { + arcball._onResetFinish = function() { ok(isApproxVec(arcball._lastRot, [0, 0, 0, 1]), "The arcball _lastRot field wasn't reset correctly."); ok(isApproxVec(arcball._deltaRot, [0, 0, 0, 1]), @@ -99,8 +99,10 @@ function performTest(canvas, arcball, callback) { ok(isApproxVec([arcball._zoomAmount], [0]), "The arcball _zoomAmount field wasn't reset correctly."); - info("Finishing arcball reset test."); - callback(); + executeSoon(function() { + info("Finishing arcball reset test."); + callback(); + }); }; EventUtils.synthesizeKey("VK_R", { type: "keydown" }); diff --git a/browser/devtools/tilt/test/browser_tilt_arcball.js b/browser/devtools/tilt/test/browser_tilt_arcball.js index bcbe0a47e66..3d1078e1bc3 100644 --- a/browser/devtools/tilt/test/browser_tilt_arcball.js +++ b/browser/devtools/tilt/test/browser_tilt_arcball.js @@ -48,10 +48,10 @@ function test() { let arcball3 = new TiltVisualizer.Arcball(window, 512, 512); let sphereVec = vec3.create(); - arcball3.pointToSphere(123, 456, 256, 512, 512, sphereVec); + arcball3._pointToSphere(123, 456, 256, 512, 512, sphereVec); ok(isApproxVec(sphereVec, [-0.009765625, 0.390625, 0.9204980731010437]), - "The pointToSphere() function didn't map the coordinates correctly."); + "The _pointToSphere() function didn't map the coordinates correctly."); let stack1 = []; let expect1 = [ diff --git a/browser/devtools/tilt/test/browser_tilt_controller.js b/browser/devtools/tilt/test/browser_tilt_controller.js index be03ba48709..45bf84db057 100644 --- a/browser/devtools/tilt/test/browser_tilt_controller.js +++ b/browser/devtools/tilt/test/browser_tilt_controller.js @@ -47,7 +47,7 @@ function test() { EventUtils.synthesizeKey("VK_A", { type: "keydown" }); EventUtils.synthesizeKey("VK_LEFT", { type: "keydown" }); - instance.controller.update(); + instance.controller._update(); ok(!isEqualVec(tran(), prev_tran), "After a translation key is pressed, the vector should change."); @@ -58,7 +58,7 @@ function test() { cancellingEvent(); - instance.controller.update(); + instance.controller._update(); ok(!isEqualVec(tran(), prev_tran), "Even if the canvas lost focus, the vector has some inertia."); @@ -70,7 +70,7 @@ function test() { while (!isEqualVec(tran(), prev_tran) || !isEqualVec(rot(), prev_rot)) { - instance.controller.update(); + instance.controller._update(); save(); } diff --git a/browser/devtools/tilt/test/browser_tilt_picking.js b/browser/devtools/tilt/test/browser_tilt_picking.js index 653e37f8121..b5d4d23709e 100644 --- a/browser/devtools/tilt/test/browser_tilt_picking.js +++ b/browser/devtools/tilt/test/browser_tilt_picking.js @@ -21,14 +21,14 @@ function test() { let presenter = instance.presenter; let canvas = presenter.canvas; - presenter.onSetupMesh = function() { + presenter._onSetupMesh = function() { presenter.pickNode(canvas.width / 2, 10, { onpick: function(data) { ok(data.index > 0, "Simply picking a node didn't work properly."); - ok(!presenter.highlight.disabled, + ok(!presenter._highlight.disabled, "After only picking a node, it shouldn't be highlighted."); Services.obs.addObserver(cleanup, DESTROYED, false); diff --git a/browser/devtools/tilt/test/browser_tilt_picking_delete.js b/browser/devtools/tilt/test/browser_tilt_picking_delete.js index 98c83608572..4eb3a18fa1e 100644 --- a/browser/devtools/tilt/test/browser_tilt_picking_delete.js +++ b/browser/devtools/tilt/test/browser_tilt_picking_delete.js @@ -23,13 +23,13 @@ function test() { presenter = instance.presenter; Services.obs.addObserver(whenNodeRemoved, NODE_REMOVED, false); - presenter.onSetupMesh = function() { + presenter._onSetupMesh = function() { presenter.highlightNodeAt(presenter.canvas.width / 2, 10, { onpick: function() { ok(presenter._currentSelection > 0, "Highlighting a node didn't work properly."); - ok(!presenter.highlight.disabled, + ok(!presenter._highlight.disabled, "After highlighting a node, it should be highlighted. D'oh."); presenter.deleteNode(); @@ -44,14 +44,14 @@ function test() { function whenNodeRemoved() { ok(presenter._currentSelection > 0, "Deleting a node shouldn't change the current selection."); - ok(presenter.highlight.disabled, + ok(presenter._highlight.disabled, "After deleting a node, it shouldn't be highlighted."); let nodeIndex = presenter._currentSelection; - let meshData = presenter.meshData; + let vertices = presenter._meshData.vertices; for (let i = 0, k = 36 * nodeIndex; i < 36; i++) { - is(meshData.vertices[i + k], 0, + is(vertices[i + k], 0, "The stack vertices weren't degenerated properly."); } diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js index f4e430c2fdc..0c7b58b4fed 100644 --- a/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js +++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight01-offs.js @@ -24,7 +24,7 @@ function test() { presenter = instance.presenter; Services.obs.addObserver(whenHighlighting, HIGHLIGHTING, false); - presenter.onInitializationFinished = function() { + presenter._onInitializationFinished = function() { let contentDocument = presenter.contentWindow.document; let div = contentDocument.getElementById("far-far-away"); @@ -38,7 +38,7 @@ function test() { function whenHighlighting() { ok(presenter._currentSelection > 0, "Highlighting a node didn't work properly."); - ok(!presenter.highlight.disabled, + ok(!presenter._highlight.disabled, "After highlighting a node, it should be highlighted. D'oh."); ok(presenter.controller.arcball._resetInProgress, "Highlighting a node that's not already visible should trigger a reset!"); @@ -52,7 +52,7 @@ function whenHighlighting() { function whenUnhighlighting() { ok(presenter._currentSelection < 0, "Unhighlighting a should remove the current selection."); - ok(presenter.highlight.disabled, + ok(presenter._highlight.disabled, "After unhighlighting a node, it shouldn't be highlighted anymore. D'oh."); executeSoon(function() { diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js index 27ee04b93fd..95910e86bca 100644 --- a/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js +++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight01.js @@ -23,7 +23,7 @@ function test() { presenter = instance.presenter; Services.obs.addObserver(whenHighlighting, HIGHLIGHTING, false); - presenter.onSetupMesh = function() { + presenter._onSetupMesh = function() { let contentDocument = presenter.contentWindow.document; let div = contentDocument.getElementById("first-law"); @@ -37,7 +37,7 @@ function test() { function whenHighlighting() { ok(presenter._currentSelection > 0, "Highlighting a node didn't work properly."); - ok(!presenter.highlight.disabled, + ok(!presenter._highlight.disabled, "After highlighting a node, it should be highlighted. D'oh."); ok(!presenter.controller.arcball._resetInProgress, "Highlighting a node that's already visible shouldn't trigger a reset."); @@ -51,7 +51,7 @@ function whenHighlighting() { function whenUnhighlighting() { ok(presenter._currentSelection < 0, "Unhighlighting a should remove the current selection."); - ok(presenter.highlight.disabled, + ok(presenter._highlight.disabled, "After unhighlighting a node, it shouldn't be highlighted anymore. D'oh."); executeSoon(function() { diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js index a378495ff1c..85656bb192c 100644 --- a/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js +++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight02.js @@ -23,7 +23,7 @@ function test() { presenter = instance.presenter; Services.obs.addObserver(whenHighlighting, HIGHLIGHTING, false); - presenter.onSetupMesh = function() { + presenter._onSetupMesh = function() { presenter.highlightNodeAt(presenter.canvas.width / 2, 10); }; } @@ -34,7 +34,7 @@ function test() { function whenHighlighting() { ok(presenter._currentSelection > 0, "Highlighting a node didn't work properly."); - ok(!presenter.highlight.disabled, + ok(!presenter._highlight.disabled, "After highlighting a node, it should be highlighted. D'oh."); executeSoon(function() { @@ -46,7 +46,7 @@ function whenHighlighting() { function whenUnhighlighting() { ok(presenter._currentSelection < 0, "Unhighlighting a should remove the current selection."); - ok(presenter.highlight.disabled, + ok(presenter._highlight.disabled, "After unhighlighting a node, it shouldn't be highlighted anymore. D'oh."); executeSoon(function() { diff --git a/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js b/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js index 0ad0633471a..66756081159 100644 --- a/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js +++ b/browser/devtools/tilt/test/browser_tilt_picking_highlight03.js @@ -23,7 +23,7 @@ function test() { presenter = instance.presenter; Services.obs.addObserver(whenHighlighting, HIGHLIGHTING, false); - presenter.onSetupMesh = function() { + presenter._onSetupMesh = function() { presenter.highlightNodeFor(5); // 1 = html, 2 = body, 3 = first div }; } @@ -34,7 +34,7 @@ function test() { function whenHighlighting() { ok(presenter._currentSelection > 0, "Highlighting a node didn't work properly."); - ok(!presenter.highlight.disabled, + ok(!presenter._highlight.disabled, "After highlighting a node, it should be highlighted. D'oh."); executeSoon(function() { @@ -46,7 +46,7 @@ function whenHighlighting() { function whenUnhighlighting() { ok(presenter._currentSelection < 0, "Unhighlighting a should remove the current selection."); - ok(presenter.highlight.disabled, + ok(presenter._highlight.disabled, "After unhighlighting a node, it shouldn't be highlighted anymore. D'oh."); executeSoon(function() { diff --git a/browser/devtools/tilt/test/browser_tilt_utils05.js b/browser/devtools/tilt/test/browser_tilt_utils05.js index 5c93eecd1dd..ef00d2a16ff 100644 --- a/browser/devtools/tilt/test/browser_tilt_utils05.js +++ b/browser/devtools/tilt/test/browser_tilt_utils05.js @@ -2,10 +2,6 @@ http://creativecommons.org/publicdomain/zero/1.0/ */ "use strict"; -let tmp = {}; -Cu.import("resource:///modules/devtools/LayoutHelpers.jsm", tmp); -let LayoutHelpers = tmp.LayoutHelpers; - function init(callback) { let iframe = gBrowser.ownerDocument.createElement("iframe"); diff --git a/browser/devtools/tilt/test/browser_tilt_utils06.js b/browser/devtools/tilt/test/browser_tilt_utils06.js index e1ab6f2d362..eee915261b0 100644 --- a/browser/devtools/tilt/test/browser_tilt_utils06.js +++ b/browser/devtools/tilt/test/browser_tilt_utils06.js @@ -11,7 +11,7 @@ let someObject = { }; let anotherObject = { - finalize: function() + _finalize: function() { someObject.c = 3; } diff --git a/browser/devtools/tilt/test/browser_tilt_visualizer.js b/browser/devtools/tilt/test/browser_tilt_visualizer.js index 666506536fa..fbbcb737317 100644 --- a/browser/devtools/tilt/test/browser_tilt_visualizer.js +++ b/browser/devtools/tilt/test/browser_tilt_visualizer.js @@ -70,33 +70,33 @@ function test() { } function testPresenter(presenter) { - ok(presenter.renderer, + ok(presenter._renderer, "The presenter renderer wasn't initialized properly."); - ok(presenter.visualizationProgram, + ok(presenter._visualizationProgram, "The presenter visualizationProgram wasn't initialized properly."); - ok(presenter.texture, + ok(presenter._texture, "The presenter texture wasn't initialized properly."); - ok(!presenter.meshStacks, + ok(!presenter._meshStacks, "The presenter meshStacks shouldn't be initialized yet."); - ok(!presenter.meshWireframe, + ok(!presenter._meshWireframe, "The presenter meshWireframe shouldn't be initialized yet."); - ok(presenter.traverseData, + ok(presenter._traverseData, "The presenter nodesInformation wasn't initialized properly."); - ok(presenter.highlight, + ok(presenter._highlight, "The presenter highlight wasn't initialized properly."); - ok(presenter.highlight.disabled, - "The presenter highlight should be initially disabled"); - ok(isApproxVec(presenter.highlight.v0, [0, 0, 0]), + ok(presenter._highlight.disabled, + "The presenter highlight should be initially disabled."); + ok(isApproxVec(presenter._highlight.v0, [0, 0, 0]), "The presenter highlight first vertex should be initially zeroed."); - ok(isApproxVec(presenter.highlight.v1, [0, 0, 0]), + ok(isApproxVec(presenter._highlight.v1, [0, 0, 0]), "The presenter highlight second vertex should be initially zeroed."); - ok(isApproxVec(presenter.highlight.v2, [0, 0, 0]), + ok(isApproxVec(presenter._highlight.v2, [0, 0, 0]), "The presenter highlight third vertex should be initially zeroed."); - ok(isApproxVec(presenter.highlight.v3, [0, 0, 0]), + ok(isApproxVec(presenter._highlight.v3, [0, 0, 0]), "The presenter highlight fourth vertex should be initially zeroed."); ok(presenter.transforms, "The presenter transforms wasn't initialized properly."); - ok(isApproxVec(presenter.transforms.zoom, 1), + is(presenter.transforms.zoom, 1, "The presenter transforms zoom should be initially 1."); ok(isApproxVec(presenter.transforms.offset, [0, 0, 0]), "The presenter transforms offset should be initially zeroed."); @@ -112,7 +112,7 @@ function testPresenter(presenter) { "The presenter transforms translation wasn't modified as it should"); ok(isApproxVec(presenter.transforms.rotation, [5, 6, 7, 8]), "The presenter transforms rotation wasn't modified as it should"); - ok(presenter.redraw, + ok(presenter._redraw, "The new transforms should have issued a redraw request."); } diff --git a/browser/devtools/tilt/test/browser_tilt_zoom.js b/browser/devtools/tilt/test/browser_tilt_zoom.js index a49ab9bdd2b..fe280dfba3b 100644 --- a/browser/devtools/tilt/test/browser_tilt_zoom.js +++ b/browser/devtools/tilt/test/browser_tilt_zoom.js @@ -35,7 +35,7 @@ function test() { let initialWidth = contentWindow.innerWidth; let initialHeight = contentWindow.innerHeight; - let renderer = instance.presenter.renderer; + let renderer = instance.presenter._renderer; let arcball = instance.controller.arcball; ok(isApprox(contentWindow.innerWidth * ZOOM, renderer.width, 1), diff --git a/browser/devtools/tilt/test/head.js b/browser/devtools/tilt/test/head.js index 137fb0f86c0..0ecce48f358 100644 --- a/browser/devtools/tilt/test/head.js +++ b/browser/devtools/tilt/test/head.js @@ -7,6 +7,7 @@ Components.utils.import("resource:///modules/devtools/TiltGL.jsm", tempScope); Components.utils.import("resource:///modules/devtools/TiltMath.jsm", tempScope); Components.utils.import("resource:///modules/devtools/TiltUtils.jsm", tempScope); Components.utils.import("resource:///modules/devtools/TiltVisualizer.jsm", tempScope); +Components.utils.import("resource:///modules/devtools/LayoutHelpers.jsm", tempScope); let TiltGL = tempScope.TiltGL; let EPSILON = tempScope.EPSILON; let TiltMath = tempScope.TiltMath; @@ -16,6 +17,7 @@ let mat4 = tempScope.mat4; let quat4 = tempScope.quat4; let TiltUtils = tempScope.TiltUtils; let TiltVisualizer = tempScope.TiltVisualizer; +let LayoutHelpers = tempScope.LayoutHelpers; const DEFAULT_HTML = "data:text/html," + From 37452e6e1a08644005fb9948c84caf9ff618dd21 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Tue, 14 Feb 2012 19:40:55 +0200 Subject: [PATCH 07/29] Bug 726634 - Fix the maximum nodes limitation in Tilt; r=rcampbell --- browser/devtools/tilt/TiltGL.jsm | 2 +- browser/devtools/tilt/TiltVisualizer.jsm | 124 +++++++++++------- browser/devtools/tilt/TiltWorkerCrafter.js | 67 ++++++---- .../tilt/test/browser_tilt_picking_delete.js | 2 +- 4 files changed, 121 insertions(+), 74 deletions(-) diff --git a/browser/devtools/tilt/TiltGL.jsm b/browser/devtools/tilt/TiltGL.jsm index 9cb1844dea4..37e4416d94f 100644 --- a/browser/devtools/tilt/TiltGL.jsm +++ b/browser/devtools/tilt/TiltGL.jsm @@ -1425,7 +1425,7 @@ TiltGL.TextureUtils = { /** * This shim renders a content window to a canvas element, but clamps the - * maximum width and height of the canvas to half the WebGL MAX_TEXTURE_SIZE. + * maximum width and height of the canvas to the WebGL MAX_TEXTURE_SIZE. * * @param {Window} aContentWindow * the content window to get a texture from diff --git a/browser/devtools/tilt/TiltVisualizer.jsm b/browser/devtools/tilt/TiltVisualizer.jsm index ff30530124b..bcc87c2bc11 100644 --- a/browser/devtools/tilt/TiltVisualizer.jsm +++ b/browser/devtools/tilt/TiltVisualizer.jsm @@ -55,6 +55,13 @@ const INVISIBLE_ELEMENTS = { "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 STACK_THICKNESS = 15; const WIREFRAME_COLOR = [0, 0, 0, 0.25]; const INTRO_TRANSITION_DURATION = 1000; @@ -226,6 +233,7 @@ TiltVisualizer.Presenter = function TV_Presenter( * The combined mesh representing the document visualization. */ this._texture = null; + this._meshData = null; this._meshStacks = null; this._meshWireframe = null; this._traverseData = null; @@ -439,17 +447,21 @@ TiltVisualizer.Presenter.prototype = { // use the necessary shader visualizationProgram.use(); - // bind the attributes and uniforms as necessary - visualizationProgram.bindVertexBuffer("vertexPosition", mesh.vertices); - visualizationProgram.bindVertexBuffer("vertexTexCoord", mesh.texCoord); - visualizationProgram.bindVertexBuffer("vertexColor", mesh.color); + for (let i = 0, len = mesh.length; i < len; i++) { + let group = mesh[i]; - visualizationProgram.bindUniformMatrix("mvMatrix", mvMatrix); - visualizationProgram.bindUniformMatrix("projMatrix", projMatrix); - visualizationProgram.bindTexture("sampler", texture); + // bind the attributes and uniforms as necessary + visualizationProgram.bindVertexBuffer("vertexPosition", group.vertices); + visualizationProgram.bindVertexBuffer("vertexTexCoord", group.texCoord); + visualizationProgram.bindVertexBuffer("vertexColor", group.color); - // draw the vertices as TRIANGLES indexed elements - renderer.drawIndexedVertices(renderer.context.TRIANGLES, mesh.indices); + 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); @@ -464,11 +476,15 @@ TiltVisualizer.Presenter.prototype = { let renderer = this._renderer; let mesh = this._meshWireframe; - // use the necessary shader - renderer.useColorShader(mesh.vertices, WIREFRAME_COLOR); + for (let i = 0, len = mesh.length; i < len; i++) { + let group = mesh[i]; - // draw the vertices as LINES indexed elements - renderer.drawIndexedVertices(renderer.context.LINES, mesh.indices); + // use the necessary shader + renderer.useColorShader(group.vertices, WIREFRAME_COLOR); + + // draw the vertices as LINES indexed elements + renderer.drawIndexedVertices(renderer.context.LINES, group.indices); + } }, /** @@ -538,8 +554,8 @@ TiltVisualizer.Presenter.prototype = { let renderer = this._renderer; // destroy any previously created mesh - TiltUtils.destroyObject(this._meshStacks); this._meshStacks = null; - TiltUtils.destroyObject(this._meshWireframe); this._meshWireframe = null; + 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) { @@ -549,21 +565,26 @@ TiltVisualizer.Presenter.prototype = { // save the mesh data for future use this._meshData = aMeshData; - // create the visualization mesh using the vertices, texture coordinates - // and indices computed when traversing the document object model - this._meshStacks = { - vertices: new renderer.VertexBuffer(aMeshData.vertices, 3), - texCoord: new renderer.VertexBuffer(aMeshData.texCoord, 2), - color: new renderer.VertexBuffer(aMeshData.color, 3), - indices: new renderer.IndexBuffer(aMeshData.stacksIndices) - }; + // 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]; - // additionally, create a wireframe representation to make the - // visualization a bit more pretty - this._meshWireframe = { - vertices: this._meshStacks.vertices, - indices: new renderer.IndexBuffer(aMeshData.wireframeIndices) - }; + // 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) + }); + } // if there's no initial selection made, highlight the required node if (!this._initialSelection) { @@ -571,15 +592,13 @@ TiltVisualizer.Presenter.prototype = { this.highlightNode(this.chromeWindow.InspectorUI.selection); } + // configure the required mesh transformations and background only once if (!this._initialMeshConfiguration) { this._initialMeshConfiguration = true; - let width = renderer.width; - let height = renderer.height; - // set the necessary mesh offsets - this.transforms.offset[0] = -width * 0.5; - this.transforms.offset[1] = -height * 0.5; + 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; @@ -595,7 +614,7 @@ TiltVisualizer.Presenter.prototype = { }, /** - * Computes the mesh vertices, texture coordinates etc. + * Computes the mesh vertices, texture coordinates etc. by groups of nodes. */ _setupMeshData: function TVP__setupMeshData() { @@ -623,6 +642,7 @@ TiltVisualizer.Presenter.prototype = { // 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, thickness: STACK_THICKNESS, style: TiltVisualizerStyle.nodes, texWidth: this._texture.width, @@ -801,13 +821,17 @@ TiltVisualizer.Presenter.prototype = { } let renderer = this._renderer; - let vertices = this._meshData.vertices; - for (let i = 0, k = 36 * aNodeIndex; i < 36; i++) { + 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; } - this._meshStacks.vertices = new renderer.VertexBuffer(vertices, 3); + group.vertices = new renderer.VertexBuffer(vertices, 3); this._highlight.disabled = true; this._redraw = true; @@ -854,7 +878,6 @@ TiltVisualizer.Presenter.prototype = { let zoom = this.chromeWindow.InspectorUI.highlighter.zoom; let width = this._renderer.width * zoom; let height = this._renderer.height * zoom; - let mesh = this._meshStacks; x *= zoom; y *= zoom; @@ -863,12 +886,12 @@ TiltVisualizer.Presenter.prototype = { // and do all the heavy lifting in a separate thread worker.postMessage({ thickness: STACK_THICKNESS, - vertices: mesh.vertices.components, + vertices: this._meshData.allVertices, // create the ray destined for 3D picking ray: vec3.createRay([x, y, 0], [x, y, 1], [0, 0, width, height], - mesh.mvMatrix, - mesh.projMatrix) + this._meshStacks.mvMatrix, + this._meshStacks.projMatrix) }); }, @@ -1002,19 +1025,20 @@ TiltVisualizer.Presenter.prototype = { TiltUtils.destroyObject(this._texture); if (this._meshStacks) { - TiltUtils.destroyObject(this._meshStacks.vertices); - TiltUtils.destroyObject(this._meshStacks.texCoord); - TiltUtils.destroyObject(this._meshStacks.color); - TiltUtils.destroyObject(this._meshStacks.indices); + this._meshStacks.forEach(function(group) { + TiltUtils.destroyObject(group.vertices); + TiltUtils.destroyObject(group.texCoord); + TiltUtils.destroyObject(group.color); + TiltUtils.destroyObject(group.indices); + }); } - if (this._meshWireframe) { - TiltUtils.destroyObject(this._meshWireframe.indices); + this._meshWireframe.forEach(function(group) { + TiltUtils.destroyObject(group.indices); + }); } TiltUtils.destroyObject(this._renderer); - TiltUtils.destroyObject(this._highlight); - TiltUtils.destroyObject(this.transforms); this.contentWindow.removeEventListener("resize", this._onResize, false); } diff --git a/browser/devtools/tilt/TiltWorkerCrafter.js b/browser/devtools/tilt/TiltWorkerCrafter.js index 5a90a45047b..342eda2ae78 100644 --- a/browser/devtools/tilt/TiltWorkerCrafter.js +++ b/browser/devtools/tilt/TiltWorkerCrafter.js @@ -49,27 +49,44 @@ self.onmessage = function TWC_onMessage(event) { let data = event.data; + let maxGroupNodes = parseInt(data.maxGroupNodes); let thickness = data.thickness; let style = data.style; let texWidth = data.texWidth; let texHeight = data.texHeight; let nodesInfo = data.nodesInfo; - // create the arrays used to construct the 3D mesh data - let vertices = []; - let texCoord = []; - let color = []; - let stacksIndices = []; - let wireframeIndices = []; - let meshWidth = 0; - let meshHeight = 0; + let mesh = { + allVertices: [], + groups: [], + width: 0, + height: 0 + }; + + let vertices; + let texCoord; + let color; + let stacksIndices; + let wireframeIndices; + let index; // seed the random function to get the same values each time // we're doing this to avoid ugly z-fighting with overlapping nodes self.random.seed(0); // go through all the dom nodes and compute the verts, texcoord etc. - for (let n = 0, i = 0, len = nodesInfo.length; n < len; n++) { + for (let n = 0, len = nodesInfo.length; n < len; n++) { + + // check if we need to start creating a new group + if (n % maxGroupNodes === 0) { + vertices = []; // recreate the arrays used to construct the 3D mesh data + texCoord = []; + color = []; + stacksIndices = []; + wireframeIndices = []; + index = 0; + } + let info = nodesInfo[n]; let depth = info.depth; let coord = info.coord; @@ -152,6 +169,7 @@ self.onmessage = function TWC_onMessage(event) g20, g21, g22, g20, g21, g22); + let i = index; // number of vertex points, used to create the indices array let ip1 = i + 1; let ip2 = ip1 + 1; let ip3 = ip2 + 1; @@ -179,23 +197,28 @@ self.onmessage = function TWC_onMessage(event) ip11, ip3, ip10, ip2); } - // number of vertex points, used for creating the indices array - i += 12; // a vertex has 3 coords: x, y and z + // there are 12 vertices in a stack representing a node + index += 12; // set the maximum mesh width and height to calculate the center offset - meshWidth = Math.max(w, meshWidth); - meshHeight = Math.max(h, meshHeight); + mesh.width = Math.max(w, mesh.width); + mesh.height = Math.max(h, mesh.height); + + // check if we need to save the currently active group; this happens after + // we filled all the "slots" in a group or there aren't any remaining nodes + if (((n + 1) % maxGroupNodes === 0) || (n === len - 1)) { + mesh.groups.push({ + vertices: vertices, + texCoord: texCoord, + color: color, + stacksIndices: stacksIndices, + wireframeIndices: wireframeIndices + }); + mesh.allVertices = mesh.allVertices.concat(vertices); + } } - self.postMessage({ - vertices: vertices, - texCoord: texCoord, - color: color, - stacksIndices: stacksIndices, - wireframeIndices: wireframeIndices, - meshWidth: meshWidth, - meshHeight: meshHeight - }); + self.postMessage(mesh); close(); }; diff --git a/browser/devtools/tilt/test/browser_tilt_picking_delete.js b/browser/devtools/tilt/test/browser_tilt_picking_delete.js index 4eb3a18fa1e..82418ef722f 100644 --- a/browser/devtools/tilt/test/browser_tilt_picking_delete.js +++ b/browser/devtools/tilt/test/browser_tilt_picking_delete.js @@ -48,7 +48,7 @@ function whenNodeRemoved() { "After deleting a node, it shouldn't be highlighted."); let nodeIndex = presenter._currentSelection; - let vertices = presenter._meshData.vertices; + let vertices = presenter._meshStacks[0].vertices.components; for (let i = 0, k = 36 * nodeIndex; i < 36; i++) { is(vertices[i + k], 0, From 1761ba82631815a68a9974e62c38afee288db94a Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Wed, 22 Feb 2012 19:18:49 +0200 Subject: [PATCH 08/29] Bug 725717 - GCLI needs a 'tilt' command; r=jwalker --- browser/devtools/tilt/TiltVisualizer.jsm | 35 ++- .../tilt/test/browser_tilt_picking.js | 2 - .../devtools/webconsole/GcliTiltCommands.jsm | 224 ++++++++++++++++++ browser/devtools/webconsole/HUDService.jsm | 1 + browser/devtools/webconsole/Makefile.in | 1 + .../webconsole/test/browser_gcli_web.js | 1 - .../browser/devtools/gclicommands.properties | 130 ++++++++++ 7 files changed, 390 insertions(+), 4 deletions(-) create mode 100644 browser/devtools/webconsole/GcliTiltCommands.jsm diff --git a/browser/devtools/tilt/TiltVisualizer.jsm b/browser/devtools/tilt/TiltVisualizer.jsm index bcc87c2bc11..4c8b01ae33c 100644 --- a/browser/devtools/tilt/TiltVisualizer.jsm +++ b/browser/devtools/tilt/TiltVisualizer.jsm @@ -590,6 +590,10 @@ TiltVisualizer.Presenter.prototype = { if (!this._initialSelection) { this._initialSelection = true; this.highlightNode(this.chromeWindow.InspectorUI.selection); + + if (this._currentSelection === 0) { // if the "html" node is selected + this._highlight.disabled = true; + } } // configure the required mesh transformations and background only once @@ -1605,7 +1609,10 @@ TiltVisualizer.Arcball.prototype = { (additionalTrans[1] - deltaAdditionalTrans[1]) * ARCBALL_SENSITIVITY; // create an additional rotation based on the key events - quat4.fromEuler(deltaAdditionalRot[0], deltaAdditionalRot[1], 0, deltaRot); + 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); @@ -1806,6 +1813,32 @@ TiltVisualizer.Arcball.prototype = { 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). diff --git a/browser/devtools/tilt/test/browser_tilt_picking.js b/browser/devtools/tilt/test/browser_tilt_picking.js index b5d4d23709e..327e1a922fb 100644 --- a/browser/devtools/tilt/test/browser_tilt_picking.js +++ b/browser/devtools/tilt/test/browser_tilt_picking.js @@ -28,8 +28,6 @@ function test() { { ok(data.index > 0, "Simply picking a node didn't work properly."); - ok(!presenter._highlight.disabled, - "After only picking a node, it shouldn't be highlighted."); Services.obs.addObserver(cleanup, DESTROYED, false); InspectorUI.closeInspectorUI(); diff --git a/browser/devtools/webconsole/GcliTiltCommands.jsm b/browser/devtools/webconsole/GcliTiltCommands.jsm new file mode 100644 index 00000000000..248508cf830 --- /dev/null +++ b/browser/devtools/webconsole/GcliTiltCommands.jsm @@ -0,0 +1,224 @@ +/* ***** BEGIN LICENSE BLOCK ***** + * Version: MPL 1.1/GPL 2.0/LGPL 2.1 + * + * The contents of this file are subject to the Mozilla Public License Version + * 1.1 (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * http://www.mozilla.org/MPL/ + * + * Software distributed under the License is distributed on an "AS IS" basis, + * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License + * for the specific language governing rights and limitations under the + * License. + * + * The Original Code is GCLI Commands. + * + * The Initial Developer of the Original Code is + * The Mozilla Foundation. + * Portions created by the Initial Developer are Copyright (C) 2011 + * the Initial Developer. All Rights Reserved. + * + * Contributor(s): + * Victor Porof (original author) + * + * Alternatively, the contents of this file may be used under the terms of + * either the GNU General Public License Version 2 or later (the "GPL"), or + * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), + * in which case the provisions of the GPL or the LGPL are applicable instead + * of those above. If you wish to allow use of your version of this file only + * under the terms of either the GPL or the LGPL, and not to allow others to + * use your version of this file under the terms of the MPL, indicate your + * decision by deleting the provisions above and replace them with the notice + * and other provisions required by the GPL or the LGPL. If you do not delete + * the provisions above, a recipient may use your version of this file under + * the terms of any one of the MPL, the GPL or the LGPL. + * + * ***** END LICENSE BLOCK ***** */ + + +let EXPORTED_SYMBOLS = [ "GcliCommands" ]; + +Components.utils.import("resource:///modules/gcli.jsm"); +Components.utils.import("resource:///modules/HUDService.jsm"); + + +/** + * 'tilt' command + */ +gcli.addCommand({ + name: 'tilt', + description: gcli.lookup("tiltDesc"), + manual: gcli.lookup("tiltManual") +}); + + +/** + * 'tilt open' command + */ +gcli.addCommand({ + name: 'tilt open', + description: gcli.lookup("tiltOpenDesc"), + manual: gcli.lookup("tiltOpenManual"), + params: [ + { + name: "node", + type: "node", + defaultValue: null, + description: gcli.lookup("inspectNodeDesc"), + manual: gcli.lookup("inspectNodeManual") + } + ], + exec: function(args, context) { + let chromeWindow = context.environment.chromeDocument.defaultView; + let InspectorUI = chromeWindow.InspectorUI; + let Tilt = chromeWindow.Tilt; + + if (Tilt.currentInstance) { + Tilt.update(args.node); + } else { + let hudId = chromeWindow.HUDConsoleUI.getOpenHUD(); + let hud = HUDService.getHudReferenceById(hudId); + + if (hud && !hud.consolePanel) { + HUDService.deactivateHUDForContext(chromeWindow.gBrowser.selectedTab); + } + InspectorUI.openInspectorUI(args.node); + Tilt.initialize(); + } + } +}); + + +/** + * 'tilt translate' command + */ +gcli.addCommand({ + name: 'tilt translate', + description: gcli.lookup("tiltTranslateDesc"), + manual: gcli.lookup("tiltTranslateManual"), + params: [ + { + name: "x", + type: "number", + defaultValue: 0, + description: gcli.lookup("tiltTranslateXDesc"), + manual: gcli.lookup("tiltTranslateXManual") + }, + { + name: "y", + type: "number", + defaultValue: 0, + description: gcli.lookup("tiltTranslateYDesc"), + manual: gcli.lookup("tiltTranslateYManual") + } + ], + exec: function(args, context) { + let chromeWindow = context.environment.chromeDocument.defaultView; + let Tilt = chromeWindow.Tilt; + + if (Tilt.currentInstance) { + Tilt.currentInstance.controller.arcball.translate([args.x, args.y]); + } + } +}); + + +/** + * 'tilt rotate' command + */ +gcli.addCommand({ + name: 'tilt rotate', + description: gcli.lookup("tiltRotateDesc"), + manual: gcli.lookup("tiltRotateManual"), + params: [ + { + name: "x", + type: { name: 'number', min: -360, max: 360, step: 10 }, + defaultValue: 0, + description: gcli.lookup("tiltRotateXDesc"), + manual: gcli.lookup("tiltRotateXManual") + }, + { + name: "y", + type: { name: 'number', min: -360, max: 360, step: 10 }, + defaultValue: 0, + description: gcli.lookup("tiltRotateYDesc"), + manual: gcli.lookup("tiltRotateYManual") + }, + { + name: "z", + type: { name: 'number', min: -360, max: 360, step: 10 }, + defaultValue: 0, + description: gcli.lookup("tiltRotateZDesc"), + manual: gcli.lookup("tiltRotateZManual") + } + ], + exec: function(args, context) { + let chromeWindow = context.environment.chromeDocument.defaultView; + let Tilt = chromeWindow.Tilt; + + if (Tilt.currentInstance) { + Tilt.currentInstance.controller.arcball.rotate([args.x, args.y, args.z]); + } + } +}); + + +/** + * 'tilt zoom' command + */ +gcli.addCommand({ + name: 'tilt zoom', + description: gcli.lookup("tiltZoomDesc"), + manual: gcli.lookup("tiltZoomManual"), + params: [ + { + name: "zoom", + type: { name: 'number' }, + description: gcli.lookup("tiltZoomAmountDesc"), + manual: gcli.lookup("tiltZoomAmountManual") + } + ], + exec: function(args, context) { + let chromeWindow = context.environment.chromeDocument.defaultView; + let Tilt = chromeWindow.Tilt; + + if (Tilt.currentInstance) { + Tilt.currentInstance.controller.arcball.zoom(-args.zoom); + } + } +}); + + +/** + * 'tilt reset' command + */ +gcli.addCommand({ + name: 'tilt reset', + description: gcli.lookup("tiltResetDesc"), + manual: gcli.lookup("tiltResetManual"), + exec: function(args, context) { + let chromeWindow = context.environment.chromeDocument.defaultView; + let Tilt = chromeWindow.Tilt; + + if (Tilt.currentInstance) { + Tilt.currentInstance.controller.arcball.reset(); + } + } +}); + + +/** + * 'tilt close' command + */ +gcli.addCommand({ + name: 'tilt close', + description: gcli.lookup("tiltCloseDesc"), + manual: gcli.lookup("tiltCloseManual"), + exec: function(args, context) { + let chromeWindow = context.environment.chromeDocument.defaultView; + let Tilt = chromeWindow.Tilt; + + Tilt.destroy(Tilt.currentWindowId); + } +}); diff --git a/browser/devtools/webconsole/HUDService.jsm b/browser/devtools/webconsole/HUDService.jsm index 7053809bbc6..bd3604188cb 100644 --- a/browser/devtools/webconsole/HUDService.jsm +++ b/browser/devtools/webconsole/HUDService.jsm @@ -164,6 +164,7 @@ function loadCommands() { let commandExports = {}; Cu.import("resource:///modules/GcliCommands.jsm", commandExports); + Cu.import("resource:///modules/GcliTiltCommands.jsm", commandExports); return commandExports; } diff --git a/browser/devtools/webconsole/Makefile.in b/browser/devtools/webconsole/Makefile.in index d5165a56b36..71f99a34f64 100644 --- a/browser/devtools/webconsole/Makefile.in +++ b/browser/devtools/webconsole/Makefile.in @@ -50,6 +50,7 @@ EXTRA_JS_MODULES = \ AutocompletePopup.jsm \ gcli.jsm \ GcliCommands.jsm \ + GcliTiltCommands.jsm \ $(NULL) EXTRA_PP_JS_MODULES = \ diff --git a/browser/devtools/webconsole/test/browser_gcli_web.js b/browser/devtools/webconsole/test/browser_gcli_web.js index db12eecfcf9..6145cf97fef 100644 --- a/browser/devtools/webconsole/test/browser_gcli_web.js +++ b/browser/devtools/webconsole/test/browser_gcli_web.js @@ -1103,7 +1103,6 @@ exports.testIncompleteMultiMatch = function() { test.is(Status.ERROR, status); test.is(-1, assignC.paramIndex); test.ok(assignC.getPredictions().length > 0); - test.ok(assignC.getPredictions().length < 20); // could break ... verifyPredictionsContains('tsv', assignC.getPredictions()); verifyPredictionsContains('tsr', assignC.getPredictions()); test.is(null, requ.commandAssignment.getValue()); diff --git a/browser/locales/en-US/chrome/browser/devtools/gclicommands.properties b/browser/locales/en-US/chrome/browser/devtools/gclicommands.properties index f4a1ce01820..07f794df92b 100644 --- a/browser/locales/en-US/chrome/browser/devtools/gclicommands.properties +++ b/browser/locales/en-US/chrome/browser/devtools/gclicommands.properties @@ -56,6 +56,136 @@ inspectNodeDesc=CSS selector # on what it does. inspectNodeManual=A CSS selector for use with Document.querySelector which identifies a single element +# LOCALIZATION NOTE (tiltDesc) A very short description of the 'tilt' +# command. See tiltManual for a fuller description of what it does. This +# string is designed to be shown in a menu alongside the command name, which +# is why it should be as short as possible. +tiltDesc=Visualize the webpage in 3D + +# LOCALIZATION NOTE (tiltManual) A fuller description of the 'tilt' +# command, displayed when the user asks for help on what it does. +tiltManual=Investigate the relationship between various parts of a webpage and their ancestors in a 3D environment + +# LOCALIZATION NOTE (tiltOpenDesc) A very short description of the 'tilt inspect' +# command. See tiltOpenManual for a fuller description of what it does. This +# string is designed to be shown in a menu alongside the command name, which +# is why it should be as short as possible. +tiltOpenDesc=Open the Inspector 3D view + +# LOCALIZATION NOTE (tiltOpenManual) A fuller description of the 'tilt translate' +# command, displayed when the user asks for help on what it does. +tiltOpenManual=Initialize the 3D page inspector and optionally highlight a node using a CSS selector + +# LOCALIZATION NOTE (tiltTranslateDesc) A very short description of the 'tilt translate' +# command. See tiltTranslateManual for a fuller description of what it does. This +# string is designed to be shown in a menu alongside the command name, which +# is why it should be as short as possible. +tiltTranslateDesc=Move the webpage mesh + +# LOCALIZATION NOTE (tiltTranslateManual) A fuller description of the 'tilt translate' +# command, displayed when the user asks for help on what it does. +tiltTranslateManual=Incrementally translate the webpage mesh in a certain direction + +# LOCALIZATION NOTE (tiltTranslateXDesc) A very short string to describe the +# 'x' parameter to the 'tilt translate' command, which is displayed in a dialog +# when the user is using this command. +tiltTranslateXDesc=X (pixels) + +# LOCALIZATION NOTE (tiltTranslateXManual) A fuller description of the 'x' +# parameter to the 'translate' command, displayed when the user asks for help +# on what it does. +tiltTranslateXManual=The ammount in pixels to translate the webpage mesh on the X axis + +# LOCALIZATION NOTE (tiltTranslateYDesc) A very short string to describe the +# 'y' parameter to the 'tilt translate' command, which is displayed in a dialog +# when the user is using this command. +tiltTranslateYDesc=Y (pixels) + +# LOCALIZATION NOTE (tiltTranslateYManual) A fuller description of the 'y' +# parameter to the 'translate' command, displayed when the user asks for help +# on what it does. +tiltTranslateYManual=The ammount in pixels to translate the webpage mesh on the Y axis + +# LOCALIZATION NOTE (tiltRotateDesc) A very short description of the 'tilt rotate' +# command. See tiltRotateManual for a fuller description of what it does. This +# string is designed to be shown in a menu alongside the command name, which +# is why it should be as short as possible. +tiltRotateDesc=Spin the webpage mesh + +# LOCALIZATION NOTE (tiltRotateManual) A fuller description of the 'tilt rotate' +# command, displayed when the user asks for help on what it does. +tiltRotateManual=Incrementally rotate the webpage mesh in a certain direction + +# LOCALIZATION NOTE (tiltRotateXDesc) A very short string to describe the +# 'x' parameter to the 'tilt rotate' command, which is displayed in a dialog +# when the user is using this command. +tiltRotateXDesc=X (degrees) + +# LOCALIZATION NOTE (tiltRotateXManual) A fuller description of the 'x' +# parameter to the 'rotate' command, displayed when the user asks for help +# on what it does. +tiltRotateXManual=The ammount in degrees to rotate the webpage mesh along the X axis + +# LOCALIZATION NOTE (tiltRotateYDesc) A very short string to describe the +# 'y' parameter to the 'tilt rotate' command, which is displayed in a dialog +# when the user is using this command. +tiltRotateYDesc=Y (degrees) + +# LOCALIZATION NOTE (tiltRotateYManual) A fuller description of the 'y' +# parameter to the 'rotate' command, displayed when the user asks for help +# on what it does. +tiltRotateYManual=The ammount in degrees to rotate the webpage mesh along the Y axis + +# LOCALIZATION NOTE (tiltRotateZDesc) A very short string to describe the +# 'z' parameter to the 'tilt rotate' command, which is displayed in a dialog +# when the user is using this command. +tiltRotateZDesc=Z (degrees) + +# LOCALIZATION NOTE (tiltRotateZManual) A fuller description of the 'z' +# parameter to the 'rotate' command, displayed when the user asks for help +# on what it does. +tiltRotateZManual=The ammount in degrees to rotate the webpage mesh along the Z axis + +# LOCALIZATION NOTE (tiltZoomDesc) A very short description of the 'tilt zoom' +# command. See tiltZoomManual for a fuller description of what it does. This +# string is designed to be shown in a menu alongside the command name, which +# is why it should be as short as possible. +tiltZoomDesc=Move away or towards the webpage mesh + +# LOCALIZATION NOTE (tiltZoomManual) A fuller description of the 'tilt zoom' +# command, displayed when the user asks for help on what it does. +tiltZoomManual=Incrementally move the webpage mesh in a certain direction along the Z axis + +# LOCALIZATION NOTE (tiltZoomAmountDesc) A very short string to describe the +# 'zoom' parameter to the 'tilt zoom' command, which is displayed in a dialog +# when the user is using this command. +tiltZoomAmountDesc=Zoom (pixels) + +# LOCALIZATION NOTE (tiltZoomAmmuntManual) A fuller description of the 'zoom' +# parameter to the 'zoom' command, displayed when the user asks for help +# on what it does. +tiltZoomAmountManual=The amount in pixels to translate the webpage mesh along the Z axis + +# LOCALIZATION NOTE (tiltResetDesc) A very short description of the 'tilt reset' +# command. See tiltResetManual for a fuller description of what it does. This +# string is designed to be shown in a menu alongside the command name, which +# is why it should be as short as possible. +tiltResetDesc=Reset the translation, rotation and zoom + +# LOCALIZATION NOTE (tiltResetManual) A fuller description of the 'tilt reset' +# command, displayed when the user asks for help on what it does. +tiltResetManual=Resets any transformations applied to the webpage mesh modelview matrix + +# LOCALIZATION NOTE (tiltCloseDesc) A very short description of the 'tilt close' +# command. See tiltCloseManual for a fuller description of what it does. This +# string is designed to be shown in a menu alongside the command name, which +# is why it should be as short as possible. +tiltCloseDesc=Close the visualization if open + +# LOCALIZATION NOTE (tiltCloseManual) A fuller description of the 'tilt close' +# command, displayed when the user asks for help on what it does. +tiltCloseManual=Close the visualization and switch back to the Inspector default highlighter + # LOCALIZATION NOTE (breakDesc) A very short string used to describe the # function of the break command. breakDesc=Manage breakpoints From 403a6accc128c2a1e4bfb587c645dbfa00337f60 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Wed, 15 Feb 2012 22:26:30 +0200 Subject: [PATCH 09/29] Bug 727529 - Tilt could use a key to bring a node into view; r=rcampbell --- browser/devtools/tilt/TiltVisualizer.jsm | 8 +++ browser/devtools/tilt/test/Makefile.in | 1 + .../tilt/test/browser_tilt_picking_miv.js | 71 +++++++++++++++++++ 3 files changed, 80 insertions(+) create mode 100644 browser/devtools/tilt/test/browser_tilt_picking_miv.js diff --git a/browser/devtools/tilt/TiltVisualizer.jsm b/browser/devtools/tilt/TiltVisualizer.jsm index 4c8b01ae33c..7d429f349c2 100644 --- a/browser/devtools/tilt/TiltVisualizer.jsm +++ b/browser/devtools/tilt/TiltVisualizer.jsm @@ -1296,6 +1296,14 @@ TiltVisualizer.Controller.prototype = { 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(); diff --git a/browser/devtools/tilt/test/Makefile.in b/browser/devtools/tilt/test/Makefile.in index d832b38e49f..c3e06857d26 100644 --- a/browser/devtools/tilt/test/Makefile.in +++ b/browser/devtools/tilt/test/Makefile.in @@ -80,6 +80,7 @@ _BROWSER_TEST_FILES = \ browser_tilt_picking_highlight01.js \ browser_tilt_picking_highlight02.js \ browser_tilt_picking_highlight03.js \ + browser_tilt_picking_miv.js \ browser_tilt_utils01.js \ browser_tilt_utils02.js \ browser_tilt_utils03.js \ diff --git a/browser/devtools/tilt/test/browser_tilt_picking_miv.js b/browser/devtools/tilt/test/browser_tilt_picking_miv.js new file mode 100644 index 00000000000..d9735892098 --- /dev/null +++ b/browser/devtools/tilt/test/browser_tilt_picking_miv.js @@ -0,0 +1,71 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +"use strict"; + +let presenter; + +function test() { + if (!isTiltEnabled()) { + info("Skipping highlight test because Tilt isn't enabled."); + return; + } + if (!isWebGLSupported()) { + info("Skipping highlight test because WebGL isn't supported."); + return; + } + + requestLongerTimeout(10); + waitForExplicitFinish(); + + createTab(function() { + createTilt({ + onTiltOpen: function(instance) + { + presenter = instance.presenter; + Services.obs.addObserver(whenHighlighting, HIGHLIGHTING, false); + + presenter._onInitializationFinished = function() { + let contentDocument = presenter.contentWindow.document; + let div = contentDocument.getElementById("far-far-away"); + + presenter.highlightNode(div); + }; + } + }); + }); +} + +function whenHighlighting() { + ok(presenter._currentSelection > 0, + "Highlighting a node didn't work properly."); + ok(!presenter._highlight.disabled, + "After highlighting a node, it should be highlighted. D'oh."); + ok(!presenter.controller.arcball._resetInProgress, + "Highlighting a node that's not already visible shouldn't trigger a reset " + + "without this being explicitly requested!"); + + EventUtils.sendKey("F"); + executeSoon(whenBringingIntoView); +} + +function whenBringingIntoView() { + ok(presenter._currentSelection > 0, + "The node should still be selected."); + ok(!presenter._highlight.disabled, + "The node should still be highlighted"); + ok(presenter.controller.arcball._resetInProgress, + "Highlighting a node that's not already visible should trigger a reset " + + "when this is being explicitly requested!"); + + executeSoon(function() { + Services.obs.addObserver(cleanup, DESTROYED, false); + InspectorUI.closeInspectorUI(); + }); +} + +function cleanup() { + Services.obs.removeObserver(whenHighlighting, HIGHLIGHTING); + Services.obs.removeObserver(cleanup, DESTROYED); + gBrowser.removeCurrentTab(); + finish(); +} From 466fae86e317651716e2d26b19c056cf87150645 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Fri, 24 Feb 2012 10:37:40 -0400 Subject: [PATCH 10/29] Bug 723048 - CSS Class names for scopes shouldn't have spaces; r=past --- browser/devtools/debugger/debugger-view.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/browser/devtools/debugger/debugger-view.js b/browser/devtools/debugger/debugger-view.js index 6b1c5c2a397..ca76b07fc2e 100644 --- a/browser/devtools/debugger/debugger-view.js +++ b/browser/devtools/debugger/debugger-view.js @@ -349,7 +349,7 @@ DebuggerView.Properties = { } // compute the id of the element if not specified - aId = aId || (aName + "-scope"); + aId = aId || (aName.toLowerCase().trim().replace(" ", "-") + "-scope"); // contains generic nodes and functionality let element = this._createPropertyElement(aName, aId, "scope", this._vars); @@ -541,12 +541,12 @@ DebuggerView.Properties = { * An array containing the key and grip properties, specifying * the value and/or type & class of the variable (if the type * is not specified, it will be inferred from the value). - * e.g. ["someProp0": 42] - * ["someProp1": true] - * ["someProp2": "nasu"] - * ["someProp3": { type: "undefined" }] - * ["someProp4": { type: "null" }] - * ["someProp5": { type: "object", class: "Object" }] + * e.g. ["someProp0", 42] + * ["someProp1", true] + * ["someProp2", "nasu"] + * ["someProp3", { type: "undefined" }] + * ["someProp4", { type: "null" }] + * ["someProp5", { type: "object", class: "Object" }] * @param string aName * Optional, the property name. * @paarm string aId From 9e6e33625b327b91b0dbbebbd4273875b7146bb6 Mon Sep 17 00:00:00 2001 From: Victor Porof Date: Thu, 23 Feb 2012 18:02:36 +0200 Subject: [PATCH 11/29] Bug 712581 - Display the property details in the debugger using transitions; r=past --- .../themes/gnomestripe/devtools/debugger.css | 23 +++++++++++++++++++ .../themes/pinstripe/devtools/debugger.css | 23 +++++++++++++++++++ .../themes/winstripe/devtools/debugger.css | 23 +++++++++++++++++++ 3 files changed, 69 insertions(+) diff --git a/browser/themes/gnomestripe/devtools/debugger.css b/browser/themes/gnomestripe/devtools/debugger.css index cacc63dce54..96e009c0aad 100644 --- a/browser/themes/gnomestripe/devtools/debugger.css +++ b/browser/themes/gnomestripe/devtools/debugger.css @@ -247,6 +247,29 @@ a { -moz-appearance: treetwistyopen; } +/** + * Animations + */ + +.details[open] { + -moz-animation-duration: 0.25s; + -moz-animation-name: showblock; +} + +@-moz-keyframes showblock { + from { + opacity: 0; + -moz-transform-origin: top; + -moz-transform: scaleY(0); + } + + to { + opacity: 1; + -moz-transform-origin: top; + -moz-transform: scaleY(1); + } +} + /** * Display helpers */ diff --git a/browser/themes/pinstripe/devtools/debugger.css b/browser/themes/pinstripe/devtools/debugger.css index d64c1b307d9..422efbf8bb8 100644 --- a/browser/themes/pinstripe/devtools/debugger.css +++ b/browser/themes/pinstripe/devtools/debugger.css @@ -245,6 +245,29 @@ a { -moz-appearance: treetwistyopen; } +/** + * Animations + */ + +.details[open] { + -moz-animation-duration: 0.25s; + -moz-animation-name: showblock; +} + +@-moz-keyframes showblock { + from { + opacity: 0; + -moz-transform-origin: top; + -moz-transform: scaleY(0); + } + + to { + opacity: 1; + -moz-transform-origin: top; + -moz-transform: scaleY(1); + } +} + /** * Display helpers */ diff --git a/browser/themes/winstripe/devtools/debugger.css b/browser/themes/winstripe/devtools/debugger.css index 5c0819b0473..dabd55c492c 100644 --- a/browser/themes/winstripe/devtools/debugger.css +++ b/browser/themes/winstripe/devtools/debugger.css @@ -249,6 +249,29 @@ a { background-image: url("chrome://global/skin/tree/twisty-open.png"); } +/** + * Animations + */ + +.details[open] { + -moz-animation-duration: 0.25s; + -moz-animation-name: showblock; +} + +@-moz-keyframes showblock { + from { + opacity: 0; + -moz-transform-origin: top; + -moz-transform: scaleY(0); + } + + to { + opacity: 1; + -moz-transform-origin: top; + -moz-transform: scaleY(1); + } +} + /** * Display helpers */ From 4d868ce6769732308e7346eada8767c3d8288cca Mon Sep 17 00:00:00 2001 From: Spyros Livathinos Date: Fri, 24 Feb 2012 10:41:06 -0400 Subject: [PATCH 12/29] Bug 725405 - Move the inline-output comment to the next line; r=msucan --- browser/devtools/scratchpad/scratchpad.js | 5 +++-- ...er_scratchpad_bug690552_display_outputs_errors.js | 2 +- .../test/browser_scratchpad_bug_679467_falsy.js | 12 ++++++------ .../test/browser_scratchpad_execute_print.js | 12 ++++++------ 4 files changed, 16 insertions(+), 15 deletions(-) diff --git a/browser/devtools/scratchpad/scratchpad.js b/browser/devtools/scratchpad/scratchpad.js index 93634beeea7..025d1d4e07a 100644 --- a/browser/devtools/scratchpad/scratchpad.js +++ b/browser/devtools/scratchpad/scratchpad.js @@ -441,7 +441,8 @@ var Scratchpad = { }, /** - * Write out a value at the current insertion point as a block comment + * Write out a value at the next line from the current insertion point. + * The comment block will always be preceded by a newline character. * @param object aValue * The Object to write out as a string */ @@ -452,7 +453,7 @@ var Scratchpad = { selection.end : // after selected text this.editor.getCharCount(); // after text end - let newComment = "/*\n" + aValue + "\n*/"; + let newComment = "\n/*\n" + aValue + "\n*/"; this.setText(newComment, insertionPoint, insertionPoint); diff --git a/browser/devtools/scratchpad/test/browser_scratchpad_bug690552_display_outputs_errors.js b/browser/devtools/scratchpad/test/browser_scratchpad_bug690552_display_outputs_errors.js index 760d4cdd5f0..f1c942aa5c9 100644 --- a/browser/devtools/scratchpad/test/browser_scratchpad_bug690552_display_outputs_errors.js +++ b/browser/devtools/scratchpad/test/browser_scratchpad_bug690552_display_outputs_errors.js @@ -21,7 +21,7 @@ function runTests() var scratchpad = gScratchpadWindow.Scratchpad; var message = "\"Hello World!\"" - var openComment = "/*\n"; + var openComment = "\n/*\n"; var closeComment = "\n*/"; var error = "throw new Error(\"Ouch!\")"; let messageArray = {}; diff --git a/browser/devtools/scratchpad/test/browser_scratchpad_bug_679467_falsy.js b/browser/devtools/scratchpad/test/browser_scratchpad_bug_679467_falsy.js index e19754fb4f2..e23103a9be2 100644 --- a/browser/devtools/scratchpad/test/browser_scratchpad_bug_679467_falsy.js +++ b/browser/devtools/scratchpad/test/browser_scratchpad_bug_679467_falsy.js @@ -30,25 +30,25 @@ function verifyFalsies(sp) { sp.setText("undefined"); sp.display(); - is(sp.selectedText, "/*\nundefined\n*/", "'undefined' is displayed"); + is(sp.selectedText, "\n/*\nundefined\n*/", "'undefined' is displayed"); sp.setText("false"); sp.display(); - is(sp.selectedText, "/*\nfalse\n*/", "'false' is displayed"); + is(sp.selectedText, "\n/*\nfalse\n*/", "'false' is displayed"); sp.setText("0"); sp.display(); - is(sp.selectedText, "/*\n0\n*/", "'0' is displayed"); + is(sp.selectedText, "\n/*\n0\n*/", "'0' is displayed"); sp.setText("null"); sp.display(); - is(sp.selectedText, "/*\nnull\n*/", "'null' is displayed"); + is(sp.selectedText, "\n/*\nnull\n*/", "'null' is displayed"); sp.setText("NaN"); sp.display(); - is(sp.selectedText, "/*\nNaN\n*/", "'NaN' is displayed"); + is(sp.selectedText, "\n/*\nNaN\n*/", "'NaN' is displayed"); sp.setText("''"); sp.display(); - is(sp.selectedText, "/*\n\n*/", "empty string is displayed"); + is(sp.selectedText, "\n/*\n\n*/", "empty string is displayed"); } diff --git a/browser/devtools/scratchpad/test/browser_scratchpad_execute_print.js b/browser/devtools/scratchpad/test/browser_scratchpad_execute_print.js index 5278fcffc32..f1c24766028 100644 --- a/browser/devtools/scratchpad/test/browser_scratchpad_execute_print.js +++ b/browser/devtools/scratchpad/test/browser_scratchpad_execute_print.js @@ -40,13 +40,13 @@ function runTests() is(content.wrappedJSObject.foobarBug636725, 3, "display() updated window.foobarBug636725"); - is(sp.getText(), "++window.foobarBug636725/*\n3\n*/", + is(sp.getText(), "++window.foobarBug636725\n/*\n3\n*/", "display() shows evaluation result in the textbox"); - is(sp.selectedText, "/*\n3\n*/", "selectedText is correct"); + is(sp.selectedText, "\n/*\n3\n*/", "selectedText is correct"); let selection = sp.getSelectionRange(); is(selection.start, 24, "selection.start is correct"); - is(selection.end, 31, "selection.end is correct"); + is(selection.end, 32, "selection.end is correct"); // Test selection run() and display(). @@ -94,16 +94,16 @@ function runTests() "display() worked for the selected range"); is(sp.getText(), "window.foobarBug636725" + - "/*\na\n*/" + + "\n/*\na\n*/" + " = 'c';\n" + "window.foobarBug636725 = 'b';", "display() shows evaluation result in the textbox"); - is(sp.selectedText, "/*\na\n*/", "selectedText is correct"); + is(sp.selectedText, "\n/*\na\n*/", "selectedText is correct"); selection = sp.getSelectionRange(); is(selection.start, 22, "selection.start is correct"); - is(selection.end, 29, "selection.end is correct"); + is(selection.end, 30, "selection.end is correct"); sp.deselect(); From 8cb0a95c2fdb354998f6db49ca94294abac3b8e0 Mon Sep 17 00:00:00 2001 From: David Seifried Date: Fri, 24 Feb 2012 10:46:04 -0500 Subject: [PATCH 13/29] Bug 702161 - videocontrols.xml has anonymous function event listeners that are added but never removed. r=dolske --- toolkit/content/widgets/videocontrols.xml | 50 +++++++++++++++-------- 1 file changed, 32 insertions(+), 18 deletions(-) diff --git a/toolkit/content/widgets/videocontrols.xml b/toolkit/content/widgets/videocontrols.xml index 105353011e2..0981dd8ddd6 100644 --- a/toolkit/content/widgets/videocontrols.xml +++ b/toolkit/content/widgets/videocontrols.xml @@ -634,10 +634,15 @@ } for each (let event in this.videoEvents) this.video.removeEventListener(event, this, false); + + for each(let element in this.controlListeners) + element.item.removeEventListener(element.event, element.func, false); + + delete this.controlListeners; + this.video.removeEventListener("media-showStatistics", this._handleCustomEventsBound, false); delete this._handleCustomEventsBound; - this.video.ownerDocument.removeEventListener("mozfullscreenchange", this._setFullscreenButtonStateBound, false); - delete this._setFullscreenButtonStateBound; + this.log("--- videocontrols terminated ---"); }, @@ -1330,10 +1335,20 @@ this.video.addEventListener(event, this, (event == "error") ? true : false); var self = this; - this.muteButton.addEventListener("command", function() { self.toggleMute(); }, false); - this.playButton.addEventListener("command", function() { self.togglePause(); }, false); - this.fullscreenButton.addEventListener("command", function() { self.toggleFullscreen(); }, false ); - this.clickToPlay.addEventListener("click", function clickToPlayClickHandler(e) { + + this.controlListeners = []; + + // Helper function to add an event listener to the given element + function addListener(elem, eventName, func) { + let boundFunc = func.bind(self); + self.controlListeners.push({ item: elem, event: eventName, func: boundFunc }); + elem.addEventListener(eventName, boundFunc, false); + } + + addListener(this.muteButton, "command", this.toggleMute); + addListener(this.playButton, "command", this.togglePause); + addListener(this.fullscreenButton, "command", this.toggleFullscreen); + addListener(this.clickToPlay, "click", function clickToPlayClickHandler(e) { if (e.button != 0 || self.hasError()) return; // Read defaultPrevented asynchronously, since Web content @@ -1343,9 +1358,8 @@ if (!e.defaultPrevented) self.handleClickToPlay(); }, 0); - }, false); - - this.controlsSpacer.addEventListener("click", function spacerClickHandler(e) { + }); + addListener(this.controlsSpacer, "click", function(e) { if (e.button != 0 || self.hasError()) return; // Read defaultPrevented asynchronously, since Web content @@ -1355,22 +1369,22 @@ if (!e.defaultPrevented) self.togglePause(); }, 0); - }, false); + }); if (!this.isAudioOnly) { - this.muteButton.addEventListener("mouseover", function(e) { self.onVolumeMouseInOut(e); }, false); - this.muteButton.addEventListener("mouseout", function(e) { self.onVolumeMouseInOut(e); }, false); - this.volumeStack.addEventListener("mouseover", function(e) { self.onVolumeMouseInOut(e); }, false); - this.volumeStack.addEventListener("mouseout", function(e) { self.onVolumeMouseInOut(e); }, false); + addListener(this.muteButton, "mouseover", this.onVolumeMouseInOut); + addListener(this.muteButton, "mouseout", this.onVolumeMouseInOut); + addListener(this.volumeStack, "mouseover", this.onVolumeMouseInOut); + addListener(this.volumeStack, "mouseout", this.onVolumeMouseInOut); } - this.videocontrols.addEventListener("transitionend", function(e) { self.onTransitionEnd(e); }, false); - this._setFullscreenButtonStateBound = this.setFullscreenButtonState.bind(this); - this.video.ownerDocument.addEventListener("mozfullscreenchange", this._setFullscreenButtonStateBound, false); + addListener(this.videocontrols, "transitionend", this.onTransitionEnd); + addListener(this.video.ownerDocument, "mozfullscreenchange", this.setFullscreenButtonState); // Make the