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

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

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-drawer-panel/paper-drawer-panel.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-header-panel/paper-header-panel.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toolbar/paper-toolbar.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="/direction_delegate.html">
@@ skipping 16 matching lines @@
       }
 
       paper-drawer-panel {
         --paper-drawer-panel-drawer-container: {
           background: none;  /* Remove default background styling. */
         };
         align-items: center;
         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);
       }
 
       paper-icon-button[suffix] {
         --iron-icon-fill-color: var(--settings-title-search-color);
         height: 32px; /* After padding, the icon size is 16px. */
         width: 32px;
       }
 
@@ skipping 63 matching lines @@
         --paper-toolbar-content: {
           font-size: 123.08%; /* go to 16px from 13px */
         };
         --paper-toolbar: {
           background-color: var(--settings-title-bar-background-color);
         };
       }
 
       /* 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;
       }
 
       .heading {
         -webkit-margin-start: 8px;
       }
 
       paper-drawer-panel:not([narrow]) #main-title {
         display: none;
       }
 
       paper-icon-button[toggles]:not([active]) + #search-input {
         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;
         width: 100%;
       }
     </style>
     <settings-router current-route="{{currentRoute}}"
         current-route-titles="{{currentRouteTitles}}">
     </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>
       <paper-header-panel main>
         <paper-toolbar class="toolbar">
           <paper-icon-button icon="settings:menu" id="menu-button"
               paper-drawer-toggle>
           </paper-icon-button>
           <div class="heading" id="main-title">
             $i18n{settings}
           </div>
           <div class="last">
             <paper-icon-button icon="cr:search" toggles>
             </paper-icon-button>
             <paper-input id="search-input" label="$i18n{internalSearch}"
                 no-label-float>
               <!-- TODO(dschuyler): implement internal search. -->
               <paper-icon-button suffix icon="cr:cancel">
               </paper-icon-button>
             </paper-input>
           </div>
         </paper-toolbar>
         <settings-main prefs="{{prefs}}" current-route="{{currentRoute}}">
         </settings-main>
       </paper-header-panel>
     </paper-drawer-panel>
   </template>
   <script src="settings_ui.js"></script>
 </dom-module>