[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..aa6950c5bbb2c035a9bbe2fb11c8984d68a5cf12 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,18 @@
         display: none;
       }
 
+      .drawer-toolbar {
+        border-bottom: var(--settings-separator-line);
+      }
+
+      .drawer-toolbar > * {
+        -webkit-margin-start: 24px;
+        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,10 +157,10 @@
     </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 drawer>
+        <div class="drawer-toolbar">

[dpapad, 2016/06/17 21:38:46]

Shouldn't this be class="paper-header" per documentation at
https://elements.polymer-project.org/elements/paper-header-panel? I am surprised
this div is even displayed since it does not match any content selector within
paper-header-panel.

[dpapad, 2016/06/17 21:40:52]

I actually understand why it is displayed, but I think without paper-header CSS
class, it will not be visible when you start scrolling the contents of this
paper-header-panel.

[dschuyler, 2016/06/17 22:18:14]

It's up to Alan, but I'll add it now and he can
review it later. I also added mode waterfall to the header panel.

Done.

[dschuyler, 2016/06/17 22:18:14]

Acknowledged.

[dpapad, 2016/06/17 22:24:04]

Is the waterfall effect very notice-able? I would lean towards leaving it as-is
if Alan has not mentioned anything about it so far, and only change it after we
bring it to his attention.

[Dan Beam, 2016/06/17 22:28:22]

alan wants waterfall

+          <div>$i18n{settings}</div>

[dpapad, 2016/06/17 21:38:46]

Do we need the two divs? Can they just be merged into one?

[dschuyler, 2016/06/17 22:18:14]

Done.

+        </div>
         <settings-menu current-route="{{currentRoute}}" id="sideNav">
         </settings-menu>
       </paper-header-panel>