ChromeOS: Implement Language Selection screen of material design OOBE.

chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.js

Index: chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.js b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.js
new file mode 100644
index 0000000000000000000000000000000000000000..2f25b5b888cd454d75312284efcfa39bae11ca5a
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.js
@@ -0,0 +1,85 @@
+// Copyright 2016 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.
+
+/**
+ * Polymer class definition for 'oobe-i18n-dropdown'.
+ */
+(function() {
+
+
+    /**
+     * Languages/keyboard descriptor to display
+     * @type {!OobeTypes.LanguageDsc|!Array<OobeTypes.IMEDsc>}
+     */

[stevenjb, 2016/08/01 22:38:39]

Fix alignment

[Alexander Alekseev, 2016/08/01 22:57:10]

Done.

+var I18nMenuItem;
+
+Polymer({
+  is: 'oobe-i18n-dropdown',
+
+  properties: {
+    /**
+     * List of languages/keyboards to display
+     * @type {!Array<I18nMenuItem>}
+     */
+    items: {
+      type: Array,
+      value: null,
+      observer: 'onItemsChanged_',
+    },
+  },
+
+  /**
+   * This flag prevents recursive calls of observers and callbacks.
+   */
+  observersDisabled_: false,
+
+  /**
+   * @param {!{detail: !{item: { item: {!I18nMenuItem}}}}} event
+   * @private
+   */
+  onSelect_: function(event) {
+    if (this.observersDisabled_)
+      return;
+
+    var selected = event.detail.item.item;
+    if (!selected)
+      return;
+
+    this.set('items.' + this.$$('paper-listbox').selected + '.selected', true);
+    this.fire('select-item', selected);
+  },
+
+  onDeselect_: function(e) {
+    if (this.observersDisabled_)
+      return;
+    this.set(
+        'items.' + this.$$('paper-listbox').indexOf(e.detail.item) +
+            '.selected',
+        false);
+  },
+
+  onItemsChanged_: function(items) {
+    if (this.observersDisabled_)
+      return;
+
+    if (!items)
+      return;
+
+    this.observersDisabled_ = true;
+
+    var index = items.findIndex(function(item) { return item.selected; });
+    if (index != -1) {
+      // This is needed for selectIndex() to pick up values from updated
+      // this.items (for example, translated into other language) .
+      Polymer.dom.flush();
+      // This is to force update real <input> element value even if selection
+      // index has not changed.
+      this.$.listboxDropdown.selectIndex(null);
+      this.$.listboxDropdown.selectIndex(index);
+    }
+
+    this.observersDisabled_ = false;
+  },
+});
+})();