Bug 516122: Support more <textbox> styles and a <menulist> widget in settings, r=gavin

--HG--
rename : mobile/chrome/content/checkbox.xml => mobile/chrome/content/bindings/checkbox.xml
rename : mobile/chrome/content/preferences/setting.xml => mobile/chrome/content/bindings/setting.xml

mobile/chrome/content/bindings.xml

@@ -914,6 +914,27 @@
     </handlers>
   </binding>
 
+  <binding id="menulist" display="xul:box" extends="chrome://global/content/bindings/menulist.xml#menulist">
+    <handlers>
+      <handler event="mousedown" phase="capturing">
+        <![CDATA[
+          // Stop the normal menupopup from appearing
+          event.stopPropagation();
+        ]]>
+      </handler>
+
+      <handler event="click" button="0">
+        <![CDATA[
+          if (this.disabled || this.itemCount == 0)
+            return;
+      
+          this.focus();
+          SelectHelper.show(this);
+        ]]>
+      </handler>
+    </handlers>
+  </binding>
+
   <binding id="chrome-select">
     <content>
       <children />

mobile/chrome/content/bindings/setting.xml

@@ -104,7 +104,7 @@
     </implementation>
   </binding>
 
-  <binding id="setting-bool" extends="chrome://browser/content/preferences/setting.xml#setting-base">
+  <binding id="setting-bool" extends="chrome://browser/content/bindings/setting.xml#setting-base">
     <content>
       <xul:box flex="1" class="prefbox">
         <xul:vbox flex="1">
@@ -127,7 +127,7 @@
     </implementation>
   </binding>
 
-  <binding id="setting-boolint" extends="chrome://browser/content/preferences/setting.xml#setting-base">
+  <binding id="setting-boolint" extends="chrome://browser/content/bindings/setting.xml#setting-base">
     <content>
       <xul:box flex="1" class="prefbox">
         <xul:vbox flex="1">
@@ -164,7 +164,7 @@
     </implementation>
   </binding>
 
-  <binding id="setting-button" extends="chrome://browser/content/preferences/setting.xml#setting-base">
+  <binding id="setting-control" extends="chrome://browser/content/bindings/setting.xml#setting-base">
     <content>
       <xul:box flex="1" class="prefbox">
         <xul:vbox flex="1">
@@ -174,7 +174,7 @@
           </xul:label>
         </xul:vbox>
         <xul:hbox anonid="input-container">
-          <children includes="button"/>
+          <children includes="button|menulist"/>
         </xul:hbox>
       </xul:box>
       <xul:preferences>
@@ -184,7 +184,7 @@
     </content>
   </binding>
   
-  <binding id="setting-string" extends="chrome://browser/content/preferences/setting.xml#setting-base">
+  <binding id="setting-string" extends="chrome://browser/content/bindings/setting.xml#setting-base">
     <content>
       <xul:box flex="1" class="prefbox">
         <xul:vbox flex="1">
@@ -194,7 +194,7 @@
           </xul:label>
         </xul:vbox>
         <xul:hbox anonid="input-container">
-          <xul:textbox xbl:inherits="disabled,type=inputtype" anonid="input" oninput="inputChanged();"/>
+          <xul:textbox xbl:inherits="disabled,emptytext,type=inputtype,min,max,increment,hidespinbuttons,wraparound,decimalplaces" anonid="input" oninput="inputChanged();"/>
         </xul:hbox>
       </xul:box>
       <xul:preferences>

mobile/chrome/content/browser-ui.js

@@ -951,6 +951,55 @@ var BookmarkList = {
   }
 };
 
+function SelectWrapper(aControl) {
+  this._control = aControl;
+}
+
+SelectWrapper.prototype = {
+  get selectedIndex() { return this.control.selectedIndex; },
+  get multiple() { return this._control.multiple; },
+  get options() { return this._control.options; },
+  get children() { return this._control.children; },
+  
+  getText: function(aChild) { return aChild.text; },
+  isOption: function(aChild) { return aChild instanceof HTMLOptionElement; },
+  isGroup: function(aChild) { return aChild instanceof HTMLOptGroupElement; },
+  select: function(aIndex, aSelected, aClearAll) {
+    let selectElement = this._control.wrappedJSObject.selectElement;
+    selectElement.setOptionsSelectedByIndex(aIndex, aIndex, aSelected, aClearAll, false, true);
+  },
+  focus: function() { this._control.focus(); },
+  fireOnChange: function() {
+    let control = this._control.wrappedJSObject;
+    if ("onchange" in control)
+      control.onchange();
+  }
+};
+
+function MenulistWrapper(aControl) {
+  this._control = aControl;
+}
+
+MenulistWrapper.prototype = {
+  get selectedIndex() { return this.control.selectedIndex; },
+  get multiple() { return false; },
+  get options() { return this._control.menupopup.children; },
+  get children() { return this._control.menupopup.children; },
+  
+  getText: function(aChild) { return aChild.label; },
+  isOption: function(aChild) { return aChild instanceof Ci.nsIDOMXULSelectControlItemElement; },
+  isGroup: function(aChild) { return false },
+  select: function(aIndex, aSelected, aClearAll) {
+    this._control.selectedIndex = aIndex;
+  },
+  focus: function() { this._control.focus(); },
+  fireOnChange: function() {
+    let control = this._control;
+    if ("onchange" in control)
+      control.onchange();
+  }
+};
+
 var SelectHelper = {
   _panel: null,
   _list: null,
@@ -978,7 +1027,13 @@ var SelectHelper = {
     if (!aControl)
       return;
 
-    this._control = aControl;
+    if (aControl instanceof HTMLSelectElement)
+      this._control = new SelectWrapper(aControl);
+    else if (aControl instanceof Ci.nsIDOMXULMenuListElement)
+      this._control = new MenulistWrapper(aControl);
+    else
+      throw "Unknown list element";
+
     this._selectedIndexes = this._getSelectedIndexes();
 
     this._list = document.getElementById("select-list");
@@ -990,7 +1045,7 @@ var SelectHelper = {
     let children = this._control.children;
     for (let i=0; i<children.length; i++) {
       let child = children[i];
-      if (child instanceof HTMLOptGroupElement) {
+      if (this._control.isGroup(child)) {
         let group = document.createElement("option");
         group.setAttribute("label", child.label);
         this._list.appendChild(group);
@@ -1000,7 +1055,7 @@ var SelectHelper = {
         for (let ii=0; ii<subchildren.length; ii++) {
           let subchild = subchildren[ii];
           let item = document.createElement("option");
-          item.setAttribute("label", subchild.text);
+          item.setAttribute("label", this._control.getText(subchild));
           this._list.appendChild(item);
           item.className = "in-optgroup";
           item.optionIndex = optionIndex++;
@@ -1009,9 +1064,9 @@ var SelectHelper = {
             firstSelected = firstSelected ? firstSelected : item;
           }
         }
-      } else if (child instanceof HTMLOptionElement) {
+      } else if (this._control.isOption(child)) {
         let item = document.createElement("option");
-        item.setAttribute("label", child.textContent);
+        item.setAttribute("label", this._control.getText(child));
         this._list.appendChild(item);
         item.optionIndex = optionIndex++;
         if (child.selected) {
@@ -1077,11 +1132,8 @@ var SelectHelper = {
       }
     }
 
-    if (!isIdentical) {
-      let control = this._control.wrappedJSObject;
-      if ("onchange" in control)
-        control.onchange();
-    }
+    if (!isIdentical) 
+      this._control.fireOnChange();
   },
 
   close: function() {
@@ -1102,12 +1154,11 @@ var SelectHelper = {
     switch (aEvent.type) {
       case "click":
         let item = aEvent.target;
-        let selectElement = this._control.wrappedJSObject.selectElement;
         if (item && item.hasOwnProperty("optionIndex")) {
           if (this._control.multiple) {
             // Toggle the item state
             item.selected = !item.selected;
-            selectElement.setOptionsSelectedByIndex(item.optionIndex, item.optionIndex, item.selected, false, false, true);
+            this._control.select(item.optionIndex, item.selected, false);
           }
           else {
             // Unselect all options
@@ -1119,7 +1170,7 @@ var SelectHelper = {
 
             // Select the new one and update the control
             item.selected = true;
-            selectElement.setOptionsSelectedByIndex(item.optionIndex, item.optionIndex, true, true, false, true);
+            this._control.select(item.optionIndex, true, true);
           }
         }
         break;

mobile/chrome/content/browser.css

@@ -16,23 +16,23 @@ box[type="documenttab"] {
 }
 
 settings {
-  -moz-binding: url("chrome://browser/content/preferences/setting.xml#settings");
+  -moz-binding: url("chrome://browser/content/bindings/setting.xml#settings");
 }
 
 setting[type="bool"] {
-  -moz-binding: url("chrome://browser/content/preferences/setting.xml#setting-bool");
+  -moz-binding: url("chrome://browser/content/bindings/setting.xml#setting-bool");
 }
 
 setting[type="boolint"] {
-  -moz-binding: url("chrome://browser/content/preferences/setting.xml#setting-boolint");
+  -moz-binding: url("chrome://browser/content/bindings/setting.xml#setting-boolint");
 }
 
-setting[type="button"] {
-  -moz-binding: url("chrome://browser/content/preferences/setting.xml#setting-button");
+setting[type="control"] {
+  -moz-binding: url("chrome://browser/content/bindings/setting.xml#setting-control");
 }
 
 setting[type="string"] {
-  -moz-binding: url("chrome://browser/content/preferences/setting.xml#setting-string");
+  -moz-binding: url("chrome://browser/content/bindings/setting.xml#setting-string");
 }
 
 notificationbox {
@@ -80,7 +80,11 @@ radio {
 }
 
 checkbox {
-  -moz-binding: url("chrome://browser/content/checkbox.xml#checkbox-radio");
+  -moz-binding: url("chrome://browser/content/bindings/checkbox.xml#checkbox-radio");
+}
+
+menulist {
+  -moz-binding: url("chrome://browser/content/bindings.xml#menulist");
 }
 
 #select-list > option {

mobile/chrome/content/browser.xul

@@ -349,7 +349,7 @@
             <label value="&prefsHeader.label;"/>
           </hbox>
           <richlistbox id="prefs-list" seltype="single" flex="1">
-            <setting title="&about.title;" type="button">
+            <setting title="&about.title;" type="control">
               &about.description;
               <button id="prefs-about-button" label="&about.button;" oncommand="Browser.addTab('about:fennec', true);"/>
             </setting>
@@ -367,7 +367,7 @@
                 &allowCookies.description;
               </setting>
               <setting pref="signon.rememberSignons" title="&rememberPasswords.title;" type="bool"/>
-              <setting title="&clearPrivateData.title;" type="button">
+              <setting title="&clearPrivateData.title;" type="control">
                 &clearPrivateData.description;
                 <button id="prefs-clear-data" label="&clearPrivateData.button;" command="cmd_sanitize"/>
               </setting>

mobile/chrome/jar.mn

@@ -12,18 +12,18 @@ chrome.jar:
   content/bindings.xml                 (content/bindings.xml)
   content/firstrun.xhtml               (content/firstrun.xhtml)
   content/tabs.xml                     (content/tabs.xml)
-  content/checkbox.xml                 (content/checkbox.xml)
+  content/bindings/checkbox.xml        (content/bindings/checkbox.xml)
   content/notification.xml             (content/notification.xml)
   content/bindings/extensions.xml      (content/bindings/extensions.xml)
   content/bindings/downloads.xml       (content/bindings/downloads.xml)
   content/bindings/console.xml         (content/bindings/console.xml)
   content/bindings/dialog.xml          (content/bindings/dialog.xml)
+  content/bindings/setting.xml         (content/bindings/setting.xml)
   content/browser.css                  (content/browser.css)
   content/cursor.css                   (content/cursor.css)
   content/content.css                  (content/content.css)
   content/checkerboard.png             (content/checkerboard.png)
 % content branding %content/branding/
-  content/preferences/setting.xml      (content/preferences/setting.xml)
 * content/sanitize.xul                 (content/sanitize.xul)
 * content/sanitize.js                  (content/sanitize.js)
   content/BrowserView.js               (content/BrowserView.js)

mobile/themes/hildon/platform.css

@@ -376,3 +376,45 @@ colorpicker > vbox {
 .textbox-search-clear {
   list-style-image: url("chrome://browser/skin/images/search-clear-30.png");
 }
+
+/* menulist ---------------------------------------------------------------- */
+.menulist-label {
+  font-weight: bold !important;
+  font-size: 9pt !important;
+}
+
+menulist {
+  min-width: 12mm !important; /* button size */
+  min-height: 12mm !important; /* button size */
+  color: #000;
+  padding: 0.5mm;
+  border-width: 8px !important;
+  -moz-border-image: url("chrome://browser/skin/images/button-default-64.png") 8 repeat repeat;
+  -moz-appearance: none !important;
+}
+
+menulist:not([disabled="true"]):active:hover {
+  -moz-border-image: url("chrome://browser/skin/images/button-active-64.png") 8 repeat repeat;
+}
+
+menulist[disabled="true"] {
+  color: #aaa !important;
+}
+
+menulist > dropmarker {
+  width: 16px;
+  height: 16px;
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  background-color: transparent;
+  padding: 1px;
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
+  -moz-image-region: auto;
+  display: block;
+  border-left: 1px inset gray;
+}
+
+menulist > dropmarker[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
+  padding: 1px !important;
+}

mobile/themes/wince/platform.css

@@ -552,3 +552,63 @@ colorpicker > vbox {
     list-style-image: url("chrome://browser/skin/images/search-clear-16.png");
   }
 }
+
+/* menulist ---------------------------------------------------------------- */
+.menulist-label {
+  font-weight: bold !important;
+  font-size: 9pt !important;
+}
+
+menulist {
+  min-width: 6mm !important; /* button size */
+  min-height: 6mm !important; /* button size */
+  color: #000;
+  padding: 0.25mm;
+  -moz-appearance: none !important;
+}
+
+menulist[disabled="true"] {
+  color: #aaa !important;
+}
+
+/* hi-res screens */
+@media all and (min-device-width: 401px) {
+  menulist {
+    border-width: 8px !important;
+    -moz-border-image: url("chrome://browser/skin/images/button-default-64.png") 8 repeat repeat;
+  }
+  
+  menulist:not([disabled="true"]):active:hover {
+    -moz-border-image: url("chrome://browser/skin/images/button-active-64.png") 8 repeat repeat;
+  }
+}
+
+/* low-res screens */
+@media all and (max-device-width: 400px) {
+  menulist {
+    border-width: 4px !important;
+    -moz-border-image: url("chrome://browser/skin/images/button-default-36.png") 4 repeat repeat;
+  }
+  
+  menulist:not([disabled="true"]):active:hover {
+    -moz-border-image: url("chrome://browser/skin/images/button-active-36.png") 4 repeat repeat;
+  }
+}
+
+menulist > dropmarker {
+  width: 16px;
+  height: 16px;
+  -moz-box-align: center;
+  -moz-box-pack: center;
+  background-color: transparent;
+  padding: 1px;
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
+  -moz-image-region: auto;
+  display: block;
+  border-left: 1px inset gray;
+}
+
+menulist > dropmarker[disabled="true"] {
+  list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
+  padding: 1px !important;
+}