Bug 1524321 - Remove character counts and truncation for discovery stream. r=Mardak a=lizzard
authorGavin Lazar Suntop <gavin@gsuntop.com>
Thu, 14 Feb 2019 13:40:54 +0100
changeset 515941 6ce3886d5cc5a6cf65a153fb76ed3c42c9145b93
parent 515940 e9ab85e8ea6a13b2d0a4fe2518b52f7a4b5ee5a9
child 515942 4b73d443d7716a561aaca29838cf41385add16ef
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMardak, lizzard
bugs1524321
milestone66.0
Bug 1524321 - Remove character counts and truncation for discovery stream. r=Mardak a=lizzard
browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/List.jsx
browser/components/newtab/content-src/lib/truncate-text.js
browser/components/newtab/data/content/activity-stream.bundle.js
browser/components/newtab/test/unit/content-src/lib/truncate-text.test.js
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
@@ -1,13 +1,12 @@
 import {actionCreators as ac} from "common/Actions.jsm";
 import {DSCard} from "../DSCard/DSCard.jsx";
 import {List} from "../List/List.jsx";
 import React from "react";
-import {truncateText} from "content-src/lib/truncate-text";
 
 export class Hero extends React.PureComponent {
   constructor(props) {
     super(props);
     this.onLinkClick = this.onLinkClick.bind(this);
   }
 
   onLinkClick(event) {
@@ -40,24 +39,24 @@ export class Hero extends React.PureComp
     this.heroRec = heroRec;
 
     // Note that `{index + 1}` is necessary below for telemetry since we treat heroRec as index 0.
     let cards = otherRecs.map((rec, index) => (
       <DSCard
         campaignId={rec.campaign_id}
         key={`dscard-${index}`}
         image_src={rec.image_src}
-        title={truncateText(rec.title, 44)}
+        title={rec.title}
         url={rec.url}
         id={rec.id}
         index={index + 1}
         type={this.props.type}
         dispatch={this.props.dispatch}
-        context={truncateText(rec.context, 22)}
-        source={truncateText(rec.domain, 22)} />
+        context={rec.context}
+        source={rec.domain} />
     ));
 
     let list = (
       <List
         recStartingPoint={1}
         feed={this.props.feed}
         hasImages={true}
         hasBorders={this.props.border === `border`}
@@ -69,22 +68,22 @@ export class Hero extends React.PureComp
       <div>
         <div className="ds-header">{this.props.title}</div>
         <div className={`ds-hero ds-hero-${this.props.border}`}>
           <a href={heroRec.url} className="wrapper" onClick={this.onLinkClick}>
             <div className="img-wrapper">
               <div className="img" style={{backgroundImage: `url(${heroRec.image_src})`}} />
             </div>
             <div className="meta">
-              <header>{truncateText(heroRec.title, 28)}</header>
-              <p>{truncateText(heroRec.excerpt, 114)}</p>
+              <header>{heroRec.title}</header>
+              <p>{heroRec.excerpt}</p>
               {heroRec.context ? (
-                <p className="context">{truncateText(heroRec.context, 22)}</p>
+                <p className="context">{heroRec.context}</p>
               ) : (
-                <p className="source">{truncateText(heroRec.domain, 22)}</p>
+                <p className="source">{heroRec.domain}</p>
               )}
             </div>
           </a>
           <div className={`${this.props.subComponentType}`}>
             { this.props.subComponentType === `cards` ? cards : list }
           </div>
         </div>
       </div>
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/List.jsx
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/List/List.jsx
@@ -1,12 +1,11 @@
 import {actionCreators as ac} from "common/Actions.jsm";
 import {connect} from "react-redux";
 import React from "react";
-import {truncateText} from "content-src/lib/truncate-text";
 
 /**
  * @note exported for testing only
  */
 export class ListItem extends React.PureComponent {
   // TODO performance: get feeds to send appropriately sized images rather
   // than waiting longer and scaling down on client?
   constructor(props) {
@@ -31,17 +30,17 @@ export class ListItem extends React.Pure
   }
 
   render() {
     return (
       <li className="ds-list-item">
         <a className="ds-list-item-link" href={this.props.url} onClick={this.onLinkClick}>
           <div className="ds-list-item-text">
             <div className="ds-list-item-title">{this.props.title}</div>
-            {this.props.excerpt && <div className="ds-list-item-excerpt">{truncateText(this.props.excerpt, 90)}</div>}
+            {this.props.excerpt && <div className="ds-list-item-excerpt">{this.props.excerpt}</div>}
             <div className="ds-list-item-info">{this.props.domain}</div>
           </div>
           <div className="ds-list-image" style={{backgroundImage: `url(${this.props.image_src})`}} />
         </a>
       </li>
     );
   }
 }
deleted file mode 100644
--- a/browser/components/newtab/content-src/lib/truncate-text.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export function truncateText(text = "", cap) {
-  return text.substring(0, cap).trim() + (text.length > cap ? "…" : "");
-}
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -7269,26 +7269,21 @@ class DSMessage_DSMessage extends extern
       ),
       external_React_default.a.createElement("hr", { className: "ds-hr" })
     );
   }
 }
 // EXTERNAL MODULE: ./common/Actions.jsm
 var Actions = __webpack_require__(2);
 
-// CONCATENATED MODULE: ./content-src/lib/truncate-text.js
-function truncateText(text = "", cap) {
-  return text.substring(0, cap).trim() + (text.length > cap ? "…" : "");
-}
 // CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/List/List.jsx
 
 
 
 
-
 /**
  * @note exported for testing only
  */
 class List_ListItem extends external_React_default.a.PureComponent {
   // TODO performance: get feeds to send appropriately sized images rather
   // than waiting longer and scaling down on client?
   constructor(props) {
     super(props);
@@ -7324,17 +7319,17 @@ class List_ListItem extends external_Rea
           external_React_default.a.createElement(
             "div",
             { className: "ds-list-item-title" },
             this.props.title
           ),
           this.props.excerpt && external_React_default.a.createElement(
             "div",
             { className: "ds-list-item-excerpt" },
-            truncateText(this.props.excerpt, 90)
+            this.props.excerpt
           ),
           external_React_default.a.createElement(
             "div",
             { className: "ds-list-item-info" },
             this.props.domain
           )
         ),
         external_React_default.a.createElement("div", { className: "ds-list-image", style: { backgroundImage: `url(${this.props.image_src})` } })
@@ -7394,17 +7389,16 @@ function _List(props) {
 
 const List = Object(external_ReactRedux_["connect"])(state => ({ DiscoveryStream: state.DiscoveryStream }))(_List);
 // CONCATENATED MODULE: ./content-src/components/DiscoveryStreamComponents/Hero/Hero.jsx
 
 
 
 
 
-
 class Hero_Hero extends external_React_default.a.PureComponent {
   constructor(props) {
     super(props);
     this.onLinkClick = this.onLinkClick.bind(this);
   }
 
   onLinkClick(event) {
     if (this.props.dispatch) {
@@ -7433,24 +7427,24 @@ class Hero_Hero extends external_React_d
     let [heroRec, ...otherRecs] = data.recommendations.slice(0, this.props.items);
     this.heroRec = heroRec;
 
     // Note that `{index + 1}` is necessary below for telemetry since we treat heroRec as index 0.
     let cards = otherRecs.map((rec, index) => external_React_default.a.createElement(DSCard["DSCard"], {
       campaignId: rec.campaign_id,
       key: `dscard-${index}`,
       image_src: rec.image_src,
-      title: truncateText(rec.title, 44),
+      title: rec.title,
       url: rec.url,
       id: rec.id,
       index: index + 1,
       type: this.props.type,
       dispatch: this.props.dispatch,
-      context: truncateText(rec.context, 22),
-      source: truncateText(rec.domain, 22) }));
+      context: rec.context,
+      source: rec.domain }));
 
     let list = external_React_default.a.createElement(List, {
       recStartingPoint: 1,
       feed: this.props.feed,
       hasImages: true,
       hasBorders: this.props.border === `border`,
       items: this.props.items - 1,
       type: `Hero` });
@@ -7475,31 +7469,31 @@ class Hero_Hero extends external_React_d
             external_React_default.a.createElement("div", { className: "img", style: { backgroundImage: `url(${heroRec.image_src})` } })
           ),
           external_React_default.a.createElement(
             "div",
             { className: "meta" },
             external_React_default.a.createElement(
               "header",
               null,
-              truncateText(heroRec.title, 28)
+              heroRec.title
             ),
             external_React_default.a.createElement(
               "p",
               null,
-              truncateText(heroRec.excerpt, 114)
+              heroRec.excerpt
             ),
             heroRec.context ? external_React_default.a.createElement(
               "p",
               { className: "context" },
-              truncateText(heroRec.context, 22)
+              heroRec.context
             ) : external_React_default.a.createElement(
               "p",
               { className: "source" },
-              truncateText(heroRec.domain, 22)
+              heroRec.domain
             )
           )
         ),
         external_React_default.a.createElement(
           "div",
           { className: `${this.props.subComponentType}` },
           this.props.subComponentType === `cards` ? cards : list
         )
deleted file mode 100644
--- a/browser/components/newtab/test/unit/content-src/lib/truncate-text.test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import {truncateText} from "content-src/lib/truncate-text";
-
-describe("truncateText", () => {
-  it("should accept nothing", () => {
-    assert.equal(truncateText(), "");
-  });
-
-  it("should give back string with no truncating", () => {
-    const str = "hello";
-
-    assert.equal(truncateText(str), str);
-  });
-
-  it("should give back short string for long cap", () => {
-    const str = "hello";
-
-    assert.equal(truncateText(str, 100), str);
-  });
-
-  it("should give back string for exact cap", () => {
-    const str = "hello";
-
-    assert.equal(truncateText(str, str.length), str);
-  });
-
-  it("should cap off long string with ellipsis", () => {
-    const str = "hello world";
-
-    assert.equal(truncateText(str, 5), "hello…");
-  });
-
-  it("should avoid putting ellipsis after whitespace", () => {
-    const str = "hello             world";
-
-    assert.equal(truncateText(str, 10), "hello…");
-  });
-});