Improve updateOriginsEliding_ performance.

chrome/browser/resources/options/password_manager.js

Index: chrome/browser/resources/options/password_manager.js
diff --git a/chrome/browser/resources/options/password_manager.js b/chrome/browser/resources/options/password_manager.js
index 43ab11e1027edd7866858bd7c2b887d95982c8a8..9dc94c1d4a06502e36c0c05120cf55e24f0ccb47 100644
--- a/chrome/browser/resources/options/password_manager.js
+++ b/chrome/browser/resources/options/password_manager.js
@@ -186,6 +186,14 @@ cr.define('options', function() {
       var columnWidth = entry.urlDiv.offsetWidth -
           parseInt(computedStyle.webkitMarginStart, 10) -
           parseInt(computedStyle.webkitPaddingStart, 10);
+
+      // We use a canvas context to compute text widths. This canvas is not
+      // part of the DOM and thus avoids layout thrashing when updating the
+      // contained text.
+      var canvas = document.createElement('canvas');
+      var ctx = canvas.getContext('2d');
+      ctx.font = computedStyle.font;
+
       for (var i = 0; i < entries.length; ++i) {
         entry = entries[i];
         // For android://com.example, elide from the right.
@@ -200,11 +208,19 @@ cr.define('options', function() {
               urlLink.textContent);
           continue;
         }
-        if (urlLink.offsetWidth <= cellWidth)
+
+        var textContent = urlLink.textContent;
+        if (ctx.measureText(textContent).width <= cellWidth) {
           continue;
-        urlLink.textContent = '…' + urlLink.textContent.substring(1);
-        while (urlLink.offsetWidth > cellWidth)
-          urlLink.textContent = '…' + urlLink.textContent.substring(2);
+        }

[stevenjb, 2016/10/21 19:58:40]

nit: {} not needed

[jdoerrie, 2016/10/24 07:34:54]

Done.

+
+        textContent = '…' + textContent.substring(1);
+        while (ctx.measureText(textContent).width > cellWidth) {
+          textContent = '…' + textContent.substring(2);

[vabr (Chromium), 2016/10/21 13:15:31]

optional, because not introduced by this CL:

It seems strange that on line 217 just one character is cut away, and here in
the loop it is 2 per iteration. Do we need them different? Why do we use the
value(s) we use? (Small number => maximizing of the original text being left,
big number => quicker processing, what is the right tradeoff?)

Feel free to tweak this according to what you think is best and add a comment
explaining your choice (unless you use 1 in both places, which is default enough
to need an explanation).

[jdoerrie, 2016/10/21 14:15:00]

We need different numbers because textContent[0] will always be '…' after line
217. If we used substring(1) in line 219 the whole operation would simply be
identity. With the current implementation we always take one character away per
iteration. I thought about optimizing this, but with variable length characters
it would be hard to know how many characters exactly need to be chopped off in
order to make the text fit. If this turns out to be a perf issue (which
currently I don't think it is), one could implement a form of binary search
here.

[vabr (Chromium), 2016/10/21 14:20:45]

Thanks for the explanation, Jan, and sorry for my dumb question, I should have
thought more about it. I also agree with you that the current way of finding the
maximal length does not seem to be the performance issue of this code.

+        }

[stevenjb, 2016/10/21 19:58:40]

nit: {} also not needed here.

[jdoerrie, 2016/10/24 07:34:54]

Done.

+
+        // Write the elided origin back to the DOM.
+        urlLink.textContent = textContent;
       }
     },