Site Settings Desktop: Polish the Site Data details dialog.

chrome/browser/resources/settings/site_settings/site_data_details_dialog.html

 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="site-data-details-dialog">
   <template>
     <style include="settings-shared">
+      .remove-container {
+        -webkit-margin-end: -7px;
+      }
+
       .remove-button {
-        margin-top: 12px;
+        margin-top: -7px;
       }

[Finnur, 2016/09/29 15:54:01]

This is mentioned in passing in the bug -- the remove button was out of
alignment with the combobox and with the button at the bottom right corner.

[dschuyler, 2016/09/29 19:40:27]

Please let me know if this doesn't work, but
I think this would be better solved by 
- remove the shift by -7px; in both places above.
- removing the margin on the paper-button (that is inside the button-container)
- adding "align-self: center;" to the paper-dropdown-menu-light
- adding "display: flex;" to the div just above paper-dropdown-menu-light
(I tried that locally, and it looks nice imo).
That should line the pieces up nicely, with well formed 
rectangles and centering, which (I'm hoping) will
be more robust against other changes in the UI (more 
robust than fixed values shifting of the pieces).

[Finnur, 2016/09/30 09:19:42]

Yup. Looks fine. Thanks.

     </style>
     <dialog is="cr-dialog" id="dialog">
       <div class="title">
         [[title_]]
       </div>
       <div class="body">
         <div class="layout horizontal" id="container">
           <div class="flex">
             <paper-dropdown-menu-light vertical-align="auto" no-label-float>
               <paper-listbox id="picker" class="dropdown-content"
                   attr-for-selected="picker-value"
                   on-iron-activate="onItemSelected_">
                 <template is="dom-repeat" items="[[entries_]]">
                   <button class="dropdown-item" role="option"
                       picker-value$="[[item.id]]">
                     [[getEntryDescription(item)]]
                   </button>
                 </template>
               </paper-listbox>
             </paper-dropdown-menu-light>
           </div>
-          <div class="button-container">
+          <div class="button-container remove-container">
             <paper-button on-tap="onRemove_"
                 class="cancel-button remove-button">
               $i18n{siteSettingsCookieRemove}
             </paper-button>
           </div>
         </div>
 
         <div id="content"></div>
 
         <div class="button-container">
           <paper-button class="cancel-button" on-tap="onCancelTap_">
               $i18n{cancel}
           </paper-button>
           <paper-button class="action-button" id="clear" on-tap="onRemoveAll_">
             $i18n{siteSettingsCookieRemoveAll}
           </paper-button>
         </div>
       </div>
     </dialog>
   </template>
   <script src="cookie_info.js"></script>
   <script src="cookie_tree_node.js"></script>
   <script src="site_data_details_dialog.js"></script>
 </dom-module>