From 0b0f8e706907457c31614fab9274da121610857a Mon Sep 17 00:00:00 2001
From: Punam Dahiya <punamdahiya@yahoo.com>
Date: Wed, 3 Feb 2021 21:41:00 +0000
Subject: [PATCH] Bug 1690447 - Update MultiStage onboarding template to
 display PinToTaskbar image r=emcminn

Differential Revision: https://phabricator.services.mozilla.com/D103862
---
 .../aboutwelcome/content/aboutwelcome.bundle.js   |  9 +++++++++
 .../components/MultiStageAboutWelcome.jsx         | 15 +++++++++++++++
 .../browser/browser_aboutwelcome_multistage.js    | 11 ++++++++++-
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
index 7240dbf0fcaf..deed7d749fb6 100644
--- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js
+++ b/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;
diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx
index 78f45d2a9acf..fde65d3673d1 100644
--- a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx
+++ b/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;
   }
diff --git a/browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js b/browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js
index 7872e91e51e1..0344fc456bbc 100644
--- a/browser/components/newtab/test/browser/browser_aboutwelcome_multistage.js
+++ b/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"]