BASELINE: Update Chromium to 85.0.4183.14085-based

Change-Id: Iaa42f4680837c57725b1344f108c0196741f6057
Reviewed-by: Allan Sandfeld Jensen <allan.jensen@qt.io>

20 files changed, 118 insertions, 103 deletions

diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html
index 2dd7bde6266..92c78ed14f0 100644
--- a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html
+++ b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_camera.html
@@ -117,20 +117,16 @@
       }
 
       #takePhoto {
-        --cr-icon-button-fill-color-focus: #ededed;
         --cr-icon-button-fill-color: #ededed;
-        --cr-icon-button-stroke-color-focus: var(--google-blue-500);
         --cr-icon-button-stroke-color: white;
       }
 
       :host([videomode]) #takePhoto {
         --cr-icon-button-fill-color: red;
-        --cr-icon-button-fill-color-focus: red;
       }
 
       #switchMode {
         --cr-icon-button-fill-color: white;
-        --cr-icon-button-fill-color-focus: var(--google-blue-500);
       }
 
       :host-context([dir=rtl]) #switchMode {
diff --git a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html
index 1c65e1d85d0..67ad649b390 100644
--- a/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html
+++ b/chromium/ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html
@@ -58,7 +58,6 @@
 
       cr-icon-button {
         --cr-icon-button-fill-color: white;
-        --cr-icon-button-fill-color-focus: var(--google-blue-500);
         --cr-icon-button-icon-size: 24px;
         --cr-icon-button-size: 28px;
         margin: 0;
diff --git a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html
index 294bfd195ab..a5102d531e2 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.html
@@ -64,7 +64,7 @@
         padding: 8px 0;
       }
     </style>
-    <dialog id="dialog" on-close="onNativeDialogClose_"
+    <dialog id="dialog" part="dialog" on-close="onNativeDialogClose_"
         role="application" aria-roledescription$="[[roleDescription]]">
       <div id="wrapper" class="item-wrapper" role="menu" tabindex="-1">
         <slot id="contentNode"></slot>
diff --git a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js
index 59196c2d8bc..9642a43cd52 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js
@@ -14,6 +14,7 @@
  *   minY: (number|undefined),
  *   maxX: (number|undefined),
  *   maxY: (number|undefined),
+ *   noOffset: (boolean|undefined),
  * }}
  */
 let ShowAtConfig;
@@ -32,7 +33,7 @@ let ShowAtConfig;
  *   maxY: (number|undefined),
  * }}
  */
-let ShowAtPositionConfig;
+/* #export */ let ShowAtPositionConfig;
 
 /**
  * @enum {number}
@@ -344,7 +345,7 @@ Polymer({
     const rect = this.anchorElement_.getBoundingClientRect();
 
     let height = rect.height;
-    if (opt_config &&
+    if (opt_config && !opt_config.noOffset &&
         opt_config.anchorAlignmentY === AnchorAlignment.AFTER_END) {
       // When an action menu is positioned after the end of an element, the
       // action menu can appear too far away from the anchor element, typically
diff --git a/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html b/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
index 0e6b7a8614b..85f42e253a5 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
@@ -23,11 +23,6 @@
         padding: 0;
         top: 50%;
         width: 512px;
-
-        /* Avoid using the mixin. Use ::part(dialog) instead.
-         * Necessary for backward compatibility with Polymer1/SDv0 (only used by
-         * OOBE). TODO(crbug.com/955194): Remove this once fixed.*/
-        @apply --cr-dialog-native;
       }
 
       @media (prefers-color-scheme: dark) {
diff --git a/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js b/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js
index f42f43e4c98..07a78baa633 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_fingerprint/cr_fingerprint_progress_arc.js
@@ -103,12 +103,15 @@ Polymer({
 
   // Also put these values as member values so they can be overridden by tests
   // and the tests do not need to be changed every time the UI is.
-  /** @private {number} */
-  canvasCircleStrokeWidth_: CANVAS_CIRCLE_STROKE_WIDTH,
-  /** @private {string} */
-  canvasCircleBackgroundColor_: CANVAS_CIRCLE_BACKGROUND_COLOR,
-  /** @private {string} */
-  canvasCircleProgressColor_: CANVAS_CIRCLE_PROGRESS_COLOR,
+
+  /** @type {number} */
+  canvasCircleStrokeWidth: CANVAS_CIRCLE_STROKE_WIDTH,
+
+  /** @type {string} */
+  canvasCircleBackgroundColor: CANVAS_CIRCLE_BACKGROUND_COLOR,
+
+  /** @type {string} */
+  canvasCircleProgressColor: CANVAS_CIRCLE_PROGRESS_COLOR,
 
   /**
    * Animation ID for fingerprint scan progress bar.
@@ -145,7 +148,7 @@ Polymer({
 
     ctx.beginPath();
     ctx.arc(c.width / 2, c.height / 2, this.circleRadius, startAngle, endAngle);
-    ctx.lineWidth = this.canvasCircleStrokeWidth_;
+    ctx.lineWidth = this.canvasCircleStrokeWidth;
     ctx.strokeStyle = color;
     ctx.stroke();
   },
@@ -155,7 +158,7 @@ Polymer({
    * |circleRadius| and color |CANVAS_CIRCLE_BACKGROUND_COLOR|.
    */
   drawBackgroundCircle() {
-    this.drawArc(0, 2 * Math.PI, this.canvasCircleBackgroundColor_);
+    this.drawArc(0, 2 * Math.PI, this.canvasCircleBackgroundColor);
   },
 
   /**
@@ -203,11 +206,10 @@ Polymer({
       // |start| + |currentAngle| to 7 * Math.PI / 2 (start is 3 * Math.PI /
       // 2) otherwise the regular draw from |start| to |currentAngle| will
       // draw nothing which will cause a flicker for one frame.
-      this.drawArc(
-          start, start + currentAngle, this.canvasCircleProgressColor_);
+      this.drawArc(start, start + currentAngle, this.canvasCircleProgressColor);
       this.drawArc(
           start + currentAngle, currentAngle <= 0 ? 7 * Math.PI / 2 : start,
-          this.canvasCircleBackgroundColor_);
+          this.canvasCircleBackgroundColor);
       currentAngle += step;
     };
 
diff --git a/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html b/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html
index c4b47e81f62..b83538bc391 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html
@@ -9,7 +9,6 @@
     <style>
       :host {
         --cr-icon-button-fill-color: var(--google-grey-refresh-700);
-        --cr-icon-button-fill-color-focus: white;
         --cr-icon-button-icon-start-offset: 0;
         --cr-icon-button-icon-size: 20px;
         --cr-icon-button-size: 36px;
@@ -61,10 +60,6 @@
         z-index: 1;
       }
 
-      :host-context([a11y-enhanced]):host([ripple-showing_]) #maskedImage {
-        background-color: var(--cr-icon-button-fill-color-focus);
-      }
-
       #icon {
         align-items: center;
         border-radius: 4px;
@@ -87,12 +82,6 @@
         z-index: 1;
       }
 
-      :host-context([a11y-enhanced]):host([ripple-showing_]) iron-icon {
-        --iron-icon-fill-color: var(--cr-icon-button-fill-color-focus);
-        --iron-icon-stroke-color: var(--cr-icon-button-stroke-color-focus,
-            none);
-      }
-
       paper-ripple {
         /* GG900 .15 is about GG700 .21 */
         --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .21);
@@ -102,23 +91,12 @@
       @media (prefers-color-scheme: dark) {
         :host {
           --cr-icon-button-fill-color: var(--google-grey-refresh-500);
-          --cr-icon-button-fill-color-focus: var(--google-grey-900);
         }
 
         paper-ripple {
           --paper-ripple-opacity: var(--cr-icon-button-ripple-opacity, .4);
         }
       }
-
-      :host-context([a11y-enhanced]) paper-ripple {
-        --paper-ripple-opacity: 1;
-        opacity: 0;
-        transition: opacity var(--cr-icon-button-transition);
-      }
-
-      :host-context([a11y-enhanced]):host([ripple-showing_]) paper-ripple {
-        opacity: 1;
-      }
     </style>
     <div id="icon">
       <div id="maskedImage"></div>
diff --git a/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js b/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js
index 6913401d984..cec74dafb88 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js
@@ -32,16 +32,11 @@
  * The color of the icon can be overridden using CSS variables. When using
  * iron-icon both the fill and stroke can be overridden the variables:
  * --cr-icon-button-fill-color
- * --cr-icon-button-fill-color-focus
  * --cr-icon-button-stroke-color
- * --cr-icon-button-stroke-color-focus
  *
  * When not using iron-icon (ie. specifying --cr-icon-image), the icons support
  * one color and the 'stroke' variables are ignored.
  *
- * The '-focus' variables are used for opaque ripple support. This is enabled
- * when the 'a11y-enhanced' attribute on <html> is present.
- *
  * When using iron-icon's, more than one icon can be specified by setting
  * the |ironIcon| property to a comma-delimited list of keys.
  */
@@ -178,9 +173,13 @@ Polymer({
     }
     const icons = (this.ironIcon || '').split(',');
     icons.forEach(icon => {
-      const element = document.createElement('iron-icon');
-      element.icon = icon;
-      this.$.icon.appendChild(element);
+      const ironIcon = document.createElement('iron-icon');
+      ironIcon.icon = icon;
+      this.$.icon.appendChild(ironIcon);
+      if (ironIcon.shadowRoot) {
+        ironIcon.shadowRoot.querySelectorAll('svg', 'img')
+            .forEach(child => child.setAttribute('role', 'none'));
+      }
     });
     if (!this.hasRipple()) {
       return;
diff --git a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html
index 1760750a283..58ec0a3faff 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.html
@@ -13,21 +13,24 @@
     <style include="cr-hidden-style cr-input-style cr-shared-style">
       /*
         A 'suffix' element will be outside the underlined space, while a
-        'prefix' element will be inside the underlined space by default.
+        'inline-prefix' and 'inline-suffix' elements will be inside the
+        underlined space by default.
 
         Regarding cr-input's width:
-        When there's no element in the 'prefix' or 'suffix' slot, setting
-        the width of cr-input as follows will work as expected:
+        When there's no element in the 'inline-prefix', 'inline-suffix' or
+        'suffix' slot, setting the width of cr-input as follows will work as
+        expected:
 
           cr-input {
             width: 200px;
           }
 
-        However, when there's an element in the 'suffix' and/or 'prefix'
-        slot, setting the 'width' will dictate the total width of the input
-        field *plus* the 'prefix' and 'suffix' elements. To set the width
-        of the input field + 'prefix' when a 'suffix' is present, use
-        --cr-input-width.
+        However, when there's an element in the 'suffix', 'inline-suffix' and/or
+        'inline-prefix' slot, setting the 'width' will dictate the total width
+        of the input field *plus* the 'inline-prefix', 'inline-suffix' and
+        'suffix' elements. To set the width of the input field +
+        'inline-prefix' + 'inline-suffix' when a 'suffix' is present,
+        use --cr-input-width.
 
           cr-input {
             --cr-input-width: 200px;
@@ -122,7 +125,7 @@
     <div id="row-container" part="row-container">
       <div id="input-container">
         <div id="inner-input-container">
-          <slot name="prefix"></slot>
+          <slot name="inline-prefix"></slot>
           <!-- Only attributes that are named inconsistently between html and js
               need to use attr$="", such as |tabindex| vs .tabIndex and
               |readonly| vs .readOnly. -->
@@ -130,12 +133,13 @@
               value="{{value::input}}" tabindex$="[[tabindex]]" type="[[type]]"
               readonly$="[[readonly]]" maxlength$="[[maxlength]]"
               pattern$="[[pattern]]" required="[[required]]"
-              minlength$="[[minlength]]"
+              minlength$="[[minlength]]" inputmode$="[[inputmode]]"
               aria-label$="[[getAriaLabel_(ariaLabel, label, placeholder)]]"
               aria-invalid$="[[getAriaInvalid_(invalid)]]"
               max="[[max]]" min="[[min]]" on-focus="onInputFocus_"
               on-blur="onInputBlur_" on-change="onInputChange_"
               on-keydown="onInputKeydown_" part="input">
+          <slot name="inline-suffix"></slot>
         </div>
         <div id="underline"></div>
       </div>
diff --git a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js
index 2454f4ce8b6..bbc9ae2a104 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input.js
@@ -122,11 +122,14 @@ Polymer({
       reflectToAttribute: true,
     },
 
+    inputmode: String,
+
     label: {
       type: String,
       value: '',
     },
 
+    /** @type {?string} */
     placeholder: {
       type: String,
       value: null,
diff --git a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html
index f357cb0ff6b..52770714325 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_input/cr_input_style_css.html
@@ -75,11 +75,6 @@
         text-align: inherit;
         text-overflow: ellipsis;
         width: 100%;
-
-        /* Avoid using the mixin. Use ::part(input) instead.
-         * Necessary for backward compatibility with Polymer1/SDv0 (only used by
-         * OOBE). TODO(crbug.com/955194): Remove this once fixed.*/
-         @apply --cr-input-input;
       }
 
       /* Underline styling below. */
@@ -100,7 +95,7 @@
       :host([force-underline]) #underline,
       :host([focused_]:not([readonly])) #underline {
         opacity: 1;
-        transition: width 180ms ease-out, opacity 120ms ease-in;
+        transition: opacity 120ms ease-in, width 180ms ease-out;
         width: 100%;
       }
     </style>
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toast/BUILD.gn b/chromium/ui/webui/resources/cr_elements/cr_toast/BUILD.gn
index f55dd970313..a06ff0e25c7 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toast/BUILD.gn
+++ b/chromium/ui/webui/resources/cr_elements/cr_toast/BUILD.gn
@@ -13,12 +13,12 @@ js_type_check("closure_compile") {
 }
 
 js_library("cr_toast") {
+  deps = [ "//third_party/polymer/v1_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer-extracted" ]
 }
 
 js_library("cr_toast_manager") {
   deps = [
     ":cr_toast",
-    "//third_party/polymer/v1_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer-extracted",
     "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js:cr",
   ]
@@ -42,10 +42,7 @@ polymer_modulizer("cr_toast_manager") {
   html_file = "cr_toast_manager.html"
   html_type = "dom-module"
   auto_imports = [ "ui/webui/resources/html/assert.html|assert" ]
-  namespace_rewrites = [
-    "cr.toastManager.CrToastManagerElement|CrToastManagerElement",
-    "cr.toastManager.getToastManager|getToastManager",
-  ]
+  namespace_rewrites = [ "cr.toastManager.getToastManager|getToastManager" ]
 }
 
 js_type_check("closure_compile_module") {
@@ -60,6 +57,7 @@ js_library("cr_toast.m") {
   sources =
       [ "$root_gen_dir/ui/webui/resources/cr_elements/cr_toast/cr_toast.m.js" ]
   deps = [
+    "//third_party/polymer/v3_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
   ]
   extra_deps = [ ":cr_toast_module" ]
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.js b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.js
index 39ce6cc03d4..7cb95803a7f 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast.js
@@ -49,6 +49,7 @@ Polymer({
   /**
    * Announce a11y message
    * @param {string} text
+   * @private
    */
   announceA11yMessage_(text) {
     Polymer.IronA11yAnnouncer.requestAvailability();
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.js b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.js
index 50fc1af7e1e..97995da2db4 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_toast/cr_toast_manager.js
@@ -4,16 +4,16 @@
 
 cr.define('cr.toastManager', () => {
   /* eslint-disable */
-  /** @private {?cr.toastManager.CrToastManagerElement} */
+  /** @private {?CrToastManagerElement} */
   let toastManagerInstance = null;
   /* eslint-enable */
 
-  /** @return {!cr.toastManager.CrToastManagerElement} */
+  /** @return {!CrToastManagerElement} */
   /* #export */ function getToastManager() {
     return assert(toastManagerInstance);
   }
 
-  /** @param {?cr.toastManager.CrToastManagerElement} instance */
+  /** @param {?CrToastManagerElement} instance */
   function setInstance(instance) {
     assert(!instance || !toastManagerInstance);
     toastManagerInstance = instance;
@@ -23,7 +23,7 @@ cr.define('cr.toastManager', () => {
    * @fileoverview Element which shows toasts with optional undo button.
    */
   // eslint-disable-next-line
-  /* #export */ let CrToastManagerElement = Polymer({
+  Polymer({
     is: 'cr-toast-manager',
 
     properties: {
@@ -94,7 +94,6 @@ cr.define('cr.toastManager', () => {
 
   // #cr_define_end
   return {
-    CrToastManagerElement: CrToastManagerElement,
     getToastManager: getToastManager,
   };
 });
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
index 13520fa767d..82e0d5f1481 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html
@@ -58,7 +58,6 @@
       }
 
       cr-icon-button {
-        --cr-icon-button-fill-color-focus: var(--cr-toolbar-background-color);
         --cr-icon-button-size: 32px;
         min-width: 32px;
       }
@@ -180,7 +179,8 @@
       <cr-toolbar-search-field id="search" narrow="[[narrow]]"
           label="[[searchPrompt]]" clear-label="[[clearLabel]]"
           spinner-active="[[spinnerActive]]"
-          showing-search="{{showingSearch_}}">
+          showing-search="{{showingSearch_}}"
+          autofocus>
       </cr-toolbar-search-field>
       <iron-media-query query="(max-width: [[narrowThreshold]]px)"
           query-matches="{{narrow}}">
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
index 5fdf2813701..2854d6a9d85 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
+++ b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
@@ -25,9 +25,6 @@
       }
 
       cr-icon-button {
-        --cr-icon-button-fill-color-focus: var(
-            --cr-toolbar-search-field-input-bg-color,
-            var(--cr-toolbar-background-color));
         --cr-icon-button-size: var(--cr-toolbar-icon-container-size, 32px);
         margin: var(--cr-toolbar-icon-margin, 6px);
       }
@@ -94,7 +91,7 @@
 
       label {
         bottom: 0;
-        cursor: text;
+        cursor: var(--cr-toolbar-search-field-cursor, text);
         left: 0;
         overflow: hidden;
         position: absolute;
@@ -112,6 +109,7 @@
         background: transparent;
         border: none;
         color: var(--cr-toolbar-search-field-input-text-color, white);
+        cursor: var(--cr-toolbar-search-field-cursor, text);
         font: inherit;
         outline: none;
         padding: 0;
@@ -135,7 +133,7 @@
             var(--cr-toolbar-search-field-background, rgba(0, 0, 0, 0.22));
         border-radius:
             var(--cr-toolbar-search-field-border-radius, 2px);
-        cursor: text;
+        cursor: var(--cr-toolbar-search-field-cursor, text);
         padding-inline-end: 0;
         width: var(--cr-toolbar-field-width, 680px);
       }
@@ -145,11 +143,13 @@
       }
 
       :host(:not([narrow])) #prompt {
-        margin-inline-start:
-            var(--cr-toolbar-search-field-prompt-margin-inline-start);
         opacity: var(--cr-toolbar-search-field-prompt-opacity);
       }
 
+      :host([narrow]) #prompt {
+        opacity: var(--cr-toolbar-search-field-narrow-mode-prompt-opacity, 0);
+      }
+
       :host([narrow]:not([showing-search])) #searchTerm {
         display: none;
       }
@@ -165,7 +165,9 @@
 
       :host([narrow][showing-search]) #icon,
       :host([narrow][showing-search]) paper-spinner-lite {
-        margin-inline-start: 18px;  /* Line up with Menu icon. */
+        /* 18px to line up with the Menu icon by default. */
+        margin-inline-start:
+            var(--cr-toolbar-search-icon-margin-inline-start, 18px);
       }
     </style>
     <template is="dom-if" id="spinnerTemplate">
@@ -174,19 +176,21 @@
     </template>
     <cr-icon-button id="icon" iron-icon="cr:search" title="[[label]]" dir="ltr"
         tabindex$="[[computeIconTabIndex_(narrow, hasSearchText)]]"
-        aria-hidden$="[[computeIconAriaHidden_(narrow, hasSearchText)]]">
+        aria-hidden$="[[computeIconAriaHidden_(narrow, hasSearchText)]]"
+        on-click="onSearchIconClicked_">
     </cr-icon-button>
     <div id="searchTerm">
       <label id="prompt" for="searchInput" aria-hidden="true">[[label]]</label>
       <input id="searchInput"
           aria-labelledby="prompt"
+          autocomplete="off"
           type="search"
           on-input="onSearchTermInput"
           on-search="onSearchTermSearch"
           on-keydown="onSearchTermKeydown_"
           on-focus="onInputFocus_"
           on-blur="onInputBlur_"
-          autofocus
+          autofocus$="[[autofocus]]"
           spellcheck="false">
     </div>
     <template is="dom-if" if="[[hasSearchText]]">
diff --git a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js
index b37b2622153..c2453c80afb 100644
--- a/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js
+++ b/chromium/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.js
@@ -21,6 +21,12 @@ Polymer({
       reflectToAttribute: true
     },
 
+    autofocus: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
+
     // Prompt text to display in the search field.
     label: String,
 
@@ -67,6 +73,11 @@ Polymer({
   },
 
   /** @private */
+  onSearchIconClicked_() {
+    this.fire('search-icon-clicked');
+  },
+
+  /** @private */
   focus_() {
     this.getSearchInput().focus();
   },
diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior_mojo.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior_mojo.js
index ce089b37fd3..10d48330d00 100644
--- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior_mojo.js
+++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_network_behavior_mojo.js
@@ -102,7 +102,7 @@ const CrPolicyNetworkBehaviorMojo = {
   /**
    * @param {!chromeos.networkConfig.mojom.OncSource} source
    * @return {!CrPolicyIndicatorType}
-   * @private
+   * @protected
    */
   getIndicatorTypeForSource(source) {
     if (source === chromeos.networkConfig.mojom.OncSource.kDevicePolicy) {
diff --git a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js
index d2e6c0256c4..d3d9db47bc5 100644
--- a/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js
+++ b/chromium/ui/webui/resources/cr_elements/policy/cr_policy_pref_indicator.js
@@ -22,7 +22,7 @@ Polymer({
     indicatorType: {
       type: String,
       value: CrPolicyIndicatorType.NONE,
-      computed: 'getIndicatorTypeForPref_(pref.controlledBy, pref.enforcement)',
+      computed: 'getIndicatorTypeForPref_(pref.*, associatedValue)',
     },
 
     /** @private */
@@ -37,19 +37,40 @@ Polymer({
      * @type {!chrome.settingsPrivate.PrefObject|undefined}
      */
     pref: Object,
+
+    /**
+     * Optional value for the preference value this indicator is associated
+     * with. If this is set, no indicator will be shown if it is a member
+     * of |pref.userSelectableValues| and is not |pref.recommendedValue|.
+     * @type {*}
+     */
+    associatedValue: Object,
   },
 
   /**
-   * @param {!chrome.settingsPrivate.ControlledBy|undefined} controlledBy
-   * @param {!chrome.settingsPrivate.Enforcement|undefined} enforcement
-   * @return {CrPolicyIndicatorType} The indicator type based on |controlledBy|
-   *     and |enforcement|.
+   * @return {CrPolicyIndicatorType} The indicator type based on |pref| and
+   *    |associatedValue|.
    */
-  getIndicatorTypeForPref_(controlledBy, enforcement) {
+  getIndicatorTypeForPref_() {
+    const {enforcement, userSelectableValues, controlledBy, recommendedValue} =
+        this.pref;
     if (enforcement === chrome.settingsPrivate.Enforcement.RECOMMENDED) {
+      if (this.associatedValue !== undefined &&
+          this.associatedValue !== recommendedValue) {
+        return CrPolicyIndicatorType.NONE;
+      }
       return CrPolicyIndicatorType.RECOMMENDED;
     }
     if (enforcement === chrome.settingsPrivate.Enforcement.ENFORCED) {
+      // An enforced preference may also have some values still available for
+      // the user to select from.
+      if (userSelectableValues !== undefined) {
+        if (recommendedValue && this.associatedValue === recommendedValue) {
+          return CrPolicyIndicatorType.RECOMMENDED;
+        } else if (userSelectableValues.includes(this.associatedValue)) {
+          return CrPolicyIndicatorType.NONE;
+        }
+      }
       switch (controlledBy) {
         case chrome.settingsPrivate.ControlledBy.EXTENSION:
           return CrPolicyIndicatorType.EXTENSION;
@@ -74,18 +95,17 @@ Polymer({
   },
 
   /**
-   * @param {CrPolicyIndicatorType} indicatorType
    * @return {string} The tooltip text for |indicatorType|.
    * @private
    */
-  getIndicatorTooltipForPref_(indicatorType) {
+  getIndicatorTooltipForPref_() {
     if (!this.pref) {
       return '';
     }
 
     const matches = this.pref && this.pref.value === this.pref.recommendedValue;
     return this.getIndicatorTooltip(
-        indicatorType, this.pref.controlledByName || '', matches);
+        this.indicatorType, this.pref.controlledByName || '', matches);
   },
 
   /** @return {!Element} */
diff --git a/chromium/ui/webui/resources/cr_elements/shared_vars_css.html b/chromium/ui/webui/resources/cr_elements/shared_vars_css.html
index baf7015a329..4f4c0b03cbd 100644
--- a/chromium/ui/webui/resources/cr_elements/shared_vars_css.html
+++ b/chromium/ui/webui/resources/cr_elements/shared_vars_css.html
@@ -67,8 +67,18 @@
     --cr-card-background-color: white;
     --cr-card-shadow-color-rgb: var(--google-grey-800-rgb);
 
-    --cr-card-shadow: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
+    --cr-elevation-1: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
                       rgba(var(--cr-card-shadow-color-rgb), .15) 0 1px 3px 1px;
+    --cr-elevation-2: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
+                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 2px 6px 2px;
+    --cr-elevation-3: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 3px 0,
+                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 4px 8px 3px;
+    --cr-elevation-4: rgba(var(--cr-card-shadow-color-rgb), .3) 0 2px 3px 0,
+                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 6px 10px 4px;
+    --cr-elevation-5: rgba(var(--cr-card-shadow-color-rgb), .3) 0 4px 4px 0,
+                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 8px 12px 6px;
+
+    --cr-card-shadow: var(--cr-elevation-1);
 
     --cr-checked-color: var(--google-blue-600);
     --cr-focused-item-color: var(--google-grey-300);