[MD settings] redesign of side nav

chrome/browser/resources/settings/settings_main/settings_main.html

Index: chrome/browser/resources/settings/settings_main/settings_main.html
diff --git a/chrome/browser/resources/settings/settings_main/settings_main.html b/chrome/browser/resources/settings/settings_main/settings_main.html
index 5d4c5e363ede03f9d752c2af80777a7d8b80c541..70af90ebe730a59acee1bac950b4314dc373ee28 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.html
+++ b/chrome/browser/resources/settings/settings_main/settings_main.html
@@ -2,13 +2,39 @@
 <link rel="import" href="/about_page/about_page.html">
 <link rel="import" href="/advanced_page/advanced_page.html">
 <link rel="import" href="/basic_page/basic_page.html">
+<link rel="import" href="/settings_page/main_page_behavior.html">
+
+<dom-module id="advanced-page-toggle">
+  <template>
+    <style include="settings-page-styles">
+      #advancedToggle {
+        @apply(--layout-center);

[Dan Beam, 2016/05/31 23:28:24]

i don't really see the need for @apply(--layout*) stuff, it just adds
cross-browser goop

additionally, you'd probably want to do

  @apply(--layout);
  @apply(--layout-center);
  @apply(--layout-center-justified);

if you really want to be polymeric, but again: same problem (just more goop)

i vote we remove all these in the code we control because chrome-only code
doesn't need it

[dschuyler, 2016/06/02 01:05:37]

Done.

+        display: flex;
+        min-height: 32px;
+        padding: 0 12px;  /** TODO(dschuyler): get real value. */

[Dan Beam, 2016/05/31 23:28:24]

/** -> /*

[dschuyler, 2016/06/02 01:05:37]

Done.

+      }
+
+      #toggleContainer {
+        @apply(--layout-center);
+        display: flex;
+        justify-content: center;
+        min-height: 80px;  /** TODO(dschuyler): get real value. */
+      }
+    </style>
+    <div id="toggleContainer">
+      <div id="advancedToggle" on-tap="toggleValue_">
+        $i18n{advancedPageTitle}
+        <!-- TODO(dschuyler): menu icons (up arrow/down arrow) -->
+      </div>
+    </div>
+  </template>
+</dom-module>
 
 <dom-module id="settings-main">
   <template>
       <style>
         #pageContainer {
           box-sizing: border-box;
-          height: 100%;
           overflow: auto;
           padding: 0 16px;
         }
@@ -23,6 +49,9 @@
         <settings-basic-page prefs="{{prefs}}" current-route="{{currentRoute}}">
         </settings-basic-page>
       </template>
+      <template is="dom-if" if="[[showAdvancedToggle_]]">
+        <advanced-page-toggle></advanced-page-toggle>
+      </template>
       <template is="dom-if" if="[[showAdvancedPage_]]">
         <settings-advanced-page prefs="{{prefs}}"
             current-route="{{currentRoute}}">