render non default params (#197)

- Improve non-default params check
- Add basic unittests for params
- Show table with non-default params in place of the summar view
- Globally set hue-rate to change all blue color tones to red

Author: camillobruni

JetStream.css

@@ -68,6 +68,64 @@ body {
     height: 100%;
 }
 
+table {
+    border-spacing: 0;
+}
+
+body.nonDefaultParams {
+    filter: hue-rotate(152deg);
+}
+
+.nonDefaultParams .summary {
+    display: none;
+}
+
+#non-default-params {
+    display: none;
+    text-align: center;
+
+    & h2 {
+        text-align: center;
+    } 
+
+    & p {
+        text-align: center;
+    }
+}
+
+.nonDefaultParams #non-default-params {
+    display: block;
+}
+
+#non-standard-params-table {
+    border-collapse: collapse;
+    text-align: left;
+    display: inline-block;
+    margin-top: var(--gap);
+}
+
+#non-standard-params-table tr {
+    padding: 2px;
+}
+
+#non-standard-params-table thead th {
+    border-bottom: 1px solid var(--foreground);
+}
+
+#non-standard-params-table tbody td {
+    font-weight: normal;
+    text-align: left;
+}
+
+#non-standard-params-table thead th,
+#non-standard-params-table tbody td {
+    padding: 0.1em 0.3em;
+}
+#non-standard-params-table tbody td:nth-child(2) {
+    color: var(--highlight);
+}
+
+
 .overflow-scroll {
     overflow-y: auto;
 }

cli.js

@@ -41,7 +41,7 @@ const CLI_PARAMS = {
     param: "dumpJSONResults",
   },
   "dump-test-list": {
-    help: "Print test list instead of running.",
+    help: "Print the selected test list instead of running.",
     param: "dumpTestList",
   },
   ramification: {

index.html

@@ -36,7 +36,9 @@
     const isInBrowser = true;
     const isD8 = false;
     const isSpiderMonkey = false;
-    globalThis.JetStreamParamsSource = new URLSearchParams(globalThis?.location?.search);
+    if (globalThis?.location?.search) {
+        globalThis.JetStreamParamsSource = new URLSearchParams(globalThis?.location?.search);
+    }
     globalThis.allIsGood = true;
     window.onerror = function(e) {
         if (e == "Script error.") {
@@ -49,6 +51,9 @@
     }
 
     async function initialize() {
+        if (!JetStreamParams.isDefault) {
+            showNonDefaultParams();
+        }
         if (globalThis.allIsGood) {
             try {
                 await JetStream.initialize();
@@ -64,6 +69,18 @@
             statusElement.innerHTML = "<h2>ERROR</h2><p>Errors were encountered during page load. Refusing to run a partial benchmark suite.</p>";
         }
     }
+    
+    function showNonDefaultParams() {
+        document.body.classList.add("nonDefaultParams"); 
+        const body = document.querySelector("#non-standard-params-table tbody");
+        for (const [key, value] of  Object.entries(JetStreamParams.nonDefaultParams)) {
+            const defaultValue = DefaultJetStreamParams[key]
+            const row = body.insertRow();
+            row.insertCell().textContent = key;
+            row.insertCell().textContent = JSON.stringify(value);
+            row.insertCell().textContent = JSON.stringify(defaultValue);
+        }
+    }
     </script>
 
     <script src="params.js"></script>
@@ -79,6 +96,23 @@ <h1 class="logo">
 
 <main>
     <p class="summary">JetStream 3 is a JavaScript and WebAssembly benchmark suite focused on the most advanced web applications. It rewards browsers that start up quickly, execute code quickly, and run smoothly. For more information, read the <a href="in-depth.html">in-depth analysis</a>. Bigger scores are better.</p>
+    <div id="non-default-params">
+        <h2>Non-standard Parameters</h2>
+        <p>
+            JetStream ran with non-standard parameters.<br />
+            The results are likely not comparable to default runs.
+        </p>
+        <table id="non-standard-params-table">
+            <thead>
+                <tr>
+                    <th>Param</th>
+                    <th>Value</th>
+                    <th>Default</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
     <p class="summary" id="mode-description"></p>
 
     <div id="result-summary"></div>

params.js

@@ -140,8 +140,9 @@ class Params {
     _parseBooleanParam(sourceParams, paramKey) {
         if (!sourceParams.has(paramKey))
             return DefaultJetStreamParams[paramKey];
-        const value = sourceParams.get(paramKey).toLowerCase();
+        const rawValue = sourceParams.get(paramKey);;
         sourceParams.delete(paramKey);
+        const value = rawValue.toLowerCase();
         return !(value === "false" || value === "0");
     }
 
@@ -170,9 +171,10 @@ class Params {
     get nonDefaultParams() {
         const diff = Object.create(null);
         for (const [key, value] of Object.entries(this)) {
-            if (value !== DefaultJetStreamParams[key]) {
-                diff[key] = value;
-            }
+            const defaultValue = DefaultJetStreamParams[key]
+            if (value == defaultValue) continue;
+            if (value?.length == 0 && defaultValue?.length == 0) continue;
+            diff[key] = value;
         }
         return diff;
     }
@@ -183,6 +185,10 @@ let maybeCustomParams = DefaultJetStreamParams;
 if (globalThis?.JetStreamParamsSource) {
     try {
         maybeCustomParams = new Params(globalThis?.JetStreamParamsSource);
+        // We might have parsed the same values again, do a poor-mans deep-equals:
+        if (JSON.stringify(maybeCustomParams) === JSON.stringify(DefaultJetStreamParams)) {
+           maybeCustomParams = DefaultJetStreamParams 
+        }
     } catch (e) {
         console.error("Invalid Params", e, "\nUsing defaults as fallback:", maybeCustomParams);
     }

tests/unit-tests.js

@@ -300,6 +300,32 @@ async function testStartupBenchmarkInnerTests() {
   );
 })();
 
+(function testDefaultParams() {
+  assertTrue(DefaultJetStreamParams.isDefault);
+  assertTrue(Object.isFrozen(DefaultJetStreamParams));
+  assertEquals(Object.entries(DefaultJetStreamParams.nonDefaultParams).length, 0);
+})();
+
+(function testCustomParamsSingle() {
+  const sourceParams = new Map(Object.entries({ developerMode: "true" }));
+  const params = new Params(sourceParams);
+  assertFalse(params.isDefault);
+  const nonDefaults = params.nonDefaultParams;
+  assertEquals(Object.entries(nonDefaults).length, 1);
+  assertEquals(nonDefaults.developerMode, true);
+})();
+
+
+(function testCustomParamsMultiple() {
+  const sourceParams = new Map(Object.entries({ iterationCount: 123, test: "wasm,js"}));
+  const params = new Params(sourceParams);
+  assertFalse(params.isDefault);
+  const nonDefaults = params.nonDefaultParams;
+  assertEquals(Object.entries(nonDefaults).length, 2);
+  assertEquals(nonDefaults.testIterationCount, 123);
+  assertEquals(JSON.stringify(nonDefaults.testList), JSON.stringify(["wasm", "js"]));
+})();
+
 
 (function testParseIterationCount() {
   assertThrows("Cannot parse negative iterationCounts",