Use fake iframe element to check reload result and replace on success. (

#8772)

Avoid reload() method whose usage may lead to showing a blank page
because server is not yet restarted. Instead use a fake iframe element
inside gizmo which refers to the same URL. Its window may be reloaded
safely and the result can be checked before applying it to the main
document. If reload was successful (page is initialized with Vaadin JS)
then replace the document content  with the content of iframe.

Fixes #8728

flow-client/src/main/resources/META-INF/resources/frontend/VaadinDevmodeGizmo.js

@@ -761,7 +761,7 @@ class VaadinDevmodeGizmo extends LitElement {
           const nextReload = lastReload ? (parseInt(lastReload) + 1) : 1;
           window.sessionStorage.setItem(VaadinDevmodeGizmo.TRIGGERED_COUNT_KEY_IN_SESSION_STORAGE, nextReload.toString());
           window.sessionStorage.setItem(VaadinDevmodeGizmo.TRIGGERED_KEY_IN_SESSION_STORAGE, 'true');
-          window.location.reload();
+          this.reload();
         }
         break;
 
@@ -770,6 +770,54 @@ class VaadinDevmodeGizmo extends LitElement {
     }
   }
 
+  reload() {
+      const iframe = this.shadowRoot.querySelector('#reload-frame');
+      if (!iframe.contentWindow) {
+          // if gizmo is detached (an old one from previous page before reload has happened)
+          // then iframe has no content window anymore
+          return;
+      }
+      iframe.contentWindow.expired = true;
+      // Set 3 minutes as a timeout for reload
+      iframe.reloadTimeoutDate = new Date(new Date().getTime() + 3 * 60000);
+      iframe.contentWindow.location.reload(true);
+      const transferIframe = function() {
+          window.document.head.innerHTML = iframe.contentDocument.head.innerHTML;
+          window.document.body.innerHTML = iframe.contentDocument.body.innerHTML;
+      };
+      const checkLoad = function() {
+          const iframeDoc = iframe.contentDocument;
+          if (iframeDoc && iframe.contentWindow && iframeDoc.getElementsByTagName('html').length > 0) {
+              setTimeout(load, 100);
+          } else {
+              setTimeout(checkLoad, 100);
+          }
+      };
+      const load = function() {
+          if (iframe.contentWindow.Vaadin) {
+              let contentIsPopulated = true;
+              if (document.body.querySelector('#outlet')) {
+                  contentIsPopulated = iframe.contentDocument.body.querySelector('#outlet')
+                      && iframe.contentDocument.body.querySelector('#outlet').children.length > 0;
+              } else {
+                  contentIsPopulated = iframe.contentDocument.body.children.length >= document.body.children.length;
+              }
+              if (contentIsPopulated && !iframe.contentWindow.expired) {
+                  setTimeout(transferIframe, 100);
+              } else {
+                  setTimeout(load, 100);
+              }
+          } else if (new Date() <= iframe.reloadTimeoutDate) {
+              // After the reload the page content is unexpected: it's not a Vaadin page,
+              // it might be that the server has not yet restarted. Let's increase the time of the next attempt
+              setTimeout(checkLoad, 3000);
+          } else {
+              delete(iframe.reloadTimeoutDate);
+          }
+      };
+      setTimeout(checkLoad, 0);
+  }
+
   handleError(msg) {
     console.error(msg);
     this.status = VaadinDevmodeGizmo.ERROR;
@@ -787,6 +835,11 @@ class VaadinDevmodeGizmo extends LitElement {
     this.disableEventListener = e => this.demoteSplashMessage();
     document.body.addEventListener('focus', this.disableEventListener);
     document.body.addEventListener('click', this.disableEventListener);
+    const self = this;
+    window.onpopstate = function(event) {
+        const iframe = self.shadowRoot.querySelector('#reload-frame');
+        iframe.src = window.location.href;
+    };
     this.openWebSocketConnection();
 
     const lastReload = window.sessionStorage.getItem(VaadinDevmodeGizmo.TRIGGERED_KEY_IN_SESSION_STORAGE);
@@ -1004,7 +1057,8 @@ class VaadinDevmodeGizmo extends LitElement {
       ? html`<span class="status-description">${this.splashMessage}</span></div>`
       : html`<span class="status-description">Live reload ${this.status} </span><span class="ahreflike">Details</span></div>`
     }
-    </div>`;
+    </div>
+    <iframe style='display: none;' width='0px' height='0px' src='${window.location.href}' id='reload-frame'></iframe>`;
   }
 }