| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 Loading... |
| 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 }); |
| OLD | NEW |