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 166 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);
+
+        textContent = '…' + textContent.substring(1);
+        while (ctx.measureText(textContent).width > cellWidth)
+          textContent = '…' + textContent.substring(2);
+
+        // 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
   };
 
 });