BASELINE: Update Chromium to 77.0.3865.59

Change-Id: I1e89a5f3b009a9519a6705102ad65c92fe736f21
Reviewed-by: Michael Brüning <michael.bruning@qt.io>

36 files changed, 362 insertions, 323 deletions

diff --git a/chromium/chrome/browser/resources/extensions/BUILD.gn b/chromium/chrome/browser/resources/extensions/BUILD.gn
index 375e5e59731..7a60d45137f 100644
--- a/chromium/chrome/browser/resources/extensions/BUILD.gn
+++ b/chromium/chrome/browser/resources/extensions/BUILD.gn
@@ -115,11 +115,11 @@ js_library("detail_view") {
 
 js_library("drag_and_drop_handler") {
   deps = [
+    ":service",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:cr",
     "//ui/webui/resources/js/cr/ui:drag_wrapper",
   ]
-  externs_list = [ "$externs_path/developer_private.js" ]
 }
 
 js_library("drop_overlay") {
diff --git a/chromium/chrome/browser/resources/extensions/activity_log/activity_log.html b/chromium/chrome/browser/resources/extensions/activity_log/activity_log.html
index ab435e74868..6a10765807b 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log.html
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log.html
@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_tabs/cr_tabs.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
@@ -18,11 +19,7 @@
 
 <dom-module id="extensions-activity-log">
   <template>
-    <style include="cr-icons shared-style">
-      #activity-log-heading {
-        @apply --cr-title-text;
-      }
-
+    <style include="cr-icons cr-shared-style shared-style">
       #clear-activities-button {
         margin-inline-start: 8px;
       }
@@ -75,7 +72,7 @@
                     '$i18nPolymer{appIcon}',
                     '$i18nPolymer{extensionIcon}')]]">
           </template>
-          <div id="activity-log-heading">
+          <div class="cr-title-text">
             [[getActivityLogHeading_(extensionInfo)]]
           </div>
         </div>
diff --git a/chromium/chrome/browser/resources/extensions/activity_log/activity_log.js b/chromium/chrome/browser/resources/extensions/activity_log/activity_log.js
index 8f29629fe85..3f3d33e0990 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log.js
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log.js
@@ -147,10 +147,12 @@ cr.define('extensions', function() {
     /** @private */
     onCloseButtonTap_: function() {
       if (this.extensionInfo.isPlaceholder) {
-        extensions.navigation.navigateTo({page: Page.LIST});
+        extensions.navigation.navigateTo({page: extensions.Page.LIST});
       } else {
-        extensions.navigation.navigateTo(
-            {page: Page.DETAILS, extensionId: this.extensionInfo.id});
+        extensions.navigation.navigateTo({
+          page: extensions.Page.DETAILS,
+          extensionId: this.extensionInfo.id
+        });
       }
     },
   });
diff --git a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.html b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.html
index e7eab6e4ca3..41cb1feabd4 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.html
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.html
@@ -3,16 +3,15 @@
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/promise_resolver.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="activity_log_history_item.html">
 <link rel="import" href="../shared_style.html">
 
 <dom-module id="activity-log-history">
   <template>
-    <style include="paper-button-style shared-style">
+    <style include="shared-style">
       :host {
         --activity-log-call-and-count-width: 514px;
         --activity-type-width: 85px;
@@ -23,6 +22,7 @@
       }
 
       cr-search-field {
+        align-self: center;
         margin-inline-end: auto;
       }
 
@@ -56,10 +56,10 @@
       <cr-search-field label="$i18n{activityLogSearchLabel}"
         on-search-changed="onSearchChanged_">
       </cr-search-field >
-      <paper-button class="clear-activities-button"
+      <cr-button class="clear-activities-button"
           on-click="onClearActivitiesClick_">
         $i18n{clearActivities}
-      </paper-button>
+      </cr-button>
       <cr-icon-button id="more-actions" iron-icon="cr:more-vert"
           title="$i18n{activityLogMoreActionsLabel}"
           on-click="onMoreActionsClick_"></cr-icon-button>
diff --git a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.js b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.js
index 7ec96a7995e..fda97f585e2 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.js
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_history.js
@@ -2,23 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.exportPath('extensions');
-
-/**
- * The different states the activity log page can be in. Initial state is
- * LOADING because we call the activity log API whenever a user navigates to the
- * page. LOADED is the state where the API call has returned a successful
- * result.
- * @enum {string}
- */
-const ActivityLogPageState = {
-  LOADING: 'loading',
-  LOADED: 'loaded'
-};
-
 cr.define('extensions', function() {
   'use strict';
 
+  /**
+   * The different states the activity log page can be in. Initial state is
+   * LOADING because we call the activity log API whenever a user navigates to
+   * the page. LOADED is the state where the API call has returned a successful
+   * result.
+   * @enum {string}
+   */
+  const ActivityLogPageState = {LOADING: 'loading', LOADED: 'loaded'};
+
   /** @interface */
   class ActivityLogDelegate {
     /**
@@ -206,7 +201,7 @@ cr.define('extensions', function() {
         value: () => [],
       },
 
-      /** @private {ActivityLogPageState} */
+      /** @private {extensions.ActivityLogPageState} */
       pageState_: {
         type: String,
         value: ActivityLogPageState.LOADING,
@@ -414,7 +409,8 @@ cr.define('extensions', function() {
   });
 
   return {
-    ActivityLogHistory: ActivityLogHistory,
     ActivityLogDelegate: ActivityLogDelegate,
+    ActivityLogHistory: ActivityLogHistory,
+    ActivityLogPageState: ActivityLogPageState,
   };
 });
diff --git a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream.html b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream.html
index 4ae7a45d5e4..0d78032b425 100644
--- a/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream.html
+++ b/chromium/chrome/browser/resources/extensions/activity_log/activity_log_stream.html
@@ -1,16 +1,15 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="activity_log_stream_item.html">
 <link rel="import" href="../shared_style.html">
 
 <dom-module id="activity-log-stream">
   <template>
-    <style include="shared-style paper-button-style">
+    <style include="shared-style">
       :host {
         --activity-log-call-and-time-width: 575px;
         --activity-type-width: 85px;
@@ -21,6 +20,7 @@
       }
 
       cr-search-field {
+        align-self: center;
         margin-inline-end: auto;
       }
 
@@ -50,18 +50,17 @@
       <cr-search-field label="$i18n{activityLogSearchLabel}"
         on-search-changed="onSearchChanged_">
       </cr-search-field >
-      <paper-button id="toggle-stream-button" on-click="onToggleButtonClick_">
+      <cr-button id="toggle-stream-button" on-click="onToggleButtonClick_">
         <span hidden$="[[isStreamOn_]]">
           $i18n{startActivityStream}
         </span>
         <span hidden$="[[!isStreamOn_]]">
           $i18n{stopActivityStream}
         </span>
-      </paper-button>
-      <paper-button class="clear-activities-button"
-          on-click="clearStream">
+      </cr-button>
+      <cr-button class="clear-activities-button" on-click="clearStream">
         $i18n{clearActivities}
-      </paper-button>
+      </cr-button>
     </div>
     <div id="empty-stream-message" class="activity-message"
         hidden$="[[!isStreamEmpty_(activityStream_.length)]]">
diff --git a/chromium/chrome/browser/resources/extensions/code_section.html b/chromium/chrome/browser/resources/extensions/code_section.html
index f453c12dbf7..b4721b10309 100644
--- a/chromium/chrome/browser/resources/extensions/code_section.html
+++ b/chromium/chrome/browser/resources/extensions/code_section.html
@@ -17,10 +17,12 @@
         display: block;
       }
 
-      :host-context([dark]) {
-        --container-bg: rgba(0, 0, 0, .4);
-        --line-bg: var(--google-grey-800);
-        --main-color: var(--cr-primary-text-color);
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --container-bg: rgba(0, 0, 0, .4);
+          --line-bg: var(--google-grey-800);
+          --main-color: var(--cr-primary-text-color);
+        }
       }
 
       #scroll-container {
@@ -30,8 +32,10 @@
         position: relative;
       }
 
-      :host-context(html:not([dark])) #scroll-container {
-        border: 1px solid var(--paper-grey-500);
+      @media (prefers-color-scheme: light) {
+        #scroll-container {
+          border: 1px solid var(--paper-grey-500);
+        }
       }
 
       #main {
@@ -49,8 +53,10 @@
         text-align: end;
       }
 
-      :host-context(html:not([dark])) #line-numbers {
-        border-inline-end: 1px solid var(--paper-grey-500);
+      @media (prefers-color-scheme: light) {
+        #line-numbers {
+          border-inline-end: 1px solid var(--paper-grey-500);
+        }
       }
 
       #source {
@@ -68,12 +74,14 @@
         text-align: center;
       }
 
-      :host-context(html:not([dark])) #no-code {
-        color: var(--paper-grey-800);
-      }
+      @media (prefers-color-scheme: light) {
+        #no-code {
+          color: var(--paper-grey-800);
+        }
 
-      :host-context(html:not([dark])) .more-code {
-        color: var(--paper-grey-500);
+        .more-code {
+          color: var(--paper-grey-500);
+        }
       }
 
       #highlight-description {
@@ -81,9 +89,11 @@
         overflow: hidden;
       }
 
-      :host-context([dark]) mark {
-        background-color: var(--google-yellow-refresh-300);
-        color: var(--google-grey-900);
+      @media (prefers-color-scheme: dark) {
+        mark {
+          background-color: var(--google-yellow-refresh-300);
+          color: var(--google-grey-900);
+        }
       }
     </style>
     <div id="scroll-container" hidden="[[!highlighted_]]" dir="ltr">
diff --git a/chromium/chrome/browser/resources/extensions/detail_view.html b/chromium/chrome/browser/resources/extensions/detail_view.html
index b021c518c01..df4e5baf623 100644
--- a/chromium/chrome/browser/resources/extensions/detail_view.html
+++ b/chromium/chrome/browser/resources/extensions/detail_view.html
@@ -1,22 +1,21 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_tooltip_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
-<link rel="import" href="chrome://resources/html/action_link_css.html">
+<link rel="import" href="chrome://resources/cr_elements/action_link_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="item_behavior.html">
@@ -31,7 +30,8 @@
 
 <dom-module id="extensions-detail-view">
   <template>
-    <style include="iron-flex cr-shared-style cr-icons action-link paper-button-style shared-style">
+    <style include="iron-flex cr-shared-style cr-icons action-link
+        shared-style">
       :host {
         --iron-icon-fill-color: var(--cr-secondary-text-color);
         display: block;
@@ -55,8 +55,10 @@
         color: var(--google-blue-500);
       }
 
-      :host-context([dark]) #enable-section .enabled-text {
-        color: var(--google-blue-refresh-300);
+      @media (prefers-color-scheme: dark) {
+        #enable-section .enabled-text {
+          color: var(--google-blue-refresh-300);
+        }
       }
 
       #icon {
@@ -68,7 +70,6 @@
 
       #name {
         flex-grow: 1;
-        @apply --cr-title-text;
       }
 
       .section {
@@ -107,13 +108,15 @@
         width: auto;  /* override the default button size of 24x24 */
       }
 
-      :host-context(html:not([dark])) .warning .action-button {
-        background: white;
-        color: var(--google-blue-500);
-      }
+      @media (prefers-color-scheme: light) {
+        .warning .action-button {
+          background: white;
+          color: var(--google-blue-500);
+        }
 
-      :host-context(html:not([dark])) #reload-button {
-        color: var(--google-blue-500);
+        #reload-button {
+          color: var(--google-blue-500);
+        }
       }
 
       .warning span {
@@ -175,7 +178,7 @@
                   data.type,
                   '$i18nPolymer{appIcon}',
                   '$i18nPolymer{extensionIcon}')]]">
-          <span id="name">[[data.name]]</span>
+          <span id="name" class="cr-title-text">[[data.name]]</span>
         </div>
         <div class="section continuation control-line" id="enable-section">
           <span class$="[[computeEnabledStyle_(data.state)]]">
@@ -189,10 +192,10 @@
                 icon-aria-label="[[data.controlledInfo.type]]">
             </cr-tooltip-icon>
             <template is="dom-if" if="[[isTerminated_(data.state)]]">
-              <paper-button id="terminated-reload-button" class="action-button"
+              <cr-button id="terminated-reload-button" class="action-button"
                   on-click="onReloadTap_">
                 $i18n{itemReload}
-              </paper-button>
+              </cr-button>
             </template>
             <cr-toggle id="enable-toggle"
                 aria-label$="[[appOrExtension(
@@ -217,10 +220,10 @@
               </template>
             </span>
             <template is="dom-if" if="[[!isTerminated_(data.state)]]">
-              <paper-button id="warnings-reload-button" class="action-button"
+              <cr-button id="warnings-reload-button" class="action-button"
                   on-click="onReloadTap_">
                 $i18n{itemReload}
-              </paper-button>
+              </cr-button>
             </template>
           </div>
           <div class="section continuation warning" id="suspicious-warning"
@@ -238,10 +241,10 @@
               hidden$="[[!data.disableReasons.corruptInstall]]">
             <iron-icon class="warning-icon" icon="cr:warning"></iron-icon>
             <span>$i18n{itemCorruptInstall}</span>
-            <paper-button id="repair-button" class="action-button"
+            <cr-button id="repair-button" class="action-button"
                 on-click="onRepairTap_">
               $i18n{itemRepair}
-            </paper-button>
+            </cr-button>
           </div>
           <div class="section continuation warning" id="blacklisted-warning"
               hidden$="[[!data.blacklistText]]">
diff --git a/chromium/chrome/browser/resources/extensions/detail_view.js b/chromium/chrome/browser/resources/extensions/detail_view.js
index 1c477906b5b..53d33c481d0 100644
--- a/chromium/chrome/browser/resources/extensions/detail_view.js
+++ b/chromium/chrome/browser/resources/extensions/detail_view.js
@@ -81,7 +81,7 @@ cr.define('extensions', function() {
     /** @private */
     onActivityLogTap_: function() {
       extensions.navigation.navigateTo(
-          {page: Page.ACTIVITY_LOG, extensionId: this.data.id});
+          {page: extensions.Page.ACTIVITY_LOG, extensionId: this.data.id});
     },
 
     /**
@@ -96,7 +96,7 @@ cr.define('extensions', function() {
 
     /** @private */
     onCloseButtonTap_: function() {
-      extensions.navigation.navigateTo({page: Page.LIST});
+      extensions.navigation.navigateTo({page: extensions.Page.LIST});
     },
 
     /**
diff --git a/chromium/chrome/browser/resources/extensions/drag_and_drop_handler.html b/chromium/chrome/browser/resources/extensions/drag_and_drop_handler.html
index 2626f1e7a3f..5e959f2d095 100644
--- a/chromium/chrome/browser/resources/extensions/drag_and_drop_handler.html
+++ b/chromium/chrome/browser/resources/extensions/drag_and_drop_handler.html
@@ -1,2 +1,3 @@
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="service.html">
 <script src="drag_and_drop_handler.js"></script>
diff --git a/chromium/chrome/browser/resources/extensions/drag_and_drop_handler.js b/chromium/chrome/browser/resources/extensions/drag_and_drop_handler.js
index 30bdc57f01d..15324adb0ef 100644
--- a/chromium/chrome/browser/resources/extensions/drag_and_drop_handler.js
+++ b/chromium/chrome/browser/resources/extensions/drag_and_drop_handler.js
@@ -36,7 +36,7 @@ cr.define('extensions', function() {
 
     /** @override */
     doDragEnter() {
-      chrome.developerPrivate.notifyDragInstallInProgress();
+      extensions.Service.getInstance().notifyDragInstallInProgress();
       this.eventTarget_.dispatchEvent(
           new CustomEvent('extension-drag-started'));
     }
@@ -83,7 +83,7 @@ cr.define('extensions', function() {
      * @private
      */
     handleFileDrop_() {
-      chrome.developerPrivate.installDroppedFile();
+      extensions.Service.getInstance().installDroppedFile();
     }
 
     /**
@@ -91,15 +91,10 @@ cr.define('extensions', function() {
      * @private
      */
     handleDirectoryDrop_() {
-      // TODO(devlin): Update this to use extensions.Service when it's not
-      // shared between the MD and non-MD pages.
-      chrome.developerPrivate.loadUnpacked(
-          {failQuietly: true, populateError: true, useDraggedPath: true},
-          (loadError) => {
-            if (loadError) {
-              this.eventTarget_.dispatchEvent(new CustomEvent(
-                  'drag-and-drop-load-error', {detail: loadError}));
-            }
+      extensions.Service.getInstance().loadUnpackedFromDrag().catch(
+          loadError => {
+            this.eventTarget_.dispatchEvent(new CustomEvent(
+                'drag-and-drop-load-error', {detail: loadError}));
           });
     }
 
diff --git a/chromium/chrome/browser/resources/extensions/drop_overlay.html b/chromium/chrome/browser/resources/extensions/drop_overlay.html
index 985c3ca083e..b3209817520 100644
--- a/chromium/chrome/browser/resources/extensions/drop_overlay.html
+++ b/chromium/chrome/browser/resources/extensions/drop_overlay.html
@@ -23,9 +23,11 @@
         z-index: 10;
       }
 
-      :host-context([dark]) {
-        /* TODO(dbeam): share with cr-dialog dialog::backdrop? */
-        background-color: rgba(0, 0, 0, .6);
+      @media (prefers-color-scheme: dark) {
+        :host {
+          /* TODO(dbeam): share with cr-dialog dialog::backdrop? */
+          background-color: rgba(0, 0, 0, .6);
+        }
       }
 
       #container {
diff --git a/chromium/chrome/browser/resources/extensions/error_page.html b/chromium/chrome/browser/resources/extensions/error_page.html
index d5254f4c1ee..4e0e4784985 100644
--- a/chromium/chrome/browser/resources/extensions/error_page.html
+++ b/chromium/chrome/browser/resources/extensions/error_page.html
@@ -1,10 +1,10 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
@@ -12,7 +12,6 @@
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="code_section.html">
 <link rel="import" href="item_util.html">
@@ -21,7 +20,7 @@
 
 <dom-module id="extensions-error-page">
   <template>
-    <style include="paper-button-style cr-icons cr-shared-style shared-style">
+    <style include="cr-icons cr-shared-style shared-style">
       :host {
         display: block;
         height: 100%;
@@ -52,7 +51,6 @@
         height: 40px;
         margin-bottom: 30px;
         padding: 8px 12px 0;
-        @apply --cr-title-text;
       }
 
       #heading span {
@@ -96,7 +94,6 @@
       }
 
       .details-heading {
-        @apply --cr-title-text;
         align-items: center;
         display: flex;
         height: var(--cr-section-min-height);
@@ -139,14 +136,14 @@
     </style>
     <div class="page-container" id="container">
       <div class="page-content">
-        <div id="heading">
+        <div id="heading" class="cr-title-text">
           <cr-icon-button class="icon-arrow-back no-overlap" id="closeButton"
               aria-label="$i18n{back}" on-click="onCloseButtonTap_">
           </cr-icon-button>
           <span>$i18n{errorsPageHeading}</span>
-          <paper-button on-click="onClearAllTap_" hidden="[[!entries_.length]]">
+          <cr-button on-click="onClearAllTap_" hidden="[[!entries_.length]]">
             $i18n{clearAll}
-          </paper-button>
+          </cr-button>
         </div>
         <div class="section">
           <div id="errorsList">
@@ -177,14 +174,14 @@
                   <div class="devtools-controls">
                     <template is="dom-if"
                         if="[[computeIsRuntimeError_(item)]]">
-                      <div class="details-heading">
+                      <div class="details-heading cr-title-text">
                         $i18n{errorContext}
                       </div>
                       <span class="context-url">
                         [[getContextUrl_(
                             item, '$i18nPolymer{errorContextUnknown}')]]
                       </span>
-                      <div class="details-heading">
+                      <div class="details-heading cr-title-text">
                         $i18n{stackTrace}
                       </div>
                       <ul class="stack-trace-container"
diff --git a/chromium/chrome/browser/resources/extensions/error_page.js b/chromium/chrome/browser/resources/extensions/error_page.js
index fc0e44f06fe..fea88babb4a 100644
--- a/chromium/chrome/browser/resources/extensions/error_page.js
+++ b/chromium/chrome/browser/resources/extensions/error_page.js
@@ -162,7 +162,7 @@ cr.define('extensions', function() {
 
     /** @private */
     onCloseButtonTap_: function() {
-      extensions.navigation.navigateTo({page: Page.LIST});
+      extensions.navigation.navigateTo({page: extensions.Page.LIST});
     },
 
     /** @private */
diff --git a/chromium/chrome/browser/resources/extensions/extensions.html b/chromium/chrome/browser/resources/extensions/extensions.html
index 51406cb7b33..83ea4fe724a 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{dark}>
+    class="loading $i18n{loadTimeClasses}">
 <head>
   <meta charset="utf8">
   <title>$i18n{title}</title>
@@ -35,13 +35,15 @@
       height: 54px;
     }
 
-    html[dark].loading.in-dev-mode body::before {
-      background: none;
-    }
+    @media (prefers-color-scheme: dark) {
+      html.loading.in-dev-mode body::before {
+        background: none;
+      }
 
-    html[dark].loading::before,
-    html[dark].loading.in-dev-mode body::before {
-      border-bottom: var(--md-toolbar-border);
+      html.loading::before,
+      html.loading.in-dev-mode body::before {
+        border-bottom: var(--md-toolbar-border);
+      }
     }
 
     html,
@@ -60,6 +62,5 @@
   <extensions-manager></extensions-manager>
   <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
   <link rel="import" href="chrome://extensions/manager.html">
-  <link rel="import" href="chrome://resources/html/dark_mode.html">
 </body>
 </html>
diff --git a/chromium/chrome/browser/resources/extensions/install_warnings_dialog.html b/chromium/chrome/browser/resources/extensions/install_warnings_dialog.html
index 19b213005e6..760a8a40ae6 100644
--- a/chromium/chrome/browser/resources/extensions/install_warnings_dialog.html
+++ b/chromium/chrome/browser/resources/extensions/install_warnings_dialog.html
@@ -1,17 +1,16 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="code_section.html">
 
 <dom-module id="extensions-install-warnings-dialog">
   <template>
-    <style include="cr-shared-style paper-button-style">
+    <style include="cr-shared-style">
       div[slot='body'] ul {
         background-color: var(--paper-red-50);
         margin: 0;
@@ -20,10 +19,12 @@
         padding-top: 10px;
       }
 
-      :host-context([dark]) div[slot='body'] ul {
-        /* TODO(dbeam): merge with --cr-input-background-color? */
-        background-color: rgba(0, 0, 0, .3);
-        color: var(--error-color);
+      @media (prefers-color-scheme: dark) {
+        div[slot='body'] ul {
+          /* TODO(dbeam): merge with --cr-input-background-color? */
+          background-color: rgba(0, 0, 0, .3);
+          color: var(--error-color);
+        }
       }
     </style>
     <cr-dialog id="dialog" close-text="$i18n{close}">
@@ -36,9 +37,9 @@
         </ul>
       </div>
       <div slot="button-container">
-        <paper-button class="action-button" on-click="onOkTap_">
+        <cr-button class="action-button" on-click="onOkTap_">
           $i18n{ok}
-        </paper-button>
+        </cr-button>
       </div>
     </cr-dialog>
   </template>
diff --git a/chromium/chrome/browser/resources/extensions/item.html b/chromium/chrome/browser/resources/extensions/item.html
index 5fa187adea9..4dd4b1c830c 100644
--- a/chromium/chrome/browser/resources/extensions/item.html
+++ b/chromium/chrome/browser/resources/extensions/item.html
@@ -1,14 +1,14 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
-<link rel="import" href="chrome://resources/html/action_link_css.html">
+<link rel="import" href="chrome://resources/cr_elements/action_link_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
@@ -25,7 +25,8 @@
 
 <dom-module id="extensions-item">
   <template>
-    <style include="iron-flex cr-hidden-style cr-icons action-link paper-button-style shared-style">
+    <style include="iron-flex cr-hidden-style cr-icons action-link
+        shared-style">
       .bounded-text,
       .multiline-clippable-text,
       .clippable-flex-text {
@@ -90,7 +91,7 @@
       }
 
       #name-and-version {
-        @apply --cr-primary-text;
+        color: var(--cr-primary-text-color);
         margin-bottom: 4px;
       }
 
@@ -145,7 +146,7 @@
         padding-top: 8px;
       }
 
-      #button-strip paper-button {
+      #button-strip cr-button {
         margin-inline-start: 8px;
       }
 
@@ -304,20 +305,20 @@
       </div>
       <div id="button-strip" class="layout horizontal center">
         <div class="layout flex horizontal center">
-          <paper-button id="detailsButton" on-click="onDetailsTap_"
+          <cr-button id="detailsButton" on-click="onDetailsTap_"
               aria-describedby="a11yAssociation">
             $i18n{itemDetails}
-          </paper-button>
-          <paper-button id="remove-button" on-click="onRemoveTap_"
+          </cr-button>
+          <cr-button id="remove-button" on-click="onRemoveTap_"
               aria-describedby="a11yAssociation"
               hidden="[[isControlled_(data.controlledInfo)]]">
             $i18n{remove}
-          </paper-button>
+          </cr-button>
           <template is="dom-if" if="[[shouldShowErrorsButton_(data.*)]]">
-            <paper-button id="errors-button" on-click="onErrorsTap_"
+            <cr-button id="errors-button" on-click="onErrorsTap_"
                 aria-describedby="a11yAssociation">
               $i18n{itemErrors}
-            </paper-button>
+            </cr-button>
           </template>
         </div>
         <template is="dom-if" if="[[!computeDevReloadButtonHidden_(data.*)]]">
@@ -326,16 +327,16 @@
               on-click="onReloadTap_"></cr-icon-button>
         </template>
         <template is="dom-if" if="[[data.disableReasons.corruptInstall]]">
-          <paper-button id="repair-button" class="action-button"
+          <cr-button id="repair-button" class="action-button"
               aria-describedby="a11yAssociation" on-click="onRepairTap_">
             $i18n{itemRepair}
-          </paper-button>
+          </cr-button>
         </template>
         <template is="dom-if" if="[[isTerminated_(data.state)]]">
-          <paper-button id="terminated-reload-button" on-click="onReloadTap_"
+          <cr-button id="terminated-reload-button" on-click="onReloadTap_"
               aria-describedby="a11yAssociation" class="action-button">
             $i18n{itemReload}
-          </paper-button>
+          </cr-button>
         </template>
         <cr-toggle id="enable-toggle"
             aria-label$="[[appOrExtension(
diff --git a/chromium/chrome/browser/resources/extensions/item.js b/chromium/chrome/browser/resources/extensions/item.js
index 4b1a62ff39c..008beca6c32 100644
--- a/chromium/chrome/browser/resources/extensions/item.js
+++ b/chromium/chrome/browser/resources/extensions/item.js
@@ -188,13 +188,13 @@ cr.define('extensions', function() {
       }
 
       extensions.navigation.navigateTo(
-          {page: Page.ERRORS, extensionId: this.data.id});
+          {page: extensions.Page.ERRORS, extensionId: this.data.id});
     },
 
     /** @private */
     onDetailsTap_: function() {
       extensions.navigation.navigateTo(
-          {page: Page.DETAILS, extensionId: this.data.id});
+          {page: extensions.Page.DETAILS, extensionId: this.data.id});
     },
 
     /**
@@ -208,7 +208,7 @@ cr.define('extensions', function() {
     /** @private */
     onExtraInspectTap_: function() {
       extensions.navigation.navigateTo(
-          {page: Page.DETAILS, extensionId: this.data.id});
+          {page: extensions.Page.DETAILS, extensionId: this.data.id});
     },
 
     /** @private */
diff --git a/chromium/chrome/browser/resources/extensions/item_list.html b/chromium/chrome/browser/resources/extensions/item_list.html
index 40c9027ec8e..339e774de80 100644
--- a/chromium/chrome/browser/resources/extensions/item_list.html
+++ b/chromium/chrome/browser/resources/extensions/item_list.html
@@ -35,8 +35,10 @@
         text-align: center;
       }
 
-      :host-context([dark]) .empty-list-message {
-        color: var(--cr-secondary-text-color);
+      @media (prefers-color-scheme: dark) {
+        .empty-list-message {
+          color: var(--cr-secondary-text-color);
+        }
       }
 
       .items-container {
diff --git a/chromium/chrome/browser/resources/extensions/keyboard_shortcuts.html b/chromium/chrome/browser/resources/extensions/keyboard_shortcuts.html
index de1fd4bc740..73968d69f68 100644
--- a/chromium/chrome/browser/resources/extensions/keyboard_shortcuts.html
+++ b/chromium/chrome/browser/resources/extensions/keyboard_shortcuts.html
@@ -4,7 +4,7 @@
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/html/md_select_css.html">
+<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="item_behavior.html">
 <link rel="import" href="shortcut_input.html">
@@ -17,10 +17,10 @@
       }
 
       .shortcut-card {
-        @apply --cr-primary-text;
         @apply --cr-card-elevation;
         background-color: var(--cr-card-background-color);
         border-radius: var(--cr-card-border-radius);
+        color: var(--cr-primary-text-color);
         margin: 0 auto 16px auto;
         padding-bottom: 8px;
         width: var(--cr-toolbar-field-width);
@@ -64,7 +64,6 @@
         display: flex;
         margin-bottom: 9px;
         padding: 16px var(--cr-section-padding);
-        @apply --cr-title-text;
       }
 
       .icon {
@@ -83,7 +82,7 @@
     <div id="container">
       <template is="dom-repeat" items="[[calculateShownItems_(items.*)]]">
         <div class="shortcut-card">
-          <div class="card-title">
+          <div class="card-title cr-title-text">
             <img class="icon" src="[[item.iconUrl]]"
                 alt$="[[appOrExtension(
                     item.type,
diff --git a/chromium/chrome/browser/resources/extensions/kiosk_dialog.html b/chromium/chrome/browser/resources/extensions/kiosk_dialog.html
index 78eb1bae22e..7210150053e 100644
--- a/chromium/chrome/browser/resources/extensions/kiosk_dialog.html
+++ b/chromium/chrome/browser/resources/extensions/kiosk_dialog.html
@@ -1,23 +1,22 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="item_behavior.html">
 <link rel="import" href="kiosk_browser_proxy.html">
 
 <dom-module id="extensions-kiosk-dialog">
   <template>
-    <style include="cr-shared-style paper-button-style cr-icons">
+    <style include="cr-shared-style cr-icons">
       #add-kiosk-app {
         margin-bottom: 10px;
         margin-top: 20px;
@@ -27,7 +26,7 @@
         width: 350px;
       }
 
-      #add-kiosk-app paper-button {
+      #add-kiosk-app cr-button {
         margin-inline-start: 10px;
       }
 
@@ -88,12 +87,12 @@
                 </span>
               </div>
               <div class="item-controls">
-                <paper-button hidden="[[!canEditAutoLaunch_]]"
+                <cr-button hidden="[[!canEditAutoLaunch_]]"
                     on-click="onAutoLaunchButtonTap_">
                   [[getAutoLaunchButtonLabel_(item.autoLaunch,
                       '$i18nPolymer{kioskDisableAutoLaunch}',
                       '$i18nPolymer{kioskEnableAutoLaunch}')]]
-                </paper-button>
+                </cr-button>
                 <cr-icon-button class="icon-delete-gray"
                     on-click="onDeleteAppTap_"></cr-icon-button>
               </div>
@@ -106,10 +105,10 @@
               invalid="[[errorAppId_]]" on-keydown="clearInputInvalid_"
               error-message="[[getErrorMessage_(
                   '$i18nPolymer{kioskInvalidApp}', errorAppId_)]]">
-            <paper-button id="add-button" on-click="onAddAppTap_"
+            <cr-button id="add-button" on-click="onAddAppTap_"
                 disabled="[[!addAppInput_]]" slot="suffix">
               $i18n{add}
-            </paper-button>
+            </cr-button>
           </cr-input>
         </div>
         <cr-checkbox disabled="[[!canEditBailout_]]" id="bailout"
@@ -119,9 +118,9 @@
         </cr-checkbox>
       </div>
       <div slot="button-container">
-        <paper-button class="action-button" on-click="onDoneTap_">
+        <cr-button class="action-button" on-click="onDoneTap_">
           $i18n{done}
-        </paper-button>
+        </cr-button>
       </div>
     </cr-dialog>
     <cr-dialog id="confirm-dialog" close-text="$i18n{close}"
@@ -129,14 +128,12 @@
       <div slot="title">$i18n{kioskDisableBailoutWarningTitle}</div>
       <div slot="body">$i18n{kioskDisableBailoutWarningBody}</div>
       <div slot="button-container">
-        <paper-button class="cancel-button"
-            on-click="onBailoutDialogCancelTap_">
+        <cr-button class="cancel-button" on-click="onBailoutDialogCancelTap_">
           $i18n{cancel}
-        </paper-button>
-        <paper-button class="action-button"
-            on-click="onBailoutDialogConfirmTap_">
+        </cr-button>
+        <cr-button class="action-button" on-click="onBailoutDialogConfirmTap_">
           $i18n{confirm}
-        </paper-button>
+        </cr-button>
       </div>
     </cr-dialog>
   </template>
diff --git a/chromium/chrome/browser/resources/extensions/load_error.html b/chromium/chrome/browser/resources/extensions/load_error.html
index 77a0f3d11bd..682b4fbcdf9 100644
--- a/chromium/chrome/browser/resources/extensions/load_error.html
+++ b/chromium/chrome/browser/resources/extensions/load_error.html
@@ -1,17 +1,16 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="code_section.html">
 
 <dom-module id="extensions-load-error">
   <template>
-    <style include="cr-shared-style paper-button-style">
+    <style include="cr-shared-style">
       .description-row {
         display: flex;
       }
@@ -44,13 +43,13 @@
       </div>
       <div slot="button-container">
         <paper-spinner-lite active="[[retrying_]]"></paper-spinner-lite>
-        <paper-button class="cancel-button" on-click="close">
+        <cr-button class="cancel-button" on-click="close">
           $i18n{cancel}
-        </paper-button>
-        <paper-button class="action-button" disabled="[[retrying_]]"
+        </cr-button>
+        <cr-button class="action-button" disabled="[[retrying_]]"
             on-click="onRetryTap_">
           $i18n{loadErrorRetry}
-        </paper-button>
+        </cr-button>
       </div>
     </cr-dialog>
   </template>
diff --git a/chromium/chrome/browser/resources/extensions/manager.js b/chromium/chrome/browser/resources/extensions/manager.js
index 6095756ca9e..28e8b0fdece 100644
--- a/chromium/chrome/browser/resources/extensions/manager.js
+++ b/chromium/chrome/browser/resources/extensions/manager.js
@@ -167,7 +167,7 @@ cr.define('extensions', function() {
     /**
      * The current page being shown. Default to null, and initPage_ will figure
      * out the initial page based on url.
-     * @private {?PageState}
+     * @private {?extensions.PageState}
      */
     currentPage_: null,
 
@@ -290,8 +290,8 @@ cr.define('extensions', function() {
      * @private
      */
     onFilterChanged_: function(event) {
-      if (this.currentPage_.page !== Page.LIST) {
-        extensions.navigation.navigateTo({page: Page.LIST});
+      if (this.currentPage_.page !== extensions.Page.LIST) {
+        extensions.navigation.navigateTo({page: extensions.Page.LIST});
       }
       this.filter = event.detail;
     },
@@ -402,15 +402,15 @@ cr.define('extensions', function() {
       // that the DOM will have stale data, but there's no point in causing the
       // extra work.
       if (this.detailViewItem_ && this.detailViewItem_.id == item.id &&
-          this.currentPage_.page == Page.DETAILS) {
+          this.currentPage_.page == extensions.Page.DETAILS) {
         this.detailViewItem_ = item;
       } else if (
           this.errorPageItem_ && this.errorPageItem_.id == item.id &&
-          this.currentPage_.page == Page.ERRORS) {
+          this.currentPage_.page == extensions.Page.ERRORS) {
         this.errorPageItem_ = item;
       } else if (
           this.activityLogItem_ && this.activityLogItem_.id == item.id &&
-          this.currentPage_.page == Page.ACTIVITY_LOG) {
+          this.currentPage_.page == extensions.Page.ACTIVITY_LOG) {
         this.activityLogItem_ = item;
       }
     },
@@ -432,12 +432,12 @@ cr.define('extensions', function() {
       // We should never try and remove a non-existent item.
       assert(index >= 0);
       this.splice(listId, index, 1);
-      if ((this.currentPage_.page == Page.ACTIVITY_LOG ||
-           this.currentPage_.page == Page.DETAILS ||
-           this.currentPage_.page == Page.ERRORS) &&
+      if ((this.currentPage_.page == extensions.Page.ACTIVITY_LOG ||
+           this.currentPage_.page == extensions.Page.DETAILS ||
+           this.currentPage_.page == extensions.Page.ERRORS) &&
           this.currentPage_.extensionId == itemId) {
         // Leave the details page (the 'list' page is a fine choice).
-        extensions.navigation.replaceWith({page: Page.LIST});
+        extensions.navigation.replaceWith({page: extensions.Page.LIST});
       }
     },
 
@@ -456,7 +456,7 @@ cr.define('extensions', function() {
 
     /**
      * Changes the active page selection.
-     * @param {PageState} newPage
+     * @param {extensions.PageState} newPage
      * @private
      */
     changePage_: function(newPage) {
@@ -478,29 +478,31 @@ cr.define('extensions', function() {
           // extension ID is not valid. This enables the use case of seeing an
           // extension's install-time activities by navigating to an extension's
           // activity log page, then installing the extension.
-          if (this.showActivityLog && toPage == Page.ACTIVITY_LOG) {
+          if (this.showActivityLog && toPage == extensions.Page.ACTIVITY_LOG) {
             activityLogPlaceholder = {
               id: newPage.extensionId,
               isPlaceholder: true,
             };
           } else {
             // Attempting to view an invalid (removed?) app or extension ID.
-            extensions.navigation.replaceWith({page: Page.LIST});
+            extensions.navigation.replaceWith({page: extensions.Page.LIST});
             return;
           }
         }
       }
 
-      if (toPage == Page.DETAILS) {
+      if (toPage == extensions.Page.DETAILS) {
         this.detailViewItem_ = assert(data);
-      } else if (toPage == Page.ERRORS) {
+      } else if (toPage == extensions.Page.ERRORS) {
         this.errorPageItem_ = assert(data);
-      } else if (toPage == Page.ACTIVITY_LOG) {
+      } else if (toPage == extensions.Page.ACTIVITY_LOG) {
         if (!this.showActivityLog) {
           // Redirect back to the details page if we try to view the
           // activity log of an extension but the flag is not set.
-          extensions.navigation.replaceWith(
-              {page: Page.DETAILS, extensionId: newPage.extensionId});
+          extensions.navigation.replaceWith({
+            page: extensions.Page.DETAILS,
+            extensionId: newPage.extensionId
+          });
           return;
         }
 
@@ -509,11 +511,11 @@ cr.define('extensions', function() {
 
       if (fromPage != toPage) {
         /** @type {CrViewManagerElement} */ (this.$.viewManager)
-            .switchView(toPage);
+            .switchView(/** @type {string} */ (toPage));
       }
 
       if (newPage.subpage) {
-        assert(newPage.subpage == Dialog.OPTIONS);
+        assert(newPage.subpage == extensions.Dialog.OPTIONS);
         assert(newPage.extensionId);
         this.showOptionsDialog_ = true;
         this.async(() => {
@@ -521,6 +523,9 @@ cr.define('extensions', function() {
         });
       }
 
+      document.title = toPage == extensions.Page.DETAILS ?
+          `${loadTimeData.getString('title')} - ${this.detailViewItem_.name}` :
+          loadTimeData.getString('title');
       this.currentPage_ = newPage;
     },
 
diff --git a/chromium/chrome/browser/resources/extensions/navigation_helper.js b/chromium/chrome/browser/resources/extensions/navigation_helper.js
index 61915038319..75748cd70ef 100644
--- a/chromium/chrome/browser/resources/extensions/navigation_helper.js
+++ b/chromium/chrome/browser/resources/extensions/navigation_helper.js
@@ -2,39 +2,37 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.exportPath('extensions');
-
-/**
- * The different pages that can be shown at a time.
- * Note: This must remain in sync with the page ids in manager.html!
- * @enum {string}
- */
-const Page = {
-  LIST: 'items-list',
-  DETAILS: 'details-view',
-  ACTIVITY_LOG: 'activity-log',
-  SHORTCUTS: 'keyboard-shortcuts',
-  ERRORS: 'error-page',
-};
-
-/** @enum {string} */
-const Dialog = {
-  OPTIONS: 'options',
-};
-
-/**
-   @typedef {{page: Page,
-               extensionId: (string|undefined),
-               subpage: (!Dialog|undefined)}}
- */
-let PageState;
-
 cr.define('extensions', function() {
   'use strict';
 
   /**
-   * @param {!PageState} a
-   * @param {!PageState} b
+   * The different pages that can be shown at a time.
+   * Note: This must remain in sync with the page ids in manager.html!
+   * @enum {string}
+   */
+  const Page = {
+    LIST: 'items-list',
+    DETAILS: 'details-view',
+    ACTIVITY_LOG: 'activity-log',
+    SHORTCUTS: 'keyboard-shortcuts',
+    ERRORS: 'error-page',
+  };
+
+  /** @enum {string} */
+  const Dialog = {
+    OPTIONS: 'options',
+  };
+
+  /**
+   * @typedef {{page: extensions.Page,
+   *            extensionId: (string|undefined),
+   *            subpage: (!extensions.Dialog|undefined)}}
+   */
+  let PageState;
+
+  /**
+   * @param {!extensions.PageState} a
+   * @param {!extensions.PageState} b
    * @return {boolean} Whether a and b are equal.
    */
   function isPageStateEqual(a, b) {
@@ -61,10 +59,10 @@ cr.define('extensions', function() {
       /** @private {number} */
       this.nextListenerId_ = 1;
 
-      /** @private {!Map<number, function(!PageState)>} */
+      /** @private {!Map<number, function(!extensions.PageState)>} */
       this.listeners_ = new Map();
 
-      /** @private {!PageState} */
+      /** @private {!extensions.PageState} */
       this.previousPage_;
 
       window.addEventListener('popstate', () => {
@@ -94,8 +92,8 @@ cr.define('extensions', function() {
     }
 
     /**
-     * @return {!PageState} The page that should be displayed for the current
-     *     URL.
+     * @return {!extensions.PageState} The page that should be displayed for the
+     *     current URL.
      */
     getCurrentPage() {
       const search = new URLSearchParams(location.search);
@@ -125,7 +123,7 @@ cr.define('extensions', function() {
 
     /**
      * Function to add subscribers.
-     * @param {!function(!PageState)} listener
+     * @param {!function(!extensions.PageState)} listener
      * @return {number} A numerical ID to be used for removing the listener.
      */
     addListener(listener) {
@@ -155,7 +153,7 @@ cr.define('extensions', function() {
     }
 
     /**
-     * @param {!PageState} newPage the page to navigate to.
+     * @param {!extensions.PageState} newPage the page to navigate to.
      */
     navigateTo(newPage) {
       const currentPage = this.getCurrentPage();
@@ -168,7 +166,8 @@ cr.define('extensions', function() {
     }
 
     /**
-     * @param {!PageState} newPage the page to replace the current page with.
+     * @param {!extensions.PageState} newPage the page to replace the current
+     *     page with.
      */
     replaceWith(newPage) {
       this.updateHistory(newPage, true /* replaceState */);
@@ -182,7 +181,7 @@ cr.define('extensions', function() {
 
     /**
      * Called when a page changes, and pushes state to history to reflect it.
-     * @param {!PageState} entry
+     * @param {!extensions.PageState} entry
      * @param {boolean} replaceState
      */
     updateHistory(entry, replaceState) {
@@ -230,8 +229,11 @@ cr.define('extensions', function() {
   const navigation = new NavigationHelper();
 
   return {
+    Dialog: Dialog,
     // Constructor exposed for testing purposes.
     NavigationHelper: NavigationHelper,
     navigation: navigation,
+    Page: Page,
+    PageState: PageState,
   };
 });
diff --git a/chromium/chrome/browser/resources/extensions/options_dialog.html b/chromium/chrome/browser/resources/extensions/options_dialog.html
index 59ced391619..77f5d941e0f 100644
--- a/chromium/chrome/browser/resources/extensions/options_dialog.html
+++ b/chromium/chrome/browser/resources/extensions/options_dialog.html
@@ -26,35 +26,39 @@
         overflow: hidden;
       }
 
+      cr-dialog::part(dialog) {
+        /* CSS variables are set by the JS. */
+        height: var(--dialog-height);
+        opacity: var(--dialog-opacity, 0);
+        /* When loading, it's possible for an size update to follow after the
+           initial size update. The debounce time on size updates is 50ms.
+           A 100ms delay for the opacity transition will allow two updates to
+           occur without showing the dialog resizing to the user. */
+        transition: opacity 100ms ease 100ms;
+        width: var(--dialog-width);
+      }
+
+      cr-dialog::part(wrapper) {
+        height: 100%;
+        max-height: initial;
+        overflow: hidden;
+      }
+
+      cr-dialog #body {
+        height: 100%;
+        padding: 0;
+      }
+
       cr-dialog {
-        --cr-dialog-body: {
-          height: 100%;
-          padding-bottom: 0;
-          padding-inline-end: 0;
-          padding-inline-start: 0;
-          padding-top: 0;
-        }
         --cr-dialog-body-border-bottom: none;
         --cr-dialog-body-border-top: none;
-        --cr-dialog-body-container: {
-          height: 100%;
-          min-height: initial;
-        }
-        --cr-dialog-native: {
-          opacity: 0;
-          /* When loading, it's possible for an size update to follow after the
-             initial size update. The debounce time on size updates is 50ms.
-             A 100ms delay for the opacity transition will allow two updates to
-             occur without showing the dialog resizing to the user. */
-          transition: opacity 100ms ease 100ms;
-        }
-        --cr-dialog-wrapper: {
-          height: 100%;
-          max-height: initial;
-          overflow: hidden;
-        }
         --scroll-border: none;
       }
+
+      cr-dialog::part(body-container) {
+        height: 100%;
+        min-height: initial;
+      }
     </style>
 
     <cr-dialog id="dialog" close-text="$i18n{close}"
diff --git a/chromium/chrome/browser/resources/extensions/options_dialog.js b/chromium/chrome/browser/resources/extensions/options_dialog.js
index a3fe7176551..6e5279922d2 100644
--- a/chromium/chrome/browser/resources/extensions/options_dialog.js
+++ b/chromium/chrome/browser/resources/extensions/options_dialog.js
@@ -66,10 +66,10 @@ cr.define('extensions', function() {
           Math.min(maxHeight, headerHeight + this.preferredSize_.height);
       const effectiveWidth = Math.max(MIN_WIDTH, this.preferredSize_.width);
 
-      const nativeDialog = this.$.dialog.getNative();
-      nativeDialog.style.height = `${effectiveHeight}px`;
-      nativeDialog.style.width = `${effectiveWidth}px`;
-      nativeDialog.style.opacity = '1';
+      this.$.dialog.style.setProperty(
+          '--dialog-height', `${effectiveHeight}px`);
+      this.$.dialog.style.setProperty('--dialog-width', `${effectiveWidth}px`);
+      this.$.dialog.style.setProperty('--dialog-opacity', 1);
     },
 
     /** @param {chrome.developerPrivate.ExtensionInfo} data */
@@ -113,12 +113,14 @@ cr.define('extensions', function() {
       // still on the details page. We could be on a different page if the
       // user hit back while the options dialog was visible; in that case, the
       // new page is already correct.
-      if (currentPage && currentPage.page == Page.DETAILS) {
+      if (currentPage && currentPage.page == extensions.Page.DETAILS) {
         // This will update the currentPage_ and the NavigationHelper; since
         // the active page is already the details page, no main page
         // transition occurs.
-        extensions.navigation.navigateTo(
-            {page: Page.DETAILS, extensionId: currentPage.extensionId});
+        extensions.navigation.navigateTo({
+          page: extensions.Page.DETAILS,
+          extensionId: currentPage.extensionId
+        });
       }
     },
   });
diff --git a/chromium/chrome/browser/resources/extensions/pack_dialog.html b/chromium/chrome/browser/resources/extensions/pack_dialog.html
index 1a3c789ee58..6718e23fec0 100644
--- a/chromium/chrome/browser/resources/extensions/pack_dialog.html
+++ b/chromium/chrome/browser/resources/extensions/pack_dialog.html
@@ -1,25 +1,24 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/util.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="pack_dialog_alert.html">
 
 <dom-module id="extensions-pack-dialog">
   <template>
-    <style include="cr-shared-style paper-button-style">
+    <style include="cr-shared-style">
       cr-input {
         margin-top: var(--cr-form-field-bottom-spacing);
         --cr-input-error-display: none;
       }
 
-      paper-button[slot='suffix'] {
+      cr-button[slot='suffix'] {
         margin-inline-start: 10px;
       }
 
@@ -34,27 +33,27 @@
         <div>$i18n{packDialogContent}</div>
         <cr-input id="root-dir" label="$i18n{packDialogExtensionRoot}"
             value="{{packDirectory_}}">
-          <paper-button id="root-dir-browse" on-click="onRootBrowse_"
+          <cr-button id="root-dir-browse" on-click="onRootBrowse_"
               slot="suffix">
             $i18n{packDialogBrowse}
-          </paper-button>
+          </cr-button>
         </cr-input>
         <cr-input id="key-file" label="$i18n{packDialogKeyFile}"
             value="{{keyFile_}}">
-          <paper-button id="key-file-browse" on-click="onKeyBrowse_"
+          <cr-button id="key-file-browse" on-click="onKeyBrowse_"
               slot="suffix">
             $i18n{packDialogBrowse}
-          </paper-button>
+          </cr-button>
         </cr-input>
       </div>
       <div slot="button-container">
-        <paper-button class="cancel-button" on-click="onCancelTap_">
+        <cr-button class="cancel-button" on-click="onCancelTap_">
           $i18n{cancel}
-        </paper-button>
-        <paper-button class="action-button" on-click="onConfirmTap_"
+        </cr-button>
+        <cr-button class="action-button" on-click="onConfirmTap_"
             disabled="[[!packDirectory_]]">
           $i18n{packDialogConfirm}
-        </paper-button>
+        </cr-button>
       </div>
     </cr-dialog>
     <template is="dom-if" if="[[lastResponse_]]" restamp>
diff --git a/chromium/chrome/browser/resources/extensions/pack_dialog_alert.html b/chromium/chrome/browser/resources/extensions/pack_dialog_alert.html
index 79fa1a74167..a08e9feb5e0 100644
--- a/chromium/chrome/browser/resources/extensions/pack_dialog_alert.html
+++ b/chromium/chrome/browser/resources/extensions/pack_dialog_alert.html
@@ -1,15 +1,14 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="extensions-pack-dialog-alert">
   <template>
-    <style include="cr-shared-style paper-button-style">
+    <style include="cr-shared-style">
       .body {
         white-space: pre-wrap;
         word-break: break-word;
@@ -21,14 +20,14 @@
       <!-- No whitespace or new-lines allowed within the div.body tag. -->
       <div class="body" slot="body">[[model.message]]</div>
       <div class="button-container" slot="button-container">
-        <paper-button class$="[[getCancelButtonClass_(confirmLabel_)]]"
+        <cr-button class$="[[getCancelButtonClass_(confirmLabel_)]]"
             on-click="onCancelTap_" hidden="[[!cancelLabel_]]">
           [[cancelLabel_]]
-        </paper-button>
-        <paper-button class="action-button" on-click="onConfirmTap_"
+        </cr-button>
+        <cr-button class="action-button" on-click="onConfirmTap_"
             hidden="[[!confirmLabel_]]">
           [[confirmLabel_]]
-        </paper-button>
+        </cr-button>
       </div>
     </cr-dialog>
   </template>
diff --git a/chromium/chrome/browser/resources/extensions/runtime_host_permissions.html b/chromium/chrome/browser/resources/extensions/runtime_host_permissions.html
index 3b6c39f5935..038343a0cdb 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_host_permissions.html
+++ b/chromium/chrome/browser/resources/extensions/runtime_host_permissions.html
@@ -4,25 +4,22 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/action_link.html">
-<link rel="import" href="chrome://resources/html/action_link_css.html">
+<link rel="import" href="chrome://resources/cr_elements/action_link_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
-<link rel="import" href="chrome://resources/html/md_select_css.html">
+<link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="runtime_hosts_dialog.html">
 <link rel="import" href="shared_style.html">
 <link rel="import" href="strings.html">
 
 <dom-module id="extensions-runtime-host-permissions">
   <template>
-    <style include="cr-shared-style action-link md-select paper-button-style
-        shared-style">
+    <style include="cr-shared-style action-link md-select shared-style">
       iron-icon {
         --iron-icon-height: var(--cr-icon-size);
         --iron-icon-width: var(--cr-icon-size);
diff --git a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html
index b639ed5754b..db6b162825e 100644
--- a/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html
+++ b/chromium/chrome/browser/resources/extensions/runtime_hosts_dialog.html
@@ -1,15 +1,14 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="strings.html">
 
 <dom-module id="extensions-runtime-hosts-dialog">
   <template>
-    <style include="cr-shared-style paper-button-style"></style>
+    <style include="cr-shared-style"></style>
     <cr-dialog id="dialog" close-text="$i18n{close}">
       <div slot="title">[[computeDialogTitle_(currentSite)]]</div>
       <div slot="body">
@@ -23,13 +22,13 @@
         </cr-input>
       </div>
       <div slot="button-container">
-        <paper-button class="cancel-button" on-click="onCancelTap_">
+        <cr-button class="cancel-button" on-click="onCancelTap_">
           $i18n{cancel}
-        </paper-button>
-        <paper-button class="action-button" id="submit" on-click="onSubmitTap_"
+        </cr-button>
+        <cr-button class="action-button" id="submit" on-click="onSubmitTap_"
             disabled="[[computeSubmitButtonDisabled_(inputInvalid_, site_)]]">
           [[computeSubmitButtonLabel_(currentSite)]]
-        </paper-button>
+        </cr-button>
       </div>
     </cr-dialog>
   </template>
diff --git a/chromium/chrome/browser/resources/extensions/service.js b/chromium/chrome/browser/resources/extensions/service.js
index b6dd8b6b99e..1acc69798be 100644
--- a/chromium/chrome/browser/resources/extensions/service.js
+++ b/chromium/chrome/browser/resources/extensions/service.js
@@ -146,18 +146,22 @@ cr.define('extensions', function() {
     }
 
     /**
-     * Attempts to load an unpacked extension, optionally as another attempt at
-     * a previously-specified load.
-     * @param {string=} opt_retryGuid
+     * @param {chrome.developerPrivate.LoadUnpackedOptions=} opt_options
      * @return {!Promise} A signal that loading finished, rejected if any error
      *     occurred.
      * @private
      */
-    loadUnpackedHelper_(opt_retryGuid) {
+    loadUnpackedHelper_(opt_options) {
       return new Promise(function(resolve, reject) {
+        const options = Object.assign(
+            {
+              failQuietly: true,
+              populateError: true,
+            },
+            opt_options);
+
         chrome.developerPrivate.loadUnpacked(
-            {failQuietly: true, populateError: true, retryGuid: opt_retryGuid},
-            (loadError) => {
+            options, (loadError) => {
               if (chrome.runtime.lastError &&
                   chrome.runtime.lastError.message !=
                       'File selection was canceled.') {
@@ -270,8 +274,8 @@ cr.define('extensions', function() {
         chrome.developerPrivate.showOptions(extension.id);
       } else {
         extensions.navigation.navigateTo({
-          page: Page.DETAILS,
-          subpage: Dialog.OPTIONS,
+          page: extensions.Page.DETAILS,
+          subpage: extensions.Dialog.OPTIONS,
           extensionId: extension.id,
         });
       }
@@ -290,7 +294,9 @@ cr.define('extensions', function() {
 
     /** @override */
     retryLoadUnpacked(retryGuid) {
-      return this.loadUnpackedHelper_(retryGuid);
+      // Attempt to load an unpacked extension, optionally as another attempt at
+      // a previously-specified load.
+      return this.loadUnpackedHelper_({retryGuid: retryGuid});
     }
 
     /** @override */
@@ -428,6 +434,22 @@ cr.define('extensions', function() {
       a.download = fileName;
       a.click();
     }
+
+    /**
+     * Attempts to load an unpacked extension via a drag-n-drop gesture.
+     * @return {!Promise}
+     */
+    loadUnpackedFromDrag() {
+      return this.loadUnpackedHelper_({useDraggedPath: true});
+    }
+
+    installDroppedFile() {
+      chrome.developerPrivate.installDroppedFile();
+    }
+
+    notifyDragInstallInProgress() {
+      chrome.developerPrivate.notifyDragInstallInProgress();
+    }
   }
 
   cr.addSingletonGetter(Service);
diff --git a/chromium/chrome/browser/resources/extensions/shared_vars.html b/chromium/chrome/browser/resources/extensions/shared_vars.html
index 125f2333d0a..86b2870213f 100644
--- a/chromium/chrome/browser/resources/extensions/shared_vars.html
+++ b/chromium/chrome/browser/resources/extensions/shared_vars.html
@@ -12,8 +12,10 @@
     --separator-gap: 9px;
   }
 
-  html[dark] {
-    --error-color: var(--google-red-refresh-300);
+  @media (prefers-color-scheme: dark) {
+    html {
+      --error-color: var(--google-red-refresh-300);
+    }
   }
 </style>
 </custom-style>
diff --git a/chromium/chrome/browser/resources/extensions/sidebar.html b/chromium/chrome/browser/resources/extensions/sidebar.html
index 8aaf1ef5fe8..4024fb27744 100644
--- a/chromium/chrome/browser/resources/extensions/sidebar.html
+++ b/chromium/chrome/browser/resources/extensions/sidebar.html
@@ -22,8 +22,10 @@
         width: 256px;
       }
 
-      :host-context([dark]) {
-        --sidebar-inactive-color: var(--cr-primary-text-color);
+      @media (prefers-color-scheme: dark) {
+        :host {
+          --sidebar-inactive-color: var(--cr-primary-text-color);
+        }
       }
 
       iron-selector .iron-selected {
diff --git a/chromium/chrome/browser/resources/extensions/sidebar.js b/chromium/chrome/browser/resources/extensions/sidebar.js
index 8f5bd9b06eb..19619f17912 100644
--- a/chromium/chrome/browser/resources/extensions/sidebar.js
+++ b/chromium/chrome/browser/resources/extensions/sidebar.js
@@ -16,8 +16,10 @@ cr.define('extensions', function() {
     /** @override */
     attached: function() {
       this.$.sectionMenu.select(
-          extensions.navigation.getCurrentPage().page == Page.SHORTCUTS ? 1 :
-                                                                          0);
+          extensions.navigation.getCurrentPage().page ==
+                  extensions.Page.SHORTCUTS ?
+              1 :
+              0);
     },
 
     /**
diff --git a/chromium/chrome/browser/resources/extensions/toolbar.html b/chromium/chrome/browser/resources/extensions/toolbar.html
index 77ee1f84a66..7e08974284a 100644
--- a/chromium/chrome/browser/resources/extensions/toolbar.html
+++ b/chromium/chrome/browser/resources/extensions/toolbar.html
@@ -1,10 +1,10 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_tooltip_icon.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
@@ -17,7 +17,7 @@
 
 <dom-module id="extensions-toolbar">
   <template>
-    <style include="cr-hidden-style paper-button-style">
+    <style include="cr-hidden-style">
       :host {
         --border-bottom-height: 1px;
         --button-row-height: calc(2 * var(--padding-top-bottom) +
@@ -27,12 +27,14 @@
       }
 
       /* This toggle needs special styling because it's on blue background. */
-      :host-context(html:not([dark])) cr-toolbar cr-toggle {
-        --cr-toggle-checked-bar-color: var(--google-grey-refresh-100);
-        --cr-toggle-checked-button-color: white;
-        --cr-toggle-checked-ink-color: white;
-        --cr-toggle-unchecked-bar-color: var(--google-grey-600);
-        --cr-toggle-unchecked-ink-color: white;
+      @media (prefers-color-scheme: light) {
+        cr-toolbar cr-toggle {
+          --cr-toggle-checked-bar-color: var(--google-grey-refresh-100);
+          --cr-toggle-checked-button-color: white;
+          --cr-toggle-checked-ink-color: white;
+          --cr-toggle-unchecked-bar-color: var(--google-grey-600);
+          --cr-toggle-unchecked-ink-color: white;
+        }
       }
 
       cr-tooltip-icon {
@@ -53,9 +55,11 @@
         transition: height var(--drawer-transition);
       }
 
-      :host-context([dark]) #devDrawer {
-        background: none;
-        border-bottom-color: var(--cr-separator-color);
+      @media (prefers-color-scheme: dark) {
+        #devDrawer {
+          background: none;
+          border-bottom-color: var(--cr-separator-color);
+        }
       }
 
       #devDrawer[expanded] {
@@ -74,7 +78,7 @@
         width: 100%;
       }
 
-      #buttonStrip paper-button {
+      #buttonStrip cr-button {
         margin-inline-end: 16px;
       }
 
@@ -120,22 +124,22 @@
     </template>
     <div id="devDrawer" expanded$="[[expanded_]]">
       <div id="buttonStrip">
-        <paper-button hidden$="[[!canLoadUnpacked]]" id="loadUnpacked"
+        <cr-button hidden$="[[!canLoadUnpacked]]" id="loadUnpacked"
             on-click="onLoadUnpackedTap_">
           $i18n{toolbarLoadUnpacked}
-        </paper-button>
-        <paper-button id="packExtensions" on-click="onPackTap_">
+        </cr-button>
+        <cr-button id="packExtensions" on-click="onPackTap_">
           $i18n{toolbarPack}
-        </paper-button>
-        <paper-button id="updateNow" on-click="onUpdateNowTap_"
+        </cr-button>
+        <cr-button id="updateNow" on-click="onUpdateNowTap_"
             title="$i18n{toolbarUpdateNowTooltip}">
           $i18n{toolbarUpdateNow}
-        </paper-button>
+        </cr-button>
 <if expr="chromeos">
-        <paper-button id="kioskExtensions" on-click="onKioskTap_"
+        <cr-button id="kioskExtensions" on-click="onKioskTap_"
             hidden$="[[!kioskEnabled]]">
           $i18n{manageKioskApp}
-        </paper-button>
+        </cr-button>
 </if>
       </div>
     </div>
diff --git a/chromium/chrome/browser/resources/extensions/toolbar.js b/chromium/chrome/browser/resources/extensions/toolbar.js
index c231c5a95b5..7792f175221 100644
--- a/chromium/chrome/browser/resources/extensions/toolbar.js
+++ b/chromium/chrome/browser/resources/extensions/toolbar.js
@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-cr.exportPath('extensions');
-
 cr.define('extensions', function() {
   /** @interface */
   class ToolbarDelegate {