Add language and keyboard layout pickers to public session pods

chrome/browser/resources/login/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 32 matching lines @@
    * @const
    */
   var MAX_NUMBER_OF_ROWS_UNDER_SIGNIN_BANNER = 2;
 
   /**
    * Variables used for pod placement processing. Width and height should be
    * synced with computed CSS sizes of pods.
    */
   var POD_WIDTH = 180;
   var PUBLIC_EXPANDED_BASIC_WIDTH = 500;
+  var PUBLIC_EXPANDED_ADVANCED_WIDTH = 610;
   var CROS_POD_HEIGHT = 213;
   var DESKTOP_POD_HEIGHT = 226;
   var POD_ROW_PADDING = 10;
   var DESKTOP_ROW_PADDING = 15;
 
   /**
    * Minimal padding between user pod and virtual keyboard.
    * @type {number}
    * @const
    */
@@ skipping 926 matching lines @@
       return this.classList.contains('expanded');
     },
 
     set expanded(expanded) {
       if (this.expanded == expanded)
         return;
 
       this.resetTabOrder();
       this.classList.toggle('expanded', expanded);
       if (expanded) {
-        var isDesktopUserManager = Oobe.getInstance().displayType ==
-            DISPLAY_TYPE.DESKTOP_USER_MANAGER;
-        var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
-                                                POD_ROW_PADDING;
         this.usualLeft = this.left;
-        this.usualTop = this.top;
-        if (this.left + PUBLIC_EXPANDED_BASIC_WIDTH >
-            $('pod-row').offsetWidth - rowPadding)
-          this.left = $('pod-row').offsetWidth - rowPadding -
-              PUBLIC_EXPANDED_BASIC_WIDTH;
-      } else {
-        if (typeof(this.usualLeft) != 'undefined')
-          this.left = this.usualLeft;
-        if (typeof(this.usualTop) != 'undefined')
-          this.top = this.usualTop;
+        this.makeSpaceForExpandedPod_();
+      } else if (typeof(this.usualLeft) != 'undefined') {
+        this.left = this.usualLeft;
       }
 
       var self = this;
       this.classList.add('animating');
       this.addEventListener('webkitTransitionEnd', function f(e) {
         self.removeEventListener('webkitTransitionEnd', 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);
     },
 
     /** @override */
     get mainInput() {
       if (this.expanded)
         return this.enterButtonElement;
       else
         return this.nameElement;
     },
 
@@ skipping 16 matching lines @@
 
       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.addEventListener('change', function() {
+        chrome.send('getPublicSessionKeyboardLayouts', [
+            this.user.username,
+            languageSelect.options[languageSelect.selectedIndex].value]);
+      }.bind(this));
+
+      this.querySelector('.keyboard-select').tabIndex =
+          UserPodTabOrder.POD_INPUT;
+
+      var languageAndInput = this.querySelector('.language-and-input');
+      languageAndInput.tabIndex = UserPodTabOrder.POD_INPUT;
+      languageAndInput.addEventListener('click',
+                                        this.transitionToAdvanced_.bind(this));
+
       this.enterButtonElement.addEventListener('click', (function(e) {
         this.enterButtonElement.disabled = true;
         chrome.send('launchPublicAccount', [this.user.username]);
       }).bind(this));
     },
 
     /** @override **/
+    initialize: function() {
+      UserPod.prototype.initialize.call(this);
+
+      var id = this.user.username + '-language';
+      this.querySelector('.language-select-label').htmlFor = id;
+      var languageSelect = this.querySelector('.language-select');
+      languageSelect.setAttribute('id', id);
+      var list = this.user.initialLocales;
+      languageSelect.innerHTML = '';
+      var group = languageSelect;
+      for (var i = 0; i < list.length; ++i) {
+        var item = list[i];
+        if (item.optionGroupName) {
+          group = document.createElement('optgroup');
+          group.label = item.optionGroupName;
+          languageSelect.appendChild(group);
+        } else {
+          group.appendChild(
+              new Option(item.title, item.value, item.selected, item.selected));
+        }
+      }
+
+      id = this.user.username + '-keyboard';
+      this.querySelector('.keyboard-select-label').htmlFor = id;
+      this.querySelector('.keyboard-select').setAttribute('id', id);
+      this.populateKeyboardSelect_(this.user.initialKeyboardLayouts);
+    },
+
+    /** @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;
       this.mainInput.focus();
     },
 
     /** @override */
     reset: function(takeFocus) {
       if (!takeFocus)
         this.expanded = false;
       this.enterButtonElement.disabled = false;
       UserPod.prototype.reset.call(this, takeFocus);
     },
 
     /** @override */
     activate: function(e) {
-      this.expanded = true;
-      this.focusInput();
+      if (!this.expanded) {
+        this.expanded = true;
+        this.focusInput();
+      }
       return true;
     },
 
     /** @override */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
       this.parentNode.focusPod(this);
       this.parentNode.setActivatedPod(this, e);
@@ skipping 21 matching lines @@
             case 32:  // Space.
               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('webkitTransitionEnd',
+                                                 function observer() {
+          languageAndInputSection.removeEventListener('webkitTransitionEnd',
+                                                      observer);
+          pod.classList.remove('transitioning-to-advanced');
+          pod.querySelector('.language-select').focus();
+        });
+        // Guard timer set to animation duration + 20ms.
+        ensureTransitionEndEvent(languageAndInputSection, 380);
+      }, 0);
+    },
+
+    /**
+     * Populates the keyboard layout "select" element with a list of layouts.
+     * @param {!Object} list List of available keyboard layouts
+     */
+    populateKeyboardSelect_: function(list) {
+      var keyboardSelect = this.querySelector('.keyboard-select');
+      keyboardSelect.innerHTML = '';
+      for (var i = 0; i < list.length; ++i) {
+        var item = list[i];
+        keyboardSelect.appendChild(
+            new Option(item.title, item.value, item.selected, item.selected));
+      }
+    }
   };
 
   /**
    * Creates a user pod to be used only in desktop chrome.
    * @constructor
    * @extends {UserPod}
    */
   var DesktopUserPod = cr.ui.define(function() {
     // Don't just instantiate a UserPod(), as this will call decorate() on the
     // parent object, and add duplicate event listeners.
@@ skipping 575 matching lines @@
       /** @const */ var BUBBLE_OFFSET = 20;
       /** @const */ var BUBBLE_PADDING = 8;
       $('bubble').showContentForElement(attachElement,
                                         cr.ui.Bubble.Attachment.RIGHT,
                                         bubbleContent,
                                         BUBBLE_OFFSET,
                                         BUBBLE_PADDING);
     },
 
     /**
+     * Updates the list of available keyboard layouts for a public session pod.
+     * @param {string} userID The user ID of the public session
+     * @param {!Object} list List of available keyboard layouts
+     */
+    setPublicSessionKeyboardLayouts: function(userID, list) {
+      var pod = this.getPodWithUsername_(userID);
+      if (pod != null)
+        pod.populateKeyboardSelect_(list);
+    },
+
+    /**
      * Called when window was resized.
      */
     onWindowResize: function() {
       var layout = this.calculateLayout_();
       if (layout.columns != this.columns || layout.rows != this.rows)
         this.placePods_();
 
       if (Oobe.getInstance().virtualKeyboardShown)
         this.scrollFocusedPodIntoView();
     },
@@ skipping 334 matching lines @@
       // Clears focus if not clicked on a pod and if there's more than one pod.
       var pod = findAncestorByClass(e.target, 'pod');
       if ((!pod || pod.parentNode != this) && !this.alwaysFocusSinglePod) {
         this.focusPod();
       }
 
       if (pod)
         pod.isActionBoxMenuHovered = true;
 
       // Return focus back to single pod.
-      if (this.alwaysFocusSinglePod) {
+      if (this.alwaysFocusSinglePod && !pod) {
         this.focusPod(this.focusedPod_, true /* force */);
         this.focusedPod_.userTypeBubbleElement.classList.remove('bubble-shown');
-        if (!pod)
-          this.focusedPod_.isActionBoxMenuHovered = false;
+        this.focusedPod_.isActionBoxMenuHovered = false;
       }
     },
 
     /**
      * Handler of mouse move event.
      * @param {Event} e Click Event object.
      * @private
      */
     handleMouseMove_: function(e) {
       if (this.disabled)
@@ skipping 188 matching lines @@
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });