History: Prevent timestamps from ellipsized in some locales.

http://crrev.com/205027 changed the width of the entry times on
the history page. This causes the times to be ellipsized in e.g.
Arabic. However, if we go back to a fixed with of 90px, it looks
weird due to the extra whitespace allocate for the bookmark star.

The solution is to size the times dynamically, making them as wide
as the widest, up to a maximum of 90px.

BUG=304770
R=bauerb@chromium.org

Review URL: https://codereview.chromium.org/66673004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@233935 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 49 insertions, 21 deletions

diff --git a/chrome/browser/resources/history/history.css b/chrome/browser/resources/history/history.css
index d0ed9ce..25ccd90 100644
--- a/chrome/browser/resources/history/history.css
+++ b/chrome/browser/resources/history/history.css
@@ -328,32 +328,13 @@ html[dir='rtl'] .site-domain {
   background-position-x: right;
 }
 
-.no-checkboxes .entry .time {
-  min-width: 73px;
-}
-
 .entry .time {
   color: rgb(151, 156, 160);
-  min-width: 60px;
+  max-width: 90px;
+  min-width: -webkit-min-content;
   overflow: hidden;
-  text-align: right;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 60px;
-}
-
-html[dir='rtl'] .entry .time {
-  text-align: left;
-}
-
-.search-results .time,
-.month-results .time {
-  min-width: 85px;
-}
-
-.no-checkboxes.search-results .time,
-.no-checkboxes.month-results .time {
-  min-width: 90px;
 }
 
 .entry input[type='checkbox'] {
diff --git a/chrome/browser/resources/history/history.js b/chrome/browser/resources/history/history.js
index 4dd7ed2..5597dc0 100644
--- a/chrome/browser/resources/history/history.js
+++ b/chrome/browser/resources/history/history.js
@@ -1313,6 +1313,10 @@ HistoryView.prototype.displayResults_ = function(doneLoading) {
 
     // Add all the days and their visits to the page.
     this.resultDiv_.appendChild(resultsFragment);
+
+    // After the results have been added to the DOM, determine the size of the
+    // time column.
+    this.setTimeColumnWidth_(this.resultDiv_);
   }
 };
 
@@ -1347,6 +1351,30 @@ HistoryView.prototype.updateClearBrowsingDataButton_ = function() {
       (document.activeElement === $('search-field'));
 };
 
+/**
+ * Dynamically sets the min-width of the time column for history entries.
+ * This ensures that all entry times will have the same width, without
+ * imposing a fixed width that may not be appropriate for some locales.
+ * @private
+ */
+HistoryView.prototype.setTimeColumnWidth_ = function() {
+  // Find the maximum width of all the time elements on the page.
+  var times = this.resultDiv_.querySelectorAll('.entry .time');
+  var widths = Array.prototype.map.call(times, function(el) {
+    return el.clientWidth;
+  });
+  var maxWidth = widths.length ? Math.max.apply(null, widths) : 0;
+
+  // Add a dynamic stylesheet to the page (or replace the existing one), to
+  // ensure that all entry times have the same width.
+  var styleEl = $('timeColumnStyle');
+  if (!styleEl) {
+    styleEl = document.head.appendChild(document.createElement('style'));
+    styleEl.id = 'timeColumnStyle';
+  }
+  styleEl.textContent = '.entry .time { min-width: ' + maxWidth + 'px; }';
+};
+
 ///////////////////////////////////////////////////////////////////////////////
 // State object:
 /**
diff --git a/chrome/test/data/webui/history_browsertest.js b/chrome/test/data/webui/history_browsertest.js
index d9ee185..1e22f8b 100644
--- a/chrome/test/data/webui/history_browsertest.js
+++ b/chrome/test/data/webui/history_browsertest.js
@@ -347,6 +347,18 @@ HistoryWebUITest.prototype = {
   }
 };
 
+/**
+ * Examines the time column of every entry on the page, and ensure that they
+ * are all the same width.
+ */
+function ensureTimeWidthsEqual() {
+  var times = document.querySelectorAll('.entry .time');
+  var timeWidth = times[0].clientWidth;
+  for (var i = 1; i < times.length; ++i) {
+    assertEquals(timeWidth, times[i].clientWidth);
+  }
+}
+
 TEST_F('HistoryWebUIFakeBackendTest', 'emptyHistory', function() {
   expectTrue($('newest-button').hidden);
   expectTrue($('newer-button').hidden);
@@ -403,6 +415,8 @@ TEST_F('HistoryWebUITest', 'basicTest', function() {
   expectTrue($('newer-button').hidden);
   expectFalse($('older-button').hidden);
 
+  ensureTimeWidthsEqual();
+
   // Go to the next page.
   $('older-button').click();
   waitForCallback('historyResult', function() {
@@ -426,6 +440,8 @@ TEST_F('HistoryWebUITest', 'basicTest', function() {
     expectFalse($('newer-button').hidden);
     expectTrue($('older-button').hidden);
 
+    ensureTimeWidthsEqual();
+
     // Go back to the first page, and check that the same day headers are there.
     $('newest-button').click();
     var newDayHeaders = document.querySelectorAll('.day');
@@ -686,6 +702,8 @@ TEST_F('RangeHistoryWebUITest', 'weekViewGrouped', function() {
     for (var i = 0; i < dayResults.length; i++)
       checkGroupedVisits(dayResults[i]);
 
+    ensureTimeWidthsEqual();
+
     testDone();
   });
 });
@@ -699,6 +717,7 @@ TEST_F('RangeHistoryWebUITest', 'monthViewGrouped', function() {
     assertEquals(1, monthResults.length);
 
     checkGroupedVisits(monthResults[0]);
+    ensureTimeWidthsEqual();
 
     testDone();
   });