Bug 838211 - Metro info app bar theming, part 1 (basic style and image changes) [r=fryn, ui-r=shorlander]

This commit is contained in:
Matt Brubeck 2013-03-06 18:31:28 -08:00
parent 8294fc5f47
commit 1c1fc5a19e
18 changed files with 141 additions and 25 deletions

View File

@ -988,6 +988,7 @@ var ContextUI = {
init: function init() {
Elements.browsers.addEventListener("mousedown", this, true);
Elements.browsers.addEventListener("touchstart", this, true);
Elements.browsers.addEventListener("AlertActive", this, true);
window.addEventListener("MozEdgeUIGesture", this, true);
window.addEventListener("keypress", this, true);
window.addEventListener("KeyboardChanged", this, false);
@ -1198,6 +1199,8 @@ var ContextUI = {
this.dismiss();
break;
case "touchstart":
// ContextUI can hide the notification bar. Workaround until bug 845348 is fixed.
case "AlertActive":
this.dismiss();
break;
case "keypress":

View File

@ -1260,6 +1260,7 @@ var PopupBlockerObserver = {
else {
var buttons = [
{
isDefault: false,
label: strings.GetStringFromName("popupButtonAllowOnce"),
accessKey: null,
callback: function() { PopupBlockerObserver.showPopupsForSite(); }

View File

@ -150,6 +150,7 @@
<key id="key_quit" key="q" modifiers="accel" command="cmd_quit"/>
<key id="key_addBoomkark" key="d" modifiers="accel" command="cmd_addBookmark"/>
<key id="key_console" key="j" modifiers="accel,shift" oncommand="PanelUI.show('console-container')"/>
<key id="key_options" key="o" modifiers="accel,shift" oncommand="Elements.prefsFlyout.show()"/>
<!-- manage tabs -->
<key id="key_newTab" key="t" modifiers="accel" command="cmd_newTab"/>

View File

@ -34,7 +34,7 @@
</vbox>
<hbox class="prompt-buttons">
<button id="prompt-button-ok" class="prompt-button" label="&ok.label;" command="cmd_ok"/>
<button id="prompt-button-ok" class="prompt-button button-default" label="&ok.label;" command="cmd_ok"/>
</hbox>
</vbox>
</dialog>

View File

@ -34,7 +34,7 @@
</vbox>
<hbox id="prompt-confirm-buttons-box" class="prompt-buttons">
<button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
<button class="prompt-button button-default" label="&ok.label;" command="cmd_ok"/>
<button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
</hbox>
</vbox>

View File

@ -38,7 +38,7 @@
</scrollbox>
<hbox class="prompt-buttons">
<button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
<button class="prompt-button button-default" label="&ok.label;" command="cmd_ok"/>
<button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
</hbox>
</vbox>

View File

@ -56,7 +56,7 @@
</vbox>
<hbox class="prompt-buttons">
<button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
<button class="prompt-button button-default" label="&ok.label;" command="cmd_ok"/>
<button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
</hbox>
</vbox>

View File

@ -36,7 +36,7 @@
</scrollbox>
<hbox class="prompt-buttons">
<button class="prompt-button" label="&ok.label;" disabled="true" command="cmd_ok"/>
<button class="prompt-button button-default" label="&ok.label;" disabled="true" command="cmd_ok"/>
<button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
</hbox>
</vbox>

View File

@ -34,7 +34,7 @@
</vbox>
<hbox class="prompt-buttons">
<button class="prompt-button" label="&ok.label;" command="cmd_ok"/>
<button class="prompt-button button-default" label="&ok.label;" command="cmd_ok"/>
<button class="prompt-button" label="&cancel.label;" command="cmd_cancel"/>
</hbox>
</vbox>

View File

@ -37,6 +37,10 @@ const kEntities = { "geolocation": "geolocation", "desktop-notification": "deskt
"indexedDB": "offlineApps", "indexedDBQuota": "indexedDBQuota",
"openWebappsManage": "openWebappsManage" };
const kIcons = {
geolocation: "chrome://browser/skin/images/infobar-geolocation.png"
};
function ContentPermissionPrompt() {}
ContentPermissionPrompt.prototype = {
@ -96,6 +100,7 @@ ContentPermissionPrompt.prototype = {
return;
let entityName = kEntities[request.type];
let icon = kIcons[request.type] || "";
let buttons = [{
label: browserBundle.GetStringFromName(entityName + ".allow"),
@ -118,7 +123,7 @@ ContentPermissionPrompt.prototype = {
[request.principal.URI.host], 1);
let newBar = notificationBox.appendNotification(message,
request.type,
"", // Notifications in Fennec do not display images.
icon,
notificationBox.PRIORITY_WARNING_MEDIUM,
buttons);
}

View File

@ -150,7 +150,7 @@ LoginManagerPrompter.prototype = {
this.log("Adding new " + aName + " notification bar");
var newBar = aNotifyBox.appendNotification(
aText, aName,
"chrome://mozapps/skin/passwordmgr/key.png",
"chrome://browser/skin/images/infobar-key.png",
priority, aButtons);
// The page we're going to hasn't loaded yet, so we want to persist

View File

@ -1,12 +0,0 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!--
LOCALIZATION NOTE (geolocation.learnMore): Use the
unicode ellipsis char, \u2026,
or use "..." unless \u2026 doesn't suit traditions in your
locale.
-->
<!ENTITY geolocation.learnMore "Learn More…">

View File

@ -15,7 +15,6 @@
locale/browser/config.dtd (%chrome/config.dtd)
locale/browser/preferences.dtd (%chrome/preferences.dtd)
locale/browser/checkbox.dtd (%chrome/checkbox.dtd)
locale/browser/notification.dtd (%chrome/notification.dtd)
locale/browser/sync.dtd (%chrome/sync.dtd)
locale/browser/sync.properties (%chrome/sync.properties)
locale/browser/prompt.dtd (%chrome/prompt.dtd)

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1001 B

View File

@ -38,6 +38,9 @@ chrome.jar:
skin/images/identity-icons-https-ev.png (images/identity-icons-https-ev.png)
skin/images/identity-icons-https-mixed.png (images/identity-icons-https-mixed.png)
skin/images/identity-icons-https.png (images/identity-icons-https.png)
skin/images/infobar-close.png (images/infobar-close.png)
skin/images/infobar-geolocation.png (images/infobar-geolocation.png)
skin/images/infobar-key.png (images/infobar-key.png)
skin/images/firefox-watermark.png (images/firefox-watermark.png)
skin/images/flyout-back-button.png (images/flyout-back-button.png)
skin/images/about-footer.png (images/about-footer.png)

View File

@ -16,7 +16,6 @@
font-size: @font_normal@;
}
button,
textbox,
menulist {
-moz-appearance: none;
@ -34,20 +33,81 @@ menulist {
border-radius: 0;
}
button[disabled="true"],
textbox[disabled="true"],
menulist[disabled="true"] {
border-color: @field_disabled_foreground_color@ !important;
color: @field_disabled_foreground_color@;
}
button:not([disabled]):hover:active,
button:not([disabled])[checked="true"],
menulist:not([disabled]):hover:active {
color: @field_background_color@;
background: @field_foreground_color@;
}
/* Button ------------------------------------------------------------------ */
button {
-moz-appearance: none;
border: 1px solid;
font-size: @metro_font_normal@;
font-weight: normal;
margin: @metro_spacing_small@;
min-width: @field_sizing@;
min-height: 32px;
padding: 3px 16px;
}
/* Non-default button colors */
button {
background: linear-gradient(to bottom, hsl(210, 5%, 89%), hsl(210, 5%, 87%));
border-color: hsl(220, 5%, 86%);
color: hsl(0, 0%, 10%);
}
button:not([disabled]):hover {
background: linear-gradient(to bottom, hsl(210, 5%, 75%), hsl(210, 5%, 73%));
border-color: hsl(210, 5%, 71%);
color: hsl(0, 0%, 10%);
}
/* Default button colors */
.button-default,
.notification-button-default {
background: linear-gradient(to bottom, hsl(35, 100%, 50%), hsl(30, 100%, 50%));
border-color: hsl(30, 100%, 48%);
color: white;
}
.button-default:not([disabled]):hover,
.notification-button-default:not([disabled]):hover {
background: linear-gradient(to bottom, hsl(25, 100%, 47%), hsl(25, 100%, 45%));
border-color: hsl(25, 100%, 43%);
color: white;
}
/* Pushed button colors (both default and non-default */
/* Note: these need enough specificity to override all the :hover rules above. */
button:not([disabled]):hover:active,
button:not([disabled])[checked="true"],
.button-default:not([disabled])[checked="true"],
.notification-button-default:not([disabled])[checked="true"] {
background: linear-gradient(to bottom, hsl(210, 5%, 28%), hsl(210, 5%, 25%));
border-color: hsl(216, 4%, 27%);
color: white;
}
/* Disabled button colors (both default and non-default */
button[disabled] {
background: linear-gradient(to bottom, hsl(210, 3%, 93%), hsl(210, 3%, 92%));
border-color: hsl(210, 3%, 91%);
color: hsl(0, 0%, 60%);
}
/* Textbox ----------------------------------------------------------------- */
textbox[isempty="true"] {
@ -318,6 +378,62 @@ richlistitem[typeName="message"] {
border-bottom: 0;
}
/* Notification box ("info app bar") ---------------------------------------- */
notification {
background: hsl(0, 0%, 98%);
border-bottom: 1px solid hsla(0, 0%, 0%, .07);
box-shadow: 0 0 10px hsla(0, 0%, 0%, .1);
min-height: 64px;
}
.notification-inner {
border-style: none;
}
.notification-button {
-moz-margin-start: 0;
-moz-margin-end: 20px;
}
.messageImage {
width: 32px;
height: 32px;
-moz-margin-start: 40px;
-moz-margin-end: 16px;
}
/* If there is no image set, collapse the image but keep the starting margin */
.messageImage:not([src]) {
width: 0;
-moz-margin-end: 0;
}
.messageText {
margin: 0;
}
.messageCloseButton {
list-style-image: url("chrome://browser/skin/images/infobar-close.png");
padding: 0;
-moz-margin-start: 0;
-moz-margin-end: 40px;
-moz-image-region: rect(0, 40px, 40px, 0);
}
.messageCloseButton > .toolbarbutton-icon {
margin: 0;
}
.messageCloseButton:hover {
-moz-image-region: rect(0, 80px, 40px, 40px);
}
.messageCloseButton:hover:active {
-moz-image-region: rect(0, 120px, 40px, 80px);
}
/* Rich Grid ---------------------------------------------------------------- */
richgrid {