SplitSettings: Show OS settings sidenav menu by default on large screens

This ports a browser settings CL to do the same:
https://chromium-review.googlesource.com/c/chromium/src/+/1583120

It also ports a fix for focus ring padding on the settings menu button:
https://chromium-review.googlesource.com/c/chromium/src/+/1611139

The tests are not ported yet because we're still setting up our test
scaffolding for the OS settings pages: crbug.com/955731

Bug: 628247,950007
Change-Id: I9941ae06532bc1088beaffa1f8dcc82a7d81e800
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1627241
Commit-Queue: James Cook <jamescook@chromium.org>
Auto-Submit: James Cook <jamescook@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#663104}

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

@@ -14,8 +14,10 @@
   <template>
     <style include="settings-shared">
       :host {
+        box-sizing: border-box;
         display: block;
-        margin-top: 8px;
+        padding-bottom: 2px;
+        padding-top: 8px;
       }
 
       a[href],

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

@@ -5,6 +5,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_drawer/cr_drawer.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/find_shortcut_behavior.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
@@ -27,10 +28,13 @@
         @apply --layout-fit;
         display: flex;
         flex-direction: column;
-      }
-
-      cr-drawer {
-        z-index: 2;
+        --settings-menu-width: 250px;
+        /* Centered cards has a max-width of var(--cr-centered-card-max-width)
+         * and a width of a certain percentage. Therefore, to make room for the
+         * cards to be at their max width, the flex-basis of #main needs to be
+         * whatever value the percentage of would equal to the max width. */
+        --settings-main-basis: calc(var(--cr-centered-card-max-width) /
+            var(--cr-centered-card-width-percentage));
       }
 
       cr-toolbar {
@@ -40,13 +44,65 @@
         color: var(--cr-secondary-text-color);
         min-height: 56px;
         z-index: 2;
+        --cr-toolbar-left-spacer-width: var(--settings-menu-width);
+        --cr-toolbar-center-basis: var(--settings-main-basis);
+      }
+
+      #cr-container-shadow-top {
+        /* Needs to be higher than #container's z-index to appear above
+         * scrollbars. */
+        z-index: 2;
       }
 
       #container {
+        align-items: flex-start;
+        display: flex;
         flex: 1;
         overflow: overlay;
         position: relative;
       }
+
+      #left,
+      #main,
+      #right {
+        flex: 1 1 0;
+      }
+
+      #left {
+        height: 100%;
+        position: sticky;
+        top: 0;
+      }
+
+      #left os-settings-menu {
+        max-height: 100%;
+        overflow: auto;
+        overscroll-behavior: contain;
+        width: var(--settings-menu-width);
+      }
+
+      #main {
+        flex-basis: var(--settings-main-basis);
+        height: 100%;
+        min-height: fit-content;
+      }
+
+      /* The breakpoint of 980px was decided on by the rounded sum of
+       * var(--settings-main-basis), var(--settings-menu-width), and
+       * var(--cr-section-padding). */
+      @media (max-width: 980px) {
+        #left,
+        #right {
+          display: none;
+        }
+
+        #main {
+          min-width: auto;
+          /* Add some padding to make room for borders and to prevent focus
+           * indicators from being cropped. */
+          padding: 0 3px;
+        }
+      }
     </style>
     <settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs>
     <cr-toolbar page-name="$i18n{settings}"
@@ -57,7 +113,9 @@
         menu-label="$i18n{menuButtonLabel}"
         on-search-changed="onSearchChanged_"
         role="banner"
-        show-menu>
+        narrow="{{isNarrow}}"
+        narrow-threshold="980"
+        show-menu="[[isNarrow]]">
     </cr-toolbar>
     <cr-drawer id="drawer" on-close="onMenuClose_" heading="$i18n{settings}"
         align="$i18n{textdirection}">
@@ -77,6 +135,18 @@
       </div>
     </cr-drawer>
     <div id="container" class="no-outline">
+      <div id="left">
+        <os-settings-menu page-visibility="[[pageVisibility_]]"
+            show-apps="[[showApps_]]"
+            show-android-apps="[[showAndroidApps_]]"
+            show-crostini="[[showCrostini_]]"
+            show-plugin-vm="[[showPluginVm_]]"
+            show-multidevice="[[showMultidevice_]]"
+            have-play-store-app="[[havePlayStoreApp_]]"
+            on-iron-activate="onIronActivate_"
+            advanced-opened="{{advancedOpened_}}">
+        </os-settings-menu>
+      </div>
       <os-settings-main id="main" prefs="{{prefs}}"
           toolbar-spinner-active="{{toolbarSpinnerActive_}}"
           page-visibility="[[pageVisibility_]]"
@@ -89,6 +159,9 @@
           have-play-store-app="[[havePlayStoreApp_]]"
           advanced-toggle-expanded="{{advancedOpened_}}">
       </os-settings-main>
+      <!-- An additional child of the flex #container to take up space,
+           aligned with the right-hand child of the flex toolbar. -->
+      <div id="right"></div>
     </div>
   </template>
   <script src="os_settings_ui.js"></script>

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

@@ -45,6 +45,12 @@ Polymer({
       value: false,
     },
 
+    /**
+     * Whether settings is in the narrow state (side nav hidden). Controlled by
+     * a binding in the cr-toolbar element.
+     */
+    isNarrow: Boolean,
+
     /**
      * @private {!PageVisibility}
      */