[OsSettingsSearch] Don't hide burger menu icon and other stylizations.

* 680px width in narrow mode if search is shown (matches settings rows).
* 80vw width in extreme narrow mode so that search input is not cutoff.
* The burger menu icon will not be hidden in narrow or extremely narrow.
* Magnifying glass further away from edge of narrow OS settings window.

Videos:
https://nimb.ws/UzWsaG
https://nimb.ws/ehD7iA

Fixed: 1110200
Change-Id: I33ec3b42108c84b60cb27aac9914b759b9a6a627
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2337277Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795226}

chrome/browser/resources/settings/chromeos/os_settings_search_box/os_settings_search_box.html

@@ -18,7 +18,6 @@
   <template>
     <style include="settings-shared">
       :host {
-        --cr-toolbar-field-width: 480px;
         --cr-toolbar-focused-min-height: 40px;
         --cr-toolbar-icon-container-size: 32px;
         --cr-toolbar-icon-margin: 8px 16px;
@@ -31,6 +30,7 @@
         display: flex;
         flex-basis: var(--cr-toolbar-field-width);
         transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        width: var(--cr-toolbar-field-width);
       }
 
       @media (prefers-color-scheme: dark) {
@@ -47,10 +47,7 @@
       }
 
       :host([narrow][showing-search]) {
-        flex-basis: 100%;
         justify-content: center;
-        padding-inline-end: 14px;
-        padding-inline-start: 14px;
       }
 
       cr-toolbar-search-field {
@@ -67,6 +64,10 @@
             var(--cr-toolbar-search-field-background, rgba(0, 0, 0, 0.22));
       }
 
+      :host([narrow]:not([showing-search])) cr-toolbar-search-field {
+        padding-inline-end: 10px;
+      }
+
       :host(:focus-within[showing-search]) cr-toolbar-search-field {
         --cr-toolbar-search-field-background: var(--cr-card-background-color);
         box-shadow: var(--cr-elevation-1);
@@ -89,15 +90,10 @@
         padding-bottom: var(--separator-height);
       }
 
-      :host([narrow]) iron-dropdown {
-        left: 0;
-        margin-inline-end: 14px;
-        margin-inline-start: 14px;
-        right: 0;
-      }
-
       iron-dropdown {
+        left: 0;
         margin-top: 74px;
+        right: 0;
       }
 
       iron-dropdown [slot='dropdown-content'] {
@@ -106,13 +102,6 @@
         box-shadow: var(--cr-elevation-3);
         display: table;
         padding-bottom: 16px;
-      }
-
-      :host([narrow]) iron-dropdown [slot='dropdown-content'] {
-        width: 100%;
-      }
-
-      :host(:not([narrow])) iron-dropdown [slot='dropdown-content'] {
         width: var(--cr-toolbar-field-width);
       }
 

chrome/browser/resources/settings/chromeos/os_toolbar/os_toolbar.html

@@ -76,6 +76,11 @@
       }
 
       :host([narrow]) #centeredContent {
+        position: absolute;
+        width: 100%;
+      }
+
+      :host([narrow]:not([showing-search_])) #centeredContent {
         justify-content: flex-end;
       }
 
@@ -84,9 +89,23 @@
         visibility: hidden;
       }
 
-      :host([narrow][showing-search_]) #leftContent {
-        opacity: 0;
-        position: absolute;
+      :host([narrow][showing-search_]) #settingsTitle {
+        display: none;
+      }
+
+      :host([showing-search_][is-search-box-cutoff_]) os-settings-search-box {
+        --cr-toolbar-field-width: 80vw; /* Ensures the input is not cutoff. */
+        margin-inline-start: 48px; /* No overlap with #leftContent. */
+      }
+
+      :host([showing-search_][narrow]:not([is-search-box-cutoff_]))
+          os-settings-search-box {
+        --cr-toolbar-field-width: 680px;
+      }
+
+      :host(:not([narrow]):not([is-search-box-cutoff_]))
+          os-settings-search-box {
+        --cr-toolbar-field-width: 480px;
       }
 
       :host(:not([narrow])) #leftContent {
@@ -106,6 +125,9 @@
         text-align: end;
       }
     </style>
+    <iron-media-query query="(max-width: 780px)"
+        query-matches="{{isSearchBoxCutoff_}}">
+    </iron-media-query>
     <div id="leftContent">
       <div id="leftSpacer">
         <template is="dom-if" if="[[showMenu]]">
@@ -115,7 +137,7 @@
               title="$i18n{menuButtonLabel}">
           </cr-icon-button>
         </template>
-        <h1>$i18n{settings}</h1>
+        <h1 id="settingsTitle">$i18n{settings}</h1>
       </div>
     </div>
 

chrome/browser/resources/settings/chromeos/os_toolbar/os_toolbar.js

@@ -24,6 +24,16 @@ Polymer({
       reflectToAttribute: true,
     },
 
+    /**
+     * True when the toolbar is displaying in an extremely narrow mode that the
+     * viewport may cutoff an OsSettingsSearchBox with a specific px width.
+     * @private
+     */
+    isSearchBoxCutoff_: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
+
     /** @private */
     showingSearch_: {
       type: Boolean,