Bug 602893 - Put setting textboxes on separate row when in portrait [r=mbrubeck]
authorMark Finkle <mfinkle@mozilla.com>
Fri, 08 Oct 2010 15:01:22 -0400
changeset 66809 15ae5c20e5cb9c653a0af66af5849160d0ae6ba8
parent 66808 97e2c956f52dc543e3906b199f54ae743878112d
child 66810 d84291ff6b00ce7463a6cf85f45a62cd04d512b4
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmbrubeck
bugs602893
Bug 602893 - Put setting textboxes on separate row when in portrait [r=mbrubeck]
mobile/chrome/content/bindings/setting.xml
mobile/themes/core/browser.css
mobile/themes/core/config.css
--- a/mobile/chrome/content/bindings/setting.xml
+++ b/mobile/chrome/content/bindings/setting.xml
@@ -158,24 +158,24 @@
       <field name="settings">
         this.parentNode.localName == "settings" ? this.parentNode : null;
       </field>
     </implementation>
   </binding>
 
   <binding id="setting-bool" extends="chrome://browser/content/bindings/setting.xml#setting-base">
     <content>
-      <xul:box flex="1" class="prefbox">
+      <xul:box flex="1" class="prefbox setting-bool">
         <xul:vbox flex="1">
           <xul:label class="preftitle" xbl:inherits="value=title" crop="end" flex="1"/>
           <xul:label class="prefdesc" xbl:inherits="value=desc" crop="end" flex="1">
             <children/>
           </xul:label>
         </xul:vbox>
-        <xul:hbox anonid="input-container">
+        <xul:hbox anonid="input-container" class="setting-input">
           <xul:checkbox anonid="input" xbl:inherits="disabled,onlabel,offlabel" oncommand="inputChanged();"/>
         </xul:hbox>
       </xul:box>
     </content>
 
     <implementation>
       <method name="valueFromPreference">
         <body>
@@ -197,24 +197,24 @@
 
       <property name="value" onget="return this.input.checked;" onset="return this.input.setChecked(val);"/>
       <property name="inverted" readonly="true" onget="return this.getAttribute('inverted');"/>
     </implementation>
   </binding>
 
   <binding id="setting-boolint" extends="chrome://browser/content/bindings/setting.xml#setting-base">
     <content>
-      <xul:box flex="1" class="prefbox">
+      <xul:box flex="1" class="prefbox setting-boolint">
         <xul:vbox flex="1">
           <xul:label class="preftitle" xbl:inherits="value=title" crop="end" flex="1"/>
           <xul:label class="prefdesc" xbl:inherits="value=desc" crop="end" flex="1">
             <children/>
           </xul:label>
         </xul:vbox>
-        <xul:hbox anonid="input-container">
+        <xul:hbox anonid="input-container" class="setting-input">
           <xul:checkbox anonid="input" xbl:inherits="disabled" oncommand="inputChanged();"/>
         </xul:hbox>
       </xul:box>
     </content>
 
     <implementation>
       <method name="valueFromPreference">
         <body>
@@ -235,24 +235,24 @@
 
       <property name="value" onget="return this.input.checked;" onset="return this.input.setChecked(val);"/>
       <property name="inverted" readonly="true" onget="return this.getAttribute('inverted');"/>
     </implementation>
   </binding>
 
   <binding id="setting-integer" extends="chrome://browser/content/bindings/setting.xml#setting-base">
     <content>
-      <xul:box flex="1" class="prefbox">
+      <xul:box flex="1" class="prefbox setting-integer">
         <xul:vbox flex="1">
           <xul:label class="preftitle" xbl:inherits="value=title" crop="end" flex="1"/>
           <xul:label class="prefdesc" xbl:inherits="value=desc" crop="end" flex="1">
             <children/>
           </xul:label>
         </xul:vbox>
-        <xul:hbox anonid="input-container">
+        <xul:hbox anonid="input-container" class="setting-input">
           <xul:textbox type="number" anonid="input" xbl:inherits="disabled,emptytext,min,max,increment,hidespinbuttons,wraparound" oninput="inputChanged();" oncommand="inputChanged();"/>
         </xul:hbox>
       </xul:box>
     </content>
 
     <implementation>
       <method name="valueFromPreference">
         <body>
@@ -273,40 +273,40 @@
 
       <property name="type" readonly="true" onget="return this.getAttribute('type');"/>
       <property name="value" onget="return this.input.value;" onset="return this.input.value = val;"/>
     </implementation>
   </binding>
 
   <binding id="setting-control" extends="chrome://browser/content/bindings/setting.xml#setting-base">
     <content>
-      <xul:box flex="1" class="prefbox">
+      <xul:box flex="1" class="prefbox setting-control">
         <xul:vbox flex="1">
           <xul:label class="preftitle" xbl:inherits="value=title" crop="end" flex="1"/>
           <xul:label class="prefdesc" xbl:inherits="value=desc" crop="end" flex="1">
             <children/>
           </xul:label>
         </xul:vbox>
-        <xul:hbox anonid="input-container">
+        <xul:hbox anonid="input-container" class="setting-input">
           <children includes="button|menulist"/>
         </xul:hbox>
       </xul:box>
     </content>
   </binding>
 
   <binding id="setting-string" extends="chrome://browser/content/bindings/setting.xml#setting-base">
     <content>
-      <xul:box flex="1" class="prefbox">
+      <xul:box flex="1" class="prefbox setting-string">
         <xul:vbox flex="1">
           <xul:label class="preftitle" xbl:inherits="value=title" crop="end" flex="1"/>
           <xul:label class="prefdesc" xbl:inherits="value=desc" crop="end" flex="1">
             <children/>
           </xul:label>
         </xul:vbox>
-        <xul:hbox anonid="input-container">
+        <xul:hbox anonid="input-container" class="setting-input">
           <xul:textbox xbl:inherits="disabled,emptytext,type=inputtype,min,max,increment,hidespinbuttons,decimalplaces,wraparound" anonid="input" oninput="inputChanged();"/>
         </xul:hbox>
       </xul:box>
     </content>
 
     <implementation>
       <method name="valueFromPreference">
         <body>
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -1335,16 +1335,31 @@ pageaction:hover:active > vbox > .pageac
 /* XXX should be a richlistitem */
 .prefbox {
   padding: 2px;
   border-bottom: 1px solid rgb(207,207,207);
   min-height: 70px; /* row size */
   -moz-box-align: center;
 }
 
+/* Put setting textboxes on a separate row in portrait */
+@media (max-width: 499px) {
+  .setting-integer,
+  .setting-string {
+    -moz-box-align: start;
+    -moz-box-orient: vertical;
+  }
+
+  .setting-integer > .setting-input > textbox,
+  .setting-string > .setting-input > textbox {
+    width: 499px; /* textboxes seem to need a width in order to flex */
+    -moz-box-flex: 1;
+  }
+}
+
 .options-box {
   -moz-margin-start: 28px;  /* sized based on the 32px addon image */
 }
 
 .options-box > setting:last-child > .prefbox {
   border-bottom: 0;
 }
 
--- a/mobile/themes/core/config.css
+++ b/mobile/themes/core/config.css
@@ -101,20 +101,20 @@ richlistitem .prefvalue {
 #editor[default="false"] .preftitle {
   font-weight: bold;
 }
 
 #editor-setting .prefbox {
   border-color: transparent !important;
 }
 
-#editor-setting[type="string"] [anonid="input-container"] {
+#editor-setting[type="string"] .setting-input {
   -moz-box-flex: 4;
 }
 
-#editor-setting[type="string"] [anonid="input-container"] > textbox {
+#editor-setting[type="string"] .setting-input > textbox {
   -moz-box-flex: 1;
 }
 
 #editor-buttons {
   margin: 2px;
 }