Easy Unlock: Add support for hard locking

ui/login/account_picker/user_pod_row.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 67 matching lines @@
    * @const
    */
   var HELP_TOPIC_PUBLIC_SESSION = 3041033;
 
   /**
    * Tab order for user pods. Update these when adding new controls.
    * @enum {number}
    * @const
    */
   var UserPodTabOrder = {
-    POD_INPUT: 1,     // Password input fields (and whole pods themselves).
-    HEADER_BAR: 2,    // Buttons on the header bar (Shutdown, Add User).
-    ACTION_BOX: 3,    // Action box buttons.
-    PAD_MENU_ITEM: 4  // User pad menu items (Remove this user).
+    POD_INPUT: 1,        // Password input fields (and whole pods themselves).
+    POD_CUSTOM_ICON: 2,  // Pod custom icon next to passwrod input field.
+    HEADER_BAR: 3,       // Buttons on the header bar (Shutdown, Add User).
+    ACTION_BOX: 4,       // Action box buttons.
+    PAD_MENU_ITEM: 5     // User pad menu items (Remove this user).
   };
 
   /**
    * Supported authentication types. Keep in sync with the enum in
    * chrome/browser/signin/screenlock_bridge.h
    * @enum {number}
    * @const
    */
   var AUTH_TYPE = {
     OFFLINE_PASSWORD: 0,
     ONLINE_SIGN_IN: 1,
     NUMERIC_PIN: 2,
     USER_CLICK: 3,
     EXPAND_THEN_USER_CLICK: 4,
+    FORCE_OFFLINE_PASSWORD: 5
   };
 
   /**
    * Names of authentication types.
    */
   var AUTH_TYPE_NAMES = {
     0: 'offlinePassword',
     1: 'onlineSignIn',
     2: 'numericPin',
     3: 'userClick',
     4: 'expandThenUserClick',
+    5: 'forceOfflinePassword'
   };
 
   // Focus and tab order are organized as follows:
   //
   // (1) all user pods have tab index 1 so they are traversed first;
   // (2) when a user pod is activated, its tab index is set to -1 and its
   // main input field gets focus and tab index 1;
-  // (3) buttons on the header bar have tab index 2 so they follow user pods;
-  // (4) Action box buttons have tab index 3 and follow header bar buttons;
-  // (5) lastly, focus jumps to the Status Area and back to user pods.
+  // (3) if user pod custom icon is interactive, it has tab index 2 so it
+  // follows the input.
+  // (4) buttons on the header bar have tab index 3 so they follow the custom
+  // icon, or user pod if custom icon is not interactive;
+  // (5) Action box buttons have tab index 4 and follow header bar buttons;
+  // (6) lastly, focus jumps to the Status Area and back to user pods.
   //
   // 'Focus' event is handled by a capture handler for the whole document
   // and in some cases 'mousedown' event handlers are used instead of 'click'
   // handlers where it's necessary to prevent 'focus' event from being fired.
 
   /**
    * Helper function to remove a class from given element.
    * @param {!HTMLElement} el Element whose class list to change.
    * @param {string} cl Class to remove.
    */
@@ skipping 108 matching lines @@
     animationInterval_: null,
 
     /**
      * The width of the resource that contains representations for different
      * animation stages.
      * @type {number}
      * @private
      */
     animationResourceSize_: 0,
 
+    /**
+     * When {@code fadeOut} is called, the element gets hidden using fadeout
+     * animation. This is reference to the listener for transition end added to
+     * the icon element while it's fading out.
+     * @type {?function(Event)}
+     * @private
+     */
+    hideTransitionListener_: null,
+
+    /**
+     * Callback for click and 'Enter' key events that gets set if the icon is
+     * interactive.
+     * @type {?function()}
+     * @private
+     */
+    actionHandler_: null,
+
     /** @override */
     decorate: function() {
       this.iconElement.addEventListener('mouseover',
                                         this.showTooltipSoon_.bind(this));
       this.iconElement.addEventListener('mouseout',
                                          this.hideTooltip_.bind(this, false));
       this.iconElement.addEventListener('mousedown',
                                          this.hideTooltip_.bind(this, false));
+      this.iconElement.addEventListener('click',
+                                        this.handleClick_.bind(this));
+      this.iconElement.addEventListener('keydown',
+                                        this.handleKeyDown_.bind(this));
+
+      // When the icon is focused using mouse, there should be no outline shown.

[dzhioev (left Google), 2014/08/14 10:46:28]

All you need is:
this.iconElement.addEventListener('mousedown', function(e) {
  e.preventDefault();
});

[tbarzic, 2014/08/14 18:15:51]

yes, that's much cleaner, thanks

+      this.iconElement.addEventListener(
+          'mousedown',
+          this.toggleFocusOutline_.bind(this, true));
+
+      // Reenable focus outline when the icon gets blured. It may get focused
+      // using keyboard later, in which case there should be an outline.
+      this.iconElement.addEventListener(
+          'blur',
+          this.toggleFocusOutline_.bind(this, false));
     },
 
     /**
      * Getter for the icon element's div.
      * @return {HTMLDivElement}
      */
     get iconElement() {
       return this.querySelector('.custom-icon');
     },
 
@@ skipping 18 matching lines @@
       this.iconElement.style.backgroundImage =
           '-webkit-image-set(' +
               'url(' + iconUrl + '@1x) 1x,' +
               'url(' + iconUrl + '@2x) 2x)';
     },
 
     /**
      * Shows the icon.
      */
     show: function() {
+      this.resetHideTransitionState_();
       this.hidden = false;
     },
 
     /**
-     * Hides the icon.  Makes sure the tooltip is hidden and animation reset.
+     * Hides the icon using a fade-out animation.
      */
-    hide: function() {
+    fadeOut: function() {
+      // The icon is already being hidden.
+      if (this.iconElement.classList.contains('faded'))
+        return;
+
       this.hideTooltip_(true);
-      this.setAnimation(null);
-      this.hidden = true;
+      this.iconElement.classList.add('faded');
+      this.hideTransitionListener_ = this.hide_.bind(this);
+      this.iconElement.addEventListener('webkitTransitionEnd',
+                                        this.hideTransitionListener_);
+      ensureTransitionEndEvent(this.iconElement, 200);
     },
 
     /**
      * Sets the icon size element size.
      * @param {!{width: number, height: number}} size The icon size.
      */
     setSize: function(size) {
       this.height_ = size.height < CUSTOM_ICON_CONTAINER_SIZE ?
           size.height : CUSTOM_ICON_COTAINER_SIZE;
       this.iconElement.style.height = this.height_ + 'px';
@@ skipping 75 matching lines @@
       this.iconElement.style.backgroundPosition = 'center';
       if (!animation)
         return;
       this.lastAnimationOffset_ = 0;
       this.animationResourceSize_ = animation.resourceWidth;
       this.animationInterval_ = setInterval(this.progressAnimation_.bind(this),
                                             animation.frameLengthMs);
     },
 
     /**
+     * Sets up icon tabIndex attribute and handler for click and 'Enter' key
+     * down events.
+     * @param {boolean} value Whether the icon is interactive (i.e. doesn't
+     *     ignore click/keydown events). Iff set the tabIndex attribute for the
+     *     icon element will be set.
+     * @param {function()=} opt_callback If icon is interactive, the function to
+     *     get called on click and 'Enter' key down events. If not set,
+     *     {@code value} argument is ignored, and the icon is considered non
+     *     interactive.
+     */
+    setInteractive: function(value, opt_callback) {
+      if (!!this.actionHandler_ == value)
+        return;

[dzhioev (left Google), 2014/08/14 10:46:28]

What if we want to replace callback?

[xiyuan, 2014/08/14 17:41:07]

Looks like we should just do this.hardlockUserPod_.bind() here instead of using
|opt_callback| since we don't have other action handler.

[tbarzic, 2014/08/14 18:15:51]

Done.

[tbarzic, 2014/08/14 18:15:51]

hardlockUserPod_ is defined on UserPod, not UserPodCustomIcon (i.e. |this|).

I could move the logic here, but I'd rather keep the icon element agnostic of
the user associated with the user pod that contains the icon.

Though, if you feel strongly about this, I'll reshuffle the code a bit :)

[dzhioev (left Google), 2014/08/14 19:38:21]

No I just meant, that if you call 'setInteractive(true, callback)', you expect
that your callback will be called on click. However, if some callback already
set in icon, your callback will be just silently ignored. I think we should
replace existing callback with a new one in this case.

[xiyuan, 2014/08/14 19:40:01]

I see. In this case, passing the callback is right.

My other comment is that |value| and |opt_callback| seem a bit overlapping. Is
there a case that we need to set a callback when |value| is false (i.e.
non-interactive)? If not, could we just use !!opt_callback as an indication of
whether be interactive?

[tbarzic, 2014/08/14 20:35:07]

yeah, I got there (and fixed it). I was replying to xiyuan there :)

[tbarzic, 2014/08/14 21:03:07]

Done.

+
+      if (value && opt_callback) {
+        this.iconElement.setAttribute('tabIndex',
+                                       UserPodTabOrder.POD_CUSTOM_ICON);
+        this.actionHandler_ = opt_callback;
+      } else {
+        this.iconElement.removeAttribute('tabIndex');
+        this.actionHandler_ = null;
+      }
+    },
+
+    /**
+     * Hides the icon. Makes sure the tooltip is hidden and animation reset.
+     * @private
+     */
+    hide_: function() {
+      this.hideTooltip_(true);
+      this.hidden = true;
+      this.setAnimation(null);
+      this.setInteractive(false);
+      this.resetHideTransitionState_();
+    },
+
+    /**
+     * Ensures the icon's transition state potentially set by a call to
+     * {@code fadeOut} is cleared.
+     * @private
+     */
+    resetHideTransitionState_: function() {
+      if (this.hideTransitionListener_) {
+        this.iconElement.removeEventListener('webkitTransitionEnd',
+                                             this.hideTransitionListener_);
+        this.hideTransitionListener_ = null;
+      }
+      this.iconElement.classList.toggle('faded', false);
+    },
+
+    /**
+     * Handles click event on the icon element. No-op if
+     * {@code this.actionHandler_} is not set.
+     * @param {Event} e The click event.
+     * @private
+     */
+    handleClick_: function(e) {
+      if (!this.actionHandler_)
+        return;
+      this.actionHandler_();
+      stopEventPropagation(e);
+    },
+
+    /**
+     * Handles key down event on the icon element. Only 'Enter' key is handled.
+     * No-op if {@code this.actionHandler_} is not set.
+     * @param {Event} e The key down event.
+     * @private
+     */
+    handleKeyDown_: function(e) {
+      if (!this.actionHandler_ || e.keyIdentifier != 'Enter')
+        return;
+      this.actionHandler_(e);
+      stopEventPropagation(e);
+    },
+
+    /**
+     * Toggles 'focus-outline-invisible' class on the icon element.
+     * @param {boolean} value Whether the class should be added or removed from
+     *     the class list.
+     * @private
+     */
+    toggleFocusOutline_: function(value) {
+      this.iconElement.classList.toggle('focus-outline-invisible', value);
+    },
+
+    /**
      * Called when mouse enters the icon. It sets timeout for showing the
      * tooltip.
      * @private
      */
     showTooltipSoon_: function() {
       if (this.showTooltipTimeout_ || this.tooltipActive_)
         return;
       this.showTooltipTimeout_ =
           setTimeout(this.showTooltip_.bind(this), 1000);
     },
 
     /**
-     * Shows the current tooltip, if one is set.
+     * Shows the current tooltip if one is set.
      * @private
      */
     showTooltip_: function() {
       if (this.hidden || !this.tooltip_ || this.tooltipActive_)
         return;
 
       // If autoshown bubble got hidden, clear the autoshown flag.
       if ($('bubble').hidden && this.tooltipAutoshown_)
         this.tooltipAutoshown_ = false;
 
@@ skipping 537 matching lines @@
      */
     get authValue() {
       return this.authValue_;
     },
 
     /**
      * True if the the user pod uses a password to authenticate.
      * @type {bool}
      */
     get isAuthTypePassword() {
-      return this.authType_ == AUTH_TYPE.OFFLINE_PASSWORD;
+      return this.authType_ == AUTH_TYPE.OFFLINE_PASSWORD ||
+             this.authType_ == AUTH_TYPE.FORCE_OFFLINE_PASSWORD;
     },
 
     /**
      * True if the the user pod uses a user click to authenticate.
      * @type {bool}
      */
     get isAuthTypeUserClick() {
       return this.authType_ == AUTH_TYPE.USER_CLICK;
     },
 
@@ skipping 1205 matching lines @@
         pod.customIconElement.setIconAsResourceUrl(icon.resourceUrl);
       } else if (icon.data) {
         pod.customIconElement.setIconAsImageSet(icon.data);
       } else {
         return;
       }
 
       pod.customIconElement.setSize(icon.size || {width: 0, height: 0});
       pod.customIconElement.setAnimation(icon.animation || null);
       pod.customIconElement.setOpacity(icon.opacity || 100);
+      pod.customIconElement.setInteractive(
+          icon.hardlockOnClick,
+          this.hardlockUserPod_.bind(this, username));
       pod.customIconElement.show();
       // This has to be called after |show| in case the tooltip should be shown
       // immediatelly.
       pod.customIconElement.setTooltip(
           icon.tooltip || {text: '', autoshow: false});
     },
 
     /**
+     * Hard-locks user pod for the user. If user pod is hard-locked, it can be
+     * only unlocked using password, and the authentication type cannot be
+     * changed.
+     * @param {!string} username The user's username.
+     * @private
+     */
+    hardlockUserPod_: function(username) {
+      chrome.send('hardlockPod', [username]);
+    },
+
+    /**
      * Hides the custom icon in the user pod added by showUserPodCustomIcon().
      * @param {string} username Username of pod to remove button
      */
     hideUserPodCustomIcon: function(username) {
       var pod = this.getPodWithUsername_(username);
       if (pod == null) {
         console.error('Unable to hide user pod button for ' + username +
                       ': user pod not found.');
         return;
       }
 
-      pod.customIconElement.hide();
+      pod.customIconElement.fadeOut();
     },
 
     /**
      * Sets the authentication type used to authenticate the user.
      * @param {string} username Username of selected user
      * @param {number} authType Authentication type, must be one of the
      *                          values listed in AUTH_TYPE enum.
      * @param {string} value The initial value to use for authentication.
      */
     setAuthType: function(username, authType, value) {
@@ skipping 624 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });