Clean up templates, markup and docs

README.md

@@ -1,7 +1,7 @@
 # Compare HAR files
 Make it easier to find regressions by comparing your [HAR](http://www.softwareishard.com/blog/har-12-spec/) files. Test it out https://compare.sitespeed.io.
 
-![Logo](https://raw.githubusercontent.com/sitespeedio/compare/main/img/compare.png)
+![Logo](https://raw.githubusercontent.com/sitespeedio/compare/main/public/img/compare.png)
 
 ## First: Shout out!
 We couldn't have built compare without the support or inspiration from the following people:
@@ -19,9 +19,9 @@ As long as your HAR files follow the [HAR specification](http://www.softwareisha
 The result page is the same for every HAR — sections that don't apply silently stay hidden, so a plain Chrome HAR doesn't show a half-empty "filmstrip" or "CPU" block.
 
 ### What you get for every HAR
-* A **stacked waterfall** rendered by [waterfall-tools](https://github.com/pmeenan/waterfall-tools). Both HARs share the same time axis so widths are comparable at a glance. A **blend slider** fades HAR2 over HAR1, and a per-result toggle switches between **side-by-side** and **overlay**. Hovering a request highlights its peer in the other waterfall.
+* A **stacked waterfall** rendered by [waterfall-tools](https://github.com/pmeenan/waterfall-tools). Both HARs share the same time axis so widths are comparable at a glance. A **blend slider** fades HAR2 over HAR1, and a per-result toggle switches between **side-by-side** and **overlay**. Hovering a request shows its URL.
 * A **Page X-ray** table (powered by [PageXray](https://github.com/sitespeedio/pagexray)) grouped into sections — Content, Render blocking, Visual metrics, Core Web Vitals, CPU and First/Third party. A **Δ column** shows the HAR2−HAR1 delta with regressions in red and improvements in green. An **"Only differences"** toggle hides rows where the two HARs match.
-* A **request/response diff** when both HARs are for the same URL — added requests, removed requests, and (per-request) size, status and timing changes. Tick **"Strip version parameters"** on the start page (or set `"stripVersion": true` in your config) to ignore cache-busting query strings.
+* A **request/response diff** when both HARs are for the same URL — new requests, removed requests, and requests whose transfer size changed by more than 1 KB. Tick **"Strip version parameters"** on the start page (or set `"stripVersion": true` in your config) to ignore cache-busting query strings.
 * A **domains** breakdown.
 * Chrome HARs with priority hints also produce a **Render blocking** row (blocking / potentially blocking / in-body parser blocking).
 * `.har` and `.har.gz` are both accepted on drag/drop and via URL.
@@ -43,7 +43,7 @@ PageXray auto-detects first-party hosts from the page URL. If you want to overri
 ![First Party vs Third Party!](https://raw.githubusercontent.com/sitespeedio/compare/main/docs/img/firstparty.png)
 
 ## How to use it
-You can either upload two HAR files (drag/drop) or give the URL to two URLs hosted online. If your HAR got multiple pages/runs, you can use just one HAR file.
+You can either upload two HAR files (drag/drop) or give the URL to two HAR files hosted online. If your HAR got multiple pages/runs, you can use just one HAR file.
 
 Or you can just copy/paste your HAR file into the start page of [compare.sitespeed.io](https://compare.sitespeed.io/).
 

index.html

@@ -77,7 +77,7 @@
         <div class="col-1-1">
           <div class="logo">
             <a href="https://compare.sitespeed.io/">
-              <img src="img/compare.png" width="77" class="img-logo" />
+              <img src="img/compare.png" width="77" class="img-logo" alt="Compare home" />
             </a>
           </div>
           <h1 class="title">Compare</h1>
@@ -98,8 +98,9 @@ <h1 class="title">Compare</h1>
         <p class="smallish">
           Or add the URL to your HAR files and press <b>compare</b>:
         </p>
-        <input class="input-field" id="harurl" type="URL" placeholder="URL HAR 1" required />
-        <input class="input-field" id="harurl2" type="URL" placeholder="URL HAR 2" required />
+        <form data-action="compare">
+        <input class="input-field" id="harurl" type="url" placeholder="URL HAR 1" aria-label="URL HAR 1" />
+        <input class="input-field" id="harurl2" type="url" placeholder="URL HAR 2" aria-label="URL HAR 2" />
         <p class="smallish">
           You can also use a
           <a href="https://github.com/sitespeedio/compare#configuration">configuration file</a>
@@ -113,10 +114,10 @@ <h1 class="title">Compare</h1>
         <p class="smallish">
           <a href="https://github.com/sitespeedio/compare#compare-har-files">Read the full documentation</a>
         </p>
-        <button type="button" class="submit"
-          data-action="compare">
+        <button type="submit" class="submit">
           Compare
         </button>
+        </form>
         <div id="message" class="message"></div>
       </div>
     </div>
@@ -128,7 +129,7 @@ <h1 class="title">Compare</h1>
         <div class="col-1-1">
           <div class="logo">
             <a href="https://compare.sitespeed.io/">
-              <img src="img/compare.png" width="34" class="img-logo" />
+              <img src="img/compare.png" width="34" class="img-logo" alt="Compare home" />
             </a>
           </div>
           <nav id="resultHeaderContent" aria-label="Page sections"></nav>
@@ -179,7 +180,7 @@ <h3 id="waterfallHeader" class="card-title">Waterfall
         <div class="col-1-1">
           <div class="logo">
             <a href="https://compare.sitespeed.io/">
-              <img src="img/compare.png" width="77" class="img-logo" />
+              <img src="img/compare.png" width="77" class="img-logo" alt="Compare home" />
             </a>
           </div>
           <h1 class="title">Compare</h1>
@@ -203,10 +204,10 @@ <h1 class="title">Compare</h1>
         - Built using
         <a href="https://github.com/pmeenan/waterfall-tools">waterfall-tools</a> and
         <a href="https://github.com/sitespeedio/pagexray">PageXray</a> and
-        <a href="https://github.com/sitespeedio/compare/blob/master/CREDIT.md">other great Open Source tools</a>. <br />
+        <a href="https://github.com/sitespeedio/compare/blob/main/CREDIT.md">other great Open Source tools</a>. <br />
         Code licensed
-        <a href="https://github.com/sitespeedio/compare/blob/master/LICENSE">MIT</a>.
-        <a href="https://github.com/sitespeedio/compare/blob/master/CHANGELOG.md">Changelog</a>. Help us
+        <a href="https://github.com/sitespeedio/compare/blob/main/LICENSE">MIT</a>.
+        <a href="https://github.com/sitespeedio/compare/blob/main/CHANGELOG.md">Changelog</a>. Help us
         <a href="https://github.com/sitespeedio/compare">make it better!</a>
       </div>
     </div>

public/js/compare/filmstripNav.js

@@ -28,11 +28,9 @@ function initFilmstripNav() {
     // Ignore mousedown on the actual zoom button — let the lightbox
     // handle that click. Drag-scroll triggers on mousedown anywhere
     // else inside the rail (the padding, the column gap, etc.).
-    if (e.target.closest('.lightbox-trigger')) {
-      // Still want to allow drag if user moves before releasing; we
-      // arm a "candidate" state and promote to dragging only after
-      // crossing the threshold.
-    }
+    // Still want to allow drag if user moves before releasing; we
+    // arm a "candidate" state and promote to dragging only after
+    // crossing the threshold.
     if (e.button !== 0) return;
 
     const startX = e.pageX;

public/js/compare/generate.js

@@ -1,4 +1,4 @@
-/* global getLastTiming, removeAndHide, createUpload, getAllDomains, hideUpload, objectPropertiesToArray, registerTemplateHelpers, parseTemplate, getTotalDiff, generateVisualProgress, formatDate, getUniqueRequests, getFilmstrip, compareWaterfall, renderShareControls, blendWaterfalls, applyWaterfallLayoutPreference */
+/* global getLastTiming, removeAndHide, createUpload, getAllDomains, hideUpload, objectPropertiesToArray, parseTemplate, getTotalDiff, generateVisualProgress, formatDate, getUniqueRequests, getFilmstrip, compareWaterfall, renderShareControls, blendWaterfalls, applyWaterfallLayoutPreference */
 /* exported showUpload, formatDate, generate, toggleRow, regenerate, formatTime, showLoading*/
 
 /**
@@ -168,25 +168,24 @@ function generate(config) {
     });
   }
 
-  // It's time to start to parse content
-  // make sure we have the helpers ready
-  registerTemplateHelpers();
+  const filmstrip = getFilmstrip(
+    config.har1.har,
+    config.har1.run,
+    config.har2.har,
+    config.har2.run
+  );
 
+  // It's time to start to parse content
   parseTemplate(
     'resultHeaderTemplate',
     {
       p1: pageXray1,
-      p2: pageXray2
+      p2: pageXray2,
+      filmstrip: filmstrip
     },
     'resultHeaderContent'
   );
 
-  const filmstrip = getFilmstrip(
-    config.har1.har,
-    config.har1.run,
-    config.har2.har,
-    config.har2.run
-  );
   if (filmstrip) {
     parseTemplate(
       'filmstripTemplate',

public/js/compare/start.js

@@ -96,6 +96,7 @@ const actions = {
 };
 
 const actionElements = {
+  submit: 'form[data-action]',
   click: 'button[data-action]',
   change: 'select[data-action]',
   input: 'input[data-action]'
@@ -104,6 +105,8 @@ const actionElements = {
 for (const [type, selector] of Object.entries(actionElements)) {
   document.addEventListener(type, e => {
     const el = e.target instanceof Element && e.target.closest(selector);
-    if (el) actions[el.dataset.action](el);
+    if (!el) return;
+    if (type === 'submit') e.preventDefault();
+    actions[el.dataset.action](el);
   });
 }