Improve developer menu and non-standard params table styling (#512)

- Use tags-style for step-button
- Increase start / step button icon
- Use red highlight color for non-standard params
- Use explicit font-size for developerMenu button for more consistent rendering across browsers

Author: camillobruni

resources/developer-mode.mjs

@@ -226,12 +226,13 @@ function createSuitesTagsButton(setSuiteEnabled) {
 
 function createUIForRun() {
     const stepTestButton = document.createElement("button");
-    stepTestButton.textContent = "Step Test \u23EF";
+    stepTestButton.className = "step-button";
+    stepTestButton.innerHTML = "Step Test<span>\u23EF</span>";
     stepTestButton.onclick = (event) => {
         globalThis.benchmarkClient.step();
     };
     const startTestButton = document.createElement("button");
-    startTestButton.textContent = "Start Test \u23F5";
+    startTestButton.innerHTML = "Start Test<span>\u23F5</span>";
     startTestButton.onclick = (event) => {
         globalThis.benchmarkClient.start();
     };

resources/main.css

@@ -287,15 +287,28 @@ button,
 }
 
 .developer-mode-content button {
+    font-size: 16px;
     background: white;
     flex: auto;
     padding: 4px;
     appearance: button;
     border: 2px solid rgba(255, 255, 255, 0.5);
     border-radius: 10px;
 }
+
+.developer-mode-content button span {
+    padding-left: 10px;
+    font-size: 1.5em;
+    line-height: 10px;
+    position: relative;
+    top: 2px;
+}
+
 .developer-mode-content .tag {
     border-radius: 100vh;
+}
+
+.developer-mode-content .step-button {
     color: white;
     background: rgba(255, 255, 255, 0.1);
 }
@@ -518,6 +531,8 @@ section#details .non-standard-params {
     display: none;
     text-align: center;
     margin-bottom: 2em;
+    /* Increase contrast a bit */
+    filter: brightness(1.5);
 }
 
 section#details .non-standard-params h2 {
@@ -547,6 +562,9 @@ section#details .non-standard-params h2 {
 #non-standard-params-table tbody td {
     padding: 0.1em 0.3em;
 }
+#non-standard-params-table tbody td:nth-child(2) {
+    color: var(--highlight);
+}
 
 section#details .all-metric-results {
     flex: auto;