Bug 1783235 - Update about:privatebrowsing logos. r=Gijs,desktop-theme-reviewers,Itiel

Differential Revision: https://phabricator.services.mozilla.com/D153779

browser/app/profile/firefox.js

@@ -646,6 +646,9 @@ pref("browser.privatebrowsing.vpnpromourl", "https://vpn.mozilla.org/?utm_source
 // Enables the new private browsing indicator.
 pref("browser.privatebrowsing.enable-new-indicator", false);
 
+// Enables the new about:privatebrowsing logo.
+pref("browser.privatebrowsing.enable-new-logo", false);
+
 // Whether the user is opted-in to privacy segmentation.
 pref("browser.privacySegmentation.enabled", false);
 

browser/branding/aurora/content/jar.mn

@@ -8,6 +8,8 @@ browser.jar:
   content/branding/about-logo.png
   content/branding/about-logo.svg
   content/branding/about-logo@2x.png
+  content/branding/about-logo-private.png
+  content/branding/about-logo-private@2x.png
   content/branding/about-wordmark.svg
   content/branding/firefox-wordmark.svg
   content/branding/icon16.png                    (../default16.png)

browser/branding/nightly/content/jar.mn

@@ -8,6 +8,8 @@ browser.jar:
   content/branding/about-logo.png
   content/branding/about-logo.svg
   content/branding/about-logo@2x.png
+  content/branding/about-logo-private.png
+  content/branding/about-logo-private@2x.png
   content/branding/about-wordmark.svg
   content/branding/firefox-wordmark.svg
   content/branding/icon16.png                    (../default16.png)

browser/branding/official/content/jar.mn

@@ -8,6 +8,8 @@ browser.jar:
   content/branding/about-logo.png
   content/branding/about-logo.svg
   content/branding/about-logo@2x.png
+  content/branding/about-logo-private.png
+  content/branding/about-logo-private@2x.png
   content/branding/about-wordmark.svg
   content/branding/firefox-wordmark.svg
   content/branding/icon16.png                    (../default16.png)

browser/branding/unofficial/content/jar.mn

@@ -9,6 +9,8 @@ browser.jar:
   content/branding/about-logo.svg
   content/branding/about-logo@2x.png
   content/branding/about-wordmark.svg
+  content/branding/about-logo-private.png
+  content/branding/about-logo-private@2x.png
   content/branding/firefox-wordmark.svg
   content/branding/icon16.png                    (../default16.png)
   content/branding/icon32.png                    (../default32.png)

browser/components/privatebrowsing/content/aboutPrivateBrowsing.html

@@ -43,7 +43,7 @@
     </div>
     <div class="showPrivate showSearch container">
       <div class="logo-and-wordmark">
-        <div class="logo"></div>
+        <div id="about-private-browsing-logo" class="logo"></div>
         <div class="wordmark"></div>
       </div>
       <div class="search-inner-wrapper">

browser/components/privatebrowsing/content/aboutPrivateBrowsing.js

@@ -277,6 +277,15 @@ document.addEventListener("DOMContentLoaded", function() {
     return;
   }
 
+  let newLogoEnabled = RPMGetBoolPref(
+    "browser.privatebrowsing.enable-new-logo",
+    false
+  );
+
+  document
+    .getElementById("about-private-browsing-logo")
+    .toggleAttribute("legacy", !newLogoEnabled);
+
   // We don't do this setup until now, because we don't want to record any impressions until we're
   // sure we're actually running a private window, not just about:privatebrowsing in a normal window.
   setupMessageConfig();

browser/themes/shared/privatebrowsing/aboutPrivateBrowsing.css

@@ -57,15 +57,26 @@ p {
 }
 
 .logo {
-  background: url("chrome://branding/content/about-logo.png") no-repeat center center;
+  /* The new private browsing logo, shown for
+  "browser.privatebrowsing.enable-new-logo" == true */
+  background: url("chrome://branding/content/about-logo-private.png") no-repeat center center;
   background-size: 96px;
   display: inline-block;
   height: 96px;
   width: 96px;
 }
 
+.logo[legacy] {
+  /* The legacy private browsing logo, shown for
+  "browser.privatebrowsing.enable-new-logo" == false */
+  background-image: url("chrome://branding/content/about-logo.png");
+}
+
 @media (min-resolution: 2x) {
   .logo {
+    background-image: url('chrome://branding/content/about-logo-private@2x.png');
+  }
+  .logo[legacy] {
     background-image: url('chrome://branding/content/about-logo@2x.png');
   }
 }

toolkit/modules/RemotePageAccessManager.jsm

@@ -143,6 +143,7 @@ let RemotePageAccessManager = {
         "browser.privatebrowsing.vpnpromourl",
       ],
       RPMIsWindowPrivate: ["*"],
+      RPMGetBoolPref: ["browser.privatebrowsing.enable-new-logo"],
     },
     "about:protections": {
       RPMSendAsyncMessage: [