From fdf50ecfb6bcba3e7b19ca8aad93b28e2e37ef65 Mon Sep 17 00:00:00 2001
From: Lily Chen <[email protected]>
Date: Thu, 06 Feb 2025 14:51:47 -0800
Subject: [PATCH] [Downloads] Truncate/elide overly long filenames

This adjusts the CSS on chrome://downloads to elide the filename if it
would otherwise wrap, thereby limiting it to one line. Also adds a title
attribute to the filename display, so that hovering over an elided
filename will display the full filename.

Screenshots:
https://drive.google.com/drive/folders/1LrF74w51di8eNfs6bO9DmSGhLy45KdTl

Bug: 392818696
Change-Id: I234bf55844396bf29120db034b1128d460f95e06
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6237214
Commit-Queue: Lily Chen <[email protected]>
Reviewed-by: John Lee <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1417034}
---

diff --git a/chrome/browser/resources/downloads/item.css b/chrome/browser/resources/downloads/item.css
index f5c2357..b2a70b2e 100644
--- a/chrome/browser/resources/downloads/item.css
+++ b/chrome/browser/resources/downloads/item.css
@@ -187,16 +187,25 @@
   }
 }
 
+#title-area {
+  display: flex;
+  flex-direction: row;
+}
+
 #name,
 #file-link,
 #url {
   max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 #name,
 #file-link {
   font-weight: 500;
   word-break: break-all;
+  text-align: start;
 }
 
 @media (prefers-color-scheme: light) {
@@ -209,13 +218,10 @@
   }
 }
 
-#name {
-  margin-inline-end: 12px;  /* Only really affects #tag. */
-}
-
 #tag {
   color: #5a5a5a;
   font-weight: 500;
+  margin-inline-start: 12px;
 }
 
 #url {
@@ -223,10 +229,7 @@
   display: block;
   margin-top: 6px;
   min-height: 0;
-  overflow: hidden;
   text-decoration: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   /* Ellipsize beginning and preserve the end to always display the eTLD+1. */
   direction: rtl;
   text-align: end;
@@ -257,6 +260,14 @@
   direction: ltr;
 }
 
+:host-context([dir=rtl]) #name {
+  direction: ltr;
+}
+
+:host-context([dir=rtl]) #file-link {
+  direction: ltr;
+}
+
 .is-active #url {
   color: var(--cr-secondary-text-color);
 }
diff --git a/chrome/browser/resources/downloads/item.html.ts b/chrome/browser/resources/downloads/item.html.ts
index 1e0f2c8..00e8ed3 100644
--- a/chrome/browser/resources/downloads/item.html.ts
+++ b/chrome/browser/resources/downloads/item.html.ts
@@ -32,11 +32,13 @@
             href="${this.data?.url?.url || ''}"
             @click="${this.onFileLinkClick_}" focus-row-control
             focus-type="fileLink"
+            title="${this.data?.fileName || ''}"
             ?hidden="${!this.shouldLinkFilename_}"><!-- No line break
           -->${this.data?.fileName || ''}<!-- No line break
         --></a><!--
         Before #name.
         --><span id="name"
+            title="${this.data?.fileName || ''}"
             ?hidden="${this.shouldLinkFilename_}"><!-- No line break
           -->${this.data?.fileName || ''}</span>
         <span id="tag">${this.computeTag_()}</span>