Bug 994257 - Web Audio Editor now supports both landscape and portrait host views. r=vp

browser/devtools/webaudioeditor/webaudioeditor.xul

@@ -56,9 +56,11 @@
                        tabindex="0"/>
       </toolbar>
       <splitter class="devtools-horizontal-splitter"/>
-      <box id="web-audio-content-pane" flex="1">
+      <box id="web-audio-content-pane"
+           class="devtools-responsive-container"
+           flex="1">
         <hbox flex="1">
-          <box id="web-audio-graph" class="devtools-responsive-container" flex="1">
+          <box id="web-audio-graph" flex="1">
             <vbox flex="1">
               <svg id="graph-svg" flex="1" viewBox="0 0 1000 500"
                   xmlns="http://www.w3.org/2000/svg"

browser/themes/shared/devtools/webaudioeditor.inc.css

@@ -111,12 +111,6 @@ text {
   transition: opacity .5s ease-out 0s;
 }
 
-@media (min-resolution: 2dppx) {
-  .web-audio-inspector .error {
-    background-image: url(alerticon-warning@2x.png);
-  }
-}
-
 #inspector-pane-toggle {
   background: none;
   box-shadow: none;
@@ -151,4 +145,29 @@ text {
   #inspector-pane-toggle:active {
     -moz-image-region: rect(0px,64px,32px,32px);
   }
-}
+
+  .web-audio-inspector .error {
+    background-image: url(alerticon-warning@2x.png);
+  }
+}
+
+/**
+ * Responsive Styles
+ * `.devtools-responsive-container` takes care of most of
+ * the changing of host types.
+ */
+@media (max-width: 700px) {
+  /**
+   * Override the inspector toggle so it's always open
+   * in the portrait view, with the toggle button hidden.
+   */
+  #inspector-pane-toggle {
+    display: none;
+  }
+
+  #web-audio-inspector {
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+  }
+}
+