Closed Bug 1528447 Opened 10 months ago Closed 7 months ago

Long source domains should get truncated with ellipsis

Categories

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

defect

Tracking

()

VERIFIED FIXED
Firefox 68
Iteration:
69.1 - May 13 - 26
Tracking Status
firefox66 --- wontfix
firefox67 --- wontfix
firefox68 --- verified

People

(Reporter: Mardak, Assigned: Mardak)

References

Details

(Keywords: github-merged)

Attachments

(5 files)

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

Blocks: 1512725
Iteration: --- → 67.3 - Feb 25 - Mar 10
Priority: -- → P2
Assignee: nobody → pdahiya
Priority: P2 → P1

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

Depends on: webkit-line-clamp
Attached image 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.

Iteration: 67.3 - Feb 25 - Mar 10 → 67.4 - Mar 11 - 17

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

Iteration: 67.4 - Mar 11 - 17 → 68.2 - Apr 1 - 14
Severity: normal → enhancement
No longer blocks: 1512725
Iteration: 68.2 - Apr 1 - 14 → 68.3 - Apr 15 - 28
Iteration: 68.3 - Apr 15 - 28 → 69.1 - May 13 - 26
Priority: P1 → P2

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;
     }
Assignee: pdahiya → edilee
Blocks: 1552599
Status: NEW → RESOLVED
Closed: 7 months ago
Keywords: github-merged
Priority: P2 → P1
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
No longer blocks: pocket-newtab-69

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.

Status: RESOLVED → VERIFIED
Component: Activity Streams: Newtab → New Tab Page
You need to log in before you can comment on or make changes to this bug.