| 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 1822 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1833 var num_stats_loaded = 0; | 1833 var num_stats_loaded = 0; |
| 1834 for (var key in stats_elements) { | 1834 for (var key in stats_elements) { |
| 1835 if (this.user.statistics[key].success) { | 1835 if (this.user.statistics[key].success) { |
| 1836 var count = this.user.statistics[key].count; | 1836 var count = this.user.statistics[key].count; |
| 1837 stats_elements[key].textContent = count; | 1837 stats_elements[key].textContent = count; |
| 1838 total_count += count; | 1838 total_count += count; |
| 1839 num_stats_loaded++; | 1839 num_stats_loaded++; |
| 1840 } | 1840 } |
| 1841 } | 1841 } |
| 1842 | 1842 |
| 1843 // this.classList is used for selecting the appropriate dialog. | |
| 1844 if (total_count) | |
| 1845 this.classList.remove('has-no-stats'); | |
| 1846 | |
| 1847 var is_synced_user = this.user.emailAddress !== ""; | 1843 var is_synced_user = this.user.emailAddress !== ""; |
| 1848 // Write total number if all statistics are loaded. | 1844 // Write total number if all statistics are loaded. |
| 1849 if (num_stats_loaded === Object.keys(stats_elements).length) { | 1845 if (num_stats_loaded === Object.keys(stats_elements).length) { |
| 1850 if (!total_count) { | 1846 if (!total_count) { |
| 1851 this.classList.add('has-no-stats'); | |
| 1852 var message = loadTimeData.getString( | 1847 var message = loadTimeData.getString( |
| 1853 is_synced_user ? 'removeUserWarningTextSyncNoStats' : | 1848 is_synced_user ? 'removeUserWarningTextSyncNoStats' : |
| 1854 'removeUserWarningTextNonSyncNoStats'); | 1849 'removeUserWarningTextNonSyncNoStats'); |
| 1855 this.updateRemoveWarningDialogSetMessage_(this.user.profilePath, | 1850 this.updateRemoveWarningDialogSetMessage_(this.user.profilePath, |
| 1856 message); | 1851 message); |
| 1857 } else { | 1852 } else { |
| 1858 window.updateRemoveWarningDialogSetMessage = | 1853 window.updateRemoveWarningDialogSetMessage = |
| 1859 this.updateRemoveWarningDialogSetMessage_.bind(this); | 1854 this.updateRemoveWarningDialogSetMessage_.bind(this); |
| 1860 chrome.send('getRemoveWarningDialogMessage',[{ | 1855 chrome.send('getRemoveWarningDialogMessage',[{ |
| 1861 profilePath: this.user.profilePath, | 1856 profilePath: this.user.profilePath, |
| (...skipping 759 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 2621 | 2616 |
| 2622 var isLockedUser = this.user.needsSignin; | 2617 var isLockedUser = this.user.needsSignin; |
| 2623 var isLegacySupervisedUser = this.user.legacySupervisedUser; | 2618 var isLegacySupervisedUser = this.user.legacySupervisedUser; |
| 2624 var isChildUser = this.user.childUser; | 2619 var isChildUser = this.user.childUser; |
| 2625 var isSyncedUser = this.user.emailAddress !== ""; | 2620 var isSyncedUser = this.user.emailAddress !== ""; |
| 2626 var isProfileLoaded = this.user.isProfileLoaded; | 2621 var isProfileLoaded = this.user.isProfileLoaded; |
| 2627 this.classList.toggle('locked', isLockedUser); | 2622 this.classList.toggle('locked', isLockedUser); |
| 2628 this.classList.toggle('legacy-supervised', isLegacySupervisedUser); | 2623 this.classList.toggle('legacy-supervised', isLegacySupervisedUser); |
| 2629 this.classList.toggle('child', isChildUser); | 2624 this.classList.toggle('child', isChildUser); |
| 2630 this.classList.toggle('synced', isSyncedUser); | 2625 this.classList.toggle('synced', isSyncedUser); |
| 2631 this.classList.toggle('has-no-stats', | |
| 2632 !isProfileLoaded && !this.user.statistics.length); | |
| 2633 | 2626 |
| 2634 if (this.isAuthTypeUserClick) | 2627 if (this.isAuthTypeUserClick) |
| 2635 this.passwordLabelElement.textContent = this.authValue; | 2628 this.passwordLabelElement.textContent = this.authValue; |
| 2636 | 2629 |
| 2637 this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF( | 2630 this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF( |
| 2638 'passwordFieldAccessibleName', this.user_.emailAddress)); | 2631 'passwordFieldAccessibleName', this.user_.emailAddress)); |
| 2639 | 2632 |
| 2640 UserPod.prototype.updateActionBoxArea.call(this); | 2633 UserPod.prototype.updateActionBoxArea.call(this); |
| 2641 }, | 2634 }, |
| 2642 | 2635 |
| (...skipping 924 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 3567 for (var pod of pods) { | 3560 for (var pod of pods) { |
| 3568 pod.parentNode.removeChild(pod); | 3561 pod.parentNode.removeChild(pod); |
| 3569 } | 3562 } |
| 3570 if (pods.length <= POD_ROW_LIMIT) { | 3563 if (pods.length <= POD_ROW_LIMIT) { |
| 3571 for (var pod of pods) { | 3564 for (var pod of pods) { |
| 3572 this.appendChild(pod); | 3565 this.appendChild(pod); |
| 3573 } | 3566 } |
| 3574 } else { | 3567 } else { |
| 3575 // When the user count exceeds the limit (currently set to 2), only the | 3568 // When the user count exceeds the limit (currently set to 2), only the |
| 3576 // main pod still has pow row as parent, all other pods should be | 3569 // main pod still has pow row as parent, all other pods should be |
| 3577 // appended to the container with scroll bar. | 3570 // appended to the container with scroll bar. |
| 3578 for (var pod of pods) { | 3571 for (var pod of pods) { |
| 3579 if (pod == this.mainPod_) | 3572 if (pod == this.mainPod_) |
| 3580 this.appendChild(pod); | 3573 this.appendChild(pod); |
| 3581 else | 3574 else |
| 3582 this.smallPodsContainer.appendChild(pod); | 3575 this.smallPodsContainer.appendChild(pod); |
| 3583 } | 3576 } |
| 3584 } | 3577 } |
| 3585 }, | 3578 }, |
| 3586 | 3579 |
| 3587 /** | 3580 /** |
| (...skipping 77 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 3665 } | 3658 } |
| 3666 // The size of the smallPodsContainer must be updated to avoid overflow. | 3659 // The size of the smallPodsContainer must be updated to avoid overflow. |
| 3667 this.smallPodsContainer.style.height = | 3660 this.smallPodsContainer.style.height = |
| 3668 cr.ui.toCssPx(this.screenSize.height); | 3661 cr.ui.toCssPx(this.screenSize.height); |
| 3669 this.smallPodsContainer.style.width = cr.ui.toCssPx(CROS_SMALL_POD_WIDTH); | 3662 this.smallPodsContainer.style.width = cr.ui.toCssPx(CROS_SMALL_POD_WIDTH); |
| 3670 | 3663 |
| 3671 var LEFT_PADDING = this.isPortraitMode_() ? 0 : 98; | 3664 var LEFT_PADDING = this.isPortraitMode_() ? 0 : 98; |
| 3672 var MIDDLE_PADDING = this.isPortraitMode_() ? 84 : 220; | 3665 var MIDDLE_PADDING = this.isPortraitMode_() ? 84 : 220; |
| 3673 var contentsWidth = LEFT_PADDING + | 3666 var contentsWidth = LEFT_PADDING + |
| 3674 CROS_POD_WIDTH + MIDDLE_PADDING + CROS_SMALL_POD_WIDTH; | 3667 CROS_POD_WIDTH + MIDDLE_PADDING + CROS_SMALL_POD_WIDTH; |
| 3675 var blankWidth = this.screenSize.width - contentsWidth; | 3668 var blankWidth = this.screenSize.width - contentsWidth; |
| 3676 var actualLeftPadding = LEFT_PADDING; | 3669 var actualLeftPadding = LEFT_PADDING; |
| 3677 actualLeftPadding += | 3670 actualLeftPadding += |
| 3678 this.isPortraitMode_() ? blankWidth * 2 / 3 : blankWidth / 2; | 3671 this.isPortraitMode_() ? blankWidth * 2 / 3 : blankWidth / 2; |
| 3679 var SMALL_POD_PADDING = 54; | 3672 var SMALL_POD_PADDING = 54; |
| 3680 var actualSmallPodPadding = SMALL_POD_PADDING; | 3673 var actualSmallPodPadding = SMALL_POD_PADDING; |
| 3681 var smallPodsTotalHeight = (pods.length - 1) * CROS_SMALL_POD_HEIGHT + | 3674 var smallPodsTotalHeight = (pods.length - 1) * CROS_SMALL_POD_HEIGHT + |
| 3682 (pods.length - 2) * actualSmallPodPadding; | 3675 (pods.length - 2) * actualSmallPodPadding; |
| 3683 | 3676 |
| 3684 var SCROLL_TOP_PADDING = this.isPortraitMode_() ? 66 : 72; | 3677 var SCROLL_TOP_PADDING = this.isPortraitMode_() ? 66 : 72; |
| 3685 if (smallPodsTotalHeight + SCROLL_TOP_PADDING * 2 > | 3678 if (smallPodsTotalHeight + SCROLL_TOP_PADDING * 2 > |
| (...skipping 11 matching lines...) Expand all Loading... |
| 3697 (pods.length - 2) * actualSmallPodPadding; | 3690 (pods.length - 2) * actualSmallPodPadding; |
| 3698 } | 3691 } |
| 3699 // If virtual keyboard is not shown, or the updated total height still | 3692 // If virtual keyboard is not shown, or the updated total height still |
| 3700 // exceeds screen height, fall to the scrollable container case. | 3693 // exceeds screen height, fall to the scrollable container case. |
| 3701 if (smallPodsTotalHeight + SCROLL_TOP_PADDING * 2 > | 3694 if (smallPodsTotalHeight + SCROLL_TOP_PADDING * 2 > |
| 3702 this.screenSize.height) { | 3695 this.screenSize.height) { |
| 3703 this.placePodsOnScrollableContainer_(); | 3696 this.placePodsOnScrollableContainer_(); |
| 3704 return; | 3697 return; |
| 3705 } | 3698 } |
| 3706 } | 3699 } |
| 3707 | 3700 |
| 3708 // Start positioning of the main pod and the smallPodsContainer. | 3701 // Start positioning of the main pod and the smallPodsContainer. |
| 3709 this.mainPod_.left = actualLeftPadding; | 3702 this.mainPod_.left = actualLeftPadding; |
| 3710 this.mainPod_.top = (this.screenSize.height - CROS_POD_HEIGHT) / 2; | 3703 this.mainPod_.top = (this.screenSize.height - CROS_POD_HEIGHT) / 2; |
| 3711 this.smallPodsContainer.style.left = | 3704 this.smallPodsContainer.style.left = |
| 3712 cr.ui.toCssPx(actualLeftPadding + CROS_POD_WIDTH + MIDDLE_PADDING); | 3705 cr.ui.toCssPx(actualLeftPadding + CROS_POD_WIDTH + MIDDLE_PADDING); |
| 3713 this.smallPodsContainer.style.top = cr.ui.toCssPx(0); | 3706 this.smallPodsContainer.style.top = cr.ui.toCssPx(0); |
| 3714 // Start positioning of the small pods inside the smallPodsContainer. | 3707 // Start positioning of the small pods inside the smallPodsContainer. |
| 3715 var smallPodsTopPadding = | 3708 var smallPodsTopPadding = |
| 3716 (this.screenSize.height - smallPodsTotalHeight) / 2; | 3709 (this.screenSize.height - smallPodsTotalHeight) / 2; |
| 3717 for (var pod of pods) { | 3710 for (var pod of pods) { |
| 3718 if (pod == this.mainPod_) { | 3711 if (pod == this.mainPod_) { |
| 3719 continue; | 3712 continue; |
| 3720 } | 3713 } |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 3773 } | 3766 } |
| 3774 scrollHeight -= EXTRA_SMALL_POD_PADDING; | 3767 scrollHeight -= EXTRA_SMALL_POD_PADDING; |
| 3775 // The smallPodsContainer should occupy the full screen vertically. | 3768 // The smallPodsContainer should occupy the full screen vertically. |
| 3776 this.smallPodsContainer.style.height = | 3769 this.smallPodsContainer.style.height = |
| 3777 cr.ui.toCssPx(this.screenSize.height); | 3770 cr.ui.toCssPx(this.screenSize.height); |
| 3778 this.smallPodsContainer.style.width = cr.ui.toCssPx( | 3771 this.smallPodsContainer.style.width = cr.ui.toCssPx( |
| 3779 SCROLL_LEFT_PADDING + CROS_EXTRA_SMALL_POD_WIDTH + | 3772 SCROLL_LEFT_PADDING + CROS_EXTRA_SMALL_POD_WIDTH + |
| 3780 SCROLL_RIGHT_PADDING); | 3773 SCROLL_RIGHT_PADDING); |
| 3781 | 3774 |
| 3782 // SCROLL_TOP_PADDING denotes the smallest top padding we can tolerate | 3775 // SCROLL_TOP_PADDING denotes the smallest top padding we can tolerate |
| 3783 // before allowing the container to overflow and show the scroll bar. | 3776 // before allowing the container to overflow and show the scroll bar. |
| 3784 var actualTopPadding = SCROLL_TOP_PADDING; | 3777 var actualTopPadding = SCROLL_TOP_PADDING; |
| 3785 if ((this.screenSize.height - scrollHeight) / 2 > actualTopPadding) { | 3778 if ((this.screenSize.height - scrollHeight) / 2 > actualTopPadding) { |
| 3786 // Edge case: the total height of the scrollable container does not | 3779 // Edge case: the total height of the scrollable container does not |
| 3787 // exceed the screen height (minus the neceesary padding), so the | 3780 // exceed the screen height (minus the neceesary padding), so the |
| 3788 // scroll bar will not appear. | 3781 // scroll bar will not appear. |
| 3789 // In this case, we still want to keep the extra small pod size and | 3782 // In this case, we still want to keep the extra small pod size and |
| 3790 // the overlay, but the top and bottom padding should be adjusted | 3783 // the overlay, but the top and bottom padding should be adjusted |
| 3791 // to ensure a symmetric layout. | 3784 // to ensure a symmetric layout. |
| 3792 actualTopPadding = (this.screenSize.height - scrollHeight) / 2; | 3785 actualTopPadding = (this.screenSize.height - scrollHeight) / 2; |
| 3793 } else if (!this.isScreenShrinked_()) { | 3786 } else if (!this.isScreenShrinked_()) { |
| 3794 // The scroll bar will definitely be shown if we reach here. A gradient | 3787 // The scroll bar will definitely be shown if we reach here. A gradient |
| 3795 // mask is applied to avoid blocking the header bar if the virtual | 3788 // mask is applied to avoid blocking the header bar if the virtual |
| 3796 // keyboard is not shown. When the keyboard is shown, there's no need | 3789 // keyboard is not shown. When the keyboard is shown, there's no need |
| 3797 // to add the mask and the original top padding value should be kept. | 3790 // to add the mask and the original top padding value should be kept. |
| 3798 actualTopPadding = SCROLL_MASK_HEIGHT; | 3791 actualTopPadding = SCROLL_MASK_HEIGHT; |
| 3799 this.showScrollMask_(); | 3792 this.showScrollMask_(); |
| 3800 } | 3793 } |
| 3801 | 3794 |
| 3802 // Start positioning of the small pods inside the smallPodsContainer. | 3795 // Start positioning of the small pods inside the smallPodsContainer. |
| 3803 var topPadding = actualTopPadding; | 3796 var topPadding = actualTopPadding; |
| 3804 var lastPod = undefined; | 3797 var lastPod = undefined; |
| 3805 for (var pod of pods) { | 3798 for (var pod of pods) { |
| 3806 if (pod == this.mainPod_) { | 3799 if (pod == this.mainPod_) { |
| 3807 continue; | 3800 continue; |
| 3808 } | 3801 } |
| 3809 pod.left = SCROLL_LEFT_PADDING; | 3802 pod.left = SCROLL_LEFT_PADDING; |
| 3810 pod.top = topPadding; | 3803 pod.top = topPadding; |
| (...skipping 280 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 4091 // Add switch animation. | 4084 // Add switch animation. |
| 4092 this.mainPod_.smallPodImageElement.classList.add( | 4085 this.mainPod_.smallPodImageElement.classList.add( |
| 4093 'switch-image-animation'); | 4086 'switch-image-animation'); |
| 4094 pod.imageElement.classList.add('switch-image-animation'); | 4087 pod.imageElement.classList.add('switch-image-animation'); |
| 4095 | 4088 |
| 4096 // Switch parent and position of the two pods. | 4089 // Switch parent and position of the two pods. |
| 4097 var left = pod.left; | 4090 var left = pod.left; |
| 4098 var top = pod.top; | 4091 var top = pod.top; |
| 4099 // Edge case: paddingBottom should be switched too because there's a | 4092 // Edge case: paddingBottom should be switched too because there's a |
| 4100 // chance that the small pod was at the end of the scrollable container | 4093 // chance that the small pod was at the end of the scrollable container |
| 4101 // and had a non-zero paddingBottom. | 4094 // and had a non-zero paddingBottom. |
| 4102 var paddingBottom = pod.style.paddingBottom; | 4095 var paddingBottom = pod.style.paddingBottom; |
| 4103 var parent = pod.parentNode; | 4096 var parent = pod.parentNode; |
| 4104 parent.removeChild(pod); | 4097 parent.removeChild(pod); |
| 4105 this.appendChild(pod); | 4098 this.appendChild(pod); |
| 4106 pod.left = this.mainPod_.left; | 4099 pod.left = this.mainPod_.left; |
| 4107 pod.top = this.mainPod_.top; | 4100 pod.top = this.mainPod_.top; |
| 4108 pod.style.paddingBottom = cr.ui.toCssPx(0); | 4101 pod.style.paddingBottom = cr.ui.toCssPx(0); |
| 4109 | 4102 |
| 4110 this.removeChild(this.mainPod_); | 4103 this.removeChild(this.mainPod_); |
| 4111 // It must have the same index with the original small pod, instead | 4104 // It must have the same index with the original small pod, instead |
| (...skipping 585 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 4697 if (pod && pod.multiProfilesPolicyApplied) { | 4690 if (pod && pod.multiProfilesPolicyApplied) { |
| 4698 pod.userTypeBubbleElement.classList.remove('bubble-shown'); | 4691 pod.userTypeBubbleElement.classList.remove('bubble-shown'); |
| 4699 } | 4692 } |
| 4700 } | 4693 } |
| 4701 }; | 4694 }; |
| 4702 | 4695 |
| 4703 return { | 4696 return { |
| 4704 PodRow: PodRow | 4697 PodRow: PodRow |
| 4705 }; | 4698 }; |
| 4706 }); | 4699 }); |
| OLD | NEW |