Bug 1361986 - Update the about:privatebrowsing design for photon. r=johannh
authorDão Gottwald <dao@mozilla.com>
Thu, 04 May 2017 17:02:02 +0200
changeset 573150 9267221b3d8435942eddb0d73fb70bcc4ec82a9a
parent 573149 5510b2c782088b5040df1132fbc06c55cf5a9117
child 573151 8f8dc26b27ebdbd5fc30d32b3357b3db2d76716b
push id57306
push userbmo:emilio+bugs@crisal.io
push dateFri, 05 May 2017 10:08:55 +0000
reviewersjohannh
bugs1361986
milestone55.0a1
Bug 1361986 - Update the about:privatebrowsing design for photon. r=johannh MozReview-Commit-ID: 8czyGdaoyLI
browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
browser/themes/shared/jar.inc.mn
browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
browser/themes/shared/privatebrowsing/check.svg
toolkit/themes/shared/in-content/info-pages.inc.css
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
@@ -27,17 +27,17 @@
 
   <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>
       </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/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -171,17 +171,16 @@
   skin/classic/browser/panic-panel/header@2x.png               (../shared/panic-panel/header@2x.png)
   skin/classic/browser/panic-panel/header-small.png            (../shared/panic-panel/header-small.png)
   skin/classic/browser/panic-panel/header-small@2x.png         (../shared/panic-panel/header-small@2x.png)
   skin/classic/browser/panic-panel/icons.png                   (../shared/panic-panel/icons.png)
   skin/classic/browser/panic-panel/icons@2x.png                (../shared/panic-panel/icons@2x.png)
   skin/classic/browser/places/bookmarks-notification-finish.png (../shared/places/bookmarks-notification-finish.png)
   skin/classic/browser/places/bookmarks-notification-finish@2x.png (../shared/places/bookmarks-notification-finish@2x.png)
   skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css)
-  skin/classic/browser/privatebrowsing/check.svg               (../shared/privatebrowsing/check.svg)
   skin/classic/browser/privatebrowsing/favicon.svg             (../shared/privatebrowsing/favicon.svg)
   skin/classic/browser/privatebrowsing/private-browsing.svg    (../shared/privatebrowsing/private-browsing.svg)
   skin/classic/browser/privatebrowsing/tracking-protection-off.svg (../shared/privatebrowsing/tracking-protection-off.svg)
   skin/classic/browser/privatebrowsing/tracking-protection.svg (../shared/privatebrowsing/tracking-protection.svg)
   skin/classic/browser/compacttheme/loading-inverted.png (../shared/compacttheme/loading-inverted.png)
   skin/classic/browser/compacttheme/loading-inverted@2x.png (../shared/compacttheme/loading-inverted@2x.png)
   skin/classic/browser/compacttheme/urlbar-history-dropmarker.svg (../shared/compacttheme/urlbar-history-dropmarker.svg)
   skin/classic/browser/urlbar-star.svg                         (../shared/urlbar-star.svg)
--- a/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -1,141 +1,108 @@
 /* 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-grey-lightest: #fbfbfb;
   --color-grey: #b1b1b1;
-
-  --color-blue: #0996f8;
-  --color-blue-dark: #0670cc;
-  --color-blue-darker: #005bab;
-
-  --icon-margin: 64px;
 }
 
 html.private {
-  --in-content-page-color: #beb8cc;
-  --in-content-text-color: #beb8cc;
-  --in-content-page-background: #1c023c;
-}
-
-body {
-  padding: 40px;
+  --in-content-page-color: white;
+  --in-content-text-color: white;
+  --in-content-page-background: #25003e;
 }
 
 a:link {
-  color: var(--color-blue);
-  text-decoration: none;
-}
-
-a:hover {
-  color: var(--color-blue-dark);
+  color: inherit;
   text-decoration: underline;
 }
 
-a:hover:active {
-  color: var(--color-blue-darker);
-}
-
-a:visited {
-  color: var(--color-blue-darker);
-}
-
-.about-content-container {
-  max-width: 780px;
+.container {
+  max-width: 48em;
 }
 
 .section-main {
   margin-bottom: 48px;
-  margin-inline-start: var(--icon-margin);
-  padding-inline-start: 24px;
 }
 
 .section-main:last-child {
   margin-bottom: 0;
 }
 
 p {
   line-height: 1.5em;
 }
 
 .list-row {
   overflow: auto;
 }
 
 .list-row > ul > li {
   float: left;
-  width: 220px;
-  line-height: 1.5em;
+  width: 16em;
+  line-height: 2em;
   margin-inline-start: 1em;
   margin-bottom: 0;
 }
 
 .list-row > ul > li:dir(rtl) {
   float: right;
 }
 
 .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;
-  min-height: 64px;
-  margin-inline-start: 0;
-  padding-inline-start: calc(var(--icon-margin) + 24px);
+  background-position: left center;
+  background-size: 2em;
+  line-height: 2em;
+  margin-inline-start: calc(-2em - 10px);
+  padding-inline-start: calc(2em + 10px);
 }
 
 .title:dir(rtl) {
-  background-position: right, center;
+  background-position: right center;
 }
 
 .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;
-  margin-inline-start: calc(var(--icon-margin) - 32px);
-  padding-inline-start: 56px;
+  background-position: left center;
+  background-size: 1.5em;
+  line-height: 1.5em;
+  margin-inline-start: calc(-1.5em - 10px);
+  padding-inline-start: calc(1.5em + 10px);
 }
 
 .about-subheader:dir(rtl) {
   background-position: right;
 }
 
 .about-subheader.tp-off {
   background-image: url("chrome://browser/skin/privatebrowsing/tracking-protection-off.svg");
 }
 
 .about-info {
-  font-size: .875em;
+  font-size: .9em;
 }
 
 .tpTitle {
   margin-inline-end: 12px;
 }
 
-.private strong {
-  color: var(--color-grey-lightest);
-  font-weight: normal;
-}
-
 a.button {
-  padding: 5px 40px;
-  background-color: #381e59;
-  border: 1px solid #43256a;
-  border-radius: 4px;
+  padding: 3px 20px;
+  background-color: #8000d7;
+  border: 1px solid #6000a1;
   text-decoration: none;
   display: inline-block;
 }
 
 /**
  * We want to hide the checkbox in lieu of the toggle-btn
  * "slider toggle". We need to make the toggle keyboard
  * focusable, however, which is not possible if it's
@@ -150,78 +117,51 @@ a.button {
   width: 0;
   pointer-events: none;
   position: absolute;
 }
 
 .toggle + .toggle-btn {
   box-sizing: border-box;
   cursor: pointer;
-  min-width: 60px;
-  height: 24px;
-  border-radius: 12px;
+  min-width: 42px;
+  height: 26px;
+  border-radius: 13px;
   background-color: var(--color-grey);
-  border: 1px var(--color-grey) solid;
-  padding: 2px;
+  padding: 1px;
 }
 
-.toggle + .toggle-btn::after,
-.toggle + .toggle-btn::before {
+.toggle + .toggle-btn::after {
   position: relative;
   display: block;
   content: "";
-  width: 19px;
+  width: 24px;
   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;
 }
 
-.toggle + .toggle-btn::before {
-  float: left;
-  left: 9px;
-  visibility: hidden;
-  background-size: 16px;
-  background-repeat: no-repeat;
-  background-color: transparent;
-  background-image: url("chrome://browser/skin/privatebrowsing/check.svg");
-}
-
 .toggle + .toggle-btn:dir(rtl)::after {
   left: auto;
   right: 0;
   transition-property: right;
 }
 
-.toggle + .toggle-btn:dir(rtl)::before {
-  float: right;
-  left: auto;
-  right: 9px;
-}
-
 .toggle:checked + .toggle-btn {
-  background: #3fc455;
-  border: 1px solid #269939;
+  background: #16da00;
 }
 
 .toggle:checked + .toggle-btn::after {
-  left: 35px;
+  left: 16px;
 }
 
 .toggle:checked + .toggle-btn:dir(rtl)::after {
-  right: 35px;
-}
-
-.toggle:checked + .toggle-btn::before {
-  visibility: visible;
+  left: auto;
+  right: 16px;
 }
 
 .toggle:-moz-focusring + .toggle-btn {
   outline: 2px solid rgba(0, 149, 221, 0.5);
   outline-offset: 1px;
   -moz-outline-radius: 2px;
 }
deleted file mode 100644
--- a/browser/themes/shared/privatebrowsing/check.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- 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/. -->
-
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-  <path fill="#fff" d="M30.057,9.752L15.9,23.909h0l-4.044,4.045-4.045-4.045h0l-6.068-6.067,4.045-4.045,6.068,6.067L26.012,5.707Z"/>
-</svg>
--- a/toolkit/themes/shared/in-content/info-pages.inc.css
+++ b/toolkit/themes/shared/in-content/info-pages.inc.css
@@ -4,20 +4,17 @@
 
 @import url("chrome://global/skin/in-content/common.css");
 /* Body and container */
 body {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   min-height: 100vh;
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-inline-start: calc(48px + 4.6em);
-  padding-inline-end: 48px;
+  padding: 0 48px;
   align-items: center;
   justify-content: center;
 }
 
 .container {
   min-width: 13em;
   max-width: 52em;
 }
@@ -32,35 +29,31 @@ body {
 /* Typography */
 .title {
   background-image: url("chrome://global/skin/icons/info.svg");
   background-position: left 0;
   background-repeat: no-repeat;
   background-size: 1.6em;
   margin-inline-start: -2.3em;
   padding-inline-start: 2.3em;
-  font-size: 2.5em;
+  font-size: 2.2em;
 }
 
 .title:-moz-locale-dir(rtl),
 .title:dir(rtl) {
   background-position: right 0;
 }
 
 .title-text {
   border-bottom: 1px solid #C1C1C1;
   font-size: inherit;
   padding-bottom: 0.4em;
 }
 
-@media (max-width: 675px) {
-  body {
-    padding: 0 48px;
-  }
-
+@media (max-width: 970px) {
   .title {
     background-image: none !important;
     padding-inline-start: 0;
     margin-inline-start: 0;
   }
 
   .title-text {
     padding-top: 0;