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

Side by Side Diff: chrome/browser/resources/login/user_pod_row.js

Issue 289013002: cros: Clean up screenlockPrivate plumbing. (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: rebase Created 6 years, 7 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 | Annotate | Revision Log
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 141 matching lines...) Expand 10 before | Expand all | Expand 10 after
152 * @type {Object} 152 * @type {Object}
153 */ 153 */
154 UserPod.userImageSalt_ = {}; 154 UserPod.userImageSalt_ = {};
155 155
156 UserPod.prototype = { 156 UserPod.prototype = {
157 __proto__: HTMLDivElement.prototype, 157 __proto__: HTMLDivElement.prototype,
158 158
159 /** @override */ 159 /** @override */
160 decorate: function() { 160 decorate: function() {
161 this.tabIndex = UserPodTabOrder.POD_INPUT; 161 this.tabIndex = UserPodTabOrder.POD_INPUT;
162 this.customButtonElement.tabIndex = UserPodTabOrder.POD_INPUT;
163 this.actionBoxAreaElement.tabIndex = UserPodTabOrder.ACTION_BOX; 162 this.actionBoxAreaElement.tabIndex = UserPodTabOrder.ACTION_BOX;
164 163
165 this.addEventListener('keydown', this.handlePodKeyDown_.bind(this)); 164 this.addEventListener('keydown', this.handlePodKeyDown_.bind(this));
166 this.addEventListener('click', this.handleClickOnPod_.bind(this)); 165 this.addEventListener('click', this.handleClickOnPod_.bind(this));
167 166
168 this.signinButtonElement.addEventListener('click', 167 this.signinButtonElement.addEventListener('click',
169 this.activate.bind(this)); 168 this.activate.bind(this));
170 169
171 this.actionBoxAreaElement.addEventListener('mousedown', 170 this.actionBoxAreaElement.addEventListener('mousedown',
172 stopEventPropagation); 171 stopEventPropagation);
173 this.actionBoxAreaElement.addEventListener('click', 172 this.actionBoxAreaElement.addEventListener('click',
174 this.handleActionAreaButtonClick_.bind(this)); 173 this.handleActionAreaButtonClick_.bind(this));
175 this.actionBoxAreaElement.addEventListener('keydown', 174 this.actionBoxAreaElement.addEventListener('keydown',
176 this.handleActionAreaButtonKeyDown_.bind(this)); 175 this.handleActionAreaButtonKeyDown_.bind(this));
177 176
178 this.actionBoxMenuRemoveElement.addEventListener('click', 177 this.actionBoxMenuRemoveElement.addEventListener('click',
179 this.handleRemoveCommandClick_.bind(this)); 178 this.handleRemoveCommandClick_.bind(this));
180 this.actionBoxMenuRemoveElement.addEventListener('keydown', 179 this.actionBoxMenuRemoveElement.addEventListener('keydown',
181 this.handleRemoveCommandKeyDown_.bind(this)); 180 this.handleRemoveCommandKeyDown_.bind(this));
182 this.actionBoxMenuRemoveElement.addEventListener('blur', 181 this.actionBoxMenuRemoveElement.addEventListener('blur',
183 this.handleRemoveCommandBlur_.bind(this)); 182 this.handleRemoveCommandBlur_.bind(this));
184 183
185 if (this.actionBoxRemoveUserWarningButtonElement) { 184 if (this.actionBoxRemoveUserWarningButtonElement) {
186 this.actionBoxRemoveUserWarningButtonElement.addEventListener( 185 this.actionBoxRemoveUserWarningButtonElement.addEventListener(
187 'click', 186 'click',
188 this.handleRemoveUserConfirmationClick_.bind(this)); 187 this.handleRemoveUserConfirmationClick_.bind(this));
189 } 188 }
190
191 this.customButtonElement.addEventListener('click',
192 this.handleCustomButtonClick_.bind(this));
193 }, 189 },
194 190
195 /** 191 /**
196 * Initializes the pod after its properties set and added to a pod row. 192 * Initializes the pod after its properties set and added to a pod row.
197 */ 193 */
198 initialize: function() { 194 initialize: function() {
199 this.passwordElement.addEventListener('keydown', 195 this.passwordElement.addEventListener('keydown',
200 this.parentNode.handleKeyDown.bind(this.parentNode)); 196 this.parentNode.handleKeyDown.bind(this.parentNode));
201 this.passwordElement.addEventListener('keypress', 197 this.passwordElement.addEventListener('keypress',
202 this.handlePasswordKeyPress_.bind(this)); 198 this.handlePasswordKeyPress_.bind(this));
(...skipping 222 matching lines...) Expand 10 before | Expand all | Expand 10 after
425 421
426 /** 422 /**
427 * Gets the locked user indicator box. 423 * Gets the locked user indicator box.
428 * @type {!HTMLInputElement} 424 * @type {!HTMLInputElement}
429 */ 425 */
430 get lockedIndicatorElement() { 426 get lockedIndicatorElement() {
431 return this.querySelector('.locked-indicator'); 427 return this.querySelector('.locked-indicator');
432 }, 428 },
433 429
434 /** 430 /**
435 * Gets the custom button. This button is normally hidden, but can be shown 431 * Gets the custom icon. This icon is normally hidden, but can be shown
436 * using the chrome.screenlockPrivate API. 432 * using the chrome.screenlockPrivate API.
437 * @type {!HTMLInputElement} 433 * @type {!HTMLDivElement}
438 */ 434 */
439 get customButtonElement() { 435 get customIconElement() {
440 return this.querySelector('.custom-button'); 436 return this.querySelector('.custom-icon');
441 }, 437 },
442 438
443 /** 439 /**
444 * Updates the user pod element. 440 * Updates the user pod element.
445 */ 441 */
446 update: function() { 442 update: function() {
447 this.imageElement.src = 'chrome://userimage/' + this.user.username + 443 this.imageElement.src = 'chrome://userimage/' + this.user.username +
448 '?id=' + UserPod.userImageSalt_[this.user.username]; 444 '?id=' + UserPod.userImageSalt_[this.user.username];
449 445
450 this.nameElement.textContent = this.user_.displayName; 446 this.nameElement.textContent = this.user_.displayName;
451 this.signedInIndicatorElement.hidden = !this.user_.signedIn; 447 this.signedInIndicatorElement.hidden = !this.user_.signedIn;
452 448
453 this.signinButtonElement.hidden = !this.isAuthTypeOnlineSignIn; 449 this.signinButtonElement.hidden = !this.isAuthTypeOnlineSignIn;
454 this.customButtonElement.tabIndex = UserPodTabOrder.POD_INPUT; 450 if (this.isAuthTypeUserClick)
455 if (this.isAuthTypeUserClick) {
456 this.passwordLabelElement.textContent = this.authValue; 451 this.passwordLabelElement.textContent = this.authValue;
457 this.customButtonElement.tabIndex = -1;
458 }
459 452
460 this.updateActionBoxArea(); 453 this.updateActionBoxArea();
461 454
462 this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF( 455 this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF(
463 'passwordFieldAccessibleName', this.user_.emailAddress)); 456 'passwordFieldAccessibleName', this.user_.emailAddress));
464 457
465 this.customizeUserPodPerUserType(); 458 this.customizeUserPodPerUserType();
466 }, 459 },
467 460
468 updateActionBoxArea: function() { 461 updateActionBoxArea: function() {
(...skipping 199 matching lines...) Expand 10 before | Expand all | Expand 10 after
668 /** 661 /**
669 * Activates the pod. 662 * Activates the pod.
670 * @param {Event} e Event object. 663 * @param {Event} e Event object.
671 * @return {boolean} True if activated successfully. 664 * @return {boolean} True if activated successfully.
672 */ 665 */
673 activate: function(e) { 666 activate: function(e) {
674 if (this.isAuthTypeOnlineSignIn) { 667 if (this.isAuthTypeOnlineSignIn) {
675 this.showSigninUI(); 668 this.showSigninUI();
676 } else if (this.isAuthTypeUserClick) { 669 } else if (this.isAuthTypeUserClick) {
677 Oobe.disableSigninUI(); 670 Oobe.disableSigninUI();
678 chrome.send('authenticateUser', [this.user.username, '']); 671 chrome.send('attemptUnlock', [this.user.username]);
679 } else if (this.isAuthTypePassword) { 672 } else if (this.isAuthTypePassword) {
680 if (!this.passwordElement.value) 673 if (!this.passwordElement.value)
681 return false; 674 return false;
682 Oobe.disableSigninUI(); 675 Oobe.disableSigninUI();
683 chrome.send('authenticateUser', 676 chrome.send('authenticateUser',
684 [this.user.username, this.passwordElement.value]); 677 [this.user.username, this.passwordElement.value]);
685 } else { 678 } else {
686 console.error('Activating user pod with invalid authentication type: ' + 679 console.error('Activating user pod with invalid authentication type: ' +
687 this.authType); 680 this.authType);
688 } 681 }
(...skipping 185 matching lines...) Expand 10 before | Expand all | Expand 10 after
874 handlePodKeyDown_: function(e) { 867 handlePodKeyDown_: function(e) {
875 if (!this.isAuthTypeUserClick || this.disabled) 868 if (!this.isAuthTypeUserClick || this.disabled)
876 return; 869 return;
877 switch (e.keyIdentifier) { 870 switch (e.keyIdentifier) {
878 case 'Enter': 871 case 'Enter':
879 case 'U+0020': // Space 872 case 'U+0020': // Space
880 if (this.parentNode.isFocused(this)) 873 if (this.parentNode.isFocused(this))
881 this.parentNode.setActivatedPod(this); 874 this.parentNode.setActivatedPod(this);
882 break; 875 break;
883 } 876 }
884 },
885
886 /**
887 * Called when the custom button is clicked.
888 */
889 handleCustomButtonClick_: function() {
890 chrome.send('customButtonClicked', [this.user.username]);
891 } 877 }
892 }; 878 };
893 879
894 /** 880 /**
895 * Creates a public account user pod. 881 * Creates a public account user pod.
896 * @constructor 882 * @constructor
897 * @extends {UserPod} 883 * @extends {UserPod}
898 */ 884 */
899 var PublicAccountUserPod = cr.ui.define(function() { 885 var PublicAccountUserPod = cr.ui.define(function() {
900 var node = UserPod(); 886 var node = UserPod();
(...skipping 236 matching lines...) Expand 10 before | Expand all | Expand 10 after
1137 update: function() { 1123 update: function() {
1138 this.imageElement.src = this.user.userImage; 1124 this.imageElement.src = this.user.userImage;
1139 this.nameElement.textContent = this.user.displayName; 1125 this.nameElement.textContent = this.user.displayName;
1140 1126
1141 var isLockedUser = this.user.needsSignin; 1127 var isLockedUser = this.user.needsSignin;
1142 this.signinButtonElement.hidden = true; 1128 this.signinButtonElement.hidden = true;
1143 this.lockedIndicatorElement.hidden = !isLockedUser; 1129 this.lockedIndicatorElement.hidden = !isLockedUser;
1144 this.passwordElement.hidden = !isLockedUser; 1130 this.passwordElement.hidden = !isLockedUser;
1145 this.nameElement.hidden = isLockedUser; 1131 this.nameElement.hidden = isLockedUser;
1146 1132
1147 if (this.isAuthTypeUserClick) { 1133 if (this.isAuthTypeUserClick)
1148 this.passwordLabelElement.textContent = this.authValue; 1134 this.passwordLabelElement.textContent = this.authValue;
1149 this.customButtonElement.tabIndex = -1;
1150 }
1151 1135
1152 UserPod.prototype.updateActionBoxArea.call(this); 1136 UserPod.prototype.updateActionBoxArea.call(this);
1153 }, 1137 },
1154 1138
1155 /** @override */ 1139 /** @override */
1156 focusInput: function() { 1140 focusInput: function() {
1157 // For focused pods, display the name unless the pod is locked. 1141 // For focused pods, display the name unless the pod is locked.
1158 var isLockedUser = this.user.needsSignin; 1142 var isLockedUser = this.user.needsSignin;
1159 this.signinButtonElement.hidden = true; 1143 this.signinButtonElement.hidden = true;
1160 this.lockedIndicatorElement.hidden = !isLockedUser; 1144 this.lockedIndicatorElement.hidden = !isLockedUser;
(...skipping 496 matching lines...) Expand 10 before | Expand all | Expand 10 after
1657 */ 1641 */
1658 setShouldShowApps: function(shouldShowApps) { 1642 setShouldShowApps: function(shouldShowApps) {
1659 if (this.shouldShowApps_ == shouldShowApps) 1643 if (this.shouldShowApps_ == shouldShowApps)
1660 return; 1644 return;
1661 1645
1662 this.shouldShowApps_ = shouldShowApps; 1646 this.shouldShowApps_ = shouldShowApps;
1663 this.rebuildPods(); 1647 this.rebuildPods();
1664 }, 1648 },
1665 1649
1666 /** 1650 /**
1667 * Shows a button on a user pod with an icon. Clicking on this button 1651 * Shows a custom icon on a user pod besides the input field.
1668 * triggers an event used by the chrome.screenlockPrivate API.
1669 * @param {string} username Username of pod to add button 1652 * @param {string} username Username of pod to add button
1670 * @param {string} iconURL URL of the button icon 1653 * @param {string} iconURL URL of the button icon
1671 */ 1654 */
1672 showUserPodButton: function(username, iconURL) { 1655 showUserPodCustomIcon: function(username, iconURL) {
1673 var pod = this.getPodWithUsername_(username); 1656 var pod = this.getPodWithUsername_(username);
1674 if (pod == null) { 1657 if (pod == null) {
1675 console.error('Unable to show user pod button for ' + username + 1658 console.error('Unable to show user pod button for ' + username +
1676 ': user pod not found.'); 1659 ': user pod not found.');
1677 return; 1660 return;
1678 } 1661 }
1679 1662
1680 pod.customButtonElement.hidden = false; 1663 pod.customIconElement.hidden = false;
1681 var icon = 1664 pod.customIconElement.style.backgroundImage = url(iconURL);
1682 pod.customButtonElement.querySelector('.custom-button-icon');
1683 icon.src = iconURL;
1684 }, 1665 },
1685 1666
1686 /** 1667 /**
1687 * Hides button from user pod added by showUserPodButton(). 1668 * Hides the custom icon in the user pod added by showUserPodCustomIcon().
1688 * @param {string} username Username of pod to remove button 1669 * @param {string} username Username of pod to remove button
1689 */ 1670 */
1690 hideUserPodButton: function(username) { 1671 hideUserPodCustomIcon: function(username) {
1691 var pod = this.getPodWithUsername_(username); 1672 var pod = this.getPodWithUsername_(username);
1692 if (pod == null) { 1673 if (pod == null) {
1693 console.error('Unable to hide user pod button for ' + username + 1674 console.error('Unable to hide user pod button for ' + username +
1694 ': user pod not found.'); 1675 ': user pod not found.');
1695 return; 1676 return;
1696 } 1677 }
1697 1678
1698 pod.customButtonElement.hidden = true; 1679 pod.customIconElement.hidden = true;
1699 }, 1680 },
1700 1681
1701 /** 1682 /**
1702 * Sets the authentication type used to authenticate the user. 1683 * Sets the authentication type used to authenticate the user.
1703 * @param {string} username Username of selected user 1684 * @param {string} username Username of selected user
1704 * @param {number} authType Authentication type, must be one of the 1685 * @param {number} authType Authentication type, must be one of the
1705 * values listed in AUTH_TYPE enum. 1686 * values listed in AUTH_TYPE enum.
1706 * @param {string} value The initial value to use for authentication. 1687 * @param {string} value The initial value to use for authentication.
1707 */ 1688 */
1708 setAuthType: function(username, authType, value) { 1689 setAuthType: function(username, authType, value) {
(...skipping 12 matching lines...) Expand all
1721 showEasyUnlockBubble: function() { 1702 showEasyUnlockBubble: function() {
1722 if (!this.focusedPod_) { 1703 if (!this.focusedPod_) {
1723 console.error('No focused pod to show Easy Unlock bubble.'); 1704 console.error('No focused pod to show Easy Unlock bubble.');
1724 return; 1705 return;
1725 } 1706 }
1726 1707
1727 var bubbleContent = document.createElement('div'); 1708 var bubbleContent = document.createElement('div');
1728 bubbleContent.classList.add('easy-unlock-button-content'); 1709 bubbleContent.classList.add('easy-unlock-button-content');
1729 bubbleContent.textContent = loadTimeData.getString('easyUnlockTooltip'); 1710 bubbleContent.textContent = loadTimeData.getString('easyUnlockTooltip');
1730 1711
1731 var attachElement = this.focusedPod_.customButtonElement; 1712 var attachElement = this.focusedPod_.customIconElement;
1732 /** @const */ var BUBBLE_OFFSET = 20; 1713 /** @const */ var BUBBLE_OFFSET = 20;
1733 /** @const */ var BUBBLE_PADDING = 8; 1714 /** @const */ var BUBBLE_PADDING = 8;
1734 $('bubble').showContentForElement(attachElement, 1715 $('bubble').showContentForElement(attachElement,
1735 cr.ui.Bubble.Attachment.RIGHT, 1716 cr.ui.Bubble.Attachment.RIGHT,
1736 bubbleContent, 1717 bubbleContent,
1737 BUBBLE_OFFSET, 1718 BUBBLE_OFFSET,
1738 BUBBLE_PADDING); 1719 BUBBLE_PADDING);
1739 }, 1720 },
1740 1721
1741 /** 1722 /**
(...skipping 507 matching lines...) Expand 10 before | Expand all | Expand 10 after
2249 if (this.podsWithPendingImages_.length == 0) { 2230 if (this.podsWithPendingImages_.length == 0) {
2250 this.classList.remove('images-loading'); 2231 this.classList.remove('images-loading');
2251 } 2232 }
2252 } 2233 }
2253 }; 2234 };
2254 2235
2255 return { 2236 return {
2256 PodRow: PodRow 2237 PodRow: PodRow
2257 }; 2238 };
2258 }); 2239 });
OLDNEW
« no previous file with comments | « chrome/browser/resources/login/user_pod_row.css ('k') | chrome/browser/resources/login/user_pod_template.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698