Bug 1904657 - Add topic labels to Pocket cards. r=home-newtab-reviewers,nbarrett,thecount

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

browser/app/profile/firefox.js

@@ -1866,8 +1866,10 @@ pref("browser.newtabpage.activity-stream.discoverystream.recs.personalized", fal
 // System pref to allow Pocket sponsored content personalization to be turned on/off.
 pref("browser.newtabpage.activity-stream.discoverystream.spocs.personalized", true);
 
-// System pref to enable topic selection for pocket feed
+// System pref to enable topic selection for Pocket feed
 pref("browser.newtabpage.activity-stream.discoverystream.topicSelection.enabled", false);
+// System pref to enable topic labels on Pocket cards
+pref("browser.newtabpage.activity-stream.discoverystream.topicLabels.enabled", false);
 
 // Flip this once the user has dismissed the Pocket onboarding experience,
 pref("browser.newtabpage.activity-stream.discoverystream.onboardingExperience.dismissed", false);

browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

@@ -14,6 +14,7 @@ import { connect, useSelector } from "react-redux";
 const PREF_ONBOARDING_EXPERIENCE_DISMISSED =
   "discoverystream.onboardingExperience.dismissed";
 const PREF_THUMBS_UP_DOWN_ENABLED = "discoverystream.thumbsUpDown.enabled";
+const PREF_TOPICS_ENABLED = "discoverystream.topicLabels.enabled";
 const INTERSECTION_RATIO = 0.5;
 const VISIBLE = "visible";
 const VISIBILITY_CHANGE_EVENT = "visibilitychange";
@@ -335,6 +336,7 @@ export class _CardGrid extends React.PureComponent {
     const isOnboardingExperienceDismissed =
       prefs[PREF_ONBOARDING_EXPERIENCE_DISMISSED];
     const mayHaveThumbsUpDown = prefs[PREF_THUMBS_UP_DOWN_ENABLED];
+    const showTopics = prefs[PREF_TOPICS_ENABLED];
 
     const recs = this.props.data.recommendations.slice(0, items);
     const cards = [];
@@ -356,6 +358,8 @@ export class _CardGrid extends React.PureComponent {
             word_count={rec.word_count}
             time_to_read={rec.time_to_read}
             title={rec.title}
+            topic={rec.topic}
+            showTopics={showTopics}
             excerpt={rec.excerpt}
             url={rec.url}
             id={rec.id}

browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx

@@ -559,6 +559,9 @@ export class _DSCard extends React.PureComponent {
         className={`ds-card ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName}`}
         ref={this.setContextMenuButtonHostRef}
       >
+        {this.props.showTopics && this.props.topic && (
+          <span className="ds-card-topic">{this.props.topic}</span>
+        )}
         <div className="img-wrapper">
           <DSImage
             extraClassNames="img"

browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss

@@ -174,6 +174,16 @@ $ds-card-image-gradient-solid: rgba(0, 0, 0, 100%);
     }
   }
 
+  .ds-card-topic {
+    position: absolute;
+    z-index: 1;
+    background: light-dark(#F0F0F4, var(--newtab-background-color-secondary));
+    border-radius: var(--border-radius-small);
+    padding: var(--space-small);
+    margin: var(--space-small);
+    font-size: 14px;
+  }
+
   .meta {
     display: flex;
     flex-direction: column;

browser/components/newtab/css/activity-stream-linux.css

@@ -4501,6 +4501,15 @@ main section {
   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
   transition: none;
 }
+.ds-card .ds-card-topic {
+  position: absolute;
+  z-index: 1;
+  background: light-dark(#F0F0F4, var(--newtab-background-color-secondary));
+  border-radius: var(--border-radius-small);
+  padding: var(--space-small);
+  margin: var(--space-small);
+  font-size: 14px;
+}
 .ds-card .meta {
   display: flex;
   flex-direction: column;

browser/components/newtab/css/activity-stream-mac.css

@@ -4505,6 +4505,15 @@ main section {
   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
   transition: none;
 }
+.ds-card .ds-card-topic {
+  position: absolute;
+  z-index: 1;
+  background: light-dark(#F0F0F4, var(--newtab-background-color-secondary));
+  border-radius: var(--border-radius-small);
+  padding: var(--space-small);
+  margin: var(--space-small);
+  font-size: 14px;
+}
 .ds-card .meta {
   display: flex;
   flex-direction: column;

browser/components/newtab/css/activity-stream-windows.css

@@ -4501,6 +4501,15 @@ main section {
   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
   transition: none;
 }
+.ds-card .ds-card-topic {
+  position: absolute;
+  z-index: 1;
+  background: light-dark(#F0F0F4, var(--newtab-background-color-secondary));
+  border-radius: var(--border-radius-small);
+  padding: var(--space-small);
+  margin: var(--space-small);
+  font-size: 14px;
+}
 .ds-card .meta {
   display: flex;
   flex-direction: column;

browser/components/newtab/data/content/activity-stream.bundle.js

@@ -3213,7 +3213,9 @@ class _DSCard extends (external_React_default()).PureComponent {
     return /*#__PURE__*/external_React_default().createElement("article", {
       className: `ds-card ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName}`,
       ref: this.setContextMenuButtonHostRef
-    }, /*#__PURE__*/external_React_default().createElement("div", {
+    }, this.props.showTopics && this.props.topic && /*#__PURE__*/external_React_default().createElement("span", {
+      className: "ds-card-topic"
+    }, this.props.topic), /*#__PURE__*/external_React_default().createElement("div", {
       className: "img-wrapper"
     }, /*#__PURE__*/external_React_default().createElement(DSImage, {
       extraClassNames: "img",
@@ -3578,6 +3580,7 @@ const TopicsWidget = (0,external_ReactRedux_namespaceObject.connect)(state => ({
 
 const PREF_ONBOARDING_EXPERIENCE_DISMISSED = "discoverystream.onboardingExperience.dismissed";
 const PREF_THUMBS_UP_DOWN_ENABLED = "discoverystream.thumbsUpDown.enabled";
+const PREF_TOPICS_ENABLED = "discoverystream.topicLabels.enabled";
 const CardGrid_INTERSECTION_RATIO = 0.5;
 const CardGrid_VISIBLE = "visible";
 const CardGrid_VISIBILITY_CHANGE_EVENT = "visibilitychange";
@@ -3851,6 +3854,7 @@ class _CardGrid extends (external_React_default()).PureComponent {
     const showRecentSaves = prefs.showRecentSaves && recentSavesEnabled;
     const isOnboardingExperienceDismissed = prefs[PREF_ONBOARDING_EXPERIENCE_DISMISSED];
     const mayHaveThumbsUpDown = prefs[PREF_THUMBS_UP_DOWN_ENABLED];
+    const showTopics = prefs[PREF_TOPICS_ENABLED];
     const recs = this.props.data.recommendations.slice(0, items);
     const cards = [];
     let essentialReadsCards = [];
@@ -3868,6 +3872,8 @@ class _CardGrid extends (external_React_default()).PureComponent {
         word_count: rec.word_count,
         time_to_read: rec.time_to_read,
         title: rec.title,
+        topic: rec.topic,
+        showTopics: showTopics,
         excerpt: rec.excerpt,
         url: rec.url,
         id: rec.id,

browser/components/newtab/karma.mc.config.js

@@ -195,7 +195,7 @@ module.exports = function (config) {
                 statements: 98.25,
                 lines: 98.2,
                 functions: 100,
-                branches: 74.81,
+                branches: 74.63,
               },
             "content-src/components/DiscoveryStreamComponents/**/*.jsx": {
               statements: 90.48,

browser/components/newtab/lib/ActivityStream.sys.mjs

@@ -555,6 +555,13 @@ export const PREFS_CONFIG = new Map([
       value: "business, arts, government",
     },
   ],
+  [
+    "discoverystream.topicLabels.enabled",
+    {
+      title: "Enables topic labels for discovery stream",
+      value: false,
+    },
+  ],
   [
     "showRecentSaves",
     {

browser/components/newtab/lib/DiscoveryStreamFeed.sys.mjs

@@ -1411,6 +1411,7 @@ export class DiscoveryStreamFeed {
             scheduled_corpus_item_id: item.scheduledCorpusItemId,
             url: item.url,
             title: item.title,
+            topic: item.topic,
             excerpt: item.excerpt,
             publisher: item.publisher,
             raw_image_src: item.imageUrl,