Bug 1009056 - Make the width of the Web Audio Editor Inspector controllable by a preference. r=jsantell

browser/app/profile/firefox.js

@@ -1513,6 +1513,9 @@ pref("devtools.canvasdebugger.enabled", false);
 // Enable the Web Audio Editor
 pref("devtools.webaudioeditor.enabled", false);
 
+// Web Audio Editor Inspector Width should be a preference
+pref("devtools.webaudioeditor.inspectorWidth", 300);
+
 // Default theme ("dark" or "light")
 #ifdef MOZ_DEV_EDITION
 pref("devtools.theme", "dark");

browser/devtools/webaudioeditor/test/browser.ini

@@ -55,6 +55,7 @@ skip-if = true # bug 1092571
 [browser_wa_graph-zoom.js]
 [browser_wa_inspector.js]
 [browser_wa_inspector-toggle.js]
+[browser_wa_inspector-width.js]
 [browser_wa_inspector-bypass-01.js]
 [browser_wa_navigate.js]
 [browser_wa_properties-view.js]

browser/devtools/webaudioeditor/test/browser_wa_inspector-width.js

@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+ 
+/**
+ * Test that the WebAudioInspector's Width is saved as
+ * a preference
+ */
+ 
+add_task(function*() {
+  let { target, panel } = yield initWebAudioEditor(SIMPLE_CONTEXT_URL);
+  let { panelWin } = panel;
+  let { gFront, $, $$, EVENTS, InspectorView } = panelWin;
+  let gVars = InspectorView._propsView;
+ 
+  let started = once(gFront, "start-context");
+ 
+  reload(target);
+ 
+  let [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  let nodeIds = actors.map(actor => actor.actorID);
+ 
+  ok(!InspectorView.isVisible(), "InspectorView hidden on start.");
+ 
+  // Open inspector pane
+  $("#inspector-pane-toggle").click();
+  yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
+ 
+  let newInspectorWidth = 500;
+ 
+  // Setting width to new_inspector_width
+  $("#web-audio-inspector").setAttribute("width", newInspectorWidth);
+  reload(target);
+ 
+  //Width should be 500 after reloading
+  [actors] = yield Promise.all([
+    get3(gFront, "create-node"),
+    waitForGraphRendered(panelWin, 3, 2)
+  ]);
+  nodeIds = actors.map(actor => actor.actorID);
+ 
+  // Open inspector pane
+  $("#inspector-pane-toggle").click();
+  yield once(panelWin, EVENTS.UI_INSPECTOR_TOGGLED);
+ 
+  let nodeSet = Promise.all([
+    once(panelWin, EVENTS.UI_INSPECTOR_NODE_SET),
+    once(panelWin, EVENTS.UI_PROPERTIES_TAB_RENDERED),
+    once(panelWin, EVENTS.UI_AUTOMATION_TAB_RENDERED)
+  ]);
+ 
+  click(panelWin, findGraphNode(panelWin, nodeIds[1]));
+  yield nodeSet;
+ 
+  // Getting the width of the audio inspector
+  let width = $("#web-audio-inspector").getAttribute("width");
+ 
+  is(width, newInspectorWidth, "WebAudioEditor's Inspector width should be saved as a preference");
+ 
+  yield teardown(target);
+});

browser/devtools/webaudioeditor/views/inspector.js

@@ -3,9 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
-// Store width as a preference rather than hardcode
-// TODO bug 1009056
-const INSPECTOR_WIDTH = 300;
+const MIN_INSPECTOR_WIDTH = 300;
 
 // Strings for rendering
 const EXPAND_INSPECTOR_STRING = L10N.getStr("expandInspector");
@@ -32,7 +30,7 @@ let InspectorView = {
     // Set up view controller
     this.el = $("#web-audio-inspector");
     this.splitter = $("#inspector-splitter");
-    this.el.setAttribute("width", INSPECTOR_WIDTH);
+    this.el.setAttribute("width", Services.prefs.getIntPref("devtools.webaudioeditor.inspectorWidth"));
     this.button = $("#inspector-pane-toggle");
     mixin(this, ToggleMixin);
     this.bindToggle();
@@ -149,6 +147,10 @@ let InspectorView = {
   },
 
   _onResize: function () {
+    if (this.el.getAttribute("width") < MIN_INSPECTOR_WIDTH) {
+      this.el.setAttribute("width", MIN_INSPECTOR_WIDTH);
+    }
+    Services.prefs.setIntPref("devtools.webaudioeditor.inspectorWidth", this.el.getAttribute("width"));
     window.emit(EVENTS.UI_INSPECTOR_RESIZE);
   },