Deselect elements and cancel drag if initiated in files list padding

Deselect elements and cancel a touchscreen drag if the drag is initiated
in the files list padding area, below the list.

Bug: 760552
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I163ebe6c16f7295af3feb25c56a9abfd99d483fc
Reviewed-on: https://chromium-review.googlesource.com/923619Reviewed-by: Naoki Fukino <fukino@chromium.org>
Commit-Queue: Sasha Morrissey <sashab@chromium.org>
Cr-Commit-Position: refs/heads/master@{#537743}

ui/file_manager/file_manager/foreground/js/file_transfer_controller.js

@@ -994,12 +994,19 @@ FileTransferController.prototype.onDragStart_ = function(list, event) {
     return;
   }
 
-  // Check if a drag selection should be initiated or not.
-  if (list.shouldStartDragSelection(event)) {
+  // If this drag operation is initiated by mouse, check if we should start
+  // selecting area.
+  if (!this.touching_ && list.shouldStartDragSelection(event)) {
     event.preventDefault();
-    // If this drag operation is initiated by mouse, start selecting area.
-    if (!this.touching_)
-      this.dragSelector_.startDragSelection(list, event);
+    this.dragSelector_.startDragSelection(list, event);
+    return;
+  }
+
+  // If the drag starts outside the files list on a touch device, cancel the
+  // drag.
+  if (this.touching_ && !list.hasDragHitElement(event)) {
+    event.preventDefault();
+    list.selectionModel_.unselectAll();
     return;
   }
 

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

@@ -555,12 +555,12 @@ FileGrid.prototype.decorateThumbnail_ = function(li, entry) {
 
   var isDirectory = entry && entry.isDirectory;
   if (!isDirectory) {
-    var active_checkmark = li.ownerDocument.createElement('div');
-    active_checkmark.className = 'checkmark active';
-    frame.appendChild(active_checkmark);
-    var inactive_checkmark = li.ownerDocument.createElement('div');
-    inactive_checkmark.className = 'checkmark inactive';
-    frame.appendChild(inactive_checkmark);
+    var activeCheckmark = li.ownerDocument.createElement('div');
+    activeCheckmark.className = 'checkmark active';
+    frame.appendChild(activeCheckmark);
+    var inactiveCheckmark = li.ownerDocument.createElement('div');
+    inactiveCheckmark.className = 'checkmark inactive';
+    frame.appendChild(inactiveCheckmark);
   }
 
   var badge = li.ownerDocument.createElement('div');
@@ -813,6 +813,18 @@ FileGrid.Item.prototype.decorate = function() {
   this.setAttribute('role', 'option');
 };
 
+/**
+ * Returns whether the drag event is inside a file entry in the list (and not
+ * the background padding area).
+ * @param {MouseEvent} event Drag start event.
+ * @return {boolean} True if the mouse is over an element in the list, False if
+ *                   it is in the background.
+ */
+FileGrid.prototype.hasDragHitElement = function(event) {
+  var pos = DragSelector.getScrolledPosition(this, event);
+  return this.getHitElements(pos.x, pos.y).length !== 0;
+};
+
 /**
  * Obtains if the drag selection should be start or not by referring the mouse
  * event.
@@ -820,8 +832,8 @@ FileGrid.Item.prototype.decorate = function() {
  * @return {boolean} True if the mouse is hit to the background of the list.
  */
 FileGrid.prototype.shouldStartDragSelection = function(event) {
-  var pos = DragSelector.getScrolledPosition(this, event);
-  return this.getHitElements(pos.x, pos.y).length === 0;
+  // Start dragging area if the drag starts outside of the contents of the grid.
+  return !this.hasDragHitElement(event);
 };
 
 /**

ui/file_manager/file_manager/foreground/js/ui/file_table.js

@@ -463,6 +463,7 @@ FileTable.decorate = function(
   }.bind(self), true);
   self.list.shouldStartDragSelection =
       self.shouldStartDragSelection_.bind(self);
+  self.list.hasDragHitElement = self.hasDragHitElement_.bind(self);
 
   /**
    * Obtains the index list of elements that are hit by the point or the
@@ -634,23 +635,37 @@ FileTable.prototype.setUseModificationByMeTime = function(
   this.useModificationByMeTime_ = useModificationByMeTime;
 };
 
+/**
+ * Returns whether the drag event is inside a file entry in the list (and not
+ * the background padding area).
+ * @param {MouseEvent} event Drag start event.
+ * @return {boolean} True if the mouse is over an element in the list, False if
+ *                   it is in the background.
+ */
+FileTable.prototype.hasDragHitElement_ = function(event) {
+  var pos = DragSelector.getScrolledPosition(this.list, event);
+  return this.list.getHitElements(pos.x, pos.y).length !== 0;
+};
+
 /**
  * Obtains if the drag selection should be start or not by referring the mouse
  * event.
  * @param {MouseEvent} event Drag start event.
- * @return {boolean} True if the mouse is hit to the background of the list.
+ * @return {boolean} True if the mouse is hit to the background of the list, or
+ *                   certain areas of the inside of the list that would start a
+ *                   drag selection.
  * @private
  */
 FileTable.prototype.shouldStartDragSelection_ = function(event) {
   // If the shift key is pressed, it should starts drag selection.
   if (event.shiftKey)
     return true;
-  // We don't support drag selection by touch.
-  if (event.sourceCapabilities && event.sourceCapabilities.firesTouchEvents)
-    return false;
+
+  // If we're outside of the element list, start the drag selection.
+  if (!this.list.hasDragHitElement(event))
+    return true;
 
   // If the position values are negative, it points the out of list.
-  // It should start the drag selection.
   var pos = DragSelector.getScrolledPosition(this.list, event);
   if (!pos)
     return false;