Bug 716161 - Don't allow clicking disabled selects. r=mfinkle
authorWes Johnston <wjohnston@mozilla.com>
Wed, 18 Jan 2012 08:49:48 -0800
changeset 86013 e29329299573b697d3fcbe973d1ddb00bfc4dada
parent 86012 79e5d0b77d1080c7f29378ee48b0cad85220de33
child 86014 19af1aac33aca78cdd832bb8090a588b2e2335ec
push id805
push userakeybl@mozilla.com
push dateWed, 01 Feb 2012 18:17:35 +0000
treeherdermozilla-aurora@6fb3bf232436 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs716161
milestone12.0a1
Bug 716161 - Don't allow clicking disabled selects. r=mfinkle
mobile/android/chrome/content/bindings.xml
mobile/android/chrome/content/browser.js
mobile/android/themes/core/content.css
mobile/android/themes/core/gingerbread/content.css
mobile/android/themes/core/images/dropmarker.svg
mobile/android/themes/core/jar.mn
mobile/xul/themes/core/content.css
mobile/xul/themes/core/gingerbread/content.css
--- a/mobile/android/chrome/content/bindings.xml
+++ b/mobile/android/chrome/content/bindings.xml
@@ -130,23 +130,16 @@
               this.removeAttribute("selected");
             return val;
           ]]>
         </setter>
       </property>
     </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>
       <handler event="TapLong" phase="capturing">
         <![CDATA[
           let box = this.inputField.parentNode;
           box.showContextMenu(this, false);
         ]]>
--- a/mobile/android/chrome/content/browser.js
+++ b/mobile/android/chrome/content/browser.js
@@ -2677,17 +2677,17 @@ var FormAssistant = {
       aNode.selected = selected[aIndex];
     });
     this.fireOnChange(aElement);
   },
 
   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);
         target = null;
         return true;
       }
       if (target)
         target = target.parentNode;
--- a/mobile/android/themes/core/content.css
+++ b/mobile/android/themes/core/content.css
@@ -226,32 +226,30 @@ button {
 input[type="radio"],
 input[type="checkbox"] {
   max-width: 14px;
   max-height: 14px;
   border: 1px solid #a7a7a7 !important;
   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;
 }
 
 select[size]:focus,
 select[multiple]:focus,
 select[size][multiple]:focus,
 textarea:focus,
 input[type="file"]:focus > input[type="text"],
@@ -325,17 +323,17 @@ input[type="radio"][disabled]:hover,
 input[type="radio"][disabled]:hover:active,
 input[type="checkbox"][disabled],
 input[type="checkbox"][disabled]:active,
 input[type="checkbox"][disabled]:hover,
 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;
 }
 
 /* -moz-touch-enabled? media elements */
 video > xul|videocontrols,
 audio > xul|videocontrols {
   -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#touchControls");
--- a/mobile/android/themes/core/gingerbread/content.css
+++ b/mobile/android/themes/core/gingerbread/content.css
@@ -226,32 +226,30 @@ button {
 input[type="radio"],
 input[type="checkbox"] {
   max-width: 14px;
   max-height: 14px;
   border: 1px solid #a7a7a7 !important;
   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;
 }
 
 select[size]:focus,
 select[multiple]:focus,
 select[size][multiple]:focus,
 textarea:focus,
 input[type="file"]:focus > input[type="text"],
@@ -325,17 +323,17 @@ input[type="radio"][disabled]:hover,
 input[type="radio"][disabled]:hover:active,
 input[type="checkbox"][disabled],
 input[type="checkbox"][disabled]:active,
 input[type="checkbox"][disabled]:hover,
 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;
 }
 
 /* -moz-touch-enabled? media elements */
 video > xul|videocontrols,
 audio > xul|videocontrols {
   -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#touchControls");
new file mode 100644
--- /dev/null
+++ b/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>
--- a/mobile/android/themes/core/jar.mn
+++ b/mobile/android/themes/core/jar.mn
@@ -17,16 +17,17 @@ chrome.jar:
 % override chrome://global/skin/about.css chrome://browser/skin/about.css
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
 % override chrome://global/skin/netError.css chrome://browser/skin/netError.css
 
   skin/images/addons-32.png                 (images/addons-32.png)
   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)
   skin/images/errorpage-larry-white.png     (images/errorpage-larry-white.png)
   skin/images/errorpage-larry-black.png     (images/errorpage-larry-black.png)
   skin/images/throbber.png                  (images/throbber.png)
   skin/images/alert-addons-30.png           (images/alert-addons-30.png)
   skin/images/alert-downloads-30.png        (images/alert-downloads-30.png)
@@ -63,16 +64,17 @@ chrome.jar:
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
 % override chrome://global/skin/netError.css chrome://browser/skin/netError.css
 
   skin/gingerbread/images/urlbar-bg.png                 (gingerbread/images/urlbar-bg.png)
   skin/gingerbread/images/addons-32.png                 (images/addons-32.png)
   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)
   skin/gingerbread/images/alert-downloads-30.png        (gingerbread/images/alert-downloads-30.png)
   skin/gingerbread/images/forward-default-hdpi.png      (gingerbread/images/forward-default-hdpi.png)
   skin/gingerbread/images/remotetabs-32.png             (gingerbread/images/remotetabs-32.png)
   skin/gingerbread/images/search-clear-30.png           (gingerbread/images/search-clear-30.png)
   skin/gingerbread/images/play-hdpi.png                 (gingerbread/images/play-hdpi.png)
@@ -106,16 +108,17 @@ chrome.jar:
 % override chrome://global/skin/about.css chrome://browser/skin/about.css
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
 % override chrome://global/skin/netError.css chrome://browser/skin/netError.css
 
   skin/honeycomb/images/addons-32.png                 (images/addons-32.png)
   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)
   skin/honeycomb/images/alert-downloads-30.png        (honeycomb/images/alert-downloads-30.png)
   skin/honeycomb/images/forward-default-hdpi.png      (honeycomb/images/forward-default-hdpi.png)
   skin/honeycomb/images/remotetabs-32.png             (honeycomb/images/remotetabs-32.png)
   skin/honeycomb/images/sidebarbutton-active-hdpi.png (honeycomb/images/sidebarbutton-active-hdpi.png)
   skin/honeycomb/images/search-clear-30.png           (honeycomb/images/search-clear-30.png)
--- a/mobile/xul/themes/core/content.css
+++ b/mobile/xul/themes/core/content.css
@@ -226,17 +226,17 @@ button {
 input[type="radio"],
 input[type="checkbox"] {
   max-width: 14px;
   max-height: 14px;
   border: 1px solid #a7a7a7 !important;
   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-color: transparent;
@@ -325,17 +325,17 @@ input[type="radio"][disabled]:hover,
 input[type="radio"][disabled]:hover:active,
 input[type="checkbox"][disabled],
 input[type="checkbox"][disabled]:active,
 input[type="checkbox"][disabled]:hover,
 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;
 }
 
 /* -moz-touch-enabled? media elements */
 video > xul|videocontrols,
 audio > xul|videocontrols {
   -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#touchControls");
--- a/mobile/xul/themes/core/gingerbread/content.css
+++ b/mobile/xul/themes/core/gingerbread/content.css
@@ -226,17 +226,17 @@ button {
 input[type="radio"],
 input[type="checkbox"] {
   max-width: 14px;
   max-height: 14px;
   border: 1px solid #a7a7a7 !important;
   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-color: transparent;
@@ -325,17 +325,17 @@ input[type="radio"][disabled]:hover,
 input[type="radio"][disabled]:hover:active,
 input[type="checkbox"][disabled],
 input[type="checkbox"][disabled]:active,
 input[type="checkbox"][disabled]:hover,
 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;
 }
 
 /* -moz-touch-enabled? media elements */
 video > xul|videocontrols,
 audio > xul|videocontrols {
   -moz-binding: url("chrome://global/content/bindings/videocontrols.xml#touchControls");