Files.app: Calculate the hit elements on drag-selection correctly.

- Specified vertical-align:top, because inline blocks with vertical-align:baseline could insert unexpected vertical spacing for each lines.
- Consider the padding of the grid in getHitElements().

BUG=463042
TEST=manual test

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

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

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -976,11 +976,11 @@ html[dir='rtl'] .breadcrumbs .separator {
   /* On the right side, we have less margin to pack items as long as they are
      fully visible. */
   -webkit-padding-end: 2px;
-  -webkit-padding-start: 7px;
+  -webkit-padding-start: 4px;
   box-sizing: border-box;
   overflow-y: auto;
-  padding-bottom: 7px;
-  padding-top: 7px;
+  padding-bottom: 16px;
+  padding-top: 4px;
   width: 100%;
 }
 
@@ -1024,10 +1024,11 @@ body[type='full-page'] .detail-name .detail-icon {
   border-radius: 2px;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
   height: 180px;
-  margin-top: 8px;
+  margin-top: 12px;
   overflow: hidden;
   position: relative;
   transition: box-shadow 220ms ease;
+  vertical-align: top;  /* Prevent vertical spacing for wrapped inline box. */
   width: 180px;
 }
 

ui/file_manager/file_manager/foreground/js/ui/file_grid.js

@@ -72,6 +72,12 @@ FileGrid.decorate = function(
 
   self.relayoutRateLimiter_ =
       new AsyncUtil.RateLimiter(self.relayoutImmediately_.bind(self));
+
+  var style = window.getComputedStyle(self);
+  /** @private {number} */
+  self.paddingLeft_ = parseFloat(style.paddingLeft);
+  /** @private {number} */
+  self.paddingTop_ = parseFloat(style.paddingTop);
 };
 
 /**
@@ -434,17 +440,22 @@ FileGrid.prototype.getHitIndex_ = function(coordinate, step, threshold) {
  */
 FileGrid.prototype.getHitElements = function(x, y, opt_width, opt_height) {
   var currentSelection = [];
-  var right = x + (opt_width || 0);
-  var bottom = y + (opt_height || 0);
+  var xInAvailableSpace = Math.max(0, x - this.paddingLeft_);
+  var yInAvailableSpace = Math.max(0, y - this.paddingTop_);
+  var right = xInAvailableSpace + (opt_width || 0);
+  var bottom = yInAvailableSpace + (opt_height || 0);
   var itemMetrics = this.measureItem();
   var horizontalStartIndex = this.getHitIndex_(
-      x, itemMetrics.width, itemMetrics.width - itemMetrics.marginRight);
+      xInAvailableSpace, itemMetrics.width,
+      itemMetrics.width - itemMetrics.marginRight);
   var horizontalEndIndex = Math.min(this.columns, this.getHitIndex_(
       right, itemMetrics.width, itemMetrics.marginLeft));
   var verticalStartIndex = this.getHitIndex_(
-      y, itemMetrics.height, itemMetrics.height - itemMetrics.marginBottom);
+      yInAvailableSpace, itemMetrics.height,
+      itemMetrics.height - itemMetrics.marginBottom);
   var verticalEndIndex = this.getHitIndex_(
       bottom, itemMetrics.height, itemMetrics.marginTop);
+
   for (var verticalIndex = verticalStartIndex;
        verticalIndex < verticalEndIndex;
        verticalIndex++) {