Bookmark manager: Fix issue with mouse events on the scrollbar as well as clicking on empty areas with keyboard modifiers.

In case where a mouse event originates on the scrollbar we exit early.

On Window, if the user clicks on an empty area and holds down a key modifier we should do nothing.
On Mac, we always clear the selection when clicking on an empty area, no matter if any keys are pressed.

BUG=42371
TEST=Select some items in the list. Scrolling the list using the mouse and scrollbar should not change the selection.
     Shift and/or ctrl clicking on an empty area should clear selection on mac and do nothing on windows.


Review URL: http://codereview.chromium.org/1694013

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

2 files changed, 34 insertions, 21 deletions

diff --git a/chrome/browser/resources/bookmark_manager/js/cr/ui/list.js b/chrome/browser/resources/bookmark_manager/js/cr/ui/list.js
index 47be0cb..f221279 100644
--- a/chrome/browser/resources/bookmark_manager/js/cr/ui/list.js
+++ b/chrome/browser/resources/bookmark_manager/js/cr/ui/list.js
@@ -12,6 +12,23 @@ cr.define('cr.ui', function() {
   const ListSelectionModel = cr.ui.ListSelectionModel;
 
   /**
+   * Whether a mouse event is inside the element viewport. This will return
+   * false if the mouseevent was generated over a border or a scrollbar.
+   * @param {!HTMLElement} el The element to test the event with.
+   * @param {!Event} e The mouse event.
+   * @param {boolean} Whether the mouse event was inside the viewport.
+   */
+  function inViewport(el, e) {
+    var rect = el.getBoundingClientRect();
+    var x = e.clientX;
+    var y = e.clientY;
+    return x >= rect.left + el.clientLeft &&
+           x < rect.left + el.clientLeft + el.clientWidth &&
+           y >= rect.top + el.clientTop &&
+           y < rect.top + el.clientTop + el.clientHeight;
+  }
+
+  /**
    * Creates a new list element.
    * @param {Object=} opt_propertyBag Optional properties.
    * @constructor
@@ -168,29 +185,18 @@ cr.define('cr.ui', function() {
      */
     handleMouseDownUp_: function(e) {
       var target = e.target;
-      while (target && target.parentNode != this) {
-        target = target.parentNode;
-      }
-      this.selectionModel.handleMouseDownUp(e, target);
-    },
 
-    /**
-     * Callback for mousedown events.
-     * @param {Event} e The mouse event object.
-     * @private
-     */
-    handleMouseUp_: function(e) {
-      var target = e.target;
+      // If the target was this element we need to make sure that the user did
+      // not click on a border or a scrollbar.
+      if (target == this && !inViewport(target, e))
+        return;
+
       while (target && target.parentNode != this) {
         target = target.parentNode;
       }
-      if (target) {
-        this.selectionModel.handleMouseDown(e, target);
-      } else {
-        this.selectionModel.clear();
-      }
-    },
 
+      this.selectionModel.handleMouseDownUp(e, target);
+    },
 
     /**
      * Handle a keydown event.
diff --git a/chrome/browser/resources/bookmark_manager/js/cr/ui/listselectionmodel.js b/chrome/browser/resources/bookmark_manager/js/cr/ui/listselectionmodel.js
index f4a3d43..ef9bce8 100644
--- a/chrome/browser/resources/bookmark_manager/js/cr/ui/listselectionmodel.js
+++ b/chrome/browser/resources/bookmark_manager/js/cr/ui/listselectionmodel.js
@@ -106,13 +106,20 @@ cr.define('cr.ui', function() {
      */
     handleMouseDownUp: function(e, item) {
       var anchorItem = this.anchorItem;
+      var isDown = e.type == 'mousedown';
 
       this.beginChange_();
 
-      if (!item && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
-        this.clear();
+      if (!item) {
+        // On Mac we always clear the selection if the user clicks a blank area.
+        // On Windows, we only clear the selection if neither Shift nor Ctrl are
+        // pressed.
+        if (cr.isMac) {
+          this.clear();
+        } else if (!isDown && !e.shiftKey && !e.ctrlKey)
+          // Keep anchor and lead items.
+          this.clearAllSelected_();
       } else {
-        var isDown = e.type == 'mousedown';
         if (cr.isMac ? e.metaKey : e.ctrlKey) {
           // Selection is handled at mouseUp on windows/linux, mouseDown on mac.
           if (cr.isMac? isDown : !isDown) {