Bug 716161 - Don't allow clicking disabled selects. r=mfinkle

mobile/android/chrome/content/bindings.xml

@@ -135,13 +135,6 @@
     </implementation>
   </binding>
 
-  <binding id="select-button" extends="xul:box">
-    <content>
-      <svg:svg width="11px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: -moz-calc(50% - 2px); left: 4px;">
-        <svg:polyline points="1 1 5 6 9 1" stroke="#414141" stroke-width="2" stroke-linecap="round" fill="transparent" stroke-linejoin="round"/>
-      </svg:svg>
-    </content>
-  </binding>
 
   <binding id="textbox" extends="chrome://global/content/bindings/textbox.xml#textbox">
     <handlers>

mobile/android/chrome/content/browser.js

@@ -2682,7 +2682,7 @@ var FormAssistant = {
   handleClick: function(aTarget) {
     let target = aTarget;
     while (target) {
-      if (this._isSelectElement(target)) {
+      if (this._isSelectElement(target) && !target.disabled) {
         target.focus();
         let list = this.getListForElement(target);
         this.show(list, target);

mobile/android/themes/core/content.css

@@ -231,22 +231,20 @@ input[type="checkbox"] {
   padding: 2px 1px 2px 1px;
 }
 
-select > input[type="button"] {
+select > button {
   border-width: 0px !important;
   margin: 0px !important;
   padding: 0px !important;
   -moz-border-radius: 0;
   color: #414141;
 
-  background-size: 100% 90%;
+  background-size: auto auto, 100% 90%;
   background-color: transparent;
-  background-image: -moz-radial-gradient(bottom left, #bbbbbb 40%, #f5f5f5) !important;
-  background-position: -15px center !important;
+  background-image: url("chrome://browser/skin/images/dropmarker.svg"),
+                    -moz-radial-gradient(bottom left, #bbbbbb 40%, #f5f5f5) !important;
+  background-position: -moz-calc(50% + 1px) center, -15px center !important;
   background-repeat: no-repeat !important;
 
-  /* Use to position an svg arrow on <select> element */
-  -moz-binding: url("chrome://browser/content/bindings.xml#select-button");
-  position: relative !important;
   font-size: inherit;
 }
 
@@ -330,7 +328,7 @@ input[type="checkbox"][disabled]:hover:active {
   border:1px solid rgba(125,125,125,0.4) !important;
 }
 
-select[disabled] > input[type="button"] {
+select[disabled] > button {
   opacity: 0.6;
   padding: 1px 7px 1px 7px;
 }

mobile/android/themes/core/gingerbread/content.css

@@ -231,22 +231,20 @@ input[type="checkbox"] {
   padding: 2px 1px 2px 1px;
 }
 
-select > input[type="button"] {
+select > button {
   border-width: 0px !important;
   margin: 0px !important;
   padding: 0px !important;
   -moz-border-radius: 0;
   color: #414141;
 
-  background-size: 100% 90%;
+  background-size: auto auto, 100% 90%;
   background-color: transparent;
-  background-image: -moz-radial-gradient(bottom left, #bbbbbb 40%, #f5f5f5) !important;
-  background-position: -15px center !important;
+  background-image: url("chrome://browser/skin/images/dropmarker.svg"),
+                    -moz-radial-gradient(bottom left, #bbbbbb 40%, #f5f5f5) !important;
+  background-position: -moz-calc(50% + 1px) center, -15px center !important;
   background-repeat: no-repeat !important;
 
-  /* Use to position an svg arrow on <select> element */
-  -moz-binding: url("chrome://browser/content/bindings.xml#select-button");
-  position: relative !important;
   font-size: inherit;
 }
 
@@ -330,7 +328,7 @@ input[type="checkbox"][disabled]:hover:active {
   border:1px solid rgba(125,125,125,0.4) !important;
 }
 
-select[disabled] > input[type="button"] {
+select[disabled] > button {
   opacity: 0.6;
   padding: 1px 7px 1px 7px;
 }

mobile/android/themes/core/images/dropmarker.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+
+<svg width="10px" height="7px" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <polyline points="1 1 5 6 9 1" stroke="#414141" stroke-width="2" stroke-linecap="round" fill="transparent" stroke-linejoin="round"/>
+</svg>

mobile/android/themes/core/jar.mn

@@ -22,6 +22,7 @@ chrome.jar:
   skin/images/arrowleft-16.png              (images/arrowleft-16.png)
   skin/images/arrowright-16.png             (images/arrowright-16.png)
   skin/images/arrowdown-16.png              (images/arrowdown-16.png)
+  skin/images/dropmarker.svg                (images/dropmarker.svg)
   skin/images/popup-selected-item-hdpi.png  (images/popup-selected-item-hdpi.png)
   skin/images/errorpage-warning.png         (images/errorpage-warning.png)
   skin/images/errorpage-warning.png         (images/errorpage-warning.png)
@@ -68,6 +69,7 @@ chrome.jar:
   skin/gingerbread/images/arrowleft-16.png              (gingerbread/images/arrowleft-16.png)
   skin/gingerbread/images/arrowright-16.png             (gingerbread/images/arrowright-16.png)
   skin/gingerbread/images/arrowdown-16.png              (gingerbread/images/arrowdown-16.png)
+  skin/gingerbread/images/dropmarker.svg                (images/dropmarker.svg)
   skin/gingerbread/images/popup-selected-item-hdpi.png  (gingerbread/images/popup-selected-item-hdpi.png)
   skin/gingerbread/images/throbber.png                  (gingerbread/images/throbber.png)
   skin/gingerbread/images/alert-addons-30.png           (gingerbread/images/alert-addons-30.png)
@@ -111,6 +113,7 @@ chrome.jar:
   skin/honeycomb/images/arrowleft-16.png              (honeycomb/images/arrowleft-16.png)
   skin/honeycomb/images/arrowright-16.png             (honeycomb/images/arrowright-16.png)
   skin/honeycomb/images/arrowdown-16.png              (honeycomb/images/arrowdown-16.png)
+  skin/honeycomb/images/dropmarker.svg                (images/dropmarker.svg)
   skin/honeycomb/images/popup-selected-item-hdpi.png  (honeycomb/images/popup-selected-item-hdpi.png)
   skin/honeycomb/images/throbber.png                  (honeycomb/images/throbber.png)
   skin/honeycomb/images/alert-addons-30.png           (honeycomb/images/alert-addons-30.png)

mobile/xul/themes/core/content.css

@@ -231,7 +231,7 @@ input[type="checkbox"] {
   padding: 2px 1px 2px 1px;
 }
 
-select > input[type="button"] {
+select > button {
   border-width: 0px !important;
   margin: 0px !important;
   padding: 0px !important;
@@ -330,7 +330,7 @@ input[type="checkbox"][disabled]:hover:active {
   border:1px solid rgba(125,125,125,0.4) !important;
 }
 
-select[disabled] > input[type="button"] {
+select[disabled] > button {
   opacity: 0.6;
   padding: 1px 7px 1px 7px;
 }

mobile/xul/themes/core/gingerbread/content.css

@@ -231,7 +231,7 @@ input[type="checkbox"] {
   padding: 2px 1px 2px 1px;
 }
 
-select > input[type="button"] {
+select > button {
   border-width: 0px !important;
   margin: 0px !important;
   padding: 0px !important;
@@ -330,7 +330,7 @@ input[type="checkbox"][disabled]:hover:active {
   border:1px solid rgba(125,125,125,0.4) !important;
 }
 
-select[disabled] > input[type="button"] {
+select[disabled] > button {
   opacity: 0.6;
   padding: 1px 7px 1px 7px;
 }