Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

24 files changed, 15002 insertions, 0 deletions

diff --git a/browser/components/asrouter/modules/ASRouter.sys.mjs b/browser/components/asrouter/modules/ASRouter.sys.mjs
new file mode 100644
index 0000000000..f6657a39b9
--- /dev/null
+++ b/browser/components/asrouter/modules/ASRouter.sys.mjs
@@ -0,0 +1,2079 @@
+/* vim: set ts=2 sw=2 sts=2 et tw=80: */
+/* 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/. */
+
+// We use importESModule here instead of static import so that
+// the Karma test environment won't choke on this module. This
+// is because the Karma test environment already stubs out
+// XPCOMUtils, AppConstants and RemoteSettings, and overrides
+// importESModule to be a no-op (which can't be done for a static import
+// statement).
+
+// eslint-disable-next-line mozilla/use-static-import
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+// eslint-disable-next-line mozilla/use-static-import
+const { AppConstants } = ChromeUtils.importESModule(
+  "resource://gre/modules/AppConstants.sys.mjs"
+);
+
+// eslint-disable-next-line mozilla/use-static-import
+const { RemoteSettings } = ChromeUtils.importESModule(
+  "resource://services-settings/remote-settings.sys.mjs"
+);
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  ASRouterPreferences:
+    "resource:///modules/asrouter/ASRouterPreferences.sys.mjs",
+  ASRouterTargeting: "resource:///modules/asrouter/ASRouterTargeting.sys.mjs",
+  ASRouterTriggerListeners:
+    "resource:///modules/asrouter/ASRouterTriggerListeners.sys.mjs",
+  AttributionCode: "resource:///modules/AttributionCode.sys.mjs",
+  Downloader: "resource://services-settings/Attachments.sys.mjs",
+  ExperimentAPI: "resource://nimbus/ExperimentAPI.sys.mjs",
+  FeatureCalloutBroker:
+    "resource:///modules/asrouter/FeatureCalloutBroker.sys.mjs",
+  InfoBar: "resource:///modules/asrouter/InfoBar.sys.mjs",
+  KintoHttpClient: "resource://services-common/kinto-http-client.sys.mjs",
+  MacAttribution: "resource:///modules/MacAttribution.sys.mjs",
+  MomentsPageHub: "resource:///modules/asrouter/MomentsPageHub.sys.mjs",
+  NimbusFeatures: "resource://nimbus/ExperimentAPI.sys.mjs",
+  PanelTestProvider: "resource:///modules/asrouter/PanelTestProvider.sys.mjs",
+  RemoteL10n: "resource:///modules/asrouter/RemoteL10n.sys.mjs",
+  SpecialMessageActions:
+    "resource://messaging-system/lib/SpecialMessageActions.sys.mjs",
+  TargetingContext: "resource://messaging-system/targeting/Targeting.sys.mjs",
+  TARGETING_PREFERENCES:
+    "resource:///modules/asrouter/ASRouterPreferences.sys.mjs",
+  Utils: "resource://services-settings/Utils.sys.mjs",
+  setTimeout: "resource://gre/modules/Timer.sys.mjs",
+  Spotlight: "resource:///modules/asrouter/Spotlight.sys.mjs",
+  ToastNotification: "resource:///modules/asrouter/ToastNotification.sys.mjs",
+  ToolbarBadgeHub: "resource:///modules/asrouter/ToolbarBadgeHub.sys.mjs",
+  ToolbarPanelHub: "resource:///modules/asrouter/ToolbarPanelHub.sys.mjs",
+});
+
+XPCOMUtils.defineLazyServiceGetters(lazy, {
+  BrowserHandler: ["@mozilla.org/browser/clh;1", "nsIBrowserHandler"],
+});
+ChromeUtils.defineLazyGetter(lazy, "log", () => {
+  const { Logger } = ChromeUtils.importESModule(
+    "resource://messaging-system/lib/Logger.sys.mjs"
+  );
+  return new Logger("ASRouter");
+});
+import { actionCreators as ac } from "resource://activity-stream/common/Actions.sys.mjs";
+import { MESSAGING_EXPERIMENTS_DEFAULT_FEATURES } from "resource:///modules/asrouter/MessagingExperimentConstants.sys.mjs";
+import { CFRMessageProvider } from "resource:///modules/asrouter/CFRMessageProvider.sys.mjs";
+import { OnboardingMessageProvider } from "resource:///modules/asrouter/OnboardingMessageProvider.sys.mjs";
+import { CFRPageActions } from "resource:///modules/asrouter/CFRPageActions.sys.mjs";
+
+// List of hosts for endpoints that serve router messages.
+// Key is allowed host, value is a name for the endpoint host.
+const DEFAULT_ALLOWLIST_HOSTS = {
+  "activity-stream-icons.services.mozilla.com": "production",
+};
+// Max possible impressions cap for any message
+const MAX_MESSAGE_LIFETIME_CAP = 100;
+
+const LOCAL_MESSAGE_PROVIDERS = {
+  OnboardingMessageProvider,
+  CFRMessageProvider,
+};
+const STARTPAGE_VERSION = "6";
+
+// Remote Settings
+const RS_MAIN_BUCKET = "main";
+const RS_COLLECTION_L10N = "ms-language-packs"; // "ms" stands for Messaging System
+const RS_PROVIDERS_WITH_L10N = ["cfr"];
+const RS_FLUENT_VERSION = "v1";
+const RS_FLUENT_RECORD_PREFIX = `cfr-${RS_FLUENT_VERSION}`;
+const RS_DOWNLOAD_MAX_RETRIES = 2;
+// This is the list of providers for which we want to cache the targeting
+// expression result and reuse between calls. Cache duration is defined in
+// ASRouterTargeting where evaluation takes place.
+const JEXL_PROVIDER_CACHE = new Set();
+
+// To observe the app locale change notification.
+const TOPIC_INTL_LOCALE_CHANGED = "intl:app-locales-changed";
+const TOPIC_EXPERIMENT_ENROLLMENT_CHANGED = "nimbus:enrollments-updated";
+// To observe the pref that controls if ASRouter should use the remote Fluent files for l10n.
+const USE_REMOTE_L10N_PREF =
+  "browser.newtabpage.activity-stream.asrouter.useRemoteL10n";
+
+// Experiment groups that need to report the reach event in Messaging-Experiments.
+// If you're adding new groups to it, make sure they're also added in the
+// `messaging_experiments.reach.objects` defined in "toolkit/components/telemetry/Events.yaml"
+const REACH_EVENT_GROUPS = [
+  "cfr",
+  "moments-page",
+  "infobar",
+  "spotlight",
+  "featureCallout",
+];
+const REACH_EVENT_CATEGORY = "messaging_experiments";
+const REACH_EVENT_METHOD = "reach";
+
+export const MessageLoaderUtils = {
+  STARTPAGE_VERSION,
+  REMOTE_LOADER_CACHE_KEY: "RemoteLoaderCache",
+  _errors: [],
+
+  reportError(e) {
+    console.error(e);
+    this._errors.push({
+      timestamp: new Date(),
+      error: { message: e.toString(), stack: e.stack },
+    });
+  },
+
+  get errors() {
+    const errors = this._errors;
+    this._errors = [];
+    return errors;
+  },
+
+  /**
+   * _localLoader - Loads messages for a local provider (i.e. one that lives in mozilla central)
+   *
+   * @param {obj} provider An AS router provider
+   * @param {Array} provider.messages An array of messages
+   * @returns {Array} the array of messages
+   */
+  _localLoader(provider) {
+    return provider.messages;
+  },
+
+  async _remoteLoaderCache(storage) {
+    let allCached;
+    try {
+      allCached =
+        (await storage.get(MessageLoaderUtils.REMOTE_LOADER_CACHE_KEY)) || {};
+    } catch (e) {
+      // istanbul ignore next
+      MessageLoaderUtils.reportError(e);
+      // istanbul ignore next
+      allCached = {};
+    }
+    return allCached;
+  },
+
+  /**
+   * _remoteLoader - Loads messages for a remote provider
+   *
+   * @param {obj} provider An AS router provider
+   * @param {string} provider.url An endpoint that returns an array of messages as JSON
+   * @param {obj} options.storage A storage object with get() and set() methods for caching.
+   * @returns {Promise} resolves with an array of messages, or an empty array if none could be fetched
+   */
+  async _remoteLoader(provider, options) {
+    let remoteMessages = [];
+    if (provider.url) {
+      const allCached = await MessageLoaderUtils._remoteLoaderCache(
+        options.storage
+      );
+      const cached = allCached[provider.id];
+      let etag;
+
+      if (
+        cached &&
+        cached.url === provider.url &&
+        cached.version === STARTPAGE_VERSION
+      ) {
+        const { lastFetched, messages } = cached;
+        if (
+          !MessageLoaderUtils.shouldProviderUpdate({
+            ...provider,
+            lastUpdated: lastFetched,
+          })
+        ) {
+          // Cached messages haven't expired, return early.
+          return messages;
+        }
+        etag = cached.etag;
+        remoteMessages = messages;
+      }
+
+      let headers = new Headers();
+      if (etag) {
+        headers.set("If-None-Match", etag);
+      }
+
+      let response;
+      try {
+        response = await fetch(provider.url, {
+          headers,
+          credentials: "omit",
+        });
+      } catch (e) {
+        MessageLoaderUtils.reportError(e);
+      }
+      if (
+        response &&
+        response.ok &&
+        response.status >= 200 &&
+        response.status < 400
+      ) {
+        let jsonResponse;
+        try {
+          jsonResponse = await response.json();
+        } catch (e) {
+          MessageLoaderUtils.reportError(e);
+          return remoteMessages;
+        }
+        if (jsonResponse && jsonResponse.messages) {
+          remoteMessages = jsonResponse.messages.map(msg => ({
+            ...msg,
+            provider_url: provider.url,
+          }));
+
+          // Cache the results if this isn't a preview URL.
+          if (provider.updateCycleInMs > 0) {
+            etag = response.headers.get("ETag");
+            const cacheInfo = {
+              messages: remoteMessages,
+              etag,
+              lastFetched: Date.now(),
+              version: STARTPAGE_VERSION,
+            };
+
+            options.storage.set(MessageLoaderUtils.REMOTE_LOADER_CACHE_KEY, {
+              ...allCached,
+              [provider.id]: cacheInfo,
+            });
+          }
+        } else {
+          MessageLoaderUtils.reportError(
+            `No messages returned from ${provider.url}.`
+          );
+        }
+      } else if (response) {
+        MessageLoaderUtils.reportError(
+          `Invalid response status ${response.status} from ${provider.url}.`
+        );
+      }
+    }
+    return remoteMessages;
+  },
+
+  /**
+   * _remoteSettingsLoader - Loads messages for a RemoteSettings provider
+   *
+   * Note:
+   * 1). The "cfr" provider requires the Fluent file for l10n, so there is
+   * another file downloading phase for those two providers after their messages
+   * are successfully fetched from Remote Settings. Currently, they share the same
+   * attachment of the record "${RS_FLUENT_RECORD_PREFIX}-${locale}" in the
+   * "ms-language-packs" collection. E.g. for "en-US" with version "v1",
+   * the Fluent file is attched to the record with ID "cfr-v1-en-US".
+   *
+   * 2). The Remote Settings downloader is able to detect the duplicate download
+   * requests for the same attachment and ignore the redundent requests automatically.
+   *
+   * @param {object} provider An AS router provider
+   * @param {string} provider.id The id of the provider
+   * @param {string} provider.collection Remote Settings collection name
+   * @param {object} options
+   * @param {function} options.dispatchCFRAction Action handler function
+   * @returns {Promise<object[]>} Resolves with an array of messages, or an
+   *                              empty array if none could be fetched
+   */
+  async _remoteSettingsLoader(provider, options) {
+    let messages = [];
+    if (provider.collection) {
+      try {
+        messages = await MessageLoaderUtils._getRemoteSettingsMessages(
+          provider.collection
+        );
+        if (!messages.length) {
+          MessageLoaderUtils._handleRemoteSettingsUndesiredEvent(
+            "ASR_RS_NO_MESSAGES",
+            provider.id,
+            options.dispatchCFRAction
+          );
+        } else if (
+          RS_PROVIDERS_WITH_L10N.includes(provider.id) &&
+          lazy.RemoteL10n.isLocaleSupported(MessageLoaderUtils.locale)
+        ) {
+          const recordId = `${RS_FLUENT_RECORD_PREFIX}-${MessageLoaderUtils.locale}`;
+          const kinto = new lazy.KintoHttpClient(lazy.Utils.SERVER_URL);
+          const record = await kinto
+            .bucket(RS_MAIN_BUCKET)
+            .collection(RS_COLLECTION_L10N)
+            .getRecord(recordId);
+          if (record && record.data) {
+            const downloader = new lazy.Downloader(
+              RS_MAIN_BUCKET,
+              RS_COLLECTION_L10N,
+              "browser",
+              "newtab"
+            );
+            // Await here in order to capture the exceptions for reporting.
+            await downloader.downloadToDisk(record.data, {
+              retries: RS_DOWNLOAD_MAX_RETRIES,
+            });
+            lazy.RemoteL10n.reloadL10n();
+          } else {
+            MessageLoaderUtils._handleRemoteSettingsUndesiredEvent(
+              "ASR_RS_NO_MESSAGES",
+              RS_COLLECTION_L10N,
+              options.dispatchCFRAction
+            );
+          }
+        }
+      } catch (e) {
+        MessageLoaderUtils._handleRemoteSettingsUndesiredEvent(
+          "ASR_RS_ERROR",
+          provider.id,
+          options.dispatchCFRAction
+        );
+        MessageLoaderUtils.reportError(e);
+      }
+    }
+    return messages;
+  },
+
+  /**
+   * Fetch messages from a given collection in Remote Settings.
+   *
+   * @param {string} collection The remote settings collection identifier
+   * @returns {Promise<object[]>} Resolves with an array of messages
+   */
+  _getRemoteSettingsMessages(collection) {
+    return RemoteSettings(collection).get();
+  },
+
+  /**
+   * Return messages from active Nimbus experiments and rollouts.
+   *
+   * @param {object} provider A messaging experiments provider.
+   * @param {string[]?} provider.featureIds
+   *                    An optional array of Nimbus feature IDs to check for
+   *                    enrollments. If not provided, we will fall back to the
+   *                    set of default features. Otherwise, if provided and
+   *                    empty, we will not ingest messages from any features.
+   *
+   * @return {object[]} The list of messages from active enrollments, as well as
+   *                    the messages defined in unenrolled branches so that they
+   *                    reach events can be recorded (if we record reach events
+   *                    for that feature).
+   */
+  async _experimentsAPILoader(provider) {
+    // Allow tests to override the set of featureIds
+    const featureIds = Array.isArray(provider.featureIds)
+      ? provider.featureIds
+      : MESSAGING_EXPERIMENTS_DEFAULT_FEATURES;
+    let experiments = [];
+    for (const featureId of featureIds) {
+      const featureAPI = lazy.NimbusFeatures[featureId];
+      const experimentData = lazy.ExperimentAPI.getExperimentMetaData({
+        featureId,
+      });
+
+      // We are not enrolled in any experiment or rollout for this feature, so
+      // we can skip the feature.
+      if (
+        !experimentData &&
+        !lazy.ExperimentAPI.getRolloutMetaData({ featureId })
+      ) {
+        continue;
+      }
+
+      const featureValue = featureAPI.getAllVariables();
+
+      // If the value is a multi-message config, add each message in the
+      // messages array. Cache the Nimbus feature ID on each message, because
+      // there is not a 1-1 correspondance between templates and features.
+      // This is used when recording expose events (see |sendTriggerMessage|).
+      const messages =
+        featureValue?.template === "multi" &&
+        Array.isArray(featureValue.messages)
+          ? featureValue.messages
+          : [featureValue];
+      for (const message of messages) {
+        if (message?.id) {
+          message._nimbusFeature = featureId;
+          experiments.push(message);
+        }
+      }
+
+      // Add Reach messages from unenrolled sibling branches, provided we are
+      // recording Reach events for this feature. If we are in a rollout, we do
+      // not have sibling branches.
+      if (!REACH_EVENT_GROUPS.includes(featureId) || !experimentData) {
+        continue;
+      }
+
+      // Check other sibling branches for triggers, add them to the return array
+      // if found any. The `forReachEvent` label is used to identify those
+      // branches so that they would only be used to record the Reach event.
+      const branches =
+        (await lazy.ExperimentAPI.getAllBranches(experimentData.slug)) || [];
+      for (const branch of branches) {
+        let branchValue = branch[featureId].value;
+        if (!branchValue || branch.slug === experimentData.branch.slug) {
+          continue;
+        }
+        const branchMessages =
+          branchValue?.template === "multi" &&
+          Array.isArray(branchValue.messages)
+            ? branchValue.messages
+            : [branchValue];
+        for (const message of branchMessages) {
+          if (!message?.trigger) {
+            continue;
+          }
+          experiments.push({
+            forReachEvent: { sent: false, group: featureId },
+            experimentSlug: experimentData.slug,
+            branchSlug: branch.slug,
+            ...message,
+          });
+        }
+      }
+    }
+
+    return experiments;
+  },
+
+  _handleRemoteSettingsUndesiredEvent(event, providerId, dispatchCFRAction) {
+    if (dispatchCFRAction) {
+      dispatchCFRAction(
+        ac.ASRouterUserEvent({
+          action: "asrouter_undesired_event",
+          event,
+          message_id: "n/a",
+          event_context: providerId,
+        })
+      );
+    }
+  },
+
+  /**
+   * _getMessageLoader - return the right loading function given the provider's type
+   *
+   * @param {obj} provider An AS Router provider
+   * @returns {func} A loading function
+   */
+  _getMessageLoader(provider) {
+    switch (provider.type) {
+      case "remote":
+        return this._remoteLoader;
+      case "remote-settings":
+        return this._remoteSettingsLoader;
+      case "remote-experiments":
+        return this._experimentsAPILoader;
+      case "local":
+      default:
+        return this._localLoader;
+    }
+  },
+
+  /**
+   * shouldProviderUpdate - Given the current time, should a provider update its messages?
+   *
+   * @param {any} provider An AS Router provider
+   * @param {int} provider.updateCycleInMs The number of milliseconds we should wait between updates
+   * @param {Date} provider.lastUpdated If the provider has been updated, the time the last update occurred
+   * @param {Date} currentTime The time we should check against. (defaults to Date.now())
+   * @returns {bool} Should an update happen?
+   */
+  shouldProviderUpdate(provider, currentTime = Date.now()) {
+    return (
+      !(provider.lastUpdated >= 0) ||
+      currentTime - provider.lastUpdated > provider.updateCycleInMs
+    );
+  },
+
+  async _loadDataForProvider(provider, options) {
+    const loader = this._getMessageLoader(provider);
+    let messages = await loader(provider, options);
+    // istanbul ignore if
+    if (!messages) {
+      messages = [];
+      MessageLoaderUtils.reportError(
+        new Error(
+          `Tried to load messages for ${provider.id} but the result was not an Array.`
+        )
+      );
+    }
+
+    return { messages };
+  },
+
+  /**
+   * loadMessagesForProvider - Load messages for a provider, given the provider's type.
+   *
+   * @param {obj} provider An AS Router provider
+   * @param {string} provider.type An AS Router provider type (defaults to "local")
+   * @param {obj} options.storage A storage object with get() and set() methods for caching.
+   * @param {func} options.dispatchCFRAction dispatch an action the main AS Store
+   * @returns {obj} Returns an object with .messages (an array of messages) and .lastUpdated (the time the messages were updated)
+   */
+  async loadMessagesForProvider(provider, options) {
+    let { messages } = await this._loadDataForProvider(provider, options);
+    // Filter out messages we temporarily want to exclude
+    if (provider.exclude && provider.exclude.length) {
+      messages = messages.filter(
+        message => !provider.exclude.includes(message.id)
+      );
+    }
+    const lastUpdated = Date.now();
+    return {
+      messages: messages
+        .map(messageData => {
+          const message = {
+            weight: 100,
+            ...messageData,
+            groups: messageData.groups || [],
+            provider: provider.id,
+          };
+
+          return message;
+        })
+        .filter(message => message.weight > 0),
+      lastUpdated,
+      errors: MessageLoaderUtils.errors,
+    };
+  },
+
+  /**
+   * cleanupCache - Removes cached data of removed providers.
+   *
+   * @param {Array} providers A list of activer AS Router providers
+   */
+  async cleanupCache(providers, storage) {
+    const ids = providers.filter(p => p.type === "remote").map(p => p.id);
+    const cache = await MessageLoaderUtils._remoteLoaderCache(storage);
+    let dirty = false;
+    for (let id in cache) {
+      if (!ids.includes(id)) {
+        delete cache[id];
+        dirty = true;
+      }
+    }
+    if (dirty) {
+      await storage.set(MessageLoaderUtils.REMOTE_LOADER_CACHE_KEY, cache);
+    }
+  },
+
+  /**
+   * The locale to use for RemoteL10n.
+   *
+   * This may map the app's actual locale into something that RemoteL10n
+   * supports.
+   */
+  get locale() {
+    const localeMap = {
+      "ja-JP-macos": "ja-JP-mac",
+
+      // While it's not a valid locale, "und" is commonly observed on
+      // Linux platforms. Per l10n team, it's reasonable to fallback to
+      // "en-US", therefore, we should allow the fetch for it.
+      und: "en-US",
+    };
+
+    const locale = Services.locale.appLocaleAsBCP47;
+    return localeMap[locale] ?? locale;
+  },
+};
+
+/**
+ * @class _ASRouter - Keeps track of all messages, UI surfaces, and
+ * handles blocking, rotation, etc. Inspecting ASRouter.state will
+ * tell you what the current displayed message is in all UI surfaces.
+ *
+ * Note: This is written as a constructor rather than just a plain object
+ * so that it can be more easily unit tested.
+ */
+export class _ASRouter {
+  constructor(localProviders = LOCAL_MESSAGE_PROVIDERS) {
+    this.initialized = false;
+    this.clearChildMessages = null;
+    this.clearChildProviders = null;
+    this.updateAdminState = null;
+    this.sendTelemetry = null;
+    this.dispatchCFRAction = null;
+    this._storage = null;
+    this._resetInitialization();
+    this._state = {
+      providers: [],
+      messageBlockList: [],
+      messageImpressions: {},
+      screenImpressions: {},
+      messages: [],
+      groups: [],
+      errors: [],
+      localeInUse: Services.locale.appLocaleAsBCP47,
+    };
+    this._experimentChangedListeners = new Map();
+    this._triggerHandler = this._triggerHandler.bind(this);
+    this._localProviders = localProviders;
+    this.blockMessageById = this.blockMessageById.bind(this);
+    this.unblockMessageById = this.unblockMessageById.bind(this);
+    this.handleMessageRequest = this.handleMessageRequest.bind(this);
+    this.addImpression = this.addImpression.bind(this);
+    this.addScreenImpression = this.addScreenImpression.bind(this);
+    this._handleTargetingError = this._handleTargetingError.bind(this);
+    this.onPrefChange = this.onPrefChange.bind(this);
+    this._onLocaleChanged = this._onLocaleChanged.bind(this);
+    this.isUnblockedMessage = this.isUnblockedMessage.bind(this);
+    this.unblockAll = this.unblockAll.bind(this);
+    this.forceWNPanel = this.forceWNPanel.bind(this);
+    this._onExperimentEnrollmentsUpdated =
+      this._onExperimentEnrollmentsUpdated.bind(this);
+    this.forcePBWindow = this.forcePBWindow.bind(this);
+    Services.telemetry.setEventRecordingEnabled(REACH_EVENT_CATEGORY, true);
+    this.messagesEnabledInAutomation = [];
+  }
+
+  async onPrefChange(prefName) {
+    if (lazy.TARGETING_PREFERENCES.includes(prefName)) {
+      let invalidMessages = [];
+      // Notify all tabs of messages that have become invalid after pref change
+      const context = this._getMessagesContext();
+      const targetingContext = new lazy.TargetingContext(context);
+
+      for (const msg of this.state.messages.filter(this.isUnblockedMessage)) {
+        if (!msg.targeting) {
+          continue;
+        }
+        const isMatch = await targetingContext.evalWithDefault(msg.targeting);
+        if (!isMatch) {
+          invalidMessages.push(msg.id);
+        }
+      }
+      this.clearChildMessages(invalidMessages);
+    } else {
+      // Update message providers and fetch new messages on pref change
+      this._loadLocalProviders();
+      let invalidProviders = await this._updateMessageProviders();
+      if (invalidProviders.length) {
+        this.clearChildProviders(invalidProviders);
+      }
+      await this.loadMessagesFromAllProviders();
+      // Any change in user prefs can disable or enable groups
+      await this.setState(state => ({
+        groups: state.groups.map(this._checkGroupEnabled),
+      }));
+    }
+  }
+
+  // Fetch and decode the message provider pref JSON, and update the message providers
+  async _updateMessageProviders() {
+    lazy.ASRouterPreferences.console.debug("entering updateMessageProviders");
+
+    const previousProviders = this.state.providers;
+    const providers = await Promise.all(
+      [
+        // If we have added a `preview` provider, hold onto it
+        ...previousProviders.filter(p => p.id === "preview"),
+        // The provider should be enabled and not have a user preference set to false
+        ...lazy.ASRouterPreferences.providers.filter(
+          p =>
+            p.enabled &&
+            lazy.ASRouterPreferences.getUserPreference(p.id) !== false
+        ),
+      ].map(async _provider => {
+        // make a copy so we don't modify the source of the pref
+        const provider = { ..._provider };
+
+        if (provider.type === "local" && !provider.messages) {
+          // Get the messages from the local message provider
+          const localProvider = this._localProviders[provider.localProvider];
+          provider.messages = [];
+          if (localProvider) {
+            provider.messages = await localProvider.getMessages();
+          }
+        }
+        if (provider.type === "remote" && provider.url) {
+          provider.url = provider.url.replace(
+            /%STARTPAGE_VERSION%/g,
+            STARTPAGE_VERSION
+          );
+          provider.url = Services.urlFormatter.formatURL(provider.url);
+        }
+        if (provider.id === "messaging-experiments") {
+          // By default, the messaging-experiments provider lacks a featureIds
+          // property, so fall back to the list of default features.
+          if (!provider.featureIds) {
+            provider.featureIds = MESSAGING_EXPERIMENTS_DEFAULT_FEATURES;
+          }
+        }
+        // Reset provider update timestamp to force message refresh
+        provider.lastUpdated = undefined;
+        return provider;
+      })
+    );
+
+    const providerIDs = providers.map(p => p.id);
+    let invalidProviders = [];
+
+    // Clear old messages for providers that are no longer enabled
+    for (const prevProvider of previousProviders) {
+      if (!providerIDs.includes(prevProvider.id)) {
+        invalidProviders.push(prevProvider.id);
+      }
+    }
+
+    return this.setState(prevState => ({
+      providers,
+      // Clear any messages from removed providers
+      messages: [
+        ...prevState.messages.filter(message =>
+          providerIDs.includes(message.provider)
+        ),
+      ],
+    })).then(() => invalidProviders);
+  }
+
+  get state() {
+    return this._state;
+  }
+
+  set state(value) {
+    throw new Error(
+      "Do not modify this.state directy. Instead, call this.setState(newState)"
+    );
+  }
+
+  /**
+   * _resetInitialization - adds the following to the instance:
+   *  .initialized {bool}            Has AS Router been initialized?
+   *  .waitForInitialized {Promise}  A promise that resolves when initializion is complete
+   *  ._finishInitializing {func}    A function that, when called, resolves the .waitForInitialized
+   *                                 promise and sets .initialized to true.
+   * @memberof _ASRouter
+   */
+  _resetInitialization() {
+    this.initialized = false;
+    this.initializing = false;
+    this.waitForInitialized = new Promise(resolve => {
+      this._finishInitializing = () => {
+        this.initialized = true;
+        this.initializing = false;
+        resolve();
+      };
+    });
+  }
+
+  /**
+   * Check all provided groups are enabled.
+   * @param groups Set of groups to verify
+   * @returns bool
+   */
+  hasGroupsEnabled(groups = []) {
+    return this.state.groups
+      .filter(({ id }) => groups.includes(id))
+      .every(({ enabled }) => enabled);
+  }
+
+  /**
+   * Verify that the provider block the message through the `exclude` field
+   * @param message Message to verify
+   * @returns bool
+   */
+  isExcludedByProvider(message) {
+    const provider = this.state.providers.find(p => p.id === message.provider);
+    if (!provider) {
+      return true;
+    }
+    if (provider.exclude) {
+      return provider.exclude.includes(message.id);
+    }
+    return false;
+  }
+
+  /**
+   * Takes a group and sets the correct `enabled` state based on message config
+   * and user preferences
+   *
+   * @param {GroupConfig} group
+   * @returns {GroupConfig}
+   */
+  _checkGroupEnabled(group) {
+    return {
+      ...group,
+      enabled:
+        group.enabled &&
+        // And if defined user preferences are true. If multiple prefs are
+        // defined then at least one has to be enabled.
+        (Array.isArray(group.userPreferences)
+          ? group.userPreferences.some(pref =>
+              lazy.ASRouterPreferences.getUserPreference(pref)
+            )
+          : true),
+    };
+  }
+
+  /**
+   * Fetch all message groups and update Router.state.groups.
+   * There are two cases to consider:
+   * 1. The provider needs to update as determined by the update cycle
+   * 2. Some pref change occured which could invalidate one of the existing
+   *    groups.
+   */
+  async loadAllMessageGroups() {
+    const provider = this.state.providers.find(
+      p =>
+        p.id === "message-groups" && MessageLoaderUtils.shouldProviderUpdate(p)
+    );
+    let remoteMessages = null;
+    if (provider) {
+      const { messages } = await MessageLoaderUtils._loadDataForProvider(
+        provider,
+        {
+          storage: this._storage,
+          dispatchCFRAction: this.dispatchCFRAction,
+        }
+      );
+      remoteMessages = messages;
+    }
+    await this.setState(state => ({
+      // If fetching remote messages fails we default to existing state.groups.
+      groups: (remoteMessages || state.groups).map(this._checkGroupEnabled),
+    }));
+  }
+
+  /**
+   * loadMessagesFromAllProviders - Loads messages from all providers if they require updates.
+   *                                Checks the .lastUpdated field on each provider to see if updates are needed
+   * @param toUpdate  An optional list of providers to update. This overrides
+   *                  the checks to determine which providers to update.
+   * @memberof _ASRouter
+   */
+  async loadMessagesFromAllProviders(toUpdate = undefined) {
+    const needsUpdate = Array.isArray(toUpdate)
+      ? toUpdate
+      : this.state.providers.filter(provider =>
+          MessageLoaderUtils.shouldProviderUpdate(provider)
+        );
+    lazy.ASRouterPreferences.console.debug(
+      "entering loadMessagesFromAllProviders"
+    );
+
+    await this.loadAllMessageGroups();
+    // Don't do extra work if we don't need any updates
+    if (needsUpdate.length) {
+      let newState = { messages: [], providers: [] };
+      for (const provider of this.state.providers) {
+        if (needsUpdate.includes(provider)) {
+          const { messages, lastUpdated, errors } =
+            await MessageLoaderUtils.loadMessagesForProvider(provider, {
+              storage: this._storage,
+              dispatchCFRAction: this.dispatchCFRAction,
+            });
+          newState.providers.push({ ...provider, lastUpdated, errors });
+          newState.messages = [...newState.messages, ...messages];
+        } else {
+          // Skip updating this provider's messages if no update is required
+          let messages = this.state.messages.filter(
+            msg => msg.provider === provider.id
+          );
+          newState.providers.push(provider);
+          newState.messages = [...newState.messages, ...messages];
+        }
+      }
+
+      // Some messages have triggers that require us to initalise trigger listeners
+      const unseenListeners = new Set(lazy.ASRouterTriggerListeners.keys());
+      for (const { trigger } of newState.messages) {
+        if (trigger && lazy.ASRouterTriggerListeners.has(trigger.id)) {
+          lazy.ASRouterTriggerListeners.get(trigger.id).init(
+            this._triggerHandler,
+            trigger.params,
+            trigger.patterns
+          );
+          unseenListeners.delete(trigger.id);
+        }
+      }
+      // We don't need these listeners, but they may have previously been
+      // initialised, so uninitialise them
+      for (const triggerID of unseenListeners) {
+        lazy.ASRouterTriggerListeners.get(triggerID).uninit();
+      }
+
+      await this.setState(newState);
+      await this.cleanupImpressions();
+    }
+
+    await this._fireMessagesLoadedTrigger();
+
+    return this.state;
+  }
+
+  async _fireMessagesLoadedTrigger() {
+    const win = Services.wm.getMostRecentBrowserWindow() ?? null;
+    const browser = win?.gBrowser?.selectedBrowser ?? null;
+    // pass skipLoadingMessages to avoid infinite recursion. pass browser and
+    // window into context so messages that may need a window or browser can
+    // target accordingly.
+    await this.sendTriggerMessage(
+      {
+        id: "messagesLoaded",
+        browser,
+        context: { browser, browserWindow: win },
+      },
+      true
+    );
+  }
+
+  async _maybeUpdateL10nAttachment() {
+    const { localeInUse } = this.state.localeInUse;
+    const newLocale = Services.locale.appLocaleAsBCP47;
+    if (newLocale !== localeInUse) {
+      const providers = [...this.state.providers];
+      let needsUpdate = false;
+      providers.forEach(provider => {
+        if (RS_PROVIDERS_WITH_L10N.includes(provider.id)) {
+          // Force to refresh the messages as well as the attachment.
+          provider.lastUpdated = undefined;
+          needsUpdate = true;
+        }
+      });
+      if (needsUpdate) {
+        await this.setState({
+          localeInUse: newLocale,
+          providers,
+        });
+        await this.loadMessagesFromAllProviders();
+      }
+    }
+    return this.state;
+  }
+
+  async _onLocaleChanged(subject, topic, data) {
+    await this._maybeUpdateL10nAttachment();
+  }
+
+  observe(aSubject, aTopic, aPrefName) {
+    switch (aPrefName) {
+      case USE_REMOTE_L10N_PREF:
+        CFRPageActions.reloadL10n();
+        break;
+    }
+  }
+
+  toWaitForInitFunc(func) {
+    return (...args) => this.waitForInitialized.then(() => func(...args));
+  }
+
+  /**
+   * init - Initializes the MessageRouter.
+   *
+   * @param {obj} parameters parameters to initialize ASRouter
+   * @memberof _ASRouter
+   */
+  async init({
+    storage,
+    sendTelemetry,
+    clearChildMessages,
+    clearChildProviders,
+    updateAdminState,
+    dispatchCFRAction,
+  }) {
+    if (this.initializing || this.initialized) {
+      return null;
+    }
+    this.initializing = true;
+    this._storage = storage;
+    this.ALLOWLIST_HOSTS = this._loadAllowHosts();
+    this.clearChildMessages = this.toWaitForInitFunc(clearChildMessages);
+    this.clearChildProviders = this.toWaitForInitFunc(clearChildProviders);
+    // NOTE: This is only necessary to sync devtools when devtools is active.
+    this.updateAdminState = this.toWaitForInitFunc(updateAdminState);
+    this.sendTelemetry = sendTelemetry;
+    this.dispatchCFRAction = this.toWaitForInitFunc(dispatchCFRAction);
+
+    lazy.ASRouterPreferences.init();
+    lazy.ASRouterPreferences.addListener(this.onPrefChange);
+    lazy.ToolbarBadgeHub.init(this.waitForInitialized, {
+      handleMessageRequest: this.handleMessageRequest,
+      addImpression: this.addImpression,
+      blockMessageById: this.blockMessageById,
+      unblockMessageById: this.unblockMessageById,
+      sendTelemetry: this.sendTelemetry,
+    });
+    lazy.ToolbarPanelHub.init(this.waitForInitialized, {
+      getMessages: this.handleMessageRequest,
+      sendTelemetry: this.sendTelemetry,
+    });
+    lazy.MomentsPageHub.init(this.waitForInitialized, {
+      handleMessageRequest: this.handleMessageRequest,
+      addImpression: this.addImpression,
+      blockMessageById: this.blockMessageById,
+      sendTelemetry: this.sendTelemetry,
+    });
+
+    this._loadLocalProviders();
+
+    const messageBlockList =
+      (await this._storage.get("messageBlockList")) || [];
+    const messageImpressions =
+      (await this._storage.get("messageImpressions")) || {};
+    const groupImpressions =
+      (await this._storage.get("groupImpressions")) || {};
+    const screenImpressions =
+      (await this._storage.get("screenImpressions")) || {};
+    const previousSessionEnd =
+      (await this._storage.get("previousSessionEnd")) || 0;
+
+    await this.setState({
+      messageBlockList,
+      groupImpressions,
+      messageImpressions,
+      screenImpressions,
+      previousSessionEnd,
+      ...(lazy.ASRouterPreferences.specialConditions || {}),
+      initialized: false,
+    });
+    await this._updateMessageProviders();
+    await this.loadMessagesFromAllProviders();
+    await MessageLoaderUtils.cleanupCache(this.state.providers, storage);
+
+    lazy.SpecialMessageActions.blockMessageById = this.blockMessageById;
+    Services.obs.addObserver(this._onLocaleChanged, TOPIC_INTL_LOCALE_CHANGED);
+    Services.obs.addObserver(
+      this._onExperimentEnrollmentsUpdated,
+      TOPIC_EXPERIMENT_ENROLLMENT_CHANGED
+    );
+    Services.prefs.addObserver(USE_REMOTE_L10N_PREF, this);
+    // sets .initialized to true and resolves .waitForInitialized promise
+    this._finishInitializing();
+    return this.state;
+  }
+
+  uninit() {
+    this._storage.set("previousSessionEnd", Date.now());
+
+    this.clearChildMessages = null;
+    this.clearChildProviders = null;
+    this.updateAdminState = null;
+    this.sendTelemetry = null;
+    this.dispatchCFRAction = null;
+
+    lazy.ASRouterPreferences.removeListener(this.onPrefChange);
+    lazy.ASRouterPreferences.uninit();
+    lazy.ToolbarPanelHub.uninit();
+    lazy.ToolbarBadgeHub.uninit();
+    lazy.MomentsPageHub.uninit();
+
+    // Uninitialise all trigger listeners
+    for (const listener of lazy.ASRouterTriggerListeners.values()) {
+      listener.uninit();
+    }
+    Services.obs.removeObserver(
+      this._onLocaleChanged,
+      TOPIC_INTL_LOCALE_CHANGED
+    );
+    Services.obs.removeObserver(
+      this._onExperimentEnrollmentsUpdated,
+      TOPIC_EXPERIMENT_ENROLLMENT_CHANGED
+    );
+    Services.prefs.removeObserver(USE_REMOTE_L10N_PREF, this);
+    // If we added any CFR recommendations, they need to be removed
+    CFRPageActions.clearRecommendations();
+    this._resetInitialization();
+  }
+
+  setState(callbackOrObj) {
+    lazy.ASRouterPreferences.console.debug(
+      "in setState, callbackOrObj = ",
+      callbackOrObj
+    );
+    lazy.ASRouterPreferences.console.trace();
+    const newState =
+      typeof callbackOrObj === "function"
+        ? callbackOrObj(this.state)
+        : callbackOrObj;
+    this._state = {
+      ...this.state,
+      ...newState,
+    };
+    if (lazy.ASRouterPreferences.devtoolsEnabled) {
+      return this.updateTargetingParameters().then(state => {
+        this.updateAdminState(state);
+        return state;
+      });
+    }
+    return Promise.resolve(this.state);
+  }
+
+  updateTargetingParameters() {
+    return this.getTargetingParameters(
+      lazy.ASRouterTargeting.Environment,
+      this._getMessagesContext()
+    ).then(targetingParameters => ({
+      ...this.state,
+      providerPrefs: lazy.ASRouterPreferences.providers,
+      userPrefs: lazy.ASRouterPreferences.getAllUserPreferences(),
+      targetingParameters,
+      errors: this.errors,
+      devtoolsEnabled: lazy.ASRouterPreferences.devtoolsEnabled,
+    }));
+  }
+
+  getMessageById(id) {
+    return this.state.messages.find(message => message.id === id);
+  }
+
+  _loadLocalProviders() {
+    // If we're in ASR debug mode add the local test providers
+    if (lazy.ASRouterPreferences.devtoolsEnabled) {
+      this._localProviders = {
+        ...this._localProviders,
+        PanelTestProvider: lazy.PanelTestProvider,
+      };
+    }
+  }
+
+  /**
+   * Used by ASRouter Admin returns all ASRouterTargeting.Environment
+   * and ASRouter._getMessagesContext parameters and values
+   */
+  async getTargetingParameters(environment, localContext) {
+    // Resolve objects that may contain promises.
+    async function resolve(object) {
+      if (typeof object === "object" && object !== null) {
+        if (Array.isArray(object)) {
+          return Promise.all(object.map(async item => resolve(await item)));
+        }
+
+        if (object instanceof Date) {
+          return object;
+        }
+
+        const target = {};
+        const promises = Object.entries(object).map(async ([key, value]) => {
+          try {
+            let resolvedValue = await resolve(await value);
+            return [key, resolvedValue];
+          } catch (error) {
+            lazy.ASRouterPreferences.console.debug(
+              `getTargetingParameters: Error resolving ${key}: `,
+              error
+            );
+            throw error;
+          }
+        });
+        for (const { status, value } of await Promise.allSettled(promises)) {
+          if (status === "fulfilled") {
+            const [key, resolvedValue] = value;
+            target[key] = resolvedValue;
+          }
+        }
+        return target;
+      }
+
+      return object;
+    }
+
+    const targetingParameters = {
+      ...(await resolve(environment)),
+      ...(await resolve(localContext)),
+    };
+
+    return targetingParameters;
+  }
+
+  _handleTargetingError(error, message) {
+    console.error(error);
+    this.dispatchCFRAction(
+      ac.ASRouterUserEvent({
+        message_id: message.id,
+        action: "asrouter_undesired_event",
+        event: "TARGETING_EXPRESSION_ERROR",
+        event_context: {},
+      })
+    );
+  }
+
+  // Return an object containing targeting parameters used to select messages
+  _getMessagesContext() {
+    const { messageImpressions, previousSessionEnd, screenImpressions } =
+      this.state;
+
+    return {
+      get messageImpressions() {
+        return messageImpressions;
+      },
+      get previousSessionEnd() {
+        return previousSessionEnd;
+      },
+      get screenImpressions() {
+        return screenImpressions;
+      },
+    };
+  }
+
+  async evaluateExpression({ expression, context }) {
+    const targetingContext = new lazy.TargetingContext(context);
+    let evaluationStatus;
+    try {
+      evaluationStatus = {
+        result: await targetingContext.evalWithDefault(expression),
+        success: true,
+      };
+    } catch (e) {
+      evaluationStatus = { result: e.message, success: false };
+    }
+    return Promise.resolve({ evaluationStatus });
+  }
+
+  unblockAll() {
+    return this.setState({ messageBlockList: [] });
+  }
+
+  isUnblockedMessage(message) {
+    const { state } = this;
+    return (
+      !state.messageBlockList.includes(message.id) &&
+      (!message.campaign ||
+        !state.messageBlockList.includes(message.campaign)) &&
+      this.hasGroupsEnabled(message.groups) &&
+      !this.isExcludedByProvider(message)
+    );
+  }
+
+  // Work out if a message can be shown based on its and its provider's frequency caps.
+  isBelowFrequencyCaps(message) {
+    const { messageImpressions, groupImpressions } = this.state;
+    const impressionsForMessage = messageImpressions[message.id];
+
+    const _belowItemFrequencyCap = this._isBelowItemFrequencyCap(
+      message,
+      impressionsForMessage,
+      MAX_MESSAGE_LIFETIME_CAP
+    );
+    if (!_belowItemFrequencyCap) {
+      lazy.ASRouterPreferences.console.debug(
+        `isBelowFrequencyCaps: capped by item: `,
+        message,
+        "impressions =",
+        impressionsForMessage
+      );
+    }
+
+    const _belowGroupFrequencyCaps = message.groups.every(messageGroup => {
+      const belowThisGroupCap = this._isBelowItemFrequencyCap(
+        this.state.groups.find(({ id }) => id === messageGroup),
+        groupImpressions[messageGroup]
+      );
+
+      if (!belowThisGroupCap) {
+        lazy.ASRouterPreferences.console.debug(
+          `isBelowFrequencyCaps: ${message.id} capped by group ${messageGroup}`
+        );
+      } else {
+        lazy.ASRouterPreferences.console.debug(
+          `isBelowFrequencyCaps: ${message.id} allowed by group ${messageGroup}, groupImpressions = `,
+          groupImpressions
+        );
+      }
+
+      return belowThisGroupCap;
+    });
+
+    return _belowItemFrequencyCap && _belowGroupFrequencyCaps;
+  }
+
+  // Helper for isBelowFrecencyCaps - work out if the frequency cap for the given
+  //                                  item has been exceeded or not
+  _isBelowItemFrequencyCap(item, impressions, maxLifetimeCap = Infinity) {
+    if (item && item.frequency && impressions && impressions.length) {
+      if (
+        item.frequency.lifetime &&
+        impressions.length >= Math.min(item.frequency.lifetime, maxLifetimeCap)
+      ) {
+        lazy.ASRouterPreferences.console.debug(
+          `${item.id} capped by lifetime (${item.frequency.lifetime})`
+        );
+
+        return false;
+      }
+      if (item.frequency.custom) {
+        const now = Date.now();
+        for (const setting of item.frequency.custom) {
+          let { period } = setting;
+          const impressionsInPeriod = impressions.filter(t => now - t < period);
+          if (impressionsInPeriod.length >= setting.cap) {
+            lazy.ASRouterPreferences.console.debug(
+              `${item.id} capped by impressions (${impressionsInPeriod.length}) in period (${period}) >= ${setting.cap}`
+            );
+            return false;
+          }
+        }
+      }
+    }
+    return true;
+  }
+
+  async _extraTemplateStrings(originalMessage) {
+    let extraTemplateStrings;
+    let localProvider = this._findProvider(originalMessage.provider);
+    if (localProvider && localProvider.getExtraAttributes) {
+      extraTemplateStrings = await localProvider.getExtraAttributes();
+    }
+
+    return extraTemplateStrings;
+  }
+
+  _findProvider(providerID) {
+    return this._localProviders[
+      this.state.providers.find(i => i.id === providerID).localProvider
+    ];
+  }
+
+  routeCFRMessage(message, browser, trigger, force = false) {
+    if (!message) {
+      return { message: {} };
+    }
+
+    // filter out messages we want to exclude from tests
+    if (
+      message.skip_in_tests &&
+      // `this.messagesEnabledInAutomation` should be stubbed in tests
+      !this.messagesEnabledInAutomation?.includes(message.id) &&
+      (Cu.isInAutomation ||
+        Services.env.exists("XPCSHELL_TEST_PROFILE_DIR") ||
+        Services.env.get("MOZ_AUTOMATION"))
+    ) {
+      lazy.log.debug(
+        `Skipping message ${message.id} because ${message.skip_in_tests}`
+      );
+      return { message: {} };
+    }
+
+    switch (message.template) {
+      case "whatsnew_panel_message":
+        if (force) {
+          lazy.ToolbarPanelHub.forceShowMessage(browser, message);
+        }
+        break;
+      case "cfr_doorhanger":
+      case "milestone_message":
+        if (force) {
+          CFRPageActions.forceRecommendation(
+            browser,
+            message,
+            this.dispatchCFRAction
+          );
+        } else {
+          CFRPageActions.addRecommendation(
+            browser,
+            trigger.param && trigger.param.host,
+            message,
+            this.dispatchCFRAction
+          );
+        }
+        break;
+      case "cfr_urlbar_chiclet":
+        if (force) {
+          CFRPageActions.forceRecommendation(
+            browser,
+            message,
+            this.dispatchCFRAction
+          );
+        } else {
+          CFRPageActions.addRecommendation(
+            browser,
+            null,
+            message,
+            this.dispatchCFRAction
+          );
+        }
+        break;
+      case "toolbar_badge":
+        lazy.ToolbarBadgeHub.registerBadgeNotificationListener(message, {
+          force,
+        });
+        break;
+      case "update_action":
+        lazy.MomentsPageHub.executeAction(message);
+        break;
+      case "infobar":
+        lazy.InfoBar.showInfoBarMessage(
+          browser,
+          message,
+          this.dispatchCFRAction
+        );
+        break;
+      case "spotlight":
+        lazy.Spotlight.showSpotlightDialog(
+          browser,
+          message,
+          this.dispatchCFRAction
+        );
+        break;
+      case "feature_callout":
+        // featureCalloutCheck only comes from within FeatureCallout, where it
+        // is used to request a matching message. It is not a real trigger.
+        // pdfJsFeatureCalloutCheck is used for PDF.js feature callouts, which
+        // are managed by the trigger listener itself.
+        switch (trigger.id) {
+          case "featureCalloutCheck":
+          case "pdfJsFeatureCalloutCheck":
+          case "newtabFeatureCalloutCheck":
+            break;
+          default:
+            lazy.FeatureCalloutBroker.showFeatureCallout(browser, message);
+        }
+        break;
+      case "toast_notification":
+        lazy.ToastNotification.showToastNotification(
+          message,
+          this.dispatchCFRAction
+        );
+        break;
+    }
+
+    return { message };
+  }
+
+  addScreenImpression(screen) {
+    lazy.ASRouterPreferences.console.debug(
+      `entering addScreenImpression for ${screen.id}`
+    );
+
+    const time = Date.now();
+
+    let screenImpressions = { ...this.state.screenImpressions };
+    screenImpressions[screen.id] = time;
+
+    this.setState({ screenImpressions });
+    lazy.ASRouterPreferences.console.debug(
+      screen.id,
+      `screen impression added, screenImpressions[screen.id]: `,
+      screenImpressions[screen.id]
+    );
+    this._storage.set("screenImpressions", screenImpressions);
+  }
+
+  addImpression(message) {
+    lazy.ASRouterPreferences.console.debug(
+      `entering addImpression for ${message.id}`
+    );
+
+    const groupsWithFrequency = this.state.groups?.filter(
+      ({ frequency, id }) => frequency && message.groups?.includes(id)
+    );
+    // We only need to store impressions for messages that have frequency, or
+    // that have providers that have frequency
+    if (message.frequency || groupsWithFrequency.length) {
+      const time = Date.now();
+      return this.setState(state => {
+        const messageImpressions = this._addImpressionForItem(
+          state.messageImpressions,
+          message,
+          "messageImpressions",
+          time
+        );
+        // Initialize this with state.groupImpressions, and then assign the
+        // newly-updated copy to it during each iteration so that
+        // all the changes get captured and either returned or passed into the
+        // _addImpressionsForItem call on the next iteration.
+        let { groupImpressions } = state;
+        for (const group of groupsWithFrequency) {
+          groupImpressions = this._addImpressionForItem(
+            groupImpressions,
+            group,
+            "groupImpressions",
+            time
+          );
+        }
+
+        return { messageImpressions, groupImpressions };
+      });
+    }
+    return Promise.resolve();
+  }
+
+  // Helper for addImpression - calculate the updated impressions object for the given
+  //                            item, then store it and return it
+  _addImpressionForItem(currentImpressions, item, impressionsString, time) {
+    // The destructuring here is to avoid mutating passed parameters
+    // (see https://redux.js.org/recipes/structuring-reducers/prerequisite-concepts#immutable-data-management)
+    const impressions = { ...currentImpressions };
+    if (item.frequency) {
+      impressions[item.id] = [...(impressions[item.id] ?? []), time];
+
+      lazy.ASRouterPreferences.console.debug(
+        item.id,
+        "impression added, impressions[item.id]: ",
+        impressions[item.id]
+      );
+
+      this._storage.set(impressionsString, impressions);
+    }
+    return impressions;
+  }
+
+  /**
+   * getLongestPeriod
+   *
+   * @param {obj} item Either an ASRouter message or an ASRouter provider
+   * @returns {int|null} if the item has custom frequency caps, the longest period found in the list of caps.
+                         if the item has no custom frequency caps, null
+   * @memberof _ASRouter
+   */
+  getLongestPeriod(item) {
+    if (!item.frequency || !item.frequency.custom) {
+      return null;
+    }
+    return item.frequency.custom.sort((a, b) => b.period - a.period)[0].period;
+  }
+
+  /**
+   * cleanupImpressions - this function cleans up obsolete impressions whenever
+   * messages are refreshed or fetched. It will likely need to be more sophisticated in the future,
+   * but the current behaviour for when both message impressions and provider impressions are
+   * cleared is as follows (where `item` is either `message` or `provider`):
+   *
+   * 1. If the item id for a list of item impressions no longer exists in the ASRouter state, it
+   *    will be cleared.
+   * 2. If the item has time-bound frequency caps but no lifetime cap, any item impressions older
+   *    than the longest time period will be cleared.
+   */
+  cleanupImpressions() {
+    return this.setState(state => {
+      const messageImpressions = this._cleanupImpressionsForItems(
+        state,
+        state.messages,
+        "messageImpressions"
+      );
+      const groupImpressions = this._cleanupImpressionsForItems(
+        state,
+        state.groups,
+        "groupImpressions"
+      );
+      return { messageImpressions, groupImpressions };
+    });
+  }
+
+  /** _cleanupImpressionsForItems - Helper for cleanupImpressions - calculate the updated
+  /*                                impressions object for the given items, then store it and return it
+   *
+   * @param {obj} state Reference to ASRouter internal state
+   * @param {array} items Can be messages, providers or groups that we count impressions for
+   * @param {string} impressionsString Key name for entry in state where impressions are stored
+   */
+  _cleanupImpressionsForItems(state, items, impressionsString) {
+    const impressions = { ...state[impressionsString] };
+    let needsUpdate = false;
+    Object.keys(impressions).forEach(id => {
+      const [item] = items.filter(x => x.id === id);
+      // Don't keep impressions for items that no longer exist
+      if (!item || !item.frequency || !Array.isArray(impressions[id])) {
+        lazy.ASRouterPreferences.console.debug(
+          "_cleanupImpressionsForItem: removing impressions for deleted or changed item: ",
+          item
+        );
+        lazy.ASRouterPreferences.console.trace();
+        delete impressions[id];
+        needsUpdate = true;
+        return;
+      }
+      if (!impressions[id].length) {
+        return;
+      }
+      // If we don't want to store impressions older than the longest period
+      if (item.frequency.custom && !item.frequency.lifetime) {
+        lazy.ASRouterPreferences.console.debug(
+          "_cleanupImpressionsForItem: removing impressions older than longest period for item: ",
+          item
+        );
+        const now = Date.now();
+        impressions[id] = impressions[id].filter(
+          t => now - t < this.getLongestPeriod(item)
+        );
+        needsUpdate = true;
+      }
+    });
+    if (needsUpdate) {
+      this._storage.set(impressionsString, impressions);
+    }
+    return impressions;
+  }
+
+  handleMessageRequest({
+    messages: candidates,
+    triggerId,
+    triggerParam,
+    triggerContext,
+    template,
+    provider,
+    ordered = false,
+    returnAll = false,
+  }) {
+    let shouldCache;
+    lazy.ASRouterPreferences.console.debug(
+      "in handleMessageRequest, arguments = ",
+      Array.from(arguments) // eslint-disable-line prefer-rest-params
+    );
+    lazy.ASRouterPreferences.console.trace();
+    const messages =
+      candidates ||
+      this.state.messages.filter(m => {
+        if (provider && m.provider !== provider) {
+          lazy.ASRouterPreferences.console.debug(m.id, " filtered by provider");
+          return false;
+        }
+        if (template && m.template !== template) {
+          lazy.ASRouterPreferences.console.debug(m.id, " filtered by template");
+          return false;
+        }
+        if (triggerId && !m.trigger) {
+          lazy.ASRouterPreferences.console.debug(m.id, " filtered by trigger");
+          return false;
+        }
+        if (triggerId && m.trigger.id !== triggerId) {
+          lazy.ASRouterPreferences.console.debug(
+            m.id,
+            " filtered by triggerId"
+          );
+          return false;
+        }
+        if (!this.isUnblockedMessage(m)) {
+          lazy.ASRouterPreferences.console.debug(
+            m.id,
+            " filtered because blocked"
+          );
+          return false;
+        }
+        if (!this.isBelowFrequencyCaps(m)) {
+          lazy.ASRouterPreferences.console.debug(
+            m.id,
+            " filtered because capped"
+          );
+          return false;
+        }
+
+        if (shouldCache !== false) {
+          shouldCache = JEXL_PROVIDER_CACHE.has(m.provider);
+        }
+
+        return true;
+      });
+
+    if (!messages.length) {
+      return returnAll ? messages : null;
+    }
+
+    const context = this._getMessagesContext();
+
+    // Find a message that matches the targeting context as well as the trigger context (if one is provided)
+    // If no trigger is provided, we should find a message WITHOUT a trigger property defined.
+    return lazy.ASRouterTargeting.findMatchingMessage({
+      messages,
+      trigger: triggerId && {
+        id: triggerId,
+        param: triggerParam,
+        context: triggerContext,
+      },
+      context,
+      onError: this._handleTargetingError,
+      ordered,
+      shouldCache,
+      returnAll,
+    });
+  }
+
+  setMessageById({ id, ...data }, force, browser) {
+    return this.routeCFRMessage(this.getMessageById(id), browser, data, force);
+  }
+
+  blockMessageById(idOrIds) {
+    lazy.ASRouterPreferences.console.debug(
+      "blockMessageById called, idOrIds = ",
+      idOrIds
+    );
+    lazy.ASRouterPreferences.console.trace();
+
+    const idsToBlock = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
+
+    return this.setState(state => {
+      const messageBlockList = [...state.messageBlockList];
+      const messageImpressions = { ...state.messageImpressions };
+
+      idsToBlock.forEach(id => {
+        const message = state.messages.find(m => m.id === id);
+        const idToBlock = message && message.campaign ? message.campaign : id;
+        if (!messageBlockList.includes(idToBlock)) {
+          messageBlockList.push(idToBlock);
+        }
+
+        // When a message is blocked, its impressions should be cleared as well
+        delete messageImpressions[id];
+      });
+
+      this._storage.set("messageBlockList", messageBlockList);
+      this._storage.set("messageImpressions", messageImpressions);
+      return { messageBlockList, messageImpressions };
+    });
+  }
+
+  unblockMessageById(idOrIds) {
+    const idsToUnblock = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
+
+    return this.setState(state => {
+      const messageBlockList = [...state.messageBlockList];
+      idsToUnblock
+        .map(id => state.messages.find(m => m.id === id))
+        // Remove all `id`s from the message block list
+        .forEach(message => {
+          const idToUnblock =
+            message && message.campaign ? message.campaign : message.id;
+          messageBlockList.splice(messageBlockList.indexOf(idToUnblock), 1);
+        });
+
+      this._storage.set("messageBlockList", messageBlockList);
+      return { messageBlockList };
+    });
+  }
+
+  resetGroupsState() {
+    const newGroupImpressions = {};
+    for (let { id } of this.state.groups) {
+      newGroupImpressions[id] = [];
+    }
+    // Update storage
+    this._storage.set("groupImpressions", newGroupImpressions);
+    return this.setState(({ groups }) => ({
+      groupImpressions: newGroupImpressions,
+    }));
+  }
+
+  resetMessageState() {
+    const newMessageImpressions = {};
+    for (let { id } of this.state.messages) {
+      newMessageImpressions[id] = [];
+    }
+    // Update storage
+    this._storage.set("messageImpressions", newMessageImpressions);
+    return this.setState(() => ({
+      messageImpressions: newMessageImpressions,
+    }));
+  }
+
+  resetScreenImpressions() {
+    const newScreenImpressions = {};
+    this._storage.set("screenImpressions", newScreenImpressions);
+    return this.setState(() => ({ screenImpressions: newScreenImpressions }));
+  }
+
+  /**
+   * Edit the ASRouter state directly. For use by the ASRouter devtools.
+   * Requires browser.newtabpage.activity-stream.asrouter.devtoolsEnabled
+   * @param {string} key Key of the property to edit, one of:
+   *   | "groupImpressions"
+   *   | "messageImpressions"
+   *   | "screenImpressions"
+   *   | "messageBlockList"
+   * @param {object|string[]} value New value to set for state[key]
+   * @returns {Promise<unknown>} The new value in state
+   */
+  async editState(key, value) {
+    if (!lazy.ASRouterPreferences.devtoolsEnabled) {
+      throw new Error("Editing state is only allowed in devtools mode");
+    }
+    switch (key) {
+      case "groupImpressions":
+      case "messageImpressions":
+      case "screenImpressions":
+        if (typeof value !== "object") {
+          throw new Error("Invalid impression data");
+        }
+        break;
+      case "messageBlockList":
+        if (!Array.isArray(value)) {
+          throw new Error("Invalid message block list");
+        }
+        break;
+      default:
+        throw new Error("Invalid state key");
+    }
+    const newState = await this.setState(() => {
+      this._storage.set(key, value);
+      return { [key]: value };
+    });
+    return newState[key];
+  }
+
+  _validPreviewEndpoint(url) {
+    try {
+      const endpoint = new URL(url);
+      if (!this.ALLOWLIST_HOSTS[endpoint.host]) {
+        console.error(
+          `The preview URL host ${endpoint.host} is not in the list of allowed hosts.`
+        );
+      }
+      if (endpoint.protocol !== "https:") {
+        console.error("The URL protocol is not https.");
+      }
+      return (
+        endpoint.protocol === "https:" && this.ALLOWLIST_HOSTS[endpoint.host]
+      );
+    } catch (e) {
+      return false;
+    }
+  }
+
+  _loadAllowHosts() {
+    return DEFAULT_ALLOWLIST_HOSTS;
+  }
+
+  // To be passed to ASRouterTriggerListeners
+  _triggerHandler(browser, trigger) {
+    // Disable ASRouterTriggerListeners in kiosk mode.
+    if (lazy.BrowserHandler.kiosk) {
+      return Promise.resolve();
+    }
+    return this.sendTriggerMessage({ ...trigger, browser });
+  }
+
+  /** Simple wrapper to make test mocking easier
+   *
+   * @returns {Promise} resolves when the attribution string has been set
+   * succesfully.
+   */
+  setAttributionString(attrStr) {
+    return lazy.MacAttribution.setAttributionString(attrStr);
+  }
+
+  /**
+   * forceAttribution - this function should only be called from within about:newtab#asrouter.
+   * It forces the browser attribution to be set to something specified in asrouter admin
+   * tools, and reloads the providers in order to get messages that are dependant on this
+   * attribution data (see Return to AMO flow in bug 1475354 for example). Note - OSX and Windows only
+   * @param {data} Object an object containing the attribtion data that came from asrouter admin page
+   */
+  async forceAttribution(data) {
+    // Extract the parameters from data that will make up the referrer url
+    const attributionData = lazy.AttributionCode.allowedCodeKeys
+      .map(key => `${key}=${encodeURIComponent(data[key] || "")}`)
+      .join("&");
+    if (AppConstants.platform === "win") {
+      // The whole attribution data is encoded (again) for windows
+      await lazy.AttributionCode.writeAttributionFile(
+        encodeURIComponent(attributionData)
+      );
+    } else if (AppConstants.platform === "macosx") {
+      await this.setAttributionString(encodeURIComponent(attributionData));
+    }
+
+    // Clear cache call is only possible in a testing environment
+    Services.env.set("XPCSHELL_TEST_PROFILE_DIR", "testing");
+
+    // Clear and refresh Attribution, and then fetch the messages again to update
+    lazy.AttributionCode._clearCache();
+    await lazy.AttributionCode.getAttrDataAsync();
+    await this._updateMessageProviders();
+    return this.loadMessagesFromAllProviders();
+  }
+
+  async sendPBNewTabMessage({ tabId, hideDefault }) {
+    let message = null;
+    const PromoInfo = {
+      FOCUS: { enabledPref: "browser.promo.focus.enabled" },
+      VPN: { enabledPref: "browser.vpn_promo.enabled" },
+      PIN: { enabledPref: "browser.promo.pin.enabled" },
+      COOKIE_BANNERS: { enabledPref: "browser.promo.cookiebanners.enabled" },
+    };
+    await this.loadMessagesFromAllProviders();
+
+    // If message has hideDefault property set to true
+    // remove from state all pb_newtab messages with type default
+    if (hideDefault) {
+      await this.setState(state => ({
+        messages: state.messages.filter(
+          m => !(m.template === "pb_newtab" && m.type === "default")
+        ),
+      }));
+    }
+
+    // Remove from state pb_newtab messages with PromoType disabled
+    await this.setState(state => ({
+      messages: state.messages.filter(
+        m =>
+          !(
+            m.template === "pb_newtab" &&
+            !Services.prefs.getBoolPref(
+              PromoInfo[m.content?.promoType]?.enabledPref,
+              true
+            )
+          )
+      ),
+    }));
+
+    const telemetryObject = { tabId };
+    TelemetryStopwatch.start("MS_MESSAGE_REQUEST_TIME_MS", telemetryObject);
+    message = await this.handleMessageRequest({
+      template: "pb_newtab",
+    });
+    TelemetryStopwatch.finish("MS_MESSAGE_REQUEST_TIME_MS", telemetryObject);
+
+    // Format urls if any are defined
+    ["infoLinkUrl"].forEach(key => {
+      if (message?.content?.[key]) {
+        message.content[key] = Services.urlFormatter.formatURL(
+          message.content[key]
+        );
+      }
+    });
+
+    return { message };
+  }
+
+  _recordReachEvent(message) {
+    const messageGroup = message.forReachEvent.group;
+    // Events telemetry only accepts understores for the event `object`
+    const underscored = messageGroup.split("-").join("_");
+    const extra = { branches: message.branchSlug };
+    Services.telemetry.recordEvent(
+      REACH_EVENT_CATEGORY,
+      REACH_EVENT_METHOD,
+      underscored,
+      message.experimentSlug,
+      extra
+    );
+  }
+
+  /**
+   * Fire a trigger, look for a matching message, and route it to the
+   * appropriate message handler/messaging surface.
+   * @param {object} trigger
+   * @param {string} trigger.id the name of the trigger, e.g. "openURL"
+   * @param {object} [trigger.param] an object with host, url, type, etc. keys
+   *   whose values are used to match against the message's trigger params
+   * @param {object} [trigger.context] an object with data about the source of
+   *   the trigger, matched against the message's targeting expression
+   * @param {MozBrowser} trigger.browser the browser to route messages to
+   * @param {number} [trigger.tabId] identifier used only for exposure testing
+   * @param {boolean} [skipLoadingMessages=false] pass true to skip looking for
+   *   new messages. use when calling from loadMessagesFromAllProviders to avoid
+   *   recursion. we call this from loadMessagesFromAllProviders in order to
+   *   fire the messagesLoaded trigger.
+   * @returns {Promise<object>}
+   * @resolves {message} an object with the routed message
+   */
+  async sendTriggerMessage(
+    { tabId, browser, ...trigger },
+    skipLoadingMessages = false
+  ) {
+    if (!skipLoadingMessages) {
+      await this.loadMessagesFromAllProviders();
+    }
+    const telemetryObject = { tabId };
+    TelemetryStopwatch.start("MS_MESSAGE_REQUEST_TIME_MS", telemetryObject);
+    // Return all the messages so that it can record the Reach event
+    const messages =
+      (await this.handleMessageRequest({
+        triggerId: trigger.id,
+        triggerParam: trigger.param,
+        triggerContext: trigger.context,
+        returnAll: true,
+      })) || [];
+    TelemetryStopwatch.finish("MS_MESSAGE_REQUEST_TIME_MS", telemetryObject);
+
+    // Record the Reach event for all the messages with `forReachEvent`,
+    // only send the first message without forReachEvent to the target
+    const nonReachMessages = [];
+    for (const message of messages) {
+      if (message.forReachEvent) {
+        if (!message.forReachEvent.sent) {
+          this._recordReachEvent(message);
+          message.forReachEvent.sent = true;
+        }
+      } else {
+        nonReachMessages.push(message);
+      }
+    }
+
+    if (nonReachMessages.length) {
+      let featureId = nonReachMessages[0]._nimbusFeature;
+      if (featureId) {
+        lazy.NimbusFeatures[featureId].recordExposureEvent({ once: true });
+      }
+    }
+
+    return this.routeCFRMessage(
+      nonReachMessages[0] || null,
+      browser,
+      trigger,
+      false
+    );
+  }
+
+  async forceWNPanel(browser) {
+    let win = browser.ownerGlobal;
+    await lazy.ToolbarPanelHub.enableToolbarButton();
+
+    win.PanelUI.showSubView(
+      "PanelUI-whatsNew",
+      win.document.getElementById("whats-new-menu-button")
+    );
+
+    let panel = win.document.getElementById("customizationui-widget-panel");
+    // Set the attribute to keep the panel open
+    panel.setAttribute("noautohide", true);
+  }
+
+  async closeWNPanel(browser) {
+    let win = browser.ownerGlobal;
+    let panel = win.document.getElementById("customizationui-widget-panel");
+    // Set the attribute to allow the panel to close
+    panel.setAttribute("noautohide", false);
+    // Removing the button is enough to close the panel.
+    await lazy.ToolbarPanelHub._hideToolbarButton(win);
+  }
+
+  async _onExperimentEnrollmentsUpdated() {
+    const experimentProvider = this.state.providers.find(
+      p => p.id === "messaging-experiments"
+    );
+    if (!experimentProvider?.enabled) {
+      return;
+    }
+    await this.loadMessagesFromAllProviders([experimentProvider]);
+  }
+
+  async forcePBWindow(browser, msg) {
+    const privateBrowserOpener = await new Promise(
+      (
+        resolveOnContentBrowserCreated // wrap this in a promise to give back the right browser
+      ) =>
+        browser.ownerGlobal.openTrustedLinkIn(
+          "about:privatebrowsing?debug",
+          "window",
+          {
+            private: true,
+            triggeringPrincipal:
+              Services.scriptSecurityManager.getSystemPrincipal({}),
+            csp: null,
+            resolveOnContentBrowserCreated,
+            opener: "devtools",
+          }
+        )
+    );
+
+    lazy.setTimeout(() => {
+      // setTimeout is necessary to make sure the private browsing window has a chance to open before the message is sent
+      privateBrowserOpener.browsingContext.currentWindowGlobal
+        .getActor("AboutPrivateBrowsing")
+        .sendAsyncMessage("ShowDevToolsMessage", msg);
+    }, 100);
+
+    return privateBrowserOpener;
+  }
+}
+
+/**
+ * ASRouter - singleton instance of _ASRouter that controls all messages
+ * in the new tab page.
+ */
+export const ASRouter = new _ASRouter();
diff --git a/browser/components/asrouter/modules/ASRouterDefaultConfig.sys.mjs b/browser/components/asrouter/modules/ASRouterDefaultConfig.sys.mjs
new file mode 100644
index 0000000000..e81380b1e2
--- /dev/null
+++ b/browser/components/asrouter/modules/ASRouterDefaultConfig.sys.mjs
@@ -0,0 +1,64 @@
+/* vim: set ts=2 sw=2 sts=2 et tw=80: */
+/* 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/. */
+
+import { ASRouter } from "resource:///modules/asrouter/ASRouter.sys.mjs";
+import { TelemetryFeed } from "resource://activity-stream/lib/TelemetryFeed.sys.mjs";
+import { ASRouterParentProcessMessageHandler } from "resource:///modules/asrouter/ASRouterParentProcessMessageHandler.sys.mjs";
+
+// We use importESModule here instead of static import so that
+// the Karma test environment won't choke on this module. This
+// is because the Karma test environment does not actually rely
+// on SpecialMessageActions, and overrides importESModule to be
+// a no-op (which can't be done for a static import statement).
+
+// eslint-disable-next-line mozilla/use-static-import
+const { SpecialMessageActions } = ChromeUtils.importESModule(
+  "resource://messaging-system/lib/SpecialMessageActions.sys.mjs"
+);
+
+import { ASRouterPreferences } from "resource:///modules/asrouter/ASRouterPreferences.sys.mjs";
+import { QueryCache } from "resource:///modules/asrouter/ASRouterTargeting.sys.mjs";
+import { ActivityStreamStorage } from "resource://activity-stream/lib/ActivityStreamStorage.sys.mjs";
+
+const createStorage = async telemetryFeed => {
+  // "snippets" is the name of one storage space, but these days it is used
+  // not for snippet-related data (snippets were removed in bug 1715158),
+  // but storage for impression or session data for all ASRouter messages.
+  //
+  // We keep the name "snippets" to avoid having to do an IndexedDB database
+  // migration.
+  const dbStore = new ActivityStreamStorage({
+    storeNames: ["sectionPrefs", "snippets"],
+    telemetry: {
+      handleUndesiredEvent: e => telemetryFeed.SendASRouterUndesiredEvent(e),
+    },
+  });
+  // Accessing the db causes the object stores to be created / migrated.
+  // This needs to happen before other instances try to access the db, which
+  // would update only a subset of the stores to the latest version.
+  try {
+    await dbStore.db; // eslint-disable-line no-unused-expressions
+  } catch (e) {
+    return Promise.reject(e);
+  }
+  return dbStore.getDbTable("snippets");
+};
+
+export const ASRouterDefaultConfig = () => {
+  const router = ASRouter;
+  const telemetry = new TelemetryFeed();
+  const messageHandler = new ASRouterParentProcessMessageHandler({
+    router,
+    preferences: ASRouterPreferences,
+    specialMessageActions: SpecialMessageActions,
+    queryCache: QueryCache,
+    sendTelemetry: telemetry.onAction.bind(telemetry),
+  });
+  return {
+    router,
+    messageHandler,
+    createStorage: createStorage.bind(null, telemetry),
+  };
+};
diff --git a/browser/components/asrouter/modules/ASRouterNewTabHook.sys.mjs b/browser/components/asrouter/modules/ASRouterNewTabHook.sys.mjs
new file mode 100644
index 0000000000..d0fdbfdae4
--- /dev/null
+++ b/browser/components/asrouter/modules/ASRouterNewTabHook.sys.mjs
@@ -0,0 +1,117 @@
+/* vim: set ts=2 sw=2 sts=2 et tw=80: */
+/* 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/. */
+
+class ASRouterNewTabHookInstance {
+  constructor() {
+    this._newTabMessageHandler = null;
+    this._parentProcessMessageHandler = null;
+    this._router = null;
+    this._clearChildMessages = (...params) =>
+      this._newTabMessageHandler === null
+        ? Promise.resolve()
+        : this._newTabMessageHandler.clearChildMessages(...params);
+    this._clearChildProviders = (...params) =>
+      this._newTabMessageHandler === null
+        ? Promise.resolve()
+        : this._newTabMessageHandler.clearChildProviders(...params);
+    this._updateAdminState = (...params) =>
+      this._newTabMessageHandler === null
+        ? Promise.resolve()
+        : this._newTabMessageHandler.updateAdminState(...params);
+  }
+
+  /**
+   * Params:
+   *    object - {
+   *      messageHandler: message handler for parent process messages
+   *      {
+   *        handleCFRAction: Responds to CFR action and returns a Promise
+   *        handleTelemetry: Logs telemetry events and returns nothing
+   *      },
+   *      router: ASRouter instance
+   *      createStorage: function to create DB storage for ASRouter
+   *   }
+   */
+  async initialize({ messageHandler, router, createStorage }) {
+    this._parentProcessMessageHandler = messageHandler;
+    this._router = router;
+    if (!this._router.initialized) {
+      const storage = await createStorage();
+      await this._router.init({
+        storage,
+        sendTelemetry: this._parentProcessMessageHandler.handleTelemetry,
+        dispatchCFRAction: this._parentProcessMessageHandler.handleCFRAction,
+        clearChildMessages: this._clearChildMessages,
+        clearChildProviders: this._clearChildProviders,
+        updateAdminState: this._updateAdminState,
+      });
+    }
+  }
+
+  destroy() {
+    if (this._router?.initialized) {
+      this.disconnect();
+      this._router.uninit();
+    }
+  }
+
+  /**
+   * Connects new tab message handler to hook.
+   * Note: Should only ever be called on an initialized instance
+   * Params:
+   *    newTabMessageHandler - {
+   *      clearChildMessages: clears child messages and returns Promise
+   *      clearChildProviders: clears child providers and returns Promise.
+   *      updateAdminState: updates admin state and returns Promise
+   *   }
+   * Returns: parentProcessMessageHandler
+   */
+  connect(newTabMessageHandler) {
+    this._newTabMessageHandler = newTabMessageHandler;
+    return this._parentProcessMessageHandler;
+  }
+
+  /**
+   * Disconnects new tab message handler from hook.
+   */
+  disconnect() {
+    this._newTabMessageHandler = null;
+  }
+}
+
+class AwaitSingleton {
+  constructor() {
+    this.instance = null;
+    const initialized = new Promise(resolve => {
+      this.setInstance = instance => {
+        this.setInstance = () => {};
+        this.instance = instance;
+        resolve(instance);
+      };
+    });
+    this.getInstance = () => initialized;
+  }
+}
+
+export const ASRouterNewTabHook = (() => {
+  const singleton = new AwaitSingleton();
+  const instance = new ASRouterNewTabHookInstance();
+  return {
+    getInstance: singleton.getInstance,
+
+    /**
+     * Param:
+     *    params - see ASRouterNewTabHookInstance.init
+     */
+    createInstance: async params => {
+      await instance.initialize(params);
+      singleton.setInstance(instance);
+    },
+
+    destroy: () => {
+      instance.destroy();
+    },
+  };
+})();
diff --git a/browser/components/asrouter/modules/ASRouterParentProcessMessageHandler.sys.mjs b/browser/components/asrouter/modules/ASRouterParentProcessMessageHandler.sys.mjs
new file mode 100644
index 0000000000..c2f5fcd884
--- /dev/null
+++ b/browser/components/asrouter/modules/ASRouterParentProcessMessageHandler.sys.mjs
@@ -0,0 +1,171 @@
+/* vim: set ts=2 sw=2 sts=2 et tw=80: */
+/* 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/. */
+
+import { ASRouterPreferences } from "resource:///modules/asrouter/ASRouterPreferences.sys.mjs";
+import { MESSAGE_TYPE_HASH as msg } from "resource:///modules/asrouter/ActorConstants.sys.mjs";
+
+export class ASRouterParentProcessMessageHandler {
+  constructor({
+    router,
+    preferences,
+    specialMessageActions,
+    queryCache,
+    sendTelemetry,
+  }) {
+    this._router = router;
+    this._preferences = preferences;
+    this._specialMessageActions = specialMessageActions;
+    this._queryCache = queryCache;
+    this.handleTelemetry = sendTelemetry;
+    this.handleMessage = this.handleMessage.bind(this);
+    this.handleCFRAction = this.handleCFRAction.bind(this);
+  }
+
+  handleCFRAction({ type, data }, browser) {
+    switch (type) {
+      case msg.INFOBAR_TELEMETRY:
+      case msg.TOOLBAR_BADGE_TELEMETRY:
+      case msg.TOOLBAR_PANEL_TELEMETRY:
+      case msg.MOMENTS_PAGE_TELEMETRY:
+      case msg.DOORHANGER_TELEMETRY:
+      case msg.SPOTLIGHT_TELEMETRY:
+      case msg.TOAST_NOTIFICATION_TELEMETRY: {
+        return this.handleTelemetry({ type, data });
+      }
+      default: {
+        return this.handleMessage(type, data, { browser });
+      }
+    }
+  }
+
+  handleMessage(name, data, { id: tabId, browser } = { browser: null }) {
+    switch (name) {
+      case msg.AS_ROUTER_TELEMETRY_USER_EVENT:
+        return this.handleTelemetry({
+          type: msg.AS_ROUTER_TELEMETRY_USER_EVENT,
+          data,
+        });
+      case msg.BLOCK_MESSAGE_BY_ID: {
+        ASRouterPreferences.console.debug(
+          "handleMesssage(): about to block, data = ",
+          data
+        );
+        ASRouterPreferences.console.trace();
+
+        // Block the message but don't dismiss it in case the action taken has
+        // another state that needs to be visible
+        return this._router
+          .blockMessageById(data.id)
+          .then(() => !data.preventDismiss);
+      }
+      case msg.USER_ACTION: {
+        return this._specialMessageActions.handleAction(data, browser);
+      }
+      case msg.IMPRESSION: {
+        return this._router.addImpression(data);
+      }
+      case msg.TRIGGER: {
+        return this._router.sendTriggerMessage({
+          ...(data && data.trigger),
+          tabId,
+          browser,
+        });
+      }
+      case msg.PBNEWTAB_MESSAGE_REQUEST: {
+        return this._router.sendPBNewTabMessage({
+          ...data,
+          tabId,
+          browser,
+        });
+      }
+
+      // ADMIN Messages
+      case msg.ADMIN_CONNECT_STATE: {
+        if (data && data.endpoint) {
+          return this._router.loadMessagesFromAllProviders();
+        }
+        return this._router.updateTargetingParameters();
+      }
+      case msg.UNBLOCK_MESSAGE_BY_ID: {
+        return this._router.unblockMessageById(data.id);
+      }
+      case msg.UNBLOCK_ALL: {
+        return this._router.unblockAll();
+      }
+      case msg.BLOCK_BUNDLE: {
+        return this._router.blockMessageById(data.bundle.map(b => b.id));
+      }
+      case msg.UNBLOCK_BUNDLE: {
+        return this._router.setState(state => {
+          const messageBlockList = [...state.messageBlockList];
+          for (let message of data.bundle) {
+            messageBlockList.splice(messageBlockList.indexOf(message.id), 1);
+          }
+          this._router._storage.set("messageBlockList", messageBlockList);
+          return { messageBlockList };
+        });
+      }
+      case msg.DISABLE_PROVIDER: {
+        this._preferences.enableOrDisableProvider(data, false);
+        return Promise.resolve();
+      }
+      case msg.ENABLE_PROVIDER: {
+        this._preferences.enableOrDisableProvider(data, true);
+        return Promise.resolve();
+      }
+      case msg.EVALUATE_JEXL_EXPRESSION: {
+        return this._router.evaluateExpression(data);
+      }
+      case msg.EXPIRE_QUERY_CACHE: {
+        this._queryCache.expireAll();
+        return Promise.resolve();
+      }
+      case msg.FORCE_ATTRIBUTION: {
+        return this._router.forceAttribution(data);
+      }
+      case msg.FORCE_PRIVATE_BROWSING_WINDOW: {
+        return this._router.forcePBWindow(browser, data.message);
+      }
+      case msg.FORCE_WHATSNEW_PANEL: {
+        return this._router.forceWNPanel(browser);
+      }
+      case msg.CLOSE_WHATSNEW_PANEL: {
+        return this._router.closeWNPanel(browser);
+      }
+      case msg.MODIFY_MESSAGE_JSON: {
+        return this._router.routeCFRMessage(data.content, browser, data, true);
+      }
+      case msg.OVERRIDE_MESSAGE: {
+        return this._router.setMessageById(data, true, browser);
+      }
+      case msg.RESET_PROVIDER_PREF: {
+        this._preferences.resetProviderPref();
+        return Promise.resolve();
+      }
+      case msg.SET_PROVIDER_USER_PREF: {
+        this._preferences.setUserPreference(data.id, data.value);
+        return Promise.resolve();
+      }
+      case msg.RESET_GROUPS_STATE: {
+        return this._router
+          .resetGroupsState(data)
+          .then(() => this._router.loadMessagesFromAllProviders());
+      }
+      case msg.RESET_MESSAGE_STATE: {
+        return this._router.resetMessageState();
+      }
+      case msg.RESET_SCREEN_IMPRESSIONS: {
+        return this._router.resetScreenImpressions();
+      }
+      case msg.EDIT_STATE: {
+        const [[key, value]] = Object.entries(data);
+        return this._router.editState(key, value);
+      }
+      default: {
+        return Promise.reject(new Error(`Unknown message received: ${name}`));
+      }
+    }
+  }
+}
diff --git a/browser/components/asrouter/modules/ASRouterPreferences.sys.mjs b/browser/components/asrouter/modules/ASRouterPreferences.sys.mjs
new file mode 100644
index 0000000000..c7617d80c0
--- /dev/null
+++ b/browser/components/asrouter/modules/ASRouterPreferences.sys.mjs
@@ -0,0 +1,241 @@
+/* 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/. */
+
+const PROVIDER_PREF_BRANCH =
+  "browser.newtabpage.activity-stream.asrouter.providers.";
+const DEVTOOLS_PREF =
+  "browser.newtabpage.activity-stream.asrouter.devtoolsEnabled";
+
+/**
+ * Use `ASRouterPreferences.console.debug()` and friends from ASRouter files to
+ * log messages during development.  See LOG_LEVELS in ConsoleAPI.jsm for the
+ * available methods as well as the available values for this pref.
+ */
+const DEBUG_PREF = "browser.newtabpage.activity-stream.asrouter.debugLogLevel";
+
+const FXA_USERNAME_PREF = "services.sync.username";
+
+const DEFAULT_STATE = {
+  _initialized: false,
+  _providers: null,
+  _providerPrefBranch: PROVIDER_PREF_BRANCH,
+  _devtoolsEnabled: null,
+  _devtoolsPref: DEVTOOLS_PREF,
+};
+
+const USER_PREFERENCES = {
+  cfrAddons: "browser.newtabpage.activity-stream.asrouter.userprefs.cfr.addons",
+  cfrFeatures:
+    "browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features",
+};
+
+// Preferences that influence targeting attributes. When these change we need
+// to re-evaluate if the message targeting still matches
+export const TARGETING_PREFERENCES = [FXA_USERNAME_PREF];
+
+export const TEST_PROVIDERS = [
+  {
+    id: "panel_local_testing",
+    type: "local",
+    localProvider: "PanelTestProvider",
+    enabled: true,
+  },
+];
+
+export class _ASRouterPreferences {
+  constructor() {
+    Object.assign(this, DEFAULT_STATE);
+    this._callbacks = new Set();
+
+    ChromeUtils.defineLazyGetter(this, "console", () => {
+      let { ConsoleAPI } = ChromeUtils.importESModule(
+        /* eslint-disable mozilla/use-console-createInstance */
+        "resource://gre/modules/Console.sys.mjs"
+      );
+      let consoleOptions = {
+        maxLogLevel: "error",
+        maxLogLevelPref: DEBUG_PREF,
+        prefix: "ASRouter",
+      };
+      return new ConsoleAPI(consoleOptions);
+    });
+  }
+
+  _transformPersonalizedCfrScores(value) {
+    let result = {};
+    try {
+      result = JSON.parse(value);
+    } catch (e) {
+      console.error(e);
+    }
+    return result;
+  }
+
+  _getProviderConfig() {
+    const prefList = Services.prefs.getChildList(this._providerPrefBranch);
+    return prefList.reduce((filtered, pref) => {
+      let value;
+      try {
+        value = JSON.parse(Services.prefs.getStringPref(pref, ""));
+      } catch (e) {
+        console.error(
+          `Could not parse ASRouter preference. Try resetting ${pref} in about:config.`
+        );
+      }
+      if (value) {
+        filtered.push(value);
+      }
+      return filtered;
+    }, []);
+  }
+
+  get providers() {
+    if (!this._initialized || this._providers === null) {
+      const config = this._getProviderConfig();
+      const providers = config.map(provider => Object.freeze(provider));
+      if (this.devtoolsEnabled) {
+        providers.unshift(...TEST_PROVIDERS);
+      }
+      this._providers = Object.freeze(providers);
+    }
+
+    return this._providers;
+  }
+
+  enableOrDisableProvider(id, value) {
+    const providers = this._getProviderConfig();
+    const config = providers.find(p => p.id === id);
+    if (!config) {
+      console.error(
+        `Cannot set enabled state for '${id}' because the pref ${this._providerPrefBranch}${id} does not exist or is not correctly formatted.`
+      );
+      return;
+    }
+
+    Services.prefs.setStringPref(
+      this._providerPrefBranch + id,
+      JSON.stringify({ ...config, enabled: value })
+    );
+  }
+
+  resetProviderPref() {
+    for (const pref of Services.prefs.getChildList(this._providerPrefBranch)) {
+      Services.prefs.clearUserPref(pref);
+    }
+    for (const id of Object.keys(USER_PREFERENCES)) {
+      Services.prefs.clearUserPref(USER_PREFERENCES[id]);
+    }
+  }
+
+  /**
+   * Bug 1800087 - Migrate the ASRouter message provider prefs' values to the
+   * current format (provider.bucket -> provider.collection).
+   *
+   * TODO (Bug 1800937): Remove migration code after the next watershed release.
+   */
+  _migrateProviderPrefs() {
+    const prefList = Services.prefs.getChildList(this._providerPrefBranch);
+    for (const pref of prefList) {
+      if (!Services.prefs.prefHasUserValue(pref)) {
+        continue;
+      }
+      try {
+        let value = JSON.parse(Services.prefs.getStringPref(pref, ""));
+        if (value && "bucket" in value && !("collection" in value)) {
+          const { bucket, ...rest } = value;
+          Services.prefs.setStringPref(
+            pref,
+            JSON.stringify({
+              ...rest,
+              collection: bucket,
+            })
+          );
+        }
+      } catch (e) {
+        Services.prefs.clearUserPref(pref);
+      }
+    }
+  }
+
+  get devtoolsEnabled() {
+    if (!this._initialized || this._devtoolsEnabled === null) {
+      this._devtoolsEnabled = Services.prefs.getBoolPref(
+        this._devtoolsPref,
+        false
+      );
+    }
+    return this._devtoolsEnabled;
+  }
+
+  observe(aSubject, aTopic, aPrefName) {
+    if (aPrefName && aPrefName.startsWith(this._providerPrefBranch)) {
+      this._providers = null;
+    } else if (aPrefName === this._devtoolsPref) {
+      this._providers = null;
+      this._devtoolsEnabled = null;
+    }
+    this._callbacks.forEach(cb => cb(aPrefName));
+  }
+
+  getUserPreference(name) {
+    const prefName = USER_PREFERENCES[name] || name;
+    return Services.prefs.getBoolPref(prefName, true);
+  }
+
+  getAllUserPreferences() {
+    const values = {};
+    for (const id of Object.keys(USER_PREFERENCES)) {
+      values[id] = this.getUserPreference(id);
+    }
+    return values;
+  }
+
+  setUserPreference(providerId, value) {
+    if (!USER_PREFERENCES[providerId]) {
+      return;
+    }
+    Services.prefs.setBoolPref(USER_PREFERENCES[providerId], value);
+  }
+
+  addListener(callback) {
+    this._callbacks.add(callback);
+  }
+
+  removeListener(callback) {
+    this._callbacks.delete(callback);
+  }
+
+  init() {
+    if (this._initialized) {
+      return;
+    }
+    this._migrateProviderPrefs();
+    Services.prefs.addObserver(this._providerPrefBranch, this);
+    Services.prefs.addObserver(this._devtoolsPref, this);
+    for (const id of Object.keys(USER_PREFERENCES)) {
+      Services.prefs.addObserver(USER_PREFERENCES[id], this);
+    }
+    for (const targetingPref of TARGETING_PREFERENCES) {
+      Services.prefs.addObserver(targetingPref, this);
+    }
+    this._initialized = true;
+  }
+
+  uninit() {
+    if (this._initialized) {
+      Services.prefs.removeObserver(this._providerPrefBranch, this);
+      Services.prefs.removeObserver(this._devtoolsPref, this);
+      for (const id of Object.keys(USER_PREFERENCES)) {
+        Services.prefs.removeObserver(USER_PREFERENCES[id], this);
+      }
+      for (const targetingPref of TARGETING_PREFERENCES) {
+        Services.prefs.removeObserver(targetingPref, this);
+      }
+    }
+    Object.assign(this, DEFAULT_STATE);
+    this._callbacks.clear();
+  }
+}
+
+export const ASRouterPreferences = new _ASRouterPreferences();
diff --git a/browser/components/asrouter/modules/ASRouterTargeting.sys.mjs b/browser/components/asrouter/modules/ASRouterTargeting.sys.mjs
new file mode 100644
index 0000000000..a262f8911e
--- /dev/null
+++ b/browser/components/asrouter/modules/ASRouterTargeting.sys.mjs
@@ -0,0 +1,1308 @@
+/* This Source Code Form is subject to the terms of the Mozilla PublicddonMa
+ * 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/. */
+
+const FXA_ENABLED_PREF = "identity.fxaccounts.enabled";
+const DISTRIBUTION_ID_PREF = "distribution.id";
+const DISTRIBUTION_ID_CHINA_REPACK = "MozillaOnline";
+
+// We use importESModule here instead of static import so that
+// the Karma test environment won't choke on this module. This
+// is because the Karma test environment already stubs out
+// XPCOMUtils, AppConstants, NewTabUtils and ShellService, and
+// overrides importESModule to be a no-op (which can't be done
+// for a static import statement).
+
+// eslint-disable-next-line mozilla/use-static-import
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+// eslint-disable-next-line mozilla/use-static-import
+const { AppConstants } = ChromeUtils.importESModule(
+  "resource://gre/modules/AppConstants.sys.mjs"
+);
+
+// eslint-disable-next-line mozilla/use-static-import
+const { NewTabUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/NewTabUtils.sys.mjs"
+);
+
+// eslint-disable-next-line mozilla/use-static-import
+const { ShellService } = ChromeUtils.importESModule(
+  "resource:///modules/ShellService.sys.mjs"
+);
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  AddonManager: "resource://gre/modules/AddonManager.sys.mjs",
+  AboutNewTab: "resource:///modules/AboutNewTab.sys.mjs",
+  ASRouterPreferences:
+    "resource:///modules/asrouter/ASRouterPreferences.sys.mjs",
+  AttributionCode: "resource:///modules/AttributionCode.sys.mjs",
+  BrowserWindowTracker: "resource:///modules/BrowserWindowTracker.sys.mjs",
+  ClientEnvironment: "resource://normandy/lib/ClientEnvironment.sys.mjs",
+  CustomizableUI: "resource:///modules/CustomizableUI.sys.mjs",
+  HomePage: "resource:///modules/HomePage.sys.mjs",
+  NimbusFeatures: "resource://nimbus/ExperimentAPI.sys.mjs",
+  ProfileAge: "resource://gre/modules/ProfileAge.sys.mjs",
+  Region: "resource://gre/modules/Region.sys.mjs",
+  TargetingContext: "resource://messaging-system/targeting/Targeting.sys.mjs",
+  TelemetryEnvironment: "resource://gre/modules/TelemetryEnvironment.sys.mjs",
+  TelemetrySession: "resource://gre/modules/TelemetrySession.sys.mjs",
+  WindowsLaunchOnLogin: "resource://gre/modules/WindowsLaunchOnLogin.sys.mjs",
+});
+
+ChromeUtils.defineLazyGetter(lazy, "fxAccounts", () => {
+  return ChromeUtils.importESModule(
+    "resource://gre/modules/FxAccounts.sys.mjs"
+  ).getFxAccountsSingleton();
+});
+
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "cfrFeaturesUserPref",
+  "browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features",
+  true
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "cfrAddonsUserPref",
+  "browser.newtabpage.activity-stream.asrouter.userprefs.cfr.addons",
+  true
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "isWhatsNewPanelEnabled",
+  "browser.messaging-system.whatsNewPanel.enabled",
+  false
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "hasAccessedFxAPanel",
+  "identity.fxaccounts.toolbar.accessed",
+  false
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "clientsDevicesDesktop",
+  "services.sync.clients.devices.desktop",
+  0
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "clientsDevicesMobile",
+  "services.sync.clients.devices.mobile",
+  0
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "syncNumClients",
+  "services.sync.numClients",
+  0
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "devtoolsSelfXSSCount",
+  "devtools.selfxss.count",
+  0
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "isFxAEnabled",
+  FXA_ENABLED_PREF,
+  true
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "isXPIInstallEnabled",
+  "xpinstall.enabled",
+  true
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "hasMigratedBookmarks",
+  "browser.migrate.interactions.bookmarks",
+  false
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "hasMigratedCSVPasswords",
+  "browser.migrate.interactions.csvpasswords",
+  false
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "hasMigratedHistory",
+  "browser.migrate.interactions.history",
+  false
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "hasMigratedPasswords",
+  "browser.migrate.interactions.passwords",
+  false
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "useEmbeddedMigrationWizard",
+  "browser.migrate.content-modal.about-welcome-behavior",
+  "default",
+  null,
+  behaviorString => {
+    return behaviorString === "embedded";
+  }
+);
+
+XPCOMUtils.defineLazyServiceGetters(lazy, {
+  AUS: ["@mozilla.org/updates/update-service;1", "nsIApplicationUpdateService"],
+  BrowserHandler: ["@mozilla.org/browser/clh;1", "nsIBrowserHandler"],
+  TrackingDBService: [
+    "@mozilla.org/tracking-db-service;1",
+    "nsITrackingDBService",
+  ],
+  UpdateCheckSvc: ["@mozilla.org/updates/update-checker;1", "nsIUpdateChecker"],
+});
+
+const FXA_USERNAME_PREF = "services.sync.username";
+
+const { activityStreamProvider: asProvider } = NewTabUtils;
+
+const FXA_ATTACHED_CLIENTS_UPDATE_INTERVAL = 4 * 60 * 60 * 1000; // Four hours
+const FRECENT_SITES_UPDATE_INTERVAL = 6 * 60 * 60 * 1000; // Six hours
+const FRECENT_SITES_IGNORE_BLOCKED = false;
+const FRECENT_SITES_NUM_ITEMS = 25;
+const FRECENT_SITES_MIN_FRECENCY = 100;
+
+const CACHE_EXPIRATION = 5 * 60 * 1000;
+const jexlEvaluationCache = new Map();
+
+/**
+ * CachedTargetingGetter
+ * @param property {string} Name of the method
+ * @param options {any=} Options passed to the method
+ * @param updateInterval {number?} Update interval for query. Defaults to FRECENT_SITES_UPDATE_INTERVAL
+ */
+export function CachedTargetingGetter(
+  property,
+  options = null,
+  updateInterval = FRECENT_SITES_UPDATE_INTERVAL,
+  getter = asProvider
+) {
+  return {
+    _lastUpdated: 0,
+    _value: null,
+    // For testing
+    expire() {
+      this._lastUpdated = 0;
+      this._value = null;
+    },
+    async get() {
+      const now = Date.now();
+      if (now - this._lastUpdated >= updateInterval) {
+        this._value = await getter[property](options);
+        this._lastUpdated = now;
+      }
+      return this._value;
+    },
+  };
+}
+
+function CacheListAttachedOAuthClients() {
+  return {
+    _lastUpdated: 0,
+    _value: null,
+    expire() {
+      this._lastUpdated = 0;
+      this._value = null;
+    },
+    get() {
+      const now = Date.now();
+      if (now - this._lastUpdated >= FXA_ATTACHED_CLIENTS_UPDATE_INTERVAL) {
+        this._value = new Promise(resolve => {
+          lazy.fxAccounts
+            .listAttachedOAuthClients()
+            .then(clients => {
+              resolve(clients);
+            })
+            .catch(() => resolve([]));
+        });
+        this._lastUpdated = now;
+      }
+      return this._value;
+    },
+  };
+}
+
+function CheckBrowserNeedsUpdate(
+  updateInterval = FRECENT_SITES_UPDATE_INTERVAL
+) {
+  const checker = {
+    _lastUpdated: 0,
+    _value: null,
+    // For testing. Avoid update check network call.
+    setUp(value) {
+      this._lastUpdated = Date.now();
+      this._value = value;
+    },
+    expire() {
+      this._lastUpdated = 0;
+      this._value = null;
+    },
+    async get() {
+      const now = Date.now();
+      if (
+        !AppConstants.MOZ_UPDATER ||
+        now - this._lastUpdated < updateInterval
+      ) {
+        return this._value;
+      }
+      if (!lazy.AUS.canCheckForUpdates) {
+        return false;
+      }
+      this._lastUpdated = now;
+      let check = lazy.UpdateCheckSvc.checkForUpdates(
+        lazy.UpdateCheckSvc.FOREGROUND_CHECK
+      );
+      let result = await check.result;
+      if (!result.succeeded) {
+        lazy.ASRouterPreferences.console.error(
+          "CheckBrowserNeedsUpdate failed :>> ",
+          result.request
+        );
+        return false;
+      }
+      checker._value = !!result.updates.length;
+      return checker._value;
+    },
+  };
+
+  return checker;
+}
+
+export const QueryCache = {
+  expireAll() {
+    Object.keys(this.queries).forEach(query => {
+      this.queries[query].expire();
+    });
+    Object.keys(this.getters).forEach(key => {
+      this.getters[key].expire();
+    });
+  },
+  queries: {
+    TopFrecentSites: new CachedTargetingGetter("getTopFrecentSites", {
+      ignoreBlocked: FRECENT_SITES_IGNORE_BLOCKED,
+      numItems: FRECENT_SITES_NUM_ITEMS,
+      topsiteFrecency: FRECENT_SITES_MIN_FRECENCY,
+      onePerDomain: true,
+      includeFavicon: false,
+    }),
+    TotalBookmarksCount: new CachedTargetingGetter("getTotalBookmarksCount"),
+    CheckBrowserNeedsUpdate: new CheckBrowserNeedsUpdate(),
+    RecentBookmarks: new CachedTargetingGetter("getRecentBookmarks"),
+    ListAttachedOAuthClients: new CacheListAttachedOAuthClients(),
+    UserMonthlyActivity: new CachedTargetingGetter("getUserMonthlyActivity"),
+  },
+  getters: {
+    doesAppNeedPin: new CachedTargetingGetter(
+      "doesAppNeedPin",
+      null,
+      FRECENT_SITES_UPDATE_INTERVAL,
+      ShellService
+    ),
+    doesAppNeedPrivatePin: new CachedTargetingGetter(
+      "doesAppNeedPin",
+      true,
+      FRECENT_SITES_UPDATE_INTERVAL,
+      ShellService
+    ),
+    isDefaultBrowser: new CachedTargetingGetter(
+      "isDefaultBrowser",
+      null,
+      FRECENT_SITES_UPDATE_INTERVAL,
+      ShellService
+    ),
+    currentThemes: new CachedTargetingGetter(
+      "getAddonsByTypes",
+      ["theme"],
+      FRECENT_SITES_UPDATE_INTERVAL,
+      lazy.AddonManager // eslint-disable-line mozilla/valid-lazy
+    ),
+    isDefaultHTMLHandler: new CachedTargetingGetter(
+      "isDefaultHandlerFor",
+      [".html"],
+      FRECENT_SITES_UPDATE_INTERVAL,
+      ShellService
+    ),
+    isDefaultPDFHandler: new CachedTargetingGetter(
+      "isDefaultHandlerFor",
+      [".pdf"],
+      FRECENT_SITES_UPDATE_INTERVAL,
+      ShellService
+    ),
+    defaultPDFHandler: new CachedTargetingGetter(
+      "getDefaultPDFHandler",
+      null,
+      FRECENT_SITES_UPDATE_INTERVAL,
+      ShellService
+    ),
+  },
+};
+
+/**
+ * sortMessagesByWeightedRank
+ *
+ * Each message has an associated weight, which is guaranteed to be strictly
+ * positive. Sort the messages so that higher weighted messages are more likely
+ * to come first.
+ *
+ * Specifically, sort them so that the probability of message x_1 with weight
+ * w_1 appearing before message x_2 with weight w_2 is (w_1 / (w_1 + w_2)).
+ *
+ * This is equivalent to requiring that x_1 appearing before x_2 is (w_1 / w_2)
+ * "times" as likely as x_2 appearing before x_1.
+ *
+ * See Bug 1484996, Comment 2 for a justification of the method.
+ *
+ * @param {Array} messages - A non-empty array of messages to sort, all with
+ *                           strictly positive weights
+ * @returns the sorted array
+ */
+function sortMessagesByWeightedRank(messages) {
+  return messages
+    .map(message => ({
+      message,
+      rank: Math.pow(Math.random(), 1 / message.weight),
+    }))
+    .sort((a, b) => b.rank - a.rank)
+    .map(({ message }) => message);
+}
+
+/**
+ * getSortedMessages - Given an array of Messages, applies sorting and filtering rules
+ *                     in expected order.
+ *
+ * @param {Array<Message>} messages
+ * @param {{}} options
+ * @param {boolean} options.ordered - Should .order be used instead of random weighted sorting?
+ * @returns {Array<Message>}
+ */
+export function getSortedMessages(messages, options = {}) {
+  let { ordered } = { ordered: false, ...options };
+  let result = messages;
+
+  if (!ordered) {
+    result = sortMessagesByWeightedRank(result);
+  }
+
+  result.sort((a, b) => {
+    // Next, sort by priority
+    if (a.priority > b.priority || (!isNaN(a.priority) && isNaN(b.priority))) {
+      return -1;
+    }
+    if (a.priority < b.priority || (isNaN(a.priority) && !isNaN(b.priority))) {
+      return 1;
+    }
+
+    // Sort messages with targeting expressions higher than those with none
+    if (a.targeting && !b.targeting) {
+      return -1;
+    }
+    if (!a.targeting && b.targeting) {
+      return 1;
+    }
+
+    // Next, sort by order *ascending* if ordered = true
+    if (ordered) {
+      if (a.order > b.order || (!isNaN(a.order) && isNaN(b.order))) {
+        return 1;
+      }
+      if (a.order < b.order || (isNaN(a.order) && !isNaN(b.order))) {
+        return -1;
+      }
+    }
+
+    return 0;
+  });
+
+  return result;
+}
+
+/**
+ * parseAboutPageURL - Parse a URL string retrieved from about:home and about:new, returns
+ *                    its type (web extenstion or custom url) and the parsed url(s)
+ *
+ * @param {string} url - A URL string for home page or newtab page
+ * @returns {Object} {
+ *   isWebExt: boolean,
+ *   isCustomUrl: boolean,
+ *   urls: Array<{url: string, host: string}>
+ * }
+ */
+function parseAboutPageURL(url) {
+  let ret = {
+    isWebExt: false,
+    isCustomUrl: false,
+    urls: [],
+  };
+  if (url.startsWith("moz-extension://")) {
+    ret.isWebExt = true;
+    ret.urls.push({ url, host: "" });
+  } else {
+    // The home page URL could be either a single URL or a list of "|" separated URLs.
+    // Note that it should work with "about:home" and "about:blank", in which case the
+    // "host" is set as an empty string.
+    for (const _url of url.split("|")) {
+      if (!["about:home", "about:newtab", "about:blank"].includes(_url)) {
+        ret.isCustomUrl = true;
+      }
+      try {
+        const parsedURL = new URL(_url);
+        const host = parsedURL.hostname.replace(/^www\./i, "");
+        ret.urls.push({ url: _url, host });
+      } catch (e) {}
+    }
+    // If URL parsing failed, just return the given url with an empty host
+    if (!ret.urls.length) {
+      ret.urls.push({ url, host: "" });
+    }
+  }
+
+  return ret;
+}
+
+/**
+ * Get the number of records in autofill storage, e.g. credit cards/addresses.
+ *
+ * @param  {Object} [data]
+ * @param  {string} [data.collectionName]
+ *         The name used to specify which collection to retrieve records.
+ * @param  {string} [data.searchString]
+ *         The typed string for filtering out the matched records.
+ * @param  {string} [data.info]
+ *         The input autocomplete property's information.
+ * @returns {Promise<number>} The number of matched records.
+ * @see FormAutofillParent._getRecords
+ */
+async function getAutofillRecords(data) {
+  let actor;
+  try {
+    const win = Services.wm.getMostRecentBrowserWindow();
+    actor =
+      win.gBrowser.selectedBrowser.browsingContext.currentWindowGlobal.getActor(
+        "FormAutofill"
+      );
+  } catch (error) {
+    // If the actor is not available, we can't get the records. We could import
+    // the records directly from FormAutofillStorage to avoid the messiness of
+    // JSActors, but that would import a lot of code for a targeting attribute.
+    return 0;
+  }
+  let records = await actor?.receiveMessage({
+    name: "FormAutofill:GetRecords",
+    data,
+  });
+  return records?.records?.length ?? 0;
+}
+
+// Attribution data can be encoded multiple times so we need this function to
+// get a cleartext value.
+function decodeAttributionValue(value) {
+  if (!value) {
+    return null;
+  }
+
+  let decodedValue = value;
+
+  while (decodedValue.includes("%")) {
+    try {
+      const result = decodeURIComponent(decodedValue);
+      if (result === decodedValue) {
+        break;
+      }
+      decodedValue = result;
+    } catch (e) {
+      break;
+    }
+  }
+
+  return decodedValue;
+}
+
+const TargetingGetters = {
+  get locale() {
+    return Services.locale.appLocaleAsBCP47;
+  },
+  get localeLanguageCode() {
+    return (
+      Services.locale.appLocaleAsBCP47 &&
+      Services.locale.appLocaleAsBCP47.substr(0, 2)
+    );
+  },
+  get browserSettings() {
+    const { settings } = lazy.TelemetryEnvironment.currentEnvironment;
+    return {
+      update: settings.update,
+    };
+  },
+  get attributionData() {
+    // Attribution is determined at startup - so we can use the cached attribution at this point
+    return lazy.AttributionCode.getCachedAttributionData();
+  },
+  get currentDate() {
+    return new Date();
+  },
+  get profileAgeCreated() {
+    return lazy.ProfileAge().then(times => times.created);
+  },
+  get profileAgeReset() {
+    return lazy.ProfileAge().then(times => times.reset);
+  },
+  get usesFirefoxSync() {
+    return Services.prefs.prefHasUserValue(FXA_USERNAME_PREF);
+  },
+  get isFxAEnabled() {
+    return lazy.isFxAEnabled;
+  },
+  get isFxASignedIn() {
+    return new Promise(resolve => {
+      if (!lazy.isFxAEnabled) {
+        resolve(false);
+      }
+      if (Services.prefs.getStringPref(FXA_USERNAME_PREF, "")) {
+        resolve(true);
+      }
+      lazy.fxAccounts
+        .getSignedInUser()
+        .then(data => resolve(!!data))
+        .catch(e => resolve(false));
+    });
+  },
+  get sync() {
+    return {
+      desktopDevices: lazy.clientsDevicesDesktop,
+      mobileDevices: lazy.clientsDevicesMobile,
+      totalDevices: lazy.syncNumClients,
+    };
+  },
+  get xpinstallEnabled() {
+    // This is needed for all add-on recommendations, to know if we allow xpi installs in the first place
+    return lazy.isXPIInstallEnabled;
+  },
+  get addonsInfo() {
+    let bts = Cc["@mozilla.org/backgroundtasks;1"]?.getService(
+      Ci.nsIBackgroundTasks
+    );
+    if (bts?.isBackgroundTaskMode) {
+      return { addons: {}, isFullData: true };
+    }
+
+    return lazy.AddonManager.getActiveAddons(["extension", "service"]).then(
+      ({ addons, fullData }) => {
+        const info = {};
+        for (const addon of addons) {
+          info[addon.id] = {
+            version: addon.version,
+            type: addon.type,
+            isSystem: addon.isSystem,
+            isWebExtension: addon.isWebExtension,
+          };
+          if (fullData) {
+            Object.assign(info[addon.id], {
+              name: addon.name,
+              userDisabled: addon.userDisabled,
+              installDate: addon.installDate,
+            });
+          }
+        }
+        return { addons: info, isFullData: fullData };
+      }
+    );
+  },
+  get searchEngines() {
+    const NONE = { installed: [], current: "" };
+    let bts = Cc["@mozilla.org/backgroundtasks;1"]?.getService(
+      Ci.nsIBackgroundTasks
+    );
+    if (bts?.isBackgroundTaskMode) {
+      return Promise.resolve(NONE);
+    }
+    return new Promise(resolve => {
+      // Note: calling init ensures this code is only executed after Search has been initialized
+      Services.search
+        .getAppProvidedEngines()
+        .then(engines => {
+          resolve({
+            current: Services.search.defaultEngine.identifier,
+            installed: engines.map(engine => engine.identifier),
+          });
+        })
+        .catch(() => resolve(NONE));
+    });
+  },
+  get isDefaultBrowser() {
+    return QueryCache.getters.isDefaultBrowser.get().catch(() => null);
+  },
+  get devToolsOpenedCount() {
+    return lazy.devtoolsSelfXSSCount;
+  },
+  get topFrecentSites() {
+    return QueryCache.queries.TopFrecentSites.get().then(sites =>
+      sites.map(site => ({
+        url: site.url,
+        host: new URL(site.url).hostname,
+        frecency: site.frecency,
+        lastVisitDate: site.lastVisitDate,
+      }))
+    );
+  },
+  get recentBookmarks() {
+    return QueryCache.queries.RecentBookmarks.get();
+  },
+  get pinnedSites() {
+    return NewTabUtils.pinnedLinks.links.map(site =>
+      site
+        ? {
+            url: site.url,
+            host: new URL(site.url).hostname,
+            searchTopSite: site.searchTopSite,
+          }
+        : {}
+    );
+  },
+  get providerCohorts() {
+    return lazy.ASRouterPreferences.providers.reduce((prev, current) => {
+      prev[current.id] = current.cohort || "";
+      return prev;
+    }, {});
+  },
+  get totalBookmarksCount() {
+    return QueryCache.queries.TotalBookmarksCount.get();
+  },
+  get firefoxVersion() {
+    return parseInt(AppConstants.MOZ_APP_VERSION.match(/\d+/), 10);
+  },
+  get region() {
+    return lazy.Region.home || "";
+  },
+  get needsUpdate() {
+    return QueryCache.queries.CheckBrowserNeedsUpdate.get();
+  },
+  get hasPinnedTabs() {
+    for (let win of Services.wm.getEnumerator("navigator:browser")) {
+      if (win.closed || !win.ownerGlobal.gBrowser) {
+        continue;
+      }
+      if (win.ownerGlobal.gBrowser.visibleTabs.filter(t => t.pinned).length) {
+        return true;
+      }
+    }
+
+    return false;
+  },
+  get hasAccessedFxAPanel() {
+    return lazy.hasAccessedFxAPanel;
+  },
+  get isWhatsNewPanelEnabled() {
+    return lazy.isWhatsNewPanelEnabled;
+  },
+  get userPrefs() {
+    return {
+      cfrFeatures: lazy.cfrFeaturesUserPref,
+      cfrAddons: lazy.cfrAddonsUserPref,
+    };
+  },
+  get totalBlockedCount() {
+    return lazy.TrackingDBService.sumAllEvents();
+  },
+  get blockedCountByType() {
+    const idToTextMap = new Map([
+      [Ci.nsITrackingDBService.TRACKERS_ID, "trackerCount"],
+      [Ci.nsITrackingDBService.TRACKING_COOKIES_ID, "cookieCount"],
+      [Ci.nsITrackingDBService.CRYPTOMINERS_ID, "cryptominerCount"],
+      [Ci.nsITrackingDBService.FINGERPRINTERS_ID, "fingerprinterCount"],
+      [Ci.nsITrackingDBService.SOCIAL_ID, "socialCount"],
+    ]);
+
+    const dateTo = new Date();
+    const dateFrom = new Date(dateTo.getTime() - 42 * 24 * 60 * 60 * 1000);
+    return lazy.TrackingDBService.getEventsByDateRange(dateFrom, dateTo).then(
+      eventsByDate => {
+        let totalEvents = {};
+        for (let blockedType of idToTextMap.values()) {
+          totalEvents[blockedType] = 0;
+        }
+
+        return eventsByDate.reduce((acc, day) => {
+          const type = day.getResultByName("type");
+          const count = day.getResultByName("count");
+          acc[idToTextMap.get(type)] = acc[idToTextMap.get(type)] + count;
+          return acc;
+        }, totalEvents);
+      }
+    );
+  },
+  get attachedFxAOAuthClients() {
+    return this.usesFirefoxSync
+      ? QueryCache.queries.ListAttachedOAuthClients.get()
+      : [];
+  },
+  get platformName() {
+    return AppConstants.platform;
+  },
+  get isChinaRepack() {
+    return (
+      Services.prefs
+        .getDefaultBranch(null)
+        .getCharPref(DISTRIBUTION_ID_PREF, "default") ===
+      DISTRIBUTION_ID_CHINA_REPACK
+    );
+  },
+  get userId() {
+    return lazy.ClientEnvironment.userId;
+  },
+  get profileRestartCount() {
+    let bts = Cc["@mozilla.org/backgroundtasks;1"]?.getService(
+      Ci.nsIBackgroundTasks
+    );
+    if (bts?.isBackgroundTaskMode) {
+      return 0;
+    }
+    // Counter starts at 1 when a profile is created, substract 1 so the value
+    // returned matches expectations
+    return (
+      lazy.TelemetrySession.getMetadata("targeting").profileSubsessionCounter -
+      1
+    );
+  },
+  get homePageSettings() {
+    const url = lazy.HomePage.get();
+    const { isWebExt, isCustomUrl, urls } = parseAboutPageURL(url);
+
+    return {
+      isWebExt,
+      isCustomUrl,
+      urls,
+      isDefault: lazy.HomePage.isDefault,
+      isLocked: lazy.HomePage.locked,
+    };
+  },
+  get newtabSettings() {
+    const url = lazy.AboutNewTab.newTabURL;
+    const { isWebExt, isCustomUrl, urls } = parseAboutPageURL(url);
+
+    return {
+      isWebExt,
+      isCustomUrl,
+      isDefault: lazy.AboutNewTab.activityStreamEnabled,
+      url: urls[0].url,
+      host: urls[0].host,
+    };
+  },
+  get activeNotifications() {
+    let bts = Cc["@mozilla.org/backgroundtasks;1"]?.getService(
+      Ci.nsIBackgroundTasks
+    );
+    if (bts?.isBackgroundTaskMode) {
+      // This might need to hook into the alert service to enumerate relevant
+      // persistent native notifications.
+      return false;
+    }
+
+    let window = lazy.BrowserWindowTracker.getTopWindow();
+
+    // Technically this doesn't mean we have active notifications,
+    // but because we use !activeNotifications to check for conflicts, this should return true
+    if (!window) {
+      return true;
+    }
+
+    if (
+      window.gURLBar?.view.isOpen ||
+      window.gNotificationBox?.currentNotification ||
+      window.gBrowser.getNotificationBox()?.currentNotification
+    ) {
+      return true;
+    }
+
+    return false;
+  },
+
+  get isMajorUpgrade() {
+    return lazy.BrowserHandler.majorUpgrade;
+  },
+
+  get hasActiveEnterprisePolicies() {
+    return Services.policies.status === Services.policies.ACTIVE;
+  },
+
+  get userMonthlyActivity() {
+    return QueryCache.queries.UserMonthlyActivity.get();
+  },
+
+  get doesAppNeedPin() {
+    return QueryCache.getters.doesAppNeedPin.get();
+  },
+
+  get doesAppNeedPrivatePin() {
+    return QueryCache.getters.doesAppNeedPrivatePin.get();
+  },
+
+  get launchOnLoginEnabled() {
+    if (AppConstants.platform !== "win") {
+      return false;
+    }
+    return lazy.WindowsLaunchOnLogin.getLaunchOnLoginEnabled();
+  },
+
+  /**
+   * Is this invocation running in background task mode?
+   *
+   * @return {boolean} `true` if running in background task mode.
+   */
+  get isBackgroundTaskMode() {
+    let bts = Cc["@mozilla.org/backgroundtasks;1"]?.getService(
+      Ci.nsIBackgroundTasks
+    );
+    return !!bts?.isBackgroundTaskMode;
+  },
+
+  /**
+   * A non-empty task name if this invocation is running in background
+   * task mode, or `null` if this invocation is not running in
+   * background task mode.
+   *
+   * @return {string|null} background task name or `null`.
+   */
+  get backgroundTaskName() {
+    let bts = Cc["@mozilla.org/backgroundtasks;1"]?.getService(
+      Ci.nsIBackgroundTasks
+    );
+    return bts?.backgroundTaskName();
+  },
+
+  get userPrefersReducedMotion() {
+    let window = Services.appShell.hiddenDOMWindow;
+    return window?.matchMedia("(prefers-reduced-motion: reduce)")?.matches;
+  },
+
+  /**
+   * Whether or not the user is in the Major Release 2022 holdback study.
+   */
+  get inMr2022Holdback() {
+    return (
+      lazy.NimbusFeatures.majorRelease2022.getVariable("onboarding") === false
+    );
+  },
+
+  /**
+   * The distribution id, if any.
+   * @return {string}
+   */
+  get distributionId() {
+    return Services.prefs
+      .getDefaultBranch(null)
+      .getCharPref("distribution.id", "");
+  },
+
+  /** Where the Firefox View button is shown, if at all.
+   * @return {string} container of the button if it is shown in the toolbar/overflow menu
+   * @return {string} `null` if the button has been removed
+   */
+  get fxViewButtonAreaType() {
+    let button = lazy.CustomizableUI.getWidget("firefox-view-button");
+    return button.areaType;
+  },
+
+  isDefaultHandler: {
+    get html() {
+      return QueryCache.getters.isDefaultHTMLHandler.get();
+    },
+    get pdf() {
+      return QueryCache.getters.isDefaultPDFHandler.get();
+    },
+  },
+
+  get defaultPDFHandler() {
+    return QueryCache.getters.defaultPDFHandler.get();
+  },
+
+  get creditCardsSaved() {
+    return getAutofillRecords({ collectionName: "creditCards" });
+  },
+
+  get addressesSaved() {
+    return getAutofillRecords({ collectionName: "addresses" });
+  },
+
+  /**
+   * Has the user ever used the Migration Wizard to migrate bookmarks?
+   * @return {boolean} `true` if bookmark migration has occurred.
+   */
+  get hasMigratedBookmarks() {
+    return lazy.hasMigratedBookmarks;
+  },
+
+  /**
+   * Has the user ever used the Migration Wizard to migrate passwords from
+   * a CSV file?
+   * @return {boolean} `true` if CSV passwords have been imported via the
+   *   migration wizard.
+   */
+  get hasMigratedCSVPasswords() {
+    return lazy.hasMigratedCSVPasswords;
+  },
+
+  /**
+   * Has the user ever used the Migration Wizard to migrate history?
+   * @return {boolean} `true` if history migration has occurred.
+   */
+  get hasMigratedHistory() {
+    return lazy.hasMigratedHistory;
+  },
+
+  /**
+   * Has the user ever used the Migration Wizard to migrate passwords?
+   * @return {boolean} `true` if password migration has occurred.
+   */
+  get hasMigratedPasswords() {
+    return lazy.hasMigratedPasswords;
+  },
+
+  /**
+   * Returns true if the user is configured to use the embedded migration
+   * wizard in about:welcome by having
+   * "browser.migrate.content-modal.about-welcome-behavior" be equal to
+   * "embedded".
+   * @return {boolean} `true` if the embedded migration wizard is enabled.
+   */
+  get useEmbeddedMigrationWizard() {
+    return lazy.useEmbeddedMigrationWizard;
+  },
+
+  /**
+   * Whether the user installed Firefox via the RTAMO flow.
+   * @return {boolean} `true` when RTAMO has been used to download Firefox,
+   * `false` otherwise.
+   */
+  get isRTAMO() {
+    const { attributionData } = this;
+
+    return (
+      attributionData?.source === "addons.mozilla.org" &&
+      !!decodeAttributionValue(attributionData?.content)?.startsWith("rta:")
+    );
+  },
+
+  /**
+   * Whether the user installed via the device migration flow.
+   * @return {boolean} `true` when the link to download the browser was part
+   * of guidance for device migration. `false` otherwise.
+   */
+  get isDeviceMigration() {
+    const { attributionData } = this;
+
+    return attributionData?.campaign === "migration";
+  },
+
+  /**
+   * The values of the height and width available to the browser to display
+   * web content. The available height and width are each calculated taking
+   * into account the presence of menu bars, docks, and other similar OS elements
+   * @returns {Object} resolution The resolution object containing width and height
+   * @returns {string} resolution.width The available width of the primary monitor
+   * @returns {string} resolution.height The available height of the primary monitor
+   */
+  get primaryResolution() {
+    // Using hidden dom window ensures that we have a window object
+    // to grab a screen from in certain edge cases such as targeting evaluation
+    // during first startup before the browser is available, and in MacOS
+    let window = Services.appShell.hiddenDOMWindow;
+    return {
+      width: window?.screen.availWidth,
+      height: window?.screen.availHeight,
+    };
+  },
+
+  get archBits() {
+    let bits = null;
+    try {
+      bits = Services.sysinfo.getProperty("archbits", null);
+    } catch (_e) {
+      // getProperty can throw if the memsize does not exist
+    }
+    if (bits) {
+      bits = Number(bits);
+    }
+    return bits;
+  },
+
+  get memoryMB() {
+    let memory = null;
+    try {
+      memory = Services.sysinfo.getProperty("memsize", null);
+    } catch (_e) {
+      // getProperty can throw if the memsize does not exist
+    }
+    if (memory) {
+      memory = Number(memory) / 1024 / 1024;
+    }
+    return memory;
+  },
+};
+
+export const ASRouterTargeting = {
+  Environment: TargetingGetters,
+
+  /**
+   * Snapshot the current targeting environment.
+   *
+   * Asynchronous getters are handled.  Getters that throw or reject
+   * are ignored.
+   *
+   * Leftward (earlier) targets supercede rightward (later) targets, just like
+   * `TargetingContext.combineContexts`.
+   *
+   * @param {object} options - object containing:
+   * @param {Array<object>|null} options.targets -
+   *        targeting environments to snapshot; (default: `[ASRouterTargeting.Environment]`)
+   * @return {object} snapshot of target with `environment` object and `version` integer.
+   */
+  async getEnvironmentSnapshot({
+    targets = [ASRouterTargeting.Environment],
+  } = {}) {
+    async function resolve(object) {
+      if (typeof object === "object" && object !== null) {
+        if (Array.isArray(object)) {
+          return Promise.all(object.map(async item => resolve(await item)));
+        }
+
+        if (object instanceof Date) {
+          return object;
+        }
+
+        // One promise for each named property. Label promises with property name.
+        const promises = Object.keys(object).map(async key => {
+          // Each promise needs to check if we're shutting down when it is evaluated.
+          if (Services.startup.shuttingDown) {
+            throw new Error(
+              "shutting down, so not querying targeting environment"
+            );
+          }
+
+          const value = await resolve(await object[key]);
+
+          return [key, value];
+        });
+
+        const resolved = {};
+        for (const result of await Promise.allSettled(promises)) {
+          // Ignore properties that are rejected.
+          if (result.status === "fulfilled") {
+            const [key, value] = result.value;
+            resolved[key] = value;
+          }
+        }
+
+        return resolved;
+      }
+
+      return object;
+    }
+
+    // We would like to use `TargetingContext.combineContexts`, but `Proxy`
+    // instances complicate iterating with `Object.keys`.  Instead, merge by
+    // hand after resolving.
+    const environment = {};
+    for (let target of targets.toReversed()) {
+      Object.assign(environment, await resolve(target));
+    }
+
+    // Should we need to migrate in the future.
+    const snapshot = { environment, version: 1 };
+
+    return snapshot;
+  },
+
+  isTriggerMatch(trigger = {}, candidateMessageTrigger = {}) {
+    if (trigger.id !== candidateMessageTrigger.id) {
+      return false;
+    } else if (
+      !candidateMessageTrigger.params &&
+      !candidateMessageTrigger.patterns
+    ) {
+      return true;
+    }
+
+    if (!trigger.param) {
+      return false;
+    }
+
+    return (
+      (candidateMessageTrigger.params &&
+        trigger.param.host &&
+        candidateMessageTrigger.params.includes(trigger.param.host)) ||
+      (candidateMessageTrigger.params &&
+        trigger.param.type &&
+        candidateMessageTrigger.params.filter(t => t === trigger.param.type)
+          .length) ||
+      (candidateMessageTrigger.params &&
+        trigger.param.type &&
+        candidateMessageTrigger.params.filter(
+          t => (t & trigger.param.type) === t
+        ).length) ||
+      (candidateMessageTrigger.patterns &&
+        trigger.param.url &&
+        new MatchPatternSet(candidateMessageTrigger.patterns).matches(
+          trigger.param.url
+        ))
+    );
+  },
+
+  /**
+   * getCachedEvaluation - Return a cached jexl evaluation if available
+   *
+   * @param {string} targeting JEXL expression to lookup
+   * @returns {obj|null} Object with value result or null if not available
+   */
+  getCachedEvaluation(targeting) {
+    if (jexlEvaluationCache.has(targeting)) {
+      const { timestamp, value } = jexlEvaluationCache.get(targeting);
+      if (Date.now() - timestamp <= CACHE_EXPIRATION) {
+        return { value };
+      }
+      jexlEvaluationCache.delete(targeting);
+    }
+
+    return null;
+  },
+
+  /**
+   * checkMessageTargeting - Checks is a message's targeting parameters are satisfied
+   *
+   * @param {*} message An AS router message
+   * @param {obj} targetingContext a TargetingContext instance complete with eval environment
+   * @param {func} onError A function to handle errors (takes two params; error, message)
+   * @param {boolean} shouldCache Should the JEXL evaluations be cached and reused.
+   * @returns
+   */
+  async checkMessageTargeting(message, targetingContext, onError, shouldCache) {
+    lazy.ASRouterPreferences.console.debug(
+      "in checkMessageTargeting, arguments = ",
+      Array.from(arguments) // eslint-disable-line prefer-rest-params
+    );
+
+    // If no targeting is specified,
+    if (!message.targeting) {
+      return true;
+    }
+    let result;
+    try {
+      if (shouldCache) {
+        result = this.getCachedEvaluation(message.targeting);
+        if (result) {
+          return result.value;
+        }
+      }
+      // Used to report the source of the targeting error in the case of
+      // undesired events
+      targetingContext.setTelemetrySource(message.id);
+      result = await targetingContext.evalWithDefault(message.targeting);
+      if (shouldCache) {
+        jexlEvaluationCache.set(message.targeting, {
+          timestamp: Date.now(),
+          value: result,
+        });
+      }
+    } catch (error) {
+      if (onError) {
+        onError(error, message);
+      }
+      console.error(error);
+      result = false;
+    }
+    return result;
+  },
+
+  _isMessageMatch(
+    message,
+    trigger,
+    targetingContext,
+    onError,
+    shouldCache = false
+  ) {
+    return (
+      message &&
+      (trigger
+        ? this.isTriggerMatch(trigger, message.trigger)
+        : !message.trigger) &&
+      // If a trigger expression was passed to this function, the message should match it.
+      // Otherwise, we should choose a message with no trigger property (i.e. a message that can show up at any time)
+      this.checkMessageTargeting(
+        message,
+        targetingContext,
+        onError,
+        shouldCache
+      )
+    );
+  },
+
+  /**
+   * findMatchingMessage - Given an array of messages, returns one message
+   *                       whos targeting expression evaluates to true
+   *
+   * @param {Array<Message>} messages An array of AS router messages
+   * @param {trigger} string A trigger expression if a message for that trigger is desired
+   * @param {obj|null} context A FilterExpression context. Defaults to TargetingGetters above.
+   * @param {func} onError A function to handle errors (takes two params; error, message)
+   * @param {func} ordered An optional param when true sort message by order specified in message
+   * @param {boolean} shouldCache Should the JEXL evaluations be cached and reused.
+   * @param {boolean} returnAll Should we return all matching messages, not just the first one found.
+   * @returns {obj|Array<Message>} If returnAll is false, a single message. If returnAll is true, an array of messages.
+   */
+  async findMatchingMessage({
+    messages,
+    trigger = {},
+    context = {},
+    onError,
+    ordered = false,
+    shouldCache = false,
+    returnAll = false,
+  }) {
+    const sortedMessages = getSortedMessages(messages, { ordered });
+    lazy.ASRouterPreferences.console.debug(
+      "in findMatchingMessage, sortedMessages = ",
+      sortedMessages
+    );
+    const matching = returnAll ? [] : null;
+    const targetingContext = new lazy.TargetingContext(
+      lazy.TargetingContext.combineContexts(
+        context,
+        this.Environment,
+        trigger.context || {}
+      )
+    );
+
+    const isMatch = candidate =>
+      this._isMessageMatch(
+        candidate,
+        trigger,
+        targetingContext,
+        onError,
+        shouldCache
+      );
+
+    for (const candidate of sortedMessages) {
+      if (await isMatch(candidate)) {
+        // If not returnAll, we should return the first message we find that matches.
+        if (!returnAll) {
+          return candidate;
+        }
+
+        matching.push(candidate);
+      }
+    }
+    return matching;
+  },
+};
diff --git a/browser/components/asrouter/modules/ASRouterTriggerListeners.sys.mjs b/browser/components/asrouter/modules/ASRouterTriggerListeners.sys.mjs
new file mode 100644
index 0000000000..d8eaa3994d
--- /dev/null
+++ b/browser/components/asrouter/modules/ASRouterTriggerListeners.sys.mjs
@@ -0,0 +1,1439 @@
+/* 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/. */
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  AboutReaderParent: "resource:///actors/AboutReaderParent.sys.mjs",
+  BrowserUtils: "resource://gre/modules/BrowserUtils.sys.mjs",
+  EveryWindow: "resource:///modules/EveryWindow.sys.mjs",
+  FeatureCalloutBroker:
+    "resource:///modules/asrouter/FeatureCalloutBroker.sys.mjs",
+  PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
+  clearTimeout: "resource://gre/modules/Timer.sys.mjs",
+  setTimeout: "resource://gre/modules/Timer.sys.mjs",
+});
+
+ChromeUtils.defineLazyGetter(lazy, "log", () => {
+  const { Logger } = ChromeUtils.importESModule(
+    "resource://messaging-system/lib/Logger.sys.mjs"
+  );
+  return new Logger("ASRouterTriggerListeners");
+});
+
+const FEW_MINUTES = 15 * 60 * 1000; // 15 mins
+
+function isPrivateWindow(win) {
+  return (
+    !(win instanceof Ci.nsIDOMWindow) ||
+    win.closed ||
+    lazy.PrivateBrowsingUtils.isWindowPrivate(win)
+  );
+}
+
+/**
+ * Check current location against the list of allowed hosts
+ * Additionally verify for redirects and check original request URL against
+ * the list.
+ *
+ * @returns {object} - {host, url} pair that matched the list of allowed hosts
+ */
+function checkURLMatch(aLocationURI, { hosts, matchPatternSet }, aRequest) {
+  // If checks pass we return a match
+  let match;
+  try {
+    match = { host: aLocationURI.host, url: aLocationURI.spec };
+  } catch (e) {
+    // nsIURI.host can throw for non-nsStandardURL nsIURIs
+    return false;
+  }
+
+  // Check current location against allowed hosts
+  if (hosts.has(match.host)) {
+    return match;
+  }
+
+  if (matchPatternSet) {
+    if (matchPatternSet.matches(match.url)) {
+      return match;
+    }
+  }
+
+  // Nothing else to check, return early
+  if (!aRequest) {
+    return false;
+  }
+
+  // The original URL at the start of the request
+  const originalLocation = aRequest.QueryInterface(Ci.nsIChannel).originalURI;
+  // We have been redirected
+  if (originalLocation.spec !== aLocationURI.spec) {
+    return (
+      hosts.has(originalLocation.host) && {
+        host: originalLocation.host,
+        url: originalLocation.spec,
+      }
+    );
+  }
+
+  return false;
+}
+
+function createMatchPatternSet(patterns, flags) {
+  try {
+    return new MatchPatternSet(new Set(patterns), flags);
+  } catch (e) {
+    console.error(e);
+  }
+  return new MatchPatternSet([]);
+}
+
+/**
+ * A Map from trigger IDs to singleton trigger listeners. Each listener must
+ * have idempotent `init` and `uninit` methods.
+ */
+export const ASRouterTriggerListeners = new Map([
+  [
+    "openArticleURL",
+    {
+      id: "openArticleURL",
+      _initialized: false,
+      _triggerHandler: null,
+      _hosts: new Set(),
+      _matchPatternSet: null,
+      readerModeEvent: "Reader:UpdateReaderButton",
+
+      init(triggerHandler, hosts, patterns) {
+        if (!this._initialized) {
+          this.receiveMessage = this.receiveMessage.bind(this);
+          lazy.AboutReaderParent.addMessageListener(this.readerModeEvent, this);
+          this._triggerHandler = triggerHandler;
+          this._initialized = true;
+        }
+        if (patterns) {
+          this._matchPatternSet = createMatchPatternSet([
+            ...(this._matchPatternSet ? this._matchPatternSet.patterns : []),
+            ...patterns,
+          ]);
+        }
+        if (hosts) {
+          hosts.forEach(h => this._hosts.add(h));
+        }
+      },
+
+      receiveMessage({ data, target }) {
+        if (data && data.isArticle) {
+          const match = checkURLMatch(target.currentURI, {
+            hosts: this._hosts,
+            matchPatternSet: this._matchPatternSet,
+          });
+          if (match) {
+            this._triggerHandler(target, { id: this.id, param: match });
+          }
+        }
+      },
+
+      uninit() {
+        if (this._initialized) {
+          lazy.AboutReaderParent.removeMessageListener(
+            this.readerModeEvent,
+            this
+          );
+          this._initialized = false;
+          this._triggerHandler = null;
+          this._hosts = new Set();
+          this._matchPatternSet = null;
+        }
+      },
+    },
+  ],
+  [
+    "openBookmarkedURL",
+    {
+      id: "openBookmarkedURL",
+      _initialized: false,
+      _triggerHandler: null,
+      _hosts: new Set(),
+      bookmarkEvent: "bookmark-icon-updated",
+
+      init(triggerHandler) {
+        if (!this._initialized) {
+          Services.obs.addObserver(this, this.bookmarkEvent);
+          this._triggerHandler = triggerHandler;
+          this._initialized = true;
+        }
+      },
+
+      observe(subject, topic, data) {
+        if (topic === this.bookmarkEvent && data === "starred") {
+          const browser = Services.wm.getMostRecentBrowserWindow();
+          if (browser) {
+            this._triggerHandler(browser.gBrowser.selectedBrowser, {
+              id: this.id,
+            });
+          }
+        }
+      },
+
+      uninit() {
+        if (this._initialized) {
+          Services.obs.removeObserver(this, this.bookmarkEvent);
+          this._initialized = false;
+          this._triggerHandler = null;
+          this._hosts = new Set();
+        }
+      },
+    },
+  ],
+  [
+    "frequentVisits",
+    {
+      id: "frequentVisits",
+      _initialized: false,
+      _triggerHandler: null,
+      _hosts: null,
+      _matchPatternSet: null,
+      _visits: null,
+
+      init(triggerHandler, hosts = [], patterns) {
+        if (!this._initialized) {
+          this.onTabSwitch = this.onTabSwitch.bind(this);
+          lazy.EveryWindow.registerCallback(
+            this.id,
+            win => {
+              if (!isPrivateWindow(win)) {
+                win.addEventListener("TabSelect", this.onTabSwitch);
+                win.gBrowser.addTabsProgressListener(this);
+              }
+            },
+            win => {
+              if (!isPrivateWindow(win)) {
+                win.removeEventListener("TabSelect", this.onTabSwitch);
+                win.gBrowser.removeTabsProgressListener(this);
+              }
+            }
+          );
+          this._visits = new Map();
+          this._initialized = true;
+        }
+        this._triggerHandler = triggerHandler;
+        if (patterns) {
+          this._matchPatternSet = createMatchPatternSet([
+            ...(this._matchPatternSet ? this._matchPatternSet.patterns : []),
+            ...patterns,
+          ]);
+        }
+        if (this._hosts) {
+          hosts.forEach(h => this._hosts.add(h));
+        } else {
+          this._hosts = new Set(hosts); // Clone the hosts to avoid unexpected behaviour
+        }
+      },
+
+      /* _updateVisits - Record visit timestamps for websites that match `this._hosts` and only
+       * if it's been more than FEW_MINUTES since the last visit.
+       * @param {string} host - Location host of current selected tab
+       * @returns {boolean} - If the new visit has been recorded
+       */
+      _updateVisits(host) {
+        const visits = this._visits.get(host);
+
+        if (visits && Date.now() - visits[0] > FEW_MINUTES) {
+          this._visits.set(host, [Date.now(), ...visits]);
+          return true;
+        }
+        if (!visits) {
+          this._visits.set(host, [Date.now()]);
+          return true;
+        }
+
+        return false;
+      },
+
+      onTabSwitch(event) {
+        if (!event.target.ownerGlobal.gBrowser) {
+          return;
+        }
+
+        const { gBrowser } = event.target.ownerGlobal;
+        const match = checkURLMatch(gBrowser.currentURI, {
+          hosts: this._hosts,
+          matchPatternSet: this._matchPatternSet,
+        });
+        if (match) {
+          this.triggerHandler(gBrowser.selectedBrowser, match);
+        }
+      },
+
+      triggerHandler(aBrowser, match) {
+        const updated = this._updateVisits(match.host);
+
+        // If the previous visit happend less than FEW_MINUTES ago
+        // no updates were made, no need to trigger the handler
+        if (!updated) {
+          return;
+        }
+
+        this._triggerHandler(aBrowser, {
+          id: this.id,
+          param: match,
+          context: {
+            // Remapped to {host, timestamp} because JEXL operators can only
+            // filter over collections (arrays of objects)
+            recentVisits: this._visits
+              .get(match.host)
+              .map(timestamp => ({ host: match.host, timestamp })),
+          },
+        });
+      },
+
+      onLocationChange(aBrowser, aWebProgress, aRequest, aLocationURI, aFlags) {
+        // Some websites trigger redirect events after they finish loading even
+        // though the location remains the same. This results in onLocationChange
+        // events to be fired twice.
+        const isSameDocument = !!(
+          aFlags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT
+        );
+        if (aWebProgress.isTopLevel && !isSameDocument) {
+          const match = checkURLMatch(
+            aLocationURI,
+            { hosts: this._hosts, matchPatternSet: this._matchPatternSet },
+            aRequest
+          );
+          if (match) {
+            this.triggerHandler(aBrowser, match);
+          }
+        }
+      },
+
+      uninit() {
+        if (this._initialized) {
+          lazy.EveryWindow.unregisterCallback(this.id);
+
+          this._initialized = false;
+          this._triggerHandler = null;
+          this._hosts = null;
+          this._matchPatternSet = null;
+          this._visits = null;
+        }
+      },
+    },
+  ],
+
+  /**
+   * Attach listeners to every browser window to detect location changes, and
+   * notify the trigger handler whenever we navigate to a URL with a hostname
+   * we're looking for.
+   */
+  [
+    "openURL",
+    {
+      id: "openURL",
+      _initialized: false,
+      _triggerHandler: null,
+      _hosts: null,
+      _matchPatternSet: null,
+      _visits: null,
+
+      /*
+       * If the listener is already initialised, `init` will replace the trigger
+       * handler and add any new hosts to `this._hosts`.
+       */
+      init(triggerHandler, hosts = [], patterns) {
+        if (!this._initialized) {
+          this.onLocationChange = this.onLocationChange.bind(this);
+          lazy.EveryWindow.registerCallback(
+            this.id,
+            win => {
+              if (!isPrivateWindow(win)) {
+                win.gBrowser.addTabsProgressListener(this);
+              }
+            },
+            win => {
+              if (!isPrivateWindow(win)) {
+                win.gBrowser.removeTabsProgressListener(this);
+              }
+            }
+          );
+
+          this._visits = new Map();
+          this._initialized = true;
+        }
+        this._triggerHandler = triggerHandler;
+        if (patterns) {
+          this._matchPatternSet = createMatchPatternSet([
+            ...(this._matchPatternSet ? this._matchPatternSet.patterns : []),
+            ...patterns,
+          ]);
+        }
+        if (this._hosts) {
+          hosts.forEach(h => this._hosts.add(h));
+        } else {
+          this._hosts = new Set(hosts); // Clone the hosts to avoid unexpected behaviour
+        }
+      },
+
+      uninit() {
+        if (this._initialized) {
+          lazy.EveryWindow.unregisterCallback(this.id);
+
+          this._initialized = false;
+          this._triggerHandler = null;
+          this._hosts = null;
+          this._matchPatternSet = null;
+          this._visits = null;
+        }
+      },
+
+      onLocationChange(aBrowser, aWebProgress, aRequest, aLocationURI, aFlags) {
+        // Some websites trigger redirect events after they finish loading even
+        // though the location remains the same. This results in onLocationChange
+        // events to be fired twice.
+        const isSameDocument = !!(
+          aFlags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT
+        );
+        if (aWebProgress.isTopLevel && !isSameDocument) {
+          const match = checkURLMatch(
+            aLocationURI,
+            { hosts: this._hosts, matchPatternSet: this._matchPatternSet },
+            aRequest
+          );
+          if (match) {
+            let visitsCount = (this._visits.get(match.url) || 0) + 1;
+            this._visits.set(match.url, visitsCount);
+            this._triggerHandler(aBrowser, {
+              id: this.id,
+              param: match,
+              context: { visitsCount },
+            });
+          }
+        }
+      },
+    },
+  ],
+
+  /**
+   * Add an observer notification to notify the trigger handler whenever the user
+   * saves or updates a login via the login capture doorhanger.
+   */
+  [
+    "newSavedLogin",
+    {
+      _initialized: false,
+      _triggerHandler: null,
+
+      /**
+       * If the listener is already initialised, `init` will replace the trigger
+       * handler.
+       */
+      init(triggerHandler) {
+        if (!this._initialized) {
+          Services.obs.addObserver(this, "LoginStats:NewSavedPassword");
+          Services.obs.addObserver(this, "LoginStats:LoginUpdateSaved");
+          this._initialized = true;
+        }
+        this._triggerHandler = triggerHandler;
+      },
+
+      uninit() {
+        if (this._initialized) {
+          Services.obs.removeObserver(this, "LoginStats:NewSavedPassword");
+          Services.obs.removeObserver(this, "LoginStats:LoginUpdateSaved");
+
+          this._initialized = false;
+          this._triggerHandler = null;
+        }
+      },
+
+      observe(aSubject, aTopic, aData) {
+        if (aSubject.currentURI.asciiHost === "accounts.firefox.com") {
+          // Don't notify about saved logins on the FxA login origin since this
+          // trigger is used to promote login Sync and getting a recommendation
+          // to enable Sync during the sign up process is a bad UX.
+          return;
+        }
+
+        switch (aTopic) {
+          case "LoginStats:NewSavedPassword": {
+            this._triggerHandler(aSubject, {
+              id: "newSavedLogin",
+              context: { type: "save" },
+            });
+            break;
+          }
+          case "LoginStats:LoginUpdateSaved": {
+            this._triggerHandler(aSubject, {
+              id: "newSavedLogin",
+              context: { type: "update" },
+            });
+            break;
+          }
+          default: {
+            throw new Error(`Unexpected observer notification: ${aTopic}`);
+          }
+        }
+      },
+    },
+  ],
+  [
+    "formAutofill",
+    {
+      id: "formAutofill",
+      _initialized: false,
+      _triggerHandler: null,
+      _triggerDelay: 10000, // 10 second delay before triggering
+      _topic: "formautofill-storage-changed",
+      _events: ["add", "update", "notifyUsed"] /** @see AutofillRecords */,
+      _collections: ["addresses", "creditCards"] /** @see AutofillRecords */,
+
+      init(triggerHandler) {
+        if (!this._initialized) {
+          Services.obs.addObserver(this, this._topic);
+          this._initialized = true;
+        }
+        this._triggerHandler = triggerHandler;
+      },
+
+      uninit() {
+        if (this._initialized) {
+          Services.obs.removeObserver(this, this._topic);
+          this._initialized = false;
+          this._triggerHandler = null;
+        }
+      },
+
+      observe(subject, topic, data) {
+        const browser =
+          Services.wm.getMostRecentBrowserWindow()?.gBrowser.selectedBrowser;
+        if (
+          !browser ||
+          topic !== this._topic ||
+          !subject.wrappedJSObject ||
+          // Ignore changes caused by manual edits in the credit card/address
+          // managers in about:preferences.
+          browser.contentWindow?.gSubDialog?.dialogs.length
+        ) {
+          return;
+        }
+        let { sourceSync, collectionName } = subject.wrappedJSObject;
+        // Ignore changes from sync and changes to untracked collections.
+        if (sourceSync || !this._collections.includes(collectionName)) {
+          return;
+        }
+        if (this._events.includes(data)) {
+          let event = data;
+          let type = collectionName;
+          if (event === "notifyUsed") {
+            event = "use";
+          }
+          if (type === "creditCards") {
+            type = "card";
+          }
+          if (type === "addresses") {
+            type = "address";
+          }
+          lazy.setTimeout(() => {
+            if (
+              this._initialized &&
+              // Make sure the browser still exists and is still selected.
+              browser.isConnectedAndReady &&
+              browser ===
+                Services.wm.getMostRecentBrowserWindow()?.gBrowser
+                  .selectedBrowser
+            ) {
+              this._triggerHandler(browser, {
+                id: this.id,
+                context: { event, type },
+              });
+            }
+          }, this._triggerDelay);
+        }
+      },
+    },
+  ],
+
+  [
+    "contentBlocking",
+    {
+      _initialized: false,
+      _triggerHandler: null,
+      _events: [],
+      _sessionPageLoad: 0,
+      onLocationChange: null,
+
+      init(triggerHandler, params, patterns) {
+        params.forEach(p => this._events.push(p));
+
+        if (!this._initialized) {
+          Services.obs.addObserver(this, "SiteProtection:ContentBlockingEvent");
+          Services.obs.addObserver(
+            this,
+            "SiteProtection:ContentBlockingMilestone"
+          );
+          this.onLocationChange = this._onLocationChange.bind(this);
+          lazy.EveryWindow.registerCallback(
+            this.id,
+            win => {
+              if (!isPrivateWindow(win)) {
+                win.gBrowser.addTabsProgressListener(this);
+              }
+            },
+            win => {
+              if (!isPrivateWindow(win)) {
+                win.gBrowser.removeTabsProgressListener(this);
+              }
+            }
+          );
+
+          this._initialized = true;
+        }
+        this._triggerHandler = triggerHandler;
+      },
+
+      uninit() {
+        if (this._initialized) {
+          Services.obs.removeObserver(
+            this,
+            "SiteProtection:ContentBlockingEvent"
+          );
+          Services.obs.removeObserver(
+            this,
+            "SiteProtection:ContentBlockingMilestone"
+          );
+          lazy.EveryWindow.unregisterCallback(this.id);
+          this.onLocationChange = null;
+          this._initialized = false;
+        }
+        this._triggerHandler = null;
+        this._events = [];
+        this._sessionPageLoad = 0;
+      },
+
+      observe(aSubject, aTopic, aData) {
+        switch (aTopic) {
+          case "SiteProtection:ContentBlockingEvent":
+            const { browser, host, event } = aSubject.wrappedJSObject;
+            if (this._events.filter(e => (e & event) === e).length) {
+              this._triggerHandler(browser, {
+                id: "contentBlocking",
+                param: {
+                  host,
+                  type: event,
+                },
+                context: {
+                  pageLoad: this._sessionPageLoad,
+                },
+              });
+            }
+            break;
+          case "SiteProtection:ContentBlockingMilestone":
+            if (this._events.includes(aSubject.wrappedJSObject.event)) {
+              this._triggerHandler(
+                Services.wm.getMostRecentBrowserWindow().gBrowser
+                  .selectedBrowser,
+                {
+                  id: "contentBlocking",
+                  context: {
+                    pageLoad: this._sessionPageLoad,
+                  },
+                  param: {
+                    type: aSubject.wrappedJSObject.event,
+                  },
+                }
+              );
+            }
+            break;
+        }
+      },
+
+      _onLocationChange(
+        aBrowser,
+        aWebProgress,
+        aRequest,
+        aLocationURI,
+        aFlags
+      ) {
+        // Some websites trigger redirect events after they finish loading even
+        // though the location remains the same. This results in onLocationChange
+        // events to be fired twice.
+        const isSameDocument = !!(
+          aFlags & Ci.nsIWebProgressListener.LOCATION_CHANGE_SAME_DOCUMENT
+        );
+        if (
+          ["http", "https"].includes(aLocationURI.scheme) &&
+          aWebProgress.isTopLevel &&
+          !isSameDocument
+        ) {
+          this._sessionPageLoad += 1;
+        }
+      },
+    },
+  ],
+
+  [
+    "captivePortalLogin",
+    {
+      id: "captivePortalLogin",
+      _initialized: false,
+      _triggerHandler: null,
+
+      _shouldShowCaptivePortalVPNPromo() {
+        return lazy.BrowserUtils.shouldShowVPNPromo();
+      },
+
+      init(triggerHandler) {
+        if (!this._initialized) {
+          Services.obs.addObserver(this, "captive-portal-login-success");
+          this._initialized = true;
+        }
+        this._triggerHandler = triggerHandler;
+      },
+
+      observe(aSubject, aTopic, aData) {
+        switch (aTopic) {
+          case "captive-portal-login-success":
+            const browser = Services.wm.getMostRecentBrowserWindow();
+            // The check is here rather than in init because some
+            // folks leave their browsers running for a long time,
+            // eg from before leaving on a plane trip to after landing
+            // in the new destination, and the current region may have
+            // changed since init time.
+            if (browser && this._shouldShowCaptivePortalVPNPromo()) {
+              this._triggerHandler(browser.gBrowser.selectedBrowser, {
+                id: this.id,
+              });
+            }
+            break;
+        }
+      },
+
+      uninit() {
+        if (this._initialized) {
+          this._triggerHandler = null;
+          this._initialized = false;
+          Services.obs.removeObserver(this, "captive-portal-login-success");
+        }
+      },
+    },
+  ],
+
+  [
+    "preferenceObserver",
+    {
+      id: "preferenceObserver",
+      _initialized: false,
+      _triggerHandler: null,
+      _observedPrefs: [],
+
+      init(triggerHandler, prefs) {
+        if (!this._initialized) {
+          this._triggerHandler = triggerHandler;
+          this._initialized = true;
+        }
+        prefs.forEach(pref => {
+          this._observedPrefs.push(pref);
+          Services.prefs.addObserver(pref, this);
+        });
+      },
+
+      observe(aSubject, aTopic, aData) {
+        switch (aTopic) {
+          case "nsPref:changed":
+            const browser = Services.wm.getMostRecentBrowserWindow();
+            if (browser && this._observedPrefs.includes(aData)) {
+              this._triggerHandler(browser.gBrowser.selectedBrowser, {
+                id: this.id,
+                param: {
+                  type: aData,
+                },
+              });
+            }
+            break;
+        }
+      },
+
+      uninit() {
+        if (this._initialized) {
+          this._observedPrefs.forEach(pref =>
+            Services.prefs.removeObserver(pref, this)
+          );
+          this._initialized = false;
+          this._triggerHandler = null;
+          this._observedPrefs = [];
+        }
+      },
+    },
+  ],
+  [
+    "nthTabClosed",
+    {
+      id: "nthTabClosed",
+      _initialized: false,
+      _triggerHandler: null,
+      // Number of tabs the user closed this session
+      _closedTabs: 0,
+
+      init(triggerHandler) {
+        this._triggerHandler = triggerHandler;
+        if (!this._initialized) {
+          lazy.EveryWindow.registerCallback(
+            this.id,
+            win => {
+              win.addEventListener("TabClose", this);
+            },
+            win => {
+              win.removeEventListener("TabClose", this);
+            }
+          );
+          this._initialized = true;
+        }
+      },
+      handleEvent(event) {
+        if (this._initialized) {
+          if (!event.target.ownerGlobal.gBrowser) {
+            return;
+          }
+          const { gBrowser } = event.target.ownerGlobal;
+          this._closedTabs++;
+          this._triggerHandler(gBrowser.selectedBrowser, {
+            id: this.id,
+            context: { tabsClosedCount: this._closedTabs },
+          });
+        }
+      },
+      uninit() {
+        if (this._initialized) {
+          lazy.EveryWindow.unregisterCallback(this.id);
+          this._initialized = false;
+          this._triggerHandler = null;
+          this._closedTabs = 0;
+        }
+      },
+    },
+  ],
+  [
+    "activityAfterIdle",
+    {
+      id: "activityAfterIdle",
+      _initialized: false,
+      _triggerHandler: null,
+      _idleService: null,
+      // Optimization - only report idle state after one minute of idle time.
+      // This represents a minimum idleForMilliseconds of 60000.
+      _idleThreshold: 60,
+      _idleSince: null,
+      _quietSince: null,
+      _awaitingVisibilityChange: false,
+      // Fire the trigger 2 seconds after activity resumes to ensure user is
+      // actively using the browser when it fires.
+      _triggerDelay: 2000,
+      _triggerTimeout: null,
+      // We may get an idle notification immediately after waking from sleep.
+      // The idle time in such a case will be the amount of time since the last
+      // user interaction, which was before the computer went to sleep. We want
+      // to ignore them in that case, so we ignore idle notifications that
+      // happen within 1 second of the last wake notification.
+      _wakeDelay: 1000,
+      _lastWakeTime: null,
+      _listenedEvents: ["visibilitychange", "TabClose", "TabAttrModified"],
+      // When the OS goes to sleep or the process is suspended, we want to drop
+      // the idle time, since the time between sleep and wake is expected to be
+      // very long (e.g. overnight). Otherwise, this would trigger on the first
+      // activity after waking/resuming, counting sleep as idle time. This
+      // basically means each session starts with a fresh idle time.
+      _observedTopics: [
+        "sleep_notification",
+        "suspend_process_notification",
+        "wake_notification",
+        "resume_process_notification",
+        "mac_app_activate",
+      ],
+
+      get _isVisible() {
+        return [...Services.wm.getEnumerator("navigator:browser")].some(
+          win => !win.closed && !win.document?.hidden
+        );
+      },
+      get _soundPlaying() {
+        return [...Services.wm.getEnumerator("navigator:browser")].some(win =>
+          win.gBrowser?.tabs.some(tab => !tab.closing && tab.soundPlaying)
+        );
+      },
+      init(triggerHandler) {
+        this._triggerHandler = triggerHandler;
+        // Instantiate this here instead of with a lazy service getter so we can
+        // stub it in tests (otherwise we'd have to wait up to 6 minutes for an
+        // idle notification in certain test environments).
+        if (!this._idleService) {
+          this._idleService = Cc[
+            "@mozilla.org/widget/useridleservice;1"
+          ].getService(Ci.nsIUserIdleService);
+        }
+        if (
+          !this._initialized &&
+          !lazy.PrivateBrowsingUtils.permanentPrivateBrowsing
+        ) {
+          this._idleService.addIdleObserver(this, this._idleThreshold);
+          for (let topic of this._observedTopics) {
+            Services.obs.addObserver(this, topic);
+          }
+          lazy.EveryWindow.registerCallback(
+            this.id,
+            win => {
+              for (let ev of this._listenedEvents) {
+                win.addEventListener(ev, this);
+              }
+            },
+            win => {
+              for (let ev of this._listenedEvents) {
+                win.removeEventListener(ev, this);
+              }
+            }
+          );
+          if (!this._soundPlaying) {
+            this._quietSince = Date.now();
+          }
+          this._initialized = true;
+          this.log("Initialized: ", {
+            idleTime: this._idleService.idleTime,
+            quietSince: this._quietSince,
+          });
+        }
+      },
+      observe(subject, topic, data) {
+        if (this._initialized) {
+          this.log("Heard observer notification: ", {
+            subject,
+            topic,
+            data,
+            idleTime: this._idleService.idleTime,
+            idleSince: this._idleSince,
+            quietSince: this._quietSince,
+            lastWakeTime: this._lastWakeTime,
+          });
+          switch (topic) {
+            case "idle":
+              const now = Date.now();
+              // If the idle notification is within 1 second of the last wake
+              // notification, ignore it. We do this to avoid counting time the
+              // computer spent asleep as "idle time"
+              const isImmediatelyAfterWake =
+                this._lastWakeTime &&
+                now - this._lastWakeTime < this._wakeDelay;
+              if (!isImmediatelyAfterWake) {
+                this._idleSince = now - subject.idleTime;
+              }
+              break;
+            case "active":
+              // Trigger when user returns from being idle.
+              if (this._isVisible) {
+                this._onActive();
+                this._idleSince = null;
+                this._lastWakeTime = null;
+              } else if (this._idleSince) {
+                // If the window is not visible, we want to wait until it is
+                // visible before triggering.
+                this._awaitingVisibilityChange = true;
+              }
+              break;
+            // OS/process notifications
+            case "wake_notification":
+            case "resume_process_notification":
+            case "mac_app_activate":
+              this._lastWakeTime = Date.now();
+            // Fall through to reset idle time.
+            default:
+              this._idleSince = null;
+          }
+        }
+      },
+      handleEvent(event) {
+        if (this._initialized) {
+          switch (event.type) {
+            case "visibilitychange":
+              if (this._awaitingVisibilityChange && this._isVisible) {
+                this._onActive();
+                this._idleSince = null;
+                this._lastWakeTime = null;
+                this._awaitingVisibilityChange = false;
+              }
+              break;
+            case "TabAttrModified":
+              // Listen for DOMAudioPlayback* events.
+              if (!event.detail?.changed?.includes("soundplaying")) {
+                break;
+              }
+            // fall through
+            case "TabClose":
+              this.log("Tab sound changed: ", {
+                event,
+                idleTime: this._idleService.idleTime,
+                idleSince: this._idleSince,
+                quietSince: this._quietSince,
+              });
+              // Maybe update time if a tab closes with sound playing.
+              if (this._soundPlaying) {
+                this._quietSince = null;
+              } else if (!this._quietSince) {
+                this._quietSince = Date.now();
+              }
+          }
+        }
+      },
+      _onActive() {
+        this.log("User is active: ", {
+          idleTime: this._idleService.idleTime,
+          idleSince: this._idleSince,
+          quietSince: this._quietSince,
+          lastWakeTime: this._lastWakeTime,
+        });
+        if (this._idleSince && this._quietSince) {
+          const win = Services.wm.getMostRecentBrowserWindow();
+          if (win && !isPrivateWindow(win) && !this._triggerTimeout) {
+            // Time since the most recent user interaction/audio playback,
+            // reported as the number of milliseconds the user has been idle.
+            const idleForMilliseconds =
+              Date.now() - Math.max(this._idleSince, this._quietSince);
+            this._triggerTimeout = lazy.setTimeout(() => {
+              this._triggerHandler(win.gBrowser.selectedBrowser, {
+                id: this.id,
+                context: { idleForMilliseconds },
+              });
+              this._triggerTimeout = null;
+            }, this._triggerDelay);
+          }
+        }
+      },
+      uninit() {
+        if (this._initialized) {
+          this._idleService.removeIdleObserver(this, this._idleThreshold);
+          for (let topic of this._observedTopics) {
+            Services.obs.removeObserver(this, topic);
+          }
+          lazy.EveryWindow.unregisterCallback(this.id);
+          lazy.clearTimeout(this._triggerTimeout);
+          this._triggerTimeout = null;
+          this._initialized = false;
+          this._triggerHandler = null;
+          this._idleSince = null;
+          this._quietSince = null;
+          this._lastWakeTime = null;
+          this._awaitingVisibilityChange = false;
+          this.log("Uninitialized");
+        }
+      },
+      log(...args) {
+        lazy.log.debug("Idle trigger :>>", ...args);
+      },
+
+      QueryInterface: ChromeUtils.generateQI([
+        "nsIObserver",
+        "nsISupportsWeakReference",
+      ]),
+    },
+  ],
+  [
+    "cookieBannerDetected",
+    {
+      id: "cookieBannerDetected",
+      _initialized: false,
+      _triggerHandler: null,
+
+      init(triggerHandler) {
+        this._triggerHandler = triggerHandler;
+        if (!this._initialized) {
+          lazy.EveryWindow.registerCallback(
+            this.id,
+            win => {
+              win.addEventListener("cookiebannerdetected", this);
+            },
+            win => {
+              win.removeEventListener("cookiebannerdetected", this);
+            }
+          );
+          this._initialized = true;
+        }
+      },
+      handleEvent(event) {
+        if (this._initialized) {
+          const win = event.target || Services.wm.getMostRecentBrowserWindow();
+          if (!win) {
+            return;
+          }
+          this._triggerHandler(win.gBrowser.selectedBrowser, {
+            id: this.id,
+          });
+        }
+      },
+      uninit() {
+        if (this._initialized) {
+          lazy.EveryWindow.unregisterCallback(this.id);
+          this._initialized = false;
+          this._triggerHandler = null;
+        }
+      },
+    },
+  ],
+  [
+    "cookieBannerHandled",
+    {
+      id: "cookieBannerHandled",
+      _initialized: false,
+      _triggerHandler: null,
+
+      init(triggerHandler) {
+        this._triggerHandler = triggerHandler;
+        if (!this._initialized) {
+          lazy.EveryWindow.registerCallback(
+            this.id,
+            win => {
+              win.addEventListener("cookiebannerhandled", this);
+            },
+            win => {
+              win.removeEventListener("cookiebannerhandled", this);
+            }
+          );
+          this._initialized = true;
+        }
+      },
+      handleEvent(event) {
+        if (this._initialized) {
+          const browser =
+            event.detail.windowContext.rootFrameLoader?.ownerElement;
+          const win = browser?.ownerGlobal;
+          // We only want to show messages in the active browser window.
+          if (
+            win === Services.wm.getMostRecentBrowserWindow() &&
+            browser === win.gBrowser.selectedBrowser
+          ) {
+            this._triggerHandler(browser, { id: this.id });
+          }
+        }
+      },
+      uninit() {
+        if (this._initialized) {
+          lazy.EveryWindow.unregisterCallback(this.id);
+          this._initialized = false;
+          this._triggerHandler = null;
+        }
+      },
+    },
+  ],
+  [
+    "pdfJsFeatureCalloutCheck",
+    {
+      id: "pdfJsFeatureCalloutCheck",
+      _initialized: false,
+      _triggerHandler: null,
+      _callouts: new WeakMap(),
+
+      init(triggerHandler) {
+        if (!this._initialized) {
+          this.onLocationChange = this.onLocationChange.bind(this);
+          this.onStateChange = this.onLocationChange;
+          lazy.EveryWindow.registerCallback(
+            this.id,
+            win => {
+              this.onBrowserWindow(win);
+              win.addEventListener("TabSelect", this);
+              win.addEventListener("TabClose", this);
+              win.addEventListener("SSTabRestored", this);
+              win.gBrowser.addTabsProgressListener(this);
+            },
+            win => {
+              win.removeEventListener("TabSelect", this);
+              win.removeEventListener("TabClose", this);
+              win.removeEventListener("SSTabRestored", this);
+              win.gBrowser.removeTabsProgressListener(this);
+            }
+          );
+          this._initialized = true;
+        }
+        this._triggerHandler = triggerHandler;
+      },
+
+      uninit() {
+        if (this._initialized) {
+          lazy.EveryWindow.unregisterCallback(this.id);
+          this._initialized = false;
+          this._triggerHandler = null;
+          for (let key of ChromeUtils.nondeterministicGetWeakMapKeys(
+            this._callouts
+          )) {
+            const item = this._callouts.get(key);
+            if (item) {
+              item.callout.endTour(true);
+              item.cleanup();
+              this._callouts.delete(key);
+            }
+          }
+        }
+      },
+
+      async showFeatureCalloutTour(win, browser, panelId, context) {
+        const result = await this._triggerHandler(browser, {
+          id: "pdfJsFeatureCalloutCheck",
+          context,
+        });
+        if (result.message.trigger) {
+          const callout = lazy.FeatureCalloutBroker.showCustomFeatureCallout(
+            {
+              win,
+              browser,
+              pref: {
+                name:
+                  result.message.content?.tour_pref_name ??
+                  "browser.pdfjs.feature-tour",
+                defaultValue: result.message.content?.tour_pref_default_value,
+              },
+              location: "pdfjs",
+              theme: { preset: "pdfjs", simulateContent: true },
+              cleanup: () => {
+                this._callouts.delete(win);
+              },
+            },
+            result.message
+          );
+          if (callout) {
+            callout.panelId = panelId;
+            this._callouts.set(win, callout);
+          }
+        }
+      },
+
+      onLocationChange(browser) {
+        const tabbrowser = browser.getTabBrowser();
+        if (browser !== tabbrowser.selectedBrowser) {
+          return;
+        }
+        const win = tabbrowser.ownerGlobal;
+        const tab = tabbrowser.selectedTab;
+        const existingCallout = this._callouts.get(win);
+        const isPDFJS =
+          browser.contentPrincipal.originNoSuffix === "resource://pdf.js";
+        if (
+          existingCallout &&
+          (existingCallout.panelId !== tab.linkedPanel || !isPDFJS)
+        ) {
+          existingCallout.callout.endTour(true);
+          existingCallout.cleanup();
+        }
+        if (!this._callouts.has(win) && isPDFJS) {
+          this.showFeatureCalloutTour(win, browser, tab.linkedPanel, {
+            source: "open",
+          });
+        }
+      },
+
+      handleEvent(event) {
+        const tab = event.target;
+        const win = tab.ownerGlobal;
+        const { gBrowser } = win;
+        if (!gBrowser) {
+          return;
+        }
+        switch (event.type) {
+          case "SSTabRestored":
+            if (tab !== gBrowser.selectedTab) {
+              return;
+            }
+          // fall through
+          case "TabSelect": {
+            const browser = gBrowser.getBrowserForTab(tab);
+            const existingCallout = this._callouts.get(win);
+            const isPDFJS =
+              browser.contentPrincipal.originNoSuffix === "resource://pdf.js";
+            if (
+              existingCallout &&
+              (existingCallout.panelId !== tab.linkedPanel || !isPDFJS)
+            ) {
+              existingCallout.callout.endTour(true);
+              existingCallout.cleanup();
+            }
+            if (!this._callouts.has(win) && isPDFJS) {
+              this.showFeatureCalloutTour(win, browser, tab.linkedPanel, {
+                source: "open",
+              });
+            }
+            break;
+          }
+          case "TabClose": {
+            const existingCallout = this._callouts.get(win);
+            if (
+              existingCallout &&
+              existingCallout.panelId === tab.linkedPanel
+            ) {
+              existingCallout.callout.endTour(true);
+              existingCallout.cleanup();
+            }
+            break;
+          }
+        }
+      },
+
+      onBrowserWindow(win) {
+        this.onLocationChange(win.gBrowser.selectedBrowser);
+      },
+    },
+  ],
+  [
+    "newtabFeatureCalloutCheck",
+    {
+      id: "newtabFeatureCalloutCheck",
+      _initialized: false,
+      _triggerHandler: null,
+      _callouts: new WeakMap(),
+
+      init(triggerHandler) {
+        if (!this._initialized) {
+          this.onLocationChange = this.onLocationChange.bind(this);
+          this.onStateChange = this.onLocationChange;
+          lazy.EveryWindow.registerCallback(
+            this.id,
+            win => {
+              this.onBrowserWindow(win);
+              win.addEventListener("TabSelect", this);
+              win.addEventListener("TabClose", this);
+              win.addEventListener("SSTabRestored", this);
+              win.gBrowser.addTabsProgressListener(this);
+            },
+            win => {
+              win.removeEventListener("TabSelect", this);
+              win.removeEventListener("TabClose", this);
+              win.removeEventListener("SSTabRestored", this);
+              win.gBrowser.removeTabsProgressListener(this);
+            }
+          );
+          this._initialized = true;
+        }
+        this._triggerHandler = triggerHandler;
+      },
+
+      uninit() {
+        if (this._initialized) {
+          lazy.EveryWindow.unregisterCallback(this.id);
+          this._initialized = false;
+          this._triggerHandler = null;
+          for (let key of ChromeUtils.nondeterministicGetWeakMapKeys(
+            this._callouts
+          )) {
+            const item = this._callouts.get(key);
+            if (item) {
+              item.callout.endTour(true);
+              item.cleanup();
+              this._callouts.delete(key);
+            }
+          }
+        }
+      },
+
+      async showFeatureCalloutTour(win, browser, panelId, context) {
+        const result = await this._triggerHandler(browser, {
+          id: "newtabFeatureCalloutCheck",
+          context,
+        });
+        if (result.message.trigger) {
+          const callout = lazy.FeatureCalloutBroker.showCustomFeatureCallout(
+            {
+              win,
+              browser,
+              pref: {
+                name:
+                  result.message.content?.tour_pref_name ??
+                  "browser.newtab.feature-tour",
+                defaultValue: result.message.content?.tour_pref_default_value,
+              },
+              location: "newtab",
+              theme: { preset: "newtab", simulateContent: true },
+              cleanup: () => {
+                this._callouts.delete(win);
+              },
+            },
+            result.message
+          );
+          if (callout) {
+            callout.panelId = panelId;
+            this._callouts.set(win, callout);
+          }
+        }
+      },
+
+      onLocationChange(browser) {
+        const tabbrowser = browser.getTabBrowser();
+        if (browser !== tabbrowser.selectedBrowser) {
+          return;
+        }
+        const win = tabbrowser.ownerGlobal;
+        const tab = tabbrowser.selectedTab;
+        const existingCallout = this._callouts.get(win);
+        const isNewtabOrHome =
+          browser.currentURI.spec.startsWith("about:home") ||
+          browser.currentURI.spec.startsWith("about:newtab");
+        if (
+          existingCallout &&
+          (existingCallout.panelId !== tab.linkedPanel || !isNewtabOrHome)
+        ) {
+          existingCallout.callout.endTour(true);
+          existingCallout.cleanup();
+        }
+        if (!this._callouts.has(win) && isNewtabOrHome && tab.linkedPanel) {
+          this.showFeatureCalloutTour(win, browser, tab.linkedPanel, {
+            source: "open",
+          });
+        }
+      },
+
+      handleEvent(event) {
+        const tab = event.target;
+        const win = tab.ownerGlobal;
+        const { gBrowser } = win;
+        if (!gBrowser) {
+          return;
+        }
+        switch (event.type) {
+          case "SSTabRestored":
+            if (tab !== gBrowser.selectedTab) {
+              return;
+            }
+          // fall through
+          case "TabSelect": {
+            const browser = gBrowser.getBrowserForTab(tab);
+            const existingCallout = this._callouts.get(win);
+            const isNewtabOrHome =
+              browser.currentURI.spec.startsWith("about:home") ||
+              browser.currentURI.spec.startsWith("about:newtab");
+            if (
+              existingCallout &&
+              (existingCallout.panelId !== tab.linkedPanel || !isNewtabOrHome)
+            ) {
+              existingCallout.callout.endTour(true);
+              existingCallout.cleanup();
+            }
+            if (!this._callouts.has(win) && isNewtabOrHome) {
+              this.showFeatureCalloutTour(win, browser, tab.linkedPanel, {
+                source: "open",
+              });
+            }
+            break;
+          }
+          case "TabClose": {
+            const existingCallout = this._callouts.get(win);
+            if (
+              existingCallout &&
+              existingCallout.panelId === tab.linkedPanel
+            ) {
+              existingCallout.callout.endTour(true);
+              existingCallout.cleanup();
+            }
+            break;
+          }
+        }
+      },
+
+      onBrowserWindow(win) {
+        this.onLocationChange(win.gBrowser.selectedBrowser);
+      },
+    },
+  ],
+]);
diff --git a/browser/components/asrouter/modules/ActorConstants.sys.mjs b/browser/components/asrouter/modules/ActorConstants.sys.mjs
new file mode 100644
index 0000000000..4c996552ab
--- /dev/null
+++ b/browser/components/asrouter/modules/ActorConstants.sys.mjs
@@ -0,0 +1,49 @@
+/* vim: set ts=2 sw=2 sts=2 et tw=80: */
+/* 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/. */
+
+export const MESSAGE_TYPE_LIST = [
+  "BLOCK_MESSAGE_BY_ID",
+  "USER_ACTION",
+  "IMPRESSION",
+  "TRIGGER",
+  // PB is Private Browsing
+  "PBNEWTAB_MESSAGE_REQUEST",
+  "DOORHANGER_TELEMETRY",
+  "TOOLBAR_BADGE_TELEMETRY",
+  "TOOLBAR_PANEL_TELEMETRY",
+  "MOMENTS_PAGE_TELEMETRY",
+  "INFOBAR_TELEMETRY",
+  "SPOTLIGHT_TELEMETRY",
+  "TOAST_NOTIFICATION_TELEMETRY",
+  "AS_ROUTER_TELEMETRY_USER_EVENT",
+
+  // Admin types
+  "ADMIN_CONNECT_STATE",
+  "UNBLOCK_MESSAGE_BY_ID",
+  "UNBLOCK_ALL",
+  "BLOCK_BUNDLE",
+  "UNBLOCK_BUNDLE",
+  "DISABLE_PROVIDER",
+  "ENABLE_PROVIDER",
+  "EVALUATE_JEXL_EXPRESSION",
+  "EXPIRE_QUERY_CACHE",
+  "FORCE_ATTRIBUTION",
+  "FORCE_WHATSNEW_PANEL",
+  "FORCE_PRIVATE_BROWSING_WINDOW",
+  "CLOSE_WHATSNEW_PANEL",
+  "OVERRIDE_MESSAGE",
+  "MODIFY_MESSAGE_JSON",
+  "RESET_PROVIDER_PREF",
+  "SET_PROVIDER_USER_PREF",
+  "RESET_GROUPS_STATE",
+  "RESET_MESSAGE_STATE",
+  "RESET_SCREEN_IMPRESSIONS",
+  "EDIT_STATE",
+];
+
+export const MESSAGE_TYPE_HASH = MESSAGE_TYPE_LIST.reduce((hash, value) => {
+  hash[value] = value;
+  return hash;
+}, {});
diff --git a/browser/components/asrouter/modules/CFRMessageProvider.sys.mjs b/browser/components/asrouter/modules/CFRMessageProvider.sys.mjs
new file mode 100644
index 0000000000..e0aa49ad49
--- /dev/null
+++ b/browser/components/asrouter/modules/CFRMessageProvider.sys.mjs
@@ -0,0 +1,820 @@
+/* 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/. */
+
+const FACEBOOK_CONTAINER_PARAMS = {
+  existing_addons: [
+    "@contain-facebook",
+    "{bb1b80be-e6b3-40a1-9b6e-9d4073343f0b}",
+    "{a50d61ca-d27b-437a-8b52-5fd801a0a88b}",
+  ],
+  open_urls: ["www.facebook.com", "facebook.com"],
+  sumo_path: "extensionrecommendations",
+  min_frecency: 10000,
+};
+const GOOGLE_TRANSLATE_PARAMS = {
+  existing_addons: [
+    "jid1-93WyvpgvxzGATw@jetpack",
+    "{087ef4e1-4286-4be6-9aa3-8d6c420ee1db}",
+    "{4170faaa-ee87-4a0e-b57a-1aec49282887}",
+    "jid1-TMndP6cdKgxLcQ@jetpack",
+    "s3google@translator",
+    "{9c63d15c-b4d9-43bd-b223-37f0a1f22e2a}",
+    "translator@zoli.bod",
+    "{8cda9ce6-7893-4f47-ac70-a65215cec288}",
+    "simple-translate@sienori",
+    "@translatenow",
+    "{a79fafce-8da6-4685-923f-7ba1015b8748})",
+    "{8a802b5a-eeab-11e2-a41d-b0096288709b}",
+    "jid0-fbHwsGfb6kJyq2hj65KnbGte3yT@jetpack",
+    "storetranslate.plugin@gmail.com",
+    "jid1-r2tWDbSkq8AZK1@jetpack",
+    "{b384b75c-c978-4c4d-b3cf-62a82d8f8f12}",
+    "jid1-f7dnBeTj8ElpWQ@jetpack",
+    "{dac8a935-4775-4918-9205-5c0600087dc4}",
+    "gtranslation2@slam.com",
+    "{e20e0de5-1667-4df4-bd69-705720e37391}",
+    "{09e26ae9-e9c1-477c-80a6-99934212f2fe}",
+    "mgxtranslator@magemagix.com",
+    "gtranslatewins@mozilla.org",
+  ],
+  open_urls: ["translate.google.com"],
+  sumo_path: "extensionrecommendations",
+  min_frecency: 10000,
+};
+const YOUTUBE_ENHANCE_PARAMS = {
+  existing_addons: [
+    "enhancerforyoutube@maximerf.addons.mozilla.org",
+    "{dc8f61ab-5e98-4027-98ef-bb2ff6060d71}",
+    "{7b1bf0b6-a1b9-42b0-b75d-252036438bdc}",
+    "jid0-UVAeBCfd34Kk5usS8A1CBiobvM8@jetpack",
+    "iridium@particlecore.github.io",
+    "jid1-ss6kLNCbNz6u0g@jetpack",
+    "{1cf918d2-f4ea-4b4f-b34e-455283fef19f}",
+  ],
+  open_urls: ["www.youtube.com", "youtube.com"],
+  sumo_path: "extensionrecommendations",
+  min_frecency: 10000,
+};
+const WIKIPEDIA_CONTEXT_MENU_SEARCH_PARAMS = {
+  existing_addons: [
+    "@wikipediacontextmenusearch",
+    "{ebf47fc8-01d8-4dba-aa04-2118402f4b20}",
+    "{5737a280-b359-4e26-95b0-adec5915a854}",
+    "olivier.debroqueville@gmail.com",
+    "{3923146e-98cb-472b-9c13-f6849d34d6b8}",
+  ],
+  open_urls: ["www.wikipedia.org", "wikipedia.org"],
+  sumo_path: "extensionrecommendations",
+  min_frecency: 10000,
+};
+const REDDIT_ENHANCEMENT_PARAMS = {
+  existing_addons: ["jid1-xUfzOsOFlzSOXg@jetpack"],
+  open_urls: ["www.reddit.com", "reddit.com"],
+  sumo_path: "extensionrecommendations",
+  min_frecency: 10000,
+};
+
+const CFR_MESSAGES = [
+  {
+    id: "FACEBOOK_CONTAINER_3",
+    template: "cfr_doorhanger",
+    groups: ["cfr-message-provider"],
+    content: {
+      layout: "addon_recommendation",
+      category: "cfrAddons",
+      bucket_id: "CFR_M1",
+      notification_text: {
+        string_id: "cfr-doorhanger-extension-notification2",
+      },
+      heading_text: { string_id: "cfr-doorhanger-extension-heading" },
+      info_icon: {
+        label: { string_id: "cfr-doorhanger-extension-sumo-link" },
+        sumo_path: FACEBOOK_CONTAINER_PARAMS.sumo_path,
+      },
+      addon: {
+        id: "954390",
+        title: "Facebook Container",
+        icon: "chrome://browser/skin/addons/addon-install-downloading.svg",
+        rating: "4.6",
+        users: "299019",
+        author: "Mozilla",
+        amo_url: "https://addons.mozilla.org/firefox/addon/facebook-container/",
+      },
+      text: "Stop Facebook from tracking your activity across the web. Use Facebook the way you normally do without annoying ads following you around.",
+      buttons: {
+        primary: {
+          label: { string_id: "cfr-doorhanger-extension-ok-button" },
+          action: {
+            type: "INSTALL_ADDON_FROM_URL",
+            data: { url: "https://example.com", telemetrySource: "amo" },
+          },
+        },
+        secondary: [
+          {
+            label: { string_id: "cfr-doorhanger-extension-cancel-button" },
+            action: { type: "CANCEL" },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-never-show-recommendation",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-manage-settings-button",
+            },
+            action: {
+              type: "OPEN_PREFERENCES_PAGE",
+              data: { category: "general-cfraddons" },
+            },
+          },
+        ],
+      },
+    },
+    frequency: { lifetime: 3 },
+    targeting: `
+      localeLanguageCode == "en" &&
+      (xpinstallEnabled == true) &&
+      (${JSON.stringify(
+        FACEBOOK_CONTAINER_PARAMS.existing_addons
+      )} intersect addonsInfo.addons|keys)|length == 0 &&
+      (${JSON.stringify(
+        FACEBOOK_CONTAINER_PARAMS.open_urls
+      )} intersect topFrecentSites[.frecency >= ${
+      FACEBOOK_CONTAINER_PARAMS.min_frecency
+    }]|mapToProperty('host'))|length > 0`,
+    trigger: { id: "openURL", params: FACEBOOK_CONTAINER_PARAMS.open_urls },
+  },
+  {
+    id: "GOOGLE_TRANSLATE_3",
+    groups: ["cfr-message-provider"],
+    template: "cfr_doorhanger",
+    content: {
+      layout: "addon_recommendation",
+      category: "cfrAddons",
+      bucket_id: "CFR_M1",
+      notification_text: {
+        string_id: "cfr-doorhanger-extension-notification2",
+      },
+      heading_text: { string_id: "cfr-doorhanger-extension-heading" },
+      info_icon: {
+        label: { string_id: "cfr-doorhanger-extension-sumo-link" },
+        sumo_path: GOOGLE_TRANSLATE_PARAMS.sumo_path,
+      },
+      addon: {
+        id: "445852",
+        title: "To Google Translate",
+        icon: "chrome://browser/skin/addons/addon-install-downloading.svg",
+        rating: "4.1",
+        users: "313474",
+        author: "Juan Escobar",
+        amo_url:
+          "https://addons.mozilla.org/firefox/addon/to-google-translate/",
+      },
+      text: "Instantly translate any webpage text. Simply highlight the text, right-click to open the context menu, and choose a text or aural translation.",
+      buttons: {
+        primary: {
+          label: { string_id: "cfr-doorhanger-extension-ok-button" },
+          action: {
+            type: "INSTALL_ADDON_FROM_URL",
+            data: { url: "https://example.com", telemetrySource: "amo" },
+          },
+        },
+        secondary: [
+          {
+            label: { string_id: "cfr-doorhanger-extension-cancel-button" },
+            action: { type: "CANCEL" },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-never-show-recommendation",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-manage-settings-button",
+            },
+            action: {
+              type: "OPEN_PREFERENCES_PAGE",
+              data: { category: "general-cfraddons" },
+            },
+          },
+        ],
+      },
+    },
+    frequency: { lifetime: 3 },
+    targeting: `
+      localeLanguageCode == "en" &&
+      (xpinstallEnabled == true) &&
+      (${JSON.stringify(
+        GOOGLE_TRANSLATE_PARAMS.existing_addons
+      )} intersect addonsInfo.addons|keys)|length == 0 &&
+      (${JSON.stringify(
+        GOOGLE_TRANSLATE_PARAMS.open_urls
+      )} intersect topFrecentSites[.frecency >= ${
+      GOOGLE_TRANSLATE_PARAMS.min_frecency
+    }]|mapToProperty('host'))|length > 0`,
+    trigger: { id: "openURL", params: GOOGLE_TRANSLATE_PARAMS.open_urls },
+  },
+  {
+    id: "YOUTUBE_ENHANCE_3",
+    groups: ["cfr-message-provider"],
+    template: "cfr_doorhanger",
+    content: {
+      layout: "addon_recommendation",
+      category: "cfrAddons",
+      bucket_id: "CFR_M1",
+      notification_text: {
+        string_id: "cfr-doorhanger-extension-notification2",
+      },
+      heading_text: { string_id: "cfr-doorhanger-extension-heading" },
+      info_icon: {
+        label: { string_id: "cfr-doorhanger-extension-sumo-link" },
+        sumo_path: YOUTUBE_ENHANCE_PARAMS.sumo_path,
+      },
+      addon: {
+        id: "700308",
+        title: "Enhancer for YouTube\u2122",
+        icon: "chrome://browser/skin/addons/addon-install-downloading.svg",
+        rating: "4.8",
+        users: "357328",
+        author: "Maxime RF",
+        amo_url:
+          "https://addons.mozilla.org/firefox/addon/enhancer-for-youtube/",
+      },
+      text: "Take control of your YouTube experience. Automatically block annoying ads, set playback speed and volume, remove annotations, and more.",
+      buttons: {
+        primary: {
+          label: { string_id: "cfr-doorhanger-extension-ok-button" },
+          action: {
+            type: "INSTALL_ADDON_FROM_URL",
+            data: { url: "https://example.com", telemetrySource: "amo" },
+          },
+        },
+        secondary: [
+          {
+            label: { string_id: "cfr-doorhanger-extension-cancel-button" },
+            action: { type: "CANCEL" },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-never-show-recommendation",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-manage-settings-button",
+            },
+            action: {
+              type: "OPEN_PREFERENCES_PAGE",
+              data: { category: "general-cfraddons" },
+            },
+          },
+        ],
+      },
+    },
+    frequency: { lifetime: 3 },
+    targeting: `
+      localeLanguageCode == "en" &&
+      (xpinstallEnabled == true) &&
+      (${JSON.stringify(
+        YOUTUBE_ENHANCE_PARAMS.existing_addons
+      )} intersect addonsInfo.addons|keys)|length == 0 &&
+      (${JSON.stringify(
+        YOUTUBE_ENHANCE_PARAMS.open_urls
+      )} intersect topFrecentSites[.frecency >= ${
+      YOUTUBE_ENHANCE_PARAMS.min_frecency
+    }]|mapToProperty('host'))|length > 0`,
+    trigger: { id: "openURL", params: YOUTUBE_ENHANCE_PARAMS.open_urls },
+  },
+  {
+    id: "WIKIPEDIA_CONTEXT_MENU_SEARCH_3",
+    groups: ["cfr-message-provider"],
+    template: "cfr_doorhanger",
+    exclude: true,
+    content: {
+      layout: "addon_recommendation",
+      category: "cfrAddons",
+      bucket_id: "CFR_M1",
+      notification_text: {
+        string_id: "cfr-doorhanger-extension-notification2",
+      },
+      heading_text: { string_id: "cfr-doorhanger-extension-heading" },
+      info_icon: {
+        label: { string_id: "cfr-doorhanger-extension-sumo-link" },
+        sumo_path: WIKIPEDIA_CONTEXT_MENU_SEARCH_PARAMS.sumo_path,
+      },
+      addon: {
+        id: "659026",
+        title: "Wikipedia Context Menu Search",
+        icon: "chrome://browser/skin/addons/addon-install-downloading.svg",
+        rating: "4.9",
+        users: "3095",
+        author: "Nick Diedrich",
+        amo_url:
+          "https://addons.mozilla.org/firefox/addon/wikipedia-context-menu-search/",
+      },
+      text: "Get to a Wikipedia page fast, from anywhere on the web. Just highlight any webpage text and right-click to open the context menu to start a Wikipedia search.",
+      buttons: {
+        primary: {
+          label: { string_id: "cfr-doorhanger-extension-ok-button" },
+          action: {
+            type: "INSTALL_ADDON_FROM_URL",
+            data: { url: "https://example.com", telemetrySource: "amo" },
+          },
+        },
+        secondary: [
+          {
+            label: { string_id: "cfr-doorhanger-extension-cancel-button" },
+            action: { type: "CANCEL" },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-never-show-recommendation",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-manage-settings-button",
+            },
+            action: {
+              type: "OPEN_PREFERENCES_PAGE",
+              data: { category: "general-cfraddons" },
+            },
+          },
+        ],
+      },
+    },
+    frequency: { lifetime: 3 },
+    targeting: `
+      localeLanguageCode == "en" &&
+      (xpinstallEnabled == true) &&
+      (${JSON.stringify(
+        WIKIPEDIA_CONTEXT_MENU_SEARCH_PARAMS.existing_addons
+      )} intersect addonsInfo.addons|keys)|length == 0 &&
+      (${JSON.stringify(
+        WIKIPEDIA_CONTEXT_MENU_SEARCH_PARAMS.open_urls
+      )} intersect topFrecentSites[.frecency >= ${
+      WIKIPEDIA_CONTEXT_MENU_SEARCH_PARAMS.min_frecency
+    }]|mapToProperty('host'))|length > 0`,
+    trigger: {
+      id: "openURL",
+      params: WIKIPEDIA_CONTEXT_MENU_SEARCH_PARAMS.open_urls,
+    },
+  },
+  {
+    id: "REDDIT_ENHANCEMENT_3",
+    groups: ["cfr-message-provider"],
+    template: "cfr_doorhanger",
+    exclude: true,
+    content: {
+      layout: "addon_recommendation",
+      category: "cfrAddons",
+      bucket_id: "CFR_M1",
+      notification_text: {
+        string_id: "cfr-doorhanger-extension-notification2",
+      },
+      heading_text: { string_id: "cfr-doorhanger-extension-heading" },
+      info_icon: {
+        label: { string_id: "cfr-doorhanger-extension-sumo-link" },
+        sumo_path: REDDIT_ENHANCEMENT_PARAMS.sumo_path,
+      },
+      addon: {
+        id: "387429",
+        title: "Reddit Enhancement Suite",
+        icon: "chrome://browser/skin/addons/addon-install-downloading.svg",
+        rating: "4.6",
+        users: "258129",
+        author: "honestbleeps",
+        amo_url:
+          "https://addons.mozilla.org/firefox/addon/reddit-enhancement-suite/",
+      },
+      text: "New features include Inline Image Viewer, Never Ending Reddit (never click 'next page' again), Keyboard Navigation, Account Switcher, and User Tagger.",
+      buttons: {
+        primary: {
+          label: { string_id: "cfr-doorhanger-extension-ok-button" },
+          action: {
+            type: "INSTALL_ADDON_FROM_URL",
+            data: { url: "https://example.com", telemetrySource: "amo" },
+          },
+        },
+        secondary: [
+          {
+            label: { string_id: "cfr-doorhanger-extension-cancel-button" },
+            action: { type: "CANCEL" },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-never-show-recommendation",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-manage-settings-button",
+            },
+            action: {
+              type: "OPEN_PREFERENCES_PAGE",
+              data: { category: "general-cfraddons" },
+            },
+          },
+        ],
+      },
+    },
+    frequency: { lifetime: 3 },
+    targeting: `
+      localeLanguageCode == "en" &&
+      (xpinstallEnabled == true) &&
+      (${JSON.stringify(
+        REDDIT_ENHANCEMENT_PARAMS.existing_addons
+      )} intersect addonsInfo.addons|keys)|length == 0 &&
+      (${JSON.stringify(
+        REDDIT_ENHANCEMENT_PARAMS.open_urls
+      )} intersect topFrecentSites[.frecency >= ${
+      REDDIT_ENHANCEMENT_PARAMS.min_frecency
+    }]|mapToProperty('host'))|length > 0`,
+    trigger: { id: "openURL", params: REDDIT_ENHANCEMENT_PARAMS.open_urls },
+  },
+  {
+    id: "DOH_ROLLOUT_CONFIRMATION",
+    groups: ["cfr-message-provider"],
+    targeting: `
+      "doh-rollout.enabled"|preferenceValue &&
+      !"doh-rollout.disable-heuristics"|preferenceValue &&
+      !"doh-rollout.skipHeuristicsCheck"|preferenceValue &&
+      !"doh-rollout.doorhanger-decision"|preferenceValue
+    `,
+    template: "cfr_doorhanger",
+    content: {
+      skip_address_bar_notifier: true,
+      persistent_doorhanger: true,
+      anchor_id: "PanelUI-menu-button",
+      layout: "icon_and_message",
+      text: { string_id: "cfr-doorhanger-doh-body" },
+      icon: "chrome://global/skin/icons/security.svg",
+      buttons: {
+        secondary: [
+          {
+            label: { string_id: "cfr-doorhanger-doh-secondary-button" },
+            action: {
+              type: "DISABLE_DOH",
+            },
+          },
+        ],
+        primary: {
+          label: { string_id: "cfr-doorhanger-doh-primary-button-2" },
+          action: {
+            type: "ACCEPT_DOH",
+          },
+        },
+      },
+      bucket_id: "DOH_ROLLOUT_CONFIRMATION",
+      heading_text: { string_id: "cfr-doorhanger-doh-header" },
+      info_icon: {
+        label: {
+          string_id: "cfr-doorhanger-extension-sumo-link",
+        },
+        sumo_path: "extensionrecommendations",
+      },
+      notification_text: "Message from Firefox",
+      category: "cfrFeatures",
+    },
+    trigger: {
+      id: "openURL",
+      patterns: ["*://*/*"],
+    },
+  },
+  {
+    id: "SAVE_LOGIN",
+    groups: ["cfr-message-provider"],
+    frequency: {
+      lifetime: 3,
+    },
+    targeting:
+      "(!type || type == 'save') && isFxAEnabled == true && usesFirefoxSync == false",
+    template: "cfr_doorhanger",
+    content: {
+      layout: "icon_and_message",
+      text: "Securely store and sync your passwords to all your devices.",
+      icon: "chrome://browser/content/aboutlogins/icons/intro-illustration.svg",
+      icon_class: "cfr-doorhanger-large-icon",
+      buttons: {
+        secondary: [
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-cancel-button",
+            },
+            action: {
+              type: "CANCEL",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-never-show-recommendation",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-manage-settings-button",
+            },
+            action: {
+              type: "OPEN_PREFERENCES_PAGE",
+              data: {
+                category: "general-cfrfeatures",
+              },
+            },
+          },
+        ],
+        primary: {
+          label: {
+            value: "Turn on Sync",
+            attributes: { accesskey: "T" },
+          },
+          action: {
+            type: "OPEN_PREFERENCES_PAGE",
+            data: {
+              category: "sync",
+              entrypoint: "cfr-save-login",
+            },
+          },
+        },
+      },
+      bucket_id: "CFR_SAVE_LOGIN",
+      heading_text: "Never Lose a Password Again",
+      info_icon: {
+        label: {
+          string_id: "cfr-doorhanger-extension-sumo-link",
+        },
+        sumo_path: "extensionrecommendations",
+      },
+      notification_text: {
+        string_id: "cfr-doorhanger-feature-notification",
+      },
+      category: "cfrFeatures",
+    },
+    trigger: {
+      id: "newSavedLogin",
+    },
+  },
+  {
+    id: "UPDATE_LOGIN",
+    groups: ["cfr-message-provider"],
+    frequency: {
+      lifetime: 3,
+    },
+    targeting:
+      "type == 'update' && isFxAEnabled == true && usesFirefoxSync == false",
+    template: "cfr_doorhanger",
+    content: {
+      layout: "icon_and_message",
+      text: "Securely store and sync your passwords to all your devices.",
+      icon: "chrome://browser/content/aboutlogins/icons/intro-illustration.svg",
+      icon_class: "cfr-doorhanger-large-icon",
+      buttons: {
+        secondary: [
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-cancel-button",
+            },
+            action: {
+              type: "CANCEL",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-never-show-recommendation",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-manage-settings-button",
+            },
+            action: {
+              type: "OPEN_PREFERENCES_PAGE",
+              data: {
+                category: "general-cfrfeatures",
+              },
+            },
+          },
+        ],
+        primary: {
+          label: {
+            value: "Turn on Sync",
+            attributes: { accesskey: "T" },
+          },
+          action: {
+            type: "OPEN_PREFERENCES_PAGE",
+            data: {
+              category: "sync",
+              entrypoint: "cfr-update-login",
+            },
+          },
+        },
+      },
+      bucket_id: "CFR_UPDATE_LOGIN",
+      heading_text: "Never Lose a Password Again",
+      info_icon: {
+        label: {
+          string_id: "cfr-doorhanger-extension-sumo-link",
+        },
+        sumo_path: "extensionrecommendations",
+      },
+      notification_text: {
+        string_id: "cfr-doorhanger-feature-notification",
+      },
+      category: "cfrFeatures",
+    },
+    trigger: {
+      id: "newSavedLogin",
+    },
+  },
+  {
+    id: "MILESTONE_MESSAGE",
+    groups: ["cfr-message-provider"],
+    template: "milestone_message",
+    content: {
+      layout: "short_message",
+      category: "cfrFeatures",
+      anchor_id: "tracking-protection-icon-container",
+      skip_address_bar_notifier: true,
+      bucket_id: "CFR_MILESTONE_MESSAGE",
+      heading_text: { string_id: "cfr-doorhanger-milestone-heading2" },
+      notification_text: "",
+      text: "",
+      buttons: {
+        primary: {
+          label: { string_id: "cfr-doorhanger-milestone-ok-button" },
+          action: { type: "OPEN_PROTECTION_REPORT" },
+          event: "PROTECTION",
+        },
+        secondary: [
+          {
+            label: { string_id: "cfr-doorhanger-milestone-close-button" },
+            action: { type: "CANCEL" },
+            event: "DISMISS",
+          },
+        ],
+      },
+    },
+    targeting: "pageLoad >= 1",
+    frequency: {
+      lifetime: 7, // Length of privacy.contentBlocking.cfr-milestone.milestones pref
+    },
+    trigger: {
+      id: "contentBlocking",
+      params: ["ContentBlockingMilestone"],
+    },
+  },
+  {
+    id: "HEARTBEAT_TACTIC_2",
+    groups: ["cfr-message-provider"],
+    template: "cfr_urlbar_chiclet",
+    content: {
+      layout: "chiclet_open_url",
+      category: "cfrHeartbeat",
+      bucket_id: "HEARTBEAT_TACTIC_2",
+      notification_text: "Improve Firefox",
+      active_color: "#595e91",
+      action: {
+        url: "http://example.com/%VERSION%/",
+        where: "tabshifted",
+      },
+    },
+    targeting: "false",
+    frequency: {
+      lifetime: 3,
+    },
+    trigger: {
+      id: "openURL",
+      patterns: ["*://*/*"],
+    },
+  },
+  {
+    id: "HOMEPAGE_REMEDIATION_82",
+    groups: ["cfr-message-provider"],
+    frequency: {
+      lifetime: 3,
+    },
+    targeting:
+      "!homePageSettings.isDefault && homePageSettings.isCustomUrl && homePageSettings.urls[.host == 'google.com']|length > 0 && visitsCount >= 3 && userPrefs.cfrFeatures",
+    template: "cfr_doorhanger",
+    content: {
+      layout: "icon_and_message",
+      text: "Update your homepage to search Google while also being able to search your Firefox history and bookmarks.",
+      icon: "chrome://global/skin/icons/search-glass.svg",
+      buttons: {
+        secondary: [
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-cancel-button",
+            },
+            action: {
+              type: "CANCEL",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-never-show-recommendation",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-manage-settings-button",
+            },
+            action: {
+              type: "OPEN_PREFERENCES_PAGE",
+              data: {
+                category: "general-cfrfeatures",
+              },
+            },
+          },
+        ],
+        primary: {
+          label: {
+            value: "Activate now",
+            attributes: {
+              accesskey: "A",
+            },
+          },
+          action: {
+            type: "CONFIGURE_HOMEPAGE",
+            data: {
+              homePage: "default",
+              newtab: "default",
+              layout: {
+                search: true,
+                topsites: false,
+                highlights: false,
+                topstories: false,
+              },
+            },
+          },
+        },
+      },
+      bucket_id: "HOMEPAGE_REMEDIATION_82",
+      heading_text: "A better search experience",
+      info_icon: {
+        label: {
+          string_id: "cfr-doorhanger-extension-sumo-link",
+        },
+        sumo_path: "extensionrecommendations",
+      },
+      notification_text: {
+        string_id: "cfr-doorhanger-feature-notification",
+      },
+      category: "cfrFeatures",
+    },
+    trigger: {
+      id: "openURL",
+      params: ["google.com", "www.google.com"],
+    },
+  },
+  {
+    id: "INFOBAR_ACTION_86",
+    groups: ["cfr-message-provider"],
+    targeting: "false",
+    template: "infobar",
+    content: {
+      type: "global",
+      text: { string_id: "default-browser-notification-message" },
+      buttons: [
+        {
+          label: { string_id: "default-browser-notification-button" },
+          primary: true,
+          accessKey: "O",
+          action: {
+            type: "SET_DEFAULT_BROWSER",
+          },
+        },
+      ],
+    },
+    trigger: { id: "defaultBrowserCheck" },
+  },
+  {
+    id: "PREF_OBSERVER_MESSAGE_94",
+    groups: ["cfr-message-provider"],
+    targeting: "true",
+    template: "infobar",
+    content: {
+      type: "global",
+      text: "This is a message triggered when a pref value changes",
+      buttons: [
+        {
+          label: "OK",
+          primary: true,
+          accessKey: "O",
+          action: {
+            type: "CANCEL",
+          },
+        },
+      ],
+    },
+    trigger: { id: "preferenceObserver", params: ["foo.bar"] },
+  },
+];
+
+export const CFRMessageProvider = {
+  getMessages() {
+    return Promise.resolve(CFR_MESSAGES.filter(msg => !msg.exclude));
+  },
+};
diff --git a/browser/components/asrouter/modules/CFRPageActions.sys.mjs b/browser/components/asrouter/modules/CFRPageActions.sys.mjs
new file mode 100644
index 0000000000..cf7719d9eb
--- /dev/null
+++ b/browser/components/asrouter/modules/CFRPageActions.sys.mjs
@@ -0,0 +1,1086 @@
+/* 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/. */
+
+// We use importESModule here instead of static import so that
+// the Karma test environment won't choke on this module. This
+// is because the Karma test environment already stubs out
+// XPCOMUtils and overrides importESModule to be a no-op (which
+// can't be done for a static import statement).
+
+// eslint-disable-next-line mozilla/use-static-import
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  CustomizableUI: "resource:///modules/CustomizableUI.sys.mjs",
+  PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
+  RemoteL10n: "resource:///modules/asrouter/RemoteL10n.sys.mjs",
+});
+
+XPCOMUtils.defineLazyServiceGetter(
+  lazy,
+  "TrackingDBService",
+  "@mozilla.org/tracking-db-service;1",
+  "nsITrackingDBService"
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "milestones",
+  "browser.contentblocking.cfr-milestone.milestones",
+  "[]",
+  null,
+  JSON.parse
+);
+
+const POPUP_NOTIFICATION_ID = "contextual-feature-recommendation";
+const SUMO_BASE_URL = Services.urlFormatter.formatURLPref(
+  "app.support.baseURL"
+);
+const ADDONS_API_URL =
+  "https://services.addons.mozilla.org/api/v4/addons/addon";
+
+const DELAY_BEFORE_EXPAND_MS = 1000;
+const CATEGORY_ICONS = {
+  cfrAddons: "webextensions-icon",
+  cfrFeatures: "recommendations-icon",
+  cfrHeartbeat: "highlights-icon",
+};
+
+/**
+ * A WeakMap from browsers to {host, recommendation} pairs. Recommendations are
+ * defined in the ExtensionDoorhanger.schema.json.
+ *
+ * A recommendation is specific to a browser and host and is active until the
+ * given browser is closed or the user navigates (within that browser) away from
+ * the host.
+ */
+let RecommendationMap = new WeakMap();
+
+/**
+ * A WeakMap from windows to their CFR PageAction.
+ */
+let PageActionMap = new WeakMap();
+
+/**
+ * We need one PageAction for each window
+ */
+export class PageAction {
+  constructor(win, dispatchCFRAction) {
+    this.window = win;
+
+    this.urlbar = win.gURLBar; // The global URLBar object
+    this.urlbarinput = win.gURLBar.textbox; // The URLBar DOM node
+
+    this.container = win.document.getElementById(
+      "contextual-feature-recommendation"
+    );
+    this.button = win.document.getElementById("cfr-button");
+    this.label = win.document.getElementById("cfr-label");
+
+    // This should NOT be use directly to dispatch message-defined actions attached to buttons.
+    // Please use dispatchUserAction instead.
+    this._dispatchCFRAction = dispatchCFRAction;
+
+    this._popupStateChange = this._popupStateChange.bind(this);
+    this._collapse = this._collapse.bind(this);
+    this._cfrUrlbarButtonClick = this._cfrUrlbarButtonClick.bind(this);
+    this._executeNotifierAction = this._executeNotifierAction.bind(this);
+    this.dispatchUserAction = this.dispatchUserAction.bind(this);
+
+    // Saved timeout IDs for scheduled state changes, so they can be cancelled
+    this.stateTransitionTimeoutIDs = [];
+
+    ChromeUtils.defineLazyGetter(this, "isDarkTheme", () => {
+      try {
+        return this.window.document.documentElement.hasAttribute(
+          "lwt-toolbar-field-brighttext"
+        );
+      } catch (e) {
+        return false;
+      }
+    });
+  }
+
+  addImpression(recommendation) {
+    this._dispatchImpression(recommendation);
+    // Only send an impression ping upon the first expansion.
+    // Note that when the user clicks on the "show" button on the asrouter admin
+    // page (both `bucket_id` and `id` will be set as null), we don't want to send
+    // the impression ping in that case.
+    if (!!recommendation.id && !!recommendation.content.bucket_id) {
+      this._sendTelemetry({
+        message_id: recommendation.id,
+        bucket_id: recommendation.content.bucket_id,
+        event: "IMPRESSION",
+      });
+    }
+  }
+
+  reloadL10n() {
+    lazy.RemoteL10n.reloadL10n();
+  }
+
+  async showAddressBarNotifier(recommendation, shouldExpand = false) {
+    this.container.hidden = false;
+
+    let notificationText = await this.getStrings(
+      recommendation.content.notification_text
+    );
+    this.label.value = notificationText;
+    if (notificationText.attributes) {
+      this.button.setAttribute(
+        "tooltiptext",
+        notificationText.attributes.tooltiptext
+      );
+      // For a11y, we want the more descriptive text.
+      this.container.setAttribute(
+        "aria-label",
+        notificationText.attributes.tooltiptext
+      );
+    }
+    this.container.setAttribute(
+      "data-cfr-icon",
+      CATEGORY_ICONS[recommendation.content.category]
+    );
+    if (recommendation.content.active_color) {
+      this.container.style.setProperty(
+        "--cfr-active-color",
+        recommendation.content.active_color
+      );
+    }
+
+    if (recommendation.content.active_text_color) {
+      this.container.style.setProperty(
+        "--cfr-active-text-color",
+        recommendation.content.active_text_color
+      );
+    }
+
+    // Wait for layout to flush to avoid a synchronous reflow then calculate the
+    // label width. We can safely get the width even though the recommendation is
+    // collapsed; the label itself remains full width (with its overflow hidden)
+    let [{ width }] = await this.window.promiseDocumentFlushed(() =>
+      this.label.getClientRects()
+    );
+    this.urlbarinput.style.setProperty("--cfr-label-width", `${width}px`);
+
+    this.container.addEventListener("click", this._cfrUrlbarButtonClick);
+    // Collapse the recommendation on url bar focus in order to free up more
+    // space to display and edit the url
+    this.urlbar.addEventListener("focus", this._collapse);
+
+    if (shouldExpand) {
+      this._clearScheduledStateChanges();
+
+      // After one second, expand
+      this._expand(DELAY_BEFORE_EXPAND_MS);
+
+      this.addImpression(recommendation);
+    }
+
+    if (notificationText.attributes) {
+      this.window.A11yUtils.announce({
+        raw: notificationText.attributes["a11y-announcement"],
+        source: this.container,
+      });
+    }
+  }
+
+  hideAddressBarNotifier() {
+    this.container.hidden = true;
+    this._clearScheduledStateChanges();
+    this.urlbarinput.removeAttribute("cfr-recommendation-state");
+    this.container.removeEventListener("click", this._cfrUrlbarButtonClick);
+    this.urlbar.removeEventListener("focus", this._collapse);
+    if (this.currentNotification) {
+      this.window.PopupNotifications.remove(this.currentNotification);
+      this.currentNotification = null;
+    }
+  }
+
+  _expand(delay) {
+    if (delay > 0) {
+      this.stateTransitionTimeoutIDs.push(
+        this.window.setTimeout(() => {
+          this.urlbarinput.setAttribute("cfr-recommendation-state", "expanded");
+        }, delay)
+      );
+    } else {
+      // Non-delayed state change overrides any scheduled state changes
+      this._clearScheduledStateChanges();
+      this.urlbarinput.setAttribute("cfr-recommendation-state", "expanded");
+    }
+  }
+
+  _collapse(delay) {
+    if (delay > 0) {
+      this.stateTransitionTimeoutIDs.push(
+        this.window.setTimeout(() => {
+          if (
+            this.urlbarinput.getAttribute("cfr-recommendation-state") ===
+            "expanded"
+          ) {
+            this.urlbarinput.setAttribute(
+              "cfr-recommendation-state",
+              "collapsed"
+            );
+          }
+        }, delay)
+      );
+    } else {
+      // Non-delayed state change overrides any scheduled state changes
+      this._clearScheduledStateChanges();
+      if (
+        this.urlbarinput.getAttribute("cfr-recommendation-state") === "expanded"
+      ) {
+        this.urlbarinput.setAttribute("cfr-recommendation-state", "collapsed");
+      }
+    }
+  }
+
+  _clearScheduledStateChanges() {
+    while (this.stateTransitionTimeoutIDs.length) {
+      // clearTimeout is safe even with invalid/expired IDs
+      this.window.clearTimeout(this.stateTransitionTimeoutIDs.pop());
+    }
+  }
+
+  // This is called when the popup closes as a result of interaction _outside_
+  // the popup, e.g. by hitting <esc>
+  _popupStateChange(state) {
+    if (state === "shown") {
+      if (this._autoFocus) {
+        this.window.document.commandDispatcher.advanceFocusIntoSubtree(
+          this.currentNotification.owner.panel
+        );
+        this._autoFocus = false;
+      }
+    } else if (state === "removed") {
+      if (this.currentNotification) {
+        this.window.PopupNotifications.remove(this.currentNotification);
+        this.currentNotification = null;
+      }
+    } else if (state === "dismissed") {
+      const message = RecommendationMap.get(this.currentNotification?.browser);
+      this._sendTelemetry({
+        message_id: message?.id,
+        bucket_id: message?.content.bucket_id,
+        event: "DISMISS",
+      });
+      this._collapse();
+    }
+  }
+
+  shouldShowDoorhanger(recommendation) {
+    if (recommendation.content.layout === "chiclet_open_url") {
+      return false;
+    }
+
+    return true;
+  }
+
+  dispatchUserAction(action) {
+    this._dispatchCFRAction(
+      { type: "USER_ACTION", data: action },
+      this.window.gBrowser.selectedBrowser
+    );
+  }
+
+  _dispatchImpression(message) {
+    this._dispatchCFRAction({ type: "IMPRESSION", data: message });
+  }
+
+  _sendTelemetry(ping) {
+    const data = { action: "cfr_user_event", source: "CFR", ...ping };
+    if (lazy.PrivateBrowsingUtils.isWindowPrivate(this.window)) {
+      data.is_private = true;
+    }
+    this._dispatchCFRAction({
+      type: "DOORHANGER_TELEMETRY",
+      data,
+    });
+  }
+
+  _blockMessage(messageID) {
+    this._dispatchCFRAction({
+      type: "BLOCK_MESSAGE_BY_ID",
+      data: { id: messageID },
+    });
+  }
+
+  maybeLoadCustomElement(win) {
+    if (!win.customElements.get("remote-text")) {
+      Services.scriptloader.loadSubScript(
+        "resource://activity-stream/data/custom-elements/paragraph.js",
+        win
+      );
+    }
+  }
+
+  /**
+   * getStrings - Handles getting the localized strings vs message overrides.
+   *              If string_id is not defined it assumes you passed in an override
+   *              message and it just returns it.
+   *              If subAttribute is provided, the string for it is returned.
+   * @return A string. One of 1) passed in string 2) a String object with
+   *         attributes property if there are attributes 3) the sub attribute.
+   */
+  async getStrings(string, subAttribute = "") {
+    if (!string.string_id) {
+      if (subAttribute) {
+        if (string.attributes) {
+          return string.attributes[subAttribute];
+        }
+
+        console.error(`String ${string.value} does not contain any attributes`);
+        return subAttribute;
+      }
+
+      if (typeof string.value === "string") {
+        const stringWithAttributes = new String(string.value); // eslint-disable-line no-new-wrappers
+        stringWithAttributes.attributes = string.attributes;
+        return stringWithAttributes;
+      }
+
+      return string;
+    }
+
+    const [localeStrings] = await lazy.RemoteL10n.l10n.formatMessages([
+      {
+        id: string.string_id,
+        args: string.args,
+      },
+    ]);
+
+    const mainString = new String(localeStrings.value); // eslint-disable-line no-new-wrappers
+    if (localeStrings.attributes) {
+      const attributes = localeStrings.attributes.reduce((acc, attribute) => {
+        acc[attribute.name] = attribute.value;
+        return acc;
+      }, {});
+      mainString.attributes = attributes;
+    }
+
+    return subAttribute ? mainString.attributes[subAttribute] : mainString;
+  }
+
+  async _setAddonRating(document, content) {
+    const footerFilledStars = this.window.document.getElementById(
+      "cfr-notification-footer-filled-stars"
+    );
+    const footerEmptyStars = this.window.document.getElementById(
+      "cfr-notification-footer-empty-stars"
+    );
+    const footerUsers = this.window.document.getElementById(
+      "cfr-notification-footer-users"
+    );
+
+    const rating = content.addon?.rating;
+    if (rating) {
+      const MAX_RATING = 5;
+      const STARS_WIDTH = 16 * MAX_RATING;
+      const calcWidth = stars => `${(stars / MAX_RATING) * STARS_WIDTH}px`;
+      const filledWidth =
+        rating <= MAX_RATING ? calcWidth(rating) : calcWidth(MAX_RATING);
+      const emptyWidth =
+        rating <= MAX_RATING ? calcWidth(MAX_RATING - rating) : calcWidth(0);
+
+      footerFilledStars.style.width = filledWidth;
+      footerEmptyStars.style.width = emptyWidth;
+
+      const ratingString = await this.getStrings(
+        {
+          string_id: "cfr-doorhanger-extension-rating",
+          args: { total: rating },
+        },
+        "tooltiptext"
+      );
+      footerFilledStars.setAttribute("tooltiptext", ratingString);
+      footerEmptyStars.setAttribute("tooltiptext", ratingString);
+    } else {
+      footerFilledStars.style.width = "";
+      footerEmptyStars.style.width = "";
+      footerFilledStars.removeAttribute("tooltiptext");
+      footerEmptyStars.removeAttribute("tooltiptext");
+    }
+
+    const users = content.addon?.users;
+    if (users) {
+      footerUsers.setAttribute("value", users);
+      footerUsers.hidden = false;
+    } else {
+      // Prevent whitespace around empty label from affecting other spacing
+      footerUsers.hidden = true;
+      footerUsers.removeAttribute("value");
+    }
+  }
+
+  _createElementAndAppend({ type, id }, parent) {
+    let element = this.window.document.createXULElement(type);
+    if (id) {
+      element.setAttribute("id", id);
+    }
+    parent.appendChild(element);
+    return element;
+  }
+
+  async _renderMilestonePopup(message, browser) {
+    this.maybeLoadCustomElement(this.window);
+
+    let { content, id } = message;
+    let { primary, secondary } = content.buttons;
+    let earliestDate = await lazy.TrackingDBService.getEarliestRecordedDate();
+    let timestamp = earliestDate ?? new Date().getTime();
+    let panelTitle = "";
+    let headerLabel = this.window.document.getElementById(
+      "cfr-notification-header-label"
+    );
+    let reachedMilestone = 0;
+    let totalSaved = await lazy.TrackingDBService.sumAllEvents();
+    for (let milestone of lazy.milestones) {
+      if (totalSaved >= milestone) {
+        reachedMilestone = milestone;
+      }
+    }
+    if (headerLabel.firstChild) {
+      headerLabel.firstChild.remove();
+    }
+    headerLabel.appendChild(
+      lazy.RemoteL10n.createElement(this.window.document, "span", {
+        content: message.content.heading_text,
+        attributes: {
+          blockedCount: reachedMilestone,
+          date: timestamp,
+        },
+      })
+    );
+
+    // Use the message layout as a CSS selector to hide different parts of the
+    // notification template markup
+    this.window.document
+      .getElementById("contextual-feature-recommendation-notification")
+      .setAttribute("data-notification-category", content.layout);
+    this.window.document
+      .getElementById("contextual-feature-recommendation-notification")
+      .setAttribute("data-notification-bucket", content.bucket_id);
+
+    let primaryBtnString = await this.getStrings(primary.label);
+    let primaryActionCallback = () => {
+      this.dispatchUserAction(primary.action);
+      this._sendTelemetry({
+        message_id: id,
+        bucket_id: content.bucket_id,
+        event: "CLICK_BUTTON",
+      });
+
+      RecommendationMap.delete(browser);
+      // Invalidate the pref after the user interacts with the button.
+      // We don't need to show the illustration in the privacy panel.
+      Services.prefs.clearUserPref(
+        "browser.contentblocking.cfr-milestone.milestone-shown-time"
+      );
+    };
+
+    let secondaryBtnString = await this.getStrings(secondary[0].label);
+    let secondaryActionsCallback = () => {
+      this.dispatchUserAction(secondary[0].action);
+      this._sendTelemetry({
+        message_id: id,
+        bucket_id: content.bucket_id,
+        event: "DISMISS",
+      });
+      RecommendationMap.delete(browser);
+    };
+
+    let mainAction = {
+      label: primaryBtnString,
+      accessKey: primaryBtnString.attributes.accesskey,
+      callback: primaryActionCallback,
+    };
+
+    let secondaryActions = [
+      {
+        label: secondaryBtnString,
+        accessKey: secondaryBtnString.attributes.accesskey,
+        callback: secondaryActionsCallback,
+      },
+    ];
+
+    // Actually show the notification
+    this.currentNotification = this.window.PopupNotifications.show(
+      browser,
+      POPUP_NOTIFICATION_ID,
+      panelTitle,
+      "cfr",
+      mainAction,
+      secondaryActions,
+      {
+        hideClose: true,
+        persistWhileVisible: true,
+        recordTelemetryInPrivateBrowsing: content.show_in_private_browsing,
+      }
+    );
+    Services.prefs.setIntPref(
+      "browser.contentblocking.cfr-milestone.milestone-achieved",
+      reachedMilestone
+    );
+    Services.prefs.setStringPref(
+      "browser.contentblocking.cfr-milestone.milestone-shown-time",
+      Date.now().toString()
+    );
+  }
+
+  // eslint-disable-next-line max-statements
+  async _renderPopup(message, browser) {
+    this.maybeLoadCustomElement(this.window);
+
+    const { id, content } = message;
+
+    const headerLabel = this.window.document.getElementById(
+      "cfr-notification-header-label"
+    );
+    const headerLink = this.window.document.getElementById(
+      "cfr-notification-header-link"
+    );
+    const headerImage = this.window.document.getElementById(
+      "cfr-notification-header-image"
+    );
+    const footerText = this.window.document.getElementById(
+      "cfr-notification-footer-text"
+    );
+    const footerLink = this.window.document.getElementById(
+      "cfr-notification-footer-learn-more-link"
+    );
+    const { primary, secondary } = content.buttons;
+    let primaryActionCallback;
+    let persistent = !!content.persistent_doorhanger;
+    let options = {
+      persistent,
+      persistWhileVisible: persistent,
+      recordTelemetryInPrivateBrowsing: content.show_in_private_browsing,
+    };
+    let panelTitle;
+
+    headerLabel.value = await this.getStrings(content.heading_text);
+    if (content.info_icon) {
+      headerLink.setAttribute(
+        "href",
+        SUMO_BASE_URL + content.info_icon.sumo_path
+      );
+      headerImage.setAttribute(
+        "tooltiptext",
+        await this.getStrings(content.info_icon.label, "tooltiptext")
+      );
+    }
+    headerLink.onclick = () =>
+      this._sendTelemetry({
+        message_id: id,
+        bucket_id: content.bucket_id,
+        event: "RATIONALE",
+      });
+    // Use the message layout as a CSS selector to hide different parts of the
+    // notification template markup
+    this.window.document
+      .getElementById("contextual-feature-recommendation-notification")
+      .setAttribute("data-notification-category", content.layout);
+    this.window.document
+      .getElementById("contextual-feature-recommendation-notification")
+      .setAttribute("data-notification-bucket", content.bucket_id);
+
+    const author = this.window.document.getElementById(
+      "cfr-notification-author"
+    );
+    if (author.firstChild) {
+      author.firstChild.remove();
+    }
+
+    switch (content.layout) {
+      case "icon_and_message":
+        //Clearing content and styles that may have been set by a prior addon_recommendation CFR
+        this._setAddonRating(this.window.document, content);
+        author.appendChild(
+          lazy.RemoteL10n.createElement(this.window.document, "span", {
+            content: content.text,
+          })
+        );
+        primaryActionCallback = () => {
+          this._blockMessage(id);
+          this.dispatchUserAction(primary.action);
+          this.hideAddressBarNotifier();
+          this._sendTelemetry({
+            message_id: id,
+            bucket_id: content.bucket_id,
+            event: "ENABLE",
+          });
+          RecommendationMap.delete(browser);
+        };
+
+        let getIcon = () => {
+          if (content.icon_dark_theme && this.isDarkTheme) {
+            return content.icon_dark_theme;
+          }
+          return content.icon;
+        };
+
+        let learnMoreURL = content.learn_more
+          ? SUMO_BASE_URL + content.learn_more
+          : null;
+
+        panelTitle = await this.getStrings(content.heading_text);
+        options = {
+          popupIconURL: getIcon(),
+          popupIconClass: content.icon_class,
+          learnMoreURL,
+          ...options,
+        };
+        break;
+      default:
+        const authorText = await this.getStrings({
+          string_id: "cfr-doorhanger-extension-author",
+          args: { name: content.addon.author },
+        });
+        panelTitle = await this.getStrings(content.addon.title);
+        await this._setAddonRating(this.window.document, content);
+        if (footerText.firstChild) {
+          footerText.firstChild.remove();
+        }
+        if (footerText.lastChild) {
+          footerText.lastChild.remove();
+        }
+
+        // Main body content of the dropdown
+        footerText.appendChild(
+          lazy.RemoteL10n.createElement(this.window.document, "span", {
+            content: content.text,
+          })
+        );
+
+        footerLink.value = await this.getStrings({
+          string_id: "cfr-doorhanger-extension-learn-more-link",
+        });
+        footerLink.setAttribute("href", content.addon.amo_url);
+        footerLink.onclick = () =>
+          this._sendTelemetry({
+            message_id: id,
+            bucket_id: content.bucket_id,
+            event: "LEARN_MORE",
+          });
+
+        footerText.appendChild(footerLink);
+        options = {
+          popupIconURL: content.addon.icon,
+          popupIconClass: content.icon_class,
+          name: authorText,
+          ...options,
+        };
+
+        primaryActionCallback = async () => {
+          primary.action.data.url =
+            // eslint-disable-next-line no-use-before-define
+            await CFRPageActions._fetchLatestAddonVersion(content.addon.id);
+          this._blockMessage(id);
+          this.dispatchUserAction(primary.action);
+          this.hideAddressBarNotifier();
+          this._sendTelemetry({
+            message_id: id,
+            bucket_id: content.bucket_id,
+            event: "INSTALL",
+          });
+          RecommendationMap.delete(browser);
+        };
+    }
+
+    const primaryBtnStrings = await this.getStrings(primary.label);
+    const mainAction = {
+      label: primaryBtnStrings,
+      accessKey: primaryBtnStrings.attributes.accesskey,
+      callback: primaryActionCallback,
+    };
+
+    let _renderSecondaryButtonAction = async (event, button) => {
+      let label = await this.getStrings(button.label);
+      let { attributes } = label;
+
+      return {
+        label,
+        accessKey: attributes.accesskey,
+        callback: () => {
+          if (button.action) {
+            this.dispatchUserAction(button.action);
+          } else {
+            this._blockMessage(id);
+            this.hideAddressBarNotifier();
+            RecommendationMap.delete(browser);
+          }
+
+          this._sendTelemetry({
+            message_id: id,
+            bucket_id: content.bucket_id,
+            event,
+          });
+          // We want to collapse if needed when we dismiss
+          this._collapse();
+        },
+      };
+    };
+
+    // For each secondary action, define default telemetry event
+    const defaultSecondaryEvent = ["DISMISS", "BLOCK", "MANAGE"];
+    const secondaryActions = await Promise.all(
+      secondary.map((button, i) => {
+        return _renderSecondaryButtonAction(
+          button.event || defaultSecondaryEvent[i],
+          button
+        );
+      })
+    );
+
+    // If the recommendation button is focused, it was probably activated via
+    // the keyboard. Therefore, focus the first element in the notification when
+    // it appears.
+    // We don't use the autofocus option provided by PopupNotifications.show
+    // because it doesn't focus the first element; i.e. the user still has to
+    // press tab once. That's not good enough, especially for screen reader
+    // users. Instead, we handle this ourselves in _popupStateChange.
+    this._autoFocus = this.window.document.activeElement === this.container;
+
+    // Actually show the notification
+    this.currentNotification = this.window.PopupNotifications.show(
+      browser,
+      POPUP_NOTIFICATION_ID,
+      panelTitle,
+      "cfr",
+      mainAction,
+      secondaryActions,
+      {
+        ...options,
+        hideClose: true,
+        eventCallback: this._popupStateChange,
+      }
+    );
+  }
+
+  _executeNotifierAction(browser, message) {
+    switch (message.content.layout) {
+      case "chiclet_open_url":
+        this._dispatchCFRAction(
+          {
+            type: "USER_ACTION",
+            data: {
+              type: "OPEN_URL",
+              data: {
+                args: message.content.action.url,
+                where: message.content.action.where,
+              },
+            },
+          },
+          this.window
+        );
+        break;
+    }
+
+    this._blockMessage(message.id);
+    this.hideAddressBarNotifier();
+    RecommendationMap.delete(browser);
+  }
+
+  /**
+   * Respond to a user click on the recommendation by showing a doorhanger/
+   * popup notification or running the action defined in the message
+   */
+  async _cfrUrlbarButtonClick(event) {
+    const browser = this.window.gBrowser.selectedBrowser;
+    if (!RecommendationMap.has(browser)) {
+      // There's no recommendation for this browser, so the user shouldn't have
+      // been able to click
+      this.hideAddressBarNotifier();
+      return;
+    }
+    const message = RecommendationMap.get(browser);
+    const { id, content } = message;
+
+    this._sendTelemetry({
+      message_id: id,
+      bucket_id: content.bucket_id,
+      event: "CLICK_DOORHANGER",
+    });
+
+    if (this.shouldShowDoorhanger(message)) {
+      // The recommendation should remain either collapsed or expanded while the
+      // doorhanger is showing
+      this._clearScheduledStateChanges(browser, message);
+      await this.showPopup();
+    } else {
+      await this._executeNotifierAction(browser, message);
+    }
+  }
+
+  _getVisibleElement(idOrEl) {
+    const element =
+      typeof idOrEl === "string"
+        ? idOrEl && this.window.document.getElementById(idOrEl)
+        : idOrEl;
+    if (!element) {
+      return null; // element doesn't exist at all
+    }
+    const { visibility, display } = this.window.getComputedStyle(element);
+    if (
+      !this.window.isElementVisible(element) ||
+      visibility !== "visible" ||
+      display === "none"
+    ) {
+      // CSS rules like visibility: hidden or display: none. these result in
+      // element being invisible and unclickable.
+      return null;
+    }
+    let widget = lazy.CustomizableUI.getWidget(idOrEl);
+    if (
+      widget &&
+      (this.window.CustomizationHandler.isCustomizing() ||
+        widget.areaType?.includes("panel"))
+    ) {
+      // The element is a customizable widget (a toolbar item, e.g. the
+      // reload button or the downloads button). Widgets can be in various
+      // areas, like the overflow panel or the customization palette.
+      // Widgets in the palette are present in the chrome's DOM during
+      // customization, but can't be used.
+      return null;
+    }
+    return element;
+  }
+
+  async showPopup() {
+    const browser = this.window.gBrowser.selectedBrowser;
+    const message = RecommendationMap.get(browser);
+    const { content } = message;
+
+    // A hacky way of setting the popup anchor outside the usual url bar icon box
+    // See https://searchfox.org/mozilla-central/rev/eb07633057d66ab25f9db4c5900eeb6913da7579/toolkit/modules/PopupNotifications.sys.mjs#44
+    browser.cfrpopupnotificationanchor =
+      this._getVisibleElement(content.anchor_id) ||
+      this._getVisibleElement(content.alt_anchor_id) ||
+      this._getVisibleElement(this.button) ||
+      this._getVisibleElement(this.container);
+
+    await this._renderPopup(message, browser);
+  }
+
+  async showMilestonePopup() {
+    const browser = this.window.gBrowser.selectedBrowser;
+    const message = RecommendationMap.get(browser);
+    const { content } = message;
+
+    // A hacky way of setting the popup anchor outside the usual url bar icon box
+    // See https://searchfox.org/mozilla-central/rev/eb07633057d66ab25f9db4c5900eeb6913da7579/toolkit/modules/PopupNotifications.sys.mjs#44
+    browser.cfrpopupnotificationanchor =
+      this.window.document.getElementById(content.anchor_id) || this.container;
+
+    await this._renderMilestonePopup(message, browser);
+    return true;
+  }
+}
+
+function isHostMatch(browser, host) {
+  return (
+    browser.documentURI.scheme.startsWith("http") &&
+    browser.documentURI.host === host
+  );
+}
+
+export const CFRPageActions = {
+  // For testing purposes
+  RecommendationMap,
+  PageActionMap,
+
+  /**
+   * To be called from browser.js on a location change, passing in the browser
+   * that's been updated
+   */
+  updatePageActions(browser) {
+    const win = browser.ownerGlobal;
+    const pageAction = PageActionMap.get(win);
+    if (!pageAction || browser !== win.gBrowser.selectedBrowser) {
+      return;
+    }
+    if (RecommendationMap.has(browser)) {
+      const recommendation = RecommendationMap.get(browser);
+      if (
+        !recommendation.content.skip_address_bar_notifier &&
+        (isHostMatch(browser, recommendation.host) ||
+          // If there is no host associated we assume we're back on a tab
+          // that had a CFR message so we should show it again
+          !recommendation.host)
+      ) {
+        // The browser has a recommendation specified with this host, so show
+        // the page action
+        pageAction.showAddressBarNotifier(recommendation);
+      } else if (!recommendation.content.persistent_doorhanger) {
+        if (recommendation.retain) {
+          // Keep the recommendation first time the user navigates away just in
+          // case they will go back to the previous page
+          pageAction.hideAddressBarNotifier();
+          recommendation.retain = false;
+        } else {
+          // The user has navigated away from the specified host in the given
+          // browser, so the recommendation is no longer valid and should be removed
+          RecommendationMap.delete(browser);
+          pageAction.hideAddressBarNotifier();
+        }
+      }
+    } else {
+      // There's no recommendation specified for this browser, so hide the page action
+      pageAction.hideAddressBarNotifier();
+    }
+  },
+
+  /**
+   * Fetch the URL to the latest add-on xpi so the recommendation can download it.
+   * @param id          The add-on ID
+   * @return            A string for the URL that was fetched
+   */
+  async _fetchLatestAddonVersion(id) {
+    let url = null;
+    try {
+      const response = await fetch(`${ADDONS_API_URL}/${id}/`, {
+        credentials: "omit",
+      });
+      if (response.status !== 204 && response.ok) {
+        const json = await response.json();
+        url = json.current_version.files[0].url;
+      }
+    } catch (e) {
+      console.error(
+        "Failed to get the latest add-on version for this recommendation"
+      );
+    }
+    return url;
+  },
+
+  /**
+   * Force a recommendation to be shown. Should only happen via the Admin page.
+   * @param browser                 The browser for the recommendation
+   * @param recommendation  The recommendation to show
+   * @param dispatchCFRAction      A function to dispatch resulting actions to
+   * @return                        Did adding the recommendation succeed?
+   */
+  async forceRecommendation(browser, recommendation, dispatchCFRAction) {
+    if (!browser) {
+      return false;
+    }
+    // If we are forcing via the Admin page, the browser comes in a different format
+    const win = browser.ownerGlobal;
+    const { id, content } = recommendation;
+    RecommendationMap.set(browser, {
+      id,
+      content,
+      retain: true,
+    });
+    if (!PageActionMap.has(win)) {
+      PageActionMap.set(win, new PageAction(win, dispatchCFRAction));
+    }
+
+    if (content.skip_address_bar_notifier) {
+      if (recommendation.template === "milestone_message") {
+        await PageActionMap.get(win).showMilestonePopup();
+        PageActionMap.get(win).addImpression(recommendation);
+      } else {
+        await PageActionMap.get(win).showPopup();
+        PageActionMap.get(win).addImpression(recommendation);
+      }
+    } else {
+      await PageActionMap.get(win).showAddressBarNotifier(recommendation, true);
+    }
+    return true;
+  },
+
+  /**
+   * Add a recommendation specific to the given browser and host.
+   * @param browser                 The browser for the recommendation
+   * @param host                    The host for the recommendation
+   * @param recommendation          The recommendation to show
+   * @param dispatchCFRAction       A function to dispatch resulting actions to
+   * @return                        Did adding the recommendation succeed?
+   */
+  async addRecommendation(browser, host, recommendation, dispatchCFRAction) {
+    if (!browser) {
+      return false;
+    }
+    const win = browser.ownerGlobal;
+    if (
+      browser !== win.gBrowser.selectedBrowser ||
+      // We can have recommendations without URL restrictions
+      (host && !isHostMatch(browser, host))
+    ) {
+      return false;
+    }
+    if (RecommendationMap.has(browser)) {
+      // Don't replace an existing message
+      return false;
+    }
+    const { id, content } = recommendation;
+    if (
+      !content.show_in_private_browsing &&
+      lazy.PrivateBrowsingUtils.isWindowPrivate(win)
+    ) {
+      return false;
+    }
+    RecommendationMap.set(browser, {
+      id,
+      host,
+      content,
+      retain: true,
+    });
+    if (!PageActionMap.has(win)) {
+      PageActionMap.set(win, new PageAction(win, dispatchCFRAction));
+    }
+
+    if (content.skip_address_bar_notifier) {
+      if (recommendation.template === "milestone_message") {
+        await PageActionMap.get(win).showMilestonePopup();
+        PageActionMap.get(win).addImpression(recommendation);
+      } else {
+        // Tracking protection messages
+        await PageActionMap.get(win).showPopup();
+        PageActionMap.get(win).addImpression(recommendation);
+      }
+    } else {
+      // Doorhanger messages
+      await PageActionMap.get(win).showAddressBarNotifier(recommendation, true);
+    }
+    return true;
+  },
+
+  /**
+   * Clear all recommendations and hide all PageActions
+   */
+  clearRecommendations() {
+    // WeakMaps aren't iterable so we have to test all existing windows
+    for (const win of Services.wm.getEnumerator("navigator:browser")) {
+      if (win.closed || !PageActionMap.has(win)) {
+        continue;
+      }
+      PageActionMap.get(win).hideAddressBarNotifier();
+    }
+    // WeakMaps don't have a `clear` method
+    PageActionMap = new WeakMap();
+    RecommendationMap = new WeakMap();
+    this.PageActionMap = PageActionMap;
+    this.RecommendationMap = RecommendationMap;
+  },
+
+  /**
+   * Reload the l10n Fluent files for all PageActions
+   */
+  reloadL10n() {
+    for (const win of Services.wm.getEnumerator("navigator:browser")) {
+      if (win.closed || !PageActionMap.has(win)) {
+        continue;
+      }
+      PageActionMap.get(win).reloadL10n();
+    }
+  },
+};
diff --git a/browser/components/asrouter/modules/FeatureCallout.sys.mjs b/browser/components/asrouter/modules/FeatureCallout.sys.mjs
new file mode 100644
index 0000000000..01998662f6
--- /dev/null
+++ b/browser/components/asrouter/modules/FeatureCallout.sys.mjs
@@ -0,0 +1,2100 @@
+/* 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/. */
+
+import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  AboutWelcomeParent: "resource:///actors/AboutWelcomeParent.sys.mjs",
+  ASRouter: "resource:///modules/asrouter/ASRouter.sys.mjs",
+  CustomizableUI: "resource:///modules/CustomizableUI.sys.mjs",
+  PageEventManager: "resource:///modules/asrouter/PageEventManager.sys.mjs",
+});
+
+const TRANSITION_MS = 500;
+const CONTAINER_ID = "feature-callout";
+const CONTENT_BOX_ID = "multi-stage-message-root";
+const BUNDLE_SRC =
+  "chrome://browser/content/aboutwelcome/aboutwelcome.bundle.js";
+
+ChromeUtils.defineLazyGetter(lazy, "log", () => {
+  const { Logger } = ChromeUtils.importESModule(
+    "resource://messaging-system/lib/Logger.sys.mjs"
+  );
+  return new Logger("FeatureCallout");
+});
+
+/**
+ * Feature Callout fetches messages relevant to a given source and displays them
+ * in the parent page pointing to the element they describe.
+ */
+export class FeatureCallout {
+  /**
+   * @typedef {Object} FeatureCalloutOptions
+   * @property {Window} win window in which messages will be rendered.
+   * @property {{name: String, defaultValue?: String}} [pref] optional pref used
+   *   to track progress through a given feature tour. for example:
+   *   {
+   *     name: "browser.pdfjs.feature-tour",
+   *     defaultValue: '{ screen: "FEATURE_CALLOUT_1", complete: false }',
+   *   }
+   *   or { name: "browser.pdfjs.feature-tour" } (defaultValue is optional)
+   * @property {String} [location] string to pass as the page when requesting
+   *   messages from ASRouter and sending telemetry.
+   * @property {String} context either "chrome" or "content". "chrome" is used
+   *   when the callout is shown in the browser chrome, and "content" is used
+   *   when the callout is shown in a content page like Firefox View.
+   * @property {MozBrowser} [browser] <browser> element responsible for the
+   *   feature callout. for content pages, this is the browser element that the
+   *   callout is being shown in. for chrome, this is the active browser.
+   * @property {Function} [listener] callback to be invoked on various callout
+   *   events to keep the broker informed of the callout's state.
+   * @property {FeatureCalloutTheme} [theme] @see FeatureCallout.themePresets
+   */
+
+  /** @param {FeatureCalloutOptions} options */
+  constructor({
+    win,
+    pref,
+    location,
+    context,
+    browser,
+    listener,
+    theme = {},
+  } = {}) {
+    this.win = win;
+    this.doc = win.document;
+    this.browser = browser || this.win.docShell.chromeEventHandler;
+    this.config = null;
+    this.loadingConfig = false;
+    this.message = null;
+    if (pref?.name) {
+      this.pref = pref;
+    }
+    this._featureTourProgress = null;
+    this.currentScreen = null;
+    this.renderObserver = null;
+    this.savedFocus = null;
+    this.ready = false;
+    this._positionListenersRegistered = false;
+    this._panelConflictListenersRegistered = false;
+    this.AWSetup = false;
+    this.location = location;
+    this.context = context;
+    this.listener = listener;
+    this._initTheme(theme);
+
+    this._handlePrefChange = this._handlePrefChange.bind(this);
+
+    XPCOMUtils.defineLazyPreferenceGetter(
+      this,
+      "cfrFeaturesUserPref",
+      "browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features",
+      true
+    );
+    this.setupFeatureTourProgress();
+
+    // When the window is focused, ensure tour is synced with tours in any other
+    // instances of the parent page. This does not apply when the Callout is
+    // shown in the browser chrome.
+    if (this.context !== "chrome") {
+      this.win.addEventListener("visibilitychange", this);
+    }
+
+    this.win.addEventListener("unload", this);
+  }
+
+  setupFeatureTourProgress() {
+    if (this.featureTourProgress) {
+      return;
+    }
+    if (this.pref?.name) {
+      this._handlePrefChange(null, null, this.pref.name);
+      Services.prefs.addObserver(this.pref.name, this._handlePrefChange);
+    }
+  }
+
+  teardownFeatureTourProgress() {
+    if (this.pref?.name) {
+      Services.prefs.removeObserver(this.pref.name, this._handlePrefChange);
+    }
+    this._featureTourProgress = null;
+  }
+
+  get featureTourProgress() {
+    return this._featureTourProgress;
+  }
+
+  /**
+   * Get the page event manager and instantiate it if necessary. Only used by
+   * _attachPageEventListeners, since we don't want to do this unnecessary work
+   * if a message with page event listeners hasn't loaded. Other consumers
+   * should use `this._pageEventManager?.property` instead.
+   */
+  get _loadPageEventManager() {
+    if (!this._pageEventManager) {
+      this._pageEventManager = new lazy.PageEventManager(this.win);
+    }
+    return this._pageEventManager;
+  }
+
+  _addPositionListeners() {
+    if (!this._positionListenersRegistered) {
+      this.win.addEventListener("resize", this);
+      this._positionListenersRegistered = true;
+    }
+  }
+
+  _removePositionListeners() {
+    if (this._positionListenersRegistered) {
+      this.win.removeEventListener("resize", this);
+      this._positionListenersRegistered = false;
+    }
+  }
+
+  _addPanelConflictListeners() {
+    if (!this._panelConflictListenersRegistered) {
+      this.win.addEventListener("popupshowing", this);
+      this.win.gURLBar.controller.addQueryListener(this);
+      this._panelConflictListenersRegistered = true;
+    }
+  }
+
+  _removePanelConflictListeners() {
+    if (this._panelConflictListenersRegistered) {
+      this.win.removeEventListener("popupshowing", this);
+      this.win.gURLBar.controller.removeQueryListener(this);
+      this._panelConflictListenersRegistered = false;
+    }
+  }
+
+  /**
+   * Close the tour when the urlbar is opened in the chrome. Set up by
+   * gURLBar.controller.addQueryListener in _addPanelConflictListeners.
+   */
+  onViewOpen() {
+    this.endTour();
+  }
+
+  _handlePrefChange(subject, topic, prefName) {
+    switch (prefName) {
+      case this.pref?.name:
+        try {
+          this._featureTourProgress = JSON.parse(
+            Services.prefs.getStringPref(
+              this.pref.name,
+              this.pref.defaultValue ?? null
+            )
+          );
+        } catch (error) {
+          this._featureTourProgress = null;
+        }
+        if (topic === "nsPref:changed") {
+          this._maybeAdvanceScreens();
+        }
+        break;
+    }
+  }
+
+  _maybeAdvanceScreens() {
+    if (this.doc.visibilityState === "hidden" || !this.featureTourProgress) {
+      return;
+    }
+
+    // If we have more than one screen, it means that we're displaying a feature
+    // tour, and transitions are handled based on the value of a tour progress
+    // pref. Otherwise, just show the feature callout. If a pref change results
+    // from an event in a Spotlight message, initialize the feature callout with
+    // the next message in the tour.
+    if (
+      this.config?.screens.length === 1 ||
+      this.currentScreen === "spotlight"
+    ) {
+      this.showFeatureCallout();
+      return;
+    }
+
+    let prefVal = this.featureTourProgress;
+    // End the tour according to the tour progress pref or if the user disabled
+    // contextual feature recommendations.
+    if (prefVal.complete || !this.cfrFeaturesUserPref) {
+      this.endTour();
+    } else if (prefVal.screen !== this.currentScreen?.id) {
+      // Pref changes only matter to us insofar as they let us advance an
+      // ongoing tour. If the tour was closed and the pref changed later, e.g.
+      // by editing the pref directly, we don't want to start up the tour again.
+      // This is more important in the chrome, which is always open.
+      if (this.context === "chrome" && !this.currentScreen) {
+        return;
+      }
+      this.ready = false;
+      this._container?.classList.toggle(
+        "hidden",
+        this._container?.localName !== "panel"
+      );
+      this._pageEventManager?.emit({
+        type: "touradvance",
+        target: this._container,
+      });
+      const onFadeOut = async () => {
+        // If the initial message was deployed from outside by ASRouter as a
+        // result of a trigger, we can't continue it through _loadConfig, since
+        // that effectively requests a message with a `featureCalloutCheck`
+        // trigger. So we need to load up the same message again, merely
+        // changing the startScreen index. Just check that the next screen and
+        // the current screen are both within the message's screens array.
+        let nextMessage = null;
+        if (
+          this.context === "chrome" &&
+          this.message?.trigger.id !== "featureCalloutCheck"
+        ) {
+          if (
+            this.config?.screens.some(s => s.id === this.currentScreen?.id) &&
+            this.config.screens.some(s => s.id === prefVal.screen)
+          ) {
+            nextMessage = this.message;
+          }
+        }
+        this._container?.remove();
+        this.renderObserver?.disconnect();
+        this._removePositionListeners();
+        this._removePanelConflictListeners();
+        this.doc.querySelector(`[src="${BUNDLE_SRC}"]`)?.remove();
+        if (nextMessage) {
+          const isMessageUnblocked = await lazy.ASRouter.isUnblockedMessage(
+            nextMessage
+          );
+          if (!isMessageUnblocked) {
+            this.endTour();
+            return;
+          }
+        }
+        let updated = await this._updateConfig(nextMessage);
+        if (!updated && !this.currentScreen) {
+          this.endTour();
+          return;
+        }
+        let rendering = await this._renderCallout();
+        if (!rendering) {
+          this.endTour();
+        }
+      };
+      if (this._container?.localName === "panel") {
+        this._container.removeEventListener("popuphiding", this);
+        this._container.addEventListener("popuphidden", onFadeOut, {
+          once: true,
+        });
+        this._container.hidePopup(true);
+      } else {
+        this.win.setTimeout(onFadeOut, TRANSITION_MS);
+      }
+    }
+  }
+
+  handleEvent(event) {
+    switch (event.type) {
+      case "focus": {
+        if (!this._container) {
+          return;
+        }
+        // If focus has fired on the feature callout window itself, or on something
+        // contained in that window, ignore it, as we can't possibly place the focus
+        // on it after the callout is closd.
+        if (
+          event.target === this._container ||
+          (Node.isInstance(event.target) &&
+            this._container.contains(event.target))
+        ) {
+          return;
+        }
+        // Save this so that if the next focus event is re-entering the popup,
+        // then we'll put the focus back here where the user left it once we exit
+        // the feature callout series.
+        if (this.doc.activeElement) {
+          let element = this.doc.activeElement;
+          this.savedFocus = {
+            element,
+            focusVisible: element.matches(":focus-visible"),
+          };
+        } else {
+          this.savedFocus = null;
+        }
+        break;
+      }
+
+      case "keypress": {
+        if (event.key !== "Escape") {
+          return;
+        }
+        if (!this._container) {
+          return;
+        }
+        let focusedElement =
+          this.context === "chrome"
+            ? Services.focus.focusedElement
+            : this.doc.activeElement;
+        // If the window has a focused element, let it handle the ESC key instead.
+        if (
+          !focusedElement ||
+          focusedElement === this.doc.body ||
+          (focusedElement === this.browser && this.theme.simulateContent) ||
+          this._container.contains(focusedElement)
+        ) {
+          this.win.AWSendEventTelemetry?.({
+            event: "DISMISS",
+            event_context: {
+              source: `KEY_${event.key}`,
+              page: this.location,
+            },
+            message_id: this.config?.id.toUpperCase(),
+          });
+          this._dismiss();
+          event.preventDefault();
+        }
+        break;
+      }
+
+      case "visibilitychange":
+        this._maybeAdvanceScreens();
+        break;
+
+      case "resize":
+      case "toggle":
+        this.win.requestAnimationFrame(() => this._positionCallout());
+        break;
+
+      case "popupshowing":
+        // If another panel is showing, close the tour.
+        if (
+          event.target !== this._container &&
+          event.target.localName === "panel" &&
+          event.target.id !== "ctrlTab-panel" &&
+          event.target.ownerGlobal === this.win
+        ) {
+          this.endTour();
+        }
+        break;
+
+      case "popuphiding":
+        if (event.target === this._container) {
+          this.endTour();
+        }
+        break;
+
+      case "unload":
+        try {
+          this.teardownFeatureTourProgress();
+        } catch (error) {}
+        break;
+
+      default:
+    }
+  }
+
+  async _addCalloutLinkElements() {
+    for (const path of [
+      "browser/newtab/onboarding.ftl",
+      "browser/spotlight.ftl",
+      "branding/brand.ftl",
+      "toolkit/branding/brandings.ftl",
+      "browser/newtab/asrouter.ftl",
+      "browser/featureCallout.ftl",
+    ]) {
+      this.win.MozXULElement.insertFTLIfNeeded(path);
+    }
+
+    const addChromeSheet = href => {
+      try {
+        this.win.windowUtils.loadSheetUsingURIString(
+          href,
+          Ci.nsIDOMWindowUtils.AUTHOR_SHEET
+        );
+      } catch (error) {
+        // the sheet was probably already loaded. I don't think there's a way to
+        // check for this via JS, but the method checks and throws if it's
+        // already loaded, so we can just treat the error as expected.
+      }
+    };
+    const addStylesheet = href => {
+      if (this.win.isChromeWindow) {
+        // for chrome, load the stylesheet using a special method to make sure
+        // it's loaded synchronously before the first paint & position.
+        return addChromeSheet(href);
+      }
+      if (this.doc.querySelector(`link[href="${href}"]`)) {
+        return null;
+      }
+      const link = this.doc.head.appendChild(this.doc.createElement("link"));
+      link.rel = "stylesheet";
+      link.href = href;
+      return null;
+    };
+    // Update styling to be compatible with about:welcome bundle
+    await addStylesheet(
+      "chrome://browser/content/aboutwelcome/aboutwelcome.css"
+    );
+  }
+
+  /**
+   * @typedef {
+   * | "topleft"
+   * | "topright"
+   * | "bottomleft"
+   * | "bottomright"
+   * | "leftcenter"
+   * | "rightcenter"
+   * | "topcenter"
+   * | "bottomcenter"
+   * } PopupAttachmentPoint
+   *
+   * @see nsMenuPopupFrame
+   *
+   * Each attachment point corresponds to an attachment point on the edge of a
+   * frame. For example, "topleft" corresponds to the frame's top left corner,
+   * and "rightcenter" corresponds to the center of the right edge of the frame.
+   */
+
+  /**
+   * @typedef {Object} PanelPosition Specifies how the callout panel should be
+   *   positioned relative to the anchor element, by providing which point on
+   *   the callout should be aligned with which point on the anchor element.
+   * @property {PopupAttachmentPoint} anchor_attachment
+   * @property {PopupAttachmentPoint} callout_attachment
+   * @property {Number} [offset_x] Offset in pixels to apply to the callout
+   *   position in the horizontal direction.
+   * @property {Number} [offset_y] The same in the vertical direction.
+   *
+   * This is used when you want the callout to be displayed as a <panel>
+   * element. A panel is critical when the callout is displayed in the browser
+   * chrome, anchored to an element whose position on the screen is dynamic,
+   * such as a button. When the anchor moves, the panel will automatically move
+   * with it. Also, when the elements are aligned so that the callout would
+   * extend beyond the edge of the screen, the panel will automatically flip
+   * itself to the other side of the anchor element. This requires specifying
+   * both an anchor attachment point and a callout attachment point. For
+   * example, to get the callout to appear under a button, with its arrow on the
+   * right side of the callout:
+   * { anchor_attachment: "bottomcenter", callout_attachment: "topright" }
+   */
+
+  /**
+   * @typedef {
+   * | "top"
+   * | "bottom"
+   * | "end"
+   * | "start"
+   * | "top-end"
+   * | "top-start"
+   * | "top-center-arrow-end"
+   * | "top-center-arrow-start"
+   * } HTMLArrowPosition
+   *
+   * @see FeatureCallout._positionCallout()
+   * The position of the callout arrow relative to the callout container. Only
+   * used for HTML callouts, typically in content pages. If the position
+   * contains a dash, the value before the dash refers to which edge of the
+   * feature callout the arrow points from. The value after the dash describes
+   * where along that edge the arrow sits, with middle as the default.
+   */
+
+  /**
+   * @typedef {Object} PositionOverride CSS properties to override
+   *   the callout's position relative to the anchor element. Although the
+   *   callout is not actually a child of the anchor element, this allows
+   *   absolute positioning of the callout relative to the anchor element. In
+   *   other words, { top: "0px", left: "0px" } will position the callout in the
+   *   top left corner of the anchor element, in the same way these properties
+   *   would position a child element.
+   * @property {String} [top]
+   * @property {String} [left]
+   * @property {String} [right]
+   * @property {String} [bottom]
+   */
+
+  /**
+   * @typedef {Object} AnchorConfig
+   * @property {String} selector CSS selector for the anchor node.
+   * @property {PanelPosition} [panel_position] Used to show the callout in a
+   *   XUL panel. Only works in chrome documents, like the main browser window.
+   * @property {HTMLArrowPosition} [arrow_position] Used to show the callout in
+   *   an HTML div container. Mutually exclusive with panel_position.
+   * @property {PositionOverride} [absolute_position] Only used for HTML
+   *   callouts, i.e. when panel_position is not specified. Allows absolute
+   *   positioning of the callout relative to the anchor element.
+   * @property {Boolean} [hide_arrow] Whether to hide the arrow.
+   * @property {Boolean} [no_open_on_anchor] Whether to set the [open] style on
+   *   the anchor element when the callout is shown. False to set it, true to
+   *   not set it. This only works for panel callouts. Not all elements have an
+   *   [open] style. Buttons do, for example. It's usually similar to :active.
+   * @property {Number} [arrow_width] The desired width of the arrow in a number
+   *   of pixels. 33.94113 by default (this corresponds to 24px edges).
+   */
+
+  /**
+   * @typedef {Object} Anchor
+   * @property {String} selector
+   * @property {PanelPosition} [panel_position]
+   * @property {HTMLArrowPosition} [arrow_position]
+   * @property {PositionOverride} [absolute_position]
+   * @property {Boolean} [hide_arrow]
+   * @property {Boolean} [no_open_on_anchor]
+   * @property {Number} [arrow_width]
+   * @property {Element} element The anchor node resolved from the selector.
+   * @property {String} [panel_position_string] The panel_position joined into a
+   *   string, e.g. "bottomleft topright". Passed to XULPopupElement::openPopup.
+   */
+
+  /**
+   * Return the first visible anchor element for the current screen. Screens can
+   * specify multiple anchors in an array, and the first one that is visible
+   * will be used. If none are visible, return null.
+   * @returns {Anchor|null}
+   */
+  _getAnchor() {
+    /** @type {AnchorConfig[]} */
+    const anchors = Array.isArray(this.currentScreen?.anchors)
+      ? this.currentScreen.anchors
+      : [];
+    for (let anchor of anchors) {
+      if (!anchor || typeof anchor !== "object") {
+        lazy.log.debug(
+          `In ${this.location}: Invalid anchor config. Expected an object, got: ${anchor}`
+        );
+        continue;
+      }
+      const { selector, arrow_position, panel_position } = anchor;
+      let panel_position_string;
+      if (panel_position) {
+        panel_position_string = this._getPanelPositionString(panel_position);
+        // if the positionString doesn't match the format we expect, don't
+        // render the callout.
+        if (!panel_position_string && !arrow_position) {
+          lazy.log.debug(
+            `In ${
+              this.location
+            }: Invalid panel_position config. Expected an object with anchor_attachment and callout_attachment properties, got: ${JSON.stringify(
+              panel_position
+            )}`
+          );
+          continue;
+        }
+      }
+      if (
+        arrow_position &&
+        !this._HTMLArrowPositions.includes(arrow_position)
+      ) {
+        lazy.log.debug(
+          `In ${
+            this.location
+          }: Invalid arrow_position config. Expected one of ${JSON.stringify(
+            this._HTMLArrowPositions
+          )}, got: ${arrow_position}`
+        );
+        continue;
+      }
+      const element = selector && this.doc.querySelector(selector);
+      if (!element) {
+        continue; // Element doesn't exist at all.
+      }
+      const isVisible = () => {
+        if (
+          this.context === "chrome" &&
+          typeof this.win.isElementVisible === "function"
+        ) {
+          // In chrome windows, we can use the isElementVisible function to
+          // check that the element has non-zero width and height. If it was
+          // hidden, it would most likely have zero width and/or height.
+          if (!this.win.isElementVisible(element)) {
+            return false;
+          }
+        }
+        // CSS rules like visibility: hidden or display: none. These result in
+        // element being invisible and unclickable.
+        const style = this.win.getComputedStyle(element);
+        return style?.visibility === "visible" && style?.display !== "none";
+      };
+      if (!isVisible()) {
+        continue;
+      }
+      if (
+        this.context === "chrome" &&
+        element.id &&
+        anchor.selector.includes(`#${element.id}`)
+      ) {
+        let widget = lazy.CustomizableUI.getWidget(element.id);
+        if (
+          widget &&
+          (this.win.CustomizationHandler.isCustomizing() ||
+            widget.areaType?.includes("panel"))
+        ) {
+          // The element is a customizable widget (a toolbar item, e.g. the
+          // reload button or the downloads button). Widgets can be in various
+          // areas, like the overflow panel or the customization palette.
+          // Widgets in the palette are present in the chrome's DOM during
+          // customization, but can't be used.
+          continue;
+        }
+      }
+      return { ...anchor, panel_position_string, element };
+    }
+    return null;
+  }
+
+  /** @see PopupAttachmentPoint */
+  _popupAttachmentPoints = [
+    "topleft",
+    "topright",
+    "bottomleft",
+    "bottomright",
+    "leftcenter",
+    "rightcenter",
+    "topcenter",
+    "bottomcenter",
+  ];
+
+  /**
+   * Return a string representing the position of the panel relative to the
+   * anchor element. Passed to XULPopupElement::openPopup. The string is of the
+   * form "anchor_attachment callout_attachment".
+   *
+   * @param {PanelPosition} panelPosition
+   * @returns {String|null} A string like "bottomcenter topright", or null if
+   *   the panelPosition object is invalid.
+   */
+  _getPanelPositionString(panelPosition) {
+    const { anchor_attachment, callout_attachment } = panelPosition;
+    if (
+      !this._popupAttachmentPoints.includes(anchor_attachment) ||
+      !this._popupAttachmentPoints.includes(callout_attachment)
+    ) {
+      return null;
+    }
+    let positionString = `${anchor_attachment} ${callout_attachment}`;
+    return positionString;
+  }
+
+  /**
+   * Set/override methods on a panel element. Can be used to override methods on
+   * the custom element class, or to add additional methods.
+   *
+   * @param {MozPanel} panel The panel to set methods for
+   */
+  _setPanelMethods(panel) {
+    // This method is optionally called by MozPanel::_setSideAttribute, though
+    // it does not exist on the class.
+    panel.setArrowPosition = function setArrowPosition(event) {
+      if (!this.hasAttribute("show-arrow")) {
+        return;
+      }
+      let { alignmentPosition, alignmentOffset, popupAlignment } = event;
+      let positionParts = alignmentPosition?.match(
+        /^(before|after|start|end)_(before|after|start|end)$/
+      );
+      if (!positionParts) {
+        return;
+      }
+      // Hide the arrow if the `flip` behavior has caused the panel to
+      // offset relative to its anchor, since the arrow would no longer
+      // point at the true anchor. This differs from an arrow that is
+      // intentionally hidden by the user in message.
+      if (this.getAttribute("hide-arrow") !== "permanent") {
+        if (alignmentOffset) {
+          this.setAttribute("hide-arrow", "temporary");
+        } else {
+          this.removeAttribute("hide-arrow");
+        }
+      }
+      let arrowPosition = "top";
+      switch (positionParts[1]) {
+        case "start":
+        case "end": {
+          // Inline arrow, i.e. arrow is on one of the left/right edges.
+          let isRTL =
+            this.ownerGlobal.getComputedStyle(this).direction === "rtl";
+          let isRight = isRTL ^ (positionParts[1] === "start");
+          let side = isRight ? "end" : "start";
+          arrowPosition = `inline-${side}`;
+          if (popupAlignment?.includes("center")) {
+            arrowPosition = `inline-${side}`;
+          } else if (positionParts[2] === "before") {
+            arrowPosition = `inline-${side}-top`;
+          } else if (positionParts[2] === "after") {
+            arrowPosition = `inline-${side}-bottom`;
+          }
+          break;
+        }
+        case "before":
+        case "after": {
+          // Block arrow, i.e. arrow is on one of the top/bottom edges.
+          let side = positionParts[1] === "before" ? "bottom" : "top";
+          arrowPosition = side;
+          if (popupAlignment?.includes("center")) {
+            arrowPosition = side;
+          } else if (positionParts[2] === "end") {
+            arrowPosition = `${side}-end`;
+          } else if (positionParts[2] === "start") {
+            arrowPosition = `${side}-start`;
+          }
+          break;
+        }
+      }
+      this.setAttribute("arrow-position", arrowPosition);
+    };
+  }
+
+  _createContainer() {
+    const anchor = this._getAnchor();
+    // Don't render the callout if none of the anchors is visible.
+    if (!anchor) {
+      return false;
+    }
+
+    const { autohide, padding } = this.currentScreen.content;
+    const {
+      panel_position_string,
+      hide_arrow,
+      no_open_on_anchor,
+      arrow_width,
+    } = anchor;
+    const needsPanel = "MozXULElement" in this.win && !!panel_position_string;
+
+    if (this._container) {
+      if (needsPanel ^ (this._container?.localName === "panel")) {
+        this._container.remove();
+      }
+    }
+
+    if (!this._container?.parentElement) {
+      if (needsPanel) {
+        let fragment = this.win.MozXULElement.parseXULToFragment(`<panel
+            class="panel-no-padding"
+            orient="vertical"
+            ignorekeys="true"
+            noautofocus="true"
+            flip="slide"
+            type="arrow"
+            position="${panel_position_string}"
+            ${hide_arrow ? "" : 'show-arrow=""'}
+            ${autohide ? "" : 'noautohide="true"'}
+            ${no_open_on_anchor ? 'no-open-on-anchor=""' : ""}
+          />`);
+        this._container = fragment.firstElementChild;
+        this._setPanelMethods(this._container);
+      } else {
+        this._container = this.doc.createElement("div");
+        this._container?.classList.add("hidden");
+      }
+      this._container.classList.add("featureCallout", "callout-arrow");
+      if (hide_arrow) {
+        this._container.setAttribute("hide-arrow", "permanent");
+      } else {
+        this._container.removeAttribute("hide-arrow");
+      }
+      this._container.id = CONTAINER_ID;
+      this._container.setAttribute(
+        "aria-describedby",
+        `#${CONTAINER_ID} .welcome-text`
+      );
+      this._container.tabIndex = 0;
+      if (arrow_width) {
+        this._container.style.setProperty("--arrow-width", `${arrow_width}px`);
+      } else {
+        this._container.style.removeProperty("--arrow-width");
+      }
+      if (padding) {
+        this._container.style.setProperty("--callout-padding", `${padding}px`);
+      } else {
+        this._container.style.removeProperty("--callout-padding");
+      }
+      let contentBox = this.doc.createElement("div");
+      contentBox.id = CONTENT_BOX_ID;
+      contentBox.classList.add("onboardingContainer");
+      // This value is reported as the "page" in about:welcome telemetry
+      contentBox.dataset.page = this.location;
+      this._applyTheme();
+      if (needsPanel && this.win.isChromeWindow) {
+        this.doc.getElementById("mainPopupSet").appendChild(this._container);
+      } else {
+        this.doc.body.prepend(this._container);
+      }
+      const makeArrow = classPrefix => {
+        const arrowRotationBox = this.doc.createElement("div");
+        arrowRotationBox.classList.add("arrow-box", `${classPrefix}-arrow-box`);
+        const arrow = this.doc.createElement("div");
+        arrow.classList.add("arrow", `${classPrefix}-arrow`);
+        arrowRotationBox.appendChild(arrow);
+        return arrowRotationBox;
+      };
+      this._container.appendChild(makeArrow("shadow"));
+      this._container.appendChild(contentBox);
+      this._container.appendChild(makeArrow("background"));
+    }
+    return this._container;
+  }
+
+  /** @see HTMLArrowPosition */
+  _HTMLArrowPositions = [
+    "top",
+    "bottom",
+    "end",
+    "start",
+    "top-end",
+    "top-start",
+    "top-center-arrow-end",
+    "top-center-arrow-start",
+  ];
+
+  /**
+   * Set callout's position relative to parent element
+   */
+  _positionCallout() {
+    const container = this._container;
+    const anchor = this._getAnchor();
+    if (!container || !anchor) {
+      this.endTour();
+      return;
+    }
+    const parentEl = anchor.element;
+    const { doc } = this;
+    const arrowPosition = anchor.arrow_position || "top";
+    const arrowWidth = anchor.arrow_width || 33.94113;
+    const arrowHeight = arrowWidth / 2;
+    const overlapAmount = 5;
+    let overlap = overlapAmount - arrowHeight;
+    // Is the document layout right to left?
+    const RTL = this.doc.dir === "rtl";
+    const customPosition = anchor.absolute_position;
+
+    const getOffset = el => {
+      const rect = el.getBoundingClientRect();
+      return {
+        left: rect.left + this.win.scrollX,
+        right: rect.right + this.win.scrollX,
+        top: rect.top + this.win.scrollY,
+        bottom: rect.bottom + this.win.scrollY,
+      };
+    };
+
+    const centerVertically = () => {
+      let topOffset =
+        (container.getBoundingClientRect().height -
+          parentEl.getBoundingClientRect().height) /
+        2;
+      container.style.top = `${getOffset(parentEl).top - topOffset}px`;
+    };
+
+    /**
+     * Horizontally align a top/bottom-positioned callout according to the
+     * passed position.
+     * @param {String} position one of...
+     *   - "center": for use with top/bottom. arrow is in the center, and the
+     *       center of the callout aligns with the parent center.
+     *   - "center-arrow-start": for use with center-arrow-top-start. arrow is
+     *       on the start (left) side of the callout, and the callout is aligned
+     *       so that the arrow points to the center of the parent element.
+     *   - "center-arrow-end": for use with center-arrow-top-end. arrow is on
+     *       the end, and the arrow points to the center of the parent.
+     *   - "start": currently unused. align the callout's starting edge with the
+     *       parent's starting edge.
+     *   - "end": currently unused. same as start but for the ending edge.
+     */
+    const alignHorizontally = position => {
+      switch (position) {
+        case "center": {
+          const sideOffset =
+            (parentEl.getBoundingClientRect().width -
+              container.getBoundingClientRect().width) /
+            2;
+          const containerSide = RTL
+            ? doc.documentElement.clientWidth -
+              getOffset(parentEl).right +
+              sideOffset
+            : getOffset(parentEl).left + sideOffset;
+          container.style[RTL ? "right" : "left"] = `${Math.max(
+            containerSide,
+            0
+          )}px`;
+          break;
+        }
+        case "end":
+        case "start": {
+          const containerSide =
+            RTL ^ (position === "end")
+              ? parentEl.getBoundingClientRect().left +
+                parentEl.getBoundingClientRect().width -
+                container.getBoundingClientRect().width
+              : parentEl.getBoundingClientRect().left;
+          container.style.left = `${Math.max(containerSide, 0)}px`;
+          break;
+        }
+        case "center-arrow-end":
+        case "center-arrow-start": {
+          const parentRect = parentEl.getBoundingClientRect();
+          const containerWidth = container.getBoundingClientRect().width;
+          const containerSide =
+            RTL ^ position.endsWith("end")
+              ? parentRect.left +
+                parentRect.width / 2 +
+                12 +
+                arrowWidth / 2 -
+                containerWidth
+              : parentRect.left + parentRect.width / 2 - 12 - arrowWidth / 2;
+          const maxContainerSide =
+            doc.documentElement.clientWidth - containerWidth;
+          container.style.left = `${Math.min(
+            maxContainerSide,
+            Math.max(containerSide, 0)
+          )}px`;
+        }
+      }
+    };
+
+    // Remember not to use HTML-only properties/methods like offsetHeight. Try
+    // to use getBoundingClientRect() instead, which is available on XUL
+    // elements. This is necessary to support feature callout in chrome, which
+    // is still largely XUL-based.
+    const positioners = {
+      // availableSpace should be the space between the edge of the page in the
+      // assumed direction and the edge of the parent (with the callout being
+      // intended to fit between those two edges) while needed space should be
+      // the space necessary to fit the callout container.
+      top: {
+        availableSpace() {
+          return (
+            doc.documentElement.clientHeight -
+            getOffset(parentEl).top -
+            parentEl.getBoundingClientRect().height
+          );
+        },
+        neededSpace: container.getBoundingClientRect().height - overlap,
+        position() {
+          // Point to an element above the callout
+          let containerTop =
+            getOffset(parentEl).top +
+            parentEl.getBoundingClientRect().height -
+            overlap;
+          container.style.top = `${Math.max(0, containerTop)}px`;
+          alignHorizontally("center");
+        },
+      },
+      bottom: {
+        availableSpace() {
+          return getOffset(parentEl).top;
+        },
+        neededSpace: container.getBoundingClientRect().height - overlap,
+        position() {
+          // Point to an element below the callout
+          let containerTop =
+            getOffset(parentEl).top -
+            container.getBoundingClientRect().height +
+            overlap;
+          container.style.top = `${Math.max(0, containerTop)}px`;
+          alignHorizontally("center");
+        },
+      },
+      right: {
+        availableSpace() {
+          return getOffset(parentEl).left;
+        },
+        neededSpace: container.getBoundingClientRect().width - overlap,
+        position() {
+          // Point to an element to the right of the callout
+          let containerLeft =
+            getOffset(parentEl).left -
+            container.getBoundingClientRect().width +
+            overlap;
+          container.style.left = `${Math.max(0, containerLeft)}px`;
+          if (
+            container.getBoundingClientRect().height <=
+            parentEl.getBoundingClientRect().height
+          ) {
+            container.style.top = `${getOffset(parentEl).top}px`;
+          } else {
+            centerVertically();
+          }
+        },
+      },
+      left: {
+        availableSpace() {
+          return doc.documentElement.clientWidth - getOffset(parentEl).right;
+        },
+        neededSpace: container.getBoundingClientRect().width - overlap,
+        position() {
+          // Point to an element to the left of the callout
+          let containerLeft =
+            getOffset(parentEl).left +
+            parentEl.getBoundingClientRect().width -
+            overlap;
+          container.style.left = `${Math.max(0, containerLeft)}px`;
+          if (
+            container.getBoundingClientRect().height <=
+            parentEl.getBoundingClientRect().height
+          ) {
+            container.style.top = `${getOffset(parentEl).top}px`;
+          } else {
+            centerVertically();
+          }
+        },
+      },
+      "top-start": {
+        availableSpace() {
+          return (
+            doc.documentElement.clientHeight -
+            getOffset(parentEl).top -
+            parentEl.getBoundingClientRect().height
+          );
+        },
+        neededSpace: container.getBoundingClientRect().height - overlap,
+        position() {
+          // Point to an element above and at the start of the callout
+          let containerTop =
+            getOffset(parentEl).top +
+            parentEl.getBoundingClientRect().height -
+            overlap;
+          container.style.top = `${Math.max(0, containerTop)}px`;
+          alignHorizontally("start");
+        },
+      },
+      "top-end": {
+        availableSpace() {
+          return (
+            doc.documentElement.clientHeight -
+            getOffset(parentEl).top -
+            parentEl.getBoundingClientRect().height
+          );
+        },
+        neededSpace: container.getBoundingClientRect().height - overlap,
+        position() {
+          // Point to an element above and at the end of the callout
+          let containerTop =
+            getOffset(parentEl).top +
+            parentEl.getBoundingClientRect().height -
+            overlap;
+          container.style.top = `${Math.max(0, containerTop)}px`;
+          alignHorizontally("end");
+        },
+      },
+      "top-center-arrow-start": {
+        availableSpace() {
+          return (
+            doc.documentElement.clientHeight -
+            getOffset(parentEl).top -
+            parentEl.getBoundingClientRect().height
+          );
+        },
+        neededSpace: container.getBoundingClientRect().height - overlap,
+        position() {
+          // Point to an element above and at the start of the callout
+          let containerTop =
+            getOffset(parentEl).top +
+            parentEl.getBoundingClientRect().height -
+            overlap;
+          container.style.top = `${Math.max(0, containerTop)}px`;
+          alignHorizontally("center-arrow-start");
+        },
+      },
+      "top-center-arrow-end": {
+        availableSpace() {
+          return (
+            doc.documentElement.clientHeight -
+            getOffset(parentEl).top -
+            parentEl.getBoundingClientRect().height
+          );
+        },
+        neededSpace: container.getBoundingClientRect().height - overlap,
+        position() {
+          // Point to an element above and at the end of the callout
+          let containerTop =
+            getOffset(parentEl).top +
+            parentEl.getBoundingClientRect().height -
+            overlap;
+          container.style.top = `${Math.max(0, containerTop)}px`;
+          alignHorizontally("center-arrow-end");
+        },
+      },
+    };
+
+    const clearPosition = () => {
+      Object.keys(positioners).forEach(position => {
+        container.style[position] = "unset";
+      });
+      container.removeAttribute("arrow-position");
+    };
+
+    const setArrowPosition = position => {
+      let val;
+      switch (position) {
+        case "bottom":
+          val = "bottom";
+          break;
+        case "left":
+          val = "inline-start";
+          break;
+        case "right":
+          val = "inline-end";
+          break;
+        case "top-start":
+        case "top-center-arrow-start":
+          val = RTL ? "top-end" : "top-start";
+          break;
+        case "top-end":
+        case "top-center-arrow-end":
+          val = RTL ? "top-start" : "top-end";
+          break;
+        case "top":
+        default:
+          val = "top";
+          break;
+      }
+
+      container.setAttribute("arrow-position", val);
+    };
+
+    const addValueToPixelValue = (value, pixelValue) => {
+      return `${parseFloat(pixelValue) + value}px`;
+    };
+
+    const subtractPixelValueFromValue = (pixelValue, value) => {
+      return `${value - parseFloat(pixelValue)}px`;
+    };
+
+    const overridePosition = () => {
+      // We override _every_ positioner here, because we want to manually set
+      // all container.style.positions in every positioner's "position" function
+      // regardless of the actual arrow position
+
+      // Note: We override the position functions with new functions here, but
+      // they don't actually get executed until the respective position
+      // functions are called and this function is not executed unless the
+      // message has a custom position property.
+
+      // We're positioning relative to a parent element's bounds, if that parent
+      // element exists.
+
+      for (const position in positioners) {
+        if (!Object.prototype.hasOwnProperty.call(positioners, position)) {
+          continue;
+        }
+
+        positioners[position].position = () => {
+          if (customPosition.top) {
+            container.style.top = addValueToPixelValue(
+              parentEl.getBoundingClientRect().top,
+              customPosition.top
+            );
+          }
+
+          if (customPosition.left) {
+            const leftPosition = addValueToPixelValue(
+              parentEl.getBoundingClientRect().left,
+              customPosition.left
+            );
+
+            if (RTL) {
+              container.style.right = leftPosition;
+            } else {
+              container.style.left = leftPosition;
+            }
+          }
+
+          if (customPosition.right) {
+            const rightPosition = subtractPixelValueFromValue(
+              customPosition.right,
+              parentEl.getBoundingClientRect().right -
+                container.getBoundingClientRect().width
+            );
+
+            if (RTL) {
+              container.style.right = rightPosition;
+            } else {
+              container.style.left = rightPosition;
+            }
+          }
+
+          if (customPosition.bottom) {
+            container.style.top = subtractPixelValueFromValue(
+              customPosition.bottom,
+              parentEl.getBoundingClientRect().bottom -
+                container.getBoundingClientRect().height
+            );
+          }
+        };
+      }
+    };
+
+    const calloutFits = position => {
+      // Does callout element fit in this position relative
+      // to the parent element without going off screen?
+
+      // Only consider which edge of the callout the arrow points from,
+      // not the alignment of the arrow along the edge of the callout
+      let [edgePosition] = position.split("-");
+      return (
+        positioners[edgePosition].availableSpace() >
+        positioners[edgePosition].neededSpace
+      );
+    };
+
+    const choosePosition = () => {
+      let position = arrowPosition;
+      if (!this._HTMLArrowPositions.includes(position)) {
+        // Configured arrow position is not valid
+        position = null;
+      }
+      if (["start", "end"].includes(position)) {
+        // position here is referencing the direction that the callout container
+        // is pointing to, and therefore should be the _opposite_ side of the
+        // arrow eg. if arrow is at the "end" in LTR layouts, the container is
+        // pointing at an element to the right of itself, while in RTL layouts
+        // it is pointing to the left of itself
+        position = RTL ^ (position === "start") ? "left" : "right";
+      }
+      // If we're overriding the position, we don't need to sort for available space
+      if (customPosition || (position && calloutFits(position))) {
+        return position;
+      }
+      let sortedPositions = ["top", "bottom", "left", "right"]
+        .filter(p => p !== position)
+        .filter(calloutFits)
+        .sort((a, b) => {
+          return (
+            positioners[b].availableSpace() - positioners[b].neededSpace >
+            positioners[a].availableSpace() - positioners[a].neededSpace
+          );
+        });
+      // If the callout doesn't fit in any position, use the configured one.
+      // The callout will be adjusted to overlap the parent element so that
+      // the former doesn't go off screen.
+      return sortedPositions[0] || position;
+    };
+
+    clearPosition(container);
+
+    if (customPosition) {
+      overridePosition();
+    }
+
+    let finalPosition = choosePosition();
+    if (finalPosition) {
+      positioners[finalPosition].position();
+      setArrowPosition(finalPosition);
+    }
+
+    container.classList.remove("hidden");
+  }
+
+  /** Expose top level functions expected by the aboutwelcome bundle. */
+  _setupWindowFunctions() {
+    if (this.AWSetup) {
+      return;
+    }
+
+    const handleActorMessage =
+      lazy.AboutWelcomeParent.prototype.onContentMessage.bind({});
+    const getActionHandler = name => data =>
+      handleActorMessage(`AWPage:${name}`, data, this.doc);
+
+    const telemetryMessageHandler = getActionHandler("TELEMETRY_EVENT");
+    const AWSendEventTelemetry = data => {
+      if (this.config?.metrics !== "block") {
+        return telemetryMessageHandler(data);
+      }
+      return null;
+    };
+    this._windowFuncs = {
+      AWGetFeatureConfig: () => this.config,
+      AWGetSelectedTheme: getActionHandler("GET_SELECTED_THEME"),
+      // Do not send telemetry if message config sets metrics as 'block'.
+      AWSendEventTelemetry,
+      AWSendToDeviceEmailsSupported: getActionHandler(
+        "SEND_TO_DEVICE_EMAILS_SUPPORTED"
+      ),
+      AWSendToParent: (name, data) => getActionHandler(name)(data),
+      AWFinish: () => this.endTour(),
+      AWEvaluateScreenTargeting: getActionHandler("EVALUATE_SCREEN_TARGETING"),
+    };
+    for (const [name, func] of Object.entries(this._windowFuncs)) {
+      this.win[name] = func;
+    }
+
+    this.AWSetup = true;
+  }
+
+  /** Clean up the functions defined above. */
+  _clearWindowFunctions() {
+    if (this.AWSetup) {
+      this.AWSetup = false;
+
+      for (const name of Object.keys(this._windowFuncs)) {
+        delete this.win[name];
+      }
+    }
+  }
+
+  /**
+   * Emit an event to the broker, if one is present.
+   * @param {String} name
+   * @param {any} data
+   */
+  _emitEvent(name, data) {
+    this.listener?.(this.win, name, data);
+  }
+
+  endTour(skipFadeOut = false) {
+    // We don't want focus events that happen during teardown to affect
+    // this.savedFocus
+    this.win.removeEventListener("focus", this, {
+      capture: true,
+      passive: true,
+    });
+    this.win.removeEventListener("keypress", this, { capture: true });
+    this._pageEventManager?.emit({
+      type: "tourend",
+      target: this._container,
+    });
+    this._container?.removeEventListener("popuphiding", this);
+    this._pageEventManager?.clear();
+
+    // Delete almost everything to get this ready to show a different message.
+    this.teardownFeatureTourProgress();
+    this.pref = null;
+    this.ready = false;
+    this.message = null;
+    this.content = null;
+    this.currentScreen = null;
+    // wait for fade out transition
+    this._container?.classList.toggle(
+      "hidden",
+      this._container?.localName !== "panel"
+    );
+    this._clearWindowFunctions();
+    const onFadeOut = () => {
+      this._container?.remove();
+      this.renderObserver?.disconnect();
+      this._removePositionListeners();
+      this._removePanelConflictListeners();
+      this.doc.querySelector(`[src="${BUNDLE_SRC}"]`)?.remove();
+      // Put the focus back to the last place the user focused outside of the
+      // featureCallout windows.
+      if (this.savedFocus) {
+        this.savedFocus.element.focus({
+          focusVisible: this.savedFocus.focusVisible,
+        });
+      }
+      this.savedFocus = null;
+      this._emitEvent("end");
+    };
+    if (this._container?.localName === "panel") {
+      this._container.addEventListener("popuphidden", onFadeOut, {
+        once: true,
+      });
+      this._container.hidePopup(!skipFadeOut);
+    } else if (this._container) {
+      this.win.setTimeout(onFadeOut, skipFadeOut ? 0 : TRANSITION_MS);
+    } else {
+      onFadeOut();
+    }
+  }
+
+  _dismiss() {
+    let action = this.currentScreen?.content.dismiss_button?.action;
+    if (action?.type) {
+      this.win.AWSendToParent("SPECIAL_ACTION", action);
+      if (!action.dismiss) {
+        return;
+      }
+    }
+    this.endTour();
+  }
+
+  async _addScriptsAndRender() {
+    const reactSrc = "resource://activity-stream/vendor/react.js";
+    const domSrc = "resource://activity-stream/vendor/react-dom.js";
+    // Add React script
+    const getReactReady = () => {
+      return new Promise(resolve => {
+        let reactScript = this.doc.createElement("script");
+        reactScript.src = reactSrc;
+        this.doc.head.appendChild(reactScript);
+        reactScript.addEventListener("load", resolve);
+      });
+    };
+    // Add ReactDom script
+    const getDomReady = () => {
+      return new Promise(resolve => {
+        let domScript = this.doc.createElement("script");
+        domScript.src = domSrc;
+        this.doc.head.appendChild(domScript);
+        domScript.addEventListener("load", resolve);
+      });
+    };
+    // Load React, then React Dom
+    if (!this.doc.querySelector(`[src="${reactSrc}"]`)) {
+      await getReactReady();
+    }
+    if (!this.doc.querySelector(`[src="${domSrc}"]`)) {
+      await getDomReady();
+    }
+    // Load the bundle to render the content as configured.
+    this.doc.querySelector(`[src="${BUNDLE_SRC}"]`)?.remove();
+    let bundleScript = this.doc.createElement("script");
+    bundleScript.src = BUNDLE_SRC;
+    this.doc.head.appendChild(bundleScript);
+  }
+
+  _observeRender(container) {
+    this.renderObserver?.observe(container, { childList: true });
+  }
+
+  /**
+   * Update the internal config with a new message. If a message is not
+   * provided, try requesting one from ASRouter. The message content is stored
+   * in this.config, which is returned by AWGetFeatureConfig. The aboutwelcome
+   * bundle will use that function to get the content when it executes.
+   * @param {Object} [message] ASRouter message. Omit to request a new one.
+   * @returns {Promise<boolean>} true if a message is loaded, false if not.
+   */
+  async _updateConfig(message) {
+    if (this.loadingConfig) {
+      return false;
+    }
+
+    this.message = message || (await this._loadConfig());
+
+    switch (this.message.template) {
+      case "feature_callout":
+        break;
+      case "spotlight":
+        // Special handling for spotlight messages, which can be configured as a
+        // kind of introduction to a feature tour.
+        this.currentScreen = "spotlight";
+      // fall through
+      default:
+        return false;
+    }
+
+    this.config = this.message.content;
+
+    // Set the default start screen.
+    let newScreen = this.config?.screens?.[this.config?.startScreen || 0];
+    // If we have a feature tour in progress, try to set the start screen to
+    // whichever screen is configured in the feature tour pref.
+    if (
+      this.config.screens &&
+      this.config?.tour_pref_name &&
+      this.config.tour_pref_name === this.pref?.name &&
+      this.featureTourProgress
+    ) {
+      const newIndex = this.config.screens.findIndex(
+        screen => screen.id === this.featureTourProgress.screen
+      );
+      if (newIndex !== -1) {
+        newScreen = this.config.screens[newIndex];
+        if (newScreen?.id !== this.currentScreen?.id) {
+          // This is how we tell the bundle to render the correct screen.
+          this.config.startScreen = newIndex;
+        }
+      }
+    }
+    if (newScreen?.id === this.currentScreen?.id) {
+      return false;
+    }
+
+    this.currentScreen = newScreen;
+    return true;
+  }
+
+  /**
+   * Request a message from ASRouter, targeting the `browser` and `page` values
+   * passed to the constructor.
+   * @returns {Promise<Object>} the requested message.
+   */
+  async _loadConfig() {
+    this.loadingConfig = true;
+    await lazy.ASRouter.waitForInitialized;
+    let result = await lazy.ASRouter.sendTriggerMessage({
+      browser: this.browser,
+      // triggerId and triggerContext
+      id: "featureCalloutCheck",
+      context: { source: this.location },
+    });
+    this.loadingConfig = false;
+    return result.message;
+  }
+
+  /**
+   * Try to render the callout in the current document.
+   * @returns {Promise<Boolean>} whether the callout was rendered.
+   */
+  async _renderCallout() {
+    this._setupWindowFunctions();
+    await this._addCalloutLinkElements();
+    let container = this._createContainer();
+    if (container) {
+      // This results in rendering the Feature Callout
+      await this._addScriptsAndRender();
+      this._observeRender(container.querySelector(`#${CONTENT_BOX_ID}`));
+      if (container.localName === "div") {
+        this._addPositionListeners();
+      }
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * For each member of the screen's page_event_listeners array, add a listener.
+   * @param {Array<PageEventListenerConfig>} listeners
+   *
+   * @typedef {Object} PageEventListenerConfig
+   * @property {PageEventListenerParams} params Event listener parameters
+   * @property {PageEventListenerAction} action Sent when the event fires
+   *
+   * @typedef {Object} PageEventListenerParams See PageEventManager.sys.mjs
+   * @property {String} type Event type string e.g. `click`
+   * @property {String} [selectors] Target selector, e.g. `tag.class, #id[attr]`
+   * @property {PageEventListenerOptions} [options] addEventListener options
+   *
+   * @typedef {Object} PageEventListenerOptions
+   * @property {Boolean} [capture] Use event capturing phase?
+   * @property {Boolean} [once] Remove listener after first event?
+   * @property {Boolean} [preventDefault] Prevent default action?
+   * @property {Number} [interval] Used only for `timeout` and `interval` event
+   *   types. These don't set up real event listeners, but instead invoke the
+   *   action on a timer.
+   *
+   * @typedef {Object} PageEventListenerAction Action sent to AboutWelcomeParent
+   * @property {String} [type] Action type, e.g. `OPEN_URL`
+   * @property {Object} [data] Extra data, properties depend on action type
+   * @property {Boolean} [dismiss] Dismiss screen after performing action?
+   * @property {Boolean} [reposition] Reposition screen after performing action?
+   */
+  _attachPageEventListeners(listeners) {
+    listeners?.forEach(({ params, action }) =>
+      this._loadPageEventManager[params.options?.once ? "once" : "on"](
+        params,
+        event => {
+          this._handlePageEventAction(action, event);
+          if (params.options?.preventDefault) {
+            event.preventDefault?.();
+          }
+        }
+      )
+    );
+  }
+
+  /**
+   * Perform an action in response to a page event.
+   * @param {PageEventListenerAction} action
+   * @param {Event} event Triggering event
+   */
+  _handlePageEventAction(action, event) {
+    const page = this.location;
+    const message_id = this.config?.id.toUpperCase();
+    const source =
+      typeof event.target === "string"
+        ? event.target
+        : this._getUniqueElementIdentifier(event.target);
+    if (action.type) {
+      this.win.AWSendEventTelemetry?.({
+        event: "PAGE_EVENT",
+        event_context: {
+          action: action.type,
+          reason: event.type?.toUpperCase(),
+          source,
+          page,
+        },
+        message_id,
+      });
+      this.win.AWSendToParent("SPECIAL_ACTION", action);
+    }
+    if (action.dismiss) {
+      this.win.AWSendEventTelemetry?.({
+        event: "DISMISS",
+        event_context: { source: `PAGE_EVENT:${source}`, page },
+        message_id,
+      });
+      this._dismiss();
+    }
+    if (action.reposition) {
+      this.win.requestAnimationFrame(() => this._positionCallout());
+    }
+  }
+
+  /**
+   * For a given element, calculate a unique string that identifies it.
+   * @param {Element} target Element to calculate the selector for
+   * @returns {String} Computed event target selector, e.g. `button#next`
+   */
+  _getUniqueElementIdentifier(target) {
+    let source;
+    if (Element.isInstance(target)) {
+      source = target.localName;
+      if (target.className) {
+        source += `.${[...target.classList].join(".")}`;
+      }
+      if (target.id) {
+        source += `#${target.id}`;
+      }
+      if (target.attributes.length) {
+        source += `${[...target.attributes]
+          .filter(attr => ["is", "role", "open"].includes(attr.name))
+          .map(attr => `[${attr.name}="${attr.value}"]`)
+          .join("")}`;
+      }
+      if (this.doc.querySelectorAll(source).length > 1) {
+        let uniqueAncestor = target.closest(`[id]:not(:scope, :root, body)`);
+        if (uniqueAncestor) {
+          source = `${this._getUniqueElementIdentifier(
+            uniqueAncestor
+          )} > ${source}`;
+        }
+      }
+    }
+    return source;
+  }
+
+  /**
+   * Get the element that should be initially focused. Prioritize the primary
+   * button, then the secondary button, then any additional button, excluding
+   * pseudo-links and the dismiss button. If no button is found, focus the first
+   * input element. If no affirmative action is found, focus the first button,
+   * which is probably the dismiss button. If no button is found, focus the
+   * container itself.
+   * @returns {Element|null} The element to focus when the callout is shown.
+   */
+  getInitialFocus() {
+    if (!this._container) {
+      return null;
+    }
+    return (
+      this._container.querySelector(
+        ".primary:not(:disabled, [hidden], .text-link, .cta-link, .split-button)"
+      ) ||
+      this._container.querySelector(
+        ".secondary:not(:disabled, [hidden], .text-link, .cta-link, .split-button)"
+      ) ||
+      this._container.querySelector(
+        "button:not(:disabled, [hidden], .text-link, .cta-link, .dismiss-button, .split-button)"
+      ) ||
+      this._container.querySelector("input:not(:disabled, [hidden])") ||
+      this._container.querySelector(
+        "button:not(:disabled, [hidden], .text-link, .cta-link)"
+      ) ||
+      this._container
+    );
+  }
+
+  /**
+   * Show a feature callout message, either by requesting one from ASRouter or
+   * by showing a message passed as an argument.
+   * @param {Object} [message] optional message to show instead of requesting one
+   * @returns {Promise<Boolean>} true if a message was shown
+   */
+  async showFeatureCallout(message) {
+    let updated = await this._updateConfig(message);
+
+    if (!updated || !this.config?.screens?.length) {
+      return !!this.currentScreen;
+    }
+
+    if (!this.renderObserver) {
+      this.renderObserver = new this.win.MutationObserver(() => {
+        // Check if the Feature Callout screen has loaded for the first time
+        if (!this.ready && this._container.querySelector(".screen")) {
+          const onRender = () => {
+            this.ready = true;
+            this._pageEventManager?.clear();
+            this._attachPageEventListeners(
+              this.currentScreen?.content?.page_event_listeners
+            );
+            this.getInitialFocus()?.focus();
+            this.win.addEventListener("keypress", this, { capture: true });
+            if (this._container.localName === "div") {
+              this.win.addEventListener("focus", this, {
+                capture: true, // get the event before retargeting
+                passive: true,
+              });
+              this._positionCallout();
+            } else {
+              this._container.classList.remove("hidden");
+            }
+          };
+          if (
+            this._container.localName === "div" &&
+            this.doc.activeElement &&
+            !this.savedFocus
+          ) {
+            let element = this.doc.activeElement;
+            this.savedFocus = {
+              element,
+              focusVisible: element.matches(":focus-visible"),
+            };
+          }
+          // Once the screen element is added to the DOM, wait for the
+          // animation frame after next to ensure that _positionCallout
+          // has access to the rendered screen with the correct height
+          if (this._container.localName === "div") {
+            this.win.requestAnimationFrame(() => {
+              this.win.requestAnimationFrame(onRender);
+            });
+          } else if (this._container.localName === "panel") {
+            const anchor = this._getAnchor();
+            if (!anchor) {
+              this.endTour();
+              return;
+            }
+            const position = anchor.panel_position_string;
+            this._container.addEventListener("popupshown", onRender, {
+              once: true,
+            });
+            this._container.addEventListener("popuphiding", this);
+            this._addPanelConflictListeners();
+            this._container.openPopup(anchor.element, { position });
+          }
+        }
+      });
+    }
+
+    this._pageEventManager?.clear();
+    this.ready = false;
+    this._container?.remove();
+    this.renderObserver?.disconnect();
+
+    if (!this.cfrFeaturesUserPref) {
+      this.endTour();
+      return false;
+    }
+
+    let rendering = (await this._renderCallout()) && !!this.currentScreen;
+    if (!rendering) {
+      this.endTour();
+    }
+
+    if (this.message.template) {
+      lazy.ASRouter.addImpression(this.message);
+    }
+    return rendering;
+  }
+
+  /**
+   * @typedef {Object} FeatureCalloutTheme An object with a set of custom color
+   *   schemes and/or a preset key. If both are provided, the preset will be
+   *   applied first, then the custom themes will override the preset values.
+   * @property {String} [preset] Key of {@link FeatureCallout.themePresets}
+   * @property {ColorScheme} [light] Custom light scheme
+   * @property {ColorScheme} [dark] Custom dark scheme
+   * @property {ColorScheme} [hcm] Custom high contrast scheme
+   * @property {ColorScheme} [all] Custom scheme that will be applied in all
+   *   cases, but overridden by the other schemes if they are present. This is
+   *   useful if the values are already controlled by the browser theme.
+   * @property {Boolean} [simulateContent] Set to true if the feature callout
+   *   exists in the browser chrome but is meant to be displayed over the
+   *   content area to appear as if it is part of the page. This will cause the
+   *   styles to use a media query targeting the content instead of the chrome,
+   *   so that if the browser theme doesn't match the content color scheme, the
+   *   callout will correctly follow the content scheme. This is currently used
+   *   for the feature callouts displayed over the PDF.js viewer.
+   */
+
+  /**
+   * @typedef {Object} ColorScheme An object with key-value pairs, with keys
+   *   from {@link FeatureCallout.themePropNames}, mapped to CSS color values
+   */
+
+  /**
+   * Combine the preset and custom themes into a single object and store it.
+   * @param {FeatureCalloutTheme} theme
+   */
+  _initTheme(theme) {
+    /** @type {FeatureCalloutTheme} */
+    this.theme = Object.assign(
+      {},
+      FeatureCallout.themePresets[theme.preset],
+      theme
+    );
+  }
+
+  /**
+   * Apply all the theme colors to the feature callout's root element as CSS
+   * custom properties in inline styles. These custom properties are consumed by
+   * _feature-callout-theme.scss, which is bundled with the other styles that
+   * are loaded by {@link FeatureCallout.prototype._addCalloutLinkElements}.
+   */
+  _applyTheme() {
+    if (this._container) {
+      // This tells the stylesheets to use -moz-content-prefers-color-scheme
+      // instead of prefers-color-scheme, in order to follow the content color
+      // scheme instead of the chrome color scheme, in case of a mismatch when
+      // the feature callout exists in the chrome but is meant to look like it's
+      // part of the content of a page in a browser tab (like PDF.js).
+      this._container.classList.toggle(
+        "simulateContent",
+        !!this.theme.simulateContent
+      );
+      for (const type of ["light", "dark", "hcm"]) {
+        const scheme = this.theme[type];
+        for (const name of FeatureCallout.themePropNames) {
+          this._setThemeVariable(
+            `--fc-${name}-${type}`,
+            scheme?.[name] || this.theme.all?.[name]
+          );
+        }
+      }
+    }
+  }
+
+  /**
+   * Set or remove a CSS custom property on the feature callout container
+   * @param {String} name Name of the CSS custom property
+   * @param {String|void} [value] Value of the property, or omit to remove it
+   */
+  _setThemeVariable(name, value) {
+    if (value) {
+      this._container.style.setProperty(name, value);
+    } else {
+      this._container.style.removeProperty(name);
+    }
+  }
+
+  /** A list of all the theme properties that can be set */
+  static themePropNames = [
+    "background",
+    "color",
+    "border",
+    "accent-color",
+    "button-background",
+    "button-color",
+    "button-border",
+    "button-background-hover",
+    "button-color-hover",
+    "button-border-hover",
+    "button-background-active",
+    "button-color-active",
+    "button-border-active",
+    "primary-button-background",
+    "primary-button-color",
+    "primary-button-border",
+    "primary-button-background-hover",
+    "primary-button-color-hover",
+    "primary-button-border-hover",
+    "primary-button-background-active",
+    "primary-button-color-active",
+    "primary-button-border-active",
+    "link-color",
+    "link-color-hover",
+    "link-color-active",
+  ];
+
+  /** @type {Object<String, FeatureCalloutTheme>} */
+  static themePresets = {
+    // For themed system pages like New Tab and Firefox View. Themed content
+    // colors inherit from the user's theme through contentTheme.js.
+    "themed-content": {
+      all: {
+        background: "var(--newtab-background-color-secondary)",
+        color: "var(--newtab-text-primary-color, var(--in-content-page-color))",
+        border:
+          "color-mix(in srgb, var(--newtab-background-color-secondary) 80%, #000)",
+        "accent-color": "var(--in-content-primary-button-background)",
+        "button-background": "color-mix(in srgb, transparent 93%, #000)",
+        "button-color":
+          "var(--newtab-text-primary-color, var(--in-content-page-color))",
+        "button-border": "transparent",
+        "button-background-hover": "color-mix(in srgb, transparent 88%, #000)",
+        "button-color-hover":
+          "var(--newtab-text-primary-color, var(--in-content-page-color))",
+        "button-border-hover": "transparent",
+        "button-background-active": "color-mix(in srgb, transparent 80%, #000)",
+        "button-color-active":
+          "var(--newtab-text-primary-color, var(--in-content-page-color))",
+        "button-border-active": "transparent",
+        "primary-button-background":
+          "var(--in-content-primary-button-background)",
+        "primary-button-color": "var(--in-content-primary-button-text-color)",
+        "primary-button-border":
+          "var(--in-content-primary-button-border-color)",
+        "primary-button-background-hover":
+          "var(--in-content-primary-button-background-hover)",
+        "primary-button-color-hover":
+          "var(--in-content-primary-button-text-color-hover)",
+        "primary-button-border-hover":
+          "var(--in-content-primary-button-border-hover)",
+        "primary-button-background-active":
+          "var(--in-content-primary-button-background-active)",
+        "primary-button-color-active":
+          "var(--in-content-primary-button-text-color-active)",
+        "primary-button-border-active":
+          "var(--in-content-primary-button-border-active)",
+        "link-color": "LinkText",
+        "link-color-hover": "LinkText",
+        "link-color-active": "ActiveText",
+        "link-color-visited": "VisitedText",
+      },
+      dark: {
+        border:
+          "color-mix(in srgb, var(--newtab-background-color-secondary) 80%, #FFF)",
+        "button-background": "color-mix(in srgb, transparent 80%, #000)",
+        "button-background-hover": "color-mix(in srgb, transparent 65%, #000)",
+        "button-background-active": "color-mix(in srgb, transparent 55%, #000)",
+      },
+      hcm: {
+        background: "-moz-dialog",
+        color: "-moz-dialogtext",
+        border: "-moz-dialogtext",
+        "accent-color": "LinkText",
+        "button-background": "ButtonFace",
+        "button-color": "ButtonText",
+        "button-border": "ButtonText",
+        "button-background-hover": "ButtonText",
+        "button-color-hover": "ButtonFace",
+        "button-border-hover": "ButtonText",
+        "button-background-active": "ButtonText",
+        "button-color-active": "ButtonFace",
+        "button-border-active": "ButtonText",
+      },
+    },
+    // PDF.js colors are from toolkit/components/pdfjs/content/web/viewer.css
+    pdfjs: {
+      all: {
+        background: "#FFF",
+        color: "rgb(12, 12, 13)",
+        border: "#CFCFD8",
+        "accent-color": "#0A84FF",
+        "button-background": "rgb(215, 215, 219)",
+        "button-color": "rgb(12, 12, 13)",
+        "button-border": "transparent",
+        "button-background-hover": "rgb(221, 222, 223)",
+        "button-color-hover": "rgb(12, 12, 13)",
+        "button-border-hover": "transparent",
+        "button-background-active": "rgb(221, 222, 223)",
+        "button-color-active": "rgb(12, 12, 13)",
+        "button-border-active": "transparent",
+        // use default primary button colors in _feature-callout-theme.scss
+        "link-color": "LinkText",
+        "link-color-hover": "LinkText",
+        "link-color-active": "ActiveText",
+        "link-color-visited": "VisitedText",
+      },
+      dark: {
+        background: "#1C1B22",
+        color: "#F9F9FA",
+        border: "#3A3944",
+        "button-background": "rgb(74, 74, 79)",
+        "button-color": "#F9F9FA",
+        "button-background-hover": "rgb(102, 102, 103)",
+        "button-color-hover": "#F9F9FA",
+        "button-background-active": "rgb(102, 102, 103)",
+        "button-color-active": "#F9F9FA",
+      },
+      hcm: {
+        background: "-moz-dialog",
+        color: "-moz-dialogtext",
+        border: "CanvasText",
+        "accent-color": "Highlight",
+        "button-background": "ButtonFace",
+        "button-color": "ButtonText",
+        "button-border": "ButtonText",
+        "button-background-hover": "Highlight",
+        "button-color-hover": "CanvasText",
+        "button-border-hover": "Highlight",
+        "button-background-active": "Highlight",
+        "button-color-active": "CanvasText",
+        "button-border-active": "Highlight",
+      },
+    },
+    newtab: {
+      all: {
+        background: "var(--newtab-background-color-secondary, #FFF)",
+        color: "var(--newtab-text-primary-color, WindowText)",
+        border:
+          "color-mix(in srgb, var(--newtab-background-color-secondary, #FFF) 80%, #000)",
+        "accent-color": "#0061e0",
+        "button-background": "color-mix(in srgb, transparent 93%, #000)",
+        "button-color": "var(--newtab-text-primary-color, WindowText)",
+        "button-border": "transparent",
+        "button-background-hover": "color-mix(in srgb, transparent 88%, #000)",
+        "button-color-hover": "var(--newtab-text-primary-color, WindowText)",
+        "button-border-hover": "transparent",
+        "button-background-active": "color-mix(in srgb, transparent 80%, #000)",
+        "button-color-active": "var(--newtab-text-primary-color, WindowText)",
+        "button-border-active": "transparent",
+        // use default primary button colors in _feature-callout-theme.scss
+        "link-color": "rgb(0, 97, 224)",
+        "link-color-hover": "rgb(0, 97, 224)",
+        "link-color-active": "color-mix(in srgb, rgb(0, 97, 224) 80%, #000)",
+        "link-color-visited": "rgb(0, 97, 224)",
+      },
+      dark: {
+        "accent-color": "rgb(0, 221, 255)",
+        background: "var(--newtab-background-color-secondary, #42414D)",
+        border:
+          "color-mix(in srgb, var(--newtab-background-color-secondary, #42414D) 80%, #FFF)",
+        "button-background": "color-mix(in srgb, transparent 80%, #000)",
+        "button-background-hover": "color-mix(in srgb, transparent 65%, #000)",
+        "button-background-active": "color-mix(in srgb, transparent 55%, #000)",
+        "link-color": "rgb(0, 221, 255)",
+        "link-color-hover": "rgb(0,221,255)",
+        "link-color-active": "color-mix(in srgb, rgb(0, 221, 255) 60%, #FFF)",
+        "link-color-visited": "rgb(0, 221, 255)",
+      },
+      hcm: {
+        background: "-moz-dialog",
+        color: "-moz-dialogtext",
+        border: "-moz-dialogtext",
+        "accent-color": "SelectedItem",
+        "button-background": "ButtonFace",
+        "button-color": "ButtonText",
+        "button-border": "ButtonText",
+        "button-background-hover": "ButtonText",
+        "button-color-hover": "ButtonFace",
+        "button-border-hover": "ButtonText",
+        "button-background-active": "ButtonText",
+        "button-color-active": "ButtonFace",
+        "button-border-active": "ButtonText",
+        "link-color": "LinkText",
+        "link-color-hover": "LinkText",
+        "link-color-active": "ActiveText",
+        "link-color-visited": "VisitedText",
+      },
+    },
+    // These colors are intended to inherit the user's theme properties from the
+    // main chrome window, for callouts to be anchored to chrome elements.
+    // Specific schemes aren't necessary since the theme and frontend
+    // stylesheets handle these variables' values.
+    chrome: {
+      all: {
+        background: "var(--arrowpanel-background)",
+        color: "var(--arrowpanel-color)",
+        border: "var(--arrowpanel-border-color)",
+        "accent-color": "var(--focus-outline-color)",
+        "button-background": "var(--button-bgcolor)",
+        "button-color": "var(--button-color)",
+        "button-border": "transparent",
+        "button-background-hover": "var(--button-hover-bgcolor)",
+        "button-color-hover": "var(--button-color)",
+        "button-border-hover": "transparent",
+        "button-background-active": "var(--button-active-bgcolor)",
+        "button-color-active": "var(--button-color)",
+        "button-border-active": "transparent",
+        "primary-button-background": "var(--button-primary-bgcolor)",
+        "primary-button-color": "var(--button-primary-color)",
+        "primary-button-border": "transparent",
+        "primary-button-background-hover":
+          "var(--button-primary-hover-bgcolor)",
+        "primary-button-color-hover": "var(--button-primary-color)",
+        "primary-button-border-hover": "transparent",
+        "primary-button-background-active":
+          "var(--button-primary-active-bgcolor)",
+        "primary-button-color-active": "var(--button-primary-color)",
+        "primary-button-border-active": "transparent",
+        "link-color": "LinkText",
+        "link-color-hover": "LinkText",
+        "link-color-active": "ActiveText",
+        "link-color-visited": "VisitedText",
+      },
+    },
+  };
+}
diff --git a/browser/components/asrouter/modules/FeatureCalloutBroker.sys.mjs b/browser/components/asrouter/modules/FeatureCalloutBroker.sys.mjs
new file mode 100644
index 0000000000..7ede6c9bf8
--- /dev/null
+++ b/browser/components/asrouter/modules/FeatureCalloutBroker.sys.mjs
@@ -0,0 +1,215 @@
+/* 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/. */
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  FeatureCallout: "resource:///modules/asrouter/FeatureCallout.sys.mjs",
+});
+
+/**
+ * @typedef {Object} FeatureCalloutOptions
+ * @property {Window} win window in which messages will be rendered.
+ * @property {{name: String, defaultValue?: String}} [pref] optional pref used
+ *   to track progress through a given feature tour. for example:
+ *   {
+ *     name: "browser.pdfjs.feature-tour",
+ *     defaultValue: '{ screen: "FEATURE_CALLOUT_1", complete: false }',
+ *   }
+ *   or { name: "browser.pdfjs.feature-tour" } (defaultValue is optional)
+ * @property {String} [location] string to pass as the page when requesting
+ *   messages from ASRouter and sending telemetry.
+ * @property {MozBrowser} [browser] <browser> element responsible for the
+ *   feature callout. for content pages, this is the browser element that the
+ *   callout is being shown in. for chrome, this is the active browser.
+ * @property {Function} [cleanup] callback to be invoked when the callout is
+ *   removed or the window is unloaded.
+ * @property {FeatureCalloutTheme} [theme] optional dynamic color theme.
+ */
+
+/** @typedef {import("resource:///modules/asrouter/FeatureCallout.sys.mjs").FeatureCalloutTheme} FeatureCalloutTheme */
+
+/**
+ * @typedef {Object} FeatureCalloutItem
+ * @property {lazy.FeatureCallout} callout instance of FeatureCallout.
+ * @property {Function} [cleanup] cleanup callback.
+ * @property {Boolean} showing whether the callout is currently showing.
+ */
+
+export class _FeatureCalloutBroker {
+  /**
+   * Make a new FeatureCallout instance and store it in the callout map. Also
+   * add an unload listener to the window to clean up the callout when the
+   * window is unloaded.
+   * @param {FeatureCalloutOptions} config
+   */
+  makeFeatureCallout(config) {
+    const { win, pref, location, browser, theme } = config;
+    // Use an AbortController to clean up the unload listener in case the
+    // callout is cleaned up before the window is unloaded.
+    const controller = new AbortController();
+    const cleanup = () => {
+      this.#calloutMap.delete(win);
+      controller.abort();
+      config.cleanup?.();
+    };
+    this.#calloutMap.set(win, {
+      callout: new lazy.FeatureCallout({
+        win,
+        pref,
+        location,
+        context: "chrome",
+        browser,
+        listener: this.handleFeatureCalloutCallback.bind(this),
+        theme,
+      }),
+      cleanup,
+      showing: false,
+    });
+    win.addEventListener("unload", cleanup, { signal: controller.signal });
+  }
+
+  /**
+   * Show a feature callout message. For use by ASRouter, to be invoked when a
+   * trigger has matched to a feature_callout message.
+   * @param {MozBrowser} browser <browser> element associated with the trigger.
+   * @param {Object} message feature_callout message from ASRouter.
+   *   @see {@link FeatureCalloutMessages.sys.mjs}
+   * @returns {Promise<Boolean>} whether the callout was shown.
+   */
+  async showFeatureCallout(browser, message) {
+    // Only show one callout at a time, across all windows.
+    if (this.isCalloutShowing) {
+      return false;
+    }
+    const win = browser.ownerGlobal;
+    // Avoid showing feature callouts if a dialog or panel is showing.
+    if (
+      win.gDialogBox?.dialog ||
+      [...win.document.querySelectorAll("panel")].some(p => p.state === "open")
+    ) {
+      return false;
+    }
+    const currentCallout = this.#calloutMap.get(win);
+    // If a custom callout was previously showing, but is no longer showing,
+    // tear down the FeatureCallout instance. We avoid tearing them down when
+    // they stop showing because they may be shown again, and we want to avoid
+    // the overhead of creating a new FeatureCallout instance. But the custom
+    // callout instance may be incompatible with the new ASRouter message, so
+    // we tear it down and create a new one.
+    if (currentCallout && currentCallout.callout.location !== "chrome") {
+      currentCallout.cleanup();
+    }
+    let item = this.#calloutMap.get(win);
+    let callout = item?.callout;
+    if (item) {
+      // If a callout previously showed in this instance, but the new message's
+      // tour_pref_name is different, update the old instance's tour properties.
+      callout.teardownFeatureTourProgress();
+      if (message.content.tour_pref_name) {
+        callout.pref = {
+          name: message.content.tour_pref_name,
+          defaultValue: message.content.tour_pref_default_value,
+        };
+        callout.setupFeatureTourProgress();
+      } else {
+        callout.pref = null;
+      }
+    } else {
+      const options = {
+        win,
+        location: "chrome",
+        browser,
+        theme: { preset: "chrome" },
+      };
+      if (message.content.tour_pref_name) {
+        options.pref = {
+          name: message.content.tour_pref_name,
+          defaultValue: message.content.tour_pref_default_value,
+        };
+      }
+      this.makeFeatureCallout(options);
+      item = this.#calloutMap.get(win);
+      callout = item.callout;
+    }
+    // Set this to true for now so that we can't be interrupted by another
+    // invocation. We'll set it to false below if it ended up not showing.
+    item.showing = true;
+    item.showing = await callout.showFeatureCallout(message).catch(() => {
+      item.cleanup();
+      return false;
+    });
+    return item.showing;
+  }
+
+  /**
+   * Make a new FeatureCallout instance specific to a special location, tearing
+   * down the existing generic FeatureCallout if it exists, and (if no message
+   * is passed) requesting a feature callout message to show. Does nothing if a
+   * callout is already in progress. This allows the PDF.js feature tour, which
+   * simulates content, to be shown in the chrome window without interfering
+   * with chrome feature callouts.
+   * @param {FeatureCalloutOptions} config
+   * @param {Object} message feature_callout message from ASRouter.
+   *   @see {@link FeatureCalloutMessages.sys.mjs}
+   * @returns {FeatureCalloutItem|null} the callout item, if one was created.
+   */
+  showCustomFeatureCallout(config, message) {
+    if (this.isCalloutShowing) {
+      return null;
+    }
+    const { win, pref, location } = config;
+    const currentCallout = this.#calloutMap.get(win);
+    if (currentCallout && currentCallout.location !== location) {
+      currentCallout.cleanup();
+    }
+    let item = this.#calloutMap.get(win);
+    let callout = item?.callout;
+    if (item) {
+      callout.teardownFeatureTourProgress();
+      callout.pref = pref;
+      if (pref) {
+        callout.setupFeatureTourProgress();
+      }
+    } else {
+      this.makeFeatureCallout(config);
+      item = this.#calloutMap.get(win);
+      callout = item.callout;
+    }
+    item.showing = true;
+    // In this case, callers are not necessarily async, so we don't await.
+    callout
+      .showFeatureCallout(message)
+      .then(showing => {
+        item.showing = showing;
+      })
+      .catch(() => {
+        item.cleanup();
+        item.showing = false;
+      });
+    /** @type {FeatureCalloutItem} */
+    return item;
+  }
+
+  handleFeatureCalloutCallback(win, event, data) {
+    switch (event) {
+      case "end":
+        const item = this.#calloutMap.get(win);
+        if (item) {
+          item.showing = false;
+        }
+        break;
+    }
+  }
+
+  /** @returns {Boolean} whether a callout is currently showing. */
+  get isCalloutShowing() {
+    return [...this.#calloutMap.values()].some(({ showing }) => showing);
+  }
+
+  /** @type {Map<Window, FeatureCalloutItem>} */
+  #calloutMap = new Map();
+}
+
+export const FeatureCalloutBroker = new _FeatureCalloutBroker();
diff --git a/browser/components/asrouter/modules/FeatureCalloutMessages.sys.mjs b/browser/components/asrouter/modules/FeatureCalloutMessages.sys.mjs
new file mode 100644
index 0000000000..38c9a8d848
--- /dev/null
+++ b/browser/components/asrouter/modules/FeatureCalloutMessages.sys.mjs
@@ -0,0 +1,1299 @@
+/* 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/. */
+
+// Eventually, make this a messaging system
+// provider instead of adding these message
+// into OnboardingMessageProvider.sys.mjs
+const FIREFOX_VIEW_PREF = "browser.firefox-view.feature-tour";
+const PDFJS_PREF = "browser.pdfjs.feature-tour";
+// Empty screens are included as placeholders to ensure step
+// indicator shows the correct number of total steps in the tour
+const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000;
+
+// Generate a JEXL targeting string based on the `complete` property being true
+// in a given Feature Callout tour progress preference value (which is JSON).
+const matchIncompleteTargeting = (prefName, defaultValue = false) => {
+  // regExpMatch() is a JEXL filter expression. Here we check if 'complete'
+  // exists in the pref's value, and returns true if the tour is incomplete.
+  const prefVal = `'${prefName}' | preferenceValue`;
+  // prefVal might be null if the preference doesn't exist. in this case, don't
+  // try to pipe into regExpMatch.
+  const completeMatch = `${prefVal} | regExpMatch('(?<=complete":)(.*)(?=})')`;
+  return `((${prefVal}) ? ((${completeMatch}) ? (${completeMatch}[1] != "true") : ${String(
+    defaultValue
+  )}) : ${String(defaultValue)})`;
+};
+
+// Generate a JEXL targeting string based on the current screen id found in a
+// given Feature Callout tour progress preference.
+const matchCurrentScreenTargeting = (prefName, screenIdRegEx = ".*") => {
+  // regExpMatch() is a JEXL filter expression. Here we check if 'screen' exists
+  // in the pref's value, and if it matches the screenIdRegEx. Returns
+  // null otherwise.
+  const prefVal = `'${prefName}' | preferenceValue`;
+  const screenMatch = `${prefVal} | regExpMatch('(?<=screen"\s*:)\s*"(${screenIdRegEx})(?="\s*,)')`;
+  const screenValMatches = `(${screenMatch}) ? !!(${screenMatch}[1]) : false`;
+  return `(${screenValMatches})`;
+};
+
+/**
+ * add24HourImpressionJEXLTargeting -
+ * Creates a "hasn't been viewed in > 24 hours"
+ * JEXL string and adds it to each message specified
+ *
+ * @param {array} messageIds - IDs of messages that the targeting string will be added to
+ * @param {string} prefix - The prefix of messageIDs that will used to create the JEXL string
+ * @param {array} messages - The array of messages that will be edited
+ * @returns {array} - The array of messages with the appropriate targeting strings edited
+ */
+function add24HourImpressionJEXLTargeting(
+  messageIds,
+  prefix,
+  uneditedMessages
+) {
+  let noImpressionsIn24HoursString = uneditedMessages
+    .filter(message => message.id.startsWith(prefix))
+    .map(
+      message =>
+        // If the last impression is null or if epoch time
+        // of the impression is < current time - 24hours worth of MS
+        `(messageImpressions.${message.id}[messageImpressions.${
+          message.id
+        } | length - 1] == null || messageImpressions.${
+          message.id
+        }[messageImpressions.${message.id} | length - 1] < ${
+          Date.now() - ONE_DAY_IN_MS
+        })`
+    )
+    .join(" && ");
+
+  // We're appending the string here instead of using
+  // template strings to avoid a recursion error from
+  // using the 'messages' variable within itself
+  return uneditedMessages.map(message => {
+    if (messageIds.includes(message.id)) {
+      message.targeting += `&& ${noImpressionsIn24HoursString}`;
+    }
+
+    return message;
+  });
+}
+
+// Exporting the about:firefoxview messages as a method here
+// acts as a safety guard against mutations of the original objects
+const MESSAGES = () => {
+  let messages = [
+    {
+      id: "FIREFOX_VIEW_SPOTLIGHT",
+      template: "spotlight",
+      content: {
+        id: "FIREFOX_VIEW_PROMO",
+        template: "multistage",
+        modal: "tab",
+        tour_pref_name: FIREFOX_VIEW_PREF,
+        screens: [
+          {
+            id: "DEFAULT_MODAL_UI",
+            content: {
+              title: {
+                fontSize: "32px",
+                fontWeight: 400,
+                string_id: "firefoxview-spotlight-promo-title",
+              },
+              subtitle: {
+                fontSize: "15px",
+                fontWeight: 400,
+                marginBlock: "10px",
+                marginInline: "40px",
+                string_id: "firefoxview-spotlight-promo-subtitle",
+              },
+              logo: { height: "48px" },
+              primary_button: {
+                label: {
+                  string_id: "firefoxview-spotlight-promo-primarybutton",
+                },
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: FIREFOX_VIEW_PREF,
+                      value: JSON.stringify({
+                        screen: "FEATURE_CALLOUT_1",
+                        complete: false,
+                      }),
+                    },
+                  },
+                  navigate: true,
+                },
+              },
+              secondary_button: {
+                label: {
+                  string_id: "firefoxview-spotlight-promo-secondarybutton",
+                },
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: FIREFOX_VIEW_PREF,
+                      value: JSON.stringify({
+                        screen: "",
+                        complete: true,
+                      }),
+                    },
+                  },
+                  navigate: true,
+                },
+              },
+            },
+          },
+        ],
+      },
+      priority: 3,
+      trigger: {
+        id: "featureCalloutCheck",
+      },
+      frequency: {
+        // Add the highest possible cap to ensure impressions are recorded while allowing the Spotlight to sync across windows/tabs with Firefox View open
+        lifetime: 100,
+      },
+      targeting: `!inMr2022Holdback && source == "about:firefoxview" &&
+       !'browser.newtabpage.activity-stream.asrouter.providers.cfr'|preferenceIsUserSet &&
+       'browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features'|preferenceValue &&
+       ${matchCurrentScreenTargeting(
+         FIREFOX_VIEW_PREF,
+         "FIREFOX_VIEW_SPOTLIGHT"
+       )} && ${matchIncompleteTargeting(FIREFOX_VIEW_PREF)}`,
+    },
+    {
+      id: "FIREFOX_VIEW_FEATURE_TOUR",
+      template: "feature_callout",
+      content: {
+        id: "FIREFOX_VIEW_FEATURE_TOUR",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        tour_pref_name: FIREFOX_VIEW_PREF,
+        screens: [
+          {
+            id: "FEATURE_CALLOUT_1",
+            anchors: [
+              {
+                selector: "#tab-pickup-container",
+                arrow_position: "top",
+              },
+            ],
+            content: {
+              position: "callout",
+              title: {
+                string_id: "callout-firefox-view-tab-pickup-title",
+              },
+              subtitle: {
+                string_id: "callout-firefox-view-tab-pickup-subtitle",
+              },
+              logo: {
+                imageURL: "chrome://browser/content/callout-tab-pickup.svg",
+                darkModeImageURL:
+                  "chrome://browser/content/callout-tab-pickup-dark.svg",
+                height: "128px",
+              },
+              primary_button: {
+                label: {
+                  string_id: "callout-primary-advance-button-label",
+                },
+                style: "secondary",
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: FIREFOX_VIEW_PREF,
+                      value: JSON.stringify({
+                        screen: "FEATURE_CALLOUT_2",
+                        complete: false,
+                      }),
+                    },
+                  },
+                },
+              },
+              dismiss_button: {
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: FIREFOX_VIEW_PREF,
+                      value: JSON.stringify({
+                        screen: "",
+                        complete: true,
+                      }),
+                    },
+                  },
+                },
+              },
+              page_event_listeners: [
+                {
+                  params: {
+                    type: "toggle",
+                    selectors: "#tab-pickup-container",
+                  },
+                  action: { reposition: true },
+                },
+              ],
+            },
+          },
+          {
+            id: "FEATURE_CALLOUT_2",
+            anchors: [
+              {
+                selector: "#recently-closed-tabs-container",
+                arrow_position: "bottom",
+              },
+            ],
+            content: {
+              position: "callout",
+              title: {
+                string_id: "callout-firefox-view-recently-closed-title",
+              },
+              subtitle: {
+                string_id: "callout-firefox-view-recently-closed-subtitle",
+              },
+              primary_button: {
+                label: {
+                  string_id: "callout-primary-complete-button-label",
+                },
+                style: "secondary",
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: FIREFOX_VIEW_PREF,
+                      value: JSON.stringify({
+                        screen: "",
+                        complete: true,
+                      }),
+                    },
+                  },
+                },
+              },
+              dismiss_button: {
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: FIREFOX_VIEW_PREF,
+                      value: JSON.stringify({
+                        screen: "",
+                        complete: true,
+                      }),
+                    },
+                  },
+                },
+              },
+              page_event_listeners: [
+                {
+                  params: {
+                    type: "toggle",
+                    selectors: "#recently-closed-tabs-container",
+                  },
+                  action: { reposition: true },
+                },
+              ],
+            },
+          },
+        ],
+      },
+      priority: 3,
+      targeting: `!inMr2022Holdback && source == "about:firefoxview" && ${matchCurrentScreenTargeting(
+        FIREFOX_VIEW_PREF,
+        "FEATURE_CALLOUT_[0-9]"
+      )} && ${matchIncompleteTargeting(FIREFOX_VIEW_PREF)}`,
+      trigger: { id: "featureCalloutCheck" },
+    },
+    {
+      id: "FIREFOX_VIEW_TAB_PICKUP_REMINDER",
+      template: "feature_callout",
+      content: {
+        id: "FIREFOX_VIEW_TAB_PICKUP_REMINDER",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "FIREFOX_VIEW_TAB_PICKUP_REMINDER",
+            anchors: [
+              {
+                selector: "#tab-pickup-container",
+                arrow_position: "top",
+              },
+            ],
+            content: {
+              position: "callout",
+              title: {
+                string_id:
+                  "continuous-onboarding-firefox-view-tab-pickup-title",
+              },
+              subtitle: {
+                string_id:
+                  "continuous-onboarding-firefox-view-tab-pickup-subtitle",
+              },
+              logo: {
+                imageURL: "chrome://browser/content/callout-tab-pickup.svg",
+                darkModeImageURL:
+                  "chrome://browser/content/callout-tab-pickup-dark.svg",
+                height: "128px",
+              },
+              primary_button: {
+                label: {
+                  string_id: "mr1-onboarding-get-started-primary-button-label",
+                },
+                style: "secondary",
+                action: {
+                  type: "CLICK_ELEMENT",
+                  navigate: true,
+                  data: {
+                    selector:
+                      "#tab-pickup-container button.primary:not(#error-state-button)",
+                  },
+                },
+              },
+              dismiss_button: {
+                action: {
+                  navigate: true,
+                },
+              },
+              page_event_listeners: [
+                {
+                  params: {
+                    type: "toggle",
+                    selectors: "#tab-pickup-container",
+                  },
+                  action: { reposition: true },
+                },
+              ],
+            },
+          },
+        ],
+      },
+      priority: 2,
+      targeting: `!inMr2022Holdback && source == "about:firefoxview" && "browser.firefox-view.view-count" | preferenceValue > 2
+    && (("identity.fxaccounts.enabled" | preferenceValue == false) || !(("services.sync.engine.tabs" | preferenceValue == true) && ("services.sync.username" | preferenceValue))) && (!messageImpressions.FIREFOX_VIEW_SPOTLIGHT[messageImpressions.FIREFOX_VIEW_SPOTLIGHT | length - 1] || messageImpressions.FIREFOX_VIEW_SPOTLIGHT[messageImpressions.FIREFOX_VIEW_SPOTLIGHT | length - 1] < currentDate|date - ${ONE_DAY_IN_MS})`,
+      frequency: {
+        lifetime: 1,
+      },
+      trigger: { id: "featureCalloutCheck" },
+    },
+    {
+      id: "PDFJS_FEATURE_TOUR_A",
+      template: "feature_callout",
+      content: {
+        id: "PDFJS_FEATURE_TOUR",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        tour_pref_name: PDFJS_PREF,
+        screens: [
+          {
+            id: "FEATURE_CALLOUT_1_A",
+            anchors: [
+              {
+                selector: "hbox#browser",
+                arrow_position: "top-end",
+                absolute_position: { top: "43px", right: "51px" },
+              },
+            ],
+            content: {
+              position: "callout",
+              title: {
+                string_id: "callout-pdfjs-edit-title",
+              },
+              subtitle: {
+                string_id: "callout-pdfjs-edit-body-a",
+              },
+              primary_button: {
+                label: {
+                  string_id: "callout-pdfjs-edit-button",
+                },
+                style: "secondary",
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: PDFJS_PREF,
+                      value: JSON.stringify({
+                        screen: "FEATURE_CALLOUT_2_A",
+                        complete: false,
+                      }),
+                    },
+                  },
+                },
+              },
+              dismiss_button: {
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: PDFJS_PREF,
+                      value: JSON.stringify({
+                        screen: "",
+                        complete: true,
+                      }),
+                    },
+                  },
+                },
+              },
+            },
+          },
+          {
+            id: "FEATURE_CALLOUT_2_A",
+            anchors: [
+              {
+                selector: "hbox#browser",
+                arrow_position: "top-end",
+                absolute_position: { top: "43px", right: "23px" },
+              },
+            ],
+            content: {
+              position: "callout",
+              title: {
+                string_id: "callout-pdfjs-draw-title",
+              },
+              subtitle: {
+                string_id: "callout-pdfjs-draw-body-a",
+              },
+              primary_button: {
+                label: {
+                  string_id: "callout-pdfjs-draw-button",
+                },
+                style: "secondary",
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: PDFJS_PREF,
+                      value: JSON.stringify({
+                        screen: "",
+                        complete: true,
+                      }),
+                    },
+                  },
+                },
+              },
+              dismiss_button: {
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: PDFJS_PREF,
+                      value: JSON.stringify({
+                        screen: "",
+                        complete: true,
+                      }),
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      priority: 1,
+      targeting: `source == "open" && ${matchCurrentScreenTargeting(
+        PDFJS_PREF,
+        "FEATURE_CALLOUT_[0-9]_A"
+      )} && ${matchIncompleteTargeting(PDFJS_PREF)}`,
+      trigger: { id: "pdfJsFeatureCalloutCheck" },
+    },
+    {
+      id: "PDFJS_FEATURE_TOUR_B",
+      template: "feature_callout",
+      content: {
+        id: "PDFJS_FEATURE_TOUR",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        tour_pref_name: PDFJS_PREF,
+        screens: [
+          {
+            id: "FEATURE_CALLOUT_1_B",
+            anchors: [
+              {
+                selector: "hbox#browser",
+                arrow_position: "top-end",
+                absolute_position: { top: "43px", right: "51px" },
+              },
+            ],
+            content: {
+              position: "callout",
+              title: {
+                string_id: "callout-pdfjs-edit-title",
+              },
+              subtitle: {
+                string_id: "callout-pdfjs-edit-body-b",
+              },
+              primary_button: {
+                label: {
+                  string_id: "callout-pdfjs-edit-button",
+                },
+                style: "secondary",
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: PDFJS_PREF,
+                      value: JSON.stringify({
+                        screen: "FEATURE_CALLOUT_2_B",
+                        complete: false,
+                      }),
+                    },
+                  },
+                },
+              },
+              dismiss_button: {
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: PDFJS_PREF,
+                      value: JSON.stringify({
+                        screen: "",
+                        complete: true,
+                      }),
+                    },
+                  },
+                },
+              },
+            },
+          },
+          {
+            id: "FEATURE_CALLOUT_2_B",
+            anchors: [
+              {
+                selector: "hbox#browser",
+                arrow_position: "top-end",
+                absolute_position: { top: "43px", right: "23px" },
+              },
+            ],
+            content: {
+              position: "callout",
+              title: {
+                string_id: "callout-pdfjs-draw-title",
+              },
+              subtitle: {
+                string_id: "callout-pdfjs-draw-body-b",
+              },
+              primary_button: {
+                label: {
+                  string_id: "callout-pdfjs-draw-button",
+                },
+                style: "secondary",
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: PDFJS_PREF,
+                      value: JSON.stringify({
+                        screen: "",
+                        complete: true,
+                      }),
+                    },
+                  },
+                },
+              },
+              dismiss_button: {
+                action: {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: PDFJS_PREF,
+                      value: JSON.stringify({
+                        screen: "",
+                        complete: true,
+                      }),
+                    },
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      priority: 1,
+      targeting: `source == "open" && ${matchCurrentScreenTargeting(
+        PDFJS_PREF,
+        "FEATURE_CALLOUT_[0-9]_B"
+      )} && ${matchIncompleteTargeting(PDFJS_PREF)}`,
+      trigger: { id: "pdfJsFeatureCalloutCheck" },
+    },
+    {
+      // "Callout 1" in the Fakespot Figma spec
+      id: "FAKESPOT_CALLOUT_CLOSED_OPTED_IN_DEFAULT",
+      template: "feature_callout",
+      content: {
+        id: "FAKESPOT_CALLOUT_CLOSED_OPTED_IN_DEFAULT",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "FAKESPOT_CALLOUT_CLOSED_OPTED_IN_DEFAULT",
+            anchors: [
+              {
+                selector: "#shopping-sidebar-button",
+                panel_position: {
+                  anchor_attachment: "bottomcenter",
+                  callout_attachment: "topright",
+                },
+                no_open_on_anchor: true,
+              },
+            ],
+            content: {
+              position: "callout",
+              title_logo: {
+                imageURL:
+                  "chrome://browser/content/shopping/assets/shopping.svg",
+                alignment: "top",
+              },
+              title: {
+                string_id: "shopping-callout-closed-opted-in-subtitle",
+                marginInline: "3px 40px",
+                fontWeight: "inherit",
+              },
+              dismiss_button: {
+                action: { dismiss: true },
+                size: "small",
+                marginBlock: "24px 0",
+                marginInline: "0 24px",
+              },
+              page_event_listeners: [
+                {
+                  params: {
+                    type: "click",
+                    selectors: "#shopping-sidebar-button",
+                  },
+                  action: { dismiss: true },
+                },
+              ],
+            },
+          },
+        ],
+      },
+      priority: 1,
+      // Auto-open feature flag is not enabled; User is opted in; First time closing sidebar; Has not seen either on-closed callout before; Has not opted out of CFRs.
+      targeting: `isSidebarClosing && 'browser.shopping.experience2023.autoOpen.enabled' | preferenceValue != true && 'browser.shopping.experience2023.optedIn' | preferenceValue == 1 && 'browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features' | preferenceValue != false && !messageImpressions.FAKESPOT_CALLOUT_CLOSED_OPTED_IN_DEFAULT|length && !messageImpressions.FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_DEFAULT|length`,
+      trigger: { id: "shoppingProductPageWithSidebarClosed" },
+      frequency: { lifetime: 1 },
+    },
+    {
+      // "Callout 3" in the Fakespot Figma spec
+      id: "FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_DEFAULT",
+      template: "feature_callout",
+      content: {
+        id: "FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_DEFAULT",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_DEFAULT",
+            anchors: [
+              {
+                selector: "#shopping-sidebar-button",
+                panel_position: {
+                  anchor_attachment: "bottomcenter",
+                  callout_attachment: "topright",
+                },
+                no_open_on_anchor: true,
+              },
+            ],
+            content: {
+              position: "callout",
+              title_logo: {
+                imageURL:
+                  "chrome://browser/content/shopping/assets/shopping.svg",
+              },
+              title: {
+                string_id: "shopping-callout-closed-not-opted-in-title",
+                marginInline: "3px 40px",
+              },
+              subtitle: {
+                string_id: "shopping-callout-closed-not-opted-in-subtitle",
+              },
+              dismiss_button: {
+                action: { dismiss: true },
+                size: "small",
+                marginBlock: "24px 0",
+                marginInline: "0 24px",
+              },
+              page_event_listeners: [
+                {
+                  params: {
+                    type: "click",
+                    selectors: "#shopping-sidebar-button",
+                  },
+                  action: { dismiss: true },
+                },
+              ],
+            },
+          },
+        ],
+      },
+      priority: 1,
+      // Auto-open feature flag is not enabled; User is not opted in; First time closing sidebar; Has not seen either on-closed callout before; Has not opted out of CFRs.
+      targeting: `isSidebarClosing && 'browser.shopping.experience2023.autoOpen.enabled' | preferenceValue != true && 'browser.shopping.experience2023.optedIn' | preferenceValue != 1 && 'browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features' | preferenceValue != false && !messageImpressions.FAKESPOT_CALLOUT_CLOSED_OPTED_IN_DEFAULT|length && !messageImpressions.FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_DEFAULT|length`,
+      trigger: { id: "shoppingProductPageWithSidebarClosed" },
+      frequency: { lifetime: 1 },
+    },
+    {
+      // "callout 2" in the Fakespot Figma spec
+      id: "FAKESPOT_CALLOUT_PDP_OPTED_IN_DEFAULT",
+      template: "feature_callout",
+      content: {
+        id: "FAKESPOT_CALLOUT_PDP_OPTED_IN_DEFAULT",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "FAKESPOT_CALLOUT_PDP_OPTED_IN_DEFAULT",
+            anchors: [
+              {
+                selector: "#shopping-sidebar-button",
+                panel_position: {
+                  anchor_attachment: "bottomcenter",
+                  callout_attachment: "topright",
+                },
+                no_open_on_anchor: true,
+              },
+            ],
+            content: {
+              position: "callout",
+              title: { string_id: "shopping-callout-pdp-opted-in-title" },
+              subtitle: { string_id: "shopping-callout-pdp-opted-in-subtitle" },
+              logo: {
+                imageURL:
+                  "chrome://browser/content/shopping/assets/ratingLight.avif",
+                darkModeImageURL:
+                  "chrome://browser/content/shopping/assets/ratingDark.avif",
+                height: "216px",
+              },
+              dismiss_button: {
+                action: { dismiss: true },
+                size: "small",
+                marginBlock: "24px 0",
+                marginInline: "0 24px",
+              },
+              page_event_listeners: [
+                {
+                  params: {
+                    type: "click",
+                    selectors: "#shopping-sidebar-button",
+                  },
+                  action: { dismiss: true },
+                },
+              ],
+            },
+          },
+        ],
+      },
+      priority: 1,
+      // Auto-open feature flag is not enabled; User is opted in; Has not opted out of CFRs; Has seen either on-closed callout before, but not within the last 24hrs or in this session.
+      targeting: `!isSidebarClosing && 'browser.shopping.experience2023.autoOpen.enabled' | preferenceValue != true && 'browser.shopping.experience2023.optedIn' | preferenceValue == 1 && 'browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features' | preferenceValue != false && ((currentDate | date - messageImpressions.FAKESPOT_CALLOUT_CLOSED_OPTED_IN_DEFAULT[messageImpressions.FAKESPOT_CALLOUT_CLOSED_OPTED_IN_DEFAULT | length - 1] | date) / 3600000 > 24 || (currentDate | date - messageImpressions.FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_DEFAULT[messageImpressions.FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_DEFAULT | length - 1] | date) / 3600000 > 24)`,
+      trigger: { id: "shoppingProductPageWithSidebarClosed" },
+      frequency: { lifetime: 1 },
+    },
+    {
+      // "Callout 1" in the Fakespot Figma spec, but
+      // targeting not opted-in users only for rediscoverability experiment 2.
+      id: "FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_AUTO_OPEN",
+      template: "feature_callout",
+      content: {
+        id: "FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_AUTO_OPEN",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_AUTO_OPEN",
+            anchors: [
+              {
+                selector: "#shopping-sidebar-button",
+                panel_position: {
+                  anchor_attachment: "bottomcenter",
+                  callout_attachment: "topright",
+                },
+                no_open_on_anchor: true,
+              },
+            ],
+            content: {
+              position: "callout",
+              width: "401px",
+              title: {
+                string_id: "shopping-callout-closed-not-opted-in-revised-title",
+              },
+              subtitle: {
+                string_id:
+                  "shopping-callout-closed-not-opted-in-revised-subtitle",
+                letterSpacing: "0",
+              },
+              logo: {
+                imageURL:
+                  "chrome://browser/content/shopping/assets/priceTagButtonCallout.svg",
+                height: "214px",
+              },
+              dismiss_button: {
+                action: { dismiss: true },
+                size: "small",
+                marginBlock: "28px 0",
+                marginInline: "0 28px",
+              },
+              primary_button: {
+                label: {
+                  string_id:
+                    "shopping-callout-closed-not-opted-in-revised-button",
+                  marginBlock: "0 -8px",
+                },
+                style: "secondary",
+                action: {
+                  dismiss: true,
+                },
+              },
+              page_event_listeners: [
+                {
+                  params: {
+                    type: "click",
+                    selectors: "#shopping-sidebar-button",
+                  },
+                  action: { dismiss: true },
+                },
+              ],
+            },
+          },
+        ],
+      },
+      priority: 1,
+      // Auto-open feature flag is enabled; User is not opted in; First time closing sidebar; Has not opted out of CFRs.
+      targeting: `isSidebarClosing && 'browser.shopping.experience2023.autoOpen.enabled' | preferenceValue == true && 'browser.shopping.experience2023.optedIn' | preferenceValue != 1 && 'browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features' | preferenceValue != false`,
+      trigger: { id: "shoppingProductPageWithSidebarClosed" },
+      frequency: { lifetime: 1 },
+      skip_in_tests:
+        "not tested in automation and might pop up unexpectedly during review checker tests",
+    },
+    {
+      // "Callout 3" in the Fakespot Figma spec, but
+      // displayed if auto-open version of "callout 1" was seen already and 24 hours have passed.
+      id: "FAKESPOT_CALLOUT_PDP_NOT_OPTED_IN_REMINDER",
+      template: "feature_callout",
+      content: {
+        id: "FAKESPOT_CALLOUT_PDP_NOT_OPTED_IN_REMINDER",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "FAKESPOT_CALLOUT_PDP_NOT_OPTED_IN_REMINDER",
+            anchors: [
+              {
+                selector: "#shopping-sidebar-button",
+                panel_position: {
+                  anchor_attachment: "bottomcenter",
+                  callout_attachment: "topright",
+                },
+                no_open_on_anchor: true,
+              },
+            ],
+            content: {
+              position: "callout",
+              width: "401px",
+              title: {
+                string_id: "shopping-callout-not-opted-in-reminder-title",
+                fontSize: "20px",
+                letterSpacing: "0",
+              },
+              subtitle: {
+                string_id: "shopping-callout-not-opted-in-reminder-subtitle",
+                letterSpacing: "0",
+              },
+              logo: {
+                imageURL:
+                  "chrome://browser/content/shopping/assets/reviewsVisualCallout.svg",
+                alt: {
+                  string_id: "shopping-callout-not-opted-in-reminder-img-alt",
+                },
+                height: "214px",
+              },
+              dismiss_button: {
+                action: {
+                  type: "MULTI_ACTION",
+                  collectSelect: true,
+                  data: {
+                    actions: [],
+                  },
+                  dismiss: true,
+                },
+                size: "small",
+                marginBlock: "28px 0",
+                marginInline: "0 28px",
+              },
+              primary_button: {
+                label: {
+                  string_id:
+                    "shopping-callout-not-opted-in-reminder-close-button",
+                  marginBlock: "0 -8px",
+                },
+                style: "secondary",
+                action: {
+                  type: "MULTI_ACTION",
+                  collectSelect: true,
+                  data: {
+                    actions: [],
+                  },
+                  dismiss: true,
+                },
+              },
+              secondary_button: {
+                label: {
+                  string_id:
+                    "shopping-callout-not-opted-in-reminder-open-button",
+                  marginBlock: "0 -8px",
+                },
+                style: "primary",
+                action: {
+                  type: "MULTI_ACTION",
+                  collectSelect: true,
+                  data: {
+                    actions: [
+                      {
+                        type: "SET_PREF",
+                        data: {
+                          pref: {
+                            name: "browser.shopping.experience2023.active",
+                            value: true,
+                          },
+                        },
+                      },
+                    ],
+                  },
+                  dismiss: true,
+                },
+              },
+              page_event_listeners: [
+                {
+                  params: {
+                    type: "click",
+                    selectors: "#shopping-sidebar-button",
+                  },
+                  action: { dismiss: true },
+                },
+              ],
+              tiles: {
+                type: "multiselect",
+                style: {
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                },
+                data: [
+                  {
+                    id: "checkbox-dont-show-again",
+                    type: "checkbox",
+                    defaultValue: false,
+                    style: {
+                      alignItems: "center",
+                    },
+                    label: {
+                      string_id:
+                        "shopping-callout-not-opted-in-reminder-ignore-checkbox",
+                    },
+                    icon: {
+                      style: {
+                        width: "16px",
+                        height: "16px",
+                        marginInline: "0 8px",
+                      },
+                    },
+                    action: {
+                      type: "SET_PREF",
+                      data: {
+                        pref: {
+                          name: "messaging-system-action.shopping-callouts-1-block",
+                          value: true,
+                        },
+                      },
+                    },
+                  },
+                ],
+              },
+            },
+          },
+        ],
+      },
+      priority: 2,
+      // Auto-open feature flag is enabled; User is not opted in; Has not opted out of CFRs; Has seen callout 1 before, but not within the last 5 days.
+      targeting:
+        "!isSidebarClosing && 'browser.shopping.experience2023.autoOpen.enabled' | preferenceValue == true && 'browser.shopping.experience2023.optedIn' | preferenceValue == 0 && 'browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features' | preferenceValue != false && !'messaging-system-action.shopping-callouts-1-block' | preferenceValue && (currentDate | date - messageImpressions.FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_AUTO_OPEN[messageImpressions.FAKESPOT_CALLOUT_CLOSED_NOT_OPTED_IN_AUTO_OPEN | length - 1] | date) / 3600000 > 24",
+      trigger: {
+        id: "shoppingProductPageWithSidebarClosed",
+      },
+      frequency: {
+        custom: [
+          {
+            cap: 1,
+            period: 432000000,
+          },
+        ],
+        lifetime: 3,
+      },
+      skip_in_tests:
+        "not tested in automation and might pop up unexpectedly during review checker tests",
+    },
+    {
+      // "Callout 4" in the Fakespot Figma spec, for rediscoverability experiment 2.
+      id: "FAKESPOT_CALLOUT_DISABLED_AUTO_OPEN",
+      template: "feature_callout",
+      content: {
+        id: "FAKESPOT_CALLOUT_DISABLED_AUTO_OPEN",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "FAKESPOT_CALLOUT_DISABLED_AUTO_OPEN",
+            anchors: [
+              {
+                selector: "#shopping-sidebar-button",
+                panel_position: {
+                  anchor_attachment: "bottomcenter",
+                  callout_attachment: "topright",
+                },
+                no_open_on_anchor: true,
+              },
+            ],
+            content: {
+              position: "callout",
+              width: "401px",
+              title: {
+                string_id: "shopping-callout-disabled-auto-open-title",
+              },
+              subtitle: {
+                string_id: "shopping-callout-disabled-auto-open-subtitle",
+                letterSpacing: "0",
+              },
+              logo: {
+                imageURL:
+                  "chrome://browser/content/shopping/assets/priceTagButtonCallout.svg",
+                height: "214px",
+              },
+              dismiss_button: {
+                action: { dismiss: true },
+                size: "small",
+                marginBlock: "28px 0",
+                marginInline: "0 28px",
+              },
+              primary_button: {
+                label: {
+                  string_id: "shopping-callout-disabled-auto-open-button",
+                  marginBlock: "0 -8px",
+                },
+                style: "secondary",
+                action: {
+                  dismiss: true,
+                },
+              },
+              page_event_listeners: [
+                {
+                  params: {
+                    type: "click",
+                    selectors: "#shopping-sidebar-button",
+                  },
+                  action: { dismiss: true },
+                },
+              ],
+            },
+          },
+        ],
+      },
+      priority: 1,
+      // Auto-open feature flag is enabled; User disabled auto-open behavior; User is opted in; Has not opted out of CFRs.
+      targeting: `'browser.shopping.experience2023.autoOpen.enabled' | preferenceValue == true && 'browser.shopping.experience2023.autoOpen.userEnabled' | preferenceValue == false && 'browser.shopping.experience2023.optedIn' | preferenceValue == 1 && 'browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features' | preferenceValue != false`,
+      trigger: {
+        id: "preferenceObserver",
+        params: ["browser.shopping.experience2023.autoOpen.userEnabled"],
+      },
+      frequency: { lifetime: 1 },
+      skip_in_tests:
+        "not tested in automation and might pop up unexpectedly during review checker tests",
+    },
+    {
+      // "Callout 5" in the Fakespot Figma spec, for rediscoverability experiment 2.
+      id: "FAKESPOT_CALLOUT_OPTED_OUT_AUTO_OPEN",
+      template: "feature_callout",
+      content: {
+        id: "FAKESPOT_CALLOUT_OPTED_OUT_AUTO_OPEN",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "FAKESPOT_CALLOUT_OPTED_OUT_AUTO_OPEN",
+            anchors: [
+              {
+                selector: "#shopping-sidebar-button",
+                panel_position: {
+                  anchor_attachment: "bottomcenter",
+                  callout_attachment: "topright",
+                },
+                no_open_on_anchor: true,
+              },
+            ],
+            content: {
+              position: "callout",
+              width: "401px",
+              title: {
+                string_id: "shopping-callout-opted-out-title",
+              },
+              subtitle: {
+                string_id: "shopping-callout-opted-out-subtitle",
+                letterSpacing: "0",
+              },
+              logo: {
+                imageURL:
+                  "chrome://browser/content/shopping/assets/priceTagButtonCallout.svg",
+                height: "214px",
+              },
+              dismiss_button: {
+                action: { dismiss: true },
+                size: "small",
+                marginBlock: "28px 0",
+                marginInline: "0 28px",
+              },
+              primary_button: {
+                label: {
+                  string_id: "shopping-callout-opted-out-button",
+                  marginBlock: "0 -8px",
+                },
+                style: "secondary",
+                action: {
+                  dismiss: true,
+                },
+              },
+              page_event_listeners: [
+                {
+                  params: {
+                    type: "click",
+                    selectors: "#shopping-sidebar-button",
+                  },
+                  action: { dismiss: true },
+                },
+              ],
+            },
+          },
+        ],
+      },
+      priority: 1,
+      // Auto-open feature flag is enabled; User has opted out; Has not opted out of CFRs.
+      targeting: `'browser.shopping.experience2023.autoOpen.enabled' | preferenceValue == true && 'browser.shopping.experience2023.optedIn' | preferenceValue == 2 && 'browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features' | preferenceValue != false`,
+      trigger: {
+        id: "preferenceObserver",
+        params: ["browser.shopping.experience2023.optedIn"],
+      },
+      frequency: { lifetime: 1 },
+      skip_in_tests:
+        "not tested in automation and might pop up unexpectedly during review checker tests",
+    },
+
+    // cookie banner reduction onboarding
+    {
+      id: "CFR_COOKIEBANNER",
+      groups: ["cfr"],
+      template: "feature_callout",
+      content: {
+        id: "CFR_COOKIEBANNER",
+        template: "multistage",
+        backdrop: "transparent",
+        transitions: false,
+        disableHistoryUpdates: true,
+        screens: [
+          {
+            id: "COOKIEBANNER_CALLOUT",
+            anchors: [
+              {
+                selector: "#tracking-protection-icon-container",
+                panel_position: {
+                  callout_attachment: "topleft",
+                  anchor_attachment: "bottomcenter",
+                },
+              },
+            ],
+            content: {
+              position: "callout",
+              autohide: true,
+              title: {
+                string_id: "cookie-banner-blocker-onboarding-header",
+                paddingInline: "12px 0",
+              },
+              subtitle: {
+                string_id: "cookie-banner-blocker-onboarding-body",
+                paddingInline: "34px 0",
+              },
+              title_logo: {
+                alignment: "top",
+                height: "20px",
+                width: "20px",
+                imageURL:
+                  "chrome://browser/skin/controlcenter/3rdpartycookies-blocked.svg",
+              },
+              dismiss_button: {
+                size: "small",
+                action: { dismiss: true },
+              },
+              additional_button: {
+                label: {
+                  string_id: "cookie-banner-blocker-onboarding-learn-more",
+                  marginInline: "34px 0",
+                },
+                style: "link",
+                alignment: "start",
+                action: {
+                  type: "OPEN_URL",
+                  data: {
+                    args: "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/cookie-banner-reduction",
+                    where: "tabshifted",
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+      frequency: {
+        lifetime: 1,
+      },
+      skip_in_tests: "it's not tested in automation",
+      trigger: {
+        id: "cookieBannerHandled",
+      },
+      targeting: `'cookiebanners.ui.desktop.enabled'|preferenceValue == true && 'cookiebanners.ui.desktop.showCallout'|preferenceValue == true && 'browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features' | preferenceValue != false`,
+    },
+  ];
+  messages = add24HourImpressionJEXLTargeting(
+    ["FIREFOX_VIEW_TAB_PICKUP_REMINDER"],
+    "FIREFOX_VIEW",
+    messages
+  );
+  return messages;
+};
+
+export const FeatureCalloutMessages = {
+  getMessages() {
+    return MESSAGES();
+  },
+};
diff --git a/browser/components/asrouter/modules/InfoBar.sys.mjs b/browser/components/asrouter/modules/InfoBar.sys.mjs
new file mode 100644
index 0000000000..a287b650a5
--- /dev/null
+++ b/browser/components/asrouter/modules/InfoBar.sys.mjs
@@ -0,0 +1,169 @@
+/* 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/. */
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
+  RemoteL10n: "resource:///modules/asrouter/RemoteL10n.sys.mjs",
+});
+
+class InfoBarNotification {
+  constructor(message, dispatch) {
+    this._dispatch = dispatch;
+    this.dispatchUserAction = this.dispatchUserAction.bind(this);
+    this.buttonCallback = this.buttonCallback.bind(this);
+    this.infobarCallback = this.infobarCallback.bind(this);
+    this.message = message;
+    this.notification = null;
+  }
+
+  /**
+   * Show the infobar notification and send an impression ping
+   *
+   * @param {object} browser Browser reference for the currently selected tab
+   */
+  async showNotification(browser) {
+    let { content } = this.message;
+    let { gBrowser } = browser.ownerGlobal;
+    let doc = gBrowser.ownerDocument;
+    let notificationContainer;
+    if (content.type === "global") {
+      notificationContainer = browser.ownerGlobal.gNotificationBox;
+    } else {
+      notificationContainer = gBrowser.getNotificationBox(browser);
+    }
+
+    let priority = content.priority || notificationContainer.PRIORITY_SYSTEM;
+
+    this.notification = await notificationContainer.appendNotification(
+      this.message.id,
+      {
+        label: this.formatMessageConfig(doc, content.text),
+        image: content.icon || "chrome://branding/content/icon64.png",
+        priority,
+        eventCallback: this.infobarCallback,
+      },
+      content.buttons.map(b => this.formatButtonConfig(b))
+    );
+
+    this.addImpression();
+  }
+
+  formatMessageConfig(doc, content) {
+    let docFragment = doc.createDocumentFragment();
+    // notificationbox will only `appendChild` for documentFragments
+    docFragment.appendChild(
+      lazy.RemoteL10n.createElement(doc, "span", { content })
+    );
+
+    return docFragment;
+  }
+
+  formatButtonConfig(button) {
+    let btnConfig = { callback: this.buttonCallback, ...button };
+    // notificationbox will set correct data-l10n-id attributes if passed in
+    // using the l10n-id key. Otherwise the `button.label` text is used.
+    if (button.label.string_id) {
+      btnConfig["l10n-id"] = button.label.string_id;
+    }
+
+    return btnConfig;
+  }
+
+  addImpression() {
+    // Record an impression in ASRouter for frequency capping
+    this._dispatch({ type: "IMPRESSION", data: this.message });
+    // Send a user impression telemetry ping
+    this.sendUserEventTelemetry("IMPRESSION");
+  }
+
+  /**
+   * Called when one of the infobar buttons is clicked
+   */
+  buttonCallback(notificationBox, btnDescription, target) {
+    this.dispatchUserAction(
+      btnDescription.action,
+      target.ownerGlobal.gBrowser.selectedBrowser
+    );
+    let isPrimary = target.classList.contains("primary");
+    let eventName = isPrimary
+      ? "CLICK_PRIMARY_BUTTON"
+      : "CLICK_SECONDARY_BUTTON";
+    this.sendUserEventTelemetry(eventName);
+  }
+
+  dispatchUserAction(action, selectedBrowser) {
+    this._dispatch({ type: "USER_ACTION", data: action }, selectedBrowser);
+  }
+
+  /**
+   * Called when interacting with the toolbar (but not through the buttons)
+   */
+  infobarCallback(eventType) {
+    if (eventType === "removed") {
+      this.notification = null;
+      // eslint-disable-next-line no-use-before-define
+      InfoBar._activeInfobar = null;
+    } else if (this.notification) {
+      this.sendUserEventTelemetry("DISMISSED");
+      this.notification = null;
+      // eslint-disable-next-line no-use-before-define
+      InfoBar._activeInfobar = null;
+    }
+  }
+
+  sendUserEventTelemetry(event) {
+    const ping = {
+      message_id: this.message.id,
+      event,
+    };
+    this._dispatch({
+      type: "INFOBAR_TELEMETRY",
+      data: { action: "infobar_user_event", ...ping },
+    });
+  }
+}
+
+export const InfoBar = {
+  _activeInfobar: null,
+
+  maybeLoadCustomElement(win) {
+    if (!win.customElements.get("remote-text")) {
+      Services.scriptloader.loadSubScript(
+        "resource://activity-stream/data/custom-elements/paragraph.js",
+        win
+      );
+    }
+  },
+
+  maybeInsertFTL(win) {
+    win.MozXULElement.insertFTLIfNeeded("browser/newtab/asrouter.ftl");
+    win.MozXULElement.insertFTLIfNeeded(
+      "browser/defaultBrowserNotification.ftl"
+    );
+  },
+
+  async showInfoBarMessage(browser, message, dispatch) {
+    // Prevent stacking multiple infobars
+    if (this._activeInfobar) {
+      return null;
+    }
+
+    const win = browser?.ownerGlobal;
+
+    if (!win || lazy.PrivateBrowsingUtils.isWindowPrivate(win)) {
+      return null;
+    }
+
+    this.maybeLoadCustomElement(win);
+    this.maybeInsertFTL(win);
+
+    let notification = new InfoBarNotification(message, dispatch);
+    await notification.showNotification(browser);
+    this._activeInfobar = true;
+
+    return notification;
+  },
+};
diff --git a/browser/components/asrouter/modules/MessagingExperimentConstants.sys.mjs b/browser/components/asrouter/modules/MessagingExperimentConstants.sys.mjs
new file mode 100644
index 0000000000..5960ab92cc
--- /dev/null
+++ b/browser/components/asrouter/modules/MessagingExperimentConstants.sys.mjs
@@ -0,0 +1,37 @@
+/* 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/. */
+
+/**
+ * This file is used to define constants related to messaging experiments. It is
+ * imported by both ASRouter as well as import-rollouts.js, a node script that
+ * imports Nimbus rollouts into tree. It doesn't have access to any Firefox
+ * APIs, XPCOM, etc. and should be kept that way.
+ */
+
+/**
+ * These are the Nimbus feature IDs that correspond to messaging experiments.
+ * Other Nimbus features contain specific variables whose keys are enumerated in
+ * FeatureManifest.yaml. Conversely, messaging experiment features contain
+ * actual messages, with the usual message keys like `template` and `targeting`.
+ * @see FeatureManifest.yaml
+ */
+export const MESSAGING_EXPERIMENTS_DEFAULT_FEATURES = [
+  "cfr",
+  "fxms-message-1",
+  "fxms-message-2",
+  "fxms-message-3",
+  "fxms-message-4",
+  "fxms-message-5",
+  "fxms-message-6",
+  "fxms-message-7",
+  "fxms-message-8",
+  "fxms-message-9",
+  "fxms-message-10",
+  "fxms-message-11",
+  "infobar",
+  "moments-page",
+  "pbNewtab",
+  "spotlight",
+  "featureCallout",
+];
diff --git a/browser/components/asrouter/modules/MomentsPageHub.sys.mjs b/browser/components/asrouter/modules/MomentsPageHub.sys.mjs
new file mode 100644
index 0000000000..84fee3b517
--- /dev/null
+++ b/browser/components/asrouter/modules/MomentsPageHub.sys.mjs
@@ -0,0 +1,171 @@
+/* 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/. */
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  setInterval: "resource://gre/modules/Timer.sys.mjs",
+  clearInterval: "resource://gre/modules/Timer.sys.mjs",
+});
+
+// Frequency at which to check for new messages
+const SYSTEM_TICK_INTERVAL = 5 * 60 * 1000;
+const HOMEPAGE_OVERRIDE_PREF = "browser.startup.homepage_override.once";
+
+// For the "reach" event of Messaging Experiments
+const REACH_EVENT_CATEGORY = "messaging_experiments";
+const REACH_EVENT_METHOD = "reach";
+// Note it's not "moments-page" as Telemetry Events only accepts understores
+// for the event `object`
+const REACH_EVENT_OBJECT = "moments_page";
+
+export class _MomentsPageHub {
+  constructor() {
+    this.id = "moments-page-hub";
+    this.state = {};
+    this.checkHomepageOverridePref = this.checkHomepageOverridePref.bind(this);
+    this._initialized = false;
+  }
+
+  async init(
+    waitForInitialized,
+    { handleMessageRequest, addImpression, blockMessageById, sendTelemetry }
+  ) {
+    if (this._initialized) {
+      return;
+    }
+
+    this._initialized = true;
+    this._handleMessageRequest = handleMessageRequest;
+    this._addImpression = addImpression;
+    this._blockMessageById = blockMessageById;
+    this._sendTelemetry = sendTelemetry;
+
+    // Need to wait for ASRouter to initialize before trying to fetch messages
+    await waitForInitialized;
+
+    this.messageRequest({
+      triggerId: "momentsUpdate",
+      template: "update_action",
+    });
+
+    const _intervalId = lazy.setInterval(
+      () => this.checkHomepageOverridePref(),
+      SYSTEM_TICK_INTERVAL
+    );
+    this.state = { _intervalId };
+  }
+
+  _sendPing(ping) {
+    this._sendTelemetry({
+      type: "MOMENTS_PAGE_TELEMETRY",
+      data: { action: "moments_user_event", ...ping },
+    });
+  }
+
+  sendUserEventTelemetry(message) {
+    this._sendPing({
+      message_id: message.id,
+      bucket_id: message.id,
+      event: "MOMENTS_PAGE_SET",
+    });
+  }
+
+  /**
+   * If we don't have `expire` defined with the message it could be because
+   * it depends on user dependent parameters. Since the message matched
+   * targeting we calculate `expire` based on the current timestamp and the
+   * `expireDelta` which defines for how long it should be available.
+   * @param expireDelta {number} - Offset in milliseconds from the current date
+   */
+  getExpirationDate(expireDelta) {
+    return Date.now() + expireDelta;
+  }
+
+  executeAction(message) {
+    const { id, data } = message.content.action;
+    switch (id) {
+      case "moments-wnp":
+        const { url, expireDelta } = data;
+        let { expire } = data;
+        if (!expire) {
+          expire = this.getExpirationDate(expireDelta);
+        }
+        // In order to reset this action we can dispatch a new message that
+        // will overwrite the prev value with an expiration date from the past.
+        Services.prefs.setStringPref(
+          HOMEPAGE_OVERRIDE_PREF,
+          JSON.stringify({ message_id: message.id, url, expire })
+        );
+        // Add impression and block immediately after taking the action
+        this.sendUserEventTelemetry(message);
+        this._addImpression(message);
+        this._blockMessageById(message.id);
+        break;
+    }
+  }
+
+  _recordReachEvent(message) {
+    const extra = { branches: message.branchSlug };
+    Services.telemetry.recordEvent(
+      REACH_EVENT_CATEGORY,
+      REACH_EVENT_METHOD,
+      REACH_EVENT_OBJECT,
+      message.experimentSlug,
+      extra
+    );
+  }
+
+  async messageRequest({ triggerId, template }) {
+    const telemetryObject = { triggerId };
+    TelemetryStopwatch.start("MS_MESSAGE_REQUEST_TIME_MS", telemetryObject);
+    const messages = await this._handleMessageRequest({
+      triggerId,
+      template,
+      returnAll: true,
+    });
+    TelemetryStopwatch.finish("MS_MESSAGE_REQUEST_TIME_MS", telemetryObject);
+
+    // Record the "reach" event for all the messages with `forReachEvent`,
+    // only execute action for the first message without forReachEvent.
+    const nonReachMessages = [];
+    for (const message of messages) {
+      if (message.forReachEvent) {
+        if (!message.forReachEvent.sent) {
+          this._recordReachEvent(message);
+          message.forReachEvent.sent = true;
+        }
+      } else {
+        nonReachMessages.push(message);
+      }
+    }
+    if (nonReachMessages.length) {
+      this.executeAction(nonReachMessages[0]);
+    }
+  }
+
+  /**
+   * Pref is set via Remote Settings message. We want to continously
+   * monitor new messages that come in to ensure the one with the
+   * highest priority is set.
+   */
+  checkHomepageOverridePref() {
+    this.messageRequest({
+      triggerId: "momentsUpdate",
+      template: "update_action",
+    });
+  }
+
+  uninit() {
+    lazy.clearInterval(this.state._intervalId);
+    this.state = {};
+    this._initialized = false;
+  }
+}
+
+/**
+ * ToolbarBadgeHub - singleton instance of _ToolbarBadgeHub that can initiate
+ * message requests and render messages.
+ */
+export const MomentsPageHub = new _MomentsPageHub();
diff --git a/browser/components/asrouter/modules/OnboardingMessageProvider.sys.mjs b/browser/components/asrouter/modules/OnboardingMessageProvider.sys.mjs
new file mode 100644
index 0000000000..6164e3e72a
--- /dev/null
+++ b/browser/components/asrouter/modules/OnboardingMessageProvider.sys.mjs
@@ -0,0 +1,1414 @@
+/* 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/. */
+
+// We use importESModule here instead of static import so that
+// the Karma test environment won't choke on this module. This
+// is because the Karma test environment already stubs out
+// XPCOMUtils and AppConstants, and overrides importESModule
+// to be a no-op (which can't be done for a static import statement).
+
+// eslint-disable-next-line mozilla/use-static-import
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+// eslint-disable-next-line mozilla/use-static-import
+const { AppConstants } = ChromeUtils.importESModule(
+  "resource://gre/modules/AppConstants.sys.mjs"
+);
+
+import { FeatureCalloutMessages } from "resource:///modules/asrouter/FeatureCalloutMessages.sys.mjs";
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  BrowserUtils: "resource://gre/modules/BrowserUtils.sys.mjs",
+  NimbusFeatures: "resource://nimbus/ExperimentAPI.sys.mjs",
+  ShellService: "resource:///modules/ShellService.sys.mjs",
+});
+
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "usesFirefoxSync",
+  "services.sync.username"
+);
+
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "mobileDevices",
+  "services.sync.clients.devices.mobile",
+  0
+);
+
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "hidePrivatePin",
+  "browser.startup.upgradeDialog.pinPBM.disabled",
+  false
+);
+
+const L10N = new Localization([
+  "branding/brand.ftl",
+  "browser/newtab/onboarding.ftl",
+  "toolkit/branding/brandings.ftl",
+  "toolkit/branding/accounts.ftl",
+]);
+
+const HOMEPAGE_PREF = "browser.startup.homepage";
+const NEWTAB_PREF = "browser.newtabpage.enabled";
+const FOURTEEN_DAYS_IN_MS = 14 * 24 * 60 * 60 * 1000;
+
+const BASE_MESSAGES = () => [
+  {
+    id: "FXA_ACCOUNTS_BADGE",
+    template: "toolbar_badge",
+    content: {
+      delay: 10000, // delay for 10 seconds
+      target: "fxa-toolbar-menu-button",
+    },
+    targeting: "false",
+    trigger: { id: "toolbarBadgeUpdate" },
+  },
+  {
+    id: "MILESTONE_MESSAGE_87",
+    groups: ["cfr"],
+    content: {
+      text: "",
+      layout: "short_message",
+      buttons: {
+        primary: {
+          event: "PROTECTION",
+          label: {
+            string_id: "cfr-doorhanger-milestone-ok-button",
+          },
+          action: {
+            type: "OPEN_PROTECTION_REPORT",
+          },
+        },
+        secondary: [
+          {
+            event: "DISMISS",
+            label: {
+              string_id: "cfr-doorhanger-milestone-close-button",
+            },
+            action: {
+              type: "CANCEL",
+            },
+          },
+        ],
+      },
+      category: "cfrFeatures",
+      anchor_id: "tracking-protection-icon-container",
+      bucket_id: "CFR_MILESTONE_MESSAGE",
+      heading_text: {
+        string_id: "cfr-doorhanger-milestone-heading2",
+      },
+      notification_text: "",
+      skip_address_bar_notifier: true,
+    },
+    trigger: {
+      id: "contentBlocking",
+      params: ["ContentBlockingMilestone"],
+    },
+    template: "milestone_message",
+    frequency: {
+      lifetime: 7,
+    },
+    targeting: "pageLoad >= 4 && userPrefs.cfrFeatures",
+  },
+  {
+    id: "FX_MR_106_UPGRADE",
+    template: "spotlight",
+    targeting: "true",
+    content: {
+      template: "multistage",
+      id: "FX_MR_106_UPGRADE",
+      transitions: true,
+      modal: "tab",
+      screens: [
+        {
+          id: "UPGRADE_PIN_FIREFOX",
+          content: {
+            position: "split",
+            split_narrow_bkg_position: "-155px",
+            image_alt_text: {
+              string_id: "mr2022-onboarding-pin-image-alt",
+            },
+            progress_bar: "true",
+            background:
+              "url('chrome://activity-stream/content/data/content/assets/mr-pintaskbar.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
+            logo: {},
+            title: {
+              string_id: "mr2022-onboarding-existing-pin-header",
+            },
+            subtitle: {
+              string_id: "mr2022-onboarding-existing-pin-subtitle",
+            },
+            primary_button: {
+              label: {
+                string_id: "mr2022-onboarding-pin-primary-button-label",
+              },
+              action: {
+                navigate: true,
+                type: "PIN_FIREFOX_TO_TASKBAR",
+              },
+            },
+            checkbox: {
+              label: {
+                string_id: "mr2022-onboarding-existing-pin-checkbox-label",
+              },
+              defaultValue: true,
+              action: {
+                type: "MULTI_ACTION",
+                navigate: true,
+                data: {
+                  actions: [
+                    {
+                      type: "PIN_FIREFOX_TO_TASKBAR",
+                      data: {
+                        privatePin: true,
+                      },
+                    },
+                    {
+                      type: "PIN_FIREFOX_TO_TASKBAR",
+                    },
+                  ],
+                },
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "mr2022-onboarding-secondary-skip-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+              has_arrow_icon: true,
+            },
+          },
+        },
+        {
+          id: "UPGRADE_SET_DEFAULT",
+          content: {
+            position: "split",
+            split_narrow_bkg_position: "-60px",
+            image_alt_text: {
+              string_id: "mr2022-onboarding-default-image-alt",
+            },
+            progress_bar: "true",
+            background:
+              "url('chrome://activity-stream/content/data/content/assets/mr-settodefault.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
+            logo: {},
+            title: {
+              string_id: "mr2022-onboarding-set-default-title",
+            },
+            subtitle: {
+              string_id: "mr2022-onboarding-set-default-subtitle",
+            },
+            primary_button: {
+              label: {
+                string_id: "mr2022-onboarding-set-default-primary-button-label",
+              },
+              action: {
+                navigate: true,
+                type: "SET_DEFAULT_BROWSER",
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "mr2022-onboarding-secondary-skip-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+              has_arrow_icon: true,
+            },
+          },
+        },
+        {
+          id: "UPGRADE_IMPORT_SETTINGS_EMBEDDED",
+          content: {
+            tiles: { type: "migration-wizard" },
+            position: "split",
+            split_narrow_bkg_position: "-42px",
+            image_alt_text: {
+              string_id: "mr2022-onboarding-import-image-alt",
+            },
+            background:
+              "url('chrome://activity-stream/content/data/content/assets/mr-import.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
+            progress_bar: true,
+            hide_secondary_section: "responsive",
+            migrate_start: {
+              action: {},
+            },
+            migrate_close: {
+              action: {
+                navigate: true,
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "mr2022-onboarding-secondary-skip-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+              has_arrow_icon: true,
+            },
+          },
+        },
+        {
+          id: "UPGRADE_MOBILE_DOWNLOAD",
+          content: {
+            position: "split",
+            split_narrow_bkg_position: "-160px",
+            image_alt_text: {
+              string_id: "mr2022-onboarding-mobile-download-image-alt",
+            },
+            background:
+              "url('chrome://activity-stream/content/data/content/assets/mr-mobilecrosspromo.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
+            progress_bar: true,
+            logo: {},
+            title: {
+              string_id:
+                "onboarding-mobile-download-security-and-privacy-title",
+            },
+            subtitle: {
+              string_id:
+                "onboarding-mobile-download-security-and-privacy-subtitle",
+            },
+            hero_image: {
+              url: "chrome://activity-stream/content/data/content/assets/mobile-download-qr-existing-user.svg",
+            },
+            cta_paragraph: {
+              text: {
+                string_id: "mr2022-onboarding-mobile-download-cta-text",
+                string_name: "download-label",
+              },
+              action: {
+                type: "OPEN_URL",
+                data: {
+                  args: "https://www.mozilla.org/firefox/mobile/get-app/?utm_medium=firefox-desktop&utm_source=onboarding-modal&utm_campaign=mr2022&utm_content=existing-global",
+                  where: "tab",
+                },
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "mr2022-onboarding-secondary-skip-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+              has_arrow_icon: true,
+            },
+          },
+        },
+        {
+          id: "UPGRADE_PIN_PRIVATE_WINDOW",
+          content: {
+            position: "split",
+            split_narrow_bkg_position: "-100px",
+            image_alt_text: {
+              string_id: "mr2022-onboarding-pin-private-image-alt",
+            },
+            progress_bar: "true",
+            background:
+              "url('chrome://activity-stream/content/data/content/assets/mr-pinprivate.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
+            logo: {},
+            title: {
+              string_id: "mr2022-upgrade-onboarding-pin-private-window-header",
+            },
+            subtitle: {
+              string_id:
+                "mr2022-upgrade-onboarding-pin-private-window-subtitle",
+            },
+            primary_button: {
+              label: {
+                string_id:
+                  "mr2022-upgrade-onboarding-pin-private-window-primary-button-label",
+              },
+              action: {
+                type: "PIN_FIREFOX_TO_TASKBAR",
+                data: {
+                  privatePin: true,
+                },
+                navigate: true,
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "mr2022-onboarding-secondary-skip-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+              has_arrow_icon: true,
+            },
+          },
+        },
+        {
+          id: "UPGRADE_DATA_RECOMMENDATION",
+          content: {
+            position: "split",
+            split_narrow_bkg_position: "-80px",
+            image_alt_text: {
+              string_id: "mr2022-onboarding-privacy-segmentation-image-alt",
+            },
+            progress_bar: "true",
+            background:
+              "url('chrome://activity-stream/content/data/content/assets/mr-privacysegmentation.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
+            logo: {},
+            title: {
+              string_id: "mr2022-onboarding-privacy-segmentation-title",
+            },
+            subtitle: {
+              string_id: "mr2022-onboarding-privacy-segmentation-subtitle",
+            },
+            cta_paragraph: {
+              text: {
+                string_id: "mr2022-onboarding-privacy-segmentation-text-cta",
+              },
+            },
+            primary_button: {
+              label: {
+                string_id:
+                  "mr2022-onboarding-privacy-segmentation-button-primary-label",
+              },
+              action: {
+                type: "SET_PREF",
+                data: {
+                  pref: {
+                    name: "browser.dataFeatureRecommendations.enabled",
+                    value: true,
+                  },
+                },
+                navigate: true,
+              },
+            },
+            additional_button: {
+              label: {
+                string_id:
+                  "mr2022-onboarding-privacy-segmentation-button-secondary-label",
+              },
+              style: "secondary",
+              action: {
+                type: "SET_PREF",
+                data: {
+                  pref: {
+                    name: "browser.dataFeatureRecommendations.enabled",
+                    value: false,
+                  },
+                },
+                navigate: true,
+              },
+            },
+          },
+        },
+        {
+          id: "UPGRADE_GRATITUDE",
+          content: {
+            position: "split",
+            progress_bar: "true",
+            split_narrow_bkg_position: "-228px",
+            image_alt_text: {
+              string_id: "mr2022-onboarding-gratitude-image-alt",
+            },
+            background:
+              "url('chrome://activity-stream/content/data/content/assets/mr-gratitude.svg') var(--mr-secondary-position) no-repeat var(--mr-screen-background-color)",
+            logo: {},
+            title: {
+              string_id: "mr2022-onboarding-gratitude-title",
+            },
+            subtitle: {
+              string_id: "mr2022-onboarding-gratitude-subtitle",
+            },
+            primary_button: {
+              label: {
+                string_id: "mr2022-onboarding-gratitude-primary-button-label",
+              },
+              action: {
+                type: "OPEN_FIREFOX_VIEW",
+                navigate: true,
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "mr2022-onboarding-gratitude-secondary-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+            },
+          },
+        },
+      ],
+    },
+  },
+  {
+    id: "FX_100_UPGRADE",
+    template: "spotlight",
+    targeting: "false",
+    content: {
+      template: "multistage",
+      id: "FX_100_UPGRADE",
+      transitions: true,
+      screens: [
+        {
+          id: "UPGRADE_PIN_FIREFOX",
+          content: {
+            logo: {
+              imageURL:
+                "chrome://activity-stream/content/data/content/assets/heart.webp",
+              height: "73px",
+            },
+            has_noodles: true,
+            title: {
+              fontSize: "36px",
+              string_id: "fx100-upgrade-thanks-header",
+            },
+            title_style: "fancy shine",
+            background:
+              "url('chrome://activity-stream/content/data/content/assets/confetti.svg') top / 100% no-repeat var(--in-content-page-background)",
+            subtitle: {
+              string_id: "fx100-upgrade-thanks-keep-body",
+            },
+            primary_button: {
+              label: {
+                string_id: "fx100-thank-you-pin-primary-button-label",
+              },
+              action: {
+                navigate: true,
+                type: "PIN_FIREFOX_TO_TASKBAR",
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "onboarding-not-now-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+            },
+          },
+        },
+      ],
+    },
+  },
+  {
+    id: "PB_NEWTAB_FOCUS_PROMO",
+    type: "default",
+    template: "pb_newtab",
+    groups: ["pbNewtab"],
+    content: {
+      infoBody: "fluent:about-private-browsing-info-description-simplified",
+      infoEnabled: true,
+      infoIcon: "chrome://global/skin/icons/indicator-private-browsing.svg",
+      infoLinkText: "fluent:about-private-browsing-learn-more-link",
+      infoTitle: "",
+      infoTitleEnabled: false,
+      promoEnabled: true,
+      promoType: "FOCUS",
+      promoHeader: "fluent:about-private-browsing-focus-promo-header-c",
+      promoImageLarge: "chrome://browser/content/assets/focus-promo.png",
+      promoLinkText: "fluent:about-private-browsing-focus-promo-cta",
+      promoLinkType: "button",
+      promoSectionStyle: "below-search",
+      promoTitle: "fluent:about-private-browsing-focus-promo-text-c",
+      promoTitleEnabled: true,
+      promoButton: {
+        action: {
+          type: "SHOW_SPOTLIGHT",
+          data: {
+            content: {
+              id: "FOCUS_PROMO",
+              template: "multistage",
+              modal: "tab",
+              backdrop: "transparent",
+              screens: [
+                {
+                  id: "DEFAULT_MODAL_UI",
+                  content: {
+                    logo: {
+                      imageURL:
+                        "chrome://browser/content/assets/focus-logo.svg",
+                      height: "48px",
+                    },
+                    title: {
+                      string_id: "spotlight-focus-promo-title",
+                    },
+                    subtitle: {
+                      string_id: "spotlight-focus-promo-subtitle",
+                    },
+                    dismiss_button: {
+                      action: {
+                        navigate: true,
+                      },
+                    },
+                    ios: {
+                      action: {
+                        data: {
+                          args: "https://app.adjust.com/167k4ih?campaign=firefox-desktop&adgroup=pb&creative=focus-omc172&redirect=https%3A%2F%2Fapps.apple.com%2Fus%2Fapp%2Ffirefox-focus-privacy-browser%2Fid1055677337",
+                          where: "tabshifted",
+                        },
+                        type: "OPEN_URL",
+                        navigate: true,
+                      },
+                    },
+                    android: {
+                      action: {
+                        data: {
+                          args: "https://app.adjust.com/167k4ih?campaign=firefox-desktop&adgroup=pb&creative=focus-omc172&redirect=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dorg.mozilla.focus",
+                          where: "tabshifted",
+                        },
+                        type: "OPEN_URL",
+                        navigate: true,
+                      },
+                    },
+                    tiles: {
+                      type: "mobile_downloads",
+                      data: {
+                        QR_code: {
+                          image_url:
+                            "chrome://browser/content/assets/focus-qr-code.svg",
+                          alt_text: {
+                            string_id: "spotlight-focus-promo-qr-code",
+                          },
+                        },
+                        marketplace_buttons: ["ios", "android"],
+                      },
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+    },
+    priority: 2,
+    frequency: {
+      custom: [
+        {
+          cap: 3,
+          period: 604800000, // Max 3 per week
+        },
+      ],
+      lifetime: 12,
+    },
+    // Exclude the next 2 messages: 1) Klar for en 2) Klar for de
+    targeting:
+      "!(region in [ 'DE', 'AT', 'CH'] && localeLanguageCode == 'en') && localeLanguageCode != 'de'",
+  },
+  {
+    id: "PB_NEWTAB_KLAR_PROMO",
+    type: "default",
+    template: "pb_newtab",
+    groups: ["pbNewtab"],
+    content: {
+      infoBody: "fluent:about-private-browsing-info-description-simplified",
+      infoEnabled: true,
+      infoIcon: "chrome://global/skin/icons/indicator-private-browsing.svg",
+      infoLinkText: "fluent:about-private-browsing-learn-more-link",
+      infoTitle: "",
+      infoTitleEnabled: false,
+      promoEnabled: true,
+      promoType: "FOCUS",
+      promoHeader: "fluent:about-private-browsing-focus-promo-header-c",
+      promoImageLarge: "chrome://browser/content/assets/focus-promo.png",
+      promoLinkText: "Download Firefox Klar",
+      promoLinkType: "button",
+      promoSectionStyle: "below-search",
+      promoTitle:
+        "Firefox Klar clears your history every time while blocking ads and trackers.",
+      promoTitleEnabled: true,
+      promoButton: {
+        action: {
+          type: "SHOW_SPOTLIGHT",
+          data: {
+            content: {
+              id: "KLAR_PROMO",
+              template: "multistage",
+              modal: "tab",
+              backdrop: "transparent",
+              screens: [
+                {
+                  id: "DEFAULT_MODAL_UI",
+                  order: 0,
+                  content: {
+                    logo: {
+                      imageURL:
+                        "chrome://browser/content/assets/focus-logo.svg",
+                      height: "48px",
+                    },
+                    title: "Get Firefox Klar",
+                    subtitle: {
+                      string_id: "spotlight-focus-promo-subtitle",
+                    },
+                    dismiss_button: {
+                      action: {
+                        navigate: true,
+                      },
+                    },
+                    ios: {
+                      action: {
+                        data: {
+                          args: "https://app.adjust.com/a8bxj8j?campaign=firefox-desktop&adgroup=pb&creative=focus-omc172&redirect=https%3A%2F%2Fapps.apple.com%2Fde%2Fapp%2Fklar-by-firefox%2Fid1073435754",
+                          where: "tabshifted",
+                        },
+                        type: "OPEN_URL",
+                        navigate: true,
+                      },
+                    },
+                    android: {
+                      action: {
+                        data: {
+                          args: "https://app.adjust.com/a8bxj8j?campaign=firefox-desktop&adgroup=pb&creative=focus-omc172&redirect=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dorg.mozilla.klar",
+                          where: "tabshifted",
+                        },
+                        type: "OPEN_URL",
+                        navigate: true,
+                      },
+                    },
+                    tiles: {
+                      type: "mobile_downloads",
+                      data: {
+                        QR_code: {
+                          image_url:
+                            "chrome://browser/content/assets/klar-qr-code.svg",
+                          alt_text: "Scan the QR code to get Firefox Klar",
+                        },
+                        marketplace_buttons: ["ios", "android"],
+                      },
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+    },
+    priority: 2,
+    frequency: {
+      custom: [
+        {
+          cap: 3,
+          period: 604800000, // Max 3 per week
+        },
+      ],
+      lifetime: 12,
+    },
+    targeting: "region in [ 'DE', 'AT', 'CH'] && localeLanguageCode == 'en'",
+  },
+  {
+    id: "PB_NEWTAB_KLAR_PROMO_DE",
+    type: "default",
+    template: "pb_newtab",
+    groups: ["pbNewtab"],
+    content: {
+      infoBody: "fluent:about-private-browsing-info-description-simplified",
+      infoEnabled: true,
+      infoIcon: "chrome://global/skin/icons/indicator-private-browsing.svg",
+      infoLinkText: "fluent:about-private-browsing-learn-more-link",
+      infoTitle: "",
+      infoTitleEnabled: false,
+      promoEnabled: true,
+      promoType: "FOCUS",
+      promoHeader: "fluent:about-private-browsing-focus-promo-header-c",
+      promoImageLarge: "chrome://browser/content/assets/focus-promo.png",
+      promoLinkText: "fluent:about-private-browsing-focus-promo-cta",
+      promoLinkType: "button",
+      promoSectionStyle: "below-search",
+      promoTitle: "fluent:about-private-browsing-focus-promo-text-c",
+      promoTitleEnabled: true,
+      promoButton: {
+        action: {
+          type: "SHOW_SPOTLIGHT",
+          data: {
+            content: {
+              id: "FOCUS_PROMO",
+              template: "multistage",
+              modal: "tab",
+              backdrop: "transparent",
+              screens: [
+                {
+                  id: "DEFAULT_MODAL_UI",
+                  content: {
+                    logo: {
+                      imageURL:
+                        "chrome://browser/content/assets/focus-logo.svg",
+                      height: "48px",
+                    },
+                    title: {
+                      string_id: "spotlight-focus-promo-title",
+                    },
+                    subtitle: {
+                      string_id: "spotlight-focus-promo-subtitle",
+                    },
+                    dismiss_button: {
+                      action: {
+                        navigate: true,
+                      },
+                    },
+                    ios: {
+                      action: {
+                        data: {
+                          args: "https://app.adjust.com/a8bxj8j?campaign=firefox-desktop&adgroup=pb&creative=focus-omc172&redirect=https%3A%2F%2Fapps.apple.com%2Fde%2Fapp%2Fklar-by-firefox%2Fid1073435754",
+                          where: "tabshifted",
+                        },
+                        type: "OPEN_URL",
+                        navigate: true,
+                      },
+                    },
+                    android: {
+                      action: {
+                        data: {
+                          args: "https://app.adjust.com/a8bxj8j?campaign=firefox-desktop&adgroup=pb&creative=focus-omc172&redirect=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dorg.mozilla.klar",
+                          where: "tabshifted",
+                        },
+                        type: "OPEN_URL",
+                        navigate: true,
+                      },
+                    },
+                    tiles: {
+                      type: "mobile_downloads",
+                      data: {
+                        QR_code: {
+                          image_url:
+                            "chrome://browser/content/assets/klar-qr-code.svg",
+                          alt_text: {
+                            string_id: "spotlight-focus-promo-qr-code",
+                          },
+                        },
+                        marketplace_buttons: ["ios", "android"],
+                      },
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+    },
+    priority: 2,
+    frequency: {
+      custom: [
+        {
+          cap: 3,
+          period: 604800000, // Max 3 per week
+        },
+      ],
+      lifetime: 12,
+    },
+    targeting: "localeLanguageCode == 'de'",
+  },
+  {
+    id: "PB_NEWTAB_PIN_PROMO",
+    template: "pb_newtab",
+    type: "default",
+    groups: ["pbNewtab"],
+    content: {
+      infoBody: "fluent:about-private-browsing-info-description-simplified",
+      infoEnabled: true,
+      infoIcon: "chrome://global/skin/icons/indicator-private-browsing.svg",
+      infoLinkText: "fluent:about-private-browsing-learn-more-link",
+      infoTitle: "",
+      infoTitleEnabled: false,
+      promoEnabled: true,
+      promoType: "PIN",
+      promoHeader: "fluent:about-private-browsing-pin-promo-header",
+      promoImageLarge:
+        "chrome://browser/content/assets/private-promo-asset.svg",
+      promoLinkText: "fluent:about-private-browsing-pin-promo-link-text",
+      promoLinkType: "button",
+      promoSectionStyle: "below-search",
+      promoTitle: "fluent:about-private-browsing-pin-promo-title",
+      promoTitleEnabled: true,
+      promoButton: {
+        action: {
+          type: "MULTI_ACTION",
+          data: {
+            actions: [
+              {
+                type: "SET_PREF",
+                data: {
+                  pref: {
+                    name: "browser.privateWindowSeparation.enabled",
+                    value: true,
+                  },
+                },
+              },
+              {
+                type: "PIN_FIREFOX_TO_TASKBAR",
+                data: {
+                  privatePin: true,
+                },
+              },
+              {
+                type: "BLOCK_MESSAGE",
+                data: {
+                  id: "PB_NEWTAB_PIN_PROMO",
+                },
+              },
+              {
+                type: "OPEN_ABOUT_PAGE",
+                data: { args: "privatebrowsing", where: "current" },
+              },
+            ],
+          },
+        },
+      },
+    },
+    priority: 3,
+    frequency: {
+      custom: [
+        {
+          cap: 3,
+          period: 604800000, // Max 3 per week
+        },
+      ],
+      lifetime: 12,
+    },
+    targeting: "!inMr2022Holdback && doesAppNeedPrivatePin",
+  },
+  {
+    id: "PB_NEWTAB_COOKIE_BANNERS_PROMO",
+    template: "pb_newtab",
+    type: "default",
+    groups: ["pbNewtab"],
+    content: {
+      infoBody: "fluent:about-private-browsing-info-description-simplified",
+      infoEnabled: true,
+      infoIcon: "chrome://global/skin/icons/indicator-private-browsing.svg",
+      infoLinkText: "fluent:about-private-browsing-learn-more-link",
+      infoTitle: "",
+      infoTitleEnabled: false,
+      promoEnabled: true,
+      promoType: "COOKIE_BANNERS",
+      promoHeader: "fluent:about-private-browsing-cookie-banners-promo-heading",
+      promoImageLarge:
+        "chrome://browser/content/assets/cookie-banners-begone.svg",
+      promoLinkText: "fluent:about-private-browsing-learn-more-link",
+      promoLinkType: "link",
+      promoSectionStyle: "below-search",
+      promoTitle: "fluent:about-private-browsing-cookie-banners-promo-body",
+      promoTitleEnabled: true,
+      promoButton: {
+        action: {
+          type: "MULTI_ACTION",
+          data: {
+            actions: [
+              {
+                type: "OPEN_URL",
+                data: {
+                  args: "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/cookie-banner-reduction",
+                  where: "tabshifted",
+                },
+              },
+              {
+                type: "BLOCK_MESSAGE",
+                data: {
+                  id: "PB_NEWTAB_COOKIE_BANNERS_PROMO",
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+    priority: 4,
+    frequency: {
+      custom: [
+        {
+          cap: 3,
+          period: 604800000, // Max 3 per week
+        },
+      ],
+      lifetime: 12,
+    },
+    targeting: `'cookiebanners.service.mode.privateBrowsing'|preferenceValue != 0 || 'cookiebanners.service.mode'|preferenceValue != 0`,
+  },
+  {
+    id: "INFOBAR_LAUNCH_ON_LOGIN",
+    groups: ["cfr"],
+    template: "infobar",
+    content: {
+      type: "global",
+      text: {
+        string_id: "launch-on-login-infobar-message",
+      },
+      buttons: [
+        {
+          label: {
+            string_id: "launch-on-login-learnmore",
+          },
+          supportPage: "make-firefox-automatically-open-when-you-start",
+          action: {
+            type: "CANCEL",
+          },
+        },
+        {
+          label: { string_id: "launch-on-login-infobar-reject-button" },
+          action: {
+            type: "CANCEL",
+          },
+        },
+        {
+          label: { string_id: "launch-on-login-infobar-confirm-button" },
+          primary: true,
+          action: {
+            type: "MULTI_ACTION",
+            data: {
+              actions: [
+                {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: "browser.startup.windowsLaunchOnLogin.disableLaunchOnLoginPrompt",
+                      value: true,
+                    },
+                  },
+                },
+                {
+                  type: "CONFIRM_LAUNCH_ON_LOGIN",
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+    frequency: {
+      lifetime: 1,
+    },
+    trigger: { id: "defaultBrowserCheck" },
+    targeting: `source == 'newtab'
+    && 'browser.startup.windowsLaunchOnLogin.disableLaunchOnLoginPrompt'|preferenceValue == false
+    && 'browser.startup.windowsLaunchOnLogin.enabled'|preferenceValue == true && isDefaultBrowser && !activeNotifications
+    && !launchOnLoginEnabled`,
+  },
+  {
+    id: "INFOBAR_LAUNCH_ON_LOGIN_FINAL",
+    groups: ["cfr"],
+    template: "infobar",
+    content: {
+      type: "global",
+      text: {
+        string_id: "launch-on-login-infobar-final-message",
+      },
+      buttons: [
+        {
+          label: {
+            string_id: "launch-on-login-learnmore",
+          },
+          supportPage: "make-firefox-automatically-open-when-you-start",
+          action: {
+            type: "CANCEL",
+          },
+        },
+        {
+          label: { string_id: "launch-on-login-infobar-final-reject-button" },
+          action: {
+            type: "SET_PREF",
+            data: {
+              pref: {
+                name: "browser.startup.windowsLaunchOnLogin.disableLaunchOnLoginPrompt",
+                value: true,
+              },
+            },
+          },
+        },
+        {
+          label: { string_id: "launch-on-login-infobar-confirm-button" },
+          primary: true,
+          action: {
+            type: "MULTI_ACTION",
+            data: {
+              actions: [
+                {
+                  type: "SET_PREF",
+                  data: {
+                    pref: {
+                      name: "browser.startup.windowsLaunchOnLogin.disableLaunchOnLoginPrompt",
+                      value: true,
+                    },
+                  },
+                },
+                {
+                  type: "CONFIRM_LAUNCH_ON_LOGIN",
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+    frequency: {
+      lifetime: 1,
+    },
+    trigger: { id: "defaultBrowserCheck" },
+    targeting: `source == 'newtab'
+    && 'browser.startup.windowsLaunchOnLogin.disableLaunchOnLoginPrompt'|preferenceValue == false
+    && 'browser.startup.windowsLaunchOnLogin.enabled'|preferenceValue == true && isDefaultBrowser && !activeNotifications
+    && messageImpressions.INFOBAR_LAUNCH_ON_LOGIN[messageImpressions.INFOBAR_LAUNCH_ON_LOGIN | length - 1]
+    && messageImpressions.INFOBAR_LAUNCH_ON_LOGIN[messageImpressions.INFOBAR_LAUNCH_ON_LOGIN | length - 1] <
+      currentDate|date - ${FOURTEEN_DAYS_IN_MS}
+    && !launchOnLoginEnabled`,
+  },
+  {
+    id: "FOX_DOODLE_SET_DEFAULT",
+    template: "spotlight",
+    groups: ["eco"],
+    skip_in_tests: "it fails unrelated tests",
+    content: {
+      backdrop: "transparent",
+      id: "FOX_DOODLE_SET_DEFAULT",
+      screens: [
+        {
+          id: "FOX_DOODLE_SET_DEFAULT_SCREEN",
+          content: {
+            logo: {
+              height: "125px",
+              imageURL:
+                "chrome://activity-stream/content/data/content/assets/fox-doodle-waving.gif",
+              reducedMotionImageURL:
+                "chrome://activity-stream/content/data/content/assets/fox-doodle-waving-static.png",
+            },
+            title: {
+              fontSize: "22px",
+              fontWeight: 590,
+              letterSpacing: 0,
+              paddingInline: "24px",
+              paddingBlock: "4px 0",
+              string_id: "fox-doodle-pin-headline",
+            },
+            subtitle: {
+              fontSize: "15px",
+              letterSpacing: 0,
+              lineHeight: "1.4",
+              marginBlock: "8px 16px",
+              paddingInline: "24px",
+              string_id: "fox-doodle-pin-body",
+            },
+            primary_button: {
+              action: {
+                navigate: true,
+                type: "SET_DEFAULT_BROWSER",
+              },
+              label: {
+                paddingBlock: "0",
+                paddingInline: "16px",
+                marginBlock: "4px 0",
+                string_id: "fox-doodle-pin-primary",
+              },
+            },
+            secondary_button: {
+              action: {
+                navigate: true,
+              },
+              label: {
+                marginBlock: "0 -20px",
+                string_id: "fox-doodle-pin-secondary",
+              },
+            },
+            dismiss_button: {
+              action: {
+                navigate: true,
+              },
+            },
+          },
+        },
+      ],
+      template: "multistage",
+      transitions: true,
+    },
+    frequency: {
+      lifetime: 2,
+    },
+    targeting:
+      "source == 'startup' && !isMajorUpgrade && !activeNotifications && !isDefaultBrowser && !willShowDefaultPrompt && (currentDate|date - profileAgeCreated|date) / 86400000 >= 28 && userPrefs.cfrFeatures == true",
+    trigger: {
+      id: "defaultBrowserCheck",
+    },
+  },
+  {
+    id: "TAIL_FOX_SET_DEFAULT",
+    template: "spotlight",
+    groups: ["eco"],
+    skip_in_tests: "it fails unrelated tests",
+    content: {
+      backdrop: "transparent",
+      id: "TAIL_FOX_SET_DEFAULT_CONTENT",
+      screens: [
+        {
+          id: "TAIL_FOX_SET_DEFAULT_SCREEN",
+          content: {
+            logo: {
+              height: "140px",
+              imageURL:
+                "chrome://activity-stream/content/data/content/assets/fox-doodle-tail.png",
+              reducedMotionImageURL:
+                "chrome://activity-stream/content/data/content/assets/fox-doodle-tail.png",
+            },
+            title: {
+              fontSize: "22px",
+              fontWeight: 590,
+              letterSpacing: 0,
+              paddingInline: "24px",
+              paddingBlock: "4px 0",
+              string_id: "tail-fox-spotlight-title",
+            },
+            subtitle: {
+              fontSize: "15px",
+              letterSpacing: 0,
+              lineHeight: "1.4",
+              marginBlock: "8px 16px",
+              paddingInline: "24px",
+              string_id: "tail-fox-spotlight-subtitle",
+            },
+            primary_button: {
+              action: {
+                navigate: true,
+                type: "SET_DEFAULT_BROWSER",
+              },
+              label: {
+                paddingBlock: "0",
+                paddingInline: "16px",
+                marginBlock: "4px 0",
+                string_id: "tail-fox-spotlight-primary-button",
+              },
+            },
+            secondary_button: {
+              action: {
+                navigate: true,
+              },
+              label: {
+                marginBlock: "0 -20px",
+                string_id: "tail-fox-spotlight-secondary-button",
+              },
+            },
+            dismiss_button: {
+              action: {
+                navigate: true,
+              },
+            },
+          },
+        },
+      ],
+      template: "multistage",
+      transitions: true,
+    },
+    frequency: {
+      lifetime: 1,
+    },
+    targeting:
+      "source == 'startup' && !isMajorUpgrade && !activeNotifications && !isDefaultBrowser && !willShowDefaultPrompt && (currentDate|date - profileAgeCreated|date) / 86400000 <= 28 && (currentDate|date - profileAgeCreated|date) / 86400000 >= 7 && userPrefs.cfrFeatures == true",
+    trigger: {
+      id: "defaultBrowserCheck",
+    },
+  },
+];
+
+// Eventually, move Feature Callout messages to their own provider
+const ONBOARDING_MESSAGES = () =>
+  BASE_MESSAGES().concat(FeatureCalloutMessages.getMessages());
+
+export const OnboardingMessageProvider = {
+  async getExtraAttributes() {
+    const [header, button_label] = await L10N.formatMessages([
+      { id: "onboarding-welcome-header" },
+      { id: "onboarding-start-browsing-button-label" },
+    ]);
+    return { header: header.value, button_label: button_label.value };
+  },
+  async getMessages() {
+    const messages = await this.translateMessages(await ONBOARDING_MESSAGES());
+    return messages;
+  },
+  async getUntranslatedMessages() {
+    // This is helpful for jsonSchema testing - since we are localizing in the provider
+    const messages = await ONBOARDING_MESSAGES();
+    return messages;
+  },
+  async translateMessages(messages) {
+    let translatedMessages = [];
+    for (const msg of messages) {
+      let translatedMessage = { ...msg };
+
+      // If the message has no content, do not attempt to translate it
+      if (!translatedMessage.content) {
+        translatedMessages.push(translatedMessage);
+        continue;
+      }
+
+      // Translate any secondary buttons separately
+      if (msg.content.secondary_button) {
+        const [secondary_button_string] = await L10N.formatMessages([
+          { id: msg.content.secondary_button.label.string_id },
+        ]);
+        translatedMessage.content.secondary_button.label =
+          secondary_button_string.value;
+      }
+      if (msg.content.header) {
+        const [header_string] = await L10N.formatMessages([
+          { id: msg.content.header.string_id },
+        ]);
+        translatedMessage.content.header = header_string.value;
+      }
+      translatedMessages.push(translatedMessage);
+    }
+    return translatedMessages;
+  },
+  async _doesAppNeedPin(privateBrowsing = false) {
+    const needPin = await lazy.ShellService.doesAppNeedPin(privateBrowsing);
+    return needPin;
+  },
+  async _doesAppNeedDefault() {
+    let checkDefault = Services.prefs.getBoolPref(
+      "browser.shell.checkDefaultBrowser",
+      false
+    );
+    let isDefault = await lazy.ShellService.isDefaultBrowser();
+    return checkDefault && !isDefault;
+  },
+  _shouldShowPrivacySegmentationScreen() {
+    // Fall back to pref: browser.privacySegmentation.preferences.show
+    return lazy.NimbusFeatures.majorRelease2022.getVariable(
+      "feltPrivacyShowPreferencesSection"
+    );
+  },
+  _doesHomepageNeedReset() {
+    return (
+      Services.prefs.prefHasUserValue(HOMEPAGE_PREF) ||
+      Services.prefs.prefHasUserValue(NEWTAB_PREF)
+    );
+  },
+
+  async getUpgradeMessage() {
+    let message = (await OnboardingMessageProvider.getMessages()).find(
+      ({ id }) => id === "FX_MR_106_UPGRADE"
+    );
+
+    let { content } = message;
+    // Helper to find screens and remove them where applicable.
+    function removeScreens(check) {
+      const { screens } = content;
+      for (let i = 0; i < screens?.length; i++) {
+        if (check(screens[i])) {
+          screens.splice(i--, 1);
+        }
+      }
+    }
+
+    // Helper to prepare mobile download screen content
+    function prepareMobileDownload() {
+      let mobileContent = content.screens.find(
+        screen => screen.id === "UPGRADE_MOBILE_DOWNLOAD"
+      )?.content;
+
+      if (!mobileContent) {
+        return;
+      }
+      if (!lazy.BrowserUtils.sendToDeviceEmailsSupported()) {
+        // If send to device emails are not supported for a user's locale,
+        // remove the send to device link and update the screen text
+        delete mobileContent.cta_paragraph.action;
+        mobileContent.cta_paragraph.text = {
+          string_id: "mr2022-onboarding-no-mobile-download-cta-text",
+        };
+      }
+      // Update CN specific QRCode url
+      if (AppConstants.isChinaRepack()) {
+        mobileContent.hero_image.url = `${mobileContent.hero_image.url.slice(
+          0,
+          mobileContent.hero_image.url.indexOf(".svg")
+        )}-cn.svg`;
+      }
+    }
+
+    let pinScreen = content.screens?.find(
+      screen => screen.id === "UPGRADE_PIN_FIREFOX"
+    );
+    const needPin = await this._doesAppNeedPin();
+    const needDefault = await this._doesAppNeedDefault();
+    const needPrivatePin =
+      !lazy.hidePrivatePin && (await this._doesAppNeedPin(true));
+    const showSegmentation = this._shouldShowPrivacySegmentationScreen();
+
+    //If a user has Firefox as default remove import screen
+    if (!needDefault) {
+      removeScreens(screen =>
+        screen.id?.startsWith("UPGRADE_IMPORT_SETTINGS_EMBEDDED")
+      );
+    }
+
+    // If already pinned, convert "pin" screen to "welcome" with desired action.
+    let removeDefault = !needDefault;
+    // If user doesn't need pin, update screen to set "default" or "get started" configuration
+    if (!needPin && pinScreen) {
+      // don't need to show the checkbox
+      delete pinScreen.content.checkbox;
+
+      removeDefault = true;
+      let primary = pinScreen.content.primary_button;
+      if (needDefault) {
+        pinScreen.id = "UPGRADE_ONLY_DEFAULT";
+        pinScreen.content.subtitle = {
+          string_id: "mr2022-onboarding-existing-set-default-only-subtitle",
+        };
+        primary.label.string_id =
+          "mr2022-onboarding-set-default-primary-button-label";
+
+        // The "pin" screen will now handle "default" so remove other "default."
+        primary.action.type = "SET_DEFAULT_BROWSER";
+      } else {
+        pinScreen.id = "UPGRADE_GET_STARTED";
+        pinScreen.content.subtitle = {
+          string_id: "mr2022-onboarding-get-started-primary-subtitle",
+        };
+        primary.label = {
+          string_id: "mr2022-onboarding-get-started-primary-button-label",
+        };
+        delete primary.action.type;
+      }
+    }
+
+    // If a user has Firefox private pinned remove pin private window screen
+    // We also remove standalone pin private window screen if a user doesn't have
+    // Firefox pinned in which case the option is shown as checkbox with UPGRADE_PIN_FIREFOX screen
+    if (!needPrivatePin || needPin) {
+      removeScreens(screen =>
+        screen.id?.startsWith("UPGRADE_PIN_PRIVATE_WINDOW")
+      );
+    }
+
+    if (!showSegmentation) {
+      removeScreens(screen =>
+        screen.id?.startsWith("UPGRADE_DATA_RECOMMENDATION")
+      );
+    }
+
+    //If privatePin, remove checkbox from pinscreen
+    if (!needPrivatePin) {
+      delete content.screens?.find(
+        screen => screen.id === "UPGRADE_PIN_FIREFOX"
+      )?.content?.checkbox;
+    }
+
+    if (removeDefault) {
+      removeScreens(screen => screen.id?.startsWith("UPGRADE_SET_DEFAULT"));
+    }
+
+    // Remove mobile download screen if user has sync enabled
+    if (lazy.usesFirefoxSync && lazy.mobileDevices > 0) {
+      removeScreens(screen => screen.id === "UPGRADE_MOBILE_DOWNLOAD");
+    } else {
+      prepareMobileDownload();
+    }
+
+    return message;
+  },
+};
diff --git a/browser/components/asrouter/modules/PageEventManager.sys.mjs b/browser/components/asrouter/modules/PageEventManager.sys.mjs
new file mode 100644
index 0000000000..44f1293385
--- /dev/null
+++ b/browser/components/asrouter/modules/PageEventManager.sys.mjs
@@ -0,0 +1,135 @@
+/* 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/. */
+
+/**
+ * Methods for setting up and tearing down page event listeners. These are used
+ * to dismiss Feature Callouts when the callout's anchor element is clicked.
+ */
+export class PageEventManager {
+  /**
+   * A set of parameters defining a page event listener.
+   * @typedef {Object} PageEventListenerParams
+   * @property {String} type Event type string e.g. `click`
+   * @property {String} [selectors] Target selector, e.g. `tag.class, #id[attr]`
+   * @property {PageEventListenerOptions} [options] addEventListener options
+   *
+   * @typedef {Object} PageEventListenerOptions
+   * @property {Boolean} [capture] Use event capturing phase?
+   * @property {Boolean} [once] Remove listener after first event?
+   * @property {Boolean} [preventDefault] Inverted value for `passive` option
+   * @property {Number} [interval] Used only for `timeout` and `interval` event
+   *   types. These don't set up real event listeners, but instead invoke the
+   *   action on a timer.
+   *
+   * @typedef {Object} PageEventListener
+   * @property {Function} callback Function to call when event is triggered
+   * @property {AbortController} controller Handle for aborting the listener
+   *
+   * @typedef {Object} PageEvent
+   * @property {String} type Event type string e.g. `click`
+   * @property {Element} [target] Event target
+   */
+
+  /**
+   * Maps event listener params to their PageEventListeners, so they can be
+   * called and cancelled.
+   * @type {Map<PageEventListenerParams, PageEventListener>}
+   */
+  _listeners = new Map();
+
+  /**
+   * @param {Window} win Window containing the document to listen to
+   */
+  constructor(win) {
+    this.win = win;
+    this.doc = win.document;
+  }
+
+  /**
+   * Adds a page event listener.
+   * @param {PageEventListenerParams} params
+   * @param {Function} callback Function to call when event is triggered
+   */
+  on(params, callback) {
+    if (this._listeners.has(params)) {
+      return;
+    }
+    const { type, selectors, options = {} } = params;
+    const listener = { callback };
+    if (selectors) {
+      const controller = new AbortController();
+      const opt = {
+        capture: !!options.capture,
+        passive: !options.preventDefault,
+        signal: controller.signal,
+      };
+      const targets = this.doc.querySelectorAll(selectors);
+      for (const target of targets) {
+        target.addEventListener(type, callback, opt);
+      }
+      listener.controller = controller;
+    } else if (["timeout", "interval"].includes(type) && options.interval) {
+      let interval;
+      const abort = () => this.win.clearInterval(interval);
+      const onInterval = () => {
+        callback({ type, target: type });
+        if (type === "timeout") {
+          abort();
+        }
+      };
+      interval = this.win.setInterval(onInterval, options.interval);
+      listener.callback = onInterval;
+      listener.controller = { abort };
+    }
+    this._listeners.set(params, listener);
+  }
+
+  /**
+   * Removes a page event listener.
+   * @param {PageEventListenerParams} params
+   */
+  off(params) {
+    const listener = this._listeners.get(params);
+    if (!listener) {
+      return;
+    }
+    listener.controller?.abort();
+    this._listeners.delete(params);
+  }
+
+  /**
+   * Adds a page event listener that is removed after the first event.
+   * @param {PageEventListenerParams} params
+   * @param {Function} callback Function to call when event is triggered
+   */
+  once(params, callback) {
+    const wrappedCallback = (...args) => {
+      this.off(params);
+      callback(...args);
+    };
+    this.on(params, wrappedCallback);
+  }
+
+  /**
+   * Removes all page event listeners.
+   */
+  clear() {
+    for (const listener of this._listeners.values()) {
+      listener.controller?.abort();
+    }
+    this._listeners.clear();
+  }
+
+  /**
+   * Calls matching page event listeners. A way to dispatch a "fake" event.
+   * @param {PageEvent} event
+   */
+  emit(event) {
+    for (const [params, listener] of this._listeners) {
+      if (params.type === event.type) {
+        listener.callback(event);
+      }
+    }
+  }
+}
diff --git a/browser/components/asrouter/modules/PanelTestProvider.sys.mjs b/browser/components/asrouter/modules/PanelTestProvider.sys.mjs
new file mode 100644
index 0000000000..7a7ff1e1fc
--- /dev/null
+++ b/browser/components/asrouter/modules/PanelTestProvider.sys.mjs
@@ -0,0 +1,771 @@
+/* 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/. */
+
+const TWO_DAYS = 2 * 24 * 3600 * 1000;
+
+const MESSAGES = () => [
+  {
+    id: "WNP_THANK_YOU",
+    template: "update_action",
+    content: {
+      action: {
+        id: "moments-wnp",
+        data: {
+          url: "https://www.mozilla.org/%LOCALE%/etc/firefox/retention/thank-you-a/",
+          expireDelta: TWO_DAYS,
+        },
+      },
+    },
+    trigger: { id: "momentsUpdate" },
+  },
+  {
+    id: "WHATS_NEW_FINGERPRINTER_COUNTER_ALT",
+    template: "whatsnew_panel_message",
+    order: 6,
+    content: {
+      bucket_id: "WHATS_NEW_72",
+      published_date: 1574776601000,
+      title: "Title",
+      icon_url:
+        "chrome://activity-stream/content/data/content/assets/protection-report-icon.png",
+      icon_alt: { string_id: "cfr-badge-reader-label-newfeature" },
+      body: "Message body",
+      link_text: "Click here",
+      cta_url: "about:blank",
+      cta_type: "OPEN_PROTECTION_REPORT",
+    },
+    targeting: `firefoxVersion >= 72`,
+    trigger: { id: "whatsNewPanelOpened" },
+  },
+  {
+    id: "WHATS_NEW_70_1",
+    template: "whatsnew_panel_message",
+    order: 3,
+    content: {
+      bucket_id: "WHATS_NEW_70_1",
+      published_date: 1560969794394,
+      title: "Protection Is Our Focus",
+      icon_url:
+        "chrome://activity-stream/content/data/content/assets/whatsnew-send-icon.png",
+      icon_alt: "Firefox Send Logo",
+      body: "The New Enhanced Tracking Protection, gives you the best level of protection and performance. Discover how this version is the safest version of firefox ever made.",
+      cta_url: "https://blog.mozilla.org/",
+      cta_type: "OPEN_URL",
+    },
+    targeting: `firefoxVersion > 69`,
+    trigger: { id: "whatsNewPanelOpened" },
+  },
+  {
+    id: "WHATS_NEW_70_2",
+    template: "whatsnew_panel_message",
+    order: 1,
+    content: {
+      bucket_id: "WHATS_NEW_70_1",
+      published_date: 1560969794394,
+      title: "Another thing new in Firefox 70",
+      body: "The New Enhanced Tracking Protection, gives you the best level of protection and performance. Discover how this version is the safest version of firefox ever made.",
+      link_text: "Learn more on our blog",
+      cta_url: "https://blog.mozilla.org/",
+      cta_type: "OPEN_URL",
+    },
+    targeting: `firefoxVersion > 69`,
+    trigger: { id: "whatsNewPanelOpened" },
+  },
+  {
+    id: "WHATS_NEW_SEARCH_SHORTCUTS_84",
+    template: "whatsnew_panel_message",
+    order: 2,
+    content: {
+      bucket_id: "WHATS_NEW_SEARCH_SHORTCUTS_84",
+      published_date: 1560969794394,
+      title: "Title",
+      icon_url: "chrome://global/skin/icons/check.svg",
+      icon_alt: "",
+      body: "Message content",
+      cta_url:
+        "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/search-shortcuts",
+      cta_type: "OPEN_URL",
+      link_text: "Click here",
+    },
+    targeting: "firefoxVersion >= 84",
+    trigger: {
+      id: "whatsNewPanelOpened",
+    },
+  },
+  {
+    id: "WHATS_NEW_PIONEER_82",
+    template: "whatsnew_panel_message",
+    order: 1,
+    content: {
+      bucket_id: "WHATS_NEW_PIONEER_82",
+      published_date: 1603152000000,
+      title: "Put your data to work for a better internet",
+      body: "Contribute your data to Mozilla's Pioneer program to help researchers understand pressing technology issues like misinformation, data privacy, and ethical AI.",
+      cta_url: "about:blank",
+      cta_where: "tab",
+      cta_type: "OPEN_ABOUT_PAGE",
+      link_text: "Join Pioneer",
+    },
+    targeting: "firefoxVersion >= 82",
+    trigger: {
+      id: "whatsNewPanelOpened",
+    },
+  },
+  {
+    id: "WHATS_NEW_MEDIA_SESSION_82",
+    template: "whatsnew_panel_message",
+    order: 3,
+    content: {
+      bucket_id: "WHATS_NEW_MEDIA_SESSION_82",
+      published_date: 1603152000000,
+      title: "Title",
+      body: "Message content",
+      cta_url:
+        "https://support.mozilla.org/1/firefox/%VERSION%/%OS%/%LOCALE%/media-keyboard-control",
+      cta_type: "OPEN_URL",
+      link_text: "Click here",
+    },
+    targeting: "firefoxVersion >= 82",
+    trigger: {
+      id: "whatsNewPanelOpened",
+    },
+  },
+  {
+    id: "WHATS_NEW_69_1",
+    template: "whatsnew_panel_message",
+    order: 1,
+    content: {
+      bucket_id: "WHATS_NEW_69_1",
+      published_date: 1557346235089,
+      title: "Something new in Firefox 69",
+      body: "The New Enhanced Tracking Protection, gives you the best level of protection and performance. Discover how this version is the safest version of firefox ever made.",
+      link_text: "Learn more on our blog",
+      cta_url: "https://blog.mozilla.org/",
+      cta_type: "OPEN_URL",
+    },
+    targeting: `firefoxVersion > 68`,
+    trigger: { id: "whatsNewPanelOpened" },
+  },
+  {
+    id: "PERSONALIZED_CFR_MESSAGE",
+    template: "cfr_doorhanger",
+    groups: ["cfr"],
+    content: {
+      layout: "icon_and_message",
+      category: "cfrFeatures",
+      bucket_id: "PERSONALIZED_CFR_MESSAGE",
+      notification_text: "Personalized CFR Recommendation",
+      heading_text: { string_id: "cfr-doorhanger-bookmark-fxa-header" },
+      info_icon: {
+        label: {
+          attributes: {
+            tooltiptext: { string_id: "cfr-doorhanger-fxa-close-btn-tooltip" },
+          },
+        },
+        sumo_path: "https://example.com",
+      },
+      text: { string_id: "cfr-doorhanger-bookmark-fxa-body" },
+      icon: "chrome://branding/content/icon64.png",
+      icon_class: "cfr-doorhanger-large-icon",
+      persistent_doorhanger: true,
+      buttons: {
+        primary: {
+          label: { string_id: "cfr-doorhanger-milestone-ok-button" },
+          action: {
+            type: "OPEN_URL",
+            data: {
+              args: "https://send.firefox.com/login/?utm_source=activity-stream&entrypoint=activity-stream-cfr-pdf",
+              where: "tabshifted",
+            },
+          },
+        },
+        secondary: [
+          {
+            label: { string_id: "cfr-doorhanger-extension-cancel-button" },
+            action: { type: "CANCEL" },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-never-show-recommendation",
+            },
+          },
+          {
+            label: {
+              string_id: "cfr-doorhanger-extension-manage-settings-button",
+            },
+            action: {
+              type: "OPEN_PREFERENCES_PAGE",
+              data: { category: "general-cfrfeatures" },
+            },
+          },
+        ],
+      },
+    },
+    targeting: "scores.PERSONALIZED_CFR_MESSAGE.score > scoreThreshold",
+    trigger: {
+      id: "openURL",
+      patterns: ["*://*/*.pdf"],
+    },
+  },
+  {
+    id: "MULTISTAGE_SPOTLIGHT_MESSAGE",
+    groups: ["panel-test-provider"],
+    template: "spotlight",
+    content: {
+      id: "MULTISTAGE_SPOTLIGHT_MESSAGE",
+      template: "multistage",
+      backdrop: "transparent",
+      transitions: true,
+      screens: [
+        {
+          id: "AW_PIN_FIREFOX",
+          content: {
+            has_noodles: true,
+            title: {
+              string_id: "onboarding-easy-setup-security-and-privacy-title",
+            },
+            logo: {
+              imageURL: "chrome://browser/content/callout-tab-pickup.svg",
+              darkModeImageURL:
+                "chrome://browser/content/callout-tab-pickup-dark.svg",
+              reducedMotionImageURL:
+                "chrome://activity-stream/content/data/content/assets/glyph-pin-16.svg",
+              darkModeReducedMotionImageURL:
+                "chrome://activity-stream/content/data/content/assets/firefox.svg",
+              alt: "sample alt text",
+            },
+            hero_text: {
+              string_id: "fx100-thank-you-hero-text",
+            },
+            primary_button: {
+              label: {
+                string_id: "mr2022-onboarding-pin-primary-button-label",
+              },
+              action: {
+                navigate: true,
+                type: "PIN_FIREFOX_TO_TASKBAR",
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "onboarding-not-now-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+            },
+            dismiss_button: {
+              action: {
+                dismiss: true,
+              },
+            },
+          },
+        },
+        {
+          id: "AW_SET_DEFAULT",
+          content: {
+            has_noodles: true,
+            logo: {
+              imageURL: "chrome://browser/content/logos/vpn-promo-logo.svg",
+              height: "100px",
+            },
+            title: {
+              fontSize: "36px",
+              fontWeight: 276,
+              string_id: "mr2022-onboarding-set-default-title",
+            },
+            subtitle: {
+              string_id: "mr2022-onboarding-set-default-subtitle",
+            },
+            primary_button: {
+              label: {
+                string_id: "mr2022-onboarding-set-default-primary-button-label",
+              },
+              action: {
+                navigate: true,
+                type: "SET_DEFAULT_BROWSER",
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "onboarding-not-now-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+            },
+          },
+        },
+        {
+          id: "BACKGROUND_IMAGE",
+          content: {
+            background: "#000",
+            text_color: "light",
+            progress_bar: true,
+            logo: {
+              imageURL:
+                "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/ms-images/a3c640c8-7594-4bb2-bc18-8b4744f3aaf2.gif",
+            },
+            title: "A dialog with a background",
+            subtitle:
+              "The text color is configurable and a progress bar style step indicator is used",
+            primary_button: {
+              label: "Continue",
+              action: {
+                navigate: true,
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "onboarding-not-now-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+            },
+          },
+        },
+        {
+          id: "BACKGROUND_COLOR",
+          content: {
+            background: "white",
+            progress_bar: true,
+            logo: {
+              height: "200px",
+              imageURL: "",
+            },
+            title: {
+              fontSize: "36px",
+              fontWeight: 276,
+              raw: "Peace of mind.",
+            },
+            title_style: "fancy shine",
+            text_color: "dark",
+            subtitle: "Using progress bar style step indicator",
+            primary_button: {
+              label: "Continue",
+              action: {
+                navigate: true,
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "onboarding-not-now-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+            },
+          },
+        },
+      ],
+    },
+    frequency: { lifetime: 3 },
+    trigger: { id: "defaultBrowserCheck" },
+  },
+  {
+    id: "PB_FOCUS_PROMO",
+    groups: ["panel-test-provider"],
+    template: "spotlight",
+    content: {
+      template: "multistage",
+      backdrop: "transparent",
+      screens: [
+        {
+          id: "PBM_FIREFOX_FOCUS",
+          order: 0,
+          content: {
+            logo: {
+              imageURL: "chrome://browser/content/assets/focus-logo.svg",
+              height: "48px",
+            },
+            title: {
+              string_id: "spotlight-focus-promo-title",
+            },
+            subtitle: {
+              string_id: "spotlight-focus-promo-subtitle",
+            },
+            dismiss_button: {
+              action: {
+                dismiss: true,
+              },
+            },
+            ios: {
+              action: {
+                data: {
+                  args: "https://app.adjust.com/167k4ih?campaign=firefox-desktop&adgroup=pb&creative=focus-omc172&redirect=https%3A%2F%2Fapps.apple.com%2Fus%2Fapp%2Ffirefox-focus-privacy-browser%2Fid1055677337",
+                  where: "tabshifted",
+                },
+                type: "OPEN_URL",
+                navigate: true,
+              },
+            },
+            android: {
+              action: {
+                data: {
+                  args: "https://app.adjust.com/167k4ih?campaign=firefox-desktop&adgroup=pb&creative=focus-omc172&redirect=https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dorg.mozilla.focus",
+                  where: "tabshifted",
+                },
+                type: "OPEN_URL",
+                navigate: true,
+              },
+            },
+            email_link: {
+              action: {
+                data: {
+                  args: "https://mozilla.org",
+                  where: "tabshifted",
+                },
+                type: "OPEN_URL",
+                navigate: true,
+              },
+            },
+            tiles: {
+              type: "mobile_downloads",
+              data: {
+                QR_code: {
+                  image_url:
+                    "chrome://browser/content/assets/focus-qr-code.svg",
+                  alt_text: {
+                    string_id: "spotlight-focus-promo-qr-code",
+                  },
+                },
+                email: {
+                  link_text: "Email yourself a link",
+                },
+                marketplace_buttons: ["ios", "android"],
+              },
+            },
+          },
+        },
+      ],
+    },
+    trigger: { id: "defaultBrowserCheck" },
+  },
+  {
+    id: "PB_NEWTAB_VPN_PROMO",
+    template: "pb_newtab",
+    content: {
+      promoEnabled: true,
+      promoType: "VPN",
+      infoEnabled: true,
+      infoBody: "fluent:about-private-browsing-info-description-private-window",
+      infoLinkText: "fluent:about-private-browsing-learn-more-link",
+      infoTitleEnabled: false,
+      promoLinkType: "button",
+      promoLinkText: "fluent:about-private-browsing-prominent-cta",
+      promoSectionStyle: "below-search",
+      promoHeader: "fluent:about-private-browsing-get-privacy",
+      promoTitle: "fluent:about-private-browsing-hide-activity-1",
+      promoTitleEnabled: true,
+      promoImageLarge: "chrome://browser/content/assets/moz-vpn.svg",
+      promoButton: {
+        action: {
+          type: "OPEN_URL",
+          data: {
+            args: "https://vpn.mozilla.org/",
+          },
+        },
+      },
+    },
+    groups: ["panel-test-provider"],
+    targeting: "region != 'CN' && !hasActiveEnterprisePolicies",
+    frequency: { lifetime: 3 },
+  },
+  {
+    id: "PB_PIN_PROMO",
+    template: "pb_newtab",
+    groups: ["pbNewtab"],
+    content: {
+      infoBody: "fluent:about-private-browsing-info-description-simplified",
+      infoEnabled: true,
+      infoIcon: "chrome://global/skin/icons/indicator-private-browsing.svg",
+      infoLinkText: "fluent:about-private-browsing-learn-more-link",
+      infoTitle: "",
+      infoTitleEnabled: false,
+      promoEnabled: true,
+      promoType: "PIN",
+      promoHeader: "Private browsing freedom in one click",
+      promoImageLarge:
+        "chrome://browser/content/assets/private-promo-asset.svg",
+      promoLinkText: "Pin To Taskbar",
+      promoLinkType: "button",
+      promoSectionStyle: "below-search",
+      promoTitle:
+        "No saved cookies or history, right from your desktop. Browse like no one’s watching.",
+      promoTitleEnabled: true,
+      promoButton: {
+        action: {
+          type: "MULTI_ACTION",
+          data: {
+            actions: [
+              {
+                type: "SET_PREF",
+                data: {
+                  pref: {
+                    name: "browser.privateWindowSeparation.enabled",
+                    value: true,
+                  },
+                },
+              },
+              {
+                type: "PIN_FIREFOX_TO_TASKBAR",
+              },
+              {
+                type: "BLOCK_MESSAGE",
+                data: {
+                  id: "PB_PIN_PROMO",
+                },
+              },
+              {
+                type: "OPEN_ABOUT_PAGE",
+                data: { args: "privatebrowsing", where: "current" },
+              },
+            ],
+          },
+        },
+      },
+    },
+    priority: 3,
+    frequency: {
+      custom: [
+        {
+          cap: 3,
+          period: 604800000, // Max 3 per week
+        },
+      ],
+      lifetime: 12,
+    },
+    targeting:
+      "region != 'CN' && !hasActiveEnterprisePolicies && doesAppNeedPin",
+  },
+  {
+    id: "TEST_TOAST_NOTIFICATION1",
+    weight: 100,
+    template: "toast_notification",
+    content: {
+      title: {
+        string_id: "cfr-doorhanger-bookmark-fxa-header",
+      },
+      body: "Body",
+      image_url:
+        "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/ms-images/a3c640c8-7594-4bb2-bc18-8b4744f3aaf2.gif",
+      launch_url: "https://mozilla.org",
+      requireInteraction: true,
+      actions: [
+        {
+          action: "dismiss",
+          title: "Dismiss",
+          windowsSystemActivationType: true,
+        },
+        {
+          action: "snooze",
+          title: "Snooze",
+          windowsSystemActivationType: true,
+        },
+        { action: "callback", title: "Callback" },
+      ],
+      tag: "test_toast_notification",
+    },
+    groups: ["panel-test-provider"],
+    targeting: "!hasActiveEnterprisePolicies",
+    trigger: { id: "backgroundTaskMessage" },
+    frequency: { lifetime: 3 },
+  },
+  {
+    id: "TEST_TOAST_NOTIFICATION2",
+    weight: 100,
+    template: "toast_notification",
+    content: {
+      title: "Launch action on toast click and on action button click",
+      body: "Body",
+      image_url:
+        "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/ms-images/a3c640c8-7594-4bb2-bc18-8b4744f3aaf2.gif",
+      launch_action: {
+        type: "OPEN_URL",
+        data: { args: "https://mozilla.org", where: "window" },
+      },
+      requireInteraction: true,
+      actions: [
+        {
+          action: "dismiss",
+          title: "Dismiss",
+          windowsSystemActivationType: true,
+        },
+        {
+          action: "snooze",
+          title: "Snooze",
+          windowsSystemActivationType: true,
+        },
+        {
+          action: "private",
+          title: "Private Window",
+          launch_action: { type: "OPEN_PRIVATE_BROWSER_WINDOW" },
+        },
+      ],
+      tag: "test_toast_notification",
+    },
+    groups: ["panel-test-provider"],
+    targeting: "!hasActiveEnterprisePolicies",
+    trigger: { id: "backgroundTaskMessage" },
+    frequency: { lifetime: 3 },
+  },
+  {
+    id: "MR2022_BACKGROUND_UPDATE_TOAST_NOTIFICATION",
+    weight: 100,
+    template: "toast_notification",
+    content: {
+      title: {
+        string_id: "mr2022-background-update-toast-title",
+      },
+      body: {
+        string_id: "mr2022-background-update-toast-text",
+      },
+      image_url:
+        "https://firefox-settings-attachments.cdn.mozilla.net/main-workspace/ms-images/673d2808-e5d8-41b9-957e-f60d53233b97.png",
+      requireInteraction: true,
+      actions: [
+        {
+          action: "open",
+          title: {
+            string_id: "mr2022-background-update-toast-primary-button-label",
+          },
+        },
+        {
+          action: "snooze",
+          windowsSystemActivationType: true,
+          title: {
+            string_id: "mr2022-background-update-toast-secondary-button-label",
+          },
+        },
+      ],
+      tag: "mr2022_background_update",
+    },
+    groups: ["panel-test-provider"],
+    targeting: "!hasActiveEnterprisePolicies",
+    trigger: { id: "backgroundTaskMessage" },
+    frequency: { lifetime: 3 },
+  },
+  {
+    id: "IMPORT_SETTINGS_EMBEDDED",
+    groups: ["panel-test-provider"],
+    template: "spotlight",
+    content: {
+      template: "multistage",
+      backdrop: "transparent",
+      screens: [
+        {
+          id: "IMPORT_SETTINGS_EMBEDDED",
+          content: {
+            logo: {},
+            tiles: { type: "migration-wizard" },
+            progress_bar: true,
+            migrate_start: {
+              action: {},
+            },
+            migrate_close: {
+              action: {
+                navigate: true,
+              },
+            },
+            secondary_button: {
+              label: {
+                string_id: "mr2022-onboarding-secondary-skip-button-label",
+              },
+              action: {
+                navigate: true,
+              },
+              has_arrow_icon: true,
+            },
+          },
+        },
+      ],
+    },
+  },
+  {
+    id: "TEST_FEATURE_TOUR",
+    template: "feature_callout",
+    groups: [],
+    content: {
+      id: "TEST_FEATURE_TOUR",
+      template: "multistage",
+      backdrop: "transparent",
+      transitions: false,
+      disableHistoryUpdates: true,
+      screens: [
+        {
+          id: "FEATURE_CALLOUT_1",
+          anchors: [
+            {
+              selector: "#PanelUI-menu-button",
+              panel_position: {
+                anchor_attachment: "bottomcenter",
+                callout_attachment: "topright",
+              },
+            },
+          ],
+          content: {
+            position: "callout",
+            title: { raw: "Panel Feature Callout" },
+            subtitle: { raw: "Hello!" },
+            secondary_button: {
+              label: { raw: "Advance" },
+              action: { navigate: true },
+            },
+            submenu_button: {
+              submenu: [
+                {
+                  type: "action",
+                  label: { raw: "Item 1" },
+                  action: { navigate: true },
+                  id: "item1",
+                },
+                {
+                  type: "action",
+                  label: { raw: "Item 2" },
+                  action: { navigate: true },
+                  id: "item2",
+                },
+                {
+                  type: "menu",
+                  label: { raw: "Menu 1" },
+                  submenu: [
+                    {
+                      type: "action",
+                      label: { raw: "Item 3" },
+                      action: { navigate: true },
+                      id: "item3",
+                    },
+                    {
+                      type: "action",
+                      label: { raw: "Item 4" },
+                      action: { navigate: true },
+                      id: "item4",
+                    },
+                  ],
+                  id: "menu1",
+                },
+              ],
+              attached_to: "secondary_button",
+            },
+            dismiss_button: {
+              action: { dismiss: true },
+            },
+          },
+        },
+      ],
+    },
+  },
+];
+
+export const PanelTestProvider = {
+  getMessages() {
+    return Promise.resolve(
+      MESSAGES().map(message => ({
+        ...message,
+        targeting: `providerCohorts.panel_local_testing == "SHOW_TEST"`,
+      }))
+    );
+  },
+};
diff --git a/browser/components/asrouter/modules/RemoteL10n.sys.mjs b/browser/components/asrouter/modules/RemoteL10n.sys.mjs
new file mode 100644
index 0000000000..1df10fbd72
--- /dev/null
+++ b/browser/components/asrouter/modules/RemoteL10n.sys.mjs
@@ -0,0 +1,249 @@
+/* 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/. */
+
+/**
+ * The downloaded Fluent file is located in this sub-directory of the local
+ * profile directory.
+ */
+const USE_REMOTE_L10N_PREF =
+  "browser.newtabpage.activity-stream.asrouter.useRemoteL10n";
+
+/**
+ * All supported locales for remote l10n
+ *
+ * This is used by ASRouter.sys.mjs to check if the locale is supported before
+ * issuing the request for remote fluent files to RemoteSettings.
+ *
+ * Note:
+ *   * this is generated based on "browser/locales/all-locales" as l10n doesn't
+ *     provide an API to fetch that list
+ *
+ *   * this list doesn't include "en-US", though "en-US" is well supported and
+ *     `_RemoteL10n.isLocaleSupported()` will handle it properly
+ */
+const ALL_LOCALES = new Set([
+  "ach",
+  "af",
+  "an",
+  "ar",
+  "ast",
+  "az",
+  "be",
+  "bg",
+  "bn",
+  "bo",
+  "br",
+  "brx",
+  "bs",
+  "ca",
+  "ca-valencia",
+  "cak",
+  "ckb",
+  "cs",
+  "cy",
+  "da",
+  "de",
+  "dsb",
+  "el",
+  "en-CA",
+  "en-GB",
+  "eo",
+  "es-AR",
+  "es-CL",
+  "es-ES",
+  "es-MX",
+  "et",
+  "eu",
+  "fa",
+  "ff",
+  "fi",
+  "fr",
+  "fy-NL",
+  "ga-IE",
+  "gd",
+  "gl",
+  "gn",
+  "gu-IN",
+  "he",
+  "hi-IN",
+  "hr",
+  "hsb",
+  "hu",
+  "hy-AM",
+  "hye",
+  "ia",
+  "id",
+  "is",
+  "it",
+  "ja",
+  "ja-JP-mac",
+  "ka",
+  "kab",
+  "kk",
+  "km",
+  "kn",
+  "ko",
+  "lij",
+  "lo",
+  "lt",
+  "ltg",
+  "lv",
+  "meh",
+  "mk",
+  "mr",
+  "ms",
+  "my",
+  "nb-NO",
+  "ne-NP",
+  "nl",
+  "nn-NO",
+  "oc",
+  "pa-IN",
+  "pl",
+  "pt-BR",
+  "pt-PT",
+  "rm",
+  "ro",
+  "ru",
+  "scn",
+  "si",
+  "sk",
+  "sl",
+  "son",
+  "sq",
+  "sr",
+  "sv-SE",
+  "szl",
+  "ta",
+  "te",
+  "th",
+  "tl",
+  "tr",
+  "trs",
+  "uk",
+  "ur",
+  "uz",
+  "vi",
+  "wo",
+  "xh",
+  "zh-CN",
+  "zh-TW",
+]);
+
+export class _RemoteL10n {
+  constructor() {
+    this._l10n = null;
+  }
+
+  createElement(doc, elem, options = {}) {
+    let node;
+    if (options.content && options.content.string_id) {
+      node = doc.createElement("remote-text");
+    } else {
+      node = doc.createElementNS("http://www.w3.org/1999/xhtml", elem);
+    }
+    if (options.classList) {
+      node.classList.add(options.classList);
+    }
+    this.setString(node, options);
+
+    return node;
+  }
+
+  // If `string_id` is present it means we are relying on fluent for translations.
+  // Otherwise, we have a vanilla string.
+  setString(el, { content, attributes = {} }) {
+    if (content && content.string_id) {
+      for (let [fluentId, value] of Object.entries(attributes)) {
+        el.setAttribute(`fluent-variable-${fluentId}`, value);
+      }
+      el.setAttribute("fluent-remote-id", content.string_id);
+    } else {
+      el.textContent = content;
+    }
+  }
+
+  /**
+   * Creates a new DOMLocalization instance with the Fluent file from Remote Settings.
+   *
+   * Note: it will use the local Fluent file in any of following cases:
+   *   * the remote Fluent file is not available
+   *   * it was told to use the local Fluent file
+   */
+  _createDOML10n() {
+    /* istanbul ignore next */
+    let useRemoteL10n = Services.prefs.getBoolPref(USE_REMOTE_L10N_PREF, true);
+    if (useRemoteL10n && !L10nRegistry.getInstance().hasSource("cfr")) {
+      const appLocale = Services.locale.appLocaleAsBCP47;
+      const l10nFluentDir = PathUtils.join(
+        Services.dirsvc.get("ProfLD", Ci.nsIFile).path,
+        "settings",
+        "main",
+        "ms-language-packs"
+      );
+      let cfrIndexedFileSource = new L10nFileSource(
+        "cfr",
+        "app",
+        [appLocale],
+        `file://${l10nFluentDir}/`,
+        {
+          addResourceOptions: {
+            allowOverrides: true,
+          },
+        },
+        [`file://${l10nFluentDir}/browser/newtab/asrouter.ftl`]
+      );
+      L10nRegistry.getInstance().registerSources([cfrIndexedFileSource]);
+    } else if (!useRemoteL10n && L10nRegistry.getInstance().hasSource("cfr")) {
+      L10nRegistry.getInstance().removeSources(["cfr"]);
+    }
+
+    return new DOMLocalization(
+      [
+        "branding/brand.ftl",
+        "browser/defaultBrowserNotification.ftl",
+        "browser/newtab/asrouter.ftl",
+        "toolkit/branding/accounts.ftl",
+        "toolkit/branding/brandings.ftl",
+      ],
+      false
+    );
+  }
+
+  get l10n() {
+    if (!this._l10n) {
+      this._l10n = this._createDOML10n();
+    }
+    return this._l10n;
+  }
+
+  reloadL10n() {
+    this._l10n = null;
+  }
+
+  isLocaleSupported(locale) {
+    return locale === "en-US" || ALL_LOCALES.has(locale);
+  }
+
+  /**
+   * Format given `localizableText`.
+   *
+   * Format `localizableText` if it is an object using any `string_id` field,
+   * otherwise return `localizableText` unmodified.
+   *
+   * @param {object|string} `localizableText` to format.
+   * @return {string} formatted text.
+   */
+  async formatLocalizableText(localizableText) {
+    if (typeof localizableText !== "string") {
+      // It's more useful to get an error than passing through an object without
+      // a `string_id` field.
+      let value = await this.l10n.formatValue(localizableText.string_id);
+      return value;
+    }
+    return localizableText;
+  }
+}
+
+export const RemoteL10n = new _RemoteL10n();
diff --git a/browser/components/asrouter/modules/Spotlight.sys.mjs b/browser/components/asrouter/modules/Spotlight.sys.mjs
new file mode 100644
index 0000000000..65453a4397
--- /dev/null
+++ b/browser/components/asrouter/modules/Spotlight.sys.mjs
@@ -0,0 +1,78 @@
+/* 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/. */
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  AboutWelcomeTelemetry:
+    "resource:///modules/aboutwelcome/AboutWelcomeTelemetry.sys.mjs",
+});
+
+ChromeUtils.defineLazyGetter(
+  lazy,
+  "AWTelemetry",
+  () => new lazy.AboutWelcomeTelemetry()
+);
+
+export const Spotlight = {
+  sendUserEventTelemetry(event, message, dispatch) {
+    const ping = {
+      message_id: message.content.id,
+      event,
+    };
+    dispatch({
+      type: "SPOTLIGHT_TELEMETRY",
+      data: { action: "spotlight_user_event", ...ping },
+    });
+  },
+
+  defaultDispatch(message) {
+    if (message.type === "SPOTLIGHT_TELEMETRY") {
+      const { message_id, event } = message.data;
+      lazy.AWTelemetry.sendTelemetry({ message_id, event });
+    }
+  },
+
+  /**
+   * Shows spotlight tab or window modal specific to the given browser
+   * @param browser             The browser for spotlight display
+   * @param message             Message containing content to show
+   * @param dispatchCFRAction   A function to dispatch resulting actions
+   * @return                    boolean value capturing if spotlight was displayed
+   */
+  async showSpotlightDialog(browser, message, dispatch = this.defaultDispatch) {
+    const win = browser?.ownerGlobal;
+    if (!win || win.gDialogBox.isOpen) {
+      return false;
+    }
+    const spotlight_url = "chrome://browser/content/spotlight.html";
+
+    const dispatchCFRAction =
+      // This also blocks CFR impressions, which is fine for current use cases.
+      message.content?.metrics === "block" ? () => {} : dispatch;
+
+    // This handles `IMPRESSION` events used by ASRouter for frequency caps.
+    // AboutWelcome handles `IMPRESSION` events for telemetry.
+    this.sendUserEventTelemetry("IMPRESSION", message, dispatchCFRAction);
+    dispatchCFRAction({ type: "IMPRESSION", data: message });
+
+    if (message.content?.modal === "tab") {
+      let { closedPromise } = win.gBrowser.getTabDialogBox(browser).open(
+        spotlight_url,
+        {
+          features: "resizable=no",
+          allowDuplicateDialogs: false,
+        },
+        message.content
+      );
+      await closedPromise;
+    } else {
+      await win.gDialogBox.open(spotlight_url, message.content);
+    }
+
+    // If dismissed report telemetry and exit
+    this.sendUserEventTelemetry("DISMISS", message, dispatchCFRAction);
+    return true;
+  },
+};
diff --git a/browser/components/asrouter/modules/ToastNotification.sys.mjs b/browser/components/asrouter/modules/ToastNotification.sys.mjs
new file mode 100644
index 0000000000..136225cf61
--- /dev/null
+++ b/browser/components/asrouter/modules/ToastNotification.sys.mjs
@@ -0,0 +1,138 @@
+/* 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/. */
+
+import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  ExperimentAPI: "resource://nimbus/ExperimentAPI.sys.mjs",
+  RemoteL10n: "resource:///modules/asrouter/RemoteL10n.sys.mjs",
+});
+
+XPCOMUtils.defineLazyServiceGetters(lazy, {
+  AlertsService: ["@mozilla.org/alerts-service;1", "nsIAlertsService"],
+});
+
+export const ToastNotification = {
+  // Allow testing to stub the alerts service.
+  get AlertsService() {
+    return lazy.AlertsService;
+  },
+
+  sendUserEventTelemetry(event, message, dispatch) {
+    const ping = {
+      message_id: message.id,
+      event,
+    };
+    dispatch({
+      type: "TOAST_NOTIFICATION_TELEMETRY",
+      data: { action: "toast_notification_user_event", ...ping },
+    });
+  },
+
+  /**
+   * Show a toast notification.
+   * @param message             Message containing content to show.
+   * @param dispatch            A function to dispatch resulting actions.
+   * @return                    boolean value capturing if toast notification was displayed.
+   */
+  async showToastNotification(message, dispatch) {
+    let { content } = message;
+    let title = await lazy.RemoteL10n.formatLocalizableText(content.title);
+    let body = await lazy.RemoteL10n.formatLocalizableText(content.body);
+
+    // The only link between background task message experiment and user
+    // re-engagement via the notification is the associated "tag".  Said tag is
+    // usually controlled by the message content, but for message experiments,
+    // we want to avoid a missing tag and to ensure a deterministic tag for
+    // easier analysis, including across branches.
+    let { tag } = content;
+
+    let experimentMetadata =
+      lazy.ExperimentAPI.getExperimentMetaData({
+        featureId: "backgroundTaskMessage",
+      }) || {};
+
+    if (
+      experimentMetadata?.active &&
+      experimentMetadata?.slug &&
+      experimentMetadata?.branch?.slug
+    ) {
+      // Like `my-experiment:my-branch`.
+      tag = `${experimentMetadata?.slug}:${experimentMetadata?.branch?.slug}`;
+    }
+
+    // There are two events named `IMPRESSION` the first one refers to telemetry
+    // while the other refers to ASRouter impressions used for the frequency cap
+    this.sendUserEventTelemetry("IMPRESSION", message, dispatch);
+    dispatch({ type: "IMPRESSION", data: message });
+
+    let alert = Cc["@mozilla.org/alert-notification;1"].createInstance(
+      Ci.nsIAlertNotification
+    );
+    let systemPrincipal = Services.scriptSecurityManager.getSystemPrincipal();
+    alert.init(
+      tag,
+      content.image_url
+        ? Services.urlFormatter.formatURL(content.image_url)
+        : content.image_url,
+      title,
+      body,
+      true /* aTextClickable */,
+      content.data,
+      null /* aDir */,
+      null /* aLang */,
+      null /* aData */,
+      systemPrincipal,
+      null /* aInPrivateBrowsing */,
+      content.requireInteraction
+    );
+
+    if (content.actions) {
+      let actions = Cu.cloneInto(content.actions, {});
+      for (let action of actions) {
+        if (action.title) {
+          action.title = await lazy.RemoteL10n.formatLocalizableText(
+            action.title
+          );
+        }
+        if (action.launch_action) {
+          action.opaqueRelaunchData = JSON.stringify(action.launch_action);
+          delete action.launch_action;
+        }
+      }
+      alert.actions = actions;
+    }
+
+    // Populate `opaqueRelaunchData`, prefering `launch_action` if given,
+    // falling back to `launch_url` if given.
+    let relaunchAction = content.launch_action;
+    if (!relaunchAction && content.launch_url) {
+      relaunchAction = {
+        type: "OPEN_URL",
+        data: {
+          args: content.launch_url,
+          where: "tab",
+        },
+      };
+    }
+    if (relaunchAction) {
+      alert.opaqueRelaunchData = JSON.stringify(relaunchAction);
+    }
+
+    let shownPromise = Promise.withResolvers();
+    let obs = (subject, topic, data) => {
+      if (topic === "alertshow") {
+        shownPromise.resolve();
+      }
+    };
+
+    this.AlertsService.showAlert(alert, obs);
+
+    await shownPromise;
+
+    return true;
+  },
+};
diff --git a/browser/components/asrouter/modules/ToolbarBadgeHub.sys.mjs b/browser/components/asrouter/modules/ToolbarBadgeHub.sys.mjs
new file mode 100644
index 0000000000..7832ae9456
--- /dev/null
+++ b/browser/components/asrouter/modules/ToolbarBadgeHub.sys.mjs
@@ -0,0 +1,308 @@
+/* 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/. */
+
+const lazy = {};
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  EveryWindow: "resource:///modules/EveryWindow.sys.mjs",
+  PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
+  clearTimeout: "resource://gre/modules/Timer.sys.mjs",
+  requestIdleCallback: "resource://gre/modules/Timer.sys.mjs",
+  setTimeout: "resource://gre/modules/Timer.sys.mjs",
+  ToolbarPanelHub: "resource:///modules/asrouter/ToolbarPanelHub.sys.mjs",
+});
+
+let notificationsByWindow = new WeakMap();
+
+export class _ToolbarBadgeHub {
+  constructor() {
+    this.id = "toolbar-badge-hub";
+    this.state = {};
+    this.prefs = {
+      WHATSNEW_TOOLBAR_PANEL: "browser.messaging-system.whatsNewPanel.enabled",
+    };
+    this.removeAllNotifications = this.removeAllNotifications.bind(this);
+    this.removeToolbarNotification = this.removeToolbarNotification.bind(this);
+    this.addToolbarNotification = this.addToolbarNotification.bind(this);
+    this.registerBadgeToAllWindows = this.registerBadgeToAllWindows.bind(this);
+    this._sendPing = this._sendPing.bind(this);
+    this.sendUserEventTelemetry = this.sendUserEventTelemetry.bind(this);
+
+    this._handleMessageRequest = null;
+    this._addImpression = null;
+    this._blockMessageById = null;
+    this._sendTelemetry = null;
+    this._initialized = false;
+  }
+
+  async init(
+    waitForInitialized,
+    {
+      handleMessageRequest,
+      addImpression,
+      blockMessageById,
+      unblockMessageById,
+      sendTelemetry,
+    }
+  ) {
+    if (this._initialized) {
+      return;
+    }
+
+    this._initialized = true;
+    this._handleMessageRequest = handleMessageRequest;
+    this._blockMessageById = blockMessageById;
+    this._unblockMessageById = unblockMessageById;
+    this._addImpression = addImpression;
+    this._sendTelemetry = sendTelemetry;
+    // Need to wait for ASRouter to initialize before trying to fetch messages
+    await waitForInitialized;
+    this.messageRequest({
+      triggerId: "toolbarBadgeUpdate",
+      template: "toolbar_badge",
+    });
+    // Listen for pref changes that could trigger new badges
+    Services.prefs.addObserver(this.prefs.WHATSNEW_TOOLBAR_PANEL, this);
+  }
+
+  observe(aSubject, aTopic, aPrefName) {
+    switch (aPrefName) {
+      case this.prefs.WHATSNEW_TOOLBAR_PANEL:
+        this.messageRequest({
+          triggerId: "toolbarBadgeUpdate",
+          template: "toolbar_badge",
+        });
+        break;
+    }
+  }
+
+  maybeInsertFTL(win) {
+    win.MozXULElement.insertFTLIfNeeded("browser/newtab/asrouter.ftl");
+  }
+
+  executeAction({ id, data, message_id }) {
+    switch (id) {
+      case "show-whatsnew-button":
+        lazy.ToolbarPanelHub.enableToolbarButton();
+        lazy.ToolbarPanelHub.enableAppmenuButton();
+        break;
+    }
+  }
+
+  _clearBadgeTimeout() {
+    if (this.state.showBadgeTimeoutId) {
+      lazy.clearTimeout(this.state.showBadgeTimeoutId);
+    }
+  }
+
+  removeAllNotifications(event) {
+    if (event) {
+      // ignore right clicks
+      if (
+        (event.type === "mousedown" || event.type === "click") &&
+        event.button !== 0
+      ) {
+        return;
+      }
+      // ignore keyboard access that is not one of the usual accessor keys
+      if (
+        event.type === "keypress" &&
+        event.key !== " " &&
+        event.key !== "Enter"
+      ) {
+        return;
+      }
+
+      event.target.removeEventListener(
+        "mousedown",
+        this.removeAllNotifications
+      );
+      event.target.removeEventListener("keypress", this.removeAllNotifications);
+      // If we have an event it means the user interacted with the badge
+      // we should send telemetry
+      if (this.state.notification) {
+        this.sendUserEventTelemetry("CLICK", this.state.notification);
+      }
+    }
+    // Will call uninit on every window
+    lazy.EveryWindow.unregisterCallback(this.id);
+    if (this.state.notification) {
+      this._blockMessageById(this.state.notification.id);
+    }
+    this._clearBadgeTimeout();
+    this.state = {};
+  }
+
+  removeToolbarNotification(toolbarButton) {
+    // Remove it from the element that displays the badge
+    toolbarButton
+      .querySelector(".toolbarbutton-badge")
+      .classList.remove("feature-callout");
+    toolbarButton.removeAttribute("badged");
+    // Remove id used for for aria-label badge description
+    const notificationDescription = toolbarButton.querySelector(
+      "#toolbarbutton-notification-description"
+    );
+    if (notificationDescription) {
+      notificationDescription.remove();
+      toolbarButton.removeAttribute("aria-labelledby");
+      toolbarButton.removeAttribute("aria-describedby");
+    }
+  }
+
+  addToolbarNotification(win, message) {
+    const document = win.browser.ownerDocument;
+    if (message.content.action) {
+      this.executeAction({ ...message.content.action, message_id: message.id });
+    }
+    let toolbarbutton = document.getElementById(message.content.target);
+    if (toolbarbutton) {
+      const badge = toolbarbutton.querySelector(".toolbarbutton-badge");
+      badge.classList.add("feature-callout");
+      toolbarbutton.setAttribute("badged", true);
+      // If we have additional aria-label information for the notification
+      // we add this content to the hidden `toolbarbutton-text` node.
+      // We then use `aria-labelledby` to link this description to the button
+      // that received the notification badge.
+      if (message.content.badgeDescription) {
+        // Insert strings as soon as we know we're showing them
+        this.maybeInsertFTL(win);
+        toolbarbutton.setAttribute(
+          "aria-labelledby",
+          `toolbarbutton-notification-description ${message.content.target}`
+        );
+        // Because tooltiptext is different to the label, it gets duplicated as
+        // the description. Setting `describedby` to the same value as
+        // `labelledby` will be detected by the a11y code and the description
+        // will be removed.
+        toolbarbutton.setAttribute(
+          "aria-describedby",
+          `toolbarbutton-notification-description ${message.content.target}`
+        );
+        const descriptionEl = document.createElement("span");
+        descriptionEl.setAttribute(
+          "id",
+          "toolbarbutton-notification-description"
+        );
+        descriptionEl.hidden = true;
+        document.l10n.setAttributes(
+          descriptionEl,
+          message.content.badgeDescription.string_id
+        );
+        toolbarbutton.appendChild(descriptionEl);
+      }
+      // `mousedown` event required because of the `onmousedown` defined on
+      // the button that prevents `click` events from firing
+      toolbarbutton.addEventListener("mousedown", this.removeAllNotifications);
+      // `keypress` event required for keyboard accessibility
+      toolbarbutton.addEventListener("keypress", this.removeAllNotifications);
+      this.state = { notification: { id: message.id } };
+
+      // Impression should be added when the badge becomes visible
+      this._addImpression(message);
+      // Send a telemetry ping when adding the notification badge
+      this.sendUserEventTelemetry("IMPRESSION", message);
+
+      return toolbarbutton;
+    }
+
+    return null;
+  }
+
+  registerBadgeToAllWindows(message) {
+    if (message.template === "update_action") {
+      this.executeAction({ ...message.content.action, message_id: message.id });
+      // No badge to set only an action to execute
+      return;
+    }
+
+    lazy.EveryWindow.registerCallback(
+      this.id,
+      win => {
+        if (notificationsByWindow.has(win)) {
+          // nothing to do
+          return;
+        }
+        const el = this.addToolbarNotification(win, message);
+        notificationsByWindow.set(win, el);
+      },
+      win => {
+        const el = notificationsByWindow.get(win);
+        if (el) {
+          this.removeToolbarNotification(el);
+        }
+        notificationsByWindow.delete(win);
+      }
+    );
+  }
+
+  registerBadgeNotificationListener(message, options = {}) {
+    // We need to clear any existing notifications and only show
+    // the one set by devtools
+    if (options.force) {
+      this.removeAllNotifications();
+      // When debugging immediately show the badge
+      this.registerBadgeToAllWindows(message);
+      return;
+    }
+
+    if (message.content.delay) {
+      this.state.showBadgeTimeoutId = lazy.setTimeout(() => {
+        lazy.requestIdleCallback(() => this.registerBadgeToAllWindows(message));
+      }, message.content.delay);
+    } else {
+      this.registerBadgeToAllWindows(message);
+    }
+  }
+
+  async messageRequest({ triggerId, template }) {
+    const telemetryObject = { triggerId };
+    TelemetryStopwatch.start("MS_MESSAGE_REQUEST_TIME_MS", telemetryObject);
+    const message = await this._handleMessageRequest({
+      triggerId,
+      template,
+    });
+    TelemetryStopwatch.finish("MS_MESSAGE_REQUEST_TIME_MS", telemetryObject);
+    if (message) {
+      this.registerBadgeNotificationListener(message);
+    }
+  }
+
+  _sendPing(ping) {
+    this._sendTelemetry({
+      type: "TOOLBAR_BADGE_TELEMETRY",
+      data: { action: "badge_user_event", ...ping },
+    });
+  }
+
+  sendUserEventTelemetry(event, message) {
+    const win = Services.wm.getMostRecentWindow("navigator:browser");
+    // Only send pings for non private browsing windows
+    if (
+      win &&
+      !lazy.PrivateBrowsingUtils.isBrowserPrivate(
+        win.ownerGlobal.gBrowser.selectedBrowser
+      )
+    ) {
+      this._sendPing({
+        message_id: message.id,
+        event,
+      });
+    }
+  }
+
+  uninit() {
+    this._clearBadgeTimeout();
+    this.state = {};
+    this._initialized = false;
+    notificationsByWindow = new WeakMap();
+    Services.prefs.removeObserver(this.prefs.WHATSNEW_TOOLBAR_PANEL, this);
+  }
+}
+
+/**
+ * ToolbarBadgeHub - singleton instance of _ToolbarBadgeHub that can initiate
+ * message requests and render messages.
+ */
+export const ToolbarBadgeHub = new _ToolbarBadgeHub();
diff --git a/browser/components/asrouter/modules/ToolbarPanelHub.sys.mjs b/browser/components/asrouter/modules/ToolbarPanelHub.sys.mjs
new file mode 100644
index 0000000000..519bca8a89
--- /dev/null
+++ b/browser/components/asrouter/modules/ToolbarPanelHub.sys.mjs
@@ -0,0 +1,544 @@
+/* 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/. */
+
+const lazy = {};
+
+// We use importESModule here instead of static import so that
+// the Karma test environment won't choke on this module. This
+// is because the Karma test environment already stubs out
+// XPCOMUtils. That environment overrides importESModule to be a no-op
+// (which can't be done for a static import statement).
+
+// eslint-disable-next-line mozilla/use-static-import
+const { XPCOMUtils } = ChromeUtils.importESModule(
+  "resource://gre/modules/XPCOMUtils.sys.mjs"
+);
+
+ChromeUtils.defineESModuleGetters(lazy, {
+  EveryWindow: "resource:///modules/EveryWindow.sys.mjs",
+  PanelMultiView: "resource:///modules/PanelMultiView.sys.mjs",
+  PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
+  SpecialMessageActions:
+    "resource://messaging-system/lib/SpecialMessageActions.sys.mjs",
+  RemoteL10n: "resource:///modules/asrouter/RemoteL10n.sys.mjs",
+});
+
+XPCOMUtils.defineLazyServiceGetter(
+  lazy,
+  "TrackingDBService",
+  "@mozilla.org/tracking-db-service;1",
+  "nsITrackingDBService"
+);
+
+const idToTextMap = new Map([
+  [Ci.nsITrackingDBService.TRACKERS_ID, "trackerCount"],
+  [Ci.nsITrackingDBService.TRACKING_COOKIES_ID, "cookieCount"],
+  [Ci.nsITrackingDBService.CRYPTOMINERS_ID, "cryptominerCount"],
+  [Ci.nsITrackingDBService.FINGERPRINTERS_ID, "fingerprinterCount"],
+  [Ci.nsITrackingDBService.SOCIAL_ID, "socialCount"],
+]);
+
+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 BUTTON_STRING_ID = "cfr-whatsnew-button";
+const WHATS_NEW_PANEL_SELECTOR = "PanelUI-whatsNew-message-container";
+
+export 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.state = {};
+    this._initialized = false;
+  }
+
+  async init(waitForInitialized, { getMessages, sendTelemetry }) {
+    if (this._initialized) {
+      return;
+    }
+
+    this._initialized = true;
+    this._getMessages = getMessages;
+    this._sendTelemetry = sendTelemetry;
+    // Wait for ASRouter messages to become available in order to know
+    // if we can show the What's New panel
+    await waitForInitialized;
+    // Enable the application menu button so that the user can access
+    // the panel outside of the toolbar button
+    await this.enableAppmenuButton();
+
+    this.state = {
+      protectionPanelMessageSeen: Services.prefs.getBoolPref(
+        PROTECTIONS_PANEL_INFOMSG_PREF,
+        false
+      ),
+    };
+  }
+
+  uninit() {
+    this._initialized = false;
+    lazy.EveryWindow.unregisterCallback(TOOLBAR_BUTTON_ID);
+    lazy.EveryWindow.unregisterCallback(APPMENU_BUTTON_ID);
+  }
+
+  get messages() {
+    return this._getMessages({
+      template: "whatsnew_panel_message",
+      triggerId: "whatsNewPanelOpened",
+      returnAll: true,
+    });
+  }
+
+  toggleWhatsNewPref(event) {
+    // Checkbox onclick handler gets called before the checkbox state gets toggled,
+    // so we have to call it with the opposite value.
+    let newValue = !event.target.checked;
+    Services.prefs.setBoolPref(WHATSNEW_ENABLED_PREF, newValue);
+
+    this.sendUserEventTelemetry(
+      event.target.ownerGlobal,
+      "WNP_PREF_TOGGLE",
+      // Message id is not applicable in this case, the notification state
+      // is not related to a particular message
+      { id: "n/a" },
+      { value: { prefValue: newValue } }
+    );
+  }
+
+  maybeInsertFTL(win) {
+    win.MozXULElement.insertFTLIfNeeded("browser/newtab/asrouter.ftl");
+    win.MozXULElement.insertFTLIfNeeded("toolkit/branding/brandings.ftl");
+    win.MozXULElement.insertFTLIfNeeded("toolkit/branding/accounts.ftl");
+  }
+
+  maybeLoadCustomElement(win) {
+    if (!win.customElements.get("remote-text")) {
+      Services.scriptloader.loadSubScript(
+        "resource://activity-stream/data/custom-elements/paragraph.js",
+        win
+      );
+    }
+  }
+
+  // Turns on the Appmenu (hamburger menu) button for all open windows and future windows.
+  async enableAppmenuButton() {
+    if ((await this.messages).length) {
+      lazy.EveryWindow.registerCallback(
+        APPMENU_BUTTON_ID,
+        this._showAppmenuButton,
+        this._hideAppmenuButton
+      );
+    }
+  }
+
+  // Removes the button from the Appmenu.
+  // Only used in tests.
+  disableAppmenuButton() {
+    lazy.EveryWindow.unregisterCallback(APPMENU_BUTTON_ID);
+  }
+
+  // Turns on the Toolbar button for all open windows and future windows.
+  async enableToolbarButton() {
+    if ((await this.messages).length) {
+      lazy.EveryWindow.registerCallback(
+        TOOLBAR_BUTTON_ID,
+        this._showToolbarButton,
+        this._hideToolbarButton
+      );
+    }
+  }
+
+  // When the panel is hidden we want to run some cleanup
+  _onPanelHidden(win) {
+    const panelContainer = win.document.getElementById(
+      "customizationui-widget-panel"
+    );
+    // When the panel is hidden we want to remove any toolbar buttons that
+    // might have been added as an entry point to the panel
+    const removeToolbarButton = () => {
+      lazy.EveryWindow.unregisterCallback(TOOLBAR_BUTTON_ID);
+    };
+    if (!panelContainer) {
+      return;
+    }
+    panelContainer.addEventListener("popuphidden", removeToolbarButton, {
+      once: true,
+    });
+  }
+
+  // Newer messages first and use `order` field to decide between messages
+  // with the same timestamp
+  _sortWhatsNewMessages(m1, m2) {
+    // Sort by published_date in descending order.
+    if (m1.content.published_date === m2.content.published_date) {
+      // Ascending order
+      return m1.order - m2.order;
+    }
+    if (m1.content.published_date > m2.content.published_date) {
+      return -1;
+    }
+    return 1;
+  }
+
+  // Render what's new messages into the panel.
+  async renderMessages(win, doc, containerId, options = {}) {
+    // Set the checked status of the footer checkbox
+    let value = Services.prefs.getBoolPref(WHATSNEW_ENABLED_PREF);
+    let checkbox = win.document.getElementById("panelMenu-toggleWhatsNew");
+
+    checkbox.checked = value;
+
+    this.maybeLoadCustomElement(win);
+    const messages =
+      (options.force && options.messages) ||
+      (await this.messages).sort(this._sortWhatsNewMessages);
+    const container = lazy.PanelMultiView.getViewNode(doc, containerId);
+
+    if (messages) {
+      // Targeting attribute state might have changed making new messages
+      // available and old messages invalid, we need to refresh
+      this.removeMessages(win, containerId);
+      let previousDate = 0;
+      // Get and store any variable part of the message content
+      this.state.contentArguments = await this._contentArguments();
+      for (let message of messages) {
+        container.appendChild(
+          this._createMessageElements(win, doc, message, previousDate)
+        );
+        previousDate = message.content.published_date;
+      }
+    }
+
+    this._onPanelHidden(win);
+
+    // Panel impressions are not associated with one particular message
+    // but with a set of messages. We concatenate message ids and send them
+    // back for every impression.
+    const eventId = {
+      id: messages
+        .map(({ id }) => id)
+        .sort()
+        .join(","),
+    };
+    // Check `mainview` attribute to determine if the panel is shown as a
+    // subview (inside the application menu) or as a toolbar dropdown.
+    // https://searchfox.org/mozilla-central/rev/07f7390618692fa4f2a674a96b9b677df3a13450/browser/components/customizableui/PanelMultiView.jsm#1268
+    const mainview = win.PanelUI.whatsNewPanel.hasAttribute("mainview");
+    this.sendUserEventTelemetry(win, "IMPRESSION", eventId, {
+      value: { view: mainview ? "toolbar_dropdown" : "application_menu" },
+    });
+  }
+
+  removeMessages(win, containerId) {
+    const doc = win.document;
+    const messageNodes = lazy.PanelMultiView.getViewNode(
+      doc,
+      containerId
+    ).querySelectorAll(".whatsNew-message");
+    for (const messageNode of messageNodes) {
+      messageNode.remove();
+    }
+  }
+
+  /**
+   * Dispatch the action defined in the message and user telemetry event.
+   */
+  _dispatchUserAction(win, message) {
+    let url;
+    try {
+      // Set platform specific path variables for SUMO articles
+      url = Services.urlFormatter.formatURL(message.content.cta_url);
+    } catch (e) {
+      console.error(e);
+      url = message.content.cta_url;
+    }
+    lazy.SpecialMessageActions.handleAction(
+      {
+        type: message.content.cta_type,
+        data: {
+          args: url,
+          where: message.content.cta_where || "tabshifted",
+        },
+      },
+      win.browser
+    );
+
+    this.sendUserEventTelemetry(win, "CLICK", message);
+  }
+
+  /**
+   * Attach event listener to dispatch message defined action.
+   */
+  _attachCommandListener(win, element, message) {
+    // Add event listener for `mouseup` not to overlap with the
+    // `mousedown` & `click` events dispatched from PanelMultiView.sys.mjs
+    // https://searchfox.org/mozilla-central/rev/7531325c8660cfa61bf71725f83501028178cbb9/browser/components/customizableui/PanelMultiView.jsm#1830-1837
+    element.addEventListener("mouseup", () => {
+      this._dispatchUserAction(win, message);
+    });
+    element.addEventListener("keyup", e => {
+      if (e.key === "Enter" || e.key === " ") {
+        this._dispatchUserAction(win, message);
+      }
+    });
+  }
+
+  _createMessageElements(win, doc, message, previousDate) {
+    const { content } = message;
+    const messageEl = lazy.RemoteL10n.createElement(doc, "div");
+    messageEl.classList.add("whatsNew-message");
+
+    // Only render date if it is different from the one rendered before.
+    if (content.published_date !== previousDate) {
+      messageEl.appendChild(
+        lazy.RemoteL10n.createElement(doc, "p", {
+          classList: "whatsNew-message-date",
+          content: new Date(content.published_date).toLocaleDateString(
+            "default",
+            {
+              month: "long",
+              day: "numeric",
+              year: "numeric",
+            }
+          ),
+        })
+      );
+    }
+
+    const wrapperEl = lazy.RemoteL10n.createElement(doc, "div");
+    wrapperEl.doCommand = () => this._dispatchUserAction(win, message);
+    wrapperEl.classList.add("whatsNew-message-body");
+    messageEl.appendChild(wrapperEl);
+
+    if (content.icon_url) {
+      wrapperEl.classList.add("has-icon");
+      const iconEl = lazy.RemoteL10n.createElement(doc, "img");
+      iconEl.src = content.icon_url;
+      iconEl.classList.add("whatsNew-message-icon");
+      if (content.icon_alt && content.icon_alt.string_id) {
+        doc.l10n.setAttributes(iconEl, content.icon_alt.string_id);
+      } else {
+        iconEl.setAttribute("alt", content.icon_alt);
+      }
+      wrapperEl.appendChild(iconEl);
+    }
+
+    wrapperEl.appendChild(this._createMessageContent(win, doc, content));
+
+    if (content.link_text) {
+      const anchorEl = lazy.RemoteL10n.createElement(doc, "a", {
+        classList: "text-link",
+        content: content.link_text,
+      });
+      anchorEl.doCommand = () => this._dispatchUserAction(win, message);
+      wrapperEl.appendChild(anchorEl);
+    }
+
+    // Attach event listener on entire message container
+    this._attachCommandListener(win, messageEl, message);
+
+    return messageEl;
+  }
+
+  /**
+   * Return message title (optional subtitle) and body
+   */
+  _createMessageContent(win, doc, content) {
+    const wrapperEl = new win.DocumentFragment();
+
+    wrapperEl.appendChild(
+      lazy.RemoteL10n.createElement(doc, "h2", {
+        classList: "whatsNew-message-title",
+        content: content.title,
+        attributes: this.state.contentArguments,
+      })
+    );
+
+    wrapperEl.appendChild(
+      lazy.RemoteL10n.createElement(doc, "p", {
+        content: content.body,
+        classList: "whatsNew-message-content",
+        attributes: this.state.contentArguments,
+      })
+    );
+
+    return wrapperEl;
+  }
+
+  _createHeroElement(win, doc, message) {
+    this.maybeLoadCustomElement(win);
+
+    const messageEl = lazy.RemoteL10n.createElement(doc, "div");
+    messageEl.setAttribute("id", "protections-popup-message");
+    messageEl.classList.add("whatsNew-hero-message");
+    const wrapperEl = lazy.RemoteL10n.createElement(doc, "div");
+    wrapperEl.classList.add("whatsNew-message-body");
+    messageEl.appendChild(wrapperEl);
+
+    wrapperEl.appendChild(
+      lazy.RemoteL10n.createElement(doc, "h2", {
+        classList: "whatsNew-message-title",
+        content: message.content.title,
+      })
+    );
+    wrapperEl.appendChild(
+      lazy.RemoteL10n.createElement(doc, "p", {
+        classList: "protections-popup-content",
+        content: message.content.body,
+      })
+    );
+
+    if (message.content.link_text) {
+      let linkEl = lazy.RemoteL10n.createElement(doc, "a", {
+        classList: "text-link",
+        content: message.content.link_text,
+      });
+      linkEl.disabled = true;
+      wrapperEl.appendChild(linkEl);
+      this._attachCommandListener(win, linkEl, message);
+    } else {
+      this._attachCommandListener(win, wrapperEl, message);
+    }
+
+    return messageEl;
+  }
+
+  async _contentArguments() {
+    const { defaultEngine } = Services.search;
+    // Between now and 6 weeks ago
+    const dateTo = new Date();
+    const dateFrom = new Date(dateTo.getTime() - 42 * 24 * 60 * 60 * 1000);
+    const eventsByDate = await lazy.TrackingDBService.getEventsByDateRange(
+      dateFrom,
+      dateTo
+    );
+    // Make sure we set all types of possible values to 0 because they might
+    // be referenced by fluent strings
+    let totalEvents = { blockedCount: 0 };
+    for (let blockedType of idToTextMap.values()) {
+      totalEvents[blockedType] = 0;
+    }
+    // Count all events in the past 6 weeks. Returns an object with:
+    // `blockedCount` total number of blocked resources
+    // {tracker|cookie|social...} breakdown by event type as defined by `idToTextMap`
+    totalEvents = eventsByDate.reduce((acc, day) => {
+      const type = day.getResultByName("type");
+      const count = day.getResultByName("count");
+      acc[idToTextMap.get(type)] = (acc[idToTextMap.get(type)] || 0) + count;
+      acc.blockedCount += count;
+      return acc;
+    }, totalEvents);
+    return {
+      // Keys need to match variable names used in asrouter.ftl
+      // `earliestDate` will be either 6 weeks ago or when tracking recording
+      // started. Whichever is more recent.
+      earliestDate: Math.max(
+        new Date(await lazy.TrackingDBService.getEarliestRecordedDate()),
+        dateFrom
+      ),
+      ...totalEvents,
+      // Passing in `undefined` as string for the Fluent variable name
+      // in order to match and select the message that does not require
+      // the variable.
+      searchEngineName: defaultEngine ? defaultEngine.name : "undefined",
+    };
+  }
+
+  async _showAppmenuButton(win) {
+    this.maybeInsertFTL(win);
+    await this._showElement(
+      win.browser.ownerDocument,
+      APPMENU_BUTTON_ID,
+      BUTTON_STRING_ID
+    );
+  }
+
+  _hideAppmenuButton(win, windowClosed) {
+    // No need to do something if the window is going away
+    if (!windowClosed) {
+      this._hideElement(win.browser.ownerDocument, APPMENU_BUTTON_ID);
+    }
+  }
+
+  _showToolbarButton(win) {
+    const document = win.browser.ownerDocument;
+    this.maybeInsertFTL(win);
+    return this._showElement(document, TOOLBAR_BUTTON_ID, BUTTON_STRING_ID);
+  }
+
+  _hideToolbarButton(win) {
+    this._hideElement(win.browser.ownerDocument, TOOLBAR_BUTTON_ID);
+  }
+
+  _showElement(document, id, string_id) {
+    const el = lazy.PanelMultiView.getViewNode(document, id);
+    document.l10n.setAttributes(el, string_id);
+    el.hidden = false;
+  }
+
+  _hideElement(document, id) {
+    const el = lazy.PanelMultiView.getViewNode(document, id);
+    if (el) {
+      el.hidden = true;
+    }
+  }
+
+  _sendPing(ping) {
+    this._sendTelemetry({
+      type: "TOOLBAR_PANEL_TELEMETRY",
+      data: { action: "whats-new-panel_user_event", ...ping },
+    });
+  }
+
+  sendUserEventTelemetry(win, event, message, options = {}) {
+    // Only send pings for non private browsing windows
+    if (
+      win &&
+      !lazy.PrivateBrowsingUtils.isBrowserPrivate(
+        win.ownerGlobal.gBrowser.selectedBrowser
+      )
+    ) {
+      this._sendPing({
+        message_id: message.id,
+        event,
+        event_context: options.value,
+      });
+    }
+  }
+
+  /**
+   * @param {object} [browser] MessageChannel target argument as a response to a
+   *   user action. No message is shown if undefined.
+   * @param {object[]} messages Messages selected from devtools page
+   */
+  forceShowMessage(browser, messages) {
+    if (!browser) {
+      return;
+    }
+    const win = browser.ownerGlobal;
+    const doc = browser.ownerDocument;
+    this.removeMessages(win, WHATS_NEW_PANEL_SELECTOR);
+    this.renderMessages(win, doc, WHATS_NEW_PANEL_SELECTOR, {
+      force: true,
+      messages: Array.isArray(messages) ? messages : [messages],
+    });
+    win.PanelUI.panel.addEventListener("popuphidden", event =>
+      this.removeMessages(event.target.ownerGlobal, WHATS_NEW_PANEL_SELECTOR)
+    );
+  }
+}
+
+/**
+ * ToolbarPanelHub - singleton instance of _ToolbarPanelHub that can initiate
+ * message requests and render messages.
+ */
+export const ToolbarPanelHub = new _ToolbarPanelHub();