oobe: serve more components as separate resources

Bug: 1144159
Change-Id: Iaaf65a1b3b228155344aaeb316f1682591496730
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2519973
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Renato Silva <rrsilva@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825314}

chrome/browser/browser_resources.grd

@@ -47,6 +47,15 @@
         <structure name="IDR_OOBE_COMPONENTS_HD_IRON_ICON_HTML" file="resources/chromeos/login/components/hd_iron_icon/hd_iron_icon.html" type="chrome_html" />
         <structure name="IDR_OOBE_COMPONENTS_HD_IRON_ICON_JS" file="resources/chromeos/login/components/hd_iron_icon/hd_iron_icon.js" type="chrome_html" />
 
+        <structure name="IDR_OOBE_COMPONENTS_OOBE_CAROUSEL_HTML" file="resources/chromeos/login/components/oobe_carousel/oobe_carousel.html" type="chrome_html" />
+        <structure name="IDR_OOBE_COMPONENTS_OOBE_CAROUSEL_JS" file="resources/chromeos/login/components/oobe_carousel/oobe_carousel.js" type="chrome_html" />
+        <structure name="IDR_OOBE_COMPONENTS_OOBE_SLIDE_HTML" file="resources/chromeos/login/components/oobe_slide/oobe_slide.html" type="chrome_html" />
+        <structure name="IDR_OOBE_COMPONENTS_OOBE_SLIDE_JS" file="resources/chromeos/login/components/oobe_slide/oobe_slide.js" type="chrome_html" />
+        <structure name="IDR_OOBE_COMPONENTS_PROGRESS_LIST_ITEM_HTML" file="resources/chromeos/login/components/progress_list_item/progress_list_item.html" type="chrome_html" />
+        <structure name="IDR_OOBE_COMPONENTS_PROGRESS_LIST_ITEM_JS" file="resources/chromeos/login/components/progress_list_item/progress_list_item.js" type="chrome_html" />
+        <structure name="IDR_OOBE_COMPONENTS_THROBBER_NOTICE_HTML" file="resources/chromeos/login/components/throbber_notice/throbber_notice.html" type="chrome_html" />
+        <structure name="IDR_OOBE_COMPONENTS_THROBBER_NOTICE_JS" file="resources/chromeos/login/components/throbber_notice/throbber_notice.js" type="chrome_html" />
+
         <!-- Gesture Navigation animations. -->
         <structure type="chrome_html" name="IDR_GESTURE_NAVIGATION_GO_HOME_ANIMATION" file="resources\chromeos\login\images\gesture_go_home.json" compress="gzip" />
         <structure type="chrome_html" name="IDR_GESTURE_NAVIGATION_GO_BACK_ANIMATION" file="resources\chromeos\login\images\gesture_go_back.json" compress="gzip" />

chrome/browser/resources/chromeos/login/BUILD.gn

@@ -50,7 +50,6 @@ js_type_check("closure_compile_local") {
     ":recommend_apps",
     ":saml_confirm_password",
     ":sync_consent",
-    ":throbber_notice",
     ":update_required_card",
     ":user_creation",
   ]
@@ -324,9 +323,6 @@ js_library("sync_consent") {
   ]
 }
 
-js_library("throbber_notice") {
-}
-
 js_library("update_required_card") {
   deps = [
     "components:login_screen_behavior",

chrome/browser/resources/chromeos/login/active_directory_password_change.html

@@ -13,6 +13,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <!--
   Offline UI for the Active Directory password change.

chrome/browser/resources/chromeos/login/arc_terms_of_service.html

@@ -10,6 +10,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <dom-module id="arc-tos-element">
   <template>

chrome/browser/resources/chromeos/login/components/BUILD.gn

@@ -9,7 +9,11 @@ group("closure_compile") {
   deps = [
     ":closure_compile_local",
     "hd_iron_icon:closure_compile",
+    "oobe_carousel:closure_compile",
     "oobe_i18n_behavior:closure_compile",
+    "oobe_slide:closure_compile",
+    "progress_list_item:closure_compile",
+    "throbber_notice:closure_compile",
   ]
 }
 
@@ -20,12 +24,10 @@ js_type_check("closure_compile_local") {
     ":login_screen_behavior",
     ":multi_step_behavior",
     ":oobe_buttons",
-    ":oobe_carousel",
     ":oobe_dialog",
     ":oobe_dialog_host_behavior",
     ":oobe_help_dialog",
     ":oobe_types",
-    ":progress_list_item",
   ]
 }
 
@@ -75,12 +77,5 @@ js_library("oobe_help_dialog") {
   deps = [ "oobe_i18n_behavior:oobe_i18n_behavior" ]
 }
 
-js_library("oobe_carousel") {
-}
-
 js_library("html-echo") {
 }
-
-js_library("progress_list_item") {
-  deps = [ "oobe_i18n_behavior:oobe_i18n_behavior" ]
-}

chrome/browser/resources/chromeos/login/components/oobe_carousel/BUILD.gn

+# Copyright 2020 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.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [ ":oobe_carousel" ]
+}
+
+js_library("oobe_carousel") {
+  deps = [ "//ui/webui/resources/js:load_time_data" ]
+}

chrome/browser/resources/chromeos/login/components/oobe_carousel.html → chrome/browser/resources/chromeos/login/components/oobe_carousel/oobe_carousel.html

@@ -17,6 +17,9 @@
       <div slot="slides">Slide 2</div>
       <div slot="slides">Slide 3</div>
     </oobe-carousel>
+
+  Note: This element assumes that load_time_data is included in the enclosing
+  document level.
 -->
 
 <dom-module id="oobe-carousel">
@@ -135,4 +138,5 @@
       </div>
     </div>
   </template>
+  <script src="oobe_carousel.js"></script>
 </dom-module>

chrome/browser/resources/chromeos/login/components/oobe_slide/BUILD.gn

+# Copyright 2020 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.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [ ":oobe_slide" ]
+}
+
+js_library("oobe_slide") {
+}

chrome/browser/resources/chromeos/login/components/oobe_slide.html → chrome/browser/resources/chromeos/login/components/oobe_slide/oobe_slide.html

@@ -22,8 +22,7 @@
 -->
 <dom-module id="oobe-slide">
   <template>
-    <style include="oobe-dialog-host"></style>
-    <style>
+    <style include="oobe-dialog-host">
       :host {
         --oobe-slide-img-size: 200px;
         --oobe-slide-vertical-margin: 24px;
@@ -87,4 +86,5 @@
       </div>
     </div>
   </template>
+  <script src="oobe_slide.js"></script>
 </dom-module>

chrome/browser/resources/chromeos/login/components/progress_list_item.css

-/* Copyright 2020 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. */
-
-#container {
-  height: 56px;
-}
-
-#icon {
-  min-width: 48px;
-}
-
-#icon-pending {
-  background-color: var(--google-grey-500);
-  border-radius: 50%;
-  height: 8px;
-  margin-inline-start: 8px;
-  width: 8px;
-}
-
-#icon-active {
-  height: 24px;
-  width: 24px;
-}
-
-#icon-completed {
-  color: var(--google-blue-600);
-}
-
-#text {
-  color: var(--oobe-text-color);
-  font-family: var(--oobe-default-font-family);
-  font-size: 15px;
-  line-height: 16px;
-}
-
-#text-active {
-  color: black;
-}

chrome/browser/resources/chromeos/login/components/progress_list_item/BUILD.gn

+# Copyright 2020 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.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [ ":progress_list_item" ]
+}
+
+js_library("progress_list_item") {
+  deps = [ "../oobe_i18n_behavior:oobe_i18n_behavior" ]
+}

chrome/browser/resources/chromeos/login/components/progress_list_item.html → chrome/browser/resources/chromeos/login/components/progress_list_item/progress_list_item.html

@@ -3,8 +3,8 @@
      found in the LICENSE file. -->
 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.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-spinner/paper-spinner-lite.html">
 
 <link rel="import" href="/components/common_styles.html">
@@ -29,8 +29,43 @@
 -->
 <dom-module id="progress-list-item">
   <template>
-    <style include="oobe-common"></style>
-    <link rel="stylesheet" href="progress_list_item.css">
+    <style include="oobe-common">
+      #container {
+        height: 56px;
+      }
+
+      #icon {
+        min-width: 48px;
+      }
+
+      #icon-pending {
+        background-color: var(--google-grey-500);
+        border-radius: 50%;
+        height: 8px;
+        margin-inline-start: 8px;
+        width: 8px;
+      }
+
+      #icon-active {
+        height: 24px;
+        width: 24px;
+      }
+
+      #icon-completed {
+        color: var(--google-blue-600);
+      }
+
+      #text {
+        color: var(--oobe-text-color);
+        font-family: var(--oobe-default-font-family);
+        font-size: 15px;
+        line-height: 16px;
+      }
+
+      #text-active {
+        color: black;
+      }
+    </style>
 
     <div class="flex layout horizontal center" id="container" role="listitem">
       <div id="icon">
@@ -55,4 +90,5 @@
       </div>
     </div>
   </template>
+  <script src="progress_list_item.js"></script>
 </dom-module>

chrome/browser/resources/chromeos/login/components/throbber_notice/BUILD.gn

+# Copyright 2020 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.
+
+import("//third_party/closure_compiler/compile_js.gni")
+
+js_type_check("closure_compile") {
+  deps = [ ":throbber_notice" ]
+}
+
+js_library("throbber_notice") {
+  deps = [ "../oobe_i18n_behavior:oobe_i18n_behavior" ]
+}

chrome/browser/resources/chromeos/login/throbber_notice.html → chrome/browser/resources/chromeos/login/components/throbber_notice/throbber_notice.html

@@ -11,11 +11,31 @@
 
 <dom-module id="throbber-notice">
   <template>
-    <link rel="stylesheet" href="throbber_notice.css">
+    <style>
+      :host {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-height: 0;
+      }
+
+      paper-spinner-lite {
+        height: 38px;
+        margin-bottom: 28px;
+        width: 38px;
+      }
+
+      #comment {
+        @apply --oobe-default-font;
+        color: #747474;
+      }
+    </style>
     <paper-spinner-lite dir="ltr" active></paper-spinner-lite>
     <div id="comment" aria-live="polite"
         aria-label$="[[i18nDynamic(locale, textKey)]]">
       [[i18nDynamic(locale, textKey)]]
     </div>
   </template>
+  <script src="throbber_notice.js"></script>
 </dom-module>

chrome/browser/resources/chromeos/login/demo_setup.html

 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/progress_list_item.html">
 
 <dom-module id="demo-setup-element">
   <template>

chrome/browser/resources/chromeos/login/discover/modules/discover_module_pin_setup.html

@@ -9,6 +9,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <dom-module id="discover-pin-setup-card">
   <template>

chrome/browser/resources/chromeos/login/encryption_migration.html

@@ -9,6 +9,7 @@
 <link rel="import" href="chrome://oobe/custom_elements.html">
 
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <dom-module id="encryption-migration-element">
   <template>

chrome/browser/resources/chromeos/login/gaia_password_changed.html

@@ -9,6 +9,7 @@
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <!--
   Password changed UI for the Gaia flow.

chrome/browser/resources/chromeos/login/multidevice_setup_first_run.html

@@ -12,6 +12,7 @@
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <!--
   UI for the MultiDevice setup flow when displayed after OOBE or during the

chrome/browser/resources/chromeos/login/oobe_terms_of_service.html

@@ -11,6 +11,7 @@
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <dom-module id="terms-of-service-element">
   <template>

chrome/browser/resources/chromeos/login/oobe_update.html

@@ -8,6 +8,8 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_carousel.html">
+<link rel="import" href="/components/oobe_slide.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="oobe-update-element">

chrome/browser/resources/chromeos/login/recommend_apps.html

@@ -7,6 +7,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <dom-module id="recommend-apps-element">
   <template>

chrome/browser/resources/chromeos/login/saml_confirm_password.html

@@ -12,6 +12,7 @@
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <!--
   SAML password confirmation UI for the Gaia flow.

chrome/browser/resources/chromeos/login/screen_gaia_signin.html

@@ -9,6 +9,7 @@
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <dom-module id="gaia-signin-element">
   <template>

chrome/browser/resources/chromeos/login/structure/components_common.html

@@ -12,9 +12,6 @@
 <include src="../components/oobe_dialog.html">
 <include src="../components/oobe_help_dialog.html">
 <include src="../components/html-echo.html">
-<include src="../components/progress_list_item.html">
-<include src="../components/oobe_carousel.html">
-<include src="../throbber_notice.html">
 <include src="../notification_card.html">
 
 <!-- Deprecated components -->

chrome/browser/resources/chromeos/login/structure/components_common.js

@@ -12,9 +12,6 @@
 // <include src="../components/oobe_dialog.js">
 // <include src="../components/oobe_help_dialog.js">
 // <include src="../components/html-echo.js">
-// <include src="../components/progress_list_item.js">
-// <include src="../components/oobe_carousel.js">
-// <include src="../throbber_notice.js">
 // <include src="../notification_card.js">
 
 // <include src="../gaia_buttons.js">

chrome/browser/resources/chromeos/login/structure/components_oobe.html

@@ -11,7 +11,6 @@
 <include src="../oobe_network.html">
 <include src="../oobe_eula.html">
 <include src="../oobe_update.html">
-<include src="../components/oobe_slide.html">
 <include src="../demo_setup.html">
 <include src="../demo_preferences.html">
 <include src="../enterprise_enrollment.html">

chrome/browser/resources/chromeos/login/structure/components_oobe.js

@@ -9,7 +9,6 @@
 // <include src="../oobe_network.js">
 // <include src="../oobe_eula.js">
 // <include src="../oobe_update.js">
-// <include src="../components/oobe_slide.js">
 // <include src="../demo_setup.js">
 // <include src="../demo_preferences.js">
 // <include src="../enterprise_enrollment.js">

chrome/browser/resources/chromeos/login/sync_consent.html

@@ -11,6 +11,7 @@
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/throbber_notice.html">
 
 <dom-module id="sync-consent-element">
   <template>

chrome/browser/resources/chromeos/login/throbber_notice.css

-/* Copyright 2015 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. */
-
-:host {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 0;
-}
-
-paper-spinner-lite {
-  height: 38px;
-  margin-bottom: 28px;
-  width: 38px;
-}
-
-#comment {
-  @apply --oobe-default-font;
-  color: #747474;
-}

chrome/browser/ui/webui/chromeos/login/oobe_ui.cc

@@ -145,11 +145,19 @@ constexpr char kProductLogoPath[] = "product-logo.png";
 constexpr char kRecommendAppListViewHTMLPath[] = "recommend_app_list_view.html";
 constexpr char kRecommendAppListViewJSPath[] = "recommend_app_list_view.js";
 // Components
+constexpr char kCommonStylesHTML[] = "components/common_styles.html";
 constexpr char kI18nBehaviorHTML[] = "components/oobe_i18n_behavior.html";
 constexpr char kI18nBehaviorJS[] = "components/oobe_i18n_behavior.js";
-constexpr char kCommonStylesHTML[] = "components/common_styles.html";
 constexpr char kHDIronIconHTML[] = "components/hd_iron_icon.html";
 constexpr char kHDIronIconJS[] = "components/hd_iron_icon.js";
+constexpr char kOobeCarouselHTML[] = "components/oobe_carousel.html";
+constexpr char kOobeCarouselJS[] = "components/oobe_carousel.js";
+constexpr char kOobeSlideHTML[] = "components/oobe_slide.html";
+constexpr char kOobeSlideJS[] = "components/oobe_slide.js";
+constexpr char kProgressListItemHTML[] = "components/progress_list_item.html";
+constexpr char kProgressListItemJS[] = "components/progress_list_item.js";
+constexpr char kThrobberNoticeHTML[] = "components/throbber_notice.html";
+constexpr char kThrobberNoticeJS[] = "components/throbber_notice.js";
 
 #if BUILDFLAG(GOOGLE_CHROME_BRANDING)
 constexpr char kLogo24PX1XSvgPath[] = "logo_24px-1x.svg";
@@ -628,6 +636,23 @@ void OobeUI::AddOobeComponents(content::WebUIDataSource* source,
   source->AddResourcePath(kHDIronIconHTML,
                           IDR_OOBE_COMPONENTS_HD_IRON_ICON_HTML);
   source->AddResourcePath(kHDIronIconJS, IDR_OOBE_COMPONENTS_HD_IRON_ICON_JS);
+
+  source->AddResourcePath(kOobeCarouselHTML,
+                          IDR_OOBE_COMPONENTS_OOBE_CAROUSEL_HTML);
+  source->AddResourcePath(kOobeCarouselJS,
+                          IDR_OOBE_COMPONENTS_OOBE_CAROUSEL_JS);
+  source->AddResourcePath(kOobeSlideHTML, IDR_OOBE_COMPONENTS_OOBE_SLIDE_HTML);
+  source->AddResourcePath(kOobeSlideJS, IDR_OOBE_COMPONENTS_OOBE_SLIDE_JS);
+
+  source->AddResourcePath(kProgressListItemHTML,
+                          IDR_OOBE_COMPONENTS_PROGRESS_LIST_ITEM_HTML);
+  source->AddResourcePath(kProgressListItemJS,
+                          IDR_OOBE_COMPONENTS_PROGRESS_LIST_ITEM_JS);
+
+  source->AddResourcePath(kThrobberNoticeHTML,
+                          IDR_OOBE_COMPONENTS_THROBBER_NOTICE_HTML);
+  source->AddResourcePath(kThrobberNoticeJS,
+                          IDR_OOBE_COMPONENTS_THROBBER_NOTICE_JS);
 }
 
 CoreOobeView* OobeUI::GetCoreOobeView() {