Merge pull request #20889 from calixteman/debugger_search_btns

(Debugger) Replace checkboxes in the search bar by toggle buttons

web/internal/canvas_context_details_view.js

@@ -228,7 +228,7 @@ class CanvasContextDetailsView {
 
       const prevBtn = document.createElement("button");
       prevBtn.className = "gfx-state-stack-button";
-      prevBtn.ariaLabel = "View older saved state";
+      prevBtn.title = "View older saved state";
       prevBtn.textContent = "←";
 
       const pos = document.createElement("span");
@@ -236,7 +236,7 @@ class CanvasContextDetailsView {
 
       const nextBtn = document.createElement("button");
       nextBtn.className = "gfx-state-stack-button";
-      nextBtn.ariaLabel = "View newer saved state";
+      nextBtn.title = "View newer saved state";
       nextBtn.textContent = "→";
 
       navContainer.append(prevBtn, pos, nextBtn);

web/internal/debugger.html

@@ -57,12 +57,12 @@ limitations under the License.
         </div>
         <div id="canvas-panel">
           <div id="canvas-toolbar" role="toolbar" aria-label="Zoom controls">
-            <button id="zoom-out-button" aria-label="Zoom out">−</button>
+            <button id="zoom-out-button" title="Zoom out">−</button>
             <span id="zoom-level" aria-live="polite"></span>
-            <button id="zoom-in-button" aria-label="Zoom in">+</button>
+            <button id="zoom-in-button" title="Zoom in">+</button>
-            <button id="redraw-button" aria-label="Redraw page">Redraw</button>
+            <button id="redraw-button" title="Redraw page">Redraw</button>
-            <button id="step-button" aria-label="Step one instruction" disabled><u>S</u>tep</button>
+            <button id="step-button" title="Step one instruction" disabled><u>S</u>tep</button>
-            <button id="continue-button" aria-label="Continue to next breakpoint" disabled><u>C</u>ontinue</button>
+            <button id="continue-button" title="Continue to next breakpoint" disabled><u>C</u>ontinue</button>
           </div>
           <div id="canvas-scroll">
             <div id="canvas-wrapper">

web/internal/multiline_view.css

@@ -145,15 +145,6 @@
       white-space: nowrap;
       min-width: 4ch;
     }
-
-    .mlc-check-label {
-      display: flex;
-      align-items: center;
-      gap: 3px;
-      font-size: 0.85em;
-      cursor: pointer;
-      white-space: nowrap;
-    }
   }
 
   .mlc-num-item {

web/internal/multiline_view.js

@@ -75,9 +75,9 @@ class MultilineView {
 
   #matchInfo;
 
-  #ignoreCaseCb;
+  #ignoreCaseBtn;
 
-  #regexCb;
+  #regexBtn;
 
   /**
    * @param {object}      opts
@@ -362,32 +362,32 @@ class MultilineView {
     const prevButton = (this.#prevButton = document.createElement("button"));
     prevButton.className = "mlc-nav-button";
     prevButton.textContent = "↑";
-    prevButton.ariaLabel = "Previous match";
+    prevButton.title = "Previous match";
     prevButton.disabled = true;
 
     const nextButton = (this.#nextButton = document.createElement("button"));
     nextButton.className = "mlc-nav-button";
     nextButton.textContent = "↓";
-    nextButton.ariaLabel = "Next match";
+    nextButton.title = "Next match";
     nextButton.disabled = true;
 
     const matchInfo = (this.#matchInfo = document.createElement("span"));
     matchInfo.className = "mlc-match-info";
 
-    const { label: ignoreCaseLabel, cb: ignoreCaseCb } =
+    const ignoreCaseBtn = (this.#ignoreCaseBtn = this.#makeToggleButton(
-      this.#makeCheckboxLabel("Ignore case");
+      "Aa",
-    const { label: regexLabel, cb: regexCb } = this.#makeCheckboxLabel("Regex");
+      "Ignore case"
-    this.#ignoreCaseCb = ignoreCaseCb;
+    ));
-    this.#regexCb = regexCb;
+    const regexBtn = (this.#regexBtn = this.#makeToggleButton(".*", "Regex"));
 
     searchGroup.append(
       searchInput,
       searchError,
       prevButton,
       nextButton,
-      matchInfo,
+      ignoreCaseBtn,
-      ignoreCaseLabel,
+      regexBtn,
-      regexLabel
+      matchInfo
     );
 
     const gotoInput = document.createElement("input");
@@ -412,8 +412,16 @@ class MultilineView {
     });
     prevButton.addEventListener("click", () => this.#navigateMatch(-1));
     nextButton.addEventListener("click", () => this.#navigateMatch(1));
-    this.#ignoreCaseCb.addEventListener("change", () => this.#runSearch());
+    this.#ignoreCaseBtn.addEventListener("click", () => {
-    this.#regexCb.addEventListener("change", () => this.#runSearch());
+      this.#ignoreCaseBtn.ariaPressed =
+        this.#ignoreCaseBtn.ariaPressed === "true" ? "false" : "true";
+      this.#runSearch();
+    });
+    this.#regexBtn.addEventListener("click", () => {
+      this.#regexBtn.ariaPressed =
+        this.#regexBtn.ariaPressed === "true" ? "false" : "true";
+      this.#runSearch();
+    });
 
     gotoInput.addEventListener("keydown", ({ key }) => {
       if (key !== "Enter") {
@@ -432,13 +440,13 @@ class MultilineView {
     return bar;
   }
 
-  #makeCheckboxLabel(text) {
+  #makeToggleButton(text, title) {
-    const label = document.createElement("label");
+    const btn = document.createElement("button");
-    label.className = "mlc-check-label";
+    btn.className = "mlc-nav-button";
-    const cb = document.createElement("input");
+    btn.textContent = text;
-    cb.type = "checkbox";
+    btn.title = title;
-    label.append(cb, ` ${text}`);
+    btn.ariaPressed = "false";
-    return { label, cb };
+    return btn;
   }
 
   #updateMatchInfo() {
@@ -466,9 +474,12 @@ class MultilineView {
     }
 
     let test;
-    if (this.#regexCb.checked) {
+    if (this.#regexBtn.ariaPressed === "true") {
       try {
-        const re = new RegExp(query, this.#ignoreCaseCb.checked ? "i" : "");
+        const re = new RegExp(
+          query,
+          this.#ignoreCaseBtn.ariaPressed === "true" ? "i" : ""
+        );
         test = str => re.test(str);
         this.#searchInput.removeAttribute("aria-invalid");
         this.#searchError.textContent = "";
@@ -479,7 +490,7 @@ class MultilineView {
         return false;
       }
     } else {
-      const ignoreCase = this.#ignoreCaseCb.checked;
+      const ignoreCase = this.#ignoreCaseBtn.ariaPressed === "true";
       const needle = ignoreCase ? query.toLowerCase() : query;
       test = str => (ignoreCase ? str.toLowerCase() : str).includes(needle);
     }