MD Settings: adjust dialog style and scroll border visual

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

Index: ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
diff --git a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
index 14a5a866e2d4e464289772fb38d5256ff0eed063..db4ea643b2fa2dae7ef3da65a807921c18a65a73 100644
--- a/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
+++ b/ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html
@@ -30,9 +30,8 @@
 
       .top-container {
         align-items: center;
-        border-bottom: 1px solid var(--divider-color);
         display: flex;
-        min-height: 52px;
+        min-height: 47px;
       }
 
       .title-container {
@@ -42,15 +41,23 @@
       }
 
       :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;
@@ -66,21 +73,26 @@
       :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;
       }
 
@@ -89,8 +101,8 @@
         -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 {
@@ -118,6 +130,7 @@
       </paper-icon-button>
     </div>
     <div class="body-container">
+      <span id="bodyTopMarker"></span>
       <content select=".body"></content>
       <span id="bodyBottomMarker"></span>
     </div>