MD Settings: adjust dialog style and scroll border visual

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/polymer.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-styles/default-theme.html">
 
 <dom-module id="cr-dialog">
   <template>
     <style>
       :host {
@@ skipping 12 matching lines @@
         background-color: rgba(0, 0, 0, 0.6);
         bottom: 0;
         left: 0;
         position: fixed;
         right: 0;
         top: 0;
       }
 
       .top-container {
         align-items: center;
-        border-bottom: 1px solid var(--divider-color);
         display: flex;
-        min-height: 52px;
+        min-height: 47px;
       }
 
       .title-container {
         display: flex;
         flex: 1;
         outline: none;
       }
 
       :host ::content .title {
-        font-size: 123.07%; /* (16px / 13px) * 100 */
+        font-size: 115.38%; /* (15px / 13px) * 100 */

[dpapad, 2017/04/05 23:56:11]

Can we use rem units to avoid those complex calculations?

[dschuyler, 2017/04/06 00:53:27]

I'm not seeing where this would be better
font-size: 1.1538em;  /* (15px / 13px) */

[dschuyler, 2017/04/06 00:54:57]

Though we should probably chat about it outside of this CL. The % version is the
standard in MD settings at the moment. If we change it to em we should change it
consistently (which would be outside of the scope of this CL).

[dpapad, 2017/04/06 01:06:09]

rem units are different than em units.

em: Relative to the font-size of the element (2em means 2 times the size of the
current font)
rem: Relative to font-size of the root element

The latter makes it much easier to derive all fonts based on a single value
without caring about the DOM hierarchy.

We have already been using rem units in a few places, see
https://cs.chromium.org/search/?q=%22rem;%22+file:%5Esrc/chrome/browser/resou....
I agree that this can be discussed outside the context of this CL though.

[scottchen, 2017/04/06 01:11:13]

Like Dave said, rem wouldn't be any shorter in this case.

I think we should just overhaul how we set font-sizes and line-heights in MD
settings after beta launch.

+        line-height: 1;
+        margin-bottom: 16px;
+        margin-top: 16px;
       }
 
       #close {
         --paper-icon-button: {
-          height: 40px;
-          width: 40px;
+          height: 36px;
+          width: 36px;
         };
-        -webkit-margin-end: 6px;
+
+        --layout-inline: {
+          display: flex;
+        };
+
+        -webkit-margin-end: 4px;
         /* <paper-icon-button> overrides --iron-icon-{height,width}, so this
          * padding essentially reduces 40x40 to 20x20. */
         padding: 10px;
       }
 
       .body-container {
         display: flex;
         flex-direction: column;
         overflow: auto;
         @apply(--cr-dialog-body-container);
       }
 
       :host([show-scroll-borders]) .body-container {
         /* Prevent layout moving when border does appear. */
         border-bottom: 1px solid transparent;
+        border-top: 1px solid transparent;
       }
 
       :host([show-scroll-borders]) .body-container.bottom-scrollable {
         border-bottom: 1px solid var(--paper-grey-300);
       }
 
+      :host([show-scroll-borders]) .body-container.top-scrollable {
+        border-top: 1px solid var(--paper-grey-300);
+      }
+
       :host ::content .body {
-        padding-bottom: 12px;
-        padding-top: 12px;
+        padding-bottom: 8px;
+        padding-top: 8px;
       }
 
       :host ::content .body,
       :host ::content .title {
-        -webkit-padding-end: 24px;
-        -webkit-padding-start: 24px;
+        -webkit-padding-end: 16px;
+        -webkit-padding-start: 16px;
         flex: 1;
       }
 
       :host ::content .button-container {
         -webkit-padding-end: 16px;
         -webkit-padding-start: 16px;
         display: flex;
         justify-content: flex-end;
-        margin-bottom: 12px;
-        margin-top: 12px;
+        margin-bottom: 16px;
+        margin-top: 16px;
       }
 
       :host ::content .button-container .cancel-button {
         -webkit-margin-end: 8px;
         color: var(--paper-grey-600);
       }
 
       :host ::content .footer {
         border-bottom-left-radius: inherit;
         border-bottom-right-radius: inherit;
         margin: 0;
         padding: 16px 20px;
       }
 
       :host ::content .border-top-divider {
         border-top: 1px solid var(--divider-color);
       }
     </style>
     <div class="top-container">
       <div class="title-container" tabindex="-1">
         <content select=".title"></content>
       </div>
       <paper-icon-button icon="cr:clear" on-tap="cancel" id="close"
           aria-label$="[[closeText]]">
       </paper-icon-button>
     </div>
     <div class="body-container">
+      <span id="bodyTopMarker"></span>
       <content select=".body"></content>
       <span id="bodyBottomMarker"></span>
     </div>
     <content select=".button-container"></content>
     <content select=".footer"></content>
   </template>
   <script src="cr_dialog.js"></script>
 </dom-module>