NUX Onboarding: add basic landing page.

This CL adds a very basic landing page for the NUX onboarding experience.
To test this CL, add --enable-features=NuxOnboardingForceEnabled.

Current progress screenshot: https://imgur.com/a/2OBLbyq

There will be follow-up CLs to make it look more like the mocks, as well as
add other views for NUX.

Bug: 874142
Change-Id: Ie643def26d657fadfbbf556dd03df7cddf5976cc
Reviewed-on: https://chromium-review.googlesource.com/1235114
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593058}

chrome/browser/browser_resources.grd

@@ -61,6 +61,11 @@
         <structure name="IDR_DICE_WELCOME_BROWSER_PROXY_JS" file="resources\welcome\dice_welcome\welcome_browser_proxy.js" type="chrome_html" preprocess="true"/>
         <structure name="IDR_DICE_WELCOME_APP_HTML" file="resources\welcome\dice_welcome\welcome_app.html" type="chrome_html" preprocess="true"/>
         <structure name="IDR_DICE_WELCOME_APP_JS" file="resources\welcome\dice_welcome\welcome_app.js" type="chrome_html" preprocess="true"/>
+        <structure name="IDR_WELCOME_ONBOARDING_WELCOME_LANDING_VIEW_HTML" file="resources\welcome\onboarding_welcome\landing_view.html" type="chrome_html" preprocess="true"/>
+        <structure name="IDR_WELCOME_ONBOARDING_WELCOME_LANDING_VIEW_JS" file="resources\welcome\onboarding_welcome\landing_view.js" type="chrome_html" preprocess="true"/>
+        <structure name="IDR_WELCOME_ONBOARDING_WELCOME_WELCOME_APP_HTML" file="resources\welcome\onboarding_welcome\welcome_app.html" type="chrome_html" preprocess="true"/>
+        <structure name="IDR_WELCOME_ONBOARDING_WELCOME_WELCOME_APP_JS" file="resources\welcome\onboarding_welcome\welcome_app.js" type="chrome_html" preprocess="true"/>
+        <structure name="IDR_WELCOME_ONBOARDING_WELCOME_WELCOME_CSS" file="resources\welcome\onboarding_welcome\welcome.css" type="chrome_html" preprocess="true"/>
         <structure name="IDR_WELCOME_ONBOARDING_WELCOME_WELCOME_HTML" file="resources\welcome\onboarding_welcome\welcome.html" type="chrome_html" preprocess="true"/>
       </if>
       <if expr="is_win">

chrome/browser/resources/welcome/onboarding_welcome/landing_view.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
+<dom-module id="landing-view">
+  <template>
+    <style include="paper-button-style">
+      #container {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+        margin: auto;
+        width: 800px;
+      }
+
+      h1 {
+        font-size: 4rem;
+        margin-bottom: 20px;
+      }
+
+      h2 {
+        color: darkgrey;
+        font-size: 1.5rem;
+      }
+
+      paper-button {
+        font-size: 1rem;
+        height: 2.5rem;
+        text-align: center;
+        white-space: nowrap;
+        width: 220px;
+      }
+    </style>
+    <!-- TODO(scottchen): localize -->
+    <div id="container">
+      <h2>Set up your browser in a few simple steps</h2>
+      <h1>Make Chrome your own</h1>
+      <paper-button class="action-button" on-click="onNewUserClick_">
+        Get Started
+      </paper-button>
+      <paper-button on-click="onExistingUserClick_">
+        Already set up? Sign in
+      </paper-button>
+    </div>
+  </template>
+  <script src="landing_view.js"></script>
+</dom-module>
\ No newline at end of file

chrome/browser/resources/welcome/onboarding_welcome/landing_view.js

+// Copyright 2018 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({
+  is: 'landing-view',
+
+  /** @private */
+  onExistingUserClick_: function() {
+    // TODO(scottchen): do something.
+  },
+
+  /** @private */
+  onNewUserClick_: function() {
+    // TODO(scottchen): do something.
+  }
+});

chrome/browser/resources/welcome/onboarding_welcome/welcome.css

+/* Copyright 2018 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. */
+
+body {
+  margin: 0;
+}

chrome/browser/resources/welcome/onboarding_welcome/welcome.html

-<!-- TODO(scottchen): have actual content for onboarding welcome.
-     see: crbug.com/874142. -->
 <!doctype html>
-<html>
+<html dir="$i18n{textdirection}" lang="$i18n{language}">
   <head>
+    <meta charset="utf-8">
+    <title>$i18n{headerText}</title>
+    <link rel="import" href="welcome_app.html">
+    <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+    <link rel="stylesheet" href="chrome://welcome/welcome.css">
   </head>
   <body>
-    Hello world.
+    <welcome-app></welcome-app>
   </body>
 </html>

chrome/browser/resources/welcome/onboarding_welcome/welcome_app.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/cr_view_manager/cr_view_manager.html">
+<link rel="import" href="landing_view.html">
+
+<dom-module id="welcome-app">
+  <template>
+    <style include="paper-button-style">
+      #viewManager {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        font-size: 100%;
+        justify-content: center;
+        margin: 0;
+        min-height: 100vh;
+      }
+
+      [slot='view'] {
+        /* Each view should be centered instead of taking full page. */
+        --cr-view-manager-view: {
+          bottom: initial;
+          top: initial;
+          right: initial;
+          left: initial;
+        };
+      }
+    </style>
+    <cr-view-manager id="viewManager">
+      <landing-view id="step-landing" slot="view" class="active"></landing-view>
+    </cr-view-manager>
+  </template>
+  <script src="welcome_app.js"></script>
+</dom-module>

chrome/browser/resources/welcome/onboarding_welcome/welcome_app.js

+// Copyright 2018 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({
+  is: 'welcome-app',
+});

chrome/browser/ui/webui/welcome_ui.cc

@@ -74,9 +74,18 @@ WelcomeUI::WelcomeUI(content::WebUI* web_ui, const GURL& url)
     html_source->AddLocalizedString("headerText", IDS_WELCOME_HEADER);
 
     // Add onboarding welcome resources.
-    // TODO(scottchen): More resources to be added here.
     html_source->SetDefaultResource(
         IDR_WELCOME_ONBOARDING_WELCOME_WELCOME_HTML);
+    html_source->AddResourcePath(
+        "landing_view.html", IDR_WELCOME_ONBOARDING_WELCOME_LANDING_VIEW_HTML);
+    html_source->AddResourcePath(
+        "landing_view.js", IDR_WELCOME_ONBOARDING_WELCOME_LANDING_VIEW_JS);
+    html_source->AddResourcePath("welcome.css",
+                                 IDR_WELCOME_ONBOARDING_WELCOME_WELCOME_CSS);
+    html_source->AddResourcePath(
+        "welcome_app.html", IDR_WELCOME_ONBOARDING_WELCOME_WELCOME_APP_HTML);
+    html_source->AddResourcePath("welcome_app.js",
+                                 IDR_WELCOME_ONBOARDING_WELCOME_WELCOME_APP_JS);
 
   } else if (kIsBranded && is_dice) {
     // Use special layout if the application is branded and DICE is enabled.