MD Settings: Workaround for section expand/collapse animation jank.

chrome/browser/resources/settings/settings_page_css.html

 <link rel="import" href="/settings_page/main_page_behavior.html">
 
 <dom-module id="settings-page-styles">
   <template>
     <style include="main-page-styles">
       :host {
         --settings-page-padding-top: 21px;
         box-sizing: border-box;
         display: block;
         height: inherit;
         margin: 0 auto;
         max-width: 960px;
         min-width: 622px;
         position: relative;
         width: 96%;
       }
 
       :host > div {
         height: inherit;
       }
 
       :host > div > * {
         /* The margin and padding here are doing two things: make the total
          * separation 24px; and make scrollIntoView align the section header
          * with the top item in the side nav menu. Both things are desired
          * by Alan (bettes@). */
         margin-bottom: 3px;
-        padding-top: var(--settings-page-padding-top);
+        /* TODO(michaelpg): This makes more sense as padding, but uses margin as
+         * a workaround for crbug.com/617287. Because margins collapse, add 3px
+         * to retain mostly the same spacing. */
+        margin-top: calc(var(--settings-page-padding-top) + 3px);
+      }
+
+      :host > div > :first-of-type {
+        /* TODO(michaelpg): This is offset because of the previous addition of
+         * 3px. */

[dschuyler, 2016/06/08 01:04:41]

Let's include the bug number at 
each point of change, so that 
when the bug is eventually fixed
we can grep and find all of them.
e.g.
/* TODO(michaelpg): This is offset because of the previous addition of
 * 3px. crbug.com/617287. */

[michaelpg, 2016/06/09 18:31:30]

Done.

+        margin-top: var(--settings-page-padding-top);
       }
 
       .expanded.frozen {
-        margin-top: -var(--settings-page-padding-top);
+        /* TODO(michaelpg): This is zeroed out because of the previous
+         * replacement of margin with padding, above. */

[dschuyler, 2016/06/08 01:04:41]

 * replacement of margin with padding, above. crbug.com/617287. */

[michaelpg, 2016/06/09 18:31:30]

Done.

+        margin-top: 0;  /* -var(--settings-page-padding-top); */
       }
     </style>
   </template>
 </dom-module>