big ui update, page search + full text

- split file chooser from coll index, insert as header, make file chooser collapsible
- revamp collection index to be responsive
- add separate sorter component, used for collection index and pages
- combine 'curated lists' + pages, with page search + narrative
- ensure page + narrative lists are collapsible
- page search: support title, url and full text search if available, using flexsearch
- page search: keyword highlighting, load all pages, showing in increments of 100
- page and resource search: delay search to 1/4 sec of inactivity to avoid too many queries
- electron app: ensure noCache is set to true for local files
- embedding: remove separate embed.js, just use ui.js for embed as well
- embedding: support embedding iframe in a local origin with just sw.js and ui.js: sw.js serves index.html,
<replay-web-page> embed injects ui.js into iframe
- sw.js, new service worker entry point
- sw and ww inited only from <replay-app-main>, ui.js loaded from <replay-web-page> embed component

src/replay.js

@@ -94,7 +94,7 @@ class Replay extends LitElement
     }
 
     if (this.iframeUrl && changedProperties.has("iframeUrl")) {
-      this.isLoading = true;
+      this.waitForLoad();
     }
 
     if (this.replayUrl && changedProperties.has("replayUrl")) {
@@ -123,7 +123,7 @@ class Replay extends LitElement
         this.replayTS = event.data.ts;
         this.replayUrl = event.data.url;
         this.title = event.data.title || this.title;
-        this.isLoading = false;
+        this.clearLoading();
 
         if (event.data.icons) {
           const icons = event.data.icons;
@@ -155,11 +155,30 @@ class Replay extends LitElement
     const iframe = this.renderRoot.querySelector("iframe");
 
     if (iframe) {
-      this.isLoading = true;
+      this.waitForLoad();
       iframe.contentWindow.location.reload();
     }
   }
 
+  waitForLoad() {
+    this.isLoading = true;
+    this._loadPoll = window.setInterval(() => {
+      const iframe = this.renderRoot.querySelector("iframe");
+      if (!iframe || !iframe.contentDocument || !iframe.contentWindow || 
+        (iframe.contentDocument.readyState === "complete" && !iframe.contentWindow._WBWombat)) {
+          this.clearLoading();
+      }
+    }, 5000);
+  }
+
+  clearLoading() {
+    this.isLoading = false;
+    if (this._loadPoll) {
+      window.clearInterval(this._loadPoll);
+      this._loadPoll = null;
+    }
+  }
+
   static get styles() {
     return wrapCss(css`
       host: {
@@ -206,6 +225,7 @@ class Replay extends LitElement
 
       .intro-panel .panel-block {
         padding: 1.0em;
+        flex-direction: column;
       }
 
       #datetime {
@@ -239,13 +259,13 @@ class Replay extends LitElement
               <fa-icon size="1.0em" class="has-text-grey" .svg="${this.isFullscreen ? fasUnfullscreen : fasFullscreen}"></fa-icon>
             </span>
           </a>
-          <a id="refresh" class="button is-borderless ${this.isLoading ? 'is-loading' : ''}" @click="${this.onRefresh}">
+          <button id="refresh" class="button is-borderless ${this.isLoading ? 'is-loading' : ''}" @click="${this.onRefresh}">
             <span class="icon is-small">
               ${!this.isLoading ? html`
               <fa-icon size="1.0em" class="has-text-grey" .svg="${fasRefresh}"></fa-icon>
               ` : ``}
             </span>
-          </a>
+          </button>
           <p class="control is-expanded">
             <input id="url" class="input" type="text" .value="${this.replayUrl}" placeholder="https://... Enter a URL to replay from the archive here">
           </p>
@@ -261,7 +281,10 @@ class Replay extends LitElement
     ` : html`
       <nav class="panel intro-panel">
         <p class="panel-heading">Replay Web Page</p>
-        <p class="panel-block">Enter a URL above to replay it from the web archive!</p>
+        <div class="panel-block">
+          <p>Enter a URL above to replay it from the web archive!</p>
+          <p>(Check out the <a href="#view=pages">Pages</a> or <a href="#view=resources">Page Resources</a> to find URLs in this archive.)</p>
+        </div>
       </nav>
     `}