UI: adapt to core changes

Screenshots: https://imgur.com/a/XdbJfeN

Change-Id: I20f1878e3753141c9ea6dd6e2524014e99828155

gr-depends-on-plugin/gr-depends-on-edit.js

diff --git a/gr-depends-on-plugin/gr-depends-on-edit.js b/gr-depends-on-plugin/gr-depends-on-edit.js
index 5304998..dbf8245 100644
--- a/gr-depends-on-plugin/gr-depends-on-edit.js
+++ b/gr-depends-on-plugin/gr-depends-on-edit.js
@@ -58,7 +58,7 @@
 
   _openEditDialog() {
     this._value = this._originalValue;
-    this.$.edit_dialog_overlay.open();
+    this.$.edit_dialog_overlay.show();
     this.$.edit_dialog.classList.toggle('invisible', false);
   }
 

gr-depends-on-plugin/gr-depends-on-edit_html.js

diff --git a/gr-depends-on-plugin/gr-depends-on-edit_html.js b/gr-depends-on-plugin/gr-depends-on-edit_html.js
index b5f81e3..13d98a8 100644
--- a/gr-depends-on-plugin/gr-depends-on-edit_html.js
+++ b/gr-depends-on-plugin/gr-depends-on-edit_html.js
@@ -16,13 +16,11 @@
  */
 
 export const htmlTemplate = Polymer.html`
-  <style>
+  <style include="gr-modal-styles">
     .title {
       vertical-align: top;
     }
-    iron-icon {
-      height: 18px;
-      width: 18px;
+    gr-icon {
       color: var(--link-color);
     }
     .edit_button {
@@ -42,9 +40,9 @@
   </style>
   <div class="depends_on_edit">
     <paper-button class="edit_button" on-click="_openEditDialog">
-      <iron-icon icon="gr-icons:edit"/>
+      <gr-icon icon="edit" filled small/>
     </paper-button>
-    <gr-overlay id="edit_dialog_overlay" with-backdrop>
+    <dialog id="edit_dialog_overlay" tabindex="-1">
       <gr-dialog id="edit_dialog" confirm-label="Save"
           on-confirm="_saveDependsOn" on-cancel="_closeEditDialog">
         <div class="header" slot="header">Depends-on:</div>
@@ -53,6 +51,6 @@
               autocomplete="off" focused=true bind-value="{{_value}}"/>
         </div>
       </gr-dialog>
-    </gr-overlay>
+    </dialog>
   </div>
 `;