Implement important sites dialog for desktop.

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 88 matching lines @@
         --paper-icon-button: {
           height: 36px;
           width: 36px;
         };
 
         --layout-inline: {
           display: flex;
         };
 
         -webkit-margin-end: 4px;
+        align-self: flex-start;
+        margin-top: 4px;

[dschuyler, 2017/04/11 23:49:32]

I believe this dialog is used in a variety of places. Which uses of cr dialog
have been tested with this change (i.e. does this impact other UIs badly)?

[dullweber, 2017/04/13 14:47:50]

I checked the existing page of the clear_browsing_data dialog and it looks fine.
Dialogs with only a single line in the title should not be changed by this. Is
there any dialog with a larger title that I should check?

         padding: 10px;  /* Makes the actual icon 16x16. */
       }
     </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>