Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(56)

Side by Side Diff: ui/login/account_picker/user_pod_row.js

Issue 2104103002: Convert Event#keyIdentifier (deprecated) to Event#key (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix nits Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright 2014 The Chromium Authors. All rights reserved. 1 // Copyright 2014 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 /** 5 /**
6 * @fileoverview User pod row implementation. 6 * @fileoverview User pod row implementation.
7 */ 7 */
8 8
9 cr.define('login', function() { 9 cr.define('login', function() {
10 /** 10 /**
(...skipping 457 matching lines...) Expand 10 before | Expand all | Expand 10 after
468 stopEventPropagation(e); 468 stopEventPropagation(e);
469 }, 469 },
470 470
471 /** 471 /**
472 * Handles key down event on the icon element. Only 'Enter' key is handled. 472 * Handles key down event on the icon element. Only 'Enter' key is handled.
473 * No-op if {@code this.actionHandler_} is not set. 473 * No-op if {@code this.actionHandler_} is not set.
474 * @param {Event} e The key down event. 474 * @param {Event} e The key down event.
475 * @private 475 * @private
476 */ 476 */
477 handleKeyDown_: function(e) { 477 handleKeyDown_: function(e) {
478 if (!this.actionHandler_ || e.keyIdentifier != 'Enter') 478 if (!this.actionHandler_ || e.key != 'Enter')
479 return; 479 return;
480 this.actionHandler_(e); 480 this.actionHandler_(e);
481 stopEventPropagation(e); 481 stopEventPropagation(e);
482 }, 482 },
483 483
484 /** 484 /**
485 * Changes the tooltip hover state and updates tooltip visibility if needed. 485 * Changes the tooltip hover state and updates tooltip visibility if needed.
486 * @param {!UserPodCustomIcon.HoverState} state 486 * @param {!UserPodCustomIcon.HoverState} state
487 * @private 487 * @private
488 */ 488 */
(...skipping 942 matching lines...) Expand 10 before | Expand all | Expand 10 after
1431 e.stopPropagation(); 1431 e.stopPropagation();
1432 }, 1432 },
1433 1433
1434 /** 1434 /**
1435 * Handles a keydown event on action area button. 1435 * Handles a keydown event on action area button.
1436 * @param {Event} e KeyDown event. 1436 * @param {Event} e KeyDown event.
1437 */ 1437 */
1438 handleActionAreaButtonKeyDown_: function(e) { 1438 handleActionAreaButtonKeyDown_: function(e) {
1439 if (this.disabled) 1439 if (this.disabled)
1440 return; 1440 return;
1441 switch (e.keyIdentifier) { 1441 switch (e.key) {
1442 case 'Enter': 1442 case 'Enter':
1443 case 'U+0020': // Space 1443 case ' ':
1444 if (this.parentNode.focusedPod_ && !this.isActionBoxMenuActive) 1444 if (this.parentNode.focusedPod_ && !this.isActionBoxMenuActive)
1445 this.isActionBoxMenuActive = true; 1445 this.isActionBoxMenuActive = true;
1446 e.stopPropagation(); 1446 e.stopPropagation();
1447 break; 1447 break;
1448 case 'Up': 1448 case 'ArrowUp':
1449 case 'Down': 1449 case 'ArrowDown':
1450 if (this.isActionBoxMenuActive) { 1450 if (this.isActionBoxMenuActive) {
1451 this.actionBoxMenuRemoveElement.tabIndex = 1451 this.actionBoxMenuRemoveElement.tabIndex =
1452 UserPodTabOrder.POD_MENU_ITEM; 1452 UserPodTabOrder.POD_MENU_ITEM;
1453 this.actionBoxMenuRemoveElement.focus(); 1453 this.actionBoxMenuRemoveElement.focus();
1454 } 1454 }
1455 e.stopPropagation(); 1455 e.stopPropagation();
1456 break; 1456 break;
1457 // Ignore these two, so ChromeVox hotkeys don't close the menu before 1457 // Ignore these two, so ChromeVox hotkeys don't close the menu before
1458 // they can navigate through it. 1458 // they can navigate through it.
1459 case 'Shift': 1459 case 'Shift':
1460 case 'Win': 1460 case 'Meta':
1461 break; 1461 break;
1462 case 'U+001B': // Esc 1462 case 'Escape':
1463 this.isActionBoxMenuActive = false; 1463 this.isActionBoxMenuActive = false;
1464 e.stopPropagation(); 1464 e.stopPropagation();
1465 break; 1465 break;
1466 case 'U+0009': // Tab 1466 case 'Tab':
1467 if (!this.parentNode.alwaysFocusSinglePod) 1467 if (!this.parentNode.alwaysFocusSinglePod)
1468 this.parentNode.focusPod(); 1468 this.parentNode.focusPod();
1469 default: 1469 default:
1470 this.isActionBoxMenuActive = false; 1470 this.isActionBoxMenuActive = false;
1471 break; 1471 break;
1472 } 1472 }
1473 }, 1473 },
1474 1474
1475 /** 1475 /**
1476 * Handles a keydown event on menu title. 1476 * Handles a keydown event on menu title.
1477 * @param {Event} e KeyDown event. 1477 * @param {Event} e KeyDown event.
1478 */ 1478 */
1479 handleMenuTitleElementKeyDown_: function(e) { 1479 handleMenuTitleElementKeyDown_: function(e) {
1480 if (this.disabled) 1480 if (this.disabled)
1481 return; 1481 return;
1482 1482
1483 if (e.keyIdentifier != 'U+0009' /* TAB */) { 1483 if (e.key != 'Tab') {
1484 this.handleActionAreaButtonKeyDown_(e); 1484 this.handleActionAreaButtonKeyDown_(e);
1485 return; 1485 return;
1486 } 1486 }
1487 1487
1488 if (e.shiftKey == false) { 1488 if (e.shiftKey == false) {
1489 if (this.actionBoxMenuRemoveElement.hidden) { 1489 if (this.actionBoxMenuRemoveElement.hidden) {
1490 this.isActionBoxMenuActive = false; 1490 this.isActionBoxMenuActive = false;
1491 } else { 1491 } else {
1492 this.actionBoxMenuRemoveElement.tabIndex = 1492 this.actionBoxMenuRemoveElement.tabIndex =
1493 UserPodTabOrder.POD_MENU_ITEM; 1493 UserPodTabOrder.POD_MENU_ITEM;
(...skipping 214 matching lines...) Expand 10 before | Expand all | Expand 10 after
1708 /** 1708 /**
1709 * Handles a keydown event on remove user confirmation button. 1709 * Handles a keydown event on remove user confirmation button.
1710 * @param {Event} e KeyDown event. 1710 * @param {Event} e KeyDown event.
1711 */ 1711 */
1712 handleRemoveUserConfirmationKeyDown_: function(e) { 1712 handleRemoveUserConfirmationKeyDown_: function(e) {
1713 if (!this.isActionBoxMenuActive) 1713 if (!this.isActionBoxMenuActive)
1714 return; 1714 return;
1715 1715
1716 // Only handle pressing 'Enter' or 'Space', and let all other events 1716 // Only handle pressing 'Enter' or 'Space', and let all other events
1717 // bubble to the action box menu. 1717 // bubble to the action box menu.
1718 if (e.keyIdentifier == 'Enter' || e.keyIdentifier == 'U+0020') { 1718 if (e.key == 'Enter' || e.key == ' ') {
1719 this.isActionBoxMenuActive = false; 1719 this.isActionBoxMenuActive = false;
1720 this.removeUser(this.user); 1720 this.removeUser(this.user);
1721 e.stopPropagation(); 1721 e.stopPropagation();
1722 // Prevent default so that we don't trigger a 'click' event. 1722 // Prevent default so that we don't trigger a 'click' event.
1723 e.preventDefault(); 1723 e.preventDefault();
1724 } 1724 }
1725 }, 1725 },
1726 1726
1727 /** 1727 /**
1728 * Handles a keydown event on remove command. 1728 * Handles a keydown event on remove command.
1729 * @param {Event} e KeyDown event. 1729 * @param {Event} e KeyDown event.
1730 */ 1730 */
1731 handleRemoveCommandKeyDown_: function(e) { 1731 handleRemoveCommandKeyDown_: function(e) {
1732 if (this.disabled) 1732 if (this.disabled)
1733 return; 1733 return;
1734 switch (e.keyIdentifier) { 1734 switch (e.key) {
1735 case 'Enter': 1735 case 'Enter':
1736 if (this.user.legacySupervisedUser || this.user.isDesktopUser) { 1736 if (this.user.legacySupervisedUser || this.user.isDesktopUser) {
1737 // Prevent default so that we don't trigger a 'click' event on the 1737 // Prevent default so that we don't trigger a 'click' event on the
1738 // remove button that will be focused. 1738 // remove button that will be focused.
1739 e.preventDefault(); 1739 e.preventDefault();
1740 this.showRemoveWarning_(); 1740 this.showRemoveWarning_();
1741 } else { 1741 } else {
1742 this.removeUser(this.user); 1742 this.removeUser(this.user);
1743 } 1743 }
1744 e.stopPropagation(); 1744 e.stopPropagation();
1745 break; 1745 break;
1746 case 'Up': 1746 case 'ArrowUp':
1747 case 'Down': 1747 case 'ArrowDown':
1748 e.stopPropagation(); 1748 e.stopPropagation();
1749 break; 1749 break;
1750 // Ignore these two, so ChromeVox hotkeys don't close the menu before 1750 // Ignore these two, so ChromeVox hotkeys don't close the menu before
1751 // they can navigate through it. 1751 // they can navigate through it.
1752 case 'Shift': 1752 case 'Shift':
1753 case 'Win': 1753 case 'Meta':
1754 break; 1754 break;
1755 case 'U+001B': // Esc 1755 case 'Escape':
1756 this.actionBoxAreaElement.focus(); 1756 this.actionBoxAreaElement.focus();
1757 this.isActionBoxMenuActive = false; 1757 this.isActionBoxMenuActive = false;
1758 e.stopPropagation(); 1758 e.stopPropagation();
1759 break; 1759 break;
1760 default: 1760 default:
1761 this.actionBoxAreaElement.focus(); 1761 this.actionBoxAreaElement.focus();
1762 this.isActionBoxMenuActive = false; 1762 this.isActionBoxMenuActive = false;
1763 break; 1763 break;
1764 } 1764 }
1765 }, 1765 },
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
1811 } 1811 }
1812 }, 1812 },
1813 1813
1814 /** 1814 /**
1815 * Handles keydown event for a user pod. 1815 * Handles keydown event for a user pod.
1816 * @param {Event} e Key event. 1816 * @param {Event} e Key event.
1817 */ 1817 */
1818 handlePodKeyDown_: function(e) { 1818 handlePodKeyDown_: function(e) {
1819 if (!this.isAuthTypeUserClick || this.disabled) 1819 if (!this.isAuthTypeUserClick || this.disabled)
1820 return; 1820 return;
1821 switch (e.keyIdentifier) { 1821 switch (e.key) {
1822 case 'Enter': 1822 case 'Enter':
1823 case 'U+0020': // Space 1823 case ' ':
1824 if (this.parentNode.isFocused(this)) 1824 if (this.parentNode.isFocused(this))
1825 this.parentNode.setActivatedPod(this); 1825 this.parentNode.setActivatedPod(this);
1826 break; 1826 break;
1827 } 1827 }
1828 } 1828 }
1829 }; 1829 };
1830 1830
1831 /** 1831 /**
1832 * Creates a public account user pod. 1832 * Creates a public account user pod.
1833 * @constructor 1833 * @constructor
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after
1913 return this.nameElement; 1913 return this.nameElement;
1914 }, 1914 },
1915 1915
1916 /** @override */ 1916 /** @override */
1917 decorate: function() { 1917 decorate: function() {
1918 UserPod.prototype.decorate.call(this); 1918 UserPod.prototype.decorate.call(this);
1919 1919
1920 this.classList.add('public-account'); 1920 this.classList.add('public-account');
1921 1921
1922 this.nameElement.addEventListener('keydown', (function(e) { 1922 this.nameElement.addEventListener('keydown', (function(e) {
1923 if (e.keyIdentifier == 'Enter') { 1923 if (e.key == 'Enter') {
1924 this.parentNode.setActivatedPod(this, e); 1924 this.parentNode.setActivatedPod(this, e);
1925 // Stop this keydown event from bubbling up to PodRow handler. 1925 // Stop this keydown event from bubbling up to PodRow handler.
1926 e.stopPropagation(); 1926 e.stopPropagation();
1927 // Prevent default so that we don't trigger a 'click' event on the 1927 // Prevent default so that we don't trigger a 'click' event on the
1928 // newly focused "Enter" button. 1928 // newly focused "Enter" button.
1929 e.preventDefault(); 1929 e.preventDefault();
1930 } 1930 }
1931 }).bind(this)); 1931 }).bind(this));
1932 1932
1933 var learnMore = this.querySelector('.learn-more'); 1933 var learnMore = this.querySelector('.learn-more');
(...skipping 1409 matching lines...) Expand 10 before | Expand all | Expand 10 after
3343 }, 3343 },
3344 3344
3345 /** 3345 /**
3346 * Handler of keydown event. 3346 * Handler of keydown event.
3347 * @param {Event} e KeyDown Event object. 3347 * @param {Event} e KeyDown Event object.
3348 */ 3348 */
3349 handleKeyDown: function(e) { 3349 handleKeyDown: function(e) {
3350 if (this.disabled) 3350 if (this.disabled)
3351 return; 3351 return;
3352 var editing = e.target.tagName == 'INPUT' && e.target.value; 3352 var editing = e.target.tagName == 'INPUT' && e.target.value;
3353 switch (e.keyIdentifier) { 3353 switch (e.key) {
3354 case 'Left': 3354 case 'ArrowLeft':
3355 if (!editing) { 3355 if (!editing) {
3356 if (this.focusedPod_ && this.focusedPod_.previousElementSibling) 3356 if (this.focusedPod_ && this.focusedPod_.previousElementSibling)
3357 this.focusPod(this.focusedPod_.previousElementSibling); 3357 this.focusPod(this.focusedPod_.previousElementSibling);
3358 else 3358 else
3359 this.focusPod(this.lastElementChild); 3359 this.focusPod(this.lastElementChild);
3360 3360
3361 e.stopPropagation(); 3361 e.stopPropagation();
3362 } 3362 }
3363 break; 3363 break;
3364 case 'Right': 3364 case 'ArrowRight':
3365 if (!editing) { 3365 if (!editing) {
3366 if (this.focusedPod_ && this.focusedPod_.nextElementSibling) 3366 if (this.focusedPod_ && this.focusedPod_.nextElementSibling)
3367 this.focusPod(this.focusedPod_.nextElementSibling); 3367 this.focusPod(this.focusedPod_.nextElementSibling);
3368 else 3368 else
3369 this.focusPod(this.firstElementChild); 3369 this.focusPod(this.firstElementChild);
3370 3370
3371 e.stopPropagation(); 3371 e.stopPropagation();
3372 } 3372 }
3373 break; 3373 break;
3374 case 'Enter': 3374 case 'Enter':
3375 if (this.focusedPod_) { 3375 if (this.focusedPod_) {
3376 var targetTag = e.target.tagName; 3376 var targetTag = e.target.tagName;
3377 if (e.target == this.focusedPod_.passwordElement || 3377 if (e.target == this.focusedPod_.passwordElement ||
3378 (targetTag != 'INPUT' && 3378 (targetTag != 'INPUT' &&
3379 targetTag != 'BUTTON' && 3379 targetTag != 'BUTTON' &&
3380 targetTag != 'A')) { 3380 targetTag != 'A')) {
3381 this.setActivatedPod(this.focusedPod_, e); 3381 this.setActivatedPod(this.focusedPod_, e);
3382 e.stopPropagation(); 3382 e.stopPropagation();
3383 } 3383 }
3384 } 3384 }
3385 break; 3385 break;
3386 case 'U+001B': // Esc 3386 case 'Escape':
3387 if (!this.alwaysFocusSinglePod) 3387 if (!this.alwaysFocusSinglePod)
3388 this.focusPod(); 3388 this.focusPod();
3389 break; 3389 break;
3390 } 3390 }
3391 }, 3391 },
3392 3392
3393 /** 3393 /**
3394 * Called right after the pod row is shown. 3394 * Called right after the pod row is shown.
3395 */ 3395 */
3396 handleAfterShow: function() { 3396 handleAfterShow: function() {
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
3473 if (pod && pod.multiProfilesPolicyApplied) { 3473 if (pod && pod.multiProfilesPolicyApplied) {
3474 pod.userTypeBubbleElement.classList.remove('bubble-shown'); 3474 pod.userTypeBubbleElement.classList.remove('bubble-shown');
3475 } 3475 }
3476 } 3476 }
3477 }; 3477 };
3478 3478
3479 return { 3479 return {
3480 PodRow: PodRow 3480 PodRow: PodRow
3481 }; 3481 };
3482 }); 3482 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698