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..e03068877d3fa00d65b5537fdcafaab5f3b2e57b
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.js
@@ -0,0 +1,115 @@
+// 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,

[stevenjb, 2016/07/29 16:11:52]

Array of what? Ideally this should be typed in the comment, e.g. @type
{!Array<!I18nMenuItem>|undefined}.

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

Done.

+      value: null,
+      observer: 'onItemsChanged_',
+    },
+  },
+
+  listeners: {
+    'iron-select': 'onSelect_',

[michaelpg, 2016/07/29 06:26:50]

prefer declarative listeners:
<paper-listbox on-iron-select="onSelect_"

[Alexander Alekseev, 2016/07/30 00:52:50]

Done.

+  },
+
+  /**
+   * This flag prevents recursive calls of observers and callbacks.
+   */
+  observers_disabled_: false,

[michaelpg, 2016/07/29 06:26:50]

camelCase: observersDisabled_

[Alexander Alekseev, 2016/07/30 00:52:50]

Done.

+
+  /**
+   * It is not possible to modify "selected" attribute of paper-dropdown
+   * from inside regular observer. So this setting is delayed until
+   * list is rebuilt, and then set in onDomChanged_() callback.
+   */
+  selectIndex_: null,

[stevenjb, 2016/07/29 16:11:52]

The use of observersDisabled_ and selectIndex_ seems very C++ like; it would be
nice if we could avoid them. Try Michael's suggestion below. You may need to add
a Polymer.dom.flush() before calling this.$.listboxDropdown.selectIndex() in
onItemsChanged_.

[Alexander Alekseev, 2016/07/30 00:52:51]

Done.

+
+  onSelect_: function(event) {

[stevenjb, 2016/07/29 16:11:52]

Document. e.g.:
/**
 * @param {!{detail: !{item: { item: {!I18nMenuItem}}}} event
 * @private
 */

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

Done.

+    if (this.observers_disabled_)
+      return;
+
+    var selected = event.detail.item.item;
+    if (!selected)
+      return;
+
+    this.observers_disabled_ = true;
+
+    // To mimic regular <select> element, we need to modify "selected" attribute
+    // of a dropdown item. But modifying element itself doesn't lead to
+    // DOM update, so we need to replace items completely.

[michaelpg, 2016/07/29 06:26:50]

have you tried using this.set? See example in
https://www.polymer-project.org/1.0/docs/devguide/data-binding#array-binding

here's an example that uses on-iron-select and on-iron-deselect to show/hide the
icons, without replacing the items array: https://jsfiddle.net/y4hettan/3/

When |items| changes from C++, I think you still need to do the trick of setting
selected to undefined, and return early in onSelect_ if selected is undefined,
but you don't need observers_disabled_ or to loop through the entire items
array.

[Alexander Alekseev, 2016/07/30 00:52:50]

Done.

+    var items = [];
+    var changed = false;
+    for (var i = 0; i < this.items.length; ++i) {
+      var item = this.items[i];
+      if (item.value) {
+        var isSelected = null;
+        // "selected" attribute only appears as "null" or "true".
+        if (item.value == selected.value)
+          isSelected = true;
+
+        if (item.selected != isSelected) {
+          item.selected = isSelected;
+          changed = true;
+        }
+      }
+      items.push(item);
+    }
+    if (changed)
+      this.items = items;  // This triggers onItemsChanged_()
+
+    this.observers_disabled_ = false;
+    this.fire('select-item', selected);
+  },
+
+  onItemsChanged_: function(items) {
+    if (this.observers_disabled_)
+      return;
+
+    if (!items)
+      return;
+
+    this.observers_disabled_ = true;
+
+    // If no items have "selected" attribute, default to zero item.
+    // This is needed to mimic behavior of regular HTML <select> dropdown.
+    this.selectIndex_ = 0;
+
+    for (var i = 0; i < items.length; ++i) {
+      if (!items[i].selected)
+        continue;
+
+      // Delay update.
+      this.selectIndex_ = i;
+      break;
+    }
+
+    this.observers_disabled_ = false;
+  },
+
+  onDomChange_: function() {
+    this.observers_disabled_ = true;
+    if (this.selectIndex_ != null) {
+      var i = this.selectIndex_;
+      this.selectIndex_ = null;
+
+      // This forces dropdown to reset input element value.
+      // Otherwise, if list of elements is replaced (probably translated into
+      // another language), but selectin index is still tha same,
+      // displayed value will not be updated (i.e. it will use old value).
+      this.$.listboxDropdown.selectIndex(null);

[michaelpg, 2016/07/29 06:26:50]

you should be able to this in onItemsChanged_, and not need onDomChange_

[Alexander Alekseev, 2016/07/30 00:52:50]

Done.

+      this.$.listboxDropdown.selectIndex(i);  // This triggers onSelect_()
+    }
+    this.observers_disabled_ = false;
+  },
+});