BASELINE: Update Chromium to 120.0.6099.272

Change-Id: Id1e3f32155016fcdca5b92e1739d85c6093bcf84
Reviewed-on: https://codereview.qt-project.org/c/qt/qtwebengine-chromium/+/534618
Reviewed-by: Allan Sandfeld Jensen <allan.jensen@qt.io>

30 files changed, 221 insertions, 112 deletions

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 7f49b3ecd5a..3aec7ac4fd4 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,7 +9,7 @@ import 'chrome://resources/cr_elements/cr_search_field/cr_search_field.js';
 import '../shared_style.css.js';
 import './activity_log_history_item.js';
 
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {PromiseResolver} from 'chrome://resources/js/promise_resolver.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
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 888a7785d55..e331c5eb189 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,7 +9,7 @@ import '../shared_style.css.js';
 import './activity_log_stream_item.js';
 
 import {ChromeEvent} from '/tools/typescript/definitions/chrome_event.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getTemplate} from './activity_log_stream.html.js';
diff --git a/chromium/chrome/browser/resources/extensions/detail_view.ts b/chromium/chrome/browser/resources/extensions/detail_view.ts
index f22d3e08540..5c4c23c285d 100644
--- a/chromium/chrome/browser/resources/extensions/detail_view.ts
+++ b/chromium/chrome/browser/resources/extensions/detail_view.ts
@@ -28,7 +28,7 @@ import {CrLinkRowElement} from 'chrome://resources/cr_elements/cr_link_row/cr_li
 import {CrToggleElement} from 'chrome://resources/cr_elements/cr_toggle/cr_toggle.js';
 import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
 import {CrTooltipIconElement} from 'chrome://resources/cr_elements/policy/cr_tooltip_icon.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {focusWithoutInk} from 'chrome://resources/js/focus_without_ink.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {afterNextRender, DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -415,7 +415,12 @@ export class ExtensionsDetailViewElement extends
     if (!loadTimeData.getBoolean('safetyCheckShowReviewPanel')) {
       return false;
     }
-
+    const ExtensionType = chrome.developerPrivate.ExtensionType;
+    // Check to make sure this is an extension and not a Chrome app.
+    if (!(this.data.type === ExtensionType.EXTENSION ||
+          this.data.type === ExtensionType.SHARED_MODULE)) {
+      return false;
+    }
     return !!(
         this.data.safetyCheckText && this.data.safetyCheckText.detailString &&
         this.data.acknowledgeSafetyCheckWarning !== true);
diff --git a/chromium/chrome/browser/resources/extensions/error_page.ts b/chromium/chrome/browser/resources/extensions/error_page.ts
index cad5df0eb7c..ad076614ba6 100644
--- a/chromium/chrome/browser/resources/extensions/error_page.ts
+++ b/chromium/chrome/browser/resources/extensions/error_page.ts
@@ -14,7 +14,7 @@ import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
 import './code_section.js';
 import './shared_style.css.js';
 
-import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
+import {assert, assertNotReached} from 'chrome://resources/js/assert.js';
 import {FocusOutlineManager} from 'chrome://resources/js/focus_outline_manager.js';
 import {focusWithoutInk} from 'chrome://resources/js/focus_without_ink.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.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 8a0822f1411..7a576fddba5 100644
--- a/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.ts
+++ b/chromium/chrome/browser/resources/extensions/host_permissions_toggle_list.ts
@@ -11,7 +11,7 @@ import './toggle_row.js';
 import './shared_style.css.js';
 import './strings.m.js';
 
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getTemplate} from './host_permissions_toggle_list.html.js';
diff --git a/chromium/chrome/browser/resources/extensions/item.ts b/chromium/chrome/browser/resources/extensions/item.ts
index efeb5244449..34c8d16bb05 100644
--- a/chromium/chrome/browser/resources/extensions/item.ts
+++ b/chromium/chrome/browser/resources/extensions/item.ts
@@ -24,7 +24,7 @@ import {ChromeEvent} from '/tools/typescript/definitions/chrome_event.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.js';
 import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
-import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
+import {assert, assertNotReached} from 'chrome://resources/js/assert.js';
 import {flush, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getTemplate} from './item.html.js';
diff --git a/chromium/chrome/browser/resources/extensions/item_list.html b/chromium/chrome/browser/resources/extensions/item_list.html
index 807d3076ee9..fb27d6f9b68 100644
--- a/chromium/chrome/browser/resources/extensions/item_list.html
+++ b/chromium/chrome/browser/resources/extensions/item_list.html
@@ -51,13 +51,12 @@
   }
 
   .items-container.review-panel-container :first-child {
-    max-width: var(--cr-toolbar-field-width);
+    max-width: calc(var(--extensions-card-width) * 2 + var(--grid-gutter) * 2);
     grid-column: 1 / -1;
-    padding-bottom: 48px;
   }
 
   extensions-review-panel {
-    margin: 0 auto;
+    margin: 15px auto;
     width: 100%;
   }
 
diff --git a/chromium/chrome/browser/resources/extensions/item_list.ts b/chromium/chrome/browser/resources/extensions/item_list.ts
index 4b121dbace3..62a2a93b979 100644
--- a/chromium/chrome/browser/resources/extensions/item_list.ts
+++ b/chromium/chrome/browser/resources/extensions/item_list.ts
@@ -8,7 +8,6 @@ import './shared_style.css.js';
 import './review_panel.js';
 
 import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {IronA11yAnnouncer} from 'chrome://resources/polymer/v3_0/iron-a11y-announcer/iron-a11y-announcer.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -67,7 +66,8 @@ export class ExtensionsItemListElement extends ExtensionsItemListElementBase {
 
       showSafetyCheckReviewPanel_: {
         type: Boolean,
-        value: () => loadTimeData.getBoolean('safetyCheckShowReviewPanel'),
+        value: () => loadTimeData.getBoolean('safetyCheckShowReviewPanel') ||
+            loadTimeData.getBoolean('safetyHubShowReviewPanel'),
       },
 
       hasSafetyCheckTriggeringExtension_: {
@@ -110,13 +110,24 @@ export class ExtensionsItemListElement extends ExtensionsItemListElementBase {
   /**
    * Focus the remove button for the item matching `id`. If the remove button is
    * not visible, focus the details button instead.
+   * return: If an item's button has been focused, see comment below.
    */
-  focusItemButton(id: string) {
+  focusItemButton(id: string): boolean {
     const item =
         this.shadowRoot!.querySelector<ExtensionsItemElement>(`#${id}`);
-    assert(item);
+    // This function is called from a setTimeout() inside manager.ts. Rarely,
+    // the list of extensions rendered in this element may not match the list of
+    // extensions stored in manager.ts for a brief moment (not visible to the
+    // user). As a result, `item` here may be null even though `id` points to
+    // an extension inside `manager.ts`. If this happens, do not focus anything.
+    // Observed in crbug.com/1482580.
+    if (!item) {
+      return false;
+    }
+
     const buttonToFocus = item.getRemoveButton() || item.getDetailsButton();
     buttonToFocus!.focus();
+    return true;
   }
 
   /**
@@ -134,6 +145,11 @@ export class ExtensionsItemListElement extends ExtensionsItemListElementBase {
     return i => [i.name, i.id].some(
                s => s.toLowerCase().includes(formattedFilter));
   }
+  private computeShowSafetyCheckReviewPanel_(): boolean {
+    return (
+        loadTimeData.getBoolean('safetyCheckShowReviewPanel') ||
+        loadTimeData.getBoolean('safetyHubShowReviewPanel'));
+  }
 
   private computeHasSafetyCheckTriggeringExtension_(): boolean {
     if (!this.extensions) {
diff --git a/chromium/chrome/browser/resources/extensions/item_mixin.ts b/chromium/chrome/browser/resources/extensions/item_mixin.ts
index 05c1de1b277..a5dedcdef7d 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_ts.js';
+import {assertNotReached} from 'chrome://resources/js/assert.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {dedupingMixin, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
diff --git a/chromium/chrome/browser/resources/extensions/item_util.ts b/chromium/chrome/browser/resources/extensions/item_util.ts
index 3dc19d847b0..ffa73b14ca6 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_ts.js';
+import {assertNotReached} from 'chrome://resources/js/assert.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 
 export enum SourceType {
diff --git a/chromium/chrome/browser/resources/extensions/kiosk_dialog.ts b/chromium/chrome/browser/resources/extensions/kiosk_dialog.ts
index 9b9c7fa9d74..c6319b8f318 100644
--- a/chromium/chrome/browser/resources/extensions/kiosk_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/kiosk_dialog.ts
@@ -14,7 +14,7 @@ import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_butto
 import {CrCheckboxElement} from 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.js';
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
 import {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {WebUiListenerMixin} from 'chrome://resources/cr_elements/web_ui_listener_mixin.js';
 import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
diff --git a/chromium/chrome/browser/resources/extensions/load_error.ts b/chromium/chrome/browser/resources/extensions/load_error.ts
index bd376f152e4..e3ac5be27ef 100644
--- a/chromium/chrome/browser/resources/extensions/load_error.ts
+++ b/chromium/chrome/browser/resources/extensions/load_error.ts
@@ -10,7 +10,7 @@ import './code_section.js';
 import './strings.m.js';
 
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {ExtensionsCodeSectionElement} from './code_section.js';
diff --git a/chromium/chrome/browser/resources/extensions/manager.ts b/chromium/chrome/browser/resources/extensions/manager.ts
index d523a1abf81..a8ae24bb7fb 100644
--- a/chromium/chrome/browser/resources/extensions/manager.ts
+++ b/chromium/chrome/browser/resources/extensions/manager.ts
@@ -31,7 +31,7 @@ import './kiosk_dialog.js';
 
 import {CrContainerShadowMixin} from 'chrome://resources/cr_elements/cr_container_shadow_mixin.js';
 import {CrViewManagerElement} from 'chrome://resources/cr_elements/cr_view_manager/cr_view_manager.js';
-import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
+import {assert, assertNotReached} from 'chrome://resources/js/assert.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {PromiseResolver} from 'chrome://resources/js/promise_resolver.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -546,7 +546,12 @@ export class ExtensionsManagerElement extends ExtensionsManagerElementBase {
       if (this.get(listId).length) {
         const focusIndex = Math.min(this.get(listId).length - 1, index);
         const itemToFocusId = this.get([listId, focusIndex])!.id;
-        this.$['items-list'].focusItemButton(itemToFocusId);
+
+        // In the rare case where the item cannot be focused despite existing,
+        // focus the search bar.
+        if (!this.$['items-list'].focusItemButton(itemToFocusId)) {
+          this.$.toolbar.focusSearchInput();
+        }
       } else {
         this.$.toolbar.focusSearchInput();
       }
diff --git a/chromium/chrome/browser/resources/extensions/navigation_helper.ts b/chromium/chrome/browser/resources/extensions/navigation_helper.ts
index c6ee19e0d7c..04404d65f37 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_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 
 
 /**
diff --git a/chromium/chrome/browser/resources/extensions/pack_dialog_alert.ts b/chromium/chrome/browser/resources/extensions/pack_dialog_alert.ts
index 1b2f902793c..714078dd635 100644
--- a/chromium/chrome/browser/resources/extensions/pack_dialog_alert.ts
+++ b/chromium/chrome/browser/resources/extensions/pack_dialog_alert.ts
@@ -7,7 +7,7 @@ import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
 import 'chrome://resources/cr_elements/cr_shared_style.css.js';
 
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
-import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
+import {assert, assertNotReached} from 'chrome://resources/js/assert.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
diff --git a/chromium/chrome/browser/resources/extensions/review_panel.html b/chromium/chrome/browser/resources/extensions/review_panel.html
index 82b128f9fdf..2fd4d57bd3b 100644
--- a/chromium/chrome/browser/resources/extensions/review_panel.html
+++ b/chromium/chrome/browser/resources/extensions/review_panel.html
@@ -4,10 +4,21 @@
     margin-inline-start: 15px;
   }
 
+  .card-background {
+    background-color: var(--cr-card-background-color);
+    border-radius: var(--cr-card-border-radius);
+    box-shadow: var(--cr-card-shadow);
+  }
+
   .header-with-icon {
     align-items: center;
     display: flex;
-    padding: 0 30px 15px 0px;
+  }
+
+  #safetyHubTitleContainer {
+    font-size: 15px;
+    font-weight: 400;
+    margin: 0 0 16px 5px;
   }
 
   .header-with-icon h3 {
@@ -26,13 +37,12 @@
   }
 
   iron-icon[icon='cr:check'] {
-    background-color: var(--google-green-50);
+    padding-inline-start: 10px;
     fill: var(--google-green-700);
   }
 
   @media (prefers-color-scheme: dark) {
     iron-icon[icon='cr:check'] {
-      background-color: var(--google-green-300);
       fill: var(--grey-900-white-4-percent);
     }
   }
@@ -63,6 +73,7 @@
     margin-top: 20px;
     font-weight: 500;
     font-size: 14px;
+    min-height: 42px;
   }
 
   #extension-icon {
@@ -70,18 +81,21 @@
     width: var(--cr-icon-size);
   }
 
-  .extension-row {
-    padding-inline-end: 20px;
-    padding-inline-start: 50px;
+  .extension-list{
+    border-top: var(--cr-separator-line);
+    padding: 0px 0px 15px 0px;
   }
 
-  .extension-row.cr-row {
-    border: none;
+  .extension-row {
+    border-top: none;
+    padding-inline-end: 20px;
+    padding-inline-start: 27px;
   }
 
   .display-name {
     flex: 1;
-    margin: 8px 16px;
+    padding-inline-start: 18px;
+    margin: 15px 8px 0 8px;
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -92,70 +106,96 @@
   }
 
   .cr-row.first {
+    align-items: center;
     padding-top: 5px;
-    padding-left: 0px;
   }
+
+  /* 946px is the min width for two extension cards to display. Under
+   * 946px and the layout will shift, and the review panel will shift
+   * with it. */
+  @media (max-width:946px) {
+    .header-with-icon {
+      display: grid;
+      grid-template-columns: auto auto;
+    }
+
+    #removeAllButton {
+      grid-column: 2;
+      margin-inline-start: 20px;
+      margin-inline-end: auto;
+      margin-top: 10px;
+    }
+
+    .header-icon {
+      margin-top: 40px;
+    }
+  }
+
 </style>
-<cr-expand-button class="cr-row first" no-hover
-    id="expandButton"
-    expanded="{{unsafeExtensionsReviewListExpanded_}}"
-    hidden$="[[!shouldShowUnsafeExtensions_]]">
-  <div class="header-with-icon" id="reviewPanelContainer">
-    <iron-icon aria-hidden="true" icon="cr:extension" class="header-icon">
-      <!-- TODO(crbug.com/1432194):Will replace this
-        info icon with the correct header icon -->
-    </iron-icon>
-    <div class="text-container">
-      <h3 id="headingText">[[headerString_]]</h3>
-      <div
-        class="cr-secondary-text"
-        id="secondaryText">
-          [[subtitleString_]]
-      </div>
-    </div>
-  </div>
-</cr-expand-button>
-<iron-collapse class="extension-list"
-    opened="[[unsafeExtensionsReviewListExpanded_]]"
-    hidden$="[[!shouldShowUnsafeExtensions_]]">
-  <template is="dom-repeat" items="[[unsafeExtensions_]]">
-    <div class="extension-row cr-row">
-      <img id="extension-icon" src="[[item.iconUrl]]" role="presentation">
-      <div class="display-name text-elide">
-        <div class="extension-representation">[[item.name]]</div>
-        <div class="cr-secondary-text">
-          [[item.safetyCheckText.panelString]]
+<h2 id="safetyHubTitleContainer"
+    hidden$="[[!shouldShowSafetyHubHeader_]]">
+  $i18n{safetyHubHeader}
+</h2>
+<div class="card-background"  hidden$="[[shouldHideUnsafePanel_]]">
+  <cr-expand-button class="cr-row first" no-hover
+      id="expandButton"
+      expanded="{{unsafeExtensionsReviewListExpanded_}}"
+      hidden$="[[!shouldShowUnsafeExtensions_]]">
+    <div class="header-with-icon" id="reviewPanelContainer">
+      <iron-icon aria-hidden="true" icon="cr:extension" class="header-icon">
+        <!-- TODO(crbug.com/1432194):Will replace this
+          info icon with the correct header icon -->
+      </iron-icon>
+      <div class="text-container">
+        <h3 id="headingText">[[headerString_]]</h3>
+        <div
+          class="cr-secondary-text"
+          id="secondaryText">
+            [[subtitleString_]]
         </div>
       </div>
-      <cr-icon-button iron-icon="cr:delete"
-          actionable on-click="onRemoveExtensionClick_"
-          aria-label="[[getRemoveButtonA11yLabel_(item.name)]]">
-      </cr-icon-button>
-      <cr-icon-button class="icon-more-vert header-aligned-button"
-        id="makeExceptionMenuButton"
-        on-click="onMakeExceptionMenuClick_"
-        aria-label="[[getOptionMenuA11yLabel_(item.name)]]"
-        focus-type="makeExceptionMenuButton"></cr-icon-button>
-    </div>
-  </template>
-  <div class="cr-row first">
-    <cr-button
+      <cr-button
         class="action-button bulk-action-button"
         id="removeAllButton"
         on-click="onRemoveAllClick_">
           $i18n{safetyCheckRemoveAll}
-    </cr-button>
+      </cr-button>
+    </div>
+  </cr-expand-button>
+  <iron-collapse class="extension-list"
+      opened="[[unsafeExtensionsReviewListExpanded_]]"
+      hidden$="[[!shouldShowUnsafeExtensions_]]">
+    <template is="dom-repeat" items="[[unsafeExtensions_]]">
+      <div class="extension-row cr-row">
+        <img id="extension-icon" src="[[item.iconUrl]]" role="presentation">
+        <div class="display-name text-elide">
+          <div class="extension-representation">[[item.name]]</div>
+          <div class="cr-secondary-text">
+            [[item.safetyCheckText.panelString]]
+          </div>
+        </div>
+        <cr-icon-button iron-icon="cr:delete"
+            actionable on-click="onRemoveExtensionClick_"
+            aria-label="[[getRemoveButtonA11yLabel_(item.name)]]">
+        </cr-icon-button>
+        <cr-icon-button class="icon-more-vert header-aligned-button"
+          id="makeExceptionMenuButton"
+          on-click="onMakeExceptionMenuClick_"
+          aria-label="[[getOptionMenuA11yLabel_(item.name)]]"
+          focus-type="makeExceptionMenuButton"></cr-icon-button>
+      </div>
+    </template>
+  </iron-collapse>
+  <div class="header-with-icon completion-container"
+      hidden$="[[!shouldShowCompletionInfo_]]">
+    <iron-icon role="img" icon="cr:check"></iron-icon>
+    <span class="header-group-wrapper">[[completionMessage_]]</span>
   </div>
-</iron-collapse>
-<div class="header-with-icon completion-container"
-    hidden$="[[!shouldShowCompletionInfo_]]">
-  <iron-icon role="img" icon="cr:check"></iron-icon>
-  <span class="header-group-wrapper">$i18n{safetyCheckAllDoneForNow}</span>
+  <cr-action-menu id="makeExceptionMenu">
+    <button id="menuKeepExtension"
+      class="dropdown-item"
+      on-click="onKeepExtensionClick_">
+        $i18n{safetyCheckKeepExtension}
+    </button>
+  </cr-action-menu>
 </div>
-<cr-action-menu id="makeExceptionMenu">
-  <button id="menuKeepExtension"
-    class="dropdown-item"
-    on-click="onKeepExtensionClick_">
-      $i18n{safetyCheckKeepExtension}
-  </button>
-</cr-action-menu>
diff --git a/chromium/chrome/browser/resources/extensions/review_panel.ts b/chromium/chrome/browser/resources/extensions/review_panel.ts
index d7884221096..2e767208298 100644
--- a/chromium/chrome/browser/resources/extensions/review_panel.ts
+++ b/chromium/chrome/browser/resources/extensions/review_panel.ts
@@ -28,6 +28,7 @@ export interface ExtensionsReviewPanelElement {
     makeExceptionMenu: CrActionMenuElement,
     reviewPanelContainer: HTMLDivElement,
     expandButton: CrExpandButtonElement,
+    safetyHubTitleContainer: HTMLElement,
     headingText: HTMLElement,
     secondaryText: HTMLElement,
     removeAllButton: CrButtonElement,
@@ -66,11 +67,21 @@ export class ExtensionsReviewPanelElement extends
       subtitleString_: String,
 
       /**
+       * The text of the safety check completion state.
+       */
+      completionMessage_: String,
+
+      /**
        * List of potentially unsafe extensions. This list being empty
        * indicates that there are no unsafe extensions to review.
        */
       unsafeExtensions_: Array,
 
+      shouldShowSafetyHubHeader_: {
+        type: Boolean,
+        computed: 'computeShouldShowSafetyHubHeader_(shouldHideUnsafePanel_)',
+      },
+
       /**
        * Indicates whether to show completion info after user has finished the
        * review process.
@@ -78,7 +89,7 @@ export class ExtensionsReviewPanelElement extends
       shouldShowCompletionInfo_: {
         type: Boolean,
         computed:
-            'computeShouldShowCompletionInfo_(extensions.*, hasChangeBeenMade_)',
+            'computeShouldShowCompletionInfo_(extensions.*, reviewPanelShown_)',
       },
 
       /**
@@ -90,6 +101,15 @@ export class ExtensionsReviewPanelElement extends
       },
 
       /**
+       * Indicates whether to show any part of the Review Panel.
+       */
+      shouldHideUnsafePanel_: {
+        type: Boolean,
+        computed:
+            'computeShouldHideUnsafePanel_(shouldShowUnsafeExtensions_, shouldShowCompletionInfo_)',
+      },
+
+      /**
        * Indicates if the list of unsafe extensions is expanded or collapsed.
        */
       unsafeExtensionsReviewListExpanded_: {
@@ -100,7 +120,15 @@ export class ExtensionsReviewPanelElement extends
       /**
        * Indicates if any potential unsafe extensions has been kept or removed.
        */
-      hasChangeBeenMade_: {
+      numberOfExtensionsChanged_: {
+        type: Number,
+        value: 1,
+      },
+
+      /**
+       * Indicates if the review panel has ever been shown.
+       */
+      reviewPanelShown_: {
         type: Boolean,
         value: false,
       },
@@ -119,14 +147,18 @@ export class ExtensionsReviewPanelElement extends
 
   delegate: ItemDelegate&ReviewItemDelegate;
   extensions: chrome.developerPrivate.ExtensionInfo[];
-  private hasChangeBeenMade_: boolean;
+  private numberOfExtensionsChanged_: number;
+  private reviewPanelShown_: boolean;
   private completionMetricLogged_: boolean;
   private unsafeExtensions_: chrome.developerPrivate.ExtensionInfo[];
   private headerString_: string;
   private subtitleString_: string;
   private unsafeExtensionsReviewListExpanded_: boolean;
+  private completionMessage_: string;
+  private shouldShowSafetyHubHeader_: boolean;
   private shouldShowCompletionInfo_: boolean;
   private shouldShowUnsafeExtensions_: boolean;
+  private shouldHideUnsafePanel_: boolean;
   private lastClickedExtensionId_: string;
 
   private async onExtensionsChanged_() {
@@ -137,6 +169,9 @@ export class ExtensionsReviewPanelElement extends
     this.subtitleString_ =
         await PluralStringProxyImpl.getInstance().getPluralString(
             'safetyCheckDescription', this.unsafeExtensions_.length);
+    this.completionMessage_ =
+        await PluralStringProxyImpl.getInstance().getPluralString(
+            'safetyCheckAllDoneForNow', this.numberOfExtensionsChanged_);
   }
 
   private getUnsafeExtensions_(extensions:
@@ -157,7 +192,7 @@ export class ExtensionsReviewPanelElement extends
   private computeShouldShowCompletionInfo_(): boolean {
     const updatedUnsafeExtensions =
         this.getUnsafeExtensions_(this.extensions) || [];
-    if (this.hasChangeBeenMade_ && updatedUnsafeExtensions.length === 0) {
+    if (this.reviewPanelShown_ && updatedUnsafeExtensions.length === 0) {
       if (!this.completionMetricLogged_) {
         this.completionMetricLogged_ = true;
         chrome.metricsPrivate.recordUserAction('SafetyCheck.ReviewCompletion');
@@ -176,12 +211,23 @@ export class ExtensionsReviewPanelElement extends
         chrome.metricsPrivate.recordUserAction('SafetyCheck.ReviewPanelShown');
       }
       this.completionMetricLogged_ = false;
+      this.reviewPanelShown_ = true;
       return true;
     } else {
       return false;
     }
   }
 
+  private computeShouldShowSafetyHubHeader_(): boolean {
+    return loadTimeData.getBoolean('safetyHubShowReviewPanel') &&
+        !this.shouldHideUnsafePanel_;
+  }
+
+  private computeShouldHideUnsafePanel_(): boolean {
+    return !(
+        this.shouldShowUnsafeExtensions_ || this.shouldShowCompletionInfo_);
+  }
+
   /**
    * Opens the extension action menu.
    */
@@ -201,7 +247,6 @@ export class ExtensionsReviewPanelElement extends
     if (this.lastClickedExtensionId_) {
       this.delegate.setItemSafetyCheckWarningAcknowledged(
           this.lastClickedExtensionId_);
-      this.hasChangeBeenMade_ = true;
     }
   }
 
@@ -221,25 +266,24 @@ export class ExtensionsReviewPanelElement extends
         'SafetyCheck.ReviewPanelRemoveClicked');
     try {
       await this.delegate.uninstallItem(e.model.item.id);
-      this.hasChangeBeenMade_ = true;
     } catch (_) {
       // The error was almost certainly the user canceling the dialog.
       // Do nothing.
     }
   }
 
-  private async onRemoveAllClick_(): Promise<void> {
+  private async onRemoveAllClick_(event: Event): Promise<void> {
     chrome.metricsPrivate.recordUserAction(
         'SafetyCheck.ReviewPanelRemoveAllClicked');
+    event.stopPropagation();
     try {
+      this.numberOfExtensionsChanged_ = this.unsafeExtensions_.length;
       await this.delegate.deleteItems(
           this.unsafeExtensions_.map(extension => extension.id));
-      // If the Remove button was clicked and no errors were thrown, change
-      // the flag.
-      this.hasChangeBeenMade_ = true;
     } catch (_) {
       // The error was almost certainly the user canceling the dialog.
-      // Do nothing.
+      // Reset `numberOfExtensionsChanged_`.
+      this.numberOfExtensionsChanged_ = 1;
     }
   }
 }
diff --git a/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts b/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts
index 0d0fa2d9ed2..1da0557aa7d 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts
+++ b/chromium/chrome/browser/resources/extensions/runtime_host_permissions.ts
@@ -21,7 +21,7 @@ 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.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {focusWithoutInk} from 'chrome://resources/js/focus_without_ink.js';
 import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
diff --git a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts
index 8ffc28b354d..c1846bdb31f 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.ts
@@ -13,7 +13,7 @@ import './shared_vars.css.js';
 
 import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
diff --git a/chromium/chrome/browser/resources/extensions/service.ts b/chromium/chrome/browser/resources/extensions/service.ts
index 8aaf6e8272a..eb91927f93e 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_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 
 import {ActivityLogDelegate} from './activity_log/activity_log_history.js';
 import {ActivityLogEventDelegate} from './activity_log/activity_log_stream.js';
diff --git a/chromium/chrome/browser/resources/extensions/shortcut_input.ts b/chromium/chrome/browser/resources/extensions/shortcut_input.ts
index 28aa6bc54a9..4bcd1caa68b 100644
--- a/chromium/chrome/browser/resources/extensions/shortcut_input.ts
+++ b/chromium/chrome/browser/resources/extensions/shortcut_input.ts
@@ -9,7 +9,7 @@ import 'chrome://resources/cr_elements/cr_hidden_style.css.js';
 import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
 
 import {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
 import {IronA11yAnnouncer} from 'chrome://resources/polymer/v3_0/iron-a11y-announcer/iron-a11y-announcer.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
diff --git a/chromium/chrome/browser/resources/extensions/shortcut_util.ts b/chromium/chrome/browser/resources/extensions/shortcut_util.ts
index 5a392fd7eb7..48bae316a54 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_ts.js';
+import {assertNotReached} from 'chrome://resources/js/assert.js';
 import {isChromeOS, isMac} from 'chrome://resources/js/platform.js';
 
 
diff --git a/chromium/chrome/browser/resources/extensions/sidebar.ts b/chromium/chrome/browser/resources/extensions/sidebar.ts
index d0997e4433f..1e815f3a4c5 100644
--- a/chromium/chrome/browser/resources/extensions/sidebar.ts
+++ b/chromium/chrome/browser/resources/extensions/sidebar.ts
@@ -12,7 +12,7 @@ import './icons.html.js';
 import './shared_vars.css.js';
 
 import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {IronSelectorElement} from 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
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
index 3852948d739..043f801db34 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_edit_permissions_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_edit_permissions_dialog.ts
@@ -13,7 +13,7 @@ import './strings.m.js';
 import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
 import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_edit_url_dialog.ts b/chromium/chrome/browser/resources/extensions/site_permissions_edit_url_dialog.ts
index e02992fbd7e..7ed78e7434a 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_edit_url_dialog.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_edit_url_dialog.ts
@@ -10,7 +10,7 @@ import './strings.m.js';
 
 import {CrButtonElement} from 'chrome://resources/cr_elements/cr_button/cr_button.js';
 import {CrDialogElement} from 'chrome://resources/cr_elements/cr_dialog/cr_dialog.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_list.ts b/chromium/chrome/browser/resources/extensions/site_permissions_list.ts
index c44c9612422..41eb130e707 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_list.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_list.ts
@@ -15,7 +15,7 @@ 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.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {focusWithoutInk} from 'chrome://resources/js/focus_without_ink.js';
 import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
diff --git a/chromium/chrome/browser/resources/extensions/site_permissions_site_group.ts b/chromium/chrome/browser/resources/extensions/site_permissions_site_group.ts
index 85e34b1478f..7b4cde80714 100644
--- a/chromium/chrome/browser/resources/extensions/site_permissions_site_group.ts
+++ b/chromium/chrome/browser/resources/extensions/site_permissions_site_group.ts
@@ -11,7 +11,7 @@ import './shared_style.css.js';
 import './shared_vars.css.js';
 import './site_permissions_edit_permissions_dialog.js';
 
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert} from 'chrome://resources/js/assert.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {DomRepeatEvent, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
diff --git a/chromium/chrome/browser/resources/extensions/toolbar.html b/chromium/chrome/browser/resources/extensions/toolbar.html
index 1c0187a24f9..28e938fc237 100644
--- a/chromium/chrome/browser/resources/extensions/toolbar.html
+++ b/chromium/chrome/browser/resources/extensions/toolbar.html
@@ -71,7 +71,7 @@
 </style>
 <cr-toolbar id="toolbar" page-name="$i18n{toolbarTitle}"
     search-prompt="$i18n{search}" clear-label="$i18n{clearSearch}" autofocus
-    menu-label="$i18n{mainMenu}" narrow="{{narrow}}" narrow-threshold="1200"
+    menu-label="$i18n{mainMenu}" narrow="{{narrow}}" narrow-threshold="1000"
     show-menu="[[narrow]]">
   <div class="more-actions">
     <span id="devModeLabel">$i18n{toolbarDevMode}</span>
diff --git a/chromium/chrome/browser/resources/extensions/toolbar.ts b/chromium/chrome/browser/resources/extensions/toolbar.ts
index 2a16f0a3a08..5aeeef76f86 100644
--- a/chromium/chrome/browser/resources/extensions/toolbar.ts
+++ b/chromium/chrome/browser/resources/extensions/toolbar.ts
@@ -15,7 +15,7 @@ import {getToastManager} from 'chrome://resources/cr_elements/cr_toast/cr_toast_
 import {CrToggleElement} from 'chrome://resources/cr_elements/cr_toggle/cr_toggle.js';
 import {CrToolbarElement} from 'chrome://resources/cr_elements/cr_toolbar/cr_toolbar.js';
 import {I18nMixin} from 'chrome://resources/cr_elements/i18n_mixin.js';
-import {listenOnce} from 'chrome://resources/js/util_ts.js';
+import {listenOnce} from 'chrome://resources/js/util.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {getTemplate} from './toolbar.html.js';
diff --git a/chromium/chrome/browser/resources/extensions/url_util.ts b/chromium/chrome/browser/resources/extensions/url_util.ts
index 4b8cdcb1de2..e57acf7db3b 100644
--- a/chromium/chrome/browser/resources/extensions/url_util.ts
+++ b/chromium/chrome/browser/resources/extensions/url_util.ts
@@ -9,7 +9,7 @@ export const SUBDOMAIN_SPECIFIER = '*.';
 /**
  * Returns a favicon url for a given site.
  */
-export function getFaviconUrl(site: string, size: number = 20): string {
+export function getFaviconUrl(site: string): string {
   // Use 'http' as the scheme if `site` has a wildcard scheme.
   let faviconUrl =
       site.startsWith('*://') ? site.replace('*://', 'http://') : site;
@@ -21,7 +21,7 @@ export function getFaviconUrl(site: string, size: number = 20): string {
 
   return getFaviconForPageURL(
       faviconUrl, /*isSyncedUrlForHistoryUi=*/ false,
-      /*remoteIconUrlForUma=*/ '', size);
+      /*remoteIconUrlForUma=*/ '', /*size=*/ 20);
 }
 
 /**