1528447 - Long source domains should get truncated with ellipsis

Status: VERIFIED FIXED

(Firefox :: New Tab Page, defect, P1)

Description

[Ed Lee :Mardak]

Attachment: doubled domains as example

Looks like some of them already have ellipsis styles but aren't actually getting truncated. Might need some explicit width or overflow hidden?

Comment 1

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/4811

Comment 2

[Ed Lee :Mardak]

Hmmmm... maybe we should just wait for bug 866102.. see upcoming attachment 9046513 [details]

Comment 3

[Ed Lee :Mardak]

Attachment: clamp: 1, 4, 1

I tried a local build with bug 866102 / D20115 and set:

display: -webkit-box;
-webkit-line-clamp: 4 /* or as appropriate */;

/* for source/domain */
word-wrap: anywhere;
overflow: hidden;

word-wrap causes the long domain to be wrapped and line-clamp just hides the wrapped part of the domain and inserts ellipsis.

Comment 4

[Punam Dahiya [:pdahiya]]

With add support for -webkit-line-clamp https://bugzilla.mozilla.org/show_bug.cgi?id=866102 still missing in nightly, this bug should be targeted for 68

Comment 5

[Ed Lee :Mardak]

Attachment: double domain with clamp

If we take bug 1551359, we can do something like this:

diff --git a/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx b/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
--- a/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
+++ b/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
@@ -44,6 +44,6 @@ export class DSCard extends React.PureComponent {
             <div className="info-wrap"
-              data-total-lines="6"
+              data-total-lines="7"
               ref={clampTotalLines}>
-              <p className="source">{this.props.source}</p>
+              <p className="source clamp" data-clamp="1">{this.props.source}</p>
               <header className="title clamp" data-clamp="4">{this.props.title}</header>
diff --git a/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss b/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
--- a/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
+++ b/content-src/components/DiscoveryStreamComponents/DSCard/_DSCard.scss
@@ -93,3 +93,4 @@ $excerpt-line-height: 20;
     .source {
       margin-bottom: 2px;
+      word-break: break-all;
     }

Comment 6

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/5041

Comment 7

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/f78634b8bff9

Comment 8

[Ciprian Muresan [:cmuresan], Ecosystem QA]

I have verified that ellipses appear in all parts of the cards, domain, title, and description on the latest Firefox Nightly 68.0a1 (Build ID 20190519213707) on Windows 10, macOS 10.14, and Arch Linux 4.14.3.