Add language and keyboard layout pickers to public session pods

chrome/browser/resources/login/user_pod_row.js

Index: chrome/browser/resources/login/user_pod_row.js
diff --git a/chrome/browser/resources/login/user_pod_row.js b/chrome/browser/resources/login/user_pod_row.js
index 1e2ddefbe04666010de6a8067a78ebe3bef38555..9f18b730e355438093364621740e62f82112b694 100644
--- a/chrome/browser/resources/login/user_pod_row.js
+++ b/chrome/browser/resources/login/user_pod_row.js
@@ -50,6 +50,7 @@ cr.define('login', function() {
    */
   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;
@@ -996,16 +997,9 @@ cr.define('login', function() {
       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;
+        this.makeSpaceForExpandedPod_();
       } else {
         if (typeof(this.usualLeft) != 'undefined')
           this.left = this.usualLeft;
@@ -1061,6 +1055,22 @@ cr.define('login', function() {
       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]);
@@ -1068,6 +1078,35 @@ cr.define('login', function() {
     },
 
     /** @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 =
@@ -1095,8 +1134,10 @@ cr.define('login', function() {
 
     /** @override */
     activate: function(e) {
-      this.expanded = true;
-      this.focusInput();
+      if (!this.expanded) {
+        this.expanded = true;
+        this.focusInput();
+      }
       return true;
     },
 
@@ -1138,6 +1179,52 @@ cr.define('login', function() {
       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;

[dzhioev (left Google), 2014/07/21 14:57:48]

I can't find where you change 'left' back, when pod shrinks.

[dzhioev (left Google), 2014/07/21 14:57:48]

If we have a single public pod on screen, it is expanded to left and its right
edge is fixed. It looks strange. Is it expected behavior? 

[bartfab (slow), 2014/07/21 16:50:04]

I did not change the logic that makes space for expanded pods. It simply moved
from line 1007 of the file to here. And yes, space is always added on the left -
I did not make that decision, I just kept it as-is.

[bartfab (slow), 2014/07/21 16:50:04]

I did not change the logic that preserves the pod's original position. |set
expanded(expanded)| stores the position in |this.usualLeft| when the pod expands
and restores it when the pod contracts.

+    },
+
+    /**
+     * 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',

[dzhioev (left Google), 2014/07/21 14:57:48]

Probably you want to add 'ensureTransitionEndEvent' call after each subscription
to 'webkitTransitionEnd' event, because sometimes 'webkitTransitionEnd' doesn't
fire.

[bartfab (slow), 2014/07/21 16:50:04]

Ugh. Is that a blink bug or by design?

Either way, timers added.

[Nikita (slow), 2014/07/21 17:08:50]

This is by design.
https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

+                                                 function observer() {
+          languageAndInputSection.removeEventListener('webkitTransitionEnd',
+                                                      observer);
+          pod.classList.remove('transitioning-to-advanced');
+          pod.querySelector('.language-select').focus();
+        });
+      }, 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));
+      }
+    }
   };
 
   /**
@@ -1733,6 +1820,17 @@ cr.define('login', function() {
     },
 
     /**
+     * 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() {