Bug 506720: Use media queries to adapt browser tools UI for portrait/landscape, r=gavin

mobile/chrome/content/browser-ui.js

@@ -250,10 +250,6 @@ var BrowserUI = {
     document.getElementById("panel-items").selectedPanel = document.getElementById(id);
   },
 
-  showPrefSection : function(id) {
-    document.getElementById("prefs-list").scrollBoxObject.scrollToElement(document.getElementById(id));
-  },
-
   get toolbarH() {
     if (!this._toolbarH) {
       let toolbar = document.getElementById("toolbar-main");

mobile/chrome/content/browser.xul

@@ -296,15 +296,14 @@
     </vbox>
 
     <!-- barrier to the left of the right bar -->
-    <hbox id="panel-container" hidden="true" class="panel-dark" top="0" left="0">
+    <box id="panel-container" hidden="true" class="panel-dark" top="0" left="0">
-      <vbox id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
+      <box id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
-        <toolbarspring/>
+        <toolbarbutton id="tool-panel-close" type="check" checked="true" class="page-button button-image" command="cmd_panel"/>
-        <toolbarbutton id="tool-console" type="radio" group="1" hidden="true" class="panel-button button-image" linkedpanel="console-container" oncommand="ConsoleView.init();"/>
         <toolbarbutton id="tool-addons" type="radio" group="1" class="panel-button button-image" linkedpanel="addons-container"/>
         <toolbarbutton id="tool-downloads" type="radio" group="1" class="panel-button button-image" linkedpanel="downloads-container"/>
         <toolbarbutton id="tool-preferences" type="radio" group="1" checked="true" class="panel-button button-image" linkedpanel="prefs-container"/>
-        <toolbarbutton id="tool-panel-close" type="check" checked="true" class="page-button button-image" command="cmd_panel"/>
+        <toolbarbutton id="tool-console" type="radio" group="1" hidden="true" class="panel-button button-image" linkedpanel="console-container" oncommand="ConsoleView.init();"/>
-      </vbox>
+      </box>
       <deck id="panel-items" selectedIndex="2" flex="1">
         <vbox id="addons-container" flex="1">
           <hbox id="addons-header" class="panel-header">
@@ -315,7 +314,7 @@
               <richlistitem id="addons-local" class="section-header" align="center">
                 <label value="&addonsLocal.label;" flex="1"/>
               </richlistitem>
-              <richlistitem id="addons-repo" class="section-header" orient="horizontal" align="center">
+              <richlistitem id="addons-repo" class="section-header">
                 <label value="&addonsRepo.label;" flex="1"/>
                 <textbox id="addons-search-text" emptytext="&addonsSearch.emptytext;" type="search" searchbutton="false"
                          oncommand="ExtensionsView.getAddonsFromRepo(this.value);"/>
@@ -326,7 +325,7 @@
 
         <vbox id="downloads-container" flex="1">
           <vbox id="downloads-header" class="panel-header">
-            <hbox align="center">
+            <box id="downloads-subheader">
               <label value="&downloadsHeader.label;" flex="1"/>
               <radiogroup id="downloads-sort-mode" class="toggle-dark" oncommand="DownloadsView.toggleMode();">
                 <radio label="&downloadsSortDate.label;" value="date" selected="true"/>
@@ -334,7 +333,7 @@
                 <radio label="&downloadsSortName.label;" value="name"/>
                 <radio label="&downloadsSearch.label;" value="search"/>
               </radiogroup>
-            </hbox>
+            </box>
             <hbox id="downloads-search-box" pack="end" collapsed="true">
               <textbox id="downloads-search-text" emptytext="&downloadsSearch.emptytext;" type="search" searchbutton="false"
                        oncommand="DownloadsView.getDownloads();"/>
@@ -344,9 +343,8 @@
         </vbox>
 
         <vbox id="prefs-container" flex="1">
-          <hbox pack="center" id="buttons" oncommand="BrowserUI.showPrefSection(event.target.getAttribute('linkedsection'));">
+          <hbox id="prefs-header" class="panel-header">
-            <toolbarbutton id="prefs-content-button" class="show-text button-dark" label="&content.title;" linkedsection="prefs-content"/>
+            <label value="&prefsHeader.label;"/>
-            <toolbarbutton id="prefs-privacy-button" class="show-text button-dark" label="&privacy.title;" linkedsection="prefs-privacy"/>
           </hbox>
           <richlistbox id="prefs-list" seltype="single" flex="1">
             <vbox class="prefsection" id="prefs-content">
@@ -376,6 +374,7 @@
 
         <vbox id="console-container" flex="1">
           <vbox id="console-header" class="panel-header">
+            <label value="&consoleHeader.label;"/>
             <hbox align="center">
               <label value="&consoleCodeEval.label;" control="console-eval-textbox"/>
               <textbox id="console-eval-textbox" class="toolbar" value="" onkeypress="ConsoleView.onEvalKeyPress(event)" flex="1"/>
@@ -383,10 +382,10 @@
             </hbox>
             <hbox align="center" pack="end">
               <radiogroup id="console-filter" class="toggle-dark" oncommand="ConsoleView.changeMode();">
-                <radio label="&consoleAll.label;" value="all" selected="true"/>
+                <radio id="console-filter-all" label="&consoleAll.label;" value="all" selected="true"/>
-                <radio label="&consoleErrors.label;" value="error"/>
+                <radio id="console-filter-messages" label="&consoleMessages.label;" value="message"/>
-                <radio label="&consoleWarnings.label;" value="warning"/>
+                <radio id="console-filter-warnings" label="&consoleWarnings.label;" value="warning"/>
-                <radio label="&consoleMessages.label;" value="message"/>
+                <radio id="console-filter-errors" label="&consoleErrors.label;" value="error"/>
               </radiogroup>
               <button id="console-clear" class="button-dark show-text" oncommand="ConsoleView.clearConsole();" label="&consoleClear.label;"/>
             </hbox>
@@ -395,7 +394,7 @@
           <richlistbox id="console-box" class="console-box" flex="1"/>
         </vbox>
       </deck>
-    </hbox>
+    </box>
 
     <vbox id="popup_autocomplete" class="panel-dark" hidden="true" top="0" left="0" constraint="ignore-x,vp-relative">
       <arrowscrollbox id="autocomplete_navbuttons"

mobile/locales/en-US/chrome/browser.dtd

@@ -99,7 +99,7 @@
 <!ENTITY consoleMessages.label     "Messages">
 <!ENTITY consoleCodeEval.label     "Code:">
 <!ENTITY consoleClear.label        "Clear">
-<!ENTITY consoleEvaluate.label     "Evaluate">
+<!ENTITY consoleEvaluate.label     "…">
 <!ENTITY consoleErrFile.label      "Source File:">
 <!ENTITY consoleErrLine.label      "Line:">
 <!ENTITY consoleErrColumn.label    "Column:">

mobile/locales/en-US/chrome/preferences.dtd

@@ -1,3 +1,4 @@
+<!ENTITY prefsHeader.label                         "Preferences">
 <!ENTITY content.title                             "Content">
 <!ENTITY showImages.title                          "Show images">
 <!ENTITY enableJavaScript.title                    "Enable JavaScript">

mobile/themes/hildon/browser.css

@@ -257,10 +257,44 @@ toolbarbutton.page-button {
   margin-left: -40px; /* big number just to make sure the image overflows the edge */
 }
 
-/* "extras" panel UI   ----------------------------------------------------- */
+/* browser tools panel UI   ------------------------------------------------ */
+@media (orientation: landscape) {
+  #panel-container {
+    -moz-box-orient: horizontal;
+  }
+  
+  #panel-controls {
+    -moz-box-orient: vertical;
+    -moz-box-ordinal-group: 1;
+    -moz-box-pack: end;
+  }
+  
+  #tool-panel-close {
+    -moz-box-ordinal-group: 1000;
+  }
+}
+
+@media (orientation: portrait) {
+  #panel-container {
+    -moz-box-orient: vertical;
+  }
+  
+  #panel-controls {
+    -moz-box-orient: horizontal;
+    -moz-box-ordinal-group: 1000;
+    -moz-box-pack: start;
+    padding-top: 2.2mm; /* core spacing */
+  }
+  
+  #tool-panel-close {
+    -moz-box-ordinal-group: 1;
+  }
+}
+
 #panel-controls {
   /* match #browser-controls end padding */
-  padding: 0 2.2mm; /* core spacing */
+  padding-left: 2.2mm; /* core spacing */
+  padding-right: 2.2mm; /* core spacing */
   -moz-box-align: end;
 }
 
@@ -304,6 +338,51 @@ toolbarbutton.page-button {
   list-style-image: url("chrome://browser/skin/images/console-active-64.png");
 }
 
+/* downloads panel UI   ---------------------------------------------------- */
+@media (orientation: landscape) {
+  #downloads-subheader {
+    -moz-box-orient: horizontal;
+    -moz-box-align: center;
+  }
+}
+
+@media (orientation: portrait) {
+  #downloads-subheader {
+    -moz-box-orient: vertical;
+    -moz-box-pack: center;
+  }
+}
+
+/* addons panel UI   ------------------------------------------------------- */
+@media (orientation: landscape) {
+  #addons-repo {
+    -moz-box-orient: horizontal;
+    -moz-box-align: center;
+  }
+}
+
+@media (orientation: portrait) {
+  #addons-repo {
+    -moz-box-orient: vertical;
+    -moz-box-pack: center;
+  }
+}
+
+/* console panel UI   ------------------------------------------------------ */
+@media (orientation: landscape) {
+  #console-filter-warnings,
+  #console-filter-messages {
+    visibility: visible;
+  }
+}
+
+@media (orientation: portrait) {
+  #console-filter-warnings,
+  #console-filter-messages {
+    visibility: collapse;
+  }
+}
+
 /* URL List and autocomplete navigation popup ------------------------------ */
 #tool-bookmarks-close,
 #tool-folders-close {

mobile/themes/wince/browser-high.css

@@ -300,11 +300,8 @@ findbar .findbar-closebutton {
   list-style-image: url("chrome://browser/skin/images/lock-40.png");
 }
 
-/* XXX should be a richlistitem */
+/* Preferences window   ---------------------------------------------------- */
 .prefbox {
-  padding: 0.25mm;
-  border-bottom: 0.05mm solid rgb(207,207,207);
-  min-height: 7.2mm; /* row size */
   -moz-box-align: center;
   -moz-box-orient: horizontal;
 }

mobile/themes/wince/browser-low.css

@@ -301,11 +301,7 @@ findbar .findbar-closebutton {
 }
 
 /* Preferences window   ---------------------------------------------------- */
-/* XXX should be a richlistitem */
 .prefbox {
-  padding: 0.25mm 1.1mm;
-  border-bottom: 0.05mm solid rgb(207,207,207);
-  min-height: 7.2mm; /* row size */
   -moz-box-align: start;
   -moz-box-orient: vertical;
 }

mobile/themes/wince/browser.css

@@ -109,10 +109,44 @@ toolbarbutton.page-button {
   margin-bottom: 1.1mm; /* core spacing */
 }
 
-/* "extras" panel UI   ----------------------------------------------------- */
+/* browser tools panel UI   ------------------------------------------------ */
+@media (orientation: landscape) {
+  #panel-container {
+    -moz-box-orient: horizontal;
+  }
+  
+  #panel-controls {
+    -moz-box-orient: vertical;
+    -moz-box-ordinal-group: 1;
+    -moz-box-pack: end;
+  }
+  
+  #tool-panel-close {
+    -moz-box-ordinal-group: 1000;
+  }
+}
+
+@media (orientation: portrait) {
+  #panel-container {
+    -moz-box-orient: vertical;
+  }
+  
+  #panel-controls {
+    -moz-box-orient: horizontal;
+    -moz-box-ordinal-group: 1000;
+    -moz-box-pack: start;
+    padding-top: 1.1mm; /* core spacing */
+  }
+  
+  #tool-panel-close {
+    -moz-box-ordinal-group: 1;
+  }
+}
+
 #panel-controls {
   /* match #browser-controls end padding */
-  padding: 0 1.1mm; /* core spacing */
+  padding-left: 1.1mm; /* core spacing */
+  padding-right: 1.1mm; /* core spacing */
   -moz-box-align: end;
 }
 
@@ -120,6 +154,52 @@ toolbarbutton.page-button {
   padding: 1.1mm; /* core spacing */
 }
 
+/* downloads panel UI   ---------------------------------------------------- */
+@media (orientation: landscape) {
+  #downloads-subheader {
+    -moz-box-orient: horizontal;
+    -moz-box-align: center;
+  }
+}
+
+@media (orientation: portrait) {
+  #downloads-subheader {
+    -moz-box-orient: vertical;
+    -moz-box-pack: center;
+  }
+}
+
+/* addons panel UI   ------------------------------------------------------- */
+@media (orientation: landscape) {
+  #addons-repo {
+    -moz-box-orient: horizontal;
+    -moz-box-align: center;
+  }
+}
+
+@media (orientation: portrait) {
+  #addons-repo {
+    -moz-box-orient: vertical;
+    -moz-box-pack: center;
+  }
+}
+
+/* console panel UI   ------------------------------------------------------ */
+@media (orientation: landscape) {
+  #console-filter-warnings,
+  #console-filter-messages {
+    visibility: visible;
+  }
+}
+
+@media (orientation: portrait) {
+  #console-filter-warnings,
+  #console-filter-messages {
+    visibility: collapse;
+  }
+}
+
+/* bookmark list panel UI   ------------------------------------------------ */
 #bookmarklist-container {
   padding: 0;
 }
@@ -389,6 +469,13 @@ richpref {
   padding: 0.25mm;
 }
 
+/* XXX should be a richlistitem */
+.prefbox {
+  padding: 0.25mm 1.1mm;
+  border-bottom: 0.05mm solid rgb(207,207,207);
+  min-height: 7.2mm; /* row size */
+}
+
 /* XXX should be a richlistitem description.title */
 .preftitle {
   font-size: 9pt !important;