Bug 1567522 - Show info message in the Protection panel. r=nhnt11
authorAndrei Oprea <andrei.br92@gmail.com>
Wed, 07 Aug 2019 17:57:48 +0000
changeset 486825 9bd101d575f3cd5a23ab763fca2c21fa9633ef75
parent 486824 3a4e01e2d89aaba9e2155f440026ba8666db6ed1
child 486826 6ff6e514f5966efb9f7c9b8c2fc93373204af278
push id91975
push usernhnt11@gmail.com
push dateWed, 07 Aug 2019 20:42:13 +0000
treeherderautoland@9bd101d575f3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnhnt11
bugs1567522
milestone70.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 1567522 - Show info message in the Protection panel. r=nhnt11 Differential Revision: https://phabricator.services.mozilla.com/D39042
browser/app/profile/firefox.js
browser/base/content/browser-siteProtections.js
browser/base/content/browser.xhtml
browser/components/controlcenter/content/protectionsPanel.inc.xul
browser/components/newtab/lib/OnboardingMessageProvider.jsm
browser/components/newtab/lib/ToolbarPanelHub.jsm
browser/themes/shared/controlcenter/hero-message-background.svg
browser/themes/shared/controlcenter/panel.inc.css
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/jar.inc.mn
browser/themes/shared/places/editBookmarkPanel.inc.css
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1609,16 +1609,17 @@ pref("browser.contentblocking.reportBrea
 pref("browser.contentblocking.report.lockwise.enabled", true);
 
 // Enable Protections report's Monitor card by default.
 pref("browser.contentblocking.report.monitor.enabled", true);
 
 // Enables the new Protections Panel.
 #ifdef NIGHTLY_BUILD
 pref("browser.protections_panel.enabled", true);
+pref("browser.protections_panel.infoMessage.seen", false);
 #endif
 
 // Always enable newtab segregation using containers
 pref("privacy.usercontext.about_newtab_segregation.enabled", true);
 // Enable Contextual Identity Containers
 #ifdef NIGHTLY_BUILD
 pref("privacy.userContext.enabled", true);
 pref("privacy.userContext.ui.enabled", true);
--- a/browser/base/content/browser-siteProtections.js
+++ b/browser/base/content/browser-siteProtections.js
@@ -1,19 +1,19 @@
 /* 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/. */
 
 /* eslint-env mozilla/browser-window */
 
-ChromeUtils.defineModuleGetter(
-  this,
-  "ContentBlockingAllowList",
-  "resource://gre/modules/ContentBlockingAllowList.jsm"
-);
+XPCOMUtils.defineLazyModuleGetters(this, {
+  ContentBlockingAllowList:
+    "resource://gre/modules/ContentBlockingAllowList.jsm",
+  ToolbarPanelHub: "resource://activity-stream/lib/ToolbarPanelHub.jsm",
+});
 
 XPCOMUtils.defineLazyServiceGetter(
   this,
   "TrackingDBService",
   "@mozilla.org/tracking-db-service;1",
   "nsITrackingDBService"
 );
 
@@ -1496,16 +1496,27 @@ var gProtectionsHandler = {
     }
 
     this.showProtectionsPopup({ event });
   },
 
   onPopupShown(event) {
     if (event.target == this._protectionsPopup) {
       window.addEventListener("focus", this, true);
+
+      // Add the "open" attribute to the tracking protection icon container
+      // for styling.
+      gIdentityHandler._trackingProtectionIconContainer.setAttribute(
+        "open",
+        "true"
+      );
+
+      // Insert the info message if needed. This will be shown once and then
+      // remain collapsed.
+      ToolbarPanelHub.insertProtectionPanelMessage(event);
     }
   },
 
   onPopupHidden(event) {
     if (event.target == this._protectionsPopup) {
       window.removeEventListener("focus", this, true);
       gIdentityHandler._trackingProtectionIconContainer.removeAttribute("open");
 
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -263,17 +263,17 @@
            type="arrow"
            orient="vertical"
            ignorekeys="true"
            hidden="true"
            tabspecific="true"
            aria-labelledby="editBookmarkPanelTitle">
       <box class="panel-header">
         <label id="editBookmarkPanelTitle"/>
-        <toolbarbutton id="editBookmarkPanelInfoButton" oncommand="StarUI.toggleRecommendation();" >
+        <toolbarbutton id="editBookmarkPanelInfoButton" class="panel-info-button" oncommand="StarUI.toggleRecommendation();" >
           <image/>
         </toolbarbutton>
       </box>
       <html:div id="editBookmarkPanelInfoArea">
         <html:div id="editBookmarkPanelRecommendation"></html:div>
         <html:div id="editBookmarkPanelFaviconContainer">
           <html:img id="editBookmarkPanelFavicon"/>
         </html:div>
--- a/browser/components/controlcenter/content/protectionsPanel.inc.xul
+++ b/browser/components/controlcenter/content/protectionsPanel.inc.xul
@@ -12,24 +12,32 @@
        onpopuphidden="gProtectionsHandler.onPopupHidden(event);"
        orient="vertical">
 
   <panelmultiview id="protections-popup-multiView"
                   mainViewId="protections-popup-mainView">
     <panelview id="protections-popup-mainView"
                descriptionheightworkaround="true">
       <hbox id="protections-popup-mainView-panel-header"
+            flex="1"
             onclick="gProtectionsHandler.onHeaderClicked(event);">
-        <label id="protections-popup-main-header-label">
+        <label id="protections-popup-main-header-label" flex="1">
           <html:span id="protections-popup-mainView-panel-header-span"/>
         </label>
+        <toolbarbutton id="protections-popup-info-button" class="panel-info-button">
+          <image/>
+        </toolbarbutton>
         <description id="protections-popup-toast-panel-tp-on-desc">&protections.etpON.header;</description>
         <description id="protections-popup-toast-panel-tp-off-desc">&protections.etpOFF.header;</description>
       </hbox>
 
+      <html:div id="messaging-system-message-container" disabled="true">
+        <!-- Messaging System Messages will render in this container -->
+      </html:div>
+
       <hbox id="protections-popup-tp-switch-section" class="protections-popup-section">
         <vbox class="protections-popup-tp-switch-label-box" flex="1">
           <label class="protections-popup-tp-switch-on-header">&protections.etpON.header;</label>
           <label class="protections-popup-tp-switch-off-header">&protections.etpOFF.header;</label>
           <label id="protections-popup-tp-switch-breakage-link"
                  class="text-link"
                  onclick="gProtectionsHandler.showSiteNotWorkingView();">&protections.siteNotWorking.label;</label>
         </vbox>
--- a/browser/components/newtab/lib/OnboardingMessageProvider.jsm
+++ b/browser/components/newtab/lib/OnboardingMessageProvider.jsm
@@ -385,16 +385,30 @@ const ONBOARDING_MESSAGES = () => [
     content: {
       delay: 10000, // delay for 10 seconds
       target: "fxa-toolbar-menu-button",
     },
     // Never accessed the FxA panel && doesn't use Firefox sync & has FxA enabled
     targeting: `isFxABadgeEnabled && !hasAccessedFxAPanel && !usesFirefoxSync && isFxAEnabled == true`,
     trigger: { id: "toolbarBadgeUpdate" },
   },
+  {
+    id: "PROTECTIONS_PANEL_1",
+    template: "protections_panel",
+    content: {
+      title: "Browse without being followed",
+      body:
+        "Keep your data to yourself. Firefox protects you from many of the most common trackers that follow what you do online.",
+      link_text: "Learn more",
+      cta_url: `${Services.urlFormatter.formatURLPref(
+        "app.support.baseURL"
+      )}etp-promotions?as=u&utm_source=inproduct`,
+    },
+    trigger: { id: "protectionsPanelOpen" },
+  },
 ];
 
 const OnboardingMessageProvider = {
   async getExtraAttributes() {
     const [header, button_label] = await L10N.formatMessages([
       { id: "onboarding-welcome-header" },
       { id: "onboarding-start-browsing-button-label" },
     ]);
--- a/browser/components/newtab/lib/ToolbarPanelHub.jsm
+++ b/browser/components/newtab/lib/ToolbarPanelHub.jsm
@@ -15,45 +15,59 @@ ChromeUtils.defineModuleGetter(
 );
 ChromeUtils.defineModuleGetter(
   this,
   "PrivateBrowsingUtils",
   "resource://gre/modules/PrivateBrowsingUtils.jsm"
 );
 
 const WHATSNEW_ENABLED_PREF = "browser.messaging-system.whatsNewPanel.enabled";
+const PROTECTIONS_PANEL_INFOMSG_PREF =
+  "browser.protections_panel.infoMessage.seen";
 
 const TOOLBAR_BUTTON_ID = "whats-new-menu-button";
 const APPMENU_BUTTON_ID = "appMenu-whatsnew-button";
 const PANEL_HEADER_SELECTOR = "#PanelUI-whatsNew-title > label";
 
 const BUTTON_STRING_ID = "cfr-whatsnew-button";
 
 class _ToolbarPanelHub {
   constructor() {
     this.triggerId = "whatsNewPanelOpened";
     this._showAppmenuButton = this._showAppmenuButton.bind(this);
     this._hideAppmenuButton = this._hideAppmenuButton.bind(this);
     this._showToolbarButton = this._showToolbarButton.bind(this);
     this._hideToolbarButton = this._hideToolbarButton.bind(this);
+    this.insertProtectionPanelMessage = this.insertProtectionPanelMessage.bind(
+      this
+    );
+
+    this.state = null;
   }
 
   async init(waitForInitialized, { getMessages, dispatch }) {
     this._getMessages = getMessages;
     this._dispatch = dispatch;
     // Wait for ASRouter messages to become available in order to know
     // if we can show the What's New panel
     await waitForInitialized;
     if (this.whatsNewPanelEnabled) {
       // Enable the application menu button so that the user can access
       // the panel outside of the toolbar button
       this.enableAppmenuButton();
     }
     // Listen for pref changes that could turn off the feature
     Services.prefs.addObserver(WHATSNEW_ENABLED_PREF, this);
+
+    this.state = {
+      protectionPanelMessageSeen: Services.prefs.getBoolPref(
+        PROTECTIONS_PANEL_INFOMSG_PREF,
+        false
+      ),
+    };
   }
 
   uninit() {
     EveryWindow.unregisterCallback(TOOLBAR_BUTTON_ID);
     EveryWindow.unregisterCallback(APPMENU_BUTTON_ID);
     Services.prefs.removeObserver(WHATSNEW_ENABLED_PREF, this);
   }
 
@@ -217,16 +231,52 @@ class _ToolbarPanelHub {
       linkEl.classList.add("text-link");
       this._setString(doc, linkEl, content.link_text);
       wrapperEl.appendChild(linkEl);
     }
 
     return messageEl;
   }
 
+  _createHeroElement(win, doc, content) {
+    const messageEl = this._createElement(doc, "div");
+    messageEl.setAttribute("id", "protections-popup-message");
+    messageEl.classList.add("whatsNew-hero-message");
+    const wrapperEl = this._createElement(doc, "div");
+    wrapperEl.classList.add("whatsNew-message-body");
+    messageEl.appendChild(wrapperEl);
+    wrapperEl.addEventListener("click", () => {
+      win.ownerGlobal.openLinkIn(content.cta_url, "tabshifted", {
+        private: false,
+        relatedToCurrent: true,
+        triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal(
+          {}
+        ),
+        csp: null,
+      });
+    });
+    const titleEl = this._createElement(doc, "h2");
+    titleEl.classList.add("whatsNew-message-title");
+    this._setString(doc, titleEl, content.title);
+    wrapperEl.appendChild(titleEl);
+
+    const bodyEl = this._createElement(doc, "p");
+    this._setString(doc, bodyEl, content.body);
+    wrapperEl.appendChild(bodyEl);
+
+    if (content.link_text) {
+      const linkEl = this._createElement(doc, "button");
+      linkEl.classList.add("text-link");
+      this._setString(doc, linkEl, content.link_text);
+      wrapperEl.appendChild(linkEl);
+    }
+
+    return messageEl;
+  }
+
   _createElement(doc, elem) {
     return doc.createElementNS("http://www.w3.org/1999/xhtml", elem);
   }
 
   _createDateElement(doc, date) {
     const dateEl = this._createElement(doc, "p");
     dateEl.classList.add("whatsNew-message-date");
     dateEl.textContent = new Date(date).toLocaleDateString("default", {
@@ -315,16 +365,74 @@ class _ToolbarPanelHub {
       this._sendTelemetry({
         message_id: message.id,
         bucket_id: message.id,
         event,
         value: options.value,
       });
     }
   }
+
+  /**
+   * Inserts a message into the Protections Panel. The message is visible once
+   * and afterwards set in a collapsed state. It can be shown again using the
+   * info button in the panel header.
+   */
+  async insertProtectionPanelMessage(event) {
+    const win = event.target.ownerGlobal;
+    const doc = event.target.ownerDocument;
+    const container = doc.getElementById("messaging-system-message-container");
+    const infoButton = doc.getElementById("protections-popup-info-button");
+    const panelContainer = doc.getElementById("protections-popup");
+    const toggleMessage = () => {
+      container.toggleAttribute("disabled");
+      infoButton.toggleAttribute("checked");
+    };
+    if (!container.childElementCount) {
+      const message = await this._getMessages({
+        template: "protections_panel",
+        triggerId: "protectionsPanelOpen",
+      });
+      if (message) {
+        const messageEl = this._createHeroElement(win, doc, message.content);
+        container.appendChild(messageEl);
+        infoButton.addEventListener("click", toggleMessage);
+        this.sendUserEventTelemetry(win, "IMPRESSION", message.id);
+      }
+    }
+    // Message is collapsed by default. If it was never shown before we want
+    // to expand it
+    if (
+      !this.state.protectionPanelMessageSeen &&
+      container.hasAttribute("disabled")
+    ) {
+      toggleMessage();
+    }
+    // Save state that we displayed the message
+    if (!this.state.protectionPanelMessageSeen) {
+      Services.prefs.setBoolPref(PROTECTIONS_PANEL_INFOMSG_PREF, true);
+      this.state.protectionPanelMessageSeen = true;
+    }
+    // Collapse the message after the panel is hidden so we don't get the
+    // animation when opening the panel
+    panelContainer.addEventListener(
+      "popuphidden",
+      () => {
+        if (
+          this.state.protectionPanelMessageSeen &&
+          !container.hasAttribute("disabled")
+        ) {
+          toggleMessage();
+        }
+      },
+      {
+        once: true,
+      }
+    );
+  }
 }
 
 this._ToolbarPanelHub = _ToolbarPanelHub;
 
 /**
  * ToolbarPanelHub - singleton instance of _ToolbarPanelHub that can initiate
  * message requests and render messages.
  */
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/controlcenter/hero-message-background.svg
@@ -0,0 +1,4 @@
+<!-- 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 1939.83 2586.1"><defs><style>.cls-1{fill:none;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}.cls-4{clip-path:url(#clip-path);}.cls-5{clip-path:url(#clip-path-2);}.cls-6{fill:url(#linear-gradient-4);}.cls-7{clip-path:url(#clip-path-3);}.cls-8{fill:url(#linear-gradient-6);}.cls-9{fill:#fff;}</style><linearGradient id="linear-gradient" x1="-167.55" y1="2429.02" x2="2107.02" y2="154.45" gradientUnits="userSpaceOnUse"><stop offset="0.61" stop-color="#0250bb"/><stop offset="0.68" stop-color="#1f52c9"/><stop offset="0.9" stop-color="#7057f0"/><stop offset="1" stop-color="#9059ff"/></linearGradient><linearGradient id="linear-gradient-2" x1="928.94" y1="1298.65" x2="1905.79" y2="321.81" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0250bb"/><stop offset="0.03" stop-color="#0850be"/><stop offset="0.5" stop-color="#5155e1"/><stop offset="0.83" stop-color="#7e58f7"/><stop offset="1" stop-color="#9059ff"/></linearGradient><clipPath id="clip-path"><rect class="cls-1" x="-3" y="-9.28" width="1947.47" height="2602.02"/></clipPath><clipPath id="clip-path-2"><rect class="cls-2" x="-5" y="-9.28" width="1949.47" height="2602.02" rx="2"/></clipPath><linearGradient id="linear-gradient-4" x1="532.39" y1="1368.82" x2="1393.32" y2="746.86" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0250bb"/><stop offset="0.14" stop-color="#0850be"/><stop offset="0.32" stop-color="#1851c6"/><stop offset="0.52" stop-color="#3353d2"/><stop offset="0.74" stop-color="#5955e4"/><stop offset="0.97" stop-color="#8859fb"/><stop offset="1" stop-color="#9059ff"/></linearGradient><clipPath id="clip-path-3"><path class="cls-3" d="M965.44,1007.23a3.76,3.76,0,0,1,3.17,0,4.56,4.56,0,0,1,2.42,2.86c8.93,17.77,23.59,44.9,36.36,58.92,3,3.26.61,9-3.43,8.53a72.68,72.68,0,0,1-15.24-3.53c7.74,13.6,16.29,27.27,24.5,37.57,15.12-21.61,30.29-46.47,44.37-71.22a180.32,180.32,0,0,1-37.93,8.79c-10.07,1.28-16-13.12-8.56-21.25,31.79-34.9,68.31-102.45,90.54-146.71a11.39,11.39,0,0,1,6-7.11,9.31,9.31,0,0,1,7.9,0,11.37,11.37,0,0,1,6,7.11c22.23,44.26,58.75,111.81,90.54,146.71,7.4,8.13,1.51,22.53-8.56,21.25a180.32,180.32,0,0,1-37.93-8.79c23.13,40.68,49.23,81.67,73.2,108,9.37,10.29,1.91,28.52-10.83,26.9a249.19,249.19,0,0,1-26.83-4.85c11.17,18.32,22.64,36,34.06,52.12,26.48-32.16,54.4-76.58,79.5-120.71a222.9,222.9,0,0,1-46.82,10.86c-12.42,1.58-19.7-16.21-10.56-26.23,39.24-43.08,84.3-126.45,111.75-181.06a14,14,0,0,1,7.43-8.78,11.35,11.35,0,0,1,9.75,0,14,14,0,0,1,7.43,8.78c27.44,54.61,72.5,138,111.74,181.06,9.14,10,1.87,27.81-10.56,26.23a222.81,222.81,0,0,1-46.81-10.86c17.73,31.19,36.88,62.52,55.93,89.57,10.94-17.67,21.24-37.17,28.74-52.1a6.6,6.6,0,0,1,3.49-4.11,5.28,5.28,0,0,1,4.57,0,6.56,6.56,0,0,1,3.48,4.11c6.82,13.57,16,30.93,25.79,47.25,20.75-32.55,40.62-70,54.73-98.09a11.35,11.35,0,0,1,6-7.12,9.31,9.31,0,0,1,7.9,0,11.35,11.35,0,0,1,6,7.12c9.52,19,21.67,42.18,34.94,65.28,19.37-25.08,39.39-57.24,57.57-89.22a180.81,180.81,0,0,1-37.93,8.79c-10.07,1.28-16-13.12-8.56-21.25,31.8-34.9,68.31-102.45,90.55-146.71a11.33,11.33,0,0,1,6-7.11,9.21,9.21,0,0,1,7.9,0,11.33,11.33,0,0,1,6,7.11c22.23,44.26,58.75,111.81,90.54,146.71,7.41,8.13,1.51,22.53-8.56,21.25a181,181,0,0,1-37.93-8.79c18.82,33.09,39.6,66.38,59.6,91.82a587.65,587.65,0,0,0,153.76-397.16c0-325.73-264-589.78-589.78-589.78S879.11,433.42,879.11,759.15a587.22,587.22,0,0,0,69.45,277.9c5.5-9.52,10.54-19.15,14.46-27A4.56,4.56,0,0,1,965.44,1007.23Z"/></clipPath><linearGradient id="linear-gradient-6" x1="752.66" y1="1412.73" x2="2016.06" y2="149.32" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0090ed"/><stop offset="0.09" stop-color="#2084f1"/><stop offset="0.2" stop-color="#4277f5"/><stop offset="0.33" stop-color="#5e6cf9"/><stop offset="0.46" stop-color="#7464fc"/><stop offset="0.6" stop-color="#845efd"/><stop offset="0.77" stop-color="#8d5aff"/><stop offset="1" stop-color="#9059ff"/></linearGradient></defs><title>whats-new_vertical-no-shoes-clip</title><g class="cls-4"><rect class="cls-2" x="-5" y="-9.28" width="1949.47" height="2602.02" rx="2"/><g class="cls-5"><g id="Layer_3" data-name="Layer 3"><path class="cls-6" d="M1168.4,743.43c0,41.38-33.55,75.34-74.93,75.34H792.29c-31.58,0-57.18-26-57.18-57.6s25.6-57.59,57.18-57.59a57.5,57.5,0,0,1,13.79,1.74,59.18,59.18,0,0,1,57.76-72.72A59,59,0,0,1,897.35,643a99.67,99.67,0,0,1,196.12,25.1C1134.85,668.08,1168.4,702.05,1168.4,743.43ZM2079.58,569a86.09,86.09,0,0,0-20.7,2.52,89.41,89.41,0,0,0-137.65-93.86,150.22,150.22,0,0,0-295.59,37.84,113.06,113.06,0,0,0,0,226.11h454a86.31,86.31,0,0,0,0-172.61Z"/></g><path class="cls-3" d="M965.44,1007.23a3.76,3.76,0,0,1,3.17,0,4.56,4.56,0,0,1,2.42,2.86c8.93,17.77,23.59,44.9,36.36,58.92,3,3.26.61,9-3.43,8.53a72.68,72.68,0,0,1-15.24-3.53c7.74,13.6,16.29,27.27,24.5,37.57,15.12-21.61,30.29-46.47,44.37-71.22a180.32,180.32,0,0,1-37.93,8.79c-10.07,1.28-16-13.12-8.56-21.25,31.79-34.9,68.31-102.45,90.54-146.71a11.39,11.39,0,0,1,6-7.11,9.31,9.31,0,0,1,7.9,0,11.37,11.37,0,0,1,6,7.11c22.23,44.26,58.75,111.81,90.54,146.71,7.4,8.13,1.51,22.53-8.56,21.25a180.32,180.32,0,0,1-37.93-8.79c23.13,40.68,49.23,81.67,73.2,108,9.37,10.29,1.91,28.52-10.83,26.9a249.19,249.19,0,0,1-26.83-4.85c11.17,18.32,22.64,36,34.06,52.12,26.48-32.16,54.4-76.58,79.5-120.71a222.9,222.9,0,0,1-46.82,10.86c-12.42,1.58-19.7-16.21-10.56-26.23,39.24-43.08,84.3-126.45,111.75-181.06a14,14,0,0,1,7.43-8.78,11.35,11.35,0,0,1,9.75,0,14,14,0,0,1,7.43,8.78c27.44,54.61,72.5,138,111.74,181.06,9.14,10,1.87,27.81-10.56,26.23a222.81,222.81,0,0,1-46.81-10.86c17.73,31.19,36.88,62.52,55.93,89.57,10.94-17.67,21.24-37.17,28.74-52.1a6.6,6.6,0,0,1,3.49-4.11,5.28,5.28,0,0,1,4.57,0,6.56,6.56,0,0,1,3.48,4.11c6.82,13.57,16,30.93,25.79,47.25,20.75-32.55,40.62-70,54.73-98.09a11.35,11.35,0,0,1,6-7.12,9.31,9.31,0,0,1,7.9,0,11.35,11.35,0,0,1,6,7.12c9.52,19,21.67,42.18,34.94,65.28,19.37-25.08,39.39-57.24,57.57-89.22a180.81,180.81,0,0,1-37.93,8.79c-10.07,1.28-16-13.12-8.56-21.25,31.8-34.9,68.31-102.45,90.55-146.71a11.33,11.33,0,0,1,6-7.11,9.21,9.21,0,0,1,7.9,0,11.33,11.33,0,0,1,6,7.11c22.23,44.26,58.75,111.81,90.54,146.71,7.41,8.13,1.51,22.53-8.56,21.25a181,181,0,0,1-37.93-8.79c18.82,33.09,39.6,66.38,59.6,91.82a587.65,587.65,0,0,0,153.76-397.16c0-325.73-264-589.78-589.78-589.78S879.11,433.42,879.11,759.15a587.22,587.22,0,0,0,69.45,277.9c5.5-9.52,10.54-19.15,14.46-27A4.56,4.56,0,0,1,965.44,1007.23Z"/><g class="cls-7"><g id="Layer_3-2" data-name="Layer 3"><path class="cls-8" d="M1168.42,744.43c0,41.38-33.55,75.34-74.93,75.34H792.31c-31.58,0-57.18-26-57.18-57.6s25.6-57.59,57.18-57.59a57.43,57.43,0,0,1,13.79,1.74,59.18,59.18,0,0,1,57.76-72.72A59,59,0,0,1,897.37,644a99.67,99.67,0,0,1,196.13,25.1C1134.88,669.08,1168.42,703.05,1168.42,744.43ZM2079.61,570a86.24,86.24,0,0,0-20.71,2.52,89.41,89.41,0,0,0-137.64-93.86,150.22,150.22,0,0,0-295.6,37.84,113.06,113.06,0,0,0,0,226.11h454a86.31,86.31,0,0,0,0-172.61Z"/></g></g><path class="cls-9" d="M1687.17,564.36a37,37,0,0,0-30.45-36.66l-187.83-32.25L1281.07,527.7a37,37,0,0,0-30.45,36.66c-.12,44.17.16,123,3.31,157.71,9.2,101,27.5,151,70.08,208.87,57.85,78.63,144.88,88.43,144.88,88.43s87-9.8,144.89-88.43c42.58-57.88,60.89-107.9,70.08-208.87C1687,687.39,1687.29,608.53,1687.17,564.36Zm-46.79,153.75c-9.1,99.95-27.17,139.92-61.77,187-38.55,52.4-93,66.78-109.64,70.07-16.44-3.34-71.49-18-109.79-70.07-34.6-47-52.67-87-61.77-187-2.14-23.51-3.28-77.42-3.14-148.38l174.62-30,174.63,30C1643.66,640.67,1642.52,694.58,1640.38,718.11Z"/><path class="cls-9" d="M1362.63,712.14c8.44,92.69,24.26,120.06,49.31,154.11,18,24.5,41.59,36,56.91,41.17l0,0V606.2l-109,18.7C1360.32,666,1361.26,697.16,1362.63,712.14Z"/></g></g></svg>
\ No newline at end of file
--- a/browser/themes/shared/controlcenter/panel.inc.css
+++ b/browser/themes/shared/controlcenter/panel.inc.css
@@ -250,16 +250,20 @@
 }
 
 #protections-popup-mainView-panel-header-span,
 #protections-popup-toast-panel-tp-on-desc,
 #protections-popup-toast-panel-tp-off-desc {
   max-width: calc(var(--popup-width) - 2em);
 }
 
+#protections-popup[toast] #protections-popup-info-button {
+  display: none;
+}
+
 #identity-popup-permissions-content > description,
 #protections-popup-content > description {
   color: var(--panel-disabled-color);
 }
 
 /* This element needs the pre-wrap because we add newlines to it in the code. */
 #identity-popup-content-supplemental {
   white-space: pre-wrap;
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1100,32 +1100,42 @@ panelview .toolbarbutton-1,
   margin-inline-end: 0 !important; /* to override menu.css on Windows */
 }
 
 .subviewbutton[shortcut]::after {
   content: attr(shortcut);
   float: right;
 }
 
-.PanelUI-subView .subviewbutton-nav::after {
+.PanelUI-subView .subviewbutton-nav::after,
+#protections-popup-message button::after {
   -moz-context-properties: fill, fill-opacity;
   content: url(chrome://browser/skin/back-12.svg);
   fill: currentColor;
   fill-opacity: 0.6;
   float: right;
   transform: translateY(1px);
 }
 
+#protections-popup-message button::after {
+  transform: scale(1.5) translateY(1px);
+}
+
 .PanelUI-subView .subviewbutton-nav:-moz-locale-dir(ltr)::after {
   transform: scaleX(-1) translateY(1px);
 }
 
+#protections-popup-message button:-moz-locale-dir(ltr)::after {
+  transform: scaleX(-1) translateY(1px) scale(1.5);
+}
+
 .subviewbutton[shortcut]::after,
 .subviewbutton[shortcut]::after,
-.PanelUI-subView .subviewbutton-nav::after {
+.PanelUI-subView .subviewbutton-nav::after,
+#protections-popup-message button::after {
   margin-inline-start: 10px;
 }
 
 .subviewbutton[type="highlight-bookmark"]::after {
   content: url("chrome://browser/skin/bookmark-hollow.svg");
 }
 
 .subviewbutton[type="highlight-history"]::after {
@@ -1786,16 +1796,53 @@ toolbarpaletteitem[place="menu-panel"] >
   min-width: @menuPanelWidth@;
   max-width: @menuPanelWidth@;
 }
 
 #PanelUI-whatsNew-content {
   padding: 0 10px;
 }
 
+#protections-popup-main-header-label {
+  margin-inline-start: 30px;
+  text-align: center;
+}
+
+#protections-popup #messaging-system-message-container {
+  height: 260px;
+  overflow: hidden;
+  transition: height .25s;
+}
+
+#protections-popup #messaging-system-message-container[disabled] {
+  height: 0;
+}
+
+#protections-popup #messaging-system-message-container[disabled] #protections-popup-message {
+  /* height + margins */
+  transform: translateY(calc(-100% - 10px));
+}
+
+#protections-popup-message {
+  display: flex;
+  align-items: flex-end;
+  transition: transform .25s;
+}
+
+#protections-popup-message.whatsNew-hero-message {
+  background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg);
+  background-color: #0250BB;
+  background-repeat: no-repeat;
+  background-position: right;
+  height: calc(100% - 20px);
+  margin: 10px;
+  border-radius: 4px;
+  color: white;
+}
+
 #customizationui-widget-multiview #PanelUI-whatsNew-content {
   height: 586px;
 }
 
 #PanelUI-whatsNew-title {
   display: none;
 }
 
@@ -1817,43 +1864,50 @@ toolbarpaletteitem[place="menu-panel"] >
   opacity: 0.6;
   padding: 0 6px;
 }
 
 #PanelUI-whatsNew .whatsNew-message-body {
   padding: 6px;
 }
 
+#protections-popup-message .whatsNew-message-body {
+  margin: 0 10px 20px;
+}
+
 #PanelUI-whatsNew .whatsNew-message-body.has-icon {
   padding-inline-end: 46px;
   position: relative;
 }
 
 #PanelUI-whatsNew .whatsNew-message-icon {
   inset-inline-end: 6px;
   height: 32px;
   position: absolute;
   top: 10px;
   width: 32px;
 }
 
-#PanelUI-whatsNew .whatsNew-message-title {
+#PanelUI-whatsNew .whatsNew-message-title,
+#protections-popup-message .whatsNew-message-title {
   font-size: 17px;
   font-weight: 600;
   line-height: 24px;
   margin: 2px 0;
 }
 
-#PanelUI-whatsNew  .whatsNew-message-body p {
+#PanelUI-whatsNew .whatsNew-message-body p,
+#protections-popup-message .whatsNew-message-body p {
   font-size: 13px;
   line-height: 18px;
   margin: 0;
 }
 
-#PanelUI-whatsNew button {
+#PanelUI-whatsNew button,
+#protections-popup-message button {
   background: none;
   border: 0;
   color: #45a1ff;
   cursor: pointer;
   font-size: 12px;
   margin-top: 16px;
   padding: 0;
 }
@@ -1861,8 +1915,14 @@ toolbarpaletteitem[place="menu-panel"] >
 #PanelUI-whatsNew button:hover {
   color: #0a84ff;
   text-decoration: underline;
 }
 
 #PanelUI-whatsNew button:active {
   color: #0060df;
 }
+
+#protections-popup-message button {
+  color: white;
+  width: 100%;
+  text-align: end;
+}
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -36,16 +36,17 @@
   skin/classic/browser/controlcenter/info.svg                  (../shared/controlcenter/info.svg)
   skin/classic/browser/controlcenter/socialblock.svg           (../shared/controlcenter/socialblock.svg)
   skin/classic/browser/controlcenter/socialblock-disabled.svg  (../shared/controlcenter/socialblock-disabled.svg)
   skin/classic/browser/controlcenter/tracker-image.svg         (../shared/controlcenter/tracker-image.svg)
   skin/classic/browser/controlcenter/trackers.svg              (../shared/controlcenter/trackers.svg)
   skin/classic/browser/controlcenter/trackers-disabled.svg     (../shared/controlcenter/trackers-disabled.svg)
   skin/classic/browser/controlcenter/tracking-protection.svg   (../shared/controlcenter/tracking-protection.svg)
   skin/classic/browser/controlcenter/warning.svg               (../shared/controlcenter/warning.svg)
+  skin/classic/browser/controlcenter/hero-message-background.svg   (../shared/controlcenter/hero-message-background.svg)
   skin/classic/browser/customizableui/empty-overflow-panel.png     (../shared/customizableui/empty-overflow-panel.png)
   skin/classic/browser/customizableui/empty-overflow-panel@2x.png  (../shared/customizableui/empty-overflow-panel@2x.png)
   skin/classic/browser/customizableui/density-compact.svg      (../shared/customizableui/density-compact.svg)
   skin/classic/browser/customizableui/density-normal.svg       (../shared/customizableui/density-normal.svg)
   skin/classic/browser/customizableui/density-touch.svg        (../shared/customizableui/density-touch.svg)
   skin/classic/browser/customizableui/menu-arrow.svg           (../shared/customizableui/menu-arrow.svg)
   skin/classic/browser/customizableui/whimsy.png               (../shared/customizableui/whimsy.png)
   skin/classic/browser/downloads/contentAreaDownloadsView.css  (../shared/downloads/contentAreaDownloadsView.css)
--- a/browser/themes/shared/places/editBookmarkPanel.inc.css
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@@ -3,34 +3,34 @@
  * 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/. */
 %endif
 
 #editBookmarkPanelTitle {
   margin-inline-start: 32px;
 }
 
-#editBookmarkPanelInfoButton {
+.panel-info-button {
   border-radius: var(--toolbarbutton-border-radius);
   margin-right: 4px;
 }
 
-#editBookmarkPanelInfoButton[disabled=true] {
+.panel-info-button[disabled=true] {
   visibility: hidden;
 }
 
-#editBookmarkPanelInfoButton[checked] {
+.panel-info-button[checked] {
   background-color: var(--toolbarbutton-active-background);
 }
 
-#editBookmarkPanelInfoButton:hover {
+.panel-info-button:hover {
   background-color: var(--toolbarbutton-hover-background);
 }
 
-#editBookmarkPanelInfoButton > image {
+.panel-info-button > image {
   list-style-image: url(chrome://browser/skin/identity-icon.svg);
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: var(--toolbarbutton-icon-fill-opacity);
   padding: 2px;
 }
 
 #editBookmarkPanelInfoArea {