OLD | NEW |
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 cr.define('options', function() { | 5 cr.define('options', function() { |
6 /** @const */ var Page = cr.ui.pageManager.Page; | 6 /** @const */ var Page = cr.ui.pageManager.Page; |
7 /** @const */ var PageManager = cr.ui.pageManager.PageManager; | 7 /** @const */ var PageManager = cr.ui.pageManager.PageManager; |
8 /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel; | 8 /** @const */ var ArrayDataModel = cr.ui.ArrayDataModel; |
9 | 9 |
10 ///////////////////////////////////////////////////////////////////////////// | 10 ///////////////////////////////////////////////////////////////////////////// |
(...skipping 168 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
179 */ | 179 */ |
180 updateOriginsEliding_: function(list) { | 180 updateOriginsEliding_: function(list) { |
181 var entries = list.getElementsByClassName('deletable-item'); | 181 var entries = list.getElementsByClassName('deletable-item'); |
182 if (entries.length == 0) | 182 if (entries.length == 0) |
183 return; | 183 return; |
184 var entry = entries[0]; | 184 var entry = entries[0]; |
185 var computedStyle = window.getComputedStyle(entry.urlDiv); | 185 var computedStyle = window.getComputedStyle(entry.urlDiv); |
186 var columnWidth = entry.urlDiv.offsetWidth - | 186 var columnWidth = entry.urlDiv.offsetWidth - |
187 parseInt(computedStyle.webkitMarginStart, 10) - | 187 parseInt(computedStyle.webkitMarginStart, 10) - |
188 parseInt(computedStyle.webkitPaddingStart, 10); | 188 parseInt(computedStyle.webkitPaddingStart, 10); |
| 189 |
| 190 // We use a canvas context to compute text widths. This canvas is not |
| 191 // part of the DOM and thus avoids layout thrashing when updating the |
| 192 // contained text. |
| 193 var canvas = document.createElement('canvas'); |
| 194 var ctx = canvas.getContext('2d'); |
| 195 ctx.font = computedStyle.font; |
| 196 |
189 for (var i = 0; i < entries.length; ++i) { | 197 for (var i = 0; i < entries.length; ++i) { |
190 entry = entries[i]; | 198 entry = entries[i]; |
191 // For android://com.example, elide from the right. | 199 // For android://com.example, elide from the right. |
192 if (!entry.isClickable) | 200 if (!entry.isClickable) |
193 continue; | 201 continue; |
194 var cellWidth = columnWidth; | 202 var cellWidth = columnWidth; |
195 if (entry.androidUriSuffix) | 203 if (entry.androidUriSuffix) |
196 cellWidth -= entry.androidUriSuffix.offsetWidth; | 204 cellWidth -= entry.androidUriSuffix.offsetWidth; |
197 var urlLink = entry.urlLink; | 205 var urlLink = entry.urlLink; |
198 if (cellWidth <= 0) { | 206 if (cellWidth <= 0) { |
199 console.error('cellWidth <= 0. Skip origins eliding for ' + | 207 console.error('cellWidth <= 0. Skip origins eliding for ' + |
200 urlLink.textContent); | 208 urlLink.textContent); |
201 continue; | 209 continue; |
202 } | 210 } |
203 if (urlLink.offsetWidth <= cellWidth) | 211 |
| 212 var textContent = urlLink.textContent; |
| 213 if (ctx.measureText(textContent).width <= cellWidth) |
204 continue; | 214 continue; |
205 urlLink.textContent = '…' + urlLink.textContent.substring(1); | 215 |
206 while (urlLink.offsetWidth > cellWidth) | 216 textContent = '…' + textContent.substring(1); |
207 urlLink.textContent = '…' + urlLink.textContent.substring(2); | 217 while (ctx.measureText(textContent).width > cellWidth) |
| 218 textContent = '…' + textContent.substring(2); |
| 219 |
| 220 // Write the elided origin back to the DOM. |
| 221 urlLink.textContent = textContent; |
208 } | 222 } |
209 }, | 223 }, |
210 | 224 |
211 /** | 225 /** |
212 * Updates the data model for the saved passwords list with the values from | 226 * Updates the data model for the saved passwords list with the values from |
213 * |entries|. | 227 * |entries|. |
214 * @param {!Array} entries The list of saved password data. | 228 * @param {!Array} entries The list of saved password data. |
215 */ | 229 */ |
216 setSavedPasswordsList_: function(entries) { | 230 setSavedPasswordsList_: function(entries) { |
217 if (this.lastQuery_) { | 231 if (this.lastQuery_) { |
(...skipping 104 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
322 'showImportExportButton', | 336 'showImportExportButton', |
323 'showPassword', | 337 'showPassword', |
324 ]); | 338 ]); |
325 | 339 |
326 // Export | 340 // Export |
327 return { | 341 return { |
328 PasswordManager: PasswordManager | 342 PasswordManager: PasswordManager |
329 }; | 343 }; |
330 | 344 |
331 }); | 345 }); |
OLD | NEW |