--- a/browser/devtools/shadereditor/panel.js
+++ b/browser/devtools/shadereditor/panel.js
@@ -28,16 +28,17 @@ ShaderEditorPanel.prototype = {
     if (!this.target.isRemote) {
       targetPromise = this.target.makeRemote();
     } else {
       targetPromise = promise.resolve(this.target);
     }
 
     return targetPromise
       .then(() => {
+        this.panelWin.gToolbox = this._toolbox;
         this.panelWin.gTarget = this.target;
         this.panelWin.gFront = new WebGLFront(this.target.client, this.target.form);
         return this.panelWin.startupShaderEditor();
       })
       .then(() => {
         this.isReady = true;
         this.emit("ready");
         return this;

--- a/browser/devtools/shadereditor/shadereditor.js
+++ b/browser/devtools/shadereditor/shadereditor.js
@@ -34,17 +34,17 @@ const DEFAULT_EDITOR_CONFIG = {
   mode: Editor.modes.text,
   lineNumbers: true,
   showAnnotationRuler: true
 };
 
 /**
  * The current target and the WebGL Editor front, set by this tool's host.
  */
-let gTarget, gFront;
+let gToolbox, gTarget, gFront;
 
 /**
  * Initializes the shader editor controller and views.
  */
 function startupShaderEditor() {
   return promise.all([
     EventsHandler.initialize(),
     ShadersListView.initialize(),
@@ -66,32 +66,44 @@ function shutdownShaderEditor() {
 /**
  * Functions handling target-related lifetime events.
  */
 let EventsHandler = {
   /**
    * Listen for events emitted by the current tab target.
    */
   initialize: function() {
+    this._onHostChanged = this._onHostChanged.bind(this);
     this._onWillNavigate = this._onWillNavigate.bind(this);
     this._onProgramLinked = this._onProgramLinked.bind(this);
+    gToolbox.on("host-changed", this._onHostChanged);
     gTarget.on("will-navigate", this._onWillNavigate);
     gFront.on("program-linked", this._onProgramLinked);
 
   },
 
   /**
    * Remove events emitted by the current tab target.
    */
   destroy: function() {
+    gToolbox.off("host-changed", this._onHostChanged);
     gTarget.off("will-navigate", this._onWillNavigate);
     gFront.off("program-linked", this._onProgramLinked);
   },
 
   /**
+   * Handles a host change event on the parent toolbox.
+   */
+  _onHostChanged: function() {
+    if (gToolbox.hostType == "side") {
+      $("#shaders-pane").removeAttribute("height");
+    }
+  },
+
+  /**
    * Called for each location change in the debugged tab.
    */
   _onWillNavigate: function() {
     gFront.setup();
 
     ShadersListView.empty();
     ShadersEditorsView.setText({ vs: "", fs: "" });
     $("#reload-notice").hidden = true;
@@ -167,16 +179,22 @@ let ShadersListView = Heritage.extend(Wi
         checkboxTooltip: L10N.getStr("shadersList.blackboxLabel")
       }
     });
 
     // Make sure there's always a selected item available.
     if (!this.selectedItem) {
       this.selectedIndex = 0;
     }
+
+    // Prevent this container from growing indefinitely in height when the
+    // toolbox is docked to the side.
+    if (gToolbox.hostType == "side" && this.itemCount == SHADERS_AUTOGROW_ITEMS) {
+      this._pane.setAttribute("height", this._pane.getBoundingClientRect().height);
+    }
   },
 
   /**
    * The select listener for the sources container.
    */
   _onShaderSelect: function({ detail: sourceItem }) {
     if (!sourceItem) {
       return;

--- a/browser/devtools/shadereditor/shadereditor.xul
+++ b/browser/devtools/shadereditor/shadereditor.xul
@@ -35,30 +35,30 @@
           pack="center"
           flex="1"
           hidden="true">
       <label id="requests-menu-waiting-notice-label"
              class="plain"
              value="&shaderEditorUI.emptyNotice;"/>
     </hbox>
 
-    <hbox id="content" flex="1" hidden="true">
+    <box id="content" class="devtools-responsive-container" flex="1" hidden="true">
       <vbox id="shaders-pane"/>
       <splitter class="devtools-side-splitter"/>
-      <hbox id="shaders-editors" flex="1">
+      <box id="shaders-editors" class="devtools-responsive-container" flex="1">
         <vbox flex="1">
           <vbox id="vs-editor" flex="1"/>
           <label id="vs-editor-label"
                  class="plain editor-label"
                  value="&shaderEditorUI.vertexShader;"/>
         </vbox>
         <splitter id="editors-splitter" class="devtools-side-splitter"/>
         <vbox flex="1">
           <vbox id="fs-editor" flex="1"/>
           <label id="fs-editor-label"
                  class="plain editor-label"
                  value="&shaderEditorUI.fragmentShader;"/>
         </vbox>
-      </hbox>
-    </hbox>
+      </box>
+    </box>
   </vbox>
 
 </window>

--- a/browser/themes/shared/devtools/shadereditor.inc.css
+++ b/browser/themes/shared/devtools/shadereditor.inc.css
@@ -100,8 +100,37 @@
   color: #fff;
 }
 
 .editor-label[selected] {
   background: linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)) repeat-x top left;
   box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
               inset 0 -1px 0 hsla(210,40%,83%,.05);
 }
+
+/* Responsive sidebar */
+
+@media (max-width: 700px) {
+  #shaders-pane {
+    max-height: 60vh;
+  }
+
+  .side-menu-widget-container {
+    box-shadow: none !important;
+  }
+
+  .side-menu-widget-item-arrow {
+    background-image: none !important;
+  }
+
+  .devtools-side-splitter {
+    border-top-color: transparent !important;
+  }
+
+  .editor-label {
+    -moz-box-ordinal-group: 0;
+  }
+
+  .editor-label:not([selected]) {
+    border-top: 1px solid hsla(210,8%,5%,.25);
+    box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15);
+  }
+}