Nux Onboarding: touch-up splash pages

This CL touches up styling and strings for the full-bleed NUX
views, including landing, sign-up, and email-interstitial.

Bug: 874151
Change-Id: I29ee2ebea20136702aa0670eae54e5c486b32caa
Reviewed-on: https://chromium-review.googlesource.com/c/1294306
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#602194}

chrome/app/onboarding_welcome_strings.grdp

@@ -41,14 +41,36 @@
     Set as default
   </message>
 
+  <!-- Landing view -->
+  <message name="IDS_ONBOARDING_WELCOME_LANDING_TITLE" desc="Title for the page that prompts user to start setting up their new Chrome.">
+    Make Chrome your own
+  </message>
+  <message name="IDS_ONBOARDING_WELCOME_LANDING_DESCRIPTION" desc="Description for the page that prompts user to start setting up their new Chrome.">
+    Set up your browser in a few simple steps
+  </message>
+  <message name="IDS_ONBOARDING_WELCOME_LANDING_NEW_USER" desc="Label for a button that prompts new users to start setting up their new Chrome.">
+    Get Started
+  </message>
+  <message name="IDS_ONBOARDING_WELCOME_LANDING_EXISTING_USER" desc="Label for a button that prompts existing users to sign in.">
+    Already a Chrome user? Sign in
+  </message>
+
   <!-- Sign-in view -->
-  <message name="IDS_ONBOARDING_WELCOME_SIGNIN_VIEW_HEADER" desc="Header for the page that prompts user to set Chrome as their default browser.">
+  <message name="IDS_ONBOARDING_WELCOME_SIGNIN_VIEW_HEADER" desc="Header for the page that prompts user to sign in to chrome.">
     Save your progress
   </message>
-  <message name="IDS_ONBOARDING_WELCOME_SIGNIN_VIEW_SUB_HEADER" desc="Sub-header for the page that prompts user to set Chrome as their default browser.">
+  <message name="IDS_ONBOARDING_WELCOME_SIGNIN_VIEW_SUB_HEADER" desc="Sub-header for the page that prompts user to sign in to chrome.">
     Sign in to get your bookmarks on all devices
   </message>
-  <message name="IDS_ONBOARDING_WELCOME_SIGNIN_VIEW_SIGNIN" desc="The label for a button to skip setting Chrome as their default browser.">
+  <message name="IDS_ONBOARDING_WELCOME_SIGNIN_VIEW_SIGNIN" desc="The label for a button to let users sign in to chrome.">
     Sign in
   </message>
+
+  <!-- Email interstitial view -->
+  <message name="IDS_ONBOARDING_WELCOME_EMAIL_INTERSTITIAL_TITLE" desc="Text shown to ask users whether or not they want to be directed to the email provider they previously selected, or skip this and start using the browser.">
+    Continue to your email?
+  </message>
+  <message name="IDS_ONBOARDING_WELCOME_EMAIL_INTERSTITIAL_CONTINUE" desc="Label for the button to direct the user to the email provider they previously selected.">
+    Continue
+  </message>
 </grit-part>

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

@@ -11,48 +11,40 @@
     <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
     <link rel="import" href="welcome_browser_proxy.html">
     <link rel="import" href="email/nux_email_proxy.html">
+    <link rel="import" href="shared/action_link_style_css.html">
+    <link rel="import" href="shared/onboarding_background.html">
+    <link rel="import" href="shared/splash_pages_shared_css.html">
 
     <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+
     <dom-module id="email-interstitial">
       <template>
-        <style include="paper-button-style">
-          #container {
+        <style include="paper-button-style action-link-style splash-pages-shared-css">
+          :host {
             align-items: center;
             display: flex;
-            flex-direction: column;
-            height: 100%;
+            height: 100vh;
             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;
+            margin-top: 0;
           }
         </style>
-        <!-- TODO(scottchen): localize -->
+        <onboarding-background></onboarding-background>
         <div id="container">
-          <h1>TODO Continue to your email?</h1>
+          <h1>$i18n{emailInterstitialTitle}</h1>
           <paper-button class="action-button" on-click="onContinueClick_">
-            Continue
-          </paper-button>
-          <paper-button on-click="onNoThanksClick_">
-            No thanks
+            $i18n{emailInterstitialContinue}
           </paper-button>
+          <button class="action-link" on-click="onNoThanksClick_">
+            $i18n{noThanks}
+          </button>
         </div>
       </template>
       <script src="email_interstitial.js"></script>

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

@@ -6,61 +6,24 @@
 <link rel="import" href="navigation_behavior.html">
 <link rel="import" href="shared/action_link_style_css.html">
 <link rel="import" href="shared/onboarding_background.html">
+<link rel="import" href="shared/splash_pages_shared_css.html">
 <link rel="import" href="welcome_browser_proxy.html">
 
 <dom-module id="landing-view">
   <template>
-    <style include="paper-button-style action-link-style">
-      #container {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        justify-content: center;
-        margin: auto;
-        min-width: 800px;
-      }
-
-      h1 {
-        font-size: 4rem;
-        margin-bottom: 40px;
-        margin-top: 16px;
-      }
-
-      h2 {
-        color: darkgrey;
-        font-size: 1.5rem;
-        font-weight: 500;
-        line-height: 2.25rem;
-        margin: 0;
-      }
-
-      paper-button {
-        font-size: 1rem;
-        height: 3rem;
-        padding-bottom: 12px;
-        padding-top: 12px;
-        text-align: center;
-        white-space: nowrap;
-        width: 256px;
-      }
-
-      .action-link {
-        font-size: 1rem;
-        font-weight: 500;
-        margin-top: 24px;
-      }
+    <style
+        include="paper-button-style action-link-style splash-pages-shared-css">
     </style>
     <!-- TODO(scottchen): localize -->
     <onboarding-background></onboarding-background>
     <div id="container">
-      <h2>Set up your browser in a few simple steps</h2>
-      <h1>Make Chrome your own</h1>
+      <h2>$i18n{landingDescription}</h2>
+      <h1>$i18n{landingTitle}</h1>
       <paper-button class="action-button" on-click="onNewUserClick_">
-        Get Started
+        $i18n{landingNewUser}
       </paper-button>
       <button class="action-link" on-click="onExistingUserClick_">
-        Already a Chrome user? Sign in
+        $i18n{landingExistingUser}
       </button>
     </div>
   </template>

chrome/browser/resources/welcome/onboarding_welcome/onboarding_welcome_resources.grd

@@ -61,6 +61,9 @@
       <structure name="IDR_WELCOME_ONBOARDING_WELCOME_SHARED_CHOOSER_SHARED_CSS"
                  file="shared\chooser_shared_css.html"
                  type="chrome_html" />
+      <structure name="IDR_WELCOME_ONBOARDING_WELCOME_SHARED_SPLASH_PAGES_SHARED_CSS"
+                 file="shared\splash_pages_shared_css.html"
+                 type="chrome_html" />
       <structure name="IDR_WELCOME_ONBOARDING_WELCOME_SHARED_I18N_SETUP_HTML"
                  file="shared\i18n_setup.html"
                  type="chrome_html" />

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+
+<dom-module id="splash-pages-shared-css">
+  <template>
+    <style>
+      #container {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+        margin: auto;
+        min-width: 800px;
+      }
+
+      h1 {
+        font-size: 4rem;
+        margin-bottom: 40px;
+        margin-top: 16px;
+      }
+
+      h2 {
+        color: var(--google-grey-600);
+        font-size: 1.5rem;
+        font-weight: 500;
+        line-height: 2.25rem;
+        margin: 0;
+        opacity: 0.8;
+      }
+
+      paper-button {
+        font-size: 1rem;
+        height: 3rem;
+        padding-bottom: 12px;
+        padding-top: 12px;
+        text-align: center;
+        white-space: nowrap;
+        width: 256px;
+      }
+
+      .action-link {
+        font-size: 1rem;
+        font-weight: 500;
+        margin-top: 24px;
+      }
+    </style>
+  </template>
+</dom-module>
\ No newline at end of file

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

@@ -4,49 +4,27 @@
 <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">
 <link rel="import" href="navigation_behavior.html">
+<link rel="import" href="shared/action_link_style_css.html">
+<link rel="import" href="shared/onboarding_background.html">
+<link rel="import" href="shared/splash_pages_shared_css.html">
 <link rel="import" href="welcome_browser_proxy.html">
 
 <dom-module id="signin-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
+        include="paper-button-style action-link-style splash-pages-shared-css">
     </style>
     <!-- TODO(scottchen): localize -->
+    <onboarding-background></onboarding-background>
     <div id="container">
       <h2>$i18n{signInSubHeader}</h2>
       <h1>$i18n{signInHeader}</h1>
       <paper-button class="action-button" on-click="onSignInClick_">
         $i18n{signIn}
       </paper-button>
-      <paper-button on-click="onNoThanksClick_">
+      <button class="action-link" on-click="onNoThanksClick_">
         $i18n{noThanks}
-      </paper-button>
+      </button>
     </div>
   </template>
   <script src="signin_view.js"></script>

chrome/browser/ui/webui/welcome/welcome_ui.cc

@@ -78,6 +78,18 @@ void AddOnboardingStrings(content::WebUIDataSource* html_source) {
       {"setDefaultSkip", IDS_ONBOARDING_WELCOME_NUX_SET_AS_DEFAULT_SKIP},
       {"setDefaultConfirm",
        IDS_ONBOARDING_WELCOME_NUX_SET_AS_DEFAULT_SET_AS_DEFAULT},
+
+      // Landing view strings.
+      {"landingTitle", IDS_ONBOARDING_WELCOME_LANDING_TITLE},
+      {"landingDescription", IDS_ONBOARDING_WELCOME_LANDING_DESCRIPTION},
+      {"landingNewUser", IDS_ONBOARDING_WELCOME_LANDING_NEW_USER},
+      {"landingExistingUser", IDS_ONBOARDING_WELCOME_LANDING_EXISTING_USER},
+
+      // Email interstitial strings.
+      {"emailInterstitialTitle",
+       IDS_ONBOARDING_WELCOME_EMAIL_INTERSTITIAL_TITLE},
+      {"emailInterstitialContinue",
+       IDS_ONBOARDING_WELCOME_EMAIL_INTERSTITIAL_CONTINUE},
   };
 
   // TODO(scottchen): reuse instead of copy from