MD Settings: Expanding cards should not overlap header, take 2.

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 5b527c4daa56bee2d7ab01adcd03076d8d3564ab..d33f78aabe0a6794c48ada4edee279814d8e21ee 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.html
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.html
@@ -119,6 +119,37 @@
         --paper-input-max-width: 200px;
       }
 
+      /*
+       * These header elements must create stacking contexts when a section is
+       * expanding to show a sub-page. (It's simpler for them to always create
+       * these stacking contexts, so we do.) But for the overlay to work, the
+       * paper-header-panel's other descendents (rooted at settings-main) must
+       * never create stacking contexts while a dialog is showing. This means
+       * we cannot animate a section expanding/collapsing while a dialog is
+       * shown (which makes good UX sense anyway.) I have discovered a truly
+       * non-marvellous proof of this, which this comment cannot contain:

[Dan Beam, 2016/05/18 00:27:32]

cute

+       * https://goo.gl/CCzijE
+       */

[Dan Beam, 2016/05/18 00:27:32]

/* These ...
^^
 * https://goo.gl/CCzijE */
                         ^^

[michaelpg, 2016/05/18 16:58:26]

Done.

+      paper-header-panel[main] paper-toolbar {
+        z-index: 2;
+      }
+
+      paper-header-panel[main] {
+        --paper-header-panel-shadow: {
+          z-index: 2;
+        };
+      }
+
+      /*
+       * The paper-drawer-panel implementation gives the drawer a stacking
+       * context, so its z-index should at least equal the main panel's.
+       */

[Dan Beam, 2016/05/18 00:27:32]

same formatting nit

[michaelpg, 2016/05/18 16:58:26]

Done.

+      paper-drawer-panel[narrow] {
+        --paper-drawer-panel-drawer-container: {
+          z-index: 2;
+        };
+      }
+
       paper-toolbar {
         --paper-toolbar-height: 56px;
         --paper-toolbar-sm-height: 56px;