Bug 1561547 - Use Messaging System to badge the FxA accounts toolbar button r=r1cky

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

--HG--
extra : moz-landing-system : lando

browser/app/profile/firefox.js

@@ -1320,6 +1320,8 @@ pref("trailhead.firstrun.branches", "join-privacy");
 
 // The pref that controls if the What's New panel is enabled.
 pref("browser.messaging-system.whatsNewPanel.enabled", false);
+// Whether to use Messaging System to add a badge to the FxA toolbar button
+pref("browser.messaging-system.fxatoolbarbadge.enabled", true);
 
 // Enable the DOM fullscreen API.
 pref("full-screen-api.enabled", true);

browser/base/content/browser.js

@@ -489,6 +489,16 @@ XPCOMUtils.defineLazyPreferenceGetter(
   }
 );
 
+XPCOMUtils.defineLazyPreferenceGetter(
+  this,
+  "gMsgingSystemFxABadge",
+  "browser.messaging-system.fxatoolbarbadge.enabled",
+  true,
+  (aPref, aOldVal, aNewVal) => {
+    showFxaToolbarMenu(gFxaToolbarEnabled);
+  }
+);
+
 XPCOMUtils.defineLazyPreferenceGetter(
   this,
   "gHtmlAboutAddonsEnabled",
@@ -631,7 +641,9 @@ function showFxaToolbarMenu(enable) {
 
     // We set an attribute here so that we can toggle the custom
     // badge depending on whether the FxA menu was ever accessed.
-    if (!gFxaToolbarAccessed) {
+    // If badging is handled by Messaging System we shouldn't set
+    // the attribute.
+    if (!gFxaToolbarAccessed && !gMsgingSystemFxABadge) {
       mainWindowEl.setAttribute("fxa_avatar_badged", "badged");
     } else {
       mainWindowEl.removeAttribute("fxa_avatar_badged");

browser/base/content/test/performance/browser.ini

@@ -7,6 +7,7 @@
 prefs =
   # Skip migration work in BG__migrateUI for browser_startup.js since it isn't
   # representative of common startup.
+  browser.messaging-system.fxatoolbarbadge.enabled=false # Bug 1570336
   browser.migration.version=9999999
   browser.urlbar.quantumbar=true
   browser.startup.record=true

browser/base/content/test/sync/browser_sync.js

@@ -22,6 +22,9 @@ add_task(async function test_ui_state_notification_calls_updateAllUI() {
 });
 
 add_task(async function test_ui_state_signedin() {
+  const msBadgeEnabled = Services.prefs.getBoolPref(
+    "browser.messaging-system.fxatoolbarbadge.enabled"
+  );
   const relativeDateAnchor = new Date();
   let state = {
     status: UIState.STATUS_SIGNED_IN,
@@ -52,7 +55,9 @@ add_task(async function test_ui_state_signedin() {
   checkRemoteTabsPanel("PanelUI-remotetabs-main", false);
   checkMenuBarItem("sync-syncnowitem");
   checkFxaToolbarButtonPanel("PanelUI-fxa-menu");
-  checkFxAAvatar("signedin");
+  if (!msBadgeEnabled) {
+    checkFxAAvatar("signedin");
+  }
   gSync.relativeTimeFormat = origRelativeTimeFormat;
 });
 
@@ -82,6 +87,9 @@ add_task(async function test_ui_state_syncing() {
 });
 
 add_task(async function test_ui_state_unconfigured() {
+  const msBadgeEnabled = Services.prefs.getBoolPref(
+    "browser.messaging-system.fxatoolbarbadge.enabled"
+  );
   let state = {
     status: UIState.STATUS_NOT_CONFIGURED,
   };
@@ -95,7 +103,9 @@ add_task(async function test_ui_state_unconfigured() {
   checkRemoteTabsPanel("PanelUI-remotetabs-setupsync");
   checkMenuBarItem("sync-setup");
   checkFxaToolbarButtonPanel("PanelUI-fxa-signin");
-  checkFxAAvatar("not_configured");
+  if (!msBadgeEnabled) {
+    checkFxAAvatar("not_configured");
+  }
 });
 
 add_task(async function test_ui_state_unverified() {
@@ -259,6 +269,16 @@ async function checkFxaToolbarButtonPanel(expectedShownItemId) {
   );
 }
 
+async function checkFxABadged() {
+  const button = document.getElementById("fxa-toolbar-menu-button");
+  await BrowserTestUtils.waitForCondition(() => {
+    return button.querySelector("label.feature-callout");
+  });
+  const badge = button.querySelector("label.feature-callout");
+  ok(badge, "expected feature-callout style badge");
+  ok(BrowserTestUtils.is_visible(badge), "expected the badge to be visible");
+}
+
 // fxaStatus is one of 'not_configured', 'unverified', or 'signedin'.
 function checkFxAAvatar(fxaStatus) {
   const avatarContainers = [

browser/components/newtab/content-src/asrouter/docs/targeting-attributes.md

@@ -37,6 +37,7 @@ Please note that some targeting attributes require stricter controls on the tele
 * [hasAccessedFxAPanel](#hasaccessedfxapanel)
 * [isWhatsNewPanelEnabled](#iswhatsnewpanelenabled)
 * [earliestFirefoxVersion](#earliestfirefoxversion)
+* [isFxABadgeEnabled](#isfxabadgeenabled)
 
 ## Detailed usage
 
@@ -507,3 +508,13 @@ Integer value of the first Firefox version the profile ran on
 ```ts
 declare const earliestFirefoxVersion: boolean;
 ```
+
+### `isFxABadgeEnabled`
+
+Boolean pref that controls if the FxA toolbar button is badged by Messaging System.
+
+#### Definition
+
+```ts
+declare const isFxABadgeEnabled: boolean;
+```

browser/components/newtab/lib/ASRouterTargeting.jsm

@@ -416,6 +416,12 @@ const TargetingGetters = {
 
     return null;
   },
+  get isFxABadgeEnabled() {
+    return Services.prefs.getBoolPref(
+      "browser.messaging-system.fxatoolbarbadge.enabled",
+      false
+    );
+  },
 };
 
 this.ASRouterTargeting = {

browser/components/newtab/lib/OnboardingMessageProvider.jsm

@@ -366,6 +366,17 @@ const ONBOARDING_MESSAGES = () => [
       "attributionData.campaign == 'non-fx-button' && attributionData.source == 'addons.mozilla.org'",
     trigger: { id: "firstRun" },
   },
+  {
+    id: "FXA_ACCOUNTS_BADGE",
+    template: "toolbar_badge",
+    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" },
+  },
 ];
 
 const OnboardingMessageProvider = {

browser/components/newtab/lib/PanelTestProvider.jsm

@@ -50,16 +50,6 @@ const MESSAGES = () => [
     },
     trigger: { id: "bookmark-panel" },
   },
-  {
-    id: "FXA_ACCOUNTS_BADGE",
-    template: "toolbar_badge",
-    content: {
-      target: "fxa-toolbar-menu-button",
-    },
-    // Never accessed the FxA panel && doesn't use Firefox sync & has FxA enabled
-    targeting: `!hasAccessedFxAPanel && !usesFirefoxSync && isFxAEnabled == true`,
-    trigger: { id: "toolbarBadgeUpdate" },
-  },
   {
     id: `WHATS_NEW_BADGE_${FIREFOX_VERSION}`,
     template: "toolbar_badge",

browser/components/newtab/test/unit/asrouter/PanelTestProvider.test.js

@@ -4,7 +4,7 @@ const messages = PanelTestProvider.getMessages();
 
 describe("PanelTestProvider", () => {
   it("should have a message", () => {
-    assert.lengthOf(messages, 7);
+    assert.lengthOf(messages, 6);
   });
   it("should be a valid message", () => {
     assert.jsonSchema(messages[0].content, schema);

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

@@ -1,6 +1,7 @@
 import { _ToolbarBadgeHub } from "lib/ToolbarBadgeHub.jsm";
 import { GlobalOverrider } from "test/unit/utils";
 import { PanelTestProvider } from "lib/PanelTestProvider.jsm";
+import { OnboardingMessageProvider } from "lib/OnboardingMessageProvider.jsm";
 import { _ToolbarPanelHub } from "lib/ToolbarPanelHub.jsm";
 
 describe("ToolbarBadgeHub", () => {
@@ -25,9 +26,12 @@ describe("ToolbarBadgeHub", () => {
     fakeAddImpression = sandbox.stub();
     fakeDispatch = sandbox.stub();
     isBrowserPrivateStub = sandbox.stub();
-    const msgs = await PanelTestProvider.getMessages();
-    fxaMessage = msgs.find(({ id }) => id === "FXA_ACCOUNTS_BADGE");
-    whatsnewMessage = msgs.find(({ id }) => id.includes("WHATS_NEW_BADGE_"));
+    const panelTestMsgs = await PanelTestProvider.getMessages();
+    const onboardingMsgs = await OnboardingMessageProvider.getUntranslatedMessages();
+    fxaMessage = onboardingMsgs.find(({ id }) => id === "FXA_ACCOUNTS_BADGE");
+    whatsnewMessage = panelTestMsgs.find(({ id }) =>
+      id.includes("WHATS_NEW_BADGE_")
+    );
     fakeElement = {
       classList: {
         add: sandbox.stub(),