Add icons to developer mode selection buttons (#493)

Add icons to better visually distinguish the suite selection buttons.

Author: camillobruni

resources/developer-mode.mjs

@@ -157,6 +157,7 @@ function createSuitesGlobalSelectButtons(setSuiteEnabled) {
     buttons.className = "button-bar";
 
     let button = document.createElement("button");
+    button.className = "select-all";
     button.textContent = "Select all";
     button.onclick = () => {
         for (let suiteIndex = 0; suiteIndex < Suites.length; suiteIndex++)
@@ -168,6 +169,7 @@ function createSuitesGlobalSelectButtons(setSuiteEnabled) {
 
     button = document.createElement("button");
     button.textContent = "Unselect all";
+    button.className = "unselect-all";
     button.onclick = () => {
         for (let suiteIndex = 0; suiteIndex < Suites.length; suiteIndex++)
             setSuiteEnabled(suiteIndex, false);

resources/main.css

@@ -257,6 +257,14 @@ button,
     gap: 3px;
 }
 
+.developer-mode-content .select-all::before {
+    content: "✔ ";
+}
+
+.developer-mode-content .unselect-all::after {
+    content: " ✘";
+}
+
 .developer-mode-content .settings label {
     width: 100%;
     display: flex;