misc usability fixes:

- links: make all replay links valid hashtags instead of empty "#"
- replaybar: fix padding on dropdown menu button
- a11y/focus: only set focus on replay frame if no sidebar is visible
bump electron to latest 10.1.2
set version to 1.1.0!

src/coll.js

@@ -138,9 +138,11 @@ class Coll extends LitElement
           this._replaceLoc = false;
         } else {
           window.location.hash = this._locationHash;
-          const replay = this.renderRoot.querySelector("wr-coll-replay");
-          if (replay) {
-            replay.focus();
+          if (!this.showSidebar) {
+            const replay = this.renderRoot.querySelector("wr-coll-replay");
+            if (replay) {
+              replay.focus();
+            }
           }
         }
         if (this.embed && window.parent !== window) {
@@ -393,7 +395,7 @@ class Coll extends LitElement
   static get replayBarStyles() {
     return css`
     .replay-bar {
-      padding: 1em;
+      padding: 1em 0em 1em 1em;
       max-width: none;
       border-bottom: solid .1rem #97989A;
       width: 100%;
@@ -442,10 +444,6 @@ class Coll extends LitElement
       box-shadow: none;
     }
 
-    .dropdown .button {
-      padding-right: 0px;
-    }
-
     .is-borderless {
       border: 0px;
     }

src/pageentry.js

@@ -4,7 +4,7 @@ import { LitElement, html, css, unsafeCSS } from 'lit-element';
 
 import "keyword-mark-element/lib/keyword-mark.js";
 
-import { getPageDateTS } from './pageutils';
+import { getPageDateTS, getReplayLink } from './pageutils';
 
 import { wrapCss } from './misc';
 
@@ -209,7 +209,8 @@ class PageEntry extends LitElement
             </p>
           </figure>
           <div class="media-content ${this.isCurrent ? 'current' : ''}">
-            <div role="heading" aria-level="${this.isSidebar ? "4": "3"}"><a @click="${this.onReplay}" href="#">
+            <div role="heading" aria-level="${this.isSidebar ? "4": "3"}">
+              <a @click="${this.onReplay}" href="${getReplayLink("pages", this.page.url, this.timestamp)}">
             ${this.isCurrent ? html`<p class="curr-page is-pulled-right">Current Page</p>` : ``}
               <p class="is-size-6 has-text-weight-bold has-text-link text">
               <keyword-mark keywords="${this.query}">${p.title || p.url}</keyword-mark>

src/pageutils.js

@@ -92,6 +92,16 @@ function getTS(iso) {
 }
 
 
+// ===========================================================================
+function getReplayLink(view, url, ts) {
+  const params = new URLSearchParams();
+  params.set("view", view);
+  params.set("url", url);
+  params.set("ts", ts);
+  return "#" + params.toString();
+}
+
+
 // ===========================================================================
 async function sourceToId(url) {
   const digest = await digestMessage(url, 'SHA-256');
@@ -133,5 +143,5 @@ function parseURLSchemeHostPath(url) {
 }
 
 
-export { digestMessage, tsToDate, getTS, getPageDateTS, sourceToId, parseURLSchemeHostPath,
+export { digestMessage, tsToDate, getTS, getPageDateTS, getReplayLink, sourceToId, parseURLSchemeHostPath,
          registerSW, initDBWorker };

src/story.js

@@ -4,7 +4,7 @@ import { wrapCss } from './misc';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import marked from 'marked';
 
-import { getTS } from './pageutils';
+import { getTS, getReplayLink } from './pageutils';
 
 import Split from 'split.js'
 
@@ -296,10 +296,13 @@ class Story extends LitElement
   renderCPage(p) {
     const date = new Date(p.ts);
 
+    const ts = getTS(date.toISOString());
+
     return html`
     <li>
       <div class="content">
-        <a @click="${this.onReplay}" data-url="${p.url}" data-ts="${getTS(date.toISOString())}" href="#">
+        <a @click="${this.onReplay}" data-url="${p.url}" data-ts="${ts}"
+          href="${getReplayLink("story", p.url, ts)}">
           <p class="is-size-6 has-text-weight-bold has-text-link">${p.title}</p>
           <p class="has-text-dark">${p.url}</p>
         </a>

src/url-resources.js

@@ -1,6 +1,8 @@
 import { LitElement, html, css } from 'lit-element';
 import { wrapCss, clickOnSpacebarPress } from './misc';
 
+import { getReplayLink } from './pageutils';
+
 import fasSearch from '@fortawesome/fontawesome-free/svgs/solid/search.svg';
 
 
@@ -369,7 +371,7 @@ class URLResources extends LitElement
       ${this.sortedResults.length ?
         this.sortedResults.map((result) => html`
           <tr class="columns result">
-            <td class="column col-url is-6"><p class="minihead is-hidden-tablet">URL</p><a @click="${this.onReplay}" data-url="${result.url}" data-ts="${result.ts}" href="#">${result.url}</a></td>
+            <td class="column col-url is-6"><p class="minihead is-hidden-tablet">URL</p><a @click="${this.onReplay}" data-url="${result.url}" data-ts="${result.ts}" href="${getReplayLink("resources", result.url, result.ts)}">${result.url}</a></td>
             <td class="column col-ts is-2"><p class="minihead is-hidden-tablet">Date</p>${new Date(result.date).toLocaleString()}</td>
             <td class="column col-mime is-3"><p class="minihead is-hidden-tablet">Mime Type</p>${result.mime}</td>
             <td class="column col-status is-1"><p class="minihead is-hidden-tablet">Status</p>${result.status}</td>