From 086c044dc34dfc0f74fbe41f4ecb402b2cd34884 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 03:13:33 +0200 Subject: Merging upstream version 125.0.1. Signed-off-by: Daniel Baumann --- .../newtab/data/content/activity-stream.bundle.js | 290 ++++++++++++++++----- .../data/content/assets/sponsor-message-icon.svg | 6 + 2 files changed, 233 insertions(+), 63 deletions(-) create mode 100644 browser/components/newtab/data/content/assets/sponsor-message-icon.svg (limited to 'browser/components/newtab/data') 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 @@ + + + + -- cgit v1.2.3