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;
   }
 }