WebUI Tab Strip: Fade overflow text instead of showing ellipsis

https://imgur.com/a/lmrQgaq

Change-Id: I5d7621d209b0f081fc562250a82cef839760fc4c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2399443Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805929}

chrome/browser/resources/tab_strip/tab.html

@@ -193,10 +193,29 @@
     font-size: 100%;
     font-weight: normal;
     overflow: hidden;
-    text-overflow: ellipsis;
+    position: relative;
     white-space: nowrap;
   }
 
+  #titleText::after {
+    background: linear-gradient(
+        to right, transparent, var(--tabstrip-tab-background-color));
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 3ch;
+  }
+
+  :host-context([dir='rtl']) #titleText::after {
+    background: linear-gradient(
+        to left, transparent, var(--tabstrip-tab-background-color));
+    left: 0;
+    right: auto;
+  }
+
   :host([has-alert-states_]) #titleText {
     margin-inline-end: 4px;
   }