diff options
11 files changed, 80 insertions, 23 deletions
diff --git a/chrome/browser/resources/bookmark_manager/main.html b/chrome/browser/resources/bookmark_manager/main.html index 95787f7..b4b9e65 100644 --- a/chrome/browser/resources/bookmark_manager/main.html +++ b/chrome/browser/resources/bookmark_manager/main.html @@ -25,6 +25,7 @@ found in the LICENSE file. <script src="chrome://resources/js/cr/link_controller.js"></script> <script src="chrome://resources/js/cr/promise.js"></script> <script src="chrome://resources/js/cr/ui.js"></script> +<script src="chrome://resources/js/cr/ui/touch_handler.js"></script> <script src="chrome://resources/js/cr/ui/array_data_model.js"></script> <script src="chrome://resources/js/cr/ui/command.js"></script> <script src="chrome://resources/js/cr/ui/menu_item.js"></script> diff --git a/chrome/browser/resources/chromeos/login/login.html b/chrome/browser/resources/chromeos/login/login.html index 37b836e..d3b2c3f 100644 --- a/chrome/browser/resources/chromeos/login/login.html +++ b/chrome/browser/resources/chromeos/login/login.html @@ -16,8 +16,10 @@ <link rel="stylesheet" href="screen_error_message.css"> <link rel="stylesheet" href="user_pod_row.css"> <script src="chrome://resources/js/cr.js"></script> +<script src="chrome://resources/js/event_tracker.js"></script> <script src="chrome://resources/js/cr/event_target.js"></script> <script src="chrome://resources/js/cr/ui.js"></script> +<script src="chrome://resources/js/cr/ui/touch_handler.js"></script> <script src="chrome://resources/js/cr/ui/array_data_model.js"></script> <script src="chrome://resources/js/cr/ui/dialogs.js"></script> <script src="chrome://resources/js/cr/ui/list_selection_controller.js"></script> diff --git a/chrome/browser/resources/chromeos/login/oobe.html b/chrome/browser/resources/chromeos/login/oobe.html index c789ba5..d113457 100644 --- a/chrome/browser/resources/chromeos/login/oobe.html +++ b/chrome/browser/resources/chromeos/login/oobe.html @@ -17,8 +17,10 @@ <link rel="stylesheet" href="screen_error_message.css"> <link rel="stylesheet" href="user_pod_row.css"> <script src="chrome://resources/js/cr.js"></script> +<script src="chrome://resources/js/event_tracker.js"></script> <script src="chrome://resources/js/cr/event_target.js"></script> <script src="chrome://resources/js/cr/ui.js"></script> +<script src="chrome://resources/js/cr/ui/touch_handler.js"></script> <script src="chrome://resources/js/cr/ui/array_data_model.js"></script> <script src="chrome://resources/js/cr/ui/dialogs.js"></script> <script src="chrome://resources/js/cr/ui/list_selection_controller.js"></script> diff --git a/chrome/browser/resources/chromeos/proxy_settings.html b/chrome/browser/resources/chromeos/proxy_settings.html index 97fa8ee..0bbf345 100644 --- a/chrome/browser/resources/chromeos/proxy_settings.html +++ b/chrome/browser/resources/chromeos/proxy_settings.html @@ -9,8 +9,10 @@ <link rel="stylesheet" href="../options2/chromeos/internet_detail.css"> <link rel="stylesheet" href="proxy_settings.css"> <script src="chrome://resources/js/cr.js"></script> +<script src="chrome://resources/js/event_tracker.js"></script> <script src="chrome://resources/js/cr/event_target.js"></script> <script src="chrome://resources/js/cr/ui.js"></script> +<script src="chrome://resources/js/cr/ui/touch_handler.js"></script> <script src="chrome://resources/js/cr/ui/array_data_model.js"></script> <script src="chrome://resources/js/cr/ui/list_selection_model.js"></script> <script src="chrome://resources/js/cr/ui/list_selection_controller.js"></script> diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js index 91dfb4c..f31f11e 100644 --- a/chrome/browser/resources/file_manager/js/file_manager.js +++ b/chrome/browser/resources/file_manager/js/file_manager.js @@ -1332,9 +1332,13 @@ FileManager.prototype = { FileManager.prototype.initGrid_ = function() { var self = this; this.grid_.itemConstructor = GridItem.bind(null, this); - + // TODO(bshe): should override cr.ui.List's activateItemAtIndex function + // rather than listen explicitly for double click or tap events. + this.grid_.addEventListener( + 'dblclick', this.onDetailDoubleClickOrTap_.bind(this)); this.grid_.addEventListener( - 'dblclick', this.onDetailDoubleClick_.bind(this)); + cr.ui.TouchHandler.EventType.TAP, + this.onDetailDoubleClickOrTap_.bind(this)); cr.ui.contextMenuHandler.setContextMenu(this.grid_, this.fileContextMenu_); this.grid_.addEventListener('mousedown', this.onGridOrTableMouseDown_.bind(this)); @@ -1387,9 +1391,14 @@ FileManager.prototype = { this.gdataColumnModel_ = null; } + // TODO(bshe): should override cr.ui.List's activateItemAtIndex function + // rather than listen explicitly for double click or tap events. // Don't pay attention to double clicks on the table header. - this.table_.querySelector('.list').addEventListener( - 'dblclick', this.onDetailDoubleClick_.bind(this)); + this.table_.list.addEventListener( + 'dblclick', this.onDetailDoubleClickOrTap_.bind(this)); + this.table_.list.addEventListener( + cr.ui.TouchHandler.EventType.TAP, + this.onDetailDoubleClickOrTap_.bind(this)); cr.ui.contextMenuHandler.setContextMenu(this.table_.querySelector('.list'), this.fileContextMenu_); @@ -1871,6 +1880,14 @@ FileManager.prototype = { input.classList.add('file-checkbox'); input.addEventListener('click', this.onCheckboxClick_.bind(this)); + // Since we do not want to open the item when tap on checkbox, we need to + // stop propagation of TAP event dispatched by checkbox ideally. But all + // touch events from touch_handler are dispatched to the list control. So we + // have to stop propagation of native touchstart event to prevent list + // control from generating TAP event here. The synthetic click event will + // select the touched checkbox/item. + input.addEventListener('touchstart', + function(e) { e.stopPropagation() }); if (this.selection && this.selection.entries.indexOf(entry) != -1) { // Our DOM nodes get discarded as soon as we're scrolled out of view, @@ -3658,11 +3675,11 @@ FileManager.prototype = { }; /** - * Handle a double-click event on an entry in the detail list. + * Handle a double-click or tap event on an entry in the detail list. * * @param {Event} event The click event. */ - FileManager.prototype.onDetailDoubleClick_ = function(event) { + FileManager.prototype.onDetailDoubleClickOrTap_ = function(event) { if (this.isRenamingInProgress()) { // Don't pay attention to double clicks during a rename. return; diff --git a/chrome/browser/resources/file_manager/main.html b/chrome/browser/resources/file_manager/main.html index c5b8d8d..0d692a6 100644 --- a/chrome/browser/resources/file_manager/main.html +++ b/chrome/browser/resources/file_manager/main.html @@ -54,12 +54,15 @@ <link rel="stylesheet" href="../shared/css/menu.css"></link> <script src="../shared/js/local_strings.js"></script> + <script src="../shared/js/util.js"></script> <script src="../shared/js/i18n_template.js"></script> + <script src="../shared/js/event_tracker.js"></script> <script src="../shared/js/cr.js"></script> <script src="../shared/js/event_tracker.js"></script> <script src="../shared/js/cr/ui.js"></script> <script src="../shared/js/cr/event_target.js"></script> + <script src="../shared/js/cr/ui/touch_handler.js"></script> <script src="../shared/js/cr/ui/array_data_model.js"></script> <script src="../shared/js/cr/ui/dialogs.js"></script> <script src="../shared/js/cr/ui/list_item.js"></script> diff --git a/chrome/browser/resources/options2/options.html b/chrome/browser/resources/options2/options.html index 648561f..a642edb 100644 --- a/chrome/browser/resources/options2/options.html +++ b/chrome/browser/resources/options2/options.html @@ -55,8 +55,10 @@ <script src="chrome://resources/css/tree.css.js"></script> <script src="chrome://resources/js/cr.js"></script> <script src="chrome://resources/js/cr/command_line.js"></script> +<script src="chrome://resources/js/event_tracker.js"></script> <script src="chrome://resources/js/cr/event_target.js"></script> <script src="chrome://resources/js/cr/ui.js"></script> +<script src="chrome://resources/js/cr/ui/touch_handler.js"></script> <script src="chrome://resources/js/cr/ui/array_data_model.js"></script> <script src="chrome://resources/js/cr/ui/list_selection_model.js"></script> <script src="chrome://resources/js/cr/ui/list_selection_controller.js"></script> diff --git a/chrome/browser/resources/shared/js/cr/ui/list.js b/chrome/browser/resources/shared/js/cr/ui/list.js index 65d8691..b0883ed 100644 --- a/chrome/browser/resources/shared/js/cr/ui/list.js +++ b/chrome/browser/resources/shared/js/cr/ui/list.js @@ -316,15 +316,23 @@ cr.define('cr.ui', function() { var length = this.dataModel ? this.dataModel.length : 0; this.selectionModel = new ListSelectionModel(length); - this.addEventListener('dblclick', this.handleDoubleClick_); - this.addEventListener('mousedown', this.handleMouseDownUp_); - this.addEventListener('mouseup', this.handleMouseDownUp_); + this.addEventListener('dblclick', this.handleDoubleClickOrTap_); + this.addEventListener('mousedown', this.handlePointerDownUp_); + this.addEventListener('mouseup', this.handlePointerDownUp_); this.addEventListener('keydown', this.handleKeyDown); this.addEventListener('focus', this.handleElementFocus_, true); this.addEventListener('blur', this.handleElementBlur_, true); this.addEventListener('scroll', this.handleScroll.bind(this)); this.setAttribute('role', 'listbox'); + this.touchHandler_ = new cr.ui.TouchHandler(this); + this.addEventListener(cr.ui.TouchHandler.EventType.TOUCH_START, + this.handlePointerDownUp_); + this.addEventListener(cr.ui.TouchHandler.EventType.TOUCH_END, + this.handlePointerDownUp_); + this.addEventListener(cr.ui.TouchHandler.EventType.TAP, + this.handleDoubleClickOrTap_); + this.touchHandler_.enable(false, false); // Make list focusable if (!this.hasAttribute('tabindex')) this.tabIndex = 0; @@ -448,29 +456,35 @@ cr.define('cr.ui', function() { }, /** - * Callback for the double click event. - * @param {Event} e The mouse event object. + * Callback for the double click or TAP event. + * @param {Event} e The mouse or TouchHandler event object. * @private */ - handleDoubleClick_: function(e) { + handleDoubleClickOrTap_: function(e) { if (this.disabled) return; - var target = this.getListItemAncestor(e.target); + var target = e.target; + if (e.touchedElement) + target = e.touchedElement; + + target = this.getListItemAncestor(target); if (target) this.activateItemAtIndex(this.getIndexOfListItem(target)); }, /** - * Callback for mousedown and mouseup events. - * @param {Event} e The mouse event object. + * Callback for mousedown, mouseup, TOUCH_START and TOUCH_END events. + * @param {Event} e The mouse or TouchHandler event object. * @private */ - handleMouseDownUp_: function(e) { + handlePointerDownUp_: function(e) { if (this.disabled) return; var target = e.target; + if (e.touchedElement) + target = e.touchedElement; // If the target was this element we need to make sure that the user did // not click on a border or a scrollbar. @@ -480,7 +494,7 @@ cr.define('cr.ui', function() { target = this.getListItemAncestor(target); var index = target ? this.getIndexOfListItem(target) : -1; - this.selectionController_.handleMouseDownUp(e, index); + this.selectionController_.handlePointerDownUp(e, index); }, /** diff --git a/chrome/browser/resources/shared/js/cr/ui/list_selection_controller.js b/chrome/browser/resources/shared/js/cr/ui/list_selection_controller.js index 6aef4a9..7b45629 100644 --- a/chrome/browser/resources/shared/js/cr/ui/list_selection_controller.js +++ b/chrome/browser/resources/shared/js/cr/ui/list_selection_controller.js @@ -111,15 +111,17 @@ cr.define('cr.ui', function() { }, /** - * Called by the view when the user does a mousedown or mouseup on the list. - * @param {!Event} e The browser mousedown event. + * Called by the view when the user does a mousedown, mouseup, TOUCH_START + * and TOUCH_END on the list. + * @param {!Event} e The browser mouse or TouchHandler event. * @param {number} index The index that was under the mouse pointer, -1 if * none. */ - handleMouseDownUp: function(e, index) { + handlePointerDownUp: function(e, index) { var sm = this.selectionModel; var anchorIndex = sm.anchorIndex; - var isDown = e.type == 'mousedown'; + var isDown = (e.type == 'mousedown' || + e.type == cr.ui.TouchHandler.EventType.TOUCH_START); sm.beginChange(); diff --git a/chrome/browser/resources/shared/js/cr/ui/touch_handler.js b/chrome/browser/resources/shared/js/cr/ui/touch_handler.js index 7744260..85b4fa8 100644 --- a/chrome/browser/resources/shared/js/cr/ui/touch_handler.js +++ b/chrome/browser/resources/shared/js/cr/ui/touch_handler.js @@ -1,4 +1,4 @@ -// Copyright (c) 2011 The Chromium Authors. All rights reserved. +// Copyright (c) 2012 The Chromium Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. @@ -119,7 +119,11 @@ cr.define('cr.ui', function() { // Fired whenever a touch that is being tracked has been released. // Correlates 1:1 with a TOUCH_START. - TOUCH_END: 'touchHandler:touch_end' + TOUCH_END: 'touchHandler:touch_end', + + // Fired whenever the element is tapped in a short time and no dragging is + // detected. + TAP: 'touchHandler:tap' }; @@ -479,6 +483,8 @@ cr.define('cr.ui', function() { if (this.swallowNextClick_) this.swallowNextClick_ = false; + this.disableTap_ = false; + // Sign up for end/cancel notifications for this touch. // Note that we do this on the document so that even if the user drags // their finger off the element, we'll still know what they're doing. @@ -591,6 +597,7 @@ cr.define('cr.ui', function() { this.startTouchX_ = clientX; this.startTouchY_ = clientY; this.startTime_ = e.timeStamp; + this.disableTap_ = true; } else { this.endTracking_(); } @@ -705,6 +712,8 @@ cr.define('cr.ui', function() { // drag-and-drop events are nested inside of the mouse events that trigger // them). this.dispatchEvent_(TouchHandler.EventType.TOUCH_END, touch); + if (!this.disableTap_) + this.dispatchEvent_(TouchHandler.EventType.TAP, touch); }, /** @@ -766,6 +775,7 @@ cr.define('cr.ui', function() { // touch start event. This simple click-busting technique should be // sufficient here since a real click should have a touchstart first. this.swallowNextClick_ = true; + this.disableTap_ = true; // Dispatch to the LONG_PRESS this.dispatchEventXY_(TouchHandler.EventType.LONG_PRESS, this.element_, diff --git a/chrome/browser/resources/task_manager/includes.js b/chrome/browser/resources/task_manager/includes.js index 6f08efd..728a5aa 100644 --- a/chrome/browser/resources/task_manager/includes.js +++ b/chrome/browser/resources/task_manager/includes.js @@ -18,6 +18,7 @@ var script = [ 'local_strings.js', 'i18n_template.js', + 'event_tracker.js', 'util.js', 'cr.js', 'cr/ui.js', @@ -31,6 +32,7 @@ var script = [ 'cr/ui/splitter.js', 'cr/ui/table/table_splitter.js', + 'cr/ui/touch_handler.js', 'cr/ui/table/table_column.js', 'cr/ui/table/table_column_model.js', |