ChromeOS: Implement Language Selection screen of material design OOBE.

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

Index: chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html
new file mode 100644
index 0000000000000000000000000000000000000000..e2432c7010548ca802ac8094fff65f386ab69692
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/oobe_i18n_dropdown.html
@@ -0,0 +1,44 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg name="oobe-i18n-dropdown" size="24">
+  <svg>
+    <defs>
+      <g id="check">

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

Attribute where this came from, e.g. see comment in cr_elements/icons.html:
https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/icons.htm...

(It probably also makes sense for login to include a shared icons.html, but that
can be cleaned up later)

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

Done.

+        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z">
+        </path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
+
+<dom-module id="oobe-i18n-dropdown">
+  <template>
+    <style>
+      .selected-icon {
+        color: var(--google-blue-500);
+      } 
+    </style>
+    <paper-dropdown-menu no-label-float>
+      <paper-listbox id="listboxDropdown" class="dropdown-content">
+        <template is="dom-repeat" items$="[[items]]" on-dom-change="onDomChange_">

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

items should be property-bound not attribute-bound, ie items="[[items]]"

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

wrap line

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

Done.

The problem (was) that it doesn't work when items are replaced inside
onSelect(). this.set() doesn't have this problem, so I removed $.

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

Done.

+          <paper-item item="[[item]]" disabled="[[item.optionGroupName]]">
+            <div class="flex horizontal layout justified">
+              <div class="item-name" hidden="[[item.optionGroupName]]">
+                [[item.title]]
+              </div>
+              <iron-icon icon="oobe-i18n-dropdown:check" class="selected-icon"
+                  hidden="[[!item.selected]]">
+              </iron-icon>
+            </div>
+            <hr hidden="[[!item.optionGroupName]]">
+          </paper-item>
+        </template>
+      </paper-listbox>
+    </paper-dropdown-menu>
+  </template>
+</dom-module>