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..540ea0ecf0655825d1c39181d258e8b798689c0e
--- /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|!OobeTypes.IMEDsc}
+ */
+var I18nMenuItem;
+
+Polymer({
+  is: 'oobe-i18n-dropdown',
+
+  properties: {
+    /**
+     * List of languages/keyboards to display
+     * @type {!Array<I18nMenuItem>}
+     */
+    items: {
+      type: Array,
+      value: null,

[michaelpg, 2016/08/02 00:06:38]

why not just omit value (undefined)?

[Alexander Alekseev, 2016/08/02 04:25:57]

Done.

+      observer: 'onItemsChanged_',
+    },
+  },
+
+  /**
+   * This flag prevents recursive calls of observers and callbacks.
+   */
+  observersDisabled_: false,
+
+  /**
+   * @param {!{detail: !{item: { item: {!I18nMenuItem}}}}} event

[michaelpg, 2016/08/02 00:06:38]

dom-repeat has a |mode| property on the event, check out the docs. i think
that's what you want instead of the item.item thing

[Alexander Alekseev, 2016/08/02 04:25:57]

Sorry, I didn't find anything like that.
https://www.polymer-project.org/1.0/docs/api/dom-repeat says there is |model|
property, but it is an instance of Polymer.Base.

[michaelpg, 2016/08/02 20:31:53]

I wasn't quite right: in this case, the event is firing on the <paper-listbox>,
so that's what provides event.detail.model here.
Yes, which is awesome! You can manipulate the model like any other Polymer
element, so you can do:

model.set('item.foo', 'Foo')

and the item will update everywhere like normal.

+   * @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) .

[michaelpg, 2016/08/02 00:06:38]

nit: remove space before .

[Alexander Alekseev, 2016/08/02 04:25:57]

Done.

+      Polymer.dom.flush();
+      // This is to force update real <input> element value even if selection
+      // index has not changed.
+      this.$.listboxDropdown.selectIndex(null);

[michaelpg, 2016/08/02 00:06:38]

can this be wrapped in something like
    if (this.$.listboxDropdown.selected == index)

[Alexander Alekseev, 2016/08/02 04:25:57]

Sure. Done.

I just don't understand why adding two lines would make is better here.

[michaelpg, 2016/08/02 20:31:53]

Hmm, it seemed like a rare edge case but I'm not quite sure what circumstances
this happens in. If the <input> element is usually wrong, it's fine as-is. Just
seems silly to toggle the listbox selection when we don't need to.

+      this.$.listboxDropdown.selectIndex(index);
+    }
+
+    this.observersDisabled_ = false;
+  },
+});
+})();