ChromeOS: Implement Language Selection screen of material design OOBE.

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

Index: chrome/browser/resources/chromeos/login/oobe_welcome.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_welcome.html b/chrome/browser/resources/chromeos/login/oobe_welcome.html
index d4a2e85a7d1c98ec75c23fc2cf32b98a696e036d..2145ffad447a5a7018660a8e064f06c340cac5ce 100644
--- a/chrome/browser/resources/chromeos/login/oobe_welcome.html
+++ b/chrome/browser/resources/chromeos/login/oobe_welcome.html
@@ -21,27 +21,65 @@
 <dom-module name="oobe-welcome-md">
   <link rel="stylesheet" href="oobe_welcome.css">
   <template>
-    <oobe-card id="welcomeSection" class="fit" hidden="[[networkSelectionScreenShown]]">
+    <oobe-card id="welcomeSection" class="fit" hidden="[[!welcomeScreenShown]]">
       <div class="header flex vertical layout end-justified start">
         <h1 class="welcome-message" i18n-content="networkScreenGreeting"></h1>
       </div>
       <div class="footer flex vertical layout justified">
         <div class="welcome-next flex vertical layout center">
-          <oobe-next-button id="welcomeNextButton" on-tap="onWelcomeNextButtonClicked_"></oobe-next-button>
+          <oobe-next-button id="welcomeNextButton"
+              on-tap="onWelcomeNextButtonClicked_">
+          </oobe-next-button>
         </div>
         <div class="flex horizontal layout justified">
-          <div class="buttonbox layout vertical">
-            <iron-icon icon="icons:language" class="bottom-button self-center"></iron-icon>
+          <div id="langugeButton" class="buttonbox layout vertical"

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

languageButton

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

Is this id needed?

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

Done.

+              on-click="onWelcomeSelectLanguageButtonClicked_">
+            <iron-icon icon="icons:language" class="bottom-button self-center">
+            </iron-icon>
             <div id="currentLanguage">[[currentLanguage]]</div>
           </div>
           <div class="buttonbox layout vertical">
-            <iron-icon icon="icons:accessibility" class="bottom-button self-center"></iron-icon>
+            <iron-icon icon="icons:accessibility"
+                class="bottom-button self-center">
+            </iron-icon>
             <div id="accessibilityLabel" i18n-content="accessibilityLink"></div>
           </div>
         </div>
       </div>
     </oobe-card>
-    <oobe-dialog id="networkSection" class="fit" hidden="[[!networkSelectionScreenShown]]">
+    <oobe-dialog id="languageSection" class="fit"

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

id needed?

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

Done.

+        hidden="[[!languageSelectionScreenShown]]" has-buttons>
+      <iron-icon icon="icons:language" class="oobe-icon"></iron-icon>
+      <div class="header flex vertical layout end-justified start">

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

nit: 'layout vertical'

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

Done.

+        <h1 class="welcome-message" i18n-content="languageSectionTitle"></h1>
+        </h1>

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

remove

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

Done.

+      </div>
+      <div class="footer vertical layout">

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

nit: 'layout vertical' (and below; use consistent order throughout, 'layout
horizontal' or 'layout vertical' is the more common ordering).

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

Done.

+        <div id="languageDropdownContainer"
+            class="flex horizontal layout justified language-selection-entry">
+          <div id="languageDropdownTitle" i18n-content="languageDropdownTitle">
+          </div>
+          <oobe-i18n-dropdown id="languageSelect" items="[[oobeLanguages]]"
+              on-select-item="onLanguageSelected_">
+          </oobe-i18n-dropdown>
+        </div>
+        <div id="keyboardDropdownContainer"
+            class="flex horizontal layout justified language-selection-entry">
+          <div id="keyboardDropdownTitle" i18n-content="keyboardDropdownTitle">
+          </div>
+          <oobe-i18n-dropdown id="keyboardSelect" items="[[oobeKeyboards]]"
+              on-select-item="onKeyboardSelected_">
+          </oobe-i18n-dropdown>
+        </div>
+      </div>
+      <div class="bottom-buttons layout horizontal">
+        <oobe-text-button label="[[getText_('OobeOKButtonText')]]"
+            inverse on-tap="closeLanguageSection_">
+        </oobe-text-button>
+      </div>
+    </oobe-dialog>
+    <oobe-dialog id="networkSection" class="fit"
+        hidden="[[!networkSelectionScreenShown]]">
       <iron-icon icon="oobe-welcome:wifi" class="oobe-icon"></iron-icon>
       <div class="header flex vertical layout end-justified start">
         <h1 class="welcome-message" i18n-content="networkSectionTitle"></h1>