show diverging non-default params table

WebKit · Oct 11, 2024 · 2204f9c · 2204f9c
1 parent b492131
commit 2204f9c
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -81,6 +81,14 @@ <h1>Score</h1>
                 <div class="section-grid">
                     <h1 class="section-header">Detailed Results</h1>
                     <div class="section-content all-metric-results">
+                        <div class="non-standard-params">
+                            <h2>Non-standard Parameters</h2>
+                            <p>
+                                Speedometer ran with non-standard parameters.<br />
+                                The results are likely not comparable to default runs.
+                            </p>
+                            <table id="non-standard-params-table"></table>
+                        </div>
                         <div class="aggregated-metric-result">
                             <h2>Aggregate Metric</h2>
                             <div id="geomean-chart"></div>

diff --git a/resources/main.css b/resources/main.css
@@ -494,6 +494,40 @@ section#instructions .section-content > * {
     flex-direction: column;
 }
 
+section#details h1 {
+    margin-bottom: 10px;
+}
+
+section#details .non-standard-params {
+    display: none;
+    text-align: center;
+    margin-bottom: 2em;
+}
+
+section#details .non-standard-params h2 {
+    color: var(--highlight);
+}
+
+#non-standard-params-table {
+    border-collapse: collapse;
+    text-align: left;
+    display: inline-block;
+}
+#non-standard-params-table tr {
+    padding: 2px;
+}
+
+#non-standard-params-table thead th {
+    border-bottom: 1px solid var(--foreground);
+    padding: 0.1em 0.2em;
+}
+
+#non-standard-params-table tbody th {
+    font-weight: normal;
+    text-align: left;
+    padding: 0.1em 0.2em;
+}
+
 section#details .all-metric-results {
     flex: auto;
     overflow-y: auto;
@@ -511,10 +545,6 @@ section#details .arithmetic-mean > label {
     margin-right: 10px;
 }
 
-section#details h1 {
-    margin-bottom: 10px;
-}
-
 section#details .metric {
     margin: 0px 0 10px 0;
     display: inline-block;

diff --git a/resources/main.mjs b/resources/main.mjs
@@ -2,7 +2,7 @@ import { BenchmarkRunner } from "./benchmark-runner.mjs";
 import * as Statistics from "./statistics.mjs";
 import { Suites } from "./tests.mjs";
 import { renderMetricView } from "./metric-ui.mjs";
-import { params } from "./params.mjs";
+import { defaultParams, params } from "./params.mjs";
 import { createDeveloperModeContainer } from "./developer-mode.mjs";
 
 // FIXME(camillobruni): Add base class
@@ -210,6 +210,7 @@ class MainBenchmarkClient {
     }
 
     _populateDetailedResults(metrics) {
+        this._populateNonStandardParams();
         const trackHeight = 24;
         document.documentElement.style.setProperty("--metrics-line-height", `${trackHeight}px`);
         const plotWidth = (params.viewport.width - 120) / 2;
@@ -257,6 +258,34 @@ class MainBenchmarkClient {
         csvLink.setAttribute("download", `${filePrefix}.csv`);
     }
 
+    _populateNonStandardParams() {
+        if (params === defaultParams)
+            return;
+        const paramsDiff = [];
+        const usedSearchparams = params.toSearchParams();
+        const defaultSearchParams = defaultParams.toSearchParams();
+        for (const [key, value] of usedSearchparams.entries()) {
+            const defaultValue = defaultSearchParams.get(key);
+            if (value !== defaultValue)
+                paramsDiff.push({ key, value, defaultValue });
+        }
+        if (paramsDiff.length === 0)
+            return;
+        let body = "";
+        for (const { key, value, defaultValue } of paramsDiff)
+            body += `<tr><th>${key}</th><th>${value}</th><th>${defaultValue}</th></tr>`;
+        const table = document.getElementById("non-standard-params-table");
+        table.innerHTML = `<thead>
+                                <tr>
+                                <th>Param</th>
+                                <th>Value</th>
+                                <th>Default</th>
+                                </tr>
+                            </thead>
+                            <tbody>${body}</tbody>`;
+        document.querySelector(".non-standard-params").style.display = "block";
+    }
+
     prepareUI() {
         window.addEventListener("hashchange", this._hashChangeHandler.bind(this));
         window.addEventListener("resize", this._resizeScreeHandler.bind(this));

diff --git a/resources/params.mjs b/resources/params.mjs
@@ -148,18 +148,20 @@ class Params {
     toSearchParams() {
         const rawParams = { ...this };
         rawParams["viewport"] = `${this.viewport.width}x${this.viewport.height}`;
-        return new URLSearchParams(rawParams).toString();
+        return new URLSearchParams(rawParams);
     }
 }
 
 export const defaultParams = new Params();
 
-const searchParams = new URLSearchParams(window.location.search);
-let maybeCustomParams = new Params();
-try {
-    maybeCustomParams = new Params(searchParams);
-} catch (e) {
-    console.error("Invalid URL Param", e, "\nUsing defaults as fallback:", maybeCustomParams);
-    alert(`Invalid URL Param: ${e}`);
+let maybeCustomParams = defaultParams;
+if (window.location.search) {
+    const searchParams = new URLSearchParams(window.location.search);
+    try {
+        maybeCustomParams = new Params(searchParams);
+    } catch (e) {
+        console.error("Invalid URL Param", e, "\nUsing defaults as fallback:", maybeCustomParams);
+        alert(`Invalid URL Param: ${e}`);
+    }
 }
 export const params = maybeCustomParams;