Device emulator: Replace usage of paper-dialog with cr-dialog.

chrome/browser/resources/chromeos/emulator/audio_settings.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/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable-behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-dialog/paper-dialog.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-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="icons.html">
 <link rel="import" href="shared_styles.html">
 
 <dom-module id="audio-settings">
   <template>
     <!-- TODO(michaelpg): Wrap the line below to fit within the 80-char limit.
          See https://github.com/Polymer/polymer/pull/3668. -->
-    <style include="device-emulator-shared-styles iron-flex iron-flex-alignment iron-positioning">
+    <style include="device-emulator-shared-styles cr-shared-style iron-flex iron-flex-alignment iron-positioning">
     </style>
-    <paper-dialog with-backdrop id="editDialog">
-      <div class="element-label">[[currentEditableObject.deviceName]]</div>
-      <div>
+    <dialog is="cr-dialog" id="editDialog">
+      <div class="title">[[currentEditableObject.deviceName]]</div>
+      <div class="body">
         <form>
           <div class="form-field-section">
             <paper-input value="{{currentEditableObject.deviceName}}"
                 label="Device Name"></paper-input>
             <paper-input value="{{currentEditableObject.name}}"
                 label="Tray Name"></paper-input>
             <paper-input value="{{currentEditableObject.id}}"
                 label="ID" disabled></paper-input>
           </div>
           <div class="form-field-section">
@@ skipping 13 matching lines @@
               <template is="dom-repeat"
                   items="[[nodeTypeOptions]]" as="option">
                 <paper-radio-button name="[[option.type]]">
                   [[option.name]]
                 </paper-radio-button>
               </template>
             </paper-radio-group>
           </div>
         </form>
       </div>
-      <div class="buttons">
-        <paper-button on-click="insertEditedAudioNode"
-            dialog-dismiss>Done</paper-button>
+      <div class="button-container">
+        <paper-button class="action-button" on-click="insertEditedAudioNode">
+          Done
+        </paper-button>
       </div>
-    </paper-dialog>
+    </dialog>
 
     <div class="layout vertical">
       <div class="element-label">
         <paper-icon-button icon="device-emulator:volume-up"></paper-icon-button>
         Audio
       </div>
       <table class="devices-table">
         <tbody>
           <tr class="table-section-header">
             <td colspan="2">Devices</td>
@@ skipping 28 matching lines @@
       </table>
       <div class="add-device-container">
         <paper-button on-click="appendNewNode">
           Add Node
         </paper-button>
       </div>
     </div>
   </template>
   <script src="audio_settings.js"></script>
 </dom-module>