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 s
jdoerrie
2016/10/21 14:15:00
We need different numbers because textContent[0] w
vabr (Chromium)
2016/10/21 14:20:45
Thanks for the explanation, Jan, and sorry for my
|
+ } |
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; |
} |
}, |