Bug 1259340 - New Private Browsing Window Update. r=past,Gijs
authorRicky Chien <rchien@mozilla.com>
Sun, 24 Apr 2016 15:52:58 +0300
changeset 332389 463fc6d36ff561f17a34f1688bd8c38833de8966
parent 332388 2df96c0510daa5f604256647090dba70d7670e40
child 332390 508c0bee76f7bd6a4fa3a35cd8a0edcedd4b262f
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspast, Gijs
bugs1259340
milestone48.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1259340 - New Private Browsing Window Update. r=past,Gijs MozReview-Commit-ID: 5NbLribECvC
browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
browser/components/privatebrowsing/content/aboutPrivateBrowsing.js
browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
browser/components/privatebrowsing/test/browser/browser_privatebrowsing_about.js
browser/components/privatebrowsing/test/browser/browser_privatebrowsing_windowtitle.js
browser/locales/en-US/chrome/browser/aboutPrivateBrowsing.dtd
browser/locales/en-US/chrome/browser/aboutPrivateBrowsing.properties
browser/themes/osx/jar.mn
browser/themes/shared/jar.inc.mn
browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
browser/themes/shared/privatebrowsing/check.svg
browser/themes/shared/privatebrowsing/favicon.svg
browser/themes/shared/privatebrowsing/mask.svg
browser/themes/shared/privatebrowsing/private-browsing.svg
browser/themes/shared/privatebrowsing/tracking-protection-off.svg
browser/themes/shared/privatebrowsing/tracking-protection.svg
browser/themes/windows/jar.mn
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
@@ -1,193 +1,10 @@
-/* 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/common.css");
-
-body {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-weight: 300;
-}
-
 body.private .showNormal,
 body.normal .showPrivate,
 body[tpEnabled] .showTpDisabled,
 body:not([tpEnabled]) .showTpEnabled {
   display: none !important;
 }
-body[globalTpEnabled] .showGlobalTpDisabled {
-  display: none !important;
-}
 
-@media screen and (min-width: 1200px) and (min-height: 700px) {
-  body.private {
-    font-size: 1.25em;
-  }
-}
-
-#bar {
-  align-self: stretch;
-  background: url("chrome://browser/skin/privatebrowsing/mask.svg") no-repeat 22px 50%,
-              #8d20ae;
-  background-size: 47px 26px;
-  padding-inline-start: 87px;
-  color: white;
-  font-size: 1.5em;
-  font-weight: 200;
-  line-height: 2.5em;
-}
-
-#bar:-moz-dir(rtl) {
-  background-position: right 22px top 50%;
-}
-
-#main {
-  padding: 0 2em;
-  flex: 1;
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-  justify-content: center;
-}
-
-.sectionHeader {
-  font-size: 1.75em;
-}
-
-/* PRIVATE BROWSING SECTION */
-
-#privateBrowsingSection {
-  margin: 1em;
-  padding: 0 1em;
-}
-
-ul {
-  margin: 0;
-  padding-inline-start: 8px;
-}
-
-li {
-  list-style: none;
-  padding-inline-start: 24px;
-  background-size: 16px 16px;
-  background-repeat: no-repeat;
-  background-position: 0 50%;
-}
-
-li:-moz-dir(rtl) {
-  background-position: 100% 50%;
-}
-
-#forgotten > li {
-  background-image: url("chrome://browser/skin/privatebrowsing/check.png");
-}
-
-#kept > li {
-  background-image: url("chrome://browser/skin/privatebrowsing/attention.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  #forgotten li {
-    background-image: url("chrome://browser/skin/privatebrowsing/check@2x.png");
-  }
-
-  #kept li {
-    background-image: url("chrome://browser/skin/privatebrowsing/attention@2x.png");
-  }
+.hide {
+  display: none;
 }
-
-#list-area {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-
-#list-area > div {
-  margin-inline-end: 3em;
-}
-
-.list-header {
-  margin-bottom: 0.4em;
-  font-weight: bold;
-}
-
-/* TRACKING PROTECTION SECTION */
-
-#trackingProtectionSection {
-  margin: 1em;
-  padding: 1em;
-  text-align: center;
-  border: lightgray 2px solid;
-  border-radius: 10px;
-}
-
-#tpEnabled,
-#tpDisabled {
-  display: inline-block;
-  margin-inline-start: 0.5em;
-  border-radius: 3px;
-  padding: 0.1em;
-  color: white;
-  font-size: 0.78em;
-  font-weight: bold;
-}
-
-#tpEnabled {
-  background-color: #6fbe4a;
-}
-
-#tpDisabled {
-  background-color: #c33b32;
-}
-
-#tpDiagram {
-  margin-left: auto;
-  margin-right: auto;
-  width: 145px;
-  height: 90px;
-  background: url("chrome://browser/skin/privatebrowsing/shield-page.png") no-repeat;
-  background-size: 145px 90px;
-}
-
-@media (min-resolution: 1.1dppx) {
-  #tpDiagram {
-    background-image: url("chrome://browser/skin/privatebrowsing/shield-page@2x.png");
-  }
-}
-
-#tpStartTour {
-  margin-bottom: 0;
-}
-
-#startTour {
-  display: block;
-  border-radius: 2px;
-  background-color: var(--in-content-primary-button-background);
-  color: var(--in-content-selected-text);
-  padding: 0.1em 0.3em;
-  line-height: 2.25em;
-  text-decoration: none;
-}
-
-#startTour:hover {
-  background-color: var(--in-content-primary-button-background-hover);
-}
-
-#startTour:hover:active {
-  background-color: var(--in-content-primary-button-background-active);
-}
-
-#startTour:-moz-focusring {
-  outline: 1px dotted var(--in-content-border-focus);
-}
-
-#enableTrackingProtection,
-#disableTrackingProtection {
-  font-size: 0.875em;
-  cursor: pointer;
-}
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.js
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.js
@@ -1,92 +1,99 @@
-/* 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/. */
-
-var {classes: Cc, interfaces: Ci, utils: Cu} = Components;
-
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/PrivateBrowsingUtils.jsm");
-Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-
-const FAVICON_QUESTION = "chrome://global/skin/icons/question-16.png";
-const FAVICON_PRIVACY = "chrome://browser/skin/Privacy-16.png";
-
-var stringBundle = Services.strings.createBundle(
-                     "chrome://browser/locale/aboutPrivateBrowsing.properties");
-
-var prefBranch = Services.prefs.getBranch("privacy.trackingprotection.");
-var prefObserver = {
-  QueryInterface: XPCOMUtils.generateQI([Ci.nsIObserver,
-                                         Ci.nsISupportsWeakReference]),
-  observe: function () {
-    if (prefBranch.getBoolPref("enabled")) {
-      document.body.setAttribute("globalTpEnabled", "true");
-    } else {
-      document.body.removeAttribute("globalTpEnabled");
-    }
-    if (prefBranch.getBoolPref("pbmode.enabled") ||
-        prefBranch.getBoolPref("enabled")) {
-      document.body.setAttribute("tpEnabled", "true");
-    } else {
-      document.body.removeAttribute("tpEnabled");
-    }
-  },
-};
-prefBranch.addObserver("pbmode.enabled", prefObserver, true);
-prefBranch.addObserver("enabled", prefObserver, true);
-
-function setFavIcon(url) {
-  document.getElementById("favicon").setAttribute("href", url);
-}
-
-document.addEventListener("DOMContentLoaded", function () {
-  if (!PrivateBrowsingUtils.isContentWindowPrivate(window)) {
-    document.body.setAttribute("class", "normal");
-    document.title = stringBundle.GetStringFromName("title.normal");
-    document.getElementById("favicon")
-            .setAttribute("href", FAVICON_QUESTION);
-    document.getElementById("startPrivateBrowsing")
-            .addEventListener("command", openPrivateWindow);
-    return;
-  }
-
-  document.title = stringBundle.GetStringFromName("title");
-  document.getElementById("favicon")
-          .setAttribute("href", FAVICON_PRIVACY);
-  document.getElementById("enableTrackingProtection")
-          .addEventListener("click", toggleTrackingProtection);
-  document.getElementById("disableTrackingProtection")
-          .addEventListener("click", toggleTrackingProtection);
-  document.getElementById("startTour")
-          .addEventListener("click", dontShowIntroPanelAgain);
-
-  let formatURLPref = Cc["@mozilla.org/toolkit/URLFormatterService;1"]
-                        .getService(Ci.nsIURLFormatter).formatURLPref;
-  document.getElementById("startTour").setAttribute("href",
-                     formatURLPref("privacy.trackingprotection.introURL"));
-  document.getElementById("learnMore").setAttribute("href",
-                     formatURLPref("app.support.baseURL") + "private-browsing");
-
-  // Update state that depends on preferences.
-  prefObserver.observe();
-}, false);
-
-function openPrivateWindow() {
-  // Ask chrome to open a private window
-  document.dispatchEvent(
-    new CustomEvent("AboutPrivateBrowsingOpenWindow", {bubbles:true}));
-}
-
-function toggleTrackingProtection() {
-  // Ask chrome to enable tracking protection
-  document.dispatchEvent(
-    new CustomEvent("AboutPrivateBrowsingToggleTrackingProtection",
-                    {bubbles:true}));
-}
-
-function dontShowIntroPanelAgain() {
-  // Ask chrome to disable the doorhanger
-  document.dispatchEvent(
-    new CustomEvent("AboutPrivateBrowsingDontShowIntroPanelAgain",
-                    {bubbles:true}));
-}
+/* 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/. */
+
+var {classes: Cc, interfaces: Ci, utils: Cu} = Components;
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/PrivateBrowsingUtils.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+const FAVICON_QUESTION = "chrome://global/skin/icons/question-32.png";
+const FAVICON_PRIVACY = "chrome://browser/skin/privatebrowsing/favicon.svg";
+
+var stringBundle = Services.strings.createBundle(
+                    "chrome://browser/locale/aboutPrivateBrowsing.properties");
+
+var prefBranch = Services.prefs.getBranch("privacy.trackingprotection.");
+var prefObserver = {
+ QueryInterface: XPCOMUtils.generateQI([Ci.nsIObserver,
+                                        Ci.nsISupportsWeakReference]),
+ observe: function () {
+   let tpSubHeader = document.getElementById("tpSubHeader");
+   let tpToggle = document.getElementById("tpToggle");
+   let tpButton = document.getElementById("tpButton");
+   let title = document.getElementById("title");
+   let titleTracking = document.getElementById("titleTracking");
+   let globalTrackingEnabled = prefBranch.getBoolPref("enabled");
+   let trackingEnabled = globalTrackingEnabled ||
+                         prefBranch.getBoolPref("pbmode.enabled");
+
+   tpButton.classList.toggle("hide", globalTrackingEnabled);
+   tpToggle.checked = trackingEnabled;
+   title.classList.toggle("hide", trackingEnabled);
+   titleTracking.classList.toggle("hide", !trackingEnabled);
+   tpSubHeader.classList.toggle("tp-off", !trackingEnabled);
+ }
+};
+prefBranch.addObserver("pbmode.enabled", prefObserver, true);
+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.title = stringBundle.GetStringFromName("title.normal");
+   document.getElementById("favicon")
+           .setAttribute("href", FAVICON_QUESTION);
+   document.getElementById("startPrivateBrowsing")
+           .addEventListener("command", openPrivateWindow);
+   return;
+ }
+
+ let tpToggle = document.getElementById("tpToggle");
+ document.getElementById("tpButton").addEventListener('click', () => {
+   tpToggle.checked = !tpToggle.checked;
+ });
+
+ document.title = stringBundle.GetStringFromName("title.head");
+ document.getElementById("favicon")
+         .setAttribute("href", FAVICON_PRIVACY);
+ document.getElementById("tpButton")
+         .addEventListener("click", toggleTrackingProtection);
+ document.getElementById("startTour")
+         .addEventListener("click", dontShowIntroPanelAgain);
+
+ let formatURLPref = Cc["@mozilla.org/toolkit/URLFormatterService;1"]
+                       .getService(Ci.nsIURLFormatter).formatURLPref;
+ document.getElementById("startTour").setAttribute("href",
+                    formatURLPref("privacy.trackingprotection.introURL"));
+ document.getElementById("learnMore").setAttribute("href",
+                    formatURLPref("app.support.baseURL") + "private-browsing");
+
+ // Update state that depends on preferences.
+ prefObserver.observe();
+}, false);
+
+function openPrivateWindow() {
+ // Ask chrome to open a private window
+ document.dispatchEvent(
+   new CustomEvent("AboutPrivateBrowsingOpenWindow", {bubbles:true}));
+}
+
+function toggleTrackingProtection() {
+ // Ask chrome to enable tracking protection
+ document.dispatchEvent(
+   new CustomEvent("AboutPrivateBrowsingToggleTrackingProtection",
+                   {bubbles: true}));
+}
+
+function dontShowIntroPanelAgain() {
+ // Ask chrome to disable the doorhanger
+ document.dispatchEvent(
+   new CustomEvent("AboutPrivateBrowsingDontShowIntroPanelAgain",
+                   {bubbles: true}));
+}
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
@@ -16,71 +16,77 @@
   <!ENTITY % aboutPrivateBrowsingDTD SYSTEM "chrome://browser/locale/aboutPrivateBrowsing.dtd">
   %aboutPrivateBrowsingDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <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">
     <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 id="bar" class="showPrivate">&privateBrowsing.title;</div>
-    <div id="main" class="showPrivate">
-      <div id="privateBrowsingSection"
-           style="width: &aboutPrivateBrowsing.width1;">
-        <div class="sectionHeader">&aboutPrivateBrowsing.title;</div>
-        <div id="list-area">
-          <div>
-            <p class="list-header">&aboutPrivateBrowsing.info.notsaved;</p>
-            <ul id="forgotten">
-              <li>&aboutPrivateBrowsing.info.history;</li>
-              <li>&aboutPrivateBrowsing.info.searches;</li>
-              <li>&aboutPrivateBrowsing.info.cookies;</li>
-              <li>&aboutPrivateBrowsing.info.temporaryFiles;</li>
-            </ul>
-          </div>
-          <div>
-            <p class="list-header">&aboutPrivateBrowsing.info.saved;</p>
-            <ul id="kept">
-              <li>&aboutPrivateBrowsing.info.downloads;</li>
-              <li>&aboutPrivateBrowsing.info.bookmarks;</li>
-            </ul>
-          </div>
+    <div class="showPrivate about-content-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>
+            <li>&aboutPrivateBrowsing.info.visited;</li>
+            <li>&aboutPrivateBrowsing.info.cookies;</li>
+            <li>&aboutPrivateBrowsing.info.searches;</li>
+            <li>&aboutPrivateBrowsing.info.temporaryFiles;</li>
+          </ul>
         </div>
-        <p>&aboutPrivateBrowsing.note1;</p>
-        <a id="learnMore" target="_blank">&aboutPrivateBrowsing.learnMore;</a>
-      </div>
-      <div id="trackingProtectionSection"
-           style="width: &trackingProtection.width1;">
-        <div class="sectionHeader">&trackingProtection.title;
-          <span id="tpEnabled"
-                style="width: &trackingProtection.state.width;"
-                class="showTpEnabled">&trackingProtection.state.enabled;</span>
-          <span id="tpDisabled"
-                style="width: &trackingProtection.state.width;"
-                class="showTpDisabled">&trackingProtection.state.disabled;</span>
+        <p>
+          &aboutPrivateBrowsing.info.saved.before;
+          <strong>&aboutPrivateBrowsing.info.saved.emphasize;</strong>
+          &aboutPrivateBrowsing.info.saved.after;
+        </p>
+        <div class="list-row">
+          <ul>
+            <li>&aboutPrivateBrowsing.info.bookmarks;</li>
+            <li>&aboutPrivateBrowsing.info.downloads;</li>
+          </ul>
         </div>
-        <p id="tpDiagram"/>
-        <p>&trackingProtection.description1;</p>
-        <!-- Use text links to implement plain styled buttons without an href. -->
-        <label xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-               id="disableTrackingProtection"
-               class="text-link showTpEnabled showGlobalTpDisabled"
-               value="&trackingProtection.disable;"/>
-        <label xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-               id="enableTrackingProtection"
-               class="text-link showTpDisabled showGlobalTpDisabled"
-               value="&trackingProtection.enable;"/>
-        <p id="tpStartTour"
-           class="showTpEnabled"><a id="startTour">&trackingProtection.startTour1;</a></p>
-      </div>
+        <p>
+          &aboutPrivateBrowsing.note.before;
+          <strong>&aboutPrivateBrowsing.note.emphasize;</strong>
+          &aboutPrivateBrowsing.note.after;
+        </p>
+      </section>
+
+      <h2 id="tpSubHeader" class="about-subheader">
+        <span class="tpTitle">&trackingProtection.title;</span>
+        <input id="tpToggle" class="toggle toggle-input" type="checkbox"/>
+        <span id="tpButton" class="toggle-btn"></span>
+      </h2>
+
+      <section class="section-main">
+        <p>&trackingProtection.description2;</p>
+        <p>
+          <a id="startTour" class="button">&trackingProtection.startTour1;</a>
+        </p>
+      </section>
+
+      <section class="section-main">
+        <p class="about-info">&aboutPrivateBrowsing.learnMore2;
+          <a id="learnMore" target="_blank">&aboutPrivateBrowsing.learnMore2.title;</a>.
+        </p>
+      </section>
+
     </div>
   </body>
 </html>
--- a/browser/components/privatebrowsing/test/browser/browser_privatebrowsing_about.js
+++ b/browser/components/privatebrowsing/test/browser/browser_privatebrowsing_about.js
@@ -94,22 +94,22 @@ add_task(function* test_toggleTrackingPr
         resolve();
       },
     };
     prefBranch.addObserver("enabled", prefObserver, false);
   });
 
   let promisePrefChanged = waitForPrefChanged();
   yield ContentTask.spawn(tab, {}, function* () {
-    content.document.getElementById("disableTrackingProtection").click();
+    content.document.getElementById("tpButton").click();
   });
   yield promisePrefChanged;
   ok(!prefBranch.getBoolPref("enabled"), "Tracking Protection is disabled.");
 
   promisePrefChanged = waitForPrefChanged();
   yield ContentTask.spawn(tab, {}, function* () {
-    content.document.getElementById("enableTrackingProtection").click();
+    content.document.getElementById("tpButton").click();
   });
   yield promisePrefChanged;
   ok(prefBranch.getBoolPref("enabled"), "Tracking Protection is enabled.");
 
   yield BrowserTestUtils.closeWindow(win);
 });
--- a/browser/components/privatebrowsing/test/browser/browser_privatebrowsing_windowtitle.js
+++ b/browser/components/privatebrowsing/test/browser/browser_privatebrowsing_windowtitle.js
@@ -21,25 +21,25 @@ add_task(function test() {
   let pb_page_without_title;
   let pb_about_pb_title;
   if (isOSX) {
     page_with_title = test_title;
     page_without_title = app_name;
     about_pb_title = "Open a private window?";
     pb_page_with_title = test_title + " - (Private Browsing)";
     pb_page_without_title = app_name + " - (Private Browsing)";
-    pb_about_pb_title = "You\u2019re browsing privately - (Private Browsing)";
+    pb_about_pb_title = "Private Browsing - (Private Browsing)";
   }
   else {
     page_with_title = test_title + " - " + app_name;
     page_without_title = app_name;
     about_pb_title = "Open a private window?" + " - " + app_name;
     pb_page_with_title = test_title + " - " + app_name + " (Private Browsing)";
     pb_page_without_title = app_name + " (Private Browsing)";
-    pb_about_pb_title = "You\u2019re browsing privately - " + app_name + " (Private Browsing)";
+    pb_about_pb_title = "Private Browsing - " + app_name + " (Private Browsing)";
   }
 
   function* testTabTitle(aWindow, url, insidePB, expected_title) {
     let tab = (yield BrowserTestUtils.openNewForegroundTab(aWindow.gBrowser));
     yield BrowserTestUtils.loadURI(tab.linkedBrowser, url);
     yield BrowserTestUtils.browserLoaded(tab.linkedBrowser);
 
     yield BrowserTestUtils.waitForCondition(() => {
--- a/browser/locales/en-US/chrome/browser/aboutPrivateBrowsing.dtd
+++ b/browser/locales/en-US/chrome/browser/aboutPrivateBrowsing.dtd
@@ -1,55 +1,31 @@
 <!-- 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/. -->
 
-<!ENTITY aboutPrivateBrowsing.notPrivate       "You are currently not in a private window.">
-<!ENTITY privatebrowsingpage.openPrivateWindow.label "Open a Private Window">
+<!ENTITY aboutPrivateBrowsing.notPrivate                 "You are currently not in a private window.">
+<!ENTITY privatebrowsingpage.openPrivateWindow.label     "Open a Private Window">
 <!ENTITY privatebrowsingpage.openPrivateWindow.accesskey "P">
 
-<!ENTITY privateBrowsing.title                 "Private Browsing">
-
-<!-- LOCALIZATION NOTE (aboutPrivateBrowsing.width1):
-     Width of the Private Browsing section. This should depend primarily on the
-     length of the headers and text, but should be roughly 1.5 times the width
-     of the Tracking Protection section, and in general not much larger than
-     30em to prevent the sections from wrapping on smaller window sizes.
-     -->
-<!ENTITY aboutPrivateBrowsing.width1           "30em">
-<!ENTITY aboutPrivateBrowsing.title            "You’re browsing privately">
-
-<!ENTITY aboutPrivateBrowsing.info.notsaved    "Not Saved">
-<!ENTITY aboutPrivateBrowsing.info.history     "History">
-<!ENTITY aboutPrivateBrowsing.info.searches    "Searches">
-<!ENTITY aboutPrivateBrowsing.info.cookies     "Cookies">
-<!ENTITY aboutPrivateBrowsing.info.temporaryFiles "Temporary Files">
-
-<!ENTITY aboutPrivateBrowsing.info.saved       "Saved">
-<!ENTITY aboutPrivateBrowsing.info.downloads   "Downloads">
-<!ENTITY aboutPrivateBrowsing.info.bookmarks   "Bookmarks">
-
-<!ENTITY aboutPrivateBrowsing.note1            "Please note that your employer or Internet service provider can still track the pages you visit.">
-<!ENTITY aboutPrivateBrowsing.learnMore        "Learn More.">
+<!ENTITY privateBrowsing.title                           "Private Browsing">
+<!ENTITY privateBrowsing.title.tracking                  "Private Browsing with Tracking Protection">
+<!ENTITY aboutPrivateBrowsing.info.notsaved.before       "When you browse in a Private Window, Firefox ">
+<!ENTITY aboutPrivateBrowsing.info.notsaved.emphasize    "does not save">
+<!ENTITY aboutPrivateBrowsing.info.notsaved.after        ":">
+<!ENTITY aboutPrivateBrowsing.info.visited               "visited pages">
+<!ENTITY aboutPrivateBrowsing.info.searches              "searches">
+<!ENTITY aboutPrivateBrowsing.info.cookies               "cookies">
+<!ENTITY aboutPrivateBrowsing.info.temporaryFiles        "temporary files">
+<!ENTITY aboutPrivateBrowsing.info.saved.before          "Firefox ">
+<!ENTITY aboutPrivateBrowsing.info.saved.emphasize       "will save">
+<!ENTITY aboutPrivateBrowsing.info.saved.after           "your:">
+<!ENTITY aboutPrivateBrowsing.info.downloads             "downloads">
+<!ENTITY aboutPrivateBrowsing.info.bookmarks             "bookmarks">
+<!ENTITY aboutPrivateBrowsing.note.before                "Private Browsing ">
+<!ENTITY aboutPrivateBrowsing.note.emphasize             "doesn’t make you anonymous">
+<!ENTITY aboutPrivateBrowsing.note.after                 " on the Internet. Your employer or Internet service provider can still know what page you visit.">
+<!ENTITY aboutPrivateBrowsing.learnMore2                 "Learn more about">
+<!ENTITY aboutPrivateBrowsing.learnMore2.title           "Private Browsing">
 
-<!-- LOCALIZATION NOTE (trackingProtection.width1):
-     Width of the Tracking Protection section. It is fine for the enabled or
-     disabled indicator or the words in the title to wrap to the next line, but
-     you can expand or reduce this section to fit better, as long as the width
-     of the Private Browsing section is roughly 1.5 times the width of this one.
-     Note that the required space may vary between platforms because fonts are
-     different, so testing on Windows, Mac, and Linux is encouraged.
-     -->
-<!ENTITY trackingProtection.width1             "22em">
-<!ENTITY trackingProtection.title              "Tracking Protection">
-
-<!-- LOCALIZATION NOTE (trackingProtection.state.width):
-     Width of the element representing the enabled or disabled indicator.
-     -->
-<!ENTITY trackingProtection.state.width        "6ch">
-<!ENTITY trackingProtection.state.enabled      "ON">
-<!ENTITY trackingProtection.state.disabled     "OFF">
-
-<!ENTITY trackingProtection.description1       "Private windows now block parts of the page that may track your browsing activity.">
-
-<!ENTITY trackingProtection.disable            "Turn Tracking Protection Off">
-<!ENTITY trackingProtection.enable             "Turn Tracking Protection On">
-<!ENTITY trackingProtection.startTour1         "See how this works">
+<!ENTITY trackingProtection.title                        "Tracking Protection">
+<!ENTITY trackingProtection.description2                 "Some websites use trackers that can monitor your activity across the Internet. With Tracking Protection Firefox will block many trackers that can collect information about your browsing behavior.">
+<!ENTITY trackingProtection.startTour1                   "See how it works">
--- a/browser/locales/en-US/chrome/browser/aboutPrivateBrowsing.properties
+++ b/browser/locales/en-US/chrome/browser/aboutPrivateBrowsing.properties
@@ -1,6 +1,6 @@
 # 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/.
 
-title=You’re browsing privately
+title.head=Private Browsing
 title.normal=Open a private window?
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -44,17 +44,16 @@ browser.jar:
   skin/classic/browser/panel-plus-sign.png
   skin/classic/browser/page-livemarks.png
   skin/classic/browser/page-livemarks@2x.png
   skin/classic/browser/pageInfo.css
   skin/classic/browser/pointerLock-16.png
   skin/classic/browser/pointerLock-16@2x.png
   skin/classic/browser/pointerLock-64.png
   skin/classic/browser/pointerLock-64@2x.png
-  skin/classic/browser/Privacy-16.png
   skin/classic/browser/privatebrowsing-mask.png
   skin/classic/browser/privatebrowsing-mask@2x.png
   skin/classic/browser/privatebrowsing-mask-short.png
   skin/classic/browser/privatebrowsing-mask-short@2x.png
   skin/classic/browser/reload-stop-go.png
   skin/classic/browser/reload-stop-go@2x.png
   skin/classic/browser/searchbar.css
   skin/classic/browser/slowStartup-16.png
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -153,23 +153,22 @@
   skin/classic/browser/webRTC-microphone-white-16.png          (../shared/webrtc/microphone-white-16.png)
   skin/classic/browser/webRTC-screen-white-16.png              (../shared/webrtc/screen-white-16.png)
   skin/classic/browser/panic-panel/header.png                  (../shared/panic-panel/header.png)
   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/privatebrowsing/attention.png           (../shared/privatebrowsing/attention.png)
-  skin/classic/browser/privatebrowsing/attention@2x.png        (../shared/privatebrowsing/attention@2x.png)
-  skin/classic/browser/privatebrowsing/check.png               (../shared/privatebrowsing/check.png)
-  skin/classic/browser/privatebrowsing/check@2x.png            (../shared/privatebrowsing/check@2x.png)
-  skin/classic/browser/privatebrowsing/mask.svg                (../shared/privatebrowsing/mask.svg)
-  skin/classic/browser/privatebrowsing/shield-page.png         (../shared/privatebrowsing/shield-page.png)
-  skin/classic/browser/privatebrowsing/shield-page@2x.png      (../shared/privatebrowsing/shield-page@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/devedition/urlbar-history-dropmarker.svg (../shared/devedition/urlbar-history-dropmarker.svg)
   skin/classic/browser/devedition/urlbar-arrow.png             (../shared/devedition/urlbar-arrow.png)
   skin/classic/browser/devedition/urlbar-arrow@2x.png          (../shared/devedition/urlbar-arrow@2x.png)
   skin/classic/browser/urlbar-star.svg                         (../shared/urlbar-star.svg)
   skin/classic/browser/urlbar-tab.svg                          (../shared/urlbar-tab.svg)
   skin/classic/browser/usercontext/personal.svg                (../shared/usercontext/personal.svg)
   skin/classic/browser/usercontext/work.svg                    (../shared/usercontext/work.svg)
   skin/classic/browser/usercontext/banking.svg                 (../shared/usercontext/banking.svg)
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css
@@ -0,0 +1,186 @@
+/* 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;
+}
+
+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 {
+  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;
+}
+
+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;
+  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);
+}
+
+.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");
+}
+
+.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;
+  border: 1px solid #43256a;
+  border-radius: 4px;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.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;
+  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;
+}
+
+.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:checked + .toggle-btn {
+  background: #3fc455;
+  border: 1px solid #269939;
+}
+
+.toggle:checked + .toggle-btn::after {
+  left: 35px;
+}
+
+.toggle:checked + .toggle-btn::before {
+  visibility: visible;
+}
+
+.toggle:-moz-focusring + .toggle-btn {
+  outline: 2px solid rgba(0, 149, 221, 0.5);
+  outline-offset: 1px;
+  -moz-outline-radius: 2px;
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/privatebrowsing/check.svg
@@ -0,0 +1,8 @@
+<?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>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/privatebrowsing/favicon.svg
@@ -0,0 +1,11 @@
+<?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="16" height="16" viewBox="0 0 16 16">
+  <circle cx="8" cy="8" r="8" fill="#8d20ae" />
+  <circle cx="8" cy="8" r="7.5" stroke="#7b149a" stroke-width="1" fill="none" />
+  <path d="M11.309,10.995C10.061,10.995,9.2,9.5,8,9.5s-2.135,1.5-3.309,1.5c-1.541,0-2.678-1.455-2.7-3.948C1.983,5.5,2.446,5.005,4.446,5.005S7.031,5.822,8,5.822s1.555-.817,3.555-0.817S14.017,5.5,14.006,7.047C13.987,9.54,12.85,10.995,11.309,10.995ZM5.426,6.911a1.739,1.739,0,0,0-1.716.953A2.049,2.049,0,0,0,5.3,8.544c0.788,0,1.716-.288,1.716-0.544A1.428,1.428,0,0,0,5.426,6.911Zm5.148,0A1.429,1.429,0,0,0,8.981,8c0,0.257.928,0.544,1.716,0.544a2.049,2.049,0,0,0,1.593-.681A1.739,1.739,0,0,0,10.574,6.911Z" stroke="#670c83" stroke-width="2" fill="none" />
+  <path d="M11.309,10.995C10.061,10.995,9.2,9.5,8,9.5s-2.135,1.5-3.309,1.5c-1.541,0-2.678-1.455-2.7-3.948C1.983,5.5,2.446,5.005,4.446,5.005S7.031,5.822,8,5.822s1.555-.817,3.555-0.817S14.017,5.5,14.006,7.047C13.987,9.54,12.85,10.995,11.309,10.995ZM5.426,6.911a1.739,1.739,0,0,0-1.716.953A2.049,2.049,0,0,0,5.3,8.544c0.788,0,1.716-.288,1.716-0.544A1.428,1.428,0,0,0,5.426,6.911Zm5.148,0A1.429,1.429,0,0,0,8.981,8c0,0.257.928,0.544,1.716,0.544a2.049,2.049,0,0,0,1.593-.681A1.739,1.739,0,0,0,10.574,6.911Z" fill="#fff" />
+</svg>
deleted file mode 100755
--- a/browser/themes/shared/privatebrowsing/mask.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" xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="47.203" height="26.109" viewBox="0 0 94.407 52.219">
-  <path fill="#fff" d="M92.657,14.670 C92.270,21.197 93.816,28.994 85.124,40.236 C75.849,52.230 66.639,51.314 64.901,51.495 C54.468,52.578 53.093,43.491 46.999,43.491 C41.664,43.491 37.317,52.520 29.481,51.495 C27.749,51.268 18.533,52.230 9.259,40.236 C0.567,28.994 2.112,21.197 1.726,14.670 C1.340,8.142 -0.012,1.071 -0.012,1.071 C-0.012,1.071 4.176,5.241 9.585,5.604 C14.993,5.967 16.004,3.740 27.416,0.527 C39.755,-2.947 47.191,11.290 47.191,11.290 C47.191,11.290 55.571,-2.737 66.967,0.527 C78.363,3.791 78.836,5.967 84.245,5.604 C89.653,5.241 94.395,1.071 94.395,1.071 C94.395,1.071 93.043,8.142 92.657,14.670 ZM28.858,17.405 C22.113,15.942 19.283,18.441 16.393,19.507 C13.872,20.437 11.577,20.726 11.577,20.726 C11.577,20.726 11.963,24.533 18.724,27.797 C25.484,31.061 39.352,29.377 39.352,29.377 C39.352,29.377 40.824,20.000 28.858,17.405 ZM77.990,19.507 C75.100,18.441 72.270,15.942 65.525,17.405 C53.557,20.000 55.030,29.377 55.030,29.377 C55.030,29.377 68.899,31.061 75.659,27.797 C82.419,24.533 82.805,20.726 82.805,20.726 C82.805,20.726 80.511,20.437 77.990,19.507 Z"/>
-</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/privatebrowsing/private-browsing.svg
@@ -0,0 +1,12 @@
+<?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="64" height="64" viewBox="0 0 64 64">
+  <ellipse cx="32" cy="34" rx="29.5" ry="30" fill="#000" fill-opacity=".1" />
+  <circle cx="32" cy="32" r="30" fill="#8d20ae" />
+  <circle cx="32" cy="32" r="29.5" stroke="#7b149a" stroke-width="1" fill="none" />
+  <path d="M45.225,43c-4.989,0-8.44-5.5-13.224-5.5S23.468,43,18.776,43C12.62,43,8.074,37.656,8,28.5,7.954,22.815,9.805,21,17.8,21S28.128,24,32,24s6.214-3,14.2-3,9.842,1.815,9.8,7.5C55.926,37.656,51.381,43,45.225,43ZM21.714,28c-4.857.193-6.857,2.846-6.857,3.5s3.22,2.5,6.367,2.5,6.857-1.057,6.857-2C28.082,30.948,26.3,27.818,21.714,28Zm20.572,0c-4.583-.182-6.367,2.948-6.367,4,0,0.943,3.709,2,6.857,2s6.367-1.846,6.367-2.5S47.143,28.193,42.286,28Z" stroke="#670c83" stroke-width="2" fill="none" />
+  <path d="M45.225,43c-4.989,0-8.44-5.5-13.224-5.5S23.468,43,18.776,43C12.62,43,8.074,37.656,8,28.5,7.954,22.815,9.805,21,17.8,21S28.128,24,32,24s6.214-3,14.2-3,9.842,1.815,9.8,7.5C55.926,37.656,51.381,43,45.225,43ZM21.714,28c-4.857.193-6.857,2.846-6.857,3.5s3.22,2.5,6.367,2.5,6.857-1.057,6.857-2C28.082,30.948,26.3,27.818,21.714,28Zm20.572,0c-4.583-.182-6.367,2.948-6.367,4,0,0.943,3.709,2,6.857,2s6.367-1.846,6.367-2.5S47.143,28.193,42.286,28Z" fill="#fff" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/privatebrowsing/tracking-protection-off.svg
@@ -0,0 +1,15 @@
+<?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" viewBox="0 0 32 32">
+  <g fill="#ccc">
+    <path d="M28.8,0.3l-2.4,2.4L16.1,1.1L4.9,2.9c-1,0.2-1.8,1-1.8,2c0,2.5,0,6.9,0.3,8.7c0.4,4.3,1.2,6.9,2.7,9.4l-3.5,3.5l2,2
+      L30.8,2.3L28.8,0.3z M5.3,13.5c-0.2-1.9-0.2-6.2-0.2-8.6c0,0,0,0,0.1,0l10.9-1.8l8.6,1.4L16.1,13V5L7.2,6.6c-0.1,0-0.1,0-0.1,0
+      c0,2,0,5.6,0.2,7.1c0.3,3,0.8,4.9,1.6,6.5l-1.4,1.4C6.3,19.6,5.6,17.3,5.3,13.5z"/>
+    <path d="M16.1,20.3l-3.9,3.9c1.7,1.2,3.4,1.6,3.9,1.7V20.3z"/>
+    <path d="M26.9,13.4c-0.5,5.6-1.7,8-3.8,10.7c-2.4,3.1-6.1,3.9-7,4.1c-0.7-0.2-3.2-0.7-5.4-2.5L9.3,27c3.1,2.7,6.7,3,6.7,3
+      s5.2-0.5,8.6-4.9c2.5-3.2,3.6-5.9,4.2-11.6c0.1-1.3,0.2-4,0.2-6.3l-2,2C27,10.9,27,12.5,26.9,13.4z"/>
+  </g>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/privatebrowsing/tracking-protection.svg
@@ -0,0 +1,12 @@
+<?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" viewBox="0 0 32 32">
+  <path fill="#ccc" d="M27.2,2.8L16,1L4.8,2.8C3.8,3,3,3.8,3,4.8c0,2.5,0,6.9,0.3,8.7C3.8,19,5,21.8,7.5,25.1C10.8,29.5,16,30,16,30
+    s5.2-0.5,8.6-4.9c2.5-3.2,3.6-5.9,4.2-11.6C29,11.7,29,7.2,29,4.8C29,3.8,28.2,3,27.2,2.8z M26.8,13.3L26.8,13.3L26.8,13.3
+    c-0.5,5.6-1.7,8-3.8,10.7c-2.4,3.1-6.1,3.9-7,4.1c-0.9-0.2-4.6-1-7-4.1c-2.1-2.8-3.3-5.2-3.8-10.6l0,0l0,0C5,11.5,5,7.2,5,4.8
+    c0,0,0,0,0.1,0l0,0l0,0L16,3l10.8,1.8l0,0l0,0c0.1,0,0.1,0,0.1,0C27,7,27,11.5,26.8,13.3z M7.1,6.5L7.1,6.5L7.1,6.5
+    C7,6.5,7,6.5,7.1,6.5C7,8.5,7,12.1,7.2,13.6l0,0l0,0c0.4,4.5,1.4,6.5,3.1,8.9c2,2.6,5,3.3,5.7,3.4v-21L7.1,6.5z"/>
+</svg>
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -46,18 +46,16 @@ browser.jar:
   skin/classic/browser/menuPanel-small-aero@2x.png
   skin/classic/browser/monitor.png
   skin/classic/browser/monitor_16-10.png
   skin/classic/browser/pageInfo.css
   skin/classic/browser/pageInfo.png
   skin/classic/browser/pageInfo-XP.png
   skin/classic/browser/pointerLock-16.png
   skin/classic/browser/pointerLock-64.png
-  skin/classic/browser/Privacy-16.png
-  skin/classic/browser/Privacy-16-XP.png
   skin/classic/browser/privatebrowsing-mask-tabstrip.png
   skin/classic/browser/privatebrowsing-mask-tabstrip-XPVista7.png
   skin/classic/browser/privatebrowsing-mask-titlebar.png
   skin/classic/browser/privatebrowsing-mask-titlebar-XPVista7.png
   skin/classic/browser/privatebrowsing-mask-titlebar-XPVista7-tall.png
   skin/classic/browser/reload-stop-go.png
   skin/classic/browser/reload-stop-go@2x.png
   skin/classic/browser/reload-stop-go-XPVista7.png
@@ -239,17 +237,16 @@ browser.jar:
 % override chrome://browser/skin/aboutSessionRestore-window-icon.png  chrome://browser/skin/preferences/application.png                 os!=WINNT
 % override chrome://browser/skin/aboutSessionRestore-window-icon.png  chrome://browser/skin/preferences/application.png                 os=WINNT osversion<6
 
 % override chrome://browser/skin/Info.png                             chrome://browser/skin/Info-XP.png                                 os=WINNT osversion<6
 % override chrome://browser/skin/livemark-folder.png                  chrome://browser/skin/livemark-folder-XP.png                      os=WINNT osversion<6
 % override chrome://browser/skin/menu-back.png                        chrome://browser/skin/menu-back-XP.png                            os=WINNT osversion<6
 % override chrome://browser/skin/menu-forward.png                     chrome://browser/skin/menu-forward-XP.png                         os=WINNT osversion<6
 % override chrome://browser/skin/pageInfo.png                         chrome://browser/skin/pageInfo-XP.png                             os=WINNT osversion<6
-% override chrome://browser/skin/Privacy-16.png                       chrome://browser/skin/Privacy-16-XP.png                           os=WINNT osversion<6
 % override chrome://browser/skin/downloads/buttons.png                chrome://browser/skin/downloads/buttons-XP.png                    os=WINNT osversion<6
 % override chrome://browser/skin/feeds/feedIcon.png                   chrome://browser/skin/feeds/feedIcon-XP.png                       os=WINNT osversion<6
 % override chrome://browser/skin/feeds/feedIcon16.png                 chrome://browser/skin/feeds/feedIcon16-XP.png                     os=WINNT osversion<6
 % override chrome://browser/skin/places/query.png                     chrome://browser/skin/places/query-XP.png                         os=WINNT osversion<6
 % override chrome://browser/skin/places/bookmarksMenu.png             chrome://browser/skin/places/bookmarksMenu-XP.png                 os=WINNT osversion<6
 % override chrome://browser/skin/places/bookmarksToolbar.png          chrome://browser/skin/places/bookmarksToolbar-XP.png              os=WINNT osversion<6
 % override chrome://browser/skin/places/bookmarksToolbar-menuPanel.png  chrome://browser/skin/places/bookmarksToolbar-menuPanel-XP.png  os=WINNT osversion<6
 % override chrome://browser/skin/places/calendar.png                  chrome://browser/skin/places/calendar-XP.png                      os=WINNT osversion<6