Add buttons to download and copy JSON results (#65)

- Add "Download JSON" button to details view
- Add "Copy JSON" button to details view
- Example JSON result file name: "speedometer_3-2023-02-13T09_18_32.318Z.json"
- Update CSS formatting to make details button all the same width
- Add "title" to results buttons (both summary and details)

index.html

@@ -47,8 +47,8 @@
                 <div id="confidence-number"></div>
                 <div class="buttons">
                     <div class="button-row">
-                        <button class="start-tests-button">Test Again</button>
-                        <button id="show-details">Details</button>
+                        <button class="start-tests-button" title="Discard the current results and re-run all tests.">Test Again</button>
+                        <button id="show-details" title="Show detailed results data.">Details</button>
                     </div>
                 </div>
             </section>
@@ -60,8 +60,12 @@
                 <div class="arithmetic-mean"><label>Arithmetic Mean:</label><span id="results-with-statistics"></span></div>
                 <div class="buttons">
                     <div class="button-row">
-                        <button class="start-tests-button">Test Again</button>
-                        <button id="show-summary">Summary</button>
+                        <a class="button" id="download-json" download="speedometer.json" title="Download all result metrics as json string.">Download JSON</a>
+                        <button id="copy-json" title="Copy all result metrics as json string.">Copy JSON</button>
+                    </div>
+                    <div class="button-row">
+                        <button class="start-tests-button" title="Discard the current results and re-run all tests.">Test Again</button>
+                        <button id="show-summary" title="Go back to the simplified summary view.">Summary</button>
                     </div>
                 </div>
             </section>

resources/main.css

@@ -20,9 +20,6 @@ h1,
 button, .button {
     font-family: "Futura-Medium", Futura, "Helvetica Neue", Helvetica, Verdana, sans-serif;
 }
-.button {
-    text-decoration: none;
-}
 
 code {
     font-family: Menlo, Monaco, monospace;
@@ -108,6 +105,7 @@ section#home > .buttons {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
+    margin: 5px 0px
 }
 
 button, .button {
@@ -120,13 +118,18 @@ button, .button {
     text-align: center;
 }
 
+.button {
+    box-sizing: border-box;
+    text-decoration: none;
+}
+
 .buttons button, .buttons .button {
     appearance: none;
     border: 3px solid var(--foreground);
     border-radius: 10px;
     min-width: 200px;
-    padding: 5px 20px;
-    margin: 0 40px;
+    padding: 5px 0px;
+    margin: 0 20px;
     font-size: 25px;
     color: var(--foreground);
     background-color: transparent;

resources/main.mjs

@@ -202,6 +202,13 @@ class MainBenchmarkClient {
         resultsTables[1].innerHTML = "";
         for (; i < formattedValues.length; i++)
             this._addDetailedResultsRow(resultsTables[1], i, formattedValues[i]);
+
+        const jsonData = JSON.stringify(this._measuredValuesList);
+        const blob = new Blob([jsonData], {type: "application/json"});
+        const url = URL.createObjectURL(blob);
+        const link = document.getElementById("download-json");
+        link.href = url;
+        link.setAttribute("download", `speedometer_3-${new Date().toISOString()}.json`);
     }
 
     prepareUI() {
@@ -212,6 +219,7 @@ class MainBenchmarkClient {
         document.getElementById("logo").onclick = this._logoClickHandler.bind(this);
         document.getElementById("show-summary").onclick = this.showResultsSummary.bind(this);
         document.getElementById("show-details").onclick = this.showResultsDetails.bind(this);
+        document.getElementById("copy-json").onclick = this.copyJsonResults.bind(this);
         document.querySelectorAll(".show-about").forEach((each) => {
             each.onclick = this.showAbout.bind(this);
         });
@@ -269,6 +277,23 @@ class MainBenchmarkClient {
         this._showSection("about", true);
     }
 
+    _getFormattedJSONResult()
+    {
+        const indent = "    ";
+        return JSON.stringify(this._measuredValuesList, undefined, indent);
+    }
+
+    copyJsonResults()
+    {
+
+        navigator.clipboard.writeText(this._getFormattedJSONResult());
+    }
+
+    downloadJsonResults()
+    {
+        navigator.clipboard.writeText(this._getFormattedJSONResult());
+    }
+
     _showSection(sectionIdentifier, pushState) {
         const currentSectionElement = document.querySelector("section.selected");
         console.assert(currentSectionElement);