[gold] Replace truncateWithEllipses() with infra-sk's truncate().

Bug: skia:12109
Change-Id: Ib1f285213a5fcbc0d7e23b5967eab23614226834
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/434340
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Commit-Queue: Leandro Lovisolo <lovisolo@google.com>
diff --git a/golden/modules/blamelist-panel-sk/BUILD.bazel b/golden/modules/blamelist-panel-sk/BUILD.bazel
index 73b3304..7ee8bf4 100644
--- a/golden/modules/blamelist-panel-sk/BUILD.bazel
+++ b/golden/modules/blamelist-panel-sk/BUILD.bazel
@@ -5,12 +5,12 @@
     sass_deps = ["//infra-sk:elements-sk_scss"],
     sass_srcs = ["blamelist-panel-sk.scss"],
     ts_deps = [
-        "//golden/modules:common_ts_lib",
         "//golden/modules:settings_ts_lib",
         "//infra-sk/modules/ElementSk:index_ts_lib",
         "@npm//common-sk",
         "@npm//elements-sk",
         "@npm//lit-html",
+        "//infra-sk/modules:string_ts_lib",
     ],
     ts_srcs = [
         "blamelist-panel-sk.ts",
diff --git a/golden/modules/blamelist-panel-sk/blamelist-panel-sk.ts b/golden/modules/blamelist-panel-sk/blamelist-panel-sk.ts
index 865a68b..400d3ee 100644
--- a/golden/modules/blamelist-panel-sk/blamelist-panel-sk.ts
+++ b/golden/modules/blamelist-panel-sk/blamelist-panel-sk.ts
@@ -12,14 +12,14 @@
 import { html } from 'lit-html';
 import { diffDate } from 'common-sk/modules/human';
 import { ElementSk } from '../../../infra-sk/modules/ElementSk';
-import { truncateWithEllipses } from '../common';
+import { truncate } from '../../../infra-sk/modules/string';
 import { baseRepoURL } from '../settings';
 
 const maxCommitsToDisplay = 15;
 
 const commitRow = (c: Commit) => html`
 <tr>
-  <td title=${c.author}>${truncateWithEllipses(c.author, 20)}</td>
+  <td title=${c.author}>${truncate(c.author, 20)}</td>
   <td title=${new Date(c.commit_time * 1000)}>
    ${diffDate(c.commit_time * 1000)}
   </td>
@@ -28,7 +28,7 @@
       ${c.hash?.substring(0, 8)}
     </a>
   </td>
-  <td title=${c.message}>${truncateWithEllipses(c.message || '', 80)}</td>
+  <td title=${c.message}>${truncate(c.message || '', 80)}</td>
 </tr>
 `;
 
diff --git a/golden/modules/changelist-controls-sk/BUILD.bazel b/golden/modules/changelist-controls-sk/BUILD.bazel
index a18dd27..8de9cfe 100644
--- a/golden/modules/changelist-controls-sk/BUILD.bazel
+++ b/golden/modules/changelist-controls-sk/BUILD.bazel
@@ -5,11 +5,11 @@
     sass_deps = ["//infra-sk:elements-sk_scss"],
     sass_srcs = ["changelist-controls-sk.scss"],
     ts_deps = [
-        "//golden/modules:common_ts_lib",
         "//golden/modules:rpc_types_ts_lib",
         "//infra-sk/modules/ElementSk:index_ts_lib",
         "@npm//elements-sk",
         "@npm//lit-html",
+        "//infra-sk/modules:string_ts_lib",
     ],
     ts_srcs = [
         "changelist-controls-sk.ts",
diff --git a/golden/modules/changelist-controls-sk/changelist-controls-sk.ts b/golden/modules/changelist-controls-sk/changelist-controls-sk.ts
index c57abce..2ad95ae 100644
--- a/golden/modules/changelist-controls-sk/changelist-controls-sk.ts
+++ b/golden/modules/changelist-controls-sk/changelist-controls-sk.ts
@@ -1,7 +1,7 @@
 import { define } from 'elements-sk/define';
 import { html } from 'lit-html';
 import { ElementSk } from '../../../infra-sk/modules/ElementSk';
-import { truncateWithEllipses } from '../common';
+import { truncate } from '../../../infra-sk/modules/string';
 
 import 'elements-sk/radio-sk';
 import 'elements-sk/styles/select';
@@ -25,10 +25,10 @@
       <div class=info>
         <span class=title>${cl.system} changelist:</span>
         <a href=${cl.url} target=_blank rel=noopener>
-          ${truncateWithEllipses(cl.subject, 48)}
+          ${truncate(cl.subject, 48)}
         </a>
 
-        <span>${truncateWithEllipses(cl.owner, 32)}</span>
+        <span>${truncate(cl.owner, 32)}</span>
 
         <a href="/triagelog?changelist_id=${cl.id}&crs=${cl.system}">
           <find-in-page-icon-sk></find-in-page-icon-sk>Triagelog
@@ -66,7 +66,7 @@
   private static tryJobTemplate = (tj: TryJob) => html`
     <div class=tryjob title=${tj.name}>
       <a href=${tj.url} target=_blank rel=noopener>
-        ${truncateWithEllipses(tj.name, 60)}
+        ${truncate(tj.name, 60)}
       </a>
     </div>
   `;
diff --git a/golden/modules/common.ts b/golden/modules/common.ts
index 972609d..a095b49 100644
--- a/golden/modules/common.ts
+++ b/golden/modules/common.ts
@@ -13,21 +13,6 @@
   return queryStr.split('&').map(decodeURIComponent).join('\n');
 }
 
-/**
- * Takes a string and trims it to be no longer than maxLength. If the string needs to be trimmed,
- * an ellipsis (...) will be added as a suffix, but the total string length (with ellipsis) will
- * stay under maxLength.
- */
-export function truncateWithEllipses(str: string, maxLength = 15): string {
-  if (maxLength < 3) {
-    throw 'maxLength must be greater than the length of the ellipsis.';
-  }
-  if (str.length <= maxLength) {
-    return str;
-  }
-  return `${str.substr(0, maxLength - 3)}...`;
-}
-
 let imagePrefix = '/img/images';
 let diffPrefix = '/img/diffs';
 
diff --git a/golden/modules/common_test.ts b/golden/modules/common_test.ts
index cf03fbe..d515730 100644
--- a/golden/modules/common_test.ts
+++ b/golden/modules/common_test.ts
@@ -5,7 +5,6 @@
   digestDiffImagePath,
   detailHref,
   diffPageHref,
-  truncateWithEllipses,
   sendBeginTask,
   sendEndTask,
   sendFetchError,
@@ -25,25 +24,6 @@
   });
 });
 
-describe('shorten', () => {
-  it('shortens long strings into possibly ellipsed versions', () => {
-    expect(truncateWithEllipses('')).to.equal('');
-    expect(truncateWithEllipses('too short')).to.equal('too short');
-    expect(truncateWithEllipses('should be ellipsed because it is too long')).to.equal('should be el...');
-    expect(truncateWithEllipses('should be ellipsed because it is too long', 20)).to.equal('should be ellipse...');
-    expect(truncateWithEllipses('should be ellipsed because it is too long', 5)).to.equal('sh...');
-  });
-  it('throws an exception if maxLength is too short', () => {
-    try {
-      truncateWithEllipses('foo bar', 2);
-    } catch (e) {
-      expect(e).to.contain('length of the ellipsis');
-      return;
-    }
-    expect.fail('There should have been an exception.');
-  });
-});
-
 // valid, but arbitrary md5 hashes.
 const aDigest = 'aaab78c9711cb79197d47f448ba51338';
 const bDigest = 'bbb8b07beb4e1247c2cbafdb92b93e55';
diff --git a/golden/modules/digest-details-sk/BUILD.bazel b/golden/modules/digest-details-sk/BUILD.bazel
index e3bb85c..b5ddf86 100644
--- a/golden/modules/digest-details-sk/BUILD.bazel
+++ b/golden/modules/digest-details-sk/BUILD.bazel
@@ -32,6 +32,7 @@
         "@npm//dialog-polyfill",
         "@npm//elements-sk",
         "@npm//lit-html",
+        "//infra-sk/modules:string_ts_lib",
     ],
     ts_srcs = [
         "digest-details-sk.ts",
diff --git a/golden/modules/digest-details-sk/digest-details-sk.ts b/golden/modules/digest-details-sk/digest-details-sk.ts
index 7525a28..1b4cd10 100644
--- a/golden/modules/digest-details-sk/digest-details-sk.ts
+++ b/golden/modules/digest-details-sk/digest-details-sk.ts
@@ -24,10 +24,12 @@
 import { HintableObject } from 'common-sk/modules/hintable';
 import { diffDate } from 'common-sk/modules/human';
 import { ElementSk } from '../../../infra-sk/modules/ElementSk';
+import { truncate } from '../../../infra-sk/modules/string';
 import {
-  truncateWithEllipses, detailHref, diffPageHref, sendBeginTask, sendEndTask, sendFetchError,
+  detailHref, diffPageHref, sendBeginTask, sendEndTask, sendFetchError,
 } from '../common';
 
+
 import 'elements-sk/icon/group-work-icon-sk';
 import '../dots-sk';
 import '../dots-legend-sk';
@@ -170,7 +172,7 @@
   private static imageComparisonTemplate = (ele: DigestDetailsSk) => {
     const left: ImageComparisonData = {
       digest: ele.digest,
-      title: truncateWithEllipses(ele.digest),
+      title: truncate(ele.digest, 15),
       detail: detailHref(ele.grouping, ele.digest, ele.changeListID, ele.crs),
     };
     if (!ele.right) {
@@ -185,7 +187,7 @@
       detail: detailHref(ele.grouping, ele.right.digest, ele.changeListID, ele.crs),
     };
     if (ele._overrideRight) {
-      right.title = truncateWithEllipses(ele.right.digest);
+      right.title = truncate(ele.right.digest, 15);
     }
 
     return html`<image-compare-sk .left=${left} .right=${right}></image-compare-sk>`;
@@ -220,11 +222,11 @@
       return ''; // details might not be loaded yet.
     }
 
-    const titles = [truncateWithEllipses(ele.digest)];
+    const titles = [truncate(ele.digest, 15)];
     const paramsets = [ele.params];
 
     if (ele.right && ele.right.paramset) {
-      titles.push(truncateWithEllipses(ele.right.digest));
+      titles.push(truncate(ele.right.digest, 15));
       paramsets.push(ele.right.paramset);
     }