Bug 691712 - Add some pretty resizers to the Highlighter toolbar when the HTML tree panel is open. r=robcee, r=dao, ui-r=shorlander

browser/base/content/browser.xul

@@ -973,14 +973,27 @@
     <toolbar id="inspector-toolbar"
              nowindowdrag="true"
              hidden="true">
-      <toolbarbutton id="inspector-inspect-toolbutton"
-                     label="&inspectButton.label;"
-                     accesskey="&inspectButton.accesskey;"
-                     command="Inspector:Inspect"/>
-      <toolbarseparator />
-      <hbox id="inspector-tools">
-        <!-- registered tools go here -->
-      </hbox>
+      <vbox flex="1">
+        <resizer id="inspector-top-resizer" flex="1" 
+                 class="inspector-resizer"
+                 dir="top" disabled="true"
+                 element="inspector-tree-box"/>
+        <hbox>
+          <toolbarbutton id="inspector-inspect-toolbutton"
+                         label="&inspectButton.label;"
+                         accesskey="&inspectButton.accesskey;"
+                         command="Inspector:Inspect"/>
+          <toolbarseparator/>
+          <hbox id="inspector-tools">
+            <!-- registered tools go here -->
+          </hbox>
+          <spacer flex="1"/>
+          <resizer id="inspector-end-resizer"
+                   class="inspector-resizer"
+                   dir="top" disabled="true"
+                   element="inspector-tree-box"/>
+        </hbox>
+      </vbox>
     </toolbar>
     <toolbar id="addon-bar"
              toolbarname="&addonBarCmd.label;" accesskey="&addonBarCmd.accesskey;"

browser/devtools/highlighter/TreePanel.jsm

@@ -230,7 +230,14 @@ TreePanel.prototype = {
     treeBox.minHeight = 10;
     treeBox.flex = 1;
     toolbarParent.insertBefore(treeBox, toolbar);
-    this.createResizer();
+
+    let resizerTop =
+      this.IUI.browser.ownerDocument.getElementById("inspector-top-resizer");
+    let resizerEnd =
+      this.IUI.browser.ownerDocument.getElementById("inspector-end-resizer");
+    resizerTop.removeAttribute("disabled");
+    resizerEnd.removeAttribute("disabled");
+
     treeBox.appendChild(this.treeIFrame);
 
     let boundLoadedInitializeTreePanel = function loadedInitializeTreePanel()
@@ -251,28 +258,19 @@ TreePanel.prototype = {
     }
   },
 
-  /**
-   * 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 resizerTop = 
+        this.IUI.browser.ownerDocument.getElementById("inspector-top-resizer");
+      let resizerEnd = 
+        this.IUI.browser.ownerDocument.getElementById("inspector-end-resizer");
+      resizerTop.setAttribute("disabled", "true");
+      resizerEnd.setAttribute("disabled", "true");
+
       let treeBox = this.container;
       let treeBoxParent = treeBox.parentNode;
       treeBoxParent.removeChild(treeBox);
@@ -679,8 +677,6 @@ TreePanel.prototype = {
 
     domplateUtils.setDOM(null);
 
-    delete this.resizer;
-
     if (this.DOMHelpers) {
       this.DOMHelpers.destroy();
       delete this.DOMHelpers;

browser/themes/gnomestripe/browser/browser.css

@@ -1958,7 +1958,7 @@ panel[dimmed="true"] {
 
 #inspector-toolbar {
   -moz-appearance: none;
-  padding: 4px 3px;
+  padding: 0 3px 4px;
   border-top: 1px solid hsla(210, 8%, 5%, .65);
   box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
   background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
@@ -2002,15 +2002,35 @@ panel[dimmed="true"] {
   background-color: hsla(210,8%,5%,.2) !important;
 }
 
-/*
- * need a "bumpy" background image for this!
- */
-#inspector-horizontal-splitter {
-  background: none !important;
+/* Highlighter - toolbar resizers */
+
+.inspector-resizer {
   -moz-appearance: none;
   cursor: n-resize;
 }
 
+.inspector-resizer[disabled] {
+  visibility: hidden;
+}
+
+#inspector-top-resizer {
+  background: none;
+  height: 4px;
+}
+
+#inspector-end-resizer {
+  width: 12px;
+  height: 8px;
+  background-image: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px);
+  background-size: 10px 2px;
+  background-clip: padding-box;
+  background-repeat: repeat-y;
+  border-width: 1px 1px 0;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.05);
+  margin: 7px 7px 8px;
+}
+
 /* Highlighter - Node Infobar */
 
 /* Highlighter - Node Infobar - text */

browser/themes/pinstripe/browser/browser.css

@@ -2563,7 +2563,7 @@ panel[dimmed="true"] {
 
 #inspector-toolbar {
   -moz-appearance: none;
-  padding: 4px 3px;
+  padding: 0 3px 4px;
   border-top: 1px solid hsla(210, 8%, 5%, .65);
   box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
   background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
@@ -2607,15 +2607,35 @@ panel[dimmed="true"] {
   background-color: hsla(210,8%,5%,.2);
 }
 
-/*
- * need a "bumpy" background image for this!
- */
-#inspector-horizontal-splitter {
-  background: none !important;
+/* Highlighter - toolbar resizers */
+
+.inspector-resizer {
   -moz-appearance: none;
   cursor: n-resize;
 }
 
+.inspector-resizer[disabled] {
+  visibility: hidden;
+}
+
+#inspector-top-resizer {
+  background: none;
+  height: 4px;
+}
+
+#inspector-end-resizer {
+  width: 12px;
+  height: 8px;
+  background-image: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px);
+  background-size: 10px 2px;
+  background-clip: padding-box;
+  background-repeat: repeat-y;
+  border-width: 1px 1px 0;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.05);
+  margin: 7px 7px 8px;
+}
+
 /* Highlighter - Node Infobar */
 
 /* Highlighter - Node Infobar - text */

browser/themes/winstripe/browser/browser.css

@@ -2669,7 +2669,7 @@ panel[dimmed="true"] {
 
 #inspector-toolbar {
   -moz-appearance: none;
-  padding: 4px 3px;
+  padding: 0 3px 4px;
   border-top: 1px solid hsla(211,68%,6%,.65) !important;
   box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
   background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
@@ -2713,15 +2713,35 @@ panel[dimmed="true"] {
   background-color: hsla(211,68%,6%,.2);
 }
 
-/*
- * need a "bumpy" background image for this!
- */
-#inspector-horizontal-splitter {
-  background: none !important;
+/* Highlighter - toolbar resizers */
+
+.inspector-resizer {
   -moz-appearance: none;
   cursor: n-resize;
 }
 
+.inspector-resizer[disabled] {
+  visibility: hidden;
+}
+
+#inspector-top-resizer {
+  background: none;
+  height: 4px;
+}
+
+#inspector-end-resizer {
+  width: 12px;
+  height: 8px;
+  background-image: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px);
+  background-size: 10px 2px;
+  background-clip: padding-box;
+  background-repeat: repeat-y;
+  border-width: 1px 1px 0;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.05);
+  margin: 7px 7px 8px;
+}
+
 /* Highlighter - Node Infobar */
 
 /* Highlighter - Node Infobar - text */