Update document title (#354)

Use a "data-title" attribute for each section to update document.title.

Author: camillobruni

index.html

@@ -49,7 +49,7 @@
                 </div>
             </section>
 
-            <section id="summary">
+            <section id="summary" data-title="Results Summary">
                 <a href="#home" class="logo">
                     <img srcset="resources/[email protected] 2x" src="resources/logo.png" alt="Speedometer" />
                     <div class="version">3.0</div>
@@ -69,7 +69,7 @@ <h1>Score</h1>
                 </div>
             </section>
 
-            <section id="details">
+            <section id="details" data-title="Results Details">
                 <a href="#home" class="logo">
                     <img srcset="resources/[email protected] 2x" src="resources/logo.png" alt="Speedometer" />
                     <div class="version">3.0</div>
@@ -103,7 +103,7 @@ <h2>Detailed Metrics</h2>
                 </div>
             </section>
 
-            <section id="about">
+            <section id="about" data-title="About">
                 <a href="#home" class="logo">
                     <img srcset="resources/[email protected] 2x" src="resources/logo.png" alt="Speedometer" />
                     <div class="version">3.0</div>

resources/main.mjs

@@ -351,10 +351,18 @@ class MainBenchmarkClient {
         if (hash === "#home" || hash === "") {
             if (window.location.hash !== hash)
                 window.location.hash = "#home";
+            hash = "#home";
             this._removeLocationHash();
         } else {
             window.location.hash = hash;
         }
+        this._updateDocumentTitle(hash);
+    }
+
+    _updateDocumentTitle(hash) {
+        const maybeSection = document.querySelector(hash);
+        const sectionTitle = maybeSection?.getAttribute("data-title") ?? "";
+        document.title = `Speedometer 3 ${sectionTitle}`.trimEnd();
     }
 
     _removeLocationHash() {