Bug 1267047 - Simplify aboutPrivateBrowsing.css by reusing at most info-pages.css. r=Gijs
MozReview-Commit-ID: PgIQjsXi6r
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
@@ -1,10 +1,8 @@
-body.private .showNormal,
-body.normal .showPrivate,
-body[tpEnabled] .showTpDisabled,
-body:not([tpEnabled]) .showTpEnabled {
+.private .showNormal,
+.normal .showPrivate {
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,35 +12,35 @@
<!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">
+ <div class="showPrivate container">
<h1 class="title">
- <span id="title">&privateBrowsing.title;</span>
- <span id="titleTracking">&privateBrowsing.title.tracking;</span>
+ <span id="title" class="title-text">&privateBrowsing.title;</span>
+ <span id="titleTracking" class="title-text">&privateBrowsing.title.tracking;</span>
</h1>
<section class="section-main">
<p>
&aboutPrivateBrowsing.info.notsaved.before;
<strong>&aboutPrivateBrowsing.info.notsaved.emphasize;</strong>&aboutPrivateBrowsing.info.notsaved.after;
</p>
<div class="list-row">
<ul>
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -1,123 +1,89 @@
/* 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-darkTheme-purple-text: #beb8cc;
--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;
-}
-
-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);
+ --in-content-link-color: #0996f8;
+ --in-content-link-color-hover: #0670cc;
+ --in-content-link-color-active: #005bab;
}
-a:link {
- color: var(--color-blue);
- text-decoration: none;
-}
-
-a:hover {
- color: var(--color-blue-dark);
- text-decoration: underline;
-}
-
-a:hover:active {
- color: var(--color-blue-darker);
-}
-
-a:visited {
- color: var(--color-blue-darker);
-}
-
-.about-content-container {
- width: 780px;
+.private {
+ --in-content-text-color: var(--color-darkTheme-purple-text);
+ --in-content-page-color: var(--color-darkTheme-purple-text);
+ --in-content-page-background: var(--color-background-dark-purple);
}
section.section-main {
margin-bottom: 48px;
- -moz-margin-start: var(--icon-margin);
- -moz-padding-start: 24px;
}
p {
line-height: 1.5em;
}
.list-row {
overflow: auto;
}
.list-row > ul > li {
- float: left;
- width: 220px;
- margin-left: 1em;
+ float: inline-start;
+ min-width: 30%;
+ margin-inline-start: 1em;
margin-bottom: 0;
}
.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);
+}
+
+.title-text {
+ border-bottom: none;
}
.about-subheader {
display: flex;
align-items: center;
- font-size: 1.5em;
font-weight: lighter;
- min-height: 32px;
- background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg");
- background-repeat: no-repeat;
- background-size: 32px;
- -moz-margin-start: calc(var(--icon-margin) - 32px);
- -moz-padding-start: 56px;
}
-.about-subheader.tp-off {
- background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg");
+@media (min-width: 675px) {
+ .about-subheader::before {
+ content: "";
+ background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection.svg");
+ width: 32px;
+ height: 32px;
+ margin-inline-end: 32px;
+ margin-inline-start: -64px;
+ }
+
+ .about-subheader.tp-off::before {
+ background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg");
+ }
+}
+
+.tpTitle {
+ margin-inline-end: 12px;
}
.about-info {
font-size: .875em;
}
-.tpTitle {
- margin-right: 12px;
-}
-
.private strong {
color: var(--color-grey-lightest);
font-weight: normal;
}
a.button {
padding: 5px 40px;
background-color: #381e59;
@@ -129,58 +95,55 @@ a.button {
.toggle + .toggle-btn {
box-sizing: border-box;
cursor: pointer;
min-width: 60px;
height: 24px;
border-radius: 12px;
background-color: var(--color-grey);
- border: 1px var(--color-grey) solid;
+ border: 1px solid transparent;
padding: 2px;
}
.toggle + .toggle-btn::after,
.toggle + .toggle-btn::before {
position: relative;
display: block;
content: "";
width: 19px;
height: 100%;
}
.toggle + .toggle-btn::after {
- left: 0;
box-shadow: 0 0 1px 1px hsla(0, 0%, 0%, .1),
0 1px 0 hsla(0, 0%, 0%, .2);
border-radius: 50%;
background: white;
- transition: left .2s ease;
+ transition: offset-inline-start .2s ease;
}
.toggle + .toggle-btn::before {
- float: left;
- left: 9px;
- visibility: hidden;
+ float: inline-start;
+ offset-inline-start: 9px;
background-size: 16px;
background-repeat: no-repeat;
- background-color: transparent;
background-image: url("chrome://browser/skin/privatebrowsing/check.svg");
}
+.toggle:not(:checked) + .toggle-btn::before {
+ visibility: hidden;
+}
+
.toggle:checked + .toggle-btn {
background: #3fc455;
- border: 1px solid #269939;
+ border-color: #269939;
}
.toggle:checked + .toggle-btn::after {
- left: 35px;
-}
-
-.toggle:checked + .toggle-btn::before {
- visibility: visible;
+ offset-inline-start: 35px;
}
.toggle:-moz-focusring + .toggle-btn {
outline: 2px solid rgba(0, 149, 221, 0.5);
outline-offset: 1px;
-moz-outline-radius: 2px;
}
deleted file mode 100755
index 59ca51b7bd5bc350644f5b3e436dea16a22d4e98..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100755
index 031685cbf43337d21599e8d00b225d7e14f4afdd..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
