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

This commit is contained in:
Wes Johnston 2011-09-20 12:07:07 -07:00
parent 183296f835
commit e8183ab8fe
7 changed files with 389 additions and 39 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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 */
}

View File

@ -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

View File

@ -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@);
}

View File

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

View File

@ -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)