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

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: Patch file manager test 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
« no previous file with comments | « ui/file_manager/file_manager/main.html ('k') | ui/login/bubble.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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 946 matching lines...) Expand 10 before | Expand all | Expand 10 after
1435 e.stopPropagation(); 1435 e.stopPropagation();
1436 }, 1436 },
1437 1437
1438 /** 1438 /**
1439 * Handles a keydown event on action area button. 1439 * Handles a keydown event on action area button.
1440 * @param {Event} e KeyDown event. 1440 * @param {Event} e KeyDown event.
1441 */ 1441 */
1442 handleActionAreaButtonKeyDown_: function(e) { 1442 handleActionAreaButtonKeyDown_: function(e) {
1443 if (this.disabled) 1443 if (this.disabled)
1444 return; 1444 return;
1445 switch (e.keyIdentifier) { 1445 switch (e.key) {
1446 case 'Enter': 1446 case 'Enter':
1447 case 'U+0020': // Space 1447 case ' ':
1448 if (this.parentNode.focusedPod_ && !this.isActionBoxMenuActive) 1448 if (this.parentNode.focusedPod_ && !this.isActionBoxMenuActive)
1449 this.isActionBoxMenuActive = true; 1449 this.isActionBoxMenuActive = true;
1450 e.stopPropagation(); 1450 e.stopPropagation();
1451 break; 1451 break;
1452 case 'Up': 1452 case 'ArrowUp':
1453 case 'Down': 1453 case 'ArrowDown':
1454 if (this.isActionBoxMenuActive) { 1454 if (this.isActionBoxMenuActive) {
1455 this.actionBoxMenuRemoveElement.tabIndex = 1455 this.actionBoxMenuRemoveElement.tabIndex =
1456 UserPodTabOrder.POD_MENU_ITEM; 1456 UserPodTabOrder.POD_MENU_ITEM;
1457 this.actionBoxMenuRemoveElement.focus(); 1457 this.actionBoxMenuRemoveElement.focus();
1458 } 1458 }
1459 e.stopPropagation(); 1459 e.stopPropagation();
1460 break; 1460 break;
1461 // Ignore these two, so ChromeVox hotkeys don't close the menu before 1461 // Ignore these two, so ChromeVox hotkeys don't close the menu before
1462 // they can navigate through it. 1462 // they can navigate through it.
1463 case 'Shift': 1463 case 'Shift':
1464 case 'Win': 1464 case 'Meta':
1465 break; 1465 break;
1466 case 'U+001B': // Esc 1466 case 'Escape':
1467 this.isActionBoxMenuActive = false; 1467 this.isActionBoxMenuActive = false;
1468 e.stopPropagation(); 1468 e.stopPropagation();
1469 break; 1469 break;
1470 case 'U+0009': // Tab 1470 case 'Tab':
1471 if (!this.parentNode.alwaysFocusSinglePod) 1471 if (!this.parentNode.alwaysFocusSinglePod)
1472 this.parentNode.focusPod(); 1472 this.parentNode.focusPod();
1473 default: 1473 default:
1474 this.isActionBoxMenuActive = false; 1474 this.isActionBoxMenuActive = false;
1475 break; 1475 break;
1476 } 1476 }
1477 }, 1477 },
1478 1478
1479 /** 1479 /**
1480 * Handles a keydown event on menu title. 1480 * Handles a keydown event on menu title.
1481 * @param {Event} e KeyDown event. 1481 * @param {Event} e KeyDown event.
1482 */ 1482 */
1483 handleMenuTitleElementKeyDown_: function(e) { 1483 handleMenuTitleElementKeyDown_: function(e) {
1484 if (this.disabled) 1484 if (this.disabled)
1485 return; 1485 return;
1486 1486
1487 if (e.keyIdentifier != 'U+0009' /* TAB */) { 1487 if (e.key != 'Tab') {
1488 this.handleActionAreaButtonKeyDown_(e); 1488 this.handleActionAreaButtonKeyDown_(e);
1489 return; 1489 return;
1490 } 1490 }
1491 1491
1492 if (e.shiftKey == false) { 1492 if (e.shiftKey == false) {
1493 if (this.actionBoxMenuRemoveElement.hidden) { 1493 if (this.actionBoxMenuRemoveElement.hidden) {
1494 this.isActionBoxMenuActive = false; 1494 this.isActionBoxMenuActive = false;
1495 } else { 1495 } else {
1496 this.actionBoxMenuRemoveElement.tabIndex = 1496 this.actionBoxMenuRemoveElement.tabIndex =
1497 UserPodTabOrder.POD_MENU_ITEM; 1497 UserPodTabOrder.POD_MENU_ITEM;
(...skipping 214 matching lines...) Expand 10 before | Expand all | Expand 10 after
1712 /** 1712 /**
1713 * Handles a keydown event on remove user confirmation button. 1713 * Handles a keydown event on remove user confirmation button.
1714 * @param {Event} e KeyDown event. 1714 * @param {Event} e KeyDown event.
1715 */ 1715 */
1716 handleRemoveUserConfirmationKeyDown_: function(e) { 1716 handleRemoveUserConfirmationKeyDown_: function(e) {
1717 if (!this.isActionBoxMenuActive) 1717 if (!this.isActionBoxMenuActive)
1718 return; 1718 return;
1719 1719
1720 // Only handle pressing 'Enter' or 'Space', and let all other events 1720 // Only handle pressing 'Enter' or 'Space', and let all other events
1721 // bubble to the action box menu. 1721 // bubble to the action box menu.
1722 if (e.keyIdentifier == 'Enter' || e.keyIdentifier == 'U+0020') { 1722 if (e.key == 'Enter' || e.key == ' ') {
1723 this.isActionBoxMenuActive = false; 1723 this.isActionBoxMenuActive = false;
1724 this.removeUser(this.user); 1724 this.removeUser(this.user);
1725 e.stopPropagation(); 1725 e.stopPropagation();
1726 // Prevent default so that we don't trigger a 'click' event. 1726 // Prevent default so that we don't trigger a 'click' event.
1727 e.preventDefault(); 1727 e.preventDefault();
1728 } 1728 }
1729 }, 1729 },
1730 1730
1731 /** 1731 /**
1732 * Handles a keydown event on remove command. 1732 * Handles a keydown event on remove command.
1733 * @param {Event} e KeyDown event. 1733 * @param {Event} e KeyDown event.
1734 */ 1734 */
1735 handleRemoveCommandKeyDown_: function(e) { 1735 handleRemoveCommandKeyDown_: function(e) {
1736 if (this.disabled) 1736 if (this.disabled)
1737 return; 1737 return;
1738 switch (e.keyIdentifier) { 1738 switch (e.key) {
1739 case 'Enter': 1739 case 'Enter':
1740 if (this.user.legacySupervisedUser || this.user.isDesktopUser) { 1740 if (this.user.legacySupervisedUser || this.user.isDesktopUser) {
1741 // Prevent default so that we don't trigger a 'click' event on the 1741 // Prevent default so that we don't trigger a 'click' event on the
1742 // remove button that will be focused. 1742 // remove button that will be focused.
1743 e.preventDefault(); 1743 e.preventDefault();
1744 this.showRemoveWarning_(); 1744 this.showRemoveWarning_();
1745 } else { 1745 } else {
1746 this.removeUser(this.user); 1746 this.removeUser(this.user);
1747 } 1747 }
1748 e.stopPropagation(); 1748 e.stopPropagation();
1749 break; 1749 break;
1750 case 'Up': 1750 case 'ArrowUp':
1751 case 'Down': 1751 case 'ArrowDown':
1752 e.stopPropagation(); 1752 e.stopPropagation();
1753 break; 1753 break;
1754 // Ignore these two, so ChromeVox hotkeys don't close the menu before 1754 // Ignore these two, so ChromeVox hotkeys don't close the menu before
1755 // they can navigate through it. 1755 // they can navigate through it.
1756 case 'Shift': 1756 case 'Shift':
1757 case 'Win': 1757 case 'Meta':
1758 break; 1758 break;
1759 case 'U+001B': // Esc 1759 case 'Escape':
1760 this.actionBoxAreaElement.focus(); 1760 this.actionBoxAreaElement.focus();
1761 this.isActionBoxMenuActive = false; 1761 this.isActionBoxMenuActive = false;
1762 e.stopPropagation(); 1762 e.stopPropagation();
1763 break; 1763 break;
1764 default: 1764 default:
1765 this.actionBoxAreaElement.focus(); 1765 this.actionBoxAreaElement.focus();
1766 this.isActionBoxMenuActive = false; 1766 this.isActionBoxMenuActive = false;
1767 break; 1767 break;
1768 } 1768 }
1769 }, 1769 },
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
1815 } 1815 }
1816 }, 1816 },
1817 1817
1818 /** 1818 /**
1819 * Handles keydown event for a user pod. 1819 * Handles keydown event for a user pod.
1820 * @param {Event} e Key event. 1820 * @param {Event} e Key event.
1821 */ 1821 */
1822 handlePodKeyDown_: function(e) { 1822 handlePodKeyDown_: function(e) {
1823 if (!this.isAuthTypeUserClick || this.disabled) 1823 if (!this.isAuthTypeUserClick || this.disabled)
1824 return; 1824 return;
1825 switch (e.keyIdentifier) { 1825 switch (e.key) {
1826 case 'Enter': 1826 case 'Enter':
1827 case 'U+0020': // Space 1827 case ' ':
1828 if (this.parentNode.isFocused(this)) 1828 if (this.parentNode.isFocused(this))
1829 this.parentNode.setActivatedPod(this); 1829 this.parentNode.setActivatedPod(this);
1830 break; 1830 break;
1831 } 1831 }
1832 } 1832 }
1833 }; 1833 };
1834 1834
1835 /** 1835 /**
1836 * Creates a public account user pod. 1836 * Creates a public account user pod.
1837 * @constructor 1837 * @constructor
(...skipping 79 matching lines...) Expand 10 before | Expand all | Expand 10 after
1917 return this.nameElement; 1917 return this.nameElement;
1918 }, 1918 },
1919 1919
1920 /** @override */ 1920 /** @override */
1921 decorate: function() { 1921 decorate: function() {
1922 UserPod.prototype.decorate.call(this); 1922 UserPod.prototype.decorate.call(this);
1923 1923
1924 this.classList.add('public-account'); 1924 this.classList.add('public-account');
1925 1925
1926 this.nameElement.addEventListener('keydown', (function(e) { 1926 this.nameElement.addEventListener('keydown', (function(e) {
1927 if (e.keyIdentifier == 'Enter') { 1927 if (e.key == 'Enter') {
1928 this.parentNode.setActivatedPod(this, e); 1928 this.parentNode.setActivatedPod(this, e);
1929 // Stop this keydown event from bubbling up to PodRow handler. 1929 // Stop this keydown event from bubbling up to PodRow handler.
1930 e.stopPropagation(); 1930 e.stopPropagation();
1931 // Prevent default so that we don't trigger a 'click' event on the 1931 // Prevent default so that we don't trigger a 'click' event on the
1932 // newly focused "Enter" button. 1932 // newly focused "Enter" button.
1933 e.preventDefault(); 1933 e.preventDefault();
1934 } 1934 }
1935 }).bind(this)); 1935 }).bind(this));
1936 1936
1937 var learnMore = this.querySelector('.learn-more'); 1937 var learnMore = this.querySelector('.learn-more');
(...skipping 1429 matching lines...) Expand 10 before | Expand all | Expand 10 after
3367 }, 3367 },
3368 3368
3369 /** 3369 /**
3370 * Handler of keydown event. 3370 * Handler of keydown event.
3371 * @param {Event} e KeyDown Event object. 3371 * @param {Event} e KeyDown Event object.
3372 */ 3372 */
3373 handleKeyDown: function(e) { 3373 handleKeyDown: function(e) {
3374 if (this.disabled) 3374 if (this.disabled)
3375 return; 3375 return;
3376 var editing = e.target.tagName == 'INPUT' && e.target.value; 3376 var editing = e.target.tagName == 'INPUT' && e.target.value;
3377 switch (e.keyIdentifier) { 3377 switch (e.key) {
3378 case 'Left': 3378 case 'ArrowLeft':
3379 if (!editing) { 3379 if (!editing) {
3380 if (this.focusedPod_ && this.focusedPod_.previousElementSibling) 3380 if (this.focusedPod_ && this.focusedPod_.previousElementSibling)
3381 this.focusPod(this.focusedPod_.previousElementSibling); 3381 this.focusPod(this.focusedPod_.previousElementSibling);
3382 else 3382 else
3383 this.focusPod(this.lastElementChild); 3383 this.focusPod(this.lastElementChild);
3384 3384
3385 e.stopPropagation(); 3385 e.stopPropagation();
3386 } 3386 }
3387 break; 3387 break;
3388 case 'Right': 3388 case 'ArrowRight':
3389 if (!editing) { 3389 if (!editing) {
3390 if (this.focusedPod_ && this.focusedPod_.nextElementSibling) 3390 if (this.focusedPod_ && this.focusedPod_.nextElementSibling)
3391 this.focusPod(this.focusedPod_.nextElementSibling); 3391 this.focusPod(this.focusedPod_.nextElementSibling);
3392 else 3392 else
3393 this.focusPod(this.firstElementChild); 3393 this.focusPod(this.firstElementChild);
3394 3394
3395 e.stopPropagation(); 3395 e.stopPropagation();
3396 } 3396 }
3397 break; 3397 break;
3398 case 'Enter': 3398 case 'Enter':
3399 if (this.focusedPod_) { 3399 if (this.focusedPod_) {
3400 var targetTag = e.target.tagName; 3400 var targetTag = e.target.tagName;
3401 if (e.target == this.focusedPod_.passwordElement || 3401 if (e.target == this.focusedPod_.passwordElement ||
3402 (targetTag != 'INPUT' && 3402 (targetTag != 'INPUT' &&
3403 targetTag != 'BUTTON' && 3403 targetTag != 'BUTTON' &&
3404 targetTag != 'A')) { 3404 targetTag != 'A')) {
3405 this.setActivatedPod(this.focusedPod_, e); 3405 this.setActivatedPod(this.focusedPod_, e);
3406 e.stopPropagation(); 3406 e.stopPropagation();
3407 } 3407 }
3408 } 3408 }
3409 break; 3409 break;
3410 case 'U+001B': // Esc 3410 case 'Escape':
3411 if (!this.alwaysFocusSinglePod) 3411 if (!this.alwaysFocusSinglePod)
3412 this.focusPod(); 3412 this.focusPod();
3413 break; 3413 break;
3414 } 3414 }
3415 }, 3415 },
3416 3416
3417 /** 3417 /**
3418 * Called right after the pod row is shown. 3418 * Called right after the pod row is shown.
3419 */ 3419 */
3420 handleAfterShow: function() { 3420 handleAfterShow: function() {
(...skipping 76 matching lines...) Expand 10 before | Expand all | Expand 10 after
3497 if (pod && pod.multiProfilesPolicyApplied) { 3497 if (pod && pod.multiProfilesPolicyApplied) {
3498 pod.userTypeBubbleElement.classList.remove('bubble-shown'); 3498 pod.userTypeBubbleElement.classList.remove('bubble-shown');
3499 } 3499 }
3500 } 3500 }
3501 }; 3501 };
3502 3502
3503 return { 3503 return {
3504 PodRow: PodRow 3504 PodRow: PodRow
3505 }; 3505 };
3506 }); 3506 });
OLDNEW
« no previous file with comments | « ui/file_manager/file_manager/main.html ('k') | ui/login/bubble.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698