Improve updateOriginsEliding_ performance.

This CL is part of the effort to improve performance of the password manager
settings. In particular, this CL fixes layout thrashing in the
updateOriginsEliding_ code. Prior to this change the code was first reading
style information from the DOM and then changing it in a loop.

This change creates a canvas element that is not part of the DOM.
It then uses the canvas to do the text measurements, thus avoiding the
repainting of the DOM. In the end, it writes the final obtained string in the
DOM, and thus does not change the display of the saved passwords.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/measureText

BUG=651049
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2439453005
Cr-Commit-Position: refs/heads/master@{#427028}

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,17 @@ 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);
+
+        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;
       }
     },