Refresh UI of public session pods for new login screen

ui/login/account_picker/md_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() {
   /**
    * Variables used for pod placement processing. Width and height should be
    * synced with computed CSS sizes of pods.
    */
   var CROS_POD_WIDTH = 306;
   var CROS_SMALL_POD_WIDTH = 304;
   var CROS_EXTRA_SMALL_POD_WIDTH = 282;
   var DESKTOP_POD_WIDTH = 180;
   var MD_DESKTOP_POD_WIDTH = 160;
-  var PUBLIC_EXPANDED_BASIC_WIDTH = 500;
-  var PUBLIC_EXPANDED_ADVANCED_WIDTH = 610;
+  var PUBLIC_EXPANDED_WIDTH = 622;
   var CROS_POD_HEIGHT = 346;
   var CROS_SMALL_POD_HEIGHT = 74;
   var CROS_EXTRA_SMALL_POD_HEIGHT = 60;
   var DESKTOP_POD_HEIGHT = 226;
   var MD_DESKTOP_POD_HEIGHT = 200;
+  var PUBLIC_EXPANDED_HEIGHT = 324;
   var POD_ROW_PADDING = 10;
   var DESKTOP_ROW_PADDING = 32;
   var CUSTOM_ICON_CONTAINER_SIZE = 40;
   var CROS_PIN_POD_HEIGHT = 417;
   var SCROLL_MASK_HEIGHT = 112;
   var BANNER_MESSAGE_WIDTH = 520;
   var CROS_POD_HEIGHT_WITH_PIN = 618;
+  var PUBLIC_SESSION_ICON_WIDTH = 12;
 
   /**
    * The maximum number of users that each pod placement method can handle.
    */
   var POD_ROW_LIMIT = 2;
   var LANDSCAPE_MODE_LIMIT = 6;
   var PORTRAIT_MODE_LIMIT = 9;
 
   /**
    * Minimal padding between user pod and virtual keyboard.
@@ skipping 1102 matching lines @@
 
     /**
      * Gets the fingerprint icon area.
      * @type {!HTMLDivElement}
      */
     get fingerprintIconElement() {
       return this.querySelector('.fingerprint-icon-container');
     },
 
     /**
+     * Returns true if it's a public session pod.
+     * @type {boolean}
+     */
+    get isPublicSessionPod() {
+      return this.classList.contains('public-account');
+    },
+
+    /**
      * Sets the pod style.
      * @param {UserPod.Style} style Style set to the pod.
      */
     setPodStyle: function(style) {
       switch (style) {
         case UserPod.Style.LARGE:
           this.querySelector('.large-pod').hidden = false;
           this.querySelector('.small-pod').hidden = true;
           break;
         case UserPod.Style.SMALL:
@@ skipping 915 matching lines @@
     },
 
     /**
      * Handles click event on a user pod.
      * @param {Event} e Click event.
      */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
+      // Click events on public session pods should only be handled by their
+      // overriding handler.
+      if (this.isPublicSessionPod)
+        return;
+
       if (this.getPodStyle() != UserPod.Style.LARGE) {
         $('pod-row').switchMainPod(this);
         return;
       }
       Oobe.clearErrors();
 
       if (!this.isActionBoxMenuActive) {
         if (this.isAuthTypeOnlineSignIn) {
           this.showSigninUI();
         } else if (this.isAuthTypeUserClick && this.userClickAuthAllowed_) {
@@ skipping 66 matching lines @@
       node.appendChild(el);
     }
 
     return node;
   });
 
   PublicAccountUserPod.prototype = {
     __proto__: UserPod.prototype,
 
     /**
+     * Keeps track of the pod's original position before it's expanded.
+     * @type {Object}
+     * @private
+     */
+    lastPosition_: {left: 'unset', top: 'unset'},
+    get lastPosition() {
+      return this.lastPosition_;
+    },
+    set lastPosition(value) {
+      this.lastPosition_ = value;
+    },
+
+    /**
      * "Enter" button in expanded side pane.
      * @type {!HTMLButtonElement}
      */
     get enterButtonElement() {
       return this.querySelector('.enter-button');
     },
 
     /**
      * Boolean flag of whether the pod is showing the side pane. The flag
      * controls whether 'expanded' class is added to the pod's class list and
      * resets tab order because main input element changes when the 'expanded'
      * state changes.
      * @type {boolean}
      */
     get expanded() {
       return this.classList.contains('expanded');
     },
 
     set expanded(expanded) {
+      if (this.getPodStyle() != UserPod.Style.LARGE) {
+        console.error(
+            'Attempt to expand a public session pod when it is not large.');
+        return;
+      }
       if (this.expanded == expanded)
         return;
 
       this.resetTabOrder();
       this.classList.toggle('expanded', expanded);
       if (expanded) {
         // Show the advanced expanded pod directly if there are at least two
         // recommended locales. This will be the case in multilingual
         // environments where users are likely to want to choose among locales.
         if (this.querySelector('.language-select').multipleRecommendedLocales)
           this.classList.add('advanced');
-        this.usualLeft = this.left;
-        this.makeSpaceForExpandedPod_();
-      } else if (typeof(this.usualLeft) != 'undefined') {
-        this.left = this.usualLeft;
+      } else {
+        this.classList.remove('advanced');
       }
-
-      var self = this;
-      this.classList.add('animating');
-      this.addEventListener('transitionend', function f(e) {
-        self.removeEventListener('transitionend', f);
-        self.classList.remove('animating');
-
-        // Accessibility focus indicator does not move with the focused
-        // element. Sends a 'focus' event on the currently focused element
-        // so that accessibility focus indicator updates its location.
-        if (document.activeElement)
-          document.activeElement.dispatchEvent(new Event('focus'));
-      });
-      // Guard timer set to animation duration + 20ms.
-      ensureTransitionEndEvent(this, 200);
+      this.parentNode.handlePublicPodExpansion(this, expanded);
     },
 
     get advanced() {
       return this.classList.contains('advanced');
     },
 
     /** @override */
     get mainInput() {
       if (this.expanded)
         return this.enterButtonElement;
@@ skipping 16 matching lines @@
           // newly focused "Enter" button.
           e.preventDefault();
         }
       }).bind(this));
 
       var learnMore = this.querySelector('.learn-more');
       learnMore.addEventListener('mousedown', stopEventPropagation);
       learnMore.addEventListener('click', this.handleLearnMoreEvent);
       learnMore.addEventListener('keydown', this.handleLearnMoreEvent);
 
-      learnMore = this.querySelector('.expanded-pane-learn-more');
-      learnMore.addEventListener('click', this.handleLearnMoreEvent);
-      learnMore.addEventListener('keydown', this.handleLearnMoreEvent);
-
       var languageSelect = this.querySelector('.language-select');
       languageSelect.tabIndex = UserPodTabOrder.POD_INPUT;
       languageSelect.manuallyChanged = false;
       languageSelect.addEventListener(
           'change',
           function() {
             languageSelect.manuallyChanged = true;
             this.getPublicSessionKeyboardLayouts_();
           }.bind(this));
 
       var keyboardSelect = this.querySelector('.keyboard-select');
       keyboardSelect.tabIndex = UserPodTabOrder.POD_INPUT;
       keyboardSelect.loadedLocale = null;
 
-      var languageAndInput = this.querySelector('.language-and-input');
-      languageAndInput.tabIndex = UserPodTabOrder.POD_INPUT;
-      languageAndInput.addEventListener('click',
-                                        this.transitionToAdvanced_.bind(this));
+      var languageAndInputLink = this.querySelector('.language-and-input');
+      languageAndInputLink.tabIndex = UserPodTabOrder.POD_INPUT;
+      languageAndInputLink.addEventListener(
+          'click', this.transitionToAdvanced_.bind(this));
+
+      var languageAndInputIcon =
+          this.querySelector('.language-and-input-dropdown');
+      languageAndInputIcon.tabIndex = UserPodTabOrder.POD_INPUT;
+      languageAndInputIcon.addEventListener(
+          'click', this.transitionToAdvanced_.bind(this));
 
       var monitoringLearnMore = this.querySelector('.monitoring-learn-more');
       monitoringLearnMore.tabIndex = UserPodTabOrder.POD_INPUT;
       monitoringLearnMore.addEventListener(
           'click', this.onMonitoringLearnMoreClicked_.bind(this));
 
       this.enterButtonElement.addEventListener('click', (function(e) {
         this.enterButtonElement.disabled = true;
         var locale = this.querySelector('.language-select').value;
         var keyboardSelect = this.querySelector('.keyboard-select');
@@ skipping 22 matching lines @@
       var languageSelect = this.querySelector('.language-select');
       languageSelect.setAttribute('id', id);
       this.populateLanguageSelect(this.user.initialLocales,
                                   this.user.initialLocale,
                                   this.user.initialMultipleRecommendedLocales);
     },
 
     /** @override **/
     update: function() {
       UserPod.prototype.update.call(this);
-      this.querySelector('.expanded-pane-name').textContent =
-          this.user_.displayName;
       this.querySelector('.info').textContent =
           loadTimeData.getStringF('publicAccountInfoFormat',
                                   this.user_.enterpriseDomain);
     },
 
     /** @override */
     focusInput: function() {
       // Move tabIndex from the whole pod to the main input.
       this.tabIndex = -1;
       this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;
@@ skipping 64 matching lines @@
               break;
             default:
               return;
           }
           break;
       }
       chrome.send('launchHelpApp', [HELP_TOPIC_PUBLIC_SESSION]);
       stopEventPropagation(event);
     },
 
-    makeSpaceForExpandedPod_: function() {
-      var width = this.classList.contains('advanced') ?
-          PUBLIC_EXPANDED_ADVANCED_WIDTH : PUBLIC_EXPANDED_BASIC_WIDTH;
-      var isDesktopUserManager = Oobe.getInstance().displayType ==
-          DISPLAY_TYPE.DESKTOP_USER_MANAGER;
-      var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
-                                              POD_ROW_PADDING;
-      if (this.left + width > $('pod-row').offsetWidth - rowPadding)
-        this.left = $('pod-row').offsetWidth - rowPadding - width;
-    },
-
     /**
      * Transition the expanded pod from the basic to the advanced view.
      */
     transitionToAdvanced_: function() {
-      var pod = this;
-      var languageAndInputSection =
-          this.querySelector('.language-and-input-section');
-      this.classList.add('transitioning-to-advanced');
-      setTimeout(function() {
-        pod.classList.add('advanced');
-        pod.makeSpaceForExpandedPod_();
-        languageAndInputSection.addEventListener('transitionend',
-                                                 function observer() {
-          languageAndInputSection.removeEventListener('transitionend',
-                                                      observer);
-          pod.classList.remove('transitioning-to-advanced');
-          pod.querySelector('.language-select').focus();
-        });
-        // Guard timer set to animation duration + 20ms.
-        ensureTransitionEndEvent(languageAndInputSection, 380);
-      }, 0);
+      this.classList.add('advanced');
+      // TODO(wzang): Add transition animation when its spec becomes available.
     },
 
     /**
      * Show a dialog when user clicks on learn more (monitoring) button.
      */
     onMonitoringLearnMoreClicked_: function() {
       if (!this.dialogContainer_) {
         this.dialogContainer_ = document.createElement('div');
         this.dialogContainer_.classList.add('monitoring-dialog-container');
         var topContainer = document.querySelector('#scroll-container');
@@ skipping 35 matching lines @@
     getPublicSessionKeyboardLayouts_: function() {
       var selectedLocale = this.querySelector('.language-select').value;
       if (selectedLocale ==
           this.querySelector('.keyboard-select').loadedLocale) {
         // If the list of keyboard layouts was loaded for the currently selected
         // locale, it is already up to date.
         return;
       }
       chrome.send('getPublicSessionKeyboardLayouts',
                   [this.user.username, selectedLocale]);
-     },
+    },
 
     /**
      * Populates the keyboard layout "select" element with a list of layouts.
      * @param {string} locale The locale to which this list of keyboard layouts
      *     applies
      * @param {!Object} list List of available keyboard layouts
      */
     populateKeyboardSelect: function(locale, list) {
       if (locale != this.querySelector('.language-select').value) {
         // The selected locale has changed and the list of keyboard layouts is
@@ skipping 898 matching lines @@
     },
 
     /**
      * Sets the state of touch view mode.
      * @param {boolean} isTouchViewEnabled true if the mode is on.
      */
     setTouchViewState: function(isTouchViewEnabled) {
       this.touchViewEnabled_ = isTouchViewEnabled;
       this.pods.forEach(function(pod, index) {
         pod.actionBoxAreaElement.classList.toggle('forced', isTouchViewEnabled);
+        if (pod.isPublicSessionPod)
+          pod.querySelector('.button-container')
+              .classList.toggle('forced', isTouchViewEnabled);
       });
     },
 
     /**
      * Updates the display name shown on a public session pod.
      * @param {string} userID The user ID of the public session
      * @param {string} displayName The new display name
      */
     setPublicSessionDisplayName: function(userID, displayName) {
       var pod = this.getPodWithUsername_(userID);
@@ skipping 146 matching lines @@
      * Called when there is one user pod.
      * @private
      */
     placeSinglePod_: function() {
       this.mainPod_.setPodStyle(UserPod.Style.LARGE);
       this.mainPod_.left = (this.screenSize.width - CROS_POD_WIDTH) / 2;
       this.mainPod_.top = (this.screenSize.height - CROS_POD_HEIGHT) / 2;
     },
 
     /**
-     * Called when there are two users pods.
+     * Called when the number of pods is within the POD_ROW_LIMIT.
      * @private
      */
     placePodsOnPodRow_: function() {
       // Both pods have large size and are placed adjacently.
       var secondPod =
           this.pods[0] == this.mainPod_ ? this.pods[1] : this.pods[0];
       this.mainPod_.setPodStyle(UserPod.Style.LARGE);
       secondPod.setPodStyle(UserPod.Style.LARGE);
 
       var DOUBLE_PODS_PADDING = this.isPortraitMode_() ? 32 : 118;
       var leftPadding =
           (this.screenSize.width - (CROS_POD_WIDTH * 2 + DOUBLE_PODS_PADDING)) /
           2;
       // Start actual positioning.
       this.mainPod_.left = leftPadding;
       this.mainPod_.top = (this.screenSize.height - CROS_POD_HEIGHT) / 2;
       secondPod.left = leftPadding + CROS_POD_WIDTH + DOUBLE_PODS_PADDING;
       secondPod.top = (this.screenSize.height - CROS_POD_HEIGHT) / 2;
     },
 
     /**
-     * Called when there are more than two user pods.
+     * Called when the number of pods exceeds the POD_ROW_LIMIT.
      * @private
      */
     placePodsOnContainer_: function() {
       this.smallPodsContainer.hidden = false;
       var pods = this.pods;
       if ((pods.length > LANDSCAPE_MODE_LIMIT && !this.isPortraitMode_()) ||
           (pods.length > PORTRAIT_MODE_LIMIT && this.isPortraitMode_())) {
         // If the pod count exceeds limits, they should be in extra small size
         // and the container will become scrollable.
         this.placePodsOnScrollableContainer_();
@@ skipping 61 matching lines @@
         if (pod == this.mainPod_) {
           continue;
         }
         pod.left = 0;
         pod.top = smallPodsTopPadding;
         smallPodsTopPadding += CROS_SMALL_POD_HEIGHT + actualSmallPodPadding;
       }
     },
 
     /**
-     * Called when there are more than 6 user pods in landscape mode, or more
-     * than 10 user pods in portrait mode.
+     * Called when the LANDSCAPE_MODE_LIMIT or PORTRAIT_MODE_LIMIT is exceeded
+     * and the scrollable container is shown.
      * @private
      */
     placePodsOnScrollableContainer_: function() {
       this.smallPodsContainer.hidden = false;
       // Add a dark overlay.
       this.smallPodsContainer.classList.add('scroll');
       var pods = this.pods;
       this.mainPod_.setPodStyle(UserPod.Style.LARGE);
       for (var pod of pods) {
         if (pod != this.mainPod_) {
@@ skipping 84 matching lines @@
       document.querySelector('.small-pod-container-mask').hidden = true;
       document.querySelector('.small-pod-container-mask.rotate').hidden = true;
       this.smallPodsContainer.classList.remove('scroll');
       var pods = this.pods;
       for (var pod of pods) {
         // There is a chance that one of the pods has a bottom padding, so
         // reset all of them to be safe. This is because if the pod was at
         // the last position in the scrollable container, a bottom padding
         // was added to ensure a symmetric layout.
         pod.style.paddingBottom = cr.ui.toCssPx(0);
-        // Remove the switch animation that might be added earlier.
-        pod.imageElement.classList.remove('switch-image-animation');
-        pod.smallPodImageElement.classList.remove('switch-image-animation');
       }
+      this.clearPodsAnimation_();
       this.hideEmptyArea_();
       // Clear error bubbles whenever pod placement is happening, i.e., after
       // orientation change, showing or hiding virtual keyboard, and user
       // removal.
       Oobe.clearErrors();
     },
 
     /**
      * Checks if the screen is in portrait mode.
      * @return {boolean} True if in portrait mode.
@@ skipping 47 matching lines @@
         // Make sure that user name on each large pod is centered and extra
         // long names don't exceed maximum pod width.
         var nameArea = pod.querySelector('.name-container');
         var leftMargin = (CROS_POD_WIDTH - pod.nameElement.offsetWidth) / 2;
         if (leftMargin > 0)
           nameArea.style.left = cr.ui.toCssPx(leftMargin);
         else {
           pod.nameElement.style.width = cr.ui.toCssPx(CROS_POD_WIDTH);
           nameArea.style.left = cr.ui.toCssPx(0);
         }
+        // Update info container area for public session pods.
+        if (pod.isPublicSessionPod) {
+          var infoElement = pod.querySelector('.info');
+          var infoIcon = pod.querySelector('.learn-more');
+          var totalWidth = PUBLIC_SESSION_ICON_WIDTH + infoElement.offsetWidth;
+          var infoLeftMargin = (CROS_POD_WIDTH - totalWidth) / 2;
+          if (infoLeftMargin > 0) {
+            infoIcon.style.left = cr.ui.toCssPx(infoLeftMargin);
+            infoElement.style.left =
+                cr.ui.toCssPx(infoLeftMargin + PUBLIC_SESSION_ICON_WIDTH);
+          } else {
+            infoIcon.style.left = cr.ui.toCssPx(0);
+            infoElement.style.left = cr.ui.toCssPx(PUBLIC_SESSION_ICON_WIDTH);
+            infoElement.style.width = cr.ui.toCssPx(
+                CROS_POD_WIDTH - PUBLIC_SESSION_ICON_WIDTH -
+                infoElement.style.paddingLeft);
+          }
+          // If the public session pod is already expanded, make sure it's
+          // still centered.
+          if (pod.expanded)
+            this.centerPublicSessionPod_(pod);
+        }
         // Update action box menu position to ensure it doesn't overlap with
         // elements outside the pod.
         var actionBoxMenu = pod.querySelector('.action-box-menu');
         var actionBoxButton = pod.querySelector('.action-box-button');
         var MENU_TOP_PADDING = 7;
         actionBoxMenu.style.top =
             cr.ui.toCssPx(actionBoxButton.offsetHeight + MENU_TOP_PADDING);
         if (this.isPortraitMode_() && pods.length > 1) {
           // Confine the menu inside the pod when it may overlap with outside
           // elements.
@@ skipping 26 matching lines @@
         }
         else {
           var leftPadding =
               this.mainPod_.left - (BANNER_MESSAGE_WIDTH - CROS_POD_WIDTH) / 2;
           bannerContainer.style.left = cr.ui.toCssPx(Math.max(leftPadding, 0));
         }
       }
     },
 
     /**
+     * Handles required UI changes when a public session pod toggles the
+     * expanded state.
+     * @param {UserPod} pod Public session pod.
+     * @param {boolean} expanded Whether the pod is expanded or not.
+     */
+    handlePublicPodExpansion: function(pod, expanded) {
+      // Hide all other elements in the account picker if the pod is expanded.
+      this.parentNode.classList.toggle('public-account-expanded', expanded);
+      if (expanded) {
+        this.centerPublicSessionPod_(pod);
+      } else {
+        // Return the pod to its last position.
+        pod.left = pod.lastPosition.left;
+        pod.top = pod.lastPosition.top;
+        // Pod placement has already finished by this point, but we still need
+        // to make sure that the styles of all the elements in the pod row are
+        // updated before being shown.
+        this.handleAfterPodPlacement_();
+        this.clearPodsAnimation_();
+      }
+    },
+
+    /**
+     * Called when a public session pod is expanded.
+     * @param {UserPod} pod Pod to be centered.
+     * @private
+     */
+    centerPublicSessionPod_: function(pod) {

[jdufault, 2017/06/07 17:29:31]

FYI, this can be more general:

  centerPod_: function(pod, podWidth, podHeight) {
    // ...
  }

[Wenzhao (Colin) Zang, 2017/06/07 21:12:45]

I changed it. Thanks.

+      pod.lastPosition = {left: pod.left, top: pod.top};
+      pod.left = (this.screenSize.width - PUBLIC_EXPANDED_WIDTH) / 2;
+      pod.top = (this.screenSize.height - PUBLIC_EXPANDED_HEIGHT) / 2;
+    },
+
+    /**
+     * Clears animation classes that may be added earlier to ensure a clean
+     * state.
+     * @private
+     */
+    clearPodsAnimation_: function() {
+      var pods = this.pods;
+      for (var pod of pods) {
+        pod.imageElement.classList.remove('switch-image-animation');
+        pod.smallPodImageElement.classList.remove('switch-image-animation');
+      }
+    },
+
+    /**
      * Called when a small or extra small pod is clicked to trigger the switch
      * with the main pod.
+     * @param {UserPod} pod Pod to be switched with the main pod.
      */
     switchMainPod: function(pod) {
       if (this.disabled) {
-        console.error('Cannot change main pod while sign-in UI is disabled.');
+        console.error('Cannot switch main pod while sign-in UI is disabled.');
         return;
       }
       if (!this.mainPod_) {
         console.error('Attempt to switch a non-existing main pod.');
         return;
       }
       // Find the index of the small pod.
       var insert = 0;
       var children = pod.parentNode.children;
       while (insert < children.length && children[insert] != pod)
@@ skipping 333 matching lines @@
       if (this.alwaysFocusSinglePod && !pod) {
         if ($('login-header-bar').contains(e.target))
           return;
         // If the click is outside the single pod, still focus on that pod
         // but do not focus on input box any more. This makes virtual keyboard
         // (if present) disappear.
         this.focusPod(
             this.focusedPod_, true /* force */, true /* opt_skipInputFocus */);
         this.focusedPod_.userTypeBubbleElement.classList.remove('bubble-shown');
         this.focusedPod_.isActionBoxMenuHovered = false;
+        // If the click is outside the public session pod, still focus on it
+        // but do not expand it any more.
+        if (this.focusedPod_.isPublicSessionPod)
+          this.focusedPod_.expanded = false;
       }
     },
 
     /**
      * Handler of mouse move event.
      * @param {Event} e Click Event object.
      * @private
      */
     handleMouseMove_: function(e) {
       if (this.disabled)
@@ skipping 108 matching lines @@
           if (!editing) {
             if (this.focusedPod_ && this.focusedPod_.nextElementSibling)
               this.focusPod(this.focusedPod_.nextElementSibling);
             else
               this.focusPod(this.firstElementChild);
 
             e.stopPropagation();
           }
           break;
         case 'Enter':
-          if (this.focusedPod_) {
+          // Click events on public session pods should only be handled by
+          // their own handler.
+          if (this.focusedPod_ && !this.focusedPod_.isPublicSessionPod) {
             var targetTag = e.target.tagName;
             if (e.target == this.focusedPod_.passwordElement ||
                 (this.focusedPod_.pinKeyboard &&
                  e.target == this.focusedPod_.pinKeyboard.inputElement) ||
                 (targetTag != 'INPUT' &&
                  targetTag != 'BUTTON' &&
                  targetTag != 'A')) {
               this.setActivatedPod(this.focusedPod_, e);
               e.stopPropagation();
             }
@@ skipping 91 matching lines @@
       if (pod && pod.multiProfilesPolicyApplied) {
         pod.userTypeBubbleElement.classList.remove('bubble-shown');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });