DOMUI Prefs: Fix the way recent page rows are sized and truncated.

This fixes truncation in general, and make rtl work much better.

BUG=70021
TEST=Startup page addition dialog should truncate with ellipsis, and look right in RTL mode.

Review URL: http://codereview.chromium.org/6361005

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

2 files changed, 23 insertions, 7 deletions

diff --git a/chrome/browser/resources/options/add_startup_page_overlay.css b/chrome/browser/resources/options/add_startup_page_overlay.css
index 7929ba1..392a60d 100644
--- a/chrome/browser/resources/options/add_startup_page_overlay.css
+++ b/chrome/browser/resources/options/add_startup_page_overlay.css
@@ -23,15 +23,27 @@
   height: 320px;
 }
 
-#addStartupRecentPageList .url {
-  display: none;
+#addStartupRecentPageList .vertical-center {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  white-space: nowrap;
   color: hsl(0, 0%, 70%);
+}
+
+#addStartupRecentPageList .title {
+  box-sizing: border-box;
+  color: black;
+  display: inline-block;
+  max-width: 100%;
+}
+
+#addStartupRecentPageList .url {
   -webkit-padding-start: 3ex;
 }
 
-#addStartupRecentPageList > :hover > .url,
-#addStartupRecentPageList > [selected] > .url {
-  display: inline;
+#addStartupRecentPageList > :not(:hover):not([selected]) > .url,
+  display: none;
 }
 
 #addStartupPageOverlay .action-area {
diff --git a/chrome/browser/resources/options/add_startup_page_recent_pages_list.js b/chrome/browser/resources/options/add_startup_page_recent_pages_list.js
index ff080f6..95be30c 100644
--- a/chrome/browser/resources/options/add_startup_page_recent_pages_list.js
+++ b/chrome/browser/resources/options/add_startup_page_recent_pages_list.js
@@ -35,19 +35,23 @@ cr.define('options.add_startup_page', function() {
     decorate: function() {
       ListItem.prototype.decorate.call(this);
 
+      var wrapperEl = this.ownerDocument.createElement('div');
+      wrapperEl.className = 'vertical-center';
+      this.appendChild(wrapperEl);
+
       var titleEl = this.ownerDocument.createElement('span');
       titleEl.className = 'title';
       titleEl.classList.add('favicon-cell');
       titleEl.style.backgroundImage = url('chrome://favicon/' +
                                           this.pageInfo['url']);
-      this.appendChild(titleEl);
+      wrapperEl.appendChild(titleEl);
       if (this.pageInfo['title'].length > 0) {
         titleEl.textContent = this.pageInfo['title'];
 
         var urlEL = this.ownerDocument.createElement('span');
         urlEL.className = 'url';
         urlEL.textContent = this.pageInfo['displayURL'];
-        this.appendChild(urlEL);
+        wrapperEl.appendChild(urlEL);
       } else {
         titleEl.textContent = this.pageInfo['displayURL'];
       }