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

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

Issue 24625003: Delay wallpaper load by 2 * average wallpaper load time. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Review comments fixed. Created 7 years, 2 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 (c) 2012 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 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 <include src="wallpaper_loader.js"></include>
dzhioev (left Google) 2013/10/22 00:01:19 As I know, closing tag is not needed.
Alexander Alekseev 2013/10/22 11:33:37 Nevertheless it seems it's always used with closin
6
5 /** 7 /**
6 * @fileoverview User pod row implementation. 8 * @fileoverview User pod row implementation.
7 */ 9 */
8 10
9 cr.define('login', function() { 11 cr.define('login', function() {
10 /** 12 /**
11 * Number of displayed columns depending on user pod count. 13 * Number of displayed columns depending on user pod count.
12 * @type {Array.<number>} 14 * @type {Array.<number>}
13 * @const 15 * @const
14 */ 16 */
15 var COLUMNS = [0, 1, 2, 3, 4, 5, 4, 4, 4, 5, 5, 6, 6, 5, 5, 6, 6, 6, 6]; 17 var COLUMNS = [0, 1, 2, 3, 4, 5, 4, 4, 4, 5, 5, 6, 6, 5, 5, 6, 6, 6, 6];
16 18
17 /** 19 /**
18 * Whether to preselect the first pod automatically on login screen. 20 * Whether to preselect the first pod automatically on login screen.
19 * @type {boolean} 21 * @type {boolean}
20 * @const 22 * @const
21 */ 23 */
22 var PRESELECT_FIRST_POD = true; 24 var PRESELECT_FIRST_POD = true;
23 25
24 /** 26 /**
25 * Wallpaper load delay in milliseconds.
26 * @type {number}
27 * @const
28 */
29 var WALLPAPER_LOAD_DELAY_MS = 500;
30
31 /**
32 * Wallpaper load delay in milliseconds. TODO(nkostylev): Tune this constant.
33 * @type {number}
34 * @const
35 */
36 var WALLPAPER_BOOT_LOAD_DELAY_MS = 100;
37
38 /**
39 * Maximum time for which the pod row remains hidden until all user images 27 * Maximum time for which the pod row remains hidden until all user images
40 * have been loaded. 28 * have been loaded.
41 * @type {number} 29 * @type {number}
42 * @const 30 * @const
43 */ 31 */
44 var POD_ROW_IMAGES_LOAD_TIMEOUT_MS = 3000; 32 var POD_ROW_IMAGES_LOAD_TIMEOUT_MS = 3000;
45 33
46 /** 34 /**
47 * Public session help topic identifier. 35 * Public session help topic identifier.
48 * @type {number} 36 * @type {number}
(...skipping 903 matching lines...) Expand 10 before | Expand all | Expand 10 after
952 * @extends {HTMLDivElement} 940 * @extends {HTMLDivElement}
953 */ 941 */
954 var PodRow = cr.ui.define('podrow'); 942 var PodRow = cr.ui.define('podrow');
955 943
956 PodRow.prototype = { 944 PodRow.prototype = {
957 __proto__: HTMLDivElement.prototype, 945 __proto__: HTMLDivElement.prototype,
958 946
959 // Whether this user pod row is shown for the first time. 947 // Whether this user pod row is shown for the first time.
960 firstShown_: true, 948 firstShown_: true,
961 949
962 // Whether the initial wallpaper load after boot has been requested. Used
963 // only if |Oobe.getInstance().shouldLoadWallpaperOnBoot()| is true.
964 bootWallpaperLoaded_: false,
965
966 // True if inside focusPod(). 950 // True if inside focusPod().
967 insideFocusPod_: false, 951 insideFocusPod_: false,
968 952
969 // True if user pod has been activated with keyboard.
970 // In case of activation with keyboard we delay wallpaper change.
971 keyboardActivated_: false,
972
973 // Focused pod. 953 // Focused pod.
974 focusedPod_: undefined, 954 focusedPod_: undefined,
975 955
976 // Activated pod, i.e. the pod of current login attempt. 956 // Activated pod, i.e. the pod of current login attempt.
977 activatedPod_: undefined, 957 activatedPod_: undefined,
978 958
979 // Pod that was most recently focused, if any. 959 // Pod that was most recently focused, if any.
980 lastFocusedPod_: undefined, 960 lastFocusedPod_: undefined,
981 961
982 // When moving through users quickly at login screen, set a timeout to 962 // Note: created only in decorate() !
983 // prevent loading intermediate wallpapers. 963 wallpaperLoader_: undefined,
984 loadWallpaperTimeout_: null,
985 964
986 // Pods whose initial images haven't been loaded yet. 965 // Pods whose initial images haven't been loaded yet.
987 podsWithPendingImages_: [], 966 podsWithPendingImages_: [],
988 967
989 /** @override */ 968 /** @override */
990 decorate: function() { 969 decorate: function() {
991 this.style.left = 0; 970 this.style.left = 0;
992 971
993 // Event listeners that are installed for the time period during which 972 // Event listeners that are installed for the time period during which
994 // the element is visible. 973 // the element is visible.
995 this.listeners_ = { 974 this.listeners_ = {
996 focus: [this.handleFocus_.bind(this), true /* useCapture */], 975 focus: [this.handleFocus_.bind(this), true /* useCapture */],
997 click: [this.handleClick_.bind(this), true], 976 click: [this.handleClick_.bind(this), true],
998 mousemove: [this.handleMouseMove_.bind(this), false], 977 mousemove: [this.handleMouseMove_.bind(this), false],
999 keydown: [this.handleKeyDown.bind(this), false] 978 keydown: [this.handleKeyDown.bind(this), false]
1000 }; 979 };
980 this.wallpaperLoader_ = new login.WallpaperLoader();
1001 }, 981 },
1002 982
1003 /** 983 /**
1004 * Returns all the pods in this pod row. 984 * Returns all the pods in this pod row.
1005 * @type {NodeList} 985 * @type {NodeList}
1006 */ 986 */
1007 get pods() { 987 get pods() {
1008 return this.children; 988 return this.children;
1009 }, 989 },
1010 990
(...skipping 224 matching lines...) Expand 10 before | Expand all | Expand 10 after
1235 return; 1215 return;
1236 } 1216 }
1237 1217
1238 // Make sure there's only one focusPod operation happening at a time. 1218 // Make sure there's only one focusPod operation happening at a time.
1239 if (this.insideFocusPod_) { 1219 if (this.insideFocusPod_) {
1240 this.keyboardActivated_ = false; 1220 this.keyboardActivated_ = false;
1241 return; 1221 return;
1242 } 1222 }
1243 this.insideFocusPod_ = true; 1223 this.insideFocusPod_ = true;
1244 1224
1245 clearTimeout(this.loadWallpaperTimeout_); 1225 this.wallpaperLoader_.reset();
1246 for (var i = 0, pod; pod = this.pods[i]; ++i) { 1226 for (var i = 0, pod; pod = this.pods[i]; ++i) {
1247 if (!this.isSinglePod) { 1227 if (!this.isSinglePod) {
1248 pod.isActionBoxMenuActive = false; 1228 pod.isActionBoxMenuActive = false;
1249 } 1229 }
1250 if (pod != podToFocus) { 1230 if (pod != podToFocus) {
1251 pod.isActionBoxMenuHovered = false; 1231 pod.isActionBoxMenuHovered = false;
1252 pod.classList.remove('focused'); 1232 pod.classList.remove('focused');
1253 pod.classList.remove('faded'); 1233 pod.classList.remove('faded');
1254 pod.reset(false); 1234 pod.reset(false);
1255 } 1235 }
1256 } 1236 }
1257 1237
1258 // Clear any error messages for previous pod. 1238 // Clear any error messages for previous pod.
1259 if (!this.isFocused(podToFocus)) 1239 if (!this.isFocused(podToFocus))
1260 Oobe.clearErrors(); 1240 Oobe.clearErrors();
1261 1241
1262 var hadFocus = !!this.focusedPod_; 1242 var hadFocus = !!this.focusedPod_;
1263 this.focusedPod_ = podToFocus; 1243 this.focusedPod_ = podToFocus;
1264 if (podToFocus) { 1244 if (podToFocus) {
1265 podToFocus.classList.remove('faded'); 1245 podToFocus.classList.remove('faded');
1266 podToFocus.classList.add('focused'); 1246 podToFocus.classList.add('focused');
1267 podToFocus.reset(true); // Reset and give focus. 1247 podToFocus.reset(true); // Reset and give focus.
1268 chrome.send('focusPod', [podToFocus.user.emailAddress]); 1248 chrome.send('focusPod', [podToFocus.user.emailAddress]);
1269 if (hadFocus && this.keyboardActivated_) { 1249
1270 // Delay wallpaper loading to let user tab through pods without lag. 1250 this.wallpaperLoader_.scheduleLoad(podToFocus.user.emailAddress);
1271 this.loadWallpaperTimeout_ = window.setTimeout(
1272 this.loadWallpaper_.bind(this), WALLPAPER_LOAD_DELAY_MS);
1273 } else if (!this.firstShown_) {
1274 // Load wallpaper immediately if there no pod was focused
1275 // previously, and it is not a boot into user pod list case.
1276 this.loadWallpaper_();
1277 }
1278 this.firstShown_ = false; 1251 this.firstShown_ = false;
1279 this.lastFocusedPod_ = podToFocus; 1252 this.lastFocusedPod_ = podToFocus;
1280 } 1253 }
1281 this.insideFocusPod_ = false; 1254 this.insideFocusPod_ = false;
1282 this.keyboardActivated_ = false; 1255 this.keyboardActivated_ = false;
1283 }, 1256 },
1284 1257
1285 /** 1258 /**
1286 * Loads wallpaper for the active user pod, if any.
1287 * @private
1288 */
1289 loadWallpaper_: function() {
1290 if (this.focusedPod_)
1291 chrome.send('loadWallpaper', [this.focusedPod_.user.username]);
1292 },
1293
1294 /**
1295 * Resets wallpaper to the last active user's wallpaper, if any. 1259 * Resets wallpaper to the last active user's wallpaper, if any.
1296 */ 1260 */
1297 loadLastWallpaper: function() { 1261 loadLastWallpaper: function() {
1298 if (this.lastFocusedPod_) 1262 if (this.lastFocusedPod_)
1299 chrome.send('loadWallpaper', [this.lastFocusedPod_.user.username]); 1263 this.wallpaperLoader_.scheduleLoad(this.lastFocusedPod_.user.username);
1300 }, 1264 },
1301 1265
1302 /** 1266 /**
1267 * Handles 'onWallpaperLoaded' event. Recalculates statistics and
1268 * [re]schedules next wallpaper load.
1269 */
1270 onWallpaperLoaded: function(email) {
1271 this.wallpaperLoader_.onWallpaperLoaded(email);
1272 },
1273
1274 /**
1303 * Returns the currently activated pod. 1275 * Returns the currently activated pod.
1304 * @type {UserPod} 1276 * @type {UserPod}
1305 */ 1277 */
1306 get activatedPod() { 1278 get activatedPod() {
1307 return this.activatedPod_; 1279 return this.activatedPod_;
1308 }, 1280 },
1309 set activatedPod(pod) { 1281 set activatedPod(pod) {
1310 if (pod && pod.activate()) 1282 if (pod && pod.activate())
1311 this.activatedPod_ = pod; 1283 this.activatedPod_ = pod;
1312 }, 1284 },
(...skipping 240 matching lines...) Expand 10 before | Expand all | Expand 10 after
1553 if (this.focusedPod_) { 1525 if (this.focusedPod_) {
1554 var focusedPod = this.focusedPod_; 1526 var focusedPod = this.focusedPod_;
1555 var screen = this.parentNode; 1527 var screen = this.parentNode;
1556 var self = this; 1528 var self = this;
1557 focusedPod.addEventListener('webkitTransitionEnd', function f(e) { 1529 focusedPod.addEventListener('webkitTransitionEnd', function f(e) {
1558 if (e.target == focusedPod) { 1530 if (e.target == focusedPod) {
1559 focusedPod.removeEventListener('webkitTransitionEnd', f); 1531 focusedPod.removeEventListener('webkitTransitionEnd', f);
1560 focusedPod.reset(true); 1532 focusedPod.reset(true);
1561 // Notify screen that it is ready. 1533 // Notify screen that it is ready.
1562 screen.onShow(); 1534 screen.onShow();
1563 // Boot transition: load wallpaper. 1535 self.wallpaperLoader_.scheduleLoad(focusedPod.user.username);
1564 if (!self.bootWallpaperLoaded_ &&
1565 Oobe.getInstance().shouldLoadWallpaperOnBoot()) {
1566 self.loadWallpaperTimeout_ = window.setTimeout(
1567 self.loadWallpaper_.bind(self), WALLPAPER_BOOT_LOAD_DELAY_MS);
1568 self.bootWallpaperLoaded_ = true;
1569 }
1570 } 1536 }
1571 }); 1537 });
1572 } 1538 }
1573 }, 1539 },
1574 1540
1575 /** 1541 /**
1576 * Called right before the pod row is shown. 1542 * Called right before the pod row is shown.
1577 */ 1543 */
1578 handleBeforeShow: function() { 1544 handleBeforeShow: function() {
1579 for (var event in this.listeners_) { 1545 for (var event in this.listeners_) {
(...skipping 27 matching lines...) Expand all
1607 if (this.podsWithPendingImages_.length == 0) { 1573 if (this.podsWithPendingImages_.length == 0) {
1608 this.classList.remove('images-loading'); 1574 this.classList.remove('images-loading');
1609 } 1575 }
1610 } 1576 }
1611 }; 1577 };
1612 1578
1613 return { 1579 return {
1614 PodRow: PodRow 1580 PodRow: PodRow
1615 }; 1581 };
1616 }); 1582 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698