BASELINE: Update Chromium to 104.0.5112.120

Change-Id: I5d2726c2ab018d75d055739b6ba64317904f05bb Reviewed-on: https://codereview.qt-project.org/c/qt/qtwebengine-chromium/+/438935 Reviewed-by: Allan Sandfeld Jensen <allan.jensen@qt.io>
author: Allan Sandfeld Jensen <allan.jensen@qt.io> 2022-09-07 13:12:05 +0200
committer: Allan Sandfeld Jensen <allan.jensen@qt.io> 2022-11-09 10:02:59 +0000
commit: 33fc33aa94d4add0878ec30dc818e34e1dd3cc2a (patch)
tree: f6af110909c79b2759136554f1143d8b0572af0a /chromium/ui/webui
parent: 7d2c5d177e9813077a621df8d18c0deda73099b3 (diff)
download: qtwebengine-chromium-33fc33aa94d4add0878ec30dc818e34e1dd3cc2a.tar.gz
291 files changed, 5800 insertions, 2473 deletions
diff --git a/chromium/ui/webui/BUILD.gn b/chromium/ui/webui/BUILD.gn
index d0e3bf60e20..a883f68ce18 100644
--- a/chromium/ui/webui/BUILD.gn
+++ b/chromium/ui/webui/BUILD.gn
@@ -16,7 +16,6 @@ static_library("webui") {
     "webui_allowlist.h",
     "webui_allowlist_provider.cc",
     "webui_allowlist_provider.h",
-    "webui_config.h",
   ]
 
   deps = [
@@ -26,12 +25,16 @@ static_library("webui") {
     "//services/service_manager/public/cpp",
   ]
 
-  public_deps = [ "//ui/webui/resources/js/browser_command:mojo_bindings" ]
+  public_deps = [
+    "//ui/webui/resources/js/browser_command:mojo_bindings",
+    "//ui/webui/resources/js/metrics_reporter:mojo_bindings",
+  ]
 
   if (!is_android && !is_ios) {
     public_deps += [
       "//ui/webui/resources/cr_components/color_change_listener:mojom",
       "//ui/webui/resources/cr_components/customize_themes:mojom",
+      "//ui/webui/resources/cr_components/history_clusters:mojo_bindings",
       "//ui/webui/resources/cr_components/most_visited:mojom",
     ]
   }
diff --git a/chromium/ui/webui/PLATFORM_OWNERS b/chromium/ui/webui/PLATFORM_OWNERS
index b7da68e79eb..3ceebd77e11 100644
--- a/chromium/ui/webui/PLATFORM_OWNERS
+++ b/chromium/ui/webui/PLATFORM_OWNERS
@@ -1,8 +1,12 @@
 # Please use more specific OWNERS when possible.
-antrim@chromium.org  # CET
+antrim@chromium.org  # For Chrome OS changes, CET.
 calamity@chromium.org
 dpapad@chromium.org
 johntlee@chromium.org
 khorimoto@chromium.org  # For Chrome OS changes.
 michaelpg@chromium.org  # For Chrome OS changes.
 rbpotter@chromium.org
+
+# Only for backend infra changes e.g. //content/browser/webui,
+# //ui/webui/, //chrome/browser/ui/webui/, etc.
+ortuno@chromium.org
diff --git a/chromium/ui/webui/resources/BUILD.gn b/chromium/ui/webui/resources/BUILD.gn
index af62f84beb4..8c979f96125 100644
--- a/chromium/ui/webui/resources/BUILD.gn
+++ b/chromium/ui/webui/resources/BUILD.gn
@@ -7,16 +7,16 @@ import("//crypto/features.gni")
 import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/typescript/ts_definitions.gni")
 import("//tools/typescript/ts_library.gni")
+import("//ui/webui/resources/include_polymer.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
 
-include_polymer = !is_android && !is_ios
-
 generate_grd("build_grd") {
   grd_prefix = "webui_generated"
   out_grd = "$target_gen_dir/${grd_prefix}_resources.grd"
 
-  deps = [
+  public_deps = [
     ":build_ts_grdp",
+    "cr_components/color_change_listener:build_grdp",
     "css:build_grdp",
     "html:build_grdp",
     "images:build_grdp",
@@ -34,6 +34,7 @@ generate_grd("build_grd") {
     "$target_gen_dir/js/resources.grdp",
     "$target_gen_dir/resources_ts.grdp",
     "$root_gen_dir/third_party/jstemplate/resources.grdp",
+    "$root_gen_dir/ui/webui/resources/cr_components/color_change_listener/resources.grdp",
   ]
 
   if (!is_chromeos_ash && !is_android) {
@@ -49,7 +50,7 @@ generate_grd("build_grd") {
   }
 
   if (include_polymer) {
-    deps += [
+    public_deps += [
       "cr_components:build_grdp",
       "cr_components/app_management:build_grdp",
       "cr_components/customize_themes:build_grdp",
@@ -69,35 +70,44 @@ generate_grd("build_grd") {
     ]
 
     if (use_nss_certs) {
-      deps += [ "cr_components/certificate_manager:build_grdp" ]
+      public_deps += [ "cr_components/certificate_manager:build_grdp" ]
       grdp_files +=
           [ "$target_gen_dir/cr_components/certificate_manager/resources.grdp" ]
     }
 
     # TODO(crbug.com/1184053): Fully remove once no longer used by CrOS.
     if (is_chromeos_ash) {
-      deps += [ "//third_party/polymer/v1_0:build_grdp" ]
+      public_deps += [ "//third_party/polymer/v1_0:build_grdp" ]
       grdp_files += [
         "$root_gen_dir/third_party/polymer/v1_0/polymer_1_0_resources.grdp",
       ]
     }
+
+    if (!is_android) {
+      public_deps += [ "cr_components/history_clusters:build_grdp" ]
+      grdp_files += [ "$root_gen_dir/ui/webui/resources/cr_components/history_clusters/resources.grdp" ]
+    }
   }
 
   if (is_chromeos_ash) {
-    deps += [
+    public_deps += [
       ":build_cros_styles_grdp",
       "//ash/webui/common/resources:build_grdp",
+      "//chromeos/ash/components/cros_elements:build_grdp",
+      "//third_party/material_web_components:build_grdp",
       "//third_party/web-animations-js:build_grdp",
     ]
     grdp_files += [
+      "$root_gen_dir/chromeos/ash/components/cros_elements/cros_elements_resources.grdp",
       "$root_gen_dir/ui/webui/resources/cros_styles_resources.grdp",
       "$root_gen_dir/third_party/web-animations-js/web_animations_resources.grdp",
+      "$root_gen_dir/third_party/material_web_components/material_web_components_resources.grdp",
       "$root_gen_dir/ash/webui/common/resources/ash_common_resources.grdp",
     ]
   }
 
   if (!is_android && !is_ios) {
-    deps += [ "//third_party/lottie:build_grdp" ]
+    public_deps += [ "//third_party/lottie:build_grdp" ]
     grdp_files += [ "$root_gen_dir/third_party/lottie/resources.grdp" ]
   }
 }
@@ -106,7 +116,7 @@ if (is_chromeos_ash) {
   generate_grd("build_cros_styles_grdp") {
     grd_prefix = "webui"
     out_grd = "$target_gen_dir/cros_styles_resources.grdp"
-    deps = [ "//ui/chromeos/styles:cros_styles_css" ]
+    public_deps = [ "//ui/chromeos/styles:cros_styles_css" ]
     input_files_base_dir = rebase_path("$root_gen_dir/", root_build_dir)
     input_files = [ "ui/chromeos/styles/cros_styles.css" ]
     resource_path_rewrites =
@@ -115,13 +125,13 @@ if (is_chromeos_ash) {
 }
 
 group("preprocess") {
-  public_deps = [ "js:preprocess" ]
+  public_deps = [
+    "cr_elements:preprocess",
+    "js:preprocess",
+  ]
 
   if (include_polymer) {
-    public_deps += [
-      "cr_components:preprocess",
-      "cr_elements:preprocess",
-    ]
+    public_deps += [ "cr_components:preprocess" ]
   }
 }
 
@@ -132,25 +142,11 @@ group("closure_compile") {
   ]
 
   if (include_polymer) {
-    deps += [
-      "cr_components:closure_compile",
-      "cr_elements:closure_compile",
-    ]
-  }
-}
-
-group("modulize") {
-  public_deps = [
-    "js:modulize",
-    "js/cr:modulize",
-    "js/cr/ui:modulize",
-  ]
+    deps += [ "cr_elements:closure_compile" ]
 
-  if (include_polymer) {
-    public_deps += [
-      "cr_components:polymer3_elements",
-      "cr_elements:polymer3_elements",
-    ]
+    if (is_chromeos_ash) {
+      deps += [ "cr_components/chromeos:closure_compile" ]
+    }
   }
 }
 
@@ -161,7 +157,7 @@ preprocessed_folder = "$target_gen_dir/preprocessed"
 generate_grd("build_ts_grdp") {
   grd_prefix = "webui"
   out_grd = "$target_gen_dir/resources_ts.grdp"
-  deps = [ ":library" ]
+  public_deps = [ ":library" ]
   manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
 }
 
@@ -192,11 +188,23 @@ checked_in_dts_files = [
   "js/list_property_update_behavior.m.d.ts",
   "js/parse_html_subset.m.d.ts",
   "js/promise_resolver.m.d.ts",
+  "js/static_types.d.ts",
   "js/web_ui_listener_behavior.m.d.ts",
 ]
 
 if (is_chromeos_ash) {
   checked_in_dts_files += [
+    "cr_components/chromeos/bluetooth/bluetooth_base_page.d.ts",
+    "cr_components/chromeos/bluetooth/bluetooth_battery_icon_percentage.d.ts",
+    "cr_components/chromeos/bluetooth/bluetooth_device_battery_info.d.ts",
+    "cr_components/chromeos/bluetooth/bluetooth_icon.d.ts",
+    "cr_components/chromeos/bluetooth/bluetooth_pairing_device_item.d.ts",
+    "cr_components/chromeos/bluetooth/bluetooth_pairing_device_selection_page.d.ts",
+    "cr_components/chromeos/bluetooth/bluetooth_pairing_enter_code_page.d.ts",
+    "cr_components/chromeos/bluetooth/bluetooth_pairing_request_code_page.d.ts",
+    "cr_components/chromeos/bluetooth/bluetooth_pairing_ui.d.ts",
+    "cr_components/chromeos/smb_shares/add_smb_share_dialog.d.ts",
+    "cr_components/chromeos/smb_shares/smb_browser_proxy.d.ts",
     "js/cr/ui/context_menu_handler.m.d.ts",
     "js/cr/ui/dialogs.m.d.ts",
     "js/cr/ui/grid.m.d.ts",
@@ -241,7 +249,6 @@ if (include_polymer) {
     "cr_elements/cr_actionable_row_style.m.js",
     "cr_elements/cr_icons_css.m.js",
     "cr_elements/cr_input/cr_input_style_css.m.js",
-    "cr_elements/cr_page_host_style_css.js",
     "cr_elements/cr_radio_button/cr_radio_button_style_css.m.js",
     "cr_elements/hidden_style_css.m.js",
     "cr_elements/icons.m.js",
@@ -252,7 +259,24 @@ if (include_polymer) {
 
   if (is_chromeos_ash) {
     generate_definitions_js_files += [
+      "cr_components/chromeos/bluetooth/bluetooth_dialog.js",
+      "cr_components/chromeos/bluetooth/bluetooth_icons.js",
+      "cr_components/chromeos/bluetooth/bluetooth_metrics_utils.js",
+      "cr_components/chromeos/bluetooth/bluetooth_pairing_confirm_code_page.js",
+      "cr_components/chromeos/bluetooth/bluetooth_spinner_page.js",
+      "cr_components/chromeos/bluetooth/bluetooth_types.js",
+      "cr_components/chromeos/bluetooth/bluetooth_utils.js",
+      "cr_components/chromeos/bluetooth/cros_bluetooth_config.js",
+      "cr_components/chromeos/quick_unlock/lock_screen_constants.m.js",
+      "cr_components/chromeos/quick_unlock/pin_keyboard_icon.m.js",
+      "cr_components/chromeos/quick_unlock/pin_keyboard.m.js",
+      "cr_components/chromeos/quick_unlock/setup_pin_keyboard.m.js",
       "cr_elements/chromeos/cros_color_overrides.m.js",
+      "cr_elements/chromeos/cr_picture/cr_camera.js",
+      "cr_elements/chromeos/cr_picture/cr_picture_list.js",
+      "cr_elements/chromeos/cr_picture/cr_picture_pane.js",
+      "cr_elements/chromeos/cr_picture/cr_picture_types.js",
+      "cr_elements/chromeos/cr_picture/icons.js",
       "cr_elements/chromeos/cr_picture/png.js",
       "cr_elements/chromeos/cr_picture/webcam_utils.js",
       "js/cr/ui.m.js",
@@ -267,7 +291,6 @@ if (include_polymer) {
       "js/cr/ui/splitter.js",
       "js/cr/ui/store_client.js",
       "js/cr/ui/tree.js",
-      "js/static_types.js",
     ]
   }
 }
@@ -283,57 +306,91 @@ ts_library("library") {
   tsconfig_base = "tsconfig_base.json"
 
   in_files = [
+    "cr_elements/cr_tab_box/cr_tab_box.ts",
+    "cr_elements/cr_tab_box/cr_tab_box.html.ts",
+    "cr_elements/cr_tree/cr_tree.ts",
+    "cr_elements/cr_tree/cr_tree.html.ts",
+    "cr_elements/cr_tree/cr_tree_base.ts",
+    "cr_elements/cr_tree/cr_tree_item.ts",
+    "cr_elements/cr_tree/cr_tree_item.html.ts",
     "js/assert_ts.ts",
     "js/custom_element.ts",
   ]
 
   if (include_polymer) {
     in_files += [
+      "cr_components/iph_bubble/iph_bubble.html.ts",
       "cr_components/iph_bubble/iph_bubble.ts",
+      "cr_components/localized_link/localized_link.html.ts",
       "cr_components/localized_link/localized_link.ts",
+      "cr_components/managed_footnote/managed_footnote.html.ts",
       "cr_components/managed_footnote/managed_footnote.ts",
+      "cr_components/managed_dialog/managed_dialog.html.ts",
       "cr_components/managed_dialog/managed_dialog.ts",
       "cr_elements/cr_auto_img/cr_auto_img.ts",
+      "cr_elements/cr_grid/cr_grid.html.ts",
       "cr_elements/cr_grid/cr_grid.ts",
+      "cr_elements/cr_a11y_announcer/cr_a11y_announcer.html.ts",
       "cr_elements/cr_a11y_announcer/cr_a11y_announcer.ts",
+      "cr_elements/cr_action_menu/cr_action_menu.html.ts",
       "cr_elements/cr_action_menu/cr_action_menu.ts",
       "cr_elements/cr_container_shadow_mixin.ts",
+      "cr_elements/cr_drawer/cr_drawer.html.ts",
       "cr_elements/cr_drawer/cr_drawer.ts",
+      "cr_elements/cr_link_row/cr_link_row.html.ts",
       "cr_elements/cr_link_row/cr_link_row.ts",
       "cr_elements/cr_menu_selector/cr_menu_selector.ts",
-      "cr_elements/cr_nav_menu_item_style.ts",
+      "cr_elements/cr_nav_menu_item_style.css.ts",
+      "cr_elements/cr_page_host_style.css.ts",
+      "cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.html.ts",
       "cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.ts",
+      "cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html.ts",
       "cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.ts",
       "cr_elements/cr_search_field/cr_search_field_mixin.ts",
+      "cr_elements/cr_search_field/cr_search_field.html.ts",
       "cr_elements/cr_search_field/cr_search_field.ts",
+      "cr_elements/cr_slider/cr_slider.html.ts",
       "cr_elements/cr_slider/cr_slider.ts",
       "cr_elements/cr_splitter/cr_splitter.ts",
+      "cr_elements/cr_tabs/cr_tabs.html.ts",
       "cr_elements/cr_tabs/cr_tabs.ts",
+      "cr_elements/cr_toast/cr_toast_manager.html.ts",
       "cr_elements/cr_toast/cr_toast_manager.ts",
+      "cr_elements/cr_toast/cr_toast.html.ts",
       "cr_elements/cr_toast/cr_toast.ts",
+      "cr_elements/cr_toolbar/cr_toolbar_search_field.html.ts",
       "cr_elements/cr_toolbar/cr_toolbar_search_field.ts",
+      "cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html.ts",
       "cr_elements/cr_toolbar/cr_toolbar_selection_overlay.ts",
+      "cr_elements/cr_toolbar/cr_toolbar.html.ts",
       "cr_elements/cr_toolbar/cr_toolbar.ts",
+      "cr_elements/cr_view_manager/cr_view_manager.html.ts",
       "cr_elements/cr_view_manager/cr_view_manager.ts",
       "cr_elements/find_shortcut_mixin.ts",
       "cr_elements/mouse_hoverable_mixin.ts",
-      "cr_elements/mwb_element_shared_style.ts",
-      "cr_elements/mwb_shared_icons.ts",
-      "cr_elements/mwb_shared_style.ts",
-      "cr_elements/mwb_shared_vars.ts",
-      "cr_elements/search_highlight_style_css.ts",
+      "cr_elements/mwb_element_shared_style.css.ts",
+      "cr_elements/mwb_shared_icons.html.ts",
+      "cr_elements/mwb_shared_style.css.ts",
+      "cr_elements/mwb_shared_vars.css.ts",
+      "cr_elements/search_highlight_style.css.ts",
       "js/i18n_mixin.ts",
       "js/list_property_update_mixin.ts",
       "js/web_ui_listener_mixin.ts",
     ]
-  }
 
-  if (is_chromeos) {
-    in_files +=
-        [ "cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.ts" ]
+    if (is_chromeos) {
+      # cr-searchable-drop-down is only used in smb and cups dialogs, both of
+      # which are chromeos only.
+      in_files += [
+        "cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html.ts",
+        "cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.ts",
+      ]
+    }
   }
 
   definitions = [
+    "//tools/typescript/definitions/bluetooth_private.d.ts",
+    "//tools/typescript/definitions/bluetooth.d.ts",
     "//tools/typescript/definitions/chrome_send.d.ts",
     "//tools/typescript/definitions/pending.d.ts",
     "//tools/typescript/definitions/settings_private.d.ts",
diff --git a/chromium/ui/webui/resources/PRESUBMIT.py b/chromium/ui/webui/resources/PRESUBMIT.py
index 67368e56a97..ced44a53daf 100644
--- a/chromium/ui/webui/resources/PRESUBMIT.py
+++ b/chromium/ui/webui/resources/PRESUBMIT.py
@@ -89,7 +89,7 @@ def _CheckJsModulizer(input_api, output_api):
     sources = [input_api.os_path.join('tools', 'js_modulizer_test.py')]
     tests = [input_api.os_path.join(presubmit_path, s) for s in sources]
     results += input_api.canned_checks.RunUnitTests(
-        input_api, output_api, tests)
+        input_api, output_api, tests, run_on_python2=False)
   return results
 
 
@@ -103,7 +103,8 @@ def _CheckGenerateGrd(input_api, output_api):
     sources = [input_api.os_path.join('tools', 'generate_grd_test.py')]
     tests = [input_api.os_path.join(presubmit_path, s) for s in sources]
     results += input_api.canned_checks.RunUnitTests(
-        input_api, output_api, tests)
+        input_api, output_api, tests, skip_shebang_check=True,
+        run_on_python2=False)
   return results
 
 
diff --git a/chromium/ui/webui/resources/cr_components/BUILD.gn b/chromium/ui/webui/resources/cr_components/BUILD.gn
index 0d367379593..04d8c49d9c6 100644
--- a/chromium/ui/webui/resources/cr_components/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_components/BUILD.gn
@@ -5,6 +5,7 @@
 import("//build/config/chromeos/ui_mode.gni")
 import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/grit/preprocess_if_expr.gni")
+import("//tools/polymer/html_to_wrapper.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
 import("//ui/webui/webui_features.gni")
 
@@ -12,7 +13,6 @@ assert(!is_android && !is_ios)
 
 preprocess_folder =
     "$root_gen_dir/ui/webui/resources/preprocessed/cr_components"
-preprocess_mojom_manifest = "preprocessed_mojom_manifest.json"
 if (is_chromeos_ash) {
   preprocess_gen_manifest = "preprocessed_gen_manifest.json"
   preprocess_polymer2_manifest = "preprocessed_polymer2_manifest.json"
@@ -22,7 +22,7 @@ preprocess_src_manifest = "preprocessed_src_manifest.json"
 generate_grd("build_grdp") {
   grd_prefix = "cr_components"
   out_grd = "$target_gen_dir/${grd_prefix}_resources.grdp"
-  deps = [ ":preprocess" ]
+  public_deps = [ ":preprocess" ]
   if (is_chromeos_ash) {
     input_files_base_dir = rebase_path(".", "//")
     input_files = [
@@ -63,10 +63,7 @@ generate_grd("build_grdp") {
       "chromeos/network_health/test_warning.png",
     ]
   }
-  manifest_files = [
-    "$target_gen_dir/$preprocess_mojom_manifest",
-    "$target_gen_dir/$preprocess_src_manifest",
-  ]
+  manifest_files = [ "$target_gen_dir/$preprocess_src_manifest" ]
 
   # TODO(crbug.com/1184053): Fully remove once no longer used by CrOS.
   if (is_chromeos_ash) {
@@ -82,8 +79,8 @@ generate_grd("build_grdp") {
 group("preprocess") {
   public_deps = [
     ":preprocess_generated_ts",
-    ":preprocess_mojom",
     ":preprocess_src",
+    ":preprocess_src_ts",
   ]
 
   if (is_chromeos_ash) {
@@ -109,22 +106,12 @@ preprocess_if_expr("preprocess_src") {
     "chromeos/network_health/mojo_interface_provider.js",
     "chromeos/network_health/network_diagnostics_types.js",
     "chromeos/smb_shares/smb_browser_proxy.js",
-    "color_change_listener/browser_proxy.js",
-    "color_change_listener/colors_css_updater.js",
   ]
 }
 
-preprocess_if_expr("preprocess_mojom") {
-  deps = [ "color_change_listener:mojom_webui_js" ]
-  in_folder = "$root_gen_dir/mojom-webui/ui/webui/resources/cr_components"
-  out_folder = "$preprocess_folder"
-  out_manifest = "$target_gen_dir/$preprocess_mojom_manifest"
-  in_files = [ "color_change_listener/color_change_listener.mojom-webui.js" ]
-}
-
 if (is_chromeos_ash) {
   preprocess_if_expr("preprocess_generated") {
-    deps = [ ":polymer3_elements" ]
+    deps = [ "chromeos:polymer3_elements" ]
     in_folder = target_gen_dir
     out_folder = preprocess_folder
     out_manifest = "$target_gen_dir/$preprocess_gen_manifest"
@@ -223,9 +210,8 @@ if (is_chromeos_ash) {
 
 # TS files are passed to a separate target so that they are not listed in the
 # |out_manifest|.
-preprocess_if_expr("preprocess_generated_ts") {
-  deps = [ ":polymer3_elements" ]
-  in_folder = target_gen_dir
+preprocess_if_expr("preprocess_src_ts") {
+  in_folder = "."
   out_folder = preprocess_folder
   in_files = [
     "iph_bubble/iph_bubble.ts",
@@ -235,6 +221,20 @@ preprocess_if_expr("preprocess_generated_ts") {
   ]
 }
 
+# TS files are passed to a separate target so that they are not listed in the
+# |out_manifest|.
+preprocess_if_expr("preprocess_generated_ts") {
+  deps = [ ":html_wrapper_files" ]
+  in_folder = target_gen_dir
+  out_folder = preprocess_folder
+  in_files = [
+    "iph_bubble/iph_bubble.html.ts",
+    "localized_link/localized_link.html.ts",
+    "managed_dialog/managed_dialog.html.ts",
+    "managed_footnote/managed_footnote.html.ts",
+  ]
+}
+
 if (is_chromeos_ash) {
   preprocess_if_expr("preprocess_polymer2") {
     in_folder = "./"
@@ -380,25 +380,11 @@ if (is_chromeos_ash) {
   }
 }
 
-group("closure_compile") {
-  deps = [ "color_change_listener:closure_compile" ]
-
-  if (is_chromeos_ash) {
-    deps += [ "chromeos:closure_compile" ]
-  }
-}
-
-group("polymer3_elements") {
-  public_deps = [
-    "customize_themes:web_components",
-    "iph_bubble:web_components",
-    "localized_link:web_components",
-    "managed_dialog:web_components",
-    "managed_footnote:web_components",
-    "most_visited:web_components",
+html_to_wrapper("html_wrapper_files") {
+  in_files = [
+    "iph_bubble/iph_bubble.html",
+    "localized_link/localized_link.html",
+    "managed_dialog/managed_dialog.html",
+    "managed_footnote/managed_footnote.html",
   ]
-
-  if (is_chromeos_ash) {
-    public_deps += [ "chromeos:polymer3_elements" ]
-  }
 }
diff --git a/chromium/ui/webui/resources/cr_components/app_management/BUILD.gn b/chromium/ui/webui/resources/cr_components/app_management/BUILD.gn
index 1f61e9bee87..4855a2e46ee 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_components/app_management/BUILD.gn
@@ -4,9 +4,11 @@
 
 import("//mojo/public/tools/bindings/mojom.gni")
 import("//tools/grit/preprocess_if_expr.gni")
-import("//tools/polymer/html_to_js.gni")
+import("//tools/polymer/css_to_wrapper.gni")
+import("//tools/polymer/html_to_wrapper.gni")
 import("//tools/typescript/ts_library.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
+import("app_management.gni")
 
 assert(!is_android && !is_ios)
 
@@ -14,29 +16,12 @@ preprocess_folder_tmp = "$root_gen_dir/ui/webui/resources/preprocessed/cr_compon
 preprocess_folder =
     "$root_gen_dir/ui/webui/resources/preprocessed/cr_components/app_management"
 
-web_component_files = [
-  "file_handling_item.ts",
-  "icons.ts",
-  "more_permissions_item.ts",
-  "permission_item.ts",
-  "run_on_os_login_item.ts",
-  "shared_style.ts",
-  "shared_vars.ts",
-  "toggle_row.ts",
-  "uninstall_button.ts",
-  "window_mode_item.ts",
-]
-
-non_web_component_files = [
-  "constants.ts",
-  "permission_constants.ts",
-  "permission_util.ts",
-  "browser_proxy.ts",
-  "util.ts",
-]
-
-html_to_js("web_components") {
-  js_files = web_component_files
+css_to_wrapper("css_wrapper_files") {
+  in_files = css_files
+}
+
+html_to_wrapper("html_wrapper_files") {
+  in_files = html_files + html_icons_files
 }
 
 mojom("mojo_bindings") {
@@ -105,15 +90,18 @@ preprocess_if_expr("preprocess_src") {
   visibility = [ ":build_ts" ]
   in_folder = "."
   out_folder = preprocess_folder_tmp
-  in_files = non_web_component_files
+  in_files = ts_files
 }
 
 preprocess_if_expr("preprocess_generated") {
   visibility = [ ":build_ts" ]
-  deps = [ ":web_components" ]
+  deps = [
+    ":css_wrapper_files",
+    ":html_wrapper_files",
+  ]
   in_folder = target_gen_dir
   out_folder = preprocess_folder_tmp
-  in_files = web_component_files
+  in_files = html_wrapper_files + css_wrapper_files
 }
 
 copy("copy_mojo") {
@@ -133,10 +121,7 @@ ts_library("build_ts") {
   out_dir = preprocess_folder
   composite = true
   tsconfig_base = "tsconfig_base.json"
-  in_files = web_component_files + non_web_component_files + [
-               "app_management.mojom-webui.js",
-               "types.mojom-webui.js",
-             ]
+  in_files = ts_files + html_wrapper_files + css_wrapper_files + mojo_files
 
   definitions = [ "//tools/typescript/definitions/metrics_private.d.ts" ]
 
@@ -154,7 +139,7 @@ ts_library("build_ts") {
 generate_grd("build_grdp") {
   grd_prefix = "cr_components_app_management"
   out_grd = "$target_gen_dir/resources.grdp"
-  deps = [ ":build_ts" ]
+  public_deps = [ ":build_ts" ]
   manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
   resource_path_prefix = "cr_components/app_management"
 }
diff --git a/chromium/ui/webui/resources/cr_components/app_management/app_management.gni b/chromium/ui/webui/resources/cr_components/app_management/app_management.gni
new file mode 100644
index 00000000000..5e65f3211b4
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/app_management/app_management.gni
@@ -0,0 +1,54 @@
+# Copyright 2022 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.
+
+_web_component_files = [
+  "file_handling_item.ts",
+  "more_permissions_item.ts",
+  "permission_item.ts",
+  "run_on_os_login_item.ts",
+  "toggle_row.ts",
+  "uninstall_button.ts",
+  "window_mode_item.ts",
+]
+
+# Files that are passed as input to html_to_wrapper().
+html_files = []
+foreach(f, _web_component_files) {
+  html_files += [ string_replace(f, ".ts", ".html") ]
+}
+
+html_icons_files = [ "icons.html" ]
+
+# Files that are generated by html_to_wrapper().
+html_wrapper_files = []
+foreach(f, html_files + html_icons_files) {
+  html_wrapper_files += [ f + ".ts" ]
+}
+
+_non_web_component_files = [
+  "constants.ts",
+  "permission_constants.ts",
+  "permission_util.ts",
+  "browser_proxy.ts",
+  "util.ts",
+]
+
+mojo_files = [
+  "app_management.mojom-webui.js",
+  "types.mojom-webui.js",
+]
+
+# Files that are passed as input to css_to_wrapper().
+css_files = [
+  "app_management_shared_style.css",
+  "shared_vars.css",
+]
+
+# Files that are generated by css_to_wrapper().
+css_wrapper_files = []
+foreach(f, css_files) {
+  css_wrapper_files += [ f + ".ts" ]
+}
+
+ts_files = _web_component_files + _non_web_component_files
diff --git a/chromium/ui/webui/resources/cr_components/app_management/app_management.mojom b/chromium/ui/webui/resources/cr_components/app_management/app_management.mojom
index a610032cd6d..f9cb799bac6 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/app_management.mojom
+++ b/chromium/ui/webui/resources/cr_components/app_management/app_management.mojom
@@ -143,11 +143,15 @@ struct App {
   bool hide_pin_to_shelf;
   bool is_preferred_app;
   WindowMode window_mode;
+  bool hide_window_mode;
   bool resize_locked;
   bool hide_resize_locked;
   array<string> supported_links;
   RunOnOsLogin? run_on_os_login;
   FileHandlingState? file_handling_state;
+  string? app_size;
+  string? data_size;
+  string publisher_id;
 };
 
 // Extension-based apps primarily use install-time permissions that cannot be
diff --git a/chromium/ui/webui/resources/cr_components/app_management/app_management_mojom_traits.cc b/chromium/ui/webui/resources/cr_components/app_management/app_management_mojom_traits.cc
index 9c5a20bb0bf..03632522ac8 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/app_management_mojom_traits.cc
+++ b/chromium/ui/webui/resources/cr_components/app_management/app_management_mojom_traits.cc
@@ -193,23 +193,23 @@ PermissionValueDataView::Tag
 UnionTraits<PermissionValueDataView, apps::PermissionValuePtr>::GetTag(
     const apps::PermissionValuePtr& r) {
   if (r->bool_value.has_value()) {
-    return PermissionValueDataView::Tag::BOOL_VALUE;
+    return PermissionValueDataView::Tag::kBoolValue;
   } else if (r->tristate_value.has_value()) {
-    return PermissionValueDataView::Tag::TRISTATE_VALUE;
+    return PermissionValueDataView::Tag::kTristateValue;
   }
   NOTREACHED();
-  return PermissionValueDataView::Tag::BOOL_VALUE;
+  return PermissionValueDataView::Tag::kBoolValue;
 }
 
 bool UnionTraits<PermissionValueDataView, apps::PermissionValuePtr>::Read(
     PermissionValueDataView data,
     apps::PermissionValuePtr* out) {
   switch (data.tag()) {
-    case PermissionValueDataView::Tag::BOOL_VALUE: {
+    case PermissionValueDataView::Tag::kBoolValue: {
       *out = std::make_unique<apps::PermissionValue>(data.bool_value());
       return true;
     }
-    case PermissionValueDataView::Tag::TRISTATE_VALUE: {
+    case PermissionValueDataView::Tag::kTristateValue: {
       apps::TriState tristate_value;
       if (!data.ReadTristateValue(&tristate_value))
         return false;
diff --git a/chromium/ui/webui/resources/cr_components/app_management/app_management_shared_style.css b/chromium/ui/webui/resources/cr_components/app_management/app_management_shared_style.css
new file mode 100644
index 00000000000..d96b57ed95e
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/app_management/app_management_shared_style.css
@@ -0,0 +1,157 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=./shared_vars.css.js
+ * #import=//resources/cr_elements/shared_style_css.m.js
+ * #import=//resources/cr_elements/shared_vars_css.m.js
+ * #include=cr-shared-style
+ * #css_wrapper_metadata_end */
+
+.card-container {
+  border-radius: var(--cr-card-border-radius);
+  box-shadow: var(--cr-card-shadow);
+  display: flex;
+  flex-direction: column;
+  margin: 24px auto;
+  max-width: var(--card-max-width);
+  min-width: var(--card-min-width);
+}
+
+.separated-row {
+  align-items: center;
+  display: inline-flex;
+  justify-content: space-between;
+}
+
+.card-row {
+  border-top: var(--card-separator);
+  padding: 0 24px;
+}
+
+.permission-card-row {
+  border-bottom: var(--card-separator);
+  padding: 0 20px;
+}
+
+.permission-text-row {
+  border-top: var(--card-separator);
+  display: flex;
+  flex-direction: column;
+  height: var(--text-permission-list-row-height);
+  justify-content: center;
+}
+
+.permission-section-header {
+  line-height: 48px;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.permission-card-row:last-child {
+  border-style: none;
+}
+
+.permission-card-row[hide-bottom-border] {
+  border-bottom: none;
+}
+
+.header-text {
+  color: var(--header-text-color);
+  font-weight: var(--header-font-weight);
+}
+
+.permission-row-controls {
+  align-items: center;
+  display: inline-flex;
+}
+
+.permission-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.permission-list > * {
+  flex: 0 0 var(--permission-list-item-height);
+}
+
+.row-with-description {
+  flex: 0 0 var(--permission-list-item-with-description-height);
+}
+
+.native-settings-icon {
+  display: flex;
+  margin-inline-start: 0;
+}
+
+.subpermission-row {
+  border-bottom: var(--card-separator);
+  height: 48px;
+}
+
+.subpermission-row[available_]:last-of-type {
+  border-bottom: none;
+}
+
+.secondary-text {
+  color: var(--secondary-text-color);
+  font-weight: var(--secondary-font-weight);
+}
+
+.expand-button {
+  height: 36px;
+  margin-inline-end: 12px;
+  width: 36px;
+}
+
+.horizontal-align {
+  align-items: center;
+  display: flex;
+}
+
+.expander-list-row {
+  align-items: center;
+  border-top: var(--card-separator);
+  color: var(--secondary-text-color);
+  display: flex;
+  height: 50px;
+  justify-content: space-between;
+  padding-inline-end: 8px;
+  padding-inline-start: 24px;
+}
+
+.page-title {
+  flex: 1;
+  font-size: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.indented-permission-block {
+  padding-inline-start: 36px;
+}
+
+.info-text-row {
+  display: flex;
+  flex: 0 0 var(--info-text-row-height);
+}
+
+#info-icon {
+  float: inline-block;
+  height: var(--help-icon-size);
+  padding-inline-end: var(--help-icon-padding);
+  width: var(--help-icon-size);
+}
+
+#info-text {
+  float: inline-block;
+  overflow-wrap: break-word;
+}
+
+.indented-app-details {
+  margin-inline-start: 20px;
+}
diff --git a/chromium/ui/webui/resources/cr_components/app_management/file_handling_item.html b/chromium/ui/webui/resources/cr_components/app_management/file_handling_item.html
index b235cc00d73..fb8ffa4e486 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/file_handling_item.html
+++ b/chromium/ui/webui/resources/cr_components/app_management/file_handling_item.html
@@ -1,4 +1,4 @@
-<style include="app-management-shared-css">
+<style include="app-management-shared-style">
   :host(:not([available_])) {
     display: none;
   }
diff --git a/chromium/ui/webui/resources/cr_components/app_management/file_handling_item.ts b/chromium/ui/webui/resources/cr_components/app_management/file_handling_item.ts
index 5e1b0898e92..a7834d694d6 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/file_handling_item.ts
+++ b/chromium/ui/webui/resources/cr_components/app_management/file_handling_item.ts
@@ -2,12 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './shared_style.js';
+import './app_management_shared_style.css.js';
 import './toggle_row.js';
 
 import {assert} from '//resources/js/assert.m.js';
 import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrDialogElement} from '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
@@ -15,6 +15,7 @@ import {I18nMixin} from '../../js/i18n_mixin.js';
 import {App} from './app_management.mojom-webui.js';
 import {BrowserProxy} from './browser_proxy.js';
 import {AppManagementUserAction} from './constants.js';
+import {getTemplate} from './file_handling_item.html.js';
 import {AppManagementToggleRowElement} from './toggle_row.js';
 import {recordAppManagementUserAction} from './util.js';
 
@@ -27,7 +28,7 @@ export class AppManagementFileHandlingItemElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/app_management/icons.html b/chromium/ui/webui/resources/cr_components/app_management/icons.html
index 88e5a57f926..85d71b17126 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/icons.html
+++ b/chromium/ui/webui/resources/cr_components/app_management/icons.html
@@ -7,6 +7,7 @@
     <defs>
       <g id="camera" viewBox="0 0 20 20"><rect width="20px" height="20px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"></rect><path d="M2,5.99539757 C2,5.44565467 2.44851311,5 3.00247329,5 L12.9975267,5 C13.5511774,5 14,5.44910619 14,5.99539757 L14,14.0046024 C14,14.5543453 13.5514869,15 12.9975267,15 L3.00247329,15 C2.44882258,15 2,14.5508938 2,14.0046024 L2,5.99539757 Z M14,8.5 L18,5.5 L18,14.5 L14,12 L14,8.5 Z M4,7 L4,13 L12,13 L12,7 L4,7 Z" id="Combined-Shape"></path></g>
       <g id="contacts" viewBox="0 0 20 20"><rect width="20px" height="20px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"></rect><path d="M5,14.754629 C6.36959794,13.6567183 8.10810658,13 10,13 C11.8918934,13 13.6304021,13.6567183 15,14.754629 L15,6 L5,6 L5,14.754629 Z M14.153574,16 C13.0272557,15.0633182 11.5794129,14.5 10,14.5 C8.42058712,14.5 6.97274425,15.0633182 5.84642599,16 L14.153574,16 Z M10,12 C8.61928813,12 7.5,10.8807119 7.5,9.5 C7.5,8.11928813 8.61928813,7 10,7 C11.3807119,7 12.5,8.11928813 12.5,9.5 C12.5,10.8807119 11.3807119,12 10,12 Z M10,10.5 C10.5522847,10.5 11,10.0522847 11,9.5 C11,8.94771525 10.5522847,8.5 10,8.5 C9.44771525,8.5 9,8.94771525 9,9.5 C9,10.0522847 9.44771525,10.5 10,10.5 Z M5,4 L15,4 C16.1045695,4 17,4.8954305 17,6 L17,16 C17,17.1045695 16.1045695,18 15,18 L5,18 C3.8954305,18 3,17.1045695 3,16 L3,6 C3,4.8954305 3.8954305,4 5,4 Z" id="Combined-Shape"></path><rect id="Rectangle" x="6" y="2" width="2" height="2"></rect><rect id="Rectangle-Copy" x="12" y="2" width="2" height="2"></rect></g>
+      <g id="launch" viewBox="0 0 20 20"><rect width="20px" height="20px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"></rect>><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"></path></g>
       <g id="location" viewBox="0 0 20 20"><rect width="20px" height="20px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"></rect><path d="M10,18 C6,13.5424723 4,10.209139 4,8 C4,4.6862915 6.6862915,2 10,2 C13.3137085,2 16,4.6862915 16,8 C16,10.209139 14,13.5424723 10,18 Z M6,8 C6,9.32543171 7.3180021,11.7149155 10,14.9435167 C12.6819979,11.7149155 14,9.32543171 14,8 C14,5.790861 12.209139,4 10,4 C7.790861,4 6,5.790861 6,8 Z M10,10 C8.8954305,10 8,9.1045695 8,8 C8,6.8954305 8.8954305,6 10,6 C11.1045695,6 12,6.8954305 12,8 C12,9.1045695 11.1045695,10 10,10 Z" id="Combined-Shape"></path></g>
       <g id="microphone" viewBox="0 0 20 20"><rect width="20px" height="20px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"></rect><path d="M12.5628571,9.5 C12.5628571,10.8833333 11.4228571,12 10,12 C8.57714286,12 7.42857143,10.8833333 7.42857143,9.5 L7.42857143,4.5 C7.42857143,3.11666667 8.57714286,2 10,2 C11.4228571,2 12.5714286,3.11666667 12.5714286,4.5 L12.5628571,9.5 Z M10.0548096,3.5 C9.5012628,3.5 9.05131398,3.94643954 9.04697987,4.49996935 L9.0078297,9.50003065 C9.00780942,9.50262015 9.00779929,9.50520971 9.00779929,9.50779929 C9.00779929,10.0557766 9.45202268,10.5 10,10.5 C10.5535468,10.5 11.0034956,10.0535605 11.0078297,9.50003065 L11.0469799,4.49996935 C11.0470001,4.49737985 11.0470103,4.49479029 11.0470103,4.49220071 C11.0470103,3.94422339 10.6027869,3.5 10.0548096,3.5 Z M10,13.8736842 C7.63428571,13.8736842 5.45714286,12.1052632 5.45714286,9.57894737 L4,9.57894737 C4,12.4589474 6.33142857,14.8252632 9.14285714,15.2378947 L9.14285714,18 L10.8571429,18 L10.8571429,15.2378947 C13.6685714,14.8336842 16,12.4589474 16,9.57894737 L14.5428571,9.57894737 C14.5428571,12.1052632 12.3657143,13.8736842 10,13.8736842 Z"></path></g>
       <g id="storage" viewBox="0 0 20 20"><rect width="20px" height="20px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"></rect><path d="M16,5 L12,5 L10,3 L4,3 C2.9,3 2.01,3.9 2.01,5 L2,15 C2,16.1 2.9,17 4,17 L16,17 C17.1,17 18,16.1 18,15 L18,7 C18,5.9 17.1,5 16,5 Z M16,15 L4,15 L4,7 L16,7 L16,15 Z"></path></g>
diff --git a/chromium/ui/webui/resources/cr_components/app_management/icons.ts b/chromium/ui/webui/resources/cr_components/app_management/icons.ts
deleted file mode 100644
index 643939e588f..00000000000
--- a/chromium/ui/webui/resources/cr_components/app_management/icons.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// Copyright 2019 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 '//resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
-
-import {html} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-const template = html`{__html_template__}`;
-document.head.appendChild(template.content);
diff --git a/chromium/ui/webui/resources/cr_components/app_management/more_permissions_item.html b/chromium/ui/webui/resources/cr_components/app_management/more_permissions_item.html
index c6b9f2639ef..fc5ec786aff 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/more_permissions_item.html
+++ b/chromium/ui/webui/resources/cr_components/app_management/more_permissions_item.html
@@ -1,4 +1,4 @@
-<style include="app-management-shared-css">
+<style include="app-management-shared-style">
   :host {
     align-items: center;
     cursor: pointer;
diff --git a/chromium/ui/webui/resources/cr_components/app_management/more_permissions_item.ts b/chromium/ui/webui/resources/cr_components/app_management/more_permissions_item.ts
index b56a7929859..3210571ce99 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/more_permissions_item.ts
+++ b/chromium/ui/webui/resources/cr_components/app_management/more_permissions_item.ts
@@ -2,14 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './shared_style.js';
+import './app_management_shared_style.css.js';
 import '//resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {App} from './app_management.mojom-webui.js';
 import {BrowserProxy} from './browser_proxy.js';
 import {AppManagementUserAction} from './constants.js';
+import {getTemplate} from './more_permissions_item.html.js';
 import {recordAppManagementUserAction} from './util.js';
 
 export class AppManagementMorePermissionsItemElement extends PolymerElement {
@@ -18,7 +19,7 @@ export class AppManagementMorePermissionsItemElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/app_management/permission_item.html b/chromium/ui/webui/resources/cr_components/app_management/permission_item.html
index e7867624f5a..6ae933666b9 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/permission_item.html
+++ b/chromium/ui/webui/resources/cr_components/app_management/permission_item.html
@@ -1,4 +1,4 @@
-<style include="app-management-shared-css">
+<style include="app-management-shared-style">
   :host {
     align-items: center;
     display: flex;
diff --git a/chromium/ui/webui/resources/cr_components/app_management/permission_item.ts b/chromium/ui/webui/resources/cr_components/app_management/permission_item.ts
index 73e2086eb50..60959a72bdb 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/permission_item.ts
+++ b/chromium/ui/webui/resources/cr_components/app_management/permission_item.ts
@@ -1,17 +1,17 @@
 // Copyright 2018 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 './shared_style.js';
+import './app_management_shared_style.css.js';
 import './toggle_row.js';
 
 import {assert, assertNotReached} from '//resources/js/assert.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {App} from './app_management.mojom-webui.js';
-import {Permission} from './app_management.mojom-webui.js';
+import {App, Permission} from './app_management.mojom-webui.js';
 import {BrowserProxy} from './browser_proxy.js';
 import {AppManagementUserAction} from './constants.js';
 import {PermissionType, PermissionTypeIndex, TriState} from './permission_constants.js';
+import {getTemplate} from './permission_item.html.js';
 import {createBoolPermission, createTriStatePermission, getBoolPermissionValue, getTriStatePermissionValue, isBoolValue, isTriStateValue} from './permission_util.js';
 import {AppManagementToggleRowElement} from './toggle_row.js';
 import {getPermission, getPermissionValueBool, recordAppManagementUserAction} from './util.js';
@@ -22,7 +22,7 @@ export class AppManagementPermissionItemElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/app_management/run_on_os_login_item.ts b/chromium/ui/webui/resources/cr_components/app_management/run_on_os_login_item.ts
index ce55807554f..24553a97147 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/run_on_os_login_item.ts
+++ b/chromium/ui/webui/resources/cr_components/app_management/run_on_os_login_item.ts
@@ -2,15 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './shared_style.js';
+import './app_management_shared_style.css.js';
 import './toggle_row.js';
 
 import {assert, assertNotReached} from '//resources/js/assert.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {App} from './app_management.mojom-webui.js';
 import {BrowserProxy} from './browser_proxy.js';
 import {AppManagementUserAction, RunOnOsLoginMode} from './constants.js';
+import {getTemplate} from './run_on_os_login_item.html.js';
 import {AppManagementToggleRowElement} from './toggle_row.js';
 import {recordAppManagementUserAction} from './util.js';
 
@@ -20,7 +21,7 @@ export class AppManagementRunOnOsLoginItemElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/app_management/shared_style.html b/chromium/ui/webui/resources/cr_components/app_management/shared_style.html
deleted file mode 100644
index bc0ecd206f3..00000000000
--- a/chromium/ui/webui/resources/cr_components/app_management/shared_style.html
+++ /dev/null
@@ -1,145 +0,0 @@
-<template>
-  <style include="cr-shared-style">
-    .card-container {
-      border-radius: var(--cr-card-border-radius);
-      box-shadow: var(--cr-card-shadow);
-      display: flex;
-      flex-direction: column;
-      margin: 24px auto;
-      max-width: var(--card-max-width);
-      min-width: var(--card-min-width);
-    }
-
-    .separated-row {
-      align-items: center;
-      display: inline-flex;
-      justify-content: space-between;
-    }
-
-    .card-row {
-      border-top: var(--card-separator);
-      padding: 0 24px;
-    }
-
-    .permission-card-row {
-      border-bottom: var(--card-separator);
-      padding: 0 20px;
-    }
-
-    .permission-text-row {
-      border-top: var(--card-separator);
-      display: flex;
-      flex-direction: column;
-      height: var(--text-permission-list-row-height);
-      justify-content: center;
-    }
-
-    .permission-section-header {
-      line-height: 48px;
-    }
-
-    .clickable {
-      cursor: pointer;
-    }
-
-    .permission-card-row:last-child {
-      border-style: none;
-    }
-
-    .permission-card-row[hide-bottom-border] {
-      border-bottom: none;
-    }
-
-    .header-text {
-      color: var(--header-text-color);
-      font-weight: var(--header-font-weight);
-    }
-
-    .permission-row-controls {
-      align-items: center;
-      display: inline-flex;
-    }
-
-    .permission-list {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .permission-list > * {
-      flex: 0 0 var(--permission-list-item-height);
-    }
-
-    .row-with-description {
-      flex: 0 0 var(--permission-list-item-with-description-height);
-    }
-
-    .native-settings-icon {
-      display: flex;
-      margin-inline-start: 0;
-    }
-
-    .subpermission-row {
-      border-bottom: var(--card-separator);
-      height: 48px;
-    }
-
-    .subpermission-row[available_]:last-of-type {
-      border-bottom: none;
-    }
-
-    .secondary-text {
-      color: var(--secondary-text-color);
-      font-weight: var(--secondary-font-weight);
-    }
-
-    .expand-button {
-      height: 36px;
-      margin-inline-end: 12px;
-      width: 36px;
-    }
-
-    .horizontal-align {
-      align-items: center;
-      display: flex;
-    }
-
-    .expander-list-row {
-      align-items: center;
-      border-top: var(--card-separator);
-      color: var(--secondary-text-color);
-      display: flex;
-      height: 50px;
-      justify-content: space-between;
-      padding-inline-end: 8px;
-      padding-inline-start: 24px;
-    }
-
-    .page-title {
-      flex: 1;
-      font-size: 16px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .indented-permission-block {
-      padding-inline-start: 36px;
-    }
-
-    .info-text-row {
-      display: flex;
-      flex: 0 0 var(--info-text-row-height);
-    }
-
-    #info-icon {
-      float: inline-block;
-      height: var(--help-icon-size);
-      padding-inline-end: var(--help-icon-padding);
-      width: var(--help-icon-size);
-    }
-
-    #info-text {
-      float: inline-block;
-      overflow-wrap: break-word;
-    }
-  </style>
-</template>
diff --git a/chromium/ui/webui/resources/cr_components/app_management/shared_style.ts b/chromium/ui/webui/resources/cr_components/app_management/shared_style.ts
deleted file mode 100644
index 26d3b4acba5..00000000000
--- a/chromium/ui/webui/resources/cr_components/app_management/shared_style.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// Copyright 2018 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 './shared_vars.js';
-import '//resources/cr_elements/shared_style_css.m.js';
-import '//resources/cr_elements/shared_vars_css.m.js';
-
-const template = document.createElement('template');
-template.innerHTML = `
-<dom-module id="app-management-shared-css" assetpath="chrome://resources/">
-{__html_template__}</dom-module>
-`;
-document.body.appendChild(template.content.cloneNode(true));
diff --git a/chromium/ui/webui/resources/cr_components/app_management/shared_vars.css b/chromium/ui/webui/resources/cr_components/app_management/shared_vars.css
new file mode 100644
index 00000000000..7555d1d20d8
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/app_management/shared_vars.css
@@ -0,0 +1,32 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=vars
+ * #import=//resources/cr_elements/shared_vars_css.m.js
+ * #css_wrapper_metadata_end */
+
+html {
+  --app-management-font-size: 13px;
+  --app-management-line-height: 1.54; /* 20px */
+  --card-max-width: 676px;
+  --card-min-width: 550px;
+  --card-separator: 1px solid var(--cr-separator-color);
+  --expanded-permission-row-height: 48px;
+  --header-font-weight: 500;
+  --header-text-color: var(--cr-title-text-color);
+  --permission-icon-padding: 20px;
+  --permission-list-item-height: 48px;
+  --permission-list-item-with-description-height: 64px;
+  --primary-text-color: var(--cr-primary-text-color);
+  --row-item-icon-padding: 12px;
+  --row-item-vertical-padding: 16px;
+  --secondary-font-weight: 400;
+  --secondary-text-color: var(--cr-secondary-text-color);
+  --text-permission-list-row-height: 40px;
+  --help-icon-padding: 6px;
+  --info-text-row-height: 48px;
+  --help-icon-size: 20px;
+  --app-management-controlled-by-spacing: var(--cr-controlled-by-spacing);
+}
diff --git a/chromium/ui/webui/resources/cr_components/app_management/shared_vars.html b/chromium/ui/webui/resources/cr_components/app_management/shared_vars.html
deleted file mode 100644
index f34fa3a659d..00000000000
--- a/chromium/ui/webui/resources/cr_components/app_management/shared_vars.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<custom-style>
-<style>
-  html {
-    --app-management-font-size: 13px;
-    --app-management-line-height: 1.54; /* 20px */
-    --card-max-width: 676px;
-    --card-min-width: 550px;
-    --card-separator: 1px solid var(--cr-separator-color);
-    --expanded-permission-row-height: 48px;
-    --header-font-weight: 500;
-    --header-text-color: var(--cr-title-text-color);
-    --permission-icon-padding: 20px;
-    --permission-list-item-height: 48px;
-    --permission-list-item-with-description-height: 64px;
-    --primary-text-color: var(--cr-primary-text-color);
-    --row-item-icon-padding: 12px;
-    --row-item-vertical-padding: 16px;
-    --secondary-font-weight: 400;
-    --secondary-text-color: var(--cr-secondary-text-color);
-    --text-permission-list-row-height: 40px;
-    --help-icon-padding: 6px;
-    --info-text-row-height: 48px;
-    --help-icon-size: 20px;
-    --app-management-controlled-by-spacing: var(--cr-controlled-by-spacing);
-  }
-</style>
-</custom-style>
diff --git a/chromium/ui/webui/resources/cr_components/app_management/shared_vars.ts b/chromium/ui/webui/resources/cr_components/app_management/shared_vars.ts
deleted file mode 100644
index d2a1a495230..00000000000
--- a/chromium/ui/webui/resources/cr_components/app_management/shared_vars.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Copyright 2018 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 '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-import '//resources/cr_elements/shared_vars_css.m.js';
-
-const $_documentContainer = document.createElement('template');
-$_documentContainer.innerHTML = `{__html_template__}`;
-document.head.appendChild($_documentContainer.content);
diff --git a/chromium/ui/webui/resources/cr_components/app_management/toggle_row.html b/chromium/ui/webui/resources/cr_components/app_management/toggle_row.html
index a08ca346508..dcd704d9acb 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/toggle_row.html
+++ b/chromium/ui/webui/resources/cr_components/app_management/toggle_row.html
@@ -1,4 +1,4 @@
-<style include="app-management-shared-css">
+<style include="app-management-shared-style">
   :host {
     align-items: center;
     display: flex;
diff --git a/chromium/ui/webui/resources/cr_components/app_management/toggle_row.ts b/chromium/ui/webui/resources/cr_components/app_management/toggle_row.ts
index f06220ed972..f5f8c6ddafb 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/toggle_row.ts
+++ b/chromium/ui/webui/resources/cr_components/app_management/toggle_row.ts
@@ -1,13 +1,15 @@
 // Copyright 2019 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 './shared_style.js';
+import './app_management_shared_style.css.js';
 import '//resources/cr_elements/cr_toggle/cr_toggle.m.js';
 import '//resources/cr_elements/policy/cr_policy_indicator.m.js';
 import '//resources/cr_elements/icons.m.js';
 
 import {CrToggleElement} from '//resources/cr_elements/cr_toggle/cr_toggle.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './toggle_row.html.js';
 
 export interface AppManagementToggleRowElement {
   $: {toggle: CrToggleElement};
@@ -19,7 +21,7 @@ export class AppManagementToggleRowElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/app_management/uninstall_button.html b/chromium/ui/webui/resources/cr_components/app_management/uninstall_button.html
index 07eff61b38a..b9cb5cedb00 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/uninstall_button.html
+++ b/chromium/ui/webui/resources/cr_components/app_management/uninstall_button.html
@@ -1,4 +1,4 @@
-<style include="app-management-shared-css">
+<style include="app-management-shared-style">
   :host {
     align-items: center;
     display: flex;
diff --git a/chromium/ui/webui/resources/cr_components/app_management/uninstall_button.ts b/chromium/ui/webui/resources/cr_components/app_management/uninstall_button.ts
index d98b5543ca9..95af8426b8b 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/uninstall_button.ts
+++ b/chromium/ui/webui/resources/cr_components/app_management/uninstall_button.ts
@@ -2,16 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './shared_style.js';
+import './app_management_shared_style.css.js';
 import '//resources/cr_elements/cr_button/cr_button.m.js';
 import '//resources/cr_elements/policy/cr_tooltip_icon.m.js';
 
 import {assertNotReached} from '//resources/js/assert.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {App} from './app_management.mojom-webui.js';
 import {BrowserProxy} from './browser_proxy.js';
 import {AppManagementUserAction, InstallReason} from './constants.js';
+import {getTemplate} from './uninstall_button.html.js';
 import {recordAppManagementUserAction} from './util.js';
 
 export class AppManamentUninstallButtonElement extends PolymerElement {
@@ -20,7 +21,7 @@ export class AppManamentUninstallButtonElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/app_management/util.ts b/chromium/ui/webui/resources/cr_components/app_management/util.ts
index 67343177aff..c9ec38d6088 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/util.ts
+++ b/chromium/ui/webui/resources/cr_components/app_management/util.ts
@@ -94,8 +94,7 @@ export function convertOptionalBoolToBool(optionalBool: OptionalBool): boolean {
   }
 }
 
-export function getUserActionHistogramNameForAppType_(appType: AppType):
-    string {
+function getUserActionHistogramNameForAppType(appType: AppType): string {
   switch (appType) {
     case AppType.kArc:
       return 'AppManagement.AppDetailViews.ArcApp';
@@ -119,7 +118,7 @@ export function getUserActionHistogramNameForAppType_(appType: AppType):
 
 export function recordAppManagementUserAction(
     appType: AppType, userAction: AppManagementUserAction) {
-  const histogram = getUserActionHistogramNameForAppType_(appType);
+  const histogram = getUserActionHistogramNameForAppType(appType);
   const enumLength = Object.keys(AppManagementUserAction).length;
   BrowserProxy.getInstance().recordEnumerationValue(
       histogram, userAction, enumLength);
diff --git a/chromium/ui/webui/resources/cr_components/app_management/window_mode_item.ts b/chromium/ui/webui/resources/cr_components/app_management/window_mode_item.ts
index 58468da6633..12736123d32 100644
--- a/chromium/ui/webui/resources/cr_components/app_management/window_mode_item.ts
+++ b/chromium/ui/webui/resources/cr_components/app_management/window_mode_item.ts
@@ -2,17 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './shared_style.js';
+import './app_management_shared_style.css.js';
 import './toggle_row.js';
 
 import {assert, assertNotReached} from '//resources/js/assert.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {App} from './app_management.mojom-webui.js';
 import {BrowserProxy} from './browser_proxy.js';
 import {AppManagementUserAction, WindowMode} from './constants.js';
 import {AppManagementToggleRowElement} from './toggle_row.js';
 import {recordAppManagementUserAction} from './util.js';
+import {getTemplate} from './window_mode_item.html.js';
 
 export class AppManagementWindowModeElement extends PolymerElement {
   static get is() {
@@ -20,7 +21,7 @@ export class AppManagementWindowModeElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -28,6 +29,9 @@ export class AppManagementWindowModeElement extends PolymerElement {
       windowModeLabel: String,
 
       app: Object,
+
+      hidden:
+          {type: Boolean, computed: 'isHidden_(app)', reflectToAttribute: true},
     };
   }
 
@@ -89,6 +93,10 @@ export class AppManagementWindowModeElement extends PolymerElement {
     assert(windowMode !== WindowMode.kUnknown, 'Window Mode Not Set');
     return this.convertWindowModeToBool(windowMode);
   }
+
+  private isHidden_(app: App): Boolean {
+    return app.hideWindowMode;
+  }
 }
 
 declare global {
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/BUILD.gn b/chromium/ui/webui/resources/cr_components/certificate_manager/BUILD.gn
index f64545a7ff0..33d7ddecbe5 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/BUILD.gn
@@ -4,9 +4,11 @@
 
 import("//crypto/features.gni")
 import("//tools/grit/preprocess_if_expr.gni")
-import("//tools/polymer/html_to_js.gni")
+import("//tools/polymer/css_to_wrapper.gni")
+import("//tools/polymer/html_to_wrapper.gni")
 import("//tools/typescript/ts_library.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
+import("certificate_manager.gni")
 
 assert(use_nss_certs)
 
@@ -18,30 +20,7 @@ ts_library("build_ts") {
   out_dir = preprocess_folder
   composite = true
   tsconfig_base = "tsconfig_base.json"
-  in_files = [
-    "certificate_list.ts",
-    "certificate_password_decryption_dialog.ts",
-    "certificate_delete_confirmation_dialog.ts",
-    "certificate_entry.ts",
-    "certificates_browser_proxy.ts",
-    "certificate_password_encryption_dialog.ts",
-    "certificate_manager_types.ts",
-    "ca_trust_edit_dialog.ts",
-    "certificate_shared_css.ts",
-    "certificate_subentry.ts",
-    "certificate_manager.ts",
-    "certificates_error_dialog.ts",
-  ]
-
-  if (is_chromeos_ash) {
-    in_files += [
-      "certificate_provisioning_browser_proxy.ts",
-      "certificate_provisioning_details_dialog.ts",
-      "certificate_provisioning_entry.ts",
-      "certificate_provisioning_list.ts",
-    ]
-  }
-
+  in_files = ts_files + css_wrapper_files + html_wrapper_files
   definitions = [ "//tools/typescript/definitions/chrome_send.d.ts" ]
 
   deps = [
@@ -54,75 +33,37 @@ ts_library("build_ts") {
   ]
 }
 
-html_to_js("web_components") {
+css_to_wrapper("css_wrapper_files") {
   visibility = [ ":preprocess_generated" ]
-  js_files = [
-    "ca_trust_edit_dialog.ts",
-    "certificate_delete_confirmation_dialog.ts",
-    "certificate_entry.ts",
-    "certificate_list.ts",
-    "certificate_manager.ts",
-    "certificate_password_decryption_dialog.ts",
-    "certificate_password_encryption_dialog.ts",
-    "certificate_shared_css.ts",
-    "certificate_subentry.ts",
-    "certificates_error_dialog.ts",
-  ]
+  in_files = css_files
+}
 
-  if (is_chromeos_ash) {
-    js_files += [
-      "certificate_provisioning_details_dialog.ts",
-      "certificate_provisioning_entry.ts",
-      "certificate_provisioning_list.ts",
-    ]
-  }
+html_to_wrapper("html_wrapper_files") {
+  in_files = html_files
 }
 
 preprocess_if_expr("preprocess_src") {
   visibility = [ ":build_ts" ]
-  in_folder = "./"
+  in_folder = "."
   out_folder = preprocess_folder_tmp
-  in_files = [
-    "certificate_manager_types.ts",
-    "certificates_browser_proxy.ts",
-  ]
-
-  if (is_chromeos_ash) {
-    in_files += [ "certificate_provisioning_browser_proxy.ts" ]
-  }
+  in_files = ts_files
 }
 
 preprocess_if_expr("preprocess_generated") {
   visibility = [ ":build_ts" ]
-  deps = [ ":web_components" ]
+  deps = [
+    ":css_wrapper_files",
+    ":html_wrapper_files",
+  ]
   in_folder = target_gen_dir
   out_folder = preprocess_folder_tmp
-  in_files = [
-    "ca_trust_edit_dialog.ts",
-    "certificate_delete_confirmation_dialog.ts",
-    "certificate_entry.ts",
-    "certificate_list.ts",
-    "certificate_manager.ts",
-    "certificate_password_decryption_dialog.ts",
-    "certificate_password_encryption_dialog.ts",
-    "certificates_error_dialog.ts",
-    "certificate_shared_css.ts",
-    "certificate_subentry.ts",
-  ]
-
-  if (is_chromeos_ash) {
-    in_files += [
-      "certificate_provisioning_details_dialog.ts",
-      "certificate_provisioning_entry.ts",
-      "certificate_provisioning_list.ts",
-    ]
-  }
+  in_files = html_wrapper_files + css_wrapper_files
 }
 
 generate_grd("build_grdp") {
   grd_prefix = "cr_components_certificate_manager"
   out_grd = "$target_gen_dir/resources.grdp"
-  deps = [ ":build_ts" ]
+  public_deps = [ ":build_ts" ]
   manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
   resource_path_prefix = "cr_components/certificate_manager"
 }
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/ca_trust_edit_dialog.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/ca_trust_edit_dialog.ts
index 78287ac7b71..ace147ede1e 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/ca_trust_edit_dialog.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/ca_trust_edit_dialog.ts
@@ -12,16 +12,17 @@ import '../../cr_elements/cr_button/cr_button.m.js';
 import '../../cr_elements/cr_checkbox/cr_checkbox.m.js';
 import '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import 'chrome://resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
-import './certificate_shared_css.js';
+import './certificate_shared.css.js';
 
 import {PaperSpinnerLiteElement} from 'chrome://resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrCheckboxElement} from '../../cr_elements/cr_checkbox/cr_checkbox.m.js';
 import {CrDialogElement} from '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 import {loadTimeData} from '../../js/load_time_data.m.js';
 
+import {getTemplate} from './ca_trust_edit_dialog.html.js';
 import {CaTrustInfo, CertificatesBrowserProxy, CertificatesBrowserProxyImpl, CertificateSubnode, NewCertificateSubNode} from './certificates_browser_proxy.js';
 
 export interface CaTrustEditDialogElement {
@@ -43,7 +44,7 @@ export class CaTrustEditDialogElement extends CaTrustEditDialogElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_delete_confirmation_dialog.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_delete_confirmation_dialog.ts
index fc8723f3e86..0c1868b4d79 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_delete_confirmation_dialog.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_delete_confirmation_dialog.ts
@@ -8,15 +8,16 @@
  */
 import '../../cr_elements/cr_button/cr_button.m.js';
 import '../../cr_elements/cr_dialog/cr_dialog.m.js';
-import './certificate_shared_css.js';
+import './certificate_shared.css.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrDialogElement} from '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import {assertNotReached} from '../../js/assert_ts.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 import {loadTimeData} from '../../js/load_time_data.m.js';
 
+import {getTemplate} from './certificate_delete_confirmation_dialog.html.js';
 import {CertificatesBrowserProxyImpl, CertificateSubnode, CertificateType} from './certificates_browser_proxy.js';
 
 export interface CertificateDeleteConfirmationDialogElement {
@@ -36,7 +37,7 @@ export class CertificateDeleteConfirmationDialogElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_entry.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_entry.ts
index 7250cc34028..ac619cc8ef8 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_entry.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_entry.ts
@@ -8,14 +8,15 @@
 import '../../cr_elements/cr_expand_button/cr_expand_button.m.js';
 import '../../cr_elements/policy/cr_policy_indicator.m.js';
 import 'chrome://resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classes.js';
-import './certificate_shared_css.js';
+import './certificate_shared.css.js';
 import './certificate_subentry.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrPolicyIndicatorType} from '../../cr_elements/policy/cr_policy_indicator_behavior.m.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 
+import {getTemplate} from './certificate_entry.html.js';
 import {CertificatesOrgGroup, CertificateType} from './certificates_browser_proxy.js';
 
 const CertificateEntryElementBase = I18nMixin(PolymerElement);
@@ -26,7 +27,7 @@ class CertificateEntryElement extends CertificateEntryElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_list.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_list.ts
index 59740944e5b..5ce51189323 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_list.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_list.ts
@@ -9,14 +9,15 @@
 import '../../cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classes.js';
 import './certificate_entry.js';
-import './certificate_shared_css.js';
+import './certificate_shared.css.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assertNotReached} from '../../js/assert_ts.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 import {loadTimeData} from '../../js/load_time_data.m.js';
 
+import {getTemplate} from './certificate_list.html.js';
 import {CertificateAction, CertificateActionEvent} from './certificate_manager_types.js';
 import {CertificatesBrowserProxyImpl, CertificatesError, CertificatesImportError, CertificatesOrgGroup, CertificateType, NewCertificateSubNode} from './certificates_browser_proxy.js';
 
@@ -37,7 +38,7 @@ export class CertificateListElement extends CertificateListElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_manager.gni b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_manager.gni
new file mode 100644
index 00000000000..3da673760c8
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_manager.gni
@@ -0,0 +1,58 @@
+# Copyright 2022 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("//build/config/chromeos/ui_mode.gni")
+
+# Files holding a Polymer element definition AND have an equivalent .html file.
+_web_component_files = [
+  "ca_trust_edit_dialog.ts",
+  "certificate_delete_confirmation_dialog.ts",
+  "certificate_entry.ts",
+  "certificate_list.ts",
+  "certificate_manager.ts",
+  "certificate_password_decryption_dialog.ts",
+  "certificate_password_encryption_dialog.ts",
+  "certificate_subentry.ts",
+  "certificates_error_dialog.ts",
+]
+
+if (is_chromeos_ash) {
+  _web_component_files += [
+    "certificate_provisioning_details_dialog.ts",
+    "certificate_provisioning_entry.ts",
+    "certificate_provisioning_list.ts",
+  ]
+}
+
+# Files that are passed as input to html_to_wrapper().
+html_files = []
+foreach(f, _web_component_files) {
+  html_files += [ string_replace(f, ".ts", ".html") ]
+}
+
+# Files that are generated by html_to_wrapper().
+html_wrapper_files = []
+foreach(f, html_files) {
+  html_wrapper_files += [ f + ".ts" ]
+}
+
+_non_web_component_files = [
+  "certificate_manager_types.ts",
+  "certificates_browser_proxy.ts",
+]
+
+if (is_chromeos_ash) {
+  _non_web_component_files += [ "certificate_provisioning_browser_proxy.ts" ]
+}
+
+ts_files = _web_component_files + _non_web_component_files
+
+# Files that are passed as input to css_to_wrapper().
+css_files = [ "certificate_shared.css" ]
+
+# Files that are generated by css_to_wrapper().
+css_wrapper_files = []
+foreach(f, css_files) {
+  css_wrapper_files += [ f + ".ts" ]
+}
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_manager.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_manager.ts
index 9cb5f8a7c21..bd8b81205d6 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_manager.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_manager.ts
@@ -16,15 +16,17 @@ import './certificate_password_encryption_dialog.js';
 import './certificates_error_dialog.js';
 // <if expr="chromeos_ash">
 import './certificate_provisioning_list.js';
+
 // </if>
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {focusWithoutInk} from '../../js/cr/ui/focus_without_ink.m.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 import {loadTimeData} from '../../js/load_time_data.m.js';
 import {WebUIListenerMixin} from '../../js/web_ui_listener_mixin.js';
 
+import {getTemplate} from './certificate_manager.html.js';
 import {CertificateAction, CertificateActionEvent} from './certificate_manager_types.js';
 import {CertificatesBrowserProxyImpl, CertificatesError, CertificatesImportError, CertificatesOrgGroup, CertificateSubnode, CertificateType, NewCertificateSubNode} from './certificates_browser_proxy.js';
 
@@ -36,6 +38,10 @@ export class CertificateManagerElement extends CertificateManagerElementBase {
     return 'certificate-manager';
   }
 
+  static get template() {
+    return getTemplate();
+  }
+
   static get properties() {
     return {
       selected: {
@@ -271,10 +277,6 @@ export class CertificateManagerElement extends CertificateManagerElementBase {
       loadTimeData.getString('certificateManagerOthers'),
     ];
   }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
 }
 
 declare global {
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_decryption_dialog.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_decryption_dialog.ts
index c42db596770..0ed92343124 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_decryption_dialog.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_decryption_dialog.ts
@@ -9,14 +9,15 @@
 import '../../cr_elements/cr_button/cr_button.m.js';
 import '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import '../../cr_elements/cr_input/cr_input.m.js';
-import './certificate_shared_css.js';
+import './certificate_shared.css.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrButtonElement} from '../../cr_elements/cr_button/cr_button.m.js';
 import {CrDialogElement} from '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 
+import {getTemplate} from './certificate_password_decryption_dialog.html.js';
 import {CertificatesBrowserProxyImpl} from './certificates_browser_proxy.js';
 
 export interface CertificatePasswordDecryptionDialogElement {
@@ -36,7 +37,7 @@ export class CertificatePasswordDecryptionDialogElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_encryption_dialog.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_encryption_dialog.ts
index bf89a12a86d..b1d44b3aaf5 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_encryption_dialog.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_password_encryption_dialog.ts
@@ -10,14 +10,15 @@ import '../../cr_elements/cr_button/cr_button.m.js';
 import '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import '../../cr_elements/cr_input/cr_input.m.js';
 import '../../cr_elements/shared_vars_css.m.js';
-import './certificate_shared_css.js';
+import './certificate_shared.css.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrButtonElement} from '../../cr_elements/cr_button/cr_button.m.js';
 import {CrDialogElement} from '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 
+import {getTemplate} from './certificate_password_encryption_dialog.html.js';
 import {CertificatesBrowserProxyImpl} from './certificates_browser_proxy.js';
 
 export interface CertificatePasswordEncryptionDialogElement {
@@ -37,7 +38,7 @@ export class CertificatePasswordEncryptionDialogElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_browser_proxy.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_browser_proxy.ts
index 6e9ed44600f..2ca9840c3ac 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_browser_proxy.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_browser_proxy.ts
@@ -19,6 +19,7 @@ export type CertificateProvisioningProcess = {
   certProfileId: string,
   certProfileName: string,
   isDeviceWide: boolean,
+  lastUnsuccessfulMessage: string,
   status: string,
   stateId: number,
   timeSinceLastUpdate: string,
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_details_dialog.html b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_details_dialog.html
index 6aae708405c..cd049d91678 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_details_dialog.html
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_details_dialog.html
@@ -65,6 +65,14 @@
         [[model.timeSinceLastUpdate]]
       </div>
     </div>
+    <div class="two-line" hidden$="[[shouldHideLastFailedStatus_(model.lastUnsuccessfulMessage)]]">
+      <div class="label" aria-describedby="lastFailedStatus">
+        [[i18n('certificateProvisioningLastUnsuccessfulStatus')]]
+      </div>
+      <div class="value" id="lastFailedStatus" aria-hidden="true">
+        [[model.lastUnsuccessfulMessage]]
+      </div>
+    </div>
     <hr></hr>
     <cr-expand-button expanded="{{advancedExpanded_}}"
         aria-expanded$="[[boolToString_(advancedOpened)]]">
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_details_dialog.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_details_dialog.ts
index 53cf6024fa5..cb697a9deb7 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_details_dialog.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_details_dialog.ts
@@ -10,12 +10,13 @@ import '../../cr_elements/cr_expand_button/cr_expand_button.m.js';
 import '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import 'chrome://resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classes.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrDialogElement} from '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 
 import {CertificateProvisioningBrowserProxyImpl, CertificateProvisioningProcess} from './certificate_provisioning_browser_proxy.js';
+import {getTemplate} from './certificate_provisioning_details_dialog.html.js';
 
 export interface CertificateProvisioningDetailsDialogElement {
   $: {
@@ -34,7 +35,7 @@ export class CertificateProvisioningDetailsDialogElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -57,6 +58,10 @@ export class CertificateProvisioningDetailsDialogElement extends
             this.model.certProfileId, this.model.isDeviceWide);
   }
 
+  private shouldHideLastFailedStatus_(): boolean {
+    return this.model.lastUnsuccessfulMessage.length === 0;
+  }
+
   private arrowState_(opened: boolean): string {
     return opened ? 'cr:arrow-drop-up' : 'cr:arrow-drop-down';
   }
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_entry.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_entry.ts
index 59fed706ee3..6319f4de77e 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_entry.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_entry.ts
@@ -10,9 +10,9 @@ import '../../cr_elements/cr_action_menu/cr_action_menu.js';
 import '../../cr_elements/cr_icon_button/cr_icon_button.m.js';
 import '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
 import 'chrome://resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classes.js';
-import './certificate_shared_css.js';
+import './certificate_shared.css.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrActionMenuElement} from '../../cr_elements/cr_action_menu/cr_action_menu.js';
 import {CrLazyRenderElement} from '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
@@ -20,6 +20,7 @@ import {I18nMixin} from '../../js/i18n_mixin.js';
 
 import {CertificateProvisioningViewDetailsActionEvent} from './certificate_manager_types.js';
 import {CertificateProvisioningProcess} from './certificate_provisioning_browser_proxy.js';
+import {getTemplate} from './certificate_provisioning_entry.html.js';
 
 export interface CertificateProvisioningEntryElement {
   $: {
@@ -37,7 +38,7 @@ export class CertificateProvisioningEntryElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_list.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_list.ts
index 713225aae5c..6044a0b212c 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_list.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_provisioning_list.ts
@@ -11,7 +11,7 @@ import 'chrome://resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classe
 import './certificate_provisioning_details_dialog.js';
 import './certificate_provisioning_entry.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {focusWithoutInk} from '../../js/cr/ui/focus_without_ink.m.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
@@ -19,6 +19,7 @@ import {WebUIListenerMixin} from '../../js/web_ui_listener_mixin.js';
 
 import {CertificateProvisioningViewDetailsActionEvent} from './certificate_manager_types.js';
 import {CertificateProvisioningBrowserProxyImpl, CertificateProvisioningProcess} from './certificate_provisioning_browser_proxy.js';
+import {getTemplate} from './certificate_provisioning_list.html.js';
 
 const CertificateProvisioningListElementBase =
     WebUIListenerMixin(I18nMixin(PolymerElement));
@@ -30,7 +31,7 @@ export class CertificateProvisioningListElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -112,6 +113,8 @@ export class CertificateProvisioningListElement extends
           this.previousAnchor_ = detail.anchor;
           this.showProvisioningDetailsDialog_ = true;
           event.stopPropagation();
+          CertificateProvisioningBrowserProxyImpl.getInstance()
+              .refreshCertificateProvisioningProcesses();
         });
   }
 
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_shared.css b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_shared.css
new file mode 100644
index 00000000000..ac8c65d02b8
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_shared.css
@@ -0,0 +1,35 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=../../cr_elements/shared_style_css.m.js
+ * #include=cr-shared-style
+ * #css_wrapper_metadata_end */
+
+/* .list-frame and .list-item match the styling in settings_shared_css. */
+.list-frame {
+  align-items: center;
+  display: block;
+  padding-inline-end: 20px;
+  padding-inline-start: 60px;
+}
+
+.list-item {
+  align-items: center;
+  display: flex;
+  min-height: 48px;
+}
+
+.list-item.underbar {
+  border-bottom: var(--cr-separator-line);
+}
+
+.list-item.selected {
+  font-weight: 500;
+}
+
+.list-item > .start {
+  flex: 1;
+}
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.html b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.html
deleted file mode 100644
index 015350fd677..00000000000
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-  <template>
-    <style include="cr-shared-style">
-      /* .list-frame and .list-item match the styling in settings_shared_css. */
-      .list-frame {
-        align-items: center;
-        display: block;
-        padding-inline-end: 20px;
-        padding-inline-start: 60px;
-      }
-
-      .list-item {
-        align-items: center;
-        display: flex;
-        min-height: 48px;
-      }
-
-      .list-item.underbar {
-        border-bottom: var(--cr-separator-line);
-      }
-
-      .list-item.selected {
-        font-weight: 500;
-      }
-
-      .list-item > .start {
-        flex: 1;
-      }
-    </style>
-  </template>
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.ts
deleted file mode 100644
index 0d1cd58b314..00000000000
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_shared_css.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// 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 '../../cr_elements/shared_style_css.m.js';
-const template = document.createElement('template');
-template.innerHTML = `
-<dom-module id="certificate-shared">{__html_template__}</dom-module>
-`;
-document.body.appendChild(template.content.cloneNode(true));
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_subentry.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_subentry.ts
index 03f073a8d4a..95a7ed07ce6 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_subentry.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificate_subentry.ts
@@ -11,9 +11,9 @@ import '../../cr_elements/cr_icon_button/cr_icon_button.m.js';
 import '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
 import '../../cr_elements/policy/cr_policy_indicator.m.js';
 import '../../cr_elements/icons.m.js';
-import './certificate_shared_css.js';
+import './certificate_shared.css.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrActionMenuElement} from '../../cr_elements/cr_action_menu/cr_action_menu.js';
 import {CrLazyRenderElement} from '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
@@ -21,6 +21,7 @@ import {CrPolicyIndicatorType} from '../../cr_elements/policy/cr_policy_indicato
 import {I18nMixin} from '../../js/i18n_mixin.js';
 
 import {CertificateAction, CertificateActionEvent} from './certificate_manager_types.js';
+import {getTemplate} from './certificate_subentry.html.js';
 import {CertificatesBrowserProxy, CertificatesBrowserProxyImpl, CertificatesError, CertificateSubnode, CertificateType} from './certificates_browser_proxy.js';
 
 export interface CertificateSubentryElement {
@@ -38,7 +39,7 @@ export class CertificateSubentryElement extends CertificateSubentryElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/certificate_manager/certificates_error_dialog.ts b/chromium/ui/webui/resources/cr_components/certificate_manager/certificates_error_dialog.ts
index f53069a6b06..ae6d7d548c9 100644
--- a/chromium/ui/webui/resources/cr_components/certificate_manager/certificates_error_dialog.ts
+++ b/chromium/ui/webui/resources/cr_components/certificate_manager/certificates_error_dialog.ts
@@ -8,15 +8,16 @@
  */
 import '../../cr_elements/cr_button/cr_button.m.js';
 import '../../cr_elements/cr_dialog/cr_dialog.m.js';
-import './certificate_shared_css.js';
+import './certificate_shared.css.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrDialogElement} from '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 import {loadTimeData} from '../../js/load_time_data.m.js';
 
 import {CertificatesError, CertificatesImportError} from './certificates_browser_proxy.js';
+import {getTemplate} from './certificates_error_dialog.html.js';
 
 interface CertificatesErrorDialogElement {
   $: {
@@ -33,7 +34,7 @@ class CertificatesErrorDialogElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/BUILD.gn b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/BUILD.gn
index a0a82921c34..4032cb62755 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/BUILD.gn
@@ -9,6 +9,8 @@ assert(is_chromeos, "Bluetooth dialog is Chrome OS only.")
 
 js_type_check("closure_compile_module") {
   is_polymer3 = true
+  closure_flags = default_closure_args + mojom_js_args
+
   deps = [
     ":bluetooth_base_page",
     ":bluetooth_battery_icon_percentage",
@@ -39,6 +41,10 @@ js_library("bluetooth_metrics_utils") {
 }
 
 js_library("bluetooth_utils") {
+  deps = [
+    ":bluetooth_types",
+    "//chromeos/services/bluetooth_config/public/mojom:mojom_webui_js",
+  ]
 }
 
 js_library("bluetooth_icons") {
@@ -50,7 +56,7 @@ js_library("bluetooth_types") {
 js_library("bluetooth_icon") {
   deps = [
     ":bluetooth_icons",
-    "//chromeos/services/bluetooth_config/public/mojom:mojom_js_library_for_compile",
+    "//chromeos/services/bluetooth_config/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
@@ -59,7 +65,7 @@ js_library("bluetooth_pairing_device_item") {
   deps = [
     ":bluetooth_icon",
     ":bluetooth_types",
-    "//chromeos/services/bluetooth_config/public/mojom:mojom_js_library_for_compile",
+    "//chromeos/services/bluetooth_config/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
@@ -87,6 +93,7 @@ js_library("bluetooth_pairing_device_selection_page") {
     ":bluetooth_base_page",
     ":bluetooth_pairing_device_item",
     ":bluetooth_types",
+    "//chromeos/services/bluetooth_config/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/iron-list:iron-list",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements:cr_scrollable_behavior.m",
@@ -98,6 +105,7 @@ js_library("bluetooth_pairing_device_selection_page") {
 js_library("bluetooth_pairing_request_code_page") {
   deps = [
     ":bluetooth_base_page",
+    "//chromeos/services/bluetooth_config/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_input:cr_input.m",
   ]
@@ -114,6 +122,7 @@ js_library("bluetooth_pairing_enter_code_page") {
   deps = [
     ":bluetooth_base_page",
     ":bluetooth_types",
+    "//chromeos/services/bluetooth_config/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
 }
@@ -124,7 +133,7 @@ js_library("bluetooth_pairing_ui") {
     ":bluetooth_pairing_device_selection_page",
     ":bluetooth_pairing_request_code_page",
     ":cros_bluetooth_config",
-    "//chromeos/services/bluetooth_config/public/mojom:mojom_js_library_for_compile",
+    "//chromeos/services/bluetooth_config/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:assert.m",
   ]
@@ -141,6 +150,7 @@ js_library("bluetooth_base_page") {
 
 js_library("bluetooth_battery_icon_percentage") {
   deps = [
+    "//chromeos/services/bluetooth_config/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_components/chromeos/bluetooth:bluetooth_utils",
     "//ui/webui/resources/js:i18n_behavior.m",
@@ -149,6 +159,7 @@ js_library("bluetooth_battery_icon_percentage") {
 
 js_library("bluetooth_device_battery_info") {
   deps = [
+    "//chromeos/services/bluetooth_config/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_components/chromeos/bluetooth:bluetooth_utils",
     "//ui/webui/resources/js:i18n_behavior.m",
@@ -157,7 +168,7 @@ js_library("bluetooth_device_battery_info") {
 }
 
 js_library("cros_bluetooth_config") {
-  deps = [ "//chromeos/services/bluetooth_config/public/mojom:mojom_js_library_for_compile" ]
+  deps = [ "//chromeos/services/bluetooth_config/public/mojom:mojom_webui_js" ]
 }
 
 js_library("bluetooth_spinner_page") {
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_base_page.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_base_page.d.ts
new file mode 100644
index 00000000000..a0e627fbaf3
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_base_page.d.ts
@@ -0,0 +1,13 @@
+// Copyright 2022 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 {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class SettingsBluetoothBasePageElement extends PolymerElement {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bluetooth-base-page': SettingsBluetoothBasePageElement;
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_battery_icon_percentage.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_battery_icon_percentage.d.ts
new file mode 100644
index 00000000000..ba54a953060
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_battery_icon_percentage.d.ts
@@ -0,0 +1,13 @@
+// Copyright 2022 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 {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class BluetoothBatteryIconPercentageElement extends PolymerElement {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bluetooth-battery-icon-percentage': BluetoothBatteryIconPercentageElement;
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_battery_icon_percentage.js b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_battery_icon_percentage.js
index 703d39efdbb..6003ccf2f5d 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_battery_icon_percentage.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_battery_icon_percentage.js
@@ -15,9 +15,10 @@ import './bluetooth_icons.js';
 import {I18nBehavior, I18nBehaviorInterface} from '//resources/js/i18n_behavior.m.js';
 import {html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {assert} from 'chrome://resources/js/assert.m.js';
+import {BluetoothDeviceProperties} from 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
 
 import {BatteryType} from './bluetooth_types.js';
-import {getBatteryPercentage, hasAnyDetailedBatteryInfo} from './bluetooth_utils.js';
+import {getBatteryPercentage} from './bluetooth_utils.js';
 
 /**
  * The threshold percentage where any battery percentage lower is considered
@@ -59,7 +60,7 @@ export class BluetoothBatteryIconPercentageElement extends
   static get properties() {
     return {
       /**
-       * @type {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+       * @type {!BluetoothDeviceProperties}
        */
       device: {
         type: Object,
@@ -99,7 +100,7 @@ export class BluetoothBatteryIconPercentageElement extends
   }
 
   /**
-   * @param {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+   * @param {!BluetoothDeviceProperties}
    *     device
    * @param {!BatteryType} batteryType
    * @return {boolean}
@@ -131,7 +132,7 @@ export class BluetoothBatteryIconPercentageElement extends
   }
 
   /**
-   * @param {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+   * @param {!BluetoothDeviceProperties}
    *     device
    * @param {!BatteryType} batteryType
    * @return {string}
@@ -171,7 +172,7 @@ export class BluetoothBatteryIconPercentageElement extends
   }
 
   /**
-   * @param {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+   * @param {!BluetoothDeviceProperties}
    *     device
    * @param {!BatteryType} batteryType
    * @return {string}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_device_battery_info.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_device_battery_info.d.ts
new file mode 100644
index 00000000000..14b42d4759c
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_device_battery_info.d.ts
@@ -0,0 +1,13 @@
+// Copyright 2022 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 {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class BluetoothDeviceBatteryInfoElement extends PolymerElement {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bluetooth-device-battery-info': BluetoothDeviceBatteryInfoElement;
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_device_battery_info.js b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_device_battery_info.js
index 63117e2d0a9..47697f849c2 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_device_battery_info.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_device_battery_info.js
@@ -11,6 +11,7 @@ import '../../../cr_elements/shared_style_css.m.js';
 import './bluetooth_battery_icon_percentage.js';
 
 import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {BluetoothDeviceProperties} from 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
 
 import {BatteryType} from './bluetooth_types.js';
 import {getBatteryPercentage, hasAnyDetailedBatteryInfo} from './bluetooth_utils.js';
@@ -28,7 +29,7 @@ export class BluetoothDeviceBatteryInfoElement extends PolymerElement {
   static get properties() {
     return {
       /**
-       * @type {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+       * @type {!BluetoothDeviceProperties}
        */
       device: {
         type: Object,
@@ -55,7 +56,7 @@ export class BluetoothDeviceBatteryInfoElement extends PolymerElement {
   }
 
   /**
-   * @param {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+   * @param {!BluetoothDeviceProperties}
    *     device
    * @return {boolean}
    * @private
@@ -65,7 +66,7 @@ export class BluetoothDeviceBatteryInfoElement extends PolymerElement {
   }
 
   /**
-   * @param {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+   * @param {!BluetoothDeviceProperties}
    *     device
    * @param {!BatteryType} batteryType
    * @return {boolean}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_icon.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_icon.d.ts
new file mode 100644
index 00000000000..b6a9bbf7efc
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_icon.d.ts
@@ -0,0 +1,13 @@
+// Copyright 2022 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 {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class SettingsBluetoothIconElement extends PolymerElement {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bluetooth-icon': SettingsBluetoothIconElement;
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_icon.js b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_icon.js
index 66b69a54834..996522709ba 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_icon.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_icon.js
@@ -10,6 +10,8 @@
 import './bluetooth_icons.js';
 
 import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {BluetoothDeviceProperties, DeviceType} from 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
+
 import {hasDefaultImage} from './bluetooth_utils.js';
 
 /** @polymer */
@@ -25,7 +27,7 @@ export class SettingsBluetoothIconElement extends PolymerElement {
   static get properties() {
     return {
       /**
-       * @type {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+       * @type {!BluetoothDeviceProperties}
        */
       device: {
         type: Object,
@@ -42,24 +44,23 @@ export class SettingsBluetoothIconElement extends PolymerElement {
       return 'default';
     }
 
-    const deviceType = chromeos.bluetoothConfig.mojom.DeviceType;
     switch (this.device.deviceType) {
-      case deviceType.kComputer:
+      case DeviceType.kComputer:
         return 'computer';
-      case deviceType.kPhone:
+      case DeviceType.kPhone:
         return 'phone';
-      case deviceType.kHeadset:
+      case DeviceType.kHeadset:
         return 'headset';
-      case deviceType.kVideoCamera:
+      case DeviceType.kVideoCamera:
         return 'video-camera';
-      case deviceType.kGameController:
+      case DeviceType.kGameController:
         return 'game-controller';
-      case deviceType.kKeyboard:
-      case deviceType.kKeyboardMouseCombo:
+      case DeviceType.kKeyboard:
+      case DeviceType.kKeyboardMouseCombo:
         return 'keyboard';
-      case deviceType.kMouse:
+      case DeviceType.kMouse:
         return 'mouse';
-      case deviceType.kTablet:
+      case DeviceType.kTablet:
         return 'tablet';
       default:
         return 'default';
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_item.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_item.d.ts
new file mode 100644
index 00000000000..5556f051b23
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_item.d.ts
@@ -0,0 +1,13 @@
+// Copyright 2022 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 {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class SettingsBluetoothPairingDeviceItemElement extends PolymerElement {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bluetooth-pairing-device-item': SettingsBluetoothPairingDeviceItemElement;
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_item.js b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_item.js
index d674c066d42..83abe3c02e1 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_item.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_item.js
@@ -13,7 +13,10 @@ import './bluetooth_icon.js';
 import {I18nBehavior, I18nBehaviorInterface} from '//resources/js/i18n_behavior.m.js';
 import {html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {FocusRowBehavior} from 'chrome://resources/js/cr/ui/focus_row_behavior.m.js';
+import {BluetoothDeviceProperties, DeviceType} from 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
+
 import {assertNotReached} from '../../../js/assert.m.js';
+
 import {DeviceItemState} from './bluetooth_types.js';
 import {mojoString16ToString} from './bluetooth_utils.js';
 
@@ -39,7 +42,7 @@ export class SettingsBluetoothPairingDeviceItemElement extends
   static get properties() {
     return {
       /**
-       * @type {?chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+       * @type {?BluetoothDeviceProperties}
        */
       device: Object,
 
@@ -170,27 +173,26 @@ export class SettingsBluetoothPairingDeviceItemElement extends
    * @private
    */
   getA11yDeviceTypeTextName_() {
-    const deviceType = chromeos.bluetoothConfig.mojom.DeviceType;
     switch (this.device.deviceType) {
-      case deviceType.kUnknown:
+      case DeviceType.kUnknown:
         return 'bluetoothA11yDeviceTypeUnknown';
-      case deviceType.kComputer:
+      case DeviceType.kComputer:
         return 'bluetoothA11yDeviceTypeComputer';
-      case deviceType.kPhone:
+      case DeviceType.kPhone:
         return 'bluetoothA11yDeviceTypePhone';
-      case deviceType.kHeadset:
+      case DeviceType.kHeadset:
         return 'bluetoothA11yDeviceTypeHeadset';
-      case deviceType.kVideoCamera:
+      case DeviceType.kVideoCamera:
         return 'bluetoothA11yDeviceTypeVideoCamera';
-      case deviceType.kGameController:
+      case DeviceType.kGameController:
         return 'bluetoothA11yDeviceTypeGameController';
-      case deviceType.kKeyboard:
+      case DeviceType.kKeyboard:
         return 'bluetoothA11yDeviceTypeKeyboard';
-      case deviceType.kKeyboardMouseCombo:
+      case DeviceType.kKeyboardMouseCombo:
         return 'bluetoothA11yDeviceTypeKeyboardMouseCombo';
-      case deviceType.kMouse:
+      case DeviceType.kMouse:
         return 'bluetoothA11yDeviceTypeMouse';
-      case deviceType.kTablet:
+      case DeviceType.kTablet:
         return 'bluetoothA11yDeviceTypeTablet';
       default:
         assertNotReached();
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_selection_page.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_selection_page.d.ts
new file mode 100644
index 00000000000..163d20fa465
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_selection_page.d.ts
@@ -0,0 +1,15 @@
+// Copyright 2022 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 {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class SettingsBluetoothPairingDeviceSelectionPageElementBase extends
+    PolymerElement {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bluetooth-pairing-device-selection-page':
+        SettingsBluetoothPairingDeviceSelectionPageElementBase;
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_selection_page.js b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_selection_page.js
index 29c70f51ffd..9f64671e55c 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_selection_page.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_device_selection_page.js
@@ -16,6 +16,7 @@ import '../../localized_link/localized_link.js';
 import {CrScrollableBehavior, CrScrollableBehaviorInterface} from '//resources/cr_elements/cr_scrollable_behavior.m.js';
 import {I18nBehavior, I18nBehaviorInterface} from '//resources/js/i18n_behavior.m.js';
 import {afterNextRender, html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {BluetoothDeviceProperties} from 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
 
 import {ButtonBarState, ButtonState, DeviceItemState} from './bluetooth_types.js';
 
@@ -42,7 +43,7 @@ export class SettingsBluetoothPairingDeviceSelectionPageElement extends
   static get properties() {
     return {
       /**
-       * @type {!Array<!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties>}
+       * @type {!Array<!BluetoothDeviceProperties>}
        */
       devices: {
         type: Array,
@@ -60,7 +61,7 @@ export class SettingsBluetoothPairingDeviceSelectionPageElement extends
       },
 
       /**
-       * @type {?chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+       * @type {?BluetoothDeviceProperties}
        */
       devicePendingPairing: {
         type: Object,
@@ -112,7 +113,7 @@ export class SettingsBluetoothPairingDeviceSelectionPageElement extends
 
     /**
      * The last device that was selected for pairing.
-     * @private {?chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+     * @private {?BluetoothDeviceProperties}
      */
     this.lastSelectedDevice_ = null;
   }
@@ -203,7 +204,7 @@ export class SettingsBluetoothPairingDeviceSelectionPageElement extends
   }
 
   /**
-   * @param {?chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties} device
+   * @param {?BluetoothDeviceProperties} device
    * @return {!DeviceItemState}
    * @private
    */
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_enter_code_page.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_enter_code_page.d.ts
new file mode 100644
index 00000000000..ce29c7402ea
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_enter_code_page.d.ts
@@ -0,0 +1,14 @@
+// Copyright 2022 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 {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class SettingsBluetoothPairingEnterCodeElement extends PolymerElement {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bluetooth-pairing-enter-code-page':
+        SettingsBluetoothPairingEnterCodeElement;
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_enter_code_page.js b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_enter_code_page.js
index aa62d655182..041af85dae2 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_enter_code_page.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_enter_code_page.js
@@ -15,8 +15,9 @@ import '//resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classes.js';
 import {I18nBehavior, I18nBehaviorInterface} from '//resources/js/i18n_behavior.m.js';
 import {html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {assert} from 'chrome://resources/js/assert.m.js';
+import {BluetoothDeviceProperties} from 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
 
-import {ButtonBarState, ButtonState, PairingAuthType} from './bluetooth_types.js';
+import {ButtonBarState, ButtonState} from './bluetooth_types.js';
 import {mojoString16ToString} from './bluetooth_utils.js';
 
 // Pairing passkey can be a maximum of 16 characters while pairing code a max
@@ -45,7 +46,7 @@ export class SettingsBluetoothPairingEnterCodeElement extends
   static get properties() {
     return {
       /**
-       * @type {?chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+       * @type {?BluetoothDeviceProperties}
        */
       device: {
         type: Object,
@@ -163,4 +164,4 @@ export class SettingsBluetoothPairingEnterCodeElement extends
 
 customElements.define(
     SettingsBluetoothPairingEnterCodeElement.is,
-    SettingsBluetoothPairingEnterCodeElement);
-\ No newline at end of file
+    SettingsBluetoothPairingEnterCodeElement);
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_request_code_page.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_request_code_page.d.ts
new file mode 100644
index 00000000000..8d069f2b425
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_request_code_page.d.ts
@@ -0,0 +1,14 @@
+// Copyright 2022 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 {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class SettingsBluetoothRequestCodePageElement extends PolymerElement {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bluetooth-pairing-request-code-page':
+        SettingsBluetoothRequestCodePageElement;
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_request_code_page.js b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_request_code_page.js
index 26789f68ea6..fe31fc7a69e 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_request_code_page.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_request_code_page.js
@@ -14,11 +14,11 @@ import '../../../cr_elements/cr_input/cr_input.m.js';
 
 import {I18nBehavior, I18nBehaviorInterface} from '//resources/js/i18n_behavior.m.js';
 import {afterNextRender, html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {BluetoothDeviceProperties} from 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
 
 import {ButtonBarState, ButtonState, PairingAuthType} from './bluetooth_types.js';
 import {mojoString16ToString} from './bluetooth_utils.js';
 
-
 /**
  * Maximum length of a PIN code, it can range from 1 to 6 digits.
  * @type {number}
@@ -53,7 +53,7 @@ export class SettingsBluetoothRequestCodePageElement extends
   static get properties() {
     return {
       /**
-       * @type {?chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+       * @type {?BluetoothDeviceProperties}
        */
       device: {
         type: Object,
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_ui.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_ui.d.ts
new file mode 100644
index 00000000000..91d4f5fd88c
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_ui.d.ts
@@ -0,0 +1,13 @@
+// Copyright 2022 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 {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+export class SettingsBluetoothPairingUiElement extends PolymerElement {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bluetooth-pairing-ui': SettingsBluetoothPairingUiElement;
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_ui.js b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_ui.js
index 572f67e3dce..b212670cd20 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_ui.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_pairing_ui.js
@@ -15,24 +15,26 @@ import './bluetooth_pairing_confirm_code_page.js';
 import './bluetooth_spinner_page.js';
 
 import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {BluetoothDeviceProperties, BluetoothDiscoveryDelegateInterface, BluetoothDiscoveryDelegateReceiver, BluetoothSystemState, DevicePairingDelegateInterface, DevicePairingDelegateReceiver, DevicePairingHandlerInterface, KeyEnteredHandlerInterface, KeyEnteredHandlerPendingReceiver, KeyEnteredHandlerReceiver, PairingResult, SystemPropertiesObserverInterface, SystemPropertiesObserverReceiver} from 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
+
 import {assert, assertNotReached} from '../../../js/assert.m.js';
+
 import {PairingAuthType} from './bluetooth_types.js';
 import {getBluetoothConfig} from './cros_bluetooth_config.js';
 
-/** @implements {chromeos.bluetoothConfig.mojom.KeyEnteredHandlerInterface} */
+/** @implements {KeyEnteredHandlerInterface} */
 class KeyEnteredHandler {
   /**
    * @param {!SettingsBluetoothPairingUiElement} page
-   * @param {!chromeos.bluetoothConfig.mojom.KeyEnteredHandlerPendingReceiver}
+   * @param {!KeyEnteredHandlerPendingReceiver}
    *     keyEnteredHandlerReceiver
    */
   constructor(page, keyEnteredHandlerReceiver) {
     /** @private {!SettingsBluetoothPairingUiElement} */
     this.page_ = page;
 
-    /** @private {!chromeos.bluetoothConfig.mojom.KeyEnteredHandlerReceiver} */
-    this.keyEnteredHandlerReceiver_ =
-        new chromeos.bluetoothConfig.mojom.KeyEnteredHandlerReceiver(this);
+    /** @private {!KeyEnteredHandlerReceiver} */
+    this.keyEnteredHandlerReceiver_ = new KeyEnteredHandlerReceiver(this);
     this.keyEnteredHandlerReceiver_.$.bindHandle(
         keyEnteredHandlerReceiver.handle);
   }
@@ -73,10 +75,10 @@ let RequestCodeCallback;
 let ConfirmCodeCallback;
 
 /**
- * @implements {chromeos.bluetoothConfig.mojom.SystemPropertiesObserverInterface}
- * @implements {chromeos.bluetoothConfig.mojom.BluetoothDiscoveryDelegateInterface}
- * @implements {chromeos.bluetoothConfig.mojom.DevicePairingDelegateInterface}
- * @implements {chromeos.bluetoothConfig.mojom.KeyEnteredHandlerInterface}
+ * @implements {SystemPropertiesObserverInterface}
+ * @implements {BluetoothDiscoveryDelegateInterface}
+ * @implements {DevicePairingDelegateInterface}
+ * @implements {KeyEnteredHandlerInterface}
  * @polymer
  */
 export class SettingsBluetoothPairingUiElement extends PolymerElement {
@@ -124,7 +126,7 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
       },
 
       /**
-       * @private {Array<!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties>}
+       * @private {Array<!BluetoothDeviceProperties>}
        */
       discoveredDevices_: {
         type: Array,
@@ -134,7 +136,7 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
       /**
        * This can be null if no pairing attempt was started or a pairing attempt
        * was cancelled by user.
-       * @private {?chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+       * @private {?BluetoothDeviceProperties}
        */
       devicePendingPairing_: {
         type: Object,
@@ -188,38 +190,37 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
   constructor() {
     super();
     /**
-     * @private {!chromeos.bluetoothConfig.mojom.SystemPropertiesObserverReceiver}
+     * @private {!SystemPropertiesObserverReceiver}
      */
     this.systemPropertiesObserverReceiver_ =
-        new chromeos.bluetoothConfig.mojom.SystemPropertiesObserverReceiver(
+        new SystemPropertiesObserverReceiver(
             /**
-             * @type {!chromeos.bluetoothConfig.mojom.SystemPropertiesObserverInterface}
+             * @type {!SystemPropertiesObserverInterface}
              */
             (this));
 
     /**
-     * @private {!chromeos.bluetoothConfig.mojom.BluetoothDiscoveryDelegateReceiver}
+     * @private {!BluetoothDiscoveryDelegateReceiver}
      */
     this.bluetoothDiscoveryDelegateReceiver_ =
-        new chromeos.bluetoothConfig.mojom.BluetoothDiscoveryDelegateReceiver(
-            this);
+        new BluetoothDiscoveryDelegateReceiver(this);
 
     /**
-     * @private {?chromeos.bluetoothConfig.mojom.DevicePairingHandlerInterface}
+     * @private {?DevicePairingHandlerInterface}
      */
     this.devicePairingHandler_;
 
     /**
      * The device to be paired with after the current pairDevice_() request has
      * finished.
-     * @private {?chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
+     * @private {?BluetoothDeviceProperties}
      */
     this.queuedDevicePendingPairing_;
 
     /**
      * The Mojo receiver of the current ongoing pairing. If null indicates no
      * pairing is occurring.
-     * @private {?chromeos.bluetoothConfig.mojom.DevicePairingDelegateReceiver}
+     * @private {?DevicePairingDelegateReceiver}
      */
     this.pairingDelegateReceiver_ = null;
 
@@ -241,8 +242,6 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
 
   ready() {
     super.ready();
-    getBluetoothConfig().observeSystemProperties(
-        this.systemPropertiesObserverReceiver_.$.bindNewPipeAndPassRemote());
 
     // If there's a specific device to pair with, immediately go to the spinner
     // page.
@@ -251,19 +250,35 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
     }
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+
+    getBluetoothConfig().observeSystemProperties(
+        this.systemPropertiesObserverReceiver_.$.bindNewPipeAndPassRemote());
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
 
+    if (this.systemPropertiesObserverReceiver_) {
+      this.systemPropertiesObserverReceiver_.$.close();
+    }
     if (this.bluetoothDiscoveryDelegateReceiver_) {
       this.bluetoothDiscoveryDelegateReceiver_.$.close();
     }
+    if (this.pairingDelegateReceiver_) {
+      this.pairingDelegateReceiver_.$.close();
+    }
+    if (this.keyEnteredReceiver_) {
+      this.keyEnteredReceiver_.close();
+    }
   }
 
   /** @override */
   onPropertiesUpdated(properties) {
     const wasBluetoothEnabled = this.isBluetoothEnabled_;
-    this.isBluetoothEnabled_ = properties.systemState ===
-        chromeos.bluetoothConfig.mojom.BluetoothSystemState.kEnabled;
+    this.isBluetoothEnabled_ =
+        properties.systemState === BluetoothSystemState.kEnabled;
 
     if (!wasBluetoothEnabled && this.isBluetoothEnabled_) {
       // If Bluetooth enables after being disabled, initialize the UI state.
@@ -299,7 +314,7 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
   }
 
   /**
-   * @param {Array<!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties>}
+   * @param {Array<!BluetoothDeviceProperties>}
    *     devices
    * @private
    */
@@ -356,7 +371,7 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
 
   /**
    * @param {!CustomEvent<!{device:
-   *     chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}>} event
+   *     BluetoothDeviceProperties}>} event
    * @private
    */
   onPairDevice_(event) {
@@ -402,15 +417,14 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
   }
 
   /**
-   * @param {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties} device
+   * @param {!BluetoothDeviceProperties} device
    * @private
    */
   pairDevice_(device) {
     assert(
         this.devicePairingHandler_, 'devicePairingHandler_ has not been set.');
 
-    this.pairingDelegateReceiver_ =
-        new chromeos.bluetoothConfig.mojom.DevicePairingDelegateReceiver(this);
+    this.pairingDelegateReceiver_ = new DevicePairingDelegateReceiver(this);
 
     this.devicePendingPairing_ = device;
     assert(this.devicePendingPairing_);
@@ -427,13 +441,12 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
         .catch(() => {
           // Pairing failed due to external issues, such as Mojo pipe
           // disconnecting from Bluetooth disabling.
-          this.handlePairDeviceResult_(
-              chromeos.bluetoothConfig.mojom.PairingResult.kNonAuthFailure);
+          this.handlePairDeviceResult_(PairingResult.kNonAuthFailure);
         });
   }
 
   /**
-   * @param {!chromeos.bluetoothConfig.mojom.PairingResult} result
+   * @param {!PairingResult} result
    * @private
    */
   handlePairDeviceResult_(result) {
@@ -449,7 +462,7 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
 
     this.pairingDelegateReceiver_ = null;
 
-    if (result === chromeos.bluetoothConfig.mojom.PairingResult.kSuccess) {
+    if (result === PairingResult.kSuccess) {
       this.closeDialog_();
       return;
     }
@@ -546,7 +559,7 @@ export class SettingsBluetoothPairingUiElement extends PolymerElement {
   }
 
   /**s
-   * @param {!chromeos.bluetoothConfig.mojom.KeyEnteredHandlerPendingReceiver}
+   * @param {!KeyEnteredHandlerPendingReceiver}
    *     handler
    * @param {string} code
    * @private
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_utils.js b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_utils.js
index cac2e654a7a..04112f74284 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_utils.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_utils.js
@@ -2,16 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/mojo/public/mojom/base/big_buffer.mojom-lite.js';
-import 'chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-lite.js';
+import {BluetoothDeviceProperties, PairedBluetoothDeviceProperties} from 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
+import {String16} from 'chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-webui.js';
 
 import {BatteryType} from './bluetooth_types.js';
 
 /**
  * Converts a JS string to mojoBase.mojom.String16 object.
  * @param {string} str
- * @return {!mojoBase.mojom.String16}
+ * @return {!String16}
  */
 export function stringToMojoString16(str) {
   const arr = [];
@@ -23,7 +22,7 @@ export function stringToMojoString16(str) {
 
 /**
  * Converts mojoBase.mojom.String16 to a JS string.
- * @param {!mojoBase.mojom.String16} str16
+ * @param {!String16} str16
  * @return {string}
  */
 export function mojoString16ToString(str16) {
@@ -31,8 +30,7 @@ export function mojoString16ToString(str16) {
 }
 
 /**
- * @param {?chromeos.bluetoothConfig.mojom.PairedBluetoothDeviceProperties}
- *     device
+ * @param {?PairedBluetoothDeviceProperties} device
  * @return {string}
  */
 export function getDeviceName(device) {
@@ -53,8 +51,7 @@ export function getDeviceName(device) {
  * the battery type, or the battery percentage is out of bounds. Clients that
  * call this method should explicitly check if the return value is undefined to
  * differentiate it from a return value of 0.
- * @param {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
- *     device
+ * @param {!BluetoothDeviceProperties} device
  * @param {!BatteryType} batteryType
  * @return {number|undefined}
  */
@@ -98,8 +95,7 @@ export function getBatteryPercentage(device, batteryType) {
 
 /**
  * Returns true if the the device contains any multiple battery information.
- * @param {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
- *     device
+ * @param {!BluetoothDeviceProperties} device
  * @return {boolean}
  */
 export function hasAnyDetailedBatteryInfo(device) {
@@ -110,8 +106,7 @@ export function hasAnyDetailedBatteryInfo(device) {
 
 /**
  * Returns true if the device contains the default image URL.
- * @param {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
- *     device
+ * @param {!BluetoothDeviceProperties} device
  * @return {boolean}
  */
 export function hasDefaultImage(device) {
@@ -121,8 +116,7 @@ export function hasDefaultImage(device) {
 
 /**
  * Returns true if the device contains True Wireless Images.
- * @param {!chromeos.bluetoothConfig.mojom.BluetoothDeviceProperties}
- *     device
+ * @param {!BluetoothDeviceProperties} device
  * @return {boolean}
  */
 export function hasTrueWirelessImages(device) {
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/cros_bluetooth_config.js b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/cros_bluetooth_config.js
index 2aa44a51152..ed2010e82d8 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/cros_bluetooth_config.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/bluetooth/cros_bluetooth_config.js
@@ -2,11 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-// cros_bluetooth_config.mojom-lite.js depends on url.mojom.Url.
-import 'chrome://resources/mojo/url/mojom/url.mojom-lite.js';
-// TODO(crbug.com/1010321): Use cros_bluetooth_config.mojom-webui.js instead
-// as non-module JS is deprecated.
-import 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-lite.js';
+import {CrosBluetoothConfig, CrosBluetoothConfigInterface} from 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js';
 
 /**
  * @fileoverview
@@ -14,11 +10,11 @@ import 'chrome://resources/mojo/chromeos/services/bluetooth_config/public/mojom/
  * CrosBluetoothConfig implementation for tests.
  */
 
-/** @type {?chromeos.bluetoothConfig.mojom.CrosBluetoothConfigInterface} */
+/** @type {?CrosBluetoothConfigInterface} */
 let bluetoothConfig = null;
 
 /**
- * @param {?chromeos.bluetoothConfig.mojom.CrosBluetoothConfigInterface}
+ * @param {?CrosBluetoothConfigInterface}
  *     testBluetoothConfig The CrosBluetoothConfig implementation used for
  *                         testing. Passing null reverses the override.
  */
@@ -27,14 +23,13 @@ export function setBluetoothConfigForTesting(testBluetoothConfig) {
 }
 
 /**
- * @return {!chromeos.bluetoothConfig.mojom.CrosBluetoothConfigInterface}
+ * @return {!CrosBluetoothConfigInterface}
  */
 export function getBluetoothConfig() {
   if (bluetoothConfig) {
     return bluetoothConfig;
   }
 
-  bluetoothConfig =
-      chromeos.bluetoothConfig.mojom.CrosBluetoothConfig.getRemote();
+  bluetoothConfig = CrosBluetoothConfig.getRemote();
   return bluetoothConfig;
-}
-\ No newline at end of file
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.js
index b25f32ec948..2421842b543 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.js
@@ -68,6 +68,16 @@ Polymer({
     },
 
     /**
+     * Readonly property indicating whether the current |activationCode|
+     * was scanned from QR code.
+     */
+    isFromQrCode: {
+      type: Boolean,
+      notify: true,
+      value: false,
+    },
+
+    /**
      * Indicates the UI is busy with an operation and cannot be interacted with.
      */
     showBusy: {
@@ -498,6 +508,8 @@ Polymer({
       this.showError = false;
     }
     if (this.state_ === PageState.MANUAL_ENTRY) {
+      this.isFromQrCode = false;
+
       // Clear |qrCodeDetectorTimer_| before closing video stream, prevents
       // image capturer from going into an inactive state and throwing errors
       // when |grabFrame()| is called.
@@ -519,6 +531,7 @@ Polymer({
 
     // Focus on the next button after scanning is successful.
     if (this.state_ === PageState.SCANNING_SUCCESS) {
+      this.isFromQrCode = true;
       this.qrCodeCameraA11yString_ = this.i18n('qrCodeA11YCameraScanSuccess');
       this.fire('focus-default-button');
     }
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.html
index da3132b49d0..d4f12045e0b 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.html
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.html
@@ -7,11 +7,10 @@
 <link rel="import" href="../../../cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 
 <dom-module id="button-bar">
   <template>
-    <style include="iron-flex">
+    <style>
       :host {
         display: flex;
         justify-content: flex-end;
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/error.svg b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/error.svg
index dcf8861065b..01f09ec99eb 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/error.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/error.svg
@@ -1 +1 @@
-<svg width="201" height="200" viewBox="0 0 201 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M122.984 41.38c-25.952 0-46.99 21.015-46.99 46.939s21.038 46.94 46.99 46.94 46.991-21.016 46.991-46.94-21.039-46.94-46.991-46.94zm0 1.928c24.886 0 45.06 20.152 45.06 45.011s-20.174 45.011-45.06 45.011c-24.886 0-45.06-20.152-45.06-45.011s20.174-45.01 45.06-45.01z" fill="#D2E3FC"/><path d="M133.249 89.338h-11.877v11.574h-13.557a.39.39 0 0 1-.272-.668l25.044-24.408a.39.39 0 0 1 .662.28v13.222zm-1.288 3.1l-1.815-1.814-2.691 2.688-2.69-2.688-1.816 1.813 2.691 2.688-2.691 2.688 1.816 1.813 2.69-2.675 2.691 2.675 1.815-1.813-2.677-2.688 2.677-2.688z" fill="#D2E3FC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M157.595 158.993c0-13.495-10.951-24.435-24.461-24.435-13.509 0-24.461 10.94-24.461 24.435" fill="#F1F3F4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M48.74 134.835l1.893 2.7a2.532 2.532 0 0 1-.62 3.527l-.002.002-24.851 17.382a2.533 2.533 0 0 1-3.525-.622l-1.893-2.7a2.532 2.532 0 0 1 .62-3.527l.002-.002 24.851-17.382a2.532 2.532 0 0 1 3.525.622z" fill="#EE5FFA"/><path d="M50.548 159.017c4.33.999 8.65-1.697 9.648-6.022.999-4.326-1.702-8.643-6.032-9.642-4.33-1-8.649 1.696-9.647 6.022-.999 4.325 1.701 8.642 6.031 9.642z" fill="#F1F3F4"/><path d="M68.12 147.061c11.198 0 20.276-9.068 20.276-20.254 0-11.187-9.078-20.255-20.277-20.255-11.198 0-20.276 9.068-20.276 20.255 0 11.186 9.078 20.254 20.276 20.254z" fill="#FBBC04"/><path d="M69.88 130.279v-.746c0-.617.116-1.14.348-1.569.232-.429.64-.909 1.223-1.44.72-.669 1.296-1.334 1.725-1.994.43-.66.644-1.444.644-2.353 0-.909-.228-1.732-.683-2.469-.454-.738-1.09-1.321-1.905-1.749-.815-.429-1.746-.643-2.794-.643-1.407 0-2.566.394-3.476 1.183-.91.789-1.536 1.697-1.88 2.726l2.473 1.029c.223-.669.57-1.222 1.042-1.659.472-.437 1.095-.656 1.867-.656.807 0 1.442.219 1.906.656.463.437.695.99.695 1.659 0 .549-.133 1.02-.4 1.415-.266.394-.699.857-1.3 1.389-.858.771-1.454 1.448-1.79 2.031-.334.583-.501 1.295-.501 2.135v1.055h2.806zm-1.416 6.018a1.82 1.82 0 0 0 1.352-.565c.369-.378.553-.832.553-1.364 0-.531-.184-.986-.553-1.363a1.82 1.82 0 0 0-1.352-.566c-.532 0-.987.185-1.364.553a1.846 1.846 0 0 0-.567 1.376c0 .532.189.986.567 1.364.377.377.832.565 1.364.565z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M62.197 156.996c-.52.906.13 2.039 1.17 2.039H73.98c1.039 0 1.688-1.133 1.169-2.039l-5.308-9.255a1.346 1.346 0 0 0-2.338 0l-5.307 9.255z" fill="#EA4335"/><path d="M191.495 159.035a.965.965 0 0 1 .093 1.925l-.093.004H13.831a.965.965 0 0 1-.093-1.924l.093-.005h177.664z" fill="#D2E3FC"/><path d="M97.578 158.993c7.638 0 13.83-6.192 13.83-13.83s-6.192-13.83-13.83-13.83-13.83 6.192-13.83 13.83 6.192 13.83 13.83 13.83z" fill="#4285F4"/></svg>
+<svg width="201" height="200" viewBox="0 0 201 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M122.984 41.38c-25.952 0-46.99 21.015-46.99 46.939s21.038 46.94 46.99 46.94 46.991-21.016 46.991-46.94-21.039-46.94-46.991-46.94zm0 1.928c24.886 0 45.06 20.152 45.06 45.011s-20.174 45.011-45.06 45.011c-24.886 0-45.06-20.152-45.06-45.011s20.174-45.01 45.06-45.01z" fill="#D2E3FC"/><path d="M133.249 89.338h-11.877v11.574h-13.557a.39.39 0 0 1-.272-.668l25.044-24.408a.39.39 0 0 1 .662.28v13.222zm-1.288 3.1-1.815-1.814-2.691 2.688-2.69-2.688-1.816 1.813 2.691 2.688-2.691 2.688 1.816 1.813 2.69-2.675 2.691 2.675 1.815-1.813-2.677-2.688 2.677-2.688z" fill="#D2E3FC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M157.595 158.993c0-13.495-10.951-24.435-24.461-24.435-13.509 0-24.461 10.94-24.461 24.435" fill="#F1F3F4"/><path fill-rule="evenodd" clip-rule="evenodd" d="m48.74 134.835 1.893 2.7a2.532 2.532 0 0 1-.62 3.527l-.002.002-24.851 17.382a2.533 2.533 0 0 1-3.525-.622l-1.893-2.7a2.532 2.532 0 0 1 .62-3.527l.002-.002 24.851-17.382a2.532 2.532 0 0 1 3.525.622z" fill="#EE5FFA"/><path d="M50.548 159.017c4.33.999 8.65-1.697 9.648-6.022.999-4.326-1.702-8.643-6.032-9.642-4.33-1-8.649 1.696-9.647 6.022-.999 4.325 1.701 8.642 6.031 9.642z" fill="#F1F3F4"/><path d="M68.12 147.061c11.198 0 20.276-9.068 20.276-20.254 0-11.187-9.078-20.255-20.277-20.255-11.198 0-20.276 9.068-20.276 20.255 0 11.186 9.078 20.254 20.276 20.254z" fill="#FBBC04"/><path d="M69.88 130.279v-.746c0-.617.116-1.14.348-1.569.232-.429.64-.909 1.223-1.44.72-.669 1.296-1.334 1.725-1.994.43-.66.644-1.444.644-2.353 0-.909-.228-1.732-.683-2.469-.454-.738-1.09-1.321-1.905-1.749-.815-.429-1.746-.643-2.794-.643-1.407 0-2.566.394-3.476 1.183-.91.789-1.536 1.697-1.88 2.726l2.473 1.029c.223-.669.57-1.222 1.042-1.659.472-.437 1.095-.656 1.867-.656.807 0 1.442.219 1.906.656.463.437.695.99.695 1.659 0 .549-.133 1.02-.4 1.415-.266.394-.699.857-1.3 1.389-.858.771-1.454 1.448-1.79 2.031-.334.583-.501 1.295-.501 2.135v1.055h2.806zm-1.416 6.018a1.82 1.82 0 0 0 1.352-.565c.369-.378.553-.832.553-1.364 0-.531-.184-.986-.553-1.363a1.82 1.82 0 0 0-1.352-.566c-.532 0-.987.185-1.364.553a1.846 1.846 0 0 0-.567 1.376c0 .532.189.986.567 1.364.377.377.832.565 1.364.565z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M62.197 156.996c-.52.906.13 2.039 1.17 2.039H73.98c1.039 0 1.688-1.133 1.169-2.039l-5.308-9.255a1.346 1.346 0 0 0-2.338 0l-5.307 9.255z" fill="#EA4335"/><path d="M191.495 159.035a.965.965 0 0 1 .093 1.925l-.093.004H13.831a.965.965 0 0 1-.093-1.924l.093-.005h177.664z" fill="#D2E3FC"/><path d="M97.578 158.993c7.638 0 13.83-6.192 13.83-13.83s-6.192-13.83-13.83-13.83-13.83 6.192-13.83 13.83 6.192 13.83 13.83 13.83z" fill="#4285F4"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/error_dark.svg b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/error_dark.svg
index 0278debe899..b8370a8bf0c 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/error_dark.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/error_dark.svg
@@ -1 +1 @@
-<svg width="201" height="200" viewBox="0 0 201 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M122.984 41.38c-25.952 0-46.99 21.015-46.99 46.939s21.038 46.94 46.99 46.94 46.991-21.016 46.991-46.94-21.039-46.94-46.991-46.94zm0 1.928c24.886 0 45.06 20.152 45.06 45.011s-20.174 45.011-45.06 45.011c-24.886 0-45.06-20.152-45.06-45.011s20.174-45.01 45.06-45.01z" fill="#8AB4F8" fill-opacity=".4"/><path d="M133.249 89.338h-11.877v11.574h-13.557a.39.39 0 0 1-.272-.668l25.044-24.408a.39.39 0 0 1 .662.28v13.222zm-1.288 3.1l-1.815-1.814-2.691 2.688-2.69-2.688-1.816 1.813 2.691 2.688-2.691 2.688 1.816 1.813 2.69-2.675 2.691 2.675 1.815-1.813-2.677-2.688 2.677-2.688z" fill="#8AB4F8" fill-opacity=".4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M157.595 158.993c0-13.495-10.951-24.435-24.461-24.435-13.509 0-24.461 10.94-24.461 24.435" fill="#5F6368"/><path fill-rule="evenodd" clip-rule="evenodd" d="M48.74 134.835l1.893 2.7a2.532 2.532 0 0 1-.62 3.527l-.002.002-24.851 17.382a2.533 2.533 0 0 1-3.525-.622l-1.893-2.7a2.532 2.532 0 0 1 .62-3.527l.002-.002 24.851-17.382a2.532 2.532 0 0 1 3.525.622z" fill="#F882FE"/><path d="M50.548 159.017c4.33.999 8.65-1.697 9.648-6.022.999-4.326-1.702-8.643-6.032-9.642-4.33-1-8.649 1.696-9.647 6.022-.999 4.325 1.701 8.642 6.031 9.642z" fill="#5F6368"/><path d="M68.12 147.061c11.198 0 20.276-9.068 20.276-20.254 0-11.187-9.078-20.255-20.277-20.255-11.198 0-20.276 9.068-20.276 20.255 0 11.186 9.078 20.254 20.276 20.254z" fill="#FCC934"/><path d="M69.88 130.279v-.746c0-.617.116-1.14.348-1.569.232-.429.64-.909 1.223-1.44.72-.669 1.296-1.334 1.725-1.994.43-.66.644-1.444.644-2.353 0-.909-.228-1.732-.683-2.469-.454-.738-1.09-1.321-1.905-1.749-.815-.429-1.746-.643-2.794-.643-1.407 0-2.566.394-3.476 1.183-.91.789-1.536 1.697-1.88 2.726l2.473 1.029c.223-.669.57-1.222 1.042-1.659.472-.437 1.095-.656 1.867-.656.807 0 1.442.219 1.906.656.463.437.695.99.695 1.659 0 .549-.133 1.02-.4 1.415-.266.394-.699.857-1.3 1.389-.858.771-1.454 1.448-1.79 2.031-.334.583-.501 1.295-.501 2.135v1.055h2.806zm-1.416 6.018a1.82 1.82 0 0 0 1.352-.565c.369-.378.553-.832.553-1.364 0-.531-.184-.986-.553-1.363a1.82 1.82 0 0 0-1.352-.566c-.532 0-.987.185-1.364.553a1.846 1.846 0 0 0-.567 1.376c0 .532.189.986.567 1.364.377.377.832.565 1.364.565z" fill="#323336"/><path fill-rule="evenodd" clip-rule="evenodd" d="M62.197 156.996c-.52.906.13 2.039 1.17 2.039H73.98c1.039 0 1.688-1.133 1.169-2.039l-5.308-9.255a1.346 1.346 0 0 0-2.338 0l-5.307 9.255z" fill="#EA4335"/><path d="M191.495 159.035a.965.965 0 0 1 .093 1.925l-.093.004H13.831a.965.965 0 0 1-.093-1.924l.093-.005h177.664z" fill="#8AB4F8" fill-opacity=".4"/><path d="M97.578 158.993c7.638 0 13.83-6.192 13.83-13.83s-6.192-13.83-13.83-13.83-13.83 6.192-13.83 13.83 6.192 13.83 13.83 13.83z" fill="#669DF6"/></svg>
+<svg width="201" height="200" viewBox="0 0 201 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M122.984 41.38c-25.952 0-46.99 21.015-46.99 46.939s21.038 46.94 46.99 46.94 46.991-21.016 46.991-46.94-21.039-46.94-46.991-46.94zm0 1.928c24.886 0 45.06 20.152 45.06 45.011s-20.174 45.011-45.06 45.011c-24.886 0-45.06-20.152-45.06-45.011s20.174-45.01 45.06-45.01z" fill="#8AB4F8" fill-opacity=".4"/><path d="M133.249 89.338h-11.877v11.574h-13.557a.39.39 0 0 1-.272-.668l25.044-24.408a.39.39 0 0 1 .662.28v13.222zm-1.288 3.1-1.815-1.814-2.691 2.688-2.69-2.688-1.816 1.813 2.691 2.688-2.691 2.688 1.816 1.813 2.69-2.675 2.691 2.675 1.815-1.813-2.677-2.688 2.677-2.688z" fill="#8AB4F8" fill-opacity=".4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M157.595 158.993c0-13.495-10.951-24.435-24.461-24.435-13.509 0-24.461 10.94-24.461 24.435" fill="#5F6368"/><path fill-rule="evenodd" clip-rule="evenodd" d="m48.74 134.835 1.893 2.7a2.532 2.532 0 0 1-.62 3.527l-.002.002-24.851 17.382a2.533 2.533 0 0 1-3.525-.622l-1.893-2.7a2.532 2.532 0 0 1 .62-3.527l.002-.002 24.851-17.382a2.532 2.532 0 0 1 3.525.622z" fill="#F882FE"/><path d="M50.548 159.017c4.33.999 8.65-1.697 9.648-6.022.999-4.326-1.702-8.643-6.032-9.642-4.33-1-8.649 1.696-9.647 6.022-.999 4.325 1.701 8.642 6.031 9.642z" fill="#5F6368"/><path d="M68.12 147.061c11.198 0 20.276-9.068 20.276-20.254 0-11.187-9.078-20.255-20.277-20.255-11.198 0-20.276 9.068-20.276 20.255 0 11.186 9.078 20.254 20.276 20.254z" fill="#FCC934"/><path d="M69.88 130.279v-.746c0-.617.116-1.14.348-1.569.232-.429.64-.909 1.223-1.44.72-.669 1.296-1.334 1.725-1.994.43-.66.644-1.444.644-2.353 0-.909-.228-1.732-.683-2.469-.454-.738-1.09-1.321-1.905-1.749-.815-.429-1.746-.643-2.794-.643-1.407 0-2.566.394-3.476 1.183-.91.789-1.536 1.697-1.88 2.726l2.473 1.029c.223-.669.57-1.222 1.042-1.659.472-.437 1.095-.656 1.867-.656.807 0 1.442.219 1.906.656.463.437.695.99.695 1.659 0 .549-.133 1.02-.4 1.415-.266.394-.699.857-1.3 1.389-.858.771-1.454 1.448-1.79 2.031-.334.583-.501 1.295-.501 2.135v1.055h2.806zm-1.416 6.018a1.82 1.82 0 0 0 1.352-.565c.369-.378.553-.832.553-1.364 0-.531-.184-.986-.553-1.363a1.82 1.82 0 0 0-1.352-.566c-.532 0-.987.185-1.364.553a1.846 1.846 0 0 0-.567 1.376c0 .532.189.986.567 1.364.377.377.832.565 1.364.565z" fill="#323336"/><path fill-rule="evenodd" clip-rule="evenodd" d="M62.197 156.996c-.52.906.13 2.039 1.17 2.039H73.98c1.039 0 1.688-1.133 1.169-2.039l-5.308-9.255a1.346 1.346 0 0 0-2.338 0l-5.307 9.255z" fill="#EA4335"/><path d="M191.495 159.035a.965.965 0 0 1 .093 1.925l-.093.004H13.831a.965.965 0 0 1-.093-1.924l.093-.005h177.664z" fill="#8AB4F8" fill-opacity=".4"/><path d="M97.578 158.993c7.638 0 13.83-6.192 13.83-13.83s-6.192-13.83-13.83-13.83-13.83 6.192-13.83 13.83 6.192 13.83 13.83 13.83z" fill="#669DF6"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html
index 21614dde755..861e75a3b9c 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html
@@ -38,6 +38,7 @@
           show-busy="[[shouldShowSubpageBusy_(state_)]]">
       </profile-discovery-list-page>
       <activation-code-page id="activationCodePage"
+          is-from-qr-code="{{isActivationCodeFromQrCode_}}"
           activation-code="{{activationCode_}}"
           show-error="{{showError_}}"
           show-busy="[[shouldShowSubpageBusy_(state_)]]">
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js
index ad7b34100f5..c102445dc1d 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js
@@ -148,6 +148,11 @@ cr.define('cellular_setup', function() {
         type: Boolean,
         value: false,
       },
+
+      /** @private */
+      isActivationCodeFromQrCode_: {
+        type: Boolean,
+      },
     },
 
     /**
@@ -582,7 +587,8 @@ cr.define('cellular_setup', function() {
           this.state_ = ESimUiState.ACTIVATION_CODE_ENTRY_INSTALLING;
           this.euicc_
               .installProfileFromActivationCode(
-                  this.activationCode_, /*confirmationCode=*/ '')
+                  this.activationCode_, /*confirmationCode=*/ '',
+                  this.isActivationCodeFromQrCode_)
               .then(this.handleProfileInstallResponse_.bind(this));
           break;
         case ESimUiState.PROFILE_SELECTION:
@@ -604,7 +610,8 @@ cr.define('cellular_setup', function() {
           } else {
             this.euicc_
                 .installProfileFromActivationCode(
-                    this.activationCode_, this.confirmationCode_)
+                    this.activationCode_, this.confirmationCode_,
+                    this.isActivationCodeFromQrCode_)
                 .then(this.handleProfileInstallResponse_.bind(this));
           }
           break;
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_listener_behavior.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_listener_behavior.js
index 450cdf2dd33..cea3922f55e 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_listener_behavior.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_listener_behavior.js
@@ -38,3 +38,23 @@
    */
   onProfileChanged(profile) {},
 };
+
+/** @interface */
+/* #export */ class ESimManagerListenerBehaviorInterface {
+  onAvailableEuiccListChanged() {}
+
+  /**
+   * @param {!ash.cellularSetup.mojom.EuiccRemote} euicc
+   */
+  onProfileListChanged(euicc) {}
+
+  /**
+   * @param {!ash.cellularSetup.mojom.EuiccRemote} euicc
+   */
+  onEuiccChanged(euicc) {}
+
+  /**
+   * @param {!ash.cellularSetup.mojom.ESimProfileRemote} profile
+   */
+  onProfileChanged(profile) {}
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page_success.svg b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page_success.svg
index 076f2b652d1..49a4da1e51a 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page_success.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page_success.svg
@@ -1 +1 @@
-<svg width="201" height="200" viewBox="0 0 201 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100.366 109.293c-23.295 0-42.18 18.794-42.18 41.977 0 23.183 18.885 41.976 42.18 41.976 23.295 0 42.179-18.793 42.179-41.976s-18.884-41.977-42.179-41.977zm0 1.908c22.236 0 40.262 17.939 40.262 40.069 0 22.129-18.026 40.068-40.262 40.068s-40.262-17.939-40.262-40.068c0-22.13 18.026-40.069 40.262-40.069z" fill="#D2E3FC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M72.382 80.903c0 15.456 12.528 27.985 27.984 27.985 15.455 0 27.984-12.53 27.984-27.985" fill="#D2E3FC"/><path d="M100.366 124.705c-14.784 0-26.768 11.984-26.768 26.768 0 14.783 11.984 26.767 26.768 26.767 14.783 0 26.767-11.984 26.767-26.767 0-14.784-11.984-26.768-26.767-26.768zm0 2.549c13.375 0 24.218 10.843 24.218 24.219 0 13.375-10.843 24.218-24.218 24.218-13.376 0-24.219-10.843-24.219-24.218 0-13.376 10.843-24.219 24.219-24.219z" fill="#4285F4"/><path d="M106.609 138.351h4.995v22.475h-4.995v-22.475zm-17.48 12.486h4.994v9.989h-4.995v-9.989zm8.74-6.243h4.994v16.232h-4.994v-16.232z" fill="#4285F4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M114.565 49.036l1.13 2.792a2.636 2.636 0 0 1-1.455 3.433l-.003.001-27.656 11.155a2.636 2.636 0 0 1-3.43-1.456l-1.13-2.792a2.636 2.636 0 0 1 1.455-3.433h.003l27.656-11.156a2.637 2.637 0 0 1 3.43 1.456z" fill="#4285F4"/><path d="M100.366 50.643c8.96 0 16.223-7.264 16.223-16.223 0-8.96-7.263-16.223-16.223-16.223-8.96 0-16.223 7.263-16.223 16.223 0 8.96 7.263 16.223 16.223 16.223z" fill="#34A853"/><path fill-rule="evenodd" clip-rule="evenodd" d="M101.896 61.021l8.657 8.643c.476.475.477 1.245.002 1.72l-.002.002-8.657 8.643a1.216 1.216 0 0 1-1.719 0l-8.658-8.643a1.217 1.217 0 0 1-.002-1.72l.002-.002 8.658-8.643a1.217 1.217 0 0 1 1.719 0z" fill="#FBBC04"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.252 8.37c-.49-.86.123-1.934 1.104-1.934h10.02c.981 0 1.594 1.075 1.103 1.934l-5.01 8.778c-.49.859-1.716.859-2.207 0l-5.01-8.778z" fill="#2FE2EA"/><path fill-rule="evenodd" clip-rule="evenodd" d="M111.439 25.828c.66.5.791 1.44.291 2.1L99.765 43.748a1.5 1.5 0 0 1-2.15.253l-7.03-5.79a1.5 1.5 0 1 1 1.907-2.316l5.824 4.796 11.022-14.57a1.5 1.5 0 0 1 2.101-.292z" fill="#fff"/></svg>
+<svg width="201" height="200" viewBox="0 0 201 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100.366 109.293c-23.295 0-42.18 18.794-42.18 41.977 0 23.183 18.885 41.976 42.18 41.976 23.295 0 42.179-18.793 42.179-41.976s-18.884-41.977-42.179-41.977zm0 1.908c22.236 0 40.262 17.939 40.262 40.069 0 22.129-18.026 40.068-40.262 40.068s-40.262-17.939-40.262-40.068c0-22.13 18.026-40.069 40.262-40.069z" fill="#D2E3FC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M72.382 80.903c0 15.456 12.528 27.985 27.984 27.985 15.455 0 27.984-12.53 27.984-27.985" fill="#D2E3FC"/><path d="M100.366 124.705c-14.784 0-26.768 11.984-26.768 26.768 0 14.783 11.984 26.767 26.768 26.767 14.783 0 26.767-11.984 26.767-26.767 0-14.784-11.984-26.768-26.767-26.768zm0 2.549c13.375 0 24.218 10.843 24.218 24.219 0 13.375-10.843 24.218-24.218 24.218-13.376 0-24.219-10.843-24.219-24.218 0-13.376 10.843-24.219 24.219-24.219z" fill="#4285F4"/><path d="M106.609 138.351h4.995v22.475h-4.995v-22.475zm-17.48 12.486h4.994v9.989h-4.995v-9.989zm8.74-6.243h4.994v16.232h-4.994v-16.232z" fill="#4285F4"/><path fill-rule="evenodd" clip-rule="evenodd" d="m114.565 49.036 1.13 2.792a2.636 2.636 0 0 1-1.455 3.433l-.003.001-27.656 11.155a2.636 2.636 0 0 1-3.43-1.456l-1.13-2.792a2.636 2.636 0 0 1 1.455-3.433h.003l27.656-11.156a2.637 2.637 0 0 1 3.43 1.456z" fill="#4285F4"/><path d="M100.366 50.643c8.96 0 16.223-7.264 16.223-16.223 0-8.96-7.263-16.223-16.223-16.223-8.96 0-16.223 7.263-16.223 16.223 0 8.96 7.263 16.223 16.223 16.223z" fill="#34A853"/><path fill-rule="evenodd" clip-rule="evenodd" d="m101.896 61.021 8.657 8.643c.476.475.477 1.245.002 1.72l-.002.002-8.657 8.643a1.216 1.216 0 0 1-1.719 0l-8.658-8.643a1.217 1.217 0 0 1-.002-1.72l.002-.002 8.658-8.643a1.217 1.217 0 0 1 1.719 0z" fill="#FBBC04"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.252 8.37c-.49-.86.123-1.934 1.104-1.934h10.02c.981 0 1.594 1.075 1.103 1.934l-5.01 8.778a1.267 1.267 0 0 1-2.207 0l-5.01-8.778z" fill="#2FE2EA"/><path fill-rule="evenodd" clip-rule="evenodd" d="M111.439 25.828c.66.5.791 1.44.291 2.1l-11.965 15.82a1.5 1.5 0 0 1-2.15.253l-7.03-5.79a1.5 1.5 0 1 1 1.907-2.316l5.824 4.796 11.022-14.57a1.5 1.5 0 0 1 2.101-.292z" fill="#fff"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page_success_dark.svg b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page_success_dark.svg
index d92331624de..b7507a4d267 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page_success_dark.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page_success_dark.svg
@@ -1 +1 @@
-<svg width="201" height="200" viewBox="0 0 201 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100.366 109.293c-23.295 0-42.18 18.794-42.18 41.977 0 23.183 18.885 41.976 42.18 41.976 23.295 0 42.179-18.793 42.179-41.976s-18.884-41.977-42.179-41.977zm0 1.908c22.236 0 40.262 17.939 40.262 40.069 0 22.129-18.026 40.068-40.262 40.068s-40.262-17.939-40.262-40.068c0-22.13 18.026-40.069 40.262-40.069z" fill="#8AB4F8" fill-opacity=".4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M72.382 80.903c0 15.456 12.528 27.985 27.984 27.985 15.455 0 27.984-12.53 27.984-27.985" fill="#8AB4F8" fill-opacity=".4"/><path d="M100.366 124.705c-14.784 0-26.768 11.984-26.768 26.768 0 14.783 11.984 26.767 26.768 26.767 14.783 0 26.767-11.984 26.767-26.767 0-14.784-11.984-26.768-26.767-26.768zm0 2.549c13.375 0 24.218 10.843 24.218 24.219 0 13.375-10.843 24.218-24.218 24.218-13.376 0-24.219-10.843-24.219-24.218 0-13.376 10.843-24.219 24.219-24.219z" fill="#669DF6"/><path d="M106.609 138.351h4.995v22.475h-4.995v-22.475zm-17.48 12.486h4.994v9.989h-4.995v-9.989zm8.74-6.243h4.994v16.232h-4.994v-16.232z" fill="#669DF6"/><path fill-rule="evenodd" clip-rule="evenodd" d="M114.565 49.036l1.13 2.792a2.636 2.636 0 0 1-1.455 3.433l-.003.001-27.656 11.155a2.636 2.636 0 0 1-3.43-1.456l-1.13-2.792a2.636 2.636 0 0 1 1.455-3.433h.003l27.656-11.156a2.637 2.637 0 0 1 3.43 1.456z" fill="#669DF6"/><path d="M100.366 50.643c8.96 0 16.223-7.264 16.223-16.223 0-8.96-7.263-16.223-16.223-16.223-8.96 0-16.223 7.263-16.223 16.223 0 8.96 7.263 16.223 16.223 16.223z" fill="#5BB974"/><path fill-rule="evenodd" clip-rule="evenodd" d="M101.896 61.021l8.657 8.643c.476.475.477 1.245.002 1.72l-.002.002-8.657 8.643a1.216 1.216 0 0 1-1.719 0l-8.658-8.643a1.217 1.217 0 0 1-.002-1.72l.002-.002 8.658-8.643a1.217 1.217 0 0 1 1.719 0z" fill="#FCC934"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.252 8.37c-.49-.86.123-1.934 1.104-1.934h10.02c.981 0 1.594 1.075 1.103 1.934l-5.01 8.778c-.49.859-1.716.859-2.207 0l-5.01-8.778z" fill="#5DF1F2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M111.439 25.828c.66.5.791 1.44.291 2.1L99.765 43.748a1.5 1.5 0 0 1-2.15.253l-7.03-5.79a1.5 1.5 0 1 1 1.907-2.316l5.824 4.796 11.022-14.57a1.5 1.5 0 0 1 2.101-.292z" fill="#323336"/></svg>
+<svg width="201" height="200" viewBox="0 0 201 200" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100.366 109.293c-23.295 0-42.18 18.794-42.18 41.977 0 23.183 18.885 41.976 42.18 41.976 23.295 0 42.179-18.793 42.179-41.976s-18.884-41.977-42.179-41.977zm0 1.908c22.236 0 40.262 17.939 40.262 40.069 0 22.129-18.026 40.068-40.262 40.068s-40.262-17.939-40.262-40.068c0-22.13 18.026-40.069 40.262-40.069z" fill="#8AB4F8" fill-opacity=".4"/><path fill-rule="evenodd" clip-rule="evenodd" d="M72.382 80.903c0 15.456 12.528 27.985 27.984 27.985 15.455 0 27.984-12.53 27.984-27.985" fill="#8AB4F8" fill-opacity=".4"/><path d="M100.366 124.705c-14.784 0-26.768 11.984-26.768 26.768 0 14.783 11.984 26.767 26.768 26.767 14.783 0 26.767-11.984 26.767-26.767 0-14.784-11.984-26.768-26.767-26.768zm0 2.549c13.375 0 24.218 10.843 24.218 24.219 0 13.375-10.843 24.218-24.218 24.218-13.376 0-24.219-10.843-24.219-24.218 0-13.376 10.843-24.219 24.219-24.219z" fill="#669DF6"/><path d="M106.609 138.351h4.995v22.475h-4.995v-22.475zm-17.48 12.486h4.994v9.989h-4.995v-9.989zm8.74-6.243h4.994v16.232h-4.994v-16.232z" fill="#669DF6"/><path fill-rule="evenodd" clip-rule="evenodd" d="m114.565 49.036 1.13 2.792a2.636 2.636 0 0 1-1.455 3.433l-.003.001-27.656 11.155a2.636 2.636 0 0 1-3.43-1.456l-1.13-2.792a2.636 2.636 0 0 1 1.455-3.433h.003l27.656-11.156a2.637 2.637 0 0 1 3.43 1.456z" fill="#669DF6"/><path d="M100.366 50.643c8.96 0 16.223-7.264 16.223-16.223 0-8.96-7.263-16.223-16.223-16.223-8.96 0-16.223 7.263-16.223 16.223 0 8.96 7.263 16.223 16.223 16.223z" fill="#5BB974"/><path fill-rule="evenodd" clip-rule="evenodd" d="m101.896 61.021 8.657 8.643c.476.475.477 1.245.002 1.72l-.002.002-8.657 8.643a1.216 1.216 0 0 1-1.719 0l-8.658-8.643a1.217 1.217 0 0 1-.002-1.72l.002-.002 8.658-8.643a1.217 1.217 0 0 1 1.719 0z" fill="#FCC934"/><path fill-rule="evenodd" clip-rule="evenodd" d="M94.252 8.37c-.49-.86.123-1.934 1.104-1.934h10.02c.981 0 1.594 1.075 1.103 1.934l-5.01 8.778a1.267 1.267 0 0 1-2.207 0l-5.01-8.778z" fill="#5DF1F2"/><path fill-rule="evenodd" clip-rule="evenodd" d="M111.439 25.828c.66.5.791 1.44.291 2.1l-11.965 15.82a1.5 1.5 0 0 1-2.15.253l-7.03-5.79a1.5 1.5 0 1 1 1.907-2.316l5.824 4.796 11.022-14.57a1.5 1.5 0 0 1 2.101-.292z" fill="#323336"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.html
index 809db7dc92b..d38a63244d0 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.html
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.html
@@ -9,14 +9,12 @@
 <link rel="import" href="cellular_types.html">
 <link rel="import" href="cellular_setup_delegate.html">
 <link rel="import" href="chrome://resources/html/assert.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 
 
 <dom-module id="psim-flow-ui">
   <template>
-    <style include="iron-flex">
+    <style>
       :host {
         display: flex;
         flex: 1 1 auto;
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_error.svg b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_error.svg
index f00b2c23fc6..f1be3b3f6bb 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_error.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_error.svg
@@ -1 +1 @@
-<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_21_24311)"><path d="M250.017 151.141H98.165a6.753 6.753 0 0 1-6.752-6.752V40.862h165.419v103.465a6.764 6.764 0 0 1-1.978 4.837 6.748 6.748 0 0 1-4.837 1.977v0z" fill="#fff" stroke="#4285F4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M149.866 141.888h48.45a2.562 2.562 0 0 0 2.563-2.563v-30.351a2.563 2.563 0 0 0-2.563-2.564h-48.45a2.563 2.563 0 0 0-2.563 2.564v30.351a2.562 2.562 0 0 0 2.563 2.563z" fill="#D2E3FC"/><path d="M268.71 44.987H79.473a1.375 1.375 0 0 1-1.376-1.375V40.55a2.688 2.688 0 0 1 2.688-2.688h186.612a2.688 2.688 0 0 1 2.688 2.688v3.063a1.375 1.375 0 0 1-1.375 1.375v0z" fill="#fff" stroke="#4285F4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M246.641 48.515h-145.1c-.587 0-1.063.505-1.063 1.127v45.68c0 .622.476 1.127 1.063 1.127h145.1c.587 0 1.063-.505 1.063-1.127v-45.68c0-.622-.476-1.127-1.063-1.127z" fill="#D2E3FC"/><path d="M68.147 97.994H43.285a1.025 1.025 0 0 1-1.025-1.077V78.155a1.025 1.025 0 0 1 1.025-1.025h19.48l6.408 6.202v13.585a1.024 1.024 0 0 1-1.026 1.077z" fill="#4285F4"/><path d="M52.65 89.142H46.5c-.615 0-1.113.498-1.113 1.113v3.796c0 .614.498 1.113 1.113 1.113h6.15c.615 0 1.113-.499 1.113-1.113v-3.796c0-.615-.498-1.113-1.113-1.113z" fill="#fff"/><path d="M52.65 89.142H46.5c-.615 0-1.113.498-1.113 1.113v3.796c0 .614.498 1.113 1.113 1.113h6.15c.615 0 1.113-.499 1.113-1.113v-3.796c0-.615-.498-1.113-1.113-1.113z" fill="#D2E3FC"/><path d="M35.852 70.568v34.038" stroke="#4285F4" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/><path d="M35.852 73.797H71.12a2.307 2.307 0 0 1 2.307 2.307V99.02a2.307 2.307 0 0 1-2.307 2.307H35.85" stroke="#4285F4" stroke-width="2" stroke-linejoin="round"/><path d="M54.614 129.674c23.386 0 42.343-18.958 42.343-42.343 0-23.386-18.957-42.344-42.343-42.344-23.385 0-42.343 18.958-42.343 42.344 0 23.385 18.958 42.343 42.343 42.343z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M54.614 129.674c23.386 0 42.343-18.958 42.343-42.343 0-23.386-18.957-42.344-42.343-42.344-23.385 0-42.343 18.958-42.343 42.344 0 23.385 18.958 42.343 42.343 42.343z" stroke="#D2E3FC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_21_24311"><path fill="#fff" d="M0 0h200v200H0z"/></clipPath></defs></svg>
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M250.017 151.141H98.165a6.753 6.753 0 0 1-6.752-6.752V40.862h165.419v103.465a6.764 6.764 0 0 1-1.978 4.837 6.748 6.748 0 0 1-4.837 1.977v0z" fill="#fff" stroke="#4285F4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M149.866 141.888h48.45a2.562 2.562 0 0 0 2.563-2.563v-30.351a2.563 2.563 0 0 0-2.563-2.564h-48.45a2.563 2.563 0 0 0-2.563 2.564v30.351a2.562 2.562 0 0 0 2.563 2.563z" fill="#D2E3FC"/><path d="M268.71 44.987H79.473a1.375 1.375 0 0 1-1.376-1.375V40.55a2.688 2.688 0 0 1 2.688-2.688h186.612a2.688 2.688 0 0 1 2.688 2.688v3.063a1.375 1.375 0 0 1-1.375 1.375v0z" fill="#fff" stroke="#4285F4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M246.641 48.515h-145.1c-.587 0-1.063.505-1.063 1.127v45.68c0 .622.476 1.127 1.063 1.127h145.1c.587 0 1.063-.505 1.063-1.127v-45.68c0-.622-.476-1.127-1.063-1.127z" fill="#D2E3FC"/><path d="M68.147 97.994H43.285a1.025 1.025 0 0 1-1.025-1.077V78.155a1.025 1.025 0 0 1 1.025-1.025h19.48l6.408 6.202v13.585a1.024 1.024 0 0 1-1.026 1.077z" fill="#4285F4"/><path d="M52.65 89.142H46.5c-.615 0-1.113.498-1.113 1.113v3.796c0 .614.498 1.113 1.113 1.113h6.15c.615 0 1.113-.499 1.113-1.113v-3.796c0-.615-.498-1.113-1.113-1.113z" fill="#fff"/><path d="M52.65 89.142H46.5c-.615 0-1.113.498-1.113 1.113v3.796c0 .614.498 1.113 1.113 1.113h6.15c.615 0 1.113-.499 1.113-1.113v-3.796c0-.615-.498-1.113-1.113-1.113z" fill="#D2E3FC"/><path d="M35.852 70.568v34.038" stroke="#4285F4" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/><path d="M35.852 73.797H71.12a2.307 2.307 0 0 1 2.307 2.307V99.02a2.307 2.307 0 0 1-2.307 2.307H35.85" stroke="#4285F4" stroke-width="2" stroke-linejoin="round"/><path d="M54.614 129.674c23.386 0 42.343-18.958 42.343-42.343 0-23.386-18.957-42.344-42.343-42.344-23.385 0-42.343 18.958-42.343 42.344 0 23.385 18.958 42.343 42.343 42.343z" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M54.614 129.674c23.386 0 42.343-18.958 42.343-42.343 0-23.386-18.957-42.344-42.343-42.344-23.385 0-42.343 18.958-42.343 42.344 0 23.385 18.958 42.343 42.343 42.343z" stroke="#D2E3FC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h200v200H0z"/></clipPath></defs></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_error_dark.svg b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_error_dark.svg
index 12c27cbca18..bf989fef25a 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_error_dark.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/sim_detect_error_dark.svg
@@ -1 +1 @@
-<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_22_22879)"><path d="M250.017 151.141H98.165a6.753 6.753 0 0 1-6.752-6.752V40.862h165.419v103.465a6.764 6.764 0 0 1-1.978 4.837 6.748 6.748 0 0 1-4.837 1.977v0z" fill="#323336" stroke="#669DF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M149.866 141.888h48.45a2.562 2.562 0 0 0 2.563-2.563v-30.351a2.563 2.563 0 0 0-2.563-2.564h-48.45a2.563 2.563 0 0 0-2.563 2.564v30.351a2.562 2.562 0 0 0 2.563 2.563z" fill="#8AB4F8" fill-opacity=".4"/><path d="M268.71 44.987H79.473a1.375 1.375 0 0 1-1.376-1.375V40.55a2.688 2.688 0 0 1 2.688-2.688h186.612a2.688 2.688 0 0 1 2.688 2.688v3.063a1.375 1.375 0 0 1-1.375 1.375v0z" fill="#323336" stroke="#669DF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M246.641 48.515h-145.1c-.587 0-1.063.505-1.063 1.127v45.68c0 .622.476 1.127 1.063 1.127h145.1c.587 0 1.063-.505 1.063-1.127v-45.68c0-.622-.476-1.127-1.063-1.127z" fill="#8AB4F8" fill-opacity=".4"/><path d="M68.147 97.994H43.285a1.025 1.025 0 0 1-1.025-1.077V78.155a1.025 1.025 0 0 1 1.025-1.025h19.48l6.408 6.202v13.585a1.024 1.024 0 0 1-1.026 1.077z" fill="#669DF6"/><path d="M52.65 89.142H46.5c-.615 0-1.113.498-1.113 1.113v3.796c0 .614.498 1.113 1.113 1.113h6.15c.615 0 1.113-.499 1.113-1.113v-3.796c0-.615-.498-1.113-1.113-1.113z" fill="#323336"/><path d="M52.65 89.142H46.5c-.615 0-1.113.498-1.113 1.113v3.796c0 .614.498 1.113 1.113 1.113h6.15c.615 0 1.113-.499 1.113-1.113v-3.796c0-.615-.498-1.113-1.113-1.113z" fill="#8AB4F8" fill-opacity=".4"/><path d="M35.852 70.568v34.038" stroke="#669DF6" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/><path d="M35.852 73.797H71.12a2.307 2.307 0 0 1 2.307 2.307V99.02a2.307 2.307 0 0 1-2.307 2.307H35.85" stroke="#669DF6" stroke-width="2" stroke-linejoin="round"/><path d="M54.614 129.674c23.386 0 42.343-18.958 42.343-42.343 0-23.386-18.957-42.344-42.343-42.344-23.385 0-42.343 18.958-42.343 42.344 0 23.385 18.958 42.343 42.343 42.343z" stroke="#323336" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M54.614 129.674c23.386 0 42.343-18.958 42.343-42.343 0-23.386-18.957-42.344-42.343-42.344-23.385 0-42.343 18.958-42.343 42.344 0 23.385 18.958 42.343 42.343 42.343z" stroke="#8AB4F8" stroke-opacity=".4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_22_22879"><path fill="#fff" d="M0 0h200v200H0z"/></clipPath></defs></svg>
+<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M250.017 151.141H98.165a6.753 6.753 0 0 1-6.752-6.752V40.862h165.419v103.465a6.764 6.764 0 0 1-1.978 4.837 6.748 6.748 0 0 1-4.837 1.977v0z" fill="#323336" stroke="#669DF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M149.866 141.888h48.45a2.562 2.562 0 0 0 2.563-2.563v-30.351a2.563 2.563 0 0 0-2.563-2.564h-48.45a2.563 2.563 0 0 0-2.563 2.564v30.351a2.562 2.562 0 0 0 2.563 2.563z" fill="#8AB4F8" fill-opacity=".4"/><path d="M268.71 44.987H79.473a1.375 1.375 0 0 1-1.376-1.375V40.55a2.688 2.688 0 0 1 2.688-2.688h186.612a2.688 2.688 0 0 1 2.688 2.688v3.063a1.375 1.375 0 0 1-1.375 1.375v0z" fill="#323336" stroke="#669DF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M246.641 48.515h-145.1c-.587 0-1.063.505-1.063 1.127v45.68c0 .622.476 1.127 1.063 1.127h145.1c.587 0 1.063-.505 1.063-1.127v-45.68c0-.622-.476-1.127-1.063-1.127z" fill="#8AB4F8" fill-opacity=".4"/><path d="M68.147 97.994H43.285a1.025 1.025 0 0 1-1.025-1.077V78.155a1.025 1.025 0 0 1 1.025-1.025h19.48l6.408 6.202v13.585a1.024 1.024 0 0 1-1.026 1.077z" fill="#669DF6"/><path d="M52.65 89.142H46.5c-.615 0-1.113.498-1.113 1.113v3.796c0 .614.498 1.113 1.113 1.113h6.15c.615 0 1.113-.499 1.113-1.113v-3.796c0-.615-.498-1.113-1.113-1.113z" fill="#323336"/><path d="M52.65 89.142H46.5c-.615 0-1.113.498-1.113 1.113v3.796c0 .614.498 1.113 1.113 1.113h6.15c.615 0 1.113-.499 1.113-1.113v-3.796c0-.615-.498-1.113-1.113-1.113z" fill="#8AB4F8" fill-opacity=".4"/><path d="M35.852 70.568v34.038" stroke="#669DF6" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/><path d="M35.852 73.797H71.12a2.307 2.307 0 0 1 2.307 2.307V99.02a2.307 2.307 0 0 1-2.307 2.307H35.85" stroke="#669DF6" stroke-width="2" stroke-linejoin="round"/><path d="M54.614 129.674c23.386 0 42.343-18.958 42.343-42.343 0-23.386-18.957-42.344-42.343-42.344-23.385 0-42.343 18.958-42.343 42.344 0 23.385 18.958 42.343 42.343 42.343z" stroke="#323336" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M54.614 129.674c23.386 0 42.343-18.958 42.343-42.343 0-23.386-18.957-42.344-42.343-42.344-23.385 0-42.343 18.958-42.343 42.344 0 23.385 18.958 42.343 42.343 42.343z" stroke="#8AB4F8" stroke-opacity=".4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h200v200H0z"/></clipPath></defs></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_1x_dark.svg b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_1x_dark.svg
index 1ad1e691475..59c58727018 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_1x_dark.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_1x_dark.svg
@@ -1 +1 @@
-<svg width="520" height="320" viewBox="0 0 520 320" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><g clip-path="url(#clip1)"><path d="M436.814 96.953h-48.887c-3.69 0-6.682 3.109-6.682 6.945v115.916c0 3.835 2.992 6.945 6.682 6.945h48.887c3.691 0 6.682-3.11 6.682-6.945V103.898c0-3.836-2.991-6.945-6.682-6.945z" fill="#8AB4F8" fill-opacity=".4"/><path d="M285.74 114.525c3.734 0 6.76-3.146 6.76-7.027 0-3.881-3.026-7.027-6.76-7.027s-6.76 3.146-6.76 7.027c0 3.881 3.026 7.027 6.76 7.027z" fill="#5BB974"/><path d="M195.782 126.636l-48.819 13.809c-.35.099-.67.292-.926.56a2.213 2.213 0 0 0-.525 2.08c.096.364.283.695.542.96l35.904 37.035c.26.266.583.456.937.55.353.094.724.09 1.075-.014.351-.103.669-.301.922-.574.254-.273.433-.61.52-.979l12.904-50.844c.085-.362.078-.74-.02-1.097a2.162 2.162 0 0 0-.54-.944 2.047 2.047 0 0 0-.918-.542 1.992 1.992 0 0 0-1.056 0z" fill="#FCC934"/><path d="M381.245 146.577c-5.174.222-10.228-1.651-14.098-5.227l-5.058-4.678-2.299-1.921a16.94 16.94 0 0 0-1.839-1.129 16.251 16.251 0 0 0-12.871-.987 16.688 16.688 0 0 0-5.723 3.374 17.428 17.428 0 0 0-4.043 5.395 18.05 18.05 0 0 0-1.747 6.594 18.16 18.16 0 0 0 .817 6.786 17.671 17.671 0 0 0 3.255 5.943 16.948 16.948 0 0 0 5.197 4.195c.635.325 1.288.61 1.956.854h.049s2.749.752 2.827.763l6.634 1.423c5.186 1.121 9.734 4.331 12.649 8.929l3.288 5.196a24.817 24.817 0 0 0 3.062 4.83 24.058 24.058 0 0 0 7.954 6.427" fill="#8AB4F8" fill-opacity=".4"/><path d="M381.245 193.374a23.24 23.24 0 0 0 11.94 2.428 23.381 23.381 0 0 0 9.905-2.937 24.357 24.357 0 0 0 7.815-6.973 25.491 25.491 0 0 0 4.296-9.731 25.99 25.99 0 0 0-.012-10.706 25.469 25.469 0 0 0-4.316-9.72 24.352 24.352 0 0 0-7.831-6.955 23.387 23.387 0 0 0-9.91-2.915c-1.859-.113-3.724 0-5.557.336l-5.978.366h-.342" fill="#669DF6"/><path d="M334.706 163c12.475 0 22.589-10.513 22.589-23.48 0-12.968-10.114-23.48-22.589-23.48-12.476 0-22.59 10.512-22.59 23.48 0 12.967 10.114 23.48 22.59 23.48zm76.163-58.39h11.769" stroke="#669DF6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M404.373 106.196c.843 0 1.526-.71 1.526-1.586 0-.876-.683-1.587-1.526-1.587s-1.527.711-1.527 1.587.684 1.586 1.527 1.586z" fill="#669DF6"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="333" y="131" width="49" height="63"><path d="M381.245 146.577c-5.174.222-10.228-1.651-14.098-5.227l-5.058-4.678-2.299-1.921a16.94 16.94 0 0 0-1.839-1.129 16.251 16.251 0 0 0-12.871-.987 16.688 16.688 0 0 0-5.723 3.374 17.428 17.428 0 0 0-4.043 5.395 18.05 18.05 0 0 0-1.747 6.594 18.16 18.16 0 0 0 .817 6.786 17.671 17.671 0 0 0 3.255 5.943 16.948 16.948 0 0 0 5.197 4.195c.635.325 1.288.61 1.956.854h.049s2.749.752 2.827.763l6.634 1.423c5.186 1.121 9.734 4.331 12.649 8.929l3.288 5.196a24.817 24.817 0 0 0 3.062 4.83 24.058 24.058 0 0 0 7.954 6.427" fill="#D2E3FC"/></mask><g mask="url(#a)"><path d="M334.706 163c12.475 0 22.589-10.512 22.589-23.48s-10.114-23.48-22.589-23.48c-12.476 0-22.59 10.512-22.59 23.48S322.23 163 334.706 163z" stroke="#202124" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M102.322 162.4a24.214 24.214 0 0 1 9.773-1.022 24.448 24.448 0 0 1 9.403 2.952 25.378 25.378 0 0 1 7.596 6.474 26.482 26.482 0 0 1 4.627 9.006 27.105 27.105 0 0 1 .951 10.162 26.894 26.894 0 0 1-2.87 9.764 25.95 25.95 0 0 1-6.253 7.874 24.825 24.825 0 0 1-8.679 4.78" fill="#F882FF"/><path d="M87.813 118.308l30.691 108.807 106.276-1.302" stroke="#669DF6" stroke-width="6" stroke-linejoin="round"/><path d="M180.09 130.164a17.172 17.172 0 0 1 .28-6.464 16.86 16.86 0 0 1 2.643-5.859 16.158 16.158 0 0 1 4.602-4.359 15.548 15.548 0 0 1 5.858-2.191l36.854-5.919a15.352 15.352 0 0 1 6.213.291 15.673 15.673 0 0 1 5.632 2.741 16.332 16.332 0 0 1 4.195 4.772 16.976 16.976 0 0 1 2.118 6.077v0c.317 2.15.223 4.344-.276 6.456a16.856 16.856 0 0 1-2.633 5.855 16.176 16.176 0 0 1-4.59 4.361 15.552 15.552 0 0 1-5.845 2.202l-36.854 5.908a15.344 15.344 0 0 1-6.223-.274 15.675 15.675 0 0 1-5.647-2.734 16.354 16.354 0 0 1-4.205-4.776 16.968 16.968 0 0 1-2.122-6.087v0z" stroke="#EE675C" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="145" y="126" width="54" height="56"><path d="M195.782 126.636l-48.819 13.809c-.35.099-.67.292-.926.56a2.213 2.213 0 0 0-.525 2.08c.096.364.283.695.542.96l35.904 37.035c.26.266.583.456.937.55.353.094.724.09 1.075-.014.351-.103.669-.301.922-.574.254-.273.433-.61.52-.979l12.904-50.844c.085-.362.078-.74-.02-1.097a2.162 2.162 0 0 0-.54-.944 2.047 2.047 0 0 0-.918-.542 1.992 1.992 0 0 0-1.056 0z" fill="#FFBA00"/></mask><g mask="url(#b)"><path d="M180.09 130.165a17.178 17.178 0 0 1 .28-6.465 16.86 16.86 0 0 1 2.643-5.859 16.168 16.168 0 0 1 4.602-4.358 15.55 15.55 0 0 1 5.858-2.192l36.854-5.918a15.352 15.352 0 0 1 6.213.291 15.671 15.671 0 0 1 5.632 2.74 16.358 16.358 0 0 1 4.195 4.772 16.988 16.988 0 0 1 2.118 6.078v0c.317 2.15.223 4.344-.276 6.456a16.864 16.864 0 0 1-2.633 5.855 16.187 16.187 0 0 1-4.59 4.36 15.552 15.552 0 0 1-5.845 2.202l-36.854 5.908a15.344 15.344 0 0 1-6.223-.274 15.659 15.659 0 0 1-5.647-2.734 16.337 16.337 0 0 1-4.205-4.775 16.975 16.975 0 0 1-2.122-6.087v0z" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g></g></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h520v320H0z"/></clipPath><clipPath id="clip1"><path fill="#fff" transform="translate(-33.5 9.5)" d="M0 0h587v301H0z"/></clipPath></defs></svg>
-\ No newline at end of file
+<svg width="520" height="320" viewBox="0 0 520 320" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><g clip-path="url(#b)"><path d="M436.814 96.953h-48.887c-3.69 0-6.682 3.109-6.682 6.945v115.916c0 3.835 2.992 6.945 6.682 6.945h48.887c3.691 0 6.682-3.11 6.682-6.945V103.898c0-3.836-2.991-6.945-6.682-6.945z" fill="#8AB4F8" fill-opacity=".4"/><path d="M285.74 114.525c3.734 0 6.76-3.146 6.76-7.027 0-3.881-3.026-7.027-6.76-7.027s-6.76 3.146-6.76 7.027c0 3.881 3.026 7.027 6.76 7.027z" fill="#5BB974"/><path d="m195.782 126.636-48.819 13.809c-.35.099-.67.292-.926.56a2.213 2.213 0 0 0-.525 2.08c.096.364.283.695.542.96l35.904 37.035c.26.266.583.456.937.55.353.094.724.09 1.075-.014.351-.103.669-.301.922-.574.254-.273.433-.61.52-.979l12.904-50.844c.085-.362.078-.74-.02-1.097a2.162 2.162 0 0 0-.54-.944 2.047 2.047 0 0 0-.918-.542 1.992 1.992 0 0 0-1.056 0z" fill="#FCC934"/><path d="M381.245 146.577c-5.174.222-10.228-1.651-14.098-5.227l-5.058-4.678-2.299-1.921a16.94 16.94 0 0 0-1.839-1.129 16.251 16.251 0 0 0-12.871-.987 16.688 16.688 0 0 0-5.723 3.374 17.428 17.428 0 0 0-4.043 5.395 18.05 18.05 0 0 0-1.747 6.594 18.16 18.16 0 0 0 .817 6.786 17.671 17.671 0 0 0 3.255 5.943 16.948 16.948 0 0 0 5.197 4.195c.635.325 1.288.61 1.956.854h.049s2.749.752 2.827.763l6.634 1.423c5.186 1.121 9.734 4.331 12.649 8.929l3.288 5.196a24.817 24.817 0 0 0 3.062 4.83 24.058 24.058 0 0 0 7.954 6.427" fill="#8AB4F8" fill-opacity=".4"/><path d="M381.245 193.374a23.24 23.24 0 0 0 11.94 2.428 23.381 23.381 0 0 0 9.905-2.937 24.357 24.357 0 0 0 7.815-6.973 25.491 25.491 0 0 0 4.296-9.731 25.99 25.99 0 0 0-.012-10.706 25.469 25.469 0 0 0-4.316-9.72 24.352 24.352 0 0 0-7.831-6.955 23.387 23.387 0 0 0-9.91-2.915c-1.859-.113-3.724 0-5.557.336l-5.978.366h-.342" fill="#669DF6"/><path d="M334.706 163c12.475 0 22.589-10.513 22.589-23.48 0-12.968-10.114-23.48-22.589-23.48-12.476 0-22.59 10.512-22.59 23.48 0 12.967 10.114 23.48 22.59 23.48zm76.163-58.39h11.769" stroke="#669DF6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M404.373 106.196c.843 0 1.526-.71 1.526-1.586 0-.876-.683-1.587-1.526-1.587s-1.527.711-1.527 1.587.684 1.586 1.527 1.586z" fill="#669DF6"/><mask id="c" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="333" y="131" width="49" height="63"><path d="M381.245 146.577c-5.174.222-10.228-1.651-14.098-5.227l-5.058-4.678-2.299-1.921a16.94 16.94 0 0 0-1.839-1.129 16.251 16.251 0 0 0-12.871-.987 16.688 16.688 0 0 0-5.723 3.374 17.428 17.428 0 0 0-4.043 5.395 18.05 18.05 0 0 0-1.747 6.594 18.16 18.16 0 0 0 .817 6.786 17.671 17.671 0 0 0 3.255 5.943 16.948 16.948 0 0 0 5.197 4.195c.635.325 1.288.61 1.956.854h.049s2.749.752 2.827.763l6.634 1.423c5.186 1.121 9.734 4.331 12.649 8.929l3.288 5.196a24.817 24.817 0 0 0 3.062 4.83 24.058 24.058 0 0 0 7.954 6.427" fill="#D2E3FC"/></mask><g mask="url(#c)"><path d="M334.706 163c12.475 0 22.589-10.512 22.589-23.48s-10.114-23.48-22.589-23.48c-12.476 0-22.59 10.512-22.59 23.48S322.23 163 334.706 163z" stroke="#202124" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M102.322 162.4a24.214 24.214 0 0 1 9.773-1.022 24.448 24.448 0 0 1 9.403 2.952 25.378 25.378 0 0 1 7.596 6.474 26.482 26.482 0 0 1 4.627 9.006 27.105 27.105 0 0 1 .951 10.162 26.894 26.894 0 0 1-2.87 9.764 25.95 25.95 0 0 1-6.253 7.874 24.825 24.825 0 0 1-8.679 4.78" fill="#F882FF"/><path d="m87.813 118.308 30.691 108.807 106.276-1.302" stroke="#669DF6" stroke-width="6" stroke-linejoin="round"/><path d="M180.09 130.164a17.172 17.172 0 0 1 .28-6.464 16.86 16.86 0 0 1 2.643-5.859 16.158 16.158 0 0 1 4.602-4.359 15.548 15.548 0 0 1 5.858-2.191l36.854-5.919a15.352 15.352 0 0 1 6.213.291 15.673 15.673 0 0 1 5.632 2.741 16.332 16.332 0 0 1 4.195 4.772 16.976 16.976 0 0 1 2.118 6.077v0c.317 2.15.223 4.344-.276 6.456a16.856 16.856 0 0 1-2.633 5.855 16.176 16.176 0 0 1-4.59 4.361 15.552 15.552 0 0 1-5.845 2.202l-36.854 5.908a15.344 15.344 0 0 1-6.223-.274 15.675 15.675 0 0 1-5.647-2.734 16.354 16.354 0 0 1-4.205-4.776 16.968 16.968 0 0 1-2.122-6.087v0z" stroke="#EE675C" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><mask id="d" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="145" y="126" width="54" height="56"><path d="m195.782 126.636-48.819 13.809c-.35.099-.67.292-.926.56a2.213 2.213 0 0 0-.525 2.08c.096.364.283.695.542.96l35.904 37.035c.26.266.583.456.937.55.353.094.724.09 1.075-.014.351-.103.669-.301.922-.574.254-.273.433-.61.52-.979l12.904-50.844c.085-.362.078-.74-.02-1.097a2.162 2.162 0 0 0-.54-.944 2.047 2.047 0 0 0-.918-.542 1.992 1.992 0 0 0-1.056 0z" fill="#FFBA00"/></mask><g mask="url(#d)"><path d="M180.09 130.165a17.178 17.178 0 0 1 .28-6.465 16.86 16.86 0 0 1 2.643-5.859 16.168 16.168 0 0 1 4.602-4.358 15.55 15.55 0 0 1 5.858-2.192l36.854-5.918a15.352 15.352 0 0 1 6.213.291 15.671 15.671 0 0 1 5.632 2.74 16.358 16.358 0 0 1 4.195 4.772 16.988 16.988 0 0 1 2.118 6.078v0c.317 2.15.223 4.344-.276 6.456a16.864 16.864 0 0 1-2.633 5.855 16.187 16.187 0 0 1-4.59 4.36 15.552 15.552 0 0 1-5.845 2.202l-36.854 5.908a15.344 15.344 0 0 1-6.223-.274 15.659 15.659 0 0 1-5.647-2.734 16.337 16.337 0 0 1-4.205-4.775 16.975 16.975 0 0 1-2.122-6.087v0z" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h520v320H0z"/></clipPath><clipPath id="b"><path fill="#fff" transform="translate(-33.5 9.5)" d="M0 0h587v301H0z"/></clipPath></defs></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_1x_light.svg b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_1x_light.svg
index bbaed9067ff..d6a53eba104 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_1x_light.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_1x_light.svg
@@ -1 +1 @@
-<svg width="520" height="320" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M0 0h520v320H0z"/><path d="M436.519 96.534h-49.22c-3.716 0-6.728 3.13-6.728 6.991v116.686c0 3.861 3.012 6.992 6.728 6.992h49.22c3.716 0 6.728-3.131 6.728-6.992V103.525c0-3.861-3.012-6.991-6.728-6.991z" fill="#D2E3FC"/><path d="M436.519 96.534h-49.22c-3.716 0-6.728 3.13-6.728 6.991v116.686c0 3.861 3.012 6.992 6.728 6.992h49.22c3.716 0 6.728-3.131 6.728-6.992V103.525c0-3.861-3.012-6.991-6.728-6.991z" fill="#D2E3FC"/><path d="M284.416 114.222c3.759 0 6.806-3.166 6.806-7.073 0-3.907-3.047-7.073-6.806-7.073s-6.807 3.166-6.807 7.073c0 3.907 3.048 7.073 6.807 7.073z" fill="#34A853"/><path d="M193.845 126.414l-49.152 13.901c-.353.1-.675.294-.932.564a2.177 2.177 0 0 0-.536.972c-.092.368-.09.755.006 1.121.097.367.285.7.546.967l36.15 37.281c.261.268.586.459.942.554.356.095.729.09 1.083-.014.353-.104.673-.304.929-.578.255-.275.435-.615.523-.985l12.992-51.183a2.243 2.243 0 0 0-.021-1.104 2.177 2.177 0 0 0-.543-.95 2.065 2.065 0 0 0-.924-.546 1.998 1.998 0 0 0-1.063 0z" fill="#FFBA00"/><path d="M380.571 146.488c-5.209.224-10.298-1.663-14.194-5.262l-5.092-4.708-2.315-1.935a16.471 16.471 0 0 0-8.236-2.974 16.36 16.36 0 0 0-6.574.844 16.806 16.806 0 0 0-5.762 3.397 17.537 17.537 0 0 0-4.071 5.431 18.253 18.253 0 0 0-.936 13.468 17.791 17.791 0 0 0 3.277 5.983 17.08 17.08 0 0 0 5.232 4.223c.639.327 1.297.614 1.97.859h.049s2.768.758 2.847.768l6.678 1.433c5.222 1.129 9.801 4.36 12.736 8.988l3.31 5.231a25.023 25.023 0 0 0 3.083 4.862 24.214 24.214 0 0 0 8.008 6.469" fill="#D2E3FC"/><path d="M380.571 193.596a23.405 23.405 0 0 0 12.022 2.444 23.544 23.544 0 0 0 9.972-2.957 24.527 24.527 0 0 0 7.869-7.019 25.66 25.66 0 0 0 4.325-9.795 26.16 26.16 0 0 0-.012-10.777 25.637 25.637 0 0 0-4.346-9.785 24.497 24.497 0 0 0-7.884-7.001 23.549 23.549 0 0 0-9.978-2.935 23.27 23.27 0 0 0-5.595.338l-6.018.369h-.345" fill="#4285F4"/><path d="M333.714 163.02c12.561 0 22.744-10.582 22.744-23.636 0-13.054-10.183-23.636-22.744-23.636s-22.743 10.582-22.743 23.636c0 13.054 10.182 23.636 22.743 23.636zm76.682-58.778h11.85" stroke="#4285F4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M403.857 105.839c.849 0 1.536-.715 1.536-1.597s-.687-1.597-1.536-1.597-1.537.715-1.537 1.597.688 1.597 1.537 1.597z" fill="#4285F4"/><mask id="a" maskUnits="userSpaceOnUse" x="332" y="131" width="49" height="63"><path d="M380.571 146.488c-5.209.224-10.298-1.663-14.194-5.262l-5.092-4.709-2.315-1.934a17.18 17.18 0 0 0-1.852-1.137 16.487 16.487 0 0 0-6.384-1.837 16.36 16.36 0 0 0-6.574.844 16.806 16.806 0 0 0-5.762 3.397 17.525 17.525 0 0 0-4.071 5.431 18.253 18.253 0 0 0-.936 13.468 17.791 17.791 0 0 0 3.277 5.983 17.062 17.062 0 0 0 5.232 4.222c.639.328 1.297.615 1.97.86h.049s2.768.758 2.847.768l6.678 1.433c5.222 1.129 9.801 4.36 12.736 8.988l3.31 5.231a25.023 25.023 0 0 0 3.083 4.862 24.226 24.226 0 0 0 8.008 6.469" fill="#D2E3FC"/></mask><g mask="url(#a)"><path d="M333.714 163.02c12.561 0 22.744-10.582 22.744-23.636 0-13.054-10.183-23.636-22.744-23.636s-22.743 10.582-22.743 23.636c0 13.054 10.182 23.636 22.743 23.636z" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M99.748 162.416a24.382 24.382 0 0 1 9.84-1.028 24.595 24.595 0 0 1 9.467 2.971 25.54 25.54 0 0 1 7.647 6.517 26.638 26.638 0 0 1 4.659 9.066 27.275 27.275 0 0 1 .957 10.229 27.036 27.036 0 0 1-2.889 9.829 26.104 26.104 0 0 1-6.296 7.926 24.985 24.985 0 0 1-8.738 4.812" fill="#F882FF"/><path d="M85.14 118.03l30.899 109.531 107.001-1.31" stroke="#4285F4" stroke-width="6" stroke-linejoin="round"/><path d="M178.045 129.966a17.323 17.323 0 0 1 .283-6.508 16.966 16.966 0 0 1 2.661-5.898 16.303 16.303 0 0 1 4.633-4.387 15.668 15.668 0 0 1 5.898-2.206l37.105-5.957a15.45 15.45 0 0 1 6.255.292 15.788 15.788 0 0 1 5.671 2.759 16.453 16.453 0 0 1 4.223 4.804 17.097 17.097 0 0 1 2.133 6.117v0a17.321 17.321 0 0 1-.278 6.5 16.985 16.985 0 0 1-2.651 5.893 16.284 16.284 0 0 1-4.621 4.39 15.668 15.668 0 0 1-5.886 2.216l-37.105 5.948a15.463 15.463 0 0 1-6.265-.276 15.777 15.777 0 0 1-5.685-2.752 16.446 16.446 0 0 1-4.234-4.807 17.113 17.113 0 0 1-2.137-6.128v0z" stroke="#FE2C25" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><mask id="b" maskUnits="userSpaceOnUse" x="143" y="126" width="54" height="56"><path d="M193.845 126.414l-49.152 13.901a2.062 2.062 0 0 0-.932.563c-.258.27-.443.606-.536.973-.092.368-.09.755.006 1.121.097.367.285.7.546.967l36.15 37.281c.261.268.586.459.942.554.356.095.729.09 1.083-.014.353-.104.673-.304.929-.578.255-.275.435-.615.523-.985l12.992-51.183a2.247 2.247 0 0 0-.021-1.105 2.18 2.18 0 0 0-.543-.949 2.056 2.056 0 0 0-.924-.546 1.998 1.998 0 0 0-1.063 0z" fill="#FFBA00"/></mask><g mask="url(#b)"><path d="M178.045 129.966a17.323 17.323 0 0 1 .283-6.508 16.966 16.966 0 0 1 2.661-5.898 16.303 16.303 0 0 1 4.633-4.387 15.668 15.668 0 0 1 5.898-2.206l37.105-5.957a15.45 15.45 0 0 1 6.255.292 15.788 15.788 0 0 1 5.671 2.759 16.453 16.453 0 0 1 4.223 4.804 17.097 17.097 0 0 1 2.133 6.117v0a17.321 17.321 0 0 1-.278 6.5 16.985 16.985 0 0 1-2.651 5.893 16.284 16.284 0 0 1-4.621 4.39 15.668 15.668 0 0 1-5.886 2.216l-37.105 5.948a15.463 15.463 0 0 1-6.265-.276 15.777 15.777 0 0 1-5.685-2.752 16.446 16.446 0 0 1-4.234-4.807 17.113 17.113 0 0 1-2.137-6.128v0z" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
-\ No newline at end of file
+<svg width="520" height="320" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M0 0h520v320H0z"/><path d="M436.519 96.534h-49.22c-3.716 0-6.728 3.13-6.728 6.991v116.686c0 3.861 3.012 6.992 6.728 6.992h49.22c3.716 0 6.728-3.131 6.728-6.992V103.525c0-3.861-3.012-6.991-6.728-6.991z" fill="#D2E3FC"/><path d="M436.519 96.534h-49.22c-3.716 0-6.728 3.13-6.728 6.991v116.686c0 3.861 3.012 6.992 6.728 6.992h49.22c3.716 0 6.728-3.131 6.728-6.992V103.525c0-3.861-3.012-6.991-6.728-6.991z" fill="#D2E3FC"/><path d="M284.416 114.222c3.759 0 6.806-3.166 6.806-7.073 0-3.907-3.047-7.073-6.806-7.073s-6.807 3.166-6.807 7.073c0 3.907 3.048 7.073 6.807 7.073z" fill="#34A853"/><path d="m193.845 126.414-49.152 13.901c-.353.1-.675.294-.932.564a2.177 2.177 0 0 0-.536.972c-.092.368-.09.755.006 1.121.097.367.285.7.546.967l36.15 37.281c.261.268.586.459.942.554.356.095.729.09 1.083-.014.353-.104.673-.304.929-.578.255-.275.435-.615.523-.985l12.992-51.183a2.243 2.243 0 0 0-.021-1.104 2.177 2.177 0 0 0-.543-.95 2.065 2.065 0 0 0-.924-.546 1.998 1.998 0 0 0-1.063 0z" fill="#FFBA00"/><path d="M380.571 146.488c-5.209.224-10.298-1.663-14.194-5.262l-5.092-4.708-2.315-1.935a16.471 16.471 0 0 0-8.236-2.974 16.36 16.36 0 0 0-6.574.844 16.806 16.806 0 0 0-5.762 3.397 17.537 17.537 0 0 0-4.071 5.431 18.253 18.253 0 0 0-.936 13.468 17.791 17.791 0 0 0 3.277 5.983 17.08 17.08 0 0 0 5.232 4.223c.639.327 1.297.614 1.97.859h.049s2.768.758 2.847.768l6.678 1.433c5.222 1.129 9.801 4.36 12.736 8.988l3.31 5.231a25.023 25.023 0 0 0 3.083 4.862 24.214 24.214 0 0 0 8.008 6.469" fill="#D2E3FC"/><path d="M380.571 193.596a23.405 23.405 0 0 0 12.022 2.444 23.544 23.544 0 0 0 9.972-2.957 24.527 24.527 0 0 0 7.869-7.019 25.66 25.66 0 0 0 4.325-9.795 26.16 26.16 0 0 0-.012-10.777 25.637 25.637 0 0 0-4.346-9.785 24.497 24.497 0 0 0-7.884-7.001 23.549 23.549 0 0 0-9.978-2.935 23.27 23.27 0 0 0-5.595.338l-6.018.369h-.345" fill="#4285F4"/><path d="M333.714 163.02c12.561 0 22.744-10.582 22.744-23.636 0-13.054-10.183-23.636-22.744-23.636s-22.743 10.582-22.743 23.636c0 13.054 10.182 23.636 22.743 23.636zm76.682-58.778h11.85" stroke="#4285F4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M403.857 105.839c.849 0 1.536-.715 1.536-1.597s-.687-1.597-1.536-1.597-1.537.715-1.537 1.597.688 1.597 1.537 1.597z" fill="#4285F4"/><mask id="a" maskUnits="userSpaceOnUse" x="332" y="131" width="49" height="63"><path d="M380.571 146.488c-5.209.224-10.298-1.663-14.194-5.262l-5.092-4.709-2.315-1.934a17.18 17.18 0 0 0-1.852-1.137 16.487 16.487 0 0 0-6.384-1.837 16.36 16.36 0 0 0-6.574.844 16.806 16.806 0 0 0-5.762 3.397 17.525 17.525 0 0 0-4.071 5.431 18.253 18.253 0 0 0-.936 13.468 17.791 17.791 0 0 0 3.277 5.983 17.062 17.062 0 0 0 5.232 4.222c.639.328 1.297.615 1.97.86h.049s2.768.758 2.847.768l6.678 1.433c5.222 1.129 9.801 4.36 12.736 8.988l3.31 5.231a25.023 25.023 0 0 0 3.083 4.862 24.226 24.226 0 0 0 8.008 6.469" fill="#D2E3FC"/></mask><g mask="url(#a)"><path d="M333.714 163.02c12.561 0 22.744-10.582 22.744-23.636 0-13.054-10.183-23.636-22.744-23.636s-22.743 10.582-22.743 23.636c0 13.054 10.182 23.636 22.743 23.636z" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M99.748 162.416a24.382 24.382 0 0 1 9.84-1.028 24.595 24.595 0 0 1 9.467 2.971 25.54 25.54 0 0 1 7.647 6.517 26.638 26.638 0 0 1 4.659 9.066 27.275 27.275 0 0 1 .957 10.229 27.036 27.036 0 0 1-2.889 9.829 26.104 26.104 0 0 1-6.296 7.926 24.985 24.985 0 0 1-8.738 4.812" fill="#F882FF"/><path d="m85.14 118.03 30.899 109.531 107.001-1.31" stroke="#4285F4" stroke-width="6" stroke-linejoin="round"/><path d="M178.045 129.966a17.323 17.323 0 0 1 .283-6.508 16.966 16.966 0 0 1 2.661-5.898 16.303 16.303 0 0 1 4.633-4.387 15.668 15.668 0 0 1 5.898-2.206l37.105-5.957a15.45 15.45 0 0 1 6.255.292 15.788 15.788 0 0 1 5.671 2.759 16.453 16.453 0 0 1 4.223 4.804 17.097 17.097 0 0 1 2.133 6.117v0a17.321 17.321 0 0 1-.278 6.5 16.985 16.985 0 0 1-2.651 5.893 16.284 16.284 0 0 1-4.621 4.39 15.668 15.668 0 0 1-5.886 2.216l-37.105 5.948a15.463 15.463 0 0 1-6.265-.276 15.777 15.777 0 0 1-5.685-2.752 16.446 16.446 0 0 1-4.234-4.807 17.113 17.113 0 0 1-2.137-6.128v0z" stroke="#FE2C25" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><mask id="b" maskUnits="userSpaceOnUse" x="143" y="126" width="54" height="56"><path d="m193.845 126.414-49.152 13.901a2.062 2.062 0 0 0-.932.563c-.258.27-.443.606-.536.973-.092.368-.09.755.006 1.121.097.367.285.7.546.967l36.15 37.281c.261.268.586.459.942.554.356.095.729.09 1.083-.014.353-.104.673-.304.929-.578.255-.275.435-.615.523-.985l12.992-51.183a2.247 2.247 0 0 0-.021-1.105 2.18 2.18 0 0 0-.543-.949 2.056 2.056 0 0 0-.924-.546 1.998 1.998 0 0 0-1.063 0z" fill="#FFBA00"/></mask><g mask="url(#b)"><path d="M178.045 129.966a17.323 17.323 0 0 1 .283-6.508 16.966 16.966 0 0 1 2.661-5.898 16.303 16.303 0 0 1 4.633-4.387 15.668 15.668 0 0 1 5.898-2.206l37.105-5.957a15.45 15.45 0 0 1 6.255.292 15.788 15.788 0 0 1 5.671 2.759 16.453 16.453 0 0 1 4.223 4.804 17.097 17.097 0 0 1 2.133 6.117v0a17.321 17.321 0 0 1-.278 6.5 16.985 16.985 0 0 1-2.651 5.893 16.284 16.284 0 0 1-4.621 4.39 15.668 15.668 0 0 1-5.886 2.216l-37.105 5.948a15.463 15.463 0 0 1-6.265-.276 15.777 15.777 0 0 1-5.685-2.752 16.446 16.446 0 0 1-4.234-4.807 17.113 17.113 0 0 1-2.137-6.128v0z" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_2x_dark.svg b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_2x_dark.svg
index dc413c744b4..46a0cb9420d 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_2x_dark.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_2x_dark.svg
@@ -1 +1 @@
-<svg width="1040" height="640" viewBox="0 0 1040 640" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M873.628 193.905h-97.774c-7.381 0-13.364 6.219-13.364 13.891v231.831c0 7.672 5.983 13.891 13.364 13.891h97.774c7.381 0 13.364-6.219 13.364-13.891V207.796c0-7.672-5.983-13.891-13.364-13.891z" fill="#8AB4F8" fill-opacity=".4"/><path d="M571.48 229.049c7.467 0 13.52-6.292 13.52-14.053 0-7.762-6.053-14.054-13.52-14.054s-13.521 6.292-13.521 14.054c0 7.761 6.054 14.053 13.521 14.053z" fill="#5BB974"/><path d="M391.564 253.272l-97.637 27.619a4.086 4.086 0 0 0-1.852 1.119 4.336 4.336 0 0 0-1.064 1.933c-.184.73-.18 1.498.012 2.227.192.728.566 1.39 1.084 1.92l71.81 74.071a4.093 4.093 0 0 0 1.872 1.1 3.985 3.985 0 0 0 2.15-.028 4.105 4.105 0 0 0 1.846-1.149 4.347 4.347 0 0 0 1.039-1.957l25.808-101.689a4.446 4.446 0 0 0-.041-2.195 4.329 4.329 0 0 0-1.079-1.887 4.091 4.091 0 0 0-1.836-1.085 3.974 3.974 0 0 0-2.112.001z" fill="#FCC934"/><path d="M762.49 293.154c-10.347.445-20.456-3.303-28.196-10.454l-10.116-9.355-4.598-3.844a34.03 34.03 0 0 0-3.678-2.257 32.716 32.716 0 0 0-12.682-3.651 32.489 32.489 0 0 0-13.06 1.677 33.385 33.385 0 0 0-11.446 6.748 34.865 34.865 0 0 0-8.086 10.791 36.083 36.083 0 0 0-3.493 13.187 36.302 36.302 0 0 0 1.633 13.572 35.406 35.406 0 0 0 6.509 11.887 33.913 33.913 0 0 0 10.394 8.388 34.605 34.605 0 0 0 3.913 1.709h.098s5.498 1.505 5.655 1.525l13.266 2.847c10.373 2.242 19.469 8.663 25.3 17.857l6.574 10.393a49.84 49.84 0 0 0 6.125 9.66c4.364 5.41 9.787 9.792 15.907 12.854" fill="#8AB4F8" fill-opacity=".4"/><path d="M762.49 386.749a52.253 52.253 0 0 0 3.522 1.586 46.478 46.478 0 0 0 20.358 3.27 46.761 46.761 0 0 0 19.809-5.876c6.118-3.421 11.45-8.179 15.632-13.945 4.181-5.767 7.112-12.406 8.591-19.461a51.962 51.962 0 0 0-.023-21.412c-1.494-7.052-4.439-13.684-8.633-19.441-4.193-5.757-9.536-10.502-15.661-13.909a46.755 46.755 0 0 0-19.822-5.831c-3.717-.225-7.447 0-11.114.672l-11.955.732h-.685" fill="#669DF6"/><path d="M669.411 325.999c24.952 0 45.18-21.024 45.18-46.96 0-25.935-20.228-46.96-45.18-46.96-24.952 0-45.179 21.025-45.179 46.96 0 25.936 20.227 46.96 45.179 46.96zM821.738 209.22h23.538" stroke="#669DF6" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><path d="M808.745 212.392c1.686 0 3.053-1.42 3.053-3.172 0-1.753-1.367-3.173-3.053-3.173s-3.052 1.42-3.052 3.173c0 1.752 1.366 3.172 3.052 3.172z" fill="#669DF6"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="667" y="263" width="96" height="124"><path d="M762.49 293.154c-10.347.445-20.456-3.303-28.196-10.454l-10.116-9.355-4.598-3.844a34.03 34.03 0 0 0-3.678-2.257 32.716 32.716 0 0 0-12.682-3.651 32.489 32.489 0 0 0-13.06 1.677 33.385 33.385 0 0 0-11.446 6.748 34.865 34.865 0 0 0-8.086 10.791 36.083 36.083 0 0 0-3.493 13.187 36.302 36.302 0 0 0 1.633 13.572 35.406 35.406 0 0 0 6.509 11.887 33.913 33.913 0 0 0 10.394 8.388 34.605 34.605 0 0 0 3.913 1.709h.098s5.498 1.505 5.655 1.525l13.266 2.847c10.373 2.242 19.469 8.663 25.3 17.857l6.574 10.393a49.84 49.84 0 0 0 6.125 9.66c4.364 5.41 9.787 9.792 15.907 12.854" fill="#D2E3FC"/></mask><g mask="url(#a)"><path d="M669.411 325.999c24.952 0 45.18-21.024 45.18-46.96 0-25.935-20.228-46.96-45.18-46.96-24.952 0-45.179 21.025-45.179 46.96 0 25.936 20.227 46.96 45.179 46.96z" stroke="#000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M204.644 324.799a48.427 48.427 0 0 1 19.546-2.042 48.857 48.857 0 0 1 18.806 5.904c5.834 3.235 10.997 7.634 15.191 12.947a52.92 52.92 0 0 1 9.254 18.012 54.189 54.189 0 0 1 1.902 20.323 53.717 53.717 0 0 1-5.74 19.528c-3.131 6.054-7.38 11.405-12.505 15.748a49.643 49.643 0 0 1-17.358 9.561" fill="#F882FF"/><path d="M175.627 236.615l61.38 217.615 212.553-2.603" stroke="#669DF6" stroke-width="12" stroke-linejoin="round"/><path d="M360.179 260.329c-.633-4.307-.442-8.7.561-12.93a33.72 33.72 0 0 1 5.286-11.718 32.343 32.343 0 0 1 9.205-8.717 31.108 31.108 0 0 1 11.716-4.383l73.707-11.836a30.697 30.697 0 0 1 12.425.582 31.339 31.339 0 0 1 11.265 5.48 32.717 32.717 0 0 1 8.39 9.544 33.99 33.99 0 0 1 4.236 12.155v0a34.39 34.39 0 0 1-.552 12.913 33.69 33.69 0 0 1-5.267 11.709 32.33 32.33 0 0 1-9.178 8.721 31.09 31.09 0 0 1-11.692 4.404l-73.708 11.816a30.656 30.656 0 0 1-12.446-.548 31.315 31.315 0 0 1-11.292-5.467 32.672 32.672 0 0 1-8.412-9.552 33.964 33.964 0 0 1-4.244-12.173v0z" stroke="#EE675C" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="290" y="253" width="107" height="111"><path d="M391.564 253.272l-97.637 27.619a4.086 4.086 0 0 0-1.852 1.119 4.336 4.336 0 0 0-1.064 1.933c-.184.73-.18 1.498.012 2.227.192.728.566 1.39 1.084 1.92l71.81 74.071a4.093 4.093 0 0 0 1.872 1.1 3.985 3.985 0 0 0 2.15-.028 4.105 4.105 0 0 0 1.846-1.149 4.347 4.347 0 0 0 1.039-1.957l25.808-101.689a4.446 4.446 0 0 0-.041-2.195 4.329 4.329 0 0 0-1.079-1.887 4.091 4.091 0 0 0-1.836-1.085 3.974 3.974 0 0 0-2.112.001z" fill="#FFBA00"/></mask><g mask="url(#b)"><path d="M360.179 260.329c-.633-4.307-.442-8.7.561-12.93a33.72 33.72 0 0 1 5.286-11.718 32.343 32.343 0 0 1 9.205-8.717 31.108 31.108 0 0 1 11.716-4.383l73.707-11.836a30.697 30.697 0 0 1 12.425.582 31.339 31.339 0 0 1 11.265 5.48 32.717 32.717 0 0 1 8.39 9.544 33.99 33.99 0 0 1 4.236 12.155v0a34.39 34.39 0 0 1-.552 12.913 33.69 33.69 0 0 1-5.267 11.709 32.33 32.33 0 0 1-9.178 8.721 31.09 31.09 0 0 1-11.692 4.404l-73.708 11.816a30.656 30.656 0 0 1-12.446-.548 31.315 31.315 0 0 1-11.292-5.467 32.672 32.672 0 0 1-8.412-9.552 33.964 33.964 0 0 1-4.244-12.173v0z" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g></g><defs><clipPath id="clip0"><path fill="#fff" d="M0 0h1040v640H0z"/></clipPath></defs></svg>
-\ No newline at end of file
+<svg width="1040" height="640" viewBox="0 0 1040 640" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M873.628 193.905h-97.774c-7.381 0-13.364 6.219-13.364 13.891v231.831c0 7.672 5.983 13.891 13.364 13.891h97.774c7.381 0 13.364-6.219 13.364-13.891V207.796c0-7.672-5.983-13.891-13.364-13.891z" fill="#8AB4F8" fill-opacity=".4"/><path d="M571.48 229.049c7.467 0 13.52-6.292 13.52-14.053 0-7.762-6.053-14.054-13.52-14.054s-13.521 6.292-13.521 14.054c0 7.761 6.054 14.053 13.521 14.053z" fill="#5BB974"/><path d="m391.564 253.272-97.637 27.619a4.086 4.086 0 0 0-1.852 1.119 4.336 4.336 0 0 0-1.064 1.933c-.184.73-.18 1.498.012 2.227.192.728.566 1.39 1.084 1.92l71.81 74.071a4.093 4.093 0 0 0 1.872 1.1 3.985 3.985 0 0 0 2.15-.028 4.105 4.105 0 0 0 1.846-1.149 4.347 4.347 0 0 0 1.039-1.957l25.808-101.689a4.446 4.446 0 0 0-.041-2.195 4.329 4.329 0 0 0-1.079-1.887 4.091 4.091 0 0 0-1.836-1.085 3.974 3.974 0 0 0-2.112.001z" fill="#FCC934"/><path d="M762.49 293.154c-10.347.445-20.456-3.303-28.196-10.454l-10.116-9.355-4.598-3.844a34.03 34.03 0 0 0-3.678-2.257 32.716 32.716 0 0 0-12.682-3.651 32.489 32.489 0 0 0-13.06 1.677 33.385 33.385 0 0 0-11.446 6.748 34.865 34.865 0 0 0-8.086 10.791 36.083 36.083 0 0 0-3.493 13.187 36.302 36.302 0 0 0 1.633 13.572 35.406 35.406 0 0 0 6.509 11.887 33.913 33.913 0 0 0 10.394 8.388 34.605 34.605 0 0 0 3.913 1.709h.098s5.498 1.505 5.655 1.525l13.266 2.847c10.373 2.242 19.469 8.663 25.3 17.857l6.574 10.393a49.84 49.84 0 0 0 6.125 9.66c4.364 5.41 9.787 9.792 15.907 12.854" fill="#8AB4F8" fill-opacity=".4"/><path d="M762.49 386.749a52.253 52.253 0 0 0 3.522 1.586 46.478 46.478 0 0 0 20.358 3.27 46.761 46.761 0 0 0 19.809-5.876c6.118-3.421 11.45-8.179 15.632-13.945 4.181-5.767 7.112-12.406 8.591-19.461a51.962 51.962 0 0 0-.023-21.412c-1.494-7.052-4.439-13.684-8.633-19.441-4.193-5.757-9.536-10.502-15.661-13.909a46.755 46.755 0 0 0-19.822-5.831c-3.717-.225-7.447 0-11.114.672l-11.955.732h-.685" fill="#669DF6"/><path d="M669.411 325.999c24.952 0 45.18-21.024 45.18-46.96 0-25.935-20.228-46.96-45.18-46.96-24.952 0-45.179 21.025-45.179 46.96 0 25.936 20.227 46.96 45.179 46.96zM821.738 209.22h23.538" stroke="#669DF6" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><path d="M808.745 212.392c1.686 0 3.053-1.42 3.053-3.172 0-1.753-1.367-3.173-3.053-3.173s-3.052 1.42-3.052 3.173c0 1.752 1.366 3.172 3.052 3.172z" fill="#669DF6"/><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="667" y="263" width="96" height="124"><path d="M762.49 293.154c-10.347.445-20.456-3.303-28.196-10.454l-10.116-9.355-4.598-3.844a34.03 34.03 0 0 0-3.678-2.257 32.716 32.716 0 0 0-12.682-3.651 32.489 32.489 0 0 0-13.06 1.677 33.385 33.385 0 0 0-11.446 6.748 34.865 34.865 0 0 0-8.086 10.791 36.083 36.083 0 0 0-3.493 13.187 36.302 36.302 0 0 0 1.633 13.572 35.406 35.406 0 0 0 6.509 11.887 33.913 33.913 0 0 0 10.394 8.388 34.605 34.605 0 0 0 3.913 1.709h.098s5.498 1.505 5.655 1.525l13.266 2.847c10.373 2.242 19.469 8.663 25.3 17.857l6.574 10.393a49.84 49.84 0 0 0 6.125 9.66c4.364 5.41 9.787 9.792 15.907 12.854" fill="#D2E3FC"/></mask><g mask="url(#b)"><path d="M669.411 325.999c24.952 0 45.18-21.024 45.18-46.96 0-25.935-20.228-46.96-45.18-46.96-24.952 0-45.179 21.025-45.179 46.96 0 25.936 20.227 46.96 45.179 46.96z" stroke="#000" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M204.644 324.799a48.427 48.427 0 0 1 19.546-2.042 48.857 48.857 0 0 1 18.806 5.904c5.834 3.235 10.997 7.634 15.191 12.947a52.92 52.92 0 0 1 9.254 18.012 54.189 54.189 0 0 1 1.902 20.323 53.717 53.717 0 0 1-5.74 19.528c-3.131 6.054-7.38 11.405-12.505 15.748a49.643 49.643 0 0 1-17.358 9.561" fill="#F882FF"/><path d="m175.627 236.615 61.38 217.615 212.553-2.603" stroke="#669DF6" stroke-width="12" stroke-linejoin="round"/><path d="M360.179 260.329c-.633-4.307-.442-8.7.561-12.93a33.72 33.72 0 0 1 5.286-11.718 32.343 32.343 0 0 1 9.205-8.717 31.108 31.108 0 0 1 11.716-4.383l73.707-11.836a30.697 30.697 0 0 1 12.425.582 31.339 31.339 0 0 1 11.265 5.48 32.717 32.717 0 0 1 8.39 9.544 33.99 33.99 0 0 1 4.236 12.155v0a34.39 34.39 0 0 1-.552 12.913 33.69 33.69 0 0 1-5.267 11.709 32.33 32.33 0 0 1-9.178 8.721 31.09 31.09 0 0 1-11.692 4.404l-73.708 11.816a30.656 30.656 0 0 1-12.446-.548 31.315 31.315 0 0 1-11.292-5.467 32.672 32.672 0 0 1-8.412-9.552 33.964 33.964 0 0 1-4.244-12.173v0z" stroke="#EE675C" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><mask id="c" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="290" y="253" width="107" height="111"><path d="m391.564 253.272-97.637 27.619a4.086 4.086 0 0 0-1.852 1.119 4.336 4.336 0 0 0-1.064 1.933c-.184.73-.18 1.498.012 2.227.192.728.566 1.39 1.084 1.92l71.81 74.071a4.093 4.093 0 0 0 1.872 1.1 3.985 3.985 0 0 0 2.15-.028 4.105 4.105 0 0 0 1.846-1.149 4.347 4.347 0 0 0 1.039-1.957l25.808-101.689a4.446 4.446 0 0 0-.041-2.195 4.329 4.329 0 0 0-1.079-1.887 4.091 4.091 0 0 0-1.836-1.085 3.974 3.974 0 0 0-2.112.001z" fill="#FFBA00"/></mask><g mask="url(#c)"><path d="M360.179 260.329c-.633-4.307-.442-8.7.561-12.93a33.72 33.72 0 0 1 5.286-11.718 32.343 32.343 0 0 1 9.205-8.717 31.108 31.108 0 0 1 11.716-4.383l73.707-11.836a30.697 30.697 0 0 1 12.425.582 31.339 31.339 0 0 1 11.265 5.48 32.717 32.717 0 0 1 8.39 9.544 33.99 33.99 0 0 1 4.236 12.155v0a34.39 34.39 0 0 1-.552 12.913 33.69 33.69 0 0 1-5.267 11.709 32.33 32.33 0 0 1-9.178 8.721 31.09 31.09 0 0 1-11.692 4.404l-73.708 11.816a30.656 30.656 0 0 1-12.446-.548 31.315 31.315 0 0 1-11.292-5.467 32.672 32.672 0 0 1-8.412-9.552 33.964 33.964 0 0 1-4.244-12.173v0z" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h1040v640H0z"/></clipPath></defs></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_2x_light.svg b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_2x_light.svg
index 0ea7ffbff02..00b2485e906 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_2x_light.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/all_set_2x_light.svg
@@ -1 +1 @@
-<svg width="1040" height="640" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M0 0h1040v640H0z"/><path d="M873.039 193.068h-98.441c-7.431 0-13.455 6.26-13.455 13.983v233.371c0 7.723 6.024 13.983 13.455 13.983h98.441c7.431 0 13.455-6.26 13.455-13.983V207.051c0-7.723-6.024-13.983-13.455-13.983z" fill="#D2E3FC"/><path d="M873.039 193.068h-98.441c-7.431 0-13.455 6.26-13.455 13.983v233.371c0 7.723 6.024 13.983 13.455 13.983h98.441c7.431 0 13.455-6.26 13.455-13.983V207.051c0-7.723-6.024-13.983-13.455-13.983z" fill="#D2E3FC"/><path d="M568.831 228.445c7.519 0 13.613-6.334 13.613-14.147 0-7.813-6.094-14.147-13.613-14.147-7.518 0-13.612 6.334-13.612 14.147 0 7.813 6.094 14.147 13.612 14.147z" fill="#34A853"/><path d="M387.689 252.828l-98.303 27.803a4.128 4.128 0 0 0-1.865 1.126 4.372 4.372 0 0 0-1.07 1.946 4.48 4.48 0 0 0 .012 2.242c.194.733.57 1.4 1.091 1.933l72.299 74.563a4.13 4.13 0 0 0 1.885 1.107 4.01 4.01 0 0 0 2.165-.028 4.122 4.122 0 0 0 1.858-1.157 4.364 4.364 0 0 0 1.046-1.97l25.984-102.365a4.49 4.49 0 0 0-.04-2.209 4.364 4.364 0 0 0-1.087-1.899 4.115 4.115 0 0 0-1.849-1.092 4.006 4.006 0 0 0-2.126 0z" fill="#FFBA00"/><path d="M761.142 292.976c-10.417.448-20.595-3.325-28.388-10.523l-10.185-9.418-4.629-3.869a34.255 34.255 0 0 0-3.704-2.273 32.946 32.946 0 0 0-12.768-3.675 32.732 32.732 0 0 0-13.149 1.688 33.644 33.644 0 0 0-11.524 6.793 35.106 35.106 0 0 0-8.141 10.863 36.309 36.309 0 0 0-3.517 13.275 36.552 36.552 0 0 0 1.644 13.662 35.654 35.654 0 0 0 6.554 11.966 34.13 34.13 0 0 0 10.465 8.444 34.818 34.818 0 0 0 3.94 1.72h.098s5.536 1.515 5.693 1.535l13.357 2.866c10.443 2.257 19.602 8.72 25.472 17.976l6.619 10.461a50.166 50.166 0 0 0 6.166 9.725c4.394 5.446 9.854 9.857 16.017 12.939" fill="#D2E3FC"/><path d="M761.143 387.192a52.023 52.023 0 0 0 3.546 1.597 46.793 46.793 0 0 0 20.497 3.292 47.103 47.103 0 0 0 19.944-5.915c6.159-3.445 11.528-8.234 15.738-14.038 4.21-5.805 7.16-12.488 8.649-19.591a52.284 52.284 0 0 0-.023-21.554c-1.504-7.098-4.469-13.775-8.691-19.57s-9.602-10.572-15.768-14.002a47.09 47.09 0 0 0-19.957-5.869 46.49 46.49 0 0 0-11.19.676l-12.036.737h-.69" fill="#4285F4"/><path d="M667.429 326.04c25.122 0 45.487-21.165 45.487-47.273 0-26.107-20.365-47.272-45.487-47.272-25.122 0-45.488 21.165-45.488 47.272 0 26.108 20.366 47.273 45.488 47.273zm153.364-117.556h23.699" stroke="#4285F4" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><path d="M807.714 211.678c1.697 0 3.073-1.43 3.073-3.194s-1.376-3.194-3.073-3.194-3.073 1.43-3.073 3.194 1.376 3.194 3.073 3.194z" fill="#4285F4"/><mask id="a" maskUnits="userSpaceOnUse" x="665" y="263" width="97" height="125"><path d="M761.142 292.976c-10.417.447-20.595-3.325-28.388-10.524l-10.185-9.417-4.629-3.87a34.405 34.405 0 0 0-3.704-2.272 32.946 32.946 0 0 0-12.768-3.675 32.732 32.732 0 0 0-13.149 1.688 33.628 33.628 0 0 0-11.524 6.793 35.106 35.106 0 0 0-8.141 10.863 36.304 36.304 0 0 0-3.517 13.274 36.557 36.557 0 0 0 1.644 13.663 35.64 35.64 0 0 0 6.554 11.965 34.119 34.119 0 0 0 10.465 8.445 34.818 34.818 0 0 0 3.94 1.72h.098s5.536 1.515 5.693 1.535l13.357 2.866c10.443 2.257 19.602 8.72 25.472 17.975l6.619 10.462a50.197 50.197 0 0 0 6.166 9.725c4.394 5.446 9.854 9.857 16.017 12.939" fill="#D2E3FC"/></mask><g mask="url(#a)"><path d="M667.429 326.04c25.122 0 45.487-21.165 45.487-47.273 0-26.107-20.365-47.272-45.487-47.272-25.122 0-45.488 21.165-45.488 47.272 0 26.108 20.366 47.273 45.488 47.273z" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M199.496 324.832a48.765 48.765 0 0 1 19.68-2.056 49.19 49.19 0 0 1 18.934 5.943c5.873 3.256 11.071 7.685 15.294 13.033a53.257 53.257 0 0 1 9.317 18.132 54.55 54.55 0 0 1 1.915 20.458A54.092 54.092 0 0 1 258.857 400c-3.152 6.093-7.431 11.481-12.59 15.852-5.16 4.372-11.099 7.643-17.477 9.625" fill="#F882FF"/><path d="M170.279 236.061l61.799 219.061 214.001-2.621" stroke="#4285F4" stroke-width="12" stroke-linejoin="round"/><path d="M356.091 259.932a34.598 34.598 0 0 1 .564-13.015 33.917 33.917 0 0 1 5.323-11.796 32.527 32.527 0 0 1 9.267-8.774 31.303 31.303 0 0 1 11.795-4.413l74.21-11.915a30.918 30.918 0 0 1 12.51.586 31.566 31.566 0 0 1 11.342 5.517 32.914 32.914 0 0 1 8.446 9.607 34.203 34.203 0 0 1 4.266 12.236v0a34.616 34.616 0 0 1-.556 12.999 33.93 33.93 0 0 1-5.303 11.787 32.561 32.561 0 0 1-9.241 8.779 31.31 31.31 0 0 1-11.771 4.433l-74.21 11.894c-4.171.675-8.43.488-12.531-.551a31.546 31.546 0 0 1-11.37-5.504 32.897 32.897 0 0 1-8.468-9.615 34.155 34.155 0 0 1-4.273-12.255v0z" stroke="#FE2C25" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><mask id="b" maskUnits="userSpaceOnUse" x="286" y="252" width="107" height="112"><path d="M387.689 252.828l-98.303 27.802a4.13 4.13 0 0 0-1.865 1.127 4.367 4.367 0 0 0-1.07 1.946 4.477 4.477 0 0 0 .012 2.241c.194.733.57 1.4 1.091 1.934l72.299 74.562a4.123 4.123 0 0 0 1.885 1.108 4.01 4.01 0 0 0 2.165-.029 4.129 4.129 0 0 0 1.858-1.156 4.37 4.37 0 0 0 1.046-1.97l25.984-102.365a4.49 4.49 0 0 0-.04-2.209 4.364 4.364 0 0 0-1.087-1.899 4.126 4.126 0 0 0-1.849-1.093 4.006 4.006 0 0 0-2.126.001z" fill="#FFBA00"/></mask><g mask="url(#b)"><path d="M356.091 259.932a34.598 34.598 0 0 1 .564-13.015 33.917 33.917 0 0 1 5.323-11.796 32.527 32.527 0 0 1 9.267-8.774 31.303 31.303 0 0 1 11.795-4.413l74.21-11.915a30.918 30.918 0 0 1 12.51.586 31.566 31.566 0 0 1 11.342 5.517 32.914 32.914 0 0 1 8.446 9.607 34.203 34.203 0 0 1 4.266 12.236v0a34.616 34.616 0 0 1-.556 12.999 33.93 33.93 0 0 1-5.303 11.787 32.561 32.561 0 0 1-9.241 8.779 31.31 31.31 0 0 1-11.771 4.433l-74.21 11.894c-4.171.675-8.43.488-12.531-.551a31.546 31.546 0 0 1-11.37-5.504 32.897 32.897 0 0 1-8.468-9.615 34.155 34.155 0 0 1-4.273-12.255v0z" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
-\ No newline at end of file
+<svg width="1040" height="640" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M0 0h1040v640H0z"/><path d="M873.039 193.068h-98.441c-7.431 0-13.455 6.26-13.455 13.983v233.371c0 7.723 6.024 13.983 13.455 13.983h98.441c7.431 0 13.455-6.26 13.455-13.983V207.051c0-7.723-6.024-13.983-13.455-13.983z" fill="#D2E3FC"/><path d="M873.039 193.068h-98.441c-7.431 0-13.455 6.26-13.455 13.983v233.371c0 7.723 6.024 13.983 13.455 13.983h98.441c7.431 0 13.455-6.26 13.455-13.983V207.051c0-7.723-6.024-13.983-13.455-13.983z" fill="#D2E3FC"/><path d="M568.831 228.445c7.519 0 13.613-6.334 13.613-14.147 0-7.813-6.094-14.147-13.613-14.147-7.518 0-13.612 6.334-13.612 14.147 0 7.813 6.094 14.147 13.612 14.147z" fill="#34A853"/><path d="m387.689 252.828-98.303 27.803a4.128 4.128 0 0 0-1.865 1.126 4.372 4.372 0 0 0-1.07 1.946 4.48 4.48 0 0 0 .012 2.242c.194.733.57 1.4 1.091 1.933l72.299 74.563a4.13 4.13 0 0 0 1.885 1.107 4.01 4.01 0 0 0 2.165-.028 4.122 4.122 0 0 0 1.858-1.157 4.364 4.364 0 0 0 1.046-1.97l25.984-102.365a4.49 4.49 0 0 0-.04-2.209 4.364 4.364 0 0 0-1.087-1.899 4.115 4.115 0 0 0-1.849-1.092 4.006 4.006 0 0 0-2.126 0z" fill="#FFBA00"/><path d="M761.142 292.976c-10.417.448-20.595-3.325-28.388-10.523l-10.185-9.418-4.629-3.869a34.255 34.255 0 0 0-3.704-2.273 32.946 32.946 0 0 0-12.768-3.675 32.732 32.732 0 0 0-13.149 1.688 33.644 33.644 0 0 0-11.524 6.793 35.106 35.106 0 0 0-8.141 10.863 36.309 36.309 0 0 0-3.517 13.275 36.552 36.552 0 0 0 1.644 13.662 35.654 35.654 0 0 0 6.554 11.966 34.13 34.13 0 0 0 10.465 8.444 34.818 34.818 0 0 0 3.94 1.72h.098s5.536 1.515 5.693 1.535l13.357 2.866c10.443 2.257 19.602 8.72 25.472 17.976l6.619 10.461a50.166 50.166 0 0 0 6.166 9.725c4.394 5.446 9.854 9.857 16.017 12.939" fill="#D2E3FC"/><path d="M761.143 387.192a52.023 52.023 0 0 0 3.546 1.597 46.793 46.793 0 0 0 20.497 3.292 47.103 47.103 0 0 0 19.944-5.915c6.159-3.445 11.528-8.234 15.738-14.038 4.21-5.805 7.16-12.488 8.649-19.591a52.284 52.284 0 0 0-.023-21.554c-1.504-7.098-4.469-13.775-8.691-19.57s-9.602-10.572-15.768-14.002a47.09 47.09 0 0 0-19.957-5.869 46.49 46.49 0 0 0-11.19.676l-12.036.737h-.69" fill="#4285F4"/><path d="M667.429 326.04c25.122 0 45.487-21.165 45.487-47.273 0-26.107-20.365-47.272-45.487-47.272-25.122 0-45.488 21.165-45.488 47.272 0 26.108 20.366 47.273 45.488 47.273zm153.364-117.556h23.699" stroke="#4285F4" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><path d="M807.714 211.678c1.697 0 3.073-1.43 3.073-3.194s-1.376-3.194-3.073-3.194-3.073 1.43-3.073 3.194 1.376 3.194 3.073 3.194z" fill="#4285F4"/><mask id="a" maskUnits="userSpaceOnUse" x="665" y="263" width="97" height="125"><path d="M761.142 292.976c-10.417.447-20.595-3.325-28.388-10.524l-10.185-9.417-4.629-3.87a34.405 34.405 0 0 0-3.704-2.272 32.946 32.946 0 0 0-12.768-3.675 32.732 32.732 0 0 0-13.149 1.688 33.628 33.628 0 0 0-11.524 6.793 35.106 35.106 0 0 0-8.141 10.863 36.304 36.304 0 0 0-3.517 13.274 36.557 36.557 0 0 0 1.644 13.663 35.64 35.64 0 0 0 6.554 11.965 34.119 34.119 0 0 0 10.465 8.445 34.818 34.818 0 0 0 3.94 1.72h.098s5.536 1.515 5.693 1.535l13.357 2.866c10.443 2.257 19.602 8.72 25.472 17.975l6.619 10.462a50.197 50.197 0 0 0 6.166 9.725c4.394 5.446 9.854 9.857 16.017 12.939" fill="#D2E3FC"/></mask><g mask="url(#a)"><path d="M667.429 326.04c25.122 0 45.487-21.165 45.487-47.273 0-26.107-20.365-47.272-45.487-47.272-25.122 0-45.488 21.165-45.488 47.272 0 26.108 20.366 47.273 45.488 47.273z" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g><path d="M199.496 324.832a48.765 48.765 0 0 1 19.68-2.056 49.19 49.19 0 0 1 18.934 5.943c5.873 3.256 11.071 7.685 15.294 13.033a53.257 53.257 0 0 1 9.317 18.132 54.55 54.55 0 0 1 1.915 20.458A54.092 54.092 0 0 1 258.857 400c-3.152 6.093-7.431 11.481-12.59 15.852-5.16 4.372-11.099 7.643-17.477 9.625" fill="#F882FF"/><path d="m170.279 236.061 61.799 219.061 214.001-2.621" stroke="#4285F4" stroke-width="12" stroke-linejoin="round"/><path d="M356.091 259.932a34.598 34.598 0 0 1 .564-13.015 33.917 33.917 0 0 1 5.323-11.796 32.527 32.527 0 0 1 9.267-8.774 31.303 31.303 0 0 1 11.795-4.413l74.21-11.915a30.918 30.918 0 0 1 12.51.586 31.566 31.566 0 0 1 11.342 5.517 32.914 32.914 0 0 1 8.446 9.607 34.203 34.203 0 0 1 4.266 12.236v0a34.616 34.616 0 0 1-.556 12.999 33.93 33.93 0 0 1-5.303 11.787 32.561 32.561 0 0 1-9.241 8.779 31.31 31.31 0 0 1-11.771 4.433l-74.21 11.894c-4.171.675-8.43.488-12.531-.551a31.546 31.546 0 0 1-11.37-5.504 32.897 32.897 0 0 1-8.468-9.615 34.155 34.155 0 0 1-4.273-12.255v0z" stroke="#FE2C25" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><mask id="b" maskUnits="userSpaceOnUse" x="286" y="252" width="107" height="112"><path d="m387.689 252.828-98.303 27.802a4.13 4.13 0 0 0-1.865 1.127 4.367 4.367 0 0 0-1.07 1.946 4.477 4.477 0 0 0 .012 2.241c.194.733.57 1.4 1.091 1.934l72.299 74.562a4.123 4.123 0 0 0 1.885 1.108 4.01 4.01 0 0 0 2.165-.029 4.129 4.129 0 0 0 1.858-1.156 4.37 4.37 0 0 0 1.046-1.97l25.984-102.365a4.49 4.49 0 0 0-.04-2.209 4.364 4.364 0 0 0-1.087-1.899 4.126 4.126 0 0 0-1.849-1.093 4.006 4.006 0 0 0-2.126.001z" fill="#FFBA00"/></mask><g mask="url(#b)"><path d="M356.091 259.932a34.598 34.598 0 0 1 .564-13.015 33.917 33.917 0 0 1 5.323-11.796 32.527 32.527 0 0 1 9.267-8.774 31.303 31.303 0 0 1 11.795-4.413l74.21-11.915a30.918 30.918 0 0 1 12.51.586 31.566 31.566 0 0 1 11.342 5.517 32.914 32.914 0 0 1 8.446 9.607 34.203 34.203 0 0 1 4.266 12.236v0a34.616 34.616 0 0 1-.556 12.999 33.93 33.93 0 0 1-5.303 11.787 32.561 32.561 0 0 1-9.241 8.779 31.31 31.31 0 0 1-11.771 4.433l-74.21 11.894c-4.171.675-8.43.488-12.531-.551a31.546 31.546 0 0 1-11.37-5.504 32.897 32.897 0 0 1-8.468-9.615 34.155 34.155 0 0 1-4.273-12.255v0z" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup_shared_css.html b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup_shared_css.html
index d838a258358..4455851f50b 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup_shared_css.html
+++ b/chromium/ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup_shared_css.html
@@ -4,7 +4,6 @@
 <link rel="import" href="../../../cr_elements/shared_vars_css.html">
 <link rel="import" href="../../../cr_elements/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 
 <custom-style>
 <style is="custom-style">
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn b/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn
index 61ff21cddb5..52ddb703ae9 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn
@@ -366,7 +366,7 @@ js_library("network_choose_mobile.m") {
   deps = [
     ":network_shared_css.m",
     "//chromeos/services/network_config/public/mojom:mojom_js_library_for_compile",
-    "//third_party/polymer/v3_0/components-chromium/iron-flex-layout:iron-flex-layout",
+    "//third_party/polymer/v3_0/components-chromium/iron-flex-layout:iron-flex-layout-classes",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
     "//ui/webui/resources/js:i18n_behavior.m",
@@ -385,7 +385,7 @@ js_library("network_config.m") {
     ":network_password_input.m",
     ":network_shared_css.m",
     "//chrome/browser/ui/webui/settings/chromeos/search:mojo_bindings_js_library_for_compile",
-    "//third_party/polymer/v3_0/components-chromium/iron-flex-layout:iron-flex-layout",
+    "//third_party/polymer/v3_0/components-chromium/iron-flex-layout:iron-flex-layout-classes",
     "//third_party/polymer/v3_0/components-chromium/iron-icon:iron-icon",
     "//third_party/polymer/v3_0/components-chromium/paper-spinner:paper-spinner-lite",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
@@ -517,7 +517,7 @@ js_library("network_nameservers.m") {
   deps = [
     ":cr_policy_network_behavior_mojo.m",
     ":network_shared_css.m",
-    "//third_party/polymer/v3_0/components-chromium/iron-flex-layout:iron-flex-layout",
+    "//third_party/polymer/v3_0/components-chromium/iron-flex-layout:iron-flex-layout-classes",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_input:cr_input.m",
     "//ui/webui/resources/cr_elements/cr_radio_button:cr_radio_button.m",
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_0.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_0.svg
index a921d4bec9b..04054360fde 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_0.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_0.svg
@@ -1,3 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 15.002V7.41622L7.41622 15.002H15.002ZM16.002 17.002C16.5543 17.002 17.002 16.5543 17.002 16.002V5.002C17.002 4.1111 15.9249 3.66493 15.2949 4.2949L4.2949 15.2949C3.66493 15.9249 4.1111 17.002 5.002 17.002H16.002Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 15.002V7.416l-7.586 7.586h7.586Zm1 2a1 1 0 0 0 1-1v-11c0-.89-1.077-1.337-1.707-.707l-11 11c-.63.63-.184 1.707.707 1.707h11Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_0_with_x.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_0_with_x.svg
index 39e42cfbccb..2d059836a7d 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_0_with_x.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_0_with_x.svg
@@ -1,4 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 15.002V7.41622L7.41622 15.002H15.002ZM16.002 17.002C16.5543 17.002 17.002 16.5543 17.002 16.002V5.002C17.002 4.1111 15.9249 3.66493 15.2949 4.2949L4.2949 15.2949C3.66493 15.9249 4.1111 17.002 5.002 17.002H16.002Z" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66667 6L8 4.66667L7.33333 4L6 5.33333L4.66667 4L4 4.66667L5.33333 6L4 7.33333L4.66667 8L6 6.66667L7.33333 8L8 7.33333L6.66667 6Z"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 15.002V7.416l-7.586 7.586h7.586Zm1 2a1 1 0 0 0 1-1v-11c0-.89-1.077-1.337-1.707-.707l-11 11c-.63.63-.184 1.707.707 1.707h11ZM6.667 6 8 4.667 7.333 4 6 5.333 4.667 4 4 4.667 5.333 6 4 7.333 4.667 8 6 6.667 7.333 8 8 7.333 6.667 6Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_1.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_1.svg
index 66d98d2f9aa..ed6656fc084 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_1.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_1.svg
@@ -1,4 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 15.002V7.41622L7.41622 15.002H15.002ZM16.002 17.002C16.5543 17.002 17.002 16.5543 17.002 16.002V5.002C17.002 4.1111 15.9249 3.66493 15.2949 4.2949L4.2949 15.2949C3.66493 15.9249 4.1111 17.002 5.002 17.002H16.002Z" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.002 16.002C9.002 16.5543 8.55429 17.002 8.002 17.002H5.002C4.1111 17.002 3.66493 15.9249 4.2949 15.2949L7.2949 12.2949C7.92486 11.6649 9.002 12.1111 9.002 13.002V16.002Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 15.002V7.416l-7.586 7.586h7.586Zm1 2a1 1 0 0 0 1-1v-11c0-.89-1.077-1.337-1.707-.707l-11 11c-.63.63-.184 1.707.707 1.707h11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.002 16.002a1 1 0 0 1-1 1h-3c-.89 0-1.337-1.077-.707-1.707l3-3c.63-.63 1.707-.184 1.707.707v3Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_2.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_2.svg
index 9066c2192a4..2841f87b700 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_2.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_2.svg
@@ -1,4 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 15.002V7.41622L7.41622 15.002H15.002ZM16.002 17.002C16.5543 17.002 17.002 16.5543 17.002 16.002V5.002C17.002 4.1111 15.9249 3.66493 15.2949 4.2949L4.2949 15.2949C3.66493 15.9249 4.1111 17.002 5.002 17.002H16.002Z" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 16.002C12.002 16.5543 11.5543 17.002 11.002 17.002H5.002C4.1111 17.002 3.66493 15.9249 4.2949 15.2949L10.2949 9.2949C10.9249 8.66493 12.002 9.1111 12.002 10.002V16.002Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 15.002V7.416l-7.586 7.586h7.586Zm1 2a1 1 0 0 0 1-1v-11c0-.89-1.077-1.337-1.707-.707l-11 11c-.63.63-.184 1.707.707 1.707h11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.002 16.002a1 1 0 0 1-1 1h-6c-.89 0-1.337-1.077-.707-1.707l6-6c.63-.63 1.707-.184 1.707.707v6Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_3.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_3.svg
index a3cd603aa44..ef514aab01b 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_3.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_3.svg
@@ -1,4 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 15.002V7.41622L7.41622 15.002H15.002ZM16.002 17.002C16.5543 17.002 17.002 16.5543 17.002 16.002V5.002C17.002 4.1111 15.9249 3.66493 15.2949 4.2949L4.2949 15.2949C3.66493 15.9249 4.1111 17.002 5.002 17.002H16.002Z" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 16.002C13.5 16.5543 13.0523 17.002 12.5 17.002H5.002C4.1111 17.002 3.66493 15.9249 4.2949 15.2949L11.7929 7.79289C12.4229 7.16293 13.5 7.6091 13.5 8.5V16.002Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.002 15.002V7.416l-7.586 7.586h7.586Zm1 2a1 1 0 0 0 1-1v-11c0-.89-1.077-1.337-1.707-.707l-11 11c-.63.63-.184 1.707.707 1.707h11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 16.002a1 1 0 0 1-1 1H5.002c-.89 0-1.337-1.077-.707-1.707l7.498-7.502c.63-.63 1.707-.184 1.707.707v7.502Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_4.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_4.svg
index 2be87e0464c..b9fc68183eb 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_4.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_4.svg
@@ -1,3 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.002 16.002C17.002 16.5543 16.5543 17.002 16.002 17.002H5.002C4.1111 17.002 3.66493 15.9249 4.2949 15.2949L15.2949 4.2949C15.9249 3.66493 17.002 4.1111 17.002 5.002V16.002Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.002 16.002a1 1 0 0 1-1 1h-11c-.89 0-1.337-1.077-.707-1.707l11-11c.63-.63 1.707-.184 1.707.707v11Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_locked.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_locked.svg
index 9ed810090fa..8a20b306814 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_locked.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_locked.svg
@@ -1,3 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1876 9.58912C14.4644 9.58912 14.7358 9.6125 15 9.65744V3.82508C15 3.09148 14.1249 2.7241 13.6131 3.24283L2.23957 15.5943C1.72779 16.113 2.09026 17 2.81403 17H9.96527C9.55054 16.2733 9.31317 15.4296 9.31317 14.5297C9.31317 11.8011 11.4955 9.58912 14.1876 9.58912ZM16 16V14H13V16H16ZM13 13C12.4477 13 12 13.4477 12 14V16C12 16.5523 12.4477 17 13 17H16C16.5523 17 17 16.5523 17 16V14C17 13.4477 16.5523 13 16 13V12.5C16 11.6716 15.3284 11 14.5 11C13.6716 11 13 11.6716 13 12.5V13ZM14 13H15V12.5C15 12.2239 14.7761 12 14.5 12C14.2239 12 14 12.2239 14 12.5V13Z"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.188 9.59c.276 0 .548.023.812.067V3.825c0-.734-.875-1.1-1.387-.582L2.24 15.594c-.512.519-.15 1.406.574 1.406h7.151a4.97 4.97 0 0 1-.652-2.47c0-2.729 2.182-4.94 4.875-4.94ZM16 16v-2h-3v2h3Zm-3-3a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1v-.5a1.5 1.5 0 0 0-3 0v.5Zm1 0h1v-.5a.5.5 0 0 0-1 0v.5Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_off.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_off.svg
index 4d72a7c3c54..cf9cb2753cc 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_off.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_off.svg
@@ -1,3 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17 16C17 16.5523 16.5523 17 16 17H4.99999C4.10909 17 3.66292 15.9228 4.29288 15.2929L15.2929 4.29288C15.9228 3.66292 17 4.10909 17 4.99999V16ZM15 15V7.41418L7.41418 15H15Z"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 16a1 1 0 0 1-1 1H5c-.89 0-1.337-1.077-.707-1.707l11-11C15.923 3.663 17 4.109 17 5v11Zm-2-1V7.414L7.414 15H15Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cr_policy_network_behavior_mojo.js b/chromium/ui/webui/resources/cr_components/chromeos/network/cr_policy_network_behavior_mojo.js
index 3587a0dcffa..c98f8780fb4 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/cr_policy_network_behavior_mojo.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cr_policy_network_behavior_mojo.js
@@ -181,3 +181,84 @@
     return CrPolicyIndicatorType.NONE;
   },
 };
+
+/** @interface */
+/* #export */ class CrPolicyNetworkBehaviorMojoInterface {
+  /**
+   * @param {?OncMojo.ManagedProperty|undefined} property
+   * @return {boolean}
+   */
+  isNetworkPolicyControlled(property) {}
+
+  /**
+   * @param {?OncMojo.ManagedProperty|undefined} property
+   * @return {boolean}
+   */
+  isExtensionControlled(property) {}
+
+  /**
+   * @param {?OncMojo.ManagedProperty|undefined} property
+   * @return {boolean}
+   */
+  isControlled(property) {}
+
+  /**
+   * @param {?OncMojo.ManagedProperty|undefined} property
+   * @return {boolean}
+   */
+  isEditable(property) {}
+
+  /**
+   * @param {?OncMojo.ManagedProperty|undefined} property
+   * @return {boolean}
+   */
+  isNetworkPolicyEnforced(property) {}
+
+  /**
+   * @param {?OncMojo.ManagedProperty|undefined} property
+   * @return {boolean}
+   */
+  isNetworkPolicyRecommended(property) {}
+
+  /**
+   * @param {!chromeos.networkConfig.mojom.ManagedBoolean|
+   *         !chromeos.networkConfig.mojom.ManagedInt32|
+   *         !chromeos.networkConfig.mojom.ManagedString|
+   *         !chromeos.networkConfig.mojom.ManagedStringList|
+   *         !chromeos.networkConfig.mojom.ManagedApnList} property
+   * @return {boolean|number|string|!Array<string>|
+   *          !Array<!chromeos.networkConfig.mojom.ApnProperties>|null}
+   */
+  getEnforcedPolicyValue(property) {}
+
+  /**
+   * @param {!chromeos.networkConfig.mojom.ManagedBoolean|
+   *         !chromeos.networkConfig.mojom.ManagedInt32|
+   *         !chromeos.networkConfig.mojom.ManagedString|
+   *         !chromeos.networkConfig.mojom.ManagedStringList|
+   *         !chromeos.networkConfig.mojom.ManagedApnList} property
+   * @return {boolean|number|string|!Array<string>|
+   *          !Array<!chromeos.networkConfig.mojom.ApnProperties>|null}
+   */
+  getRecommendedPolicyValue(property) {}
+
+  /**
+   * @param {!chromeos.networkConfig.mojom.OncSource} source
+   * @return {boolean}
+   * @protected
+   */
+  isPolicySource(source) {}
+
+  /**
+   * @param {!chromeos.networkConfig.mojom.OncSource} source
+   * @return {!CrPolicyIndicatorType}
+   * @protected
+   */
+  getIndicatorTypeForSource(source) {}
+
+  /**
+   * @param {?OncMojo.ManagedProperty|undefined} property
+   * @return {CrPolicyIndicatorType}
+   */
+  getPolicyIndicatorType(property) {}
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/ethernet.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/ethernet.svg
index 6c0c5f9ab0b..0133693e958 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/ethernet.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/ethernet.svg
@@ -1,5 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<g id="ethernet">
-<path id="Shape 1" fill-rule="evenodd" clip-rule="evenodd" d="M14.0909 5L12.9373 6.175L16.6845 10L12.9373 13.825L14.0909 15L19 10L14.0909 5ZM7.06273 6.175L5.90909 5L1 10L5.90909 15L7.06273 13.825L3.31545 10L7.06273 6.175ZM7.05457 11C7.59682 11 8.03639 10.5523 8.03639 10C8.03639 9.44772 7.59682 9 7.05457 9C6.51233 9 6.07275 9.44772 6.07275 10C6.07275 10.5523 6.51233 11 7.05457 11ZM10 11C10.5422 11 10.9818 10.5523 10.9818 10C10.9818 9.44772 10.5422 9 10 9C9.45776 9 9.01819 9.44772 9.01819 10C9.01819 10.5523 9.45776 11 10 11ZM12.9454 11C13.4877 11 13.9273 10.5523 13.9273 10C13.9273 9.44772 13.4877 9 12.9454 9C12.4032 9 11.9636 9.44772 11.9636 10C11.9636 10.5523 12.4032 11 12.9454 11Z" />
-</g>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="m14.09 5-1.153 1.175L16.685 10l-3.748 3.825L14.091 15 19 10l-4.91-5ZM7.064 6.175 5.909 5 1 10l4.91 5 1.153-1.175L3.315 10l3.748-3.825ZM7.055 11a.991.991 0 0 0 .981-1c0-.552-.44-1-.981-1a.991.991 0 0 0-.982 1c0 .552.44 1 .982 1ZM10 11a.991.991 0 0 0 .982-1c0-.552-.44-1-.982-1a.991.991 0 0 0-.982 1c0 .552.44 1 .982 1Zm2.945 0a.991.991 0 0 0 .982-1c0-.552-.44-1-.982-1a.991.991 0 0 0-.981 1c0 .552.44 1 .981 1Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js
index 35afad45f29..486ffaf021b 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js
@@ -329,7 +329,13 @@ Polymer({
     eapInnerItemsPeap_: {
       type: Array,
       readOnly: true,
-      value: ['Automatic', 'MD5', 'MSCHAPv2'],
+      value: () => {
+        const values = ['Automatic', 'MD5', 'MSCHAPv2'];
+        if (loadTimeData.getBoolean('eapGtcWifiAuthentication')) {
+          values.push('GTC');
+        }
+        return values;
+      },
     },
 
     /**
@@ -415,10 +421,11 @@ Polymer({
     'updateHiddenNetworkWarning_(autoConnect_)',
     'updateConfigProperties_(mojoType_, managedProperties_)',
     'updateSecurity_(configProperties_, securityType_)',
+    'updateCertItems_(cachedServerCaCerts_, cachedUserCerts_, vpnType_, ' +
+        'securityType_, eapProperties_.outer)',
     'updateEapOuter_(eapProperties_.outer)',
     'updateEapCerts_(eapProperties_.*, serverCaCerts_, userCerts_)',
     'updateShowEap_(configProperties_.*, eapProperties_.*, securityType_)',
-    'updateCertItems_(cachedServerCaCerts_, cachedUserCerts_, vpnType_)',
     'updateVpnType_(configProperties_, vpnType_, ipsecAuthType_)',
     'updateVpnIPsecAuthTypeItems_(vpnType_)',
     'updateVpnIPsecCerts_(vpnType_, ipsecAuthType_,' +
@@ -590,8 +597,8 @@ Polymer({
    * @private
    */
   onEnterEvent_(event) {
-    if (event.path[0].localName === 'network-config-input' ||
-        event.path[0].localName === 'network-password-input') {
+    if (event.composedPath()[0].localName === 'network-config-input' ||
+        event.composedPath()[0].localName === 'network-password-input') {
       this.onEnterPressedInInput_();
       event.stopPropagation();
     }
@@ -1101,6 +1108,12 @@ Polymer({
     } else {
       this.set('eapProperties_.inner', undefined);
     }
+
+    if (eap.outer !== 'EAP-TLS') {
+      this.set('eapProperties_.clientCertType', 'None');
+      this.set('eapProperties_.clientCertPkcs11Id', '');
+      this.selectedUserCertHash_ = NO_USER_CERT_HASH;
+    }
   },
 
   /** @private */
@@ -1297,8 +1310,15 @@ Polymer({
         cert.hash = '';
       }  // Clear the hash to invalidate the certificate.
     });
-    if (isOpenVpn) {
-      // OpenVPN allows but does not require a user certificate.
+
+    const isEap = this.securityType_ === mojom.SecurityType.kWpaEap;
+    const isEapTls = isEap && this.eapProperties_.outer === 'EAP-TLS';
+
+    // User certificate is allowed but not required for OpenVPN and
+    // EAP protocols except EAP-TLS (required for EAP-TLS)
+    const isUserCertOptional = isOpenVpn || (isEap && !isEapTls);
+
+    if (isUserCertOptional) {
       userCerts.unshift(this.getDefaultCert_(
           chromeos.networkConfig.mojom.CertificateType.kUserCert,
           this.i18n('networkNoUserCert'), NO_USER_CERT_HASH));
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/onc_mojo.js b/chromium/ui/webui/resources/cr_components/chromeos/network/onc_mojo.js
index ccdc6ebccff..439c848ef26 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/onc_mojo.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/onc_mojo.js
@@ -650,6 +650,7 @@
           networkTechnology: '',
           roaming: false,
           signalStrength: 0,
+          simLockEnabled: false,
           simLocked: false,
         };
         break;
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/roaming_badge.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/roaming_badge.svg
index d4cf40d38d3..a117ee5abeb 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/roaming_badge.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/roaming_badge.svg
@@ -1,3 +1 @@
-<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.95 7V7.05H2H3.13128H3.18128V7V4.79581H3.62462L5.16837 7.02844L5.18328 7.05H5.2095H6.50838H6.55838V7V6.93296V6.91717L6.54931 6.90425L4.95274 4.6281C5.31836 4.49012 5.62108 4.27747 5.8597 3.99004L5.85999 3.98968C6.11344 3.67864 6.23994 3.31259 6.23994 2.89385C6.23994 2.52279 6.15423 2.18991 5.98174 1.89661C5.80943 1.59801 5.568 1.36533 5.25845 1.19905C4.95376 1.03238 4.59609 0.95 4.18715 0.95H2H1.95V1V7ZM4.79409 2.33939L4.79409 2.3394L4.79462 2.34001C4.93237 2.49896 5.00028 2.67741 5.00028 2.87709C5.00028 3.10476 4.92408 3.28977 4.77253 3.4361C4.62117 3.58224 4.42477 3.6567 4.17877 3.6567H3.18128V2.09749H4.19553C4.46388 2.09749 4.66054 2.18016 4.79409 2.33939Z" fill="#202124"/>
-</svg>
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.95 7v.05h1.231V4.796h.444l1.543 2.232.015.022h1.375v-.133l-.009-.013-1.596-2.276c.365-.138.668-.35.907-.638.253-.311.38-.677.38-1.096a1.93 1.93 0 0 0-.258-.997 1.802 1.802 0 0 0-.724-.698C4.954 1.032 4.596.95 4.188.95H1.95V7Zm2.844-4.66A.797.797 0 0 1 5 2.877a.742.742 0 0 1-.227.56.817.817 0 0 1-.594.22H3.18v-1.56h1.015c.268 0 .465.083.598.242Z" fill="#202124"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/vpn.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/vpn.svg
index fcb05b418e5..960f4d9c12d 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/vpn.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/vpn.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px">
-  <path d="M6.364 5C3.956 5 2 7.018 2 9.5S3.956 14 6.364 14c1.898 0 3.512-1.252 4.11-3H13.5v3h3v-3H18V8h-7.527c-.597-1.747-2.21-3-4.11-3zm0 6c-.8 0-1.455-.675-1.455-1.5S5.563 8 6.363 8c.8 0 1.454.675 1.454 1.5S7.164 11 6.364 11z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M6.364 5C3.956 5 2 7.018 2 9.5S3.956 14 6.364 14c1.898 0 3.512-1.252 4.11-3H13.5v3h3v-3H18V8h-7.527c-.597-1.747-2.21-3-4.11-3zm0 6c-.8 0-1.455-.675-1.455-1.5S5.563 8 6.363 8c.8 0 1.454.675 1.454 1.5S7.164 11 6.364 11z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_0.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_0.svg
index 1387407428c..31712de51d6 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_0.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_0.svg
@@ -1,3 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.44247 16.7281C9.72802 17.0905 10.2698 17.0905 10.5554 16.7289L17.8425 7.49646C18.1038 7.16533 18.0317 6.68099 17.6876 6.44135C16.4955 5.61135 13.7328 4 10 4C6.26792 4 3.50455 5.61135 2.31239 6.44135C1.96831 6.68099 1.89621 7.16533 2.15749 7.49646L9.44247 16.7281ZM4.61134 7.37751L9.99932 14.2053L15.3886 7.37739C14.1425 6.71268 12.2788 6 10 6C7.72159 6 5.85753 6.71277 4.61134 7.37751Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.442 16.728a.706.706 0 0 0 1.113 0l7.288-9.232a.734.734 0 0 0-.155-1.055C16.496 5.611 13.733 4 10 4 6.268 4 3.505 5.611 2.312 6.441a.734.734 0 0 0-.155 1.055l7.285 9.232Zm-4.83-9.35 5.387 6.827 5.39-6.828C14.143 6.713 12.279 6 10 6c-2.278 0-4.142.713-5.389 1.378Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_0_with_x.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_0_with_x.svg
index 16b158e658e..12c1dfbcb72 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_0_with_x.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_0_with_x.svg
@@ -1,4 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.44247 16.7281C9.72802 17.0905 10.2698 17.0905 10.5554 16.7289L17.8425 7.49646C18.1038 7.16533 18.0317 6.68099 17.6876 6.44135C16.4955 5.61135 13.7328 4 10 4C6.26792 4 3.50455 5.61135 2.31239 6.44135C1.96831 6.68099 1.89621 7.16533 2.15749 7.49646L9.44247 16.7281ZM4.61134 7.37751L9.99932 14.2053L15.3886 7.37739C14.1425 6.71268 12.2788 6 10 6C7.72159 6 5.85753 6.71277 4.61134 7.37751Z" />
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6667 9L12 7.66667L11.3333 7L10 8.33333L8.66667 7L8 7.66667L9.33333 9L8 10.3333L8.66667 11L10 9.66667L11.3333 11L12 10.3333L10.6667 9Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.442 16.728a.706.706 0 0 0 1.113 0l7.288-9.232a.734.734 0 0 0-.155-1.055C16.496 5.611 13.733 4 10 4 6.268 4 3.505 5.611 2.312 6.441a.734.734 0 0 0-.155 1.055l7.285 9.232Zm-4.83-9.35 5.387 6.827 5.39-6.828C14.143 6.713 12.279 6 10 6c-2.278 0-4.142.713-5.389 1.378Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.667 9 12 7.667 11.333 7 10 8.333 8.667 7 8 7.667 9.333 9 8 10.333l.667.667L10 9.667 11.333 11l.667-.667L10.667 9Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_1.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_1.svg
index 7e4e49c8ac5..c67500052c1 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_1.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_1.svg
@@ -1,4 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.44247 16.7281C9.72802 17.0905 10.2698 17.0905 10.5554 16.7289L17.8425 7.49646C18.1038 7.16533 18.0317 6.68099 17.6876 6.44135C16.4955 5.61135 13.7328 4 10 4C6.26792 4 3.50455 5.61135 2.31239 6.44135C1.96831 6.68099 1.89621 7.16533 2.15749 7.49646L9.44247 16.7281ZM4.61134 7.37751L9.99932 14.2053L15.3886 7.37739C14.1425 6.71268 12.2788 6 10 6C7.72159 6 5.85753 6.71277 4.61134 7.37751Z"/>
-<path d="M13.8332 12.5761C12.7208 12.237 11.4317 12 10 12C8.56817 12 7.27891 12.2372 6.16626 12.5764L9.44247 16.7281C9.72802 17.0905 10.2698 17.0905 10.5554 16.7289L13.8332 12.5761Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.442 16.728a.706.706 0 0 0 1.113 0l7.288-9.232a.734.734 0 0 0-.155-1.055C16.496 5.611 13.733 4 10 4 6.268 4 3.505 5.611 2.312 6.441a.734.734 0 0 0-.155 1.055l7.285 9.232Zm-4.83-9.35 5.387 6.827 5.39-6.828C14.143 6.713 12.279 6 10 6c-2.278 0-4.142.713-5.389 1.378Z"/><path d="M13.833 12.576A13.122 13.122 0 0 0 10 12c-1.432 0-2.721.237-3.834.576l3.276 4.152a.706.706 0 0 0 1.113 0l3.278-4.152Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_2.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_2.svg
index ce2f84d3f63..9003ff1af85 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_2.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_2.svg
@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-  <path fill-rule="evenodd" d="M7.99999976,4.4408921e-15 C11.7328,4.4408921e-15 14.4955,1.61135 15.6876,2.44135 C16.0317,2.68099 16.1038,3.16533 15.8425,3.49646 L15.8425,3.49646 L8.5554,12.7289 C8.2698,13.0905 7.72802,13.0905 7.44247,12.7281 L7.44247,12.7281 L0.15749,3.49646 C-0.10379,3.16533 -0.03169,2.68099 0.31239,2.44135 C1.50455,1.61135 4.26792,4.4408921e-15 7.99999976,4.4408921e-15 Z M7.9986,5 C9.23601,5 10.350948,5.2101302 11.3111193,5.50860386 L11.6254,5.6112 L11.6254,5.6112 C12.314,4.73885 13.3886,3.37739 13.3886,3.37739 C12.1425,2.71268 10.2788,2 8,2 C5.72159,2 3.85753,2.71277 2.61134,3.37751 C2.61134,3.37751 3.36107,4.32758 4.3736,5.61069 C5.40153,5.25916 6.62474,5 7.9986,5 Z" transform="translate(2 4)"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 4c3.733 0 6.495 1.611 7.688 2.441.344.24.416.724.155 1.055l-7.288 9.233a.706.706 0 0 1-1.113 0L2.157 7.495a.734.734 0 0 1 .155-1.055C3.505 5.611 6.268 4 10 4Zm-.001 5c1.237 0 2.352.21 3.312.509l.314.102 1.764-2.234C14.143 6.713 12.279 6 10 6c-2.278 0-4.142.713-5.389 1.378L6.374 9.61A11.186 11.186 0 0 1 9.999 9Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_3.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_3.svg
index 38bfe4f6302..a27b3102c2a 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_3.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_3.svg
@@ -1,3 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5554 16.7289C10.2698 17.0905 9.72802 17.0905 9.44247 16.7281L2.15749 7.49646C1.89621 7.16533 1.96831 6.68099 2.31239 6.44135C3.50455 5.61135 6.26792 4 10 4C13.7328 4 16.4955 5.61135 17.6876 6.44135C18.0317 6.68099 18.1038 7.16533 17.8425 7.49646L10.5554 16.7289ZM5.46762 8.4626L4.61134 7.37751C5.85753 6.71277 7.72159 6 10 6C12.2788 6 14.1425 6.71268 15.3886 7.37739L14.5315 8.46329C13.348 7.94707 11.8035 7.5 9.99865 7.5C8.19498 7.5 6.65099 7.94668 5.46762 8.4626Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.555 16.729a.706.706 0 0 1-1.113 0L2.157 7.495a.734.734 0 0 1 .155-1.055C3.505 5.611 6.268 4 10 4c3.733 0 6.495 1.611 7.688 2.441.344.24.416.724.155 1.055l-7.288 9.233ZM5.468 8.463 4.61 7.378C5.858 6.713 7.721 6 10 6c2.279 0 4.143.713 5.389 1.377l-.857 1.086A11.335 11.335 0 0 0 9.998 7.5a11.33 11.33 0 0 0-4.531.963Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_4.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_4.svg
index c741f5e2b42..fb761fff5d8 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_4.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_4.svg
@@ -1,3 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.8425 7.49646C18.1038 7.16533 18.0317 6.68099 17.6876 6.44135C16.4955 5.61135 13.7328 4 10 4C6.26792 4 3.50455 5.61135 2.31239 6.44135C1.96831 6.68099 1.89621 7.16533 2.15749 7.49646L9.44247 16.7281C9.72802 17.0905 10.2698 17.0905 10.5554 16.7289L17.8425 7.49646Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.843 7.496a.734.734 0 0 0-.155-1.055C16.496 5.611 13.733 4 10 4 6.268 4 3.505 5.611 2.312 6.441a.734.734 0 0 0-.155 1.055l7.285 9.232a.706.706 0 0 0 1.113 0l7.288-9.232Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_off.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_off.svg
index aa572361e47..28b0b2dfd8e 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_off.svg
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network/wifi_off.svg
@@ -1,3 +1 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10 6C7.96011 6 6.14746 6.5389 4.6073 7.37238L9.99933 14.2053L15.3926 7.37228C13.8524 6.53869 12.0402 6 10 6ZM17.8425 7.49646L10.5554 16.7289C10.2698 17.0905 9.72802 17.0905 9.44247 16.7281L2.15749 7.49646C1.89621 7.16533 1.96831 6.68099 2.31239 6.44135C3.50455 5.61135 6.26792 4 10 4C13.7328 4 16.4955 5.61135 17.6876 6.44135C18.0317 6.68099 18.1038 7.16533 17.8425 7.49646Z" />
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 6c-2.04 0-3.853.539-5.393 1.372L10 14.205l5.394-6.833A11.244 11.244 0 0 0 10 6Zm7.843 1.496-7.288 9.233a.706.706 0 0 1-1.113 0L2.157 7.495a.734.734 0 0 1 .155-1.055C3.505 5.611 6.268 4 10 4c3.733 0 6.495 1.611 7.688 2.441.344.24.416.724.155 1.055Z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network_health/BUILD.gn b/chromium/ui/webui/resources/cr_components/chromeos/network_health/BUILD.gn
index 11a7ebf4717..95b678127d0 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network_health/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network_health/BUILD.gn
@@ -9,6 +9,7 @@ assert(is_chromeos, "Only ChromeOS components belong here.")
 
 js_type_check("closure_compile_module") {
   is_polymer3 = true
+  closure_flags = default_closure_args + mojom_js_args
   deps = [
     ":mojo_interface_provider",
     ":network_diagnostics",
@@ -20,12 +21,15 @@ js_type_check("closure_compile_module") {
 }
 
 js_library("mojo_interface_provider") {
-  deps = [ "//chromeos/services/network_health/public/mojom:mojom_js_library_for_compile" ]
+  deps = [
+    "//chromeos/services/network_health/public/mojom:mojom_js_library_for_compile",
+    "//chromeos/services/network_health/public/mojom:mojom_webui_js",
+  ]
 }
 
 js_library("network_health_summary") {
   deps = [
-    "//chromeos/services/network_health/public/mojom:mojom_js_library_for_compile",
+    "//chromeos/services/network_health/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_components/chromeos/network:onc_mojo",
     "//ui/webui/resources/js:i18n_behavior.m",
@@ -42,21 +46,21 @@ js_library("network_diagnostics") {
     ":mojo_interface_provider",
     ":network_diagnostics_types",
     ":routine_group",
-    "//chromeos/services/network_health/public/mojom:mojom_js_library_for_compile",
+    "//chromeos/services/network_health/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
 }
 
 js_library("network_diagnostics_types") {
-  deps = [ "//chromeos/services/network_health/public/mojom:mojom_js_library_for_compile" ]
+  deps = [ "//chromeos/services/network_health/public/mojom:mojom_webui_js" ]
 }
 
 js_library("routine_group") {
   deps = [
     ":network_diagnostics_types",
     ":network_health_container",
-    "//chromeos/services/network_health/public/mojom:mojom_js_library_for_compile",
+    "//chromeos/services/network_health/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
   ]
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network_health/mojo_interface_provider.js b/chromium/ui/webui/resources/cr_components/chromeos/network_health/mojo_interface_provider.js
index b7142739fb1..3be86e48e69 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network_health/mojo_interface_provider.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network_health/mojo_interface_provider.js
@@ -2,10 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// TODO(crbug/1127165, crbug/1179821): Remove these Mojo lite bindings once the
+// Tast test JS fixtures are converted from a hardcoded string to a file and
+// the global chromeos.networkDiagnostics.mojom namespace is avoided. In the
+// meantime, these lite bindings are required to expose the namespace.
 import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
 import 'chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js';
 import 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/network_diagnostics.mojom-lite.js';
 
+import {NetworkDiagnosticsRoutines, NetworkDiagnosticsRoutinesInterface} from 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/network_diagnostics.mojom-webui.js';
+
 /**
  * @fileoverview
  * This file contains the mojo interface for the network diagnostics service and
@@ -13,15 +19,12 @@ import 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/ne
  */
 
 /**
- * @type
- *     {?chromeos.networkDiagnostics.mojom.NetworkDiagnosticsRoutinesInterface}
+ * @type {?NetworkDiagnosticsRoutinesInterface}
  */
 let networkDiagnosticsService = null;
 
 /**
- * @param
- *     {!chromeos.networkDiagnostics.mojom.NetworkDiagnosticsRoutinesInterface}
- *     testNetworkDiagnosticsService
+ * @param {!NetworkDiagnosticsRoutinesInterface} testNetworkDiagnosticsService
  */
 export function setNetworkDiagnosticsServiceForTesting(
     testNetworkDiagnosticsService) {
@@ -29,15 +32,13 @@ export function setNetworkDiagnosticsServiceForTesting(
 }
 
 /**
- * @return
- *     {!chromeos.networkDiagnostics.mojom.NetworkDiagnosticsRoutinesInterface}
+ * @return {!NetworkDiagnosticsRoutinesInterface}
  */
 export function getNetworkDiagnosticsService() {
   if (networkDiagnosticsService) {
     return networkDiagnosticsService;
   }
 
-  networkDiagnosticsService =
-      chromeos.networkDiagnostics.mojom.NetworkDiagnosticsRoutines.getRemote();
+  networkDiagnosticsService = NetworkDiagnosticsRoutines.getRemote();
   return networkDiagnosticsService;
 }
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics.js b/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics.js
index e9e45f5aa89..6d0a42a7e6d 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics.js
@@ -2,14 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js';
-import 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/network_diagnostics.mojom-lite.js';
 import '../../../cr_elements/cr_button/cr_button.m.js';
 import './routine_group.js';
 
 import {loadTimeData} from '//resources/js/load_time_data.m.js';
 import {html, Polymer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {ArcDnsResolutionProblem, ArcHttpProblem, ArcPingProblem, CaptivePortalProblem, DnsLatencyProblem, DnsResolutionProblem, DnsResolverPresentProblem, GatewayCanBePingedProblem, HasSecureWiFiConnectionProblem, HttpFirewallProblem, HttpsFirewallProblem, HttpsLatencyProblem, RoutineProblems, RoutineType, RoutineVerdict, SignalStrengthProblem, VideoConferencingProblem} from 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/network_diagnostics.mojom-webui.js';
 
 import {I18nBehavior} from '../../../js/i18n_behavior.m.js';
 
@@ -20,13 +18,10 @@ import {Routine, RoutineGroup, RoutineResponse} from './network_diagnostics_type
  * @fileoverview Polymer element for interacting with Network Diagnostics.
  */
 
-// Namespace to make using the mojom objects more readable.
-const diagnosticsMojom = chromeos.networkDiagnostics.mojom;
-
 /**
  * Helper function to create a routine object.
  * @param {string} name
- * @param {!diagnosticsMojom.RoutineType} type
+ * @param {!RoutineType} type
  * @param {!RoutineGroup} group
  * @param {!function()} func
  * @return {!Routine} Routine object
@@ -74,7 +69,7 @@ Polymer({
             routines: [
               {
                 name: 'NetworkDiagnosticsLanConnectivity',
-                type: diagnosticsMojom.RoutineType.kLanConnectivity,
+                type: RoutineType.kLanConnectivity,
                 func: () => getNetworkDiagnosticsService().runLanConnectivity(),
               },
             ]
@@ -84,12 +79,12 @@ Polymer({
             routines: [
               {
                 name: 'NetworkDiagnosticsSignalStrength',
-                type: diagnosticsMojom.RoutineType.kSignalStrength,
+                type: RoutineType.kSignalStrength,
                 func: () => getNetworkDiagnosticsService().runSignalStrength(),
               },
               {
                 name: 'NetworkDiagnosticsHasSecureWiFiConnection',
-                type: diagnosticsMojom.RoutineType.kHasSecureWiFiConnection,
+                type: RoutineType.kHasSecureWiFiConnection,
                 func: () =>
                     getNetworkDiagnosticsService().runHasSecureWiFiConnection(),
               },
@@ -100,7 +95,7 @@ Polymer({
             routines: [
               {
                 name: 'NetworkDiagnosticsCaptivePortal',
-                type: diagnosticsMojom.RoutineType.kCaptivePortal,
+                type: RoutineType.kCaptivePortal,
                 func: () => getNetworkDiagnosticsService().runCaptivePortal(),
               },
             ]
@@ -110,7 +105,7 @@ Polymer({
             routines: [
               {
                 name: 'NetworkDiagnosticsGatewayCanBePinged',
-                type: diagnosticsMojom.RoutineType.kGatewayCanBePinged,
+                type: RoutineType.kGatewayCanBePinged,
                 func: () =>
                     getNetworkDiagnosticsService().runGatewayCanBePinged(),
               },
@@ -121,18 +116,18 @@ Polymer({
             routines: [
               {
                 name: 'NetworkDiagnosticsHttpFirewall',
-                type: diagnosticsMojom.RoutineType.kHttpFirewall,
+                type: RoutineType.kHttpFirewall,
                 func: () => getNetworkDiagnosticsService().runHttpFirewall(),
               },
               {
                 name: 'NetworkDiagnosticsHttpsFirewall',
-                type: diagnosticsMojom.RoutineType.kHttpsFirewall,
+                type: RoutineType.kHttpsFirewall,
                 func: () => getNetworkDiagnosticsService().runHttpsFirewall(),
 
               },
               {
                 name: 'NetworkDiagnosticsHttpsLatency',
-                type: diagnosticsMojom.RoutineType.kHttpsLatency,
+                type: RoutineType.kHttpsLatency,
                 func: () => getNetworkDiagnosticsService().runHttpsLatency(),
               },
             ]
@@ -142,18 +137,18 @@ Polymer({
             routines: [
               {
                 name: 'NetworkDiagnosticsDnsResolverPresent',
-                type: diagnosticsMojom.RoutineType.kDnsResolverPresent,
+                type: RoutineType.kDnsResolverPresent,
                 func: () =>
                     getNetworkDiagnosticsService().runDnsResolverPresent(),
               },
               {
                 name: 'NetworkDiagnosticsDnsLatency',
-                type: diagnosticsMojom.RoutineType.kDnsLatency,
+                type: RoutineType.kDnsLatency,
                 func: () => getNetworkDiagnosticsService().runDnsLatency(),
               },
               {
                 name: 'NetworkDiagnosticsDnsResolution',
-                type: diagnosticsMojom.RoutineType.kDnsResolution,
+                type: RoutineType.kDnsResolution,
                 func: () => getNetworkDiagnosticsService().runDnsResolution(),
               },
             ]
@@ -163,7 +158,7 @@ Polymer({
             routines: [
               {
                 name: 'NetworkDiagnosticsVideoConferencing',
-                type: diagnosticsMojom.RoutineType.kVideoConferencing,
+                type: RoutineType.kVideoConferencing,
                 // A null stun_server_hostname will use the routine
                 // default.
                 func: () => getNetworkDiagnosticsService().runVideoConferencing(
@@ -178,17 +173,17 @@ Polymer({
             routines: [
               {
                 name: 'ArcNetworkDiagnosticsPing',
-                type: diagnosticsMojom.RoutineType.kArcPing,
+                type: RoutineType.kArcPing,
                 func: () => getNetworkDiagnosticsService().runArcPing(),
               },
               {
                 name: 'ArcNetworkDiagnosticsHttp',
-                type: diagnosticsMojom.RoutineType.kArcHttp,
+                type: RoutineType.kArcHttp,
                 func: () => getNetworkDiagnosticsService().runArcHttp(),
               },
               {
                 name: 'ArcNetworkDiagnosticsDnsResolution',
-                type: diagnosticsMojom.RoutineType.kArcDnsResolution,
+                type: RoutineType.kArcDnsResolution,
                 func: () =>
                     getNetworkDiagnosticsService().runArcDnsResolution(),
               },
@@ -240,7 +235,7 @@ Polymer({
   },
 
   /**
-   * @param {!diagnosticsMojom.RoutineType} type
+   * @param {!RoutineType} type
    * @private
    */
   runRoutine_(type) {
@@ -256,7 +251,7 @@ Polymer({
   },
 
   /**
-   * @param {!diagnosticsMojom.RoutineType} type
+   * @param {!RoutineType} type
    * @param {!RoutineResponse} response
    * @private
    */
@@ -279,13 +274,13 @@ Polymer({
   getRoutineResult_(routine) {
     let verdict = '';
     switch (routine.result.verdict) {
-      case diagnosticsMojom.RoutineVerdict.kNoProblem:
+      case RoutineVerdict.kNoProblem:
         verdict = this.i18n('NetworkDiagnosticsPassed');
         break;
-      case diagnosticsMojom.RoutineVerdict.kProblem:
+      case RoutineVerdict.kProblem:
         verdict = this.i18n('NetworkDiagnosticsFailed');
         break;
-      case diagnosticsMojom.RoutineVerdict.kNotRun:
+      case RoutineVerdict.kNotRun:
         verdict = this.i18n('NetworkDiagnosticsNotRun');
         break;
     }
@@ -304,8 +299,8 @@ Polymer({
   },
 
   /**
-   * @param {!diagnosticsMojom.RoutineType} type The type of routine
-   * @param {!diagnosticsMojom.RoutineProblems} problems The list of
+   * @param {!RoutineType} type The type of routine
+   * @param {!RoutineProblems} problems The list of
    *     problems for the routine
    * @param {boolean} translate Flag to return a translated string
    * @return {!Array<string>} List of network diagnostic problem strings
@@ -316,46 +311,43 @@ Polymer({
 
     let problemStrings = [];
     switch (type) {
-      case diagnosticsMojom.RoutineType.kSignalStrength:
+      case RoutineType.kSignalStrength:
         if (!problems.signalStrengthProblems) {
           break;
         }
 
         for (const problem of problems.signalStrengthProblems) {
           switch (problem) {
-            case diagnosticsMojom.SignalStrengthProblem.kWeakSignal:
+            case SignalStrengthProblem.kWeakSignal:
               problemStrings.push(getString('SignalStrengthProblem_Weak'));
               break;
           }
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kGatewayCanBePinged:
+      case RoutineType.kGatewayCanBePinged:
         if (!problems.gatewayCanBePingedProblems) {
           break;
         }
 
         for (const problem of problems.gatewayCanBePingedProblems) {
           switch (problem) {
-            case diagnosticsMojom.GatewayCanBePingedProblem.kUnreachableGateway:
+            case GatewayCanBePingedProblem.kUnreachableGateway:
               problemStrings.push(getString('GatewayPingProblem_Unreachable'));
               break;
-            case diagnosticsMojom.GatewayCanBePingedProblem
-                .kFailedToPingDefaultNetwork:
+            case GatewayCanBePingedProblem.kFailedToPingDefaultNetwork:
               problemStrings.push(
                   getString('GatewayPingProblem_NoDefaultPing'));
               break;
-            case diagnosticsMojom.GatewayCanBePingedProblem
-                .kDefaultNetworkAboveLatencyThreshold:
+            case GatewayCanBePingedProblem.kDefaultNetworkAboveLatencyThreshold:
               problemStrings.push(
                   getString('GatewayPingProblem_DefaultLatency'));
               break;
-            case diagnosticsMojom.GatewayCanBePingedProblem
-                .kUnsuccessfulNonDefaultNetworksPings:
+            case GatewayCanBePingedProblem.kUnsuccessfulNonDefaultNetworksPings:
               problemStrings.push(
                   getString('GatewayPingProblem_NoNonDefaultPing'));
               break;
-            case diagnosticsMojom.GatewayCanBePingedProblem
+            case GatewayCanBePingedProblem
                 .kNonDefaultNetworksAboveLatencyThreshold:
               problemStrings.push(
                   getString('GatewayPingProblem_NonDefaultLatency'));
@@ -364,46 +356,41 @@ Polymer({
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kHasSecureWiFiConnection:
+      case RoutineType.kHasSecureWiFiConnection:
         if (!problems.hasSecureWifiConnectionProblems) {
           break;
         }
 
         for (const problem of problems.hasSecureWifiConnectionProblems) {
           switch (problem) {
-            case diagnosticsMojom.HasSecureWiFiConnectionProblem
-                .kSecurityTypeNone:
+            case HasSecureWiFiConnectionProblem.kSecurityTypeNone:
               problemStrings.push(getString('SecureWifiProblem_None'));
               break;
-            case diagnosticsMojom.HasSecureWiFiConnectionProblem
-                .kSecurityTypeWep8021x:
+            case HasSecureWiFiConnectionProblem.kSecurityTypeWep8021x:
               problemStrings.push(getString('SecureWifiProblem_8021x'));
               break;
-            case diagnosticsMojom.HasSecureWiFiConnectionProblem
-                .kSecurityTypeWepPsk:
+            case HasSecureWiFiConnectionProblem.kSecurityTypeWepPsk:
               problemStrings.push(getString('SecureWifiProblem_PSK'));
               break;
-            case diagnosticsMojom.HasSecureWiFiConnectionProblem
-                .kUnknownSecurityType:
+            case HasSecureWiFiConnectionProblem.kUnknownSecurityType:
               problemStrings.push(getString('SecureWifiProblem_Unknown'));
               break;
           }
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kDnsResolverPresent:
+      case RoutineType.kDnsResolverPresent:
         if (!problems.dnsResolverPresentProblems) {
           break;
         }
 
         for (const problem of problems.dnsResolverPresentProblems) {
           switch (problem) {
-            case diagnosticsMojom.DnsResolverPresentProblem.kNoNameServersFound:
+            case DnsResolverPresentProblem.kNoNameServersFound:
               problemStrings.push(
                   getString('DnsResolverProblem_NoNameServers'));
               break;
-            case diagnosticsMojom.DnsResolverPresentProblem
-                .kMalformedNameServers:
+            case DnsResolverPresentProblem.kMalformedNameServers:
               problemStrings.push(
                   getString('DnsResolverProblem_MalformedNameServers'));
               break;
@@ -411,23 +398,22 @@ Polymer({
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kDnsLatency:
+      case RoutineType.kDnsLatency:
         if (!problems.dnsLatencyProblems) {
           break;
         }
 
         for (const problem of problems.dnsLatencyProblems) {
           switch (problem) {
-            case diagnosticsMojom.DnsLatencyProblem.kHostResolutionFailure:
+            case DnsLatencyProblem.kHostResolutionFailure:
               problemStrings.push(
                   getString('DnsLatencyProblem_FailedResolveHosts'));
               break;
-            case diagnosticsMojom.DnsLatencyProblem.kSlightlyAboveThreshold:
+            case DnsLatencyProblem.kSlightlyAboveThreshold:
               problemStrings.push(
                   getString('DnsLatencyProblem_LatencySlightlyAbove'));
               break;
-            case diagnosticsMojom.DnsLatencyProblem
-                .kSignificantlyAboveThreshold:
+            case DnsLatencyProblem.kSignificantlyAboveThreshold:
               problemStrings.push(
                   getString('DnsLatencyProblem_LatencySignificantlyAbove'));
               break;
@@ -435,14 +421,14 @@ Polymer({
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kDnsResolution:
+      case RoutineType.kDnsResolution:
         if (!problems.dnsResolutionProblems) {
           break;
         }
 
         for (const problem of problems.dnsResolutionProblems) {
           switch (problem) {
-            case diagnosticsMojom.DnsResolutionProblem.kFailedToResolveHost:
+            case DnsResolutionProblem.kFailedToResolveHost:
               problemStrings.push(
                   getString('DnsResolutionProblem_FailedResolve'));
               break;
@@ -450,23 +436,22 @@ Polymer({
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kHttpFirewall:
+      case RoutineType.kHttpFirewall:
         if (!problems.httpFirewallProblems) {
           break;
         }
 
         for (const problem of problems.httpFirewallProblems) {
           switch (problem) {
-            case diagnosticsMojom.HttpFirewallProblem
-                .kDnsResolutionFailuresAboveThreshold:
+            case HttpFirewallProblem.kDnsResolutionFailuresAboveThreshold:
               problemStrings.push(
                   getString('FirewallProblem_DnsResolutionFailureRate'));
               break;
-            case diagnosticsMojom.HttpFirewallProblem.kFirewallDetected:
+            case HttpFirewallProblem.kFirewallDetected:
               problemStrings.push(
                   getString('FirewallProblem_FirewallDetected'));
               break;
-            case diagnosticsMojom.HttpFirewallProblem.kPotentialFirewall:
+            case HttpFirewallProblem.kPotentialFirewall:
               problemStrings.push(
                   getString('FirewallProblem_FirewallSuspected'));
               break;
@@ -474,23 +459,22 @@ Polymer({
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kHttpsFirewall:
+      case RoutineType.kHttpsFirewall:
         if (!problems.httpsFirewallProblems) {
           break;
         }
 
         for (const problem of problems.httpsFirewallProblems) {
           switch (problem) {
-            case diagnosticsMojom.HttpsFirewallProblem
-                .kHighDnsResolutionFailureRate:
+            case HttpsFirewallProblem.kHighDnsResolutionFailureRate:
               problemStrings.push(
                   getString('FirewallProblem_DnsResolutionFailureRate'));
               break;
-            case diagnosticsMojom.HttpsFirewallProblem.kFirewallDetected:
+            case HttpsFirewallProblem.kFirewallDetected:
               problemStrings.push(
                   getString('FirewallProblem_FirewallDetected'));
               break;
-            case diagnosticsMojom.HttpsFirewallProblem.kPotentialFirewall:
+            case HttpsFirewallProblem.kPotentialFirewall:
               problemStrings.push(
                   getString('FirewallProblem_FirewallSuspected'));
               break;
@@ -498,25 +482,25 @@ Polymer({
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kHttpsLatency:
+      case RoutineType.kHttpsLatency:
         if (!problems.httpsLatencyProblems) {
           break;
         }
 
         for (const problem of problems.httpsLatencyProblems) {
           switch (problem) {
-            case diagnosticsMojom.HttpsLatencyProblem.kFailedDnsResolutions:
+            case HttpsLatencyProblem.kFailedDnsResolutions:
               problemStrings.push(
                   getString('HttpsLatencyProblem_FailedDnsResolution'));
               break;
-            case diagnosticsMojom.HttpsLatencyProblem.kFailedHttpsRequests:
+            case HttpsLatencyProblem.kFailedHttpsRequests:
               problemStrings.push(
                   getString('HttpsLatencyProblem_FailedHttpsRequests'));
               break;
-            case diagnosticsMojom.HttpsLatencyProblem.kHighLatency:
+            case HttpsLatencyProblem.kHighLatency:
               problemStrings.push(getString('HttpsLatencyProblem_HighLatency'));
               break;
-            case diagnosticsMojom.HttpsLatencyProblem.kVeryHighLatency:
+            case HttpsLatencyProblem.kVeryHighLatency:
               problemStrings.push(
                   getString('HttpsLatencyProblem_VeryHighLatency'));
               break;
@@ -524,55 +508,55 @@ Polymer({
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kCaptivePortal:
+      case RoutineType.kCaptivePortal:
         if (!problems.captivePortalProblems) {
           break;
         }
 
         for (const problem of problems.captivePortalProblems) {
           switch (problem) {
-            case diagnosticsMojom.CaptivePortalProblem.kNoActiveNetworks:
+            case CaptivePortalProblem.kNoActiveNetworks:
               problemStrings.push(
                   getString('CaptivePortalProblem_NoActiveNetworks'));
               break;
-            case diagnosticsMojom.CaptivePortalProblem.kUnknownPortalState:
+            case CaptivePortalProblem.kUnknownPortalState:
               problemStrings.push(
                   getString('CaptivePortalProblem_UnknownPortalState'));
               break;
-            case diagnosticsMojom.CaptivePortalProblem.kPortalSuspected:
+            case CaptivePortalProblem.kPortalSuspected:
               problemStrings.push(
                   getString('CaptivePortalProblem_PortalSuspected'));
               break;
-            case diagnosticsMojom.CaptivePortalProblem.kPortal:
+            case CaptivePortalProblem.kPortal:
               problemStrings.push(getString('CaptivePortalProblem_Portal'));
               break;
-            case diagnosticsMojom.CaptivePortalProblem.kProxyAuthRequired:
+            case CaptivePortalProblem.kProxyAuthRequired:
               problemStrings.push(
                   getString('CaptivePortalProblem_ProxyAuthRequired'));
               break;
-            case diagnosticsMojom.CaptivePortalProblem.kNoInternet:
+            case CaptivePortalProblem.kNoInternet:
               problemStrings.push(getString('CaptivePortalProblem_NoInternet'));
               break;
           }
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kVideoConferencing:
+      case RoutineType.kVideoConferencing:
         if (!problems.videoConferencingProblems) {
           break;
         }
 
         for (const problem of problems.videoConferencingProblems) {
           switch (problem) {
-            case diagnosticsMojom.VideoConferencingProblem.kUdpFailure:
+            case VideoConferencingProblem.kUdpFailure:
               problemStrings.push(
                   getString('VideoConferencingProblem_UdpFailure'));
               break;
-            case diagnosticsMojom.VideoConferencingProblem.kTcpFailure:
+            case VideoConferencingProblem.kTcpFailure:
               problemStrings.push(
                   getString('VideoConferencingProblem_TcpFailure'));
               break;
-            case diagnosticsMojom.VideoConferencingProblem.kMediaFailure:
+            case VideoConferencingProblem.kMediaFailure:
               problemStrings.push(
                   getString('VideoConferencingProblem_MediaFailure'));
               break;
@@ -580,7 +564,7 @@ Polymer({
         }
         break;
 
-      case diagnosticsMojom.RoutineType.kArcPing:
+      case RoutineType.kArcPing:
         if (!problems.arcPingProblems) {
           break;
         }
@@ -589,7 +573,7 @@ Polymer({
                 .map(getString));
         break;
 
-      case diagnosticsMojom.RoutineType.kArcDnsResolution:
+      case RoutineType.kArcDnsResolution:
         if (!problems.arcDnsResolutionProblems) {
           break;
         }
@@ -598,7 +582,7 @@ Polymer({
                 .map(getString));
         break;
 
-      case diagnosticsMojom.RoutineType.kArcHttp:
+      case RoutineType.kArcHttp:
         if (!problems.arcHttpProblems) {
           break;
         }
@@ -614,7 +598,7 @@ Polymer({
   /**
    * Converts a collection ArcPingProblem into string identifiers for display.
    *
-   * @param {!Array<diagnosticsMojom.ArcPingProblem>} problems A collection of
+   * @param {!Array<ArcPingProblem>} problems A collection of
    *     ArcPingProblem.
    * @returns {!Array<string>} A collection of string identifiers for each
    *     problem in the input.
@@ -625,30 +609,26 @@ Polymer({
 
     for (const problem of problems) {
       switch (problem) {
-        case diagnosticsMojom.ArcPingProblem.kFailedToGetArcServiceManager:
-        case diagnosticsMojom.ArcPingProblem
-            .kGetManagedPropertiesTimeoutFailure:
+        case ArcPingProblem.kFailedToGetArcServiceManager:
+        case ArcPingProblem.kGetManagedPropertiesTimeoutFailure:
           problemStringIds.push('ArcRoutineProblem_InternalError');
           break;
-        case diagnosticsMojom.ArcPingProblem.kFailedToGetNetInstanceForPingTest:
+        case ArcPingProblem.kFailedToGetNetInstanceForPingTest:
           problemStringIds.push('ArcRoutineProblem_ArcNotRunning');
           break;
-        case diagnosticsMojom.ArcPingProblem.kUnreachableGateway:
+        case ArcPingProblem.kUnreachableGateway:
           problemStringIds.push('GatewayPingProblem_Unreachable');
           break;
-        case diagnosticsMojom.ArcPingProblem.kFailedToPingDefaultNetwork:
+        case ArcPingProblem.kFailedToPingDefaultNetwork:
           problemStringIds.push('GatewayPingProblem_NoDefaultPing');
           break;
-        case diagnosticsMojom.ArcPingProblem
-            .kDefaultNetworkAboveLatencyThreshold:
+        case ArcPingProblem.kDefaultNetworkAboveLatencyThreshold:
           problemStringIds.push('GatewayPingProblem_DefaultLatency');
           break;
-        case diagnosticsMojom.ArcPingProblem
-            .kUnsuccessfulNonDefaultNetworksPings:
+        case ArcPingProblem.kUnsuccessfulNonDefaultNetworksPings:
           problemStringIds.push('GatewayPingProblem_NoNonDefaultPing');
           break;
-        case diagnosticsMojom.ArcPingProblem
-            .kNonDefaultNetworksAboveLatencyThreshold:
+        case ArcPingProblem.kNonDefaultNetworksAboveLatencyThreshold:
           problemStringIds.push('GatewayPingProblem_NonDefaultLatency');
       }
     }
@@ -660,7 +640,7 @@ Polymer({
    * Converts a collection ArcDnsResolutionProblem into string identifiers for
    * display.
    *
-   * @param {!Array<diagnosticsMojom.ArcDnsResolutionProblem>} problems A
+   * @param {!Array<ArcDnsResolutionProblem>} problems A
    *     collection of ArcDnsResolutionProblem.
    * @returns {!Array<string>} A collection of string identifiers for each
    *     problem in the input.
@@ -671,21 +651,20 @@ Polymer({
 
     for (const problem of problems) {
       switch (problem) {
-        case diagnosticsMojom.ArcDnsResolutionProblem
-            .kFailedToGetArcServiceManager:
+        case ArcDnsResolutionProblem.kFailedToGetArcServiceManager:
           problemStringIds.push('ArcRoutineProblem_InternalError');
           break;
-        case diagnosticsMojom.ArcDnsResolutionProblem
+        case ArcDnsResolutionProblem
             .kFailedToGetNetInstanceForDnsResolutionTest:
           problemStringIds.push('ArcRoutineProblem_ArcNotRunning');
           break;
-        case diagnosticsMojom.ArcDnsResolutionProblem.kHighLatency:
+        case ArcDnsResolutionProblem.kHighLatency:
           problemStringIds.push('DnsLatencyProblem_LatencySlightlyAbove');
           break;
-        case diagnosticsMojom.ArcDnsResolutionProblem.kVeryHighLatency:
+        case ArcDnsResolutionProblem.kVeryHighLatency:
           problemStringIds.push('DnsLatencyProblem_LatencySignificantlyAbove');
           break;
-        case diagnosticsMojom.ArcDnsResolutionProblem.kFailedDnsQueries:
+        case ArcDnsResolutionProblem.kFailedDnsQueries:
           problemStringIds.push('DnsResolutionProblem_FailedResolve');
           break;
       }
@@ -697,7 +676,7 @@ Polymer({
   /**
    * Converts a collection ArcHttpProblem into string identifiers for display.
    *
-   * @param {!Array<diagnosticsMojom.ArcHttpProblem>} problems A collection of
+   * @param {!Array<ArcHttpProblem>} problems A collection of
    *     ArcHttpProblem.
    * @returns {!Array<string>} A collection of string identifiers for each
    *     problem in the input.
@@ -708,19 +687,19 @@ Polymer({
 
     for (const problem of problems) {
       switch (problem) {
-        case diagnosticsMojom.ArcHttpProblem.kFailedToGetArcServiceManager:
+        case ArcHttpProblem.kFailedToGetArcServiceManager:
           problemStringIds.push('ArcRoutineProblem_InternalError');
           break;
-        case diagnosticsMojom.ArcHttpProblem.kFailedToGetNetInstanceForHttpTest:
+        case ArcHttpProblem.kFailedToGetNetInstanceForHttpTest:
           problemStringIds.push('ArcRoutineProblem_ArcNotRunning');
           break;
-        case diagnosticsMojom.ArcHttpProblem.kHighLatency:
+        case ArcHttpProblem.kHighLatency:
           problemStringIds.push('ArcHttpProblem_HighLatency');
           break;
-        case diagnosticsMojom.ArcHttpProblem.kVeryHighLatency:
+        case ArcHttpProblem.kVeryHighLatency:
           problemStringIds.push('ArcHttpProblem_VeryHighLatency');
           break;
-        case diagnosticsMojom.ArcHttpProblem.kFailedHttpRequests:
+        case ArcHttpProblem.kFailedHttpRequests:
           problemStringIds.push('ArcHttpProblem_FailedHttpRequests');
           break;
       }
@@ -730,17 +709,17 @@ Polymer({
   },
 
   /**
-   * @param {!chromeos.networkDiagnostics.mojom.RoutineVerdict} verdict
+   * @param {!RoutineVerdict} verdict
    * @return {string} Untranslated string for a network diagnostic verdict
    * @private
    */
   getRoutineVerdictRawString_(verdict) {
     switch (verdict) {
-      case diagnosticsMojom.RoutineVerdict.kNoProblem:
+      case RoutineVerdict.kNoProblem:
         return 'Passed';
-      case diagnosticsMojom.RoutineVerdict.kNotRun:
+      case RoutineVerdict.kNotRun:
         return 'Not Run';
-      case diagnosticsMojom.RoutineVerdict.kProblem:
+      case RoutineVerdict.kProblem:
         return 'Failed';
     }
     return 'Unknown';
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics_types.js b/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics_types.js
index de86112b3ee..f6a23cbd7e1 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics_types.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics_types.js
@@ -2,8 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/network_diagnostics.mojom-lite.js';
+import {RoutineResult, RoutineType} from 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/network_diagnostics.mojom-webui.js';
 
 /**
  * @fileoverview
@@ -13,7 +12,7 @@ import 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/ne
 /**
  * A routine response from the Network Diagnostics mojo service.
  * @typedef {{
- *   result: chromeos.networkDiagnostics.mojom.RoutineResult,
+ *   result: RoutineResult,
  * }}
  */
 export let RoutineResponse;
@@ -23,12 +22,12 @@ export let RoutineResponse;
  * routine, and it's transient state.
  * @typedef {{
  *   name: string,
- *   type: !chromeos.networkDiagnostics.mojom.RoutineType,
+ *   type: !RoutineType,
  *   group: !RoutineGroup,
  *   func: function(),
  *   running: boolean,
  *   resultMsg: string,
- *   result: ?chromeos.networkDiagnostics.mojom.RoutineResult,
+ *   result: ?RoutineResult,
  * }}
  */
 export let Routine;
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_health_summary.js b/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_health_summary.js
index 38bbeae0dec..82c6037a4ef 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_health_summary.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network_health/network_health_summary.js
@@ -2,13 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/network_types.mojom-lite.js';
-import 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/network_health.mojom-lite.js';
 import '../../../cr_elements/shared_style_css.m.js';
 import '../network/network_shared_css.m.js';
 
 import {html, Polymer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {NetworkType, PortalState} from 'chrome://resources/mojo/chromeos/services/network_config/public/mojom/network_types.mojom-webui.js';
+import {Network, NetworkHealthService, NetworkHealthServiceRemote, NetworkHealthState, NetworkState, UInt32Value} from 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/network_health.mojom-webui.js';
 
 import {I18nBehavior} from '../../../js/i18n_behavior.m.js';
 import {OncMojo} from '../network/onc_mojo.m.js';
@@ -34,14 +33,14 @@ Polymer({
   /**
    * Network Health State object.
    * @private
-   * @type {chromeos.networkHealth.mojom.NetworkHealthState}
+   * @type {NetworkHealthState}
    */
   networkHealthState_: null,
 
   /**
    * Network Health mojo remote.
    * @private
-   * @type {?chromeos.networkHealth.mojom.NetworkHealthServiceRemote}
+   * @type {?NetworkHealthServiceRemote}
    */
   networkHealth_: null,
 
@@ -54,8 +53,7 @@ Polymer({
 
   /** @override */
   created() {
-    this.networkHealth_ =
-        chromeos.networkHealth.mojom.NetworkHealthService.getRemote();
+    this.networkHealth_ = NetworkHealthService.getRemote();
   },
 
   /** @override */
@@ -81,26 +79,26 @@ Polymer({
   /**
    * Returns a string for the given NetworkState.
    * @private
-   * @param {chromeos.networkHealth.mojom.NetworkState} state
+   * @param {NetworkState} state
    * @return {string}
    */
   getNetworkStateString_(state) {
     switch (state) {
-      case chromeos.networkHealth.mojom.NetworkState.kUninitialized:
+      case NetworkState.kUninitialized:
         return this.i18n('NetworkHealthStateUninitialized');
-      case chromeos.networkHealth.mojom.NetworkState.kDisabled:
+      case NetworkState.kDisabled:
         return this.i18n('NetworkHealthStateDisabled');
-      case chromeos.networkHealth.mojom.NetworkState.kProhibited:
+      case NetworkState.kProhibited:
         return this.i18n('NetworkHealthStateProhibited');
-      case chromeos.networkHealth.mojom.NetworkState.kNotConnected:
+      case NetworkState.kNotConnected:
         return this.i18n('NetworkHealthStateNotConnected');
-      case chromeos.networkHealth.mojom.NetworkState.kConnecting:
+      case NetworkState.kConnecting:
         return this.i18n('NetworkHealthStateConnecting');
-      case chromeos.networkHealth.mojom.NetworkState.kPortal:
+      case NetworkState.kPortal:
         return this.i18n('NetworkHealthStatePortal');
-      case chromeos.networkHealth.mojom.NetworkState.kConnected:
+      case NetworkState.kConnected:
         return this.i18n('NetworkHealthStateConnected');
-      case chromeos.networkHealth.mojom.NetworkState.kOnline:
+      case NetworkState.kOnline:
         return this.i18n('NetworkHealthStateOnline');
     }
 
@@ -112,13 +110,10 @@ Polymer({
    * Returns a boolean flag to show the PortalState attribute. The information
    * is not meaningful in all cases and should be hidden to prevent confusion.
    * @private
-   * @param {chromeos.networkHealth.mojom.Network} network
+   * @param {Network} network
    * @return {boolean}
    */
   showPortalState_(network) {
-    const NetworkState = chromeos.networkHealth.mojom.NetworkState;
-    const PortalState = chromeos.networkConfig.mojom.PortalState;
-
     if (network.state === NetworkState.kOnline &&
         network.portalState === PortalState.kOnline) {
       return false;
@@ -141,7 +136,7 @@ Polymer({
   /**
    * Returns a string for the given PortalState.
    * @private
-   * @param {chromeos.networkConfig.mojom.PortalState} state
+   * @param {PortalState} state
    * @return {string}
    */
   getPortalStateString_(state) {
@@ -151,7 +146,7 @@ Polymer({
   /**
    * Returns a string for the given NetworkType.
    * @private
-   * @param {chromeos.networkConfig.mojom.NetworkType} type
+   * @param {NetworkType} type
    * @return {string}
    */
   getNetworkTypeString_(type) {
@@ -161,20 +156,20 @@ Polymer({
   /**
    * Returns a icon for the given NetworkType.
    * @private
-   * @param {chromeos.networkConfig.mojom.NetworkType} type
+   * @param {NetworkType} type
    * @return {string}
    */
   getNetworkTypeIcon_(type) {
     switch (type) {
-      case chromeos.networkConfig.mojom.NetworkType.kEthernet:
+      case NetworkType.kEthernet:
         return TechnologyIcons.ETHERNET;
-      case chromeos.networkConfig.mojom.NetworkType.kWiFi:
+      case NetworkType.kWiFi:
         return TechnologyIcons.WIFI;
-      case chromeos.networkConfig.mojom.NetworkType.kVPN:
+      case NetworkType.kVPN:
         return TechnologyIcons.VPN;
-      case chromeos.networkConfig.mojom.NetworkType.kTether:
-      case chromeos.networkConfig.mojom.NetworkType.kMobile:
-      case chromeos.networkConfig.mojom.NetworkType.kCellular:
+      case NetworkType.kTether:
+      case NetworkType.kMobile:
+      case NetworkType.kCellular:
         return TechnologyIcons.CELLULAR;
       default:
         return '';
@@ -184,7 +179,7 @@ Polymer({
   /**
    * Returns a string for the given signal strength.
    * @private
-   * @param {?chromeos.networkHealth.mojom.UInt32Value} signalStrength
+   * @param {?UInt32Value} signalStrength
    * @return {string}
    */
   getSignalStrengthString_(signalStrength) {
@@ -194,15 +189,13 @@ Polymer({
   /**
    * Returns a boolean flag if the open to settings link should be shown.
    * @private
-   * @param {chromeos.networkHealth.mojom.Network} network
+   * @param {Network} network
    * @return {boolean}
    */
   showSettingsLink_(network) {
     const validStates = [
-      chromeos.networkHealth.mojom.NetworkState.kConnected,
-      chromeos.networkHealth.mojom.NetworkState.kConnecting,
-      chromeos.networkHealth.mojom.NetworkState.kPortal,
-      chromeos.networkHealth.mojom.NetworkState.kOnline
+      NetworkState.kConnected, NetworkState.kConnecting, NetworkState.kPortal,
+      NetworkState.kOnline
     ];
     return validStates.includes(network.state);
   },
@@ -210,7 +203,7 @@ Polymer({
   /**
    * Returns a URL for the network's settings page.
    * @private
-   * @param {chromeos.networkHealth.mojom.Network} network
+   * @param {Network} network
    * @return {string}
    */
   getNetworkUrl_(network) {
@@ -229,7 +222,7 @@ Polymer({
 
   /**
    * Returns a boolean flag if the routine type should be expanded.
-   * @param {chromeos.networkConfig.mojom.NetworkType} type
+   * @param {NetworkType} type
    * @private
    */
   getTypeExpanded_(type) {
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network_health/routine_group.js b/chromium/ui/webui/resources/cr_components/chromeos/network_health/routine_group.js
index 60f9f8d5713..f7f6c897bbb 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/network_health/routine_group.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/network_health/routine_group.js
@@ -6,13 +6,11 @@
  * @fileoverview Polymer element for a group of diagnostic routines.
  */
 
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js';
-import 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/network_diagnostics.mojom-lite.js';
 import '//resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
 import './network_health_container.js';
 
 import {html, Polymer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {RoutineResult, RoutineVerdict} from 'chrome://resources/mojo/chromeos/services/network_health/public/mojom/network_diagnostics.mojom-webui.js';
 
 import {I18nBehavior} from '../../../js/i18n_behavior.m.js';
 
@@ -92,12 +90,12 @@ Polymer({
       }
 
       switch (routine.result.verdict) {
-        case chromeos.networkDiagnostics.mojom.RoutineVerdict.kNoProblem:
+        case RoutineVerdict.kNoProblem:
           continue;
-        case chromeos.networkDiagnostics.mojom.RoutineVerdict.kProblem:
+        case RoutineVerdict.kProblem:
           failed = true;
           break;
-        case chromeos.networkDiagnostics.mojom.RoutineVerdict.kNotRun:
+        case RoutineVerdict.kNotRun:
           complete = false;
           break;
       }
@@ -124,7 +122,7 @@ Polymer({
 
   /**
    * Helper function to get the icon for a routine based on the result.
-   * @param {!chromeos.networkDiagnostics.mojom.RoutineResult} result
+   * @param {!RoutineResult} result
    * @return {string}
    * @private
    */
@@ -134,11 +132,11 @@ Polymer({
     }
 
     switch (result.verdict) {
-      case chromeos.networkDiagnostics.mojom.RoutineVerdict.kNoProblem:
+      case RoutineVerdict.kNoProblem:
         return Icons.TEST_PASSED;
-      case chromeos.networkDiagnostics.mojom.RoutineVerdict.kProblem:
+      case RoutineVerdict.kProblem:
         return Icons.TEST_FAILED;
-      case chromeos.networkDiagnostics.mojom.RoutineVerdict.kNotRun:
+      case RoutineVerdict.kNotRun:
         return Icons.TEST_NOT_RUN;
     }
 
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/os_cr_components.gni b/chromium/ui/webui/resources/cr_components/chromeos/os_cr_components.gni
index 6ab06eb9705..7ed33bffa18 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/os_cr_components.gni
+++ b/chromium/ui/webui/resources/cr_components/chromeos/os_cr_components.gni
@@ -70,15 +70,3 @@ cr_components_chromeos_auto_imports = [
   "ui/webui/resources/html/list_property_update_behavior.html|ListPropertyUpdateBehavior",
   "ui/webui/resources/html/polymer.html|Polymer,flush,html,afterNextRender",
 ]
-
-cr_components_migrated_imports = [
-  "ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_metrics_utils.html",
-  "ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_utils.html",
-  "ui/webui/resources/cr_components/chromeos/bluetooth/bluetooth_types.html",
-  "ui/webui/resources/cr_components/chromeos/network_health/mojo_interface_provider.html",
-  "ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics_types.html",
-  "ui/webui/resources/cr_components/chromeos/network_health/network_diagnostics.html",
-  "ui/webui/resources/cr_components/chromeos/network_health/network_health_container.html",
-  "ui/webui/resources/cr_components/chromeos/network_health/network_health_summary.html",
-  "ui/webui/resources/cr_components/chromeos/network_health/routine_group.html",
-]
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js
index 99d0ef0aff5..627021abaed 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js
+++ b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/pin_keyboard.js
@@ -52,7 +52,7 @@ const PIN_INPUT_ALLOWED_NON_NUMBER_KEY_CODES = new Set([
   9,   // tab
   37,  // left
   39,  // right
-  // We don't allow back, forward, or refresh.
+  // We don't allow back or forward.
   183,  // ZoomToggle, aka fullscreen
   182,  // LaunchApplication1, aka overview mode
   216,  // BrightnessDown
@@ -434,6 +434,11 @@ Polymer({
       return true;
     }
 
+    // Valid if the key is Ctrl+Shift+Refresh to allow users rotate the screen
+    if (event.keyCode === 168 && event.ctrlKey && event.shiftKey) {
+      return true;
+    }
+
     // Valid for the ChromeVox combination.
     if (event.ctrlKey && event.altKey && event.key === 'z') {
       return true;
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.d.ts
new file mode 100644
index 00000000000..b627c783692
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.d.ts
@@ -0,0 +1,17 @@
+// Copyright 2022 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 {LegacyElementMixin} from 'chrome://resources/polymer/v3_0/polymer/lib/legacy/legacy-element-mixin.js';
+
+export interface AddSmbShareDialogElement extends LegacyElementMixin,
+                                                  HTMLElement {
+  lastUrl: string;
+  shouldOpenFileManagerAfterMount: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'add-smb-share-dialog': AddSmbShareDialogElement;
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.html b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.html
index 28ce9da951f..302fd8970dd 100644
--- a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.html
+++ b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/add_smb_share_dialog.html
@@ -140,7 +140,7 @@
         </div>
         <cr-searchable-drop-down id="address" label="[[i18n('smbShareUrl')]]"
             value="{{mountUrl_}}" items="[[discoveredShares_]]"
-            placeholder="\\server\share"
+            placeholder="\\\\server\\share"
             error-message-allowed
             update-value-on-input autofocus
             show-loading="[[discoveryActive_]]"
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/smb_browser_proxy.d.ts b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/smb_browser_proxy.d.ts
new file mode 100644
index 00000000000..19753945662
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/smb_browser_proxy.d.ts
@@ -0,0 +1,46 @@
+// Copyright 2022 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.
+
+export enum SmbMountResult {
+  SUCCESS = 0,
+  UNKNOWN_FAILURE = 1,
+  AUTHENTICATION_FAILED = 2,
+  NOT_FOUND = 3,
+  UNSUPPORTED_DEVICE = 4,
+  MOUNT_EXISTS = 5,
+  INVALID_URL = 6,
+  INVALID_OPERATION = 7,
+  DBUS_PARSE_FAILED = 8,
+  OUT_OF_MEMORY = 9,
+  ABORTED = 10,
+  IO_ERROR = 11,
+  TOO_MANY_OPENED = 12,
+  INVALID_SSO_URL = 13,
+  INVALID_USERNAME = 14,
+}
+
+export enum SmbAuthMethod {
+  KERBEROS = 'kerberos',
+  CREDENTIALS = 'credentials',
+}
+
+export interface SmbBrowserProxy {
+  smbMount(
+      smbUrl: string, smbName: string, username: string, password: string,
+      authMethod: string, shouldOpenFileManagerAfterMount: boolean,
+      saveCredentials: boolean): Promise<SmbMountResult>;
+  startDiscovery(): void;
+  updateCredentials(mountId: string, username: string, password: string): void;
+}
+
+declare class SmbBrowserProxyImpl implements SmbBrowserProxy {
+  smbMount(
+      smbUrl: string, smbName: string, username: string, password: string,
+      authMethod: string, shouldOpenFileManagerAfterMount: boolean,
+      saveCredentials: boolean): Promise<SmbMountResult>;
+  startDiscovery(): void;
+  updateCredentials(mountId: string, username: string, password: string): void;
+}
+
+export {SmbBrowserProxyImpl};
diff --git a/chromium/ui/webui/resources/cr_components/color_change_listener/BUILD.gn b/chromium/ui/webui/resources/cr_components/color_change_listener/BUILD.gn
index 02b30f8a2f2..97fa1971347 100644
--- a/chromium/ui/webui/resources/cr_components/color_change_listener/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_components/color_change_listener/BUILD.gn
@@ -3,15 +3,10 @@
 # found in the LICENSE file.
 
 import("//mojo/public/tools/bindings/mojom.gni")
-import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/typescript/ts_library.gni")
+import("//ui/webui/resources/tools/generate_grd.gni")
 
-js_type_check("closure_compile") {
-  closure_flags = default_closure_args + mojom_js_args
-  deps = [
-    ":browser_proxy",
-    ":colors_css_updater",
-  ]
-}
+preprocess_folder = "$root_gen_dir/ui/webui/resources/preprocessed/cr_components/color_change_listener"
 
 mojom("mojom") {
   sources = [ "color_change_listener.mojom" ]
@@ -19,10 +14,41 @@ mojom("mojom") {
   webui_module_path = "chrome://resources/cr_components/color_change_listener/"
 }
 
-js_library("browser_proxy") {
+copy("copy_mojom") {
   deps = [ ":mojom_webui_js" ]
+  sources = [ "$root_gen_dir/mojom-webui/ui/webui/resources/cr_components/color_change_listener/color_change_listener.mojom-webui.js" ]
+  outputs = [ "$target_gen_dir/{{source_file_part}}" ]
+}
+
+copy("copy_src") {
+  sources = [
+    "browser_proxy.ts",
+    "colors_css_updater.ts",
+  ]
+  outputs = [ "$target_gen_dir/{{source_file_part}}" ]
+}
+
+ts_library("build_ts") {
+  root_dir = target_gen_dir
+  out_dir = preprocess_folder
+  composite = true
+  tsconfig_base = "tsconfig_base.json"
+  in_files = [
+    "browser_proxy.ts",
+    "colors_css_updater.ts",
+    "color_change_listener.mojom-webui.js",
+  ]
+  deps = [ "//ui/webui/resources/mojo:library" ]
+  extra_deps = [
+    ":copy_mojom",
+    ":copy_src",
+  ]
 }
 
-js_library("colors_css_updater") {
-  deps = [ ":browser_proxy" ]
+generate_grd("build_grdp") {
+  grd_prefix = "cr_components_color_change_listener"
+  out_grd = "$target_gen_dir/resources.grdp"
+  public_deps = [ ":build_ts" ]
+  manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
+  resource_path_prefix = "cr_components/color_change_listener"
 }
diff --git a/chromium/ui/webui/resources/cr_components/color_change_listener/browser_proxy.js b/chromium/ui/webui/resources/cr_components/color_change_listener/browser_proxy.ts
index c202293f47c..a9c2ccdbe2a 100644
--- a/chromium/ui/webui/resources/cr_components/color_change_listener/browser_proxy.js
+++ b/chromium/ui/webui/resources/cr_components/color_change_listener/browser_proxy.ts
@@ -12,27 +12,23 @@
 
 import {PageCallbackRouter, PageHandler} from './color_change_listener.mojom-webui.js';
 
-/** @type {?BrowserProxy} */
-let instance = null;
+let instance: BrowserProxy|null = null;
 
 export class BrowserProxy {
+  callbackRouter: PageCallbackRouter;
+
   constructor() {
-    /** @type {!PageCallbackRouter} */
     this.callbackRouter = new PageCallbackRouter();
 
     const pageHandlerRemote = PageHandler.getRemote();
     pageHandlerRemote.setPage(this.callbackRouter.$.bindNewPipeAndPassRemote());
   }
 
-  /** @return {!BrowserProxy} */
-  static getInstance() {
+  static getInstance(): BrowserProxy {
     return instance || (instance = new BrowserProxy());
   }
 
-  /**
-   * @param {!BrowserProxy} newInstance
-   */
-  static setInstance(newInstance) {
+  static setInstance(newInstance: BrowserProxy) {
     instance = newInstance;
   }
 }
diff --git a/chromium/ui/webui/resources/cr_components/color_change_listener/colors_css_updater.js b/chromium/ui/webui/resources/cr_components/color_change_listener/colors_css_updater.ts
index 263b2fc95fa..edd9997b080 100644
--- a/chromium/ui/webui/resources/cr_components/color_change_listener/colors_css_updater.js
+++ b/chromium/ui/webui/resources/cr_components/color_change_listener/colors_css_updater.ts
@@ -5,25 +5,21 @@
 /**
  * @fileoverview This file holds the functions that allow WebUI to update its
  * colors CSS stylesheet when a ColorProvider change in the browser is detected.
- * TODO(tluk): Convert this into typescript once all dependencies have been
- * fully migrated.
  */
 
 import {BrowserProxy} from './browser_proxy.js';
 
 /**
  * The CSS selector used to get the <link> node with the colors.css stylesheet.
- * @type {string}
  */
-export const COLORS_CSS_SELECTOR = 'link[href$=\'colors.css\']';
+export const COLORS_CSS_SELECTOR: string = 'link[href$=\'colors.css\']';
 
 /**
  * Forces the document to refresh its colors.css stylesheet. This is used to
  * fetch an updated stylesheet when the ColorProvider associated with the WebUI
  * has changed.
- * @return {boolean}
  */
-export function refreshColorCss() {
+export function refreshColorCss(): boolean {
   const colorCssNode = document.querySelector(COLORS_CSS_SELECTOR);
   if (!colorCssNode) {
     return false;
@@ -33,20 +29,20 @@ export function refreshColorCss() {
     return false;
   }
   const hrefURL = new URL(href);
-  const params = new URLSearchParams([['version', new Date().getTime()]]);
+  const params =
+      new URLSearchParams([['version', new Date().getTime().toString()]]);
   const newHref = `${hrefURL.origin}${hrefURL.pathname}?${params.toString()}`;
   colorCssNode.setAttribute('href', newHref);
   return true;
 }
 
-/** @type {?number} */
-let listenerId;
+let listenerId: number|null = null;
 
 /**
  * Starts listening for ColorProvider change updates from the browser.
  */
 export function startColorChangeUpdater() {
-  if (listenerId === undefined) {
+  if (listenerId === null) {
     listenerId =
         BrowserProxy.getInstance()
             .callbackRouter.onColorProviderChanged.addListener(refreshColorCss);
diff --git a/chromium/ui/webui/resources/cr_components/color_change_listener/tsconfig_base.json b/chromium/ui/webui/resources/cr_components/color_change_listener/tsconfig_base.json
new file mode 100644
index 00000000000..5502828ab49
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/color_change_listener/tsconfig_base.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../../../../tools/typescript/tsconfig_base.json",
+  "compilerOptions": {
+    "allowJs": true
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/customize_themes/BUILD.gn b/chromium/ui/webui/resources/cr_components/customize_themes/BUILD.gn
index afdbf93148d..060c24d9ec7 100644
--- a/chromium/ui/webui/resources/cr_components/customize_themes/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_components/customize_themes/BUILD.gn
@@ -4,19 +4,13 @@
 
 import("//mojo/public/tools/bindings/mojom.gni")
 import("//tools/grit/preprocess_if_expr.gni")
-import("//tools/polymer/html_to_js.gni")
+import("//tools/polymer/html_to_wrapper.gni")
 import("//tools/typescript/ts_library.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
+import("customize_themes.gni")
 
 assert(!is_android && !is_ios)
 
-group("web_components") {
-  public_deps = [
-    ":mojom_webui_js",
-    ":web_components_local",
-  ]
-}
-
 mojom("mojom") {
   sources = [ "customize_themes.mojom" ]
 
@@ -28,11 +22,8 @@ mojom("mojom") {
   webui_module_path = "chrome://resources/cr_components/customize_themes/"
 }
 
-html_to_js("web_components_local") {
-  js_files = [
-    "customize_themes.ts",
-    "theme_icon.ts",
-  ]
+html_to_wrapper("html_wrapper_files") {
+  in_files = html_files
 }
 
 # Output folder used to hold preprocess_if_expr() output.
@@ -46,12 +37,7 @@ ts_library("build_ts") {
   out_dir = preprocess_folder
   composite = true
   tsconfig_base = "tsconfig_base.json"
-  in_files = [
-    "browser_proxy.ts",
-    "customize_themes.ts",
-    "customize_themes.mojom-webui.js",
-    "theme_icon.ts",
-  ]
+  in_files = ts_files + html_wrapper_files + mojo_files
 
   deps = [
     "//third_party/polymer/v3_0:library",
@@ -66,19 +52,16 @@ ts_library("build_ts") {
 }
 
 preprocess_if_expr("preprocess_src") {
-  in_folder = "./"
+  in_folder = "."
   out_folder = preprocess_folder_tmp
-  in_files = [ "browser_proxy.ts" ]
+  in_files = ts_files
 }
 
 preprocess_if_expr("preprocess_generated") {
-  deps = [ ":web_components_local" ]
+  deps = [ ":html_wrapper_files" ]
   in_folder = target_gen_dir
   out_folder = preprocess_folder_tmp
-  in_files = [
-    "customize_themes.ts",
-    "theme_icon.ts",
-  ]
+  in_files = html_wrapper_files
 }
 
 copy("copy_mojom") {
@@ -95,7 +78,7 @@ generate_grd("build_grdp") {
     "colorize.svg",
     "brush.svg",
   ]
-  deps = [ ":build_ts" ]
+  public_deps = [ ":build_ts" ]
   manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
   resource_path_prefix = "cr_components/customize_themes"
 }
diff --git a/chromium/ui/webui/resources/cr_components/customize_themes/brush.svg b/chromium/ui/webui/resources/cr_components/customize_themes/brush.svg
index f6d29d556ac..927033ea5cb 100644
--- a/chromium/ui/webui/resources/cr_components/customize_themes/brush.svg
+++ b/chromium/ui/webui/resources/cr_components/customize_themes/brush.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34a.996.996 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96a.996.996 0 0 0 0-1.41z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37-1.34-1.34a.996.996 0 0 0-1.41 0L9 12.25 11.75 15l8.96-8.96a.996.996 0 0 0 0-1.41z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/customize_themes/colorize.svg b/chromium/ui/webui/resources/cr_components/customize_themes/colorize.svg
index 984de18801f..566c9a7c19f 100644
--- a/chromium/ui/webui/resources/cr_components/customize_themes/colorize.svg
+++ b/chromium/ui/webui/resources/cr_components/customize_themes/colorize.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M17.66 5.41l.92.92-2.69 2.69-.92-.92 2.69-2.69M17.67 3c-.26 0-.51.1-.71.29l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42l-2.34-2.34c-.2-.19-.45-.29-.7-.29zM6.92 19L5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="m17.66 5.41.92.92-2.69 2.69-.92-.92 2.69-2.69M17.67 3c-.26 0-.51.1-.71.29l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42l-2.34-2.34c-.2-.19-.45-.29-.7-.29zM6.92 19 5 17.08l8.06-8.06 1.92 1.92L6.92 19z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/customize_themes/customize_themes.gni b/chromium/ui/webui/resources/cr_components/customize_themes/customize_themes.gni
new file mode 100644
index 00000000000..9677cc6e5f7
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/customize_themes/customize_themes.gni
@@ -0,0 +1,27 @@
+# Copyright 2022 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.
+
+# Files holding a Polymer element definition AND have an equivalent .html file.
+_web_component_files = [
+  "customize_themes.ts",
+  "theme_icon.ts",
+]
+
+# Files that are passed as input to html_to_wrapper().
+html_files = []
+foreach(f, _web_component_files) {
+  html_files += [ string_replace(f, ".ts", ".html") ]
+}
+
+# Files that are generated by html_to_wrapper().
+html_wrapper_files = []
+foreach(f, html_files) {
+  html_wrapper_files += [ f + ".ts" ]
+}
+
+_non_web_component_files = [ "browser_proxy.ts" ]
+
+mojo_files = [ "customize_themes.mojom-webui.js" ]
+
+ts_files = _web_component_files + _non_web_component_files
diff --git a/chromium/ui/webui/resources/cr_components/customize_themes/customize_themes.ts b/chromium/ui/webui/resources/cr_components/customize_themes/customize_themes.ts
index 71347da0c02..5a8ba09c625 100644
--- a/chromium/ui/webui/resources/cr_components/customize_themes/customize_themes.ts
+++ b/chromium/ui/webui/resources/cr_components/customize_themes/customize_themes.ts
@@ -14,13 +14,14 @@ import '//resources/polymer/v3_0/paper-tooltip/paper-tooltip.js';
 
 import {SkColor} from 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js';
 import {DomRepeat} from 'chrome://resources/polymer/v3_0/polymer/lib/elements/dom-repeat.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assert} from '../../js/assert.m.js';
 import {hexColorToSkColor, skColorToRgba} from '../../js/color_utils.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 
 import {CustomizeThemesBrowserProxyImpl} from './browser_proxy.js';
+import {getTemplate} from './customize_themes.html.js';
 import {ChromeTheme, CustomizeThemesClientCallbackRouter, CustomizeThemesHandlerInterface, Theme, ThemeType} from './customize_themes.mojom-webui.js';
 import {ThemeIconElement} from './theme_icon.js';
 
@@ -44,6 +45,10 @@ export class CustomizeThemesElement extends CustomizeThemesElementBase {
     return 'cr-customize-themes';
   }
 
+  static get template() {
+    return getTemplate();
+  }
+
   static get properties() {
     return {
       /**
@@ -230,10 +235,6 @@ export class CustomizeThemesElement extends CustomizeThemesElementBase {
   private onManagedDialogClosed_() {
     this.showManagedThemeDialog_ = false;
   }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
 }
 
 declare global {
diff --git a/chromium/ui/webui/resources/cr_components/customize_themes/theme_icon.ts b/chromium/ui/webui/resources/cr_components/customize_themes/theme_icon.ts
index b77fa963073..29c05a55a45 100644
--- a/chromium/ui/webui/resources/cr_components/customize_themes/theme_icon.ts
+++ b/chromium/ui/webui/resources/cr_components/customize_themes/theme_icon.ts
@@ -4,7 +4,9 @@
 
 import '../../cr_elements/shared_vars_css.m.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './theme_icon.html.js';
 
 /**
  * Represents a theme. Displayed as a circle with each half colored based on
@@ -18,7 +20,7 @@ export class ThemeIconElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 }
 
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/BUILD.gn b/chromium/ui/webui/resources/cr_components/history_clusters/BUILD.gn
new file mode 100644
index 00000000000..cc3758de4f3
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/BUILD.gn
@@ -0,0 +1,86 @@
+# Copyright 2022 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("//mojo/public/tools/bindings/mojom.gni")
+import("//tools/grit/preprocess_if_expr.gni")
+import("//tools/polymer/css_to_wrapper.gni")
+import("//tools/polymer/html_to_wrapper.gni")
+import("//tools/typescript/ts_library.gni")
+import("//ui/webui/resources/tools/generate_grd.gni")
+import("history_clusters.gni")
+
+assert(!is_android)
+
+# Output folder used to hold preprocess_if_expr() output.
+preprocess_folder_tmp = "$root_gen_dir/ui/webui/resources/preprocessed/cr_components/history_clusters_tmp"
+
+# Output folder used to hold ts_library() output.
+preprocess_folder = "$root_gen_dir/ui/webui/resources/preprocessed/cr_components/history_clusters"
+
+mojom("mojo_bindings") {
+  sources = [ "history_clusters.mojom" ]
+  public_deps = [
+    "//mojo/public/mojom/base",
+    "//url/mojom:url_mojom_gurl",
+  ]
+  webui_module_path = "chrome://resources/cr_components/history_clusters/"
+}
+
+css_to_wrapper("css_wrapper_files") {
+  in_files = css_files
+}
+
+html_to_wrapper("html_wrapper_files") {
+  in_files = html_files
+}
+
+copy("copy_history_clusters_mojom") {
+  sources = [ "$root_gen_dir/mojom-webui/ui/webui/resources/cr_components/history_clusters/history_clusters.mojom-webui.js" ]
+  outputs = [ "$preprocess_folder_tmp/{{source_file_part}}" ]
+  deps = [ ":mojo_bindings_webui_js" ]
+}
+
+generate_grd("build_grdp") {
+  grd_prefix = "cr_components_history_clusters"
+  out_grd = "$target_gen_dir/resources.grdp"
+  public_deps = [ ":build_ts" ]
+  manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
+  resource_path_prefix = "cr_components/history_clusters"
+}
+
+preprocess_if_expr("preprocess") {
+  in_folder = "."
+  out_folder = preprocess_folder_tmp
+  in_files = ts_files
+}
+
+preprocess_if_expr("preprocess_generated") {
+  deps = [
+    ":css_wrapper_files",
+    ":html_wrapper_files",
+  ]
+  in_folder = target_gen_dir
+  out_folder = preprocess_folder_tmp
+  in_files = html_wrapper_files + css_wrapper_files
+}
+
+ts_library("build_ts") {
+  root_dir = preprocess_folder_tmp
+  out_dir = preprocess_folder
+  composite = true
+  tsconfig_base = "tsconfig_base.json"
+  in_files = ts_files + css_wrapper_files + html_wrapper_files +
+             [ "history_clusters.mojom-webui.js" ]
+  deps = [
+    "//third_party/polymer/v3_0:library",
+    "//ui/webui/resources:library",
+    "//ui/webui/resources/mojo:library",
+  ]
+  definitions = [ "//tools/typescript/definitions/metrics_private.d.ts" ]
+  extra_deps = [
+    ":copy_history_clusters_mojom",
+    ":preprocess",
+    ":preprocess_generated",
+  ]
+}
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/DIR_METADATA b/chromium/ui/webui/resources/cr_components/history_clusters/DIR_METADATA
new file mode 100644
index 00000000000..694e2bf57fb
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/DIR_METADATA
@@ -0,0 +1 @@
+mixins: "//components/history_clusters/COMMON_METADATA"
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/OWNERS b/chromium/ui/webui/resources/cr_components/history_clusters/OWNERS
new file mode 100644
index 00000000000..0407f67d0c2
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/OWNERS
@@ -0,0 +1,5 @@
+mahmadi@chromium.org
+file://components/history_clusters/OWNERS
+
+per-file *.mojom=set noparent
+per-file *.mojom=file://ipc/SECURITY_OWNERS
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/browser_proxy.ts b/chromium/ui/webui/resources/cr_components/history_clusters/browser_proxy.ts
new file mode 100644
index 00000000000..2f360fd3f72
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/browser_proxy.ts
@@ -0,0 +1,43 @@
+// Copyright 2021 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 {PageCallbackRouter, PageHandler, PageHandlerRemote} from './history_clusters.mojom-webui.js';
+
+/**
+ * @fileoverview This file provides a singleton class that exposes the Mojo
+ * handler interface used for bidirectional communication between the page and
+ * the browser.
+ */
+
+export interface BrowserProxy {
+  handler: PageHandlerRemote;
+  callbackRouter: PageCallbackRouter;
+}
+
+export class BrowserProxyImpl implements BrowserProxy {
+  handler: PageHandlerRemote;
+  callbackRouter: PageCallbackRouter;
+
+  constructor(handler: PageHandlerRemote, callbackRouter: PageCallbackRouter) {
+    this.handler = handler;
+    this.callbackRouter = callbackRouter;
+  }
+
+  static getInstance(): BrowserProxy {
+    if (instance) {
+      return instance;
+    }
+
+    const handler = PageHandler.getRemote();
+    const callbackRouter = new PageCallbackRouter();
+    handler.setPage(callbackRouter.$.bindNewPipeAndPassRemote());
+    return instance = new BrowserProxyImpl(handler, callbackRouter);
+  }
+
+  static setInstance(obj: BrowserProxy) {
+    instance = obj;
+  }
+}
+
+let instance: BrowserProxy|null = null;
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/cluster.html b/chromium/ui/webui/resources/cr_components/history_clusters/cluster.html
new file mode 100644
index 00000000000..ed086631ce0
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/cluster.html
@@ -0,0 +1,134 @@
+<style include="history-clusters-shared-style cr-icons">
+  :host {
+    --indentation: 52px;
+    --search-query-margin: 10px;
+    display: block;
+    /* Implements the spacing between containers. */
+    padding-bottom: var(--cluster-padding-vertical);
+  }
+
+  :host-context(.focus-outline-visible):host(:focus) #container {
+    box-shadow: inset 0 0 0 2px var(--cr-focus-outline-color);
+  }
+
+  :host([has-hidden-visits_]) #container {
+    /* For containers with a "Show More" button, add some additional spacing for
+       the pill button by adding a margin on the container. */
+    margin-bottom: var(--cluster-padding-vertical);
+  }
+
+  /* We need an inner container div to apply spacing between clusters. This is
+     because iron-list ignores the margin on the host element. */
+  #container {
+    background-color: var(--cr-card-background-color);
+    border-radius: var(--cr-card-border-radius);
+    box-shadow: var(--cr-card-shadow);
+    padding: var(--cluster-padding-vertical) 0;
+  }
+
+  #label-row {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    justify-content: space-between;
+    min-height: 48px;
+    min-width: 0;
+    padding-inline-start: var(--cluster-padding-horizontal);
+    user-select: none;
+  }
+
+  #label {
+    color: var(--cr-primary-text-color);
+    font-size: 1rem;  /* 16px */
+    font-weight: 500;
+  }
+
+  #related-searches {
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 0;
+    /* Top is a special 8px value. */
+    padding: 8px var(--cluster-padding-horizontal) var(--cluster-padding-vertical);
+  }
+
+  search-query {
+    margin-top: var(--search-query-margin);
+  }
+
+  search-query:not(:last-of-type) {
+    margin-inline-end: var(--search-query-margin);
+  }
+
+  #visibility-toggle {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin-top: var(--cluster-padding-vertical);
+    position: relative;
+  }
+
+  #toggle-button {
+    --pill-padding-icon: 60px;
+    --pill-padding-text: 64px;
+    align-items: center;
+    background-color: var(--grey-fill-color);
+    cursor: pointer;
+    display: flex;
+    outline: none;
+    position: absolute;
+    top: calc(var(--cluster-padding-vertical) - var(--pill-height) / 2);
+  }
+
+  :host-context(.focus-outline-visible) #toggle-button:focus {
+    box-shadow: inset 0 0 0 2px var(--cr-focus-outline-color);
+  }
+
+  #toggle-button .icon {
+    --cr-icon-button-margin-start: 0;
+    --cr-icon-color: var(--icon-color);
+    --cr-icon-ripple-margin: 0;
+    --cr-icon-ripple-size: 20px;
+    transition: transform 300ms;
+  }
+
+  :host([expanded_]) #toggle-button .icon {
+    transform: rotate(180deg);
+  }
+</style>
+<div id="container" on-visit-clicked="onVisitClicked_"
+    on-open-all-visits="onOpenAllVisits_"
+    on-remove-all-visits="onRemoveAllVisits_"
+    on-remove-visit="onRemoveVisit_">
+  <div id="label-row">
+    <div id="label"></div>
+    <div class="timestamp-and-menu">
+      <div class="timestamp">[[cluster.visits.0.relativeDate]]</div>
+      <menu-container></menu-container>
+    </div>
+  </div>
+  <template is="dom-repeat" items="[[visibleVisits_]]">
+    <url-visit visit="[[item]]" query="[[query]]"></url-visit>
+  </template>
+  <!-- Disable animation on iron-collapse, as the parent iron-list can't
+       easily handle it. -->
+  <iron-collapse opened="[[expanded_]]" no-animation>
+    <template is="dom-repeat" items="[[hiddenVisits_]]">
+      <url-visit visit="[[item]]" query="[[query]]"></url-visit>
+    </template>
+  </iron-collapse>
+  <div id="related-searches" hidden="[[!cluster.relatedSearches.length]]"
+      role="list" aria-label$="[[i18n('relatedSearchesHeader')]]"
+      on-related-search-clicked="onRelatedSearchClicked_">
+    <template is="dom-repeat" items="[[cluster.relatedSearches]]">
+      <search-query search-query="[[item]]" index="[[index]]" role="listitem">
+      </search-query>
+    </template>
+  </div>
+  <div id="visibility-toggle" hidden="[[!hiddenVisits_.length]]">
+    <div id="toggle-button" class="pill pill-icon-end" tabindex="0"
+        on-click="onToggleButtonClick_" on-keydown="onToggleButtonKeyDown_">
+      <span>[[getToggleButtonLabel_(expanded_)]]</span>
+      <span id="toggle-icon" class="icon cr-icon icon-expand-more"></span>
+    </div>
+  </div>
+</div>
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/cluster.ts b/chromium/ui/webui/resources/cr_components/history_clusters/cluster.ts
new file mode 100644
index 00000000000..49dc6f5a9bf
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/cluster.ts
@@ -0,0 +1,331 @@
+// Copyright 2021 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 './menu_container.js';
+import './search_query.js';
+import './history_clusters_shared_style.css.js';
+import './shared_vars.css.js';
+import './url_visit.js';
+import '../../cr_elements/cr_icons_css.m.js';
+import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';
+
+import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {assert} from '../../js/assert_ts.js';
+import {loadTimeData} from '../../js/load_time_data.m.js';
+
+import {BrowserProxyImpl} from './browser_proxy.js';
+import {getTemplate} from './cluster.html.js';
+import {Cluster, ClusterAction, PageCallbackRouter, URLVisit, VisitAction} from './history_clusters.mojom-webui.js';
+import {MetricsProxyImpl} from './metrics_proxy.js';
+import {insertHighlightedTextWithMatchesIntoElement} from './utils.js';
+
+/**
+ * @fileoverview This file provides a custom element displaying a cluster.
+ */
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'history-cluster': HistoryClusterElement;
+  }
+}
+
+const HistoryClusterElementBase = I18nMixin(PolymerElement);
+
+interface HistoryClusterElement {
+  $: {
+    label: HTMLElement,
+  };
+}
+
+class HistoryClusterElement extends HistoryClusterElementBase {
+  static get is() {
+    return 'history-cluster';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The cluster displayed by this element.
+       */
+      cluster: Object,
+
+      /**
+       * The index of the cluster.
+       */
+      index: {
+        type: Number,
+        value: -1,  // Initialized to an invalid value.
+      },
+
+      /**
+       * The current query for which related clusters are requested and shown.
+       */
+      query: String,
+
+      /**
+       * Whether the default-hidden visits are visible.
+       */
+      expanded_: {
+        type: Boolean,
+        reflectToAttribute: true,
+        value: false,
+      },
+
+      /**
+       * The default-hidden visits.
+       */
+      hiddenVisits_: {
+        type: Object,
+        computed: `computeHiddenVisits_(cluster.visits.*)`,
+      },
+
+      /**
+       * The label for the cluster. This property is actually unused. The side
+       * effect of the compute function is used to insert the HTML elements for
+       * highlighting into this.$.label element.
+       */
+      unusedLabel_: {
+        type: String,
+        computed: 'computeLabel_(cluster.label)',
+      },
+
+      /**
+       * The always-visible visits.
+       */
+      visibleVisits_: {
+        type: Object,
+        computed: `computeVisibleVisits_(cluster.visits.*)`,
+      },
+    };
+  }
+
+  //============================================================================
+  // Properties
+  //============================================================================
+
+  cluster: Cluster;
+  index: number;
+  query: string;
+  private callbackRouter_: PageCallbackRouter;
+  private expanded_: boolean;
+  private hiddenVisits_: Array<URLVisit>;
+  private onVisitsRemovedListenerId_: number|null = null;
+  private unusedLabel_: string;
+  private visibleVisits_: Array<URLVisit>;
+
+  //============================================================================
+  // Overridden methods
+  //============================================================================
+
+  constructor() {
+    super();
+    this.callbackRouter_ = BrowserProxyImpl.getInstance().callbackRouter;
+
+    // This element receives a tabindex, because it's an iron-list item.
+    // However, what we really want to do is to pass that focus onto an
+    // eligible child, so we set `delegatesFocus` to true.
+    this.attachShadow({mode: 'open', delegatesFocus: true});
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.onVisitsRemovedListenerId_ =
+        this.callbackRouter_.onVisitsRemoved.addListener(
+            this.onVisitsRemoved_.bind(this));
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    assert(this.onVisitsRemovedListenerId_);
+    this.callbackRouter_.removeListener(this.onVisitsRemovedListenerId_);
+    this.onVisitsRemovedListenerId_ = null;
+  }
+
+  //============================================================================
+  // Event handlers
+  //============================================================================
+
+  private onRelatedSearchClicked_() {
+    MetricsProxyImpl.getInstance().recordClusterAction(
+        ClusterAction.kRelatedSearchClicked, this.index);
+  }
+
+  private onVisitClicked_(event: CustomEvent<URLVisit>) {
+    MetricsProxyImpl.getInstance().recordClusterAction(
+        ClusterAction.kVisitClicked, this.index);
+
+    const visit = event.detail;
+    MetricsProxyImpl.getInstance().recordVisitAction(
+        VisitAction.kClicked, this.getVisitIndex_(visit),
+        MetricsProxyImpl.getVisitType(visit));
+  }
+
+  private onOpenAllVisits_() {
+    const visitsToOpen = this.visibleVisits_;
+    // Only try to open the hidden visits if the user actually has
+    // expanded the cluster by clicking "Show More".
+    if (this.expanded_) {
+      visitsToOpen.push(...this.hiddenVisits_);
+    }
+
+    BrowserProxyImpl.getInstance().handler.openVisitUrlsInTabGroup(
+        visitsToOpen);
+
+    MetricsProxyImpl.getInstance().recordClusterAction(
+        ClusterAction.kOpenedInTabGroup, this.index);
+  }
+
+  private onRemoveAllVisits_() {
+    // Pass event up with new detail of all this cluster's visits.
+    this.dispatchEvent(new CustomEvent('remove-visits', {
+      bubbles: true,
+      composed: true,
+      detail: this.cluster.visits,
+    }));
+  }
+
+  private onRemoveVisit_(event: CustomEvent<URLVisit>) {
+    // The actual removal is handled at in clusters.ts. This is just a good
+    // place to record the metric.
+    const visit = event.detail;
+    MetricsProxyImpl.getInstance().recordVisitAction(
+        VisitAction.kDeleted, this.getVisitIndex_(visit),
+        MetricsProxyImpl.getVisitType(visit));
+
+    this.dispatchEvent(new CustomEvent('remove-visits', {
+      bubbles: true,
+      composed: true,
+      detail: [visit],
+    }));
+  }
+
+  private onToggleButtonKeyDown_(e: KeyboardEvent) {
+    if (e.key !== 'Enter' && e.key !== ' ') {
+      return;
+    }
+
+    e.stopPropagation();
+    e.preventDefault();
+
+    this.onToggleButtonClick_();
+  }
+
+  private onToggleButtonClick_() {
+    this.expanded_ = !this.expanded_;
+
+    MetricsProxyImpl.getInstance().recordClusterAction(
+        ClusterAction.kRelatedVisitsVisibilityToggled, this.index);
+
+    // Dispatch an event to notify the parent elements of a resize. Note that
+    // this simple solution only works because the child iron-collapse has
+    // animations disabled. Otherwise, it gets an incorrect mid-animation size.
+    this.dispatchEvent(new CustomEvent('iron-resize', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  //============================================================================
+  // Helper methods
+  //============================================================================
+
+  /**
+   * Called with the original remove params when the last accepted request to
+   * browser to remove visits succeeds. Since the same visit may appear in
+   * multiple Clusters, all Clusters receive this callback in order to get a
+   * chance to remove their matching visits.
+   */
+  private onVisitsRemoved_(removedVisits: Array<URLVisit>) {
+    const visitHasBeenRemoved = (visit: URLVisit) => {
+      return removedVisits.findIndex((removedVisit) => {
+        if (visit.normalizedUrl.url !== removedVisit.normalizedUrl.url) {
+          return false;
+        }
+
+        // Remove the visit element if any of the removed visit's raw timestamps
+        // matches the canonical raw timestamp.
+        const rawVisitTime = visit.rawVisitData.visitTime.internalValue;
+        return (removedVisit.rawVisitData.visitTime.internalValue ===
+                rawVisitTime) ||
+            removedVisit.duplicates.map(data => data.visitTime.internalValue)
+                .includes(rawVisitTime);
+      }) !== -1;
+    };
+
+    const allVisits = this.cluster.visits;
+    const remainingVisits = allVisits.filter(v => !visitHasBeenRemoved(v));
+    if (allVisits.length === remainingVisits.length) {
+      return;
+    }
+
+    if (!remainingVisits.length) {
+      // If all the visits are removed, fire an event to also remove this
+      // cluster from the list of clusters.
+      this.dispatchEvent(new CustomEvent('remove-cluster', {
+        bubbles: true,
+        composed: true,
+        detail: this.index,
+      }));
+
+      MetricsProxyImpl.getInstance().recordClusterAction(
+          ClusterAction.kDeleted, this.index);
+    } else {
+      this.set('cluster.visits', remainingVisits);
+    }
+
+    this.dispatchEvent(new CustomEvent('iron-resize', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private computeHiddenVisits_(): Array<URLVisit> {
+    return this.cluster.visits.filter((visit: URLVisit) => {
+      return visit.hidden;
+    });
+  }
+
+  private computeLabel_(): string {
+    if (!this.cluster.label) {
+      // This never happens unless we misconfigured our variations config.
+      // This sentinel string matches the Android UI.
+      return 'no_label';
+    }
+
+    insertHighlightedTextWithMatchesIntoElement(
+        this.$.label, this.cluster.label!, this.cluster.labelMatchPositions);
+    return this.cluster.label!;
+  }
+
+  private computeVisibleVisits_(): Array<URLVisit> {
+    return this.cluster.visits.filter((visit: URLVisit) => {
+      return !visit.hidden;
+    });
+  }
+
+  /**
+   * Returns the label of the toggle button based on whether the default-hidden
+   * visits are visible.
+   */
+  private getToggleButtonLabel_(_expanded: boolean): string {
+    return loadTimeData.getString(
+        this.expanded_ ? 'toggleButtonLabelLess' : 'toggleButtonLabelMore');
+  }
+
+  /**
+   * Returns the index of `visit` among the visits in the cluster. Returns -1
+   * if the visit is not found in the cluster at all.
+   */
+  private getVisitIndex_(visit: URLVisit): number {
+    return this.cluster.visits.indexOf(visit);
+  }
+}
+
+customElements.define(HistoryClusterElement.is, HistoryClusterElement);
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/clusters.html b/chromium/ui/webui/resources/cr_components/history_clusters/clusters.html
new file mode 100644
index 00000000000..2cde804bed5
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/clusters.html
@@ -0,0 +1,84 @@
+<style include="history-clusters-shared-style">
+  :host {
+    color: var(--cr-primary-text-color);
+    display: block;
+    font-size: 0.875rem;  /* 14px */
+    overflow-y: auto;
+  }
+
+  #clusters {
+    margin: 0 auto;
+    max-width: var(--cluster-max-width);
+    min-width: var(--cluster-min-width);
+    padding: var(--first-cluster-padding-top) var(--cluster-padding-horizontal) 0;
+  }
+
+  #placeholder {
+    align-items: center;
+    color: var(--md-loading-message-color);
+    display: flex;
+    flex: 1;
+    font-size: inherit;
+    font-weight: 500;
+    height: 100%;
+    justify-content: center;
+  }
+
+  #footer {
+    display: flex;
+    justify-content: center;
+    padding:
+        0 var(--cluster-padding-horizontal) var(--cluster-padding-vertical);
+  }
+</style>
+<div id="placeholder" hidden="[[!placeholderText_]]">
+  [[placeholderText_]]
+</div>
+<iron-list id="clusters" items="[[result_.clusters]]"
+    on-remove-visits="onRemoveVisits_" hidden="[[!result_.clusters.length]]">
+  <!-- We must have a tabindex on these history-cluster elements, because
+       iron-list gets very confused handling arrow keys without them. Moreover,
+       we can't allow Tab to traverse all list elements because:
+       https://github.com/PolymerElements/iron-list/issues/546 -->
+  <template>
+    <history-cluster cluster="[[item]]" index="[[index]]"
+        query="[[result_.query]]" tabindex$="[[tabIndex]]"
+        on-remove-cluster="onRemoveCluster_">
+    </history-cluster>
+  </template>
+</iron-list>
+<div id="footer" hidden="[[getLoadMoreButtonHidden_(
+    result_, result_.clusters.*, result_.canLoadMore)]]">
+  <cr-button id="loadMoreButton" on-click="onLoadMoreButtonClick_"
+             hidden$="[[showSpinner_]]">
+    [[i18n('loadMoreButtonLabel')]]
+  </cr-button>
+  <iron-icon src="chrome://resources/images/throbber_small.svg"
+             hidden$="[[!showSpinner_]]"></iron-icon>
+</div>
+<iron-scroll-threshold id="scrollThreshold"
+    lower-threshold="500" on-lower-threshold="onScrolledToBottom_">
+</iron-scroll-threshold>
+<cr-lazy-render id="confirmationDialog">
+  <template>
+    <cr-dialog consume-keydown-event on-cancel="onConfirmationDialogCancel_">
+      <div slot="title">[[i18n('removeSelected')]]</div>
+      <div slot="body">[[i18n('deleteWarning')]]</div>
+      <div slot="button-container">
+        <cr-button class="cancel-button" on-click="onCancelButtonClick_">
+          [[i18n('cancel')]]
+        </cr-button>
+        <cr-button class="action-button" on-click="onRemoveButtonClick_">
+          [[i18n('deleteConfirm')]]
+        </cr-button>
+      </div>
+    </cr-dialog>
+  </template>
+</cr-lazy-render>
+<cr-lazy-render id="confirmationToast">
+  <template>
+    <cr-toast duration="5000">
+      <div>[[i18n('removeFromHistoryToast')]]</div>
+    </cr-toast>
+  </template>
+</cr-lazy-render>
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/clusters.ts b/chromium/ui/webui/resources/cr_components/history_clusters/clusters.ts
new file mode 100644
index 00000000000..1549b2ffc48
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/clusters.ts
@@ -0,0 +1,382 @@
+// Copyright 2021 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 './cluster.js';
+import './history_clusters_shared_style.css.js';
+import '../../cr_elements/cr_button/cr_button.m.js';
+import '../../cr_elements/cr_dialog/cr_dialog.m.js';
+import '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
+import '../../cr_elements/cr_toast/cr_toast.js';
+import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
+import 'chrome://resources/polymer/v3_0/iron-scroll-threshold/iron-scroll-threshold.js';
+
+import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
+import {Time} from 'chrome://resources/mojo/mojo/public/mojom/base/time.mojom-webui.js';
+import {IronListElement} from 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
+import {IronScrollThresholdElement} from 'chrome://resources/polymer/v3_0/iron-scroll-threshold/iron-scroll-threshold.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {CrDialogElement} from '../../cr_elements/cr_dialog/cr_dialog.m.js';
+import {CrLazyRenderElement} from '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
+import {CrToastElement} from '../../cr_elements/cr_toast/cr_toast.js';
+import {assert} from '../../js/assert_ts.js';
+import {FocusOutlineManager} from '../../js/cr/ui/focus_outline_manager.m.js';
+import {loadTimeData} from '../../js/load_time_data.m.js';
+
+import {BrowserProxyImpl} from './browser_proxy.js';
+import {getTemplate} from './clusters.html.js';
+import {Cluster, PageCallbackRouter, PageHandlerRemote, QueryResult, URLVisit} from './history_clusters.mojom-webui.js';
+
+/**
+ * @fileoverview This file provides a custom element that requests and shows
+ * history clusters given a query. It handles loading more clusters using
+ * infinite scrolling as well as deletion of visits within the clusters.
+ */
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'history-clusters': HistoryClustersElement;
+  }
+
+  interface Window {
+    // https://github.com/microsoft/TypeScript/issues/40807
+    requestIdleCallback(callback: () => void): void;
+  }
+}
+
+const HistoryClustersElementBase = I18nMixin(PolymerElement);
+
+export interface HistoryClustersElement {
+  $: {
+    clusters: IronListElement,
+    confirmationDialog: CrLazyRenderElement<CrDialogElement>,
+    confirmationToast: CrLazyRenderElement<CrToastElement>,
+    scrollThreshold: IronScrollThresholdElement,
+  };
+}
+
+export class HistoryClustersElement extends HistoryClustersElementBase {
+  static get is() {
+    return 'history-clusters';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Whether the clusters are in the side panel.
+       */
+      inSidePanel: {
+        type: Boolean,
+        reflectToAttribute: true,
+        value: false,
+      },
+
+      /**
+       * The current query for which related clusters are requested and shown.
+       */
+      query: {
+        type: String,
+        observer: 'onQueryChanged_',
+        value: '',
+      },
+
+      /**
+       * The placeholder text to show when the results are empty.
+       */
+      placeholderText_: {
+        type: String,
+        computed: `computePlaceholderText_(result_.*)`,
+      },
+
+      /**
+       * The browser response to a request for the freshest clusters related to
+       * a given query until an optional given end time (or the present time).
+       */
+      result_: Object,
+
+      /**
+       * Boolean determining if spinner shows instead of load more button.
+       */
+      showSpinner_: {
+        type: Boolean,
+        value: false,
+      },
+
+      /**
+       * The list of visits to be removed. A non-empty array indicates a pending
+       * remove request to the browser.
+       */
+      visitsToBeRemoved_: {
+        type: Object,
+        value: () => [],
+      },
+    };
+  }
+
+  //============================================================================
+  // Properties
+  //============================================================================
+
+  inSidePanel: boolean;
+  query: string;
+  private callbackRouter_: PageCallbackRouter;
+  private headerText_: string;
+  private onClustersQueryResultListenerId_: number|null = null;
+  private onVisitsRemovedListenerId_: number|null = null;
+  private onHistoryDeletedListenerId_: number|null = null;
+  private pageHandler_: PageHandlerRemote;
+  private placeholderText_: string;
+  private result_: QueryResult;
+  private showSpinner_: boolean;
+  private visitsToBeRemoved_: Array<URLVisit>;
+
+  //============================================================================
+  // Overridden methods
+  //============================================================================
+
+  constructor() {
+    super();
+    this.pageHandler_ = BrowserProxyImpl.getInstance().handler;
+    this.callbackRouter_ = BrowserProxyImpl.getInstance().callbackRouter;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    // Register a per-document singleton focus outline manager. Some of our
+    // child elements depend on the CSS classes set by this singleton.
+    FocusOutlineManager.forDocument(document);
+
+    this.$.clusters.notifyResize();
+    this.$.clusters.scrollTarget = this;
+    this.$.scrollThreshold.scrollTarget = this;
+
+    this.onClustersQueryResultListenerId_ =
+        this.callbackRouter_.onClustersQueryResult.addListener(
+            this.onClustersQueryResult_.bind(this));
+    this.onVisitsRemovedListenerId_ =
+        this.callbackRouter_.onVisitsRemoved.addListener(
+            this.onVisitsRemoved_.bind(this));
+    this.onHistoryDeletedListenerId_ =
+        this.callbackRouter_.onHistoryDeleted.addListener(
+            this.onHistoryDeleted_.bind(this));
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    assert(this.onClustersQueryResultListenerId_);
+    this.callbackRouter_.removeListener(this.onClustersQueryResultListenerId_);
+    this.onClustersQueryResultListenerId_ = null;
+    assert(this.onVisitsRemovedListenerId_);
+    this.callbackRouter_.removeListener(this.onVisitsRemovedListenerId_);
+    this.onVisitsRemovedListenerId_ = null;
+  }
+
+  //============================================================================
+  // Event handlers
+  //============================================================================
+
+  private onCancelButtonClick_() {
+    this.visitsToBeRemoved_ = [];
+    this.$.confirmationDialog.get().close();
+  }
+
+  private onConfirmationDialogCancel_() {
+    this.visitsToBeRemoved_ = [];
+  }
+
+  private onLoadMoreButtonClick_() {
+    if (this.result_ && this.result_.canLoadMore) {
+      this.showSpinner_ = true;
+      // Prevent sending further load-more requests until this one finishes.
+      this.set('result_.canLoadMore', false);
+      this.pageHandler_.loadMoreClusters(this.result_.query);
+    }
+  }
+
+  private onRemoveButtonClick_() {
+    this.pageHandler_.removeVisits(this.visitsToBeRemoved_).then(() => {
+      // The returned promise resolves with whether the request succeeded in the
+      // browser. That value may be used to show a toast but is ignored for now.
+      // Allow remove requests again.
+      this.visitsToBeRemoved_ = [];
+    });
+    this.$.confirmationDialog.get().close();
+  }
+
+  /**
+   * Called with `event` received from a cluster requesting to be removed from
+   * the list when all its visits have been removed. Contains the cluster index.
+   */
+  private onRemoveCluster_(event: CustomEvent<number>) {
+    const index = event.detail;
+    this.splice('result_.clusters', index, 1);
+  }
+
+  /**
+   * Called with `event` received from a visit requesting to be removed. `event`
+   * may contain the related visits of the said visit, if applicable.
+   */
+  private onRemoveVisits_(event: CustomEvent<Array<URLVisit>>) {
+    // Return early if there is a pending remove request.
+    if (this.visitsToBeRemoved_.length) {
+      return;
+    }
+
+    this.visitsToBeRemoved_ = event.detail;
+    if (this.visitsToBeRemoved_.length > 1) {
+      this.$.confirmationDialog.get().showModal();
+    } else {
+      // Bypass the confirmation dialog if removing one visit only.
+      this.onRemoveButtonClick_();
+    }
+  }
+
+  /**
+   * Called when the value of the search field changes.
+   */
+  private onSearchChanged_(event: CustomEvent<string>) {
+    // Update the query based on the value of the search field, if necessary.
+    if (event.detail !== this.query) {
+      this.query = event.detail;
+    }
+  }
+
+  /**
+   * Called when the scrollable area has been scrolled nearly to the bottom.
+   */
+  private onScrolledToBottom_() {
+    this.$.scrollThreshold.clearTriggers();
+
+    if (this.shadowRoot!.querySelector(':focus-visible')) {
+      // If some element of ours is keyboard-focused, don't automatically load
+      // more clusters. It loses the user's position and messes up screen
+      // readers. Let the user manually click the "Load More" button, if needed.
+      // We use :focus-visible here, because :focus is triggered by mouse focus
+      // too. And `FocusOutlineManager.visible()` is too primitive. It's true
+      // on page load, and whenever the user is typing in the searchbox.
+      return;
+    }
+
+    this.onLoadMoreButtonClick_();
+  }
+
+  //============================================================================
+  // Helper methods
+  //============================================================================
+
+  private computePlaceholderText_(): string {
+    if (!this.result_) {
+      return '';
+    }
+    return this.result_.clusters.length ?
+        '' :
+        loadTimeData.getString(
+            this.result_.query ? 'noSearchResults' : 'noResults');
+  }
+
+  /**
+   * Returns true and hides the button unless we actually have more results to
+   * load. Note we don't actually hide this button based on keyboard-focus
+   * state. This is because if the user is using the mouse, more clusters are
+   * loaded before the user ever gets a chance to see this button.
+   */
+  private getLoadMoreButtonHidden_(
+      _result: QueryResult, _resultClusters: Array<Cluster>,
+      _resultCanLoadMore: Time): boolean {
+    return !this.result_ || this.result_.clusters.length === 0 ||
+        !this.result_.canLoadMore;
+  }
+
+  /**
+   * Returns a promise that resolves when the browser is idle.
+   */
+  private onBrowserIdle_(): Promise<void> {
+    return new Promise(resolve => {
+      window.requestIdleCallback(() => {
+        resolve();
+      });
+    });
+  }
+
+  private onClustersQueryResult_(result: QueryResult) {
+    if (result.isContinuation) {
+      // Do not replace the existing result when `result` contains a partial
+      // set of clusters that should be appended to the existing ones.
+      this.push('result_.clusters', ...result.clusters);
+      this.set('result_.canLoadMore', result.canLoadMore);
+    } else {
+      // Scroll to the top when `result` contains a new set of clusters.
+      this.scrollTop = 0;
+      this.result_ = result;
+    }
+
+    // Handle the "tall monitor" edge case: if the returned results are are
+    // shorter than the vertical viewport, the <history-clusters> element will
+    // not have a scrollbar, and the user will never be able to trigger the
+    // iron-scroll-threshold to request more results. Therefore, immediately
+    // request more results if there is no scrollbar to fill the viewport.
+    //
+    // This should happen quite rarely in the queryless state since the backend
+    // transparently tries to get at least ~100 visits to cluster.
+    //
+    // This is likely to happen very frequently in the search query state, since
+    // many clusters will not match the search query and will be discarded.
+    //
+    // Do this on browser idle to avoid jank and to give the DOM a chance to be
+    // updated with the results we just got.
+    this.onBrowserIdle_().then(() => {
+      if (this.scrollHeight <= this.clientHeight) {
+        this.onLoadMoreButtonClick_();
+      }
+    });
+    this.showSpinner_ = false;
+
+    if (this.inSidePanel) {
+      this.pageHandler_.showSidePanelUI();
+    }
+  }
+
+  /**
+   * Called when the user entered search query changes. Also used to fetch the
+   * initial set of clusters when the page loads.
+   */
+  private onQueryChanged_() {
+    this.onBrowserIdle_().then(() => {
+      if (this.result_ && this.result_.canLoadMore) {
+        // Prevent sending further load-more requests until this one finishes.
+        this.set('result_.canLoadMore', false);
+      }
+      this.pageHandler_.startQueryClusters(this.query.trim());
+    });
+  }
+
+  /**
+   * Called with the original remove params when the last accepted request to
+   * browser to remove visits succeeds.
+   */
+  private onVisitsRemoved_(removedVisits: Array<URLVisit>) {
+    // Show the confirmation toast once done removing one visit only; since a
+    // confirmation dialog was not shown prior to the action.
+    if (removedVisits.length === 1) {
+      this.$.confirmationToast.get().show();
+    }
+  }
+
+  /**
+   * Called when History is deleted from a different tab.
+   */
+  private onHistoryDeleted_() {
+    // Just re-issue the existing query to "reload" the results and display
+    // the externally deleted History. It would be nice if we could save the
+    // user's scroll position, but History doesn't do that either.
+    this.onQueryChanged_();
+  }
+}
+
+customElements.define(HistoryClustersElement.is, HistoryClustersElement);
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/history_clusters.gni b/chromium/ui/webui/resources/cr_components/history_clusters/history_clusters.gni
new file mode 100644
index 00000000000..9f906b953e9
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/history_clusters.gni
@@ -0,0 +1,44 @@
+# Copyright 2022 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.
+
+# Files holding a Polymer element definition AND have an equivalent .html file.
+_web_component_files = [
+  "cluster.ts",
+  "clusters.ts",
+  "menu_container.ts",
+  "page_favicon.ts",
+  "search_query.ts",
+  "url_visit.ts",
+]
+
+# Files that are passed as input to html_to_wrapper().
+html_files = []
+foreach(f, _web_component_files) {
+  html_files += [ string_replace(f, ".ts", ".html") ]
+}
+
+# Files that are generated by html_to_wrapper().
+html_wrapper_files = []
+foreach(f, html_files) {
+  html_wrapper_files += [ f + ".ts" ]
+}
+
+ts_files = _web_component_files + [
+             "browser_proxy.ts",
+             "metrics_proxy.ts",
+             "open_window_proxy.ts",
+             "utils.ts",
+           ]
+
+# Files that are passed as input to css_to_wrapper().
+css_files = [
+  "history_clusters_shared_style.css",
+  "shared_vars.css",
+]
+
+# Files that are generated by css_to_wrapper().
+css_wrapper_files = []
+foreach(f, css_files) {
+  css_wrapper_files += [ f + ".ts" ]
+}
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/history_clusters.mojom b/chromium/ui/webui/resources/cr_components/history_clusters/history_clusters.mojom
new file mode 100644
index 00000000000..88854f4b3f0
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/history_clusters.mojom
@@ -0,0 +1,218 @@
+// Copyright 2021 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.
+
+module history_clusters.mojom;
+
+import "mojo/public/mojom/base/time.mojom";
+import "url/mojom/url.mojom";
+
+// Represents a search query related to a visit to the search results page.
+struct SearchQuery {
+  // Text of the search query.
+  string query;
+  // URL of the search query page.
+  url.mojom.Url url;
+};
+
+// Each MatchPosition is the [begin, end) positions of a match within a string.
+// Equivalent to MatchPosition in components/query_parser/snippet.h.
+struct MatchPosition {
+  uint32 begin;
+  uint32 end;
+};
+
+// Available annotations for a visit.
+enum Annotation {
+  // Indicates that the visited URL was added to the bookmarks or was already
+  // bookmarked.
+  kBookmarked,
+  // Indicates that the visited URL was added to a tab group or was already in a
+  // tab group.
+  kTabGrouped,
+  // Indicates that the visited URL was the search results page of the default
+  // search provider.
+  kSearchResultsPage,
+};
+
+/**
+ * The following enums must be kept in sync with their respective variants in
+ * //tools/metrics/histograms/metadata/history/histograms.xml and
+ * //components/history_clusters/core/cluster_metrics_utils.h
+ */
+
+// Actions that can be performed on clusters.
+enum ClusterAction {
+  kDeleted,
+  kOpenedInTabGroup,
+  kRelatedSearchClicked,
+  kRelatedVisitsVisibilityToggled,
+  kVisitClicked,
+};
+
+// Actions that can be performed on related search items.
+enum RelatedSearchAction {
+  kClicked,
+};
+
+// Actions that can be performed on visits.
+enum VisitAction {
+  kClicked,
+  kDeleted,
+};
+
+// Types of visits that can be shown and acted on.
+enum VisitType {
+  kSRP,
+  kNonSRP
+};
+
+// Raw visit data needed to properly do deletion of all the duplicates.
+struct RawVisitData {
+  url.mojom.Url url;
+  mojo_base.mojom.Time visit_time;
+};
+
+// Represents the most recent visit to a URL within a Cluster. Visits for which
+// there are more recent visits to the same (or a qualifying near-duplicate) URL
+// within the Cluster are omitted.
+// However, the time of the least recent visit as well as the raw URLs of those
+// duplicative visits are preserved for deletion purposes.
+struct URLVisit {
+  // Normalized URL of the visited webpage. Only Search Results Page urls will
+  // be normalized for now; This is because SRP visits for the same search terms
+  // have slightly different URLs due to various query params such as the AQS.
+  url.mojom.Url normalized_url;
+
+  // String version of the URL suitable for display. This has been stripped of
+  // extraneous details like the scheme, and has IDN hostnames pre-converted.
+  // The actual URL formatting is similar to the omnibox popup.
+  string url_for_display;
+
+  // Title of the visited webpage.
+  string page_title;
+
+  // The positions within the `page_title` and `url_for_display` that match the
+  // search terms. Used for bolding in the WebUI.
+  array<MatchPosition> title_match_positions;
+  array<MatchPosition> url_for_display_match_positions;
+
+  // Raw visit data that's not displayed by the UI, but needed to do proper
+  // deletion. Visits with no duplicates will have an empty `duplicates` array.
+  RawVisitData raw_visit_data;
+  array<RawVisitData> duplicates;
+
+  // Localized string of approximate `last_visit_time`, e.g., "2 days ago".
+  string relative_date;
+
+  // Annotations for this visit.
+  array<Annotation> annotations;
+
+  // Whether a related visit is initially hidden.
+  bool hidden;
+
+  // A key-value dictionary of additional debug info to show. This is not
+  // visible in production, and used for development only.
+  map<string, string> debug_info;
+};
+
+// Represents a cluster of visits generated from device history by the browser
+// and displayed in chrome://history/journeys. Contains cluster-level metadata
+// (e.g., last_visit_time) derived from the metadata of constituent visits.
+struct Cluster {
+  // Cluster identifier. See //components/history/core/browser/history_types.h
+  int64 id;
+
+  // A flat list of all the visits in the cluster. The first one is the
+  // "top visit" if the UI needs to specially display a "top visit".
+  array<URLVisit> visits;
+
+  // An optional label for the whole cluster. If this is not defined or empty,
+  // the first visit should be displayed prominently instead.
+  string? label;
+
+  // The positions within `label` that match the search terms. Used for bolding
+  // in the WebUI.
+  array<MatchPosition> label_match_positions;
+
+  // Search queries related to this cluster's visits.
+  array<SearchQuery> related_searches;
+};
+
+// Represents a set of Clusters returned by the browser in response to a request
+// for Clusters related to a given query or within a given timespan.
+struct QueryResult {
+  // The query string the Clusters were matched against.
+  string query;
+
+  // The Clusters in the result set in reverse chronological order. This is
+  // always non-zero length, unless `continuation_end_time` is also null,
+  // indicating that we have exhausted History.
+  array<history_clusters.mojom.Cluster> clusters;
+
+  // True if there is another page of clusters that the UI can request.
+  bool can_load_more;
+
+  // True if this result is in response to a "load more" continuation request.
+  bool is_continuation;
+};
+
+// Browser-side handler for requests from WebUI page.
+interface PageHandler {
+  // The ClustersBrowserProxy singleton calls this when it's first initialized.
+  SetPage(pending_remote<Page> page);
+
+  // Notify the backend that the side panel UI is ready to be shown.
+  ShowSidePanelUI();
+
+  // Toggles the visibility of the History Clusters. The returned Promise echos
+  // the given value for `visible`. The page uses the returned value to update
+  // its state once the request is fulfilled by the browser.
+  ToggleVisibility(bool visible) => (bool visible);
+
+  // Queries for clusters matching `query`.
+  StartQueryClusters(string query);
+
+  // Asks the service for more clusters. Call this when the user has scrolled
+  // to the bottom of the page. `query` is passed through for sanity checking.
+  LoadMoreClusters(string query);
+
+  // Requests to remove all visits to the specified URLs in the specified
+  // timespan in `visits`. This includes the less recent visits to the same set
+  // of URLs whose information is preserved in `visits`. The returned Promise
+  // resolves with whether the request succeeded in the History backend layer.
+  RemoveVisits(array<URLVisit> visits) => (bool success);
+
+  // Requests to open the URLs in `visits` in a new tab group.
+  OpenVisitUrlsInTabGroup(array<URLVisit> visits);
+
+  // Records visit actions.
+  RecordVisitAction(VisitAction visit_action,
+                    uint32 visit_index,
+                    VisitType visit_type);
+
+  // Records related search click action.
+  RecordRelatedSearchAction(RelatedSearchAction action, uint32 visit_index);
+
+  // Records cluster actions.
+  RecordClusterAction(ClusterAction cluster_action, uint32 cluster_index);
+
+  // Records that the journeys visibility was toggled.
+  RecordToggledVisibility(bool visible);
+};
+
+// WebUI-side handler for requests from the browser.
+interface Page {
+  // Called with the results of the last call to `QueryClusters()`. `result`
+  // contains the freshest Clusters in reverse chronological order, along with
+  // continuation query params meant to be used in the follow-up request to load
+  // older Clusters.
+  OnClustersQueryResult(QueryResult result);
+
+  // Called with the set of removed visits when the last accepted call to
+  // `RemoveVisits()` succeeds. `removed_visits` will be used to update the UI.
+  OnVisitsRemoved(array<URLVisit> removed_visits);
+
+  // Called when History is deleted from a different tab.
+  OnHistoryDeleted();
+};
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/history_clusters_shared_style.css b/chromium/ui/webui/resources/cr_components/history_clusters/history_clusters_shared_style.css
new file mode 100644
index 00000000000..2e82ab41f5c
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/history_clusters_shared_style.css
@@ -0,0 +1,61 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=../../cr_elements/shared_style_css.m.js
+ * #import=../../cr_elements/shared_vars_css.m.js
+ * #import=./shared_vars.css.js
+ * #include=cr-shared-style cr-hidden-style
+ * #css_wrapper_metadata_end */
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pill {
+  border: 1px solid var(--border-color);
+  border-radius: calc(var(--pill-height) / 2);
+  box-sizing: border-box;
+  font-size: 0.875rem;  /* 14px */
+  height: var(--pill-height);
+  line-height: 1.5;  /* 21px */
+}
+
+.pill-icon-start {
+  padding-inline-end: var(--pill-padding-text);
+  padding-inline-start: var(--pill-padding-icon);
+}
+
+.pill-icon-start .icon {
+  margin-inline-end: 8px;
+}
+
+.pill-icon-end {
+  padding-inline-end: var(--pill-padding-icon);
+  padding-inline-start: var(--pill-padding-text);
+}
+
+.pill-icon-end .icon {
+  margin-inline-start: 8px;
+}
+
+.search-highlight-hit {
+  --search-highlight-hit-background-color: none;
+  --search-highlight-hit-color: none;
+  font-weight: 700;
+}
+
+.timestamp-and-menu {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+}
+
+.timestamp {
+  color: var(--cr-secondary-text-color);
+  flex-shrink: 0;
+}
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/menu_container.html b/chromium/ui/webui/resources/cr_components/history_clusters/menu_container.html
new file mode 100644
index 00000000000..545fdb0239b
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/menu_container.html
@@ -0,0 +1,27 @@
+<style include="history-clusters-shared-style">
+  #actionMenuButton {
+    --cr-icon-button-icon-size: 24px;
+    --cr-icon-button-margin-end: 8px;
+  }
+</style>
+
+<cr-icon-button id="actionMenuButton" class="icon-more-vert"
+    title$="[[i18n('actionMenuDescription')]]" aria-haspopup="menu"
+    on-click="onActionMenuButtonClick_">
+</cr-icon-button>
+
+<cr-lazy-render id="actionMenu">
+  <template>
+    <cr-action-menu role-description$="[[i18n('actionMenuDescription')]]">
+      <button id="openAllButton" class="dropdown-item"
+          on-click="onOpenAllButtonClick_">
+        [[i18n('openAllInTabGroup')]]
+      </button>
+      <button id="removeAllButton" class="dropdown-item"
+          on-click="onRemoveAllButtonClick_"
+          hidden="[[!allowDeletingHistory_]]">
+        [[i18n('removeAllFromHistory')]]
+      </button>
+    </cr-action-menu>
+  </template>
+</cr-lazy-render>
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/menu_container.ts b/chromium/ui/webui/resources/cr_components/history_clusters/menu_container.ts
new file mode 100644
index 00000000000..268152f14d6
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/menu_container.ts
@@ -0,0 +1,107 @@
+// Copyright 2022 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 './history_clusters_shared_style.css.js';
+import '../../cr_elements/cr_action_menu/cr_action_menu.js';
+import '../../cr_elements/cr_icon_button/cr_icon_button.m.js';
+import '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
+
+import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {CrActionMenuElement} from '../../cr_elements/cr_action_menu/cr_action_menu.js';
+import {CrLazyRenderElement} from '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
+import {loadTimeData} from '../../js/load_time_data.m.js';
+
+import {URLVisit} from './history_clusters.mojom-webui.js';
+import {getTemplate} from './menu_container.html.js';
+
+/**
+ * @fileoverview This file provides a custom element displaying an action menu.
+ * It's meant to be flexible enough to be associated with either a specific
+ * visit, or the whole cluster, or the top visit of unlabelled cluster.
+ */
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'menu-container': MenuContainerElement;
+  }
+}
+
+const MenuContainerElementBase = I18nMixin(PolymerElement);
+
+interface MenuContainerElement {
+  $: {
+    actionMenu: CrLazyRenderElement<CrActionMenuElement>,
+    actionMenuButton: HTMLElement,
+  };
+}
+
+class MenuContainerElement extends MenuContainerElementBase {
+  static get is() {
+    return 'menu-container';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The visit associated with this menu.
+       */
+      visit: Object,
+
+      /**
+       * Usually this is true, but this can be false if deleting history is
+       * prohibited by Enterprise policy.
+       */
+      allowDeletingHistory_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('allowDeletingHistory'),
+      },
+    };
+  }
+
+  //============================================================================
+  // Properties
+  //============================================================================
+
+  visit: URLVisit;
+  private allowDeletingHistory_: boolean;
+
+  //============================================================================
+  // Event handlers
+  //============================================================================
+
+  private onActionMenuButtonClick_(event: Event) {
+    this.$.actionMenu.get().showAt(this.$.actionMenuButton);
+    event.preventDefault();  // Prevent default browser action (navigation).
+  }
+
+  private onOpenAllButtonClick_(event: Event) {
+    event.preventDefault();  // Prevent default browser action (navigation).
+
+    this.dispatchEvent(new CustomEvent('open-all-visits', {
+      bubbles: true,
+      composed: true,
+    }));
+
+    this.$.actionMenu.get().close();
+  }
+
+  private onRemoveAllButtonClick_(event: Event) {
+    event.preventDefault();  // Prevent default browser action (navigation).
+
+    this.dispatchEvent(new CustomEvent('remove-all-visits', {
+      bubbles: true,
+      composed: true,
+    }));
+
+    this.$.actionMenu.get().close();
+  }
+}
+
+customElements.define(MenuContainerElement.is, MenuContainerElement);
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/metrics_proxy.ts b/chromium/ui/webui/resources/cr_components/history_clusters/metrics_proxy.ts
new file mode 100644
index 00000000000..d001f6e3c9f
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/metrics_proxy.ts
@@ -0,0 +1,58 @@
+// Copyright 2021 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 {BrowserProxyImpl} from './browser_proxy.js';
+import {Annotation, ClusterAction, RelatedSearchAction, URLVisit, VisitAction, VisitType} from './history_clusters.mojom-webui.js';
+
+/**
+ * @fileoverview This file provides an abstraction layer for logging metrics for
+ * mocking in tests.
+ */
+
+export interface MetricsProxy {
+  recordClusterAction(action: ClusterAction, index: number): void;
+  recordRelatedSearchAction(action: RelatedSearchAction, index: number): void;
+  recordToggledVisibility(visible: boolean): void;
+  recordVisitAction(action: VisitAction, index: number, type: VisitType): void;
+}
+
+export class MetricsProxyImpl implements MetricsProxy {
+  recordClusterAction(action: ClusterAction, index: number) {
+    BrowserProxyImpl.getInstance().handler.recordClusterAction(action, index);
+  }
+
+  recordRelatedSearchAction(action: RelatedSearchAction, index: number) {
+    BrowserProxyImpl.getInstance().handler.recordRelatedSearchAction(
+        action, index);
+  }
+
+  recordToggledVisibility(visible: boolean) {
+    BrowserProxyImpl.getInstance().handler.recordToggledVisibility(visible);
+  }
+
+  recordVisitAction(action: VisitAction, index: number, type: VisitType) {
+    BrowserProxyImpl.getInstance().handler.recordVisitAction(
+        action, index, type);
+  }
+
+  static getInstance(): MetricsProxy {
+    return instance || (instance = new MetricsProxyImpl());
+  }
+
+  static setInstance(obj: MetricsProxy) {
+    instance = obj;
+  }
+
+  /**
+   * Returns the VisitType based on whether this is a visit to the default
+   * search provider's results page.
+   */
+  static getVisitType(visit: URLVisit): VisitType {
+    return visit.annotations.includes(Annotation.kSearchResultsPage) ?
+        VisitType.kSRP :
+        VisitType.kNonSRP;
+  }
+}
+
+let instance: MetricsProxy|null = null;
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/open_window_proxy.ts b/chromium/ui/webui/resources/cr_components/history_clusters/open_window_proxy.ts
new file mode 100644
index 00000000000..24f31b8ad97
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/open_window_proxy.ts
@@ -0,0 +1,30 @@
+// Copyright 2021 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.
+
+/**
+ * @fileoverview This file provides an abstraction layer for Window.open() for
+ * for mocking in tests.
+ * TODO(http://crbug.com/1250487): Refactor this file and similar files into
+ * ui/webui/resources/js/
+ */
+
+export interface OpenWindowProxy {
+  open(url: string): void;
+}
+
+export class OpenWindowProxyImpl implements OpenWindowProxy {
+  open(url: string) {
+    window.open(url);
+  }
+
+  static getInstance(): OpenWindowProxy {
+    return instance || (instance = new OpenWindowProxyImpl());
+  }
+
+  static setInstance(obj: OpenWindowProxy) {
+    instance = obj;
+  }
+}
+
+let instance: OpenWindowProxy|null = null;
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/page_favicon.html b/chromium/ui/webui/resources/cr_components/history_clusters/page_favicon.html
new file mode 100644
index 00000000000..af2213e0afd
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/page_favicon.html
@@ -0,0 +1,10 @@
+<style>
+  :host {
+    background-position: center;
+    background-repeat: no-repeat;
+    flex-shrink: 0;
+    height: var(--favicon-size);
+    margin-inline: 8px 24px;
+    width: var(--favicon-size);
+  }
+</style>
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/page_favicon.ts b/chromium/ui/webui/resources/cr_components/history_clusters/page_favicon.ts
new file mode 100644
index 00000000000..10c3066d438
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/page_favicon.ts
@@ -0,0 +1,71 @@
+// Copyright 2021 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 './shared_vars.css.js';
+
+import {Url} from 'chrome://resources/mojo/url/mojom/url.mojom-webui.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getFaviconForPageURL} from '../../js/icon.js';
+
+import {getTemplate} from './page_favicon.html.js';
+
+/**
+ * @fileoverview This file provides a custom element displaying a page favicon.
+ */
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'page-favicon': PageFavicon;
+  }
+}
+
+class PageFavicon extends PolymerElement {
+  static get is() {
+    return 'page-favicon';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The element's style attribute.
+       */
+      style: {
+        type: String,
+        computed: `computeStyle_(url)`,
+        reflectToAttribute: true,
+      },
+
+      /**
+       * The URL for which the favicon is shown.
+       */
+      url: Object,
+    };
+  }
+
+  //============================================================================
+  // Properties
+  //============================================================================
+
+  url: Url;
+
+  //============================================================================
+  // Helper methods
+  //============================================================================
+
+  private computeStyle_(): string {
+    if (!this.url) {
+      return '';
+    }
+    return `background-image:${
+        getFaviconForPageURL(
+            this.url.url, false, '', /** --favicon-size */ 16)}`;
+  }
+}
+
+customElements.define(PageFavicon.is, PageFavicon);
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/search_query.html b/chromium/ui/webui/resources/cr_components/history_clusters/search_query.html
new file mode 100644
index 00000000000..d251066fa34
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/search_query.html
@@ -0,0 +1,39 @@
+<style include="history-clusters-shared-style">
+  :host {
+    display: block;
+    min-width: 0;
+  }
+
+  a {
+    align-items: center;
+    color: inherit;
+    display: flex;
+    outline: none;
+    text-decoration: none;
+  }
+
+  :host(:hover) a {
+    background-color: var(--cr-hover-background-color);
+  }
+
+  :host(:active) a {
+    background-color: var(--cr-active-background-color);
+  }
+
+  :host-context(.focus-outline-visible) a:focus {
+    box-shadow: inset 0 0 0 2px var(--cr-focus-outline-color);
+  }
+
+  .icon {
+    --cr-icon-button-margin-start: 0;
+    --cr-icon-color: var(--icon-color);
+    --cr-icon-image: url(chrome://resources/images/icon_search.svg);
+    --cr-icon-ripple-margin: 0;
+    --cr-icon-ripple-size: 20px;
+  }
+</style>
+<a class="pill pill-icon-start" href$="[[searchQuery.url.url]]"
+    on-click="onClick_" on-auxclick="onAuxClick_" on-keydown="onKeydown_">
+  <span class="icon cr-icon"></span>
+  <span class="truncate">[[searchQuery.query]]</span>
+</a>
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/search_query.ts b/chromium/ui/webui/resources/cr_components/history_clusters/search_query.ts
new file mode 100644
index 00000000000..ba00f453d3c
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/search_query.ts
@@ -0,0 +1,94 @@
+// Copyright 2021 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 './history_clusters_shared_style.css.js';
+
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {RelatedSearchAction, SearchQuery} from './history_clusters.mojom-webui.js';
+import {MetricsProxyImpl} from './metrics_proxy.js';
+import {OpenWindowProxyImpl} from './open_window_proxy.js';
+import {getTemplate} from './search_query.html.js';
+
+/**
+ * @fileoverview This file provides a custom element displaying a search query.
+ */
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'search-query': SearchQueryElement;
+  }
+}
+
+class SearchQueryElement extends PolymerElement {
+  static get is() {
+    return 'search-query';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The index of the search query pill.
+       */
+      index: {
+        type: Number,
+        value: -1,  // Initialized to an invalid value.
+      },
+
+      /**
+       * The search query to display.
+       */
+      searchQuery: Object,
+    };
+  }
+
+  //============================================================================
+  // Properties
+  //============================================================================
+
+  index: number;
+  searchQuery: SearchQuery;
+
+  //============================================================================
+  // Event handlers
+  //============================================================================
+
+  private onAuxClick_() {
+    MetricsProxyImpl.getInstance().recordRelatedSearchAction(
+        RelatedSearchAction.kClicked, this.index);
+
+    // Notify the parent <history-cluster> element of this event.
+    this.dispatchEvent(new CustomEvent('related-search-clicked', {
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private onClick_(event: MouseEvent) {
+    event.preventDefault();  // Prevent default browser action (navigation).
+
+    // To record metrics.
+    this.onAuxClick_();
+
+    OpenWindowProxyImpl.getInstance().open(this.searchQuery.url.url);
+  }
+
+  private onKeydown_(e: KeyboardEvent) {
+    // To be consistent with <history-list>, only handle Enter, and not Space.
+    if (e.key !== 'Enter') {
+      return;
+    }
+
+    // To record metrics.
+    this.onAuxClick_();
+
+    OpenWindowProxyImpl.getInstance().open(this.searchQuery.url.url);
+  }
+}
+
+customElements.define(SearchQueryElement.is, SearchQueryElement);
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/shared_vars.css b/chromium/ui/webui/resources/cr_components/history_clusters/shared_vars.css
new file mode 100644
index 00000000000..61468278fef
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/shared_vars.css
@@ -0,0 +1,45 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=vars
+ * #import=../../cr_elements/shared_vars_css.m.js
+ * #import=chrome://resources/polymer/v3_0/paper-styles/color.js
+ * #css_wrapper_metadata_end */
+
+/* Colors: */
+html {
+  --annotation-background-color: var(--google-green-50);
+  --annotation-text-color: var(--google-green-600);
+  --border-color: var(--google-grey-300);
+  --grey-fill-color: var(--google-grey-100);
+  --icon-color: var(--google-grey-600);
+  --url-color: var(--google-blue-600);
+}
+
+@media (prefers-color-scheme: dark) {
+html {
+  --annotation-background-color: var(--google-green-300);
+  --annotation-text-color: var(--google-grey-900);
+  --border-color: var(--google-grey-700);
+  --grey-fill-color: var(--google-grey-700);
+  --icon-color: white;
+  --url-color: var(--google-blue-300);
+}
+}
+
+/* Sizes: */
+html {
+  --cluster-max-width: var(--card-max-width);
+  --cluster-min-width: var(--card-min-width);
+  --cluster-padding-horizontal: var(--card-padding-side);
+  --cluster-padding-vertical: var(--card-padding-between);
+  --favicon-margin: 16px;
+  --favicon-size: 16px;
+  --first-cluster-padding-top: var(--first-card-padding-top);
+  --pill-height: 34px;
+  --pill-padding-icon: 12px;
+  --pill-padding-text: 16px;
+  --top-visit-favicon-size: 24px;
+}
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/tsconfig_base.json b/chromium/ui/webui/resources/cr_components/history_clusters/tsconfig_base.json
new file mode 100644
index 00000000000..3f69ccee4b0
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/tsconfig_base.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../../../tools/typescript/tsconfig_base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "noUncheckedIndexedAccess": false,
+    "noUnusedLocals": false,
+    "strictPropertyInitialization": false
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/url_visit.html b/chromium/ui/webui/resources/cr_components/history_clusters/url_visit.html
new file mode 100644
index 00000000000..db4000e1a98
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/url_visit.html
@@ -0,0 +1,127 @@
+<style include="history-clusters-shared-style">
+  :host {
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    min-height: 64px;
+  }
+
+  :host(:hover) {
+    background-color: var(--cr-hover-background-color);
+  }
+
+  #actionMenuButton {
+    opacity: 0; /* Hides the element while keeping it in tab order. */
+    position: absolute; /* Surrender its layout space to other elements. */
+    --cr-icon-button-margin-end: 8px;
+  }
+
+  :host(:hover) #actionMenuButton,
+  #actionMenuButton:focus-within {
+    opacity: 1;
+    position: static;
+  }
+
+  #header {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    justify-content: space-between;
+    min-width: 0;
+    padding-inline-start: var(--cluster-padding-horizontal);
+    user-select: none;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  #link-container {
+    align-items: center;
+    display: flex;
+    min-width: 0;
+    outline: none;
+    padding-inline-end: var(--cluster-padding-horizontal);
+  }
+
+  :host-context(.focus-outline-visible) #link-container:focus {
+    box-shadow: inset 0 0 0 2px var(--cr-focus-outline-color);
+  }
+
+  #page-info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  #title-and-annotations {
+    align-items: center;
+    display: flex;
+    line-height: 2;  /* 32px */
+  }
+
+  .annotation {
+    align-items: center;
+    background-color: var(--annotation-background-color);
+    border-radius: 4px;
+    color: var(--annotation-text-color);
+    display: inline-flex;
+    flex-shrink: 0;
+    font-weight: 500;
+    margin-inline-start: 12px;
+    padding: 0 8px;
+  }
+
+  .annotation + .annotation {
+    margin-inline-start: 8px;
+  }
+
+  #title,
+  #url {
+    font-size: .875rem;  /* 14px */
+  }
+
+  #url {
+    color: var(--url-color);
+    line-height: 1.5;  /* 24px */
+  }
+
+  #debug-info {
+    color: var(--cr-secondary-text-color);
+  }
+</style>
+<div id="header" on-click="onClick_" on-auxclick="onAuxClick_"
+    on-keydown="onKeydown_">
+  <a id="link-container" href="[[visit.normalizedUrl.url]]">
+    <page-favicon url="[[visit.normalizedUrl]]"></page-favicon>
+    <div id="page-info">
+      <div id="title-and-annotations">
+        <span id="title" class="truncate"></span>
+        <template is="dom-repeat" items="[[annotations_]]">
+          <span class="annotation">[[item]]</span>
+        </template>
+      </div>
+      <span id="url" class="truncate">
+        <!-- Print the debug next to the url to keep layout the same. -->
+        <span id="debug-info" hidden="[[!debugInfo_]]">[[debugInfo_]]</span>
+      </span>
+    </div>
+  </a>
+  <cr-icon-button id="actionMenuButton" class="icon-more-vert"
+      title$="[[i18n('actionMenuDescription')]]" aria-haspopup="menu"
+      on-click="onActionMenuButtonClick_"
+      hidden="[[!allowDeletingHistory_]]">
+  </cr-icon-button>
+</div>
+
+<cr-lazy-render id="actionMenu">
+  <template>
+    <cr-action-menu role-description="[[i18n('actionMenuDescription]]">
+      <button id="removeSelfButton" class="dropdown-item"
+          on-click="onRemoveSelfButtonClick_">
+        [[i18n('removeFromHistory')]]
+      </button>
+    </cr-action-menu>
+  </template>
+</cr-lazy-render>
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/url_visit.ts b/chromium/ui/webui/resources/cr_components/history_clusters/url_visit.ts
new file mode 100644
index 00000000000..91bd214c842
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/url_visit.ts
@@ -0,0 +1,227 @@
+// Copyright 2021 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 './page_favicon.js';
+import './history_clusters_shared_style.css.js';
+import '../../cr_elements/cr_action_menu/cr_action_menu.js';
+import '../../cr_elements/cr_icon_button/cr_icon_button.m.js';
+import '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
+
+import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {CrActionMenuElement} from '../../cr_elements/cr_action_menu/cr_action_menu.js';
+import {CrLazyRenderElement} from '../../cr_elements/cr_lazy_render/cr_lazy_render.m.js';
+import {loadTimeData} from '../../js/load_time_data.m.js';
+
+import {Annotation, URLVisit} from './history_clusters.mojom-webui.js';
+import {OpenWindowProxyImpl} from './open_window_proxy.js';
+import {getTemplate} from './url_visit.html.js';
+import {insertHighlightedTextWithMatchesIntoElement} from './utils.js';
+
+/**
+ * @fileoverview This file provides a custom element displaying a visit to a
+ * page within a cluster. A visit features the page favicon, title, a timestamp,
+ * as well as an action menu.
+ */
+
+/**
+ * Maps supported annotations to localized string identifiers.
+ */
+const annotationToStringId: Map<number, string> = new Map([
+  [Annotation.kBookmarked, 'bookmarked'],
+  [Annotation.kTabGrouped, 'savedInTabGroup'],
+]);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'url-visit': VisitRowElement;
+  }
+}
+
+const MenuContainerElementBase = I18nMixin(PolymerElement);
+
+interface VisitRowElement {
+  $: {
+    actionMenu: CrLazyRenderElement<CrActionMenuElement>,
+    actionMenuButton: HTMLElement,
+    title: HTMLElement,
+    url: HTMLElement,
+  };
+}
+
+class VisitRowElement extends MenuContainerElementBase {
+  static get is() {
+    return 'url-visit';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      /**
+       * The current query for which related clusters are requested and shown.
+       */
+      query: String,
+
+      /**
+       * The visit to display.
+       */
+      visit: Object,
+
+      /**
+       * Annotations to show for the visit (e.g., whether page was bookmarked).
+       */
+      annotations_: {
+        type: Object,
+        computed: 'computeAnnotations_(visit)',
+      },
+
+      /**
+       * Usually this is true, but this can be false if deleting history is
+       * prohibited by Enterprise policy.
+       */
+      allowDeletingHistory_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('allowDeletingHistory'),
+      },
+
+      /**
+       * Debug info for the visit.
+       */
+      debugInfo_: {
+        type: String,
+        computed: 'computeDebugInfo_(visit)',
+      },
+
+      /**
+       * Page title for the visit. This property is actually unused. The side
+       * effect of the compute function is used to insert the HTML elements for
+       * highlighting into this.$.title element.
+       */
+      unusedTitle_: {
+        type: String,
+        computed: 'computeTitle_(visit)',
+      },
+
+      /**
+       * This property is actually unused. The side effect of the compute
+       * function is used to insert HTML elements for the highlighted
+       * `this.visit.urlForDisplay` URL into the `this.$.url` element.
+       */
+      unusedUrlForDisplay_: {
+        type: String,
+        computed: 'computeUrlForDisplay_(visit)',
+      }
+    };
+  }
+
+  //============================================================================
+  // Properties
+  //============================================================================
+
+  query: string;
+  visit: URLVisit;
+  private annotations_: Array<string>;
+  private allowDeletingHistory_: boolean;
+  private debugInfo_: string;
+  private unusedTitle_: string;
+  private unusedVisibleUrl_: string;
+
+  //============================================================================
+  // Event handlers
+  //============================================================================
+
+  private onAuxClick_() {
+    // Notify the parent <history-cluster> element of this event.
+    this.dispatchEvent(new CustomEvent('visit-clicked', {
+      bubbles: true,
+      composed: true,
+      detail: this.visit,
+    }));
+  }
+
+  private onClick_(event: Event) {
+    // Ignore previously handled events.
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    event.preventDefault();  // Prevent default browser action (navigation).
+
+    // To record metrics.
+    this.onAuxClick_();
+
+    OpenWindowProxyImpl.getInstance().open(this.visit.normalizedUrl.url);
+  }
+
+  private onKeydown_(e: KeyboardEvent) {
+    // To be consistent with <history-list>, only handle Enter, and not Space.
+    if (e.key !== 'Enter') {
+      return;
+    }
+
+    // To record metrics.
+    this.onAuxClick_();
+
+    OpenWindowProxyImpl.getInstance().open(this.visit.normalizedUrl.url);
+  }
+
+  private onActionMenuButtonClick_(event: Event) {
+    this.$.actionMenu.get().showAt(this.$.actionMenuButton);
+    event.preventDefault();  // Prevent default browser action (navigation).
+  }
+
+  private onRemoveSelfButtonClick_(event: Event) {
+    event.preventDefault();  // Prevent default browser action (navigation).
+
+    this.dispatchEvent(new CustomEvent('remove-visit', {
+      bubbles: true,
+      composed: true,
+      detail: this.visit,
+    }));
+
+    this.$.actionMenu.get().close();
+  }
+
+  //============================================================================
+  // Helper methods
+  //============================================================================
+
+  private computeAnnotations_(): Array<string> {
+    return this.visit.annotations
+        .map((annotation: number) => annotationToStringId.get(annotation))
+        .filter(
+            (id: string|undefined):
+                id is string => {
+                  return !!id;
+                })
+        .map((id: string) => loadTimeData.getString(id));
+  }
+
+  private computeDebugInfo_(): string {
+    if (!loadTimeData.getBoolean('isHistoryClustersDebug')) {
+      return '';
+    }
+
+    return JSON.stringify(this.visit.debugInfo);
+  }
+
+  private computeTitle_(_visit: URLVisit): string {
+    insertHighlightedTextWithMatchesIntoElement(
+        this.$.title, this.visit.pageTitle, this.visit.titleMatchPositions);
+    return this.visit.pageTitle;
+  }
+
+  private computeUrlForDisplay_(_visit: URLVisit): string {
+    insertHighlightedTextWithMatchesIntoElement(
+        this.$.url, this.visit.urlForDisplay,
+        this.visit.urlForDisplayMatchPositions);
+    return this.visit.urlForDisplay;
+  }
+}
+
+customElements.define(VisitRowElement.is, VisitRowElement);
diff --git a/chromium/ui/webui/resources/cr_components/history_clusters/utils.ts b/chromium/ui/webui/resources/cr_components/history_clusters/utils.ts
new file mode 100644
index 00000000000..f3eeff0a370
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/history_clusters/utils.ts
@@ -0,0 +1,31 @@
+// Copyright 2022 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 {highlight} from '../../js/search_highlight_utils.js';
+
+import {MatchPosition} from './history_clusters.mojom-webui.js';
+
+/**
+ * Populates `container` with the highlighted `text` based on the mojom provided
+ * `match_positions`. This function takes care of converting from the mojom
+ * format to the format expected by search_highlight_utils.
+ */
+export function insertHighlightedTextWithMatchesIntoElement(
+    container: HTMLElement, text: string, matches: MatchPosition[]) {
+  container.textContent = '';
+  const node = document.createTextNode(text);
+  container.appendChild(node);
+
+  const ranges = [];
+  for (const match of matches) {
+    ranges.push({
+      start: match.begin,
+      length: match.end - match.begin,
+    });
+  }
+
+  if (ranges.length > 0) {
+    highlight(node, ranges);
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_components/iph_bubble/BUILD.gn b/chromium/ui/webui/resources/cr_components/iph_bubble/BUILD.gn
deleted file mode 100644
index b8c2d7efebb..00000000000
--- a/chromium/ui/webui/resources/cr_components/iph_bubble/BUILD.gn
+++ /dev/null
@@ -1,9 +0,0 @@
-# Copyright 2021 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("//tools/polymer/html_to_js.gni")
-
-html_to_js("web_components") {
-  js_files = [ "iph_bubble.ts" ]
-}
diff --git a/chromium/ui/webui/resources/cr_components/iph_bubble/iph_bubble.ts b/chromium/ui/webui/resources/cr_components/iph_bubble/iph_bubble.ts
index 521385ad44b..0b77e1b24c1 100644
--- a/chromium/ui/webui/resources/cr_components/iph_bubble/iph_bubble.ts
+++ b/chromium/ui/webui/resources/cr_components/iph_bubble/iph_bubble.ts
@@ -6,15 +6,17 @@
  * use.
  */
 import {assert} from '//resources/js/assert.m.js';
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './iph_bubble.html.js';
 
 const ANCHOR_HIGHLIGHT_CLASS = 'iph-anchor-highlight';
 
 enum Position {
-  Above = 'above',
-  Below = 'below',
-  Left = 'left',
-  Right = 'right',
+  ABOVE = 'above',
+  BELOW = 'below',
+  LEFT = 'left',
+  RIGHT = 'right',
 }
 
 export interface IPHBubbleElement {
@@ -29,7 +31,7 @@ export class IPHBubbleElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -61,7 +63,7 @@ export class IPHBubbleElement extends PolymerElement {
        * bubble's arrow points. Must be one of 'above', 'below', 'left' or
        * 'right'. Required.
        */
-      position: {type: Position, value: Position.Above},
+      position: {type: Position, value: Position.ABOVE},
     };
   }
 
@@ -130,28 +132,28 @@ export class IPHBubbleElement extends PolymerElement {
     const anchorTop = anchorRect.top - parentRect.top;
     let iphLeft: string, iphTop: string, iphTransform: string;
     switch (this.position) {
-      case Position.Above:
+      case Position.ABOVE:
         // Anchor the iph bubble to the top center of the anchor element.
         iphTop = `${anchorTop - offset}px`;
         iphLeft = `${anchorLeft + anchorRect.width / 2}px`;
         // Horizontally center the iph bubble.
         iphTransform = `translate(-50%, -100%)`;
         break;
-      case Position.Below:
+      case Position.BELOW:
         // Anchor the iph bubble to the bottom center of the anchor element.
         iphTop = `${anchorTop + anchorRect.height + offset}px`;
         iphLeft = `${anchorLeft + anchorRect.width / 2}px`;
         // Horizontally center the iph bubble.
         iphTransform = `translateX(-50%)`;
         break;
-      case Position.Left:
+      case Position.LEFT:
         // Anchor the iph bubble to the center left of the anchor element.
         iphTop = `${anchorTop + anchorRect.height / 2}px`;
         iphLeft = `${anchorLeft - offset}px`;
         // Vertically center the iph bubble.
         iphTransform = `translate(-100%, -50%)`;
         break;
-      case Position.Right:
+      case Position.RIGHT:
         // Anchor the iph bubble to the center right of the anchor element.
         iphTop = `${anchorTop + anchorRect.height / 2}px`;
         iphLeft = `${anchorLeft + anchorRect.width + offset}px`;
diff --git a/chromium/ui/webui/resources/cr_components/localized_link/BUILD.gn b/chromium/ui/webui/resources/cr_components/localized_link/BUILD.gn
deleted file mode 100644
index a0468756031..00000000000
--- a/chromium/ui/webui/resources/cr_components/localized_link/BUILD.gn
+++ /dev/null
@@ -1,9 +0,0 @@
-# Copyright 2019 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("//tools/polymer/html_to_js.gni")
-
-html_to_js("web_components") {
-  js_files = [ "localized_link.ts" ]
-}
diff --git a/chromium/ui/webui/resources/cr_components/localized_link/localized_link.ts b/chromium/ui/webui/resources/cr_components/localized_link/localized_link.ts
index 7d04f900b3f..2b323dad886 100644
--- a/chromium/ui/webui/resources/cr_components/localized_link/localized_link.ts
+++ b/chromium/ui/webui/resources/cr_components/localized_link/localized_link.ts
@@ -24,7 +24,9 @@ import '../../cr_elements/shared_vars_css.m.js';
 import '../../cr_elements/shared_style_css.m.js';
 
 import {assert, assertNotReached} from '//resources/js/assert.m.js';
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './localized_link.html.js';
 
 interface LocalizedLinkElement {
   $: {
@@ -37,6 +39,10 @@ class LocalizedLinkElement extends PolymerElement {
     return 'localized-link';
   }
 
+  static get template() {
+    return getTemplate();
+  }
+
   static get properties() {
     return {
       /**
@@ -173,10 +179,6 @@ class LocalizedLinkElement extends PolymerElement {
     }
     anchorTag.tabIndex = this.linkDisabled ? -1 : 0;
   }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
 }
 
 declare global {
diff --git a/chromium/ui/webui/resources/cr_components/managed_dialog/BUILD.gn b/chromium/ui/webui/resources/cr_components/managed_dialog/BUILD.gn
deleted file mode 100644
index e836bb5152a..00000000000
--- a/chromium/ui/webui/resources/cr_components/managed_dialog/BUILD.gn
+++ /dev/null
@@ -1,9 +0,0 @@
-# Copyright 2021 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("//tools/polymer/html_to_js.gni")
-
-html_to_js("web_components") {
-  js_files = [ "managed_dialog.ts" ]
-}
diff --git a/chromium/ui/webui/resources/cr_components/managed_dialog/managed_dialog.ts b/chromium/ui/webui/resources/cr_components/managed_dialog/managed_dialog.ts
index 4ff9191b017..f4b87ad2a90 100644
--- a/chromium/ui/webui/resources/cr_components/managed_dialog/managed_dialog.ts
+++ b/chromium/ui/webui/resources/cr_components/managed_dialog/managed_dialog.ts
@@ -12,11 +12,13 @@ import '../../cr_elements/icons.m.js';
 import '../../cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrDialogElement} from '../../cr_elements/cr_dialog/cr_dialog.m.js';
 import {I18nMixin} from '../../js/i18n_mixin.js';
 
+import {getTemplate} from './managed_dialog.html.js';
+
 export interface ManagedDialogElement {
   $: {
     dialog: CrDialogElement,
@@ -31,7 +33,7 @@ export class ManagedDialogElement extends ManagedDialogElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/managed_footnote/BUILD.gn b/chromium/ui/webui/resources/cr_components/managed_footnote/BUILD.gn
deleted file mode 100644
index c9801e83e80..00000000000
--- a/chromium/ui/webui/resources/cr_components/managed_footnote/BUILD.gn
+++ /dev/null
@@ -1,9 +0,0 @@
-# Copyright 2018 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("//tools/polymer/html_to_js.gni")
-
-html_to_js("web_components") {
-  js_files = [ "managed_footnote.ts" ]
-}
diff --git a/chromium/ui/webui/resources/cr_components/managed_footnote/managed_footnote.ts b/chromium/ui/webui/resources/cr_components/managed_footnote/managed_footnote.ts
index 9b63fa35064..38eb5486370 100644
--- a/chromium/ui/webui/resources/cr_components/managed_footnote/managed_footnote.ts
+++ b/chromium/ui/webui/resources/cr_components/managed_footnote/managed_footnote.ts
@@ -16,12 +16,14 @@ import '//resources/polymer/v3_0/paper-styles/color.js';
 import '../../cr_elements/icons.m.js';
 import '../../cr_elements/shared_vars_css.m.js';
 
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {I18nMixin} from '../../js/i18n_mixin.js';
 import {loadTimeData} from '../../js/load_time_data.m.js';
 import {WebUIListenerMixin} from '../../js/web_ui_listener_mixin.js';
 
+import {getTemplate} from './managed_footnote.html.js';
+
 const ManagedFootnoteElementBase =
     I18nMixin(WebUIListenerMixin(PolymerElement));
 
@@ -31,7 +33,7 @@ export class ManagedFootnoteElement extends ManagedFootnoteElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_components/most_visited/BUILD.gn b/chromium/ui/webui/resources/cr_components/most_visited/BUILD.gn
index d41ce59a9be..f2568f6c966 100644
--- a/chromium/ui/webui/resources/cr_components/most_visited/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_components/most_visited/BUILD.gn
@@ -3,9 +3,10 @@
 # found in the LICENSE file.
 
 import("//mojo/public/tools/bindings/mojom.gni")
-import("//tools/polymer/html_to_js.gni")
+import("//tools/polymer/html_to_wrapper.gni")
 import("//tools/typescript/ts_library.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
+import("most_visited.gni")
 
 assert(!is_android && !is_ios)
 
@@ -22,15 +23,8 @@ mojom("mojom") {
   webui_module_path = "chrome://resources/cr_components/most_visited/"
 }
 
-html_to_js("web_components_local") {
-  js_files = [ "most_visited.ts" ]
-}
-
-group("web_components") {
-  public_deps = [
-    ":mojom_webui_js",
-    ":web_components_local",
-  ]
+html_to_wrapper("html_wrapper_files") {
+  in_files = html_files
 }
 
 copy("copy_mojom") {
@@ -40,10 +34,7 @@ copy("copy_mojom") {
 }
 
 copy("copy_src") {
-  sources = [
-    "browser_proxy.ts",
-    "window_proxy.ts",
-  ]
+  sources = ts_files
   outputs = [ "$target_gen_dir/{{source_file_part}}" ]
 }
 
@@ -51,10 +42,7 @@ generate_grd("build_grdp") {
   grd_prefix = "cr_components_most_visited"
   out_grd = "$target_gen_dir/resources.grdp"
 
-  deps = [
-    ":build_ts",
-    ":mojom_webui_js",
-  ]
+  public_deps = [ ":build_ts" ]
   manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
   resource_path_prefix = "cr_components/most_visited"
 }
@@ -64,12 +52,7 @@ ts_library("build_ts") {
   out_dir = preprocess_folder
   composite = true
   tsconfig_base = "tsconfig_base.json"
-  in_files = [
-    "browser_proxy.ts",
-    "most_visited.ts",
-    "most_visited.mojom-webui.js",
-    "window_proxy.ts",
-  ]
+  in_files = ts_files + html_wrapper_files + mojo_files
   deps = [
     "//third_party/polymer/v3_0:library",
     "//ui/webui/resources:library",
@@ -78,6 +61,6 @@ ts_library("build_ts") {
   extra_deps = [
     ":copy_mojom",
     ":copy_src",
-    ":web_components_local",
+    ":html_wrapper_files",
   ]
 }
diff --git a/chromium/ui/webui/resources/cr_components/most_visited/most_visited.gni b/chromium/ui/webui/resources/cr_components/most_visited/most_visited.gni
new file mode 100644
index 00000000000..5d87a5c1887
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_components/most_visited/most_visited.gni
@@ -0,0 +1,27 @@
+# Copyright 2022 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.
+
+# Files holding a Polymer element definition AND have an equivalent .html file.
+_web_component_files = [ "most_visited.ts" ]
+
+# Files that are passed as input to html_to_wrapper().
+html_files = []
+foreach(f, _web_component_files) {
+  html_files += [ string_replace(f, ".ts", ".html") ]
+}
+
+# Files that are generated by html_to_wrapper().
+html_wrapper_files = []
+foreach(f, html_files) {
+  html_wrapper_files += [ f + ".ts" ]
+}
+
+_non_web_component_files = [
+  "browser_proxy.ts",
+  "window_proxy.ts",
+]
+
+mojo_files = [ "most_visited.mojom-webui.js" ]
+
+ts_files = _web_component_files + _non_web_component_files
diff --git a/chromium/ui/webui/resources/cr_components/most_visited/most_visited.ts b/chromium/ui/webui/resources/cr_components/most_visited/most_visited.ts
index 614f979f6a0..f10b0105e9f 100644
--- a/chromium/ui/webui/resources/cr_components/most_visited/most_visited.ts
+++ b/chromium/ui/webui/resources/cr_components/most_visited/most_visited.ts
@@ -25,9 +25,10 @@ import {hasKeyModifiers} from 'chrome://resources/js/util.m.js';
 import {TextDirection} from 'chrome://resources/mojo/mojo/public/mojom/base/text_direction.mojom-webui.js';
 import {SkColor} from 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js';
 import {Url} from 'chrome://resources/mojo/url/mojom/url.mojom-webui.js';
-import {DomRepeat, DomRepeatEvent, html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {DomRepeat, DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {MostVisitedBrowserProxy} from './browser_proxy.js';
+import {getTemplate} from './most_visited.html.js';
 import {MostVisitedInfo, MostVisitedPageCallbackRouter, MostVisitedPageHandlerRemote, MostVisitedTheme, MostVisitedTile} from './most_visited.mojom-webui.js';
 import {MostVisitedWindowProxy} from './window_proxy.js';
 
@@ -88,6 +89,10 @@ export class MostVisitedElement extends MostVisitedElementBase {
     return 'cr-most-visited';
   }
 
+  static get template() {
+    return getTemplate();
+  }
+
   static get properties() {
     return {
       theme: Object,
@@ -833,10 +838,6 @@ export class MostVisitedElement extends MostVisitedElementBase {
         this.tiles_.slice(0, assert(this.maxVisibleTiles_)),
         this.windowProxy_.now());
   }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
 }
 
 declare global {
diff --git a/chromium/ui/webui/resources/cr_elements/BUILD.gn b/chromium/ui/webui/resources/cr_elements/BUILD.gn
index 31807cec040..9a0313f63c3 100644
--- a/chromium/ui/webui/resources/cr_elements/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_elements/BUILD.gn
@@ -5,44 +5,51 @@
 import("//build/config/chromeos/ui_mode.gni")
 import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/grit/preprocess_if_expr.gni")
-import("//tools/polymer/html_to_js.gni")
+import("//tools/polymer/css_to_wrapper.gni")
+import("//tools/polymer/html_to_wrapper.gni")
 import("//tools/polymer/polymer.gni")
+import("//ui/webui/resources/include_polymer.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
 import("//ui/webui/resources/tools/js_modulizer.gni")
 
-assert(!is_android && !is_ios)
-
 preprocess_folder = "$root_gen_dir/ui/webui/resources/preprocessed/cr_elements"
-preprocess_gen_manifest = "preprocessed_gen_manifest.json"
-preprocess_polymer2_manifest = "preprocessed_polymer2_manifest.json"
+if (include_polymer) {
+  preprocess_gen_manifest = "preprocessed_gen_manifest.json"
+}
 
 if (is_chromeos_ash) {
+  preprocess_polymer2_manifest = "preprocessed_polymer2_manifest.json"
   preprocess_src_manifest = "preprocessed_src_manifest.json"
 }
 
-generate_grd("build_grdp") {
-  grd_prefix = "cr_elements"
-  out_grd = "$target_gen_dir/${grd_prefix}_resources.grdp"
-  deps = [ ":preprocess" ]
-  manifest_files = [ "$target_gen_dir/$preprocess_gen_manifest" ]
-
-  if (is_chromeos_ash) {
-    manifest_files += [
-      # TODO(crbug.com/1184053): Fully remove once no longer used by CrOS.
-      "$target_gen_dir/$preprocess_polymer2_manifest",
-      "$target_gen_dir/$preprocess_src_manifest",
-    ]
+if (include_polymer) {
+  generate_grd("build_grdp") {
+    grd_prefix = "cr_elements"
+    out_grd = "$target_gen_dir/${grd_prefix}_resources.grdp"
+    public_deps = [ ":preprocess" ]
+    manifest_files = [ "$target_gen_dir/$preprocess_gen_manifest" ]
+
+    if (is_chromeos_ash) {
+      manifest_files += [
+        # TODO(crbug.com/1184053): Fully remove once no longer used by CrOS.
+        "$target_gen_dir/$preprocess_polymer2_manifest",
+        "$target_gen_dir/$preprocess_src_manifest",
+      ]
+    }
+    resource_path_prefix = "cr_elements"
   }
-  resource_path_prefix = "cr_elements"
 }
 
 group("preprocess") {
   public_deps = [
-    ":preprocess_generated",
     ":preprocess_generated_ts",
     ":preprocess_src_ts",
   ]
 
+  if (include_polymer) {
+    public_deps += [ ":preprocess_generated" ]
+  }
+
   if (is_chromeos_ash) {
     public_deps += [
       # TODO(crbug.com/1184053): Fully remove once no longer used by CrOS.
@@ -72,337 +79,381 @@ preprocess_if_expr("preprocess_src_ts") {
   in_folder = "."
   out_folder = preprocess_folder
   in_files = [
-    "cr_auto_img/cr_auto_img.ts",
-    "cr_container_shadow_mixin.ts",
-    "cr_search_field/cr_search_field_mixin.ts",
-    "cr_splitter/cr_splitter.ts",
-    "find_shortcut_mixin.ts",
-    "mouse_hoverable_mixin.ts",
-  ]
-}
-
-preprocess_if_expr("preprocess_polymer2") {
-  in_folder = "./"
-  out_folder = "$preprocess_folder"
-  out_manifest = "$target_gen_dir/$preprocess_polymer2_manifest"
-  in_files = [
-    "action_link_css.html",
-    "cr_actionable_row_style.html",
-    "cr_button/cr_button.html",
-    "cr_button/cr_button.js",
-    "cr_checkbox/cr_checkbox.html",
-    "cr_checkbox/cr_checkbox.js",
-    "cr_container_shadow_behavior.html",
-    "cr_container_shadow_behavior.js",
-    "cr_dialog/cr_dialog.html",
-    "cr_dialog/cr_dialog.js",
-    "cr_expand_button/cr_expand_button.html",
-    "cr_expand_button/cr_expand_button.js",
-    "cr_fingerprint/cr_fingerprint_icon.html",
-    "cr_fingerprint/cr_fingerprint_progress_arc.html",
-    "cr_fingerprint/cr_fingerprint_progress_arc.js",
-    "cr_icon_button/cr_icon_button.html",
-    "cr_icon_button/cr_icon_button.js",
-    "cr_icons_css.html",
-    "cr_input/cr_input.html",
-    "cr_input/cr_input.js",
-    "cr_input/cr_input_style_css.html",
-    "cr_lazy_render/cr_lazy_render.html",
-    "cr_lazy_render/cr_lazy_render.js",
-    "cr_lottie/cr_lottie.html",
-    "cr_lottie/cr_lottie.js",
-    "cr_radio_button/cr_card_radio_button.html",
-    "cr_radio_button/cr_card_radio_button.js",
-    "cr_radio_button/cr_radio_button_behavior.html",
-    "cr_radio_button/cr_radio_button_behavior.js",
-    "cr_radio_button/cr_radio_button.html",
-    "cr_radio_button/cr_radio_button.js",
-    "cr_radio_button/cr_radio_button_style_css.html",
-    "cr_radio_group/cr_radio_group.html",
-    "cr_radio_group/cr_radio_group.js",
-    "cr_scrollable_behavior.html",
-    "cr_scrollable_behavior.js",
-    "cr_toggle/cr_toggle.html",
-    "cr_toggle/cr_toggle.js",
-    "find_shortcut_behavior.js",
-    "hidden_style_css.html",
-    "icons.html",
-    "md_select_css.html",
-    "policy/cr_policy_indicator_behavior.html",
-    "policy/cr_policy_indicator_behavior.js",
-    "policy/cr_policy_indicator.html",
-    "policy/cr_policy_indicator.js",
-    "policy/cr_policy_pref_indicator.html",
-    "policy/cr_policy_pref_indicator.js",
-    "policy/cr_tooltip_icon.html",
-    "policy/cr_tooltip_icon.js",
-    "shared_style_css.html",
-    "shared_vars_css.html",
+    "cr_tab_box/cr_tab_box.ts",
+    "cr_tree/cr_tree_base.ts",
+    "cr_tree/cr_tree_item.ts",
+    "cr_tree/cr_tree.ts",
   ]
+  if (include_polymer) {
+    in_files += [
+      "cr_a11y_announcer/cr_a11y_announcer.ts",
+      "cr_action_menu/cr_action_menu.ts",
+      "cr_auto_img/cr_auto_img.ts",
+      "cr_container_shadow_mixin.ts",
+      "cr_drawer/cr_drawer.ts",
+      "cr_grid/cr_grid.ts",
+      "cr_link_row/cr_link_row.ts",
+      "cr_menu_selector/cr_menu_selector.ts",
+      "cr_profile_avatar_selector/cr_profile_avatar_selector_grid.ts",
+      "cr_profile_avatar_selector/cr_profile_avatar_selector.ts",
+      "cr_search_field/cr_search_field_mixin.ts",
+      "cr_search_field/cr_search_field.ts",
+      "cr_slider/cr_slider.ts",
+      "cr_splitter/cr_splitter.ts",
+      "cr_tabs/cr_tabs.ts",
+      "cr_toast/cr_toast_manager.ts",
+      "cr_toast/cr_toast.ts",
+      "cr_toolbar/cr_toolbar_search_field.ts",
+      "cr_toolbar/cr_toolbar_selection_overlay.ts",
+      "cr_toolbar/cr_toolbar.ts",
+      "cr_view_manager/cr_view_manager.ts",
+      "find_shortcut_mixin.ts",
+      "mouse_hoverable_mixin.ts",
+    ]
 
-  if (is_chromeos_ash) {
-    in_files += [ "chromeos/cros_color_overrides.html" ]
+    if (is_chromeos) {
+      in_files += [ "cr_searchable_drop_down/cr_searchable_drop_down.ts" ]
+    }
   }
 }
 
-preprocess_if_expr("preprocess_generated") {
-  deps = [ ":polymer3_elements" ]
-  in_folder = target_gen_dir
-  out_folder = preprocess_folder
-  out_manifest = "$target_gen_dir/$preprocess_gen_manifest"
-  in_files = [
-    "action_link_css.m.js",
-    "cr_actionable_row_style.m.js",
-    "cr_button/cr_button.m.js",
-    "cr_checkbox/cr_checkbox.m.js",
-    "cr_container_shadow_behavior.m.js",
-    "cr_dialog/cr_dialog.m.js",
-    "cr_expand_button/cr_expand_button.m.js",
-    "cr_fingerprint/cr_fingerprint_icon.m.js",
-    "cr_fingerprint/cr_fingerprint_progress_arc.m.js",
-    "cr_icon_button/cr_icon_button.m.js",
-    "cr_icons_css.m.js",
-    "cr_input/cr_input.m.js",
-    "cr_input/cr_input_style_css.m.js",
-    "cr_lazy_render/cr_lazy_render.m.js",
-    "cr_lottie/cr_lottie.m.js",
-    "cr_page_host_style_css.js",
-    "cr_radio_button/cr_card_radio_button.m.js",
-    "cr_radio_button/cr_radio_button_behavior.m.js",
-    "cr_radio_button/cr_radio_button.m.js",
-    "cr_radio_button/cr_radio_button_style_css.m.js",
-    "cr_radio_group/cr_radio_group.m.js",
-    "cr_scrollable_behavior.m.js",
-    "cr_toggle/cr_toggle.m.js",
-    "hidden_style_css.m.js",
-    "icons.m.js",
-    "md_select_css.m.js",
-    "policy/cr_policy_indicator_behavior.m.js",
-    "policy/cr_policy_indicator.m.js",
-    "policy/cr_policy_pref_indicator.m.js",
-    "policy/cr_tooltip_icon.m.js",
-    "shared_style_css.m.js",
-    "shared_vars_css.m.js",
-  ]
+if (is_chromeos_ash) {
+  preprocess_if_expr("preprocess_polymer2") {
+    in_folder = "./"
+    out_folder = "$preprocess_folder"
+    out_manifest = "$target_gen_dir/$preprocess_polymer2_manifest"
+    in_files = [
+      "action_link_css.html",
+      "chromeos/cros_color_overrides.html",
+      "cr_actionable_row_style.html",
+      "cr_button/cr_button.html",
+      "cr_button/cr_button.js",
+      "cr_checkbox/cr_checkbox.html",
+      "cr_checkbox/cr_checkbox.js",
+      "cr_container_shadow_behavior.html",
+      "cr_container_shadow_behavior.js",
+      "cr_dialog/cr_dialog.html",
+      "cr_dialog/cr_dialog.js",
+      "cr_expand_button/cr_expand_button.html",
+      "cr_expand_button/cr_expand_button.js",
+      "cr_fingerprint/cr_fingerprint_icon.html",
+      "cr_fingerprint/cr_fingerprint_progress_arc.html",
+      "cr_fingerprint/cr_fingerprint_progress_arc.js",
+      "cr_icon_button/cr_icon_button.html",
+      "cr_icon_button/cr_icon_button.js",
+      "cr_icons_css.html",
+      "cr_input/cr_input.html",
+      "cr_input/cr_input.js",
+      "cr_input/cr_input_style_css.html",
+      "cr_lazy_render/cr_lazy_render.html",
+      "cr_lazy_render/cr_lazy_render.js",
+      "cr_lottie/cr_lottie.html",
+      "cr_lottie/cr_lottie.js",
+      "cr_radio_button/cr_card_radio_button.html",
+      "cr_radio_button/cr_card_radio_button.js",
+      "cr_radio_button/cr_radio_button_behavior.html",
+      "cr_radio_button/cr_radio_button_behavior.js",
+      "cr_radio_button/cr_radio_button.html",
+      "cr_radio_button/cr_radio_button.js",
+      "cr_radio_button/cr_radio_button_style_css.html",
+      "cr_radio_group/cr_radio_group.html",
+      "cr_radio_group/cr_radio_group.js",
+      "cr_scrollable_behavior.html",
+      "cr_scrollable_behavior.js",
+      "cr_toggle/cr_toggle.html",
+      "cr_toggle/cr_toggle.js",
+      "find_shortcut_behavior.js",
+      "hidden_style_css.html",
+      "icons.html",
+      "md_select_css.html",
+      "policy/cr_policy_indicator_behavior.html",
+      "policy/cr_policy_indicator_behavior.js",
+      "policy/cr_policy_indicator.html",
+      "policy/cr_policy_indicator.js",
+      "policy/cr_policy_pref_indicator.html",
+      "policy/cr_policy_pref_indicator.js",
+      "policy/cr_tooltip_icon.html",
+      "policy/cr_tooltip_icon.js",
+      "shared_style_css.html",
+      "shared_vars_css.html",
+    ]
+  }
+}
 
-  if (is_chromeos_ash) {
-    in_files += [
-      "chromeos/cros_color_overrides.m.js",
-      "chromeos/cr_picture/cr_camera.js",
-      "chromeos/cr_picture/cr_picture_list.js",
-      "chromeos/cr_picture/cr_picture_pane.js",
-      "chromeos/cr_picture/icons.js",
+if (include_polymer) {
+  preprocess_if_expr("preprocess_generated") {
+    deps = [ ":custom_elements" ]
+    in_folder = target_gen_dir
+    out_folder = preprocess_folder
+    out_manifest = "$target_gen_dir/$preprocess_gen_manifest"
+    in_files = [
+      "action_link_css.m.js",
+      "cr_actionable_row_style.m.js",
+      "cr_button/cr_button.m.js",
+      "cr_checkbox/cr_checkbox.m.js",
+      "cr_container_shadow_behavior.m.js",
+      "cr_dialog/cr_dialog.m.js",
+      "cr_expand_button/cr_expand_button.m.js",
+      "cr_fingerprint/cr_fingerprint_icon.m.js",
+      "cr_fingerprint/cr_fingerprint_progress_arc.m.js",
+      "cr_icon_button/cr_icon_button.m.js",
+      "cr_icons_css.m.js",
+      "cr_input/cr_input.m.js",
+      "cr_input/cr_input_style_css.m.js",
+      "cr_lazy_render/cr_lazy_render.m.js",
+      "cr_lottie/cr_lottie.m.js",
+      "cr_radio_button/cr_card_radio_button.m.js",
+      "cr_radio_button/cr_radio_button_behavior.m.js",
+      "cr_radio_button/cr_radio_button.m.js",
+      "cr_radio_button/cr_radio_button_style_css.m.js",
+      "cr_radio_group/cr_radio_group.m.js",
+      "cr_scrollable_behavior.m.js",
+      "cr_toggle/cr_toggle.m.js",
+      "hidden_style_css.m.js",
+      "icons.m.js",
+      "md_select_css.m.js",
+      "policy/cr_policy_indicator_behavior.m.js",
+      "policy/cr_policy_indicator.m.js",
+      "policy/cr_policy_pref_indicator.m.js",
+      "policy/cr_tooltip_icon.m.js",
+      "shared_style_css.m.js",
+      "shared_vars_css.m.js",
     ]
+
+    if (is_chromeos_ash) {
+      in_files += [
+        "chromeos/cros_color_overrides.m.js",
+        "chromeos/cr_picture/cr_camera.js",
+        "chromeos/cr_picture/cr_picture_list.js",
+        "chromeos/cr_picture/cr_picture_pane.js",
+        "chromeos/cr_picture/icons.js",
+      ]
+    }
   }
 }
 
 # TS files are passed to a separate target so that they are not listed in the
 # |out_manifest|.
 preprocess_if_expr("preprocess_generated_ts") {
-  deps = [ ":polymer3_elements" ]
+  deps = [ ":html_wrapper_files_native" ]
   in_folder = target_gen_dir
   out_folder = preprocess_folder
   in_files = [
-    "cr_a11y_announcer/cr_a11y_announcer.ts",
-    "cr_action_menu/cr_action_menu.ts",
-    "cr_drawer/cr_drawer.ts",
-    "cr_grid/cr_grid.ts",
-    "cr_link_row/cr_link_row.ts",
-    "cr_menu_selector/cr_menu_selector.ts",
-    "cr_nav_menu_item_style.ts",
-    "cr_profile_avatar_selector/cr_profile_avatar_selector_grid.ts",
-    "cr_profile_avatar_selector/cr_profile_avatar_selector.ts",
-    "cr_search_field/cr_search_field.ts",
-    "cr_slider/cr_slider.ts",
-    "cr_tabs/cr_tabs.ts",
-    "cr_toast/cr_toast_manager.ts",
-    "cr_toast/cr_toast.ts",
-    "cr_toolbar/cr_toolbar_search_field.ts",
-    "cr_toolbar/cr_toolbar_selection_overlay.ts",
-    "cr_toolbar/cr_toolbar.ts",
-    "cr_view_manager/cr_view_manager.ts",
-    "mwb_element_shared_style.ts",
-    "mwb_shared_icons.ts",
-    "mwb_shared_style.ts",
-    "mwb_shared_vars.ts",
-    "search_highlight_style_css.ts",
+    "cr_tab_box/cr_tab_box.html.ts",
+    "cr_tree/cr_tree.html.ts",
+    "cr_tree/cr_tree_item.html.ts",
   ]
+  if (include_polymer) {
+    deps += [
+      ":css_wrapper_files",
+      ":html_wrapper_files",
+    ]
+    in_files += [
+      "cr_a11y_announcer/cr_a11y_announcer.html.ts",
+      "cr_action_menu/cr_action_menu.html.ts",
+      "cr_drawer/cr_drawer.html.ts",
+      "cr_grid/cr_grid.html.ts",
+      "cr_link_row/cr_link_row.html.ts",
+      "cr_nav_menu_item_style.css.ts",
+      "cr_page_host_style.css.ts",
+      "cr_profile_avatar_selector/cr_profile_avatar_selector_grid.html.ts",
+      "cr_profile_avatar_selector/cr_profile_avatar_selector.html.ts",
+      "cr_search_field/cr_search_field.html.ts",
+      "cr_slider/cr_slider.html.ts",
+      "cr_tabs/cr_tabs.html.ts",
+      "cr_toast/cr_toast.html.ts",
+      "cr_toast/cr_toast_manager.html.ts",
+      "cr_toolbar/cr_toolbar.html.ts",
+      "cr_toolbar/cr_toolbar_search_field.html.ts",
+      "cr_toolbar/cr_toolbar_selection_overlay.html.ts",
+      "cr_view_manager/cr_view_manager.html.ts",
+      "mwb_element_shared_style.css.ts",
+      "mwb_shared_icons.html.ts",
+      "mwb_shared_style.css.ts",
+      "mwb_shared_vars.css.ts",
+      "search_highlight_style.css.ts",
+    ]
 
-  if (is_chromeos) {
-    in_files += [ "cr_searchable_drop_down/cr_searchable_drop_down.ts" ]
+    if (is_chromeos) {
+      in_files += [ "cr_searchable_drop_down/cr_searchable_drop_down.html.ts" ]
+    }
   }
 }
 
-group("closure_compile") {
-  deps = [
-    ":cr_elements_resources",
-    "cr_button:closure_compile",
-    "cr_checkbox:closure_compile",
-    "cr_dialog:closure_compile",
-    "cr_expand_button:closure_compile",
-    "cr_fingerprint:closure_compile",
-    "cr_icon_button:closure_compile",
-    "cr_input:closure_compile",
-    "cr_lottie:closure_compile",
-    "cr_radio_button:closure_compile",
-    "cr_radio_group:closure_compile",
-    "cr_toggle:closure_compile",
-    "policy:closure_compile",
-
-    # Targets for auto-generated Polymer 3 JS Modules
-    ":cr_elements_module_resources",
-    "cr_button:closure_compile_module",
-    "cr_checkbox:closure_compile_module",
-    "cr_dialog:closure_compile_module",
-    "cr_expand_button:closure_compile_module",
-    "cr_fingerprint:closure_compile_module",
-    "cr_icon_button:closure_compile_module",
-    "cr_input:closure_compile_module",
-    "cr_lazy_render:closure_compile_module",
-    "cr_lottie:closure_compile_module",
-    "cr_radio_button:closure_compile_module",
-    "cr_radio_group:closure_compile_module",
-    "cr_toggle:closure_compile_module",
-    "policy:closure_compile_module",
-  ]
+if (include_polymer) {
+  group("closure_compile") {
+    deps = [
+      ":cr_elements_resources",
+      "cr_button:closure_compile",
+      "cr_checkbox:closure_compile",
+      "cr_dialog:closure_compile",
+      "cr_expand_button:closure_compile",
+      "cr_fingerprint:closure_compile",
+      "cr_icon_button:closure_compile",
+      "cr_input:closure_compile",
+      "cr_lottie:closure_compile",
+      "cr_radio_button:closure_compile",
+      "cr_radio_group:closure_compile",
+      "cr_toggle:closure_compile",
+      "policy:closure_compile",
+
+      # Targets for auto-generated Polymer 3 JS Modules
+      ":cr_elements_module_resources",
+      "cr_button:closure_compile_module",
+      "cr_checkbox:closure_compile_module",
+      "cr_dialog:closure_compile_module",
+      "cr_expand_button:closure_compile_module",
+      "cr_fingerprint:closure_compile_module",
+      "cr_icon_button:closure_compile_module",
+      "cr_input:closure_compile_module",
+      "cr_lazy_render:closure_compile_module",
+      "cr_lottie:closure_compile_module",
+      "cr_radio_button:closure_compile_module",
+      "cr_radio_group:closure_compile_module",
+      "cr_toggle:closure_compile_module",
+      "policy:closure_compile_module",
+    ]
 
-  if (is_chromeos) {
-    deps += [ "chromeos:closure_compile" ]
+    if (is_chromeos) {
+      deps += [ "chromeos:closure_compile" ]
+    }
   }
-}
 
-js_type_check("cr_elements_resources") {
-  uses_legacy_modules = true
-  deps = [
-    ":cr_container_shadow_behavior",
-    ":cr_scrollable_behavior",
-  ]
-}
+  js_type_check("cr_elements_resources") {
+    uses_legacy_modules = true
+    deps = [
+      ":cr_container_shadow_behavior",
+      ":cr_scrollable_behavior",
+    ]
+  }
 
-js_library("cr_scrollable_behavior") {
-  deps = [ "//third_party/polymer/v1_0/components-chromium/iron-list:iron-list-extracted" ]
-}
+  js_library("cr_scrollable_behavior") {
+    deps = [ "//third_party/polymer/v1_0/components-chromium/iron-list:iron-list-extracted" ]
+  }
 
-js_library("cr_container_shadow_behavior") {
-  deps = [ "//ui/webui/resources/js:assert" ]
+  js_library("cr_container_shadow_behavior") {
+    deps = [ "//ui/webui/resources/js:assert" ]
+  }
 }
 
 # Targets for auto-generating Polymer 3 JS Modules.
+if (include_polymer) {
+  polymer_modulizer("action_link_css") {
+    js_file = "action_link_css.m.js"
+    html_file = "action_link_css.html"
+    html_type = "style-module"
+  }
 
-polymer_modulizer("action_link_css") {
-  js_file = "action_link_css.m.js"
-  html_file = "action_link_css.html"
-  html_type = "style-module"
-}
-
-polymer_modulizer("cr_actionable_row_style") {
-  js_file = "cr_actionable_row_style.m.js"
-  html_file = "cr_actionable_row_style.html"
-  html_type = "style-module"
-}
+  polymer_modulizer("cr_actionable_row_style") {
+    js_file = "cr_actionable_row_style.m.js"
+    html_file = "cr_actionable_row_style.html"
+    html_type = "style-module"
+  }
 
-polymer_modulizer("shared_vars_css") {
-  js_file = "shared_vars_css.m.js"
-  html_file = "shared_vars_css.html"
-  html_type = "custom-style"
-}
+  polymer_modulizer("shared_vars_css") {
+    js_file = "shared_vars_css.m.js"
+    html_file = "shared_vars_css.html"
+    html_type = "custom-style"
+  }
 
-polymer_modulizer("shared_style_css") {
-  js_file = "shared_style_css.m.js"
-  html_file = "shared_style_css.html"
-  html_type = "style-module"
-}
+  polymer_modulizer("shared_style_css") {
+    js_file = "shared_style_css.m.js"
+    html_file = "shared_style_css.html"
+    html_type = "style-module"
+  }
 
-polymer_modulizer("hidden_style_css") {
-  js_file = "hidden_style_css.m.js"
-  html_file = "hidden_style_css.html"
-  html_type = "style-module"
-}
+  polymer_modulizer("hidden_style_css") {
+    js_file = "hidden_style_css.m.js"
+    html_file = "hidden_style_css.html"
+    html_type = "style-module"
+  }
 
-polymer_modulizer("md_select_css") {
-  js_file = "md_select_css.m.js"
-  html_file = "md_select_css.html"
-  html_type = "style-module"
-}
+  polymer_modulizer("md_select_css") {
+    js_file = "md_select_css.m.js"
+    html_file = "md_select_css.html"
+    html_type = "style-module"
+  }
 
-polymer_modulizer("cr_icons_css") {
-  js_file = "cr_icons_css.m.js"
-  html_file = "cr_icons_css.html"
-  html_type = "style-module"
-}
+  polymer_modulizer("cr_icons_css") {
+    js_file = "cr_icons_css.m.js"
+    html_file = "cr_icons_css.html"
+    html_type = "style-module"
+  }
 
-polymer_modulizer("icons") {
-  js_file = "icons.m.js"
-  html_file = "icons.html"
-  html_type = "iron-iconset"
-}
+  polymer_modulizer("icons") {
+    js_file = "icons.m.js"
+    html_file = "icons.html"
+    html_type = "iron-iconset"
+  }
 
-js_modulizer("modulize") {
-  input_files = [
-    "cr_container_shadow_behavior.js",
-    "cr_scrollable_behavior.js",
-  ]
+  js_modulizer("modulize") {
+    input_files = [
+      "cr_container_shadow_behavior.js",
+      "cr_scrollable_behavior.js",
+    ]
+  }
 }
 
-group("polymer3_elements") {
-  public_deps = [
-    ":action_link_css_module",
-    ":cr_actionable_row_style_module",
-    ":cr_icons_css_module",
-    ":hidden_style_css_module",
-    ":icons_module",
-    ":md_select_css_module",
-    ":modulize",
-    ":shared_style_css_module",
-    ":shared_vars_css_module",
-    ":web_components",
-    "cr_button:cr_button_module",
-    "cr_checkbox:cr_checkbox_module",
-    "cr_dialog:cr_dialog_module",
-    "cr_expand_button:cr_expand_button_module",
-    "cr_fingerprint:polymer3_elements",
-    "cr_icon_button:cr_icon_button_module",
-    "cr_input:polymer3_elements",
-    "cr_lazy_render:cr_lazy_render_module",
-    "cr_lottie:cr_lottie_module",
-    "cr_radio_button:polymer3_elements",
-    "cr_radio_group:cr_radio_group_module",
-    "cr_toggle:cr_toggle_module",
-    "policy:polymer3_elements",
-  ]
+if (include_polymer) {
+  group("custom_elements") {
+    public_deps = [
+      ":action_link_css_module",
+      ":cr_actionable_row_style_module",
+      ":cr_icons_css_module",
+      ":hidden_style_css_module",
+      ":icons_module",
+      ":md_select_css_module",
+      ":modulize",
+      ":shared_style_css_module",
+      ":shared_vars_css_module",
+      "cr_button:cr_button_module",
+      "cr_checkbox:cr_checkbox_module",
+      "cr_dialog:cr_dialog_module",
+      "cr_expand_button:cr_expand_button_module",
+      "cr_fingerprint:polymer3_elements",
+      "cr_icon_button:cr_icon_button_module",
+      "cr_input:polymer3_elements",
+      "cr_lazy_render:cr_lazy_render_module",
+      "cr_lottie:cr_lottie_module",
+      "cr_radio_button:polymer3_elements",
+      "cr_radio_group:cr_radio_group_module",
+      "cr_toggle:cr_toggle_module",
+      "policy:polymer3_elements",
+    ]
 
-  if (is_chromeos) {
-    public_deps += [ "chromeos:polymer3_elements" ]
+    if (is_chromeos) {
+      public_deps += [ "chromeos:polymer3_elements" ]
+    }
   }
 }
 
-js_type_check("cr_elements_module_resources") {
-  is_polymer3 = true
-  deps = [
-    ":cr_container_shadow_behavior.m",
-    ":cr_scrollable_behavior.m",
-  ]
+if (include_polymer) {
+  js_type_check("cr_elements_module_resources") {
+    is_polymer3 = true
+    deps = [
+      ":cr_container_shadow_behavior.m",
+      ":cr_scrollable_behavior.m",
+    ]
 
-  if (is_chromeos_ash) {
-    deps += [ ":find_shortcut_behavior" ]
+    if (is_chromeos_ash) {
+      deps += [ ":find_shortcut_behavior" ]
+    }
   }
-}
 
-js_library("cr_container_shadow_behavior.m") {
-  sources = [ "$root_gen_dir/ui/webui/resources/cr_elements/cr_container_shadow_behavior.m.js" ]
-  deps = [ "//ui/webui/resources/js:assert.m" ]
-  extra_deps = [ ":modulize" ]
-}
+  js_library("cr_container_shadow_behavior.m") {
+    sources = [ "$root_gen_dir/ui/webui/resources/cr_elements/cr_container_shadow_behavior.m.js" ]
+    deps = [ "//ui/webui/resources/js:assert.m" ]
+    extra_deps = [ ":modulize" ]
+  }
 
-js_library("cr_scrollable_behavior.m") {
-  sources = [
-    "$root_gen_dir/ui/webui/resources/cr_elements/cr_scrollable_behavior.m.js",
-  ]
-  deps = [
-    "//third_party/polymer/v3_0/components-chromium/iron-list:iron-list",
-    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
-  ]
-  extra_deps = [ ":modulize" ]
+  js_library("cr_scrollable_behavior.m") {
+    sources = [ "$root_gen_dir/ui/webui/resources/cr_elements/cr_scrollable_behavior.m.js" ]
+    deps = [
+      "//third_party/polymer/v3_0/components-chromium/iron-list:iron-list",
+      "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    ]
+    extra_deps = [ ":modulize" ]
+  }
 }
 
 if (is_chromeos_ash) {
@@ -416,40 +467,50 @@ if (is_chromeos_ash) {
   }
 }
 
-html_to_js("web_components") {
-  js_files = [
-    # Local files
-    "cr_nav_menu_item_style.ts",
-    "cr_page_host_style_css.js",
-    "mwb_shared_icons.ts",
-    "mwb_element_shared_style.ts",
-    "mwb_shared_style.ts",
-    "mwb_shared_vars.ts",
-    "search_highlight_style_css.ts",
-
-    # Subfolder files
-    "cr_a11y_announcer/cr_a11y_announcer.ts",
-    "cr_action_menu/cr_action_menu.ts",
-    "cr_drawer/cr_drawer.ts",
-    "cr_grid/cr_grid.ts",
-    "cr_link_row/cr_link_row.ts",
-    "cr_menu_selector/cr_menu_selector.ts",
-    "cr_profile_avatar_selector/cr_profile_avatar_selector_grid.ts",
-    "cr_profile_avatar_selector/cr_profile_avatar_selector.ts",
-    "cr_search_field/cr_search_field.ts",
-    "cr_slider/cr_slider.ts",
-    "cr_tabs/cr_tabs.ts",
-    "cr_toast/cr_toast_manager.ts",
-    "cr_toast/cr_toast.ts",
-    "cr_toolbar/cr_toolbar_search_field.ts",
-    "cr_toolbar/cr_toolbar_selection_overlay.ts",
-    "cr_toolbar/cr_toolbar.ts",
-    "cr_view_manager/cr_view_manager.ts",
+html_to_wrapper("html_wrapper_files_native") {
+  in_files = [
+    "cr_tab_box/cr_tab_box.html",
+    "cr_tree/cr_tree.html",
+    "cr_tree/cr_tree_item.html",
   ]
+  template = "native"
+}
 
-  if (is_chromeos) {
-    # cr-searchable-drop-down is only used in smb and cups dialogs, both of
-    # which are chromeos only.
-    js_files += [ "cr_searchable_drop_down/cr_searchable_drop_down.ts" ]
+if (include_polymer) {
+  html_to_wrapper("html_wrapper_files") {
+    in_files = [
+      "cr_a11y_announcer/cr_a11y_announcer.html",
+      "cr_action_menu/cr_action_menu.html",
+      "cr_drawer/cr_drawer.html",
+      "cr_grid/cr_grid.html",
+      "cr_link_row/cr_link_row.html",
+      "cr_profile_avatar_selector/cr_profile_avatar_selector_grid.html",
+      "cr_profile_avatar_selector/cr_profile_avatar_selector.html",
+      "cr_search_field/cr_search_field.html",
+      "cr_slider/cr_slider.html",
+      "cr_tabs/cr_tabs.html",
+      "cr_toast/cr_toast.html",
+      "cr_toast/cr_toast_manager.html",
+      "cr_toolbar/cr_toolbar.html",
+      "cr_toolbar/cr_toolbar_search_field.html",
+      "cr_toolbar/cr_toolbar_selection_overlay.html",
+      "cr_view_manager/cr_view_manager.html",
+      "mwb_shared_icons.html",
+    ]
+
+    if (is_chromeos) {
+      in_files += [ "cr_searchable_drop_down/cr_searchable_drop_down.html" ]
+    }
+  }
+
+  css_to_wrapper("css_wrapper_files") {
+    in_files = [
+      "cr_nav_menu_item_style.css",
+      "mwb_element_shared_style.css",
+      "mwb_shared_style.css",
+      "mwb_shared_vars.css",
+      "search_highlight_style.css",
+      "cr_page_host_style.css",
+    ]
   }
 }
diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/cros_color_overrides.html b/chromium/ui/webui/resources/cr_elements/chromeos/cros_color_overrides.html
index 45b25627b1b..5217c87fe5c 100644
--- a/chromium/ui/webui/resources/cr_elements/chromeos/cros_color_overrides.html
+++ b/chromium/ui/webui/resources/cr_elements/chromeos/cros_color_overrides.html
@@ -16,6 +16,12 @@ To get Chrome OS System Colors, an element must:
         color: var(--cros-link-color);
       }
 
+      :host-context([cros]) cr-dialog::part(dialog) {
+        background-color: var(--cros-bg-color-elevation-3);
+        background-image: none;
+        box-shadow: var(--cros-elevation-3-shadow);
+      }
+
       :host-context([cros]) cr-radio-button {
         --cr-radio-button-checked-color: var(--cros-radio-button-color);
         --cr-radio-button-checked-ripple-color:
diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/os_cr_elements.gni b/chromium/ui/webui/resources/cr_elements/chromeos/os_cr_elements.gni
index b9c7dba0c96..65aefff764d 100644
--- a/chromium/ui/webui/resources/cr_elements/chromeos/os_cr_elements.gni
+++ b/chromium/ui/webui/resources/cr_elements/chromeos/os_cr_elements.gni
@@ -9,9 +9,3 @@ cr_elements_chromeos_namespace_rewrites = [
   "cr.png.isEncodedPngDataUrlAnimated|isEncodedPngDataUrlAnimated",
   "cr.ui.Action|Action",
 ]
-
-cr_elements_chromeos_auto_imports = [
-  "ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_types.html|CrPicture",
-  "ui/webui/resources/cr_elements/chromeos/cr_picture/png.html|convertImageSequenceToPng,isEncodedPngDataUrlAnimated",
-  "ui/webui/resources/cr_elements/policy/cr_policy_indicator_behavior.html|CrPolicyIndicatorType",
-]
diff --git a/chromium/ui/webui/resources/cr_elements/cr_a11y_announcer/cr_a11y_announcer.ts b/chromium/ui/webui/resources/cr_elements/cr_a11y_announcer/cr_a11y_announcer.ts
index c99a44005a4..d2a899a9b39 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_a11y_announcer/cr_a11y_announcer.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_a11y_announcer/cr_a11y_announcer.ts
@@ -3,7 +3,9 @@
 // found in the LICENSE file.
 
 import {assert} from 'chrome://resources/js/assert.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './cr_a11y_announcer.html.js';
 
 /**
  * The CrA11yAnnouncerElement is a visually hidden element that reads out
@@ -54,7 +56,7 @@ export class CrA11yAnnouncerElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   private currentTimeout_: number|null = null;
diff --git a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.ts b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.ts
index 9b97e423adf..3607b2cd2d0 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.ts
@@ -4,7 +4,7 @@
 
 import '../shared_vars_css.m.js';
 
-import {FlattenedNodesObserver, html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {FlattenedNodesObserver, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assert} from '../../js/assert.m.js';
 import {isMac, isWindows} from '../../js/cr.m.js';
@@ -13,6 +13,8 @@ import {FocusRow} from '../../js/cr/ui/focus_row.m.js';
 import {focusWithoutInk} from '../../js/cr/ui/focus_without_ink.m.js';
 import {getDeepActiveElement} from '../../js/util.m.js';
 
+import {getTemplate} from './cr_action_menu.html.js';
+
 type ShowAtConfig = {
   top?: number,
   left?: number,
@@ -123,6 +125,10 @@ export class CrActionMenuElement extends PolymerElement {
     return 'cr-action-menu';
   }
 
+  static get template() {
+    return getTemplate();
+  }
+
   static get properties() {
     return {
       // Accessibility text of the menu. Should be something along the lines of
@@ -481,10 +487,6 @@ export class CrActionMenuElement extends PolymerElement {
       this.resizeObserver_.observe(this.$.dialog);
     }
   }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
 }
 
 declare global {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_auto_img/cr_auto_img.ts b/chromium/ui/webui/resources/cr_elements/cr_auto_img/cr_auto_img.ts
index b14259fe084..2fb8947e216 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_auto_img/cr_auto_img.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_auto_img/cr_auto_img.ts
@@ -15,10 +15,12 @@
  *
  *      <img is="cr-auto-img" auto-src="https://foo.com/bar.png">
  *
- *      If your image needs to be fetched using cookies, you can use the
- *      with-cookies attribute as follows:
+ *      If your image URL points to Google Photos storage, meaning it needs an
+ *      auth token to be downloaded, you can use the is-google-photos attribute
+ *      as follows:
  *
- *      <img is="cr-auto-img" auto-src="https://foo.com/bar.png" with-cookies>
+ *      <img is="cr-auto-img" auto-src="https://foo.com/bar.png"
+ *          is-google-photos>
  *
  *      If you want the image to reset to an empty state when auto-src changes
  *      and the new image is still loading, set the clear-src attribute:
@@ -33,22 +35,22 @@ const AUTO_SRC: string = 'auto-src';
 
 const CLEAR_SRC: string = 'clear-src';
 
-const WITH_COOKIES: string = 'with-cookies';
+const IS_GOOGLE_PHOTOS: string = 'is-google-photos';
 
 export class CrAutoImgElement extends HTMLImageElement {
   static get observedAttributes() {
-    return [AUTO_SRC, WITH_COOKIES];
+    return [AUTO_SRC, IS_GOOGLE_PHOTOS];
   }
 
   attributeChangedCallback(
       name: string, oldValue: string|null, newValue: string|null) {
-    if (name !== AUTO_SRC && name !== WITH_COOKIES) {
+    if (name !== AUTO_SRC && name !== IS_GOOGLE_PHOTOS) {
       return;
     }
 
-    // Changes to |WITH_COOKIES| are only interesting when the attribute is
+    // Changes to |IS_GOOGLE_PHOTOS| are only interesting when the attribute is
     // being added or removed.
-    if (name === WITH_COOKIES &&
+    if (name === IS_GOOGLE_PHOTOS &&
         ((oldValue === null) === (newValue === null))) {
       return;
     }
@@ -72,9 +74,9 @@ export class CrAutoImgElement extends HTMLImageElement {
       this.removeAttribute('src');
     } else if (url.protocol === 'data:' || url.protocol === 'chrome:') {
       this.src = url.href;
-    } else if (this.hasAttribute(WITH_COOKIES)) {
-      this.src =
-          `chrome://image?url=${encodeURIComponent(url.href)}&withCookies=true`;
+    } else if (this.hasAttribute(IS_GOOGLE_PHOTOS)) {
+      this.src = `chrome://image?url=${
+          encodeURIComponent(url.href)}&isGooglePhotos=true`;
     } else {
       this.src = 'chrome://image?' + url.href;
     }
@@ -96,16 +98,16 @@ export class CrAutoImgElement extends HTMLImageElement {
     return this.getAttribute(CLEAR_SRC)!;
   }
 
-  set withCookies(enabled: boolean) {
+  set isGooglePhotos(enabled: boolean) {
     if (enabled) {
-      this.setAttribute(WITH_COOKIES, '');
+      this.setAttribute(IS_GOOGLE_PHOTOS, '');
     } else {
-      this.removeAttribute(WITH_COOKIES);
+      this.removeAttribute(IS_GOOGLE_PHOTOS);
     }
   }
 
-  get withCookies(): boolean {
-    return this.hasAttribute(WITH_COOKIES);
+  get isGooglePhotos(): boolean {
+    return this.hasAttribute(IS_GOOGLE_PHOTOS);
   }
 }
 
diff --git a/chromium/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html b/chromium/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
index 05ff9800b9c..f9af4d510ca 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
@@ -8,6 +8,7 @@
 List of customizable styles:
 
   --cr-checkbox-border-size
+  --cr-checkbox-checked-box-background-color
   --cr-checkbox-checked-box-color
   --cr-checkbox-label-color
   --cr-checkbox-label-padding-start
@@ -102,7 +103,8 @@ List of customizable styles:
       }
 
       :host([checked]) #checkbox {
-        background: var(--cr-checkbox-checked-box-color);
+        background: var(--cr-checkbox-checked-box-background-color,
+            var(--cr-checkbox-checked-box-color));
         border-color: var(--cr-checkbox-checked-box-color);
       }
 
diff --git a/chromium/ui/webui/resources/cr_elements/cr_container_shadow_behavior.js b/chromium/ui/webui/resources/cr_elements/cr_container_shadow_behavior.js
index 31d778c8c36..ff496ba3534 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_container_shadow_behavior.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_container_shadow_behavior.js
@@ -169,3 +169,13 @@
     }
   },
 };
+
+/** @interface */
+/* #export */ class CrContainerShadowBehaviorInterface {
+  /**
+   * @param {boolean} enable
+   */
+  enableShadowBehavior(enable) {}
+
+  showDropShadows() {}
+}
diff --git a/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.ts b/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.ts
index df62357e4c0..d90cc52a351 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.ts
@@ -4,11 +4,13 @@
 
 import '../shared_vars_css.m.js';
 
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assertNotReached} from '../../js/assert_ts.js';
 import {listenOnce} from '../../js/util.m.js';
 
+import {getTemplate} from './cr_drawer.html.js';
+
 export interface CrDrawerElement {
   $: {
     dialog: HTMLDialogElement,
@@ -21,7 +23,7 @@ export class CrDrawerElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_fingerprint/OWNERS b/chromium/ui/webui/resources/cr_elements/cr_fingerprint/OWNERS
index 16332070ea9..fc7e7853997 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_fingerprint/OWNERS
+++ b/chromium/ui/webui/resources/cr_elements/cr_fingerprint/OWNERS
@@ -1 +1,2 @@
 nsatragno@chromium.org
+ckincaid@chromium.org
diff --git a/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js b/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js
index d06c4a0503b..818460e981b 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js
@@ -19,12 +19,12 @@
     'cr-fingerprint-icon:fingerprint-scanned-light';
 
 /** @type {string} */
-/* #export */ const FINGERPRINT_TICK_DARK_URL =
-    'chrome://theme/IDR_FINGERPRINT_COMPLETE_TICK_DARK';
+/* #export */ const FINGERPRINT_CHECK_DARK_URL =
+    'chrome://theme/IDR_FINGERPRINT_COMPLETE_CHECK_DARK';
 
 /** @type {string} */
-/* #export */ const FINGERPRINT_TICK_LIGHT_URL =
-    'chrome://theme/IDR_FINGERPRINT_COMPLETE_TICK';
+/* #export */ const FINGERPRINT_CHECK_LIGHT_URL =
+    'chrome://theme/IDR_FINGERPRINT_COMPLETE_CHECK_LIGHT';
 
 /**
  * The dark-mode color of the progress circle background: Google Grey 700.
@@ -90,7 +90,7 @@ const ICON_HEIGHT = 118;
 const ICON_WIDTH = 106;
 
 /**
- * The default size of the checkmark located in the left bottom corner of the
+ * The default size of the check mark located in the bottom-right corner of the
  * fingerprint progress circle.
  * @type {number}
  */
@@ -133,7 +133,7 @@ Polymer({
     /**
      * Scale factor based the configured radius (circleRadius) vs the default
      * radius (DEFAULT_PROGRESS_CIRCLE_RADIUS).
-     * This will affect the size of icons and checkmark.
+     * This will affect the size of icons and check mark.
      * @type {number}
      * @private
      */
@@ -354,8 +354,8 @@ Polymer({
         /** @type {CrLottieElement} */ (this.$.scanningAnimation);
     if (this.isComplete_) {
       scanningAnimation.animationUrl = this.isDarkModeActive_ ?
-          FINGERPRINT_TICK_DARK_URL :
-          FINGERPRINT_TICK_LIGHT_URL;
+          FINGERPRINT_CHECK_DARK_URL :
+          FINGERPRINT_CHECK_LIGHT_URL;
       return;
     }
     scanningAnimation.animationUrl = this.isDarkModeActive_ ?
@@ -399,6 +399,7 @@ Polymer({
     const scanningAnimation =
         /** @type {CrLottieElement|HTMLElement} */ (this.$.scanningAnimation);
     scanningAnimation.singleLoop = true;
+    scanningAnimation.autoplay = true;
     scanningAnimation.classList.remove('translucent');
     this.updateAnimationAsset_();
     this.resizeCheckMark_(scanningAnimation);
@@ -458,17 +459,17 @@ Polymer({
   },
 
   /**
-   * Resize the checkmark based on the scale and place it in the left bottom
-   * corner of fingerprint progress circle.
+   * Resize the check mark based on the scale and place it in the bottom-right
+   * corner of the fingerprint progress circle.
    * @param {!HTMLElement} target
    * @private
    */
   resizeCheckMark_(target) {
-    // Resize checkmark based on the default size and scale.
+    // Resize check mark based on the default size and scale.
     target.style.width = CHECK_MARK_SIZE * this.scale_ + 'px';
     target.style.height = CHECK_MARK_SIZE * this.scale_ + 'px';
 
-    // Place it in the left bottom corner of fingerprint progress circle.
+    // Place it in the bottom-right corner of the fingerprint progress circle.
     const top = this.$.canvas.height / 2 + this.circleRadius -
         CHECK_MARK_SIZE * this.scale_;
     const left = this.$.canvas.width / 2 + this.circleRadius -
diff --git a/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.m.d.ts b/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.m.d.ts
index 520df02ace8..6190d5cfd07 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.m.d.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.m.d.ts
@@ -8,8 +8,8 @@ import {LegacyElementMixin} from 'chrome://resources/polymer/v3_0/polymer/lib/le
 
 export const FINGERPRINT_SCANNED_ICON_DARK: string;
 export const FINGERPRINT_SCANNED_ICON_LIGHT: string;
-export const FINGERPRINT_TICK_DARK_URL: string;
-export const FINGERPRINT_TICK_LIGHT_URL: string;
+export const FINGERPRINT_CHECK_DARK_URL: string;
+export const FINGERPRINT_CHECK_LIGHT_URL: string;
 export const PROGRESS_CIRCLE_BACKGROUND_COLOR_DARK: string;
 export const PROGRESS_CIRCLE_BACKGROUND_COLOR_LIGHT: string;
 export const PROGRESS_CIRCLE_FILL_COLOR_DARK: string;
diff --git a/chromium/ui/webui/resources/cr_elements/cr_grid/cr_grid.ts b/chromium/ui/webui/resources/cr_elements/cr_grid/cr_grid.ts
index 435e5dbddd2..392eada9ec3 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_grid/cr_grid.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_grid/cr_grid.ts
@@ -2,7 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './cr_grid.html.js';
 
 // Displays children in a two-dimensional grid and supports focusing children
 // with arrow keys.
@@ -19,7 +21,7 @@ export class CrGridElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.ts b/chromium/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.ts
index 5b9cd1371f5..cd3d26af846 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_link_row/cr_link_row.ts
@@ -17,10 +17,12 @@ import '../shared_style_css.m.js';
 import '../shared_vars_css.m.js';
 import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrIconButtonElement} from '../cr_icon_button/cr_icon_button.m.js';
 
+import {getTemplate} from './cr_link_row.html.js';
+
 export interface CrLinkRowElement {
   $: {
     icon: CrIconButtonElement,
@@ -33,7 +35,7 @@ export class CrLinkRowElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_menu_selector/cr_menu_selector.html b/chromium/ui/webui/resources/cr_elements/cr_menu_selector/cr_menu_selector.html
deleted file mode 100644
index 49aeb95a1db..00000000000
--- a/chromium/ui/webui/resources/cr_elements/cr_menu_selector/cr_menu_selector.html
+++ /dev/null
@@ -1 +0,0 @@
-<slot></slot>
-\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_elements/cr_nav_menu_item_style.css b/chromium/ui/webui/resources/cr_elements/cr_nav_menu_item_style.css
new file mode 100644
index 00000000000..09be145e9d3
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_nav_menu_item_style.css
@@ -0,0 +1,98 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=chrome://resources/cr_elements/shared_vars_css.m.js
+ * #css_wrapper_metadata_end */
+
+.cr-nav-menu-item {
+  --iron-icon-fill-color: var(--google-grey-700);
+  align-items: center;
+  border-end-end-radius: 100px;
+  border-start-end-radius: 100px;
+  box-sizing: border-box;
+  color: var(--google-grey-900);
+  display: flex;
+  font-size: 14px;
+  font-weight: 500;
+  margin-inline-end: 2px;
+  margin-inline-start: 1px;
+  min-height: 40px;
+  overflow: hidden;
+  padding-block-end: 10px;
+  padding-block-start: 10px;
+  padding-inline-start: 23px;
+  position: relative;
+}
+
+:host-context(cr-drawer) .cr-nav-menu-item {
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+  font-size: inherit;
+}
+
+.cr-nav-menu-item:hover {
+  background: var(--google-grey-200);
+}
+
+:host-context(cr-drawer) .cr-nav-menu-item:hover {
+  background: transparent;
+}
+
+.cr-nav-menu-item[selected] {
+  --iron-icon-fill-color: var(--google-blue-600);
+  background: var(--google-blue-50);
+  color: var(--google-blue-700);
+}
+
+@media (prefers-color-scheme: dark) {
+  .cr-nav-menu-item {
+    --iron-icon-fill-color: var(--google-grey-500);
+    color: white;
+  }
+
+  .cr-nav-menu-item:hover {
+    --iron-icon-fill-color: white;
+    background: var(--google-grey-800);
+  }
+
+  .cr-nav-menu-item[selected] {
+    --iron-icon-fill-color: black;
+    background: var(--google-blue-300);
+    color: var(--google-grey-900);
+  }
+
+  :host-context(cr-drawer) .cr-nav-menu-item[selected] {
+    --iron-icon-fill-color: var(--cr-link-color);
+    color: var(--cr-link-color);
+  }
+}
+
+:host-context(cr-drawer) .cr-nav-menu-item[selected] {
+  background: transparent;
+}
+
+.cr-nav-menu-item:focus {
+  outline: auto 5px -webkit-focus-ring-color;
+  /**
+   * A non-zero z-index to force the outline to appear above the fill
+   * background of selected item.
+   */
+  z-index: 1;
+}
+
+.cr-nav-menu-item:focus:not([selected]):not(:hover) {
+  background: transparent; /* Override iron-list selectable item CSS. */
+}
+
+.cr-nav-menu-item iron-icon {
+  margin-inline-end: 20px;
+  pointer-events: none;
+  vertical-align: top;
+}
+
+:host-context(cr-drawer) .cr-nav-menu-item paper-ripple {
+  display: none;
+}
diff --git a/chromium/ui/webui/resources/cr_elements/cr_nav_menu_item_style.html b/chromium/ui/webui/resources/cr_elements/cr_nav_menu_item_style.html
deleted file mode 100644
index f7854b85a2b..00000000000
--- a/chromium/ui/webui/resources/cr_elements/cr_nav_menu_item_style.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <style>
-    .cr-nav-menu-item {
-      --iron-icon-fill-color: var(--google-grey-700);
-      align-items: center;
-      border-end-end-radius: 100px;
-      border-start-end-radius: 100px;
-      box-sizing: border-box;
-      color: var(--google-grey-900);
-      display: flex;
-      font-size: 14px;
-      font-weight: 500;
-      margin-inline-end: 2px;
-      margin-inline-start: 1px;
-      min-height: 48px;
-      overflow: hidden;
-      padding-block-end: 10px;
-      padding-block-start: 10px;
-      padding-inline-start: 23px;
-      position: relative;
-    }
-
-    :host-context(cr-drawer) .cr-nav-menu-item {
-      border-end-end-radius: 0;
-      border-start-end-radius: 0;
-      font-size: inherit;
-      min-height: 40px;
-    }
-
-    .cr-nav-menu-item:hover {
-      background: var(--google-grey-200);
-    }
-
-    :host-context(cr-drawer) .cr-nav-menu-item:hover {
-      background: transparent;
-    }
-
-    .cr-nav-menu-item[selected] {
-      --iron-icon-fill-color: var(--google-blue-600);
-      background: var(--google-blue-50);
-      color: var(--google-blue-700);
-    }
-
-    @media (prefers-color-scheme: dark) {
-      .cr-nav-menu-item {
-        --iron-icon-fill-color: var(--google-grey-500);
-        color: white;
-      }
-
-      .cr-nav-menu-item:hover {
-        --iron-icon-fill-color: white;
-        background: var(--google-grey-800);
-      }
-
-      .cr-nav-menu-item[selected] {
-        --iron-icon-fill-color: black;
-        background: var(--google-blue-300);
-        color: var(--google-grey-900);
-      }
-
-      :host-context(cr-drawer) .cr-nav-menu-item[selected] {
-        --iron-icon-fill-color: var(--cr-link-color);
-        color: var(--cr-link-color);
-      }
-    }
-
-    :host-context(cr-drawer) .cr-nav-menu-item[selected] {
-      background: transparent;
-    }
-
-    .cr-nav-menu-item:focus {
-      outline: auto 5px -webkit-focus-ring-color;
-      /**
-       * A non-zero z-index to force the outline to appear above the fill
-       * background of selected item.
-       */
-      z-index: 1;
-    }
-
-    .cr-nav-menu-item:focus:not([selected]):not(:hover) {
-      background: transparent; /* Override iron-list selectable item CSS. */
-    }
-
-    .cr-nav-menu-item iron-icon {
-      margin-inline-end: 20px;
-      pointer-events: none;
-      vertical-align: top;
-    }
-
-    :host-context(cr-drawer) .cr-nav-menu-item paper-ripple {
-      display: none;
-    }
-  </style>
-</template>
-\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_elements/cr_nav_menu_item_style.ts b/chromium/ui/webui/resources/cr_elements/cr_nav_menu_item_style.ts
deleted file mode 100644
index 010ff1367af..00000000000
--- a/chromium/ui/webui/resources/cr_elements/cr_nav_menu_item_style.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Copyright 2021 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 'chrome://resources/cr_elements/shared_vars_css.m.js';
-
-const styleElement = document.createElement('dom-module');
-styleElement.innerHTML = `{__html_template__}`;
-styleElement.register('cr-nav-menu-item-style');
-\ No newline at end of file
diff --git a/chromium/ui/webui/resources/cr_elements/cr_page_host_style.css b/chromium/ui/webui/resources/cr_elements/cr_page_host_style.css
new file mode 100644
index 00000000000..19becebffc1
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_page_host_style.css
@@ -0,0 +1,20 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=./shared_vars_css.m.js
+ * #css_wrapper_metadata_end */
+
+/* Common CSS properties for WebUI pages, such as an entire page or a standalone
+ * dialog. The CSS here is in its own file so that the properties can be
+ * imported independently and applied directly to the :host element without
+ * having to import other shared CSS. */
+
+:host {
+  color: var(--cr-primary-text-color);
+  line-height: 154%; /* Apply 20px default line-height to all text. */
+  overflow: hidden; /* Prevent double scroll bar bugs. */
+  user-select: text;
+}
diff --git a/chromium/ui/webui/resources/cr_elements/cr_page_host_style_css.html b/chromium/ui/webui/resources/cr_elements/cr_page_host_style_css.html
deleted file mode 100644
index de8491f443c..00000000000
--- a/chromium/ui/webui/resources/cr_elements/cr_page_host_style_css.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!--
-  Common CSS properties for WebUI pages, such as an entire page or a standalone
-  dialog. The CSS here is in its own file so that the properties can be imported
-  independently and applied directly to the :host element without having to
-  import other shared CSS.
--->
-<template>
-  <style>
-    :host {
-      color: var(--cr-primary-text-color);
-      line-height: 154%; /* Apply 20px default line-height to all text. */
-      overflow: hidden; /* Prevent double scroll bar bugs. */
-      user-select: text;
-    }
-  </style>
-</template>
diff --git a/chromium/ui/webui/resources/cr_elements/cr_page_host_style_css.js b/chromium/ui/webui/resources/cr_elements/cr_page_host_style_css.js
deleted file mode 100644
index 8364d4e89b0..00000000000
--- a/chromium/ui/webui/resources/cr_elements/cr_page_host_style_css.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// Copyright 2021 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 './shared_vars_css.m.js';
-const template = document.createElement('template');
-template.innerHTML = `
-<dom-module id="cr-page-host-style" assetpath="chrome://resources/">
-{__html_template__}
-</dom-module>
-`;
-document.body.appendChild(template.content.cloneNode(true));
diff --git a/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.ts b/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.ts
index 6c2715bee64..232b02de781 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.ts
@@ -14,10 +14,12 @@ import '//resources/polymer/v3_0/paper-styles/color.js';
 import '//resources/polymer/v3_0/paper-tooltip/paper-tooltip.js';
 import './cr_profile_avatar_selector_grid.js';
 
-import {DomRepeatEvent, html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {DomRepeatEvent, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getImage} from '../../js/icon.js';
 
+import {getTemplate} from './cr_profile_avatar_selector.html.js';
+
 export type AvatarIcon = {
   url: string,
   label: string,
@@ -32,7 +34,7 @@ export class CrProfileAvatarSelectorElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.ts b/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.ts
index ed2afc674dc..d8343f00018 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector_grid.ts
@@ -7,18 +7,20 @@
  * profile avatar icons that allows keyboard navigation with all arrow keys.
  */
 
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assert} from '../../js/assert.m.js';
 import {hasKeyModifiers} from '../../js/util.m.js';
 
+import {getTemplate} from './cr_profile_avatar_selector_grid.html.js';
+
 export class CrProfileAvatarSelectorGridElement extends PolymerElement {
   static get is() {
     return 'cr-profile-avatar-selector-grid';
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.ts b/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.ts
index 0862ef8635a..c22429b4c87 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_search_field/cr_search_field.ts
@@ -16,10 +16,11 @@ import '../shared_style_css.m.js';
 import '../shared_vars_css.m.js';
 import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrInputElement} from '../cr_input/cr_input.m.js';
 
+import {getTemplate} from './cr_search_field.html.js';
 import {CrSearchFieldMixin} from './cr_search_field_mixin.js';
 
 const CrSearchFieldElementBase = CrSearchFieldMixin(PolymerElement);
@@ -37,7 +38,7 @@ export class CrSearchFieldElement extends CrSearchFieldElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.ts b/chromium/ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.ts
index 6039c3018a6..21c9a365d67 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.ts
@@ -24,10 +24,12 @@ import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
 import '//resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
 
 import {IronDropdownElement} from '//resources/polymer/v3_0/iron-dropdown/iron-dropdown.js';
-import {DomRepeatEvent, html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {DomRepeatEvent, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrInputElement} from '../cr_input/cr_input.m.js';
 
+import {getTemplate} from './cr_searchable_drop_down.html.js';
+
 export interface CrSearchableDropDownElement {
   $: {
     search: CrInputElement,
@@ -40,6 +42,10 @@ export class CrSearchableDropDownElement extends PolymerElement {
     return 'cr-searchable-drop-down';
   }
 
+  static get template() {
+    return getTemplate();
+  }
+
   static get properties() {
     return {
       autofocus: {
@@ -469,10 +475,6 @@ export class CrSearchableDropDownElement extends PolymerElement {
     this.invalid =
         !this.updateValueOnInput && (this.value !== this.$.search.value);
   }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
 }
 
 declare global {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.ts b/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.ts
index ba5b5c4756b..7be408902ed 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_slider/cr_slider.ts
@@ -11,11 +11,13 @@ import '../hidden_style_css.m.js';
 import '../shared_vars_css.m.js';
 
 import {PaperRippleBehavior} from '//resources/polymer/v3_0/paper-behaviors/paper-ripple-behavior.js';
-import {Debouncer, html, microTask, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {Debouncer, microTask, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assert} from '../../js/assert_ts.js';
 import {EventTracker} from '../../js/event_tracker.m.js';
 
+import {getTemplate} from './cr_slider.html.js';
+
 /**
  * The |value| is the corresponding value that the current slider tick is
  * associated with. The string |label| is shown in the UI as the label for the
@@ -68,6 +70,10 @@ export class CrSliderElement extends CrSliderElementBase {
     return 'cr-slider';
   }
 
+  static get template() {
+    return getTemplate();
+  }
+
   static get properties() {
     return {
       disabled: {
@@ -200,6 +206,8 @@ export class CrSliderElement extends CrSliderElementBase {
   private deltaKeyMap_: Map<string, number>|null = null;
   private draggingEventTracker_: EventTracker|null = null;
   private debouncer_: Debouncer;
+
+  /* eslint-disable-next-line @typescript-eslint/naming-convention */
   override _rippleContainer: Element;
 
   override ready() {
@@ -461,10 +469,6 @@ export class CrSliderElement extends CrSliderElementBase {
     ripple.classList.add('circle', 'toggle-ink');
     return ripple;
   }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
 }
 
 declare global {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_tab_box/README.md b/chromium/ui/webui/resources/cr_elements/cr_tab_box/README.md
new file mode 100644
index 00000000000..4d3a1e882d4
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_tab_box/README.md
@@ -0,0 +1,37 @@
+# cr-tab-box
+
+cr-tab-box is a non-Polymer custom element that can be used to create a simple
+tabbed UI. This is generally most useful for debug pages that are not
+concerned with matching the look/feel of the larger user-facing Chromium WebUIs
+that use Polymer (e.g. chrome://settings). cr-tab-box replaces the deprecated
+cr.ui.TabBox from ui/webui/resources/js/cr/ui/tabs.js which was previously
+used by debug pages for this purpose.
+
+## Example usage
+Tabs and tab panels can be added into the appropriate slots. The number and
+order of the tabs should match the number and order of the panels. Example:
+
+```html
+  <cr-tab-box>
+    <div slot="tabs">Donuts</div>
+    <div slot="tabs">Cookies</div>
+    <div slot="panels">
+      <span>Some content related to donuts</span>
+    </div>
+    <div slot="panels">
+      <span>Some content related to cookies</span>
+    </div>
+  </cr-tab-box>
+```
+## Relationship to cr-tabs
+In general, user facing WebUIs using Polymer should use cr-tabs, while debug
+UIs trying to avoid Polymer (e.g., in order to run on mobile platforms) should
+use cr-tab-box. Key differences include:
+
+* cr-tab-box contains slots for both tabs and corresponding panels. cr-tabs
+  has only one slot for tabs, and is generally used in combination with
+  something like iron-pages.
+* cr-tabs is kept up to date with current user-facing WebUI styles. cr-tab-box
+  is intended for debug UIs and uses very simple styling.
+* cr-tabs depends on Polymer, while cr-tab-box does not.
+
diff --git a/chromium/ui/webui/resources/cr_elements/cr_tab_box/cr_tab_box.html b/chromium/ui/webui/resources/cr_elements/cr_tab_box/cr_tab_box.html
new file mode 100644
index 00000000000..b3a81f7867d
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_tab_box/cr_tab_box.html
@@ -0,0 +1,90 @@
+<style>
+  :host {
+    display: flex;
+    flex-direction: column;
+    --tabs-background-color: #fbfbfb;
+    --tabs-border-color: #c8c8c8;
+    --tabs-hover-text-color: black;
+    --tabs-unselected-text-color: #646464;
+  }
+
+  #tablist {
+    background: var(--tabs-background-color);
+    border-bottom: 1px solid var(--tabs-border-color);
+    display: flex;
+    margin: 0;
+    padding-inline-start: 9px;
+    padding-top: 14px;
+  }
+
+  :host([sticky-tabs]) #tablist {
+    position: sticky;
+    top: 0;
+    z-index: var(--cr-tab-box-tabs-z-index, 1);
+  }
+
+  #tablist ::slotted(*) {
+    background: var(--tabs-background-color);
+    border: 1px solid var(--tabs-background-color);
+    border-bottom: 0;
+    border-radius: 0;
+    cursor: default;
+    display: block;
+    margin-inline-start: 0;
+    min-width: 0;
+    padding: 4px 9px 4px 10px;
+    text-align: center;
+    transition: none;
+  }
+
+  #tablist ::slotted(:not([selected])) {
+    color: var(--tabs-unselected-text-color);
+  }
+
+  #tablist ::slotted(:not([selected]):hover) {
+    color: var(--tabs-hover-text-color);
+  }
+
+  #tablist ::slotted([selected]) {
+    border-color: var(--tabs-border-color);
+    font-weight: bold;
+    margin-bottom: -1px;
+    position: relative;
+    transition: none;
+    z-index: 0;
+  }
+
+  #tablist:focus {
+    outline: none;
+  }
+
+  html.focus-outline-visible #tablist:focus ::slotted([selected]) {
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+  }
+
+  #tabpanels {
+    background: var(--tabs-background-color);
+    box-shadow: none;
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    padding: 0 20px;
+  }
+
+  #tabpanels ::slotted([slot=panel]) {
+    display: none;
+    flex: 1;
+  }
+
+  #tabpanels ::slotted([slot=panel][selected]) {
+    display: block;
+  }
+</style>
+
+<div id="tablist">
+  <slot name="tab"></slot>
+</div>
+<div id="tabpanels">
+  <slot name="panel"></slot>
+</div>
diff --git a/chromium/ui/webui/resources/cr_elements/cr_tab_box/cr_tab_box.ts b/chromium/ui/webui/resources/cr_elements/cr_tab_box/cr_tab_box.ts
new file mode 100644
index 00000000000..1d92acf8878
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_tab_box/cr_tab_box.ts
@@ -0,0 +1,125 @@
+// Copyright 2022 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 {assert} from '../../js/assert_ts.js';
+import {FocusOutlineManager} from '../../js/cr/ui/focus_outline_manager.m.js';
+import {CustomElement} from '../../js/custom_element.js';
+
+import {getTemplate} from './cr_tab_box.html.js';
+
+export class CrTabBoxElement extends CustomElement {
+  static override get template() {
+    return getTemplate();
+  }
+
+  static get observedAttributes() {
+    return ['selected-index'];
+  }
+
+  private tabs_: HTMLElement;
+  private panels_: HTMLElement;
+  private focusOutlineManager_: FocusOutlineManager;
+
+  constructor() {
+    super();
+
+    const tabs = this.$<HTMLElement>('#tablist');
+    assert(tabs);
+    this.tabs_ = tabs;
+    this.tabs_.addEventListener('keydown', e => this.onKeydown_(e));
+    this.tabs_.addEventListener('click', (e: MouseEvent) => {
+      const tabs = this.getTabs_();
+      for (let i = 0; i < e.composedPath().length; i++) {
+        const el = e.composedPath()[i] as HTMLElement;
+        const index = tabs.findIndex(tab => tab === el);
+        if (index !== -1) {
+          this.setAttribute('selected-index', index.toString());
+          break;
+        }
+      }
+    });
+
+    const panels = this.$<HTMLElement>('#tabpanels');
+    assert(panels);
+    this.panels_ = panels;
+    this.focusOutlineManager_ = FocusOutlineManager.forDocument(document);
+  }
+
+  connectedCallback() {
+    this.setAttribute('selected-index', '0');
+  }
+
+  attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    assert(name === 'selected-index');
+    const newIndex = Number(newValue);
+    assert(!Number.isNaN(newIndex));
+    this.getPanels_().forEach((panel: Element, index: number) => {
+      panel.toggleAttribute('selected', index === newIndex);
+    });
+    this.getTabs_().forEach((tab: HTMLElement, index: number) => {
+      const isSelected = index === newIndex;
+      tab.toggleAttribute('selected', isSelected);
+      // Update tabIndex for a11y
+      tab.setAttribute('tabindex', isSelected ? '0' : '-1');
+      // Update aria-selected attribute for a11y
+      const firstSelection = !tab.hasAttribute('aria-selected');
+      tab.setAttribute('aria-selected', isSelected ? 'true' : 'false');
+      // Update focus, but don't override initial focus.
+      if (isSelected && !firstSelection) {
+        tab.focus();
+      }
+    });
+
+    this.dispatchEvent(new CustomEvent(
+        'selected-index-change',
+        {bubbles: true, composed: true, detail: newIndex}));
+  }
+
+  private getTabs_(): HTMLElement[] {
+    return Array.from(this.tabs_.querySelector('slot')!.assignedElements()) as
+        HTMLElement[];
+  }
+
+  private getPanels_(): Element[] {
+    return Array.from(this.panels_.querySelector('slot')!.assignedElements());
+  }
+
+  private onKeydown_(e: KeyboardEvent) {
+    let delta = 0;
+    switch (e.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        delta = -1;
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        delta = 1;
+        break;
+    }
+
+    if (!delta) {
+      return;
+    }
+
+    if (document.documentElement.dir === 'rtl') {
+      delta *= -1;
+    }
+
+    const count = this.getTabs_().length;
+    const newIndex =
+        (Number(this.getAttribute('selected-index')) + delta + count) % count;
+    this.setAttribute('selected-index', newIndex.toString());
+
+    // Show focus outline since we used the keyboard.
+    this.focusOutlineManager_.visible = true;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cr-tab-box': CrTabBoxElement;
+  }
+}
+
+customElements.define('cr-tab-box', CrTabBoxElement);
diff --git a/chromium/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.ts b/chromium/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.ts
index 8b704146073..4480c444881 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_tabs/cr_tabs.ts
@@ -22,7 +22,9 @@
 import '../hidden_style_css.m.js';
 import '../shared_vars_css.m.js';
 
-import {DomRepeatEvent, html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {DomRepeatEvent, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './cr_tabs.html.js';
 
 export class CrTabsElement extends PolymerElement {
   static get is() {
@@ -30,7 +32,7 @@ export class CrTabsElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.ts b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.ts
index 42864e8c06d..9de41da0a30 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.ts
@@ -7,7 +7,9 @@
 import '//resources/polymer/v3_0/paper-styles/color.js';
 import '../shared_vars_css.m.js';
 
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {getTemplate} from './cr_toast.html.js';
 
 export interface CrToastElement {
   _setOpen(open: boolean): void;
@@ -19,7 +21,7 @@ export class CrToastElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.ts b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.ts
index 9cff189f1a1..1305a0bcb56 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.ts
@@ -9,11 +9,12 @@ import '../../js/event_tracker.m.js';
 import '../hidden_style_css.m.js';
 import './cr_toast.js';
 
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assert} from '../../js/assert_ts.js';
 
 import {CrToastElement} from './cr_toast.js';
+import {getTemplate} from './cr_toast_manager.html.js';
 
 let toastManagerInstance: CrToastManagerElement|null = null;
 
@@ -41,7 +42,7 @@ export class CrToastManagerElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.ts b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.ts
index ea35a01eb1d..5eece9cacdb 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.ts
@@ -10,8 +10,9 @@ import '../shared_vars_css.m.js';
 import '//resources/polymer/v3_0/iron-media-query/iron-media-query.js';
 import './cr_toolbar_search_field.js';
 
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {getTemplate} from './cr_toolbar.html.js';
 import {CrToolbarSearchFieldElement} from './cr_toolbar_search_field.js';
 
 export interface CrToolbarElement {
@@ -26,7 +27,7 @@ export class CrToolbarElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.ts b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.ts
index df1cf85dd18..628c56923a2 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.ts
@@ -9,10 +9,12 @@ import '../shared_style_css.m.js';
 import '../shared_vars_css.m.js';
 import '//resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
 
-import {DomIf, html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {DomIf, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrSearchFieldMixin} from '../cr_search_field/cr_search_field_mixin.js';
 
+import {getTemplate} from './cr_toolbar_search_field.html.js';
+
 export interface CrToolbarSearchFieldElement {
   $: {
     searchInput: HTMLInputElement,
@@ -30,7 +32,7 @@ export class CrToolbarSearchFieldElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.ts b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.ts
index 8da220e0721..03e70fc3a20 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.ts
@@ -19,17 +19,19 @@ import '../icons.m.js';
 import '../shared_vars_css.m.js';
 
 import {IronA11yAnnouncer} from '//resources/polymer/v3_0/iron-a11y-announcer/iron-a11y-announcer.js';
-import {Debouncer, html, microTask, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {Debouncer, microTask, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CrButtonElement} from '../cr_button/cr_button.m.js';
 
+import {getTemplate} from './cr_toolbar_selection_overlay.html.js';
+
 export class CrToolbarSelectionOverlayElement extends PolymerElement {
   static get is() {
     return 'cr-toolbar-selection-overlay';
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree.html b/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree.html
new file mode 100644
index 00000000000..f9351f5e23c
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree.html
@@ -0,0 +1,7 @@
+<style>
+  :host {
+    display: block;
+    outline: none;
+    overflow: auto;
+  }
+</style>
diff --git a/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree.ts b/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree.ts
new file mode 100644
index 00000000000..1e2619a5de6
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree.ts
@@ -0,0 +1,235 @@
+// Copyright 2022 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 {assert, assertNotReached} from '../../js/assert_ts.js';
+import {isMac} from '../../js/cr.m.js';
+
+import {getTemplate} from './cr_tree.html.js';
+import {CrTreeBaseElement} from './cr_tree_base.js';
+import {SELECTED_ATTR} from './cr_tree_item.js';
+
+/**
+ * @fileoverview cr-tree is a container for a tree structure. Items can be added
+ * or removed from the tree using the add/addAt/removeItem methods. Adding items
+ * declaratively is not currently supported, as this class is primarily intended
+ * to replace cr.ui.Tree, which is used for cases of creating trees at runtime
+ * (e.g. from backend data).
+ */
+
+/**
+ * Helper function that returns the next visible tree item.
+ */
+function getNext(item: CrTreeBaseElement): CrTreeBaseElement|null {
+  if (item.expanded) {
+    const firstChild = item.items[0];
+    if (firstChild) {
+      return firstChild;
+    }
+  }
+
+  return getNextHelper(item);
+}
+
+/**
+ * Another helper function that returns the next visible tree item.
+ */
+function getNextHelper(item: CrTreeBaseElement|null): CrTreeBaseElement|null {
+  if (!item) {
+    return null;
+  }
+
+  const nextSibling = item.nextElementSibling;
+  if (nextSibling) {
+    assert(nextSibling.tagName === 'CR-TREE-ITEM');
+    return nextSibling as CrTreeBaseElement;
+  }
+  const parent = item.parentItem;
+  if (!parent || parent.tagName === 'CR-TREE') {
+    return null;
+  }
+  return getNextHelper(item.parentItem);
+}
+
+/**
+ * Helper function that returns the previous visible tree item.
+ */
+function getPrevious(item: CrTreeBaseElement): CrTreeBaseElement|null {
+  const previousSibling = item.previousElementSibling;
+  if (previousSibling && previousSibling.tagName === 'CR-TREE-ITEM') {
+    return getLastHelper(previousSibling as CrTreeBaseElement);
+  }
+  return item.parentItem;
+}
+
+/**
+ * Helper function that returns the last visible tree item in the subtree.
+ */
+function getLastHelper(item: CrTreeBaseElement): CrTreeBaseElement|null {
+  if (item.expanded && item.hasChildren) {
+    const lastChild = item.items[item.items.length - 1]!;
+    return getLastHelper(lastChild);
+  }
+  return item;
+}
+
+export class CrTreeElement extends CrTreeBaseElement {
+  static override get template() {
+    return getTemplate();
+  }
+
+  private selectedItem_: CrTreeBaseElement|null = null;
+
+  /**
+   * Initializes the element.
+   */
+  connectedCallback() {
+    // Make list focusable
+    if (!this.hasAttribute('tabindex')) {
+      this.tabIndex = 0;
+    }
+
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'tree');
+    }
+
+    this.addEventListener('keydown', this.handleKeyDown.bind(this));
+    this.addEventListener('focus', this.onFocus.bind(this));
+    this.addEventListener('blur', this.onBlur.bind(this));
+  }
+
+  // CrTreeBase implementation:
+  /**
+   * The depth of the node. This is 0 for the tree itself.
+   */
+  override get depth(): number {
+    return 0;
+  }
+
+  override get itemsRoot(): DocumentFragment|HTMLElement {
+    return this.shadowRoot!;
+  }
+
+  // These two methods should never be called for the tree itself.
+  override set depth(_depth: number) {
+    assertNotReached();
+  }
+
+  override setParent(_parent: CrTreeBaseElement) {
+    assertNotReached();
+  }
+
+  /**
+   * The selected tree item or null if none.
+   */
+  override get selectedItem(): CrTreeBaseElement|null {
+    return this.selectedItem_ || null;
+  }
+
+  override set selectedItem(item: CrTreeBaseElement|null) {
+    const oldSelectedItem = this.selectedItem_;
+    if (oldSelectedItem !== item) {
+      // Set the selectedItem_ before deselecting the old item since we only
+      // want one change when moving between items.
+      this.selectedItem_ = item;
+
+      if (oldSelectedItem) {
+        oldSelectedItem.toggleAttribute(SELECTED_ATTR, false);
+      }
+
+      if (item) {
+        item.toggleAttribute(SELECTED_ATTR, true);
+        if (item.id) {
+          this.setAttribute('aria-activedescendant', item.id);
+        }
+      } else {
+        this.removeAttribute('aria-activedescendant');
+      }
+
+      this.dispatchEvent(
+          new CustomEvent('cr-tree-change', {bubbles: true, composed: true}));
+    }
+  }
+
+  // Event handlers:
+  // TODO(rbpotter): Figure out if there is a better way to handle tree:focus
+  // and tree[icon-visibility] styles from tree.css.
+  onFocus() {
+    this.setAttribute('tree-focused', 'true');
+  }
+
+  onBlur() {
+    this.setAttribute('tree-focused', 'false');
+  }
+
+  /**
+   * Handles keydown events on the tree and updates selection and exanding
+   * of tree items.
+   */
+  handleKeyDown(e: KeyboardEvent) {
+    let itemToSelect: CrTreeBaseElement|null = null;
+    if (e.ctrlKey) {
+      return;
+    }
+
+    const item = this.selectedItem;
+    if (!item) {
+      return;
+    }
+
+    const rtl = getComputedStyle(item).direction === 'rtl';
+
+    switch (e.key) {
+      case 'ArrowUp':
+        itemToSelect = getPrevious(item);
+        break;
+      case 'ArrowDown':
+        itemToSelect = getNext(item);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowRight':
+        // Don't let back/forward keyboard shortcuts be used.
+        if (!isMac && e.altKey || isMac && e.metaKey) {
+          break;
+        }
+
+        if (e.key === 'ArrowLeft' && !rtl || e.key === 'ArrowRight' && rtl) {
+          if (item.expanded) {
+            item.expanded = false;
+          } else {
+            itemToSelect = item.parentItem;
+          }
+        } else {
+          if (!item.expanded) {
+            item.expanded = true;
+          } else {
+            itemToSelect = item.items[0] || null;
+          }
+        }
+        break;
+      case 'Home':
+        itemToSelect = this.items[0] || null;
+        break;
+      case 'End':
+        itemToSelect = this.items[this.items.length - 1] || null;
+        break;
+    }
+
+    if (itemToSelect) {
+      itemToSelect.toggleAttribute(SELECTED_ATTR, true);
+      e.preventDefault();
+    }
+  }
+
+  setIconVisibility(visibility: string) {
+    this.setAttribute('icon-visibility', visibility);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cr-tree': CrTreeElement;
+  }
+}
+
+customElements.define('cr-tree', CrTreeElement);
diff --git a/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree_base.ts b/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree_base.ts
new file mode 100644
index 00000000000..4edce25f1f3
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree_base.ts
@@ -0,0 +1,114 @@
+// Copyright 2022 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 {assert} from '../../js/assert_ts.js';
+import {CustomElement} from '../../js/custom_element.js';
+
+export const EXPANDED_ATTR: string = 'expanded';
+
+// Encapuslates shared behavior of cr-trees and the cr-tree-items that they
+// contain. This reduces code duplication for e.g. adding/removing children and
+// facilitates writing methods navigating the full tree structure (cr-tree and
+// all cr-tree-item descendants), without introducing circular dependencies.
+export abstract class CrTreeBaseElement extends CustomElement {
+  static override get template() {
+    return window.trustedTypes ? window.trustedTypes.emptyHTML : ('' as string);
+  }
+
+  static get observedAttributes() {
+    return ['icon-visibility', 'tree-focused'];
+  }
+
+  detail: object = {};
+  private parent_: CrTreeBaseElement|null = null;
+
+  attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+    assert(name === 'icon-visibility' || name === 'tree-focused');
+    this.items.forEach(item => item.setAttribute(name, newValue));
+  }
+
+  setParent(parent: CrTreeBaseElement) {
+    this.parent_ = parent;
+  }
+
+  get items(): CrTreeBaseElement[] {
+    return Array.from(this.itemsRoot.querySelectorAll('cr-tree-item')) as
+        CrTreeBaseElement[];
+  }
+
+  abstract get depth(): number;
+  abstract set depth(depth: number);
+  abstract get itemsRoot(): DocumentFragment|HTMLElement;
+  abstract get selectedItem(): CrTreeBaseElement|null;
+  abstract set selectedItem(item: CrTreeBaseElement|null);
+
+  /**
+   * Adds a tree item as a child.
+   */
+  add(child: CrTreeBaseElement) {
+    this.addAt(child, -1);
+  }
+
+  /**
+   * Adds a tree item as a child at a given index.
+   */
+  addAt(child: CrTreeBaseElement, index: number) {
+    assert(child.tagName === 'CR-TREE-ITEM');
+    child.setParent(this);
+
+    if (index === -1 || index >= this.items.length) {
+      this.itemsRoot.appendChild(child);
+    } else {
+      this.itemsRoot.insertBefore(child, this.items[index] || null);
+    }
+    if (this.items.length === 1) {
+      this.setHasChildren(true);
+    }
+    child.depth = this.depth + 1;
+    child.setAttribute(
+        'icon-visibility', this.getAttribute('icon-visibility') || '');
+  }
+
+  removeTreeItem(child: CrTreeBaseElement) {
+    this.itemsRoot.removeChild(child);
+    if (this.items.length === 0) {
+      this.setHasChildren(false);
+    }
+  }
+
+  get parentItem(): CrTreeBaseElement|null {
+    return this.parent_;
+  }
+
+  /**
+   * The tree that the tree item belongs to or null of no added to a tree.
+   */
+  get tree(): CrTreeBaseElement|null {
+    if (this.tagName === 'CR-TREE') {
+      return this;
+    }
+
+    if (!this.parent_) {
+      return null;
+    }
+
+    return this.parent_.tree;
+  }
+
+  get hasChildren(): boolean {
+    return !!this.items[0];
+  }
+
+  setHasChildren(b: boolean) {
+    this.toggleAttribute('has-children', b);
+  }
+
+  get expanded() {
+    return this.hasAttribute(EXPANDED_ATTR);
+  }
+
+  set expanded(expanded: boolean) {
+    this.toggleAttribute(EXPANDED_ATTR, expanded);
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree_item.html b/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree_item.html
new file mode 100644
index 00000000000..76196d75863
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree_item.html
@@ -0,0 +1,159 @@
+<style>
+  :host {
+    --white-100: rgba(255, 255, 255, 0);
+    --white-80: rgba(255, 255, 255, .8);
+  }
+
+  :host .tree-row {
+    align-items: center;
+    background-color: var(--white-100);
+    /* transparent white */
+    border: var(--cr-tree-row-border, 1px solid var(--white-100));
+    border-radius: var(--cr-tree-row-border-radius, 2px);
+    color: black;
+    cursor: default;
+    display: flex;
+    line-height: var(--cr-tree-row-line-height, 28px);
+    padding: 0 3px;
+    position: relative;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .expand-icon {
+    background: url(chrome://resources/images/tree_triangle.svg) no-repeat center center;
+    background-size: 8px 5.5px;
+    height: 16px;
+    min-width: 16px;
+    opacity: .6;
+    transform: rotate(-90deg);
+    transition: all 150ms;
+    width: 16px;
+  }
+
+  :host-context([dir=rtl]) .expand-icon {
+    transform: rotate(90deg);
+  }
+
+  :host([expanded]) .expand-icon {
+    background-image: url(chrome://resources/images/tree_triangle.svg);
+    opacity: .5;
+    transform: rotate(0);
+  }
+
+  .tree-row .expand-icon {
+    visibility: hidden;
+  }
+
+  :host(:not([has-children])) .tree-row .expand-icon {
+    visibility: hidden;
+  }
+
+  :host([may-have-children]) .tree-row .expand-icon {
+    visibility: visible;
+  }
+
+  .tree-row:hover {
+    background-color: hsl(214, 91%, 97%);
+    border-color: hsl(214, 91%, 85%);
+    z-index: 1;
+  }
+
+  :host([selected]) .tree-row {
+    background-color: var(--cr-tree-row-selected-color, hsl(0, 0%, 90%));
+    background-image: var(--cr-tree-row-selected-image,
+                          linear-gradient(var(--white-80), var(--white-100)));
+    border-color: hsl(0, 0%, 85%);
+    z-index: 2;
+  }
+
+  :host([selected]) .tree-row:hover,
+  :host([selected][tree-focused=true]) .tree-row {
+    background-color: hsl(214, 91%, 89%);
+    border-color: rgb(125, 162, 206);
+  }
+
+  :host([expanded]) .tree-children {
+    display: block;
+  }
+
+  .tree-children {
+    display: none;
+  }
+
+  :host .tree-row > * {
+    box-sizing: border-box;
+    display: inline-block;
+  }
+
+  .tree-label-icon {
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+    height: 20px;
+    min-width: 20px;
+    width: 20px;
+  }
+
+  .tree-label {
+    user-select: var(--cr-tree-label-user-select, none);
+    white-space: pre;
+  }
+
+  .tree-label-icon,
+  :host([may-have-children]) .tree-row > .tree-label-icon {
+    background-image: url(chrome://theme/IDR_FOLDER_CLOSED);
+  }
+
+  <if expr="is_macosx or is_ios">
+  @media (prefers-color-scheme: dark) {
+    .tree-label-icon,
+    :host([may-have-children]) .tree-row > .tree-label-icon {
+      background-image: url(chrome://theme/IDR_FOLDER_CLOSED_WHITE);
+    }
+  }
+  </if>
+
+  <if expr="not is_macosx and not is_ios">
+  :host([expanded]) > .tree-row > .tree-label-icon {
+    background-image: url(chrome://theme/IDR_FOLDER_OPEN);
+  }
+  </if>
+
+  :host-context([dir=rtl]) .tree-label-icon,
+  :host-context([dir=rtl]) :host([may-have-children]) .tree-row > .tree-label-icon,
+  :host-context([dir=rtl]) :host([expanded]) > .tree-row > .tree-label-icon {
+    transform: scaleX(-1);
+  }
+
+  :host([icon-visibility=hidden]) .tree-label-icon {
+    display: none;
+  }
+
+  :host([icon-visibility=parent]) .tree-label-icon,
+  :host([icon-visibility=parent]) .tree-row:not([has-children]) > .tree-label-icon {
+    background-image: none;
+  }
+
+  /* We need to ensure that even empty labels take up space */
+  .tree-label:empty::after {
+    content: ' ';
+    white-space: pre;
+  }
+
+  @media(forced-colors) {
+    :host([selected]) .tree-row,
+    .tree-row:hover,
+    :host([selected]) .tree-row:hover {
+      background-color: Highlight;
+      background-image: none;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+  }
+</style>
+<div class="tree-row" part="row">
+  <span class="expand-icon"></span>
+  <span class="tree-label-icon"></span>
+  <span class="tree-label"></span>
+</div>
+<div class="tree-children" role="group"></div>
diff --git a/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree_item.ts b/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree_item.ts
new file mode 100644
index 00000000000..19b67592a4d
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/cr_tree/cr_tree_item.ts
@@ -0,0 +1,241 @@
+// Copyright 2022 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 {assert, assertNotReached} from '../../js/assert_ts.js';
+
+import {CrTreeBaseElement, EXPANDED_ATTR} from './cr_tree_base.js';
+import {getTemplate} from './cr_tree_item.html.js';
+
+/**
+ * @fileoverview cr-tree-item represents a node in a tree structure. Child items
+ * can be added or removed using the add/addAt/removeItem methods. A parent can
+ * be set using the setParent() method; the parent may be a cr-tree or
+ * cr-tree-item. Adding items declaratively is not currently supported, as this
+ * class is primarily intended to replace cr.ui.TreeItem, which is used for
+ * cases of creating trees at runtime (e.g. from backend data).
+ */
+
+export const SELECTED_ATTR: string = 'selected';
+export const MAY_HAVE_CHILDREN_ATTR: string = 'may-have-children';
+const INDENT_PX: number = 20;
+let treeItemAutoGeneratedIdCounter: number = 0;
+
+// Returns true if |root| has |el| as a descendant.
+function hasDescendant(
+    root: CrTreeBaseElement, el: CrTreeBaseElement): boolean {
+  const itemsToCheck = [root];
+  while (itemsToCheck.length > 0) {
+    const item = itemsToCheck.shift()!;
+    if (item === el) {
+      return true;
+    }
+    if (item.items.includes(el)) {
+      return true;
+    }
+    itemsToCheck.push(...item.items);
+  }
+  return false;
+}
+
+export class CrTreeItemElement extends CrTreeBaseElement {
+  static override get template() {
+    return getTemplate();
+  }
+
+  static override get observedAttributes() {
+    return super.observedAttributes.concat([SELECTED_ATTR, EXPANDED_ATTR]);
+  }
+
+  private label_: string = '';
+  private depth_: number = 0;
+
+  connectedCallback() {
+    const labelId =
+        'tree-item-label-autogen-id-' + treeItemAutoGeneratedIdCounter++;
+    this.labelElement.id = labelId;
+    this.setAttribute('aria-labelledby', labelId);
+    this.labelElement.textContent = this.label_;
+    this.toggleAttribute(SELECTED_ATTR, false);
+    this.addEventListener('click', this.handleClick.bind(this));
+    this.addEventListener('mousedown', this.handleMouseDown.bind(this));
+    this.addEventListener('dblclick', this.handleDblClick.bind(this));
+  }
+
+  override attributeChangedCallback(
+      name: string, oldValue: string, newValue: string) {
+    if (name === SELECTED_ATTR) {
+      this.onSelectedChange_(newValue === '');
+      return;
+    }
+    if (name === EXPANDED_ATTR) {
+      this.onExpandedChange_(newValue === '');
+      return;
+    }
+    super.attributeChangedCallback(name, oldValue, newValue);
+  }
+
+  private onSelectedChange_(selected: boolean) {
+    if (selected) {
+      this.reveal();
+      this.labelElement.scrollIntoViewIfNeeded();
+      if (this.tree) {
+        this.tree.selectedItem = this;
+      }
+    } else if (this.tree && this.tree.selectedItem === this) {
+      this.tree.selectedItem = null;
+    }
+  }
+
+  private onExpandedChange_(expanded: boolean) {
+    if (expanded) {
+      if (this.hasAttribute(MAY_HAVE_CHILDREN_ATTR)) {
+        this.setAttribute('aria-expanded', 'true');
+        this.dispatchEvent(new CustomEvent(
+            'cr-tree-item-expand',
+            {bubbles: true, composed: true, detail: true}));
+        this.scrollIntoViewIfNeeded();
+      }
+      return;
+    }
+    if (this.tree && !this.hasAttribute(SELECTED_ATTR)) {
+      const oldSelected = this.tree.selectedItem;
+      if (oldSelected && hasDescendant(this, oldSelected)) {
+        this.toggleAttribute(SELECTED_ATTR, true);
+      }
+    }
+    if (this.hasAttribute(MAY_HAVE_CHILDREN_ATTR)) {
+      this.setAttribute('aria-expanded', 'false');
+    } else {
+      this.removeAttribute('aria-expanded');
+    }
+    this.dispatchEvent(new CustomEvent(
+        'cr-tree-item-collapse',
+        {bubbles: true, composed: true, detail: true}));
+  }
+
+  // CrTreeBaseElement implementation:
+  override get depth(): number {
+    return this.depth_;
+  }
+
+  override set depth(depth: number) {
+    if (depth !== this.depth_) {
+      const rowDepth = Math.max(0, depth - 1);
+      const row = this.shadowRoot!.querySelector<HTMLElement>('.tree-row');
+      assert(row);
+      row.style.paddingInlineStart = rowDepth * INDENT_PX + 'px';
+      this.depth_ = depth;
+      this.items.forEach(item => item.depth = depth + 1);
+    }
+  }
+
+  override get itemsRoot(): DocumentFragment|HTMLElement {
+    const root = this.shadowRoot!.querySelector<HTMLElement>('.tree-children');
+    assert(root);
+    return root;
+  }
+
+  override removeTreeItem(child: CrTreeItemElement) {
+    // If we removed the selected item we should become selected.
+    const tree = this.tree;
+    assert(tree);
+    const selectedItem = tree.selectedItem;
+    if (selectedItem && hasDescendant(child, selectedItem)) {
+      this.toggleAttribute(SELECTED_ATTR, true);
+    }
+
+    super.removeTreeItem(child);
+  }
+
+  /**
+   * Whether the tree item has children.
+   */
+  override setHasChildren(hasChildren: boolean) {
+    super.setHasChildren(hasChildren);
+    if (hasChildren) {
+      this.toggleAttribute(MAY_HAVE_CHILDREN_ATTR, true);
+      this.toggleAttribute('aria-expanded', this.expanded);
+    }
+  }
+
+  // These methods shouldn't be called on a tree item.
+  override set selectedItem(_item: CrTreeBaseElement|null) {
+    assertNotReached();
+  }
+
+  override get selectedItem() {
+    return null;
+  }
+
+  // Mouse event handlers
+  handleMouseDown(e: MouseEvent) {
+    if (e.button === 2) {  // right
+      this.handleClick(e);
+    }
+  }
+
+  /**
+   * Handles double click events on the tree item.
+   */
+  handleDblClick(e: Event) {
+    const expanded = this.expanded;
+    this.expanded = !expanded;
+    e.stopPropagation();
+  }
+
+  /**
+   * Called when the user clicks on a tree item.
+   */
+  handleClick(e: Event) {
+    if ((e.target as HTMLElement).classList.contains('expand-icon')) {
+      this.expanded = !this.expanded;
+    } else {
+      this.toggleAttribute(SELECTED_ATTR, true);
+    }
+    e.stopPropagation();
+  }
+
+  // Additional methods unique to CrTreeItem:
+  /**
+   * Expands all parent items.
+   */
+  reveal() {
+    let pi = this.parentItem;
+    while (pi) {
+      pi.expanded = true;
+      pi = pi.parentItem;
+    }
+  }
+
+  /**
+   * The element containing the label text.
+   */
+  get labelElement(): HTMLElement {
+    const labelEl = this.shadowRoot!.querySelector<HTMLElement>('.tree-label');
+    assert(labelEl);
+    return labelEl as HTMLElement;
+  }
+
+  /**
+   * The label text.
+   */
+  get label(): string {
+    return this.label_;
+  }
+
+  set label(s: string) {
+    this.label_ = s;
+    if (this.shadowRoot && this.shadowRoot.querySelector('.tree-label')) {
+      this.labelElement.textContent = s;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cr-tree-item': CrTreeItemElement;
+  }
+}
+
+customElements.define('cr-tree-item', CrTreeItemElement);
diff --git a/chromium/ui/webui/resources/cr_elements/cr_view_manager/cr_view_manager.ts b/chromium/ui/webui/resources/cr_elements/cr_view_manager/cr_view_manager.ts
index a5ecf6facc1..ee6c31a328b 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_view_manager/cr_view_manager.ts
+++ b/chromium/ui/webui/resources/cr_elements/cr_view_manager/cr_view_manager.ts
@@ -2,12 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {html, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assert} from '../../js/assert_ts.js';
-
 import {CrLazyRenderElement} from '../cr_lazy_render/cr_lazy_render.m.js';
 
+import {getTemplate} from './cr_view_manager.html.js';
+
 function getEffectiveView<T extends HTMLElement>(
     element: CrLazyRenderElement<T>|T): HTMLElement {
   return element.matches('cr-lazy-render') ?
@@ -76,6 +77,10 @@ export class CrViewManagerElement extends PolymerElement {
     return 'cr-view-manager';
   }
 
+  static get template() {
+    return getTemplate();
+  }
+
   private exit_(element: HTMLElement, animation: string): Promise<void> {
     const animationFunction = viewAnimations.get(animation);
     element.classList.remove('active');
@@ -125,10 +130,6 @@ export class CrViewManagerElement extends PolymerElement {
 
     return Promise.all(promises).then(() => {});
   }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
 }
 
 declare global {
diff --git a/chromium/ui/webui/resources/cr_elements/find_shortcut_behavior.js b/chromium/ui/webui/resources/cr_elements/find_shortcut_behavior.js
index 5e5ef8b49c2..393a7e970b1 100644
--- a/chromium/ui/webui/resources/cr_elements/find_shortcut_behavior.js
+++ b/chromium/ui/webui/resources/cr_elements/find_shortcut_behavior.js
@@ -39,7 +39,8 @@ export const FindShortcutManager = (() => {
     }
 
     if (!shortcutCtrlF.matchesEvent(e) &&
-        (isTextInputElement(e.path[0]) || !shortcutSlash.matchesEvent(e))) {
+        (isTextInputElement(/** @type {!Element} */ (e.composedPath()[0])) ||
+         !shortcutSlash.matchesEvent(e))) {
       return;
     }
 
diff --git a/chromium/ui/webui/resources/cr_elements/mwb_element_shared_style.css b/chromium/ui/webui/resources/cr_elements/mwb_element_shared_style.css
new file mode 100644
index 00000000000..d73022d5ffa
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/mwb_element_shared_style.css
@@ -0,0 +1,28 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=./mwb_shared_vars.css.js
+ * #css_wrapper_metadata_end */
+
+a,
+cr-button,
+cr-icon-button,
+div {
+  cursor: default;
+}
+
+cr-icon-button {
+  --cr-icon-button-icon-size: var(--mwb-icon-size);
+  --cr-icon-button-size: calc(var(--mwb-icon-size) * 1.5);
+}
+
+cr-icon-button:hover {
+  background-color: var(--mwb-icon-button-hover-background-color);
+}
+
+cr-icon-button:focus {
+  box-shadow: 0 0 0 2px var(--mwb-icon-button-focus-ring-color);
+}
diff --git a/chromium/ui/webui/resources/cr_elements/mwb_element_shared_style.html b/chromium/ui/webui/resources/cr_elements/mwb_element_shared_style.html
deleted file mode 100644
index 657e298c6fb..00000000000
--- a/chromium/ui/webui/resources/cr_elements/mwb_element_shared_style.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <style>
-    a,
-    cr-button,
-    cr-icon-button,
-    div {
-      cursor: default;
-    }
-
-    cr-icon-button {
-      --cr-icon-button-icon-size: var(--mwb-icon-size);
-      --cr-icon-button-size: calc(var(--mwb-icon-size) * 1.5);
-    }
-
-    cr-icon-button:hover {
-      background-color: var(--mwb-icon-button-hover-background-color);
-    }
-
-    cr-icon-button:focus {
-      box-shadow: 0 0 0 2px var(--mwb-icon-button-focus-ring-color);
-    }
-  </style>
-</template>
diff --git a/chromium/ui/webui/resources/cr_elements/mwb_element_shared_style.ts b/chromium/ui/webui/resources/cr_elements/mwb_element_shared_style.ts
deleted file mode 100644
index 3a19a077431..00000000000
--- a/chromium/ui/webui/resources/cr_elements/mwb_element_shared_style.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// 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 './mwb_shared_vars.js';
-
-const template = document.createElement('template');
-template.innerHTML = `
-<dom-module id="mwb-element-shared-style">{__html_template__}</dom-module>
-`;
-document.body.appendChild(template.content.cloneNode(true));
diff --git a/chromium/ui/webui/resources/cr_elements/mwb_shared_icons.ts b/chromium/ui/webui/resources/cr_elements/mwb_shared_icons.ts
deleted file mode 100644
index 3bbd8cbfd08..00000000000
--- a/chromium/ui/webui/resources/cr_elements/mwb_shared_icons.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// 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 '//resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
-
-const template = document.createElement('template');
-template.innerHTML = `{__html_template__}`;
-document.head.appendChild(template.content);
diff --git a/chromium/ui/webui/resources/cr_elements/mwb_shared_style.css b/chromium/ui/webui/resources/cr_elements/mwb_shared_style.css
new file mode 100644
index 00000000000..c9a42396b64
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/mwb_shared_style.css
@@ -0,0 +1,43 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=./shared_vars_css.m.js
+ * #import=./mwb_shared_vars.css.js
+ * #css_wrapper_metadata_end */
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--mwb-scrollbar-thumb-color);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mwb-scrollbar-thumb-hover-color);
+}
+
+::-webkit-scrollbar-track {
+  background-color: var(--mwb-scrollbar-track-color);
+}
+
+::-webkit-scrollbar {
+  width: var(--mwb-scrollbar-width);
+}
+
+.mwb-list-item {
+  align-items: center;
+  background-color: var(--mwb-background-color);
+  contain-intrinsic-size: var(--mwb-item-height);
+  content-visibility: auto;
+  display: flex;
+  height: var(--mwb-item-height);
+  padding: 0 var(--mwb-list-item-horizontal-margin);
+}
+
+.mwb-list-item.hovered {
+  background-color: var(--mwb-list-item-hover-background-color);
+}
+
+.mwb-list-item.selected {
+  background-color: var(--mwb-list-item-selected-background-color);
+}
diff --git a/chromium/ui/webui/resources/cr_elements/mwb_shared_style.html b/chromium/ui/webui/resources/cr_elements/mwb_shared_style.html
deleted file mode 100644
index 62a71dcfdf2..00000000000
--- a/chromium/ui/webui/resources/cr_elements/mwb_shared_style.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-  <style>
-    ::-webkit-scrollbar-thumb {
-      background-color: var(--mwb-scrollbar-thumb-color);
-    }
-
-    ::-webkit-scrollbar-thumb:hover {
-      background-color: var(--mwb-scrollbar-thumb-hover-color);
-    }
-
-    ::-webkit-scrollbar-track {
-      background-color: var(--mwb-scrollbar-track-color);
-    }
-
-    ::-webkit-scrollbar {
-      width: var(--mwb-scrollbar-width);
-    }
-
-    .mwb-list-item {
-      align-items: center;
-      background-color: var(--mwb-background-color);
-      contain-intrinsic-size: var(--mwb-item-height);
-      content-visibility: auto;
-      display: flex;
-      height: var(--mwb-item-height);
-      padding: 0 var(--mwb-list-item-horizontal-margin);
-    }
-
-    .mwb-list-item.hovered {
-      background-color: var(--mwb-list-item-hover-background-color);
-    }
-
-    .mwb-list-item.selected {
-      background-color: var(--mwb-list-item-selected-background-color);
-    }
-  </style>
-</template>
diff --git a/chromium/ui/webui/resources/cr_elements/mwb_shared_style.ts b/chromium/ui/webui/resources/cr_elements/mwb_shared_style.ts
deleted file mode 100644
index dce8a775067..00000000000
--- a/chromium/ui/webui/resources/cr_elements/mwb_shared_style.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// 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 './shared_vars_css.m.js';
-import './mwb_shared_vars.js';
-
-const template = document.createElement('template');
-template.innerHTML = `
-<dom-module id="mwb-shared-style">{__html_template__}</dom-module>
-`;
-document.body.appendChild(template.content.cloneNode(true));
diff --git a/chromium/ui/webui/resources/cr_elements/mwb_shared_vars.css b/chromium/ui/webui/resources/cr_elements/mwb_shared_vars.css
new file mode 100644
index 00000000000..85cec99c155
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/mwb_shared_vars.css
@@ -0,0 +1,41 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=vars
+ * #import=./shared_vars_css.m.js
+ * #css_wrapper_metadata_end */
+
+html {
+  --mwb-background-color: white;
+  --mwb-icon-button-fill-color: var(--google-grey-700);
+  --mwb-icon-button-focus-ring-color: var(--google-blue-600);
+  --mwb-icon-button-hover-background-color: rgba(var(--google-grey-900-rgb), 0.1);
+  --mwb-icon-size: 16px;
+  --mwb-item-height: 56px;
+  --mwb-list-item-horizontal-margin: 16px;
+  --mwb-list-item-hover-background-color: rgba(var(--google-grey-900-rgb), 0.1);
+  --mwb-list-item-selected-background-color: rgba(var(--google-grey-900-rgb), 0.14);
+  --mwb-list-section-title-font-size: 11px;
+  --mwb-list-section-title-height: 40px;
+  --mwb-primary-text-font-size: 13px;
+  --mwb-scrollbar-thumb-color: var(--google-grey-300);
+  --mwb-scrollbar-thumb-hover-color: var(--google-grey-500);
+  --mwb-scrollbar-track-color: var(--mwb-background-color);
+  --mwb-scrollbar-width: 4px;
+  --mwb-secondary-text-font-size: 12px;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --mwb-background-color: var(--google-grey-900);
+    --mwb-icon-button-fill-color: var(--google-grey-300);
+    --mwb-icon-button-focus-ring-color: var(--google-blue-300);
+    --mwb-icon-button-hover-background-color: rgba(255, 255, 255, 0.1);
+    --mwb-list-item-hover-background-color: rgb(55, 56, 58); /* #37383a */
+    --mwb-list-item-selected-background-color: rgb(68, 69, 71); /* #444547 */
+    --mwb-scrollbar-thumb-color: var(--google-grey-500);
+    --mwb-scrollbar-thumb-hover-color: var(--google-grey-300);
+  }
+}
diff --git a/chromium/ui/webui/resources/cr_elements/mwb_shared_vars.html b/chromium/ui/webui/resources/cr_elements/mwb_shared_vars.html
deleted file mode 100644
index 27f26e18200..00000000000
--- a/chromium/ui/webui/resources/cr_elements/mwb_shared_vars.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<custom-style>
-  <style>
-    html {
-      --mwb-background-color: white;
-      --mwb-icon-button-fill-color: var(--google-grey-700);
-      --mwb-icon-button-focus-ring-color: var(--google-blue-600);
-      --mwb-icon-button-hover-background-color: rgba(var(--google-grey-900-rgb), 0.1);
-      --mwb-icon-size: 16px;
-      --mwb-item-height: 56px;
-      --mwb-list-item-horizontal-margin: 16px;
-      --mwb-list-item-hover-background-color: rgba(var(--google-grey-900-rgb), 0.1);
-      --mwb-list-item-selected-background-color: rgba(var(--google-grey-900-rgb), 0.14);
-      --mwb-list-section-title-font-size: 11px;
-      --mwb-list-section-title-height: 40px;
-      --mwb-primary-text-font-size: 13px;
-      --mwb-scrollbar-thumb-color: var(--google-grey-300);
-      --mwb-scrollbar-thumb-hover-color: var(--google-grey-500);
-      --mwb-scrollbar-track-color: var(--mwb-background-color);
-      --mwb-scrollbar-width: 4px;
-      --mwb-secondary-text-font-size: 12px;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      html {
-        --mwb-background-color: var(--google-grey-900);
-        --mwb-icon-button-fill-color: var(--google-grey-300);
-        --mwb-icon-button-focus-ring-color: var(--google-blue-300);
-        --mwb-icon-button-hover-background-color: rgba(255, 255, 255, 0.1);
-        --mwb-list-item-hover-background-color: rgb(55, 56, 58); /* #37383a */
-        --mwb-list-item-selected-background-color: rgb(68, 69, 71); /* #444547 */
-        --mwb-scrollbar-thumb-color: var(--google-grey-500);
-        --mwb-scrollbar-thumb-hover-color: var(--google-grey-300);
-      }
-    }
-  </style>
-</custom-style>
diff --git a/chromium/ui/webui/resources/cr_elements/mwb_shared_vars.ts b/chromium/ui/webui/resources/cr_elements/mwb_shared_vars.ts
deleted file mode 100644
index a5cccf041ea..00000000000
--- a/chromium/ui/webui/resources/cr_elements/mwb_shared_vars.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-// 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 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import './shared_vars_css.m.js';
-
-const $_documentContainer = document.createElement('template');
-$_documentContainer.innerHTML = `{__html_template__}`;
-document.head.appendChild($_documentContainer.content);
diff --git a/chromium/ui/webui/resources/cr_elements/search_highlight_style.css b/chromium/ui/webui/resources/cr_elements/search_highlight_style.css
new file mode 100644
index 00000000000..f9b03e59be5
--- /dev/null
+++ b/chromium/ui/webui/resources/cr_elements/search_highlight_style.css
@@ -0,0 +1,49 @@
+/* Copyright 2022 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. */
+
+/* #css_wrapper_metadata_start
+ * #type=style
+ * #import=./shared_vars_css.m.js
+ * #css_wrapper_metadata_end */
+
+.search-bubble {
+  --search-bubble-color: var(--paper-yellow-500);
+  position: absolute;
+  z-index: 1;
+}
+
+.search-bubble-innards {
+  align-items: center;
+  background-color: var(--search-bubble-color);
+  border-radius: 2px;
+  color: var(--google-grey-900);
+  max-width: 100px;
+  min-width: 64px;
+  overflow: hidden;
+  padding: 4px 10px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Provides the arrow which points at the anchor element. */
+.search-bubble-innards::after {
+  background-color: var(--search-bubble-color);
+  content: '';
+  height: 10px;
+  left: calc(50% - 5px);
+  position: absolute;
+  top: -5px;
+  transform: rotate(-45deg);
+  width: 10px;
+  z-index: -1;
+}
+
+/* Turns the arrow direction downwards, when the bubble is placed above
+ * the anchor element */
+.search-bubble-innards.above::after {
+  bottom: -5px;
+  top: auto;
+  transform: rotate(-135deg);
+}
diff --git a/chromium/ui/webui/resources/cr_elements/search_highlight_style_css.html b/chromium/ui/webui/resources/cr_elements/search_highlight_style_css.html
deleted file mode 100644
index 4b2b6db2616..00000000000
--- a/chromium/ui/webui/resources/cr_elements/search_highlight_style_css.html
+++ /dev/null
@@ -1,44 +0,0 @@
-  <template>
-    <style>
-      .search-bubble {
-        --search-bubble-color: var(--paper-yellow-500);
-        position: absolute;
-        z-index: 1;
-      }
-
-      .search-bubble-innards {
-        align-items: center;
-        background-color: var(--search-bubble-color);
-        border-radius: 2px;
-        color: var(--google-grey-900);
-        max-width: 100px;
-        min-width: 64px;
-        overflow: hidden;
-        padding: 4px 10px;
-        text-align: center;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      /* Provides the arrow which points at the anchor element. */
-      .search-bubble-innards::after {
-        background-color: var(--search-bubble-color);
-        content: '';
-        height: 10px;
-        left: calc(50% - 5px);
-        position: absolute;
-        top: -5px;
-        transform: rotate(-45deg);
-        width: 10px;
-        z-index: -1;
-      }
-
-      /* Turns the arrow direction downwards, when the bubble is placed above
-       * the anchor element */
-      .search-bubble-innards.above::after {
-        bottom: -5px;
-        top: auto;
-        transform: rotate(-135deg);
-      }
-    </style>
-  </template>
diff --git a/chromium/ui/webui/resources/cr_elements/search_highlight_style_css.ts b/chromium/ui/webui/resources/cr_elements/search_highlight_style_css.ts
deleted file mode 100644
index 80714a36817..00000000000
--- a/chromium/ui/webui/resources/cr_elements/search_highlight_style_css.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Copyright 2021 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 './shared_vars_css.m.js';
-const template = document.createElement('template');
-template.innerHTML = `
-<dom-module id="search-highlight-style" assetpath="chrome://resources/">
-{__html_template__}
-</dom-module>
-`;
-document.body.appendChild(template.content.cloneNode(true));
diff --git a/chromium/ui/webui/resources/cr_elements/shared_style_css.html b/chromium/ui/webui/resources/cr_elements/shared_style_css.html
index c0976a8a565..eda419ea6d7 100644
--- a/chromium/ui/webui/resources/cr_elements/shared_style_css.html
+++ b/chromium/ui/webui/resources/cr_elements/shared_style_css.html
@@ -121,15 +121,13 @@
         margin-inline-start: 8px;
       }
 
-      paper-tooltip {
-        --paper-tooltip: {
-          border-radius: var(--paper-tooltip-border-radius, 2px);
-          font-size: 92.31%;  /* Effectively 12px if the host default is 13px. */
-          font-weight: 500;
-          max-width: 330px;
-          min-width: var(--paper-tooltip-min-width, 200px);
-          padding: var(--paper-tooltip-padding, 10px 8px);
-        }
+      paper-tooltip::part(tooltip) {
+        border-radius: var(--paper-tooltip-border-radius, 2px);
+        font-size: 92.31%;  /* Effectively 12px if the host default is 13px. */
+        font-weight: 500;
+        max-width: 330px;
+        min-width: var(--paper-tooltip-min-width, 200px);
+        padding: var(--paper-tooltip-padding, 10px 8px);
       }
 
       /* Typography */
diff --git a/chromium/ui/webui/resources/css/BUILD.gn b/chromium/ui/webui/resources/css/BUILD.gn
index 41a44c5c20c..3801cb717f5 100644
--- a/chromium/ui/webui/resources/css/BUILD.gn
+++ b/chromium/ui/webui/resources/css/BUILD.gn
@@ -13,7 +13,7 @@ preprocess_src_manifest = "preprocessed_src_manifest.json"
 generate_grd("build_grdp") {
   grd_prefix = "webui_css"
   out_grd = "$target_gen_dir/resources.grdp"
-  deps = [ ":preprocess_src" ]
+  public_deps = [ ":preprocess_src" ]
   manifest_files = [ "$target_gen_dir/$preprocess_src_manifest" ]
   resource_path_prefix = "css"
 }
@@ -24,8 +24,6 @@ preprocess_if_expr("preprocess_src") {
   out_manifest = "$target_gen_dir/$preprocess_src_manifest"
   in_files = [
     "action_link.css",
-    "apps/common.css",
-    "apps/topbutton_bar.css",
     "butter_bar.css",
     "chrome_shared.css",
     "dialogs.css",
@@ -35,7 +33,6 @@ preprocess_if_expr("preprocess_src") {
     "menu.css",
     "roboto.css",
     "spinner.css",
-    "tabs.css",
     "text_defaults.css",
     "text_defaults_md.css",
     "throbber.css",
diff --git a/chromium/ui/webui/resources/css/apps/common.css b/chromium/ui/webui/resources/css/apps/common.css
deleted file mode 100644
index 37666011f75..00000000000
--- a/chromium/ui/webui/resources/css/apps/common.css
+++ /dev/null
@@ -1,58 +0,0 @@
-/* Copyright 2013 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. */
-
-button.white-button,
-button.blue-button {
-  border: 1px solid transparent;
-  border-radius: 2px;
-  box-sizing: content-box;
-  cursor: default;
-  font-size: 14px;
-  height: 21px;
-  line-height: 21px;
-  margin: 0;
-  min-height: 21px;
-  min-width: 55px;
-  padding: 4px 14px;
-  position: relative;
-  text-align: center;
-  z-index: 1;
-}
-
-button.white-button[disabled] {
-  border-color: #c6c6c6;
-}
-
-button.white-button:active {
-  background-color: #e6e6e6;
-  border-color: #a6a6a6;
-}
-
-button.white-button {
-  background-color: #f9f9f9;
-  border-color: #a4a4a4;
-}
-
-button.blue-button {
-  background-color: rgb(50, 100, 255);
-  border-color: rgb(43, 103, 206);
-}
-
-button.blue-button:hover {
-  background-color: rgb(60, 110, 255);
-}
-
-button.blue-button:active {
-  background-color: rgb(26, 91, 216);
-  border-color: rgb(35, 82, 162);
-}
-
-button.blue-button:focus {
-  box-shadow: 0 0 0 1px inset rgb(173, 204, 255);
-}
-
-button.blue-button[disabled] {
-  background-color: rgb(110, 140, 255);
-  border-color: rgb(148, 177, 229);
-}
diff --git a/chromium/ui/webui/resources/css/apps/topbutton_bar.css b/chromium/ui/webui/resources/css/apps/topbutton_bar.css
deleted file mode 100644
index 2979c0de2ca..00000000000
--- a/chromium/ui/webui/resources/css/apps/topbutton_bar.css
+++ /dev/null
@@ -1,55 +0,0 @@
-/* Copyright 2013 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. */
-
-.topbutton-bar {
-  -webkit-box-align: center;
-  display: -webkit-box;
-}
-
-.topbutton-bar button {
-  -webkit-app-region: no-drag;
-  -webkit-box-shadow: none;
-  background-color: transparent;
-  background-image: none;
-  background-position: center;
-  background-repeat: no-repeat;
-  border: 0;
-  display: block;
-  height: 32px;
-  margin-inline-end: 10px;
-  min-width: 0;
-  outline: none;
-  padding: 0;
-  width: 32px;
-}
-
-.topbutton-bar button:active {
-  -webkit-box-shadow:
-    0 1px 0 0 #c2c2c2 inset,
-    0 0 0 1px #dedede inset;
-}
-
-.topbutton-bar button:hover,
-.topbutton-bar button:focus,
-.topbutton-bar button:active {
-  background-color: #ededed;
-}
-
-.topbutton-bar .maximize-button {
-  background-image: -webkit-image-set(
-      url(chrome://resources/images/apps/topbar_button_maximize.png) 1x,
-      url(chrome://resources/images/2x/apps/topbar_button_maximize.png) 2x);
-}
-
-.topbutton-bar .minimize-button {
-  background-image: -webkit-image-set(
-      url(chrome://resources/images/apps/topbar_button_minimize.png) 1x,
-      url(chrome://resources/images/2x/apps/topbar_button_minimize.png) 2x);
-}
-
-.topbutton-bar .close-button {
-  background-image: -webkit-image-set(
-      url(chrome://resources/images/apps/topbar_button_close.png) 1x,
-      url(chrome://resources/images/2x/apps/topbar_button_close.png) 2x);
-}
diff --git a/chromium/ui/webui/resources/css/roboto.css b/chromium/ui/webui/resources/css/roboto.css
index af0bdbc6a97..3f8c369a606 100644
--- a/chromium/ui/webui/resources/css/roboto.css
+++ b/chromium/ui/webui/resources/css/roboto.css
@@ -2,7 +2,7 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-<if expr="not chromeos and not is_android">
+<if expr="not chromeos_ash and not is_android">
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
diff --git a/chromium/ui/webui/resources/css/tabs.css b/chromium/ui/webui/resources/css/tabs.css
deleted file mode 100644
index 63bb8581e6d..00000000000
--- a/chromium/ui/webui/resources/css/tabs.css
+++ /dev/null
@@ -1,119 +0,0 @@
-/* Copyright (c) 2012 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. */
-
-tabbox {
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-}
-
-tabs {
-  background: -webkit-linear-gradient(white, rgb(243, 243, 243));
-  border-bottom: 1px solid rgb(160, 160, 160);
-  display: -webkit-box;
-  margin: 0;
-  padding-inline-start: 8px;
-}
-
-/* New users of tabs.css should add 'new-style-tabs' to the class list of any
- * 'tabs' or 'tabpanels' elements.
- *
- * TODO(rfevang): Remove when all users are converted to the new style.
- *                (crbug.com/247772). */
-tabs.new-style-tabs {
-  background: #fbfbfb;
-  border-bottom: 1px solid #c8c8c8;
-  padding-inline-start: 9px;
-  padding-top: 14px;
-}
-
-tabs > * {
-  background: rgba(160, 160, 160, .3);
-  border: 1px solid rgba(160, 160, 160, .3);
-  border-bottom: 0;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-  cursor: default;
-  display: block;
-  margin-inline-start: 5px;
-  min-width: 4em;
-  padding: 2px 10px;
-  text-align: center;
-  transition: border-color 150ms, background-color 150ms;
-}
-
-tabs.new-style-tabs > * {
-  background: #fbfbfb;
-  border: 1px solid #fbfbfb;
-  border-bottom: 0;
-  border-radius: 0;
-  margin-inline-start: 0;
-  min-width: 0;
-  padding: 4px 9px 4px 10px;
-  transition: none;
-}
-
-tabs > :not([selected]) {
-  background: rgba(238, 238, 238, .3);
-}
-
-tabs.new-style-tabs > :not([selected]) {
-  background: #fbfbfb;
-  color: #646464;
-}
-
-tabs > :not([selected]):hover {
-  background: rgba(247, 247, 247, .3);
-}
-
-tabs.new-style-tabs > :not([selected]):hover {
-  background: #fbfbfb;
-  color: black;
-}
-
-tabs > [selected] {
-  background: white;
-  border-color: rgb(160, 160, 160);
-  margin-bottom: -1px;
-  position: relative;
-  transition: none;
-  z-index: 0;
-}
-
-tabs.new-style-tabs > [selected] {
-  background: #fbfbfb;
-  border-color: #c8c8c8;
-  font-weight: bold;
-}
-
-tabs:focus {
-  outline: none;
-}
-
-html.focus-outline-visible tabs:focus > [selected] {
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-
-tabpanels {
-  -webkit-box-flex: 1;
-  background: white;
-  box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
-  display: -webkit-box;
-  padding: 5px 15px 0 15px;
-}
-
-tabpanels.new-style-tabs {
-  background: #fbfbfb;
-  box-shadow: none;
-  padding: 0 20px;
-}
-
-tabpanels > * {
-  -webkit-box-flex: 1;
-  display: none;
-}
-
-tabpanels > [selected] {
-  display: block;
-}
diff --git a/chromium/ui/webui/resources/css/widgets.css b/chromium/ui/webui/resources/css/widgets.css
index 2ba6a1aaca1..6ccecb8b636 100644
--- a/chromium/ui/webui/resources/css/widgets.css
+++ b/chromium/ui/webui/resources/css/widgets.css
@@ -56,7 +56,10 @@ select {
 select {
   -webkit-appearance: none;
   /* OVERRIDE */
-  background-image: url(../images/select.png),
+  background-image:
+      -webkit-image-set(
+          url(../images/select.png) 1x,
+          url(../images/2x/select.png) 2x),
       -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
   background-position: right center;
   background-repeat: no-repeat;
@@ -118,7 +121,9 @@ input[type='search'] {
 /* Checked ********************************************************************/
 
 input[type='checkbox']:checked::before {
-  background-image: url(../images/check.png);
+  background-image: -webkit-image-set(
+      url(../images/check.png) 1x,
+      url(../images/2x/check.png) 2x);
   background-size: 100% 100%;
   content: '';
   display: block;
@@ -159,7 +164,10 @@ input[type='radio']:checked::before {
 
 :enabled:hover:-webkit-any(select) {
   /* OVERRIDE */
-  background-image: url(../images/select.png),
+  background-image:
+      -webkit-image-set(
+          url(../images/select.png) 1x,
+          url(../images/2x/select.png) 2x),
       -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
 }
 </if>
@@ -201,7 +209,10 @@ select:disabled {
 
 select:disabled {
   /* OVERRIDE */
-  background-image: url(../images/disabled_select.png),
+  background-image:
+      -webkit-image-set(
+          url(../images/disabled_select.png) 1x,
+          url(../images/2x/disabled_select.png) 2x),
       -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
 }
 
diff --git a/chromium/ui/webui/resources/images/2x/apps/topbar_button_close.png b/chromium/ui/webui/resources/images/2x/apps/topbar_button_close.png
deleted file mode 100644
index 7a280844a88..00000000000
--- a/chromium/ui/webui/resources/images/2x/apps/topbar_button_close.png
+++ /dev/null
diff --git a/chromium/ui/webui/resources/images/2x/apps/topbar_button_maximize.png b/chromium/ui/webui/resources/images/2x/apps/topbar_button_maximize.png
deleted file mode 100644
index 96cecc99da1..00000000000
--- a/chromium/ui/webui/resources/images/2x/apps/topbar_button_maximize.png
+++ /dev/null
diff --git a/chromium/ui/webui/resources/images/2x/apps/topbar_button_minimize.png b/chromium/ui/webui/resources/images/2x/apps/topbar_button_minimize.png
deleted file mode 100644
index 437c6f700dd..00000000000
--- a/chromium/ui/webui/resources/images/2x/apps/topbar_button_minimize.png
+++ /dev/null
diff --git a/chromium/ui/webui/resources/images/BUILD.gn b/chromium/ui/webui/resources/images/BUILD.gn
index 191c2ff4bd7..5691dcf7244 100644
--- a/chromium/ui/webui/resources/images/BUILD.gn
+++ b/chromium/ui/webui/resources/images/BUILD.gn
@@ -10,17 +10,6 @@ generate_grd("build_grdp") {
   out_grd = "$target_gen_dir/resources.grdp"
   input_files_base_dir = rebase_path(".", "//")
   input_files = [
-    # Component apps common image resources - 1x
-    "apps/topbar_button_close.png",
-    "apps/topbar_button_maximize.png",
-    "apps/topbar_button_minimize.png",
-
-    # Component apps common image resources - 2x
-    "2x/apps/topbar_button_close.png",
-    "2x/apps/topbar_button_maximize.png",
-    "2x/apps/topbar_button_minimize.png",
-
-    # Non-apps images
     "add.svg",
     "cancel_red.svg",
     "checkbox_black.png",
diff --git a/chromium/ui/webui/resources/images/apps/topbar_button_close.png b/chromium/ui/webui/resources/images/apps/topbar_button_close.png
deleted file mode 100644
index b902560b7c8..00000000000
--- a/chromium/ui/webui/resources/images/apps/topbar_button_close.png
+++ /dev/null
diff --git a/chromium/ui/webui/resources/images/apps/topbar_button_maximize.png b/chromium/ui/webui/resources/images/apps/topbar_button_maximize.png
deleted file mode 100644
index 7d452702c13..00000000000
--- a/chromium/ui/webui/resources/images/apps/topbar_button_maximize.png
+++ /dev/null
diff --git a/chromium/ui/webui/resources/images/apps/topbar_button_minimize.png b/chromium/ui/webui/resources/images/apps/topbar_button_minimize.png
deleted file mode 100644
index 33b892dfe3d..00000000000
--- a/chromium/ui/webui/resources/images/apps/topbar_button_minimize.png
+++ /dev/null
diff --git a/chromium/ui/webui/resources/images/arrow_right.svg b/chromium/ui/webui/resources/images/arrow_right.svg
index bb34d67fa8d..00bedb1c64d 100644
--- a/chromium/ui/webui/resources/images/arrow_right.svg
+++ b/chromium/ui/webui/resources/images/arrow_right.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5F6368"><path d="M10 7l5 5-5 5z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5F6368"><path d="m10 7 5 5-5 5z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/backspace.svg b/chromium/ui/webui/resources/images/backspace.svg
index 556692b818a..3e2613b1d77 100644
--- a/chromium/ui/webui/resources/images/backspace.svg
+++ b/chromium/ui/webui/resources/images/backspace.svg
@@ -1 +1 @@
-<svg width="40" height="31" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0-4h40v40H0z"/><path d="M36.667.556h-25c-1.15 0-2.05.583-2.65 1.466L0 15.556l9.017 13.516c.6.884 1.5 1.484 2.65 1.484h25c1.833 0 3.333-1.5 3.333-3.334V3.89C40 2.056 38.5.556 36.667.556zm-5 20.983l-2.35 2.35-5.984-5.983-5.983 5.983-2.35-2.35 5.983-5.983L15 9.572l2.35-2.35 5.983 5.984 5.984-5.984 2.35 2.35-5.984 5.984 5.984 5.983z" fill-opacity=".8" fill="#FFF"/></g></svg>
-\ No newline at end of file
+<svg width="40" height="31" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0-4h40v40H0z"/><path d="M36.667.556h-25c-1.15 0-2.05.583-2.65 1.466L0 15.556l9.017 13.516c.6.884 1.5 1.484 2.65 1.484h25c1.833 0 3.333-1.5 3.333-3.334V3.89C40 2.056 38.5.556 36.667.556zm-5 20.983-2.35 2.35-5.984-5.983-5.983 5.983-2.35-2.35 5.983-5.983L15 9.572l2.35-2.35 5.983 5.984 5.984-5.984 2.35 2.35-5.984 5.984 5.984 5.983z" fill-opacity=".8" fill="#FFF"/></g></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/check_circle_green.svg b/chromium/ui/webui/resources/images/check_circle_green.svg
index 404206a33b9..8212ee799f2 100644
--- a/chromium/ui/webui/resources/images/check_circle_green.svg
+++ b/chromium/ui/webui/resources/images/check_circle_green.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#0F9D58"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#0F9D58"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/chrome_logo_dark.svg b/chromium/ui/webui/resources/images/chrome_logo_dark.svg
index fb4f72774d5..19ba047be4f 100644
--- a/chromium/ui/webui/resources/images/chrome_logo_dark.svg
+++ b/chromium/ui/webui/resources/images/chrome_logo_dark.svg
@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_502_3595)" fill="#fff"><path d="M5.225 10.265A6.996 6.996 0 0 1 12 5h9.733a11.976 11.976 0 0 0-19.512.061l3.004 5.204zM22.898 7h-6.003a6.979 6.979 0 0 1 1.162 8.498l.008.004-4.872 8.438A11.98 11.98 0 0 0 22.898 7zm-9.009 11.735A6.964 6.964 0 0 1 5.944 15.5l-.004.002-4.87-8.435a11.98 11.98 0 0 0 9.812 16.877l3.007-5.21z"/><path d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/></g><defs><clipPath id="clip0_502_3595"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
-\ No newline at end of file
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)" fill="#fff"><path d="M5.225 10.265A6.996 6.996 0 0 1 12 5h9.733a11.976 11.976 0 0 0-19.512.061l3.004 5.204zM22.898 7h-6.003a6.979 6.979 0 0 1 1.162 8.498l.008.004-4.872 8.438A11.98 11.98 0 0 0 22.898 7zm-9.009 11.735A6.964 6.964 0 0 1 5.944 15.5l-.004.002-4.87-8.435a11.98 11.98 0 0 0 9.812 16.877l3.007-5.21z"/><path d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath></defs></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/eol.svg b/chromium/ui/webui/resources/images/eol.svg
index 3f08b301237..212106100e1 100644
--- a/chromium/ui/webui/resources/images/eol.svg
+++ b/chromium/ui/webui/resources/images/eol.svg
@@ -1 +1 @@
-<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M4.574 2.916H4.55l.01.01.014-.01zM2.5 4.968v.023a.18.18 0 0 1 .01-.013l-.01-.01zm14.585 10.49v-.024l-.01.013.01.01zm.223 1.817l-.933-.95-4.106-4.11L8.026 7.99 3.675 3.635l-.942-.941-.712-.713L1 3.002l1.733 1.733A9.056 9.056 0 0 0 1.05 9.98c0 1.95.628 3.748 1.683 5.22.574.8 1.274 1.501 2.074 2.075a8.918 8.918 0 0 0 5.218 1.684 8.918 8.918 0 0 0 5.218-1.684L16.991 19l1.02-1.021-.703-.704zM15.243 2.684A8.922 8.922 0 0 0 10.025 1a8.922 8.922 0 0 0-5.218 1.684c-.005.003 4.135 4.16 4.135 4.16l1.083-1.814L15.042 11h-1.846l4.11 4.214a8.939 8.939 0 0 0 .011-10.456 9.021 9.021 0 0 0-2.074-2.074zM12 15H7.012v-3.989L4.5 11l2.227-1.876L12 14.6v.4z" fill="#DB4437" fill-rule="evenodd"/></svg>
-\ No newline at end of file
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M4.574 2.916H4.55l.01.01.014-.01zM2.5 4.968v.023a.18.18 0 0 1 .01-.013l-.01-.01zm14.585 10.49v-.024l-.01.013.01.01zm.223 1.817-.933-.95-4.106-4.11L8.026 7.99 3.675 3.635l-.942-.941-.712-.713L1 3.002l1.733 1.733A9.056 9.056 0 0 0 1.05 9.98c0 1.95.628 3.748 1.683 5.22a9.037 9.037 0 0 0 2.074 2.075 8.918 8.918 0 0 0 5.218 1.684 8.918 8.918 0 0 0 5.218-1.684L16.991 19l1.02-1.021-.703-.704zM15.243 2.684A8.922 8.922 0 0 0 10.025 1a8.922 8.922 0 0 0-5.218 1.684c-.005.003 4.135 4.16 4.135 4.16l1.083-1.814L15.042 11h-1.846l4.11 4.214a8.939 8.939 0 0 0 .011-10.456 9.021 9.021 0 0 0-2.074-2.074zM12 15H7.012v-3.989L4.5 11l2.227-1.876L12 14.6v.4z" fill="#DB4437" fill-rule="evenodd"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/hazard.svg b/chromium/ui/webui/resources/images/hazard.svg
index 73411ff9f68..86f16074598 100644
--- a/chromium/ui/webui/resources/images/hazard.svg
+++ b/chromium/ui/webui/resources/images/hazard.svg
@@ -1 +1 @@
-<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" fill="#5a5a5a"><path d="M20 22.5a4.5 4.5 0 1 1 9.001.002A4.5 4.5 0 0 1 20 22.5zm12.906-.492l11.709.001a21.738 21.738 0 0 0-2.613-10.398C40.224 8.329 37.73 5.765 34.856 4L29 14.81c2.333 1.439 3.906 4.12 3.906 7.198zM20 14.811L14.141 4c-6.255 3.848-9.75 10.83-9.756 18.01h11.708c0-3.079 1.574-5.76 3.907-7.2zm4.48 15.643a8.025 8.025 0 0 1-4.094-1.126l-6.147 10.868c6.128 3.604 13.917 3.87 20.482.002l-6.148-10.87a8.024 8.024 0 0 1-4.093 1.126z"/></svg>
-\ No newline at end of file
+<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg" fill="#5a5a5a"><path d="M20 22.5a4.5 4.5 0 1 1 9.001.002A4.5 4.5 0 0 1 20 22.5zm12.906-.492 11.709.001a21.738 21.738 0 0 0-2.613-10.398C40.224 8.329 37.73 5.765 34.856 4L29 14.81c2.333 1.439 3.906 4.12 3.906 7.198zM20 14.811 14.141 4c-6.255 3.848-9.75 10.83-9.756 18.01h11.708c0-3.079 1.574-5.76 3.907-7.2zm4.48 15.643a8.025 8.025 0 0 1-4.094-1.126l-6.147 10.868c6.128 3.604 13.917 3.87 20.482.002l-6.148-10.87a8.024 8.024 0 0 1-4.093 1.126z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/help.svg b/chromium/ui/webui/resources/images/help.svg
index 67634cb2a1c..9293300c31a 100644
--- a/chromium/ui/webui/resources/images/help.svg
+++ b/chromium/ui/webui/resources/images/help.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 34h-4v-4h4v4zm4.13-15.49l-1.79 1.84C26.9 25.79 26 27 26 30h-4v-1c0-2.21.9-4.21 2.34-5.66l2.49-2.52C27.55 20.1 28 19.1 28 18c0-2.21-1.79-4-4-4s-4 1.79-4 4h-4c0-4.42 3.58-8 8-8s8 3.58 8 8c0 1.76-.71 3.35-1.87 4.51z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 34h-4v-4h4v4zm4.13-15.49-1.79 1.84C26.9 25.79 26 27 26 30h-4v-1c0-2.21.9-4.21 2.34-5.66l2.49-2.52C27.55 20.1 28 19.1 28 18c0-2.21-1.79-4-4-4s-4 1.79-4 4h-4c0-4.42 3.58-8 8-8s8 3.58 8 8c0 1.76-.71 3.35-1.87 4.51z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/icon_arrow_dropdown.svg b/chromium/ui/webui/resources/images/icon_arrow_dropdown.svg
index b6e37691398..e71d3c64db7 100644
--- a/chromium/ui/webui/resources/images/icon_arrow_dropdown.svg
+++ b/chromium/ui/webui/resources/images/icon_arrow_dropdown.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5F6368"><path d="M7 10l5 5 5-5z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5F6368"><path d="m7 10 5 5 5-5z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/icon_bookmark.svg b/chromium/ui/webui/resources/images/icon_bookmark.svg
index 3e21cfb5e93..a212a503381 100644
--- a/chromium/ui/webui/resources/images/icon_bookmark.svg
+++ b/chromium/ui/webui/resources/images/icon_bookmark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M16 23.027L24.24 28l-2.187-9.373 7.28-6.307-9.586-.813L16 2.667l-3.747 8.84-9.586.813 7.28 6.307L7.76 28z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M16 23.027 24.24 28l-2.187-9.373 7.28-6.307-9.586-.813L16 2.667l-3.747 8.84-9.586.813 7.28 6.307L7.76 28z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/icon_clear.svg b/chromium/ui/webui/resources/images/icon_clear.svg
index 80ca46a44b2..662df6bac03 100644
--- a/chromium/ui/webui/resources/images/icon_clear.svg
+++ b/chromium/ui/webui/resources/images/icon_clear.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5F6368"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5F6368"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/icon_copy_content.svg b/chromium/ui/webui/resources/images/icon_copy_content.svg
index c1c4e68d163..9c668b0246e 100644
--- a/chromium/ui/webui/resources/images/icon_copy_content.svg
+++ b/chromium/ui/webui/resources/images/icon_copy_content.svg
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="#757575">
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#757575"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/icon_edit.svg b/chromium/ui/webui/resources/images/icon_edit.svg
index 2acc71a13c8..5ff6a828ffa 100644
--- a/chromium/ui/webui/resources/images/icon_edit.svg
+++ b/chromium/ui/webui/resources/images/icon_edit.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20.41 4.94l-1.35-1.35c-.78-.78-2.05-.78-2.83 0L13.4 6.41 3 16.82V21h4.18l10.46-10.46 2.77-2.77c.79-.78.79-2.05 0-2.83zm-14 14.12L5 19v-1.36l9.82-9.82 1.41 1.41-9.82 9.83z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path d="m20.41 4.94-1.35-1.35c-.78-.78-2.05-.78-2.83 0L13.4 6.41 3 16.82V21h4.18l10.46-10.46 2.77-2.77c.79-.78.79-2.05 0-2.83zm-14 14.12L5 19v-1.36l9.82-9.82 1.41 1.41-9.82 9.83z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/icon_expand_less.svg b/chromium/ui/webui/resources/images/icon_expand_less.svg
index 0448a0692cd..240c7b48f52 100644
--- a/chromium/ui/webui/resources/images/icon_expand_less.svg
+++ b/chromium/ui/webui/resources/images/icon_expand_less.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#5F6368" width="24" height="24"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="#5F6368" width="24" height="24"><path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/icon_expand_more.svg b/chromium/ui/webui/resources/images/icon_expand_more.svg
index c861f0c6666..61f549d05f2 100644
--- a/chromium/ui/webui/resources/images/icon_expand_more.svg
+++ b/chromium/ui/webui/resources/images/icon_expand_more.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#5F6368" width="24" height="24"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="#5F6368" width="24" height="24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/icon_passwords.svg b/chromium/ui/webui/resources/images/icon_passwords.svg
index 97df7125112..d5ed0d41589 100644
--- a/chromium/ui/webui/resources/images/icon_passwords.svg
+++ b/chromium/ui/webui/resources/images/icon_passwords.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><path d="M3 5.005v19.99C3 26.103 3.895 27 5 27h30a2 2 0 0 0 2-2.005V5.005A2.002 2.002 0 0 0 35 3H5a2 2 0 0 0-2 2.005zm-3 0A5 5 0 0 1 5 0h30c2.763 0 5 2.242 5 5.005v19.99A5 5 0 0 1 35 30H5c-2.763 0-5-2.242-5-5.005V5.005zM29 8h3v13h-3V8zm-6 6.14l-.632-1.834-.147.046-3.195.98V10H16.98v3.33l-3.2-.978-.148-.046L13 14.14l.146.045 3.21.984-1.987 2.58-.09.115L15.93 19l.09-.118L18 16.316l1.978 2.566.09.118 1.655-1.133-.09-.117-1.988-2.58 3.21-.985.145-.045zM7.222 12.352l-3.2.98V10H3v6.316l1.977 2.566.09.118 1.654-1.133-.09-.117-1.985-2.58 3.21-.985L8 14.14l-.63-1.834-.148.046z" fill-rule="evenodd"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><path d="M3 5.005v19.99C3 26.103 3.895 27 5 27h30a2 2 0 0 0 2-2.005V5.005A2.002 2.002 0 0 0 35 3H5a2 2 0 0 0-2 2.005zm-3 0A5 5 0 0 1 5 0h30c2.763 0 5 2.242 5 5.005v19.99A5 5 0 0 1 35 30H5c-2.763 0-5-2.242-5-5.005V5.005zM29 8h3v13h-3V8zm-6 6.14-.632-1.834-.147.046-3.195.98V10H16.98v3.33l-3.2-.978-.148-.046L13 14.14l.146.045 3.21.984-1.987 2.58-.09.115L15.93 19l.09-.118L18 16.316l1.978 2.566.09.118 1.655-1.133-.09-.117-1.988-2.58 3.21-.985.145-.045zM7.222 12.352l-3.2.98V10H3v6.316l1.977 2.566.09.118 1.654-1.133-.09-.117-1.985-2.58 3.21-.985L8 14.14l-.63-1.834-.148.046z" fill-rule="evenodd"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/icon_themes.svg b/chromium/ui/webui/resources/images/icon_themes.svg
index af8bcca5c6c..e1e4366db1f 100644
--- a/chromium/ui/webui/resources/images/icon_themes.svg
+++ b/chromium/ui/webui/resources/images/icon_themes.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="30"><path d="M20.04 16.74L12.776 24l-2.42-2.42c-.668-.668 0-2.42 0-2.42l1.21-3.632c.302-.91.364-2.057 0-2.422-3.63-3.63-8.472-6.05-9.684-7.26a3.424 3.424 0 0 1 0-4.842 3.419 3.419 0 0 1 4.842 0c1.21 1.21 3.63 6.05 7.263 9.682.363.363 1.512.303 2.42 0l3.63-1.21s1.754-.668 2.422 0l2.42 2.42-4.84 4.843zM3.657 2.44a1.5 1.5 0 0 0 2.122 2.12 1.505 1.505 0 0 0 0-2.12 1.502 1.502 0 0 0-2.125 0zM24.32 24.9h-3.4v3.4l-1.7 1.7-5.1-5.1L26.02 13l5.1 5.1-6.8 6.8z" fill-rule="evenodd"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="30"><path d="M20.04 16.74 12.776 24l-2.42-2.42c-.668-.668 0-2.42 0-2.42l1.21-3.632c.302-.91.364-2.057 0-2.422-3.63-3.63-8.472-6.05-9.684-7.26a3.424 3.424 0 0 1 0-4.842 3.419 3.419 0 0 1 4.842 0c1.21 1.21 3.63 6.05 7.263 9.682.363.363 1.512.303 2.42 0l3.63-1.21s1.754-.668 2.422 0l2.42 2.42-4.84 4.843zM3.657 2.44a1.5 1.5 0 0 0 2.122 2.12 1.505 1.505 0 0 0 0-2.12 1.502 1.502 0 0 0-2.125 0zM24.32 24.9h-3.4v3.4l-1.7 1.7-5.1-5.1L26.02 13l5.1 5.1-6.8 6.8z" fill-rule="evenodd"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/icon_visibility_off.svg b/chromium/ui/webui/resources/images/icon_visibility_off.svg
index 4f2017f240d..e41e08ec7c3 100644
--- a/chromium/ui/webui/resources/images/icon_visibility_off.svg
+++ b/chromium/ui/webui/resources/images/icon_visibility_off.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5F6368"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5F6368"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 0 0 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/incognito_icon.svg b/chromium/ui/webui/resources/images/incognito_icon.svg
index 5a8fe3c9421..df919e60999 100644
--- a/chromium/ui/webui/resources/images/incognito_icon.svg
+++ b/chromium/ui/webui/resources/images/incognito_icon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#455A64"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 11h18v1H3zm14.62-1l-2.29-6.1c-.19-.5-.74-.77-1.25-.6L12 4l-2.09-.7c-.51-.17-1.06.1-1.25.6L6.38 10h11.24zm-1.12 3c-1.66 0-3.04 1.16-3.4 2.71-.84-.36-1.62-.26-2.2-.01A3.503 3.503 0 0 0 7.5 13C5.57 13 4 14.57 4 16.5S5.57 20 7.5 20c1.84 0 3.33-1.42 3.47-3.22.3-.21 1.09-.6 2.06.02.16 1.79 1.64 3.2 3.47 3.2 1.93 0 3.5-1.57 3.5-3.5S18.43 13 16.5 13zm-9 6a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5zm9 0a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
-\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="#455A64"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 11h18v1H3zm14.62-1-2.29-6.1c-.19-.5-.74-.77-1.25-.6L12 4l-2.09-.7c-.51-.17-1.06.1-1.25.6L6.38 10h11.24zm-1.12 3c-1.66 0-3.04 1.16-3.4 2.71-.84-.36-1.62-.26-2.2-.01A3.503 3.503 0 0 0 7.5 13C5.57 13 4 14.57 4 16.5S5.57 20 7.5 20c1.84 0 3.33-1.42 3.47-3.22.3-.21 1.09-.6 2.06.02.16 1.79 1.64 3.2 3.47 3.2 1.93 0 3.5-1.57 3.5-3.5S18.43 13 16.5 13zm-9 6a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5zm9 0a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/open_in_new.svg b/chromium/ui/webui/resources/images/open_in_new.svg
index 73d36f6a3db..49382e778b7 100644
--- a/chromium/ui/webui/resources/images/open_in_new.svg
+++ b/chromium/ui/webui/resources/images/open_in_new.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5F6368"><path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#5F6368"><path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/os_flags_app_icon.svg b/chromium/ui/webui/resources/images/os_flags_app_icon.svg
index 681fc1a80a0..4e2fbd792b1 100644
--- a/chromium/ui/webui/resources/images/os_flags_app_icon.svg
+++ b/chromium/ui/webui/resources/images/os_flags_app_icon.svg
@@ -1 +1 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_2_6)"><path d="M41.44 35.42L30 19.64v-9.48h4v-4H14v4h4v9.46L6.28 35.8c-.88 1.22-1 2.82-.32 4.16a3.992 3.992 0 0 0 3.56 2.18h29c2.2 0 4-1.8 4-4 0-1.04-.42-2-1.08-2.72z" fill="#1A73E8"/></g><defs><clipPath id="clip0_2_6"><path fill="#fff" d="M0 0h48v48H0z"/></clipPath></defs></svg>
-\ No newline at end of file
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M41.44 35.42 30 19.64v-9.48h4v-4H14v4h4v9.46L6.28 35.8c-.88 1.22-1 2.82-.32 4.16a3.992 3.992 0 0 0 3.56 2.18h29c2.2 0 4-1.8 4-4 0-1.04-.42-2-1.08-2.72z" fill="#1A73E8"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h48v48H0z"/></clipPath></defs></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/os_system_app_icon.svg b/chromium/ui/webui/resources/images/os_system_app_icon.svg
index 8ca092a466c..8543965b735 100644
--- a/chromium/ui/webui/resources/images/os_system_app_icon.svg
+++ b/chromium/ui/webui/resources/images/os_system_app_icon.svg
@@ -1 +1 @@
-<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="8" width="176" height="176"><circle cx="96" cy="96" r="88" fill="#C4C4C4"/></mask><g mask="url(#a)"><path fill="#5F6368" d="M0 0h192v192H0z"/></g><path d="M97.05 46l43.301 25v50L97.05 146l-43.301-25V71L97.05 46z" stroke="#87FFC5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M140.35 71v50l-43.3 25V96l43.3-25zm-86.7 0l43.301 25 .001 49.999-43.301-25L53.65 71z" stroke="#87FFC5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="8" y="8" width="176" height="176"><circle cx="96" cy="96" r="88" fill="#C4C4C4"/></mask><g mask="url(#a)"><path fill="#5F6368" d="M0 0h192v192H0z"/></g><path d="m97.05 46 43.301 25v50L97.05 146l-43.301-25V71L97.05 46z" stroke="#87FFC5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M140.35 71v50l-43.3 25V96l43.3-25zm-86.7 0 43.301 25 .001 49.999-43.301-25L53.65 71z" stroke="#87FFC5" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/vr_back.svg b/chromium/ui/webui/resources/images/vr_back.svg
index cd1e90ea943..4e4f1bd9e6c 100644
--- a/chromium/ui/webui/resources/images/vr_back.svg
+++ b/chromium/ui/webui/resources/images/vr_back.svg
@@ -1 +1 @@
-<svg width="58" height="58" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="7" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.130321558 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" transform="translate(-21 -24)" fill="#565656" fill-rule="evenodd"><path d="M51.029 63.285L40.745 53h23.171v-.002L64 53a2 2 0 1 0-.084-3.998V49h-23.17l10.283-10.285a2 2 0 1 0-2.484-3.086l-.043-.043L34.29 49.798l.065.065A1.99 1.99 0 0 0 34 51c0 .422.131.814.355 1.137l-.065.065 14.212 14.212.043-.043a2 2 0 1 0 2.484-3.086z"/></g></svg>
-\ No newline at end of file
+<svg width="58" height="58" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="7" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.130321558 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" transform="translate(-21 -24)" fill="#565656" fill-rule="evenodd"><path d="M51.029 63.285 40.745 53h23.171v-.002L64 53a2 2 0 1 0-.084-3.998V49h-23.17l10.283-10.285a2 2 0 1 0-2.484-3.086l-.043-.043L34.29 49.798l.065.065A1.99 1.99 0 0 0 34 51c0 .422.131.814.355 1.137l-.065.065 14.212 14.212.043-.043a2 2 0 1 0 2.484-3.086z"/></g></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/vr_reload.svg b/chromium/ui/webui/resources/images/vr_reload.svg
index 46f1387f706..162b0139fed 100644
--- a/chromium/ui/webui/resources/images/vr_reload.svg
+++ b/chromium/ui/webui/resources/images/vr_reload.svg
@@ -1 +1 @@
-<svg width="90" height="90" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.29 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" transform="translate(-118 -303)" fill="#5A5A5A" fill-rule="evenodd"><path d="M174.368 334.632L179 330v14h-14l6.534-6.534a12.014 12.014 0 0 0-8.463-3.466c-6.657 0-12.053 5.372-12.053 12s5.396 12 12.053 12c5.25 0 9.416-3.25 10.943-7.782l.22-.024c.373-.798 1.107-1.194 1.773-1.194.886 0 1.993.633 1.993 2 0 .296-.064.576-.178.828l.091-.006c-2.384 5.86-8.1 10.178-14.842 10.178-8.875 0-16.071-7.164-16.071-16s7.196-16 16.071-16c4.408 0 8.398 1.769 11.297 4.632z"/></g></svg>
-\ No newline at end of file
+<svg width="90" height="90" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="a"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="15" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.29 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g filter="url(#a)" transform="translate(-118 -303)" fill="#5A5A5A" fill-rule="evenodd"><path d="M174.368 334.632 179 330v14h-14l6.534-6.534a12.014 12.014 0 0 0-8.463-3.466c-6.657 0-12.053 5.372-12.053 12s5.396 12 12.053 12c5.25 0 9.416-3.25 10.943-7.782l.22-.024c.373-.798 1.107-1.194 1.773-1.194.886 0 1.993.633 1.993 2 0 .296-.064.576-.178.828l.091-.006c-2.384 5.86-8.1 10.178-14.842 10.178-8.875 0-16.071-7.164-16.071-16s7.196-16 16.071-16c4.408 0 8.398 1.769 11.297 4.632z"/></g></svg>
+\ No newline at end of file
diff --git a/chromium/ui/webui/resources/images/warning.svg b/chromium/ui/webui/resources/images/warning.svg
deleted file mode 100644
index ae6863b73fb..00000000000
--- a/chromium/ui/webui/resources/images/warning.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#626262"><path d="M0 0h48v48H0z" fill="none"/><path d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z"/></svg>
-\ No newline at end of file
diff --git a/chromium/ui/webui/resources/include_polymer.gni b/chromium/ui/webui/resources/include_polymer.gni
new file mode 100644
index 00000000000..9367c66a39e
--- /dev/null
+++ b/chromium/ui/webui/resources/include_polymer.gni
@@ -0,0 +1,5 @@
+# Copyright 2022 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.
+
+include_polymer = !is_android && !is_ios
diff --git a/chromium/ui/webui/resources/js/BUILD.gn b/chromium/ui/webui/resources/js/BUILD.gn
index c5b5f7abd74..40229e5b79f 100644
--- a/chromium/ui/webui/resources/js/BUILD.gn
+++ b/chromium/ui/webui/resources/js/BUILD.gn
@@ -18,7 +18,7 @@ include_polymer = !is_android && !is_ios
 generate_grd("build_grdp") {
   grd_prefix = "webui_js"
   out_grd = "$target_gen_dir/resources.grdp"
-  deps = [ ":preprocess" ]
+  public_deps = [ ":preprocess" ]
   manifest_files = [
     "$target_gen_dir/$preprocess_gen_manifest",
     "$target_gen_dir/$preprocess_src_manifest",
diff --git a/chromium/ui/webui/resources/js/browser_command/BUILD.gn b/chromium/ui/webui/resources/js/browser_command/BUILD.gn
index cc43070cdcc..a8210cafec1 100644
--- a/chromium/ui/webui/resources/js/browser_command/BUILD.gn
+++ b/chromium/ui/webui/resources/js/browser_command/BUILD.gn
@@ -51,7 +51,7 @@ preprocess_if_expr("preprocess_src") {
 generate_grd("build_grdp") {
   grd_prefix = "webui_js_browser_command"
   out_grd = "$target_gen_dir/resources.grdp"
-  deps = [ ":build_ts" ]
+  public_deps = [ ":build_ts" ]
   manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
   resource_path_prefix = "js/browser_command"
 }
diff --git a/chromium/ui/webui/resources/js/cr/ui.js b/chromium/ui/webui/resources/js/cr/ui.js
index 4fe73f481fd..4b67bafa816 100644
--- a/chromium/ui/webui/resources/js/cr/ui.js
+++ b/chromium/ui/webui/resources/js/cr/ui.js
@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: ui.js and the autogenerated ui.m.js module version are deprecated.
+// These files and files that depend on them should only be used by legacy UIs
+// that have not yet been updated to new patterns. Use Web Components in any new
+// code.
+
 cr.define('cr.ui', function() {
   /**
    * Decorates elements as an instance of a class.
diff --git a/chromium/ui/webui/resources/js/cr/ui/BUILD.gn b/chromium/ui/webui/resources/js/cr/ui/BUILD.gn
index 10a7faefc31..274354356fa 100644
--- a/chromium/ui/webui/resources/js/cr/ui/BUILD.gn
+++ b/chromium/ui/webui/resources/js/cr/ui/BUILD.gn
@@ -16,7 +16,7 @@ preprocess_gen_manifest = "preprocessed_gen_manifest.json"
 generate_grd("build_grdp") {
   grd_prefix = "webui_js_cr_ui"
   out_grd = "$target_gen_dir/resources.grdp"
-  deps = [ ":preprocess" ]
+  public_deps = [ ":preprocess" ]
   manifest_files = [
     "$target_gen_dir/$preprocess_gen_manifest",
     "$target_gen_dir/$preprocess_src_manifest",
@@ -41,7 +41,6 @@ preprocess_if_expr("preprocess_src") {
     "focus_outline_manager.js",
     "splitter.js",
     "store.js",
-    "tabs.js",
     "tree.js",
   ]
 
@@ -172,7 +171,10 @@ js_library("context_menu_handler") {
 }
 
 js_library("dialogs") {
-  deps = [ "../..:cr" ]
+  deps = [
+    "../..:cr",
+    "../..:util",
+  ]
 }
 
 js_library("focus_manager") {
@@ -334,7 +336,6 @@ js_type_check("ui_resources_modules") {
     ":splitter",
     ":store",
     ":store_client",
-    ":tabs",
     ":tree",
   ]
 }
@@ -560,15 +561,6 @@ js_library("store_client") {
   ]
 }
 
-js_library("tabs") {
-  deps = [
-    ":focus_outline_manager.m",
-    "..:ui.m",
-    "../..:cr.m",
-    "../..:util.m",
-  ]
-}
-
 js_library("tree") {
   deps = [
     "../:ui.m",
diff --git a/chromium/ui/webui/resources/js/cr/ui/command.js b/chromium/ui/webui/resources/js/cr/ui/command.js
index 73d14df8b83..6351638e99f 100644
--- a/chromium/ui/webui/resources/js/cr/ui/command.js
+++ b/chromium/ui/webui/resources/js/cr/ui/command.js
@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
+// version). These files and all files that depend on them are deprecated, and
+// should only be used by legacy UIs that have not yet been updated to new
+// patterns. Use Web Components in any new code.
+
 /**
  * @fileoverview A command is an abstraction of an action a user can do in the
  * UI.
diff --git a/chromium/ui/webui/resources/js/cr/ui/context_menu_handler.js b/chromium/ui/webui/resources/js/cr/ui/context_menu_handler.js
index a76859624f2..50e3b43cc31 100644
--- a/chromium/ui/webui/resources/js/cr/ui/context_menu_handler.js
+++ b/chromium/ui/webui/resources/js/cr/ui/context_menu_handler.js
@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
+// version). These files and all files that depend on them are deprecated, and
+// should only be used by legacy UIs that have not yet been updated to new
+// patterns. Use Web Components in any new code.
+
 // require: event_target.js
 
 // clang-format off
diff --git a/chromium/ui/webui/resources/js/cr/ui/dialogs.js b/chromium/ui/webui/resources/js/cr/ui/dialogs.js
index e1c76cb8374..4ae3b36aee2 100644
--- a/chromium/ui/webui/resources/js/cr/ui/dialogs.js
+++ b/chromium/ui/webui/resources/js/cr/ui/dialogs.js
@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {isRTL} from 'chrome://resources/js/util.m.js'
+
 cr.define('cr.ui.dialogs', function() {
   /**
    * @constructor
@@ -135,14 +137,21 @@ cr.define('cr.ui.dialogs', function() {
 
   /** @protected */
   BaseDialog.prototype.onContainerKeyDown = function(event) {
-    // Handle Escape.
-    if (event.keyCode === 27 && !this.cancelButton.disabled) {
+    // 0=cancel, 1=ok.
+    const focus = i => [this.cancelButton, this.okButton][i].focus();
+
+    if (event.key === 'Escape' && !this.cancelButton.disabled) {
       this.onCancelClick_(event);
-      event.stopPropagation();
-      // Prevent the event from being handled by the container of the dialog.
-      // e.g. Prevent the parent container from closing at the same time.
-      event.preventDefault();
+    } else if (event.key === 'ArrowLeft') {
+      focus(isRTL() ? 1 : 0);
+    } else if (event.key === 'ArrowRight') {
+      focus(isRTL() ? 0 : 1);
+    } else {
+      // Not handled, so return and allow event to propagate.
+      return;
     }
+    event.stopPropagation();
+    event.preventDefault();
   };
 
   /** @private */
diff --git a/chromium/ui/webui/resources/js/cr/ui/dialogs.m.d.ts b/chromium/ui/webui/resources/js/cr/ui/dialogs.m.d.ts
index becce5a78fe..b78a1d5e649 100644
--- a/chromium/ui/webui/resources/js/cr/ui/dialogs.m.d.ts
+++ b/chromium/ui/webui/resources/js/cr/ui/dialogs.m.d.ts
@@ -17,9 +17,12 @@ export class BaseDialog {
       title: string, message: string, onOk?: Function|undefined,
       onCancel?: Function|undefined, onShow?: Function|undefined): void;
   hide(onHide?: Function|undefined): void;
+
+  /* eslint-disable @typescript-eslint/naming-convention */
   OK_LABEL: string;
   CANCEL_LABEL: string;
   ANIMATE_STABLE_DURATION: number;
+  /* eslint-enable @typescript-eslint/naming-convention */
 }
 
 export class AlertDialog extends BaseDialog {
diff --git a/chromium/ui/webui/resources/js/cr/ui/focus_row_behavior.js b/chromium/ui/webui/resources/js/cr/ui/focus_row_behavior.js
index b49124cf287..0ee9a91f74b 100644
--- a/chromium/ui/webui/resources/js/cr/ui/focus_row_behavior.js
+++ b/chromium/ui/webui/resources/js/cr/ui/focus_row_behavior.js
@@ -30,7 +30,7 @@ cr.define('cr.ui', function() {
      * @param {!Event} e
      */
     onFocus(row, e) {
-      const element = e.path[0];
+      const element = /** @type {!Element} */ (e.composedPath()[0]);
       const focusableElement = cr.ui.FocusRow.getFocusableElement(element);
       if (element !== focusableElement) {
         focusableElement.focus();
diff --git a/chromium/ui/webui/resources/js/cr/ui/grid.js b/chromium/ui/webui/resources/js/cr/ui/grid.js
index bdf950353a4..08d2d99984d 100644
--- a/chromium/ui/webui/resources/js/cr/ui/grid.js
+++ b/chromium/ui/webui/resources/js/cr/ui/grid.js
@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
+// version). These files and all files that depend on them are deprecated, and
+// should only be used by legacy UIs that have not yet been updated to new
+// patterns. Use Web Components in any new code.
+
 // clang-format off
 // #import {define as crUiDefine} from '../ui.m.js';
 // #import {ListSelectionModel} from './list_selection_model.m.js';
diff --git a/chromium/ui/webui/resources/js/cr/ui/list.js b/chromium/ui/webui/resources/js/cr/ui/list.js
index c0eaff10884..1cd5998d077 100644
--- a/chromium/ui/webui/resources/js/cr/ui/list.js
+++ b/chromium/ui/webui/resources/js/cr/ui/list.js
@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
+// version). These files and all files that depend on them are deprecated, and
+// should only be used by legacy UIs that have not yet been updated to new
+// patterns. Use Web Components in any new code.
+
 // require: array_data_model.js
 // require: list_selection_model.js
 // require: list_selection_controller.js
diff --git a/chromium/ui/webui/resources/js/cr/ui/list_item.js b/chromium/ui/webui/resources/js/cr/ui/list_item.js
index 71164ca173a..468537ca9a3 100644
--- a/chromium/ui/webui/resources/js/cr/ui/list_item.js
+++ b/chromium/ui/webui/resources/js/cr/ui/list_item.js
@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
+// version). These files and all files that depend on them are deprecated, and
+// should only be used by legacy UIs that have not yet been updated to new
+// patterns. Use Web Components in any new code.
+
 // clang-format off
 // #import {PropertyKind, getPropertyDescriptor} from '../../cr.m.js';
 // #import {define as crUiDefine} from '../ui.m.js';
diff --git a/chromium/ui/webui/resources/js/cr/ui/menu.js b/chromium/ui/webui/resources/js/cr/ui/menu.js
index e45910eb444..bc3d4c27848 100644
--- a/chromium/ui/webui/resources/js/cr/ui/menu.js
+++ b/chromium/ui/webui/resources/js/cr/ui/menu.js
@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
+// version). These files and all files that depend on them are deprecated, and
+// should only be used by legacy UIs that have not yet been updated to new
+// patterns. Use Web Components in any new code.
+
 // #import {assert, assertInstanceof} from '../../assert.m.js';
 // #import {define as crUiDefine, decorate} from '../ui.m.js';
 // #import {getPropertyDescriptor, PropertyKind} from '../../cr.m.js';
diff --git a/chromium/ui/webui/resources/js/cr/ui/menu_button.js b/chromium/ui/webui/resources/js/cr/ui/menu_button.js
index 00ec20abb6e..347e5f0cabd 100644
--- a/chromium/ui/webui/resources/js/cr/ui/menu_button.js
+++ b/chromium/ui/webui/resources/js/cr/ui/menu_button.js
@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
+// version). These files and all files that depend on them are deprecated, and
+// should only be used by legacy UIs that have not yet been updated to new
+// patterns. Use Web Components in any new code.
+
 // #import {assert} from '../../assert.m.js';
 // #import {isWindows} from '../../cr.m.js';
 // #import {EventTracker} from '../../event_tracker.m.js'
diff --git a/chromium/ui/webui/resources/js/cr/ui/menu_item.js b/chromium/ui/webui/resources/js/cr/ui/menu_item.js
index 2dba74be2ae..5970f301f1d 100644
--- a/chromium/ui/webui/resources/js/cr/ui/menu_item.js
+++ b/chromium/ui/webui/resources/js/cr/ui/menu_item.js
@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
+// version). These files and all files that depend on them are deprecated, and
+// should only be used by legacy UIs that have not yet been updated to new
+// patterns. Use Web Components in any new code.
+
 // clang-format off
 // #import {loadTimeData} from '../../load_time_data.m.js';
 // #import {assert} from '../../assert.m.js';
diff --git a/chromium/ui/webui/resources/js/cr/ui/splitter.js b/chromium/ui/webui/resources/js/cr/ui/splitter.js
index 8e72fd9fb36..cb78909c96b 100644
--- a/chromium/ui/webui/resources/js/cr/ui/splitter.js
+++ b/chromium/ui/webui/resources/js/cr/ui/splitter.js
@@ -2,6 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
+// version). These files and all files that depend on them are deprecated, and
+// should only be used by legacy UIs that have not yet been updated to new
+// patterns. Use Web Components in any new code. cr_splitter
+// (ui/webui/resources/cr_elements/cr_splitter/) was specifically added as a
+// replacement for this file in UIs that are using Polymer.
+
 /**
  * @fileoverview This implements a splitter element which can be used to resize
  * elements in split panes.
diff --git a/chromium/ui/webui/resources/js/cr/ui/store.js b/chromium/ui/webui/resources/js/cr/ui/store.js
index 125bfebd874..f9805a5e4a4 100644
--- a/chromium/ui/webui/resources/js/cr/ui/store.js
+++ b/chromium/ui/webui/resources/js/cr/ui/store.js
@@ -125,14 +125,14 @@ export class Store {
    * @param {DeferredAction} action
    */
   dispatchInternal_(action) {
-    action(this.reduce_.bind(this));
+    action(this.reduce.bind(this));
   }
 
   /**
    * @param {?Action} action
-   * @private
+   * @protected
    */
-  reduce_(action) {
+  reduce(action) {
     if (!action) {
       return;
     }
diff --git a/chromium/ui/webui/resources/js/cr/ui/store_client.js b/chromium/ui/webui/resources/js/cr/ui/store_client.js
index 1e60ba32aee..833ffda5734 100644
--- a/chromium/ui/webui/resources/js/cr/ui/store_client.js
+++ b/chromium/ui/webui/resources/js/cr/ui/store_client.js
@@ -3,7 +3,8 @@
 // found in the LICENSE file.
 
 import {assertNotReached} from '../../assert.m.js';
-import {Action, DeferredAction} from './store.js';
+
+import {Action, DeferredAction, Store} from './store.js';
 
 /**
  * StoreClient is a Polymer behavior which ties front-end elements to
@@ -133,6 +134,10 @@ export const StoreClient = {
   },
 };
 
+/**
+ * @interface
+ * @template T
+ */
 export class StoreClientInterface {
   /**
    * Helper to dispatch an action to the store, which will update the store
@@ -148,14 +153,16 @@ export class StoreClientInterface {
    */
   dispatchAsync(action) {}
 
-  /** @param {Object} newState */
+  /** @param {T} newState */
   onStateChanged(newState) {}
 
   updateFromStore() {}
 
   watch(localProperty, valueGetter) {}
 
+  /** @return {!T} */
   getState() {}
 
+  /** @return {!Store<T>} */
   getStore() {}
 }
diff --git a/chromium/ui/webui/resources/js/cr/ui/tabs.js b/chromium/ui/webui/resources/js/cr/ui/tabs.js
deleted file mode 100644
index 227b0fb1d65..00000000000
--- a/chromium/ui/webui/resources/js/cr/ui/tabs.js
+++ /dev/null
@@ -1,249 +0,0 @@
-// Copyright (c) 2011 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 {getPropertyDescriptor, isMac, PropertyKind} from '../../cr.m.js';
-import {findAncestor} from '../../util.m.js';
-import {decorate} from '../ui.m.js';
-import {define as crUiDefine} from '../ui.m.js';
-
-import {FocusOutlineManager} from './focus_outline_manager.m.js';
-
-/**
- * Returns the TabBox for a Tab or a TabPanel.
- * @param {Tab|Tabs|TabPanel} el The tab or tabpanel
- *     element.
- * @return {TabBox} The tab box if found.
- */
-function getTabBox(el) {
-  return /** @type {TabBox} */ (findAncestor(el, function(node) {
-    return node.tagName === 'TABBOX';
-  }));
-}
-
-/**
- * Returns whether an element is a tab related object.
- * @param {HTMLElement} el The element whose tag is being checked
- * @return {boolean} Whether the element is a tab related element.
- */
-function isTabElement(el) {
-  return el.tagName === 'TAB' || el.tagName === 'TABPANEL';
-}
-
-/**
- * Decorates all the children of an element.
- * @this {HTMLElement}
- */
-function decorateChildren() {
-  const map = {
-    TABBOX: TabBox,
-    TABS: Tabs,
-    TAB: Tab,
-    TABPANELS: TabPanels,
-    TABPANEL: TabPanel
-  };
-
-  Object.keys(map).forEach(function(tagName) {
-    const children = this.getElementsByTagName(tagName);
-    const constr = map[tagName];
-    for (const child of children) {
-      decorate(child, constr);
-    }
-  }.bind(this));
-}
-
-/**
- * Set hook for TabBox selectedIndex.
- * @param {number} selectedIndex The new selected index.
- * @this {TabBox}
- */
-function selectedIndexSetHook(selectedIndex) {
-  let child, tabChild, element;
-  element = this.querySelector('tabs');
-  if (element) {
-    let i;
-    for (i = 0; child = element.children[i]; i++) {
-      const isSelected = i === selectedIndex;
-      child.selected = isSelected;
-
-      // Update tabIndex for a11y
-      child.setAttribute('tabindex', isSelected ? 0 : -1);
-
-      // Update aria-selected attribute for a11y
-      const firstSelection = !child.hasAttribute('aria-selected');
-      child.setAttribute('aria-selected', isSelected);
-
-      // Update focus, but don't override initial focus.
-      if (isSelected && !firstSelection) {
-        child.focus();
-      }
-    }
-  }
-
-  element = this.querySelector('tabpanels');
-  if (element) {
-    let i;
-    for (i = 0; child = element.children[i]; i++) {
-      child.selected = i === selectedIndex;
-    }
-  }
-}
-
-/**
- * Creates a new tabbox element.
- * @param {Object=} opt_propertyBag Optional properties.
- * @constructor
- * @extends {HTMLElement}
- */
-export const TabBox = crUiDefine('tabbox');
-
-TabBox.prototype = {
-  __proto__: HTMLElement.prototype,
-  decorate() {
-    decorateChildren.call(this);
-    this.addEventListener('selectedChange', this.handleSelectedChange_, true);
-    this.selectedIndex = 0;
-  },
-
-  /**
-   * Callback for when a Tab or TabPanel changes its selected property.
-   * @param {Event} e The property change event.
-   * @private
-   */
-  handleSelectedChange_(e) {
-    const target = /** @type {Tab|TabPanel}} */ (e.target);
-    if (e.newValue && isTabElement(target) && getTabBox(target) === this) {
-      const index =
-          Array.prototype.indexOf.call(target.parentElement.children, target);
-      this.selectedIndex = index;
-    }
-  },
-
-  selectedIndex_: -1
-};
-
-/**
- * The index of the selected tab or -1 if no tab is selected.
- * @type {number}
- */
-TabBox.prototype.selectedIndex;
-Object.defineProperty(
-    TabBox.prototype, 'selectedIndex',
-    getPropertyDescriptor(
-        'selectedIndex', PropertyKind.JS, selectedIndexSetHook));
-
-/**
- * Creates a new tabs element.
- * @param {Object=} opt_propertyBag Optional properties.
- * @constructor
- * @extends {HTMLElement}
- */
-export const Tabs = crUiDefine('tabs');
-Tabs.prototype = {
-  __proto__: HTMLElement.prototype,
-  decorate() {
-    decorateChildren.call(this);
-
-    this.addEventListener('keydown', this.handleKeyDown_.bind(this));
-
-    // Get (and initializes a focus outline manager.
-    this.focusOutlineManager_ = FocusOutlineManager.forDocument(
-        /** @type {!Document} */ (this.ownerDocument));
-  },
-
-  /**
-   * Handle keydown to change the selected tab when the user presses the
-   * arrow keys.
-   * @param {Event} e The keyboard event.
-   * @private
-   */
-  handleKeyDown_(e) {
-    let delta = 0;
-    switch (e.key) {
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        delta = -1;
-        break;
-      case 'ArrowRight':
-      case 'ArrowDown':
-        delta = 1;
-        break;
-    }
-
-    if (!delta) {
-      return;
-    }
-
-    const cs = this.ownerDocument.defaultView.getComputedStyle(this);
-    if (cs.direction === 'rtl') {
-      delta *= -1;
-    }
-
-    const count = this.children.length;
-    const tabbox = getTabBox(this);
-    const index = tabbox.selectedIndex;
-    tabbox.selectedIndex = (index + delta + count) % count;
-
-    // Show focus outline since we used the keyboard.
-    this.focusOutlineManager_.visible = true;
-  }
-};
-
-/**
- * Creates a new tab element.
- * @param {Object=} opt_propertyBag Optional properties.
- * @constructor
- * @extends {HTMLElement}
- */
-export const Tab = crUiDefine('tab');
-Tab.prototype = {
-  __proto__: HTMLElement.prototype,
-  decorate() {
-    const self = this;
-    this.addEventListener(isMac ? 'click' : 'mousedown', function() {
-      self.selected = true;
-    });
-  }
-};
-
-/**
- * Whether the tab is selected.
- * @type {boolean}
- */
-Tab.prototype.selected;
-Object.defineProperty(
-    Tab.prototype, 'selected',
-    getPropertyDescriptor('selected', PropertyKind.BOOL_ATTR));
-
-/**
- * Creates a new tabpanels element.
- * @param {Object=} opt_propertyBag Optional properties.
- * @constructor
- * @extends {HTMLElement}
- */
-export const TabPanels = crUiDefine('tabpanels');
-TabPanels.prototype = {
-  __proto__: HTMLElement.prototype,
-  decorate: decorateChildren
-};
-
-/**
- * Creates a new tabpanel element.
- * @param {Object=} opt_propertyBag Optional properties.
- * @constructor
- * @extends {HTMLElement}
- */
-export const TabPanel = crUiDefine('tabpanel');
-TabPanel.prototype = {
-  __proto__: HTMLElement.prototype,
-  decorate() {}
-};
-
-/**
- * Whether the tab is selected.
- * @type {boolean}
- */
-TabPanel.prototype.selected;
-Object.defineProperty(
-    TabPanel.prototype, 'selected',
-    getPropertyDescriptor('selected', PropertyKind.BOOL_ATTR));
diff --git a/chromium/ui/webui/resources/js/cr/ui/tree.js b/chromium/ui/webui/resources/js/cr/ui/tree.js
index acd673fbaf8..446adff0b28 100644
--- a/chromium/ui/webui/resources/js/cr/ui/tree.js
+++ b/chromium/ui/webui/resources/js/cr/ui/tree.js
@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// NOTE: This file depends on ui.js (or the autogenerated ui.m.js module
+// version). These files and all files that depend on them are deprecated, and
+// should only be used by legacy UIs that have not yet been updated to new
+// patterns. Use Web Components in any new code.
+
 // clang-format off
 import {assert, assertInstanceof} from '../../assert.m.js';
 import {dispatchSimpleEvent, getPropertyDescriptor, isMac, PropertyKind} from '../../cr.m.js';
diff --git a/chromium/ui/webui/resources/js/custom_element.ts b/chromium/ui/webui/resources/js/custom_element.ts
index b2f0f1a2d24..a83ae55a5b0 100644
--- a/chromium/ui/webui/resources/js/custom_element.ts
+++ b/chromium/ui/webui/resources/js/custom_element.ts
@@ -2,15 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+
 /**
  * @fileoverview Base class for Web Components that don't use Polymer.
  * See the following file for usage:
  * chrome/test/data/webui/js/custom_element_test.js
  */
 
+function emptyHTML(): string|TrustedHTML {
+  return window.trustedTypes ? window.trustedTypes.emptyHTML : '';
+}
+
 export class CustomElement extends HTMLElement {
-  static get template(): string {
-    return '';
+  static get template() {
+    return emptyHTML();
   }
 
   constructor() {
@@ -18,8 +23,11 @@ export class CustomElement extends HTMLElement {
 
     this.attachShadow({mode: 'open'});
     const template = document.createElement('template');
-    template.innerHTML =
-        (this.constructor as typeof CustomElement).template || '';
+    const html =
+        (this.constructor as typeof CustomElement).template || emptyHTML();
+    // This is a workaround for the fact that the innerHTML setter only accepts
+    // a string and not TrustedHTML.
+    template.innerHTML = html as unknown as string;
     this.shadowRoot!.appendChild(template.content.cloneNode(true));
   }
 
diff --git a/chromium/ui/webui/resources/js/metrics_reporter/BUILD.gn b/chromium/ui/webui/resources/js/metrics_reporter/BUILD.gn
index d13ee52f756..497ec96afc8 100644
--- a/chromium/ui/webui/resources/js/metrics_reporter/BUILD.gn
+++ b/chromium/ui/webui/resources/js/metrics_reporter/BUILD.gn
@@ -47,7 +47,7 @@ copy("copy_src_and_mojom") {
 generate_grd("build_grdp") {
   grd_prefix = "webui_js_metrics_reporter"
   out_grd = "$target_gen_dir/resources.grdp"
-  deps = [ ":build_ts" ]
+  public_deps = [ ":build_ts" ]
   manifest_files = [ "$target_gen_dir/tsconfig.manifest" ]
   resource_path_prefix = "js/metrics_reporter"
 }
diff --git a/chromium/ui/webui/resources/js/metrics_reporter/metrics_reporter.ts b/chromium/ui/webui/resources/js/metrics_reporter/metrics_reporter.ts
index fade7db8144..d44ec1f5768 100644
--- a/chromium/ui/webui/resources/js/metrics_reporter/metrics_reporter.ts
+++ b/chromium/ui/webui/resources/js/metrics_reporter/metrics_reporter.ts
@@ -45,23 +45,51 @@ function timeToMojo(mark: bigint): TimeDelta {
  *       metricsReporter.umaReportTime(
  *         metricsReporter.measure('StartMark'));
  *     }
+ *
+ * Caveats:
+ *   1. measure() will assert if the mark is not available. You can use
+ *      the following code to prevent execution from being interrupted.
+ *
+ *     metricsReporter.measure('StartMark').then(duration =>
+ *       metricsReporter.umaReportTime('Your.Histogram', duration))
+ *
+ *   2. measure() will record inaccurate time if a mark is reused for
+ *      overlapping measurements. To prevent this from happening, you
+ *      can use hasLocalMark() to test before calling mark() and use
+ *      clearMark() to erase the mark after measure().
  */
-export class MetricsReporter {
+
+export interface MetricsReporter {
+  mark(name: string): void;
+  measure(startMark: string, endMark?: string): Promise<bigint>;
+  hasMark(name: string): Promise<boolean>;
+  hasLocalMark(name: string): boolean;
+  clearMark(name: string): void;
+  umaReportTime(histogram: string, time: bigint): void;
+}
+
+export class MetricsReporterImpl implements MetricsReporter {
   private marks_: Map<string, bigint> = new Map();
   private browserProxy_: BrowserProxy = BrowserProxyImpl.getInstance();
 
   constructor() {
     const callbackRouter = this.browserProxy_.getCallbackRouter();
-    callbackRouter.onGetMark.addListener((name: string) => {
-      return this.marks_.has(name) ? timeToMojo(this.marks_.get(name)!) : null;
-    });
+    callbackRouter.onGetMark.addListener(
+        (name: string) => ({
+          markedTime:
+              this.marks_.has(name) ? timeToMojo(this.marks_.get(name)!) : null
+        }));
 
     callbackRouter.onClearMark.addListener(
         (name: string) => this.marks_.delete(name));
   }
 
   static getInstance(): MetricsReporter {
-    return instance || (instance = new MetricsReporter());
+    return instance || (instance = new MetricsReporterImpl());
+  }
+
+  static setInstanceForTest(newInstance: MetricsReporter) {
+    instance = newInstance;
   }
 
   mark(name: string) {
@@ -100,8 +128,12 @@ export class MetricsReporter {
     return remoteMark !== null && remoteMark.markedTime !== null;
   }
 
+  hasLocalMark(name: string): boolean {
+    return this.marks_.has(name);
+  }
+
   clearMark(name: string) {
-    assert(this.marks_.delete(name));
+    this.marks_.delete(name);
     this.browserProxy_.clearMark(name);
   }
 
diff --git a/chromium/ui/webui/resources/js/static_types.d.ts b/chromium/ui/webui/resources/js/static_types.d.ts
new file mode 100644
index 00000000000..3e605bd4b9b
--- /dev/null
+++ b/chromium/ui/webui/resources/js/static_types.d.ts
@@ -0,0 +1,8 @@
+// Copyright 2022 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.
+
+export function getTrustedHTML(literal: string[]|
+                               TemplateStringsArray): TrustedHTML|string;
+export function getTrustedScript(literal: string[]): TrustedScript|string;
+export function getTrustedScriptURL(literal: string[]): TrustedScriptURL|string;
diff --git a/chromium/ui/webui/resources/mojo/BUILD.gn b/chromium/ui/webui/resources/mojo/BUILD.gn
index ad1008481e4..918e11a62b7 100644
--- a/chromium/ui/webui/resources/mojo/BUILD.gn
+++ b/chromium/ui/webui/resources/mojo/BUILD.gn
@@ -46,8 +46,19 @@ ts_library("library") {
   ]
 
   if (is_chromeos_ash) {
-    in_files += [ "ui/gfx/range/mojom/range.mojom-webui.js" ]
-    extra_deps += [ "//ui/gfx/range/mojom:mojom_js__generator" ]
+    in_files += [
+      "ui/gfx/range/mojom/range.mojom-webui.js",
+      "chromeos/services/bluetooth_config/public/mojom/cros_bluetooth_config.mojom-webui.js",
+      "chromeos/services/network_config/public/mojom/network_types.mojom-webui.js",
+      "chromeos/services/network_health/public/mojom/network_diagnostics.mojom-webui.js",
+      "chromeos/services/network_health/public/mojom/network_health.mojom-webui.js",
+    ]
+    extra_deps += [
+      "//chromeos/services/bluetooth_config/public/mojom:mojom_js__generator",
+      "//chromeos/services/network_config/public/mojom:network_types_js__generator",
+      "//chromeos/services/network_health/public/mojom:mojom_js__generator",
+      "//ui/gfx/range/mojom:mojom_js__generator",
+    ]
   }
 }
 
diff --git a/chromium/ui/webui/resources/tools/generate_grd.gni b/chromium/ui/webui/resources/tools/generate_grd.gni
index 56464f3711b..7a99fc852c5 100644
--- a/chromium/ui/webui/resources/tools/generate_grd.gni
+++ b/chromium/ui/webui/resources/tools/generate_grd.gni
@@ -6,9 +6,11 @@ template("generate_grd") {
   action(target_name) {
     script = "//ui/webui/resources/tools/generate_grd.py"
 
-    if (defined(invoker.deps)) {
-      deps = invoker.deps
-    }
+    forward_variables_from(invoker,
+                           [
+                             "deps",
+                             "public_deps",
+                           ])
 
     inputs = []
     outputs = [ invoker.out_grd ]
diff --git a/chromium/ui/webui/resources/tools/generate_grd.py b/chromium/ui/webui/resources/tools/generate_grd.py
index 05a17a2b6c7..0d56fb2f8a8 100644
--- a/chromium/ui/webui/resources/tools/generate_grd.py
+++ b/chromium/ui/webui/resources/tools/generate_grd.py
@@ -83,7 +83,7 @@ GRDP_END_TEMPLATE = '</grit-part>\n'
 def _generate_include_row(grd_prefix, filename, pathname, \
                           resource_path_rewrites, resource_path_prefix):
   name_suffix = filename.upper().replace('/', '_').replace('.', '_'). \
-          replace('-', '_')
+          replace('-', '_').replace('@', '_AT_')
   name = 'IDR_%s_%s' % (grd_prefix.upper(), name_suffix)
   extension = os.path.splitext(filename)[1]
   type = 'chrome_html' if extension == '.html' or extension == '.js' \
@@ -131,9 +131,7 @@ def main(argv):
   args = parser.parse_args(argv)
 
   grd_path = os.path.normpath(os.path.join(_CWD, args.out_grd))
-  with open(grd_path, 'w',
-            newline='') if sys.version_info.major == 3 else open(
-                grd_path, 'wb') as grd_file:
+  with open(grd_path, 'w', newline='') as grd_file:
     begin_template = GRDP_BEGIN_TEMPLATE if args.out_grd.endswith('.grdp') else \
         GRD_BEGIN_TEMPLATE
     grd_file.write(begin_template.format(prefix=args.grd_prefix,
diff --git a/chromium/ui/webui/resources/tools/generate_grd_test.py b/chromium/ui/webui/resources/tools/generate_grd_test.py
index bfaa5f6f157..56b9d2c558c 100755
--- a/chromium/ui/webui/resources/tools/generate_grd_test.py
+++ b/chromium/ui/webui/resources/tools/generate_grd_test.py
@@ -50,9 +50,7 @@ class GenerateGrdTest(unittest.TestCase):
   def _read_out_file(self, file_name):
     assert self._out_folder
     file_path = os.path.join(self._out_folder, file_name)
-    with open(file_path, 'r',
-              newline='') if sys.version_info.major == 3 else open(
-                  file_path, 'rb') as f:
+    with open(file_path, 'r', newline='') as f:
       return f.read()
 
   def _run_test_(self, grd_expected,
@@ -101,9 +99,7 @@ class GenerateGrdTest(unittest.TestCase):
     actual_grd = self._read_out_file(out_grd)
     if (grd_expected.endswith('.grd') or grd_expected.endswith('.grdp')):
       expected_grd_path = os.path.join(_HERE_DIR, 'tests', grd_expected)
-      with open(expected_grd_path, 'r',
-                newline='') if sys.version_info.major == 3 else open(
-                    expected_grd_path, 'rb') as f:
+      with open(expected_grd_path, 'r', newline='') as f:
         expected_grd_content = f.read()
       self.assertMultiLineEqual(expected_grd_content, actual_grd)
     else:
diff --git a/chromium/ui/webui/resources/tools/js_modulizer_test.py b/chromium/ui/webui/resources/tools/js_modulizer_test.py
index d0cf6ce5541..0be7ca24ac0 100755
--- a/chromium/ui/webui/resources/tools/js_modulizer_test.py
+++ b/chromium/ui/webui/resources/tools/js_modulizer_test.py
@@ -1,4 +1,4 @@
-#!/usr/bin/env python
+#!/usr/bin/env python3
 # Copyright 2019 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.
@@ -22,7 +22,8 @@ class JsModulizerTest(unittest.TestCase):
 
   def _read_out_file(self, file_name):
     assert self._out_folder
-    return open(os.path.join(self._out_folder, file_name), 'rb').read()
+    with open (os.path.join(self._out_folder, file_name), 'rb') as f:
+      return f.read()
 
   def _run_test_(self, js_file, js_file_expected, namespace_rewrites=None,
                  preserve_offsets=False):
@@ -43,9 +44,9 @@ class JsModulizerTest(unittest.TestCase):
 
     js_out_file = os.path.basename(js_file).replace('.js', '.m.js')
     actual_js = self._read_out_file(js_out_file)
-    expected_js = open(
-        os.path.join(_HERE_DIR, 'tests', js_file_expected), 'rb').read()
-    self.assertEqual(expected_js, actual_js)
+    with open(os.path.join(_HERE_DIR, 'tests', js_file_expected), 'rb') as f:
+      expected_js = f.read();
+      self.assertEqual(expected_js, actual_js)
 
   def testSuccess_WithoutCrDefine(self):
     self._run_test_('without_cr_define.js', 'without_cr_define_expected.js')
diff --git a/chromium/ui/webui/untrusted_web_ui_browsertest_util.cc b/chromium/ui/webui/untrusted_web_ui_browsertest_util.cc
index 018fe45e3d2..2144eea6a3c 100644
--- a/chromium/ui/webui/untrusted_web_ui_browsertest_util.cc
+++ b/chromium/ui/webui/untrusted_web_ui_browsertest_util.cc
@@ -6,19 +6,27 @@
 
 #include "content/public/browser/web_contents.h"
 #include "content/public/common/url_constants.h"
+#include "ui/webui/untrusted_web_ui_controller.h"
 
 namespace ui {
 
-TestUntrustedWebUIControllerFactory::TestUntrustedWebUIControllerFactory() =
-    default;
+namespace {
 
-TestUntrustedWebUIControllerFactory::~TestUntrustedWebUIControllerFactory() =
-    default;
+class TestUntrustedWebUIController : public ui::UntrustedWebUIController {
+ public:
+  TestUntrustedWebUIController(
+      content::WebUI* web_ui,
+      const std::string& host,
+      const content::TestUntrustedDataSourceHeaders& headers)
+      : ui::UntrustedWebUIController(web_ui) {
+    content::AddUntrustedDataSource(
+        web_ui->GetWebContents()->GetBrowserContext(), host, headers);
+  }
 
-const ui::UntrustedWebUIControllerFactory::WebUIConfigMap&
-TestUntrustedWebUIControllerFactory::GetWebUIConfigMap() {
-  return configs_;
-}
+  ~TestUntrustedWebUIController() override = default;
+};
+
+}  // namespace
 
 TestUntrustedWebUIConfig::TestUntrustedWebUIConfig(base::StringPiece host)
     : WebUIConfig(content::kChromeUIUntrustedScheme, host) {}
@@ -36,15 +44,4 @@ TestUntrustedWebUIConfig::CreateWebUIController(content::WebUI* web_ui) {
                                                         headers_);
 }
 
-TestUntrustedWebUIController::TestUntrustedWebUIController(
-    content::WebUI* web_ui,
-    const std::string& host,
-    const content::TestUntrustedDataSourceHeaders& headers)
-    : ui::UntrustedWebUIController(web_ui) {
-  content::AddUntrustedDataSource(web_ui->GetWebContents()->GetBrowserContext(),
-                                  host, headers);
-}
-
-TestUntrustedWebUIController::~TestUntrustedWebUIController() = default;
-
 }  // namespace ui
diff --git a/chromium/ui/webui/untrusted_web_ui_browsertest_util.h b/chromium/ui/webui/untrusted_web_ui_browsertest_util.h
index 791ce19fb67..ca57a3c96b2 100644
--- a/chromium/ui/webui/untrusted_web_ui_browsertest_util.h
+++ b/chromium/ui/webui/untrusted_web_ui_browsertest_util.h
@@ -5,32 +5,16 @@
 #ifndef UI_WEBUI_UNTRUSTED_WEB_UI_BROWSERTEST_UTIL_H_
 #define UI_WEBUI_UNTRUSTED_WEB_UI_BROWSERTEST_UTIL_H_
 
+#include "content/public/browser/webui_config.h"
 #include "content/public/test/web_ui_browsertest_util.h"
-#include "ui/webui/untrusted_web_ui_controller.h"
-#include "ui/webui/untrusted_web_ui_controller_factory.h"
-#include "ui/webui/webui_config.h"
 
-namespace ui {
-
-class TestUntrustedWebUIControllerFactory
-    : public ui::UntrustedWebUIControllerFactory {
- public:
-  TestUntrustedWebUIControllerFactory();
-  ~TestUntrustedWebUIControllerFactory() override;
+namespace content {
+class WebUIController;
+}
 
-  void add_web_ui_config(std::unique_ptr<ui::WebUIConfig> config) {
-    const std::string host = config->host();
-    configs_.insert(std::make_pair(host, std::move(config)));
-  }
-
- protected:
-  const WebUIConfigMap& GetWebUIConfigMap() override;
-
- private:
-  WebUIConfigMap configs_;
-};
+namespace ui {
 
-class TestUntrustedWebUIConfig : public ui::WebUIConfig {
+class TestUntrustedWebUIConfig : public content::WebUIConfig {
  public:
   explicit TestUntrustedWebUIConfig(base::StringPiece host);
   TestUntrustedWebUIConfig(
@@ -44,15 +28,6 @@ class TestUntrustedWebUIConfig : public ui::WebUIConfig {
   const content::TestUntrustedDataSourceHeaders headers_;
 };
 
-class TestUntrustedWebUIController : public ui::UntrustedWebUIController {
- public:
-  TestUntrustedWebUIController(
-      content::WebUI* web_ui,
-      const std::string& host,
-      const content::TestUntrustedDataSourceHeaders& headers);
-  ~TestUntrustedWebUIController() override;
-};
-
 }  // namespace ui
 
 #endif  // UI_WEBUI_UNTRUSTED_WEB_UI_BROWSERTEST_UTIL_H_
diff --git a/chromium/ui/webui/untrusted_web_ui_controller_factory.cc b/chromium/ui/webui/untrusted_web_ui_controller_factory.cc
index febba884648..44f97e37278 100644
--- a/chromium/ui/webui/untrusted_web_ui_controller_factory.cc
+++ b/chromium/ui/webui/untrusted_web_ui_controller_factory.cc
@@ -7,8 +7,8 @@
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui.h"
 #include "content/public/browser/web_ui_controller.h"
+#include "content/public/browser/webui_config.h"
 #include "content/public/common/url_constants.h"
-#include "ui/webui/webui_config.h"
 #include "url/gurl.h"
 
 namespace ui {
@@ -45,7 +45,7 @@ UntrustedWebUIControllerFactory::CreateWebUIControllerForURL(
   return config->CreateWebUIController(web_ui);
 }
 
-ui::WebUIConfig* UntrustedWebUIControllerFactory::GetConfigIfWebUIEnabled(
+content::WebUIConfig* UntrustedWebUIControllerFactory::GetConfigIfWebUIEnabled(
     content::BrowserContext* browser_context,
     const GURL& url) {
   // This factory doesn't support non chrome-untrusted:// WebUIs.
diff --git a/chromium/ui/webui/webui_config.h b/chromium/ui/webui/webui_config.h
deleted file mode 100644
index ca13c2db7e8..00000000000
--- a/chromium/ui/webui/webui_config.h
+++ /dev/null
@@ -1,17 +0,0 @@
-// 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.
-
-#ifndef UI_WEBUI_WEBUI_CONFIG_H_
-#define UI_WEBUI_WEBUI_CONFIG_H_
-
-#include "content/public/browser/webui_config.h"
-
-namespace ui {
-
-// TODO(ortuno): Remove once all users of WebUIConfig are migrated.
-using content::WebUIConfig;
-
-}  // namespace ui
-
-#endif  // UI_WEBUI_WEBUI_CONFIG_H_
author	Allan Sandfeld Jensen <allan.jensen@qt.io>	2022-09-07 13:12:05 +0200
committer	Allan Sandfeld Jensen <allan.jensen@qt.io>	2022-11-09 10:02:59 +0000
commit	33fc33aa94d4add0878ec30dc818e34e1dd3cc2a (patch)
tree	f6af110909c79b2759136554f1143d8b0572af0a /chromium/ui/webui
parent	7d2c5d177e9813077a621df8d18c0deda73099b3 (diff)
download	qtwebengine-chromium-33fc33aa94d4add0878ec30dc818e34e1dd3cc2a.tar.gz