Bug 801187 - Theme tab-modal prompts to look good in Metro r=mbrubeck

--HG--
extra : rebase_source : 7d18c3f3210427aaa7628bc95e56283f9a2e2c8d
This commit is contained in:
Rodrigo Silveira 2013-08-30 12:22:48 -07:00
parent 4d1fc7f0e6
commit c985b0e3be
6 changed files with 117 additions and 8 deletions

View File

@ -0,0 +1,45 @@
<?xml version="1.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/. -->
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:xbl="http://www.mozilla.org/xbl">
<binding id="tabmodalprompt"
extends="chrome://global/content/tabprompts.xml#tabmodalprompt">
<implementation>
<method name="metroInit">
<parameter name="args"/>
<parameter name="linkedTab"/>
<parameter name="onCloseCallback"/>
<body>
<![CDATA[
this.init(args, linkedTab, onCloseCallback);
this.ui.infoTitle.removeAttribute("hidden");
let infoContainer = document.getAnonymousElementByAttribute(this, "anonid", "infoContainer");
infoContainer.setAttribute("align", "start");
infoContainer.classList.add("infoContainer");
]]>
</body>
</method>
<method name="onResize">
<body>
<![CDATA[
// Overwrite base onResize method. It's no-op for metro.
]]>
</body>
</method>
</implementation>
</binding>
</bindings>

View File

@ -203,3 +203,7 @@ textbox {
textbox[type="search"] {
-moz-binding: url("chrome://browser/content/bindings/bindings.xml#search-textbox");
}
tabmodalprompt {
-moz-binding: url("chrome://browser/content/bindings/tabprompts.xml#tabmodalprompt");
}

View File

@ -370,6 +370,7 @@ var Browser = {
let promptBox = {
appendPrompt : function(args, onCloseCallback) {
let newPrompt = document.createElementNS(XUL_NS, "tabmodalprompt");
newPrompt.setAttribute("promptType", args.promptType);
stack.appendChild(newPrompt);
browser.setAttribute("tabmodalPromptShowing", true);
newPrompt.clientTop; // style flush to assure binding is attached
@ -377,7 +378,7 @@ var Browser = {
let tab = self.getTabForBrowser(browser);
tab = tab.chromeTab;
newPrompt.init(args, tab, onCloseCallback);
newPrompt.metroInit(args, tab, onCloseCallback);
return newPrompt;
},

View File

@ -28,6 +28,7 @@ chrome.jar:
content/bindings/popup.xml (content/bindings/popup.xml)
content/bindings/circularprogress.xml (content/bindings/circularprogress.xml)
content/bindings/notification.xml (content/bindings/notification.xml)
content/bindings/tabprompts.xml (content/bindings/tabprompts.xml)
* content/flyoutpanels/FlyoutPanelsUI.js (content/flyoutpanels/FlyoutPanelsUI.js)
* content/flyoutpanels/AboutFlyoutPanel.js (content/flyoutpanels/AboutFlyoutPanel.js)

View File

@ -79,6 +79,7 @@
%define touch_row 47px
%define touch_button_small 37px
%define touch_action_minwidth 133px
%define touch_action_snapped_minwidth 80px
%define margin_large 16px
%define margin_xnormal 7px

View File

@ -78,14 +78,14 @@ button:not([disabled]):hover {
/* Default button colors */
.button-default,
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,
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%);
@ -97,7 +97,7 @@ button:not([disabled]):hover {
/* 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"],
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%);
@ -551,25 +551,82 @@ notificationbox[count="3"] .notification-layer[anonid="layer2"] {
/* Prompts ----------------------------------------------------------------- */
.mainContainer {
/* TODO: These values should probably come from somewhere. Maybe the same as the width of our overlay buttons? */
padding-left: 60px;
padding-right: 60px;
padding: 5vh 10vw;
}
.info\.title {
font-size: @metro_font_large@;
border-bottom: 1px solid #C7C7C7;
padding-bottom: @metro_spacing_normal@;
width: 100%;
margin-left: 0;
margin-right: 0;
}
.info\.body {
font-size: @metro_font_normal@;
padding-bottom: @metro_spacing_normal@;
height: 100%;
max-height: 30vh;
max-width: 55vw;
}
.buttonContainer {
background-color: transparent;
padding: 0;
border: none;
}
.buttonContainer > button {
min-width: @touch_action_minwidth@;
margin: 5px 0 5px @metro_spacing_xnormal@;
}
/* set all the things to display block to allow body to grow with content and
obey overflow auto. Except on authentication prompts because a grid is used to
align labels and textboxes. */
tabmodalprompt:not([promptType="promptUserAndPass"]) .info\.body,
tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer,
tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer,
tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows > row:not([hidden]),
tabmodalprompt:not([promptType="promptUserAndPass"]) .topContainer > rows {
display: block;
}
tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer {
overflow: auto;
}
.topContainer > rows > row > label {
margin-left: 0;
}
.topContainer > rows > row > checkbox {
-moz-margin-start: 0;
-moz-padding-start: 0;
}
.topContainer > rows > row > textbox {
font-size: @metro_font_normal@;
height: 40px;
margin: 5px 0;
width: 100%;
}
.topContainer > rows > row > textbox[focused] {
border-color: @metro_orange@ !important;
}
@media (max-width: 600px) {
.mainContainer {
padding: 5vh 5vw;
width: 90vw;
}
.buttonContainer > button {
min-width: @touch_action_snapped_minwidth@;
}
}
/*.meta -------------------------------------------------------------------- */
.meta {