Bug 1773715 - Add a new private browsing indicator with label. r=Gijs,fluent-reviewers

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

browser/app/profile/firefox.js

@@ -630,6 +630,9 @@ pref("browser.search.separatePrivateDefault.ui.banner.max", 0);
 // Enables the display of the Mozilla VPN banner in private browsing windows
 pref("browser.privatebrowsing.vpnpromourl", "https://vpn.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-%CHANNEL%-browser&utm_campaign=private-browsing-vpn-link");
 
+// Enables the new private browsing indicator.
+pref("browser.privatebrowsing.enable-new-indicator", false);
+
 // Whether the user is opted-in to privacy segmentation.
 pref("browser.privacySegmentation.enabled", false);
 

browser/base/content/browser.js

@@ -537,6 +537,13 @@ XPCOMUtils.defineLazyPreferenceGetter(
   true
 );
 
+XPCOMUtils.defineLazyPreferenceGetter(
+  this,
+  "gPrivateBrowsingNewIndicatorEnabled",
+  "browser.privatebrowsing.enable-new-indicator",
+  false
+);
+
 customElements.setElementCreationCallback("translation-notification", () => {
   Services.scriptloader.loadSubScript(
     "chrome://browser/content/translation-notification.js",
@@ -8573,6 +8580,13 @@ var gPrivateBrowsingUI = {
       "privatebrowsingmode",
       PrivateBrowsingUtils.permanentPrivateBrowsing ? "permanent" : "temporary"
     );
+    // If enabled, show the new private browsing indicator with label.
+    // This will hide the old indicator.
+    docElement.toggleAttribute(
+      "privatebrowsingnewindicator",
+      gPrivateBrowsingNewIndicatorEnabled
+    );
+
     gBrowser.updateTitlebar();
 
     if (PrivateBrowsingUtils.permanentPrivateBrowsing) {

browser/base/content/navigator-toolbox.inc.xhtml

@@ -94,6 +94,10 @@
       <button class="accessibility-indicator" data-l10n-id="navbar-accessibility-indicator"
               aria-live="polite"/>
       <hbox class="private-browsing-indicator"/>
+      <hbox id="private-browsing-indicator-with-label">
+        <image class="private-browsing-indicator-icon"/>
+        <label data-l10n-id="private-browsing-indicator-label"></label>
+      </hbox>
 
 #include titlebar-items.inc.xhtml
 

browser/locales/en-US/browser/browser.ftl

@@ -838,3 +838,6 @@ data-reporting-notification-message = { -brand-short-name } automatically sends
 data-reporting-notification-button =
     .label = Choose What I Share
     .accesskey = C
+
+# Label for the indicator shown in the private browsing window titlebar.
+private-browsing-indicator-label = Private browsing

browser/themes/shared/browser-shared.css

@@ -344,8 +344,24 @@ menupopup::part(drop-indicator) {
   background-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
 }
 
+/* New Private Browsing Indicator */
+
+#private-browsing-indicator-with-label {
+  -moz-box-align: center;
+  margin-inline: 7px;
+}
+
+.private-browsing-indicator-icon {
+  list-style-image: url("chrome://global/skin/icons/indicator-private-browsing.svg");
+  width: 16px;
+  height: 16px;
+}
+
 :root:not([accessibilitymode]) .accessibility-indicator,
-:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {
+:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator,
+:root[privatebrowsingnewindicator] .private-browsing-indicator,
+:root:not([privatebrowsingnewindicator]) #private-browsing-indicator-with-label,
+:root:not([privatebrowsingmode=temporary]) #private-browsing-indicator-with-label {
   display: none;
 }