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

BUG=720781 CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation Review-Url: https://codereview.chromium.org/2958193002 Cr-Commit-Position: refs/heads/master@{#483130}
marcosholgado · Jun 28, 2017 · e2373d1 · e2373d1
1 parent 03b5851
commit e2373d1
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 35 deletions.
diff --git a/chrome/browser/resources/chromeos/emulator/audio_settings.html b/chrome/browser/resources/chromeos/emulator/audio_settings.html
@@ -1,9 +1,10 @@
 <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">
@@ -15,11 +16,11 @@
   <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}}"
@@ -53,11 +54,12 @@
           </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">

diff --git a/chrome/browser/resources/chromeos/emulator/audio_settings.js b/chrome/browser/resources/chromeos/emulator/audio_settings.js
@@ -160,6 +160,7 @@ Polymer({
     // in |node|.
     var node = this.nodes[this.currentEditIndex];
     chrome.send('insertAudioNode', [node]);
+    this.$.editDialog.close();
   },
 
   /**
@@ -199,7 +200,7 @@ Polymer({
     var index = event.model.index;
     this.currentEditIndex = index;
     this.currentEditableObject = this.nodes[index];
-    this.$.editDialog.toggle();
+    this.$.editDialog.showModal();
   },
 
   /**

diff --git a/chrome/browser/resources/chromeos/emulator/bluetooth_settings.html b/chrome/browser/resources/chromeos/emulator/bluetooth_settings.html
@@ -1,9 +1,10 @@
 <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">
@@ -15,12 +16,11 @@
   <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 on-iron-overlay-opened="editDialogOpened" with-backdrop
-        id="editDialog">
-      <div class="element-label">[[currentEditableObject.alias]]</div>
-      <div>
+    <dialog is="cr-dialog" id="editDialog">
+      <div class="title">[[currentEditableObject.alias]]</div>
+      <div class="body">
         <form>
           <div class="form-field-section">
             <paper-input value="{{currentEditableObject.alias}}"
@@ -94,10 +94,12 @@
           </div>
         </form>
       </div>
-      <div class="buttons">
-        <paper-button dialog-dismiss>Close</paper-button>
+      <div class="button-container">
+        <paper-button class="action-button" on-tap="onCloseTap_">
+          Close
+        </paper-button>
       </div>
-    </paper-dialog>
+    </dialog>
 
     <div class="layout vertical">
       <div class="element-label">

diff --git a/chrome/browser/resources/chromeos/emulator/bluetooth_settings.js b/chrome/browser/resources/chromeos/emulator/bluetooth_settings.js
@@ -173,15 +173,6 @@ Polymer({
     }
   },
 
-  /**
-   * Called when the device edit dialog is opened. Re-validates necessary input
-   * fields.
-   */
-  editDialogOpened: function() {
-    this.validateAddress();
-    this.validatePath();
-  },
-
   handleAddressInput: function() {
     this.autoFormatAddress();
     this.validateAddress();
@@ -480,7 +471,14 @@ Polymer({
     var index = event.model.index;
     this.currentEditIndex = index;
     this.currentEditableObject = this.devices[index];
-    this.$.editDialog.toggle();
+    this.$.editDialog.showModal();
+    this.validateAddress();
+    this.validatePath();
+  },
+
+  /** @private */
+  onCloseTap_: function() {
+    this.$.editDialog.close();
   },
 
   /**

diff --git a/chrome/browser/resources/chromeos/emulator/shared_styles.html b/chrome/browser/resources/chromeos/emulator/shared_styles.html
@@ -13,12 +13,6 @@
         -webkit-margin-start: 15px;
       }
 
-      paper-dialog {
-        height: 90%;
-        overflow-y: scroll;
-        width: 40%;
-      }
-
       paper-radio-button {
         display: inline-block;
       }