Bug 1563319 - Enable the What's New UI when pref is enabled (#5153)

lib/ASRouter.jsm

@@ -19,6 +19,7 @@ XPCOMUtils.defineLazyModuleGetters(this, {
     "resource://activity-stream/lib/SnippetsTestMessageProvider.jsm",
   PanelTestProvider: "resource://activity-stream/lib/PanelTestProvider.jsm",
   ToolbarBadgeHub: "resource://activity-stream/lib/ToolbarBadgeHub.jsm",
+  ToolbarPanelHub: "resource://activity-stream/lib/ToolbarPanelHub.jsm",
 });
 const {
   ASRouterActions: ra,
@@ -728,6 +729,7 @@ class _ASRouter {
       addImpression: this.addImpression,
       blockMessageById: this.blockMessageById,
     });
+    ToolbarPanelHub.init();
 
     this._loadLocalProviders();
 
@@ -783,6 +785,7 @@ class _ASRouter {
     ASRouterPreferences.removeListener(this.onPrefChange);
     ASRouterPreferences.uninit();
     BookmarkPanelHub.uninit();
+    ToolbarPanelHub.uninit();
 
     // Uninitialise all trigger listeners
     for (const listener of ASRouterTriggerListeners.values()) {

lib/ToolbarPanelHub.jsm

@@ -0,0 +1,122 @@
+/* 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/. */
+"use strict";
+
+ChromeUtils.defineModuleGetter(
+  this,
+  "Services",
+  "resource://gre/modules/Services.jsm"
+);
+ChromeUtils.defineModuleGetter(
+  this,
+  "EveryWindow",
+  "resource:///modules/EveryWindow.jsm"
+);
+
+const WHATSNEW_ENABLED_PREF = "browser.messaging-system.whatsNewPanel.enabled";
+
+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._showAppmenuButton = this._showAppmenuButton.bind(this);
+    this._hideAppmenuButton = this._hideAppmenuButton.bind(this);
+    this._showToolbarButton = this._showToolbarButton.bind(this);
+    this._hideToolbarButton = this._hideToolbarButton.bind(this);
+  }
+
+  init() {
+    if (this.whatsNewPanelEnabled) {
+      this.enableAppmenuButton();
+      // TODO: this will eventually be called when the badge message gets triggered
+      // instead of here in init.
+      this.enableToolbarButton();
+    }
+  }
+
+  uninit() {
+    EveryWindow.unregisterCallback(TOOLBAR_BUTTON_ID);
+    EveryWindow.unregisterCallback(APPMENU_BUTTON_ID);
+  }
+
+  get whatsNewPanelEnabled() {
+    return Services.prefs.getBoolPref(WHATSNEW_ENABLED_PREF, false);
+  }
+
+  maybeInsertFTL(win) {
+    win.MozXULElement.insertFTLIfNeeded("browser/newtab/asrouter.ftl");
+  }
+
+  // Turns on the Appmenu (hamburger menu) button for all open windows and future windows.
+  enableAppmenuButton() {
+    EveryWindow.registerCallback(
+      APPMENU_BUTTON_ID,
+      this._showAppmenuButton,
+      this._hideAppmenuButton
+    );
+  }
+
+  // Turns on the Toolbar button for all open windows and future windows.
+  enableToolbarButton() {
+    EveryWindow.registerCallback(
+      TOOLBAR_BUTTON_ID,
+      this._showToolbarButton,
+      this._hideToolbarButton
+    );
+  }
+
+  _showAppmenuButton(win) {
+    this.maybeInsertFTL(win);
+    this._showElement(
+      win.browser.ownerDocument,
+      APPMENU_BUTTON_ID,
+      BUTTON_STRING_ID
+    );
+  }
+
+  _hideAppmenuButton(win) {
+    this._hideElement(win.browser.ownerDocument, APPMENU_BUTTON_ID);
+  }
+
+  _showToolbarButton(win) {
+    const document = win.browser.ownerDocument;
+    this.maybeInsertFTL(win);
+    this._showElement(document, TOOLBAR_BUTTON_ID, BUTTON_STRING_ID);
+    // The toolbar dropdown panel uses this extra header element that is hidden
+    // in the appmenu subview version of the panel. We only need to set it
+    // when showing the toolbar button.
+    document.l10n.setAttributes(
+      document.querySelector(PANEL_HEADER_SELECTOR),
+      "cfr-whatsnew-panel-header"
+    );
+  }
+
+  _hideToolbarButton(win) {
+    this._hideElement(win.browser.ownerDocument, TOOLBAR_BUTTON_ID);
+  }
+
+  _showElement(document, id, string_id) {
+    const el = document.getElementById(id);
+    document.l10n.setAttributes(el, string_id);
+    el.removeAttribute("hidden");
+  }
+
+  _hideElement(document, id) {
+    document.getElementById(id).setAttribute("hidden", true);
+  }
+}
+
+this._ToolbarPanelHub = _ToolbarPanelHub;
+
+/**
+ * ToolbarPanelHub - singleton instance of _ToolbarPanelHub that can initiate
+ * message requests and render messages.
+ */
+this.ToolbarPanelHub = new _ToolbarPanelHub();
+
+const EXPORTED_SYMBOLS = ["ToolbarPanelHub", "_ToolbarPanelHub"];

locales-src/asrouter.ftl

@@ -56,6 +56,7 @@ cfr-doorhanger-extension-total-users =
 cfr-doorhanger-pintab-description = Get easy access to your most-used sites. Keep sites open in a tab (even when you restart).
 
 ## These messages are steps on how to use the feature and are shown together.
+
 cfr-doorhanger-pintab-step1 = <b>Right-click</b> on the tab you want to pin.
 cfr-doorhanger-pintab-step2 = Select <b>Pin Tab</b> from the menu.
 cfr-doorhanger-pintab-step3 = If the site has an update you’ll see a blue dot on your pinned tab.
@@ -65,9 +66,18 @@ cfr-doorhanger-pintab-animation-resume = Resume
 
 
 ## Firefox Accounts Message
+
 cfr-doorhanger-bookmark-fxa-header = Sync your bookmarks everywhere.
 cfr-doorhanger-bookmark-fxa-body = Great find! Now don’t be left without this bookmark on your mobile devices. Get Started with a { -fxaccount-brand-name }.
 cfr-doorhanger-bookmark-fxa-link-text = Sync bookmarks now…
 cfr-doorhanger-bookmark-fxa-close-btn-tooltip =
   .aria-label = Close button
   .title = Close
+
+## What's New toolbar button and panel
+
+cfr-whatsnew-button =
+  .label = What’s New
+  .tooltiptext = What’s New
+
+cfr-whatsnew-panel-header = What’s New

test/unit/asrouter/ASRouter.test.js

@@ -67,6 +67,7 @@ describe("ASRouter", () => {
   let fakeAttributionCode;
   let FakeBookmarkPanelHub;
   let FakeToolbarBadgeHub;
+  let FakeToolbarPanelHub;
 
   function createFakeStorage() {
     const getStub = sandbox.stub();
@@ -144,6 +145,10 @@ describe("ASRouter", () => {
       init: sandbox.stub(),
       registerBadgeNotificationListener: sandbox.stub(),
     };
+    FakeToolbarPanelHub = {
+      init: sandbox.stub(),
+      uninit: sandbox.stub(),
+    };
     globals.set({
       AttributionCode: fakeAttributionCode,
       // Testing framework doesn't know how to `defineLazyModuleGetter` so we're
@@ -152,6 +157,7 @@ describe("ASRouter", () => {
       PanelTestProvider,
       BookmarkPanelHub: FakeBookmarkPanelHub,
       ToolbarBadgeHub: FakeToolbarBadgeHub,
+      ToolbarPanelHub: FakeToolbarPanelHub,
     });
     await createRouterAndInit();
   });

test/unit/asrouter/ASRouterFeed.test.js

@@ -13,6 +13,7 @@ describe("ASRouterFeed", () => {
   let globals;
   let FakeBookmarkPanelHub;
   let FakeToolbarBadgeHub;
+  let FakeToolbarPanelHub;
   beforeEach(() => {
     sandbox = sinon.createSandbox();
     globals = new GlobalOverrider();
@@ -23,9 +24,13 @@ describe("ASRouterFeed", () => {
     FakeToolbarBadgeHub = {
       init: sandbox.stub(),
     };
+    FakeToolbarPanelHub = {
+      init: sandbox.stub(),
+      uninit: sandbox.stub(),
+    };
     globals.set("BookmarkPanelHub", FakeBookmarkPanelHub);
     globals.set("ToolbarBadgeHub", FakeToolbarBadgeHub);
-
+    globals.set("ToolbarPanelHub", FakeToolbarPanelHub);
     Router = new _ASRouter({ providers: [FAKE_LOCAL_PROVIDER] });
     storage = {
       get: sandbox.stub().returns(Promise.resolve([])),

test/unit/lib/ToolbarPanelHub.test.js

@@ -0,0 +1,85 @@
+import { _ToolbarPanelHub } from "lib/ToolbarPanelHub.jsm";
+import { GlobalOverrider } from "test/unit/utils";
+
+describe("ToolbarPanelHub", () => {
+  let globals;
+  let sandbox;
+  let instance;
+  let everyWindowStub;
+  let fakeWindow;
+  let fakeElementById;
+
+  beforeEach(() => {
+    sandbox = sinon.createSandbox();
+    globals = new GlobalOverrider();
+    instance = new _ToolbarPanelHub();
+    fakeElementById = {
+      setAttribute: sandbox.stub(),
+      removeAttribute: sandbox.stub(),
+    };
+    fakeWindow = {
+      browser: {
+        ownerDocument: {
+          l10n: {
+            setAttributes: sandbox.stub(),
+          },
+          getElementById: sandbox.stub().returns(fakeElementById),
+          querySelector: sandbox.stub().returns({}),
+        },
+      },
+      MozXULElement: { insertFTLIfNeeded: sandbox.stub() },
+    };
+    everyWindowStub = {
+      registerCallback: sandbox.stub(),
+      unregisterCallback: sandbox.stub(),
+    };
+    globals.set("EveryWindow", everyWindowStub);
+  });
+  afterEach(() => {
+    instance.uninit();
+    sandbox.restore();
+  });
+  it("should create an instance", () => {
+    assert.ok(instance);
+  });
+  it("should not enableAppmenuButton() on init if pref is not enabled", () => {
+    sandbox.stub(global.Services.prefs, "getBoolPref").returns(false);
+    instance.enableAppmenuButton = sandbox.stub();
+    instance.init();
+    assert.notCalled(instance.enableAppmenuButton);
+  });
+  it("should enableAppmenuButton() on init if pref is enabled", () => {
+    sandbox.stub(global.Services.prefs, "getBoolPref").returns(true);
+    instance.enableAppmenuButton = sandbox.stub();
+    instance.init();
+    assert.calledOnce(instance.enableAppmenuButton);
+  });
+  it("should unregisterCallback on uninit", () => {
+    instance.uninit();
+    assert.calledTwice(everyWindowStub.unregisterCallback);
+  });
+  it("should registerCallback on enableAppmenuButton", () => {
+    instance.enableAppmenuButton();
+    assert.calledOnce(everyWindowStub.registerCallback);
+  });
+  it("should registerCallback on enableToolbarButton", () => {
+    instance.enableToolbarButton();
+    assert.calledOnce(everyWindowStub.registerCallback);
+  });
+  it("should unhide appmenu button on _showAppmenuButton", () => {
+    instance._showAppmenuButton(fakeWindow);
+    assert.calledWith(fakeElementById.removeAttribute, "hidden");
+  });
+  it("should hide appmenu button on _hideAppmenuButton", () => {
+    instance._hideAppmenuButton(fakeWindow);
+    assert.calledWith(fakeElementById.setAttribute, "hidden", true);
+  });
+  it("should unhide toolbar button on _showToolbarButton", () => {
+    instance._showToolbarButton(fakeWindow);
+    assert.calledWith(fakeElementById.removeAttribute, "hidden");
+  });
+  it("should hide toolbar button on _hideToolbarButton", () => {
+    instance._hideToolbarButton(fakeWindow);
+    assert.calledWith(fakeElementById.setAttribute, "hidden", true);
+  });
+});