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

Side by Side Diff: ui/login/account_picker/user_pod_row.js

Issue 668833003: Make Smart Lock user pod icons work well with ChromeVox. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 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 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 274 matching lines...) Expand 10 before | Expand all | Expand 10 after
285 * @param {!string} id The id of the icon that should be shown. Should be 285 * @param {!string} id The id of the icon that should be shown. Should be
286 * one of the ids listed in {@code UserPodCustomIcon.ICONS}. 286 * one of the ids listed in {@code UserPodCustomIcon.ICONS}.
287 */ 287 */
288 setIcon: function(id) { 288 setIcon: function(id) {
289 UserPodCustomIcon.ICONS.forEach(function(icon) { 289 UserPodCustomIcon.ICONS.forEach(function(icon) {
290 this.iconElement.classList.toggle(icon.class, id == icon.id); 290 this.iconElement.classList.toggle(icon.class, id == icon.id);
291 }, this); 291 }, this);
292 }, 292 },
293 293
294 /** 294 /**
295 * Sets the ARIA label for the icon.
296 * @param {!string} ariaLabel
297 */
298 setAriaLabel: function(ariaLabel) {
299 this.iconElement.setAttribute('aria-label', ariaLabel);
300 },
301
302 /**
295 * Shows the icon. 303 * Shows the icon.
296 */ 304 */
297 show: function() { 305 show: function() {
298 this.resetHideTransitionState_(); 306 this.resetHideTransitionState_();
299 this.hidden = false; 307 this.hidden = false;
300 }, 308 },
301 309
302 /** 310 /**
303 * Hides the icon using a fade-out animation. 311 * Hides the icon using a fade-out animation.
304 */ 312 */
(...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after
345 if (tooltip.text && tooltip.autoshow) { 353 if (tooltip.text && tooltip.autoshow) {
346 this.hideTooltip_(true); 354 this.hideTooltip_(true);
347 this.showTooltip_(); 355 this.showTooltip_();
348 this.tooltipAutoshown_ = true; 356 this.tooltipAutoshown_ = true;
349 // Reset the tooltip active flag, which gets set in |showTooltip_|. 357 // Reset the tooltip active flag, which gets set in |showTooltip_|.
350 this.tooltipActive_ = false; 358 this.tooltipActive_ = false;
351 return; 359 return;
352 } 360 }
353 361
354 this.hideTooltip_(true); 362 this.hideTooltip_(true);
355
356 if (this.tooltip_)
357 this.iconElement.setAttribute('aria-lablel', this.tooltip_);
358 }, 363 },
359 364
360 /** 365 /**
361 * Sets up icon tabIndex attribute and handler for click and 'Enter' key 366 * Sets up icon tabIndex attribute and handler for click and 'Enter' key
362 * down events. 367 * down events.
363 * @param {?function()} callback If icon should be interactive, the 368 * @param {?function()} callback If icon should be interactive, the
364 * function to get called on click and 'Enter' key down events. Should 369 * function to get called on click and 'Enter' key down events. Should
365 * be null to make the icon non interactive. 370 * be null to make the icon non interactive.
366 */ 371 */
367 setInteractive: function(callback) { 372 setInteractive: function(callback) {
(...skipping 121 matching lines...) Expand 10 before | Expand all | Expand 10 after
489 * because autoshow flag was set. 494 * because autoshow flag was set.
490 * @private 495 * @private
491 */ 496 */
492 hideTooltip_: function(force) { 497 hideTooltip_: function(force) {
493 this.tooltipActive_ = false; 498 this.tooltipActive_ = false;
494 this.ensureTooltipTimeoutCleared_(); 499 this.ensureTooltipTimeoutCleared_();
495 if (!force && this.tooltipAutoshown_) 500 if (!force && this.tooltipAutoshown_)
496 return; 501 return;
497 $('bubble').hideForElement(this); 502 $('bubble').hideForElement(this);
498 this.tooltipAutoshown_ = false; 503 this.tooltipAutoshown_ = false;
499 this.iconElement.removeAttribute('aria-label');
500 }, 504 },
501 505
502 /** 506 /**
503 * Clears timaout for showing the tooltip if it's set. 507 * Clears timaout for showing the tooltip if it's set.
504 * @private 508 * @private
505 */ 509 */
506 ensureTooltipTimeoutCleared_: function() { 510 ensureTooltipTimeoutCleared_: function() {
507 if (this.showTooltipTimeout_) { 511 if (this.showTooltipTimeout_) {
508 clearTimeout(this.showTooltipTimeout_); 512 clearTimeout(this.showTooltipTimeout_);
509 this.showTooltipTimeout_ = null; 513 this.showTooltipTimeout_ = null;
(...skipping 1729 matching lines...) Expand 10 before | Expand all | Expand 10 after
2239 2243
2240 this.shouldShowApps_ = shouldShowApps; 2244 this.shouldShowApps_ = shouldShowApps;
2241 this.rebuildPods(); 2245 this.rebuildPods();
2242 }, 2246 },
2243 2247
2244 /** 2248 /**
2245 * Shows a custom icon on a user pod besides the input field. 2249 * Shows a custom icon on a user pod besides the input field.
2246 * @param {string} username Username of pod to add button 2250 * @param {string} username Username of pod to add button
2247 * @param {!{id: !string, 2251 * @param {!{id: !string,
2248 * hardlockOnClick: boolean, 2252 * hardlockOnClick: boolean,
2253 * ariaLabel: string | undefined,
2249 * tooltip: ({text: string, autoshow: boolean} | undefined)}} icon 2254 * tooltip: ({text: string, autoshow: boolean} | undefined)}} icon
2250 * The icon parameters. 2255 * The icon parameters.
2251 */ 2256 */
2252 showUserPodCustomIcon: function(username, icon) { 2257 showUserPodCustomIcon: function(username, icon) {
2253 var pod = this.getPodWithUsername_(username); 2258 var pod = this.getPodWithUsername_(username);
2254 if (pod == null) { 2259 if (pod == null) {
2255 console.error('Unable to show user pod button for ' + username + 2260 console.error('Unable to show user pod button for ' + username +
2256 ': user pod not found.'); 2261 ': user pod not found.');
2257 return; 2262 return;
2258 } 2263 }
2259 2264
2260 if (!icon.id) 2265 if (!icon.id)
2261 return; 2266 return;
2262 2267
2263 pod.customIconElement.setIcon(icon.id); 2268 pod.customIconElement.setIcon(icon.id);
2264 2269
2265 if (icon.hardlockOnClick) { 2270 if (icon.hardlockOnClick) {
2266 pod.customIconElement.setInteractive( 2271 pod.customIconElement.setInteractive(
2267 this.hardlockUserPod_.bind(this, username)); 2272 this.hardlockUserPod_.bind(this, username));
2268 } else { 2273 } else {
2269 pod.customIconElement.setInteractive(null); 2274 pod.customIconElement.setInteractive(null);
2270 } 2275 }
2271 2276
2277 var ariaLabel = icon.ariaLabel || (icon.tooltip && icon.tooltip.text);
2278 if (ariaLabel)
2279 pod.customIconElement.setAriaLabel(ariaLabel);
2280 else
2281 console.warn('No ARIA label for user pod custom icon.');
2282
2272 pod.customIconElement.show(); 2283 pod.customIconElement.show();
2273 2284
2274 // This has to be called after |show| in case the tooltip should be shown 2285 // This has to be called after |show| in case the tooltip should be shown
2275 // immediatelly. 2286 // immediatelly.
2276 pod.customIconElement.setTooltip( 2287 pod.customIconElement.setTooltip(
2277 icon.tooltip || {text: '', autoshow: false}); 2288 icon.tooltip || {text: '', autoshow: false});
2278 }, 2289 },
2279 2290
2280 /** 2291 /**
2281 * Hard-locks user pod for the user. If user pod is hard-locked, it can be 2292 * Hard-locks user pod for the user. If user pod is hard-locked, it can be
(...skipping 663 matching lines...) Expand 10 before | Expand all | Expand 10 after
2945 if (pod && pod.multiProfilesPolicyApplied) { 2956 if (pod && pod.multiProfilesPolicyApplied) {
2946 pod.userTypeBubbleElement.classList.remove('bubble-shown'); 2957 pod.userTypeBubbleElement.classList.remove('bubble-shown');
2947 } 2958 }
2948 } 2959 }
2949 }; 2960 };
2950 2961
2951 return { 2962 return {
2952 PodRow: PodRow 2963 PodRow: PodRow
2953 }; 2964 };
2954 }); 2965 });
OLDNEW
« chrome/app/generated_resources.grd ('K') | « chrome/browser/signin/screenlock_bridge.cc ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698