Load the shadow DOM of edit forms lazily.

Loads the shadow DOM of an edit form only when it is shown on the
screen (that is when the user clicks the corresponding Edit button).
This keeps the DOM as small as possible at any given point in time.

Change-Id: Icc1f43bfb54bd303a7182a02515c72522068415a

2 files changed, 46 insertions, 26 deletions

diff --git a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
index 7c71518..68f5dfd 100644
--- a/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/bookmarks/MlkBookmarkSubmissionForm.js
@@ -48,6 +48,21 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
 
   constructor() {
     super();
+    this.loaded = false;
+  }
+
+  static get observedAttributes() {
+    return [];
+  }
+
+  show() {
+    this.createShadow();
+  }
+
+  createShadow() {
+    if (this.shadowRoot !== null) {
+      return;
+    }
 
     let shadow = this.attachShadow({mode: "open"});
     shadow.appendChild(template.content.cloneNode(true));
@@ -65,11 +80,15 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
     this.visibilityInput =
         cast(shadow.getElementById('visibility-input'));
 
-    this.loaded = false;
-  }
+    if (this.editedId !== null) {
+      this.mainForm.method = "post";
+      this.mainForm.action = `/bookmarks/${this.editedId}/edit`;
+    }
 
-  static get observedAttributes() {
-    return [];
+    this.uriInput.addEventListener('blur', this.onUriBlur.bind(this));
+    this.uriInput.value = this.uri || "";
+    this.titleInput.value = this.titleText || "";
+    this.descriptionInput.innerText = this.description || "";
   }
 
   get editedId() /*:number | null*/ {
@@ -85,17 +104,7 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
     return this.editedId !== null;
   }
 
-  connectedCallback() {
-    if (this.editedId !== null) {
-      this.mainForm.method = "post";
-      this.mainForm.action = `/bookmarks/${this.editedId}/edit`;
-    }
-
-    this.uriInput.addEventListener('blur', this.onUriBlur.bind(this));
-    this.uriInput.value = this.uri || "";
-    this.titleInput.value = this.titleText || "";
-    this.descriptionInput.innerText = this.description || "";
-  }
+  connectedCallback() {}
 
   disconnectedCallback () {
     this.uriInput.removeEventListener('blur', this.onUriBlur.bind(this));
@@ -117,6 +126,7 @@ export class MlkBookmarkSubmissionForm extends HTMLElement {
   }
 
   focus() {
+    this.show();
     if (!this.uriInput.value) {
       this.uriInput.focus();
     } else if (!this.titleInput.value) {
diff --git a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
index 7bd6d4d..d4e774a 100644
--- a/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
+++ b/src/main/resources/META-INF/resources/lazychat/MlkLazychatSubmissionForm.js
@@ -38,6 +38,21 @@ export class MlkLazychatSubmissionForm extends HTMLElement {
 
   constructor() {
     super();
+    this.loaded = false;
+  }
+
+  static get observedAttributes() {
+    return [];
+  }
+
+  show() {
+    this.createShadow();
+  }
+
+  createShadow() {
+    if (this.shadowRoot !== null) {
+      return;
+    }
 
     let shadow = this.attachShadow({mode: "open"});
     shadow.appendChild(template.content.cloneNode(true));
@@ -49,11 +64,10 @@ export class MlkLazychatSubmissionForm extends HTMLElement {
     this.visibilityInput =
         cast(shadow.getElementById('visibility-input'));
 
-    this.loaded = false;
-  }
-
-  static get observedAttributes() {
-    return [];
+    if (this.editedId !== null) {
+      this.mainForm.method = "post";
+      this.mainForm.action = `/lazychat/${this.editedId}/edit`;
+    }
   }
 
   get editedId() /*:number | null*/ {
@@ -69,18 +83,14 @@ export class MlkLazychatSubmissionForm extends HTMLElement {
     return this.editedId !== null;
   }
 
-  connectedCallback() {
-    if (this.editedId !== null) {
-      this.mainForm.method = "post";
-      this.mainForm.action = `/lazychat/${this.editedId}/edit`;
-    }
-  }
+  connectedCallback() {}
 
   disconnectedCallback() {}
 
   attributeChangedCallback(name /*:string*/, oldValue /*:string*/, newValue /*:string*/) {}
 
   focus() {
+    this.show();
     this.textInput.focus();
     this.load();
   }