Bug 1269485 - Improve New Private Browsing start-page background styles r?Gijs
MozReview-Commit-ID: 6gju3cfipJ3
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
@@ -1,10 +1,10 @@
-body.private .showNormal,
-body.normal .showPrivate,
+html.private .showNormal,
+html.normal .showPrivate,
body[tpEnabled] .showTpDisabled,
body:not([tpEnabled]) .showTpEnabled {
display: none !important;
}
.hide {
display: none;
}
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.js
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.js
@@ -39,18 +39,18 @@ prefBranch.addObserver("pbmode.enabled",
prefBranch.addObserver("enabled", prefObserver, true);
function setFavIcon(url) {
document.getElementById("favicon").setAttribute("href", url);
}
document.addEventListener("DOMContentLoaded", function () {
if (!PrivateBrowsingUtils.isContentWindowPrivate(window)) {
- document.body.classList.remove("private");
- document.body.classList.add("normal");
+ document.documentElement.classList.remove("private");
+ document.documentElement.classList.add("normal");
document.title = stringBundle.GetStringFromName("title.normal");
document.getElementById("favicon")
.setAttribute("href", FAVICON_QUESTION);
document.getElementById("startPrivateBrowsing")
.addEventListener("command", openPrivateWindow);
return;
}
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
@@ -12,25 +12,25 @@
<!ENTITY % brandDTD SYSTEM "chrome://branding/locale/brand.dtd">
%brandDTD;
<!ENTITY % browserDTD SYSTEM "chrome://browser/locale/browser.dtd">
%browserDTD;
<!ENTITY % aboutPrivateBrowsingDTD SYSTEM "chrome://browser/locale/aboutPrivateBrowsing.dtd">
%aboutPrivateBrowsingDTD;
]>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" class="private">
<head>
<link id="favicon" rel="icon" type="image/png"/>
<link rel="stylesheet" href="chrome://browser/content/aboutPrivateBrowsing.css" type="text/css" media="all"/>
<link rel="stylesheet" href="chrome://browser/skin/privatebrowsing/aboutPrivateBrowsing.css" type="text/css" media="all"/>
<script type="application/javascript;version=1.7" src="chrome://browser/content/aboutPrivateBrowsing.js"></script>
</head>
- <body dir="&locale.dir;" class="private">
+ <body dir="&locale.dir;">
<p class="showNormal">&aboutPrivateBrowsing.notPrivate;</p>
<button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="startPrivateBrowsing"
class="showNormal"
label="&privatebrowsingpage.openPrivateWindow.label;"
accesskey="&privatebrowsingpage.openPrivateWindow.accesskey;"/>
<div class="showPrivate about-content-container">
<h1 class="title">
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -1,41 +1,37 @@
/* 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/. */
@import url("chrome://global/skin/in-content/info-pages.css");
:root {
- --color-background-light: #fff;
- --color-background-dark: #303033;
- --color-background-dark-purple: #1c023c;
-
--color-grey-lightest: #fbfbfb;
--color-grey: #b1b1b1;
--color-blue: #0996f8;
--color-blue-dark: #0670cc;
--color-blue-darker: #005bab;
- --color-darkTheme-purple-text: #beb8cc;
- --color-darkTheme-purple-text-strong: #ebe3fc;
+ --icon-margin: 64px;
+}
- --icon-margin: 64px;
+html {
+ font-size: 1.5em;
+}
+
+html.private {
+ --in-content-page-color: #beb8cc;
+ --in-content-text-color: #beb8cc;
+ --in-content-page-background: #1c023c;
}
body {
padding: 40px;
- background-color: var(--color-background-light);
- font-size: 1.5em;
-}
-
-body.private {
- color: var(--color-darkTheme-purple-text);
- background-color: var(--color-background-dark-purple);
}
a:link {
color: var(--color-blue);
text-decoration: none;
}
a:hover {
@@ -77,17 +73,16 @@ p {
}
.title {
background-image: url("chrome://browser/skin/privatebrowsing/private-browsing.svg");
background-size: 64px;
background-position: left, center;
font-weight: lighter;
line-height: 1.5em;
- color: var(--color-darkTheme-purple-text);
min-height: 64px;
-moz-margin-start: 0;
-moz-padding-start: calc(var(--icon-margin) + 24px);
}
.about-subheader {
display: flex;
align-items: center;