Bug 506720: Use media queries to adapt browser tools UI for portrait/landscape, r=gavin
authorMark Finkle <mfinkle@mozilla.com>
Fri, 31 Jul 2009 08:33:41 -0400
changeset 65344 0fe7f210beb60d08481b11488379bf276a71c3d8
parent 65343 aad00c2a39516df06d8c175f65060444f0732f38
child 65345 439b2f81fb493271b6810b0696a7c1d021063882
push idunknown
push userunknown
push dateunknown
reviewersgavin
bugs506720
Bug 506720: Use media queries to adapt browser tools UI for portrait/landscape, r=gavin
mobile/chrome/content/browser-ui.js
mobile/chrome/content/browser.xul
mobile/locales/en-US/chrome/browser.dtd
mobile/locales/en-US/chrome/preferences.dtd
mobile/themes/hildon/browser.css
mobile/themes/wince/browser-high.css
mobile/themes/wince/browser-low.css
mobile/themes/wince/browser.css
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -245,20 +245,16 @@ var BrowserUI = {
     if (!this._dialogs.length)
       document.getElementById("toolbar-main").removeAttribute("dialog");
   },
 
   switchPane : function(id) {
     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");
       this._toolbarH = toolbar.boxObject.height;
     }
     return this._toolbarH;
   },
 
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -291,67 +291,65 @@
 
     <vbox id="bookmark-container" hidden="true" class="panel-dark" top="0" left="0">
       <hbox id="bookmark-form" align="start">
         <image id="bookmark-image" src="chrome://browser/skin/images/starred-default-64.png"/>
       </hbox>
     </vbox>
 
     <!-- barrier to the left of the right bar -->
-    <hbox id="panel-container" hidden="true" class="panel-dark" top="0" left="0">
-      <vbox id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
-        <toolbarspring/>
-        <toolbarbutton id="tool-console" type="radio" group="1" hidden="true" class="panel-button button-image" linkedpanel="console-container" oncommand="ConsoleView.init();"/>
+    <box id="panel-container" hidden="true" class="panel-dark" top="0" left="0">
+      <box id="panel-controls" oncommand="BrowserUI.switchPane(event.target.getAttribute('linkedpanel'));">
+        <toolbarbutton id="tool-panel-close" type="check" checked="true" class="page-button button-image" command="cmd_panel"/>
         <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"/>
-      </vbox>
+        <toolbarbutton id="tool-console" type="radio" group="1" hidden="true" class="panel-button button-image" linkedpanel="console-container" oncommand="ConsoleView.init();"/>
+      </box>
       <deck id="panel-items" selectedIndex="2" flex="1">
         <vbox id="addons-container" flex="1">
           <hbox id="addons-header" class="panel-header">
             <label value="&addonsHeader.label;"/>
           </hbox>
           <notificationbox id="addons-messages" flex="1">
             <richlistbox id="addons-list" flex="1">
               <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);"/>
               </richlistitem>
             </richlistbox>
           </notificationbox>
         </vbox>
 
         <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"/>
                 <radio label="&downloadsSortSite.label;" value="site"/>
                 <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();"/>
             </hbox>
           </vbox>
           <richlistbox id="downloads-list" flex="1"/>
         </vbox>
 
         <vbox id="prefs-container" flex="1">
-          <hbox pack="center" id="buttons" oncommand="BrowserUI.showPrefSection(event.target.getAttribute('linkedsection'));">
-            <toolbarbutton id="prefs-content-button" class="show-text button-dark" label="&content.title;" linkedsection="prefs-content"/>
-            <toolbarbutton id="prefs-privacy-button" class="show-text button-dark" label="&privacy.title;" linkedsection="prefs-privacy"/>
+          <hbox id="prefs-header" class="panel-header">
+            <label value="&prefsHeader.label;"/>
           </hbox>
           <richlistbox id="prefs-list" seltype="single" flex="1">
             <vbox class="prefsection" id="prefs-content">
               <label value="&content.title;" crop="end" flex="1"/>
             </vbox>
             <richpref pref="permissions.default.image" title="&showImages.title;" type="boolint" on="1" off="2"/>
             <richpref pref="javascript.enabled" type="bool" title="&enableJavaScript.title;">
               &enableJavaScript.description;
@@ -371,36 +369,37 @@
               &clearPrivateData.description;
               <button id="prefs-clear-data" label="&clearPrivateData.button;" command="cmd_sanitize"/>
             </richpref>
           </richlistbox>
         </vbox>
 
         <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"/>
               <button id="console-button-eval" class="button-dark show-text" label="&consoleEvaluate.label;" oncommand="ConsoleView.evaluateTypein()"/>
             </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 label="&consoleErrors.label;" value="error"/>
-                <radio label="&consoleWarnings.label;" value="warning"/>
-                <radio label="&consoleMessages.label;" value="message"/>
+                <radio id="console-filter-all" label="&consoleAll.label;" value="all" selected="true"/>
+                <radio id="console-filter-messages" label="&consoleMessages.label;" value="message"/>
+                <radio id="console-filter-warnings" label="&consoleWarnings.label;" value="warning"/>
+                <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>
           </vbox>
 
           <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"
                       align="center"
                       flex="1"
                       orient="horizontal"
                       oncommand="BrowserUI.doButtonSearch(event.target);">
         <image class="tool-search"/>
--- a/mobile/locales/en-US/chrome/browser.dtd
+++ b/mobile/locales/en-US/chrome/browser.dtd
@@ -94,14 +94,14 @@
 
 <!ENTITY consoleHeader.label       "Error Console">
 <!ENTITY consoleAll.label          "All">
 <!ENTITY consoleErrors.label       "Errors">
 <!ENTITY consoleWarnings.label     "Warnings">
 <!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:">
 
 <!ENTITY selectListDone.label      "Done">
--- a/mobile/locales/en-US/chrome/preferences.dtd
+++ b/mobile/locales/en-US/chrome/preferences.dtd
@@ -1,8 +1,9 @@
+<!ENTITY prefsHeader.label                         "Preferences">
 <!ENTITY content.title                             "Content">
 <!ENTITY showImages.title                          "Show images">
 <!ENTITY enableJavaScript.title                    "Enable JavaScript">
 <!ENTITY enableJavaScript.description              "Most interactive sites use JavaScript">
 <!ENTITY enablePlugins.title                       "Enable Plugins">
 <!ENTITY enablePlugins.description                 "Plugins are used for special content such as video">
 <!ENTITY privacy.title                             "Privacy &amp; Security">
 <!ENTITY allowCookies.title                        "Allow cookies">
--- a/mobile/themes/hildon/browser.css
+++ b/mobile/themes/hildon/browser.css
@@ -252,20 +252,54 @@ toolbarbutton.page-button {
 }
 
 /* button overflows off the left edge */
 #tool-panel-close {
   list-style-image: url("chrome://browser/skin/images/settings-active-64.png");
   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;
 }
 
 .panel-header {
   padding: 2.2mm; /* core spacing */
 }
 
 #tool-addons {
@@ -299,16 +333,61 @@ toolbarbutton.page-button {
   list-style-image: url("chrome://browser/skin/images/console-default-64.png");
 }
 
 #tool-console:hover:active,
 #tool-console[checked="true"] {
   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 {
   min-height: 0 !important;
   min-width: 0 !important;
   margin-top: -40px; /* keep pixels */
   list-style-image: url("chrome://browser/skin/images/fullscreen-up-40.png");
 }
--- a/mobile/themes/wince/browser-high.css
+++ b/mobile/themes/wince/browser-high.css
@@ -295,21 +295,18 @@ findbar .findbar-closebutton {
   list-style-image: url("chrome://browser/skin/images/unlock-40.png");
 }
 
 #identity-container[mode="verifiedIdentity"] > vbox > #identity-popup-encryption-icon ,
 #identity-container[mode="verifiedDomain"] > vbox > #identity-popup-encryption-icon {
   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;
 }
 
 #select-list > option[selected="true"] > image {
   list-style-image: url("chrome://browser/skin/images/check-30.png");
 }
 
--- a/mobile/themes/wince/browser-low.css
+++ b/mobile/themes/wince/browser-low.css
@@ -296,21 +296,17 @@ findbar .findbar-closebutton {
 }
 
 #identity-container[mode="verifiedIdentity"] > vbox > #identity-popup-encryption-icon ,
 #identity-container[mode="verifiedDomain"] > vbox > #identity-popup-encryption-icon {
   list-style-image: url("chrome://browser/skin/images/lock-24.png");
 }
 
 /* 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;
 }
 
 /* select popup ------------------------------------------------------------ */
 #select-list > option[selected="true"] > image {
   list-style-image: url("chrome://browser/skin/images/check-24.png");
 }
--- a/mobile/themes/wince/browser.css
+++ b/mobile/themes/wince/browser.css
@@ -104,27 +104,107 @@ toolbarbutton.urlbar-cap-button {
 
 toolbarbutton.browser-control-button,
 toolbarbutton.panel-button,
 toolbarbutton.page-button {
   /* space out the buttons a bit vertically */
   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;
 }
 
 .panel-header {
   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;
 }
 
 #bookmarklist-header, #folder-header {
   color: rgb(255,255,255);
   -moz-box-align: center;
   padding: 1.1mm; /* core spacing */
@@ -384,16 +464,23 @@ richpref {
 /* XXX should be a richlistitem.section-header */
 .prefsection {
   font-weight: bold;
   color: #000;
   background-color: lightgray;
   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;
 }
 
 /* XXX should be a richlistitem description.normal */
 .prefdesc {
   font-size: 8pt !important;