Bug 929916 - Make the shader editor UI responsive when docked to the side, r=dcamp
authorVictor Porof <vporof@mozilla.com>
Sat, 26 Oct 2013 13:19:08 +0300
changeset 166154 0f10e96cbad1952ad5d918cf537d39f968ad72c2
parent 166153 2e466ccc7bd04a024dace9cedc9719c300a7f7f7
child 166155 fb8d9cb4698b55bd98391b80bb64cb14cea97fa3
push id3066
push userakeybl@mozilla.com
push dateMon, 09 Dec 2013 19:58:46 +0000
treeherdermozilla-beta@a31a0dce83aa [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdcamp
bugs929916
milestone27.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 929916 - Make the shader editor UI responsive when docked to the side, r=dcamp
browser/devtools/shadereditor/panel.js
browser/devtools/shadereditor/shadereditor.js
browser/devtools/shadereditor/shadereditor.xul
browser/themes/shared/devtools/shadereditor.inc.css
--- 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);
+  }
+}