From e8183ab8fed04b63faf3ae74df209d35e14e9d19 Mon Sep 17 00:00:00 2001 From: Wes Johnston Date: Tue, 20 Sep 2011 12:07:07 -0700 Subject: [PATCH] Bug 681643 - Update dialog theme for honeycomb. r=mfinkle --- mobile/chrome/content/browser.xul | 6 +- mobile/components/PromptService.js | 2 +- mobile/themes/core/honeycomb/browser.css | 48 +++- mobile/themes/core/honeycomb/defines.inc | 2 +- mobile/themes/core/honeycomb/forms.css | 277 ++++++++++++++++++++++ mobile/themes/core/honeycomb/platform.css | 89 +++++-- mobile/themes/core/jar.mn | 4 +- 7 files changed, 389 insertions(+), 39 deletions(-) create mode 100644 mobile/themes/core/honeycomb/forms.css diff --git a/mobile/chrome/content/browser.xul b/mobile/chrome/content/browser.xul index 1d7a800f7d3c..fba0a8a735a9 100644 --- a/mobile/chrome/content/browser.xul +++ b/mobile/chrome/content/browser.xul @@ -586,7 +586,7 @@ - + diff --git a/mobile/components/PromptService.js b/mobile/components/PromptService.js index 56b17f2fa86f..63088c8ae886 100644 --- 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; diff --git a/mobile/themes/core/honeycomb/browser.css b/mobile/themes/core/honeycomb/browser.css index 7d7105986084..38c5422d500a 100644 --- 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 */ } diff --git a/mobile/themes/core/honeycomb/defines.inc b/mobile/themes/core/honeycomb/defines.inc index aeb708c4c5fb..44986733cae9 100644 --- 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 diff --git a/mobile/themes/core/honeycomb/forms.css b/mobile/themes/core/honeycomb/forms.css new file mode 100644 index 000000000000..4b59f3eb4416 --- /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 + * + * 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@); +} diff --git a/mobile/themes/core/honeycomb/platform.css b/mobile/themes/core/honeycomb/platform.css index de5b9787f3fc..5bb4b1679612 100644 --- 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; } diff --git a/mobile/themes/core/jar.mn b/mobile/themes/core/jar.mn index 63032b73cfff..261f57e2bf09 100644 --- 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)