Bug 681643 - Update dialog theme for honeycomb. r=mfinkle
authorWes Johnston <wjohnston@mozilla.com>
Tue, 20 Sep 2011 12:07:07 -0700
changeset 77211 69fdc6af563d6679be07ee8aeb2e9714b6697fb8
parent 77210 f94b4d73777fdf543a620a6f6744cdf32cca14fa
child 77212 0896833ccc90026c2fdd74ef465e2ec25b6a1bce
push id3
push userfelipc@gmail.com
push dateFri, 30 Sep 2011 20:09:13 +0000
reviewersmfinkle
bugs681643
milestone9.0a1
Bug 681643 - Update dialog theme for honeycomb. r=mfinkle
mobile/chrome/content/browser.xul
mobile/components/PromptService.js
mobile/themes/core/honeycomb/browser.css
mobile/themes/core/honeycomb/defines.inc
mobile/themes/core/honeycomb/forms.css
mobile/themes/core/honeycomb/platform.css
mobile/themes/core/jar.mn
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -581,17 +581,17 @@
               <description id="syncsetup-code2" class="syncsetup-code">....</description>
               <description id="syncsetup-code3" class="syncsetup-code">....</description>
             </vbox>
             <separator/>
             <description class="syncsetup-center link" flex="1" onclick="WeaveGlue.openManual();">&sync.fallback;</description>
             <separator flex="1"/>
           </scrollbox>
           <hbox class="prompt-buttons" pack="center">
-            <button oncommand="WeaveGlue.close();">&sync.setup.cancel;</button>
+            <button class="prompt-button" oncommand="WeaveGlue.close();">&sync.setup.cancel;</button>
           </hbox>
         </vbox>
         <vbox id="syncsetup-fallback" class="syncsetup-page" flex="1" hidden="true">
           <scrollbox class="prompt-message" orient="vertical" flex="1">
             <description class="syncsetup-desc syncsetup-center" flex="1">&sync.setup.manual;</description>
             <separator/>
             <textbox id="syncsetup-account" class="prompt-edit" placeholder="&sync.account;" oninput="WeaveGlue.canConnect();"/>
             <textbox id="syncsetup-password" class="prompt-edit" placeholder="&sync.password;" type="password" oninput="WeaveGlue.canConnect();"/>
@@ -600,19 +600,19 @@
             <button id="syncsetup-usecustomserver" type="checkbox" class="button-checkbox" pack="start" oncommand="WeaveGlue.toggleCustomServer();">
               <image class="button-image-icon"/>
               <description class="syncsetup-label prompt-checkbox-label" flex="1">&sync.customServer;</description>
             </button>
             <textbox id="syncsetup-customserver" class="prompt-edit" placeholder="&sync.serverURL;"/>
             <separator flex="1"/>
           </scrollbox>
           <hbox class="prompt-buttons" pack="center">
-            <button oncommand="WeaveGlue.close();">&sync.setup.cancel;</button>
+            <button class="prompt-button" oncommand="WeaveGlue.close();">&sync.setup.cancel;</button>
             <separator/>
-            <button id="syncsetup-button-connect" oncommand="WeaveGlue.close(); WeaveGlue.connect();">&sync.setup.connect;</button>
+            <button id="syncsetup-button-connect" class="prompt-button" oncommand="WeaveGlue.close(); WeaveGlue.connect();">&sync.setup.connect;</button>
           </hbox>
         </vbox>
       </dialog>
     </box>
 #endif
 
     <arrowbox id="search-engines-popup" hidden="true" offset="18" flex="1">
       <hbox id="search-engines-list" class="action-buttons" flex="1"/>
--- a/mobile/components/PromptService.js
+++ b/mobile/components/PromptService.js
@@ -378,17 +378,17 @@ Prompt.prototype = {
 
   confirmCheck: function confirmCheck(aTitle, aText, aCheckMsg, aCheckState) {
     var params = new Object();
     params.result = false;
     params.checkbox = aCheckState;
 
     let dialog = this.openDialog("chrome://browser/content/prompt/confirm.xul", params);
     let doc = this._doc;
-    this._setupPrompt(doc, "prompt", aTitle, aText, {value: aCheckState.value, msg: aCheckMsg});
+    this._setupPrompt(doc, "confirm", aTitle, aText, {value: aCheckState.value, msg: aCheckMsg});
 
     dialog.waitForClose();
     return params.result;
   },
 
   confirmEx: function confirmEx(aTitle, aText, aButtonFlags, aButton0,
                       aButton1, aButton2, aCheckMsg, aCheckState) {
 
--- a/mobile/themes/core/honeycomb/browser.css
+++ b/mobile/themes/core/honeycomb/browser.css
@@ -1217,34 +1217,60 @@ pageaction.last-child {
 
 pageaction > vbox {
   border-top: @border_width_tiny@ solid lightgray;
   -moz-box-flex: 1 !important;
   margin-top: -moz-calc(-2 * @border_width_tiny@);
 }
 
 /* Override richlistbox and richlistitem styles */
+#context-header {
+  background-color: transparent;
+  border-bottom: @border_width_xlarge@ solid @color_divider_border@;
+  margin: @margin_large@ @margin_large@ 0px;
+}
+
 #context-commands > scrollbox {
   width: 100%;
 }
 
 .action-button,
 .context-command {
   -moz-box-align: center;
+  padding: 0px @padding_large@;
+  border: none;
+  border-top: @border_width_tiny@ solid transparent;
+}
+
+.action-button > label,
+.context-command > label {
+  min-height: @touch_row@;
+  padding-top: -moz-calc(@touch_row@ / 2 - 0.75em);
+  -moz-box-align: center;
+  border-bottom: @border_width_tiny@ solid @color_button_border@;
+  -moz-box-flex: 1;
+  margin-bottom: -@border_width_tiny@;
+}
+
+.action-button:last-child > label
+.action-button[selector="last-child"] > label,
+.context-command:last-child > label,
+.context-command[selector="last-child"] > label {
+  border-bottom: none;
 }
 
 .action-button[disabled="true"],
 .context-command[disabled="true"] {
   pointer-events: none;
   color: @color_text_disabled@ !important;
 }
 
 .action-button[selected="true"],
 .context-command[selected="true"] {
-  color: black; /* force */
+  color: @color_text_active@; /* force */
   background: transparent;
 }
 
 /* Override button styles */
 .action-button {
   margin: 0;
   -moz-border-image: none !important;
   margin: 0;
@@ -1291,33 +1317,28 @@ pageaction > hbox > .pageaction-image {
 
 pageaction:not([image]) > hbox >.pageaction-image {
   width: 0;
 }
 
 .action-button,
 .context-command,
 .pageaction-title {
-  font-size: @font_normal@ !important;
-  color: black; /* force */
+  color: @color_text_active@; /* force */
 }
 
 .pageaction-desc {
   font-size: @font_tiny@ !important;
   color: @color_subtext_default@;
 }
 
 .pageaction-desc[value=""] {
   display: none;
 }
 
-#context-header {
-  background-color: @color_background_default@;
-}
-
 #share-title,
 #bookmark-popup-title,
 #context-hint {
   color: @color_text_default@;
   font-size: @font_small@;
   padding: @padding_small@;
 }
 
@@ -1657,16 +1678,29 @@ setting {
 #appmenu-popup-sitecommands > .appmenu-pageaction:nth-child(3n+1):nth-last-child(-3n+3),
 #appmenu-popup-sitecommands > .appmenu-pageaction:nth-child(3n+2):last-child,
 #appmenu-popup-sitecommands > .appmenu-pageaction:nth-child(3n+2):nth-last-child(-3n+2),
 #appmenu-popup-sitecommands > .appmenu-pageaction:nth-child(3n+3):last-child {
   border-bottom: none;
 }
 
 /* Sync setup ------------------------------------------------------------- */
+.content-dialog > .prompt-title {
+  margin: @margin_normal@ @margin_large@ 0px;
+}
+
+.content-dialog > .prompt-line,
+.content-dialog .prompt-message {
+  margin: 0px @margin_large@;
+}
+
+.content-dialog .prompt-message {
+  border-bottom: @border_width_tiny@ solid @color_button_border@;
+}
+
 .syncsetup-center {
   /* TODO: remove this dummy when we no longer use it in other themes */
 }
 
 .syncsetup-code {
   color: @color_text_textbox@;
   background-color: @color_background_textbox@;
   font-size: @font_xlarge@ !important;
--- a/mobile/themes/core/honeycomb/defines.inc
+++ b/mobile/themes/core/honeycomb/defines.inc
@@ -1,17 +1,17 @@
 %filter substitution
 
 %define color_background_active #fff
 %define color_text_active #222222
 %define color_background_default_window #fff
 %define color_background_default rgba(255,255,255,0.95)
 %define color_text_default #222222
 %define color_toolbar_background #eaeaea
-%define color_divider_border #333333
+%define color_divider_border #6699ff
 %define color_button_border rgb(207,207,207)
 %define color_background_dialog #fff
 %define color_text_dialog #000
 %define color_dialog_border #5a5a5a
 %define color_background_dlgbuttons #9a9a9a
 %define color_background_panel #d6d6d6
 %define color_text_panel #000
 %define color_background_header #6699ff
new file mode 100644
--- /dev/null
+++ b/mobile/themes/core/honeycomb/forms.css
@@ -0,0 +1,277 @@
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Mozilla Mobile Browser.
+ *
+ * The Initial Developer of the Original Code is
+ * Mozilla Corporation.
+ * Portions created by the Initial Developer are Copyright (C) 2008
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Mark Finkle <mfinkle@mozilla.com>
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+%filter substitution
+%include defines.inc
+
+/* Content Navigator popup ------------------------------------------------- */
+#content-navigator {
+  display: none;
+  pointer-events: none;
+  padding: 0;
+  background-color: transparent !important;
+}
+
+#content-navigator[type="find"],
+#content-navigator[type="form"]:not([disabled="true"]) {
+  display: -moz-box;
+}
+
+#content-navigator > .previous-button,
+#content-navigator > .next-button {
+  min-width: @touch_button_small@ !important; /* button size */
+  min-height: @touch_button_small@ !important; /* button size */
+  border: @border_width_tiny@ solid rgba(0,0,0,0.2) !important;
+  border-bottom: @border_width_large@ solid #53565a !important;
+  background-color: #5e6166;
+  background-image: none !important;
+  box-shadow: black 0 @border_radius_tiny@ @border_radius_tiny@;
+  pointer-events: auto;
+  -moz-user-focus: ignore !important;
+}
+
+#content-navigator > .previous-button[disabled="true"] {
+  list-style-image: url("chrome://browser/skin/images/previous-disabled-hdpi.png");
+}
+
+#content-navigator > .next-button[disabled="true"] {
+  list-style-image: url("chrome://browser/skin/images/next-disabled-hdpi.png");
+}
+
+#content-navigator > .previous-button {
+  -moz-margin-end: 0;
+  -moz-border-end: @border_width_tiny@ solid rgba(0,0,0,0.2) !important;
+  list-style-image: url("chrome://browser/skin/images/previous-hdpi.png");
+}
+
+#content-navigator:-moz-locale-dir(ltr) > .previous-button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+#content-navigator:-moz-locale-dir(rtl) > .previous-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+#content-navigator > .next-button {
+  -moz-margin-start: 0;
+  -moz-border-start: @border_width_tiny@ solid rgba(255,255,255,0.2) !important;
+  list-style-image: url("chrome://browser/skin/images/next-hdpi.png");
+}
+
+#content-navigator:-moz-locale-dir(ltr) > .next-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+#content-navigator:-moz-locale-dir(rtl) > .next-button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Find Helper ------------------------------------------------------------- */
+#content-navigator[type="find"] > .previous-button {
+  /* previous button overlap the textbox */
+  -moz-margin-start: -@margin_normal@;
+}
+
+#content-navigator:not([type="find"]) > #find-helper-textbox {
+  display: none;
+}
+
+#find-helper-textbox {
+  pointer-events: auto;
+  margin: @margin_normal@;
+  -moz-margin-end: 0;
+  padding: @padding_xnormal@;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  width: 10em;
+}
+
+#find-helper-textbox[status="1"] { /* Ci.nsITypeAheadFind.FIND_NOTFOUND */
+  background: rgb(255,200,200);
+}
+
+#find-helper-textbox:hover:active {
+  background: @color_background_highlight@;
+}
+
+/* Form Helper Autofill ---------------------------------------------------- */
+#form-helper-suggestions-container .panel-arrowcontent {
+  border-radius: @border_radius_normal@;
+  padding: 0; /* half core spacing & none (autorepeat arrows compensate) */
+  background-color: rgb(235,235,235);
+  background-image: url("chrome://browser/skin/images/button-bg.png");
+}
+
+#form-helper-suggestions {
+  margin: 0;
+  color: black;
+  max-width: 0;
+}
+
+#form-helper-suggestions > .autorepeatbutton-down,
+#form-helper-suggestions > .autorepeatbutton-up {
+  border: none;
+}
+
+#form-helper-suggestions > .autorepeatbutton-down {
+  list-style-image: url("chrome://browser/skin/images/arrowright-16.png");
+}
+
+#form-helper-suggestions > .autorepeatbutton-down:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/images/arrowleft-16.png");
+}
+
+#form-helper-suggestions > .autorepeatbutton-up {
+  list-style-image: url("chrome://browser/skin/images/arrowleft-16.png");
+}
+
+#form-helper-suggestions > .autorepeatbutton-up:-moz-locale-dir(rtl) {
+  list-style-image: url("chrome://browser/skin/images/arrowright-16.png");
+}
+
+/* force the autorepeat buttons to create a 'padding' when collapsed */
+#form-helper-suggestions > autorepeatbutton[collapsed="true"],
+#form-helper-suggestions > autorepeatbutton[disabled="true"] {
+  visibility: hidden;
+}
+
+#form-helper-suggestions .form-helper-suggestions-label {
+  padding: @padding_xxnormal@ @padding_normal@; /* 12px helps get row size for the labels */
+  margin: 0;
+  border-color: transparent rgb(215,215,215) transparent rgb(255,255,255);
+  border-style: solid;
+  border-width: @border_width_tiny@;
+}
+
+#form-helper-suggestions .form-helper-suggestions-label:first-child {
+  -moz-padding-start: -moz-initial; /* the arrowscrollbox creates enough left padding */
+  -moz-border-start: none;
+}
+
+#form-helper-suggestions .form-helper-suggestions-label:last-child {
+  -moz-border-end: none;
+}
+
+#form-helper-suggestions .form-helper-suggestions-label:hover:active {
+  background-color: @color_background_highlight@;
+}
+
+/* Select popup ------------------------------------------------------------- */
+#select-container button {
+  display: none;
+  -moz-user-focus: ignore;
+  -moz-user-select: none;
+}
+
+#select-container[multiple="true"] button {
+  display: -moz-box;
+}
+
+#select-commands {
+  background: transparent;
+  padding: 0;
+  -moz-user-focus: ignore;
+}
+
+/* listcell elements doesn't have flex="1" so we need to force it */
+#select-commands .option-command > listcell {
+  -moz-box-flex: 1 !important;
+}
+
+/* menulist popup ---------------------------------------------------------- */
+#menulist-commands {
+  display: -moz-box;
+}
+
+/* Common style for Select & Menulist -------------------------------------- */
+.options-title {
+  color: @color_text_default@;
+  margin: @margin_large@ @margin_large@ 0px;
+  padding-bottom: @padding_normal@;
+  font-size: @font_small@;
+  border-bottom: @border_width_xlarge@ solid @color_divider_border@;
+}
+
+.options-title:empty,
+.options-title[value=""] {
+  display: none;
+}
+
+.option-command label {
+  -moz-box-flex: 1; /* push the imageas far right as possible */
+
+  min-height: @touch_row@;
+  padding-top: -moz-calc(@touch_row@ / 2 - 0.75em);
+  -moz-box-align: center;
+  border-bottom: @border_width_tiny@ solid @color_button_border@;
+  margin: 0px;
+  margin-bottom: -@border_width_tiny@;
+}
+
+.option-command image {
+  min-height: @touch_row@;
+  padding: -moz-calc(( @touch_row@ - 46px ) / 2);
+  margin: 0px;
+  -moz-box-ordinal-group: 2; /* put the image on the right side */
+  border-bottom: @border_width_tiny@ solid @color_button_border@;
+}
+
+.option-command:last-child * {
+  border-bottom: none;
+}
+
+.option-command {
+  list-style-image: url("chrome://browser/skin/images/radio-unselected-hdpi.png");
+}
+
+.option-command.selected {
+  list-style-image: url("chrome://browser/skin/images/radio-selected-hdpi.png");
+}
+
+.option-command.optgroup {
+  font-weight: bold;
+  font-style: italic;
+  pointer-events: none;
+}
+
+.option-command .in-optgroup {
+  -moz-padding-start: -moz-calc(30px + @padding_large@);
+}
--- a/mobile/themes/core/honeycomb/platform.css
+++ b/mobile/themes/core/honeycomb/platform.css
@@ -112,39 +112,29 @@ textbox[disabled="true"] {
 .context-block,
 .modal-block,
 .perm-modal-block {
   -moz-box-align: center;
   -moz-box-pack: center;
   background-color: rgba(0,0,0,.6);
 }
 
-.context-block {
-  padding: @margin_context_popup@;
-}
-
 .dialog-dark,
 .panel-arrowcontent {
   background-color: @color_background_default@;
   padding: 0;
+  box-shadow: 0 0 @shadow_width_tiny@ @shadow_width_medium@ @color_shadow_light@;
 }
 
 .panel-arrowcontent {
-  box-shadow: 0 0 @shadow_width_tiny@ @shadow_width_medium@ @color_shadow_light@;  
   background-image: url(chrome://browser/skin/images/menu-top-insideglow.png);
   background-repeat: repeat-x;
   background-position: top left;
 }
 
-@media (max-width: 499px) {
-  .context-block {
-    padding: @padding_xlarge@;
-  }
-}
-
 dialog > .prompt-header > .prompt-message {
   white-space: pre-wrap;
 }
 
 dialog > .prompt-header > .button-checkbox {
   margin-left: @margin_large@;
 }
 
@@ -396,26 +386,31 @@ checkbox[checked="true"] > .checkbox-spa
 
 checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > .checkbox-check {
   background-image: url("chrome://browser/skin/images/check-selected-hdpi.png");
 }
 
 /* richlistbox ------------------------------------------------------------- */
 richlistbox {
   color: @color_text_default@;
-  background-color: @color_background_default@;
+  background-color: transparent;
   -moz-user-focus: ignore;
   margin: 0;
 }
 
 richlistitem {
   -moz-user-focus: ignore;
   min-height: @touch_row@; /* row size */
   padding: @padding_small@;
-  border-bottom: @border_width_tiny@ solid @color_divider_border@;
+  border-bottom: @border_width_tiny@ solid @color_button_border@;
+}
+
+richlistitem:last-child,
+richlistitem[selector="last-child"] {
+  border-bottom: none;
 }
 
 richlistitem label.title,
 richlistitem description.title {
   font-size: @font_normal@ !important;
 }
 
 richlistitem label.normal,
@@ -575,59 +570,72 @@ arrowbox {
 }
 
 .arrowbox-dark .panel-arrowcontent {
   padding: @padding_normal@; /* core spacing */
 }
 
 dialog,
 .arrowbox-dark .panel-arrowcontent,
-.panel-dark {
+.panel-dark,
+.dialog-dark {
   color: @color_text_default@;
   background: @color_background_default@;
 }
 
 dialog,
 .arrowbox-dark .panel-arrowcontent {
   border: @border_width_small@ solid @color_dialog_border@;
+  box-shadow: 0 0 @shadow_width_tiny@ @shadow_width_medium@ @color_shadow_light@;
 }
 
+dialog,
+.dialog-dark {
+  margin: @margin_xxxnormal@ !important;
+}
+
+#context-popup,
+#menulist-popup,
 dialog {
   margin: @margin_xxxnormal@ !important;
   max-width: @dialog_width@;
+  -moz-box-flex: 1;
 }
 
 .prompt-message {
   -moz-box-pack: center;
   font-size: @font_snormal@;
-  margin: @padding_normal@;
+  padding-bottom: @padding_normal@;
+  min-height: 4em;
+}
+
+.prompt-header {
+  border-bottom: @border_width_tiny@ solid @color_button_border@;
+  margin: @margin_normal@ @margin_large@ 0px !important;
 }
 
 .prompt-title {
-  font-size: @font_xnormal@;
-  padding-top: @padding_xnormal@;
-  padding-left: @padding_normal@;
+  font-size: @font_snormal@;
 }
 
 /* Authentication dialogs do not have a title */
 .prompt-title:empty,
 .prompt-title:empty + .prompt-line {
   display: none;
 }
 
 .prompt-line {
-  border-bottom: @border_width_tiny@ solid @color_divider_border@;
-  margin: @margin_small@ 0 0 0;
+  background-color: transparent;
+  border-bottom: @border_width_xlarge@ solid @color_divider_border@;
   height: @padding_normal@ !important;
 }
 
 .prompt-buttons {
   font-size: @font_snormal@;
-  background-color: @color_background_dlgbuttons@;
-  display: inline-block;
+  background-color: transparent;
   text-align: center;
 }
 
 .prompt-edit {
   margin: @margin_xnormal@;
   font-size: @font_normal@;
   text-align: start;
 }
@@ -655,32 +663,61 @@ dialog {
 
 /*.panel-row-header ------------------------------------------------------------ */
 .panel-row-header {
   background-color: @color_background_panelrow@ !important;
   color: @color_text_panelrow@;
   padding: 0 !important;
 }
 
+.prompt-button,
 .panel-row-button {
   color: @color_text_panelrow@;
   -moz-appearance: none;
-  border: 0 solid transparent !important;
+  border: @border_width_tiny@ solid transparent;
   -moz-user-focus: ignore;
   -moz-user-select: none;
-  margin: 0px;
-  padding-top: @padding_normal@ !important;
+  margin: @margin_xtiny@;
+  -moz-margin-end: -moz-calc(2 * @margin_xtiny@);
+  padding: @padding_normal@ 0px !important;
   -moz-box-flex: 1;
+  background-image: none;
+  background-color: transparent;
+  border-radius: 0px !important;
+}
+
+.prompt-button[disabled="true"] {
+  border: none !important;
 }
 
+.prompt-button > .button-box {
+  -moz-border-end: @border_width_tiny@ solid @color_button_border@;
+  -moz-border-right-colors: transparent @color_button_border@;
+  -moz-margin-end: -moz-calc(-3 * @border_width_tiny@);
+}
+
+.prompt-button:last-of-type {
+  -moz-margin-end: @margin_xtiny@;
+}
+
+.prompt-button:last-of-type > .button-box {
+  -moz-border-end: none;
+}
+
+.prompt-button:not([disabled]):hover:active,
 .panel-row-button:hover:active {
-  background: @color_background_highlight@;
+  background-image: none;
+  background-color: @color_background_highlight@;
   color: @color_text_highlight@;
 }
 
+.prompt-button {
+  min-width: 33%;
+}
+
 .panel-row-button:first-child {
   -moz-border-start-width: 0 !important;
 }
 
 .panel-row-button:last-child {
   -moz-border-end-width: 0 !important;
 }
 
--- a/mobile/themes/core/jar.mn
+++ b/mobile/themes/core/jar.mn
@@ -286,17 +286,17 @@ chrome.jar:
 % skin browser classic/1.0 %skin/honeycomb/ os=Android osversion>=3.0
 % skin browser honeycomb/1.0 %skin/honeycomb/
   skin/honeycomb/aboutPage.css                        (aboutPage.css)
   skin/honeycomb/about.css                            (about.css)
   skin/honeycomb/aboutHome.css                        (aboutHome.css)
 * skin/honeycomb/browser.css                          (honeycomb/browser.css)
 * skin/honeycomb/content.css                          (content.css)
   skin/honeycomb/config.css                           (config.css)
-* skin/honeycomb/forms.css                            (forms.css)
+* skin/honeycomb/forms.css                            (honeycomb/forms.css)
   skin/honeycomb/header.css                           (header.css)
 * skin/honeycomb/notification.css                     (notification.css)
 * skin/honeycomb/platform.css                         (honeycomb/platform.css)
   skin/honeycomb/touchcontrols.css                    (touchcontrols.css)
 * skin/honeycomb/localePicker.css                     (localePicker.css)
   skin/honeycomb/netError.css                         (netError.css)
 % override chrome://global/skin/about.css chrome://browser/skin/about.css
 % override chrome://global/skin/media/videocontrols.css chrome://browser/skin/touchcontrols.css
@@ -347,16 +347,18 @@ chrome.jar:
   skin/honeycomb/images/alert-downloads-30.png        (honeycomb/images/alert-downloads-30.png)
   skin/honeycomb/images/addons-default-hdpi.png       (honeycomb/images/addons-default-hdpi.png)
   skin/honeycomb/images/back-default-hdpi.png         (honeycomb/images/back-default-hdpi.png)
   skin/honeycomb/images/bookmark-default-hdpi.png     (honeycomb/images/bookmark-default-hdpi.png)
   skin/honeycomb/images/bookmark-starred-hdpi.png     (honeycomb/images/bookmark-starred-hdpi.png)
   skin/honeycomb/images/panelrow-active-hdpi.png      (honeycomb/images/panelrow-active-hdpi.png)
   skin/honeycomb/images/panelrow-default-hdpi.png     (honeycomb/images/panelrow-default-hdpi.png)
   skin/honeycomb/images/panelrow-selected-hdpi.png    (honeycomb/images/panelrow-selected-hdpi.png)
+  skin/honeycomb/images/radio-selected-hdpi.png       (gingerbread/images/radio-selected-hdpi.png)
+  skin/honeycomb/images/radio-unselected-hdpi.png     (gingerbread/images/radio-unselected-hdpi.png)
   skin/honeycomb/images/forward-default-hdpi.png        (honeycomb/images/forward-default-hdpi.png)
   skin/honeycomb/images/downloads-default-hdpi.png      (honeycomb/images/downloads-default-hdpi.png)
   skin/honeycomb/images/settings-default-hdpi.png       (honeycomb/images/settings-default-hdpi.png)
   skin/honeycomb/images/preferences-default-hdpi.png    (honeycomb/images/preferences-default-hdpi.png)
   skin/honeycomb/images/row-header-bg.png             (honeycomb/images/row-header-bg.png)
   skin/honeycomb/images/console-default-hdpi.png        (honeycomb/images/console-default-hdpi.png)
   skin/honeycomb/images/newtab-default-hdpi.png         (honeycomb/images/newtab-default-hdpi.png)
   skin/honeycomb/images/newtab-default-tablet-hdpi.png (honeycomb/images/newtab-default-tablet-hdpi.png)