Improve updateOriginsEliding_ performance.

chrome/browser/resources/options/password_manager.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 cr.define('options', function() {
   /** @const */ var Page = cr.ui.pageManager.Page;
   /** @const */ var PageManager = cr.ui.pageManager.PageManager;
   /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel;
 
   /////////////////////////////////////////////////////////////////////////////
@@ skipping 168 matching lines @@
      */
     updateOriginsEliding_: function(list) {
       var entries = list.getElementsByClassName('deletable-item');
       if (entries.length == 0)
         return;
       var entry = entries[0];
       var computedStyle = window.getComputedStyle(entry.urlDiv);
       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.
         if (!entry.isClickable)
           continue;
         var cellWidth = columnWidth;
         if (entry.androidUriSuffix)
           cellWidth -= entry.androidUriSuffix.offsetWidth;
         var urlLink = entry.urlLink;
         if (cellWidth <= 0) {
           console.error('cellWidth <= 0. Skip origins eliding for ' +
               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;
       }
     },
 
     /**
      * Updates the data model for the saved passwords list with the values from
      * |entries|.
      * @param {!Array} entries The list of saved password data.
      */
     setSavedPasswordsList_: function(entries) {
       if (this.lastQuery_) {
@@ skipping 104 matching lines @@
     'showImportExportButton',
     'showPassword',
   ]);
 
   // Export
   return {
     PasswordManager: PasswordManager
   };
 
 });