Local NTP: resize the fakebox and most visited widths with JS. Use innerWidth instead of clientWidth to take scrollbar width into account.

BUG=240510

Review URL: https://chromiumcodereview.appspot.com/15129004

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

2 files changed, 32 insertions, 8 deletions

diff --git a/chrome/browser/resources/local_ntp/local_ntp.css b/chrome/browser/resources/local_ntp/local_ntp.css
index b71f23b..1aa3806 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.css
+++ b/chrome/browser/resources/local_ntp/local_ntp.css
@@ -97,7 +97,9 @@ body.custom-theme #logo {
   font-size: 18px;
   height: 36px;
   max-width: 620px;
-  width: 300px;
+  /* #fakebox width (here and below) should be 2px less than #mv-tiles
+     to account for its border. */
+  width: 298px;
 }
 
 #fakebox:hover {
@@ -178,17 +180,21 @@ body.fakebox-focused #cursor {
 }
 
 @media only screen and (min-width:660px) {
-  #fakebox,
-  #mv-tiles {
+  #fakebox {
     width: 458px;
   }
+  #mv-tiles {
+    width: 460px;
+  }
 }
 
 @media only screen and (min-width:820px) {
-  #fakebox,
-  #mv-tiles {
+  #fakebox {
     width: 618px;
   }
+  #mv-tiles {
+    width: 620px;
+  }
 }
 
 .mv-row {
diff --git a/chrome/browser/resources/local_ntp/local_ntp.js b/chrome/browser/resources/local_ntp/local_ntp.js
index 9c7d851..848e7f6 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.js
+++ b/chrome/browser/resources/local_ntp/local_ntp.js
@@ -568,14 +568,32 @@ function onRestoreAll() {
 
 
 /**
- * Re-renders the tiles if the number of columns has changed.
+ * Re-renders the tiles if the number of columns has changed.  As a temporary
+ * fix for crbug/240510, updates the width of the fakebox and most visited tiles
+ * container.
  */
 function onResize() {
+  var innerWidth = window.innerWidth;
+
+  // These values should remain in sync with local_ntp.css.
+  // TODO(jeremycho): Delete once the root cause of crbug/240510 is resolved.
+  var setWidths = function(tilesContainerWidth) {
+    tilesContainer.style.width = tilesContainerWidth + 'px';
+    if (fakebox)
+      fakebox.style.width = (tilesContainerWidth - 2) + 'px';
+  };
+  if (innerWidth >= 820 || innerWidth == 0)
+    setWidths(620);
+  else if (innerWidth >= 660)
+    setWidths(460);
+  else
+    setWidths(300);
+
   var tileRequiredWidth = TILE_WIDTH + TILE_MARGIN_START;
   // Adds margin-start to the available width to compensate the extra margin
   // counted above for the first tile (which does not have a margin-start).
-  var availableWidth = document.documentElement.clientWidth +
-      TILE_MARGIN_START - MIN_TOTAL_HORIZONTAL_PADDING;
+  var availableWidth = innerWidth + TILE_MARGIN_START -
+      MIN_TOTAL_HORIZONTAL_PADDING;
   var numColumnsToShow = Math.floor(availableWidth / tileRequiredWidth);
   numColumnsToShow = Math.max(MIN_NUM_COLUMNS,
                               Math.min(MAX_NUM_COLUMNS, numColumnsToShow));