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..80f3d7efdd8be05a31f27860c1a436581a771a12
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.js
@@ -0,0 +1,73 @@
+// 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'.
+ */
+Polymer({
+  is: 'oobe-i18n-dropdown',
+
+  properties: {
+    /**
+     * List of languages/keyboards to display
+     */
+    items: {
+      type: Array,
+      value: null,
+      observer: 'onItemsChanged_',
+    },
+  },
+
+  /**
+   * This flag prevents recursive calls of observers and callbacks.
+   */
+  observersDisabled_: false,
+
+  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;
+
+    for (var i = 0; i < items.length; ++i) {
+      if (!items[i].selected)
+        continue;

[stevenjb, 2016/08/01 17:34:57]

nit:
var index = items.findIndex(function(item) { return item.selected; });
if (index != -1)
  ...

More info:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Obje...

[Alexander Alekseev, 2016/08/01 22:21:43]

Done.

+
+      // 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(i);
+      break;
+    }
+
+    this.observersDisabled_ = false;
+  },
+});