Bug 865688 - Style Inspector sidebar should remember its size. r=msucan
authorPaul Rouget <paul@mozilla.com>
Fri, 14 Jun 2013 01:41:00 +0200
changeset 136175 de9bcd3c8e6c41b43c3b7e7510abd03faaf92174
parent 136174 ddf46f192e463f1f302c46bb20117d86b270d46f
child 136176 e7e9726025dabe48caafa36b06bf0ee62f1cb377
push id1
push userroot
push dateMon, 20 Oct 2014 17:29:22 +0000
reviewersmsucan
bugs865688
milestone24.0a1
Bug 865688 - Style Inspector sidebar should remember its size. r=msucan
browser/devtools/framework/sidebar.js
browser/devtools/framework/test/browser_toolbox_sidebar.js
browser/devtools/inspector/inspector-panel.js
browser/devtools/scratchpad/scratchpad.js
browser/devtools/webconsole/webconsole.js
--- a/browser/devtools/framework/sidebar.js
+++ b/browser/devtools/framework/sidebar.js
@@ -1,39 +1,50 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+const {Cu} = require("chrome");
+
+Cu.import("resource://gre/modules/Services.jsm");
+
 var Promise = require("sdk/core/promise");
 var EventEmitter = require("devtools/shared/event-emitter");
 var Telemetry = require("devtools/shared/telemetry");
 
 const XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 
 /**
  * ToolSidebar provides methods to register tabs in the sidebar.
  * It's assumed that the sidebar contains a xul:tabbox.
  *
  * @param {Node} tabbox
  *  <tabbox> node;
  * @param {ToolPanel} panel
  *  Related ToolPanel instance;
+ * @param {String} uid
+ *  Unique ID
  * @param {Boolean} showTabstripe
  *  Show the tabs.
  */
-function ToolSidebar(tabbox, panel, showTabstripe=true)
+function ToolSidebar(tabbox, panel, uid, showTabstripe=true)
 {
   EventEmitter.decorate(this);
 
   this._tabbox = tabbox;
+  this._uid = uid;
   this._panelDoc = this._tabbox.ownerDocument;
   this._toolPanel = panel;
 
+  try {
+    this._width = Services.prefs.getIntPref("devtools.toolsidebar-width." + this._uid);
+  } catch(e) {}
+
   this._telemetry = new Telemetry();
 
   this._tabbox.tabpanels.addEventListener("select", this, true);
 
   this._tabs = new Map();
 
   if (!showTabstripe) {
     this._tabbox.setAttribute("hidetabs", "true");
@@ -160,23 +171,27 @@ ToolSidebar.prototype = {
       this.hide();
     }
   },
 
   /**
    * Show the sidebar.
    */
   show: function ToolSidebar_show() {
+    if (this._width) {
+      this._tabbox.width = this._width;
+    }
     this._tabbox.removeAttribute("hidden");
   },
 
   /**
    * Show the sidebar.
    */
   hide: function ToolSidebar_hide() {
+    Services.prefs.setIntPref("devtools.toolsidebar-width." + this._uid, this._tabbox.width);
     this._tabbox.setAttribute("hidden", "true");
   },
 
   /**
    * Return the window containing the tab content.
    */
   getWindowForTab: function ToolSidebar_getWindowForTab(id) {
     if (!this._tabs.has(id)) {
@@ -191,16 +206,18 @@ ToolSidebar.prototype = {
    * Clean-up.
    */
   destroy: function ToolSidebar_destroy() {
     if (this._destroyed) {
       return Promise.resolve(null);
     }
     this._destroyed = true;
 
+    Services.prefs.setIntPref("devtools.toolsidebar-width." + this._uid, this._tabbox.width);
+
     this._tabbox.tabpanels.removeEventListener("select", this, true);
 
     while (this._tabbox.tabpanels.hasChildNodes()) {
       this._tabbox.tabpanels.removeChild(this._tabbox.tabpanels.firstChild);
     }
 
     while (this._tabbox.tabs.hasChildNodes()) {
       this._tabbox.tabs.removeChild(this._tabbox.tabs.firstChild);
--- a/browser/devtools/framework/test/browser_toolbox_sidebar.js
+++ b/browser/devtools/framework/test/browser_toolbox_sidebar.js
@@ -47,17 +47,17 @@ function test() {
 
   addTab("about:blank", function(aBrowser, aTab) {
     let target = TargetFactory.forTab(gBrowser.selectedTab);
     gDevTools.showToolbox(target, toolDefinition.id).then(function(toolbox) {
       let panel = toolbox.getPanel(toolDefinition.id);
       ok(true, "Tool open");
 
       let tabbox = panel.panelDoc.getElementById("sidebar");
-      panel.sidebar = new ToolSidebar(tabbox, panel, true);
+      panel.sidebar = new ToolSidebar(tabbox, panel, "testbug865688", true);
 
       panel.sidebar.on("new-tab-registered", function(event, id) {
         registeredTabs[id] = true;
       });
 
       panel.sidebar.once("tab1-ready", function(event) {
         info(event);
         readyTabs.tab1 = true;
@@ -114,23 +114,35 @@ function test() {
 
     panel.sidebar.once("tab1-unselected", function() {
       ok(true, "received 'unselected' event");
       panel.sidebar.once("tab2-selected", function() {
         ok(true, "received 'selected' event");
         panel.sidebar.hide();
         is(panel.sidebar._tabbox.getAttribute("hidden"), "true", "Sidebar hidden");
         is(panel.sidebar.getWindowForTab("tab1").location.href, tab1URL, "Window is accessible");
-        finishUp(panel);
+        testWidth(panel);
       });
     });
 
     panel.sidebar.select("tab2");
   }
 
+  function testWidth(panel) {
+    let tabbox = panel.panelDoc.getElementById("sidebar");
+    tabbox.width = 420;
+    panel.sidebar.destroy().then(function() {
+      tabbox.width = 0;
+      panel.sidebar = new ToolSidebar(tabbox, panel, "testbug865688", true);
+      panel.sidebar.show();
+      is(panel.panelDoc.getElementById("sidebar").width, 420, "Width restored")
+      finishUp(panel);
+    });
+  }
+
   function finishUp(panel) {
     panel.sidebar.destroy();
     gDevTools.unregisterTool(toolDefinition.id);
 
     executeSoon(function() {
       gBrowser.removeCurrentTab();
       finish();
     });
--- a/browser/devtools/inspector/inspector-panel.js
+++ b/browser/devtools/inspector/inspector-panel.js
@@ -216,17 +216,17 @@ InspectorPanel.prototype = {
     this.searchSuggestions = new SelectorSearch(searchDoc, this.searchBox, setNodeFunction);
   },
 
   /**
    * Build the sidebar.
    */
   setupSidebar: function InspectorPanel_setupSidebar() {
     let tabbox = this.panelDoc.querySelector("#inspector-sidebar");
-    this.sidebar = new ToolSidebar(tabbox, this);
+    this.sidebar = new ToolSidebar(tabbox, this, "inspector");
 
     let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");
 
     this._setDefaultSidebar = function(event, toolId) {
       Services.prefs.setCharPref("devtools.inspector.activeSidebar", toolId);
     }.bind(this);
 
     this.sidebar.on("select", this._setDefaultSidebar);
--- a/browser/devtools/scratchpad/scratchpad.js
+++ b/browser/devtools/scratchpad/scratchpad.js
@@ -1480,17 +1480,17 @@ var Scratchpad = {
 /**
  * Encapsulates management of the sidebar containing the VariablesView for
  * object inspection.
  */
 function ScratchpadSidebar(aScratchpad)
 {
   let ToolSidebar = devtools.require("devtools/framework/sidebar").ToolSidebar;
   let tabbox = document.querySelector("#scratchpad-sidebar");
-  this._sidebar = new ToolSidebar(tabbox, this);
+  this._sidebar = new ToolSidebar(tabbox, this, "scratchpad");
   this._scratchpad = aScratchpad;
 }
 
 ScratchpadSidebar.prototype = {
   /*
    * The ToolSidebar for this sidebar.
    */
   _sidebar: null,
--- a/browser/devtools/webconsole/webconsole.js
+++ b/browser/devtools/webconsole/webconsole.js
@@ -3239,17 +3239,17 @@ JSTerm.prototype = {
    *
    * @see devtools/framework/sidebar.js
    * @private
    */
   _createSidebar: function JST__createSidebar()
   {
     let tabbox = this.hud.document.querySelector("#webconsole-sidebar");
     let ToolSidebar = devtools.require("devtools/framework/sidebar").ToolSidebar;
-    this.sidebar = new ToolSidebar(tabbox, this);
+    this.sidebar = new ToolSidebar(tabbox, this, "webconsole");
     this.sidebar.show();
   },
 
   /**
    * Add the variables view tab to the sidebar.
    *
    * @private
    * @return object