commit d689a042f4eb7ebd41196b808e65105687cac6f5
author Joe Gregorio <jcgregorio@google.com> Tue Aug 13 10:39:04 2019 -0400
committer Skia Commit-Bot <skia-commit-bot@chromium.org> Tue Aug 13 14:49:37 2019 +0000
tree 9ae9ee760b879dc14ff174fa8b23aeea8e39f62b
parent c086fef6d011fdc63c4b6299891a98b746e9d1f1

named-fiddles - Move from <dialog-sk> to <dialog>.

Change-Id: I4a85de257dc1c4351303eeaa648cc3d9bfb7d91b
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/234278
Commit-Queue: Joe Gregorio <jcgregorio@google.com>
Auto-Submit: Joe Gregorio <jcgregorio@google.com>
Reviewed-by: Ravi Mistry <rmistry@google.com>

named-fiddles/modules/named-edit-sk/named-edit-sk.js

diff --git a/named-fiddles/modules/named-edit-sk/named-edit-sk.js b/named-fiddles/modules/named-edit-sk/named-edit-sk.js
index 2f67f46..3349d10 100644
--- a/named-fiddles/modules/named-edit-sk/named-edit-sk.js
+++ b/named-fiddles/modules/named-edit-sk/named-edit-sk.js
@@ -17,13 +17,13 @@
  *   </pre>
  *
  */
+import dialogPolyfill from 'dialog-polyfill'
 import { html, render } from 'lit-html'
 import { $$ } from 'common-sk/modules/dom'
-import 'elements-sk/dialog-sk'
 import 'elements-sk/styles/buttons'
 
 const template = (ele) => html`
-<dialog-sk>
+<dialog>
   <h2>Edit Named Fiddle</h2>
   <label>Name <input type=text id=name value=${ele._state.name} size=50></label>
   <label>Hash <input type=text id=hash value=${ele._state.hash} size=40></label>
@@ -31,7 +31,7 @@
     <button @click=${ele.hide}>Cancel</button>
     <button id=ok @click=${ele._ok}>OK</button>
   </div>
-</dialog-sk>
+</dialog>
 `;
 
 window.customElements.define('named-edit-sk', class extends HTMLElement {
@@ -48,6 +48,8 @@
   set state(val) {
     this._state = Object.assign({}, val);
     this._render();
+    this._dialog = this.firstElementChild;
+    dialogPolyfill.registerDialog(this._dialog);
   }
 
   _ok() {
@@ -61,12 +63,12 @@
 
   /** Show the dialog. */
   show() {
-    this.firstElementChild.shown = true;
+    this._dialog.showModal();
   }
 
   /** Hide the dialog. */
   hide() {
-    this.firstElementChild.shown = false;
+    this._dialog.close();
   }
 
   connectedCallback() {

named-fiddles/modules/named-edit-sk/named-edit-sk_test.js

diff --git a/named-fiddles/modules/named-edit-sk/named-edit-sk_test.js b/named-fiddles/modules/named-edit-sk/named-edit-sk_test.js
index 11faa4d..01e6187 100644
--- a/named-fiddles/modules/named-edit-sk/named-edit-sk_test.js
+++ b/named-fiddles/modules/named-edit-sk/named-edit-sk_test.js
@@ -34,7 +34,7 @@
         $$('#ok', ele).click();
         return Promise.resolve().then(() => {
           assert.equal('123', hash);
-          assert.equal($$('dialog-sk', ele).shown, false);
+          assert.equal($$('dialog', ele).open, false);
         });
       })
     });
@@ -58,7 +58,7 @@
         });
         $$('#ok', ele).click();
         return Promise.resolve().then(() => {
-          assert.equal($$('dialog-sk', ele).shown, false);
+          assert.equal($$('dialog', ele).open, false);
           assert.equal('ad161cfe21bb38bcec264bbacecbe93a', detail.hash);
           assert.equal('Octopus_Generator_Animated', detail.name);
           assert.equal('some new name', detail.new_name);

named-fiddles/package.json

diff --git a/named-fiddles/package.json b/named-fiddles/package.json
index ce1f525..0708eae 100644
--- a/named-fiddles/package.json
+++ b/named-fiddles/package.json
@@ -12,6 +12,7 @@
     "@webcomponents/custom-elements": "^1.2.1",
     "chai": "^4.2.0",
     "common-sk": "^3.1.0",
+    "dialog-polyfill": "^0.5.0",
     "elements-sk": "2.6.0",
     "karma": "^3.1.3",
     "karma-chai": "^0.1.0",