[MD settings] Remove old side nav code; remove extra toolbar

chrome/browser/resources/settings/settings_ui/settings_ui.html

Index: chrome/browser/resources/settings/settings_ui/settings_ui.html
diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chrome/browser/resources/settings/settings_ui/settings_ui.html
index 8c50440be563131ed641dbc9f40214dc3170c723..9b1c25c89bae670ef0c0cc8326557be084509426 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.html
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.html
@@ -34,50 +34,6 @@
         position: relative;
       }
 
-      #drawer {
-        --paper-header-panel-shadow: {
-          /* Polymer's style transformation chokes on :host() and :not() (and
-           * many other things, it seems). Just hide the built-in shadow and
-           * duplicate its style. */
-          display: none;
-        };
-        /* Explicitly set this so that transitions work and look good. */
-        background-color: var(--settings-background-color);
-      }
-
-      #drawer .toolbar::after {
-        box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
-        content: '';
-        display: block;
-        height: 6px;
-      }
-
-      #drawer,
-      #drawer .toolbar,
-      #drawer .toolbar::after {
-        transition: background-color .3s, color .3s, height .3s;
-      }
-
-      :host(:not(.narrowing)) [narrow] #drawer,
-      :host(:not(.narrowing)) [narrow] #drawer .toolbar,
-      :host(:not(.narrowing)) [narrow] #drawer .toolbar::after {
-        transition: none;  /* Transition only when removing [narrow]. */
-      }
-
-      :host(:not(.narrowing)) [narrow] #drawer,
-      :host(:not(.narrowing)) [narrow] #drawer .toolbar {
-        background-color: white;
-      }
-
-      :host(:not(.narrowing)) [narrow] #drawer .toolbar {
-        color: var(--settings-nav-grey);
-      }
-
-      :host(:not(.narrowing)) [narrow] #drawer .toolbar::after {
-        border-bottom: var(--settings-separator-line);
-        height: 0;
-      }
-
       paper-header-panel[main] paper-icon-button {
         --iron-icon-fill-color: var(--settings-title-bar-color);
       }
@@ -161,7 +117,6 @@
 
       /* Prevent paper-toolbar from setting the margin-right to 24px. */
       paper-icon-button#menu-button {
-        flex-shrink: 0;
         /* TODO(dschuyler): this margin is on the right regardless of language
          * direction (e.g. rtl). Make a patch for paper-toolbar in Polymer. */
         margin-right: 0;
@@ -179,6 +134,15 @@
         display: none;
       }
 
+      .drawer-toolbar {
+        -webkit-padding-start: 24px;
+        border-bottom: var(--settings-separator-line);
+        align-items: center;
+        display: flex;
+        font-size: 123.08%; /* go to 16px from 13px */
+        min-height: 56px;
+      }
+
       .last {
         display: flex;
         justify-content: flex-end;
@@ -190,14 +154,12 @@
     </settings-router>
     <paper-drawer-panel drawer-width="256px" id="panel" narrow="{{isNarrow_}}"
         responsive-width="900px" force-narrow>
-      <paper-header-panel drawer id="drawer">
-        <paper-toolbar class="toolbar">
-          <div class="heading">$i18n{settings}</div>
-        </paper-toolbar>
+      <paper-header-panel mode="waterfall" drawer>
+        <div class="paper-header drawer-toolbar">$i18n{settings}</div>

[dpapad, 2016/06/17 22:21:20]

Nit (optional): How about removing drawer-toolbar class completely, and rename
line 137 to .paper-header?

[dschuyler, 2016/06/17 22:24:12]

Done.

         <settings-menu current-route="{{currentRoute}}" id="sideNav">
         </settings-menu>
       </paper-header-panel>
-      <paper-header-panel main>
+      <paper-header-panel mode="waterfall" main>
         <paper-toolbar class="toolbar">
           <paper-icon-button icon="settings:menu" id="menu-button"
               paper-drawer-toggle>