Bug 1562928 - Thumbnail sticks around for dismissed "recommended" tile, alongside unrelated new text (until new thumbnail has been downloaded) a=RyanVM
☠☠ backed out by 60d1fa594e13 ☠ ☠
authorEd Lee <edilee@mozilla.com>
Wed, 24 Jul 2019 19:09:35 +0300
changeset 544725 d5aa3653975b6cf937210eadef553a6683861bde
parent 544724 0107b472bf0753be838bd54c35656b2549e0ab33
child 544726 c134c5e050d891441abdacaf5785aee1c91a7fe0
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersRyanVM
bugs1562928
milestone69.0
Bug 1562928 - Thumbnail sticks around for dismissed "recommended" tile, alongside unrelated new text (until new thumbnail has been downloaded) a=RyanVM Differential Revision: https://phabricator.services.mozilla.com//D39213
browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx
browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/List.jsx
browser/components/newtab/data/content/activity-stream.bundle.js
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx
@@ -9,17 +9,17 @@ export class CardGrid extends React.Pure
 
     for (let index = 0; index < this.props.items; index++) {
       const rec = recs[index];
       cards.push(
         !rec || rec.placeholder ? (
           <PlaceholderDSCard key={`dscard-${index}`} />
         ) : (
           <DSCard
-            key={`dscard-${index}`}
+            key={`dscard-${rec.id}`}
             pos={rec.pos}
             campaignId={rec.campaign_id}
             image_src={rec.image_src}
             raw_image_src={rec.raw_image_src}
             title={rec.title}
             excerpt={rec.excerpt}
             url={rec.url}
             id={rec.id}
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
@@ -53,17 +53,17 @@ export class Hero extends React.PureComp
     for (let index = 0; index < this.props.items - 1; index++) {
       const rec = otherRecs[index];
       cards.push(
         !rec || rec.placeholder ? (
           <PlaceholderDSCard key={`dscard-${index}`} />
         ) : (
           <DSCard
             campaignId={rec.campaign_id}
-            key={`dscard-${index}`}
+            key={`dscard-${rec.id}`}
             image_src={rec.image_src}
             raw_image_src={rec.raw_image_src}
             title={rec.title}
             url={rec.url}
             id={rec.id}
             shim={rec.shim}
             pos={rec.pos}
             type={this.props.type}
@@ -78,17 +78,17 @@ export class Hero extends React.PureComp
     }
 
     let heroCard = null;
 
     if (!heroRec || heroRec.placeholder) {
       heroCard = <PlaceholderDSCard />;
     } else {
       heroCard = (
-        <div className="ds-hero-item">
+        <div className="ds-hero-item" key={`dscard-${heroRec.id}`}>
           <SafeAnchor
             className="wrapper"
             dispatch={this.props.dispatch}
             onLinkClick={this.onLinkClick}
             url={heroRec.url}
           >
             <div className="img-wrapper">
               <DSImage
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/List.jsx
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/List.jsx
@@ -136,17 +136,17 @@ export function _List(props) {
 
     for (let index = 0; index < props.items; index++) {
       const rec = recs[index];
       recMarkup.push(
         !rec || rec.placeholder ? (
           <PlaceholderListItem key={`ds-list-item-${index}`} />
         ) : (
           <ListItem
-            key={`ds-list-item-${index}`}
+            key={`ds-list-item-${rec.id}`}
             dispatch={props.dispatch}
             campaignId={rec.campaign_id}
             domain={rec.domain}
             excerpt={rec.excerpt}
             id={rec.id}
             shim={rec.shim}
             image_src={rec.image_src}
             raw_image_src={rec.raw_image_src}
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -7492,17 +7492,17 @@ class CardGrid_CardGrid extends external
     const recs = this.props.data.recommendations.slice(0, this.props.items);
     const cards = [];
 
     for (let index = 0; index < this.props.items; index++) {
       const rec = recs[index];
       cards.push(!rec || rec.placeholder ? external_React_default.a.createElement(PlaceholderDSCard, {
         key: `dscard-${index}`
       }) : external_React_default.a.createElement(DSCard_DSCard, {
-        key: `dscard-${index}`,
+        key: `dscard-${rec.id}`,
         pos: rec.pos,
         campaignId: rec.campaign_id,
         image_src: rec.image_src,
         raw_image_src: rec.raw_image_src,
         title: rec.title,
         excerpt: rec.excerpt,
         url: rec.url,
         id: rec.id,
@@ -7688,17 +7688,17 @@ function _List(props) {
     const recs = props.data.recommendations.slice(props.recStartingPoint, props.recStartingPoint + props.items);
     const recMarkup = [];
 
     for (let index = 0; index < props.items; index++) {
       const rec = recs[index];
       recMarkup.push(!rec || rec.placeholder ? external_React_default.a.createElement(PlaceholderListItem, {
         key: `ds-list-item-${index}`
       }) : external_React_default.a.createElement(List_ListItem, {
-        key: `ds-list-item-${index}`,
+        key: `ds-list-item-${rec.id}`,
         dispatch: props.dispatch,
         campaignId: rec.campaign_id,
         domain: rec.domain,
         excerpt: rec.excerpt,
         id: rec.id,
         shim: rec.shim,
         image_src: rec.image_src,
         raw_image_src: rec.raw_image_src,
@@ -7798,17 +7798,17 @@ class Hero_Hero extends external_React_d
     const cards = [];
 
     for (let index = 0; index < this.props.items - 1; index++) {
       const rec = otherRecs[index];
       cards.push(!rec || rec.placeholder ? external_React_default.a.createElement(PlaceholderDSCard, {
         key: `dscard-${index}`
       }) : external_React_default.a.createElement(DSCard_DSCard, {
         campaignId: rec.campaign_id,
-        key: `dscard-${index}`,
+        key: `dscard-${rec.id}`,
         image_src: rec.image_src,
         raw_image_src: rec.raw_image_src,
         title: rec.title,
         url: rec.url,
         id: rec.id,
         shim: rec.shim,
         pos: rec.pos,
         type: this.props.type,
@@ -7821,17 +7821,18 @@ class Hero_Hero extends external_React_d
     }
 
     let heroCard = null;
 
     if (!heroRec || heroRec.placeholder) {
       heroCard = external_React_default.a.createElement(PlaceholderDSCard, null);
     } else {
       heroCard = external_React_default.a.createElement("div", {
-        className: "ds-hero-item"
+        className: "ds-hero-item",
+        key: `dscard-${heroRec.id}`
       }, external_React_default.a.createElement(SafeAnchor_SafeAnchor, {
         className: "wrapper",
         dispatch: this.props.dispatch,
         onLinkClick: this.onLinkClick,
         url: heroRec.url
       }, external_React_default.a.createElement("div", {
         className: "img-wrapper"
       }, external_React_default.a.createElement(DSImage_DSImage, {