mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-29 21:25:35 +00:00
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
parent
4d1fc7f0e6
commit
c985b0e3be
45
browser/metro/base/content/bindings/tabprompts.xml
Normal file
45
browser/metro/base/content/bindings/tabprompts.xml
Normal 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>
|
||||
@ -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");
|
||||
}
|
||||
|
||||
@ -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;
|
||||
},
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user