NUX Onboarding: use actual nux modules in the onboarding flow.

This CL actually makes use of the NUX modules in the onboarding welcome page, instead of the placeholder pages. There will be follow-up CLs to style them to mock. Bug: 874151 Change-Id: Iac750fac5ec744e658770937adab69f0b81f8309 Reviewed-on: https://chromium-review.googlesource.com/c/1256010 Commit-Queue: Scott Chen <scottchen@chromium.org> Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#600098}

NUX Onboarding: use actual nux modules in the onboarding flow.
This CL actually makes use of the NUX modules in the onboarding welcome page, instead of the placeholder pages. There will be follow-up CLs to style them to mock. Bug: 874151 Change-Id: Iac750fac5ec744e658770937adab69f0b81f8309 Reviewed-on: https://chromium-review.googlesource.com/c/1256010 Commit-Queue: Scott Chen <scottchen@chromium.org> Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#600098}
5d8d2efb · Scott Chen · Commit Bot · 011df9a2 · 5d8d2efb · 5d8d2efb
Commit 5d8d2efb authored Oct 16, 2018 by Scott Chen Committed by Commit Bot Oct 16, 2018
18 changed files
--- a/chrome/browser/browser_resources.grd
+++ b/chrome/browser/browser_resources.grd
@@ -88,7 +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" />
+        <structure name="IDR_WELCOME_ONBOARDING_WELCOME_SHARED_CHOOSER_SHARED_CSS" file="resources\welcome\onboarding_welcome\shared\chooser_shared_css.html" type="chrome_html" />
        <structure name="IDR_WELCOME_ONBOARDING_WELCOME_SHARED_I18N_SETUP_HTML" file="resources\welcome\onboarding_welcome\shared\i18n_setup.html" type="chrome_html" />
      </if>
      <if expr="is_win">

--- a/chrome/browser/resources/welcome/onboarding_welcome/email/BUILD.gn
+++ b/chrome/browser/resources/welcome/onboarding_welcome/email/BUILD.gn
@@ -20,6 +20,7 @@ js_library("nux_email") {
 js_library("email_chooser") {
  deps = [
    ":nux_email_proxy",
+    "../:navigation_behavior",
    "//third_party/polymer/v1_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer-extracted",
    "//ui/webui/resources/js:cr",
    "//ui/webui/resources/js:i18n_behavior",

--- a/chrome/browser/resources/welcome/onboarding_welcome/email/email_chooser.html
+++ b/chrome/browser/resources/welcome/onboarding_welcome/email/email_chooser.html
@@ -8,7 +8,8 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.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">
+<link rel="import" href="../navigation_behavior.html">
+<link rel="import" href="../shared/chooser_shared_css.html">
 <link rel="import" href="../shared/i18n_setup.html">
 <link rel="import" href="nux_email_proxy.html">

--- a/chrome/browser/resources/welcome/onboarding_welcome/email/email_chooser.js
+++ b/chrome/browser/resources/welcome/onboarding_welcome/email/email_chooser.js
@@ -70,7 +70,7 @@ Polymer({
      if (this.selectedEmailProvider_) {
        this.browserProxy_.recordProviderSelected(
-            this.selectedEmailProvider_.id);
+            this.selectedEmailProvider_.id, this.emailList_.length);
      }
      this.browserProxy_.recordFinalize();
@@ -170,15 +170,18 @@ Polymer({
    this.revertBookmark_();
    this.browserProxy_.toggleBookmarkBar(this.bookmarkBarWasShown_);
    this.browserProxy_.recordNoThanks();
-    window.location.replace('chrome://newtab');
+    welcome.navigateToNextStep();
  },
  /** @private */
  onGetStartedClicked_: function() {
    this.finalized_ = true;
-    this.browserProxy_.recordProviderSelected(this.selectedEmailProvider_.id);
+    this.browserProxy_.recordProviderSelected(
+        this.selectedEmailProvider_.id, this.emailList_.length);
    this.browserProxy_.recordGetStarted();
-    window.location.replace(this.selectedEmailProvider_.url);
+    // TODO(scottchen): store the selected email provider URL somewhere to
+    //     redirect to at the end.
+    welcome.navigateToNextStep();
  },
  /** @private */

--- a/chrome/browser/resources/welcome/onboarding_welcome/email/nux_email.html
+++ b/chrome/browser/resources/welcome/onboarding_welcome/email/nux_email.html
-<!DOCTYPE html>
+<link rel="import" href="chrome://resources/html/polymer.html">
-<html dir="$i18n{textdirection}" lang="$i18n{language}">
-<head>
-  <meta charset="utf-8">
-  <title>$i18n{headerText}</title>
-  <link rel="import" href="chrome://resources/html/polymer.html">
-  <link rel="import" href="email_chooser.html">
-  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
-  <style>
+<link rel="import" href="email_chooser.html">
-    body {
-      margin: 0;
-    }
-  </style>
-  <dom-module id="nux-email">
+<dom-module id="nux-email">
-    <template>
+  <template>
-      <style>
+    <style>
-        :host {
+      .email-ask {
-          align-items: center;
+        text-align: center;
-          display: flex;
+      }
-          height: fit-content;
-          margin: auto;
-          min-height: 100vh;
-          width: fit-content;
-        }
-        .email-ask {
+      .email-logo {
-          text-align: center;
+        content: -webkit-image-set(
-        }
+          url(chrome://welcome/logo.png) 1x,
+          url(chrome://welcome/logo2x.png) 2x);
+        height: 48px;
+        margin: auto;
+        margin-bottom: 16px;
+        width: 48px;
+      }
-        .email-logo {
+      h1 {
-          content: -webkit-image-set(
+        color: var(--google-grey-900);
-            url(chrome://welcome/logo.png) 1x,
+        font-size: 1.5rem;
-            url(chrome://welcome/logo2x.png) 2x);
+        font-weight: 500;
-          height: 48px;
+        line-height: 2.5rem;
-          margin: auto;
+        margin: 0;
-          margin-bottom: 16px;
+      }
-          width: 48px;
-        }
-        h1 {
+      h2 {
-          color: #202124;
+        color: var(--google-grey-900);
-          font-size: 1.5rem;
+        font-size: 1.125rem;
-          font-weight: 500;
+        font-weight: unset;
-          line-height: 2.5rem;
+        line-height: 2rem;
-          margin: 0;
+        margin: 0;
-        }
+        margin-bottom: 48px;
+      }
-        h2 {
+      #emailChooser {
-          color: #202124;
+        color: var(--google-grey-900);
-          font-size: 1.125rem;
+        margin-bottom: 48px;
-          font-weight: unset;
+      }
-          line-height: 2rem;
+    </style>
-          margin: 0;
+    <div class="email-ask">
-          margin-bottom: 48px;
+      <div class="email-logo" alt=""></div>
-        }
+      <h1>$i18n{welcomeTitle}</h1>
+      <h2>$i18n{emailPrompt}</h2>
-        #emailChooser {
+      <email-chooser id="emailChooser"></email-chooser>
-          color: #202124;
+    </div>
-          margin-bottom: 48px;
+  </template>
-        }
+  <script src="nux_email.js"></script>
-      </style>
+</dom-module>
-      <div class="email-ask">
\ No newline at end of file
-        <div class="email-logo" alt=""></div>
-        <h1>$i18n{welcomeTitle}</h1>
-        <h2>$i18n{emailPrompt}</h2>
-        <email-chooser id="emailChooser"></email-chooser>
-      </div>
-    </template>
-    <script src="nux_email.js"></script>
-  </dom-module>
-</head>
-<body>
-  <nux-email></nux-email>
-</body>
-</html>
\ No newline at end of file
--- a/chrome/browser/resources/welcome/onboarding_welcome/email/nux_email_proxy.js
+++ b/chrome/browser/resources/welcome/onboarding_welcome/email/nux_email_proxy.js
@@ -76,8 +76,9 @@ cr.define('nux', function() {
    /**
     * @param {number} providerId This should match one of the histogram enum
     *     value for NuxEmailProvidersSelections.
+     * @param {number} length
     */
-    recordProviderSelected(providerId) {}
+    recordProviderSelected(providerId, length) {}
    recordNoThanks() {}
@@ -145,10 +146,11 @@ cr.define('nux', function() {
    }
    /** @override */
-    recordProviderSelected(providerId) {
+    recordProviderSelected(providerId, length) {
+      // TODO(hcarmona): get enum's max from loadTimeData instead, since length
+      //     might not be accurate once we start localizing.
      chrome.metricsPrivate.recordEnumerationValue(
-          SELECTION_METRIC_NAME, providerId,
+          SELECTION_METRIC_NAME, providerId, length);
-          loadTimeData.getInteger('email_count'));
    }
    /** @override */

--- a/chrome/browser/resources/welcome/onboarding_welcome/google_apps/BUILD.gn
+++ b/chrome/browser/resources/welcome/onboarding_welcome/google_apps/BUILD.gn
@@ -21,6 +21,7 @@ js_library("nux_google_apps") {
  deps = [
    ":apps_chooser",
    ":nux_google_apps_proxy",
+    "../:navigation_behavior",
    "../shared:nux_types",
  ]
 }

--- a/chrome/browser/resources/welcome/onboarding_welcome/google_apps/nux_google_apps.html
+++ b/chrome/browser/resources/welcome/onboarding_welcome/google_apps/nux_google_apps.html
-<!DOCTYPE html>
-<html dir="$i18n{textdirection}" lang="$i18n{language}">
-<meta charset="utf-8">
-<title>$i18n{headerText}</title>
 <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="../navigation_behavior.html">
 <link rel="import" href="apps_chooser.html">
 <link rel="import" href="nux_google_apps_proxy.html">
@@ -75,8 +71,3 @@
  </template>
  <script src="nux_google_apps.js"></script>
 </dom-module>
-<nux-google-apps></nux-google-apps>
-<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
-</html>
\ No newline at end of file
--- a/chrome/browser/resources/welcome/onboarding_welcome/google_apps/nux_google_apps.js
+++ b/chrome/browser/resources/welcome/onboarding_welcome/google_apps/nux_google_apps.js
@@ -13,13 +13,13 @@ Polymer({
  /** @private */
  onNoThanksClicked_: function() {
    chrome.send('rejectGoogleApps');
-    window.location.replace('chrome://newtab');
+    welcome.navigateToNextStep();
  },
  /** @private */
  onGetStartedClicked_: function() {
    let selectedApps = this.$.appChooser.getSelectedAppList();
    nux.NuxGoogleAppsProxyImpl.getInstance().addGoogleApps(selectedApps);
-    window.location.replace('chrome://newtab');
+    welcome.navigateToNextStep();
  },
 });
--- a/chrome/browser/resources/welcome/onboarding_welcome/landing_view.js
+++ b/chrome/browser/resources/welcome/onboarding_welcome/landing_view.js
@@ -5,8 +5,6 @@
 Polymer({
  is: 'landing-view',
-  behaviors: [welcome.NavigationBehavior],
  /** @private */
  onExistingUserClick_: function() {
    welcome.WelcomeBrowserProxyImpl.getInstance().handleActivateSignIn(
@@ -15,6 +13,6 @@ Polymer({
  /** @private */
  onNewUserClick_: function() {
-    this.navigateTo(welcome.Routes.NEW_USER, 1);
+    welcome.navigateTo(welcome.Routes.NEW_USER, 1);
  }
 });
--- a/chrome/browser/resources/welcome/onboarding_welcome/navigation_behavior.js
+++ b/chrome/browser/resources/welcome/onboarding_welcome/navigation_behavior.js
@@ -57,13 +57,44 @@ cr.define('welcome', function() {
    const route = /** @type {!welcome.Routes} */ (history.state.route);
    const step = history.state.step;
    routeObservers.forEach((observer) => {
-      observer.onRouteChange(route, step);
+      (/** @type {{onRouteChange: Function}} */ (observer))
+          .onRouteChange(route, step);
    });
  }
  // Notifies all elements when browser history is popped.
  window.addEventListener('popstate', notifyObservers);
+  function navigateToNextStep() {
+    history.pushState(
+        {
+          route: history.state.route,
+          step: history.state.step + 1,
+        },
+        '', `/${history.state.route}`);
+    notifyObservers();
+  }
+  /**
+   * @param {!welcome.Routes} route
+   * @param {number} step
+   */
+  function navigateTo(route, step) {
+    assert([
+      Routes.LANDING,
+      Routes.NEW_USER,
+      Routes.RETURNING_USER,
+    ].includes(route));
+    history.pushState(
+        {
+          route: route,
+          step: step,
+        },
+        '', '/' + (route === Routes.LANDING ? '' : route));
+    notifyObservers();
+  }
  /** @polymerBehavior */
  const NavigationBehavior = {
    /** @override */
@@ -85,40 +116,12 @@ cr.define('welcome', function() {
    /** Elements can override onRouteChange to handle route changes. */
    onRouteChange: function() {},
-    navigateToNextStep: function() {
-      history.pushState(
-          {
-            route: history.state.route,
-            step: history.state.step + 1,
-          },
-          '', `/${history.state.route}`);
-      notifyObservers();
-    },
-    /**
-     * @param {!welcome.Routes} route
-     * @param {number} step
-     */
-    navigateTo: function(route, step) {
-      assert([
-        Routes.LANDING,
-        Routes.NEW_USER,
-        Routes.RETURNING_USER,
-      ].includes(route));
-      history.pushState(
-          {
-            route: route,
-            step: step,
-          },
-          '', '/' + (route === Routes.LANDING ? '' : route));
-      notifyObservers();
-    },
  };
  return {
    NavigationBehavior: NavigationBehavior,
+    navigateTo: navigateTo,
+    navigateToNextStep: navigateToNextStep,
    Routes: Routes,
  };
 });
\ No newline at end of file
--- a/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/BUILD.gn
+++ b/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/BUILD.gn
@@ -13,6 +13,7 @@ js_type_check("closure_compile") {
 js_library("nux_set_as_default") {
  deps = [
    ":nux_set_as_default_proxy",
+    "../:navigation_behavior",
    "//ui/webui/resources/js:web_ui_listener_behavior",
  ]
 }

--- a/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html
+++ b/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html
-<!DOCTYPE html>
+<link rel="import" href="chrome://resources/html/polymer.html">
-<html dir="$i18n{textdirection}" lang="$i18n{language}">
-<head>
-  <meta charset="utf-8">
-  <title>$i18n{headerText}</title>
-  <link rel="import" href="chrome://resources/html/polymer.html">
-  <link rel="import" href="chrome://resources/cr_elements/icons.html">
-  <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
-  <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-  <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-  <link rel="import" href="nux_set_as_default_proxy.html">
-  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
-  <style>
-    body {
-      margin: 0;
-    }
-  </style>
-  <dom-module id="nux-set-as-default">
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
-    <template>
+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
-      <style include="paper-button-style">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
-        :host {
+<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-          align-items: center;
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-          display: flex;
+<link rel="import" href="../navigation_behavior.html">
-          height: 100vh;
+<link rel="import" href="nux_set_as_default_proxy.html">
-          justify-content: space-around;
-        }
-        .container {
+<dom-module id="nux-set-as-default">
-          text-align: center;
+  <template>
-          width: 800px;
+    <style include="paper-button-style">
-        }
+      .container {
+        text-align: center;
+        width: 800px;
+      }
-        .logo {
+      .logo {
-          margin-bottom: 16px;
+        /* TODO(scottchen): placeholder; replace when asset is available. */
-          /* TODO(scottchen): placeholder; replace when asset is available. */
+        background: red;
-          width: 32px;
+        display: inline-block;
-          height: 32px;
+        height: 32px;
-          display: inline-block;
+        margin-bottom: 16px;
-          background: red;
+        width: 32px;
-        }
+      }
-        h1 {
+      h1 {
-          color: #202124;
+        color: var(--google-grey-900);
-          font-weight: 500;
+        font-size: 1.5rem;
-          font-size: 1.5rem;
+        font-weight: 500;
-          line-height: 2.5rem;
+        line-height: 2.5rem;
-          margin: 0;
+        margin: 0;
-        }
+      }
-        h2 {
+      h2 {
-          color: #202124;
+        color: var(--google-grey-900);
-          font-weight: unset;
+        font-size: 1.25rem;
-          font-size: 1.25rem;
+        font-weight: unset;
-          line-height: 1.875rem;
+        line-height: 1.875rem;
-          margin: 0;
+        margin: 0;
-          margin-top: 16px;
+        margin-bottom: 48px;
-          margin-bottom: 48px;
+        margin-top: 16px;
-        }
+      }
-        img {
+      img {
-          /* TODO(scottchen): placeholder; replace when asset is available. */
+        /* TODO(scottchen): placeholder; replace when asset is available. */
-          width: 454px;
+        background: red;
-          height: 186px;
+        display: inline-block;
-          display: inline-block;
+        height: 186px;
-          background: red;
+        width: 454px;
-        }
+      }
-        .button-bar {
+      .button-bar {
-          display: flex;
+        display: flex;
-          margin-top: 64px;
+        justify-content: space-between;
-          justify-content: space-between;
+        margin-top: 64px;
-        }
+      }
-      </style>
+    </style>
-      <div class="container">
+    <div class="container">
-        <div class="logo"></div>
+      <div class="logo"></div>
-        <h1>TODO_HEADER</h1>
+      <h1>TODO_HEADER</h1>
-        <h2>TODO_SUBHEADER</h2>
+      <h2>TODO_SUBHEADER</h2>
-        <!-- TODO(scottchen): WIP behind feature flag, add src later. -->
+      <!-- TODO(scottchen): WIP behind feature flag, add src later. -->
-        <img>
+      <img>
-        <div class="button-bar">
+      <div class="button-bar">
-          <paper-button on-click="onDeclineClick_">
+        <paper-button on-click="onDeclineClick_">
-            TODO_NO_THANKS
+          TODO_NO_THANKS
-          </paper-button>
+        </paper-button>
-          <paper-button class="action-button" on-click="onSetDefaultClick_">
+        <paper-button class="action-button" on-click="onSetDefaultClick_">
-            TODO_SET_AS_DEFAULT
+          TODO_SET_AS_DEFAULT
-          </paper-button>
+        </paper-button>
-        </div>
      </div>
-    </template>
+    </div>
-    <script src="nux_set_as_default.js"></script>
+  </template>
-  </dom-module>
+  <script src="nux_set_as_default.js"></script>
-</head>
+</dom-module>
-<body>
\ No newline at end of file
-  <nux-set-as-default></nux-set-as-default>
-</body>
-</html>
\ No newline at end of file
--- a/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.js
+++ b/chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.js
@@ -45,7 +45,6 @@ Polymer({
  /** @private */
  finished_: function() {
-    // TODO(scottchen): use navigation behavior to go to next step once this
+    welcome.navigateToNextStep();
-    //     module is integrated with onboarding-welcome's welcome-app.
  },
 });
--- a/chrome/browser/resources/welcome/onboarding_welcome/shared/i18n_setup.html
+++ b/chrome/browser/resources/welcome/onboarding_welcome/shared/i18n_setup.html
 <script src="chrome://resources/js/load_time_data.js"></script>
 <script src="../strings.js"></script>
\ No newline at end of file
--- a/chrome/browser/resources/welcome/onboarding_welcome/welcome_app.html
+++ b/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="navigation_behavior.html">
+<link rel="import" href="apps/nux_google_apps.html">
+<link rel="import" href="email/nux_email.html">
 <link rel="import" href="landing_view.html">
+<link rel="import" href="navigation_behavior.html">
+<link rel="import" href="set_as_default/nux_set_as_default.html">
 <dom-module id="welcome-app">
  <template>
@@ -17,14 +20,12 @@
        min-height: 100vh;
      }
-      [slot='view'] {
+      #viewManager > [slot='view'] {
        /* Each view should be centered instead of taking full page. */
-        --cr-view-manager-view: {
+        bottom: initial;
-          bottom: initial;
+        left: initial;
-          top: initial;
+        right: initial;
-          right: initial;
+        top: initial;
-          left: initial;
-        };
      }
    </style>
    <cr-view-manager id="viewManager">

--- a/chrome/browser/resources/welcome/onboarding_welcome/welcome_app.js
+++ b/chrome/browser/resources/welcome/onboarding_welcome/welcome_app.js
@@ -22,8 +22,8 @@ Polymer({
  // TODO(scottchen): instead of dummy, get data from finch/load time data.
  /** @private {NuxOnboardingModules} */
  modules_: {
-    'new-user': ['h1', 'h1', 'h1'],
+    'new-user': ['nux-email', 'nux-google-apps', 'nux-set-as-default'],
-    'returning-user': ['h3', 'h3'],
+    'returning-user': ['nux-set-as-default'],
  },
  /**
@@ -65,13 +65,6 @@ Polymer({
      element.id = 'step-' + (index + 1);
      element.setAttribute('slot', 'view');
      this.$.viewManager.appendChild(element);
-      // TODO(scottchen): this is just to test routing works. Actual elements
-      //     will have buttons that are responsible for navigation.
-      element.textContent = index + 1;
-      element.addEventListener('click', () => {
-        this.navigateToNextStep();
-      });
    });
  },
 });
--- a/chrome/browser/ui/webui/welcome/welcome_ui.cc
+++ b/chrome/browser/ui/webui/welcome/welcome_ui.cc
@@ -95,8 +95,9 @@ WelcomeUI::WelcomeUI(content::WebUI* web_ui, const GURL& url)
        IDR_WELCOME_ONBOARDING_WELCOME_WELCOME_BROWSER_PROXY_JS);
    // Add resources shared by the NUX modules.
-    html_source->AddResourcePath("shared/chooser_shared_css.html",
+    html_source->AddResourcePath(
-                                 IDR_NUX_CHOOSER_SHARED_CSS);
+        "shared/chooser_shared_css.html",
+        IDR_WELCOME_ONBOARDING_WELCOME_SHARED_CHOOSER_SHARED_CSS);
    html_source->AddResourcePath(
        "shared/i18n_setup.html",
        IDR_WELCOME_ONBOARDING_WELCOME_SHARED_I18N_SETUP_HTML);