oobe: Serve oobe_dialog as separate resources.

Bug: 1144159
Change-Id: I02c5ba9fa2d67755025f364807e4c0e03bba312f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2537839
Commit-Queue: Roman Aleksandrov <raleksandrov@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828194}

chrome/browser/browser_resources.grd

@@ -45,6 +45,8 @@
         <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_DIALOG_HTML" file="resources/chromeos/login/components/oobe_dialog/oobe_dialog.html" type="chrome_html" />
+        <structure name="IDR_OOBE_COMPONENTS_OOBE_DIALOG_JS" file="resources/chromeos/login/components/oobe_dialog/oobe_dialog.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" />

chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.html

@@ -2,6 +2,7 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <dom-module id="assistant-get-more">
   <template>

chrome/browser/resources/chromeos/assistant_optin/assistant_loading.html

@@ -7,6 +7,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
 
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <dom-module id="assistant-loading">
   <template>

chrome/browser/resources/chromeos/assistant_optin/assistant_optin.html

@@ -22,16 +22,15 @@
 <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/oobe_dialog.html">
 
 <include src="../login/components/oobe_buttons.html">
-<include src="../login/components/oobe_dialog.html">
 <include src="assistant_optin_flow.html">
 
 <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
 <link rel="stylesheet" href="../login/md_screen_container.css">
 <link rel="stylesheet" href="../login/oobe_screen.css">
-<link rel="stylesheet" href="../login/components/oobe_dialog.css">
 <link rel="stylesheet" href="../../../../../ui/login/oobe.css">
 <link rel="stylesheet" href="setting_zippy.css">
 <style include="cr-icons cr-shared-style oobe-common"></style>

chrome/browser/resources/chromeos/assistant_optin/assistant_optin.js

@@ -5,7 +5,6 @@
 // <include src="../login/components/oobe_types.js">
 // <include src="../login/components/oobe_buttons.js">
 // <include src="../login/components/oobe_dialog_host_behavior.js">
-// <include src="../login/components/oobe_dialog.js">
 // <include src="assistant_optin_flow.js">
 // <include src="browser_proxy.js">
 

chrome/browser/resources/chromeos/assistant_optin/assistant_optin_flow.html

@@ -16,6 +16,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <dom-module id="assistant-optin-flow">
   <template>

chrome/browser/resources/chromeos/assistant_optin/assistant_related_info.html

@@ -2,6 +2,9 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
+<link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/oobe_dialog.html">
+
 <dom-module id="assistant-related-info">
 <template>
   <style include="oobe-dialog-host">

chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.html

@@ -3,6 +3,7 @@
      found in the LICENSE file. -->
 
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <dom-module id="assistant-third-party">
   <template>

chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.html

@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <dom-module id="assistant-value-prop">
   <template>

chrome/browser/resources/chromeos/assistant_optin/assistant_voice_match.html

@@ -7,6 +7,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_lottie/cr_lottie.html">
 
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <dom-module id="assistant-voice-match">
   <template>

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

@@ -67,6 +67,7 @@ js_library("oobe_welcome") {
     "components:fake_oobe",
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
     "//ui/webui/resources/js/cr/ui:dialogs",
   ]
@@ -77,6 +78,7 @@ js_library("offline_ad_login") {
     ":oobe_select",
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
     "//ui/webui/resources/cr_elements/cr_input:cr_input",
     "//ui/webui/resources/js:load_time_data",
@@ -85,6 +87,7 @@ js_library("offline_ad_login") {
 
 js_library("multidevice_setup_first_run") {
   deps = [
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
     "//ui/webui/resources/cr_components/chromeos/multidevice_setup:mojo_api",
     "//ui/webui/resources/cr_components/chromeos/multidevice_setup:multidevice_setup",
@@ -93,13 +96,17 @@ js_library("multidevice_setup_first_run") {
 }
 
 js_library("active_directory_password_change") {
-  deps = [ "components/oobe_i18n_behavior:oobe_i18n_behavior" ]
+  deps = [
+    "components/oobe_dialog:oobe_dialog",
+    "components/oobe_i18n_behavior:oobe_i18n_behavior"
+  ]
 }
 
 js_library("app_downloading") {
   deps = [
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -108,6 +115,7 @@ js_library("arc_terms_of_service") {
   deps = [
     "components:oobe_dialog_host_behavior",
     "components:oobe_help_dialog",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -116,6 +124,7 @@ js_library("demo_preferences") {
   deps = [
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -125,6 +134,7 @@ js_library("demo_setup") {
     "components:login_screen_behavior",
     "components:multi_step_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -134,6 +144,7 @@ js_library("encryption_migration") {
     "components:login_screen_behavior",
     "components:multi_step_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -142,6 +153,7 @@ js_library("family_link_notice") {
   deps = [
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -149,6 +161,7 @@ js_library("family_link_notice") {
 js_library("fingerprint_setup") {
   deps = [
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
     "//ui/webui/resources/cr_elements/cr_fingerprint:cr_fingerprint_progress_arc",
     "//ui/webui/resources/cr_elements/cr_lottie:cr_lottie",
@@ -172,6 +185,7 @@ js_library("gaia_password_changed") {
     "components:login_screen_behavior",
     "components:multi_step_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -180,6 +194,7 @@ js_library("gesture_navigation") {
   deps = [
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -187,6 +202,7 @@ js_library("gesture_navigation") {
 js_library("marketing_opt_in") {
   deps = [
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -207,6 +223,7 @@ js_library("notification_card") {
 js_library("offline_gaia") {
   deps = [
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -219,6 +236,7 @@ js_library("oobe_adb_sideloading_screen") {
     "components:login_screen_behavior",
     "components:multi_step_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -227,6 +245,7 @@ js_library("oobe_enable_kiosk") {
   deps = [
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -235,7 +254,7 @@ js_library("oobe_eula") {
   deps = [
     ":web_view_helper",
     "components:login_screen_behavior",
-    "components:oobe_dialog",
+    "components/oobe_dialog:oobe_dialog",
     "components:oobe_dialog_host_behavior",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
@@ -248,6 +267,7 @@ js_library("oobe_i18n_dropdown") {
 js_library("oobe_network") {
   deps = [
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -255,6 +275,7 @@ js_library("oobe_network") {
 js_library("oobe_reset") {
   deps = [
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -263,6 +284,7 @@ js_library("oobe_screen_assistant_optin_flow") {
   deps = [
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -271,6 +293,7 @@ js_library("oobe_screen_enable_debugging") {
   deps = [
     "components:login_screen_behavior",
     "components:multi_step_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -279,6 +302,7 @@ js_library("oobe_supervision_transition") {
   deps = [
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -287,6 +311,7 @@ js_library("oobe_update") {
   deps = [
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -295,6 +320,7 @@ js_library("parental_handoff") {
   deps = [
     "components:login_screen_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -305,6 +331,7 @@ js_library("recommend_apps") {
     "components:multi_step_behavior",
     "components:oobe_dialog_host_behavior",
     "components:oobe_types",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -314,6 +341,7 @@ js_library("user_creation") {
     "components:login_screen_behavior",
     "components:multi_step_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -321,6 +349,7 @@ js_library("user_creation") {
 js_library("saml_confirm_password") {
   deps = [
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -328,6 +357,7 @@ js_library("saml_confirm_password") {
 js_library("sync_consent") {
   deps = [
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }
@@ -337,6 +367,7 @@ js_library("update_required_card") {
     "components:login_screen_behavior",
     "components:multi_step_behavior",
     "components:oobe_dialog_host_behavior",
+    "components/oobe_dialog:oobe_dialog",
     "components/oobe_i18n_behavior:oobe_i18n_behavior",
   ]
 }

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

@@ -7,6 +7,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 
 <link rel="import" href="/components/common_styles.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="app-downloading-element">

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

@@ -9,6 +9,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
 <link rel="import" href="/components/common_styles.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 <link rel="import" href="/components/throbber_notice.html">
 

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

@@ -8,6 +8,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <!--

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

@@ -24,7 +24,6 @@ js_type_check("closure_compile_local") {
     ":login_screen_behavior",
     ":multi_step_behavior",
     ":oobe_buttons",
-    ":oobe_dialog",
     ":oobe_dialog_host_behavior",
     ":oobe_help_dialog",
     ":oobe_types",
@@ -62,14 +61,6 @@ js_library("oobe_buttons") {
   deps = [ "oobe_i18n_behavior:oobe_i18n_behavior" ]
 }
 
-js_library("oobe_dialog") {
-  deps = [
-    ":fake_oobe",
-    "//ui/webui/resources/cr_elements/cr_lazy_render:cr_lazy_render",
-  ]
-  externs_list = [ "$externs_path/pending.js" ]
-}
-
 js_library("oobe_dialog_host_behavior") {
 }
 

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

-/* Copyright 2016 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 {
-  --title-font-distance-to-baseline: 7px;
-  --subtitle-font-size: --oobe-default-font-size;
-  --subtitle-font-distance-to-baseline: 3px;
-  --subtitle-line-height: 18px;
-  @apply --oobe-default-font;
-}
-
-
-:host([two-columns-adaptable]) #topScrollContainer {
-  flex-direction: var(--oobe-dialog-adaptable-flex-direction);
-}
-
-#topScrollContainer {
-  border: transparent;
-  overflow-y: auto;
-}
-
-#header-container {
-  padding-bottom: 0;
-  padding-inline-end: var(--oobe-dialog-content-padding);
-  padding-inline-start: var(--oobe-dialog-content-padding);
-  padding-top: var(--oobe-dialog-content-padding);
-}
-
-#oobe-title {
-  padding-top: 20px;
-}
-
-/*
- * TODO(https://crbug.com/703984): remove the fallback class when fixed.
- */
-#oobe-title ::slotted(h1),
-#oobe-title .fallback {
-  color: var(--oobe-header-text-color);
-  @apply --oobe-header-font;
-  margin: 0;
-}
-
-#oobe-subtitle {
-  padding-top: 8px;
-}
-
-/*
- * TODO(https://crbug.com/703984): remove the fallback class when fixed.
- */
-#oobe-subtitle ::slotted(*),
-#oobe-subtitle .fallback {
-  color: var(--oobe-subheader-text-color);
-  line-height: var(--subtitle-line-height);
-  overflow-wrap: break-word;
-  margin: 0;
-}
-
-#footerContainer ::slotted(*) {
-  line-height: var(--subtitle-line-height);
-}
-
-:host(:not([has-buttons])) #footerContainer {
-  margin-bottom: 40px;
-}
-
-#oobe-progress ::slotted(paper-progress) {
-  --paper-progress-active-color: var(--google-blue-500);
-  --paper-progress-container-color: var(--google-blue-100);
-  height: 3px;
-  margin-top: 32px;
-  width: 100%;
-}
-
-#footerContainer {
-  padding-bottom: 0;
-  padding-inline-end: var(--oobe-dialog-content-padding);
-  padding-inline-start: var(--oobe-dialog-content-padding);
-
-  /* TODO(https://crbug.com/1017173) Make it adaptive. */
-  padding-top: var(--oobe-dialog-content-padding-top);
-}
-
-#footerContainer[noFooterPadding] {
-  padding: 0;
-}
-
-#footerContainer[footerShrinkable] {
-  flex-shrink: 1;
-}
-
-
-
-#topScrollContainer.can-scroll:not(.is-scrolled):not(.scrolled-to-bottom) {
-  background: linear-gradient(0deg,
-                              rgba(var(--google-grey-refresh-100-rgb), 1) 0,
-                              rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
-
-}
-#topScrollContainer.can-scroll.is-scrolled:not(.scrolled-to-bottom) {
-  background: linear-gradient(0deg,
-                              rgba(var(--google-grey-refresh-100-rgb), 1) 0,
-                              rgba(var(--google-grey-refresh-100-rgb), 0) 8px),
-              linear-gradient(180deg,
-                              rgba(var(--google-grey-refresh-100-rgb), 1) 0,
-                              rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
-}
-#topScrollContainer.is-scrolled.scrolled-to-bottom {
-  background: linear-gradient(180deg,
-                              rgba(var(--google-grey-refresh-100-rgb), 1) 0,
-                              rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
-}
-
-#oobe-bottom {
-  height: calc(var(--oobe-dialog-footer-height)
-               - 2 * var(--oobe-dialog-footer-padding));
-  /* Width: real padding - button margin */
-  padding: var(--oobe-dialog-footer-padding)
-           calc(var(--oobe-dialog-footer-padding) - 4px);
-  z-index: 1;
-}
-
-:host #oobe-bottom[no-buttons-padding] {
-  padding: unset;
-}
-
-#oobe-icon-div ::slotted(hd-iron-icon),
-#oobe-icon-div ::slotted(iron-icon) {
-  --iron-icon-height: 32px;
-  --iron-icon-width: 32px;
-  --iron-icon-fill-color: var(--google-blue-600);
-}
-
-.slot-container {
-  position: relative;
-}

chrome/browser/resources/chromeos/login/components/oobe_dialog/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_dialog" ]
+}
+
+js_library("oobe_dialog") {
+  deps = [
+    "//ui/webui/resources/cr_elements/cr_lazy_render:cr_lazy_render",
+    "../oobe_i18n_behavior:oobe_i18n_behavior",
+  ]
+  externs_list = [ "$externs_path/pending.js" ]
+}

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

@@ -40,7 +40,7 @@
     </oobe-dialog>
 
   Add class |header| to all which you want to go inside the header.  Similar
-  with clases |footer|, |bottom-buttons|.
+  with classes |footer|, |bottom-buttons|.
 
   For single-DPI image |oobe-icon| class should be used. To select between two
   images of different DPI, |oobe-icon-1x| and |oobe-icon-2x| should be used
@@ -65,7 +65,7 @@
 
     two-columns-adaptable - if set layout might switch to two columns instead of
         one when there is not enough vertical space for elements. Left column
-        would contain header-container, right columnn would contain
+        would contain header-container, right column would contain
         footerContainer. Bottom buttons are not affected. See oobe.css for
         conditions.
 
@@ -74,9 +74,141 @@
 -->
 <dom-module id="oobe-dialog">
   <template>
-    <style include="oobe-dialog-host"></style>
-    <link rel="stylesheet" href="oobe_dialog.css">
-    <style include="cr-shared-style"></style>
+    <!--
+      TODO(https://crbug.com/1143666): Do not use oobe-dialog-host.
+      Use oobe-dialog-common instead.
+    -->
+    <style include="oobe-dialog-host cr-shared-style">
+      :host {
+        --title-font-distance-to-baseline: 7px;
+        --subtitle-font-size: --oobe-default-font-size;
+        --subtitle-font-distance-to-baseline: 3px;
+        --subtitle-line-height: 18px;
+        @apply --oobe-default-font;
+      }
+
+      :host([two-columns-adaptable]) #topScrollContainer {
+        flex-direction: var(--oobe-dialog-adaptable-flex-direction);
+      }
+
+      #topScrollContainer {
+        border: transparent;
+        overflow-y: auto;
+      }
+
+      #header-container {
+        padding-bottom: 0;
+        padding-inline-end: var(--oobe-dialog-content-padding);
+        padding-inline-start: var(--oobe-dialog-content-padding);
+        padding-top: var(--oobe-dialog-content-padding);
+      }
+
+      #oobe-title {
+        padding-top: 20px;
+      }
+
+      /*
+      * TODO(https://crbug.com/703984): remove the fallback class when fixed.
+      */
+      #oobe-title ::slotted(h1),
+      #oobe-title .fallback {
+        color: var(--oobe-header-text-color);
+        @apply --oobe-header-font;
+        margin: 0;
+      }
+
+      #oobe-subtitle {
+        padding-top: 8px;
+      }
+
+      /*
+      * TODO(https://crbug.com/703984): remove the fallback class when fixed.
+      */
+      #oobe-subtitle ::slotted(*),
+      #oobe-subtitle .fallback {
+        color: var(--oobe-subheader-text-color);
+        line-height: var(--subtitle-line-height);
+        overflow-wrap: break-word;
+        margin: 0;
+      }
+
+      #footerContainer ::slotted(*) {
+        line-height: var(--subtitle-line-height);
+      }
+
+      :host(:not([has-buttons])) #footerContainer {
+        margin-bottom: 40px;
+      }
+
+      #oobe-progress ::slotted(paper-progress) {
+        --paper-progress-active-color: var(--google-blue-500);
+        --paper-progress-container-color: var(--google-blue-100);
+        height: 3px;
+        margin-top: 32px;
+        width: 100%;
+      }
+
+      #footerContainer {
+        padding-bottom: 0;
+        padding-inline-end: var(--oobe-dialog-content-padding);
+        padding-inline-start: var(--oobe-dialog-content-padding);
+
+        /* TODO(https://crbug.com/1017173) Make it adaptive. */
+        padding-top: var(--oobe-dialog-content-padding-top);
+      }
+
+      #footerContainer[noFooterPadding] {
+        padding: 0;
+      }
+
+      #footerContainer[footerShrinkable] {
+        flex-shrink: 1;
+      }
+
+      #topScrollContainer.can-scroll:not(.is-scrolled):not(.scrolled-to-bottom) {
+        background: linear-gradient(0deg,
+                                    rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+                                    rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
+
+      }
+      #topScrollContainer.can-scroll.is-scrolled:not(.scrolled-to-bottom) {
+        background: linear-gradient(0deg,
+                                    rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+                                    rgba(var(--google-grey-refresh-100-rgb), 0) 8px),
+                    linear-gradient(180deg,
+                                    rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+                                    rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
+      }
+      #topScrollContainer.is-scrolled.scrolled-to-bottom {
+        background: linear-gradient(180deg,
+                                    rgba(var(--google-grey-refresh-100-rgb), 1) 0,
+                                    rgba(var(--google-grey-refresh-100-rgb), 0) 8px);
+      }
+
+      #oobe-bottom {
+        height: calc(var(--oobe-dialog-footer-height)
+                    - 2 * var(--oobe-dialog-footer-padding));
+        /* Width: real padding - button margin */
+        padding: var(--oobe-dialog-footer-padding)
+                calc(var(--oobe-dialog-footer-padding) - 4px);
+        z-index: 1;
+      }
+
+      :host #oobe-bottom[no-buttons-padding] {
+        padding: unset;
+      }
+
+      #oobe-icon-div ::slotted(hd-iron-icon),
+      #oobe-icon-div ::slotted(iron-icon) {
+        --iron-icon-height: 32px;
+        --iron-icon-width: 32px;
+        --iron-icon-fill-color: var(--google-blue-600);
+      }
+
+      .slot-container {
+        position: relative;
+      }
+    </style>
     <cr-lazy-render id="lazy">
       <template>
         <div id="topScrollContainer" class="layout vertical flex">
@@ -116,5 +248,6 @@
       </template>
     </cr-lazy-render>
   </template>
+  <script src="oobe_dialog.js"></script>
 </dom-module>
 

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

@@ -4,6 +4,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="demo-preferences-element">

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_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 <link rel="import" href="/components/progress_list_item.html">
 

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

@@ -6,6 +6,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="device-disabled-element">

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/oobe_dialog.html">
 <link rel="import" href="/components/throbber_notice.html">
 
 <dom-module id="discover-pin-setup-card">

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

@@ -8,6 +8,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="chrome://oobe/custom_elements.html">
 
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 <link rel="import" href="/components/throbber_notice.html">
 

chrome/browser/resources/chromeos/login/enterprise_enrollment.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_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="enterprise-enrollment-element">

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

@@ -9,6 +9,7 @@ found in the LICENSE file. -->
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="family-link-notice-element">

chrome/browser/resources/chromeos/login/fingerprint_setup.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_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="fingerprint-setup-element">

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

@@ -8,6 +8,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 <link rel="import" href="/components/throbber_notice.html">
 

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

@@ -7,6 +7,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_lottie/cr_lottie.html">
 
 <link rel="import" href="/components/common_styles.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="gesture-navigation-element">

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

@@ -8,6 +8,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <iron-iconset-svg name="marketing-opt-in-32" size="32">

chrome/browser/resources/chromeos/login/offline_ad_login.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_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <!--

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

@@ -9,6 +9,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
 
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 <!--
   Offline UI for the New Gaia flow.

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

@@ -6,6 +6,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <dom-module id="oobe-adb-sideloading-element">
   <template>

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

@@ -8,6 +8,7 @@
 <link rel="import" href="chrome://oobe/custom_elements.html">
 
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <dom-module id="kiosk-enable-element">
   <template>
@@ -30,7 +31,7 @@
       </div>
       <div slot="footer" class="flex layout center-justified vertical">
         <img src="chrome://theme/IDR_RESET_WARNING" class="oobe-illustration">
-      </div>  
+      </div>
       <div slot="bottom-buttons" class="flex layout horizontal end-justified">
         <oobe-text-button id="enable" hidden="[[!eq_(state_, 'confirm')]]"
             inverse on-click="onEnableButton_" text-key="kioskEnableButton">

chrome/browser/resources/chromeos/login/oobe_eula.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/oobe_dialog.html">
 
 <dom-module id="oobe-eula-element">
   <template>

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

@@ -5,6 +5,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/oobe_dialog.html">
 
 <iron-iconset-svg name="oobe-hid-detection" size="24">
   <svg>

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

@@ -5,6 +5,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/oobe_dialog.html">
 
 <dom-module id="oobe-network-element">
   <template>

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

@@ -10,6 +10,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/oobe_dialog.html">
 
 <dom-module id="oobe-reset-element">
   <template>

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

@@ -5,6 +5,7 @@
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <link rel="import" href="/components/common_styles.html">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <dom-module id="supervision-transition-element">
   <template>

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

@@ -10,6 +10,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 <link rel="import" href="/components/throbber_notice.html">
 

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

@@ -11,6 +11,7 @@
 <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">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <dom-module id="oobe-update-element">
   <template>

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

@@ -10,6 +10,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/oobe_dialog.html">
 
 <iron-iconset-svg name="oobe-welcome-32" size="32">
   <svg>

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

@@ -8,6 +8,7 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 
 <link rel="import" href="/components/oobe_i18n_behavior.html">
+<link rel="import" href="/components/oobe_dialog.html">
 
 <!--
   OOBE Welcome screen

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

@@ -8,6 +8,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="packaged-license-element">

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

@@ -4,7 +4,11 @@ found in the LICENSE file. -->
 
 <link rel="import" href="chrome://oobe/custom_elements.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
-<link rel="import" href="chrome://resources/html/i18n_behavior.html">
+
+<link rel="import" href="/components/common_styles.html">
+<link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
+<link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="parental-handoff-element">
   <template>

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

@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 <link rel="import" href="/components/throbber_notice.html">
 

chrome/browser/resources/chromeos/login/saml_confirm_password.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_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 <link rel="import" href="/components/throbber_notice.html">
 

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

 <link rel="import" href="chrome://oobe/custom_elements.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
 
+<link rel="import" href="/components/oobe_dialog.html">
+
 <div id="error-message" class="step hidden show-offline-error" hidden>
 
   <iron-iconset-svg name="error-message-24" size="24">

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/oobe_dialog.html">
 <link rel="import" href="/components/throbber_notice.html">
 
 <dom-module id="gaia-signin-element">

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

@@ -4,6 +4,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="signin-fatal-error-element">

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

@@ -2,6 +2,7 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="tpm-error-message-element">

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

@@ -4,6 +4,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="wrong-hwid-element">

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

@@ -6,6 +6,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="security-token-pin">

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

@@ -9,7 +9,6 @@
 
 <include src="../components/oobe_icons.html">
 <include src="../components/oobe_buttons.html">
-<include src="../components/oobe_dialog.html">
 <include src="../components/oobe_help_dialog.html">
 <include src="../components/html-echo.html">
 <include src="../notification_card.html">

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

@@ -9,7 +9,6 @@
 // <include src="../components/login_screen_behavior.js">
 // <include src="../components/multi_step_behavior.js">
 // <include src="../components/oobe_buttons.js">
-// <include src="../components/oobe_dialog.js">
 // <include src="../components/oobe_help_dialog.js">
 // <include src="../components/html-echo.js">
 // <include src="../notification_card.js">

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

@@ -10,6 +10,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 <link rel="import" href="/components/throbber_notice.html">
 

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

@@ -6,6 +6,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <!--

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

@@ -9,6 +9,7 @@ found in the LICENSE file. -->
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
+<link rel="import" href="/components/oobe_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="user-creation-element">

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

@@ -150,6 +150,8 @@ constexpr char kI18nBehaviorHTML[] = "components/oobe_i18n_behavior.html";
 constexpr char kI18nBehaviorJS[] = "components/oobe_i18n_behavior.js";
 constexpr char kHDIronIconHTML[] = "components/hd_iron_icon.html";
 constexpr char kHDIronIconJS[] = "components/hd_iron_icon.js";
+constexpr char kOobeDialogHTML[] = "components/oobe_dialog.html";
+constexpr char kOobeDialogJS[] = "components/oobe_dialog.js";
 constexpr char kOobeCarouselHTML[] = "components/oobe_carousel.html";
 constexpr char kOobeCarouselJS[] = "components/oobe_carousel.js";
 constexpr char kOobeSlideHTML[] = "components/oobe_slide.html";
@@ -634,6 +636,10 @@ void OobeUI::AddOobeComponents(content::WebUIDataSource* source,
                           IDR_OOBE_COMPONENTS_HD_IRON_ICON_HTML);
   source->AddResourcePath(kHDIronIconJS, IDR_OOBE_COMPONENTS_HD_IRON_ICON_JS);
 
+  source->AddResourcePath(kOobeDialogHTML,
+                          IDR_OOBE_COMPONENTS_OOBE_DIALOG_HTML);
+  source->AddResourcePath(kOobeDialogJS, IDR_OOBE_COMPONENTS_OOBE_DIALOG_JS);
+
   source->AddResourcePath(kOobeCarouselHTML,
                           IDR_OOBE_COMPONENTS_OOBE_CAROUSEL_HTML);
   source->AddResourcePath(kOobeCarouselJS,