Backed out changeset ba0784c1646a (bug 1786647) for fxms failures. CL…

…OSED TREE

browser/components/firefoxview/featureCallout.mjs

@@ -12,13 +12,8 @@ const lazy = {};
 
 XPCOMUtils.defineLazyModuleGetters(lazy, {
   AboutWelcomeParent: "resource:///actors/AboutWelcomeParent.jsm",
-  ASRouter: "resource://activity-stream/lib/ASRouter.jsm",
 });
 
-// When expanding the use of Feature Callout
-// to new about: pages, make `progressPref` a
-// configurable field on callout messages and
-// use it to determine which pref to observe
 XPCOMUtils.defineLazyPreferenceGetter(
   lazy,
   "featureTourProgress",
@@ -41,7 +36,7 @@ async function _handlePrefChange() {
     container?.classList.add("hidden");
     // wait for fade out transition
     setTimeout(async () => {
-      await _loadConfig();
+      _loadConfig(lazy.featureTourProgress.message);
       container?.remove();
       await _renderCallout();
     }, TRANSITION_MS);
@@ -83,6 +78,170 @@ let READY = false;
 
 const TRANSITION_MS = 500;
 const CONTAINER_ID = "root";
+const MESSAGES = [
+  {
+    id: "FIREFOX_VIEW_FEATURE_TOUR",
+    template: "multistage",
+    backdrop: "transparent",
+    transitions: false,
+    disableHistoryUpdates: true,
+    screens: [
+      {
+        id: "FEATURE_CALLOUT_1",
+        parent_selector: "#tabpickup-steps",
+        content: {
+          position: "callout",
+          arrow_position: "top",
+          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",
+            },
+            action: {
+              type: "SET_PREF",
+              data: {
+                pref: {
+                  name: "browser.firefox-view.feature-tour",
+                  value: JSON.stringify({
+                    message: "FIREFOX_VIEW_FEATURE_TOUR",
+                    screen: "FEATURE_CALLOUT_2",
+                    complete: false,
+                  }),
+                },
+              },
+            },
+          },
+          dismiss_button: {
+            action: {
+              type: "SET_PREF",
+              data: {
+                pref: {
+                  name: "browser.firefox-view.feature-tour",
+                  value: JSON.stringify({
+                    message: "FIREFOX_VIEW_FEATURE_TOUR",
+                    screen: "FEATURE_CALLOUT_1",
+                    complete: true,
+                  }),
+                },
+              },
+            },
+          },
+        },
+      },
+      {
+        id: "FEATURE_CALLOUT_2",
+        parent_selector: "#recently-closed-tabs-container",
+        content: {
+          position: "callout",
+          arrow_position: "bottom",
+          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-advance-button-label",
+            },
+            action: {
+              type: "SET_PREF",
+              data: {
+                pref: {
+                  name: "browser.firefox-view.feature-tour",
+                  value: JSON.stringify({
+                    message: "FIREFOX_VIEW_FEATURE_TOUR",
+                    screen: "FEATURE_CALLOUT_3",
+                    complete: false,
+                  }),
+                },
+              },
+            },
+          },
+          dismiss_button: {
+            action: {
+              type: "SET_PREF",
+              data: {
+                pref: {
+                  name: "browser.firefox-view.feature-tour",
+                  value: JSON.stringify({
+                    message: "FIREFOX_VIEW_FEATURE_TOUR",
+                    screen: "FEATURE_CALLOUT_2",
+                    complete: true,
+                  }),
+                },
+              },
+            },
+          },
+        },
+      },
+      {
+        id: "FEATURE_CALLOUT_3",
+        parent_selector: "#colorways.content-container",
+        content: {
+          position: "callout",
+          arrow_position: "end",
+          title: {
+            string_id: "callout-firefox-view-colorways-title",
+          },
+          subtitle: {
+            string_id: "callout-firefox-view-colorways-subtitle",
+          },
+          logo: {
+            imageURL: "chrome://browser/content/callout-colorways.svg",
+            darkModeImageURL:
+              "chrome://browser/content/callout-colorways-dark.svg",
+            height: "128px",
+          },
+          primary_button: {
+            label: {
+              string_id: "callout-primary-complete-button-label",
+            },
+            action: {
+              type: "SET_PREF",
+              data: {
+                pref: {
+                  name: "browser.firefox-view.feature-tour",
+                  value: JSON.stringify({
+                    message: "FIREFOX_VIEW_FEATURE_TOUR",
+                    screen: "",
+                    complete: true,
+                  }),
+                },
+              },
+            },
+          },
+          dismiss_button: {
+            action: {
+              type: "SET_PREF",
+              data: {
+                pref: {
+                  name: "browser.firefox-view.feature-tour",
+                  value: JSON.stringify({
+                    message: "FIREFOX_VIEW_FEATURE_TOUR",
+                    screen: "FEATURE_CALLOUT_3",
+                    complete: true,
+                  }),
+                },
+              },
+            },
+          },
+        },
+      },
+    ],
+  },
+];
 
 function _createContainer() {
   let container = document.createElement("div");
@@ -94,10 +253,6 @@ function _createContainer() {
   );
   container.id = CONTAINER_ID;
   let parent = document.querySelector(CURRENT_SCREEN?.parent_selector);
-  if (!parent) {
-    container.remove();
-    return false;
-  }
   container.setAttribute("aria-describedby", `#${CONTAINER_ID} .welcome-text`);
   container.tabIndex = 0;
   parent.insertAdjacentElement("afterend", container);
@@ -349,24 +504,38 @@ function _observeRender(container) {
   RENDER_OBSERVER?.observe(container, { childList: true });
 }
 
-async function _loadConfig() {
-  await lazy.ASRouter.waitForInitialized;
-  let result = await lazy.ASRouter.sendTriggerMessage({
-    // triggerId and triggerContext
-    id: "featureCalloutCheck",
-    context: { source: document.location.pathname.toLowerCase() },
-  });
-  CONFIG = result.message.content;
-  CURRENT_SCREEN = CONFIG?.screens?.[CONFIG?.startScreen || 0];
+function _loadConfig(messageId) {
+  // If the parent element a screen describes doesn't exist, remove screen
+  // and ensure last screen displays the final primary CTA
+  // (for example, when there are no active colorways in about:firefoxview)
+  function _getRelevantScreens(screens) {
+    const finalCTA = screens[screens.length - 1].content.primary_button;
+    screens = screens.filter((s, i) => {
+      return document.querySelector(s.parent_selector);
+    });
+    if (screens.length) {
+      screens[screens.length - 1].content.primary_button = finalCTA;
+    }
+    return screens;
+  }
+
+  let content = MESSAGES.find(m => m.id === messageId);
+  const screenId = lazy.featureTourProgress.screen;
+  let screenIndex;
+  if (content?.screens?.length && screenId) {
+    content.screens = _getRelevantScreens(content.screens);
+    screenIndex = content.screens.findIndex(s => s.id === screenId);
+    content.startScreen = screenIndex;
+  }
+  CURRENT_SCREEN = content?.screens?.[screenIndex || 0];
+  CONFIG = content;
 }
 
 async function _renderCallout() {
   let container = _createContainer();
-  if (container) {
-    // This results in rendering the Feature Callout
-    await _addScriptsAndRender(container);
-    _observeRender(container);
-  }
+  // This results in rendering the Feature Callout
+  await _addScriptsAndRender(container);
+  _observeRender(container);
 }
 /**
  * Render content based on about:welcome multistage template.
@@ -377,9 +546,9 @@ async function showFeatureCallout(messageId) {
     return;
   }
 
-  await _loadConfig();
+  _loadConfig(messageId);
 
-  if (!CONFIG?.screens?.length) {
+  if (!CONFIG) {
     return;
   }
 

browser/components/firefoxview/tests/browser/browser_feature_callout.js

@@ -1,12 +1,5 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
-
-"use strict";
-
-const { BuiltInThemes } = ChromeUtils.import(
-  "resource:///modules/BuiltInThemes.jsm"
-);
-
 const calloutId = "root";
 const calloutSelector = `#${calloutId}.featureCallout`;
 const primaryButtonSelector = `#${calloutId} .primary`;
@@ -334,10 +327,6 @@ add_task(async function feature_callout_only_highlights_existing_elements() {
     ],
   });
 
-  const sandbox = sinon.createSandbox();
-  // Return no active colorways
-  sandbox.stub(BuiltInThemes, "findActiveColorwayCollection").returns(false);
-
   await BrowserTestUtils.withNewTab(
     {
       gBrowser,
@@ -346,6 +335,9 @@ add_task(async function feature_callout_only_highlights_existing_elements() {
     async browser => {
       const { document } = browser.contentWindow;
       await waitForCalloutScreen(document, ".FEATURE_CALLOUT_1");
+
+      // Remove parent element for third screen in tour
+      document.querySelector("#colorways.content-container").remove();
       // Advance to second screen
       await clickPrimaryButton(document);
       await waitForCalloutScreen(document, ".FEATURE_CALLOUT_2");
@@ -365,8 +357,6 @@ add_task(async function feature_callout_only_highlights_existing_elements() {
         !document.querySelector(`${calloutSelector}:not(.hidden)`),
         "Feature Callout screen does not render if its parent element does not exist"
       );
-
-      sandbox.restore();
     }
   );
 });

browser/components/newtab/content-src/asrouter/schemas/MessagingExperiment.schema.json

@@ -117,8 +117,7 @@
               "template": {
                 "type": "string",
                 "enum": [
-                  "spotlight",
-                  "feature_callout"
+                  "spotlight"
                 ]
               }
             },
@@ -1259,7 +1258,7 @@
         },
         "template": {
           "type": "string",
-          "enum": ["spotlight", "feature_callout"]
+          "const": "spotlight"
         }
       },
       "additionalProperties": true,
@@ -1577,7 +1576,6 @@
             "pb_newtab",
             "protections_panel",
             "spotlight",
-            "feature_callout",
             "toast_notification",
             "toolbar_badge",
             "update_action",

browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/Spotlight.schema.json

@@ -161,8 +161,7 @@
     },
     "template": {
       "type": "string",
-      "description": "Specify whether the surface is shown as a Spotlight modal or an in-surface Feature Callout dialog",
-      "enum": ["spotlight", "feature_callout"]
+      "const": "spotlight"
     }
   },
   "additionalProperties": true,