BASELINE: Update Chromium to 102.0.5005.57

Change-Id: I885f714bb40ee724c28f94ca6bd8dbdb39915158 Reviewed-by: Allan Sandfeld Jensen <allan.jensen@qt.io>
author: Allan Sandfeld Jensen <allan.jensen@qt.io> 2022-05-17 17:24:03 +0200
committer: Allan Sandfeld Jensen <allan.jensen@qt.io> 2022-06-22 07:51:41 +0000
commit: 774f54339e5db91f785733232d3950366db65d07 (patch)
tree: 068e1b47bd1af94d77094ed12b604a6b83d9c22a /chromium/chrome/browser/resources/extensions
parent: f7eaed5286974984ba5f9e3189d8f49d03e99f81 (diff)
50 files changed, 752 insertions, 288 deletions
diff --git a/chromium/chrome/browser/resources/extensions/.eslintrc.js b/chromium/chrome/browser/resources/extensions/.eslintrc.js
deleted file mode 100644
index 0b691a4dcc5..00000000000
--- a/chromium/chrome/browser/resources/extensions/.eslintrc.js
+++ /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.
-
-module.exports = {
-  'env': {
-    'browser': true,
-    'es6': true,
-  },
-  'rules': {'eqeqeq': ['error', 'always', {'null': 'ignore'}]},
-};
diff --git a/chromium/chrome/browser/resources/extensions/BUILD.gn b/chromium/chrome/browser/resources/extensions/BUILD.gn
index aa59bce7b2f..ed35295923a 100644
--- a/chromium/chrome/browser/resources/extensions/BUILD.gn
+++ b/chromium/chrome/browser/resources/extensions/BUILD.gn
@@ -8,6 +8,7 @@ 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/html_to_wrapper.gni")
 import("//tools/typescript/ts_library.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
 import("../tools/optimize_webui.gni")
@@ -54,18 +55,25 @@ generate_grd("build_grd") {
 preprocess_if_expr("preprocess") {
   in_folder = "."
   out_folder = "$target_gen_dir/$preprocess_folder"
-  in_files = non_web_component_files
+  in_files = ts_files
 }
 
 preprocess_if_expr("preprocess_generated") {
-  public_deps = [ ":web_components" ]
+  public_deps = [
+    ":css_wrapper_files",
+    ":html_wrapper_files",
+  ]
   in_folder = target_gen_dir
   out_folder = "$target_gen_dir/$preprocess_folder"
-  in_files = web_component_files
+  in_files = html_wrapper_files + css_wrapper_files
+}
+
+html_to_js("css_wrapper_files") {
+  js_files = css_wrapper_files
 }
 
-html_to_js("web_components") {
-  js_files = web_component_files
+html_to_wrapper("html_wrapper_files") {
+  in_files = html_files
 }
 
 grit("resources") {
@@ -90,7 +98,7 @@ ts_library("build_ts") {
   out_dir = "$target_gen_dir/tsc"
   composite = true
   tsconfig_base = "tsconfig_base.json"
-  in_files = web_component_files + non_web_component_files
+  in_files = ts_files + css_wrapper_files + html_wrapper_files
   definitions = [
     "//tools/typescript/definitions/activity_log_private.d.ts",
     "//tools/typescript/definitions/chrome_event.d.ts",
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 ca110ee3d06..8e2e9f1ffc9 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log.ts
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log.ts
@@ -18,10 +18,11 @@ import {CrContainerShadowMixin} from 'chrome://resources/cr_elements/cr_containe
 import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js';
 import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
-import {afterNextRender, html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {afterNextRender, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {navigation, Page} from '../navigation_helper.js';
 
+import {getTemplate} from './activity_log.html.js';
 import {ActivityLogDelegate} from './activity_log_history.js';
 
 /**
@@ -45,7 +46,7 @@ const enum ActivityLogSubpage {
 export type ActivityLogExtensionPlaceholder = {
   id: string,
   isPlaceholder: boolean,
-}
+};
 
 export interface ExtensionsActivityLogElement {
   $: {
@@ -63,7 +64,7 @@ export class ExtensionsActivityLogElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -97,7 +98,7 @@ export class ExtensionsActivityLogElement extends
   selectedSubpage_: ActivityLogSubpage;
   private tabNames_: string[];
 
-  ready() {
+  override ready() {
     super.ready();
     this.addEventListener('view-enter-start', this.onViewEnterStart_);
     this.addEventListener('view-exit-finish', this.onViewExitFinish_);
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 3108d1f7786..a25dcca5438 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
@@ -9,9 +9,10 @@ import 'chrome://resources/cr_elements/cr_search_field/cr_search_field.js';
 import '../shared_style.js';
 import './activity_log_history_item.js';
 
-import {assert} from 'chrome://resources/js/assert.m.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
 import {PromiseResolver} from 'chrome://resources/js/promise_resolver.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 './activity_log_history.html.js';
 
 import {ActivityGroup} from './activity_log_history_item.js';
 
@@ -174,7 +175,7 @@ export class ActivityLogHistoryElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -230,7 +231,7 @@ export class ActivityLogHistoryElement extends PolymerElement {
     this.rawActivities_ = '';
   }
 
-  ready() {
+  override ready() {
     super.ready();
     this.addEventListener('delete-activity-log-item', e => this.deleteItem_(e));
   }
@@ -246,7 +247,7 @@ export class ActivityLogHistoryElement extends PolymerElement {
     return this.dataFetchedResolver_!.promise;
   }
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
     this.dataFetchedResolver_ = new PromiseResolver();
     this.refreshActivities_();
@@ -273,8 +274,9 @@ export class ActivityLogHistoryElement extends PolymerElement {
   }
 
   private onMoreActionsClick_() {
-    this.shadowRoot!.querySelector('cr-action-menu')!.showAt(
-        assert(this.shadowRoot!.querySelector('cr-icon-button')!));
+    const moreButton = this.shadowRoot!.querySelector('cr-icon-button');
+    assert(moreButton);
+    this.shadowRoot!.querySelector('cr-action-menu')!.showAt(moreButton);
   }
 
   private expandItems_(expanded: boolean) {
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 2f5688b34fb..ac4576eaa65 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
@@ -9,7 +9,8 @@ import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import '../shared_style.js';
 import '../shared_vars.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 './activity_log_history_item.html.js';
 
 export type ActivityGroup = {
   activityIds: Set<string>,
@@ -35,7 +36,7 @@ export class ActivityLogHistoryItemElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
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 b02c4c76a0b..b32510d067d 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
@@ -9,8 +9,9 @@ import '../shared_style.js';
 import './activity_log_stream_item.js';
 
 import {ChromeEvent} from '/tools/typescript/definitions/chrome_event.js';
-import {assert} from 'chrome://resources/js/assert.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.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 {StreamItem} from './activity_log_stream_item.js';
 
@@ -62,7 +63,7 @@ export class ActivityLogStreamElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -111,7 +112,7 @@ export class ActivityLogStreamElement extends PolymerElement {
     this.listenerInstance_ = () => {};
   }
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
 
     // Since this component is not restamped, this will only be called once
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 51d0e790dbf..dd423aa2f8c 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
@@ -8,7 +8,8 @@ import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import '../shared_style.js';
 import '../shared_vars.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 './activity_log_stream_item.html.js';
 
 export type StreamItem = {
   name?: string,
@@ -29,7 +30,7 @@ export type StreamItem = {
 export type StreamArgItem = {
   arg: string,
   index: number,
-}
+};
 
 /**
  * Placeholder for arg_url that can occur in |StreamItem.args|. Sometimes we
@@ -52,7 +53,7 @@ export class ActivityLogStreamItemElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/chrome/browser/resources/extensions/code_section.ts b/chromium/chrome/browser/resources/extensions/code_section.ts
index ab58b86b05a..45168defa8c 100644
--- a/chromium/chrome/browser/resources/extensions/code_section.ts
+++ b/chromium/chrome/browser/resources/extensions/code_section.ts
@@ -9,7 +9,8 @@ import './strings.m.js';
 
 import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.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 './code_section.html.js';
 
 
 function visibleLineCount(totalCount: number, oppositeCount: number): number {
@@ -29,7 +30,7 @@ export class ExtensionsCodeSectionElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/chrome/browser/resources/extensions/detail_view.ts b/chromium/chrome/browser/resources/extensions/detail_view.ts
index afd2f044329..c8c22140f52 100644
--- a/chromium/chrome/browser/resources/extensions/detail_view.ts
+++ b/chromium/chrome/browser/resources/extensions/detail_view.ts
@@ -29,7 +29,8 @@ import {CrToggleElement} from 'chrome://resources/cr_elements/cr_toggle/cr_toggl
 import {CrTooltipIconElement} from 'chrome://resources/cr_elements/policy/cr_tooltip_icon.m.js';
 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, html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {afterNextRender, DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {getTemplate} from './detail_view.html.js';
 
 import {ItemDelegate} from './item.js';
 import {ItemMixin} from './item_mixin.js';
@@ -58,7 +59,7 @@ export class ExtensionsDetailViewElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -106,11 +107,11 @@ export class ExtensionsDetailViewElement extends
   fromActivityLog: boolean;
   private size_: string;
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
   }
 
-  ready() {
+  override ready() {
     super.ready();
     this.addEventListener('view-enter-start', this.onViewEnterStart_);
   }
diff --git a/chromium/chrome/browser/resources/extensions/drop_overlay.ts b/chromium/chrome/browser/resources/extensions/drop_overlay.ts
index 48c5352c5cf..f699ec1a074 100644
--- a/chromium/chrome/browser/resources/extensions/drop_overlay.ts
+++ b/chromium/chrome/browser/resources/extensions/drop_overlay.ts
@@ -8,9 +8,10 @@ import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
 import {DragWrapper} from 'chrome://resources/js/cr/ui/drag_wrapper.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 {DragAndDropHandler} from './drag_and_drop_handler.js';
+import {getTemplate} from './drop_overlay.html.js';
 
 class ExtensionsDropOverlayElement extends PolymerElement {
   static get is() {
@@ -18,7 +19,7 @@ class ExtensionsDropOverlayElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/chrome/browser/resources/extensions/error_page.ts b/chromium/chrome/browser/resources/extensions/error_page.ts
index 49633e9ddc2..a88d4070a8a 100644
--- a/chromium/chrome/browser/resources/extensions/error_page.ts
+++ b/chromium/chrome/browser/resources/extensions/error_page.ts
@@ -15,11 +15,12 @@ import './code_section.js';
 import './shared_style.js';
 
 import {CrContainerShadowMixin} from 'chrome://resources/cr_elements/cr_container_shadow_mixin.js';
-import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
+import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
 import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
 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, html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {afterNextRender, DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {getTemplate} from './error_page.html.js';
 
 import {navigation, Page} from './navigation_helper.js';
 
@@ -60,8 +61,9 @@ function getErrorSeverityText_(
         return warn;
       case chrome.developerPrivate.ErrorLevel.ERROR:
         return error;
+      default:
+        assertNotReached();
     }
-    assertNotReached();
   }
   assert(item.type === chrome.developerPrivate.ErrorType.MANIFEST);
   return warn;
@@ -80,6 +82,10 @@ export class ExtensionsErrorPageElement extends ExtensionsErrorPageElementBase {
     return 'extensions-error-page';
   }
 
+  static get template() {
+    return getTemplate();
+  }
+
   static get properties() {
     return {
       data: Object,
@@ -125,7 +131,7 @@ export class ExtensionsErrorPageElement extends ExtensionsErrorPageElementBase {
   private selectedEntry_: number;
   private selectedStackFrame_: chrome.developerPrivate.StackFrame|null;
 
-  ready() {
+  override ready() {
     super.ready();
     this.addEventListener('view-enter-start', this.onViewEnterStart_);
     FocusOutlineManager.forDocument(document);
@@ -281,7 +287,7 @@ export class ExtensionsErrorPageElement extends ExtensionsErrorPageElementBase {
   }
 
   private updateSelected_(frame: chrome.developerPrivate.StackFrame) {
-    this.selectedStackFrame_ = assert(frame);
+    this.selectedStackFrame_ = frame;
 
     const selectedError = this.getSelectedError();
     this.delegate
@@ -371,10 +377,6 @@ export class ExtensionsErrorPageElement extends ExtensionsErrorPageElementBase {
         -1 :
         repeaterEvent.model.index;
   }
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
 }
 
 declare global {
diff --git a/chromium/chrome/browser/resources/extensions/extensions.gni b/chromium/chrome/browser/resources/extensions/extensions.gni
index 2d1bf1b977f..55cac1cc4c1 100644
--- a/chromium/chrome/browser/resources/extensions/extensions.gni
+++ b/chromium/chrome/browser/resources/extensions/extensions.gni
@@ -4,7 +4,6 @@
 
 import("//build/config/chromeos/ui_mode.gni")
 
-# List of files that don't need to be passed to html_to_js().
 non_web_component_files = [
   "drag_and_drop_handler.ts",
   "extensions.ts",
@@ -14,6 +13,7 @@ non_web_component_files = [
   "navigation_helper.ts",
   "service.ts",
   "shortcut_util.ts",
+  "site_settings_mixin.ts",
   "url_util.ts",
 ]
 
@@ -21,7 +21,7 @@ if (is_chromeos_ash) {
   non_web_component_files += [ "kiosk_browser_proxy.ts" ]
 }
 
-# List of files that should be passed to html_to_js().
+# Files holding a Polymer element definition and have an equivalent .html file.
 web_component_files = [
   "activity_log/activity_log.ts",
   "activity_log/activity_log_history.ts",
@@ -33,7 +33,6 @@ web_component_files = [
   "drop_overlay.ts",
   "error_page.ts",
   "host_permissions_toggle_list.ts",
-  "icons.ts",
   "install_warnings_dialog.ts",
   "item.ts",
   "item_list.ts",
@@ -45,13 +44,12 @@ web_component_files = [
   "pack_dialog_alert.ts",
   "runtime_host_permissions.ts",
   "runtime_hosts_dialog.ts",
-  "shared_style.ts",
-  "shared_vars.ts",
   "shortcut_input.ts",
   "sidebar.ts",
   "site_permissions.ts",
-  "site_permissions_add_site_dialog.ts",
   "site_permissions_by_site.ts",
+  "site_permissions_edit_permissions_dialog.ts",
+  "site_permissions_edit_url_dialog.ts",
   "site_permissions_list.ts",
   "toggle_row.ts",
   "toolbar.ts",
@@ -60,3 +58,23 @@ web_component_files = [
 if (is_chromeos_ash) {
   web_component_files += [ "kiosk_dialog.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 + non_web_component_files
+
+css_wrapper_files = [
+  "icons.ts",
+  "shared_style.ts",
+  "shared_vars.ts",
+]
diff --git a/chromium/chrome/browser/resources/extensions/extensions.html b/chromium/chrome/browser/resources/extensions/extensions.html
index ecc17a85b6e..37865c83d10 100644
--- a/chromium/chrome/browser/resources/extensions/extensions.html
+++ b/chromium/chrome/browser/resources/extensions/extensions.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <html dir="$i18n{textdirection}" lang="$i18n{language}"
-    class="loading $i18n{loadTimeClasses}" $i18n{enableBrandingUpdateAttribute}>
+    class="loading $i18n{loadTimeClasses}">
 <head>
   <meta charset="utf8">
   <meta name="color-scheme" content="light dark">
@@ -9,11 +9,16 @@
   <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
   <style>
     html {
-      background: var(--md-background-color);
       /* Remove 300ms delay for 'click' event, when using touch interface. */
       touch-action: manipulation;
     }
 
+    @media (prefers-color-scheme: dark) {
+      html {
+        background: var(--md-background-color);
+      }
+    }
+
     html.loading::before,
     html.loading body::before {
       box-sizing: border-box;
diff --git a/chromium/chrome/browser/resources/extensions/extensions.ts b/chromium/chrome/browser/resources/extensions/extensions.ts
index 3b9a7f603ec..9b25c3ec09e 100644
--- a/chromium/chrome/browser/resources/extensions/extensions.ts
+++ b/chromium/chrome/browser/resources/extensions/extensions.ts
@@ -20,7 +20,7 @@ export {ExtensionsItemElement, ItemDelegate} from './item.js';
 export {ExtensionsItemListElement} from './item_list.js';
 export {UserAction} from './item_util.js';
 export {ExtensionsKeyboardShortcutsElement} from './keyboard_shortcuts.js';
-// <if expr="chromeos">
+// <if expr="chromeos_ash">
 export {KioskApp, KioskAppSettings, KioskBrowserProxy, KioskBrowserProxyImpl, KioskSettings} from './kiosk_browser_proxy.js';
 export {ExtensionsKioskDialogElement} from './kiosk_dialog.js';
 // </if>
@@ -32,16 +32,17 @@ export {ExtensionsOptionsDialogElement} from './options_dialog.js';
 export {ExtensionsPackDialogElement, PackDialogDelegate} from './pack_dialog.js';
 export {ExtensionsPackDialogAlertElement} from './pack_dialog_alert.js';
 export {ExtensionsRuntimeHostPermissionsElement} from './runtime_host_permissions.js';
-export {getPatternFromSite} from './runtime_hosts_dialog.js';
-export {ExtensionsRuntimeHostsDialogElement} from './runtime_hosts_dialog.js';
+export {ExtensionsRuntimeHostsDialogElement, getMatchingUserSpecifiedSites, getPatternFromSite} from './runtime_hosts_dialog.js';
 export {Service, ServiceInterface} from './service.js';
 export {ExtensionsShortcutInputElement} from './shortcut_input.js';
 export {isValidKeyCode, Key, keystrokeToString} from './shortcut_util.js';
 export {ExtensionsSidebarElement} from './sidebar.js';
 export {ExtensionsSitePermissionsElement} from './site_permissions.js';
-export {getSitePermissionsPatternFromSite, SitePermissionsAddSiteDialogElement} from './site_permissions_add_site_dialog.js';
 export {ExtensionsSitePermissionsBySiteElement} from './site_permissions_by_site.js';
+export {SitePermissionsEditPermissionsDialogElement} from './site_permissions_edit_permissions_dialog.js';
+export {getSitePermissionsPatternFromSite, SitePermissionsEditUrlDialogElement} from './site_permissions_edit_url_dialog.js';
 export {ExtensionsSitePermissionsListElement} from './site_permissions_list.js';
+export {SiteSettingsMixin} from './site_settings_mixin.js';
 export {ExtensionsToggleRowElement} from './toggle_row.js';
 export {ExtensionsToolbarElement} from './toolbar.js';
 export {getFaviconUrl} from './url_util.js';
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 3ea92d01306..93307db47f0 100644
--- a/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.ts
+++ b/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.ts
@@ -10,7 +10,8 @@ import './toggle_row.js';
 import './shared_style.js';
 import './strings.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 './host_permissions_toggle_list.html.js';
 
 import {ItemDelegate} from './item.js';
 import {UserAction} from './item_util.js';
@@ -29,7 +30,7 @@ export class ExtensionsHostPermissionsToggleListElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/chrome/browser/resources/extensions/install_warnings_dialog.ts b/chromium/chrome/browser/resources/extensions/install_warnings_dialog.ts
index 2873d041c51..a30290e1e15 100644
--- a/chromium/chrome/browser/resources/extensions/install_warnings_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/install_warnings_dialog.ts
@@ -9,7 +9,8 @@ import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
 import './code_section.js';
 
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.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 './install_warnings_dialog.html.js';
 
 interface ExtensionsInstallWarningsDialogElement {
   $: {
@@ -23,7 +24,7 @@ class ExtensionsInstallWarningsDialogElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -34,7 +35,7 @@ class ExtensionsInstallWarningsDialogElement extends PolymerElement {
 
   installWarnings: Array<string>;
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
     this.$.dialog.showModal();
   }
diff --git a/chromium/chrome/browser/resources/extensions/item.ts b/chromium/chrome/browser/resources/extensions/item.ts
index 1a16981f6a9..a31b564d78a 100644
--- a/chromium/chrome/browser/resources/extensions/item.ts
+++ b/chromium/chrome/browser/resources/extensions/item.ts
@@ -22,9 +22,10 @@ import 'chrome://resources/polymer/v3_0/paper-tooltip/paper-tooltip.js';
 
 import {getToastManager} from 'chrome://resources/cr_elements/cr_toast/cr_toast_manager.js';
 import {CrToggleElement} from 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
-import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
+import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
 import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
-import {flush, html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {flush, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.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';
@@ -72,7 +73,7 @@ export class ExtensionsItemElement extends ExtensionsItemElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -252,8 +253,9 @@ export class ExtensionsItemElement extends ExtensionsItemElementBase {
         return 'extensions-icons:unpacked';
       case SourceType.WEBSTORE:
         return '';
+      default:
+        assertNotReached();
     }
-    assertNotReached();
   }
 
   private computeSourceIndicatorText_(): string {
diff --git a/chromium/chrome/browser/resources/extensions/item_list.ts b/chromium/chrome/browser/resources/extensions/item_list.ts
index 4666a42b5ec..da86db23349 100644
--- a/chromium/chrome/browser/resources/extensions/item_list.ts
+++ b/chromium/chrome/browser/resources/extensions/item_list.ts
@@ -9,9 +9,10 @@ import './shared_style.js';
 import {CrContainerShadowMixin} from 'chrome://resources/cr_elements/cr_container_shadow_mixin.js';
 import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {IronA11yAnnouncer} from 'chrome://resources/polymer/v3_0/iron-a11y-announcer/iron-a11y-announcer.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 {ExtensionsItemElement, ItemDelegate} from './item.js';
+import {getTemplate} from './item_list.html.js';
 
 type Filter = (info: chrome.developerPrivate.ExtensionInfo) => boolean;
 
@@ -24,7 +25,7 @@ export class ExtensionsItemListElement extends ExtensionsItemListElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/chrome/browser/resources/extensions/item_mixin.ts b/chromium/chrome/browser/resources/extensions/item_mixin.ts
index 31795f3d4f8..e0a1f88d47e 100644
--- a/chromium/chrome/browser/resources/extensions/item_mixin.ts
+++ b/chromium/chrome/browser/resources/extensions/item_mixin.ts
@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {assertNotReached} from 'chrome://resources/js/assert.m.js';
+import {assertNotReached} from 'chrome://resources/js/assert_ts.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {dedupingMixin, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -29,8 +29,6 @@ export const ItemMixin = dedupingMixin(
               return extensionLabel;
           }
           assertNotReached('Item type is not App or Extension.');
-          // Unreachable return to satisfy TS compiler.
-          return ExtensionType.EXTENSION;
         }
 
         /**
diff --git a/chromium/chrome/browser/resources/extensions/item_util.ts b/chromium/chrome/browser/resources/extensions/item_util.ts
index 97192bf8dd8..9b42cb63049 100644
--- a/chromium/chrome/browser/resources/extensions/item_util.ts
+++ b/chromium/chrome/browser/resources/extensions/item_util.ts
@@ -4,7 +4,7 @@
 
 import './strings.m.js';
 
-import {assertNotReached} from 'chrome://resources/js/assert.m.js';
+import {assertNotReached} from 'chrome://resources/js/assert_ts.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 
 export enum SourceType {
@@ -22,7 +22,6 @@ export enum EnableControl {
 }
 
 // TODO(tjudkins): This should be extracted to a shared metrics module.
-/** @enum {string} */
 export enum UserAction {
   ALL_TOGGLED_ON = 'Extensions.Settings.HostList.AllHostsToggledOn',
   ALL_TOGGLED_OFF = 'Extensions.Settings.HostList.AllHostsToggledOff',
@@ -44,13 +43,13 @@ export function isEnabled(state: chrome.developerPrivate.ExtensionState):
     case chrome.developerPrivate.ExtensionState.BLACKLISTED:
     case chrome.developerPrivate.ExtensionState.DISABLED:
       return false;
+    default:
+      assertNotReached();
   }
-  assertNotReached();
-  return false;
 }
 
 /**
- * @return {boolean} Whether the user can change whether or not the extension is
+ * @return Whether the user can change whether or not the extension is
  *     enabled.
  */
 export function userCanChangeEnablement(
@@ -94,9 +93,9 @@ export function getItemSource(item: chrome.developerPrivate.ExtensionInfo):
       return SourceType.UNKNOWN;
     case chrome.developerPrivate.Location.FROM_STORE:
       return SourceType.WEBSTORE;
+    default:
+      assertNotReached(item.location);
   }
-
-  assertNotReached(item.location);
 }
 
 export function getItemSourceString(source: SourceType): string {
@@ -113,9 +112,9 @@ export function getItemSourceString(source: SourceType): string {
       // Nothing to return. Calling code should use
       // chrome.developerPrivate.ExtensionInfo's |locationText| instead.
       return '';
+    default:
+      assertNotReached();
   }
-  assertNotReached();
-  return '';
 }
 
 /**
diff --git a/chromium/chrome/browser/resources/extensions/keyboard_shortcuts.ts b/chromium/chrome/browser/resources/extensions/keyboard_shortcuts.ts
index f2f60437e43..302aae7276f 100644
--- a/chromium/chrome/browser/resources/extensions/keyboard_shortcuts.ts
+++ b/chromium/chrome/browser/resources/extensions/keyboard_shortcuts.ts
@@ -9,9 +9,10 @@ import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
 import './shortcut_input.js';
 
 import {CrContainerShadowMixin} from 'chrome://resources/cr_elements/cr_container_shadow_mixin.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 {KeyboardShortcutDelegate} from './keyboard_shortcut_delegate.js';
+import {getTemplate} from './keyboard_shortcuts.html.js';
 
 /** Event interface for dom-repeat. */
 interface RepeaterEvent<T> extends CustomEvent {
@@ -33,7 +34,7 @@ export class ExtensionsKeyboardShortcutsElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -55,7 +56,7 @@ export class ExtensionsKeyboardShortcutsElement extends
   delegate: KeyboardShortcutDelegate;
   items: Array<chrome.developerPrivate.ExtensionInfo>;
 
-  ready() {
+  override ready() {
     super.ready();
     this.addEventListener('view-enter-start', this.onViewEnter_);
   }
diff --git a/chromium/chrome/browser/resources/extensions/kiosk_dialog.ts b/chromium/chrome/browser/resources/extensions/kiosk_dialog.ts
index 6839a398209..a22337abf58 100644
--- a/chromium/chrome/browser/resources/extensions/kiosk_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/kiosk_dialog.ts
@@ -14,11 +14,12 @@ import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_butto
 import {CrCheckboxElement} from 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
 import {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
-import {assert} from 'chrome://resources/js/assert.m.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
 import {WebUIListenerMixin} from 'chrome://resources/js/web_ui_listener_mixin.js';
-import {DomRepeatEvent, html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {KioskApp, KioskAppSettings, KioskBrowserProxy, KioskBrowserProxyImpl} from './kiosk_browser_proxy.js';
+import {getTemplate} from './kiosk_dialog.html.js';
 
 export interface ExtensionsKioskDialogElement {
   $: {
@@ -39,7 +40,7 @@ export class ExtensionsKioskDialogElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -67,7 +68,7 @@ export class ExtensionsKioskDialogElement extends
   private canEditBailout_: boolean;
   private errorAppId_: string|null;
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
 
     this.kioskBrowserProxy_.initializeKioskAppSettings()
@@ -107,7 +108,7 @@ export class ExtensionsKioskDialogElement extends
 
   private onAddAppTap_() {
     assert(this.addAppInput_);
-    this.kioskBrowserProxy_.addKioskApp(this.addAppInput_!);
+    this.kioskBrowserProxy_.addKioskApp(this.addAppInput_);
     this.addAppInput_ = null;
   }
 
diff --git a/chromium/chrome/browser/resources/extensions/load_error.ts b/chromium/chrome/browser/resources/extensions/load_error.ts
index a5427106154..2fdf78e8a9b 100644
--- a/chromium/chrome/browser/resources/extensions/load_error.ts
+++ b/chromium/chrome/browser/resources/extensions/load_error.ts
@@ -10,10 +10,11 @@ import './code_section.js';
 import './strings.m.js';
 
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
-import {assert} from 'chrome://resources/js/assert.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {ExtensionsCodeSectionElement} from './code_section.js';
+import {getTemplate} from './load_error.html.js';
 
 export interface LoadErrorDelegate {
   /**
@@ -35,7 +36,7 @@ export class ExtensionsLoadErrorElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/chrome/browser/resources/extensions/manager.html b/chromium/chrome/browser/resources/extensions/manager.html
index 487c54607e4..4d0941f191e 100644
--- a/chromium/chrome/browser/resources/extensions/manager.html
+++ b/chromium/chrome/browser/resources/extensions/manager.html
@@ -29,7 +29,7 @@
     delegate="[[delegate]]" on-cr-toolbar-menu-tap="onMenuButtonTap_"
     on-search-changed="onFilterChanged_"
     extensions="[[extensions_]]"
-<if expr="chromeos">
+<if expr="chromeos_ash">
     on-kiosk-tap="onKioskTap_"
     kiosk-enabled="[[kioskEnabled_]]"
 </if>
@@ -74,7 +74,8 @@
   </cr-lazy-render>
   <cr-lazy-render id="site-permissions">
     <template>
-      <extensions-site-permissions delegate="[[delegate]]" slot="view">
+      <extensions-site-permissions delegate="[[delegate]]" slot="view"
+          enable-enhanced-site-controls="[[enableEnhancedSiteControls]]">
       </extensions-site-permissions>
     </template>
   </cr-lazy-render>
@@ -109,7 +110,7 @@
       on-close="onLoadErrorDialogClose_">
   </extensions-load-error>
 </template>
-<if expr="chromeos">
+<if expr="chromeos_ash">
 <template is="dom-if" if="[[showKioskDialog_]]" restamp>
   <extensions-kiosk-dialog id="kiosk-dialog" on-close="onKioskDialogClose_">
   </extensions-kiosk-dialog>
diff --git a/chromium/chrome/browser/resources/extensions/manager.ts b/chromium/chrome/browser/resources/extensions/manager.ts
index 791e8907a54..e36c6a34524 100644
--- a/chromium/chrome/browser/resources/extensions/manager.ts
+++ b/chromium/chrome/browser/resources/extensions/manager.ts
@@ -23,22 +23,23 @@ import './sidebar.js';
 import './site_permissions.js';
 import './site_permissions_by_site.js';
 import './toolbar.js';
-// <if expr="chromeos">
+// <if expr="chromeos_ash">
 import './kiosk_dialog.js';
 
 // </if>
 
 import {CrViewManagerElement} from 'chrome://resources/cr_elements/cr_view_manager/cr_view_manager.js';
-import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
+import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.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 {ActivityLogExtensionPlaceholder} from './activity_log/activity_log.js';
 import {ExtensionsDetailViewElement} from './detail_view.js';
 import {ExtensionsItemListElement} from './item_list.js';
-// <if expr="chromeos">
+// <if expr="chromeos_ash">
 import {KioskBrowserProxyImpl} from './kiosk_browser_proxy.js';
 // </if>
+import {getTemplate} from './manager.html.js';
 import {Dialog, navigation, Page, PageState} from './navigation_helper.js';
 import {Service} from './service.js';
 
@@ -88,6 +89,10 @@ export class ExtensionsManagerElement extends PolymerElement {
     return 'extensions-manager';
   }
 
+  static get template() {
+    return getTemplate();
+  }
+
   static get properties() {
     return {
       canLoadUnpacked: {
@@ -186,7 +191,7 @@ export class ExtensionsManagerElement extends PolymerElement {
        */
       fromActivityLog_: Boolean,
 
-      // <if expr="chromeos">
+      // <if expr="chromeos_ash">
       kioskEnabled_: {
         type: Boolean,
         value: false,
@@ -223,7 +228,7 @@ export class ExtensionsManagerElement extends PolymerElement {
   private showOptionsDialog_: boolean;
   private fromActivityLog_: boolean;
 
-  // <if expr="chromeos">
+  // <if expr="chromeos_ash">
   private kioskEnabled_: boolean;
   private showKioskDialog_: boolean;
   // </if>
@@ -247,7 +252,7 @@ export class ExtensionsManagerElement extends PolymerElement {
     this.navigationListener_ = null;
   }
 
-  ready() {
+  override ready() {
     super.ready();
 
     this.addEventListener('load-error', this.onLoadError_);
@@ -277,7 +282,7 @@ export class ExtensionsManagerElement extends PolymerElement {
           this.onItemStateChanged_.bind(this));
     });
 
-    // <if expr="chromeos">
+    // <if expr="chromeos_ash">
     KioskBrowserProxyImpl.getInstance().initializeKioskAppSettings().then(
         params => {
           this.kioskEnabled_ = params.kioskEnabled;
@@ -285,7 +290,7 @@ export class ExtensionsManagerElement extends PolymerElement {
     // </if>
   }
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
 
     document.documentElement.classList.remove('loading');
@@ -297,9 +302,10 @@ export class ExtensionsManagerElement extends PolymerElement {
     });
   }
 
-  disconnectedCallback() {
+  override disconnectedCallback() {
     super.disconnectedCallback();
-    assert(navigation.removeListener(this.navigationListener_!));
+    assert(this.navigationListener_);
+    assert(navigation.removeListener(this.navigationListener_));
     this.navigationListener_ = null;
   }
 
@@ -389,10 +395,9 @@ export class ExtensionsManagerElement extends PolymerElement {
         return 'extensions_';
       case ExtensionType.THEME:
         assertNotReached('Don\'t send themes to the chrome://extensions page');
-        break;
+      default:
+        assertNotReached();
     }
-    assertNotReached();
-    return '';
   }
 
   /**
@@ -550,9 +555,9 @@ export class ExtensionsManagerElement extends PolymerElement {
     }
 
     if (toPage === Page.DETAILS) {
-      this.detailViewItem_ = assert(data);
+      this.detailViewItem_ = data;
     } else if (toPage === Page.ERRORS) {
-      this.errorPageItem_ = assert(data);
+      this.errorPageItem_ = data;
     } else if (toPage === Page.ACTIVITY_LOG) {
       if (!this.showActivityLog) {
         // Redirect back to the details page if we try to view the
@@ -562,7 +567,7 @@ export class ExtensionsManagerElement extends PolymerElement {
         return;
       }
 
-      this.activityLogItem_ = data ? assert(data) : activityLogPlaceholder;
+      this.activityLogItem_ = data || activityLogPlaceholder;
     } else if (
         (toPage === Page.SITE_PERMISSIONS ||
          toPage === Page.SITE_PERMISSIONS_ALL_SITES) &&
@@ -667,7 +672,7 @@ export class ExtensionsManagerElement extends PolymerElement {
     this.showInstallWarningsDialog_ = false;
   }
 
-  // <if expr="chromeos">
+  // <if expr="chromeos_ash">
   private onKioskTap_() {
     this.showKioskDialog_ = true;
   }
@@ -676,10 +681,6 @@ export class ExtensionsManagerElement extends PolymerElement {
     this.showKioskDialog_ = false;
   }
   // </if>
-
-  static get template() {
-    return html`{__html_template__}`;
-  }
 }
 
 declare global {
diff --git a/chromium/chrome/browser/resources/extensions/navigation_helper.ts b/chromium/chrome/browser/resources/extensions/navigation_helper.ts
index 057f794dd9a..5b0a1f63107 100644
--- a/chromium/chrome/browser/resources/extensions/navigation_helper.ts
+++ b/chromium/chrome/browser/resources/extensions/navigation_helper.ts
@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {assert} from 'chrome://resources/js/assert.m.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
 
 
 /**
diff --git a/chromium/chrome/browser/resources/extensions/options_dialog.ts b/chromium/chrome/browser/resources/extensions/options_dialog.ts
index f4e27c56350..fd953b4893e 100644
--- a/chromium/chrome/browser/resources/extensions/options_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/options_dialog.ts
@@ -6,9 +6,10 @@ import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
 
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
 import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
-import {Debouncer, html, PolymerElement, timeOut} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {Debouncer, PolymerElement, timeOut} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {navigation, Page} from './navigation_helper.js';
+import {getTemplate} from './options_dialog.html.js';
 
 /**
  * @return A signal that the document is ready. Need to wait for this, otherwise
@@ -48,7 +49,7 @@ export class ExtensionsOptionsDialogElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/chrome/browser/resources/extensions/pack_dialog.ts b/chromium/chrome/browser/resources/extensions/pack_dialog.ts
index d943462a2c5..acb1c590a13 100644
--- a/chromium/chrome/browser/resources/extensions/pack_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/pack_dialog.ts
@@ -12,7 +12,8 @@ import './strings.m.js';
 
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
 import {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.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 './pack_dialog.html.js';
 
 export interface PackDialogDelegate {
   /**
@@ -51,7 +52,7 @@ export class ExtensionsPackDialogElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -73,7 +74,7 @@ export class ExtensionsPackDialogElement extends PolymerElement {
   private keyFile_: string;
   private lastResponse_: chrome.developerPrivate.PackDirectoryResponse|null;
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
     this.$.dialog.showModal();
   }
diff --git a/chromium/chrome/browser/resources/extensions/pack_dialog_alert.ts b/chromium/chrome/browser/resources/extensions/pack_dialog_alert.ts
index 8aedbe5cf5c..c0b013989ef 100644
--- a/chromium/chrome/browser/resources/extensions/pack_dialog_alert.ts
+++ b/chromium/chrome/browser/resources/extensions/pack_dialog_alert.ts
@@ -7,9 +7,10 @@ import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
-import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
+import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.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 './pack_dialog_alert.html.js';
 
 export interface ExtensionsPackDialogAlertElement {
   $: {
@@ -23,7 +24,7 @@ export class ExtensionsPackDialogAlertElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -47,7 +48,7 @@ export class ExtensionsPackDialogAlertElement extends PolymerElement {
     return this.$.dialog.getNative().returnValue;
   }
 
-  ready() {
+  override ready() {
     super.ready();
 
     // Initialize button label values for initial html binding.
@@ -70,11 +71,10 @@ export class ExtensionsPackDialogAlertElement extends PolymerElement {
         break;
       default:
         assertNotReached();
-        return;
     }
   }
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
     this.$.dialog.showModal();
   }
diff --git a/chromium/chrome/browser/resources/extensions/runtime_host_permissions.html b/chromium/chrome/browser/resources/extensions/runtime_host_permissions.html
index dfa7ff5fed5..66e4ae2c324 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_host_permissions.html
+++ b/chromium/chrome/browser/resources/extensions/runtime_host_permissions.html
@@ -211,6 +211,7 @@
 <template is="dom-if" if="[[showHostDialog_]]" restamp>
   <extensions-runtime-hosts-dialog
       delegate="[[delegate]]" item-id="[[itemId]]"
+      enable-enhanced-site-controls="[[enableEnhancedSiteControls]]"
       current-site="[[hostDialogModel_]]"
       update-host-access="[[dialogShouldUpdateHostAccess_(oldHostAccess_)]]"
       on-close="onHostDialogClose_"
diff --git a/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts b/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts
index 4143965d9ae..150d0913efa 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts
+++ b/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts
@@ -21,11 +21,12 @@ import './strings.m.js';
 
 import {CrActionMenuElement} from 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
-import {assert} from 'chrome://resources/js/assert.m.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
 import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js';
-import {DomRepeatEvent, html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {ItemDelegate} from './item.js';
+import {getTemplate} from './runtime_host_permissions.html.js';
 import {getFaviconUrl} from './url_util.js';
 
 export interface ExtensionsRuntimeHostPermissionsElement {
@@ -40,7 +41,7 @@ export class ExtensionsRuntimeHostPermissionsElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -251,7 +252,8 @@ export class ExtensionsRuntimeHostPermissionsElement extends PolymerElement {
   private onHostDialogClose_() {
     this.hostDialogModel_ = null;
     this.showHostDialog_ = false;
-    focusWithoutInk(assert(this.hostDialogAnchorElement_!, 'Host Anchor'));
+    assert(this.hostDialogAnchorElement_);
+    focusWithoutInk(this.hostDialogAnchorElement_);
     this.hostDialogAnchorElement_ = null;
     this.oldHostAccess_ = null;
   }
@@ -292,7 +294,8 @@ export class ExtensionsRuntimeHostPermissionsElement extends PolymerElement {
     // to the action menu's trigger (since the dialog will be shown next).
     // Instead, curry the element to the dialog, so once it closes, focus
     // will be returned.
-    const anchorElement = assert(this.actionMenuAnchorElement_!, 'Menu Anchor');
+    assert(this.actionMenuAnchorElement_, 'Menu Anchor');
+    const anchorElement = this.actionMenuAnchorElement_;
     this.actionMenuAnchorElement_ = null;
     this.closeActionMenu_();
     this.doShowHostDialog_(anchorElement, site);
@@ -301,8 +304,9 @@ export class ExtensionsRuntimeHostPermissionsElement extends PolymerElement {
   private onActionMenuRemoveClick_() {
     chrome.metricsPrivate.recordUserAction(
         'Extensions.Settings.Hosts.ActionMenuRemoveActivated');
+    assert(this.actionMenuModel_, 'Action Menu Model');
     this.delegate.removeRuntimeHostPermission(
-        this.itemId, assert(this.actionMenuModel_!, 'Action Menu Model'));
+        this.itemId, this.actionMenuModel_);
     this.closeActionMenu_();
   }
 
diff --git a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html
index e8013bd69e0..282283687d6 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html
+++ b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html
@@ -1,4 +1,17 @@
-<style include="cr-shared-style"></style>
+<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>
 <cr-dialog id="dialog" close-text="$i18n{close}">
   <div slot="title">[[computeDialogTitle_(currentSite)]]</div>
   <div slot="body">
@@ -10,6 +23,11 @@
         spellcheck="false"
         autofocus>
     </cr-input>
+    <div id="matching-restricted-sites-warning"
+        hidden="[[!matchingRestrictedSites_.length]]">
+      <iron-icon icon="cr:info-outline"></iron-icon>
+      <span>[[computeMatchingRestrictedSitesWarning_(site_)]]</span>
+    </div>
   </div>
   <div slot="button-container">
     <cr-button class="cancel-button" on-click="onCancelTap_">
diff --git a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts
index f5d2f0dd23e..582bf45c682 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts
@@ -5,16 +5,22 @@
 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/cr_input/cr_input.m.js';
+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 {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';
-import {assert} from 'chrome://resources/js/assert.m.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
+import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.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 {ItemDelegate} from './item.js';
+import {getTemplate} from './runtime_hosts_dialog.html.js';
+import {sitePermissionsPatternRegExp} from './site_permissions_edit_url_dialog.js';
+import {SiteSettingsMixin} from './site_settings_mixin.js';
 
 // A RegExp to roughly match acceptable patterns entered by the user.
 // exec'ing() this RegExp will match the following groups:
@@ -25,7 +31,7 @@ import {ItemDelegate} from './item.js';
 // 4: Hostname (e.g., 'example.com').
 // 5: Port, including ':' separator (e.g., ':80').
 // 6: Path, include '/' separator (e.g., '/*').
-const patternRegExp = new RegExp(
+const runtimeHostsPatternRegExp = new RegExp(
     '^' +
     // Scheme; optional.
     '((http|https|\\*)://)?' +
@@ -40,7 +46,7 @@ const patternRegExp = new RegExp(
     '$');
 
 export function getPatternFromSite(site: string): string {
-  const res = patternRegExp.exec(site)!;
+  const res = runtimeHostsPatternRegExp.exec(site)!;
   assert(res);
   const scheme = res[1] || '*://';
   const host = (res[3] || '') + res[4];
@@ -49,6 +55,49 @@ export function getPatternFromSite(site: string): string {
   return scheme + host + port + path;
 }
 
+// Returns the sublist of `userSites` which match the pattern specified by
+// `host`.
+export function getMatchingUserSpecifiedSites(
+    userSites: string[], host: string): string[] {
+  if (!runtimeHostsPatternRegExp.test(host)) {
+    return [];
+  }
+
+  const newHostRes = runtimeHostsPatternRegExp.exec(host);
+  assert(newHostRes);
+
+  const matchAllSchemes = !newHostRes[1] || newHostRes[1] === '*://';
+  const matchAllSubdomains = newHostRes[3] === '*.';
+
+  // For each restricted site, break it down into
+  // `sitePermissionsPatternRegExp` components and check against components
+  // from `newHostRes`.
+  return userSites.filter((userSite: string) => {
+    const siteRes = sitePermissionsPatternRegExp.exec(userSite);
+    assert(siteRes);
+
+    // Check if schemes match, unless `newHostRes` has a wildcard scheme.
+    if (!matchAllSchemes && newHostRes[1] !== siteRes[1]) {
+      return false;
+    }
+
+    // Check if host names match. If `matchAllSubdomains` is specified, check
+    // that `newHostRes[4]` is a suffix of `siteRes[3]`
+    if (matchAllSubdomains && !siteRes[3].endsWith(newHostRes[4])) {
+      return false;
+    }
+    if (!matchAllSubdomains && siteRes[3] !== newHostRes[4]) {
+      return false;
+    }
+
+    // Ports match if:
+    //  - both are unspecified
+    //  - both are specified and are an exact match
+    //  - specified for `restrictedSite` but not `this,site_`
+    return !newHostRes[5] || newHostRes[5] === siteRes[4];
+  });
+}
+
 export interface ExtensionsRuntimeHostsDialogElement {
   $: {
     dialog: CrDialogElement,
@@ -56,19 +105,21 @@ export interface ExtensionsRuntimeHostsDialogElement {
   };
 }
 
-export class ExtensionsRuntimeHostsDialogElement extends PolymerElement {
+const ExtensionsRuntimeHostsDialogElementBase =
+    I18nMixin(SiteSettingsMixin(PolymerElement));
+
+export class ExtensionsRuntimeHostsDialogElement extends
+    ExtensionsRuntimeHostsDialogElementBase {
   static get is() {
     return 'extensions-runtime-hosts-dialog';
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
     return {
-      delegate: Object,
-
       itemId: String,
 
       /**
@@ -97,17 +148,26 @@ export class ExtensionsRuntimeHostsDialogElement extends PolymerElement {
         type: Boolean,
         value: false,
       },
+
+      /**
+       * the list of user specified restricted sites that match with `site_` if
+       * `site_` is valid.
+       */
+      matchingRestrictedSites_: {
+        type: Array,
+        computed: 'computeMatchingRestrictedSites_(site_, restrictedSites)',
+      },
     };
   }
 
-  delegate: ItemDelegate;
   itemId: string;
   currentSite: string|null;
   updateHostAccess: boolean;
   private site_: string;
   private inputInvalid_: boolean;
+  private matchingRestrictedSites_: string[];
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
 
     if (this.currentSite !== null && this.currentSite !== undefined) {
@@ -132,8 +192,7 @@ export class ExtensionsRuntimeHostsDialogElement extends PolymerElement {
       return;
     }
 
-    const valid = patternRegExp.test(this.site_);
-    this.inputInvalid_ = !valid;
+    this.inputInvalid_ = !runtimeHostsPatternRegExp.test(this.site_);
   }
 
   private computeDialogTitle_(): string {
@@ -152,6 +211,10 @@ export class ExtensionsRuntimeHostsDialogElement extends PolymerElement {
     return loadTimeData.getString(stringId);
   }
 
+  private computeMatchingRestrictedSites_(): string[] {
+    return getMatchingUserSpecifiedSites(this.restrictedSites, this.site_);
+  }
+
   private onCancelTap_() {
     this.$.dialog.cancel();
   }
@@ -202,7 +265,7 @@ export class ExtensionsRuntimeHostsDialogElement extends PolymerElement {
 
     // Editing an existing entry is done by removing the current site entry,
     // and then adding the new one.
-    this.delegate.removeRuntimeHostPermission(this.itemId, this.currentSite!)
+    this.delegate.removeRuntimeHostPermission(this.itemId, this.currentSite)
         .then(() => {
           this.addPermission_();
         });
@@ -214,15 +277,34 @@ export class ExtensionsRuntimeHostsDialogElement extends PolymerElement {
    */
   private addPermission_() {
     const pattern = getPatternFromSite(this.site_);
+    const restrictedSites = this.matchingRestrictedSites_;
     this.delegate.addRuntimeHostPermission(this.itemId, pattern)
         .then(
             () => {
+              if (restrictedSites.length) {
+                this.delegate.removeUserSpecifiedSites(
+                    chrome.developerPrivate.UserSiteSet.RESTRICTED,
+                    restrictedSites);
+              }
               this.$.dialog.close();
             },
             () => {
               this.inputInvalid_ = true;
             });
   }
+
+  /**
+   * Returns a warning message containing the first restricted site that
+   * overlaps with `this.site_`, or an empty string if there are no matching
+   * restricted sites.
+   */
+  private computeMatchingRestrictedSitesWarning_(): string {
+    return this.matchingRestrictedSites_.length ?
+        this.i18n(
+            'matchingRestrictedSitesWarning',
+            this.matchingRestrictedSites_[0]) :
+        '';
+  }
 }
 
 declare global {
diff --git a/chromium/chrome/browser/resources/extensions/service.ts b/chromium/chrome/browser/resources/extensions/service.ts
index bf1ca58d830..64dcffffefd 100644
--- a/chromium/chrome/browser/resources/extensions/service.ts
+++ b/chromium/chrome/browser/resources/extensions/service.ts
@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import {ChromeEvent} from '/tools/typescript/definitions/chrome_event.js';
-import {assert} from 'chrome://resources/js/assert.m.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
 
 import {ActivityLogDelegate} from './activity_log/activity_log_history.js';
 import {ActivityLogEventDelegate} from './activity_log/activity_log_stream.js';
@@ -13,7 +13,7 @@ import {KeyboardShortcutDelegate} from './keyboard_shortcut_delegate.js';
 import {LoadErrorDelegate} from './load_error.js';
 import {Dialog, navigation, Page} from './navigation_helper.js';
 import {PackDialogDelegate} from './pack_dialog.js';
-import {SitePermissionsDelegate} from './site_permissions.js';
+import {SiteSettingsDelegate} from './site_settings_mixin.js';
 import {ToolbarDelegate} from './toolbar.js';
 
 export interface ServiceInterface extends ActivityLogDelegate,
@@ -21,7 +21,7 @@ export interface ServiceInterface extends ActivityLogDelegate,
                                           ErrorPageDelegate, ItemDelegate,
                                           KeyboardShortcutDelegate,
                                           LoadErrorDelegate, PackDialogDelegate,
-                                          SitePermissionsDelegate,
+                                          SiteSettingsDelegate,
                                           ToolbarDelegate {
   notifyDragInstallInProgress(): void;
   loadUnpackedFromDrag(): Promise<boolean>;
@@ -33,8 +33,6 @@ export interface ServiceInterface extends ActivityLogDelegate,
   getProfileConfiguration(): Promise<chrome.developerPrivate.ProfileInfo>;
   getExtensionsInfo(): Promise<Array<chrome.developerPrivate.ExtensionInfo>>;
   getExtensionSize(id: string): Promise<string>;
-  getUserSiteSettingsChangedTarget():
-      ChromeEvent<(settings: chrome.developerPrivate.UserSiteSettings) => void>;
 }
 
 export class Service implements ServiceInterface {
@@ -160,7 +158,7 @@ export class Service implements ServiceInterface {
   /**
    * @return A signal that loading finished, rejected if any error occurred.
    */
-  private loadUnpackedHelper_(opt_options?:
+  private loadUnpackedHelper_(extraOptions?:
                                   chrome.developerPrivate.LoadUnpackedOptions):
       Promise<boolean> {
     return new Promise(function(resolve, reject) {
@@ -169,7 +167,7 @@ export class Service implements ServiceInterface {
             failQuietly: true,
             populateError: true,
           },
-          opt_options);
+          extraOptions);
 
       chrome.developerPrivate.loadUnpacked(options, (loadError) => {
         if (chrome.runtime.lastError &&
@@ -480,21 +478,21 @@ export class Service implements ServiceInterface {
     });
   }
 
-  addUserSpecifiedSite(
+  addUserSpecifiedSites(
       siteSet: chrome.developerPrivate.UserSiteSet,
-      host: string): Promise<void> {
+      hosts: string[]): Promise<void> {
     return new Promise(function(resolve) {
-      chrome.developerPrivate.addUserSpecifiedSite(
-          {siteList: siteSet, host}, resolve);
+      chrome.developerPrivate.addUserSpecifiedSites(
+          {siteList: siteSet, hosts}, resolve);
     });
   }
 
-  removeUserSpecifiedSite(
+  removeUserSpecifiedSites(
       siteSet: chrome.developerPrivate.UserSiteSet,
-      host: string): Promise<void> {
+      hosts: string[]): Promise<void> {
     return new Promise(function(resolve) {
-      chrome.developerPrivate.removeUserSpecifiedSite(
-          {siteList: siteSet, host}, resolve);
+      chrome.developerPrivate.removeUserSpecifiedSites(
+          {siteList: siteSet, hosts}, resolve);
     });
   }
 
diff --git a/chromium/chrome/browser/resources/extensions/shortcut_input.ts b/chromium/chrome/browser/resources/extensions/shortcut_input.ts
index d532e9bc774..e51bc19aa1f 100644
--- a/chromium/chrome/browser/resources/extensions/shortcut_input.ts
+++ b/chromium/chrome/browser/resources/extensions/shortcut_input.ts
@@ -9,12 +9,13 @@ import 'chrome://resources/cr_elements/hidden_style_css.m.js';
 import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
 
 import {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
-import {assert} from 'chrome://resources/js/assert.m.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
 import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {IronA11yAnnouncer} from 'chrome://resources/polymer/v3_0/iron-a11y-announcer/iron-a11y-announcer.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 {KeyboardShortcutDelegate} from './keyboard_shortcut_delegate.js';
+import {getTemplate} from './shortcut_input.html.js';
 import {hasValidModifiers, isValidKeyCode, Key, keystrokeToString} from './shortcut_util.js';
 
 enum ShortcutError {
@@ -42,7 +43,7 @@ export class ExtensionsShortcutInputElement extends
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -97,7 +98,7 @@ export class ExtensionsShortcutInputElement extends
   private readonly_: boolean;
   private pendingShortcut_: string;
 
-  ready() {
+  override ready() {
     super.ready();
 
     const node = this.$.input;
diff --git a/chromium/chrome/browser/resources/extensions/shortcut_util.ts b/chromium/chrome/browser/resources/extensions/shortcut_util.ts
index fb56f749021..c761f9358d7 100644
--- a/chromium/chrome/browser/resources/extensions/shortcut_util.ts
+++ b/chromium/chrome/browser/resources/extensions/shortcut_util.ts
@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {assertNotReached} from 'chrome://resources/js/assert.m.js';
+import {assertNotReached} from 'chrome://resources/js/assert_ts.js';
 import {isChromeOS, isMac} from 'chrome://resources/js/cr.m.js';
 
 
@@ -186,6 +186,7 @@ export function hasValidModifiers(e: KeyboardEvent): boolean {
       return hasModifier(e, false);
     case ModifierPolicy.NOT_ALLOWED:
       return !hasModifier(e, true);
+    default:
+      assertNotReached();
   }
-  assertNotReached();
 }
diff --git a/chromium/chrome/browser/resources/extensions/sidebar.ts b/chromium/chrome/browser/resources/extensions/sidebar.ts
index 35880d8247c..cec19809646 100644
--- a/chromium/chrome/browser/resources/extensions/sidebar.ts
+++ b/chromium/chrome/browser/resources/extensions/sidebar.ts
@@ -8,9 +8,10 @@ import 'chrome://resources/polymer/v3_0/paper-ripple/paper-ripple.js';
 import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
 
 import {IronSelectorElement} from 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.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 {navigation, Page} from './navigation_helper.js';
+import {getTemplate} from './sidebar.html.js';
 
 export interface ExtensionsSidebarElement {
   $: {
@@ -26,7 +27,7 @@ export class ExtensionsSidebarElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -37,12 +38,12 @@ export class ExtensionsSidebarElement extends PolymerElement {
 
   enableEnhancedSiteControls: boolean;
 
-  ready() {
+  override ready() {
     super.ready();
     this.setAttribute('role', 'navigation');
   }
 
-  connectedCallback() {
+  override connectedCallback() {
     super.connectedCallback();
 
     const page = navigation.getCurrentPage().page;
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions.html b/chromium/chrome/browser/resources/extensions/site_permissions.html
index 6f3c0e3eae8..4f77ebc2fd3 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions.html
+++ b/chromium/chrome/browser/resources/extensions/site_permissions.html
@@ -35,12 +35,12 @@
           delegate="[[delegate]]"
           header="$i18n{permittedSites}"
           site-set="[[userSiteSetEnum_.PERMITTED]]"
-          sites="[[permittedSites_]]"></site-permissions-list>
+          sites="[[permittedSites]]"></site-permissions-list>
       <site-permissions-list
           delegate="[[delegate]]"
           header="$i18n{restrictedSites}"
           site-set="[[userSiteSetEnum_.RESTRICTED]]"
-          sites="[[restrictedSites_]]"></site-permissions-list>
+          sites="[[restrictedSites]]"></site-permissions-list>
     </div>
     <cr-link-row class="hr" id="allSitesLink"
         label="$i18n{sitePermissionsViewAllSites}"
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions.ts b/chromium/chrome/browser/resources/extensions/site_permissions.ts
index 4223b678371..c33379c5ca0 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions.ts
@@ -11,20 +11,11 @@ import './shared_vars.js';
 import './site_permissions_list.js';
 
 import {CrLinkRowElement} from 'chrome://resources/cr_elements/cr_link_row/cr_link_row.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 {navigation, Page} from './navigation_helper.js';
-import {Service} from './service.js';
-
-export interface SitePermissionsDelegate {
-  getUserSiteSettings(): Promise<chrome.developerPrivate.UserSiteSettings>;
-  addUserSpecifiedSite(
-      siteSet: chrome.developerPrivate.UserSiteSet,
-      host: string): Promise<void>;
-  removeUserSpecifiedSite(
-      siteSet: chrome.developerPrivate.UserSiteSet,
-      host: string): Promise<void>;
-}
+import {getTemplate} from './site_permissions.html.js';
+import {SiteSettingsMixin} from './site_settings_mixin.js';
 
 export interface ExtensionsSitePermissionsElement {
   $: {
@@ -32,23 +23,20 @@ export interface ExtensionsSitePermissionsElement {
   };
 }
 
-export class ExtensionsSitePermissionsElement extends PolymerElement {
+const ExtensionsSitePermissionsElementBase = SiteSettingsMixin(PolymerElement);
+
+export class ExtensionsSitePermissionsElement extends
+    ExtensionsSitePermissionsElementBase {
   static get is() {
     return 'extensions-site-permissions';
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
     return {
-      delegate: Object,
-
-      permittedSites_: Array,
-
-      restrictedSites_: Array,
-
       userSiteSetEnum_: {
         type: Object,
         value: chrome.developerPrivate.UserSiteSet,
@@ -56,32 +44,6 @@ export class ExtensionsSitePermissionsElement extends PolymerElement {
     };
   }
 
-  delegate: SitePermissionsDelegate;
-  private permittedSites_: string[];
-  private restrictedSites_: string[];
-
-  ready() {
-    super.ready();
-    const service = Service.getInstance();
-    service.getUserSiteSettingsChangedTarget().addListener(
-        this.onUserSiteSettingsChanged_.bind(this));
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.delegate.getUserSiteSettings().then(
-        ({permittedSites, restrictedSites}) => {
-          this.permittedSites_ = permittedSites;
-          this.restrictedSites_ = restrictedSites;
-        });
-  }
-
-  private onUserSiteSettingsChanged_({permittedSites, restrictedSites}: chrome
-                                         .developerPrivate.UserSiteSettings) {
-    this.permittedSites_ = permittedSites;
-    this.restrictedSites_ = restrictedSites;
-  }
-
   private onAllSitesLinkClick_() {
     navigation.navigateTo({page: Page.SITE_PERMISSIONS_ALL_SITES});
   }
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 3aeb622a906..97685479257 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_by_site.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_by_site.ts
@@ -7,9 +7,10 @@ import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import './shared_style.js';
 
 import {CrIconButtonElement} from 'chrome://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 {navigation, Page} from './navigation_helper.js';
+import {getTemplate} from './site_permissions_by_site.html.js';
 
 export interface ExtensionsSitePermissionsBySiteElement {
   $: {
@@ -23,7 +24,7 @@ export class ExtensionsSitePermissionsBySiteElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   private onCloseButtonClick_() {
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_edit_permissions_dialog.html b/chromium/chrome/browser/resources/extensions/site_permissions_edit_permissions_dialog.html
new file mode 100644
index 00000000000..7f89b94955a
--- /dev/null
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_edit_permissions_dialog.html
@@ -0,0 +1,28 @@
+<style include="cr-shared-style">
+  cr-radio-group {
+    width: 100%;
+  }
+</style>
+<cr-dialog id="dialog" show-on-attach>
+  <div slot="title">[[computeDialogTitle_(site)]]</div>
+  <div slot="body">
+    <cr-radio-group selected="{{siteSet_}}">
+      <cr-radio-button
+          name="[[userSiteSetEnum_.PERMITTED]]"
+          label="[[getPermittedSiteLabel_(site)]]">
+      </cr-radio-button>
+      <cr-radio-button
+          name="[[userSiteSetEnum_.RESTRICTED]]"
+          label="[[getRestrictedSiteLabel_(site)]]">
+      </cr-radio-button>
+    </cr-radio-group>
+  </div>
+  <div slot="button-container">
+    <cr-button class="cancel-button" on-click="onCancelClick_">
+      $i18n{cancel}
+    </cr-button>
+    <cr-button class="action-button" id="submit" on-click="onSubmitClick_">
+      $i18n{save}
+    </cr-button>
+  </div>
+</cr-dialog>
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_edit_permissions_dialog.ts b/chromium/chrome/browser/resources/extensions/site_permissions_edit_permissions_dialog.ts
new file mode 100644
index 00000000000..77e261b1bb0
--- /dev/null
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_edit_permissions_dialog.ts
@@ -0,0 +1,115 @@
+// 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/cr_radio_button/cr_radio_button.m.js';
+import 'chrome://resources/cr_elements/cr_radio_group/cr_radio_group.m.js';
+import 'chrome://resources/cr_elements/shared_style_css.m.js';
+import './strings.m.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';
+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 './site_permissions_edit_permissions_dialog.html.js';
+import {SiteSettingsDelegate} from './site_settings_mixin.js';
+
+export interface SitePermissionsEditPermissionsDialogElement {
+  $: {
+    dialog: CrDialogElement,
+    submit: CrButtonElement,
+  };
+}
+
+const SitePermissionsEditPermissionsDialogElementBase =
+    I18nMixin(PolymerElement);
+
+export class SitePermissionsEditPermissionsDialogElement extends
+    SitePermissionsEditPermissionsDialogElementBase {
+  static get is() {
+    return 'site-permissions-edit-permissions-dialog';
+  }
+
+  static get template() {
+    return getTemplate();
+  }
+
+  static get properties() {
+    return {
+      delegate: Object,
+
+      /**
+       * The current siteSet for `site`, as stored in the backend. Specifies
+       * whether `site` is a user specified permitted or restricted site.
+       */
+      originalSiteSet: String,
+
+      /**
+       * The url of the site whose permissions are currently being edited.
+       */
+      site: String,
+
+      /**
+       * The temporary siteSet for `site` as displayed in the dialog. Will be
+       * saved to the backend when the dialog is submitted.
+       */
+      siteSet_: String,
+
+      userSiteSetEnum_: {
+        type: Object,
+        value: chrome.developerPrivate.UserSiteSet,
+      },
+    };
+  }
+
+  delegate: SiteSettingsDelegate;
+  originalSiteSet: chrome.developerPrivate.UserSiteSet;
+  site: string;
+  private siteSet_: chrome.developerPrivate.UserSiteSet;
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.siteSet_ = this.originalSiteSet;
+  }
+
+  private onCancelClick_() {
+    this.$.dialog.cancel();
+  }
+
+  private onSubmitClick_() {
+    if (this.siteSet_ === this.originalSiteSet) {
+      this.$.dialog.close();
+      return;
+    }
+
+    this.delegate.addUserSpecifiedSites(this.siteSet_, [this.site]).then(() => {
+      this.$.dialog.close();
+    });
+  }
+
+  private computeDialogTitle_(): string {
+    return this.i18n('sitePermissionsEditPermissionsDialogTitle', this.site);
+  }
+
+  private getPermittedSiteLabel_(): string {
+    return this.i18n('editSitePermissionsAllowAllExtensions', this.site);
+  }
+
+  private getRestrictedSiteLabel_(): string {
+    return this.i18n('editSitePermissionsRestrictExtensions', this.site);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'site-permissions-edit-permissions-dialog':
+        SitePermissionsEditPermissionsDialogElement;
+  }
+}
+
+customElements.define(
+    SitePermissionsEditPermissionsDialogElement.is,
+    SitePermissionsEditPermissionsDialogElement);
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_add_site_dialog.html b/chromium/chrome/browser/resources/extensions/site_permissions_edit_url_dialog.html
index 03d7c2787f7..ee7ed42f6ad 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_add_site_dialog.html
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_edit_url_dialog.html
@@ -1,6 +1,6 @@
 <style include="cr-shared-style"></style>
 <cr-dialog id="dialog" show-on-attach>
-  <div slot="title">$i18n{sitePermissionsAddSiteDialogTitle}</div>
+  <div slot="title">[[computeDialogTitle_(siteToEdit)]]</div>
   <div slot="body">
     <cr-input id="input" label="$i18n{sitePermissionsDialogInputLabel}"
         placeholder="https://example.com"
@@ -17,7 +17,7 @@
     </cr-button>
     <cr-button class="action-button" id="submit" on-click="onSubmit_"
         disabled="[[computeSubmitButtonDisabled_(inputValid_, site_)]]">
-      $i18n{add}
+      [[computeSubmitButtonLabel_(siteToEdit)]]
     </cr-button>
   </div>
 </cr-dialog>
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_add_site_dialog.ts b/chromium/chrome/browser/resources/extensions/site_permissions_edit_url_dialog.ts
index 3d0076f0299..9e0f3dcab5c 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_add_site_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_edit_url_dialog.ts
@@ -10,10 +10,12 @@ import './strings.m.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';
-import {assert} from 'chrome://resources/js/assert.m.js';
-import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {SitePermissionsDelegate} from './site_permissions.js';
+import {getTemplate} from './site_permissions_edit_url_dialog.html.js';
+import {SiteSettingsDelegate} from './site_settings_mixin.js';
 
 // A RegExp to roughly match acceptable patterns entered by the user.
 // exec'ing() this RegExp will match the following groups:
@@ -22,10 +24,10 @@ import {SitePermissionsDelegate} from './site_permissions.js';
 // 2: Scheme only (e.g., 'https').
 // 3: Hostname (e.g., 'example.com').
 // 4: Port, including ':' separator (e.g., ':80').
-const patternRegExp = new RegExp(
+export const sitePermissionsPatternRegExp = new RegExp(
     '^' +
     // Scheme; optional.
-    '((http|https|\\*)://)?' +
+    '((http|https)://)?' +
     // Hostname or localhost, required.
     '([a-z0-9\\.-]+\\.[a-z0-9]+|localhost)' +
     // Port, optional.
@@ -33,7 +35,7 @@ const patternRegExp = new RegExp(
     '$');
 
 export function getSitePermissionsPatternFromSite(site: string): string {
-  const res = patternRegExp.exec(site)!;
+  const res = sitePermissionsPatternRegExp.exec(site)!;
   assert(res);
   const scheme = res[1] || 'https://';
   const host = res[3];
@@ -41,20 +43,20 @@ export function getSitePermissionsPatternFromSite(site: string): string {
   return scheme + host + port;
 }
 
-export interface SitePermissionsAddSiteDialogElement {
+export interface SitePermissionsEditUrlDialogElement {
   $: {
     dialog: CrDialogElement,
     submit: CrButtonElement,
   };
 }
 
-export class SitePermissionsAddSiteDialogElement extends PolymerElement {
+export class SitePermissionsEditUrlDialogElement extends PolymerElement {
   static get is() {
-    return 'site-permissions-add-site-dialog';
+    return 'site-permissions-edit-url-dialog';
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -62,6 +64,15 @@ export class SitePermissionsAddSiteDialogElement extends PolymerElement {
       delegate: Object,
       siteSet: String,
 
+      /**
+       * The site that this entry is currently managing. Only non-empty if this
+       * is for editing an existing entry.
+       */
+      siteToEdit: {
+        type: String,
+        value: null,
+      },
+
       site_: {
         type: String,
         value: '',
@@ -75,11 +86,21 @@ export class SitePermissionsAddSiteDialogElement extends PolymerElement {
     };
   }
 
-  delegate: SitePermissionsDelegate;
+  delegate: SiteSettingsDelegate;
   siteSet: chrome.developerPrivate.UserSiteSet;
+  siteToEdit: string|null;
   private site_: string;
   private inputValid_: boolean;
 
+  override connectedCallback() {
+    super.connectedCallback();
+
+    if (this.siteToEdit !== null) {
+      this.site_ = this.siteToEdit;
+      this.validate_();
+    }
+  }
+
   /**
    * Validates that the pattern entered is valid by testing it against the
    * regex. An empty patterh is considered "valid" as the invalid message will
@@ -87,8 +108,14 @@ export class SitePermissionsAddSiteDialogElement extends PolymerElement {
    * be disabled.
    */
   private validate_() {
-    this.inputValid_ =
-        this.site_.trim().length === 0 || patternRegExp.test(this.site_);
+    this.inputValid_ = this.site_.trim().length === 0 ||
+        sitePermissionsPatternRegExp.test(this.site_);
+  }
+
+  private computeDialogTitle_(): string {
+    return loadTimeData.getString(
+        this.siteToEdit === null ? 'sitePermissionsAddSiteDialogTitle' :
+                                   'sitePermissionsEditSiteDialogTitle');
   }
 
   private computeSubmitButtonDisabled_(): boolean {
@@ -96,13 +123,43 @@ export class SitePermissionsAddSiteDialogElement extends PolymerElement {
     return !this.inputValid_ || this.site_.trim().length === 0;
   }
 
+  private computeSubmitButtonLabel_(): string {
+    return loadTimeData.getString(this.siteToEdit === null ? 'add' : 'save');
+  }
+
   private onCancel_() {
     this.$.dialog.cancel();
   }
 
   private onSubmit_() {
     const pattern = getSitePermissionsPatternFromSite(this.site_);
-    this.delegate.addUserSpecifiedSite(this.siteSet, pattern)
+    if (this.siteToEdit !== null) {
+      this.handleEdit_(pattern);
+    } else {
+      this.handleAdd_(pattern);
+    }
+  }
+
+  private handleEdit_(pattern: string) {
+    assert(this.siteToEdit);
+    if (pattern === this.siteToEdit) {
+      this.$.dialog.close();
+      return;
+    }
+
+    this.delegate.removeUserSpecifiedSites(this.siteSet, [this.siteToEdit])
+        .then(() => {
+          this.addUserSpecifiedSite_(pattern);
+        });
+  }
+
+  private handleAdd_(pattern: string) {
+    assert(!this.siteToEdit);
+    this.addUserSpecifiedSite_(pattern);
+  }
+
+  private addUserSpecifiedSite_(pattern: string) {
+    this.delegate.addUserSpecifiedSites(this.siteSet, [pattern])
         .then(
             () => {
               this.$.dialog.close();
@@ -115,10 +172,10 @@ export class SitePermissionsAddSiteDialogElement extends PolymerElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'site-permissions-add-site-dialog': SitePermissionsAddSiteDialogElement;
+    'site-permissions-edit-url-dialog': SitePermissionsEditUrlDialogElement;
   }
 }
 
 customElements.define(
-    SitePermissionsAddSiteDialogElement.is,
-    SitePermissionsAddSiteDialogElement);
+    SitePermissionsEditUrlDialogElement.is,
+    SitePermissionsEditUrlDialogElement);
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_list.html b/chromium/chrome/browser/resources/extensions/site_permissions_list.html
index 73268813188..d3eb25f6911 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_list.html
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_list.html
@@ -44,8 +44,6 @@
       <div class="site-favicon"
           style$="background-image:[[getFaviconUrl_(item)]]"></div>
       <span class="site">[[item]]</span>
-      <cr-icon-button class="subpage-arrow no-overlap"></cr-icon-button>
-      <div class="separator"></div>
       <cr-icon-button class="icon-more-vert no-overlap" on-click="onDotsClick_">
       </cr-icon-button>
     </div>
@@ -53,17 +51,34 @@
 </div>
 
 <cr-action-menu id="siteActionMenu">
+  <button class="dropdown-item" id="edit-site-url"
+      on-click="onEditSiteUrlClick_">
+    $i18n{sitePermissionsEditUrl}
+  </button>
+  <button class="dropdown-item" id="edit-site-permissions"
+      on-click="onEditSitePermissionsClick_">
+    $i18n{sitePermissionsEditPermissions}
+  </button>
   <button class="dropdown-item" id="remove-site"
-      on-click="onActionMenuRemoveClick_">
+      on-click="onRemoveSiteClick_">
     $i18n{remove}
   </button>
 </cr-action-menu>
 
-<template is="dom-if" if="[[showAddSiteDialog_]]" restamp>
-  <site-permissions-add-site-dialog
+<template is="dom-if" if="[[showEditSiteUrlDialog_]]" restamp>
+  <site-permissions-edit-url-dialog
       delegate="[[delegate]]"
+      site-to-edit="[[siteToEdit_]]"
       site-set="[[siteSet]]"
-      on-close="onAddSiteDialogClose_"
-      on-cancel="onAddSiteDialogClose_">
-  </site-permissions-add-site-dialog>
+      on-close="onEditSiteUrlDialogClose_">
+  </site-permissions-edit-url-dialog>
+</template>
+
+<template is="dom-if" if="[[showEditSitePermissionsDialog_]]" restamp>
+  <site-permissions-edit-permissions-dialog
+      delegate="[[delegate]]"
+      site="[[siteToEdit_]]"
+      original-site-set="[[siteSet]]"
+      on-close="onEditSitePermissionsDialogClose_">
+  </site-permissions-edit-permissions-dialog>
 </template>
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_list.ts b/chromium/chrome/browser/resources/extensions/site_permissions_list.ts
index 10a70e619c9..59abd88d092 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_list.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_list.ts
@@ -10,14 +10,17 @@ import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import './strings.m.js';
 import './shared_style.js';
 import './shared_vars.js';
-import './site_permissions_add_site_dialog.js';
+import './site_permissions_edit_permissions_dialog.js';
+import './site_permissions_edit_url_dialog.js';
 
 import {CrActionMenuElement} from 'chrome://resources/cr_elements/cr_action_menu/cr_action_menu.js';
 import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
-import {assert} from 'chrome://resources/js/assert.m.js';
-import {DomRepeatEvent, html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {assert} from 'chrome://resources/js/assert_ts.js';
+import {focusWithoutInk} from 'chrome://resources/js/cr/ui/focus_without_ink.m.js';
+import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {SitePermissionsDelegate} from './site_permissions.js';
+import {getTemplate} from './site_permissions_list.html.js';
+import {SiteSettingsDelegate} from './site_settings_mixin.js';
 import {getFaviconUrl} from './url_util.js';
 
 export interface ExtensionsSitePermissionsListElement {
@@ -33,7 +36,7 @@ export class ExtensionsSitePermissionsListElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -43,20 +46,40 @@ export class ExtensionsSitePermissionsListElement extends PolymerElement {
       siteSet: String,
       sites: Array,
 
-      showAddSiteDialog_: {
+      showEditSiteUrlDialog_: {
         type: Boolean,
         value: false,
       },
+
+      showEditSitePermissionsDialog_: {
+        type: Boolean,
+        value: false,
+      },
+
+      /**
+       * The site currently being edited if the user has opened the action menu
+       * for a given site.
+       */
+      siteToEdit_: {
+        type: String,
+        value: null,
+      },
     };
   }
 
-  delegate: SitePermissionsDelegate;
+  delegate: SiteSettingsDelegate;
   header: string;
   siteSet: chrome.developerPrivate.UserSiteSet;
   sites: Array<string>;
-  private showAddSiteDialog_: boolean;
+  private showEditSiteUrlDialog_: boolean;
+  private showEditSitePermissionsDialog_: boolean;
   private siteToEdit_: string|null;
 
+  // The element to return focus to once the site input dialog closes. If
+  // specified, this is the 3 dots menu for the site just edited, otherwise it's
+  // the add site button.
+  private siteToEditAnchorElement_: HTMLElement|null = null;
+
   private hasSites_(): boolean {
     return !!this.sites.length;
   }
@@ -65,25 +88,61 @@ export class ExtensionsSitePermissionsListElement extends PolymerElement {
     return getFaviconUrl(url);
   }
 
+  private focusOnAnchor_() {
+    // Return focus to the three dots menu once a site has been edited.
+    // TODO(crbug.com/1298326): If the edited site is the only site in the
+    // list, focus is not on the three dots menu.
+    assert(this.siteToEditAnchorElement_, 'Site Anchor');
+    focusWithoutInk(this.siteToEditAnchorElement_);
+    this.siteToEditAnchorElement_ = null;
+  }
+
   private onAddSiteClick_() {
-    this.showAddSiteDialog_ = true;
+    assert(!this.showEditSitePermissionsDialog_);
+    this.siteToEdit_ = null;
+    this.showEditSiteUrlDialog_ = true;
   }
 
-  private onAddSiteDialogClose_() {
-    this.showAddSiteDialog_ = false;
+  private onEditSiteUrlDialogClose_() {
+    this.showEditSiteUrlDialog_ = false;
+    if (this.siteToEdit_ !== null) {
+      this.focusOnAnchor_();
+    }
+    this.siteToEdit_ = null;
+  }
+
+  private onEditSitePermissionsDialogClose_() {
+    this.showEditSitePermissionsDialog_ = false;
+    assert(this.siteToEdit_, 'Site To Edit');
+    this.focusOnAnchor_();
+    this.siteToEdit_ = null;
   }
 
   private onDotsClick_(e: DomRepeatEvent<string>) {
     this.siteToEdit_ = e.model.item;
+    assert(!this.showEditSitePermissionsDialog_);
     this.$.siteActionMenu.showAt(e.target as HTMLElement);
+    this.siteToEditAnchorElement_ = e.target as HTMLElement;
   }
 
-  private onActionMenuRemoveClick_() {
-    this.delegate
-        .removeUserSpecifiedSite(
-            this.siteSet, assert(this.siteToEdit_!, 'Site To Edit'))
+  private onEditSitePermissionsClick_() {
+    this.closeActionMenu_();
+    assert(this.siteToEdit_ !== null);
+    this.showEditSitePermissionsDialog_ = true;
+  }
+
+  private onEditSiteUrlClick_() {
+    this.closeActionMenu_();
+    assert(this.siteToEdit_ !== null);
+    this.showEditSiteUrlDialog_ = true;
+  }
+
+  private onRemoveSiteClick_() {
+    assert(this.siteToEdit_, 'Site To Edit');
+    this.delegate.removeUserSpecifiedSites(this.siteSet, [this.siteToEdit_])
         .then(() => {
           this.closeActionMenu_();
+          this.siteToEdit_ = null;
         });
   }
 
@@ -91,7 +150,6 @@ export class ExtensionsSitePermissionsListElement extends PolymerElement {
     const menu = this.$.siteActionMenu;
     assert(menu.open);
     menu.close();
-    this.siteToEdit_ = null;
   }
 }
 
diff --git a/chromium/chrome/browser/resources/extensions/site_settings_mixin.ts b/chromium/chrome/browser/resources/extensions/site_settings_mixin.ts
new file mode 100644
index 00000000000..14e882ca0af
--- /dev/null
+++ b/chromium/chrome/browser/resources/extensions/site_settings_mixin.ts
@@ -0,0 +1,82 @@
+// 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.
+
+/**
+ * @fileoverview Provides behavior to fetch the list of user specified permitted
+ * and restricted sites on creation and when these lists are updated. Used by
+ * multiple pages.
+ */
+
+import {ChromeEvent} from '/tools/typescript/definitions/chrome_event.js';
+import {dedupingMixin, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {ItemDelegate} from './item.js';
+
+type Constructor<T> = new (...args: any[]) => T;
+
+export interface SiteSettingsDelegate {
+  getUserSiteSettings(): Promise<chrome.developerPrivate.UserSiteSettings>;
+  addUserSpecifiedSites(
+      siteSet: chrome.developerPrivate.UserSiteSet,
+      hosts: string[]): Promise<void>;
+  removeUserSpecifiedSites(
+      siteSet: chrome.developerPrivate.UserSiteSet,
+      hosts: string[]): Promise<void>;
+  getUserSiteSettingsChangedTarget():
+      ChromeEvent<(settings: chrome.developerPrivate.UserSiteSettings) => void>;
+}
+
+export const SiteSettingsMixin = dedupingMixin(
+    <T extends Constructor<PolymerElement>>(superClass: T): T&
+    Constructor<SiteSettingsMixinInterface> => {
+      class SiteSettingsMixin extends superClass {
+        static get properties() {
+          return {
+            delegate: Object,
+            enableEnhancedSiteControls: Boolean,
+
+            restrictedSites: {
+              type: Array,
+              value: [],
+            },
+
+            permittedSites: {
+              type: Array,
+              value: [],
+            },
+          };
+        }
+
+        delegate: ItemDelegate&SiteSettingsDelegate;
+        enableEnhancedSiteControls: boolean;
+        restrictedSites: string[];
+        protected permittedSites: string[];
+
+        override ready() {
+          super.ready();
+          if (this.enableEnhancedSiteControls) {
+            this.delegate.getUserSiteSettings().then(
+                this.onUserSiteSettingsChanged_.bind(this));
+            this.delegate.getUserSiteSettingsChangedTarget().addListener(
+                this.onUserSiteSettingsChanged_.bind(this));
+          }
+        }
+
+        private onUserSiteSettingsChanged_({
+          permittedSites,
+          restrictedSites
+        }: chrome.developerPrivate.UserSiteSettings) {
+          this.permittedSites = permittedSites;
+          this.restrictedSites = restrictedSites;
+        }
+      }
+
+      return SiteSettingsMixin;
+    });
+
+export interface SiteSettingsMixinInterface {
+  delegate: ItemDelegate&SiteSettingsDelegate;
+  enableEnhancedSiteControls: boolean;
+  restrictedSites: string[];
+}
diff --git a/chromium/chrome/browser/resources/extensions/toggle_row.ts b/chromium/chrome/browser/resources/extensions/toggle_row.ts
index 188d2f99c74..b2add5114cb 100644
--- a/chromium/chrome/browser/resources/extensions/toggle_row.ts
+++ b/chromium/chrome/browser/resources/extensions/toggle_row.ts
@@ -6,7 +6,8 @@ import 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 
 import {CrToggleElement} from 'chrome://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';
 
 
 /**
@@ -29,7 +30,7 @@ export class ExtensionsToggleRowElement extends PolymerElement {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
diff --git a/chromium/chrome/browser/resources/extensions/toolbar.html b/chromium/chrome/browser/resources/extensions/toolbar.html
index 5ff14955eb7..eac706a0a83 100644
--- a/chromium/chrome/browser/resources/extensions/toolbar.html
+++ b/chromium/chrome/browser/resources/extensions/toolbar.html
@@ -105,7 +105,7 @@
         title="$i18n{toolbarUpdateNowTooltip}">
       $i18n{toolbarUpdateNow}
     </cr-button>
-<if expr="chromeos">
+<if expr="chromeos_ash">
     <cr-button id="kioskExtensions" on-click="onKioskTap_"
         hidden$="[[!kioskEnabled]]">
       $i18n{manageKioskApp}
diff --git a/chromium/chrome/browser/resources/extensions/toolbar.ts b/chromium/chrome/browser/resources/extensions/toolbar.ts
index 5ca91d1ad06..f3738304e36 100644
--- a/chromium/chrome/browser/resources/extensions/toolbar.ts
+++ b/chromium/chrome/browser/resources/extensions/toolbar.ts
@@ -15,7 +15,8 @@ import {getToastManager} from 'chrome://resources/cr_elements/cr_toast/cr_toast_
 import {CrToggleElement} from 'chrome://resources/cr_elements/cr_toggle/cr_toggle.m.js';
 import {I18nMixin} from 'chrome://resources/js/i18n_mixin.js';
 import {listenOnce} from 'chrome://resources/js/util.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 './toolbar.html.js';
 
 export interface ToolbarDelegate {
   /**
@@ -53,7 +54,7 @@ export class ExtensionsToolbarElement extends ExtensionsToolbarElementBase {
   }
 
   static get template() {
-    return html`{__html_template__}`;
+    return getTemplate();
   }
 
   static get properties() {
@@ -71,7 +72,7 @@ export class ExtensionsToolbarElement extends ExtensionsToolbarElementBase {
       devModeControlledByPolicy: Boolean,
       isChildAccount: Boolean,
 
-      // <if expr="chromeos">
+      // <if expr="chromeos_ash">
       kioskEnabled: Boolean,
       // </if>
 
@@ -93,7 +94,7 @@ export class ExtensionsToolbarElement extends ExtensionsToolbarElementBase {
   devModeControlledByPolicy: boolean;
   isChildAccount: boolean;
 
-  // <if expr="chromeos">
+  // <if expr="chromeos_ash">
   kioskEnabled: boolean;
   // </if>
 
@@ -103,12 +104,9 @@ export class ExtensionsToolbarElement extends ExtensionsToolbarElementBase {
   private showPackDialog_: boolean;
   private isUpdating_: boolean;
 
-  ready() {
+  override ready() {
     super.ready();
     this.setAttribute('role', 'banner');
-    this.toggleAttribute(
-        'enable-branding-update',
-        document.documentElement.hasAttribute('enable-branding-update'));
   }
 
   private fire_(eventName: string, detail?: any) {
@@ -185,7 +183,7 @@ export class ExtensionsToolbarElement extends ExtensionsToolbarElementBase {
     this.$.packExtensions.focus();
   }
 
-  // <if expr="chromeos">
+  // <if expr="chromeos_ash">
   private onKioskTap_() {
     this.fire_('kiosk-tap');
   }
author	Allan Sandfeld Jensen <allan.jensen@qt.io>	2022-05-17 17:24:03 +0200
committer	Allan Sandfeld Jensen <allan.jensen@qt.io>	2022-06-22 07:51:41 +0000
commit	774f54339e5db91f785733232d3950366db65d07 (patch)
tree	068e1b47bd1af94d77094ed12b604a6b83d9c22a /chromium/chrome/browser/resources/extensions
parent	f7eaed5286974984ba5f9e3189d8f49d03e99f81 (diff)