commit 5364ec3adbbbe28bc27bbb4cf9862351ebf69a69 parent 18849893142db455caa555938315694e8fd77065 Author: Nathan Barrett <nbarrett@mozilla.com> Date: Mon, 13 Oct 2025 14:02:07 +0000 Bug 1972623 - Remove code related to list feed and contexual content r=home-newtab-reviewers,npypchenko,Gijs Differential Revision: https://phabricator.services.mozilla.com/D254048 Diffstat:
29 files changed, 135 insertions(+), 2242 deletions(-)
diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js @@ -1979,11 +1979,6 @@ pref("browser.newtabpage.activity-stream.discoverystream.topicLabels.region-topi pref("browser.newtabpage.activity-stream.discoverystream.topicSelection.locale-topics-config", "en-US, en-GB, en-CA"); pref("browser.newtabpage.activity-stream.discoverystream.topicLabels.locale-topic-label-config", "en-US, en-GB, en-CA"); -// List of locales that get contextual content by default -pref("browser.newtabpage.activity-stream.discoverystream.contextualContent.locale-content-config", "en-US,en-GB,en-CA,de"); -// List of regions that get contextual content by default- TODO: update once development is closer to being finished -pref("browser.newtabpage.activity-stream.discoverystream.contextualContent.region-content-config", ""); - // List of locales that get section layout by default pref("browser.newtabpage.activity-stream.discoverystream.sections.locale-content-config", "en-US,en-CA"); // List of regions that get section layout by default diff --git a/browser/components/newtab/metrics.yaml b/browser/components/newtab/metrics.yaml @@ -574,138 +574,6 @@ newtab: send_in_pings: - newtab - fakespot_dismiss: - type: event - description: > - Recorded when a user dissmisses TBR fakespot feed - bugs: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_reviews: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_sensitivity: - - interaction - notification_emails: - - nbarrett@mozilla.com - expires: never - extra_keys: - newtab_visit_id: *newtab_visit_id - send_in_pings: - - newtab - - fakespot_about_click: - type: event - description: > - Recorded when a user the 'About Fakespot' link in TBR fakespot feed context menu - bugs: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_reviews: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_sensitivity: - - interaction - notification_emails: - - nbarrett@mozilla.com - expires: never - extra_keys: - newtab_visit_id: *newtab_visit_id - send_in_pings: - - newtab - - fakespot_click: - type: event - description: > - Recorded when a user clicks on a card in TBR fakespot feed - bugs: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_reviews: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_sensitivity: - - interaction - notification_emails: - - nbarrett@mozilla.com - expires: never - extra_keys: - newtab_visit_id: *newtab_visit_id - product_id: - description: > - id of fakespot product - type: string - category: - description: > - category of fakespot product - type: string - send_in_pings: - - newtab - - fakespot_product_impression: - type: event - description: > - Recorded when a user triggers an impression on a card in TBR fakespot feed - bugs: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_reviews: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_sensitivity: - - interaction - notification_emails: - - nbarrett@mozilla.com - expires: never - extra_keys: - newtab_visit_id: *newtab_visit_id - product_title: - description: > - title of fakespot product - type: string - product_id: - description: > - id of fakespot product - type: string - category: - description: > - category of fakespot product - type: string - send_in_pings: - - newtab - - fakespot_cta_click: - type: event - description: > - Recorded when a user clicks on the CTA in TBR fakespot feed - bugs: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_reviews: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_sensitivity: - - interaction - notification_emails: - - nbarrett@mozilla.com - expires: never - extra_keys: - newtab_visit_id: *newtab_visit_id - send_in_pings: - - newtab - - fakespot_category: - type: event - description: > - Recorded when a user changes the category in TBR fakespot feed - bugs: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_reviews: - - https://bugzilla.mozilla.org/show_bug.cgi?id=1924873 - data_sensitivity: - - interaction - notification_emails: - - nbarrett@mozilla.com - expires: never - extra_keys: - newtab_visit_id: *newtab_visit_id - category: - description: > - category that user selected - type: string - send_in_pings: - - newtab - sections_impression: type: event description: > @@ -1989,10 +1857,6 @@ pocket: description: > The list of topics the user selected type: string - is_list_card: - description: > - Where the article card is in the list component - type: boolean section: description: > If click belongs in a section, the name of the section @@ -2060,10 +1924,6 @@ pocket: description: > The list of topics the user selected type: string - is_list_card: - description: > - Where the article card is in the list component - type: boolean section: description: > If click belongs in a section, the name of the section @@ -2108,10 +1968,6 @@ pocket: corpus_item_id: *corpus_item_id received_rank: *received_rank recommended_at: *recommended_at - is_list_card: - description: > - Where the article card is in the list component - type: boolean section: description: > If click belongs in a section, the name of the section @@ -2178,10 +2034,6 @@ pocket: description: > The list of topics the user selected type: string - is_list_card: - description: > - Where the article card is in the list component - type: boolean section: description: > If click belongs in a section, the name of the section @@ -2323,10 +2175,6 @@ pocket: topic: description: The topic of the recommendation. Like "entertainment". type: string - is_list_card: - description: > - Where the article card is in the list component - type: boolean section: description: > If event belongs in a section, the name of the section @@ -2569,10 +2417,6 @@ newtab_content: description: > The list of topics the user selected type: string - is_list_card: - description: > - Where the article card is in the list component - type: boolean section: description: > If click belongs in a section, the name of the section @@ -2625,10 +2469,6 @@ newtab_content: description: > The list of topics the user selected type: string - is_list_card: - description: > - Where the article card is in the list component - type: boolean section: description: > If click belongs in a section, the name of the section @@ -2720,10 +2560,6 @@ newtab_content: topic: description: The topic of the recommendation. Like "entertainment". type: string - is_list_card: - description: > - Where the article card is in the list component - type: boolean section: description: > If event belongs in a section, the name of the section diff --git a/browser/extensions/newtab/common/Actions.mjs b/browser/extensions/newtab/common/Actions.mjs @@ -87,8 +87,6 @@ for (const type of [ "DISCOVERY_STREAM_TOPICS_LOADING", "DISCOVERY_STREAM_USER_EVENT", "DOWNLOAD_CHANGED", - "FAKESPOT_CTA_CLICK", - "FAKESPOT_DISMISS", "FAKE_FOCUS_SEARCH", "FILL_SEARCH_TERM", "FOLLOW_SECTION", diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin.jsx @@ -10,9 +10,6 @@ import React, { useEffect } from "react"; const PREF_AD_SIZE_MEDIUM_RECTANGLE = "newtabAdSize.mediumRectangle"; const PREF_AD_SIZE_BILLBOARD = "newtabAdSize.billboard"; const PREF_AD_SIZE_LEADERBOARD = "newtabAdSize.leaderboard"; -const PREF_CONTEXTUAL_CONTENT_SELECTED_FEED = - "discoverystream.contextualContent.selectedFeed"; -const PREF_CONTEXTUAL_CONTENT_FEEDS = "discoverystream.contextualContent.feeds"; const PREF_SECTIONS_ENABLED = "discoverystream.sections.enabled"; const PREF_SPOC_PLACEMENTS = "discoverystream.placements.spocs"; const PREF_SPOC_COUNTS = "discoverystream.placements.spocs.counts"; @@ -150,7 +147,6 @@ export class DiscoveryStreamAdminUI extends React.PureComponent { this.refreshInferredPersonalization.bind(this); this.refreshTopicSelectionCache = this.refreshTopicSelectionCache.bind(this); - this.toggleTBRFeed = this.toggleTBRFeed.bind(this); this.handleSectionsToggle = this.handleSectionsToggle.bind(this); this.toggleIABBanners = this.toggleIABBanners.bind(this); this.state = { @@ -231,12 +227,6 @@ export class DiscoveryStreamAdminUI extends React.PureComponent { this.dispatchSimpleAction(at.DISCOVERY_STREAM_DEV_SHOW_PLACEHOLDER); } - toggleTBRFeed(e) { - const feed = e.target.value; - const selectedFeed = PREF_CONTEXTUAL_CONTENT_SELECTED_FEED; - this.props.dispatch(ac.SetPref(selectedFeed, feed)); - } - idleDaily() { this.dispatchSimpleAction(at.DISCOVERY_STREAM_DEV_IDLE_DAILY); } @@ -629,14 +619,7 @@ export class DiscoveryStreamAdminUI extends React.PureComponent { const { config, layout } = this.props.state.DiscoveryStream; const personalized = this.props.otherPrefs["discoverystream.personalization.enabled"]; - const selectedFeed = - this.props.otherPrefs[PREF_CONTEXTUAL_CONTENT_SELECTED_FEED]; const sectionsEnabled = this.props.otherPrefs[PREF_SECTIONS_ENABLED]; - const TBRFeeds = this.props.otherPrefs[PREF_CONTEXTUAL_CONTENT_FEEDS].split( - "," - ) - .map(s => s.trim()) - .filter(item => item); // Prefs for IAB Banners const mediumRectangleEnabled = @@ -687,17 +670,6 @@ export class DiscoveryStreamAdminUI extends React.PureComponent { <button className="button" onClick={this.showPlaceholder}> Show Placeholder Cards </button>{" "} - <select - className="button" - onChange={this.toggleTBRFeed} - value={selectedFeed} - > - {TBRFeeds.map(feed => ( - <option key={feed} value={feed}> - {feed} - </option> - ))} - </select> <div className="toggle-wrapper"> <moz-toggle id="sections-toggle" diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx @@ -5,7 +5,6 @@ import { DSCard, PlaceholderDSCard } from "../DSCard/DSCard.jsx"; import { DSEmptyState } from "../DSEmptyState/DSEmptyState.jsx"; import { TopicsWidget } from "../TopicsWidget/TopicsWidget.jsx"; -import { ListFeed } from "../ListFeed/ListFeed.jsx"; import { AdBanner } from "../AdBanner/AdBanner.jsx"; import { FluentOrText } from "../../FluentOrText/FluentOrText.jsx"; import React, { useEffect, useRef } from "react"; @@ -18,11 +17,6 @@ const PREF_TOPICS_SELECTED = "discoverystream.topicSelection.selectedTopics"; const PREF_TOPICS_AVAILABLE = "discoverystream.topicSelection.topics"; const PREF_SPOCS_STARTUPCACHE_ENABLED = "discoverystream.spocs.startupCache.enabled"; -const PREF_LIST_FEED_ENABLED = "discoverystream.contextualContent.enabled"; -const PREF_LIST_FEED_SELECTED_FEED = - "discoverystream.contextualContent.selectedFeed"; -const PREF_FAKESPOT_ENABLED = - "discoverystream.contextualContent.fakespot.enabled"; const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard"; const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position"; const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard"; @@ -94,8 +88,6 @@ export class _CardGrid extends React.PureComponent { const selectedTopics = prefs[PREF_TOPICS_SELECTED]; const availableTopics = prefs[PREF_TOPICS_AVAILABLE]; const spocsStartupCacheEnabled = prefs[PREF_SPOCS_STARTUPCACHE_ENABLED]; - const listFeedEnabled = prefs[PREF_LIST_FEED_ENABLED]; - const listFeedSelectedFeed = prefs[PREF_LIST_FEED_SELECTED_FEED]; const billboardEnabled = prefs[PREF_BILLBOARD_ENABLED]; const leaderboardEnabled = prefs[PREF_LEADERBOARD_ENABLED]; const trendingEnabled = @@ -104,10 +96,7 @@ export class _CardGrid extends React.PureComponent { prefs[PREF_SEARCH_ENGINE]?.toLowerCase() === "google"; const trendingVariant = prefs[PREF_TRENDING_SEARCH_VARIANT]; - // filter out recs that should be in ListFeed - const recs = this.props.data.recommendations - .filter(item => !item.feedName) - .slice(0, items); + const recs = this.props.data.recommendations.slice(0, items); const cards = []; for (let index = 0; index < items; index++) { @@ -204,21 +193,6 @@ export class _CardGrid extends React.PureComponent { } } } - if (listFeedEnabled) { - const isFakespot = listFeedSelectedFeed === "fakespot"; - const fakespotEnabled = prefs[PREF_FAKESPOT_ENABLED]; - if (!isFakespot || (isFakespot && fakespotEnabled)) { - // Place the list feed as the 3rd element in the card grid - cards.splice( - 2, - 1, - this.renderListFeed( - this.props.data.recommendations, - listFeedSelectedFeed - ) - ); - } - } if (trendingEnabled && trendingVariant === "b") { const firstSpocPosition = this.props.spocPositions[0]?.index; // double check that a spoc/mrec is actually in the index it should be in @@ -301,24 +275,6 @@ export class _CardGrid extends React.PureComponent { ); } - renderListFeed(recommendations, selectedFeed) { - const recs = recommendations.filter(item => item.feedName === selectedFeed); - const isFakespot = selectedFeed === "fakespot"; - // remove duplicates from category list - const categories = [...new Set(recs.map(({ category }) => category))]; - const listFeed = ( - <ListFeed - // only display recs that match selectedFeed for ListFeed - recs={recs} - categories={isFakespot ? categories : []} - firstVisibleTimestamp={this.props.firstVisibleTimestamp} - type={this.props.type} - dispatch={this.props.dispatch} - /> - ); - return listFeed; - } - renderGridClassName() { const { hybridLayout, diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx @@ -105,7 +105,6 @@ export const DefaultMeta = ({ mayHaveThumbsUpDown, onThumbsUpClick, onThumbsDownClick, - isListCard, state, format, topic, @@ -115,10 +114,7 @@ export const DefaultMeta = ({ refinedCardsLayout, }) => { const shouldHaveThumbs = - !isListCard && - format !== "rectangle" && - mayHaveSectionsCards && - mayHaveThumbsUpDown; + format !== "rectangle" && mayHaveSectionsCards && mayHaveThumbsUpDown; const shouldHaveFooterSection = isSectionsCard && (shouldHaveThumbs || showTopics); @@ -149,8 +145,7 @@ export const DefaultMeta = ({ excerpt && <p className="excerpt clamp">{excerpt}</p> )} </div> - {!isListCard && - format !== "rectangle" && + {format !== "rectangle" && !mayHaveSectionsCards && mayHaveThumbsUpDown && !refinedCardsLayout && ( @@ -367,7 +362,6 @@ export class _DSCard extends React.PureComponent { features: this.props.features, matches_selected_topic: matchesSelectedTopic, selected_topics: this.props.selectedTopics, - is_list_card: this.props.isListCard, ...(this.props.format ? { format: this.props.format } : { @@ -407,7 +401,6 @@ export class _DSCard extends React.PureComponent { recommendation_id: this.props.recommendation_id, topic: this.props.topic, selected_topics: this.props.selectedTopics, - is_list_card: this.props.isListCard, ...(this.props.format ? { format: this.props.format } : { @@ -773,7 +766,6 @@ export class _DSCard extends React.PureComponent { isRecentSave, DiscoveryStream, Prefs, - isListCard, isFakespot, mayHaveSectionsCards, format, @@ -806,9 +798,7 @@ export class _DSCard extends React.PureComponent { } return ( <div - className={`ds-card placeholder ${placeholderClassName} ${ - isListCard ? "list-card-placeholder" : "" - } ${refinedCardsClassName}`} + className={`ds-card placeholder ${placeholderClassName} ${refinedCardsClassName}`} ref={this.setPlaceholderRef} > {placeholderElements} @@ -861,8 +851,6 @@ export class _DSCard extends React.PureComponent { const imageGradientClassName = imageGradient ? `ds-card-image-gradient` : ``; - const listCardClassName = isListCard ? `list-feed-card` : ``; - const fakespotClassName = isFakespot ? `fakespot` : ``; const sectionsCardsClassName = [ mayHaveSectionsCards ? `sections-card-ui` : ``, this.props.sectionsClassNames, @@ -876,15 +864,13 @@ export class _DSCard extends React.PureComponent { let images = this.renderImage({ sizes: this.standardCardImageSizes }); if (isMediumRectangle) { images = this.renderImage(); - } else if (isListCard) { - images = this.renderImage({ sizes: this.listCardImageSizes }); } else if (sectionsEnabled) { images = this.renderSectionCardImages(); } return ( <article - className={`ds-card ${listCardClassName} ${fakespotClassName} ${sectionsCardsClassName} ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${spocFormatClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName} ${refinedCardsClassName}`} + className={`ds-card ${sectionsCardsClassName} ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${spocFormatClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName} ${refinedCardsClassName}`} ref={this.setContextMenuButtonHostRef} data-position-one={this.props["data-position-one"]} data-position-two={this.props["data-position-one"]} @@ -902,7 +888,6 @@ export class _DSCard extends React.PureComponent { {this.props.showTopics && !this.props.mayHaveSectionsCards && this.props.topic && - !isListCard && !refinedCardsLayout && ( <span className="ds-card-topic" @@ -927,9 +912,7 @@ export class _DSCard extends React.PureComponent { received_rank: this.props.received_rank, topic: this.props.topic, features: this.props.features, - is_list_card: isListCard, ...(format ? { format } : {}), - isFakespot, category: this.props.category, ...(this.props.section ? { @@ -978,12 +961,9 @@ export class _DSCard extends React.PureComponent { onThumbsUpClick={this.onThumbsUpClick} onThumbsDownClick={this.onThumbsDownClick} state={this.state} - isListCard={isListCard} showTopics={!refinedCardsLayout && this.props.showTopics} isSectionsCard={ - this.props.mayHaveSectionsCards && - this.props.topic && - !isListCard + this.props.mayHaveSectionsCards && this.props.topic } format={format} topic={this.props.topic} @@ -1019,7 +999,6 @@ export class _DSCard extends React.PureComponent { scheduled_corpus_item_id={this.props.scheduled_corpus_item_id} recommended_at={this.props.recommended_at} received_rank={this.props.received_rank} - is_list_card={this.props.isListCard} section={this.props.section} section_position={this.props.sectionPosition} is_section_followed={this.props.sectionFollowed} diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu.jsx @@ -73,7 +73,6 @@ export class _DSLinkMenu extends React.PureComponent { recommended_at: this.props.recommended_at, received_rank: this.props.received_rank, topic: this.props.topic, - is_list_card: this.props.is_list_card, position: index, ...(this.props.format ? { format: this.props.format } : {}), ...(this.props.section diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/ListFeed/ListFeed.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/ListFeed/ListFeed.jsx @@ -1,182 +0,0 @@ -/* 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/. */ - -import React, { useState } from "react"; -import { useSelector } from "react-redux"; -import { DSCard } from "../DSCard/DSCard"; -import { ContextMenuButton } from "content-src/components/ContextMenu/ContextMenuButton"; -import { LinkMenu } from "content-src/components/LinkMenu/LinkMenu"; -import { SafeAnchor } from "../SafeAnchor/SafeAnchor"; -import { actionCreators as ac } from "common/Actions.mjs"; -const PREF_LISTFEED_TITLE = "discoverystream.contextualContent.listFeedTitle"; -const PREF_FAKESPOT_CATEGROY = - "discoverystream.contextualContent.fakespot.defaultCategoryTitle"; -const PREF_FAKESPOT_FOOTER = - "discoverystream.contextualContent.fakespot.footerCopy"; -const PREF_FAKESPOT_CTA_COPY = - "discoverystream.contextualContent.fakespot.ctaCopy"; -const PREF_FAKESPOT_CTA_URL = - "discoverystream.contextualContent.fakespot.ctaUrl"; -const PREF_CONTEXTUAL_CONTENT_SELECTED_FEED = - "discoverystream.contextualContent.selectedFeed"; - -function ListFeed({ type, firstVisibleTimestamp, recs, categories, dispatch }) { - const [selectedFakespotFeed, setSelectedFakespotFeed] = useState(""); - const prefs = useSelector(state => state.Prefs.values); - const listFeedTitle = prefs[PREF_LISTFEED_TITLE]; - const categoryTitle = prefs[PREF_FAKESPOT_CATEGROY]; - const footerCopy = prefs[PREF_FAKESPOT_FOOTER]; - const ctaCopy = prefs[PREF_FAKESPOT_CTA_COPY]; - const ctaUrl = prefs[PREF_FAKESPOT_CTA_URL]; - - const isFakespot = - prefs[PREF_CONTEXTUAL_CONTENT_SELECTED_FEED] === "fakespot"; - // Todo: need to remove ads while using default recommendations, remove this line once API has been updated. - let listFeedRecs = selectedFakespotFeed - ? recs.filter(rec => rec.category === selectedFakespotFeed) - : recs; - - function handleCtaClick() { - dispatch( - ac.OnlyToMain({ - type: "FAKESPOT_CTA_CLICK", - }) - ); - } - - function handleChange(e) { - setSelectedFakespotFeed(e.target.value); - dispatch( - ac.DiscoveryStreamUserEvent({ - event: "FAKESPOT_CATEGORY", - value: { - category: e.target.value || "", - }, - }) - ); - } - - const contextMenuOptions = ["FakespotDismiss", "AboutFakespot"]; - - const { length: listLength } = listFeedRecs; - // determine if the list should take up all availible height or not - const fullList = listLength >= 5; - return ( - listLength > 0 && ( - <div - className={`list-feed ${fullList ? "full-height" : ""} ${ - listLength > 2 ? "span-2" : "span-1" - }`} - > - <div className="list-feed-inner-wrapper"> - {isFakespot ? ( - <div className="fakespot-heading"> - <div className="dropdown-wrapper"> - <select - className="fakespot-dropdown" - name="fakespot-categories" - value={selectedFakespotFeed} - onChange={handleChange} - > - <option value=""> - {categoryTitle || "Holiday Gift Guide"} - </option> - {categories.map(category => ( - <option key={category} value={category}> - {category} - </option> - ))} - </select> - <div className="context-menu-wrapper"> - <ContextMenuButton> - <LinkMenu - dispatch={dispatch} - options={contextMenuOptions} - shouldSendImpressionStats={true} - site={{ url: "https://www.fakespot.com" }} - /> - </ContextMenuButton> - </div> - </div> - <p className="fakespot-desc">{listFeedTitle}</p> - </div> - ) : ( - <h1 className="list-feed-title" id="list-feed-title"> - <span className="icon icon-newsfeed"></span> - {listFeedTitle} - </h1> - )} - <div - className="list-feed-content" - role="menu" - aria-labelledby="list-feed-title" - > - {listFeedRecs.slice(0, 5).map((rec, index) => { - if (!rec || rec.placeholder) { - return ( - <DSCard - key={`list-card-${index}`} - placeholder={true} - isListCard={true} - /> - ); - } - return ( - <DSCard - key={`list-card-${index}`} - pos={index} - flightId={rec.flight_id} - image_src={rec.image_src} - raw_image_src={rec.raw_image_src} - word_count={rec.word_count} - time_to_read={rec.time_to_read} - title={rec.title} - topic={rec.topic} - excerpt={rec.excerpt} - url={rec.url} - id={rec.id} - shim={rec.shim} - type={type} - context={rec.context} - sponsor={rec.sponsor} - sponsored_by_override={rec.sponsored_by_override} - dispatch={dispatch} - source={rec.domain} - publisher={rec.publisher} - pocket_id={rec.pocket_id} - context_type={rec.context_type} - bookmarkGuid={rec.bookmarkGuid} - firstVisibleTimestamp={firstVisibleTimestamp} - corpus_item_id={rec.corpus_item_id} - scheduled_corpus_item_id={rec.scheduled_corpus_item_id} - recommended_at={rec.recommended_at} - received_rank={rec.received_rank} - isListCard={true} - isFakespot={isFakespot} - category={rec.category} - /> - ); - })} - {isFakespot && ( - <div className="fakespot-footer"> - <p>{footerCopy}</p> - <SafeAnchor - className="fakespot-cta" - url={ctaUrl} - referrer={""} - onLinkClick={handleCtaClick} - dispatch={dispatch} - > - {ctaCopy} - </SafeAnchor> - </div> - )} - </div> - </div> - </div> - ) - ); -} - -export { ListFeed }; diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/ListFeed/_ListFeed.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/ListFeed/_ListFeed.scss @@ -1,370 +0,0 @@ -.list-feed { - grid-column: span 1 / -1; - grid-row: span 2; - height: 100%; - - &.span-1 { - grid-row: span 1; - } - - &.span-2 { - grid-row: span 2; - } - - &.full-height { - display: flex; - - .list-feed-content { - flex: 1; - - .list-feed-card { - flex: 1; - } - } - } - - @media (min-width: $break-point-medium) { - &.span-1 { - grid-row: span 1; - } - - &.span-2 { - grid-row: span 2; - } - } - - @media (min-width: $break-point-layout-variant) { - &.span-1 { - grid-row: span 1 / -1; - } - - &.span-2 { - grid-row: span 2 / -1; - } - } - - .list-feed-inner-wrapper { - box-shadow: $shadow-card; - background-color: var(--newtab-background-color-secondary); - border-radius: var(--border-radius-medium); - display: flex; - flex-direction: column; - flex: 1; - } - - .list-feed-title { - padding-inline-start: var(--space-medium); - padding-block: var(--space-small); - font-size: var(--font-size-small); - color: var(--newtab-text-primary-color); - font-weight: var(--font-weight-bold); - margin: 0; - - .icon { - margin-inline-end: var(--space-small); - transform: none; - fill: var(--newtab-text-primary-color); - vertical-align: text-bottom; - } - } - - .list-feed-content { - list-style: none; - padding-inline-start: 0; - margin: 0; - display: flex; - flex-direction: column; - row-gap: var(--border-width); - } - - .fakespot-dropdown { - background: transparent; - border: none; - border-radius: var(--border-radius-small); - -moz-context-properties: fill; - fill: currentColor; - font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); - margin-block: var(--space-xsmall); - padding-block: var(--space-small); - padding-inline-start: var(--space-medium); - position: relative; - max-width: 18ch; - text-overflow: ellipsis; - - @media (min-width: $break-point-widest) { - max-width: none; - background-image: url('chrome://browser/skin/gift.svg'); - background-repeat: no-repeat; - background-size: 16px; - background-position: left var(--space-medium) center; - padding-inline-start: var(--space-xxlarge); - } - - &:hover { - background-color: var(--newtab-button-hover-background);; - } - } -} - -.fakespot-heading { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; - - .dropdown-wrapper { - display: flex; - position: relative; - width: 100%; - } - - .fakespot-desc { - padding-inline: var(--space-medium); - margin-block: 0 var(--space-small); - font-size: var(--font-size-small); - } - - .context-menu-wrapper { - @include context-menu-button; - - .context-menu { - inset-inline-start: auto; - inset-inline-end: var(--space-small); - inset-block-start: var(--space-xxlarge); - } - - .context-menu-button { - opacity: 1; - transform: scale(1); - background-color: transparent; - border-radius: var(--border-radius-small); - box-shadow: none; - inset-inline-end: var(--space-small); - inset-block-start: var(--space-small); - - &:is(:hover) { - background-color: var(--newtab-button-hover-background); - } - - &:is(:focus-visible) { - outline-color: var(--newtab-button-focus-border); - background-color: var(--newtab-button-focus-background); - outline-width: 2px; - } - - &:is(:active) { - background-color: var(--newtab-button-active-background); - } - } - } -} - -.fakespot-footer { - align-items: center; - border-block-start: var(--border-width) solid var(--border-color-deemphasized); - border-end-start-radius: var(--border-radius-medium); - border-end-end-radius: var(--border-radius-medium); - border-start-start-radius: 0; - border-start-end-radius: 0; - display: flex; - flex-direction: column; - justify-content: center; - padding: var(--space-medium); - - - p { - font-size: var(--font-size-small); - margin-block-start: 0; - } - - .fakespot-cta { - background-color: var(--button-background-color-primary); - border: var(--button-border); - border-color: var(--button-border-color-primary); - border-radius: var(--button-border-radius); - color: var(--button-text-color-primary); - font-size: var(--font-size-small); - font-weight: var(--button-font-weight); - padding: var(--button-padding); - text-decoration: none; - text-align: center; - align-self: stretch; - - &:hover { - background-color: var(--button-background-color-primary-hover); - border-color: var(--button-border-color-primary-hover); - color: var(--button-text-color-primary-hover); - } - - &:focus-visible { - outline: var(--focus-outline); - outline-offset: var(--focus-outline-offset); - } - } -} - -.ds-card.placeholder.list-card-placeholder { - box-shadow: unset; - padding-inline-end: var(--space-large); - padding-block: var(--space-large) var(--space-small); - flex: 1; - - .placeholder-image { - height: 75px; - width: 75px; - position: absolute; - border-radius: var(--border-radius-medium); - inset-inline-end: var(--space-large); - - @media (min-width: $break-point-widest) { - height: 75px; - width: 75px; - } - } - - .placeholder-label { - margin-block-end: unset; - } - - .placeholder-header, .placeholder-description { - width: 60%; - height: 20px; - } - - - @media (min-width: $break-point-widest) { - .placeholder-image { - height: 75px; - width: 75px; - } - - .placeholder-header, .placeholder-description { - height: 20px; - } - } -} - - -.ds-card-grid .list-feed-content .ds-card.list-feed-card { - // overrides when using the DSCard component - background-color: var(--newtab-background-color-secondary); - border-block-start: var(--border-width) solid var(--border-color-deemphasized); - border-radius: 0; - box-shadow: none; - flex-direction: row-reverse; - min-height: 135px; - gap: var(--space-large); - position: relative; - height: 135px; - - @media (min-width: $break-point-widest) { - height: 140px; - } - - &.fakespot { - flex-direction: row; - min-height: 75px; - } - - .ds-card-link { - inset-block-start: 0; - inset-inline-start: 0; - border-radius: 0; - flex-direction: row; - padding-inline: var(--space-large); - padding-block: var(--space-large) var(--space-small); - } - - .meta { - padding: 0; - - .story-footer { - margin-block-start: var(--space-xsmall); - } - - .source { - margin-block-end: var(--space-xxsmall); - } - - .title { - font-size: var(--font-size-small); - } - - } - - .excerpt { - display: none; - } - - .card-stp-button-hover-background { - border-radius: 0; - height: 100%; - opacity: 1; - background-color: transparent; - padding-block-start: 0; - inset-inline-start: 0; - - .card-stp-button-position-wrapper { - inset-block-end: var(--space-small); - inset-inline-end: var(--space-large); - align-items: flex-end; - } - - .context-menu-button { - opacity: 1; - transform: scale(1); - background-color: transparent; - box-shadow: none; - } - } - - .img-wrapper { - flex-shrink: 0; - height: 55px; - width: 55px; - - img { - height: auto; - border-radius: var(--border-radius-medium); - } - - @media (min-width: $break-point-widest) { - height: 75px; - width: 75px; - } - } - - &:last-child:not(.fakespot) { - border-end-start-radius: var(--border-radius-medium); - border-end-end-radius: var(--border-radius-medium); - border-start-start-radius: 0; - border-start-end-radius: 0; - - .card-stp-button-hover-background { - border-end-start-radius: var(--border-radius-medium); - border-end-end-radius: var(--border-radius-medium); - border-start-start-radius: 0; - border-start-end-radius: 0; - } - } - - &:hover, - &:focus-within { - background-color: var(--newtab-element-secondary-color); - - .card-stp-button-hover-background { - background: transparent; - } - - .card-stp-button-position-wrapper { - align-items: flex-end; - } - - .context-menu-button { - &:hover, &:focus { - background-color: var(--newtab-button-background); - } - } - } -} diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamImpressionStats/ImpressionStats.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamImpressionStats/ImpressionStats.jsx @@ -55,7 +55,6 @@ export class ImpressionStats extends React.PureComponent { _dispatchImpressionStats() { const { props } = this; - const { isFakespot } = props; const cards = props.rows; if (this.props.flightId) { @@ -88,63 +87,47 @@ export class ImpressionStats extends React.PureComponent { } if (this._needsImpressionStats(cards)) { - if (isFakespot) { - props.dispatch( - ac.DiscoveryStreamImpressionStats({ - source: props.source.toUpperCase(), - window_inner_width: window.innerWidth, - window_inner_height: window.innerHeight, - tiles: cards.map(link => ({ - id: link.id, - type: "fakespot", - category: link.category, - })), - }) - ); - } else { - props.dispatch( - ac.DiscoveryStreamImpressionStats({ - source: props.source.toUpperCase(), - window_inner_width: window.innerWidth, - window_inner_height: window.innerHeight, - tiles: cards.map(link => ({ - id: link.id, - pos: link.pos, - type: props.flightId ? "spoc" : "organic", - ...(link.shim ? { shim: link.shim } : {}), - recommendation_id: link.recommendation_id, - fetchTimestamp: link.fetchTimestamp, - corpus_item_id: link.corpus_item_id, - scheduled_corpus_item_id: link.scheduled_corpus_item_id, - recommended_at: link.recommended_at, - received_rank: link.received_rank, - topic: link.topic, - features: link.features, - is_list_card: link.is_list_card, - ...(link.format - ? { format: link.format } - : { - format: getActiveCardSize( - window.innerWidth, - link.class_names, - link.section, - link.flightId - ), - }), - ...(link.section - ? { - section: link.section, - section_position: link.section_position, - is_section_followed: link.is_section_followed, - layout_name: link.sectionLayoutName, - } - : {}), - })), - firstVisibleTimestamp: props.firstVisibleTimestamp, - }) - ); - this.impressionCardGuids = cards.map(link => link.id); - } + props.dispatch( + ac.DiscoveryStreamImpressionStats({ + source: props.source.toUpperCase(), + window_inner_width: window.innerWidth, + window_inner_height: window.innerHeight, + tiles: cards.map(link => ({ + id: link.id, + pos: link.pos, + type: props.flightId ? "spoc" : "organic", + ...(link.shim ? { shim: link.shim } : {}), + recommendation_id: link.recommendation_id, + fetchTimestamp: link.fetchTimestamp, + corpus_item_id: link.corpus_item_id, + scheduled_corpus_item_id: link.scheduled_corpus_item_id, + recommended_at: link.recommended_at, + received_rank: link.received_rank, + topic: link.topic, + features: link.features, + ...(link.format + ? { format: link.format } + : { + format: getActiveCardSize( + window.innerWidth, + link.class_names, + link.section, + link.flightId + ), + }), + ...(link.section + ? { + section: link.section, + section_position: link.section_position, + is_section_followed: link.is_section_followed, + layout_name: link.sectionLayoutName, + } + : {}), + })), + firstVisibleTimestamp: props.firstVisibleTimestamp, + }) + ); + this.impressionCardGuids = cards.map(link => link.id); } } diff --git a/browser/extensions/newtab/content-src/components/LinkMenu/LinkMenu.jsx b/browser/extensions/newtab/content-src/components/LinkMenu/LinkMenu.jsx @@ -77,7 +77,6 @@ export class _LinkMenu extends React.PureComponent { fetchTimestamp, firstVisibleTimestamp, format, - is_list_card, is_section_followed, received_rank, recommendation_id, @@ -97,7 +96,6 @@ export class _LinkMenu extends React.PureComponent { fetchTimestamp, firstVisibleTimestamp, format, - is_list_card, received_rank, recommendation_id, recommended_at, diff --git a/browser/extensions/newtab/content-src/lib/link-menu-options.mjs b/browser/extensions/newtab/content-src/lib/link-menu-options.mjs @@ -92,7 +92,6 @@ export const LinkMenuOptions = { format: site.format, ...(site.flight_id ? { flight_id: site.flight_id } : {}), is_pocket_card: site.type === "CardGrid", - is_list_card: site.is_list_card, ...(site.section ? { section: site.section, @@ -148,7 +147,6 @@ export const LinkMenuOptions = { position: pos, ...(site.sponsored_tile_id ? { tile_id: site.sponsored_tile_id } : {}), is_pocket_card: site.type === "CardGrid", - is_list_card: site.is_list_card, ...(site.format ? { format: site.format } : {}), ...(site.section ? { @@ -395,29 +393,6 @@ export const LinkMenuOptions = { data: { url: site.url }, }), }), - FakespotDismiss: () => ({ - id: "newtab-menu-dismiss", - action: ac.OnlyToMain({ - type: at.SET_PREF, - data: { - name: "discoverystream.contextualContent.fakespot.enabled", - value: false, - }, - }), - impression: ac.OnlyToMain({ - type: at.FAKESPOT_DISMISS, - }), - }), - AboutFakespot: site => ({ - id: "newtab-menu-about-fakespot", - action: ac.OnlyToMain({ - type: at.OPEN_LINK, - data: { url: site.url }, - }), - impression: ac.OnlyToMain({ - type: at.OPEN_ABOUT_FAKESPOT, - }), - }), SectionBlock: ({ sectionPersonalization, sectionKey, diff --git a/browser/extensions/newtab/content-src/styles/activity-stream.scss b/browser/extensions/newtab/content-src/styles/activity-stream.scss @@ -198,7 +198,6 @@ input { @import '../components/DiscoveryStreamComponents/FeatureHighlight/WallpaperFeatureHighlight'; @import '../components/DiscoveryStreamComponents/FeatureHighlight/ShortcutFeatureHighlight'; @import '../components/DiscoveryStreamComponents/TopicSelection/TopicSelection'; -@import '../components/DiscoveryStreamComponents/ListFeed/ListFeed'; @import '../components/DiscoveryStreamComponents/AdBanner/AdBanner'; @import '../components/DiscoveryStreamComponents/AdBannerContextMenu/AdBannerContextMenu'; @import '../components/DiscoveryStreamComponents/PromoCard/PromoCard'; diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css @@ -8764,357 +8764,6 @@ dialog::after { height: 26px; } -.list-feed { - grid-column: span 1/-1; - grid-row: span 2; - height: 100%; -} -.list-feed.span-1 { - grid-row: span 1; -} -.list-feed.span-2 { - grid-row: span 2; -} -.list-feed.full-height { - display: flex; -} -.list-feed.full-height .list-feed-content { - flex: 1; -} -.list-feed.full-height .list-feed-content .list-feed-card { - flex: 1; -} -@media (min-width: 610px) { - .list-feed.span-1 { - grid-row: span 1; - } - .list-feed.span-2 { - grid-row: span 2; - } -} -@media (min-width: 724px) { - .list-feed.span-1 { - grid-row: span 1/-1; - } - .list-feed.span-2 { - grid-row: span 2/-1; - } -} -.list-feed .list-feed-inner-wrapper { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); - background-color: var(--newtab-background-color-secondary); - border-radius: var(--border-radius-medium); - display: flex; - flex-direction: column; - flex: 1; -} -.list-feed .list-feed-title { - padding-inline-start: var(--space-medium); - padding-block: var(--space-small); - font-size: var(--font-size-small); - color: var(--newtab-text-primary-color); - font-weight: var(--font-weight-bold); - margin: 0; -} -.list-feed .list-feed-title .icon { - margin-inline-end: var(--space-small); - transform: none; - fill: var(--newtab-text-primary-color); - vertical-align: text-bottom; -} -.list-feed .list-feed-content { - list-style: none; - padding-inline-start: 0; - margin: 0; - display: flex; - flex-direction: column; - row-gap: var(--border-width); -} -.list-feed .fakespot-dropdown { - background: transparent; - border: none; - border-radius: var(--border-radius-small); - -moz-context-properties: fill; - fill: currentColor; - font-size: var(--font-size-small); - font-weight: var(--font-weight-bold); - margin-block: var(--space-xsmall); - padding-block: var(--space-small); - padding-inline-start: var(--space-medium); - position: relative; - max-width: 18ch; - text-overflow: ellipsis; -} -@media (min-width: 1122px) { - .list-feed .fakespot-dropdown { - max-width: none; - background-image: url("chrome://browser/skin/gift.svg"); - background-repeat: no-repeat; - background-size: 16px; - background-position: left var(--space-medium) center; - padding-inline-start: var(--space-xxlarge); - } -} -.list-feed .fakespot-dropdown:hover { - background-color: var(--newtab-button-hover-background); -} - -.fakespot-heading { - display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; -} -.fakespot-heading .dropdown-wrapper { - display: flex; - position: relative; - width: 100%; -} -.fakespot-heading .fakespot-desc { - padding-inline: var(--space-medium); - margin-block: 0 var(--space-small); - font-size: var(--font-size-small); -} -.fakespot-heading .context-menu-wrapper .context-menu-button { - background-clip: padding-box; - background-color: var(--newtab-button-background); - background-image: url("chrome://global/skin/icons/more.svg"); - background-position: 50.1%; - border: 0; - outline: 1px solid var(--newtab-border-color); - outline-width: 0; - border-radius: var(--border-radius-circle); - cursor: pointer; - color: var(--button-text-color); - fill: var(--newtab-button-text); - height: 27px; - inset-inline-end: calc(var(--space-medium) * -1); - opacity: 0; - position: absolute; - inset-block-start: calc(var(--space-medium) * -1); - transform: scale(0.25); - transition-duration: 150ms; - transition-property: transform, opacity; - width: 27px; -} -.fakespot-heading .context-menu-wrapper .context-menu-button:is(:active, :focus-visible, :hover) { - opacity: 1; - transform: scale(1); -} -.fakespot-heading .context-menu-wrapper .context-menu-button:is(:hover) { - background-color: var(--newtab-button-hover-background); -} -.fakespot-heading .context-menu-wrapper .context-menu-button:is(:focus-visible) { - outline-color: var(--newtab-button-focus-border); - background-color: var(--newtab-button-focus-background); - outline-width: 4px; -} -.fakespot-heading .context-menu-wrapper .context-menu-button:is(:active) { - background-color: var(--newtab-button-active-background); -} -.fakespot-heading .context-menu-wrapper .context-menu { - inset-inline-start: auto; - inset-inline-end: var(--space-small); - inset-block-start: var(--space-xxlarge); -} -.fakespot-heading .context-menu-wrapper .context-menu-button { - opacity: 1; - transform: scale(1); - background-color: transparent; - border-radius: var(--border-radius-small); - box-shadow: none; - inset-inline-end: var(--space-small); - inset-block-start: var(--space-small); -} -.fakespot-heading .context-menu-wrapper .context-menu-button:is(:hover) { - background-color: var(--newtab-button-hover-background); -} -.fakespot-heading .context-menu-wrapper .context-menu-button:is(:focus-visible) { - outline-color: var(--newtab-button-focus-border); - background-color: var(--newtab-button-focus-background); - outline-width: 2px; -} -.fakespot-heading .context-menu-wrapper .context-menu-button:is(:active) { - background-color: var(--newtab-button-active-background); -} - -.fakespot-footer { - align-items: center; - border-block-start: var(--border-width) solid var(--border-color-deemphasized); - border-end-start-radius: var(--border-radius-medium); - border-end-end-radius: var(--border-radius-medium); - border-start-start-radius: 0; - border-start-end-radius: 0; - display: flex; - flex-direction: column; - justify-content: center; - padding: var(--space-medium); -} -.fakespot-footer p { - font-size: var(--font-size-small); - margin-block-start: 0; -} -.fakespot-footer .fakespot-cta { - background-color: var(--button-background-color-primary); - border: var(--button-border); - border-color: var(--button-border-color-primary); - border-radius: var(--button-border-radius); - color: var(--button-text-color-primary); - font-size: var(--font-size-small); - font-weight: var(--button-font-weight); - padding: var(--button-padding); - text-decoration: none; - text-align: center; - align-self: stretch; -} -.fakespot-footer .fakespot-cta:hover { - background-color: var(--button-background-color-primary-hover); - border-color: var(--button-border-color-primary-hover); - color: var(--button-text-color-primary-hover); -} -.fakespot-footer .fakespot-cta:focus-visible { - outline: var(--focus-outline); - outline-offset: var(--focus-outline-offset); -} - -.ds-card.placeholder.list-card-placeholder { - box-shadow: unset; - padding-inline-end: var(--space-large); - padding-block: var(--space-large) var(--space-small); - flex: 1; -} -.ds-card.placeholder.list-card-placeholder .placeholder-image { - height: 75px; - width: 75px; - position: absolute; - border-radius: var(--border-radius-medium); - inset-inline-end: var(--space-large); -} -@media (min-width: 1122px) { - .ds-card.placeholder.list-card-placeholder .placeholder-image { - height: 75px; - width: 75px; - } -} -.ds-card.placeholder.list-card-placeholder .placeholder-label { - margin-block-end: unset; -} -.ds-card.placeholder.list-card-placeholder .placeholder-header, .ds-card.placeholder.list-card-placeholder .placeholder-description { - width: 60%; - height: 20px; -} -@media (min-width: 1122px) { - .ds-card.placeholder.list-card-placeholder .placeholder-image { - height: 75px; - width: 75px; - } - .ds-card.placeholder.list-card-placeholder .placeholder-header, .ds-card.placeholder.list-card-placeholder .placeholder-description { - height: 20px; - } -} - -.ds-card-grid .list-feed-content .ds-card.list-feed-card { - background-color: var(--newtab-background-color-secondary); - border-block-start: var(--border-width) solid var(--border-color-deemphasized); - border-radius: 0; - box-shadow: none; - flex-direction: row-reverse; - min-height: 135px; - gap: var(--space-large); - position: relative; - height: 135px; -} -@media (min-width: 1122px) { - .ds-card-grid .list-feed-content .ds-card.list-feed-card { - height: 140px; - } -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card.fakespot { - flex-direction: row; - min-height: 75px; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .ds-card-link { - inset-block-start: 0; - inset-inline-start: 0; - border-radius: 0; - flex-direction: row; - padding-inline: var(--space-large); - padding-block: var(--space-large) var(--space-small); -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .meta { - padding: 0; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .meta .story-footer { - margin-block-start: var(--space-xsmall); -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .meta .source { - margin-block-end: var(--space-xxsmall); -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .meta .title { - font-size: var(--font-size-small); -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .excerpt { - display: none; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .card-stp-button-hover-background { - border-radius: 0; - height: 100%; - opacity: 1; - background-color: transparent; - padding-block-start: 0; - inset-inline-start: 0; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .card-stp-button-hover-background .card-stp-button-position-wrapper { - inset-block-end: var(--space-small); - inset-inline-end: var(--space-large); - align-items: flex-end; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .card-stp-button-hover-background .context-menu-button { - opacity: 1; - transform: scale(1); - background-color: transparent; - box-shadow: none; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .img-wrapper { - flex-shrink: 0; - height: 55px; - width: 55px; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card .img-wrapper img { - height: auto; - border-radius: var(--border-radius-medium); -} -@media (min-width: 1122px) { - .ds-card-grid .list-feed-content .ds-card.list-feed-card .img-wrapper { - height: 75px; - width: 75px; - } -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card:last-child:not(.fakespot) { - border-end-start-radius: var(--border-radius-medium); - border-end-end-radius: var(--border-radius-medium); - border-start-start-radius: 0; - border-start-end-radius: 0; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card:last-child:not(.fakespot) .card-stp-button-hover-background { - border-end-start-radius: var(--border-radius-medium); - border-end-end-radius: var(--border-radius-medium); - border-start-start-radius: 0; - border-start-end-radius: 0; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card:hover, .ds-card-grid .list-feed-content .ds-card.list-feed-card:focus-within { - background-color: var(--newtab-element-secondary-color); -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card:hover .card-stp-button-hover-background, .ds-card-grid .list-feed-content .ds-card.list-feed-card:focus-within .card-stp-button-hover-background { - background: transparent; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card:hover .card-stp-button-position-wrapper, .ds-card-grid .list-feed-content .ds-card.list-feed-card:focus-within .card-stp-button-position-wrapper { - align-items: flex-end; -} -.ds-card-grid .list-feed-content .ds-card.list-feed-card:hover .context-menu-button:hover, .ds-card-grid .list-feed-content .ds-card.list-feed-card:hover .context-menu-button:focus, .ds-card-grid .list-feed-content .ds-card.list-feed-card:focus-within .context-menu-button:hover, .ds-card-grid .list-feed-content .ds-card.list-feed-card:focus-within .context-menu-button:focus { - background-color: var(--newtab-button-background); -} - .ad-banner-wrapper { --banner-padding: var(--space-large); --billboard-width: 970px; diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js @@ -160,8 +160,6 @@ for (const type of [ "DISCOVERY_STREAM_TOPICS_LOADING", "DISCOVERY_STREAM_USER_EVENT", "DOWNLOAD_CHANGED", - "FAKESPOT_CTA_CLICK", - "FAKESPOT_DISMISS", "FAKE_FOCUS_SEARCH", "FILL_SEARCH_TERM", "FOLLOW_SECTION", @@ -624,8 +622,6 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f const PREF_AD_SIZE_MEDIUM_RECTANGLE = "newtabAdSize.mediumRectangle"; const PREF_AD_SIZE_BILLBOARD = "newtabAdSize.billboard"; const PREF_AD_SIZE_LEADERBOARD = "newtabAdSize.leaderboard"; -const PREF_CONTEXTUAL_CONTENT_SELECTED_FEED = "discoverystream.contextualContent.selectedFeed"; -const PREF_CONTEXTUAL_CONTENT_FEEDS = "discoverystream.contextualContent.feeds"; const PREF_SECTIONS_ENABLED = "discoverystream.sections.enabled"; const PREF_SPOC_PLACEMENTS = "discoverystream.placements.spocs"; const PREF_SPOC_COUNTS = "discoverystream.placements.spocs.counts"; @@ -728,7 +724,6 @@ class DiscoveryStreamAdminUI extends (external_React_default()).PureComponent { this.resetBlocks = this.resetBlocks.bind(this); this.refreshInferredPersonalization = this.refreshInferredPersonalization.bind(this); this.refreshTopicSelectionCache = this.refreshTopicSelectionCache.bind(this); - this.toggleTBRFeed = this.toggleTBRFeed.bind(this); this.handleSectionsToggle = this.handleSectionsToggle.bind(this); this.toggleIABBanners = this.toggleIABBanners.bind(this); this.state = { @@ -787,11 +782,6 @@ class DiscoveryStreamAdminUI extends (external_React_default()).PureComponent { showPlaceholder() { this.dispatchSimpleAction(actionTypes.DISCOVERY_STREAM_DEV_SHOW_PLACEHOLDER); } - toggleTBRFeed(e) { - const feed = e.target.value; - const selectedFeed = PREF_CONTEXTUAL_CONTENT_SELECTED_FEED; - this.props.dispatch(actionCreators.SetPref(selectedFeed, feed)); - } idleDaily() { this.dispatchSimpleAction(actionTypes.DISCOVERY_STREAM_DEV_IDLE_DAILY); } @@ -1057,9 +1047,7 @@ class DiscoveryStreamAdminUI extends (external_React_default()).PureComponent { layout } = this.props.state.DiscoveryStream; const personalized = this.props.otherPrefs["discoverystream.personalization.enabled"]; - const selectedFeed = this.props.otherPrefs[PREF_CONTEXTUAL_CONTENT_SELECTED_FEED]; const sectionsEnabled = this.props.otherPrefs[PREF_SECTIONS_ENABLED]; - const TBRFeeds = this.props.otherPrefs[PREF_CONTEXTUAL_CONTENT_FEEDS].split(",").map(s => s.trim()).filter(item => item); // Prefs for IAB Banners const mediumRectangleEnabled = this.props.otherPrefs[PREF_AD_SIZE_MEDIUM_RECTANGLE]; @@ -1096,14 +1084,7 @@ class DiscoveryStreamAdminUI extends (external_React_default()).PureComponent { }, "Refresh Topic selection count"), /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement("button", { className: "button", onClick: this.showPlaceholder - }, "Show Placeholder Cards"), " ", /*#__PURE__*/external_React_default().createElement("select", { - className: "button", - onChange: this.toggleTBRFeed, - value: selectedFeed - }, TBRFeeds.map(feed => /*#__PURE__*/external_React_default().createElement("option", { - key: feed, - value: feed - }, feed))), /*#__PURE__*/external_React_default().createElement("div", { + }, "Show Placeholder Cards"), " ", /*#__PURE__*/external_React_default().createElement("div", { className: "toggle-wrapper" }, /*#__PURE__*/external_React_default().createElement("moz-toggle", { id: "sections-toggle", @@ -1810,7 +1791,6 @@ const LinkMenuOptions = { format: site.format, ...(site.flight_id ? { flight_id: site.flight_id } : {}), is_pocket_card: site.type === "CardGrid", - is_list_card: site.is_list_card, ...(site.section ? { section: site.section, @@ -1866,7 +1846,6 @@ const LinkMenuOptions = { position: pos, ...(site.sponsored_tile_id ? { tile_id: site.sponsored_tile_id } : {}), is_pocket_card: site.type === "CardGrid", - is_list_card: site.is_list_card, ...(site.format ? { format: site.format } : {}), ...(site.section ? { @@ -2113,29 +2092,6 @@ const LinkMenuOptions = { data: { url: site.url }, }), }), - FakespotDismiss: () => ({ - id: "newtab-menu-dismiss", - action: actionCreators.OnlyToMain({ - type: actionTypes.SET_PREF, - data: { - name: "discoverystream.contextualContent.fakespot.enabled", - value: false, - }, - }), - impression: actionCreators.OnlyToMain({ - type: actionTypes.FAKESPOT_DISMISS, - }), - }), - AboutFakespot: site => ({ - id: "newtab-menu-about-fakespot", - action: actionCreators.OnlyToMain({ - type: actionTypes.OPEN_LINK, - data: { url: site.url }, - }), - impression: actionCreators.OnlyToMain({ - type: actionTypes.OPEN_ABOUT_FAKESPOT, - }), - }), SectionBlock: ({ sectionPersonalization, sectionKey, @@ -2359,7 +2315,6 @@ class _LinkMenu extends (external_React_default()).PureComponent { fetchTimestamp, firstVisibleTimestamp, format, - is_list_card, is_section_followed, received_rank, recommendation_id, @@ -2378,7 +2333,6 @@ class _LinkMenu extends (external_React_default()).PureComponent { fetchTimestamp, firstVisibleTimestamp, format, - is_list_card, received_rank, recommendation_id, recommended_at, @@ -2568,7 +2522,6 @@ class _DSLinkMenu extends (external_React_default()).PureComponent { recommended_at: this.props.recommended_at, received_rank: this.props.received_rank, topic: this.props.topic, - is_list_card: this.props.is_list_card, position: index, ...(this.props.format ? { format: this.props.format @@ -2945,9 +2898,6 @@ class ImpressionStats_ImpressionStats extends (external_React_default()).PureCom const { props } = this; - const { - isFakespot - } = props; const cards = props.rows; if (this.props.flightId) { this.props.dispatch(actionCreators.OnlyToMain({ @@ -2976,54 +2926,40 @@ class ImpressionStats_ImpressionStats extends (external_React_default()).PureCom } } if (this._needsImpressionStats(cards)) { - if (isFakespot) { - props.dispatch(actionCreators.DiscoveryStreamImpressionStats({ - source: props.source.toUpperCase(), - window_inner_width: window.innerWidth, - window_inner_height: window.innerHeight, - tiles: cards.map(link => ({ - id: link.id, - type: "fakespot", - category: link.category - })) - })); - } else { - props.dispatch(actionCreators.DiscoveryStreamImpressionStats({ - source: props.source.toUpperCase(), - window_inner_width: window.innerWidth, - window_inner_height: window.innerHeight, - tiles: cards.map(link => ({ - id: link.id, - pos: link.pos, - type: props.flightId ? "spoc" : "organic", - ...(link.shim ? { - shim: link.shim - } : {}), - recommendation_id: link.recommendation_id, - fetchTimestamp: link.fetchTimestamp, - corpus_item_id: link.corpus_item_id, - scheduled_corpus_item_id: link.scheduled_corpus_item_id, - recommended_at: link.recommended_at, - received_rank: link.received_rank, - topic: link.topic, - features: link.features, - is_list_card: link.is_list_card, - ...(link.format ? { - format: link.format - } : { - format: getActiveCardSize(window.innerWidth, link.class_names, link.section, link.flightId) - }), - ...(link.section ? { - section: link.section, - section_position: link.section_position, - is_section_followed: link.is_section_followed, - layout_name: link.sectionLayoutName - } : {}) - })), - firstVisibleTimestamp: props.firstVisibleTimestamp - })); - this.impressionCardGuids = cards.map(link => link.id); - } + props.dispatch(actionCreators.DiscoveryStreamImpressionStats({ + source: props.source.toUpperCase(), + window_inner_width: window.innerWidth, + window_inner_height: window.innerHeight, + tiles: cards.map(link => ({ + id: link.id, + pos: link.pos, + type: props.flightId ? "spoc" : "organic", + ...(link.shim ? { + shim: link.shim + } : {}), + recommendation_id: link.recommendation_id, + fetchTimestamp: link.fetchTimestamp, + corpus_item_id: link.corpus_item_id, + scheduled_corpus_item_id: link.scheduled_corpus_item_id, + recommended_at: link.recommended_at, + received_rank: link.received_rank, + topic: link.topic, + features: link.features, + ...(link.format ? { + format: link.format + } : { + format: getActiveCardSize(window.innerWidth, link.class_names, link.section, link.flightId) + }), + ...(link.section ? { + section: link.section, + section_position: link.section_position, + is_section_followed: link.is_section_followed, + layout_name: link.sectionLayoutName + } : {}) + })), + firstVisibleTimestamp: props.firstVisibleTimestamp + })); + this.impressionCardGuids = cards.map(link => link.id); } } @@ -3587,7 +3523,6 @@ const DefaultMeta = ({ mayHaveThumbsUpDown, onThumbsUpClick, onThumbsDownClick, - isListCard, state, format, topic, @@ -3596,7 +3531,7 @@ const DefaultMeta = ({ icon_src, refinedCardsLayout }) => { - const shouldHaveThumbs = !isListCard && format !== "rectangle" && mayHaveSectionsCards && mayHaveThumbsUpDown; + const shouldHaveThumbs = format !== "rectangle" && mayHaveSectionsCards && mayHaveThumbsUpDown; const shouldHaveFooterSection = isSectionsCard && (shouldHaveThumbs || showTopics); return /*#__PURE__*/external_React_default().createElement("div", { className: "meta" @@ -3616,7 +3551,7 @@ const DefaultMeta = ({ className: "excerpt clamp" }, "Sponsored content supports our mission to build a better web.") : excerpt && /*#__PURE__*/external_React_default().createElement("p", { className: "excerpt clamp" - }, excerpt)), !isListCard && format !== "rectangle" && !mayHaveSectionsCards && mayHaveThumbsUpDown && !refinedCardsLayout && /*#__PURE__*/external_React_default().createElement(DSThumbsUpDownButtons, { + }, excerpt)), format !== "rectangle" && !mayHaveSectionsCards && mayHaveThumbsUpDown && !refinedCardsLayout && /*#__PURE__*/external_React_default().createElement(DSThumbsUpDownButtons, { onThumbsDownClick: onThumbsDownClick, onThumbsUpClick: onThumbsUpClick, sponsor: sponsor, @@ -3785,7 +3720,6 @@ class _DSCard extends (external_React_default()).PureComponent { features: this.props.features, matches_selected_topic: matchesSelectedTopic, selected_topics: this.props.selectedTopics, - is_list_card: this.props.isListCard, ...(this.props.format ? { format: this.props.format } : { @@ -3814,7 +3748,6 @@ class _DSCard extends (external_React_default()).PureComponent { recommendation_id: this.props.recommendation_id, topic: this.props.topic, selected_topics: this.props.selectedTopics, - is_list_card: this.props.isListCard, ...(this.props.format ? { format: this.props.format } : { @@ -4115,7 +4048,6 @@ class _DSCard extends (external_React_default()).PureComponent { isRecentSave, DiscoveryStream, Prefs, - isListCard, isFakespot, mayHaveSectionsCards, format @@ -4144,7 +4076,7 @@ class _DSCard extends (external_React_default()).PureComponent { })); } return /*#__PURE__*/external_React_default().createElement("div", { - className: `ds-card placeholder ${placeholderClassName} ${isListCard ? "list-card-placeholder" : ""} ${refinedCardsClassName}`, + className: `ds-card placeholder ${placeholderClassName} ${refinedCardsClassName}`, ref: this.setPlaceholderRef }, placeholderElements); } @@ -4180,8 +4112,6 @@ class _DSCard extends (external_React_default()).PureComponent { const ctaButtonClassName = ctaButtonEnabled ? `ds-card-cta-button` : ``; const compactImagesClassName = compactImages ? `ds-card-compact-image` : ``; const imageGradientClassName = imageGradient ? `ds-card-image-gradient` : ``; - const listCardClassName = isListCard ? `list-feed-card` : ``; - const fakespotClassName = isFakespot ? `fakespot` : ``; const sectionsCardsClassName = [mayHaveSectionsCards ? `sections-card-ui` : ``, this.props.sectionsClassNames].join(" "); const titleLinesName = `ds-card-title-lines-${titleLines}`; const descLinesClassName = `ds-card-desc-lines-${descLines}`; @@ -4193,15 +4123,11 @@ class _DSCard extends (external_React_default()).PureComponent { }); if (isMediumRectangle) { images = this.renderImage(); - } else if (isListCard) { - images = this.renderImage({ - sizes: this.listCardImageSizes - }); } else if (sectionsEnabled) { images = this.renderSectionCardImages(); } return /*#__PURE__*/external_React_default().createElement("article", { - className: `ds-card ${listCardClassName} ${fakespotClassName} ${sectionsCardsClassName} ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${spocFormatClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName} ${refinedCardsClassName}`, + className: `ds-card ${sectionsCardsClassName} ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${spocFormatClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName} ${refinedCardsClassName}`, ref: this.setContextMenuButtonHostRef, "data-position-one": this.props["data-position-one"], "data-position-two": this.props["data-position-one"], @@ -4214,7 +4140,7 @@ class _DSCard extends (external_React_default()).PureComponent { url: this.props.url, title: this.props.title, isSponsored: !!this.props.flightId - }, this.props.showTopics && !this.props.mayHaveSectionsCards && this.props.topic && !isListCard && !refinedCardsLayout && /*#__PURE__*/external_React_default().createElement("span", { + }, this.props.showTopics && !this.props.mayHaveSectionsCards && this.props.topic && !refinedCardsLayout && /*#__PURE__*/external_React_default().createElement("span", { className: "ds-card-topic", "data-l10n-id": `newtab-topic-label-${this.props.topic}` }), /*#__PURE__*/external_React_default().createElement("div", { @@ -4235,11 +4161,9 @@ class _DSCard extends (external_React_default()).PureComponent { received_rank: this.props.received_rank, topic: this.props.topic, features: this.props.features, - is_list_card: isListCard, ...(format ? { format } : {}), - isFakespot, category: this.props.category, ...(this.props.section ? { section: this.props.section, @@ -4282,9 +4206,8 @@ class _DSCard extends (external_React_default()).PureComponent { onThumbsUpClick: this.onThumbsUpClick, onThumbsDownClick: this.onThumbsDownClick, state: this.state, - isListCard: isListCard, showTopics: !refinedCardsLayout && this.props.showTopics, - isSectionsCard: this.props.mayHaveSectionsCards && this.props.topic && !isListCard, + isSectionsCard: this.props.mayHaveSectionsCards && this.props.topic, format: format, topic: this.props.topic, icon_src: faviconSrc, @@ -4317,7 +4240,6 @@ class _DSCard extends (external_React_default()).PureComponent { scheduled_corpus_item_id: this.props.scheduled_corpus_item_id, recommended_at: this.props.recommended_at, received_rank: this.props.received_rank, - is_list_card: this.props.isListCard, section: this.props.section, section_position: this.props.sectionPosition, is_section_followed: this.props.sectionFollowed, @@ -4549,151 +4471,6 @@ _TopicsWidget.defaultProps = { const TopicsWidget = (0,external_ReactRedux_namespaceObject.connect)(state => ({ DiscoveryStream: state.DiscoveryStream }))(_TopicsWidget); -;// CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/ListFeed/ListFeed.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/. */ - - - - - - - - -const PREF_LISTFEED_TITLE = "discoverystream.contextualContent.listFeedTitle"; -const PREF_FAKESPOT_CATEGROY = "discoverystream.contextualContent.fakespot.defaultCategoryTitle"; -const PREF_FAKESPOT_FOOTER = "discoverystream.contextualContent.fakespot.footerCopy"; -const PREF_FAKESPOT_CTA_COPY = "discoverystream.contextualContent.fakespot.ctaCopy"; -const PREF_FAKESPOT_CTA_URL = "discoverystream.contextualContent.fakespot.ctaUrl"; -const ListFeed_PREF_CONTEXTUAL_CONTENT_SELECTED_FEED = "discoverystream.contextualContent.selectedFeed"; -function ListFeed({ - type, - firstVisibleTimestamp, - recs, - categories, - dispatch -}) { - const [selectedFakespotFeed, setSelectedFakespotFeed] = (0,external_React_namespaceObject.useState)(""); - const prefs = (0,external_ReactRedux_namespaceObject.useSelector)(state => state.Prefs.values); - const listFeedTitle = prefs[PREF_LISTFEED_TITLE]; - const categoryTitle = prefs[PREF_FAKESPOT_CATEGROY]; - const footerCopy = prefs[PREF_FAKESPOT_FOOTER]; - const ctaCopy = prefs[PREF_FAKESPOT_CTA_COPY]; - const ctaUrl = prefs[PREF_FAKESPOT_CTA_URL]; - const isFakespot = prefs[ListFeed_PREF_CONTEXTUAL_CONTENT_SELECTED_FEED] === "fakespot"; - // Todo: need to remove ads while using default recommendations, remove this line once API has been updated. - let listFeedRecs = selectedFakespotFeed ? recs.filter(rec => rec.category === selectedFakespotFeed) : recs; - function handleCtaClick() { - dispatch(actionCreators.OnlyToMain({ - type: "FAKESPOT_CTA_CLICK" - })); - } - function handleChange(e) { - setSelectedFakespotFeed(e.target.value); - dispatch(actionCreators.DiscoveryStreamUserEvent({ - event: "FAKESPOT_CATEGORY", - value: { - category: e.target.value || "" - } - })); - } - const contextMenuOptions = ["FakespotDismiss", "AboutFakespot"]; - const { - length: listLength - } = listFeedRecs; - // determine if the list should take up all availible height or not - const fullList = listLength >= 5; - return listLength > 0 && /*#__PURE__*/external_React_default().createElement("div", { - className: `list-feed ${fullList ? "full-height" : ""} ${listLength > 2 ? "span-2" : "span-1"}` - }, /*#__PURE__*/external_React_default().createElement("div", { - className: "list-feed-inner-wrapper" - }, isFakespot ? /*#__PURE__*/external_React_default().createElement("div", { - className: "fakespot-heading" - }, /*#__PURE__*/external_React_default().createElement("div", { - className: "dropdown-wrapper" - }, /*#__PURE__*/external_React_default().createElement("select", { - className: "fakespot-dropdown", - name: "fakespot-categories", - value: selectedFakespotFeed, - onChange: handleChange - }, /*#__PURE__*/external_React_default().createElement("option", { - value: "" - }, categoryTitle || "Holiday Gift Guide"), categories.map(category => /*#__PURE__*/external_React_default().createElement("option", { - key: category, - value: category - }, category))), /*#__PURE__*/external_React_default().createElement("div", { - className: "context-menu-wrapper" - }, /*#__PURE__*/external_React_default().createElement(ContextMenuButton, null, /*#__PURE__*/external_React_default().createElement(LinkMenu, { - dispatch: dispatch, - options: contextMenuOptions, - shouldSendImpressionStats: true, - site: { - url: "https://www.fakespot.com" - } - })))), /*#__PURE__*/external_React_default().createElement("p", { - className: "fakespot-desc" - }, listFeedTitle)) : /*#__PURE__*/external_React_default().createElement("h1", { - className: "list-feed-title", - id: "list-feed-title" - }, /*#__PURE__*/external_React_default().createElement("span", { - className: "icon icon-newsfeed" - }), listFeedTitle), /*#__PURE__*/external_React_default().createElement("div", { - className: "list-feed-content", - role: "menu", - "aria-labelledby": "list-feed-title" - }, listFeedRecs.slice(0, 5).map((rec, index) => { - if (!rec || rec.placeholder) { - return /*#__PURE__*/external_React_default().createElement(DSCard, { - key: `list-card-${index}`, - placeholder: true, - isListCard: true - }); - } - return /*#__PURE__*/external_React_default().createElement(DSCard, { - key: `list-card-${index}`, - pos: index, - flightId: rec.flight_id, - image_src: rec.image_src, - raw_image_src: rec.raw_image_src, - word_count: rec.word_count, - time_to_read: rec.time_to_read, - title: rec.title, - topic: rec.topic, - excerpt: rec.excerpt, - url: rec.url, - id: rec.id, - shim: rec.shim, - type: type, - context: rec.context, - sponsor: rec.sponsor, - sponsored_by_override: rec.sponsored_by_override, - dispatch: dispatch, - source: rec.domain, - publisher: rec.publisher, - pocket_id: rec.pocket_id, - context_type: rec.context_type, - bookmarkGuid: rec.bookmarkGuid, - firstVisibleTimestamp: firstVisibleTimestamp, - corpus_item_id: rec.corpus_item_id, - scheduled_corpus_item_id: rec.scheduled_corpus_item_id, - recommended_at: rec.recommended_at, - received_rank: rec.received_rank, - isListCard: true, - isFakespot: isFakespot, - category: rec.category - }); - }), isFakespot && /*#__PURE__*/external_React_default().createElement("div", { - className: "fakespot-footer" - }, /*#__PURE__*/external_React_default().createElement("p", null, footerCopy), /*#__PURE__*/external_React_default().createElement(SafeAnchor, { - className: "fakespot-cta", - url: ctaUrl, - referrer: "", - onLinkClick: handleCtaClick, - dispatch: dispatch - }, ctaCopy))))); -} - ;// CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/AdBannerContextMenu/AdBannerContextMenu.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 @@ -5295,16 +5072,12 @@ function TrendingSearches() { - const PREF_SECTIONS_CARDS_ENABLED = "discoverystream.sections.cards.enabled"; const PREF_THUMBS_UP_DOWN_ENABLED = "discoverystream.thumbsUpDown.enabled"; const PREF_TOPICS_ENABLED = "discoverystream.topicLabels.enabled"; const PREF_TOPICS_SELECTED = "discoverystream.topicSelection.selectedTopics"; const PREF_TOPICS_AVAILABLE = "discoverystream.topicSelection.topics"; const PREF_SPOCS_STARTUPCACHE_ENABLED = "discoverystream.spocs.startupCache.enabled"; -const PREF_LIST_FEED_ENABLED = "discoverystream.contextualContent.enabled"; -const PREF_LIST_FEED_SELECTED_FEED = "discoverystream.contextualContent.selectedFeed"; -const PREF_FAKESPOT_ENABLED = "discoverystream.contextualContent.fakespot.enabled"; const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard"; const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position"; const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard"; @@ -5375,15 +5148,11 @@ class _CardGrid extends (external_React_default()).PureComponent { const selectedTopics = prefs[PREF_TOPICS_SELECTED]; const availableTopics = prefs[PREF_TOPICS_AVAILABLE]; const spocsStartupCacheEnabled = prefs[PREF_SPOCS_STARTUPCACHE_ENABLED]; - const listFeedEnabled = prefs[PREF_LIST_FEED_ENABLED]; - const listFeedSelectedFeed = prefs[PREF_LIST_FEED_SELECTED_FEED]; const billboardEnabled = prefs[PREF_BILLBOARD_ENABLED]; const leaderboardEnabled = prefs[PREF_LEADERBOARD_ENABLED]; const trendingEnabled = prefs[PREF_TRENDING_SEARCH] && prefs[PREF_TRENDING_SEARCH_SYSTEM] && prefs[PREF_SEARCH_ENGINE]?.toLowerCase() === "google"; const trendingVariant = prefs[PREF_TRENDING_SEARCH_VARIANT]; - - // filter out recs that should be in ListFeed - const recs = this.props.data.recommendations.filter(item => !item.feedName).slice(0, items); + const recs = this.props.data.recommendations.slice(0, items); const cards = []; for (let index = 0; index < items; index++) { const rec = recs[index]; @@ -5463,14 +5232,6 @@ class _CardGrid extends (external_React_default()).PureComponent { } } } - if (listFeedEnabled) { - const isFakespot = listFeedSelectedFeed === "fakespot"; - const fakespotEnabled = prefs[PREF_FAKESPOT_ENABLED]; - if (!isFakespot || isFakespot && fakespotEnabled) { - // Place the list feed as the 3rd element in the card grid - cards.splice(2, 1, this.renderListFeed(this.props.data.recommendations, listFeedSelectedFeed)); - } - } if (trendingEnabled && trendingVariant === "b") { const firstSpocPosition = this.props.spocPositions[0]?.index; // double check that a spoc/mrec is actually in the index it should be in @@ -5534,24 +5295,6 @@ class _CardGrid extends (external_React_default()).PureComponent { className: gridClassName }, cards)); } - renderListFeed(recommendations, selectedFeed) { - const recs = recommendations.filter(item => item.feedName === selectedFeed); - const isFakespot = selectedFeed === "fakespot"; - // remove duplicates from category list - const categories = [...new Set(recs.map(({ - category - }) => category))]; - const listFeed = /*#__PURE__*/external_React_default().createElement(ListFeed - // only display recs that match selectedFeed for ListFeed - , { - recs: recs, - categories: isFakespot ? categories : [], - firstVisibleTimestamp: this.props.firstVisibleTimestamp, - type: this.props.type, - dispatch: this.props.dispatch - }); - return listFeed; - } renderGridClassName() { const { hybridLayout, diff --git a/browser/extensions/newtab/karma.mc.config.js b/browser/extensions/newtab/karma.mc.config.js @@ -227,7 +227,7 @@ module.exports = function (config) { statements: 94.94, lines: 94.84, functions: 9.91, - branches: 71.69, + branches: 70.72, }, "content-src/components/DiscoveryStreamComponents/CardSections/CardSections.jsx": { diff --git a/browser/extensions/newtab/lib/ActivityStream.sys.mjs b/browser/extensions/newtab/lib/ActivityStream.sys.mjs @@ -82,11 +82,6 @@ const REGION_THUMBS_CONFIG = const LOCALE_THUMBS_CONFIG = "browser.newtabpage.activity-stream.discoverystream.thumbsUpDown.locale-thumbs-config"; -const REGION_CONTEXTUAL_CONTENT_CONFIG = - "browser.newtabpage.activity-stream.discoverystream.contextualContent.region-content-config"; -const LOCALE_CONTEXTUAL_CONTENT_CONFIG = - "browser.newtabpage.activity-stream.discoverystream.contextualContent.locale-content-config"; - const REGION_CONTEXTUAL_AD_CONFIG = "browser.newtabpage.activity-stream.discoverystream.sections.contextualAds.region-config"; const LOCALE_CONTEXTUAL_AD_CONFIG = @@ -190,13 +185,6 @@ function showThumbsUpDown({ geo, locale }) { ); } -function showContextualContent({ geo, locale }) { - return ( - csvPrefHasValue(REGION_CONTEXTUAL_CONTENT_CONFIG, geo) && - csvPrefHasValue(LOCALE_CONTEXTUAL_CONTENT_CONFIG, locale) - ); -} - function showSectionLayout({ geo, locale }) { return ( csvPrefHasValue(REGION_SECTIONS_CONFIG, geo) && @@ -1293,70 +1281,6 @@ export const PREFS_CONFIG = new Map([ }, ], [ - "discoverystream.contextualContent.enabled", - { - title: "Controls if contextual content (List feed) is displayed", - getValue: showContextualContent, - }, - ], - [ - "discoverystream.contextualContent.feeds", - { - title: "CSV list of possible topics for the contextual content feed", - value: "need_to_know, fakespot", - }, - ], - [ - "discoverystream.contextualContent.selectedFeed", - { - title: - "currently selected feed (one of discoverystream.contextualContent.feeds) to display in listfeed", - value: "need_to_know", - }, - ], - [ - "discoverystream.contextualContent.listFeedTitle", - { - title: "Title for currently selected feed", - value: "", - }, - ], - [ - "discoverystream.contextualContent.fakespot.defaultCategoryTitle", - { - title: "Title default category from fakespot endpoint", - value: "", - }, - ], - [ - "discoverystream.contextualContent.fakespot.footerCopy", - { - title: "footer copy for fakespot feed", - value: "", - }, - ], - [ - "discoverystream.contextualContent.fakespot.enabled", - { - title: "User controlled pref that displays fakespot feed", - value: true, - }, - ], - [ - "discoverystream.contextualContent.fakespot.ctaCopy", - { - title: "cta copy for fakespot feed", - value: "", - }, - ], - [ - "discoverystream.contextualContent.fakespot.ctaUrl", - { - title: "cta link for fakespot feed", - value: "", - }, - ], - [ "discoverystream.publisherFavicon.enabled", { title: "Enables publisher favicons on recommended stories", diff --git a/browser/extensions/newtab/lib/DiscoveryStreamFeed.sys.mjs b/browser/extensions/newtab/lib/DiscoveryStreamFeed.sys.mjs @@ -96,23 +96,7 @@ const PREF_SPOCS_CACHE_ONDEMAND = "discoverystream.spocs.onDemand"; const PREF_SPOCS_CACHE_TIMEOUT = "discoverystream.spocs.cacheTimeout"; const PREF_SPOCS_STARTUP_CACHE_ENABLED = "discoverystream.spocs.startupCache.enabled"; -const PREF_CONTEXTUAL_CONTENT_ENABLED = - "discoverystream.contextualContent.enabled"; -const PREF_FAKESPOT_ENABLED = - "discoverystream.contextualContent.fakespot.enabled"; const PREF_CONTEXTUAL_ADS = "discoverystream.sections.contextualAds.enabled"; -const PREF_CONTEXTUAL_CONTENT_SELECTED_FEED = - "discoverystream.contextualContent.selectedFeed"; -const PREF_CONTEXTUAL_CONTENT_LISTFEED_TITLE = - "discoverystream.contextualContent.listFeedTitle"; -const PREF_CONTEXTUAL_CONTENT_FAKESPOT_FOOTER = - "discoverystream.contextualContent.fakespot.footerCopy"; -const PREF_CONTEXTUAL_CONTENT_FAKESPOT_CATEGORY = - "discoverystream.contextualContent.fakespot.defaultCategoryTitle"; -const PREF_CONTEXTUAL_CONTENT_FAKESPOT_CTA_COPY = - "discoverystream.contextualContent.fakespot.ctaCopy"; -const PREF_CONTEXTUAL_CONTENT_FAKESPOT_CTA_URL = - "discoverystream.contextualContent.fakespot.ctaUrl"; const PREF_USER_INFERRED_PERSONALIZATION = "discoverystream.sections.personalization.inferred.user.enabled"; const PREF_SYSTEM_INFERRED_PERSONALIZATION = @@ -1847,8 +1831,6 @@ export class DiscoveryStreamFeed { const cachedData = (await this.cache.get()) || {}; const prefs = this.store.getState().Prefs.values; const sectionsEnabled = prefs[PREF_SECTIONS_ENABLED]; - let isFakespot; - const selectedFeedPref = prefs[PREF_CONTEXTUAL_CONTENT_SELECTED_FEED]; // Should we fetch /curated-recommendations over OHTTP const merinoOhttpEnabled = prefs[PREF_MERINO_OHTTP]; let sections = []; @@ -1886,45 +1868,6 @@ export class DiscoveryStreamFeed { topic: item.topic, url: item.url, })); - if (feedResponse.feeds && selectedFeedPref && !sectionsEnabled) { - isFakespot = selectedFeedPref === "fakespot"; - const keyName = isFakespot ? "products" : "recommendations"; - const selectedFeedResponse = feedResponse.feeds[selectedFeedPref]; - selectedFeedResponse?.[keyName]?.forEach(item => - recommendations.push({ - id: isFakespot - ? item.id - : item.corpusItemId || - item.scheduledCorpusItemId || - item.tileId, - scheduled_corpus_item_id: item.scheduledCorpusItemId, - corpus_item_id: item.corpusItemId, - url: item.url, - title: item.title, - topic: item.topic, - excerpt: item.excerpt, - publisher: item.publisher, - raw_image_src: item.imageUrl, - received_rank: item.receivedRank, - recommended_at: feedResponse.recommendedAt, - // property to determine if rec is used in ListFeed or not - feedName: selectedFeedPref, - category: item.category, - icon_src: item.iconUrl, - isTimeSensitive: item.isTimeSensitive, - }) - ); - - const prevTitle = prefs[PREF_CONTEXTUAL_CONTENT_LISTFEED_TITLE]; - - const feedTitle = isFakespot - ? selectedFeedResponse.headerCopy - : selectedFeedResponse.title; - - if (feedTitle && feedTitle !== prevTitle) { - this.handleListfeedStrings(selectedFeedResponse, isFakespot); - } - } if (sectionsEnabled) { for (const [sectionKey, sectionData] of Object.entries( @@ -2051,45 +1994,6 @@ export class DiscoveryStreamFeed { ); } - handleListfeedStrings(feedResponse, isFakespot) { - if (isFakespot) { - this.store.dispatch( - ac.SetPref( - PREF_CONTEXTUAL_CONTENT_LISTFEED_TITLE, - feedResponse.headerCopy - ) - ); - this.store.dispatch( - ac.SetPref( - PREF_CONTEXTUAL_CONTENT_FAKESPOT_CATEGORY, - feedResponse.defaultCategoryName - ) - ); - this.store.dispatch( - ac.SetPref( - PREF_CONTEXTUAL_CONTENT_FAKESPOT_FOOTER, - feedResponse.footerCopy - ) - ); - this.store.dispatch( - ac.SetPref( - PREF_CONTEXTUAL_CONTENT_FAKESPOT_CTA_COPY, - feedResponse.cta.ctaCopy - ) - ); - this.store.dispatch( - ac.SetPref( - PREF_CONTEXTUAL_CONTENT_FAKESPOT_CTA_URL, - feedResponse.cta.url - ) - ); - } else { - this.store.dispatch( - ac.SetPref(PREF_CONTEXTUAL_CONTENT_LISTFEED_TITLE, feedResponse.title) - ); - } - } - formatComponentFeedRequest(sectionPersonalization = {}) { const prefs = this.store.getState().Prefs.values; const inferredPersonalization = @@ -2160,21 +2064,7 @@ export class DiscoveryStreamFeed { const sectionsEnabled = prefs[PREF_SECTIONS_ENABLED]; - // Should we pass the feed param to the merino request - const contextualContentEnabled = prefs[PREF_CONTEXTUAL_CONTENT_ENABLED]; - const selectedFeed = prefs[PREF_CONTEXTUAL_CONTENT_SELECTED_FEED]; - const isFakespot = selectedFeed === "fakespot"; - const fakespotEnabled = prefs[PREF_FAKESPOT_ENABLED]; - - const shouldFetchTBRFeed = - (contextualContentEnabled && !isFakespot) || - (contextualContentEnabled && isFakespot && fakespotEnabled); - - if (shouldFetchTBRFeed) { - body.feeds = [selectedFeed]; - } if (sectionsEnabled) { - // if sections is enabled, it should override the TBR feed body.feeds = ["sections"]; } @@ -2693,8 +2583,6 @@ export class DiscoveryStreamFeed { case PREF_ENDPOINTS: case PREF_SPOC_POSITIONS: case PREF_UNIFIED_ADS_SPOCS_ENABLED: - case PREF_CONTEXTUAL_CONTENT_ENABLED: - case PREF_CONTEXTUAL_CONTENT_SELECTED_FEED: case PREF_SECTIONS_ENABLED: case PREF_INTEREST_PICKER_ENABLED: // This is a config reset directly related to Discovery Stream pref. diff --git a/browser/extensions/newtab/lib/TelemetryFeed.sys.mjs b/browser/extensions/newtab/lib/TelemetryFeed.sys.mjs @@ -891,7 +891,6 @@ export class TelemetryFeed { fetchTimestamp, firstVisibleTimestamp, format, - is_list_card, is_section_followed, layout_name, matches_selected_topic, @@ -939,7 +938,6 @@ export class TelemetryFeed { matches_selected_topic, selected_topics, topic, - is_list_card, position: action.data.action_position, tile_id, event_source, @@ -1060,23 +1058,6 @@ export class TelemetryFeed { } break; } - case "FAKESPOT_CLICK": { - const { product_id, category } = action.data.value ?? {}; - Glean.newtab.fakespotClick.record({ - newtab_visit_id: session.session_id, - product_id, - category, - }); - break; - } - case "FAKESPOT_CATEGORY": { - const { category } = action.data.value ?? {}; - Glean.newtab.fakespotCategory.record({ - newtab_visit_id: session.session_id, - category, - }); - break; - } // Bug 1969452 - Feature Highlight Telemetry Events case "FEATURE_HIGHLIGHT_DISMISS": case "FEATURE_HIGHLIGHT_IMPRESSION": @@ -1405,33 +1386,6 @@ export class TelemetryFeed { case at.TOPIC_SELECTION_USER_SAVE: this.handleTopicSelectionUserEvent(action); break; - case at.FAKESPOT_DISMISS: { - const session = this.sessions.get(au.getPortIdOfSender(action)); - if (session) { - Glean.newtab.fakespotDismiss.record({ - newtab_visit_id: session.session_id, - }); - } - break; - } - case at.FAKESPOT_CTA_CLICK: { - const session = this.sessions.get(au.getPortIdOfSender(action)); - if (session) { - Glean.newtab.fakespotCtaClick.record({ - newtab_visit_id: session.session_id, - }); - } - break; - } - case at.OPEN_ABOUT_FAKESPOT: { - const session = this.sessions.get(au.getPortIdOfSender(action)); - if (session) { - Glean.newtab.fakespotAboutClick.record({ - newtab_visit_id: session.session_id, - }); - } - break; - } case at.BLOCK_SECTION: // Intentional fall-through case at.CARD_SECTION_IMPRESSION: @@ -1931,7 +1885,6 @@ export class TelemetryFeed { ...(datum.format ? { format: datum.format } : {}), position: datum.position, tile_id: datum.id || datum.tile_id, - is_list_card: datum.is_list_card, ...(datum.section ? { section: datum.section, @@ -2029,60 +1982,52 @@ export class TelemetryFeed { const { tiles } = data; tiles.forEach(tile => { - // if the tile has a category it is a product tile from fakespot - if (tile.type === "fakespot") { - Glean.newtab.fakespotProductImpression.record({ - newtab_visit_id: session.session_id, - product_id: tile.id, - category: tile.category, - }); - } else { - const { corpus_item_id, scheduled_corpus_item_id } = tile; - const is_sponsored = tile.type === "spoc"; - const gleanData = { - is_sponsored, - ...(tile.format ? { format: tile.format } : {}), - ...(tile.section - ? { - section: tile.section, - section_position: tile.section_position, - ...(this.sectionsPersonalizationEnabled - ? { is_section_followed: !!tile.is_section_followed } - : {}), - layout_name: tile.layout_name, - } - : {}), - position: tile.pos, - tile_id: tile.id, - topic: tile.topic, - selected_topics: tile.selectedTopics, - is_list_card: tile.is_list_card, - // We conditionally add in a few props. - ...(corpus_item_id ? { corpus_item_id } : {}), - ...(scheduled_corpus_item_id ? { scheduled_corpus_item_id } : {}), - ...(corpus_item_id || scheduled_corpus_item_id - ? { - received_rank: tile.received_rank, - recommended_at: tile.recommended_at, - } - : { - recommendation_id: tile.recommendation_id, - }), - }; - Glean.pocket.impression.record({ - ...this.redactNewTabPing( - this.redactPingFor143(gleanData), - is_sponsored - ), - newtab_visit_id: session.session_id, - }); - if (this.privatePingEnabled) { - this.newtabContentPing.recordEvent( - "impression", - this.randomizeOrganicContentEvent(gleanData) - ); - } + const { corpus_item_id, scheduled_corpus_item_id } = tile; + const is_sponsored = tile.type === "spoc"; + const gleanData = { + is_sponsored, + ...(tile.format ? { format: tile.format } : {}), + ...(tile.section + ? { + section: tile.section, + section_position: tile.section_position, + ...(this.sectionsPersonalizationEnabled + ? { is_section_followed: !!tile.is_section_followed } + : {}), + layout_name: tile.layout_name, + } + : {}), + position: tile.pos, + tile_id: tile.id, + topic: tile.topic, + selected_topics: tile.selectedTopics, + is_list_card: tile.is_list_card, + // We conditionally add in a few props. + ...(corpus_item_id ? { corpus_item_id } : {}), + ...(scheduled_corpus_item_id ? { scheduled_corpus_item_id } : {}), + ...(corpus_item_id || scheduled_corpus_item_id + ? { + received_rank: tile.received_rank, + recommended_at: tile.recommended_at, + } + : { + recommendation_id: tile.recommendation_id, + }), + }; + Glean.pocket.impression.record({ + ...this.redactNewTabPing( + this.redactPingFor143(gleanData), + is_sponsored + ), + newtab_visit_id: session.session_id, + }); + if (this.privatePingEnabled) { + this.newtabContentPing.recordEvent( + "impression", + this.randomizeOrganicContentEvent(gleanData) + ); } + if (tile.shim) { if (this.canSendUnifiedAdsSpocCallbacks) { // Send unified ads callback event diff --git a/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CardGrid.test.jsx b/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CardGrid.test.jsx @@ -89,39 +89,6 @@ describe("<CardGrid>", () => { assert.ok(wrapper.find(TopicsWidget).exists()); }); - it("should create a list feed", () => { - const commonProps = { - items: 12, - data: { - recommendations: [ - { feedName: "foo" }, - { feedName: "foo" }, - { feedName: "foo" }, - { feedName: "foo" }, - { feedName: "foo" }, - { feedName: "foo" }, - ], - }, - Prefs: { - ...INITIAL_STATE.Prefs, - values: { - ...INITIAL_STATE.Prefs.values, - "discoverystream.contextualContent.enabled": true, - "discoverystream.contextualContent.selectedFeed": "foo", - }, - }, - DiscoveryStream: INITIAL_STATE.DiscoveryStream, - }; - - wrapper = mount( - <WrapWithProvider> - <CardGrid {...commonProps} /> - </WrapWithProvider> - ); - - assert.ok(wrapper.find(".list-feed").exists()); - }); - it("should render AdBanner if enabled", () => { const commonProps = { ...INITIAL_STATE, diff --git a/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSCard.test.jsx b/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSCard.test.jsx @@ -329,7 +329,6 @@ describe("<DSCard>", () => { features: undefined, matches_selected_topic: undefined, selected_topics: undefined, - is_list_card: undefined, format: "medium-card", }, }) @@ -347,7 +346,6 @@ describe("<DSCard>", () => { recommendation_id: undefined, topic: undefined, selected_topics: undefined, - is_list_card: undefined, format: "medium-card", }, ], @@ -392,7 +390,6 @@ describe("<DSCard>", () => { features: undefined, matches_selected_topic: undefined, selected_topics: undefined, - is_list_card: undefined, format: "spoc", }, }) @@ -410,7 +407,6 @@ describe("<DSCard>", () => { recommendation_id: undefined, topic: undefined, selected_topics: undefined, - is_list_card: undefined, format: "spoc", }, ], @@ -458,7 +454,6 @@ describe("<DSCard>", () => { features: undefined, matches_selected_topic: undefined, selected_topics: undefined, - is_list_card: undefined, format: "medium-card", }, }) @@ -477,7 +472,6 @@ describe("<DSCard>", () => { recommendation_id: undefined, topic: undefined, selected_topics: undefined, - is_list_card: undefined, format: "medium-card", }, ], @@ -486,33 +480,6 @@ describe("<DSCard>", () => { }) ); }); - - it("fakespot onLinkClick should dispatch with the correct events", () => { - wrapper.setProps({ - id: "fooidx", - pos: 1, - type: "foo", - isFakespot: true, - category: "fakespot", - }); - - sandbox - .stub(wrapper.instance(), "doesLinkTopicMatchSelectedTopic") - .returns(undefined); - - wrapper.instance().onLinkClick(); - - assert.calledWith( - dispatch, - ac.DiscoveryStreamUserEvent({ - event: "FAKESPOT_CLICK", - value: { - product_id: "fooidx", - category: "fakespot", - }, - }) - ); - }); }); describe("DSCard with CTA", () => { @@ -1062,68 +1029,6 @@ describe("<PlaceholderDSCard> component", () => { }); }); -describe("Listfeed <DSCard />", () => { - let wrapper; - let sandbox; - let dispatch; - - beforeEach(() => { - sandbox = sinon.createSandbox(); - dispatch = sandbox.stub(); - wrapper = shallow( - <DSCard dispatch={dispatch} {...DEFAULT_PROPS} isListFeed={true} /> - ); - wrapper.setState({ isSeen: true }); - }); - - afterEach(() => { - sandbox.restore(); - }); - - it("should not render thumbs up/down UI", () => { - wrapper.setState({ mayHaveThumbsUpDown: true }); - const thumbs_up_down_buttons_component = wrapper.find( - DSThumbsUpDownButtons - ); - const thumbs_up_down_buttons = thumbs_up_down_buttons_component.find( - ".card-stp-thumbs-buttons" - ); - assert.ok(!thumbs_up_down_buttons.exists()); - }); - - it("should not render the excerpt UI", () => { - const excerpt_element = wrapper.find(".excerpt"); - - assert.ok(!excerpt_element.exists()); - }); -}); - -describe("ListFeed fakespot <DSCard />", () => { - let wrapper; - let sandbox; - let dispatch; - - beforeEach(() => { - sandbox = sinon.createSandbox(); - dispatch = sandbox.stub(); - wrapper = shallow( - <DSCard - dispatch={dispatch} - {...DEFAULT_PROPS} - isListFeed={true} - isFakespot={true} - /> - ); - wrapper.setState({ isSeen: true }); - }); - - it("should not render source element", () => { - const source_element = wrapper.find(".source"); - - assert.ok(!source_element.exists()); - }); -}); - describe("<DSSource> component", () => { it("should return a default source without compact", () => { const wrapper = shallow(<DSSource source="Mozilla" />); diff --git a/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSTextPromo.test.jsx b/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSTextPromo.test.jsx @@ -84,7 +84,6 @@ describe("<DSTextPromo>", () => { card_type: undefined, position: 0, is_pocket_card: false, - is_list_card: undefined, }, ]); diff --git a/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/ImpressionStats.test.jsx b/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/ImpressionStats.test.jsx @@ -148,7 +148,6 @@ describe("<ImpressionStats>", () => { received_rank: undefined, topic: undefined, features: undefined, - is_list_card: undefined, format: "medium-card", }, { @@ -163,7 +162,6 @@ describe("<ImpressionStats>", () => { received_rank: undefined, topic: undefined, features: undefined, - is_list_card: undefined, format: "medium-card", }, { @@ -178,7 +176,6 @@ describe("<ImpressionStats>", () => { received_rank: undefined, topic: undefined, features: undefined, - is_list_card: undefined, format: "medium-card", }, ]); @@ -272,7 +269,6 @@ describe("<ImpressionStats>", () => { fetchTimestamp: TEST_FETCH_TIMESTAMP, topic: undefined, features: undefined, - is_list_card: undefined, format: "medium-card", }, { @@ -287,7 +283,6 @@ describe("<ImpressionStats>", () => { fetchTimestamp: TEST_FETCH_TIMESTAMP, topic: undefined, features: undefined, - is_list_card: undefined, format: "medium-card", }, { @@ -302,7 +297,6 @@ describe("<ImpressionStats>", () => { fetchTimestamp: TEST_FETCH_TIMESTAMP, topic: undefined, features: undefined, - is_list_card: undefined, format: "medium-card", }, ]); diff --git a/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/ListFeed.test.jsx b/browser/extensions/newtab/test/unit/content-src/components/DiscoveryStreamComponents/ListFeed.test.jsx @@ -1,171 +0,0 @@ -import { mount } from "enzyme"; -import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs"; -import { ListFeed } from "content-src/components/DiscoveryStreamComponents/ListFeed/ListFeed"; -import { combineReducers, createStore } from "redux"; -import { Provider } from "react-redux"; -import React from "react"; -import { DSCard } from "../../../../../content-src/components/DiscoveryStreamComponents/DSCard/DSCard"; -import { actionCreators as ac } from "common/Actions.mjs"; - -const DEFAULT_PROPS = { - type: "foo", - firstVisibleTimestamp: new Date("March 21, 2024 10:11:12").getTime(), - recs: [{}, {}, {}], - categories: [], -}; - -// Wrap this around any component that uses useSelector, -// or any mount that uses a child that uses redux. -function WrapWithProvider({ children, state = INITIAL_STATE }) { - let store = createStore(combineReducers(reducers), state); - return <Provider store={store}>{children}</Provider>; -} - -describe("Discovery Stream <ListFeed>", () => { - let wrapper; - let sandbox; - let dispatch; - - beforeEach(() => { - sandbox = sinon.createSandbox(); - dispatch = sandbox.stub(); - - wrapper = mount( - <WrapWithProvider> - <ListFeed dispatch={dispatch} {...DEFAULT_PROPS} /> - </WrapWithProvider> - ); - }); - - afterEach(() => { - sandbox.restore(); - }); - - it("should render", () => { - assert.ok(wrapper.exists()); - assert.ok(wrapper.find(".list-feed").exists()); - }); - - it("should not render if rec prop is an empty array", () => { - wrapper = mount( - <WrapWithProvider> - <ListFeed dispatch={dispatch} {...DEFAULT_PROPS} recs={[]} /> - </WrapWithProvider> - ); - assert.ok(!wrapper.find(".list-feed").exists()); - }); - - it("should render a maximum of 5 cards", () => { - wrapper = mount( - <WrapWithProvider> - <ListFeed - dispatch={dispatch} - {...DEFAULT_PROPS} - recs={[{}, {}, {}, {}, {}, {}, {}]} - /> - </WrapWithProvider> - ); - - assert.lengthOf(wrapper.find(DSCard), 5); - }); - - it("should render placeholder cards if `rec` is undefined or `rec.placeholder` is true", () => { - wrapper = mount( - <WrapWithProvider> - <ListFeed - dispatch={dispatch} - type={"foo"} - firstVisibleTimestamp={new Date("March 21, 2024 10:11:12").getTime()} - recs={[ - { placeholder: true }, - { placeholder: true }, - { placeholder: true }, - { placeholder: true }, - { placeholder: true }, - { placeholder: true }, - ]} - /> - </WrapWithProvider> - ); - - assert.ok(wrapper.find(".list-card-placeholder").exists()); - assert.lengthOf(wrapper.find(".list-card-placeholder"), 5); - }); - - describe("fakespot <ListFeed />", () => { - const PREF_CONTEXTUAL_CONTENT_SELECTED_FEED = - "discoverystream.contextualContent.selectedFeed"; - - beforeEach(() => { - // mock the pref for selected feed - const state = { - ...INITIAL_STATE, - Prefs: { - ...INITIAL_STATE.Prefs, - values: { - ...INITIAL_STATE.Prefs.values, - [PREF_CONTEXTUAL_CONTENT_SELECTED_FEED]: "fakespot", - }, - }, - }; - wrapper = mount( - <WrapWithProvider state={state}> - <ListFeed - dispatch={dispatch} - recs={[ - { category: "foo&bar" }, - { category: "foo&bar" }, - { category: "foo&bar" }, - { category: "foo&bar" }, - { category: "bar" }, - { category: "bar" }, - ]} - categories={["foo&bar", "bar"]} - {...DEFAULT_PROPS} - /> - </WrapWithProvider> - ); - }); - - it("should render fakespot category dropdown", () => { - assert.ok(wrapper.find(".fakespot-dropdown").exists()); - }); - - it("should render heading copy, context menu, footer copy and cta", () => { - assert.ok(wrapper.find(".context-menu-wrapper").exists()); - assert.ok(wrapper.find(".fakespot-desc").exists()); - assert.ok(wrapper.find(".fakespot-footer p").exists()); - assert.ok(wrapper.find(".fakespot-cta").exists()); - }); - - it("when category is selected, the correct event is dispatched", () => { - const select = wrapper.find(".fakespot-dropdown"); - // const barCategoryOption = wrapper.find("option[value='bar']"); - select.simulate("change", { target: { value: "bar" } }); - assert.calledOnce(dispatch); - assert.calledWith( - dispatch, - ac.DiscoveryStreamUserEvent({ - event: "FAKESPOT_CATEGORY", - value: { - category: "bar", - }, - }) - ); - }); - - it("clicking on fakespot CTA should dispatch the correct event", () => { - const safeAnchor = wrapper.find(".fakespot-cta"); - const btn = safeAnchor.find("a"); - btn.simulate("click"); - assert.calledTwice(dispatch); - const secondCall = dispatch.getCall(1); - assert.deepEqual( - secondCall.args[0], - ac.OnlyToMain({ - type: "FAKESPOT_CTA_CLICK", - }) - ); - }); - }); -}); diff --git a/browser/extensions/newtab/test/unit/content-src/components/LinkMenu.test.jsx b/browser/extensions/newtab/test/unit/content-src/components/LinkMenu.test.jsx @@ -290,7 +290,6 @@ describe("<LinkMenu>", () => { recommended_at: undefined, format: undefined, is_pocket_card: false, - is_list_card: undefined, is_sponsored: true, }, "newtab-menu-open-new-private-window": { @@ -313,7 +312,6 @@ describe("<LinkMenu>", () => { card_type: FAKE_SITE.card_type, position: 3, is_pocket_card: false, - is_list_card: undefined, }, ], menu_action_webext_dismiss: { @@ -518,7 +516,6 @@ describe("<LinkMenu>", () => { card_type: undefined, position: 3, is_pocket_card: false, - is_list_card: undefined, }; assert.deepEqual(blockUrlOption.action.data[0], expected); }); @@ -567,7 +564,6 @@ describe("<LinkMenu>", () => { card_type: undefined, position: 3, is_pocket_card: true, - is_list_card: undefined, }; assert.deepEqual(blockUrlOption.action.data[0], expected); }); diff --git a/browser/extensions/newtab/test/unit/lib/ActivityStream.test.js b/browser/extensions/newtab/test/unit/lib/ActivityStream.test.js @@ -577,82 +577,6 @@ describe("ActivityStream", () => { assert.isFalse(PREFS_CONFIG.get(FEATURE_ENABLED_PREF).value); }); }); - describe("showContextualContent", () => { - let stub; - let getStringPrefStub; - const FEATURE_ENABLED_PREF = "discoverystream.contextualContent.enabled"; - const REGION_CONTEXTUAL_CONTENT_CONFIG = - "browser.newtabpage.activity-stream.discoverystream.contextualContent.region-content-config"; - const LOCALE_CONTEXTUAL_CONTENT_CONFIG = - "browser.newtabpage.activity-stream.discoverystream.contextualContent.locale-content-config"; - - beforeEach(() => { - stub = sandbox.stub(global.Region, "home"); - - sandbox - .stub(global.Services.locale, "appLocaleAsBCP47") - .get(() => "en-US"); - - getStringPrefStub = sandbox.stub(global.Services.prefs, "getStringPref"); - - // Set default regions - getStringPrefStub - .withArgs(REGION_CONTEXTUAL_CONTENT_CONFIG) - .returns("US, CA"); - - // Set default locales - getStringPrefStub - .withArgs(LOCALE_CONTEXTUAL_CONTENT_CONFIG) - .returns("en-US,en-GB,en-CA"); - }); - it("should turn off when region and locale are not set", () => { - stub.get(() => ""); - sandbox.stub(global.Services.locale, "appLocaleAsBCP47").get(() => ""); - as._updateDynamicPrefs(); - assert.isFalse(PREFS_CONFIG.get(FEATURE_ENABLED_PREF).value); - }); - it("should turn off when region is not set", () => { - stub.get(() => ""); - as._updateDynamicPrefs(); - assert.isFalse(PREFS_CONFIG.get(FEATURE_ENABLED_PREF).value); - }); - it("should turn on when region is supported", () => { - stub.get(() => "US"); - as._updateDynamicPrefs(); - assert.isTrue(PREFS_CONFIG.get(FEATURE_ENABLED_PREF).value); - }); - it("should turn off when region is not supported", () => { - stub.get(() => "JP"); - as._updateDynamicPrefs(); - assert.isFalse(PREFS_CONFIG.get(FEATURE_ENABLED_PREF).value); - }); - it("should turn off when locale is not set", () => { - stub.get(() => "US"); - sandbox.stub(global.Services.locale, "appLocaleAsBCP47").get(() => ""); - as._updateDynamicPrefs(); - assert.isFalse(PREFS_CONFIG.get(FEATURE_ENABLED_PREF).value); - }); - it("should turn on when locale is supported", () => { - stub.get(() => "US"); - sandbox - .stub(global.Services.locale, "appLocaleAsBCP47") - .get(() => "en-US"); - as._updateDynamicPrefs(); - assert.isTrue(PREFS_CONFIG.get(FEATURE_ENABLED_PREF).value); - }); - it("should turn off when locale is not supported", () => { - stub.get(() => "US"); - sandbox.stub(global.Services.locale, "appLocaleAsBCP47").get(() => "fr"); - as._updateDynamicPrefs(); - assert.isFalse(PREFS_CONFIG.get(FEATURE_ENABLED_PREF).value); - }); - it("should turn off when region and locale are both not supported", () => { - stub.get(() => "FR"); - sandbox.stub(global.Services.locale, "appLocaleAsBCP47").get(() => "fr"); - as._updateDynamicPrefs(); - assert.isFalse(PREFS_CONFIG.get(FEATURE_ENABLED_PREF).value); - }); - }); describe("discoverystream.region-basic-layout config", () => { let getStringPrefStub; beforeEach(() => { diff --git a/browser/locales/en-US/browser/newtab/newtab.ftl b/browser/locales/en-US/browser/newtab/newtab.ftl @@ -117,7 +117,6 @@ newtab-menu-pin = Pin newtab-menu-unpin = Unpin newtab-menu-delete-history = Delete from History newtab-menu-show-privacy-info = Our sponsors & your privacy -newtab-menu-about-fakespot = About { -fakespot-brand-name } # Report is a verb (i.e. report issue with the content). newtab-menu-report = Report # Context menu option to personalize New Tab recommended stories by blocking a section of stories, diff --git a/browser/themes/shared/icons/gift.svg b/browser/themes/shared/icons/gift.svg @@ -1,6 +0,0 @@ -<!-- 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/. --> -<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity"> - <path d="M13.1944 3.61165H12.3805C12.9771 2.70165 12.8767 1.46449 12.0772 0.665708C11.191 -0.221903 9.64544 -0.221903 8.75783 0.665708C8.7015 0.722764 8.65022 0.786319 8.60183 0.854931C8.55778 0.794264 8.51083 0.73793 8.45956 0.687375C7.54378 -0.228403 6.056 -0.228403 5.14022 0.687375C4.34722 1.48037 4.24394 2.70382 4.82606 3.61165H3.80556C2.80817 3.61165 2 4.41982 2 5.41721V6.13943C2 6.73237 2.28961 7.25382 2.73089 7.58243L2.72222 7.58387V11.9172C2.72222 12.9146 3.53039 13.7228 4.52778 13.7228H12.4722C13.4696 13.7228 14.2778 12.9146 14.2778 11.9172V7.58387L14.2691 7.58243C14.7104 7.25382 15 6.73237 15 6.13943V5.41721C15 4.41982 14.1918 3.61165 13.1944 3.61165ZM13.3389 4.69499L13.9167 5.27276V6.28387L13.3389 6.86165H9.04167V4.69499H13.3389ZM9.52411 1.43199C10.0029 0.953875 10.8349 0.954597 11.3116 1.43199C11.8049 1.92526 11.8049 2.72621 11.3116 3.21949C11.0148 3.51704 9.97694 3.61671 9.15578 3.59649C9.15867 3.44482 9.15867 3.27582 9.15289 3.09454C9.17744 2.39037 9.28361 1.67249 9.52411 1.43199ZM5.9065 3.24043C5.41322 2.74715 5.41322 1.94621 5.9065 1.45293C6.15278 1.20665 6.47633 1.08387 6.79989 1.08387C7.12344 1.08387 7.447 1.20738 7.69328 1.45365C7.93161 1.69199 8.03778 2.39832 8.06378 3.09599C8.05944 3.28376 8.06017 3.4571 8.06378 3.61165H7.51922C6.8295 3.58493 6.14122 3.47515 5.9065 3.24043ZM3.08333 5.27276L3.66111 4.69499C3.66111 4.69499 7.9215 4.70365 7.95833 4.70293V6.86165H3.66111L3.08333 6.28387V5.27276ZM4.38333 12.6394L3.80556 12.0617V7.94499H7.95833V12.6394H4.38333ZM13.1944 12.0617L12.6167 12.6394H9.04167V7.94499H13.1944V12.0617Z"/> -</svg> diff --git a/browser/themes/shared/jar.inc.mn b/browser/themes/shared/jar.inc.mn @@ -196,7 +196,6 @@ skin/classic/browser/forward.svg (../shared/icons/forward.svg) skin/classic/browser/fullscreen.svg (../shared/icons/fullscreen.svg) skin/classic/browser/fullscreen-exit.svg (../shared/icons/fullscreen-exit.svg) - skin/classic/browser/gift.svg (../shared/icons/gift.svg) skin/classic/browser/history.svg (../shared/icons/history.svg) skin/classic/browser/home.svg (../shared/icons/home.svg) skin/classic/browser/import.svg (../shared/icons/import.svg)
