Commit 24e3e377 authored by tsergeant's avatar tsergeant Committed by Commit bot

MD History: Trim long item titles to reduce effect on performance

History items with extremely long titles are very slow to render,
due to needing to layout the entire title in order to determine where to
cut it off with ellipses. This greatly degrades the performance of MD
History in a profile which has visited several of these items.

This CL trims titles down to at most 300 characters before they are
rendered, which has no visible effect, but greatly improves performance.
On a profile that has visited crashsafari[dot]com, load time is reduced
from ~5000ms to ~1800ms on my Z620. Scrolling performance is also
greatly improved.

BUG=621347
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2112803002
Cr-Commit-Position: refs/heads/master@{#403351}
parent 8634a951
...@@ -12,6 +12,14 @@ ...@@ -12,6 +12,14 @@
*/ */
var BROWSING_GAP_TIME = 15 * 60 * 1000; var BROWSING_GAP_TIME = 15 * 60 * 1000;
/**
* Maximum length of a history item title. Anything longer than this will be
* cropped to fit within this limit. This value is large enough that it will not
* be noticeable in a 960px wide history-item.
* @const
*/
var TITLE_MAX_LENGTH = 300;
/** /**
* @enum {number} * @enum {number}
*/ */
......
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
<div class="website-icon" id="icon"></div> <div class="website-icon" id="icon"></div>
<div id="title-and-domain"> <div id="title-and-domain">
<a href="[[item.url]]" id="title" class="website-title"> <a href="[[item.url]]" id="title" class="website-title">
<history-searched-label title="[[item.title]]" <history-searched-label title="[[cropItemTitle_(item.title)]]"
search-term="[[searchTerm]]"></history-searched-label> search-term="[[searchTerm]]"></history-searched-label>
</a> </a>
<span id="domain">[[item.domain]]</span> <span id="domain">[[item.domain]]</span>
......
...@@ -81,6 +81,18 @@ cr.define('md_history', function() { ...@@ -81,6 +81,18 @@ cr.define('md_history', function() {
var resultId = numberOfItems == 1 ? 'searchResult' : 'searchResults'; var resultId = numberOfItems == 1 ? 'searchResult' : 'searchResults';
return loadTimeData.getStringF('foundSearchResults', numberOfItems, return loadTimeData.getStringF('foundSearchResults', numberOfItems,
loadTimeData.getString(resultId), search); loadTimeData.getString(resultId), search);
},
/**
* Crop long item titles to reduce their effect on layout performance. See
* crbug.com/621347.
* @param {string} title
* @return {string}
*/
cropItemTitle_: function(title) {
return (title.length > TITLE_MAX_LENGTH) ?
title.substr(0, TITLE_MAX_LENGTH) :
title;
} }
}); });
......
...@@ -76,6 +76,16 @@ cr.define('md_history.history_item_test', function() { ...@@ -76,6 +76,16 @@ cr.define('md_history.history_item_test', function() {
}); });
}); });
test('long titles are trimmed', function() {
var item = document.createElement('history-item');
var longtitle = '0123456789'.repeat(100);
item.item =
createHistoryEntry('2016-06-30', 'http://example.com/' + longtitle);
var label = item.$$('history-searched-label');
assertEquals(TITLE_MAX_LENGTH, label.title.length);
});
teardown(function() { teardown(function() {
element.historyData_ = []; element.historyData_ = [];
element.searchedTerm = ''; element.searchedTerm = '';
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment