Improve developerMode styling (#436)

- Maintain the same margin to the "Developer Mode" text when closed and open
- Remove display flex that had no effect
- Make sure the run settings are always visible
- Scroll only the suites part
- Move the select all / unselect all buttons to the top for better usability

Author: camillobruni

resources/developer-mode.mjs

@@ -128,13 +128,15 @@ function createTimeRangeUI(labelText, initialValue, unit = "ms", min = 0, max =
 function createUIForSuites() {
     const control = document.createElement("nav");
     control.className = "suites";
-    const ol = document.createElement("ol");
     const checkboxes = [];
     const setSuiteEnabled = (suiteIndex, enabled) => {
         Suites[suiteIndex].disabled = !enabled;
         checkboxes[suiteIndex].checked = enabled;
     };
 
+    control.appendChild(createSuitesGlobalSelectButtons(setSuiteEnabled));
+
+    const ol = document.createElement("ol");
     for (const suite of Suites) {
         const li = document.createElement("li");
         const checkbox = document.createElement("input");
@@ -164,7 +166,12 @@ function createUIForSuites() {
         ol.appendChild(li);
     }
     control.appendChild(ol);
-    let buttons = control.appendChild(document.createElement("div"));
+    control.appendChild(createSuitesTagsButton(setSuiteEnabled));
+    return control;
+}
+
+function createSuitesGlobalSelectButtons(setSuiteEnabled) {
+    const buttons = document.createElement("div");
     buttons.className = "button-bar";
 
     let button = document.createElement("button");
@@ -186,18 +193,24 @@ function createUIForSuites() {
         updateURL();
     };
     buttons.appendChild(button);
+    return buttons;
+}
 
+function createSuitesTagsButton(setSuiteEnabled) {
+    let tags = document.createElement("div");
+    let buttons = tags.appendChild(document.createElement("div"));
+    buttons.className = "button-bar";
     let i = 0;
     const kTagsPerLine = 3;
     for (const tag of Tags) {
         if (tag === "all")
             continue;
         if (!(i % kTagsPerLine)) {
-            buttons = control.appendChild(document.createElement("div"));
+            buttons = tags.appendChild(document.createElement("div"));
             buttons.className = "button-bar";
         }
         i++;
-        button = document.createElement("button");
+        const button = document.createElement("button");
         button.className = "tag";
         button.textContent = `#${tag}`;
         button.dataTag = tag;
@@ -217,8 +230,7 @@ function createUIForSuites() {
         };
         buttons.appendChild(button);
     }
-
-    return control;
+    return tags;
 }
 
 function createUIForRun() {

resources/main.css

@@ -10,6 +10,7 @@
     --text-width: 650px;
     --metrics-line-height: 25px;
     --scrollbar-width: 10px;
+    --developer-mode-settings-height: 280px;
 }
 
 body {
@@ -213,35 +214,36 @@ button,
 
 .developer-mode {
     border-radius: 10px;
-    padding: 1rem;
+    padding: 1rem 1rem 0 1rem;
     background: #602525;
     border: 3px solid rgba(255, 255, 255, 0.5);
     position: fixed;
     left: 10px;
     top: 10px;
-    display: flex;
-    flex-direction: column;
 }
 
 .developer-mode summary {
     user-select: none;
     cursor: pointer;
     padding: 1rem;
-    margin: -1rem;
+    margin: -1rem -1rem 0 -1rem;
 }
 
 .developer-mode-content {
-    flex: 1;
-    max-height: 80vh;
-    overflow: auto;
+    padding-bottom: 1rem;
+}
+
+.developer-mode .suites {
+    max-height: calc(100vh - var(--developer-mode-settings-height));
     margin-right: calc(0px - var(--scrollbar-width));
     padding-right: var(--scrollbar-width);
+    overflow: auto;
 }
 
 .developer-mode-content ol {
     list-style: none;
     padding: 0;
-    margin: 1em 0 0.5em 0;
+    margin: 0.5em 0 0 0;
 }
 .developer-mode-content .button-bar {
     display: flex;