Merging upstream version 125.0.1.

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

2 files changed, 233 insertions, 63 deletions

diff --git a/browser/components/newtab/data/content/activity-stream.bundle.js b/browser/components/newtab/data/content/activity-stream.bundle.js
index 14691a95f4..8904ba87d1 100644
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -682,7 +682,7 @@ class DiscoveryStreamAdminUI extends (external_React_default()).PureComponent {
       }
     }));
   }
-  restorePrefDefaults(event) {
+  restorePrefDefaults() {
     this.props.dispatch(actionCreators.OnlyToMain({
       type: actionTypes.DISCOVERY_STREAM_CONFIG_RESET_DEFAULTS
     }));
@@ -1423,7 +1423,7 @@ const LinkMenuOptions = {
   EmptyItem: () => ({
     type: "empty"
   }),
-  ShowPrivacyInfo: site => ({
+  ShowPrivacyInfo: () => ({
     id: "newtab-menu-show-privacy-info",
     icon: "info",
     action: {
@@ -1820,7 +1820,7 @@ class ContextMenuButton extends (external_React_default()).PureComponent {
     this.onKeyDown = this.onKeyDown.bind(this);
     this.onUpdate = this.onUpdate.bind(this);
   }
-  openContextMenu(isKeyBoard, event) {
+  openContextMenu(isKeyBoard) {
     if (this.props.onUpdate) {
       this.props.onUpdate(true);
     }
@@ -2213,10 +2213,12 @@ class SafeAnchor extends (external_React_default()).PureComponent {
   render() {
     const {
       url,
-      className
+      className,
+      title
     } = this.props;
     return /*#__PURE__*/external_React_default().createElement("a", {
       href: this.safeURI(url),
+      title: title,
       className: className,
       onClick: this.onClick
     }, this.props.children);
@@ -2253,6 +2255,102 @@ const cardContextTypes = {
     icon: "download"
   }
 };
+;// CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/FeatureHighlight/FeatureHighlight.jsx
+/* 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/. */
+
+
+
+function FeatureHighlight({
+  message,
+  icon,
+  toggle,
+  position = "top-left",
+  title,
+  ariaLabel,
+  feature = "FEATURE_HIGHLIGHT_DEFAULT",
+  dispatch = () => {},
+  windowObj = __webpack_require__.g
+}) {
+  const [opened, setOpened] = (0,external_React_namespaceObject.useState)(false);
+  const ref = (0,external_React_namespaceObject.useRef)(null);
+  (0,external_React_namespaceObject.useEffect)(() => {
+    const handleOutsideClick = e => {
+      if (!ref?.current?.contains(e.target)) {
+        setOpened(false);
+      }
+    };
+    windowObj.document.addEventListener("click", handleOutsideClick);
+    return () => {
+      windowObj.document.removeEventListener("click", handleOutsideClick);
+    };
+  }, [windowObj]);
+  const onToggleClick = (0,external_React_namespaceObject.useCallback)(() => {
+    if (!opened) {
+      dispatch(actionCreators.DiscoveryStreamUserEvent({
+        event: "CLICK",
+        source: "FEATURE_HIGHLIGHT",
+        value: {
+          feature
+        }
+      }));
+    }
+    setOpened(!opened);
+  }, [dispatch, feature, opened]);
+  const openedClassname = opened ? `opened` : `closed`;
+  return /*#__PURE__*/external_React_default().createElement("div", {
+    ref: ref,
+    className: "feature-highlight"
+  }, /*#__PURE__*/external_React_default().createElement("button", {
+    title: title,
+    "aria-haspopup": "true",
+    "aria-label": ariaLabel,
+    className: "toggle-button",
+    onClick: onToggleClick
+  }, toggle), /*#__PURE__*/external_React_default().createElement("div", {
+    className: `feature-highlight-modal ${position} ${openedClassname}`
+  }, /*#__PURE__*/external_React_default().createElement("div", {
+    className: "message-icon"
+  }, icon), /*#__PURE__*/external_React_default().createElement("p", null, message), /*#__PURE__*/external_React_default().createElement("button", {
+    title: "Dismiss",
+    "aria-label": "Close sponsored content more info popup",
+    className: "icon icon-dismiss",
+    onClick: () => setOpened(false)
+  })));
+}
+;// CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/FeatureHighlight/SponsoredContentHighlight.jsx
+/* 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/. */
+
+
+
+
+function SponsoredContentHighlight({
+  position,
+  dispatch
+}) {
+  return /*#__PURE__*/external_React_default().createElement("div", {
+    className: "sponsored-content-highlight"
+  }, /*#__PURE__*/external_React_default().createElement(FeatureHighlight, {
+    position: position,
+    ariaLabel: "Sponsored content supports our mission to build a better web.",
+    title: "Sponsored content more info",
+    feature: "SPONSORED_CONTENT_INFO",
+    dispatch: dispatch,
+    message: /*#__PURE__*/external_React_default().createElement("span", null, "Sponsored content supports our mission to build a better web.", " ", /*#__PURE__*/external_React_default().createElement(SafeAnchor, {
+      dispatch: dispatch,
+      url: "https://support.mozilla.org/kb/pocket-sponsored-stories-new-tabs"
+    }, "Find out how")),
+    icon: /*#__PURE__*/external_React_default().createElement("div", {
+      className: "sponsored-message-icon"
+    }),
+    toggle: /*#__PURE__*/external_React_default().createElement("div", {
+      className: "icon icon-help"
+    })
+  }));
+}
 ;// CONCATENATED MODULE: external "ReactTransitionGroup"
 const external_ReactTransitionGroup_namespaceObject = ReactTransitionGroup;
 ;// CONCATENATED MODULE: ./content-src/components/FluentOrText/FluentOrText.jsx
@@ -2305,6 +2403,7 @@ class FluentOrText extends (external_React_default()).PureComponent {
 
 
 
+
 // Animation time is mirrored in DSContextFooter.scss
 const ANIMATION_DURATION = 3000;
 const DSMessageLabel = props => {
@@ -2385,7 +2484,9 @@ class DSContextFooter extends (external_React_default()).PureComponent {
       sponsor,
       sponsored_by_override,
       cta_button_variant,
-      source
+      source,
+      spocMessageVariant,
+      dispatch
     } = this.props;
     const sponsorLabel = SponsorLabel({
       sponsored_by_override,
@@ -2414,7 +2515,10 @@ class DSContextFooter extends (external_React_default()).PureComponent {
     if (sponsorLabel || dsMessageLabel) {
       return /*#__PURE__*/external_React_default().createElement("div", {
         className: "story-footer"
-      }, sponsorLabel, dsMessageLabel);
+      }, sponsorLabel, sponsorLabel && spocMessageVariant === "variant-b" && /*#__PURE__*/external_React_default().createElement(SponsoredContentHighlight, {
+        dispatch: dispatch,
+        position: "inset-block-end inset-inline-start"
+      }), dsMessageLabel);
     }
     return null;
   }
@@ -2517,8 +2621,9 @@ const DefaultMeta = ({
   sponsor,
   sponsored_by_override,
   saveToPocketCard,
-  isRecentSave,
-  ctaButtonVariant
+  ctaButtonVariant,
+  dispatch,
+  spocMessageVariant
 }) => /*#__PURE__*/external_React_default().createElement("div", {
   className: "meta"
 }, /*#__PURE__*/external_React_default().createElement("div", {
@@ -2531,7 +2636,6 @@ const DefaultMeta = ({
   sponsor: sponsor,
   sponsored_by_override: sponsored_by_override
 }), /*#__PURE__*/external_React_default().createElement("header", {
-  title: title,
   className: "title clamp"
 }, title), excerpt && /*#__PURE__*/external_React_default().createElement("p", {
   className: "excerpt clamp"
@@ -2541,7 +2645,9 @@ const DefaultMeta = ({
   sponsor: sponsor,
   sponsored_by_override: sponsored_by_override,
   cta_button_variant: ctaButtonVariant,
-  source: source
+  source: source,
+  dispatch: dispatch,
+  spocMessageVariant: spocMessageVariant
 }), newSponsoredLabel && /*#__PURE__*/external_React_default().createElement(DSMessageFooter, {
   context_type: context_type,
   context: null,
@@ -2592,7 +2698,7 @@ class _DSCard extends (external_React_default()).PureComponent {
       height: 101
     }];
   }
-  onLinkClick(event) {
+  onLinkClick() {
     if (this.props.dispatch) {
       this.props.dispatch(actionCreators.DiscoveryStreamUserEvent({
         event: "CLICK",
@@ -2624,7 +2730,7 @@ class _DSCard extends (external_React_default()).PureComponent {
       }));
     }
   }
-  onSaveClick(event) {
+  onSaveClick() {
     if (this.props.dispatch) {
       this.props.dispatch(actionCreators.AlsoToMain({
         type: actionTypes.SAVE_TO_POCKET,
@@ -2780,14 +2886,9 @@ class _DSCard extends (external_React_default()).PureComponent {
         "data-l10n-id": "newtab-pocket-save"
       })));
     };
-    return /*#__PURE__*/external_React_default().createElement("div", {
+    return /*#__PURE__*/external_React_default().createElement("article", {
       className: `ds-card ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName}`,
       ref: this.setContextMenuButtonHostRef
-    }, /*#__PURE__*/external_React_default().createElement(SafeAnchor, {
-      className: "ds-card-link",
-      dispatch: this.props.dispatch,
-      onLinkClick: !this.props.placeholder ? this.onLinkClick : undefined,
-      url: this.props.url
     }, /*#__PURE__*/external_React_default().createElement("div", {
       className: "img-wrapper"
     }, /*#__PURE__*/external_React_default().createElement(DSImage, {
@@ -2798,6 +2899,24 @@ class _DSCard extends (external_React_default()).PureComponent {
       url: this.props.url,
       title: this.props.title,
       isRecentSave: isRecentSave
+    })), /*#__PURE__*/external_React_default().createElement(SafeAnchor, {
+      className: "ds-card-link",
+      dispatch: this.props.dispatch,
+      onLinkClick: !this.props.placeholder ? this.onLinkClick : undefined,
+      url: this.props.url,
+      title: this.props.title
+    }, /*#__PURE__*/external_React_default().createElement(ImpressionStats_ImpressionStats, {
+      flightId: this.props.flightId,
+      rows: [{
+        id: this.props.id,
+        pos: this.props.pos,
+        ...(this.props.shim && this.props.shim.impression ? {
+          shim: this.props.shim.impression
+        } : {}),
+        recommendation_id: this.props.recommendation_id
+      }],
+      dispatch: this.props.dispatch,
+      source: this.props.type
     })), ctaButtonVariant === "variant-b" && /*#__PURE__*/external_React_default().createElement("div", {
       className: "cta-header"
     }, "Shop Now"), /*#__PURE__*/external_React_default().createElement(DefaultMeta, {
@@ -2811,20 +2930,10 @@ class _DSCard extends (external_React_default()).PureComponent {
       sponsor: this.props.sponsor,
       sponsored_by_override: this.props.sponsored_by_override,
       saveToPocketCard: saveToPocketCard,
-      ctaButtonVariant: ctaButtonVariant
-    }), /*#__PURE__*/external_React_default().createElement(ImpressionStats_ImpressionStats, {
-      flightId: this.props.flightId,
-      rows: [{
-        id: this.props.id,
-        pos: this.props.pos,
-        ...(this.props.shim && this.props.shim.impression ? {
-          shim: this.props.shim.impression
-        } : {}),
-        recommendation_id: this.props.recommendation_id
-      }],
+      ctaButtonVariant: ctaButtonVariant,
       dispatch: this.props.dispatch,
-      source: this.props.type
-    })), saveToPocketCard && /*#__PURE__*/external_React_default().createElement("div", {
+      spocMessageVariant: this.props.spocMessageVariant
+    }), saveToPocketCard && /*#__PURE__*/external_React_default().createElement("div", {
       className: "card-stp-button-hover-background"
     }, /*#__PURE__*/external_React_default().createElement("div", {
       className: "card-stp-button-position-wrapper"
@@ -2874,7 +2983,7 @@ const DSCard = (0,external_ReactRedux_namespaceObject.connect)(state => ({
   App: state.App,
   DiscoveryStream: state.DiscoveryStream
 }))(_DSCard);
-const PlaceholderDSCard = props => /*#__PURE__*/external_React_default().createElement(DSCard, {
+const PlaceholderDSCard = () => /*#__PURE__*/external_React_default().createElement(DSCard, {
   placeholder: true
 });
 ;// CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState.jsx
@@ -3163,7 +3272,6 @@ function DSSubHeader({
   }, children));
 }
 function OnboardingExperience({
-  children,
   dispatch,
   windowObj = __webpack_require__.g
 }) {
@@ -3409,6 +3517,7 @@ class _CardGrid extends (external_React_default()).PureComponent {
       onboardingExperience,
       ctaButtonSponsors,
       ctaButtonVariant,
+      spocMessageVariant,
       widgets,
       recentSavesEnabled,
       hideDescriptions,
@@ -3454,6 +3563,7 @@ class _CardGrid extends (external_React_default()).PureComponent {
         saveToPocketCard: saveToPocketCard,
         ctaButtonSponsors: ctaButtonSponsors,
         ctaButtonVariant: ctaButtonVariant,
+        spocMessageVariant: spocMessageVariant,
         recommendation_id: rec.recommendation_id
       }));
     }
@@ -3776,7 +3886,7 @@ class ErrorBoundary extends (external_React_default()).PureComponent {
       hasError: false
     };
   }
-  componentDidCatch(error, info) {
+  componentDidCatch() {
     this.setState({
       hasError: true
     });
@@ -3803,6 +3913,7 @@ ErrorBoundary.defaultProps = {
 
 
 
+
 /**
  * A section that can collapse. As of bug 1710937, it can no longer collapse.
  * See bug 1727365 for follow-up work to simplify this component.
@@ -3853,7 +3964,8 @@ class _CollapsibleSection extends (external_React_default()).PureComponent {
       collapsed,
       learnMore,
       title,
-      subTitle
+      subTitle,
+      mayHaveSponsoredStories
     } = this.props;
     const active = menuButtonHover || showContextMenu;
     let bodyStyle;
@@ -3899,7 +4011,10 @@ class _CollapsibleSection extends (external_React_default()).PureComponent {
       className: "section-sub-title"
     }, /*#__PURE__*/external_React_default().createElement(FluentOrText, {
       message: subTitle
-    })))), /*#__PURE__*/external_React_default().createElement(ErrorBoundary, {
+    })), mayHaveSponsoredStories && this.props.spocMessageVariant === "variant-a" && /*#__PURE__*/external_React_default().createElement(SponsoredContentHighlight, {
+      position: "inset-block-start inset-inline-start",
+      dispatch: this.props.dispatch
+    }))), /*#__PURE__*/external_React_default().createElement(ErrorBoundary, {
       className: "section-body-fallback"
     }, /*#__PURE__*/external_React_default().createElement("div", {
       ref: this.onBodyMount,
@@ -4013,13 +4128,13 @@ class DSPrivacyModal extends (external_React_default()).PureComponent {
     this.onLearnLinkClick = this.onLearnLinkClick.bind(this);
     this.onManageLinkClick = this.onManageLinkClick.bind(this);
   }
-  onLearnLinkClick(event) {
+  onLearnLinkClick() {
     this.props.dispatch(actionCreators.DiscoveryStreamUserEvent({
       event: "CLICK_PRIVACY_INFO",
       source: "DS_PRIVACY_MODAL"
     }));
   }
-  onManageLinkClick(event) {
+  onManageLinkClick() {
     this.props.dispatch(actionCreators.OnlyToMain({
       type: actionTypes.SETTINGS_OPEN
     }));
@@ -4044,7 +4159,7 @@ class DSPrivacyModal extends (external_React_default()).PureComponent {
       className: "modal-link modal-link-privacy",
       "data-l10n-id": "newtab-privacy-modal-link",
       onClick: this.onLearnLinkClick,
-      href: "https://help.getpocket.com/article/1142-firefox-new-tab-recommendations-faq"
+      href: "https://support.mozilla.org/kb/pocket-recommendations-firefox-new-tab"
     }), /*#__PURE__*/external_React_default().createElement("button", {
       className: "modal-link modal-link-manage",
       "data-l10n-id": "newtab-privacy-modal-button-manage",
@@ -6477,7 +6592,7 @@ class TopSiteLink extends (external_React_default()).PureComponent {
     // If we have tabbed to a search shortcut top site, and we click 'enter',
     // we should execute the onClick function. This needs to be added because
     // search top sites are anchor tags without an href. See bug 1483135
-    if (this.props.link.searchTopSite && event.key === "Enter") {
+    if (event.key === "Enter" && (this.props.link.searchTopSite || this.props.isAddButton)) {
       this.props.onClick(event);
     }
   }
@@ -6572,7 +6687,8 @@ class TopSiteLink extends (external_React_default()).PureComponent {
       isDraggable,
       link,
       onClick,
-      title
+      title,
+      isAddButton
     } = this.props;
     const topSiteOuterClassName = `top-site-outer${className ? ` ${className}` : ""}${link.isDragged ? " dragged" : ""}${link.searchTopSite ? " search-shortcut" : ""}`;
     const [letterFallback] = title;
@@ -6583,6 +6699,9 @@ class TopSiteLink extends (external_React_default()).PureComponent {
       imageClassName,
       selectedColor
     } = this.calculateStyle();
+    let addButtonl10n = {
+      "data-l10n-id": "newtab-topsites-add-shortcut-label"
+    };
     let draggableProps = {};
     if (isDraggable) {
       draggableProps = {
@@ -6674,14 +6793,16 @@ class TopSiteLink extends (external_React_default()).PureComponent {
       className: "top-site-icon search-topsite"
     })), /*#__PURE__*/external_React_default().createElement("div", {
       className: `title${link.isPinned ? " has-icon pinned" : ""}${link.type === SPOC_TYPE || link.show_sponsored_label ? " sponsored" : ""}`
-    }, /*#__PURE__*/external_React_default().createElement("span", {
+    }, /*#__PURE__*/external_React_default().createElement("span", TopSite_extends({
       dir: "auto"
-    }, link.isPinned && /*#__PURE__*/external_React_default().createElement("div", {
+    }, isAddButton && {
+      ...addButtonl10n
+    }), link.isPinned && /*#__PURE__*/external_React_default().createElement("div", {
       className: "icon icon-pin-small"
-    }), title || /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement("span", {
+    }), title || /*#__PURE__*/external_React_default().createElement("br", null)), /*#__PURE__*/external_React_default().createElement("span", {
       className: "sponsored-label",
       "data-l10n-id": "newtab-topsite-sponsored"
-    })))), children, impressionStats));
+    }))), children, impressionStats));
   }
 }
 TopSiteLink.defaultProps = {
@@ -6903,14 +7024,18 @@ class TopSitePlaceholder extends (external_React_default()).PureComponent {
     });
   }
   render() {
-    return /*#__PURE__*/external_React_default().createElement(TopSiteLink, TopSite_extends({}, this.props, {
-      className: `placeholder ${this.props.className || ""}`,
+    let addButtonProps = {};
+    if (this.props.isAddButton) {
+      addButtonProps = {
+        title: "newtab-topsites-add-shortcut-label",
+        onClick: this.onEditButtonClick
+      };
+    }
+    return /*#__PURE__*/external_React_default().createElement(TopSiteLink, TopSite_extends({}, this.props, this.props.isAddButton ? {
+      ...addButtonProps
+    } : {}, {
+      className: `placeholder ${this.props.className || ""} ${this.props.isAddButton ? "add-button" : ""}`,
       isDraggable: false
-    }), /*#__PURE__*/external_React_default().createElement("button", {
-      "aria-haspopup": "dialog",
-      className: "context-menu-button edit-button icon",
-      "data-l10n-id": "newtab-menu-topsites-placeholder-tooltip",
-      onClick: this.onEditButtonClick
     }));
   }
 }
@@ -7004,6 +7129,19 @@ class _TopSiteList extends (external_React_default()).PureComponent {
     // Make a copy of the sites to truncate or extend to desired length
     let topSites = this.props.TopSites.rows.slice();
     topSites.length = this.props.TopSitesRows * TOP_SITES_MAX_SITES_PER_ROW;
+    // if topSites do not fill an entire row add 'Add shortcut' button to array of topSites
+    // (there should only be one of these)
+    let firstPlaceholder = topSites.findIndex(Object.is.bind(null, undefined));
+    // make sure placeholder exists and there already isnt a add button
+    if (firstPlaceholder && !topSites.includes(site => site.isAddButton)) {
+      topSites[firstPlaceholder] = {
+        isAddButton: true
+      };
+    } else if (topSites.includes(site => site.isAddButton)) {
+      topSites.push(topSites.splice(topSites.indexOf({
+        isAddButton: true
+      }), 1)[0]);
+    }
     return topSites;
   }
 
@@ -7090,8 +7228,12 @@ class _TopSiteList extends (external_React_default()).PureComponent {
       let topSiteLink;
       // Use a placeholder if the link is empty or it's rendering a sponsored
       // tile for the about:home startup cache.
-      if (!link || props.App.isForStartupCache && isSponsored(link)) {
-        topSiteLink = /*#__PURE__*/external_React_default().createElement(TopSitePlaceholder, TopSite_extends({}, slotProps, commonProps));
+      if (!link || props.App.isForStartupCache && isSponsored(link) || topSites[i]?.isAddButton) {
+        if (link) {
+          topSiteLink = /*#__PURE__*/external_React_default().createElement(TopSitePlaceholder, TopSite_extends({}, slotProps, commonProps, {
+            isAddButton: topSites[i] && topSites[i].isAddButton
+          }));
+        }
       } else {
         topSiteLink = /*#__PURE__*/external_React_default().createElement(TopSite, TopSite_extends({
           link: link,
@@ -7551,7 +7693,7 @@ class _TopSites extends (external_React_default()).PureComponent {
     }))))));
   }
 }
-const TopSites_TopSites = (0,external_ReactRedux_namespaceObject.connect)((state, props) => ({
+const TopSites_TopSites = (0,external_ReactRedux_namespaceObject.connect)(state => ({
   TopSites: state.TopSites,
   Prefs: state.Prefs,
   TopSitesRows: state.Prefs.values.topSitesRows
@@ -8053,8 +8195,7 @@ class SectionTitle extends (external_React_default()).PureComponent {
 
 const selectLayoutRender = ({
   state = {},
-  prefs = {},
-  locale = ""
+  prefs = {}
 }) => {
   const {
     layout,
@@ -8337,7 +8478,7 @@ class _DiscoveryStreamBase extends (external_React_default()).PureComponent {
       });
     });
   }
-  renderComponent(component, embedWidth) {
+  renderComponent(component) {
     switch (component.type) {
       case "Highlights":
         return /*#__PURE__*/external_React_default().createElement(Highlights, null);
@@ -8417,6 +8558,7 @@ class _DiscoveryStreamBase extends (external_React_default()).PureComponent {
           onboardingExperience: component.properties.onboardingExperience,
           ctaButtonSponsors: component.properties.ctaButtonSponsors,
           ctaButtonVariant: component.properties.ctaButtonVariant,
+          spocMessageVariant: component.properties.spocMessageVariant,
           editorsPicksHeader: component.properties.editorsPicksHeader,
           recentSavesEnabled: this.props.DiscoveryStream.recentSavesEnabled,
           hideDescriptions: this.props.DiscoveryStream.hideDescriptions
@@ -8443,7 +8585,8 @@ class _DiscoveryStreamBase extends (external_React_default()).PureComponent {
   }
   render() {
     const {
-      locale
+      locale,
+      mayHaveSponsoredStories
     } = this.props;
     // Select layout render data by adding spocs and position to recommendations
     const {
@@ -8538,6 +8681,8 @@ class _DiscoveryStreamBase extends (external_React_default()).PureComponent {
       showPrefName: topStories.pref.feed,
       title: sectionTitle,
       subTitle: subTitle,
+      mayHaveSponsoredStories: mayHaveSponsoredStories,
+      spocMessageVariant: message?.properties?.spocMessageVariant,
       eventSource: "CARDGRID"
     }, this.renderLayout(layoutRender)), this.renderLayout([{
       width: 12,
@@ -8594,6 +8739,7 @@ class BackgroundsSection extends (external_React_default()).PureComponent {
 
 
 
+
 class ContentSection extends (external_React_default()).PureComponent {
   constructor(props) {
     super(props);
@@ -8671,7 +8817,8 @@ class ContentSection extends (external_React_default()).PureComponent {
       pocketRegion,
       mayHaveSponsoredStories,
       mayHaveRecentSaves,
-      openPreferences
+      openPreferences,
+      spocMessageVariant
     } = this.props;
     const {
       topSitesEnabled,
@@ -8805,7 +8952,14 @@ class ContentSection extends (external_React_default()).PureComponent {
       "data-eventSource": "HIGHLIGHTS",
       "data-l10n-id": "newtab-custom-recent-toggle",
       "data-l10n-attrs": "label, description"
-    }))), /*#__PURE__*/external_React_default().createElement("span", {
+    }))), pocketRegion && mayHaveSponsoredStories && spocMessageVariant === "variant-c" && /*#__PURE__*/external_React_default().createElement("div", {
+      className: "sponsored-content-info"
+    }, /*#__PURE__*/external_React_default().createElement("div", {
+      className: "icon icon-help"
+    }), /*#__PURE__*/external_React_default().createElement("div", null, "Sponsored content supports our mission to build a better web.", " ", /*#__PURE__*/external_React_default().createElement(SafeAnchor, {
+      dispatch: this.props.dispatch,
+      url: "https://support.mozilla.org/kb/pocket-sponsored-stories-new-tabs"
+    }, "Find out how"))), /*#__PURE__*/external_React_default().createElement("span", {
       className: "divider",
       role: "separator"
     }), /*#__PURE__*/external_React_default().createElement("div", null, /*#__PURE__*/external_React_default().createElement("button", {
@@ -8877,6 +9031,7 @@ class _CustomizeMenu extends (external_React_default()).PureComponent {
       mayHaveSponsoredTopSites: this.props.mayHaveSponsoredTopSites,
       mayHaveSponsoredStories: this.props.mayHaveSponsoredStories,
       mayHaveRecentSaves: this.props.DiscoveryStream.recentSavesEnabled,
+      spocMessageVariant: this.props.spocMessageVariant,
       dispatch: this.props.dispatch
     }))));
   }
@@ -9253,8 +9408,15 @@ class BaseContent extends (external_React_default()).PureComponent {
       customizeMenuVisible
     } = App;
     const prefs = props.Prefs.values;
+    const {
+      pocketConfig
+    } = prefs;
     const isDiscoveryStream = props.DiscoveryStream.config && props.DiscoveryStream.config.enabled;
     let filteredSections = props.Sections.filter(section => section.id !== "topstories");
+    let spocMessageVariant = "";
+    if (props.App.locale?.startsWith("en-") && pocketConfig?.spocMessageVariant === "variant-c") {
+      spocMessageVariant = pocketConfig.spocMessageVariant;
+    }
     const pocketEnabled = prefs["feeds.section.topstories"] && prefs["feeds.system.topstories"];
     const noSectionsEnabled = !prefs["feeds.topsites"] && !pocketEnabled && filteredSections.filter(section => section.enabled).length === 0;
     const searchHandoffEnabled = prefs["improvesearch.handoffToAwesomebar"];
@@ -9282,6 +9444,7 @@ class BaseContent extends (external_React_default()).PureComponent {
       pocketRegion: pocketRegion,
       mayHaveSponsoredTopSites: mayHaveSponsoredTopSites,
       mayHaveSponsoredStories: mayHaveSponsoredStories,
+      spocMessageVariant: spocMessageVariant,
       showing: customizeMenuVisible
     }), /*#__PURE__*/external_React_default().createElement("div", {
       className: outerClassName,
@@ -9296,7 +9459,8 @@ class BaseContent extends (external_React_default()).PureComponent {
     }, isDiscoveryStream ? /*#__PURE__*/external_React_default().createElement(ErrorBoundary, {
       className: "borderless-error"
     }, /*#__PURE__*/external_React_default().createElement(DiscoveryStreamBase, {
-      locale: props.App.locale
+      locale: props.App.locale,
+      mayHaveSponsoredStories: mayHaveSponsoredStories
     })) : /*#__PURE__*/external_React_default().createElement(Sections_Sections, null)), /*#__PURE__*/external_React_default().createElement(ConfirmDialog, null))));
   }
 }
@@ -9420,7 +9584,7 @@ function mergeStateReducer(mainReducer) {
 /**
  * messageMiddleware - Middleware that looks for SentToMain type actions, and sends them if necessary
  */
-const messageMiddleware = store => next => action => {
+const messageMiddleware = () => next => action => {
   const skipLocal = action.meta && action.meta.skipLocal;
   if (actionUtils.isSendToMain(action)) {
     RPMSendAsyncMessage(OUTGOING_MESSAGE_NAME, action);
diff --git a/browser/components/newtab/data/content/assets/sponsor-message-icon.svg b/browser/components/newtab/data/content/assets/sponsor-message-icon.svg
new file mode 100644
index 0000000000..09e171fcd9
--- /dev/null
+++ b/browser/components/newtab/data/content/assets/sponsor-message-icon.svg
@@ -0,0 +1,6 @@
+<!-- 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 https://mozilla.org/MPL/2.0/. -->
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M17.7598 0.927468L17.7505 0.920946C17.5 0.742695 17.1526 0.537416 16.7513 0.36344C15.9486 0.0162127 14.9513 -0.104324 14.0229 0.0989256C13.094 0.299531 12.2334 0.821423 11.6408 1.4615C11.3448 1.78286 11.1105 2.10874 10.9539 2.37127C10.9148 2.43505 10.8774 2.49984 10.8417 2.56557C10.7874 2.58861 10.7323 2.61339 10.6777 2.64187C10.461 2.74947 10.2348 2.88486 10.0191 3.05558C9.80233 3.22492 9.59191 3.42393 9.39579 3.64631C9.19845 3.8681 9.02216 4.11675 8.85927 4.37703C8.69518 4.63719 8.55497 4.91406 8.42867 5.19531L8.3365 5.40722L8.25361 5.62142L8.21238 5.72837L8.17554 5.83604L8.10242 6.0507C8.07953 6.12229 8.05913 6.19407 8.03757 6.26529C8.01717 6.3367 7.99326 6.40728 7.97616 6.4784L7.96345 6.52753C7.85559 6.36663 7.73933 6.21689 7.61557 6.08175C7.47438 5.92767 7.32573 5.79054 7.17472 5.66931C6.87206 5.42701 6.55805 5.25419 6.26847 5.13166C6.11579 5.06849 5.95919 5.01524 5.79965 4.97225L5.80171 4.96497L5.80175 4.96493C5.80175 4.96493 5.66129 4.86359 5.43844 4.74994C5.21392 4.63187 4.90727 4.50245 4.5599 4.40456C3.86526 4.20939 3.03654 4.22109 2.29995 4.48988C1.5626 4.75661 0.916726 5.27843 0.50298 5.86724C0.296469 6.16273 0.140971 6.45507 0.0418817 6.68701L0.0388746 6.69382C-0.0591635 6.91747 0.0342372 7.17977 0.251472 7.29129L0.259877 7.2956C0.484394 7.41364 0.791044 7.54309 1.13842 7.64098C1.83305 7.83615 2.66178 7.82445 3.39837 7.55566C4.13572 7.28897 4.78159 6.76715 5.19533 6.17831C5.28317 6.05241 5.36509 5.9225 5.44083 5.78898C5.55814 5.82094 5.67307 5.86104 5.7848 5.90901C5.97815 5.99462 6.18796 6.11342 6.38926 6.2795C6.48958 6.36264 7.27754 7.18586 7.27754 8.1353C7.30831 8.29686 7.32318 8.46104 7.32192 8.62549L7.31761 9.25589L7.30844 10.5451L7.25928 17.4565V17.4666C7.26207 17.8571 8.67623 17.8471 8.67344 17.4565L8.62428 10.5451L8.62066 10.0378C8.6275 10.0019 8.63098 9.96477 8.63055 9.9268L8.62616 9.52747L8.62537 9.42773L8.62703 9.32288L8.63062 9.08666C8.63073 9.00272 8.63558 8.91153 8.63971 8.81573C8.64446 8.72001 8.64696 8.6189 8.6541 8.51416L8.67797 8.18747C8.68681 8.07465 8.70105 7.95904 8.71279 7.83952C8.73964 7.60124 8.77456 7.35118 8.82075 7.09518L8.83738 6.99851L8.85746 6.90218L8.89792 6.70726C8.91028 6.64136 8.92894 6.57741 8.94426 6.51177C8.96067 6.44655 8.97589 6.38047 8.99339 6.315L9.04976 6.11932L9.07806 6.02092L9.1103 5.92404L9.17483 5.72949L9.24736 5.53838C9.34681 5.28502 9.45771 5.03656 9.5881 4.80653C9.71741 4.57611 9.85711 4.35677 10.0131 4.16396C10.1681 3.97031 10.3335 3.79825 10.5031 3.65178C10.6719 3.50385 10.8481 3.38752 11.0166 3.2931C11.0791 3.25607 11.1424 3.22644 11.2036 3.19782C11.445 3.36107 11.759 3.54048 12.1159 3.69522C12.9186 4.04244 13.9159 4.16298 14.8443 3.95973C15.7733 3.75909 16.6338 3.2372 17.2264 2.59716C17.5224 2.27576 17.7567 1.94988 17.9134 1.68735L17.9181 1.67964C18.0723 1.42686 18.0028 1.09677 17.7598 0.927468Z" fill="#2BA52E"/>
+</svg>