Bug 818151 - [toolbox] adapt the toolbox UI to make it fit on the side of the browser r=paul

browser/app/profile/firefox.js

@@ -1043,7 +1043,7 @@ pref("devtools.toolbox.sidebar.width", 500);
 pref("devtools.toolbox.host", "bottom");
 pref("devtools.toolbox.selectedTool", "webconsole");
 pref("devtools.toolbox.toolbarSpec", '["paintflashing toggle","tilt toggle","scratchpad","resize toggle"]');
-pref("devtools.toolbox.sideEnabled", false);
+pref("devtools.toolbox.sideEnabled", true);
 
 // Enable the Inspector
 pref("devtools.inspector.enabled", true);

browser/devtools/framework/Toolbox.jsm

@@ -402,23 +402,32 @@ Toolbox.prototype = {
     let id = toolDefinition.id;
 
     let radio = this.doc.createElement("radio");
-    radio.setAttribute("label", toolDefinition.label);
     radio.className = "toolbox-tab devtools-tab";
     radio.id = "toolbox-tab-" + id;
+    radio.setAttribute("flex", "1");
     radio.setAttribute("toolid", id);
     radio.setAttribute("tooltiptext", toolDefinition.tooltip);
-    if (toolDefinition.icon) {
-      radio.setAttribute("src", toolDefinition.icon);
-    }
 
     radio.addEventListener("command", function(id) {
       this.selectTool(id);
     }.bind(this, id));
 
+    if (toolDefinition.icon) {
+      let image = this.doc.createElement("image");
+      image.setAttribute("src", toolDefinition.icon);
+      radio.appendChild(image);
+    }
+
+    let label = this.doc.createElement("label");
+    label.setAttribute("value", toolDefinition.label)
+    label.setAttribute("crop", "end");
+    label.setAttribute("flex", "1");
+
     let vbox = this.doc.createElement("vbox");
     vbox.className = "toolbox-panel";
     vbox.id = "toolbox-panel-" + id;
 
+    radio.appendChild(label);
     tabs.appendChild(radio);
     deck.appendChild(vbox);
 
@@ -434,6 +443,13 @@ Toolbox.prototype = {
   selectTool: function TBOX_selectTool(id) {
     let deferred = Promise.defer();
 
+    let selected = this.doc.querySelector(".devtools-tab[selected]");
+    if (selected) {
+      selected.removeAttribute("selected");
+    }
+    let tab = this.doc.getElementById("toolbox-tab-" + id);
+    tab.setAttribute("selected", "true");
+
     if (this._currentToolId == id) {
       // Return the existing panel in order to have a consistent return value.
       return Promise.resolve(this._toolPanels.get(id));

browser/devtools/framework/toolbox.xul

@@ -28,9 +28,9 @@
         <hbox id="toolbox-dock-buttons"/>
       </hbox>
 #endif
-      <radiogroup id="toolbox-tabs" orient="horizontal">
-      </radiogroup>
-      <hbox id="toolbox-buttons" flex="1" pack="end"/>
+      <hbox id="toolbox-tabs" flex="1">
+      </hbox>
+      <hbox id="toolbox-buttons" pack="end"/>
 #ifndef XP_MACOSX
       <vbox id="toolbox-controls-separator"/>
       <hbox id="toolbox-controls">

browser/themes/linux/devtools/common.css

@@ -219,6 +219,10 @@
 
 /* In-tools sidebar */
 
+.devtools-toolbox-side-iframe {
+  min-width: 465px;
+}
+
 .devtools-sidebar-tabs {
   -moz-appearance: none;
   margin: 0;

browser/themes/linux/devtools/toolbox.css

@@ -150,8 +150,10 @@
 
 .devtools-tab {
   -moz-appearance: none;
-  min-width: 88px;
+  width: 47px;
+  min-width: 47px;
   min-height: 32px;
+  max-width: 137px;
   color: #b6babf;
   margin: 0;
   padding: 0;
@@ -163,25 +165,23 @@
   border-right: 1px solid hsla(206,37%,4%,.45);
 }
 
-.devtools-tab > .radio-label-center-box > .radio-label-box {
-  -moz-appearance: none;
+.devtools-tab > image {
   border: none;
-  padding: 0 16px;
-}
-
-.devtools-tab > .radio-label-center-box >.radio-label-box > .radio-icon {
   -moz-margin-end: 6px;
+  -moz-margin-start: 16px;
   opacity: 0.6;
 }
 
-.devtools-tab:hover > .radio-label-center-box > .radio-label-box >
-.radio-icon {
+.devtools-tab > label {
+  white-space: nowrap;
+}
+
+.devtools-tab:hover > image {
   opacity: 0.8;
 }
 
-.devtools-tab:active > .radio-label-center-box > .radio-label-box > .radio-icon,
-.devtools-tab[selected=true] > .radio-label-center-box > .radio-label-box >
-.radio-icon {
+.devtools-tab:active > image,
+.devtools-tab[selected=true] > label {
   opacity: 1;
 }
 

browser/themes/osx/devtools/common.css

@@ -233,6 +233,10 @@
 
 /* In-tools sidebar */
 
+.devtools-toolbox-side-iframe {
+  min-width: 465px;
+}
+
 .devtools-sidebar-tabs {
   -moz-appearance: none;
   margin: 0;

browser/themes/osx/devtools/toolbox.css

@@ -139,8 +139,10 @@
 
 .devtools-tab {
   -moz-appearance: none;
-  min-width: 88px;
+  width: 47px;
+  min-width: 47px;
   min-height: 32px;
+  max-width: 137px;
   color: #b6babf;
   margin: 0;
   padding: 0;
@@ -152,21 +154,22 @@
   border-right: 1px solid hsla(206,37%,4%,.45);
 }
 
-.devtools-tab > .radio-label-box {
-  padding: 0 16px;
-}
-
-.devtools-tab > .radio-label-box > .radio-icon {
+.devtools-tab > image {
   -moz-margin-end: 6px;
+  -moz-margin-start: 16px;
   opacity: 0.6;
 }
 
-.devtools-tab:hover > .radio-label-box > .radio-icon {
+.devtools-tab > label {
+  white-space: nowrap;
+}
+
+.devtools-tab:hover > image {
   opacity: 0.8;
 }
 
-.devtools-tab:active > .radio-label-box > .radio-icon,
-.devtools-tab[selected=true] > .radio-label-box > .radio-icon {
+.devtools-tab:active > image,
+.devtools-tab[selected=true] > image {
   opacity: 1;
 }
 

browser/themes/windows/devtools/common.css

@@ -239,6 +239,10 @@
 
 /* In-tools sidebar */
 
+.devtools-toolbox-side-iframe {
+  min-width: 465px;
+}
+
 .devtools-sidebar-tabs {
   -moz-appearance: none;
   margin: 0;

browser/themes/windows/devtools/toolbox.css

@@ -151,8 +151,10 @@
 
 .devtools-tab {
   -moz-appearance: none;
-  min-width: 88px;
+  width: 47px;
+  min-width: 47px;
   min-height: 32px;
+  max-width: 137px;
   color: #b6babf;
   margin: 0;
   padding: 0;
@@ -165,22 +167,18 @@
   border-right: 1px solid hsla(206,37%,4%,.45);
 }
 
-.devtools-tab > .radio-label-box {
-  border: none;
-  padding: 0 16px;
-}
-
-.devtools-tab > .radio-label-box > .radio-icon {
+.devtools-tab > image {
   -moz-margin-end: 6px;
+  -moz-margin-start: 16px;
   opacity: 0.6;
 }
 
-.devtools-tab:hover > .radio-label-box > .radio-icon {
+.devtools-tab:hover > image {
   opacity: 0.8;
 }
 
-.devtools-tab:active > .radio-label-box > .radio-icon,
-.devtools-tab[selected=true] > .radio-label-box > .radio-icon {
+.devtools-tab:active > image,
+.devtools-tab[selected=true] > image {
   opacity: 1;
 }