cr.ui.Grid: Consider padding to determine the number of columns in a row.

padding-left and padding-right should be subtracted from clientWidth to measure
the available width for grid items.

BUG=453764
TEST=adjust window width of Files.app and check that the problem doesn't occur.

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

Cr-Commit-Position: refs/heads/master@{#317169}

chrome/test/data/webui/grid_test.html

@@ -26,6 +26,7 @@ function testGetColumnCount() {
   assertEquals(0, columns);
 
   g.dataModel_ = new cr.ui.ArrayDataModel([0, 1, 2]);
+  g.horizontalPadding_ = 0;
   g.clientWidthWithoutScrollbar_ = 8;
   columns = g.getColumnCount_();
   // Client width is smaller than item width.
@@ -66,6 +67,18 @@ function testGetColumnCount() {
   columns = g.getColumnCount_();
   // Can not fit two columns due to margin on left and right side.
   assertEquals(1, columns);
+
+  g.measured_.marginRight = 0;
+  g.horizontalPadding_ = 2;
+  g.clientWidthWithoutScrollbar_ = 22;
+  columns = g.getColumnCount_();
+  // Can fit two columns as (22-2=)20px width is avaiable for grid items.
+  assertEquals(2, columns);
+
+  g.horizontalPadding_ = 3;
+  columns = g.getColumnCount_();
+  // Can not fit two columns due to bigger horizontal padding.
+  assertEquals(1, columns);
 }
 
 </script>

ui/webui/resources/js/cr/ui/grid.js

@@ -106,15 +106,22 @@ cr.define('cr.ui', function() {
       if (!itemCount)
         return 0;
 
-      var columns = Math.floor(this.clientWidthWithoutScrollbar_ / width);
+      var columns = Math.floor(
+          (this.clientWidthWithoutScrollbar_ - this.horizontalPadding_) /
+          width);
       if (!columns)
         return 0;
 
       var rows = Math.ceil(itemCount / columns);
-      if (rows * height <= this.clientHeight_)
+      if (rows * height <= this.clientHeight_) {
+        // Content fits within the client area (no scrollbar required).
         return columns;
+      }
 
-      return Math.floor(this.clientWidthWithScrollbar_ / width);
+      // If the content doesn't fit within the client area, the number of
+      // columns should be calculated with consideration for scrollbar's width.
+      return Math.floor(
+          (this.clientWidthWithScrollbar_ - this.horizontalPadding_) / width);
     },
 
     /**
@@ -125,10 +132,14 @@ cr.define('cr.ui', function() {
       // Check changings that may affect number of columns.
       var offsetWidth = this.offsetWidth;
       var offsetHeight = this.offsetHeight;
-      var overflowY = window.getComputedStyle(this).overflowY;
+      var style = window.getComputedStyle(this);
+      var overflowY = style.overflowY;
+      var horizontalPadding =
+          parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
 
       if (this.lastOffsetWidth_ == offsetWidth &&
-          this.lastOverflowY == overflowY) {
+          this.lastOverflowY == overflowY &&
+          this.horizontalPadding_ == horizontalPadding) {
         this.lastOffsetHeight_ = offsetHeight;
         return;
       }
@@ -136,6 +147,7 @@ cr.define('cr.ui', function() {
       this.lastOffsetWidth_ = offsetWidth;
       this.lastOffsetHeight_ = offsetHeight;
       this.lastOverflowY = overflowY;
+      this.horizontalPadding_ = horizontalPadding;
       this.columns_ = 0;
 
       if (overflowY == 'auto' && offsetWidth > 0) {