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!

package.json

@@ -1,7 +1,7 @@
 {
   "name": "replaywebpage",
   "productName": "ReplayWeb.page",
-  "version": "1.1.0-beta.2",
+  "version": "1.1.0",
   "description": "Serverless Web Archive Replay",
   "repository": "https://github.com/webrecorder/replayweb.page",
   "homepage": "https://replayweb.page/",
@@ -23,7 +23,7 @@
   },
   "devDependencies": {
     "css-loader": "^3.5.3",
-    "electron": "^10.0.0",
+    "electron": "^10.1.2",
     "electron-builder": "^22.7.0",
     "electron-notarize": "^1.0.0",
     "http-server": "^0.12.3",

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 (!this.showSidebar) {
-          if (replay) {
+            const replay = this.renderRoot.querySelector("wr-coll-replay");
-            replay.focus();
+            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>

yarn.lock

@@ -1791,10 +1791,10 @@ electron-publish@22.7.0:
     lazy-val "^1.0.4"
     mime "^2.4.5"
 
-electron@^10.0.0:
+electron@^10.1.2:
-  version "10.0.0"
+  version "10.1.2"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-10.0.0.tgz#4e777612ead76b39bc7241c7749bf6b0ece47889"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-10.1.2.tgz#30b6fd7669f8daf08c56219a61dfa053fa2b0c70"
-  integrity sha512-0XX/LqYAHHCSbfLjUk9VRDPOeYjDPEzA9i7F50AqpEpFIWR2bp++0S0beRANUpPdkvtBDp+0R6vHV3iXPvuKyA==
+  integrity sha512-SvN8DcKCmPZ0UcQSNAJBfaUu+LGACqtRhUn1rW0UBLHgdbbDM76L0GU5/XGQEllH5pu5bwlCZwax3srzIl+Aeg==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"