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;
+        this.makeSpaceForExpandedPod_();
       } else {
         if (typeof(this.usualLeft) != 'undefined')
           this.left = this.usualLeft;
         if (typeof(this.usualTop) != 'undefined')
           this.top = this.usualTop;
       }
 
       var self = this;
       this.classList.add('animating');
       this.addEventListener('webkitTransitionEnd', function f(e) {
@@ skipping 35 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;

[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));
+      }
+    }
   };
 
   /**
    * 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 547 matching lines @@
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });