DevTools: untruncate links on copy

third_party/WebKit/Source/devtools/front_end/components/Linkifier.js

Index: third_party/WebKit/Source/devtools/front_end/components/Linkifier.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/Linkifier.js b/third_party/WebKit/Source/devtools/front_end/components/Linkifier.js
index 6184cc95d5d4eb1254e5cddb10c6985f96a1c68c..1997edca14758e769e48ca66f85ddefca6bb5c1b 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/Linkifier.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/Linkifier.js
@@ -303,13 +303,8 @@ Components.Linkifier = class {
       return;
 
     Components.Linkifier._bindUILocation(anchor, uiLocation);
-    var text = uiLocation.linkText();
-    var info = Components.Linkifier._linkInfo(anchor);
-    info.originalLinkText = text;
-    text = text.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g, '$1\u2026');
-    if (this._maxLength)
-      text = text.trimMiddle(this._maxLength);
-    anchor.textContent = text;
+    var text = uiLocation.linkText(true /* skipTrim */);
+    Components.Linkifier._setTrimmedText(anchor, text, true /* trimHashes */, this._maxLength);
 
     var titleText = uiLocation.uiSourceCode.url();
     if (typeof uiLocation.lineNumber === 'number')
@@ -396,9 +391,7 @@ Components.Linkifier = class {
       link.title = title;
     if (href)
       link.href = href;
-    link.textContent = text;
-    if (maxLength)
-      link.textContent = link.textContent.trimMiddle(maxLength);
+    Components.Linkifier._setTrimmedText(link, text, false /* trimHashes */, maxLength);

[lushnikov, 2017/04/22 01:11:48]

can we always trim hashes?

[luoe, 2017/04/22 05:43:16]

I'm all for consistency!  Tried it out and it seems fine.

     link[Components.Linkifier._infoSymbol] = {
       icon: null,
       enableDecorator: false,
@@ -408,8 +401,7 @@ Components.Linkifier = class {
       lineNumber: null,
       columnNumber: null,
       revealable: null,
-      fallback: null,
-      originalLinkText: text
+      fallback: null
     };
     if (!preventClick)
       link.addEventListener('click', Components.Linkifier._handleClick, false);
@@ -419,12 +411,80 @@ Components.Linkifier = class {
   }
 
   /**
-   * @param {?Element} link
-   * @return {?string}
+   * @param {!Element} link
+   * @param {string} text
+   * @param {boolean=} trimHashes
+   * @param {number=} maxLength
+   */
+  static _setTrimmedText(link, text, trimHashes, maxLength) {
+    // Find the indices which define the hidden substring.
+    var hiddenIndices = [Math.floor(text.length / 2), Math.floor(text.length / 2)];
+    if (maxLength && text.length > maxLength) {
+      var maxLengthIndices = middleTruncatedIndices(text, maxLength);
+      hiddenIndices[0] = Math.min(hiddenIndices[0], maxLengthIndices[0]);
+      hiddenIndices[1] = Math.max(hiddenIndices[1], maxLengthIndices[1]);
+    }
+    if (trimHashes) {
+      var hashIndices = hashTruncatedIndices(text);
+      hiddenIndices[0] = Math.min(hiddenIndices[0], hashIndices[0]);
+      hiddenIndices[1] = Math.max(hiddenIndices[1], hashIndices[1]);

[lushnikov, 2017/04/22 01:11:48]

in case of:
1. text.length < maxLength
2. text has a cache-busting in the very end

this will truncate link from center up to the very end (where the hash is
located).

[luoe, 2017/04/22 05:43:16]

I see, so my "max/min from the center" approach does not work correctly.  The
new approach using splitByRegexes should address this.
I've added a test for the short url with hashes case.

+    }
+    var leftIndex = hiddenIndices[0];
+    var rightIndex = hiddenIndices[1];
+
+    if (leftIndex < rightIndex) {
+      link.removeChildren();
+      link.createTextChild(text.substr(0, leftIndex));

[lushnikov, 2017/04/22 01:11:48]

nit: text.substring(0, leftIndex)

we try to use substring to avoid confusion between substr and substring

[luoe, 2017/04/22 05:43:16]

Done.

+      var ellipsisNode = link.createChild('span', 'devtools-link-ellipsis').createTextChild('\u200B');
+      ellipsisNode[Components.Linkifier._untruncatedNodeTextSymbol] = text.substr(leftIndex, rightIndex - leftIndex);
+      link.createTextChild(text.substr(rightIndex, text.length - rightIndex));

[lushnikov, 2017/04/22 01:11:48]

nit: text.substring(rightIndex)

[luoe, 2017/04/22 05:43:16]

Done.

+    } else {
+      link.textContent = text;
+    }
+
+    /**
+     * @param {string} text
+     * @param {number} maxLength
+     * @return {!Array<number>}
+     */
+    function middleTruncatedIndices(text, maxLength) {
+      var leftIndex = Math.floor(maxLength / 2);
+      var rightIndex = text.length - Math.ceil(maxLength / 2) + 1;
+
+      // Do not truncate between characters that use multiple code points (emojis).
+      if (text.codePointAt(rightIndex - 1) >= 0x10000) {
+        rightIndex++;
+        leftIndex++;
+      }
+      if (leftIndex > 0 && text.codePointAt(leftIndex - 1) >= 0x10000)
+        leftIndex--;
+      return [leftIndex, rightIndex];
+    }
+
+    /**
+     * @param {string} text
+     * @return {!Array<number>}
+     */
+    function hashTruncatedIndices(text) {
+      var leftIndex = text.length;
+      var rightIndex = 0;
+      var hashRegex = /[a-f0-9]{20,}/g;
+      var match = hashRegex.exec(text);
+      while (match !== null) {
+        leftIndex = Math.min(leftIndex, match.index + 7);
+        rightIndex = Math.max(rightIndex, match.index + match[0].length);
+        match = hashRegex.exec(text);
+      }
+      return [leftIndex, rightIndex];
+    }
+  }
+
+  /**
+   * @param {!Node} node
+   * @return {string}
    */
-  static originalLinkText(link) {
-    var info = this._linkInfo(link);
-    return info ? info.originalLinkText : null;
+  static untruncatedNodeText(node) {
+    return node[Components.Linkifier._untruncatedNodeTextSymbol] || node.textContent;
   }
 
   /**
@@ -549,6 +609,7 @@ Components.Linkifier._decorator = null;
 
 Components.Linkifier._sourceCodeAnchors = Symbol('Linkifier.anchors');
 Components.Linkifier._infoSymbol = Symbol('Linkifier.info');
+Components.Linkifier._untruncatedNodeTextSymbol = Symbol('Linkifier.untruncatedNodeText');
 
 /**
  * @typedef {{
@@ -560,8 +621,7 @@ Components.Linkifier._infoSymbol = Symbol('Linkifier.info');
  *     lineNumber: ?number,
  *     columnNumber: ?number,
  *     revealable: ?Object,
- *     fallback: ?Element,
- *     originalLinkText: string
+ *     fallback: ?Element
  * }}
  */
 Components._LinkInfo;