ChromeOS: Implement Network 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 a666a05a0a23644387048f42ecdba3ed73925346..b0cdc69d02462e7f585a0de55cc5d088bfdda85f 100644
--- a/chrome/browser/resources/chromeos/login/oobe_welcome.html
+++ b/chrome/browser/resources/chromeos/login/oobe_welcome.html
@@ -2,12 +2,26 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
+<link rel="import" href="chrome://resources/cr_elements/network/cr_network_icon.html">
+<link rel="import" href="chrome://resources/cr_elements/network/cr_network_select.html">
+<link rel="import" href="chrome://resources/cr_elements/network/cr_onc_types.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/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-welcome" size="24">
+  <svg>
+    <defs>
+      <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
+      <g id="wifi"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"></path></g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
 
 <dom-module name="oobe-welcome-md">
   <link rel="stylesheet" href="oobe_welcome.css">
   <template>
-    <oobe-card class="fit">
+    <oobe-card id="welcomeSection" class="fit">
       <div class="header flex vertical layout end-justified start">
         <h1 class="welcome-message" i18n-content="networkScreenGreeting"></h1>
       </div>
@@ -27,6 +41,20 @@
         </div>
       </div>
     </oobe-card>
+    <oobe-dialog id="networkSection" class="fit" hidden>

[stevenjb, 2016/07/07 17:36:17]

Consider using a tamplate if here:

<template is="dom-if" if="[[showDialog_]]">

That way the dialog won't be loaded initially, improving initial load time. This
is probably less of an issue for OOBE than for Settings, but it is still a good
practice.

[Alexander Alekseev, 2016/07/08 01:12:28]

This conflicts with onWelcomeNextButtonClicked_ method, because
this.$.networkSelect.customItems = ... will trigger "Uncaught TypeError: Cannot
set property 'customItems' of undefined" .

[stevenjb, 2016/07/08 17:43:35]

You would have to change that to a declarative approach, e.g.
custom-items="[[_getCustomItems()]]".

If that is problematic, you can disregard this sugegstion, but I do think that
removing the setting of custom-items from onWelcomeNextButtonClicked_ would be
cleaner.

[Alexander Alekseev, 2016/07/09 04:31:30]

I changed most of code to declarative, but i18n-content is empty if this object
is initially uninitialized.

+      <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>
+        <h1 class="welcome-message-hint" i18n-content="networkSectionHint"></h1>
+      </div>
+      <div class="footer flex vertical layout justified">
+        <cr-network-select id="networkSelect"
+            on-network-connected="onNetworkConnected_"
+            on-network-item-selected="onNetworkListNetworkItemSelected_"
+            on-custom-item-selected="onNetworkListCustomItemSelected_">
+        </cr-network-select>
+      </div>
+    </oobe-dialog>
   </template>
 </dom-module>