Bug 672002 - Move HTML panel to a docked panel in the main browser window (highlighter); r=msucan, gavin

browser/devtools/highlighter/TreePanel.jsm

@@ -49,6 +49,8 @@ Cu.import("resource:///modules/Services.jsm");
 
 var EXPORTED_SYMBOLS = ["TreePanel"];
 
+const INSPECTOR_URI = "chrome://browser/content/inspector.html";
+
 /**
  * TreePanel
  * A container for the Inspector's HTML Tree Panel widget constructor function.
@@ -62,13 +64,21 @@ function TreePanel(aContext, aIUI) {
 TreePanel.prototype = {
   showTextNodesWithWhitespace: false,
   id: "treepanel", // DO NOT LOCALIZE
+  openInDock: true,
 
   /**
-   * container.
-   * @returns xul:panel element
+   * The tree panel container element.
+   * @returns xul:panel|xul:vbox|null
+   *          xul:panel is returned when the tree panel is not docked, or
+   *          xul:vbox when when the tree panel is docked.
+   *          null is returned when no container is available.
    */
   get container()
   {
+    if (this.openInDock) {
+      return this.document.getElementById("inspector-tree-box");
+    }
+
     return this.document.getElementById("inspector-tree-panel");
   },
 
@@ -98,13 +108,15 @@ TreePanel.prototype = {
       show: this.open,
       hide: this.close,
       onSelect: this.select,
-      panel: this.container,
+      panel: this.openInDock ? null : this.container,
       unregister: this.destroy,
     };
     this.editingEvents = {};
 
-    this._boundClose = this.close.bind(this);
-    this.container.addEventListener("popuphiding", this._boundClose, false);
+    if (!this.openInDock) {
+      this._boundClose = this.close.bind(this);
+      this.container.addEventListener("popuphiding", this._boundClose, false);
+    }
 
     // Register the HTML panel with the highlighter
     this.IUI.registerTool(this.registrationObject);
@@ -144,38 +156,49 @@ TreePanel.prototype = {
     }
 
     this.initializingTreePanel = true;
-    this.container.hidden = false;
+    if (!this.openInDock)
+      this.container.hidden = false;
 
     this.treeIFrame = this.document.getElementById("inspector-tree-iframe");
     if (!this.treeIFrame) {
-      let resizerBox = this.document.getElementById("tree-panel-resizer-box");
       this.treeIFrame = this.document.createElement("iframe");
       this.treeIFrame.setAttribute("id", "inspector-tree-iframe");
-      this.treeIFrame.setAttribute("flex", "1");
+      this.treeIFrame.flex = 1;
       this.treeIFrame.setAttribute("type", "content");
-      this.treeIFrame = this.container.insertBefore(this.treeIFrame, resizerBox);
     }
 
-    let self = this;
-    this.container.addEventListener("popupshown", function treePanelShown() {
-      self.container.removeEventListener("popupshown",
-        treePanelShown, false);
+    if (this.openInDock) { // Create vbox
+      this.openDocked();
+      return;
+    }
 
-        self.treeIFrame.addEventListener("load",
-          function loadedInitializeTreePanel() {
-            self.treeIFrame.removeEventListener("load",
-              loadedInitializeTreePanel, true);
-            self.initializeIFrame();
-          }, true);
+    let resizerBox = this.document.getElementById("tree-panel-resizer-box");
+    this.treeIFrame = this.container.insertBefore(this.treeIFrame, resizerBox);
 
-      let src = self.treeIFrame.getAttribute("src");
-      if (src != "chrome://browser/content/inspector.html") {
-        self.treeIFrame.setAttribute("src",
-          "chrome://browser/content/inspector.html");
+    let boundLoadedInitializeTreePanel = function loadedInitializeTreePanel()
+    {
+      this.treeIFrame.removeEventListener("load",
+        boundLoadedInitializeTreePanel, true);
+      this.initializeIFrame();
+    }.bind(this);
+
+    let boundTreePanelShown = function treePanelShown()
+    {
+      this.container.removeEventListener("popupshown",
+        boundTreePanelShown, false);
+
+      this.treeIFrame.addEventListener("load",
+        boundLoadedInitializeTreePanel, true);
+
+      let src = this.treeIFrame.getAttribute("src");
+      if (src != INSPECTOR_URI) {
+        this.treeIFrame.setAttribute("src", INSPECTOR_URI);
       } else {
-        self.treeIFrame.contentWindow.location.reload();
+        this.treeIFrame.contentWindow.location.reload();
       }
-    }, false);
+    }.bind(this);
+
+    this.container.addEventListener("popupshown", boundTreePanelShown, false);
 
     const panelWidthRatio = 7 / 8;
     const panelHeightRatio = 1 / 5;
@@ -192,11 +215,68 @@ TreePanel.prototype = {
     this.container.sizeTo(width, height);
   },
 
+  openDocked: function TP_openDocked()
+  {
+    let treeBox = null;
+    let toolbar = this.IUI.toolbar.nextSibling; // Addons bar, typically
+    let toolbarParent =
+      this.IUI.browser.ownerDocument.getElementById("browser-bottombox");
+    treeBox = this.document.createElement("vbox");
+    treeBox.id = "inspector-tree-box";
+    treeBox.state = "open"; // for the registerTools API.
+    treeBox.minHeight = 10;
+    treeBox.flex = 1;
+    toolbarParent.insertBefore(treeBox, toolbar);
+    this.createResizer();
+    treeBox.appendChild(this.treeIFrame);
+
+    let boundLoadedInitializeTreePanel = function loadedInitializeTreePanel()
+    {
+      this.treeIFrame.removeEventListener("load",
+        boundLoadedInitializeTreePanel, true);
+      this.initializeIFrame();
+    }.bind(this);
+
+    this.treeIFrame.addEventListener("load",
+      boundLoadedInitializeTreePanel, true);
+
+    let src = this.treeIFrame.getAttribute("src");
+    if (src != INSPECTOR_URI) {
+      this.treeIFrame.setAttribute("src", INSPECTOR_URI);
+    } else {
+      this.treeIFrame.contentWindow.location.reload();
+    }
+  },
+
+  /**
+   * Lame resizer on the toolbar.
+   */
+  createResizer: function TP_createResizer()
+  {
+    let resizer = this.document.createElement("resizer");
+    resizer.id = "inspector-horizontal-splitter";
+    resizer.setAttribute("dir", "top");
+    resizer.flex = 1;
+    resizer.setAttribute("element", "inspector-tree-box");
+    resizer.height = 24;
+    this.IUI.toolbar.appendChild(resizer);
+    this.resizer = resizer;
+  },
+
   /**
    * Close the TreePanel.
    */
   close: function TP_close()
   {
+    if (this.openInDock) {
+      this.IUI.toolbar.removeChild(this.resizer);
+      let treeBox = this.container;
+      let treeBoxParent = treeBox.parentNode;
+      treeBoxParent.removeChild(treeBox);
+    } else {
+      this.container.hidePopup();
+    }
+
     if (this.treePanelDiv) {
       this.treePanelDiv.ownerPanel = null;
       let parent = this.treePanelDiv.parentNode;
@@ -206,7 +286,6 @@ TreePanel.prototype = {
     }
 
     this.treeLoaded = false;
-    this.container.hidePopup();
   },
 
   /**
@@ -215,6 +294,9 @@ TreePanel.prototype = {
    */
   isOpen: function TP_isOpen()
   {
+    if (this.openInDock)
+      return this.treeLoaded && this.container;
+
     return this.treeLoaded && this.container.state == "open";
   },
 
@@ -664,6 +746,7 @@ TreePanel.prototype = {
 
     domplateUtils.setDOM(null);
 
+    delete this.resizer;
     delete this.treeWalker;
 
     if (this.treePanelDiv) {
@@ -687,8 +770,10 @@ TreePanel.prototype = {
       delete this.ioBox;
     }
 
-    this.container.removeEventListener("popuphiding", this._boundClose, false);
-    delete this._boundClose;
+    if (!this.openInDock) {
+      this.container.removeEventListener("popuphiding", this._boundClose, false);
+      delete this._boundClose;
+    }
   }
 };
 

browser/themes/gnomestripe/browser/browser.css

@@ -1988,3 +1988,12 @@ panel[dimmed="true"] {
   box-shadow: 0 0 0 1px black;
   outline-color: white;
 }
+
+/*
+ * need a "bumpy" background image for this!
+ */
+#inspector-horizontal-splitter {
+  background: none !important;
+  -moz-appearance: none;
+  cursor: n-resize;
+}

browser/themes/pinstripe/browser/browser.css

@@ -2624,3 +2624,13 @@ panel[dimmed="true"] {
 #inspector-tools > toolbarbutton[checked]:hover:active {
   background-color: hsla(210,8%,5%,.2);
 }
+
+/*
+ * need a "bumpy" background image for this!
+ */
+#inspector-horizontal-splitter {
+  background: none !important;
+  -moz-appearance: none;
+  cursor: n-resize;
+}
+

browser/themes/winstripe/browser/browser.css

@@ -2556,3 +2556,13 @@ panel[dimmed="true"] {
   box-shadow: 0 0 0 1px black;
   outline-color: white;
 }
+
+/*
+ * need a "bumpy" background image for this!
+ */
+#inspector-horizontal-splitter {
+  background: none !important;
+  -moz-appearance: none;
+  cursor: n-resize;
+}
+