Bug 681643 - Update dialog theme for honeycomb. r=mfinkle

2011-09-20 12:07:07 -07:00 · 2011-09-20 12:07:07 -07:00 · a121e73c72
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@ -586,7 +586,7 @@
            <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">
@ -605,9 +605,9 @@
            <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>
--- a/mobile/components/PromptService.js
+++ b/mobile/components/PromptService.js
@ -383,7 +383,7 @@ Prompt.prototype = {

    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;
--- a/mobile/themes/core/honeycomb/browser.css
+++ b/mobile/themes/core/honeycomb/browser.css
@ -1222,6 +1222,12 @@ pageaction > vbox {
 }

 /* 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%;
 }
@ -1229,6 +1235,26 @@ pageaction > vbox {
 .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"],
@ -1239,7 +1265,7 @@ pageaction > vbox {

 .action-button[selected="true"],
 .context-command[selected="true"] {
-  color: black; /* force */
+  color: @color_text_active@; /* force */
  background: transparent;
 }

@ -1296,8 +1322,7 @@ pageaction:not([image]) > hbox >.pageaction-image {
 .action-button,
 .context-command,
 .pageaction-title {
-  font-size: @font_normal@ !important;
-  color: black; /* force */
+  color: @color_text_active@; /* force */
 }

 .pageaction-desc {
@ -1309,10 +1334,6 @@ pageaction:not([image]) > hbox >.pageaction-image {
  display: none;
 }

-#context-header {
-  background-color: @color_background_default@;
-}
-
 #share-title,
 #bookmark-popup-title,
 #context-hint {
@ -1662,6 +1683,19 @@ setting {
 }

 /* 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 */
 }
--- a/mobile/themes/core/honeycomb/defines.inc
+++ b/mobile/themes/core/honeycomb/defines.inc
@ -6,7 +6,7 @@
 %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
--- a/mobile/themes/core/honeycomb/forms.css
+++ 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
@ -117,29 +117,19 @@ textbox[disabled="true"] {
  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;
 }
@ -401,7 +391,7 @@ checkbox[checked="true"][disabled="true"] > .checkbox-spacer-box > .checkbox-che
 /* richlistbox ------------------------------------------------------------- */
 richlistbox {
  color: @color_text_default@;
-  background-color: @color_background_default@;
+  background-color: transparent;
  -moz-user-focus: ignore;
  margin: 0;
 }
@ -410,7 +400,12 @@ 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,
@ -580,7 +575,8 @@ arrowbox {

 dialog,
 .arrowbox-dark .panel-arrowcontent,
-.panel-dark {
+.panel-dark,
+.dialog-dark {
  color: @color_text_default@;
  background: @color_background_default@;
 }
@ -588,23 +584,36 @@ dialog,
 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 */
@ -614,15 +623,14 @@ dialog {
 }

 .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;
 }

@ -660,22 +668,51 @@ dialog {
  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;
 }
--- a/mobile/themes/core/jar.mn
+++ b/mobile/themes/core/jar.mn
@ -291,7 +291,7 @@ chrome.jar:
 * 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)
@ -352,6 +352,8 @@ chrome.jar:
  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)