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>

35 files changed, 476 insertions, 265 deletions

diff --git a/chromium/chrome/browser/resources/extensions/BUILD.gn b/chromium/chrome/browser/resources/extensions/BUILD.gn
index ed35295923a..cd3ee9766ea 100644
--- a/chromium/chrome/browser/resources/extensions/BUILD.gn
+++ b/chromium/chrome/browser/resources/extensions/BUILD.gn
@@ -7,7 +7,7 @@ import("//chrome/common/features.gni")
 import("//extensions/buildflags/buildflags.gni")
 import("//tools/grit/grit_rule.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")
@@ -68,12 +68,12 @@ preprocess_if_expr("preprocess_generated") {
   in_files = html_wrapper_files + css_wrapper_files
 }
 
-html_to_js("css_wrapper_files") {
-  js_files = css_wrapper_files
+html_to_wrapper("html_wrapper_files") {
+  in_files = html_files + icons_html_files
 }
 
-html_to_wrapper("html_wrapper_files") {
-  in_files = html_files
+css_to_wrapper("css_wrapper_files") {
+  in_files = css_files
 }
 
 grit("resources") {
diff --git a/chromium/chrome/browser/resources/extensions/activity_log/activity_log.ts b/chromium/chrome/browser/resources/extensions/activity_log/activity_log.ts
index 8e2e9f1ffc9..aa19c4286c6 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log.ts
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log.ts
@@ -11,8 +11,8 @@ import 'chrome://resources/polymer/v3_0/iron-pages/iron-pages.js';
 import './activity_log_stream.js';
 import './activity_log_history.js';
 import '../strings.m.js';
-import '../shared_style.js';
-import '../shared_vars.js';
+import '../shared_style.css.js';
+import '../shared_vars.css.js';
 
 import {CrContainerShadowMixin} from 'chrome://resources/cr_elements/cr_container_shadow_mixin.js';
 import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js';
diff --git a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.ts b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.ts
index a25dcca5438..b34ef72989e 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.ts
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.ts
@@ -6,14 +6,14 @@ import 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/cr_search_field/cr_search_field.js';
-import '../shared_style.js';
+import '../shared_style.css.js';
 import './activity_log_history_item.js';
 
 import {assert} from 'chrome://resources/js/assert_ts.js';
 import {PromiseResolver} from 'chrome://resources/js/promise_resolver.m.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {getTemplate} from './activity_log_history.html.js';
 
+import {getTemplate} from './activity_log_history.html.js';
 import {ActivityGroup} from './activity_log_history_item.js';
 
 /**
@@ -42,7 +42,7 @@ export interface ActivityLogDelegate {
  * the scripts executed (specified as a stringified JSON array in the args
  * field) as the keys for an activity group instead.
  */
-function getActivityGroupKeysForContentScript_(
+function getActivityGroupKeysForContentScript(
     activity: chrome.activityLogPrivate.ExtensionActivity): string[] {
   assert(
       activity.activityType ===
@@ -63,7 +63,7 @@ function getActivityGroupKeysForContentScript_(
  * is in activity.other.webRequest and we use this to generate more activity
  * group keys if possible.
  */
-function getActivityGroupKeysForWebRequest_(
+function getActivityGroupKeysForWebRequest(
     activity: chrome.activityLogPrivate.ExtensionActivity): Array<string> {
   assert(
       activity.activityType ===
@@ -111,9 +111,9 @@ function groupActivities(
 
     let activityGroupKeys = [activity.apiCall];
     if (isContentScript) {
-      activityGroupKeys = getActivityGroupKeysForContentScript_(activity);
+      activityGroupKeys = getActivityGroupKeysForContentScript(activity);
     } else if (isWebRequest) {
-      activityGroupKeys = getActivityGroupKeysForWebRequest_(activity);
+      activityGroupKeys = getActivityGroupKeysForWebRequest(activity);
     }
 
     for (const key of activityGroupKeys) {
diff --git a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history_item.ts b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history_item.ts
index ac4576eaa65..ce3225d563e 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history_item.ts
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history_item.ts
@@ -6,10 +6,11 @@ import 'chrome://resources/cr_elements/cr_expand_button/cr_expand_button.m.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/cr_icons_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
-import '../shared_style.js';
-import '../shared_vars.js';
+import '../shared_style.css.js';
+import '../shared_vars.css.js';
 
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
 import {getTemplate} from './activity_log_history_item.html.js';
 
 export type ActivityGroup = {
diff --git a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream.ts b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream.ts
index b32510d067d..db36fe17098 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream.ts
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream.ts
@@ -5,14 +5,14 @@
 import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/cr_search_field/cr_search_field.js';
 import 'chrome://resources/polymer/v3_0/iron-list/iron-list.js';
-import '../shared_style.js';
+import '../shared_style.css.js';
 import './activity_log_stream_item.js';
 
 import {ChromeEvent} from '/tools/typescript/definitions/chrome_event.js';
 import {assert} from 'chrome://resources/js/assert_ts.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {getTemplate} from './activity_log_stream.html.js';
 
+import {getTemplate} from './activity_log_stream.html.js';
 import {StreamItem} from './activity_log_stream_item.js';
 
 export interface ActivityLogEventDelegate {
diff --git a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream_item.ts b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream_item.ts
index dd423aa2f8c..af96cb773d3 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream_item.ts
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream_item.ts
@@ -5,10 +5,11 @@
 import 'chrome://resources/cr_elements/cr_expand_button/cr_expand_button.m.js';
 import 'chrome://resources/cr_elements/cr_icons_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
-import '../shared_style.js';
-import '../shared_vars.js';
+import '../shared_style.css.js';
+import '../shared_vars.css.js';
 
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
 import {getTemplate} from './activity_log_stream_item.html.js';
 
 export type StreamItem = {
diff --git a/chromium/chrome/browser/resources/extensions/checkup_image_dark.svg b/chromium/chrome/browser/resources/extensions/checkup_image_dark.svg
index b68b1840157..91d97d2da28 100644
--- a/chromium/chrome/browser/resources/extensions/checkup_image_dark.svg
+++ b/chromium/chrome/browser/resources/extensions/checkup_image_dark.svg
@@ -1 +1 @@
-<svg width="270" height="117" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="23.421%" y1="50%" x2="64.093%" y2="50%" id="a"><stop offset="0%"/><stop stop-color="#28292C" offset="100%"/></linearGradient><path id="b" d="M0 116h218V0H0z"/><path d="M35.238 19.048h-2.857v-7.62a3.808 3.808 0 0 0-3.81-3.809h-7.619V4.762A4.764 4.764 0 0 0 16.19 0a4.764 4.764 0 0 0-4.761 4.762v2.857h-7.62a3.792 3.792 0 0 0-3.79 3.81l-.01 7.238h2.848A5.146 5.146 0 0 1 8 23.81a5.146 5.146 0 0 1-5.143 5.142H.01L0 36.19A3.808 3.808 0 0 0 3.81 40h7.238v-2.857A5.146 5.146 0 0 1 16.19 32a5.146 5.146 0 0 1 5.143 5.143V40h7.238a3.808 3.808 0 0 0 3.81-3.81v-7.619h2.857A4.764 4.764 0 0 0 40 23.81a4.764 4.764 0 0 0-4.762-4.762z" id="d"/><path id="f" d="M0 0h12v12H0z"/></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" transform="matrix(-1 0 0 1 57 0)" d="M0 109h57v7H0z"/><g transform="translate(50)"><path d="M2 104V10.793C2 5.945 6.037 2 11 2h9v102H2z" fill="#2A2B2E"/><path d="M21 0H10.5C4.702 0 0 4.702 0 10.5V105h21V0zm-3.5 3.5v98h-14v-91c0-3.859 3.14-7 7-7h7z" fill="#3B3F42"/><path d="M9 104V10.793C9 5.945 12.94 2 17.784 2h112.432C135.06 2 139 5.945 139 10.793V104H9z" fill="#1F2123"/><path d="M130.421 0H17.58C11.738 0 7 4.702 7 10.5V105h134V10.5C141 4.702 136.262 0 130.421 0m0 3.5c3.89 0 7.053 3.141 7.053 7v91H10.526v-91c0-3.859 3.163-7 7.053-7H130.42" fill="#3B3F42"/><path d="M10.75 114C5.925 114 2 109.888 2 104.833V103h91v11H10.75z" fill="#2A2B2E"/><path d="M95 102H0v3.5c0 5.798 4.727 10.5 10.556 10.5H95v-14zm-3.519 3.5v7H10.556c-3.881 0-7.037-3.141-7.037-7H91.48z" fill="#3B3F42"/><path d="M90.816 114c-4.861 0-8.816-4.112-8.816-9.167V103h134v1.833c0 5.055-3.955 9.167-8.816 9.167H90.816z" fill="#1F2123"/><path d="M218 102H81v3.5c0 5.798 4.72 10.5 10.538 10.5h115.924c5.819 0 10.538-4.702 10.538-10.5V102zm-3.513 3.5c0 3.859-3.15 7-7.025 7H91.538c-3.874 0-7.025-3.141-7.025-7h129.974z" fill="#3B3F42"/><path d="M160.61 109h-22.219a6.39 6.39 0 0 1-6.391-6.39V102h35v.61a6.39 6.39 0 0 1-6.39 6.39" fill="#3B3F42"/><mask id="c" fill="#fff"><use xlink:href="#b"/></mask><path fill="#2A2B2E" mask="url(#c)" d="M19 93h109V12H19z"/><path d="M17 95h113V11H17v84zm3.531-3.5H126.47v-77H20.53v77z" fill="#3B3F42" mask="url(#c)"/></g><g transform="translate(106 32)"><mask id="e" fill="#fff"><use xlink:href="#d"/></mask><use fill="#3C4043" fill-rule="nonzero" xlink:href="#d"/><g mask="url(#e)" fill="#1A73E8"><path d="M-3.81-1.905h46v46h-46z"/></g></g><path d="M162.83 24.905L166 24l-3.17-.906a5.714 5.714 0 0 1-3.924-3.924L158 16l-.906 3.17a5.714 5.714 0 0 1-3.924 3.924L150 24l3.17.905a5.714 5.714 0 0 1 3.924 3.925L158 32l.906-3.17a5.714 5.714 0 0 1 3.924-3.925m9.585 43.548L174 68l-1.585-.453a2.856 2.856 0 0 1-1.962-1.962L170 64l-.453 1.585a2.856 2.856 0 0 1-1.962 1.962L166 68l1.585.453a2.856 2.856 0 0 1 1.962 1.962L170 72l.453-1.585a2.856 2.856 0 0 1 1.962-1.962" fill="#FBBC04"/><g transform="translate(74 80)"><mask id="g" fill="#fff"><use xlink:href="#f"/></mask><path d="M9.623 6.68L12 6l-2.377-.68A4.284 4.284 0 0 1 6.68 2.378L6 0l-.68 2.377A4.284 4.284 0 0 1 2.379 5.32L0 6l2.378.68A4.283 4.283 0 0 1 5.32 9.623L6 12l.68-2.377A4.283 4.283 0 0 1 9.623 6.68" fill="#FBBC04" mask="url(#g)"/></g></g></svg>
\ No newline at end of file
+<svg width="270" height="117" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="b" d="M0 116h218V0H0z"/><path d="M35.238 19.048h-2.857v-7.62a3.808 3.808 0 0 0-3.81-3.809h-7.619V4.762A4.764 4.764 0 0 0 16.19 0a4.764 4.764 0 0 0-4.761 4.762v2.857h-7.62a3.792 3.792 0 0 0-3.79 3.81l-.01 7.238h2.848A5.146 5.146 0 0 1 8 23.81a5.146 5.146 0 0 1-5.143 5.142H.01L0 36.19A3.808 3.808 0 0 0 3.81 40h7.238v-2.857A5.146 5.146 0 0 1 16.19 32a5.146 5.146 0 0 1 5.143 5.143V40h7.238a3.808 3.808 0 0 0 3.81-3.81v-7.619h2.857A4.764 4.764 0 0 0 40 23.81a4.764 4.764 0 0 0-4.762-4.762z" id="d"/><path id="f" d="M0 0h12v12H0z"/><linearGradient x1="23.421%" y1="50%" x2="64.093%" y2="50%" id="a"><stop offset="0%"/><stop stop-color="#28292C" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" transform="matrix(-1 0 0 1 57 0)" d="M0 109h57v7H0z"/><g transform="translate(50)"><path d="M2 104V10.793C2 5.945 6.037 2 11 2h9v102H2z" fill="#2A2B2E"/><path d="M21 0H10.5C4.702 0 0 4.702 0 10.5V105h21V0zm-3.5 3.5v98h-14v-91c0-3.859 3.14-7 7-7h7z" fill="#3B3F42"/><path d="M9 104V10.793C9 5.945 12.94 2 17.784 2h112.432C135.06 2 139 5.945 139 10.793V104H9z" fill="#1F2123"/><path d="M130.421 0H17.58C11.738 0 7 4.702 7 10.5V105h134V10.5C141 4.702 136.262 0 130.421 0m0 3.5c3.89 0 7.053 3.141 7.053 7v91H10.526v-91c0-3.859 3.163-7 7.053-7H130.42" fill="#3B3F42"/><path d="M10.75 114C5.925 114 2 109.888 2 104.833V103h91v11H10.75z" fill="#2A2B2E"/><path d="M95 102H0v3.5c0 5.798 4.727 10.5 10.556 10.5H95v-14zm-3.519 3.5v7H10.556c-3.881 0-7.037-3.141-7.037-7H91.48z" fill="#3B3F42"/><path d="M90.816 114c-4.861 0-8.816-4.112-8.816-9.167V103h134v1.833c0 5.055-3.955 9.167-8.816 9.167H90.816z" fill="#1F2123"/><path d="M218 102H81v3.5c0 5.798 4.72 10.5 10.538 10.5h115.924c5.819 0 10.538-4.702 10.538-10.5V102zm-3.513 3.5c0 3.859-3.15 7-7.025 7H91.538c-3.874 0-7.025-3.141-7.025-7h129.974z" fill="#3B3F42"/><path d="M160.61 109h-22.219a6.39 6.39 0 0 1-6.391-6.39V102h35v.61a6.39 6.39 0 0 1-6.39 6.39" fill="#3B3F42"/><mask id="c" fill="#fff"><use xlink:href="#b"/></mask><path fill="#2A2B2E" mask="url(#c)" d="M19 93h109V12H19z"/><path d="M17 95h113V11H17v84zm3.531-3.5H126.47v-77H20.53v77z" fill="#3B3F42" mask="url(#c)"/></g><g transform="translate(106 32)"><mask id="e" fill="#fff"><use xlink:href="#d"/></mask><use fill="#3C4043" fill-rule="nonzero" xlink:href="#d"/><g mask="url(#e)" fill="#1A73E8"><path d="M-3.81-1.905h46v46h-46z"/></g></g><path d="M162.83 24.905 166 24l-3.17-.906a5.714 5.714 0 0 1-3.924-3.924L158 16l-.906 3.17a5.714 5.714 0 0 1-3.924 3.924L150 24l3.17.905a5.714 5.714 0 0 1 3.924 3.925L158 32l.906-3.17a5.714 5.714 0 0 1 3.924-3.925m9.585 43.548L174 68l-1.585-.453a2.856 2.856 0 0 1-1.962-1.962L170 64l-.453 1.585a2.856 2.856 0 0 1-1.962 1.962L166 68l1.585.453a2.856 2.856 0 0 1 1.962 1.962L170 72l.453-1.585a2.856 2.856 0 0 1 1.962-1.962" fill="#FBBC04"/><g transform="translate(74 80)"><mask id="g" fill="#fff"><use xlink:href="#f"/></mask><path d="M9.623 6.68 12 6l-2.377-.68A4.284 4.284 0 0 1 6.68 2.378L6 0l-.68 2.377A4.284 4.284 0 0 1 2.379 5.32L0 6l2.378.68A4.283 4.283 0 0 1 5.32 9.623L6 12l.68-2.377A4.283 4.283 0 0 1 9.623 6.68" fill="#FBBC04" mask="url(#g)"/></g></g></svg>
\ No newline at end of file
diff --git a/chromium/chrome/browser/resources/extensions/detail_view.html b/chromium/chrome/browser/resources/extensions/detail_view.html
index 1132052a6e7..efe6c96423f 100644
--- a/chromium/chrome/browser/resources/extensions/detail_view.html
+++ b/chromium/chrome/browser/resources/extensions/detail_view.html
@@ -344,6 +344,7 @@
               if="[[showHostPermissionsToggleList_(data.*)]]">
             <extensions-host-permissions-toggle-list
                 permissions="[[data.permissions.runtimeHostPermissions]]"
+                enable-enhanced-site-controls="[[enableEnhancedSiteControls]]"
                 delegate="[[delegate]]"
                 item-id="[[data.id]]">
             </extensions-host-permissions-toggle-list>
diff --git a/chromium/chrome/browser/resources/extensions/detail_view.ts b/chromium/chrome/browser/resources/extensions/detail_view.ts
index c8c22140f52..f3177fa15a7 100644
--- a/chromium/chrome/browser/resources/extensions/detail_view.ts
+++ b/chromium/chrome/browser/resources/extensions/detail_view.ts
@@ -19,8 +19,8 @@ import 'chrome://resources/polymer/v3_0/paper-spinner/paper-spinner-lite.js';
 import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
 import './host_permissions_toggle_list.js';
 import './runtime_host_permissions.js';
-import './shared_style.js';
-import './shared_vars.js';
+import './shared_style.css.js';
+import './shared_vars.css.js';
 import './strings.m.js';
 import './toggle_row.js';
 
@@ -30,8 +30,8 @@ import {CrTooltipIconElement} from 'chrome://resources/cr_elements/policy/cr_too
 import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {afterNextRender, DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {getTemplate} from './detail_view.html.js';
 
+import {getTemplate} from './detail_view.html.js';
 import {ItemDelegate} from './item.js';
 import {ItemMixin} from './item_mixin.js';
 import {computeInspectableViewLabel, EnableControl, getEnableControl, getItemSource, getItemSourceString, isEnabled, userCanChangeEnablement} from './item_util.js';
diff --git a/chromium/chrome/browser/resources/extensions/error_page.ts b/chromium/chrome/browser/resources/extensions/error_page.ts
index a88d4070a8a..80be32d53f9 100644
--- a/chromium/chrome/browser/resources/extensions/error_page.ts
+++ b/chromium/chrome/browser/resources/extensions/error_page.ts
@@ -12,7 +12,7 @@ import 'chrome://resources/polymer/v3_0/iron-collapse/iron-collapse.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
 import './code_section.js';
-import './shared_style.js';
+import './shared_style.css.js';
 
 import {CrContainerShadowMixin} from 'chrome://resources/cr_elements/cr_container_shadow_mixin.js';
 import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
@@ -20,8 +20,8 @@ import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_man
 import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {afterNextRender, DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {getTemplate} from './error_page.html.js';
 
+import {getTemplate} from './error_page.html.js';
 import {navigation, Page} from './navigation_helper.js';
 
 type ManifestError = chrome.developerPrivate.ManifestError;
@@ -50,7 +50,7 @@ function getRelativeUrl(
  * Given 3 strings, this function returns the correct one for the type of
  * error that |item| is.
  */
-function getErrorSeverityText_(
+function getErrorSeverityText(
     item: ManifestError|RuntimeError, log: string, warn: string,
     error: string): string {
   if (item.type === chrome.developerPrivate.ErrorType.RUNTIME) {
@@ -179,11 +179,11 @@ export class ExtensionsErrorPageElement extends ExtensionsErrorPageElementBase {
 
   private computeErrorIcon_(error: ManifestError|RuntimeError): string {
     // Do not i18n these strings, they're CSS classes.
-    return getErrorSeverityText_(error, 'info', 'warning', 'error');
+    return getErrorSeverityText(error, 'info', 'warning', 'error');
   }
 
   private computeErrorTypeLabel_(error: ManifestError|RuntimeError): string {
-    return getErrorSeverityText_(
+    return getErrorSeverityText(
         error, loadTimeData.getString('logLevel'),
         loadTimeData.getString('warnLevel'),
         loadTimeData.getString('errorLevel'));
diff --git a/chromium/chrome/browser/resources/extensions/extensions.gni b/chromium/chrome/browser/resources/extensions/extensions.gni
index 55cac1cc4c1..7bf06a2ad5e 100644
--- a/chromium/chrome/browser/resources/extensions/extensions.gni
+++ b/chromium/chrome/browser/resources/extensions/extensions.gni
@@ -42,6 +42,7 @@ web_component_files = [
   "options_dialog.ts",
   "pack_dialog.ts",
   "pack_dialog_alert.ts",
+  "restricted_sites_dialog.ts",
   "runtime_host_permissions.ts",
   "runtime_hosts_dialog.ts",
   "shortcut_input.ts",
@@ -65,16 +66,24 @@ foreach(f, web_component_files) {
   html_files += [ string_replace(f, ".ts", ".html") ]
 }
 
+icons_html_files = [ "icons.html" ]
+
 # Files that are generated by html_to_wrapper().
 html_wrapper_files = []
-foreach(f, html_files) {
+foreach(f, html_files + icons_html_files) {
   html_wrapper_files += [ f + ".ts" ]
 }
 
-ts_files = web_component_files + non_web_component_files
-
-css_wrapper_files = [
-  "icons.ts",
-  "shared_style.ts",
-  "shared_vars.ts",
+# Files that are passed as input to css_to_wrapper().
+css_files = [
+  "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/chrome/browser/resources/extensions/extensions.ts b/chromium/chrome/browser/resources/extensions/extensions.ts
index 9b25c3ec09e..9006e7dab0b 100644
--- a/chromium/chrome/browser/resources/extensions/extensions.ts
+++ b/chromium/chrome/browser/resources/extensions/extensions.ts
@@ -27,10 +27,10 @@ export {ExtensionsKioskDialogElement} from './kiosk_dialog.js';
 export {ExtensionsLoadErrorElement} from './load_error.js';
 export {ExtensionsManagerElement} from './manager.js';
 export {Dialog, navigation, NavigationHelper, Page, PageState} from './navigation_helper.js';
-export {OptionsDialogMaxHeight, OptionsDialogMinWidth} from './options_dialog.js';
-export {ExtensionsOptionsDialogElement} from './options_dialog.js';
+export {ExtensionsOptionsDialogElement, OptionsDialogMaxHeight, OptionsDialogMinWidth} from './options_dialog.js';
 export {ExtensionsPackDialogElement, PackDialogDelegate} from './pack_dialog.js';
 export {ExtensionsPackDialogAlertElement} from './pack_dialog_alert.js';
+export {ExtensionsRestrictedSitesDialogElement} from './restricted_sites_dialog.js';
 export {ExtensionsRuntimeHostPermissionsElement} from './runtime_host_permissions.js';
 export {ExtensionsRuntimeHostsDialogElement, getMatchingUserSpecifiedSites, getPatternFromSite} from './runtime_hosts_dialog.js';
 export {Service, ServiceInterface} from './service.js';
diff --git a/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.html b/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.html
index d39821f03ab..c09420b14a1 100644
--- a/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.html
+++ b/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.html
@@ -19,12 +19,26 @@
     min-height: var(--cr-section-min-height);
   }
 
+  .new-all-hosts-toggle-label {
+    color: var(--cr-primary-text-color);
+    margin-inline-start: var(--cr-section-indent-width);
+  }
+
+  .site-row {
+    display: flex;
+  }
+
+  .site-favicon {
+    margin-inline-end: calc(
+        var(--cr-section-padding) + var(--cr-icon-ripple-margin));
+  }
+
   .site-toggle {
     border-top: var(--cr-separator-line);
     margin-inline-start: var(--cr-section-indent-width);
   }
 </style>
-<div id="section-heading">
+<div id="section-heading" hidden$="[[enableEnhancedSiteControls]]">
   <span>$i18n{hostPermissionsDescription}</span>
   <a id="linkIconButton" aria-label="$i18n{learnMore}"
       href="$i18n{hostPermissionsLearnMoreLink}" target="_blank"
@@ -36,17 +50,39 @@
   <extensions-toggle-row checked="[[allowedOnAllHosts_(permissions.*)]]"
       id="allHostsToggle"
       on-change="onAllHostsToggleChanged_">
-    <span>$i18n{itemAllowOnFollowingSites}</span>
+    <span class="[[getAllHostsToggleLabelClass_(enableEnhancedSiteControls)]]">
+      $i18n{itemAllowOnFollowingSites}
+    </span>
+    <a id="linkIconButton" aria-label="$i18n{learnMore}"
+        href="$i18n{hostPermissionsLearnMoreLink}" target="_blank"
+        on-click="onLearnMoreClick_"
+        hidden$="[[!enableEnhancedSiteControls]]">
+      <iron-icon icon="cr:help-outline"></iron-icon>
+    </a>
   </extensions-toggle-row>
 </div>
+
 <template is="dom-repeat" items="[[getSortedHosts_(permissions.*)]]">
   <div class="toggle-section site-toggle">
-    <extensions-toggle-row checked="[[item.granted]]"
+    <extensions-toggle-row
+        checked="[[isItemChecked_(item, selectedHost_)]]"
         class="host-toggle no-end-padding"
         disabled="[[allowedOnAllHosts_(permissions.*)]]"
         host="[[item.host]]"
         on-change="onHostAccessChanged_">
-      <span>[[item.host]]</span>
+      <div class="site-row">
+        <div class="site-favicon"
+            style$="background-image:[[getFaviconUrl_(item.host)]]"
+            hidden$="[[!enableEnhancedSiteControls]]"></div>
+        <span>[[item.host]]</span>
+      </div>
     </extensions-toggle-row>
   </div>
 </template>
+
+<template is="dom-if" if="[[showMatchingRestrictedSitesDialog_]]" restamp>
+  <extensions-restricted-sites-dialog
+      first-restricted-site="[[matchingRestrictedSites_.0]]"
+      on-close="onMatchingRestrictedSitesDialogClose_">
+  </extensions-restricted-sites-dialog>
+</template>
diff --git a/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.ts b/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.ts
index 93307db47f0..cee4dae04d6 100644
--- a/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.ts
+++ b/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.ts
@@ -6,16 +6,22 @@ import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import './restricted_sites_dialog.js';
 import './toggle_row.js';
-import './shared_style.js';
+import './shared_style.css.js';
 import './strings.m.js';
 
+import {assert} from 'chrome://resources/js/assert_ts.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {getTemplate} from './host_permissions_toggle_list.html.js';
 
-import {ItemDelegate} from './item.js';
+import {getTemplate} from './host_permissions_toggle_list.html.js';
 import {UserAction} from './item_util.js';
+import {ExtensionsRestrictedSitesDialogElement} from './restricted_sites_dialog.js';
+import {getMatchingUserSpecifiedSites} from './runtime_hosts_dialog.js';
+import {SiteSettingsMixin} from './site_settings_mixin.js';
 import {ExtensionsToggleRowElement} from './toggle_row.js';
+import {getFaviconUrl} from './url_util.js';
+
 
 export interface ExtensionsHostPermissionsToggleListElement {
   $: {
@@ -24,7 +30,11 @@ export interface ExtensionsHostPermissionsToggleListElement {
   };
 }
 
-export class ExtensionsHostPermissionsToggleListElement extends PolymerElement {
+const ExtensionsHostPermissionsToggleListElementBase =
+    SiteSettingsMixin(PolymerElement);
+
+export class ExtensionsHostPermissionsToggleListElement extends
+    ExtensionsHostPermissionsToggleListElementBase {
   static get is() {
     return 'extensions-host-permissions-toggle-list';
   }
@@ -42,13 +52,37 @@ export class ExtensionsHostPermissionsToggleListElement extends PolymerElement {
 
       itemId: String,
 
-      delegate: Object,
+      /**
+       * This is set as the host the user is trying to toggle on/grant host
+       * permissions for, if the host matches one or more user specified
+       * restricted sites.
+       */
+      selectedHost_: {
+        type: String,
+        value: '',
+      },
+
+      // The list of restricted sites that match a host the user is toggling on.
+      matchingRestrictedSites_: Array,
+
+      showMatchingRestrictedSitesDialog_: {
+        type: Boolean,
+        value: false,
+      },
     };
   }
 
   permissions: chrome.developerPrivate.RuntimeHostPermissions;
   itemId: string;
-  delegate: ItemDelegate;
+  private selectedHost_: string;
+  private matchingRestrictedSites_: string[];
+  private showMatchingRestrictedSitesDialog_: boolean;
+
+  getRestrictedSitesDialog(): ExtensionsRestrictedSitesDialogElement|null {
+    return this.shadowRoot!
+        .querySelector<ExtensionsRestrictedSitesDialogElement>(
+            'extensions-restricted-sites-dialog');
+  }
 
   /**
    * @return Whether the item is allowed to execute on all of its requested
@@ -100,18 +134,69 @@ export class ExtensionsHostPermissionsToggleListElement extends PolymerElement {
     const host = (e.target as unknown as {host: string}).host;
     const checked = (e.target as ExtensionsToggleRowElement).checked;
 
-    if (checked) {
-      this.delegate.addRuntimeHostPermission(this.itemId, host);
-      this.delegate.recordUserAction(UserAction.SPECIFIC_TOGGLED_ON);
-    } else {
+    if (!checked) {
       this.delegate.removeRuntimeHostPermission(this.itemId, host);
       this.delegate.recordUserAction(UserAction.SPECIFIC_TOGGLED_OFF);
+      return;
     }
+
+    // If the user is about to toggle on `host`, show a dialog if there are
+    // matching user specified restricted sites instead of granting `host`
+    // right away.
+    this.delegate.recordUserAction(UserAction.SPECIFIC_TOGGLED_ON);
+    const matchingRestrictedSites =
+        getMatchingUserSpecifiedSites(this.restrictedSites, host);
+    if (matchingRestrictedSites.length) {
+      this.selectedHost_ = host;
+      this.matchingRestrictedSites_ = matchingRestrictedSites;
+      this.showMatchingRestrictedSitesDialog_ = true;
+      // Flow continues in onRestrictedSitesDialogClose_.
+      return;
+    }
+
+    this.delegate.addRuntimeHostPermission(this.itemId, host);
+  }
+
+  private isItemChecked_(item: chrome.developerPrivate.SiteControl): boolean {
+    return item.granted || this.selectedHost_ === item.host;
+  }
+
+  private getAllHostsToggleLabelClass_(): string {
+    return this.enableEnhancedSiteControls ? 'new-all-hosts-toggle-label' : '';
   }
 
   private onLearnMoreClick_() {
     this.delegate.recordUserAction(UserAction.LEARN_MORE);
   }
+
+  private getFaviconUrl_(url: string): string {
+    return getFaviconUrl(url);
+  }
+
+  private unselectHost_() {
+    this.showMatchingRestrictedSitesDialog_ = false;
+    this.selectedHost_ = '';
+    this.matchingRestrictedSites_ = [];
+  }
+
+  private onMatchingRestrictedSitesDialogClose_() {
+    const dialog = this.getRestrictedSitesDialog();
+    assert(dialog);
+    if (dialog.wasConfirmed()) {
+      assert(this.matchingRestrictedSites_.length);
+      this.delegate.addRuntimeHostPermission(this.itemId, this.selectedHost_)
+          .then(() => {
+            this.delegate.removeUserSpecifiedSites(
+                chrome.developerPrivate.UserSiteSet.RESTRICTED,
+                this.matchingRestrictedSites_);
+          })
+          .finally(() => {
+            this.unselectHost_();
+          });
+    } else {
+      this.unselectHost_();
+    }
+  }
 }
 
 declare global {
diff --git a/chromium/chrome/browser/resources/extensions/icons.ts b/chromium/chrome/browser/resources/extensions/icons.ts
deleted file mode 100644
index bfa10def2fc..00000000000
--- a/chromium/chrome/browser/resources/extensions/icons.ts
+++ /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 'chrome://resources/polymer/v3_0/iron-iconset-svg/iron-iconset-svg.js';
-import {html} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-const template = html`{__html_template__}`;
-document.head.appendChild(template.content);
diff --git a/chromium/chrome/browser/resources/extensions/item.ts b/chromium/chrome/browser/resources/extensions/item.ts
index a31b564d78a..f6d5f0fa012 100644
--- a/chromium/chrome/browser/resources/extensions/item.ts
+++ b/chromium/chrome/browser/resources/extensions/item.ts
@@ -12,9 +12,9 @@ import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/js/action_link.js';
 import 'chrome://resources/cr_elements/action_link_css.m.js';
-import './icons.js';
-import './shared_style.js';
-import './shared_vars.js';
+import './icons.html.js';
+import './shared_style.css.js';
+import './shared_vars.css.js';
 import './strings.m.js';
 import 'chrome://resources/polymer/v3_0/iron-flex-layout/iron-flex-layout-classes.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
@@ -25,8 +25,8 @@ import {CrToggleElement} from 'chrome://resources/cr_elements/cr_toggle/cr_toggl
 import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
 import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {flush, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {getTemplate} from './item.html.js';
 
+import {getTemplate} from './item.html.js';
 import {ItemMixin} from './item_mixin.js';
 import {computeInspectableViewLabel, EnableControl, getEnableControl, getItemSource, getItemSourceString, isEnabled, SourceType, userCanChangeEnablement} from './item_util.js';
 import {navigation, Page} from './navigation_helper.js';
diff --git a/chromium/chrome/browser/resources/extensions/item_list.ts b/chromium/chrome/browser/resources/extensions/item_list.ts
index da86db23349..c02caf2bbc1 100644
--- a/chromium/chrome/browser/resources/extensions/item_list.ts
+++ b/chromium/chrome/browser/resources/extensions/item_list.ts
@@ -4,7 +4,7 @@
 
 import 'chrome://resources/cr_components/managed_footnote/managed_footnote.js';
 import './item.js';
-import './shared_style.js';
+import './shared_style.css.js';
 
 import {CrContainerShadowMixin} from 'chrome://resources/cr_elements/cr_container_shadow_mixin.js';
 import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
diff --git a/chromium/chrome/browser/resources/extensions/item_util.ts b/chromium/chrome/browser/resources/extensions/item_util.ts
index 9b42cb63049..f5172175caf 100644
--- a/chromium/chrome/browser/resources/extensions/item_util.ts
+++ b/chromium/chrome/browser/resources/extensions/item_util.ts
@@ -151,7 +151,7 @@ export function computeInspectableViewLabel(
 /**
  * @return Whether the extension is in the terminated state.
  */
-function isTerminated_(state: chrome.developerPrivate.ExtensionState): boolean {
+function isTerminated(state: chrome.developerPrivate.ExtensionState): boolean {
   return state === chrome.developerPrivate.ExtensionState.TERMINATED;
 }
 
@@ -160,7 +160,7 @@ function isTerminated_(state: chrome.developerPrivate.ExtensionState): boolean {
  */
 export function getEnableControl(data: chrome.developerPrivate.ExtensionInfo):
     EnableControl {
-  if (isTerminated_(data.state)) {
+  if (isTerminated(data.state)) {
     return EnableControl.RELOAD;
   }
   if (data.disableReasons.corruptInstall && data.userMayModify) {
diff --git a/chromium/chrome/browser/resources/extensions/pack_dialog.html b/chromium/chrome/browser/resources/extensions/pack_dialog.html
index b2543078720..f61b394af00 100644
--- a/chromium/chrome/browser/resources/extensions/pack_dialog.html
+++ b/chromium/chrome/browser/resources/extensions/pack_dialog.html
@@ -18,7 +18,7 @@
   <div slot="body">
     <div>$i18n{packDialogContent}</div>
     <cr-input id="rootDir" label="$i18n{packDialogExtensionRoot}"
-        value="{{packDirectory_}}">
+        value="{{packDirectory_}}" autofocus>
       <cr-button id="rootDirBrowse" on-click="onRootBrowse_"
           slot="suffix">
         $i18n{packDialogBrowse}
diff --git a/chromium/chrome/browser/resources/extensions/restricted_sites_dialog.html b/chromium/chrome/browser/resources/extensions/restricted_sites_dialog.html
new file mode 100644
index 00000000000..d5b42857f26
--- /dev/null
+++ b/chromium/chrome/browser/resources/extensions/restricted_sites_dialog.html
@@ -0,0 +1,16 @@
+<style include="cr-shared-style shared-style"></style>
+<cr-dialog id="dialog" show-on-attach>
+  <div slot="title">[[getDialogTitle_(firstRestrictedSite)]]</div>
+  <div class="matching-restricted-sites-warning" slot="body">
+    <iron-icon icon="cr:info-outline"></iron-icon>
+    <span>[[getDialogWarning_(firstRestrictedSite)]]</span>
+  </div>
+  <div slot="button-container">
+    <cr-button class="cancel-button" on-click="onCancelClick_">
+      $i18n{cancel}
+    </cr-button>
+    <cr-button class="action-button" on-click="onSubmitClick_">
+      $i18n{matchingRestrictedSitesAllow}
+    </cr-button>
+  </div>
+</cr-dialog>
diff --git a/chromium/chrome/browser/resources/extensions/restricted_sites_dialog.ts b/chromium/chrome/browser/resources/extensions/restricted_sites_dialog.ts
new file mode 100644
index 00000000000..fc8d8eba4d0
--- /dev/null
+++ b/chromium/chrome/browser/resources/extensions/restricted_sites_dialog.ts
@@ -0,0 +1,80 @@
+// 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 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
+import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import './strings.m.js';
+import './shared_style.css.js';
+
+import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.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 {getTemplate} from './restricted_sites_dialog.html.js';
+
+export interface ExtensionsRestrictedSitesDialogElement {
+  $: {
+    dialog: CrDialogElement,
+  };
+}
+
+const ExtensionsRestrictedSitesDialogElementBase = I18nMixin(PolymerElement);
+
+export class ExtensionsRestrictedSitesDialogElement extends
+    ExtensionsRestrictedSitesDialogElementBase {
+  static get is() {
+    return 'extensions-restricted-sites-dialog';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      firstRestrictedSite: {type: String, value: ''},
+    };
+  }
+
+  firstRestrictedSite: string;
+
+  isOpen(): boolean {
+    return this.$.dialog.open;
+  }
+
+  wasConfirmed(): boolean {
+    return this.$.dialog.getNative().returnValue === 'success';
+  }
+
+  private onCancelClick_() {
+    this.$.dialog.cancel();
+  }
+
+  private onSubmitClick_() {
+    this.$.dialog.close();
+  }
+
+  private getDialogTitle_(): string {
+    return this.i18n('matchingRestrictedSitesTitle', this.firstRestrictedSite);
+  }
+
+  private getDialogWarning_(): string {
+    return this.i18n(
+        'matchingRestrictedSitesWarning', this.firstRestrictedSite);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'extensions-restricted-sites-dialog':
+        ExtensionsRestrictedSitesDialogElement;
+  }
+}
+
+customElements.define(
+    ExtensionsRestrictedSitesDialogElement.is,
+    ExtensionsRestrictedSitesDialogElement);
diff --git a/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts b/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts
index 150d0913efa..91018418dad 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts
+++ b/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts
@@ -16,7 +16,7 @@ import 'chrome://resources/cr_elements/action_link_css.m.js';
 import 'chrome://resources/cr_elements/md_select_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './runtime_hosts_dialog.js';
-import './shared_style.js';
+import './shared_style.css.js';
 import './strings.m.js';
 
 import {CrActionMenuElement} from 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';
diff --git a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html
index 282283687d6..973d484f8f8 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html
+++ b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html
@@ -1,17 +1,4 @@
-<style include="cr-shared-style cr-icons shared-vars">
-  iron-icon {
-    fill: var(--warning-color);
-    margin-inline-end: 8px;
-    min-height: var(--cr-icon-size);
-    min-width: var(--cr-icon-size);
-  }
-
-  #matching-restricted-sites-warning {
-    align-items: flex-start;
-    display: flex;
-    flex-direction: row;
-  }
-</style>
+<style include="cr-shared-style cr-icons shared-style"></style>
 <cr-dialog id="dialog" close-text="$i18n{close}">
   <div slot="title">[[computeDialogTitle_(currentSite)]]</div>
   <div slot="body">
@@ -23,7 +10,7 @@
         spellcheck="false"
         autofocus>
     </cr-input>
-    <div id="matching-restricted-sites-warning"
+    <div class="matching-restricted-sites-warning"
         hidden="[[!matchingRestrictedSites_.length]]">
       <iron-icon icon="cr:info-outline"></iron-icon>
       <span>[[computeMatchingRestrictedSitesWarning_(site_)]]</span>
diff --git a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts
index 582bf45c682..92310971fc2 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts
@@ -9,7 +9,7 @@ import 'chrome://resources/cr_elements/icons.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './strings.m.js';
-import './shared_vars.js';
+import './shared_vars.css.js';
 
 import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
diff --git a/chromium/chrome/browser/resources/extensions/shared_style.css b/chromium/chrome/browser/resources/extensions/shared_style.css
new file mode 100644
index 00000000000..1bbd2fcc426
--- /dev/null
+++ b/chromium/chrome/browser/resources/extensions/shared_style.css
@@ -0,0 +1,108 @@
+/* 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_style_css.m.js
+ * #import=chrome://resources/cr_elements/shared_vars_css.m.js
+ * #import=./shared_vars.css.js
+ * #include=cr-shared-style
+ * #css_wrapper_metadata_end */
+
+a[href] {
+  color: var(--cr-link-color);
+  text-decoration: none;
+}
+
+.activity-message {
+  color: var(--md-loading-message-color);
+  font-size: 123%;  /* Should be 16px when 100% is 13px. */
+  font-weight: 500;
+  margin-top: 80px;
+  text-align: center;
+}
+
+.activity-subpage-header {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 12px;
+}
+
+.activity-table-headings {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  font-weight: 500;
+  margin-inline-end: auto;
+
+  /* Match separator height. */
+  min-height: calc(var(--cr-section-min-height) - var(--separator-gap));
+  padding: 0 var(--cr-section-padding);
+}
+
+.clear-activities-button {
+  margin: 0 8px;
+}
+
+.matching-restricted-sites-warning {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+}
+
+.matching-restricted-sites-warning iron-icon {
+  fill: var(--warning-color);
+  margin-inline-end: 8px;
+  min-height: var(--cr-icon-size);
+  min-width: var(--cr-icon-size);
+}
+
+.page-container {
+  height: 100%;
+  overflow: overlay;
+}
+
+.page-content {
+  background-color: var(--cr-card-background-color);
+  box-shadow: var(--cr-card-shadow);
+  box-sizing: border-box;
+  margin: auto;
+  min-height: 100%;
+  padding-bottom: 64px;
+  width: var(--cr-toolbar-field-width);
+}
+
+.page-header {
+  align-items: center;
+  display: flex;
+  height: 40px;
+  margin-bottom: 12px;
+  padding: 8px 12px 0;
+}
+
+.link-icon-button {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
+.separator {
+  border-inline-start: var(--cr-separator-line);
+  flex-shrink: 0;
+
+  /* Section height - gap. */
+  height: calc(var(--cr-section-min-height) - var(--separator-gap));
+  margin-inline-end: var(--cr-section-padding);
+
+  /* Makes the tappable area fill its parent.
+   * TODO(crbug.com/949697): This is an explicit reminder to override
+   * once .separator styling is extracted from settings. */
+  margin-inline-start: 0;
+}
+
+.site-favicon {
+  background-size: 100% 100%;
+  height: var(--cr-icon-size);
+  min-width: var(--cr-icon-size);
+}
diff --git a/chromium/chrome/browser/resources/extensions/shared_style.html b/chromium/chrome/browser/resources/extensions/shared_style.html
deleted file mode 100644
index 21937675960..00000000000
--- a/chromium/chrome/browser/resources/extensions/shared_style.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <style include="cr-shared-style">
-    a[href] {
-      color: var(--cr-link-color);
-      text-decoration: none;
-    }
-
-    .activity-message {
-      color: var(--md-loading-message-color);
-      font-size: 123%;  /* Should be 16px when 100% is 13px. */
-      font-weight: 500;
-      margin-top: 80px;
-      text-align: center;
-    }
-
-    .activity-subpage-header {
-      display: flex;
-      justify-content: flex-end;
-      padding: 12px 12px;
-    }
-
-    .activity-table-headings {
-      align-items: center;
-      display: flex;
-      flex-direction: row;
-      font-weight: 500;
-      margin-inline-end: auto;
-
-      /* Match separator height. */
-      min-height: calc(var(--cr-section-min-height) - var(--separator-gap));
-      padding: 0 var(--cr-section-padding);
-    }
-
-    .clear-activities-button {
-      margin: 0 8px;
-    }
-
-    .page-container {
-      height: 100%;
-      overflow: overlay;
-    }
-
-    .page-content {
-      background-color: var(--cr-card-background-color);
-      box-shadow: var(--cr-card-shadow);
-      box-sizing: border-box;
-      margin: auto;
-      min-height: 100%;
-      padding-bottom: 64px;
-      width: var(--cr-toolbar-field-width);
-    }
-
-    .page-header {
-      align-items: center;
-      display: flex;
-      height: 40px;
-      margin-bottom: 12px;
-      padding: 8px 12px 0;
-    }
-
-    .link-icon-button {
-      align-items: center;
-      display: flex;
-      justify-content: center;
-    }
-
-    .separator {
-      border-inline-start: var(--cr-separator-line);
-      flex-shrink: 0;
-
-      /* Section height - gap. */
-      height: calc(var(--cr-section-min-height) - var(--separator-gap));
-      margin-inline-end: var(--cr-section-padding);
-
-      /* Makes the tappable area fill its parent.
-       * TODO(crbug.com/949697): This is an explicit reminder to override
-       * once .separator styling is extracted from settings. */
-      margin-inline-start: 0;
-    }
-
-    .site-favicon {
-      background-size: 100% 100%;
-      height: var(--cr-icon-size);
-      min-width: var(--cr-icon-size);
-    }
-  </style>
-</template>
diff --git a/chromium/chrome/browser/resources/extensions/shared_style.ts b/chromium/chrome/browser/resources/extensions/shared_style.ts
deleted file mode 100644
index 3b6d04fc5e9..00000000000
--- a/chromium/chrome/browser/resources/extensions/shared_style.ts
+++ /dev/null
@@ -1,12 +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 'chrome://resources/cr_elements/shared_vars_css.m.js';
-import './shared_vars.js';
-
-const template = document.createElement('template');
-template.innerHTML = `
-<dom-module id="shared-style">{__html_template__}</dom-module>
-`;
-document.body.appendChild(template.content.cloneNode(true));
diff --git a/chromium/chrome/browser/resources/extensions/shared_vars.css b/chromium/chrome/browser/resources/extensions/shared_vars.css
new file mode 100644
index 00000000000..eaa0e1f4448
--- /dev/null
+++ b/chromium/chrome/browser/resources/extensions/shared_vars.css
@@ -0,0 +1,26 @@
+/* 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=chrome://resources/cr_elements/shared_vars_css.m.js
+ * #import=chrome://resources/polymer/v3_0/paper-styles/color.js
+ * #css_wrapper_metadata_end */
+
+html {
+  /* Note: error-color is used for many warnings. There's also an orange-y
+   * warning color in 1 place. */
+  --error-color: var(--google-red-700);
+  /* Copied from 'ui/gfx/color_palette.h' kGoogleYellow700 (#f29900) */
+  --warning-color: rgb(242, 153, 0);
+  --extensions-card-height: 160px;
+  --separator-gap: 9px;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --error-color: var(--google-red-300);
+    --warning-color: var(--google-yellow-300);
+  }
+}
diff --git a/chromium/chrome/browser/resources/extensions/shared_vars.html b/chromium/chrome/browser/resources/extensions/shared_vars.html
deleted file mode 100644
index 37d111727c7..00000000000
--- a/chromium/chrome/browser/resources/extensions/shared_vars.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<custom-style>
-<style>
-  html {
-    /* Note: error-color is used for many warnings. There's also an orange-y
-     * warning color in 1 place. */
-    --error-color: var(--google-red-700);
-    /* Copied from 'ui/gfx/color_palette.h' kGoogleYellow700 (#f29900) */
-    --warning-color: rgb(242, 153, 0);
-    --extensions-card-height: 160px;
-    --separator-gap: 9px;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    html {
-      --error-color: var(--google-red-300);
-      --warning-color: var(--google-yellow-300);
-    }
-  }
-</style>
-</custom-style>
diff --git a/chromium/chrome/browser/resources/extensions/shared_vars.ts b/chromium/chrome/browser/resources/extensions/shared_vars.ts
deleted file mode 100644
index 6823790708f..00000000000
--- a/chromium/chrome/browser/resources/extensions/shared_vars.ts
+++ /dev/null
@@ -1,11 +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 'chrome://resources/cr_elements/shared_vars_css.m.js';
-import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
-import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-
-const $_documentContainer = document.createElement('template');
-$_documentContainer.innerHTML = `{__html_template__}`;
-document.head.appendChild($_documentContainer.content);
diff --git a/chromium/chrome/browser/resources/extensions/shortcut_input.ts b/chromium/chrome/browser/resources/extensions/shortcut_input.ts
index e51bc19aa1f..51e23987818 100644
--- a/chromium/chrome/browser/resources/extensions/shortcut_input.ts
+++ b/chromium/chrome/browser/resources/extensions/shortcut_input.ts
@@ -147,7 +147,7 @@ export class ExtensionsShortcutInputElement extends
       return;
     }
 
-    if (e.keyCode === Key.Escape) {
+    if (e.keyCode === Key.ESCAPE) {
       if (!this.capturing_) {
         // If we're not currently capturing, allow escape to propagate.
         return;
@@ -158,7 +158,7 @@ export class ExtensionsShortcutInputElement extends
       e.stopPropagation();
       return;
     }
-    if (e.keyCode === Key.Tab) {
+    if (e.keyCode === Key.TAB) {
       // Allow tab propagation for keyboard navigation.
       return;
     }
@@ -183,7 +183,7 @@ export class ExtensionsShortcutInputElement extends
       return;
     }
 
-    if (e.keyCode === Key.Escape || e.keyCode === Key.Tab) {
+    if (e.keyCode === Key.ESCAPE || e.keyCode === Key.TAB) {
       return;
     }
 
diff --git a/chromium/chrome/browser/resources/extensions/shortcut_util.ts b/chromium/chrome/browser/resources/extensions/shortcut_util.ts
index c761f9358d7..ec52f41d517 100644
--- a/chromium/chrome/browser/resources/extensions/shortcut_util.ts
+++ b/chromium/chrome/browser/resources/extensions/shortcut_util.ts
@@ -7,25 +7,25 @@ import {isChromeOS, isMac} from 'chrome://resources/js/cr.m.js';
 
 
 export enum Key {
-  Comma = 188,
-  Del = 46,
-  Down = 40,
-  End = 35,
-  Escape = 27,
-  Home = 36,
-  Ins = 45,
-  Left = 37,
-  MediaNextTrack = 176,
-  MediaPlayPause = 179,
-  MediaPrevTrack = 177,
-  MediaStop = 178,
-  PageDown = 34,
-  PageUp = 33,
-  Period = 190,
-  Right = 39,
-  Space = 32,
-  Tab = 9,
-  Up = 38,
+  COMMA = 188,
+  DEL = 46,
+  DOWN = 40,
+  END = 35,
+  ESCAPE = 27,
+  HOME = 36,
+  INS = 45,
+  LEFT = 37,
+  MEDIA_NEXT_TRACK = 176,
+  MEDIA_PLAY_PAUSE = 179,
+  MEDIA_PREV_TRACK = 177,
+  MEDIA_STOP = 178,
+  PAGE_DOWN = 34,
+  PAGE_UP = 33,
+  PERIOD = 190,
+  RIGHT = 39,
+  SPACE = 32,
+  TAB = 9,
+  UP = 38,
 }
 
 /**
@@ -42,10 +42,10 @@ enum ModifierPolicy {
  */
 function getModifierPolicy(keyCode: number): ModifierPolicy {
   switch (keyCode) {
-    case Key.MediaNextTrack:
-    case Key.MediaPlayPause:
-    case Key.MediaPrevTrack:
-    case Key.MediaStop:
+    case Key.MEDIA_NEXT_TRACK:
+    case Key.MEDIA_PLAY_PAUSE:
+    case Key.MEDIA_PREV_TRACK:
+    case Key.MEDIA_STOP:
       return ModifierPolicy.NOT_ALLOWED;
     default:
       return ModifierPolicy.REQUIRED;
@@ -72,7 +72,7 @@ function hasModifier(e: KeyboardEvent, countShiftAsModifier: boolean): boolean {
  * @return Whether the key is valid.
  */
 export function isValidKeyCode(keyCode: number): boolean {
-  if (keyCode === Key.Escape) {
+  if (keyCode === Key.ESCAPE) {
     return false;
   }
   for (const k in Key) {
@@ -114,58 +114,58 @@ export function keystrokeToString(e: KeyboardEvent): string {
       output.push(String.fromCharCode(keyCode));
     } else {
       switch (keyCode) {
-        case Key.Comma:
+        case Key.COMMA:
           output.push('Comma');
           break;
-        case Key.Del:
+        case Key.DEL:
           output.push('Delete');
           break;
-        case Key.Down:
+        case Key.DOWN:
           output.push('Down');
           break;
-        case Key.End:
+        case Key.END:
           output.push('End');
           break;
-        case Key.Home:
+        case Key.HOME:
           output.push('Home');
           break;
-        case Key.Ins:
+        case Key.INS:
           output.push('Insert');
           break;
-        case Key.Left:
+        case Key.LEFT:
           output.push('Left');
           break;
-        case Key.MediaNextTrack:
+        case Key.MEDIA_NEXT_TRACK:
           output.push('MediaNextTrack');
           break;
-        case Key.MediaPlayPause:
+        case Key.MEDIA_PLAY_PAUSE:
           output.push('MediaPlayPause');
           break;
-        case Key.MediaPrevTrack:
+        case Key.MEDIA_PREV_TRACK:
           output.push('MediaPrevTrack');
           break;
-        case Key.MediaStop:
+        case Key.MEDIA_STOP:
           output.push('MediaStop');
           break;
-        case Key.PageDown:
+        case Key.PAGE_DOWN:
           output.push('PageDown');
           break;
-        case Key.PageUp:
+        case Key.PAGE_UP:
           output.push('PageUp');
           break;
-        case Key.Period:
+        case Key.PERIOD:
           output.push('Period');
           break;
-        case Key.Right:
+        case Key.RIGHT:
           output.push('Right');
           break;
-        case Key.Space:
+        case Key.SPACE:
           output.push('Space');
           break;
-        case Key.Tab:
+        case Key.TAB:
           output.push('Tab');
           break;
-        case Key.Up:
+        case Key.UP:
           output.push('Up');
           break;
       }
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions.ts b/chromium/chrome/browser/resources/extensions/site_permissions.ts
index c33379c5ca0..4b1912e0a6e 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions.ts
@@ -6,8 +6,8 @@ import 'chrome://resources/cr_elements/cr_link_row/cr_link_row.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import './strings.m.js';
-import './shared_style.js';
-import './shared_vars.js';
+import './shared_style.css.js';
+import './shared_vars.css.js';
 import './site_permissions_list.js';
 
 import {CrLinkRowElement} from 'chrome://resources/cr_elements/cr_link_row/cr_link_row.js';
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_by_site.ts b/chromium/chrome/browser/resources/extensions/site_permissions_by_site.ts
index 97685479257..f1facf3717f 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_by_site.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_by_site.ts
@@ -4,7 +4,7 @@
 
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
-import './shared_style.js';
+import './shared_style.css.js';
 
 import {CrIconButtonElement} from 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_list.ts b/chromium/chrome/browser/resources/extensions/site_permissions_list.ts
index 59abd88d092..04bf4128a1d 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_list.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_list.ts
@@ -8,8 +8,8 @@ import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import './strings.m.js';
-import './shared_style.js';
-import './shared_vars.js';
+import './shared_style.css.js';
+import './shared_vars.css.js';
 import './site_permissions_edit_permissions_dialog.js';
 import './site_permissions_edit_url_dialog.js';