Bug 1690447 - Update MultiStage onboarding template to display PinToTaskbar image r=emcminn

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

browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js

@@ -629,6 +629,15 @@ class WelcomeScreen extends react__WEBPACK_IMPORTED_MODULE_0___default.a.PureCom
           muted: "true",
           src: _lib_aboutwelcome_utils__WEBPACK_IMPORTED_MODULE_3__["AboutWelcomeUtils"].hasDarkMode() ? this.props.content.tiles.source.dark : this.props.content.tiles.source.default
         })) : null;
+
+      case "image":
+        return this.props.content.tiles.source ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+          className: `${this.props.content.tiles.media_type}`
+        }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", {
+          src: _lib_aboutwelcome_utils__WEBPACK_IMPORTED_MODULE_3__["AboutWelcomeUtils"].hasDarkMode() && this.props.content.tiles.source.dark ? this.props.content.tiles.source.dark : this.props.content.tiles.source.default,
+          role: "presentation",
+          alt: ""
+        })) : null;
     }
 
     return null;

browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx

@@ -342,6 +342,21 @@ export class WelcomeScreen extends React.PureComponent {
             />
           </div>
         ) : null;
+      case "image":
+        return this.props.content.tiles.source ? (
+          <div className={`${this.props.content.tiles.media_type}`}>
+            <img
+              src={
+                AboutWelcomeUtils.hasDarkMode() &&
+                this.props.content.tiles.source.dark
+                  ? this.props.content.tiles.source.dark
+                  : this.props.content.tiles.source.default
+              }
+              role="presentation"
+              alt=""
+            />
+          </div>
+        ) : null;
     }
     return null;
   }

browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js

@@ -81,6 +81,14 @@ const TEST_MULTISTAGE_CONTENT = {
       order: 2,
       content: {
         title: "Step 3",
+        tiles: {
+          type: "image",
+          media_type: "test-img",
+          source: {
+            default:
+              "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZmlsbD0iIzQ1YTFmZiIgZmlsbC1vcGFjaXR5PSJjb250ZXh0LWZpbGwtb3BhY2l0eSIgZD0iTTE1Ljg0NSA2LjA2NEExLjEgMS4xIDAgMCAwIDE1IDUuMzMxTDEwLjkxMSA0LjYgOC45ODUuNzM1YTEuMSAxLjEgMCAwIDAtMS45NjkgMEw1LjA4OSA0LjZsLTQuMDgxLjcyOWExLjEgMS4xIDAgMCAwLS42MTUgMS44MzRMMy4zMiAxMC4zMWwtLjYwOSA0LjM2YTEuMSAxLjEgMCAwIDAgMS42IDEuMTI3TDggMTMuODczbDMuNjkgMS45MjdhMS4xIDEuMSAwIDAgMCAxLjYtMS4xMjdsLS42MS00LjM2MyAyLjkyNi0zLjE0NmExLjEgMS4xIDAgMCAwIC4yMzktMS4xeiIvPjwvc3ZnPg==",
+          },
+        },
         primary_button: {
           label: "Next",
           action: {
@@ -308,7 +316,7 @@ add_task(async function test_multistage_aboutwelcome_experimentAPI() {
       "div.tiles-container.info",
     ],
     // Unexpected selectors:
-    ["main.AW_STEP1", "main.AW_STEP3", "div.secondary-cta.top"]
+    ["main.AW_STEP1", "main.AW_STEP3", "div.secondary-cta.top", "div.test-img"]
   );
   await onButtonClick(browser, "button.primary");
   await test_screen_content(
@@ -321,6 +329,7 @@ add_task(async function test_multistage_aboutwelcome_experimentAPI() {
       "div.brand-logo",
       "div.welcome-text",
       "p.helptext",
+      "div.test-img",
     ],
     // Unexpected selectors:
     ["main.AW_STEP1", "main.AW_STEP2"]