Bug 544071 - Unresponsive script dialog 'Yes' option not clear [r=vingtetun]

mobile/chrome/content/prompt/alert.xul

@@ -28,10 +28,10 @@
       <description id="prompt-alert-message"/>
     </scrollbox>
 
-    <hbox id="prompt-alert-checkbox-box" collapsed="true" align="center" class="prompt-message" flex="1">
+    <button id="prompt-alert-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
+      <image class="button-image-icon"/>
       <description id="prompt-alert-checkbox-label" class="prompt-checkbox-label" flex="1"/>
-      <checkbox id="prompt-alert-checkbox" class="toggle-dark"/>
-    </hbox>
+    </button>
   </vbox>
 
   <hbox class="prompt-buttons">

mobile/chrome/content/prompt/confirm.xul

@@ -28,10 +28,10 @@
       <description id="prompt-confirm-message"/>
     </scrollbox>
 
-    <hbox id="prompt-confirm-checkbox-box" collapsed="true" align="center" class="prompt-message" flex="1">
+    <button id="prompt-confirm-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
+      <image class="button-image-icon"/>
       <description id="prompt-confirm-checkbox-label" class="prompt-checkbox-label" flex="1"/>
-      <checkbox class="toggle-dark" id="prompt-confirm-checkbox"/>
-    </hbox>
+    </button>
   </vbox>
 
   <hbox id="prompt-confirm-buttons-box" class="prompt-buttons">

mobile/chrome/content/prompt/prompt.xul

@@ -30,10 +30,10 @@
 
     <textbox id="prompt-prompt-textbox"/>
 
-    <hbox id="prompt-prompt-checkbox-box" collapsed="true" align="center" class="prompt-message" flex="1">
+    <button id="prompt-prompt-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
+      <image class="button-image-icon"/>
       <description id="prompt-prompt-checkbox-label" class="prompt-checkbox-label" flex="1"/>
-      <checkbox id="prompt-prompt-checkbox" class="toggle-dark"/>
-    </hbox>
+    </button>
   </vbox>
 
   <hbox class="prompt-buttons">

mobile/chrome/content/prompt/promptPassword.xul

@@ -50,10 +50,10 @@
       </rows>
     </grid>
   
-    <hbox id="prompt-password-checkbox-box" collapsed="true" align="center" class="prompt-message" flex="1">
-      <label id="prompt-password-checkbox-label" class="prompt-checkbox-label" crop="center" flex="1"/>
-      <checkbox id="prompt-password-checkbox" class="toggle-dark"/>
-    </hbox>
+    <button id="prompt-password-checkbox" type="checkbox" class="button-checkbox" collapsed="true" pack="start" flex="1">
+      <image class="button-image-icon"/>
+      <description id="prompt-password-checkbox-label" class="prompt-checkbox-label" flex="1"/>
+    </button>
   </vbox>
 
   <hbox class="prompt-buttons">

mobile/components/PromptService.js

@@ -94,16 +94,15 @@ promptService.prototype = {
     
     doc.getElementById("prompt-alert-checkbox").checked = aCheckState.value;
     this.setLabelForNode(doc.getElementById("prompt-alert-checkbox-label"), aCheckMsg);
-    doc.getElementById("prompt-alert-checkbox-box").removeAttribute("collapsed");
+    doc.getElementById("prompt-alert-checkbox").removeAttribute("collapsed");
     
     dialog.waitForClose();
   },
   
   confirm: function(aParent, aTitle, aText) {
     let doc = this.getDocument();
-    if (!doc) {
+    if (!doc)
       return this._getFallbackService().confirm(aParent, aTitle, aText);
-    }
 
     var params = new Object();
     params.result = false;
@@ -118,9 +117,8 @@ promptService.prototype = {
   
   confirmCheck: function(aParent, aTitle, aText, aCheckMsg, aCheckState) {
     let doc = this.getDocument();
-    if (!doc) {
+    if (!doc)
       return this._getFallbackService().confirmCheck(aParent, aTitle, aText, aCheckMsg, aCheckState);
-    }
 
     var params = new Object();
     params.result = false;
@@ -132,7 +130,7 @@ promptService.prototype = {
 
     doc.getElementById("prompt-confirm-checkbox").checked = aCheckState.value;
     this.setLabelForNode(doc.getElementById("prompt-confirm-checkbox-label"), aCheckMsg);
-    doc.getElementById("prompt-confirm-checkbox-box").removeAttribute("collapsed");
+    doc.getElementById("prompt-confirm-checkbox").removeAttribute("collapsed");
     
     dialog.waitForClose();
     return params.result;
@@ -214,15 +212,14 @@ promptService.prototype = {
 
     doc.getElementById("prompt-confirm-checkbox").checked = aCheckState.value;
     this.setLabelForNode(doc.getElementById("prompt-confirm-checkbox-label"), aCheckMsg);
-    if (aCheckMsg) {
-      doc.getElementById("prompt-confirm-checkbox-box").removeAttribute("collapsed");
-    }
-    
+    if (aCheckMsg)
+      doc.getElementById("prompt-confirm-checkbox").removeAttribute("collapsed");
+
+
     let bbox = doc.getElementById("prompt-confirm-buttons-box");
-    while (bbox.lastChild) {
+    while (bbox.lastChild)
       bbox.removeChild(bbox.lastChild);
-    }
-    
+
     for (let i = 0; i < 3; i++) {
       let bTitle = null;
       switch (aButtonFlags & 0xff) {
@@ -274,10 +271,9 @@ promptService.prototype = {
   
   commonPrompt : function(aParent, aTitle, aText, aValue, aCheckMsg, aCheckState, isPassword) {
     let doc = this.getDocument();
-    if (!doc) {
+    if (!doc)
       throw "No document !";
-    }
-    
+
     var params = new Object();
     params.result = false;
     params.checkbox = aCheckState;
@@ -290,12 +286,11 @@ promptService.prototype = {
     doc.getElementById("prompt-prompt-checkbox").checked = aCheckState.value;
     this.setLabelForNode(doc.getElementById("prompt-prompt-checkbox-label"), aCheckMsg);
     doc.getElementById("prompt-prompt-textbox").value = aValue.value;
-    if (aCheckMsg) {
-      doc.getElementById("prompt-prompt-checkbox-box").removeAttribute("collapsed");
-    }
-    if (isPassword) {
+    if (aCheckMsg)
+      doc.getElementById("prompt-prompt-checkbox").removeAttribute("collapsed");
+
+    if (isPassword)
       doc.getElementById("prompt-prompt-textbox").type = "password";
-    }
     
     dialog.waitForClose();
     return params.result;
@@ -319,9 +314,8 @@ promptService.prototype = {
   
   promptUsernameAndPassword: function(aParent, aTitle, aText, aUsername, aPassword, aCheckMsg, aCheckState) {
     let doc = this.getDocument();
-    if (!doc) {
+    if (!doc)
       return this._getFallbackService().promptUsernameAndPassword(aParent, aTitle, aText, aUsername, aPassword, aCheckMsg, aCheckState);
-    }
 
     var params = new Object();
     params.result = false;
@@ -337,7 +331,7 @@ promptService.prototype = {
     doc.getElementById("prompt-password-user").value = aUsername.value;
     doc.getElementById("prompt-password-password").value = aPassword.value;
     if (aCheckMsg) {
-      doc.getElementById("prompt-password-checkbox-box").removeAttribute("collapsed");
+      doc.getElementById("prompt-password-checkbox").removeAttribute("collapsed");
       this.setLabelForNode(doc.getElementById("prompt-password-checkbox-label"), aCheckMsg);
     }
     
@@ -422,11 +416,10 @@ promptService.prototype = {
     let message = this.makeDialogText(aChannel, aAuthInfo);
     let title = this.getLocaleString("PromptUsernameAndPassword2");
     
-    if (aAuthInfo.flags & aAuthInfo.ONLY_PASSWORD) {
+    if (aAuthInfo.flags & aAuthInfo.ONLY_PASSWORD)
       res = this.promptPassword(aParent, title, message, password, aCheckMsg, aCheckState);
-    } else {
+    else
       res = this.promptUsernameAndPassword(aParent, title, message, username, password, aCheckMsg, aCheckState);
-    }
     
     if (res) {
       aAuthInfo.username = username.value;
@@ -443,9 +436,8 @@ promptService.prototype = {
   
   select: function(aParent, aTitle, aText, aCount, aSelectList, aOutSelection) {
     let doc = this.getDocument();
-    if (!doc) {
+    if (!doc)
       return this._getFallbackService().select(aParent, aTitle, aText, aCount, aSelectList, aOutSelection);
-    }
 
     var params = new Object();
     params.result = false;

mobile/themes/hildon/jar.mn

@@ -27,6 +27,8 @@ chrome.jar:
   images/arrowrightdark-16.png         (images/arrowrightdark-16.png)
   images/arrowupdark-16.png            (images/arrowupdark-16.png)
   images/arrowdowndark-16.png          (images/arrowdowndark-16.png)
+  images/check-selected-30.png         (images/check-selected-30.png)
+  images/check-unselected-30.png       (images/check-unselected-30.png)
   images/dropmarker-30.png             (images/dropmarker-30.png)
   images/dropmarker-disabled-30.png    (images/dropmarker-disabled-30.png)
   images/ratings-18.png                (images/ratings-18.png)

mobile/themes/hildon/platform.css

@@ -117,7 +117,7 @@ textbox[isempty="true"] {
   -moz-box-shadow: black 0 2px 2px;
 }
 
-.prompt-header {
+dialog .prompt-header {
   padding: 8px;
   font-size: 18px !important;
   -moz-border-radius: 8px 8px 0 0;
@@ -140,7 +140,7 @@ dialog[closebutton="true"] hbox > .close-button {
   display: -moz-box;
 }
 
-.prompt-title {
+dialog .prompt-title {
   font-size: 24px !important;
 }
 
@@ -149,21 +149,21 @@ dialog[closebutton="true"] hbox > .close-button {
     padding: 32px;
   }
 
-  .prompt-header {
+  dialog .prompt-header {
     font-size: 16px !important;
   }
 
-  .prompt-title {
+  dialog .prompt-title {
     font-size: 18px !important;
   }
 }
 
-.prompt-message {
+dialog .prompt-message {
   margin-top: 8px;
 }
 
-.prompt-checkbox-label {
-  text-align: right;
+dialog .button-checkbox {
+  margin-left: 24px;
 }
 
 /* buttons ----------------------------------------------------------------- */
@@ -193,6 +193,10 @@ button[disabled="true"] {
   color: #aaa !important;
 }
 
+button:focus > .button-box {
+  border: 1px solid transparent;
+}
+
 /* dark buttons ------------------------------------------------------------ */
 /*
   we set notification buttons here as well, since the style can't be set in
@@ -321,6 +325,32 @@ toolbarbutton.button-dark[type="checkbox"][checked="true"] {
   min-height: 0 !important; /* the image drives the size */
 }
 
+/* checkbox buttons ----------------------------------------------------------- */
+.button-checkbox {
+  color: #fff;
+  padding: 0 !important;
+  background: none !important;
+  border: none !important;
+  -moz-border-image: none !important;
+}
+
+.button-checkbox .button-image-icon {
+  -moz-margin-end: 8px;
+  list-style-image: url("chrome://browser/skin/images/check-unselected-30.png");
+}
+
+.button-checkbox[checked="true"] .button-image-icon {
+  list-style-image: url("chrome://browser/skin/images/check-selected-30.png");
+}
+
+.button-checkbox:hover:active > .button-box,
+.button-checkbox[checked="true"] > .button-box {
+  padding-top: 1px;
+  padding-bottom: 2px;
+  -moz-padding-start: 3px;
+  -moz-padding-end: 4px;
+}
+
 /* radio buttons ----------------------------------------------------------- */
 radiogroup {
   -moz-box-orient: horizontal;

mobile/themes/wince/jar.mn

@@ -24,6 +24,8 @@ chrome.jar:
   images/arrowdown-16.png              (images/arrowdown-16.png)
   images/arrowleftdark-16.png          (images/arrowleftdark-16.png)
   images/arrowrightdark-16.png         (images/arrowrightdark-16.png)
+  images/check-selected-30.png         (images/check-selected-30.png)
+  images/check-unselected-30.png       (images/check-unselected-30.png)
   images/dropmarker-30.png             (images/dropmarker-30.png)
   images/dropmarker-disabled-30.png    (images/dropmarker-disabled-30.png)
   images/ratings-18.png                (images/ratings-18.png)

mobile/themes/wince/platform.css

@@ -89,7 +89,7 @@ textbox[isempty="true"] {
   -moz-box-shadow: black 0 0.1mm 0.1mm;
 }
 
-.prompt-header {
+dialog .prompt-header {
   padding: 1mm;
   font-size: 8pt !important;
   -moz-border-radius: 1mm 1mm 0 0;
@@ -112,16 +112,16 @@ dialog[closebutton="true"] hbox > .close-button {
   display: -moz-box;
 }
 
-.prompt-title {
+dialog .prompt-title {
   font-size: 9pt !important;
 }
 
-.prompt-message {
+dialog .prompt-message {
   margin-top: 1mm;
 }
 
-.prompt-checkbox-label {
-  text-align: right;
+dialog .button-checkbox {
+  margin-left: 3mm;
 }
 
 /* buttons ----------------------------------------------------------------- */
@@ -170,6 +170,10 @@ button[disabled="true"] {
   }
 }
 
+button:focus > .button-box {
+  border: 1px solid transparent;
+}
+
 /* dark buttons ------------------------------------------------------------ */
 /*
   we set notification buttons here as well, since the style can't be set in
@@ -384,6 +388,32 @@ toolbarbutton.button-dark[type="checkbox"][checked="true"] {
   border: none !important;
 }
 
+/* checkbox buttons ----------------------------------------------------------- */
+.button-checkbox {
+  color: #fff;
+  padding: 0 !important;
+  background: none !important;
+  border: none !important;
+  -moz-border-image: none !important;
+}
+
+.button-checkbox .button-image-icon {
+  -moz-margin-end: 8px;
+  list-style-image: url("chrome://browser/skin/images/check-unselected-30.png");
+}
+
+.button-checkbox[checked="true"] .button-image-icon {
+  list-style-image: url("chrome://browser/skin/images/check-selected-30.png");
+}
+
+.button-checkbox:hover:active > .button-box,
+.button-checkbox[checked="true"] > .button-box {
+  padding-top: 1px;
+  padding-bottom: 2px;
+  -moz-padding-start: 3px;
+  -moz-padding-end: 4px;
+}
+
 /* radio buttons ----------------------------------------------------------- */
 radiogroup {
   -moz-box-orient: horizontal;