Fix issues with right border of the lower section as well as some CSS

tweaks for the list view mode.

This also fixes an issue where the thumbnails were not positioned
correctly at startup in RTL

BUG=17810, 17811, 17751

TEST=Hide the recent activities and make sure that the right border of
even more is shown. Switch to list mode. Make sure that the filler are
hidden. Try dragging the items in the list view. The text should not
dissappear.

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

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

2 files changed, 48 insertions, 18 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index dc4df87..37ddbee 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -85,6 +85,10 @@ html[anim='false'] *,
   border: 3px solid hsl(213, 60%, 92%);
 }
 
+.list > .filler * {
+  visibility: hidden !important;
+}
+
 .filler .thumbnail {
   visibility: inherit;
   border: 1px solid white;
@@ -264,12 +268,13 @@ html[dir=rtl] .thumbnail-container > .title > div {
   -webkit-box-shadow: 0px 2px 2px hsla(0, 0%, 0%, .5);
 }
 
-.dragging {
-  -webkit-transition: none;
+.dragging,
+.dragging * {
+  -webkit-transition: none !important;
 }
 
 .dragging > .title {
-  opacity: 0 !important;
+  opacity: 0;
 }
 
 .list > .dragging > .title {
@@ -505,8 +510,6 @@ html[dir='rtl'] .item {
 }
 
 .section {
-  -webkit-box-flex: 1;
-  width: 50%;
   display: inline-block;
 }
 
@@ -650,19 +653,27 @@ html[dir='rtl'] #option-menu {
 }
 
 /* Hard code thumbnail positions to improve initial layout speed */
-#t0, #t4 {
+#t0, #t4,
+html[dir='rtl'] #t3,
+html[dir='rtl'] #t7 {
   left: 0;
 }
 
-#t1, #t5 {
+#t1, #t5,
+html[dir='rtl'] #t2,
+html[dir='rtl'] #t6 {
   left: 235px;
 }
 
-#t2, #t6 {
+#t2, #t6,
+html[dir='rtl'] #t1,
+html[dir='rtl'] #t5 {
   left: 470px;
 }
 
-#t3, #t7 {
+#t3, #t7,
+html[dir='rtl'] #t0,
+html[dir='rtl'] #t4 {
   left: 705px;
 }
 
@@ -704,19 +715,27 @@ html[dir='rtl'] #option-menu {
     width: 336px; /* Same here, see above */
   }
 
-  #t0, #t4 {
+  #t0, #t4,
+  html[dir='rtl'] #t3,
+  html[dir='rtl'] #t7 {
     left: 0;
   }
 
-  #t1, #t5 {
+  #t1, #t5,
+  html[dir='rtl'] #t2,
+  html[dir='rtl'] #t6 {
     left: 178px;
   }
 
-  #t2, #t6 {
+  #t2, #t6,
+  html[dir='rtl'] #t1,
+  html[dir='rtl'] #t5 {
     left: 356px;
   }
 
-  #t3, #t7 {
+  #t3, #t7,
+  html[dir='rtl'] #t0,
+  html[dir='rtl'] #t4 {
     left: 534px;
   }
 
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 111f8e8..a275898 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -217,6 +217,10 @@ function getThumbnailClassName(data) {
       (data.filler ? ' filler' : '');
 }
 
+function url(s) {
+  return 'url("' + encodeURI(s) + '")';
+}
+
 function renderMostVisited(data) {
   var parent = $('most-visited');
   var children = parent.children;
@@ -245,12 +249,14 @@ function renderMostVisited(data) {
     // There was some concern that a malformed malicious URL could cause an XSS
     // attack but setting style.backgroundImage = 'url(javascript:...)' does
     // not execute the JavaScript in WebKit.
+
+    var thumbnailUrl = d.thumbnailUrl || 'chrome://thumb/' + d.url;
     t.querySelector('.thumbnail-wrapper').style.backgroundImage =
-        'url("' + (d.thumbnailUrl || 'chrome://thumb/' + d.url) + '")';
+        url(thumbnailUrl);
     var titleDiv = t.querySelector('.title > div');
     titleDiv.xtitle = titleDiv.textContent = d.title;
-    titleDiv.style.backgroundImage = 'url("' +
-        (d.faviconUrl || 'chrome://favicon/' + d.url) + '")';
+    var faviconUrl = d.faviconUrl || 'chrome://favicon/' + d.url;
+    titleDiv.style.backgroundImage = encodeURI(url);
     titleDiv.dir = d.direction;
   }
 }
@@ -696,21 +702,26 @@ function layoutLowerSections() {
     lowerSectionsElement.style.height = lowerSectionsElement.style.opacity = 0;
   }
 
+  // Even when the width is set to 0 it will take up 2px due to the border. We
+  // compensate by setting the margin to -2px.
   if (recentShown && tipsShown) {
     var w = (totalWidth - spacing) / 2;
     recentElement.style.width = tipsElement.style.width = w + 'px'
-    recentElement.style.opacity = tipsElement.style.opacity = '';
+    recentElement.style.opacity = tipsElement.style.opacity =
+        recentElement.style.WebkitMarginStart = '';
     spacer.style.width = spacing + 'px';
   } else if (recentShown) {
     recentElement.style.width = totalWidth + 'px';
-    recentElement.style.opacity = '';
+    recentElement.style.opacity = recentElement.style.WebkitMarginStart = '';
     tipsElement.style.width =
         tipsElement.style.opacity = 0;
     spacer.style.width = 0;
+
   } else if (tipsShown) {
     tipsElement.style.width = totalWidth + 'px';
     tipsElement.style.opacity = '';
     recentElement.style.width = recentElement.style.opacity = 0;
+    recentElement.style.WebkitMarginStart = '-2px';
     spacer.style.width = 0;
   }
 }