Navi: Update Google Apps chooser to more closely match mocks.

Followup CLs will address other visual issues to avoid over-complicating this CL

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

chrome/browser/browser_resources.grd

@@ -88,6 +88,7 @@
         <structure name="IDR_NUX_SET_AS_DEFAULT_JS" file="resources\welcome\onboarding_welcome\set_as_default\nux_set_as_default.js" type="chrome_html" />
         <structure name="IDR_NUX_SET_AS_DEFAULT_PROXY_HTML" file="resources\welcome\onboarding_welcome\set_as_default\nux_set_as_default_proxy.html" type="chrome_html" />
         <structure name="IDR_NUX_SET_AS_DEFAULT_PROXY_JS" file="resources\welcome\onboarding_welcome\set_as_default\nux_set_as_default_proxy.js" type="chrome_html" />
+        <structure name="IDR_NUX_CHOOSER_SHARED_CSS" file="resources\welcome\onboarding_welcome\shared\chooser_shared_css.html" type="chrome_html" />
       </if>
       <if expr="is_win">
         <structure name="IDR_WELCOME_WIN10_CSS" file="resources\welcome\welcome_win10.css" type="chrome_html" />

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

@@ -8,94 +8,11 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://welcome/email/nux_email_proxy.html">
+<link rel="import" href="chrome://welcome/shared/chooser_shared_css.html">
 
 <dom-module id="email-chooser">
   <template>
-    <style include="paper-button-style">
-      :host {
-        display: block;
-        white-space: nowrap;
-      }
-
-      .option {
-        align-items: center;
-        background: white;
-        border-radius: 8px;
-        border: 1px solid transparent;
-        box-sizing: border-box;
-        box-shadow: 0 1px 2px 0 rgba(0,36,100,0.30),
-            0 2px 6px 2px rgba(0,36,100,0.15);
-        display: inline-flex;
-        flex-direction: column;
-        height: 96px;
-        justify-content: center;
-        position: relative;
-        vertical-align: bottom;
-        -webkit-appearance: none;
-        width: 120px;
-        outline: 0;
-      }
-
-      .option:not(:first-of-type) {
-        margin-inline-start: 24px;
-      }
-
-      .option.keyboard-focused:focus {
-        outline: -webkit-focus-ring-color auto 5px;
-      }
-
-      .option .email-name {
-        flex-grow: 0;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        text-align: center;
-        white-space: normal;
-      }
-
-      .option .email-icon {
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
-        height: 40px;
-        margin: 0;
-        margin-bottom: 4px;
-        width: 40px;
-      }
-
-      .option iron-icon {
-        --iron-icon-fill-color: white;
-        background: lightgrey;
-        border-radius: 50%;
-        display: none;
-        height: 12px;
-        margin: 0;
-        position: absolute;
-        right: 10px;
-        top: 10px;
-        width: 12px;
-      }
-
-      .option.keyboard-focused:focus iron-icon[icon="cr:check"],
-      .option:hover iron-icon[icon="cr:check"],
-      .option[active] iron-icon[icon="cr:check"] {
-        display: block;
-      }
-
-      .option[active] {
-        border: 1px solid var(--google-blue-600);
-        color: var(--google-blue-600);
-      }
-
-      .option[active] iron-icon[icon="cr:check"] {
-        background: var(--google-blue-600);
-      }
-
-      .button-bar {
-        display: flex;
-        margin-top: 64px;
-        justify-content: space-between;
-      }
-
+    <style include="chooser-shared-css paper-button-style">
       .gmail {
         background-image: -webkit-image-set(
             url(chrome://welcome/email/gmail_1x.png) 1x,
@@ -131,8 +48,8 @@
       <button active$="[[getSelected_(item, selectedEmailProvider_)]]"
           on-click="onEmailClick_" on-pointerdown="onEmailPointerDown_"
           on-keyup="onEmailKeyUp_" class="option">
-        <div class$="[[item.icon]] email-icon"></div>
-        <div class="email-name">[[item.name]]</div>
+        <div class$="[[item.icon]] option-icon"></div>
+        <div class="option-name">[[item.name]]</div>
         <iron-icon icon="cr:check"></iron-icon>
       </button>
     </template>

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

@@ -4,33 +4,11 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://welcome/shared/chooser_shared_css.html">
 
 <dom-module id="apps-chooser">
   <template>
-    <style>
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
-
-      .app-icon {
-        margin-inline-end: 16px;
-        margin-inline-start: 4px;
-      }
-
-      iron-icon {
-        margin-inline-end: 48px;
-      }
-
-      [active] iron-icon[icon="cr:check"] {
-        --iron-icon-fill-color: var(--google-blue-600);
-        opacity: unset;
-      }
-
-      iron-icon[icon="cr:check"] {
-        opacity: 0;
-      }
-
+    <style include="chooser-shared-css">
       .gmail {
         content: -webkit-image-set(
             url(chrome://welcome/apps/gmail_1x.png) 1x,
@@ -61,43 +39,22 @@
             url(chrome://welcome/apps/news_2x.png) 2x);
       }
 
-      .chrome_store {
+      .chrome-store {
         content: -webkit-image-set(
             url(chrome://welcome/apps/chrome_store_1x.png) 1x,
             url(chrome://welcome/apps/chrome_store_2x.png) 2x);
       }
-
-      paper-button:first-of-type {
-        border-top: unset;
-      }
-
-      paper-button {
-        border-radius: 0;
-        border-top: var(--cr-section_-_border-top);
-        display: flex;
-        margin: 0;
-        padding: 12px 0;
-        text-transform: unset;
-      }
-
-      paper-button:not([raised]).keyboard-focus {
-        outline-width: unset;
-        font-weight: unset;
-      }
-
-      .app-name {
-        flex: 1;
-      }
     </style>
 
     <template is="dom-repeat" items="[[appList]]">
-      <paper-button toggles noink
-          active$="[[item.selected]]" on-click="onAppClick_">
-        <div class$="[[item.icon]] app-icon"></div>
-        <div class="app-name">[[item.name]]</div>
-        <iron-icon icon="cr:check"></iron-icon>
-      </paper-button>
+      <button active$="[[item.selected]]"
+          on-click="onAppClick_" on-pointerdown="onAppPointerDown_"
+          on-keyup="onAppKeyUp_" class="option">
+        <div class$="[[item.icon]] option-icon"></div>
+          <div class="option-name">[[item.name]]</div>
+          <iron-icon icon="cr:check"></iron-icon>
+        </button>
+      </template>
     </template>
-  </template>
   <script src="apps_chooser.js"></script>
-</dom-module>
+</dom-module>
\ No newline at end of file

chrome/browser/resources/welcome/onboarding_welcome/google_apps/apps_chooser.js

@@ -53,8 +53,8 @@ Polymer({
             selected: true,
           },
           {
-            name: 'Chrome Web Store',
-            icon: 'chrome_store',
+            name: 'Web Store',
+            icon: 'chrome-store',
             selected: true,
           },
         ];
@@ -86,6 +86,22 @@ Polymer({
     this.hasAppsSelected = this.computeHasAppsSelected_();
   },
 
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onAppPointerDown_: function(e) {
+    e.currentTarget.classList.remove('keyboard-focused');
+  },
+
+  /**
+   * @param {!Event} e
+   * @private
+   */
+  onAppKeyUp_: function(e) {
+    e.currentTarget.classList.add('keyboard-focused');
+  },
+
   /**
    * @return {boolean}
    * @private

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

@@ -6,6 +6,7 @@
 <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/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://welcome/apps/apps_chooser.html">
 <link rel="import" href="chrome://welcome/apps/nux_google_apps_proxy.html">
@@ -21,33 +22,33 @@
         margin-left: auto;
         margin-right: auto;
         margin-top: 116px;
-        max-width: 568px;
+        width: fit-content;
       }
 
       .chrome-logo {
         content: -webkit-image-set(
-            url('chrome://welcome/logo.png') 1x,
-            url('chrome://welcome/logo2x.png') 2x);
+            url(chrome://welcome/logo.png) 1x,
+            url(chrome://welcome/logo2x.png) 2x);
         height: 40px;
         margin-bottom: 36px;
         width: 40px;
       }
 
       h1 {
-        color: #202124;
+        color: var(--cr-primary-text-color);
         font-size: 28px;
-        opacity: .8;
         margin-bottom: 16px;
+        opacity: .8;
       }
 
       .description {
-        color: #5f6368;
+        color: var(--cr-secondary-text-color);
         font-size: 16px;
         margin-bottom: 24px;
       }
 
       apps-chooser {
-        color: #202124;
+        color: var(--cr-primary-text-color);
         font-size: 14px;
         margin-bottom: 48px;
       }

chrome/browser/resources/welcome/onboarding_welcome/shared/chooser_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="chooser-shared-css">
+  <template>
+    <style>
+      :host {
+        display: block;
+        white-space: nowrap;
+      }
+
+      .option {
+        -webkit-appearance: none;
+        align-items: center;
+        background: white;
+        border: 1px solid transparent;
+        border-radius: 8px;
+        box-shadow: 0 1px 2px 0 rgba(0,36,100,0.30),
+                    0 2px 6px 2px rgba(0,36,100,0.15);
+        box-sizing: border-box;
+        display: inline-flex;
+        flex-direction: column;
+        height: 96px;
+        justify-content: center;
+        outline: 0;
+        position: relative;
+        vertical-align: bottom;
+        width: 120px;
+      }
+
+      .option:not(:first-of-type) {
+        margin-inline-start: 24px;
+      }
+
+      .option.keyboard-focused:focus {
+        outline: -webkit-focus-ring-color auto 5px;
+      }
+
+      .option .option-name {
+        flex-grow: 0;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+        text-align: center;
+        white-space: normal;
+      }
+
+      .option .option-icon {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        height: 40px;
+        margin: 0;
+        margin-bottom: 4px;
+        width: 40px;
+      }
+
+      .option iron-icon {
+        --iron-icon-fill-color: white;
+        background: lightgrey;
+        border-radius: 50%;
+        display: none;
+        height: 12px;
+        margin: 0;
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        width: 12px;
+      }
+
+      .option.keyboard-focused:focus iron-icon[icon='cr:check'],
+      .option:hover iron-icon[icon='cr:check'],
+      .option[active] iron-icon[icon='cr:check'] {
+        display: block;
+      }
+
+      .option[active] {
+        border: 1px solid var(--google-blue-600);
+        color: var(--google-blue-600);
+      }
+
+      .option[active] iron-icon[icon='cr:check'] {
+        background: var(--google-blue-600);
+      }
+
+      .button-bar {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 64px;
+      }
+    </style>
+  </template>
+</dom-module>
\ No newline at end of file

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

@@ -144,6 +144,11 @@ WelcomeUI::WelcomeUI(content::WebUI* web_ui, const GURL& url)
   }
 
 #if defined(OS_WIN) && defined(GOOGLE_CHROME_BUILD)
+  // TODO(hcarmona): Move this behind nux::kNuxOnboardingFeature when email and
+  // apps experiments end.
+  html_source->AddResourcePath("shared/chooser_shared_css.html",
+                               IDR_NUX_CHOOSER_SHARED_CSS);
+
   if (base::FeatureList::IsEnabled(nux::kNuxOnboardingFeature)) {
     web_ui->AddMessageHandler(std::make_unique<nux::SetAsDefaultHandler>());
     nux::SetAsDefaultHandler::AddSources(html_source);