Bug 1599138 - UI update and pref toggle for Whats New Panel r=andreio,fluent-reviewers,flod

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

browser/components/customizableui/content/panelUI.inc.xhtml

@@ -962,6 +962,12 @@
           </html:div>
         </toolbaritem>
       </vbox>
+      <toolbarbutton class="subviewbutton panel-subview-footer" 
+                     onclick="ToolbarPanelHub.toggleWhatsNewPref(event)">
+        <checkbox id="panelMenu-toggleWhatsNew"
+                  class="panelMenu-toggleWhatsNew-checkbox"
+                  data-l10n-id="cfr-whatsnew-panel-footer-checkbox"/>
+      </toolbarbutton>
     </panelview>
   </panelmultiview>
 </panel>

browser/components/newtab/lib/ToolbarPanelHub.jsm

@@ -10,6 +10,7 @@ XPCOMUtils.defineLazyModuleGetters(this, {
   Services: "resource://gre/modules/Services.jsm",
   EveryWindow: "resource:///modules/EveryWindow.jsm",
   PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.jsm",
+  Preferences: "resource://gre/modules/Preferences.jsm",
 });
 XPCOMUtils.defineLazyServiceGetter(
   this,
@@ -57,11 +58,9 @@ class _ToolbarPanelHub {
     // 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();
-    }
+    // 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);
 
@@ -75,7 +74,6 @@ class _ToolbarPanelHub {
 
   uninit() {
     EveryWindow.unregisterCallback(TOOLBAR_BUTTON_ID);
-    EveryWindow.unregisterCallback(APPMENU_BUTTON_ID);
     Services.prefs.removeObserver(WHATSNEW_ENABLED_PREF, this);
   }
 
@@ -101,6 +99,16 @@ class _ToolbarPanelHub {
     return Services.prefs.getBoolPref(WHATSNEW_ENABLED_PREF, false);
   }
 
+  toggleWhatsNewPref(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    const [checkbox] = event.target.getElementsByTagName("checkbox");
+    const value = checkbox.checked;
+
+    checkbox.checked = !value;
+    Preferences.set(WHATSNEW_ENABLED_PREF, !value);
+  }
+
   maybeInsertFTL(win) {
     win.MozXULElement.insertFTLIfNeeded("browser/newtab/asrouter.ftl");
     win.MozXULElement.insertFTLIfNeeded("browser/branding/brandings.ftl");
@@ -178,6 +186,12 @@ class _ToolbarPanelHub {
 
   // Render what's new messages into the panel.
   async renderMessages(win, doc, containerId, options = {}) {
+    //set the checked status of the footer checkbox
+    let value = Preferences.get(WHATSNEW_ENABLED_PREF);
+    win.document
+      .getElementById("panelMenu-toggleWhatsNew")
+      .setAttribute("checked", value);
+
     this.maybeLoadCustomElement(win);
     const messages =
       (options.force && options.messages) ||

browser/components/newtab/test/unit/lib/ToolbarPanelHub.test.js

@@ -8,6 +8,7 @@ describe("ToolbarPanelHub", () => {
   let sandbox;
   let instance;
   let everyWindowStub;
+  let preferencesStub;
   let fakeDocument;
   let fakeWindow;
   let fakeElementById;
@@ -111,6 +112,10 @@ describe("ToolbarPanelHub", () => {
       registerCallback: sandbox.stub(),
       unregisterCallback: sandbox.stub(),
     };
+    preferencesStub = {
+      get: sandbox.stub(),
+      set: sandbox.stub(),
+    };
     scriptloaderStub = { loadSubScript: sandbox.stub() };
     addObserverStub = sandbox.stub();
     removeObserverStub = sandbox.stub();
@@ -141,6 +146,7 @@ describe("ToolbarPanelHub", () => {
       PrivateBrowsingUtils: {
         isBrowserPrivate: isBrowserPrivateStub,
       },
+      Preferences: preferencesStub,
       TrackingDBService: {
         getEarliestRecordedDate: getEarliestRecordedDateStub,
         getEventsByDateRange: getEventsByDateRangeStub,
@@ -158,14 +164,7 @@ describe("ToolbarPanelHub", () => {
   it("should create an instance", () => {
     assert.ok(instance);
   });
-  it("should not enableAppmenuButton() on init() if pref is not enabled", async () => {
-    getBoolPrefStub.returns(false);
-    instance.enableAppmenuButton = sandbox.stub();
-    await instance.init(waitForInitializedStub, { getMessages: () => {} });
-    assert.notCalled(instance.enableAppmenuButton);
-  });
-  it("should enableAppmenuButton() on init() if pref is enabled", async () => {
-    getBoolPrefStub.returns(true);
+  it("should enableAppmenuButton() on init()", async () => {
     instance.enableAppmenuButton = sandbox.stub();
 
     await instance.init(waitForInitializedStub, { getMessages: () => {} });
@@ -174,7 +173,7 @@ describe("ToolbarPanelHub", () => {
   });
   it("should unregisterCallback on uninit()", () => {
     instance.uninit();
-    assert.calledTwice(everyWindowStub.unregisterCallback);
+    assert.calledOnce(everyWindowStub.unregisterCallback);
   });
   it("should observe pref changes on init", async () => {
     await instance.init(waitForInitializedStub, {});
@@ -224,7 +223,7 @@ describe("ToolbarPanelHub", () => {
   });
   describe("#enableAppmenuButton", () => {
     it("should registerCallback on enableAppmenuButton() if there are messages", async () => {
-      instance.init(waitForInitializedStub, {
+      await instance.init(waitForInitializedStub, {
         getMessages: sandbox.stub().resolves([{}, {}]),
       });
       // init calls `enableAppmenuButton`
@@ -267,9 +266,11 @@ describe("ToolbarPanelHub", () => {
   });
   describe("#enableToolbarButton", () => {
     it("should registerCallback on enableToolbarButton if messages.length", async () => {
-      instance.init(waitForInitializedStub, {
+      await instance.init(waitForInitializedStub, {
         getMessages: sandbox.stub().resolves([{}, {}]),
       });
+      // init calls `enableAppmenuButton`
+      everyWindowStub.registerCallback.resetHistory();
 
       await instance.enableToolbarButton();
 

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

@@ -387,3 +387,8 @@ main-context-menu-inspect-a11y-properties =
 main-context-menu-eme-learn-more =
     .label = Learn more about DRM…
     .accesskey = D
+
+# Checkbox displayed at the bottom of the What's New panel, allowing users to 
+# enable/disable What's New notifications.
+cfr-whatsnew-panel-footer-checkbox = 
+  .label = Notify about new features    

browser/themes/shared/customizableui/panelUI.inc.css

@@ -1862,6 +1862,43 @@ panelview[mainview] #PanelUI-whatsNew-content {
   padding-top: 0;
 }
 
+#PanelUI-whatsNew .panelMenu-toggleWhatsNew-checkbox {
+  margin-inline-start: -80px;
+}
+
+/* These checkbox styles have been pulled from `common.inc.css` and 
+   duplicated here to ensure they apply correctly. 
+   see https://searchfox.org/mozilla-central/source/toolkit/themes/shared/in-content/common.inc.css#560 */
+#PanelUI-whatsNew checkbox {
+  -moz-appearance: none;
+  height: 30px;
+  margin: 2px 0;
+}
+
+#PanelUI-whatsNew checkbox[checked].panelMenu-toggleWhatsNew-checkbox {
+  list-style-image: url("chrome://global/skin/icons/check.svg");
+  -moz-context-properties: fill;
+  fill: #2292d0;
+}
+
+#PanelUI-whatsNew .checkbox-check {
+  -moz-appearance: none;
+  width: 20px;
+  height: 20px;
+  padding: 1px;
+  border: 1px solid #A9A9A9;
+  border-radius: 2px;
+  margin: 0;
+  margin-inline-end: 10px;
+  background-color: #FFF;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+#PanelUI-whatsNew .checkbox-icon {
+  display: none;
+}
+
 #PanelUI-whatsNew .whatsNew-message {
   cursor: pointer;
   margin: 0 12px;