MD User Manager: Refactors existing dialogs in User Manager into <user-manager-dialog>

chrome/browser/resources/md_user_manager/error_dialog.html

Index: chrome/browser/resources/md_user_manager/error_dialog.html
diff --git a/chrome/browser/resources/md_user_manager/error_dialog.html b/chrome/browser/resources/md_user_manager/error_dialog.html
index a105d535d093b76ac82aff81fc4de00aff002ec1..6a66b9d8496ae3bcaebae6f76d91adaedc30940b 100644
--- a/chrome/browser/resources/md_user_manager/error_dialog.html
+++ b/chrome/browser/resources/md_user_manager/error_dialog.html
@@ -1,63 +1,26 @@
 <link rel="import" href="chrome://md-user-manager/shared_styles.html">
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://md-user-manager/user_manager_dialog.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 
-<!-- TODO(mahmadi): refactor this and import-supervised-user reusing
-     <paper-dialog> or <settings-dialog> -->
 <dom-module id="error-dialog">
   <template>
     <style include="shared-styles">
-      #backdrop {
-        align-items: center;
-        background: rgba(255, 255, 255, 0.6);
-        bottom: 0;
-        display: flex;
-        justify-content: center;
-        left: 0;
-        position: absolute;
-        right: 0;
-        top: 0;
-      }
-
       #dialog {
-        background: white;
-        border-radius: 2px;
-        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
-                    0 6px 30px 5px rgba(0, 0, 0, 0.12),
-                    0 8px 10px -5px rgba(0, 0, 0, 0.4);
-        color: var(--primary-text-color);
-        width: 512px;
-      }
-
-      #title-bar {
-        padding: 6px;
-      }
-
-      #title-bar paper-icon-button {
-        --paper-icon-button: {
-          padding: 10px;
+        --user-manager-dialog-title-bar: {
+          border-bottom-width: 0;
         };
       }
-
       #message {
-        padding: 10px 16px 62px;
         white-space: pre-wrap;
         word-wrap: break-word;
+        margin-bottom: 52px;
       }
     </style>
-    <template is="dom-if" if="[[!popupHidden_]]">
-      <div id="backdrop">
-        <div id="dialog">
-          <div id="title-bar" class="horizontal end-justified layout">
-            <paper-icon-button icon="cr:close" on-tap="onCloseTap_">
-            </paper-icon-button>
-          </div>
-          <div id="message">[[message_]]</div>
-        </div>
+    <user-manager-dialog id="dialog">
+      <div class="body">
+        <div id="message">[[message_]]</div>

[dpapad, 2016/06/08 23:05:12]

Is this 2nd div necessary? Can it be merged to the parent div as follows?

<div id="message" class="body">[[message_]]</div>

[Moe, 2016/06/09 14:10:03]

user-manager-dialog gives a certain padding to body's children. I certainly can
merge the two and apply the padding here. But that'll mean if we ever change the
look and feel of user-manager-dialog we'd have to change this too. I think it's
better to keep the second div.

       </div>
-    </template>
+    </user-manager-dialog>
   </template>
   <script src="chrome://md-user-manager/error_dialog.js"></script>

[dpapad, 2016/06/08 23:05:12]

Nit: Is this equivalent to the shorter

<script src="error_dialog.js"></script>

Asking because in the future I am guessing that chrome://md-user-manager will be
promoted to simply chrome://user-manager, so not repeating the first part of the
URL if it is not needed seems like a benefit (there will be no need to change
this later).

[Moe, 2016/06/09 14:10:03]

Makes sense! I left a todo here to update all these to relative urls in one
future CL.

 </dom-module>