Debugger icon

Author: kishikawakatsumi

Public/css/common.css

@@ -45,15 +45,24 @@
   content: "¬";
 }
 
-#match-count {
-  font-size: 90%;
+.dropdown-menu {
+  min-width: 200px;
 }
 
 .button-circle {
   width: 2rem;
   height: 2rem;
 }
 
+.btn:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+#match-count {
+  font-size: 90%;
+}
+
 #debugger-button {
   background-color: rgba(51, 51, 51, 0.05);
   border-radius: 15px;
@@ -85,14 +94,6 @@
   font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
 }
 
-.dropdown-menu {
-  min-width: 200px;
-}
-.btn:focus {
-  outline: none;
-  box-shadow: none;
-}
-
 @media (min-width: 576px) {
   .root-container {
     height: 100%;

Public/index.html

@@ -32,7 +32,8 @@
       <div class="col-md-6">
         <h1 class="h5 my-2">
           <a class="text-decoration-none" href="/">
-            <span class="fab fa-swift fa-lg text-primary"></span><span class="ms-2 me-1 text-dark">Swift Regex</span>
+            <span class="fa-brands fa-swift fa-lg text-primary"></span>
+            <span class="ms-2 me-1 text-dark">Swift Regex</span>
           </a>
         </h1>
       </div>
@@ -144,8 +145,12 @@ <h1 class="h5 my-2">
               </div>
               <div class="col align-self-center">
                 <div class="text-end mt-2">
-                  <button id="debugger-button" class="px-3" data-bs-toggle="modal"
-                    data-bs-target="#debugger-modal">Debugger</button>
+                  <button id="debugger-button" class="px-3" data-bs-toggle="modal" data-bs-target="#debugger-modal">
+                    <div data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-container="#debugger-button"
+                      title="Debugger" aria-label="Debugger" style="display: inline-block;">
+                      <span class="fa-solid fa-stethoscope"></span>
+                    </div>
+                  </button>
                   <span id="match-count" class="text-bg-light border px-3 py-1">no match</span>
                 </div>
               </div>

Public/js/app.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import { Tooltip } from "bootstrap";
 import { ExpressionField } from "./views/expression_field";
 import { MatchOptions } from "./views/match_options";
 import { TestEditor } from "./views/test_editor";
@@ -14,6 +15,12 @@ export class App {
   }
 
   init() {
+    [].slice
+      .call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+      .map((trigger) => {
+        return new Tooltip(trigger);
+      });
+
     this.expressionField = new ExpressionField(
       document.getElementById("expression-field-container")
     );

Public/js/misc/icons.js

@@ -4,6 +4,7 @@ import { config, library, dom } from "@fortawesome/fontawesome-svg-core";
 import {
   faFlag,
   faOctagonXmark,
+  faStethoscope,
   faHeart,
   faBackwardStep,
   faForwardStep,
@@ -22,6 +23,7 @@ config.searchPseudoElements = true;
 library.add(
   faFlag,
   faOctagonXmark,
+  faStethoscope,
   faHeart,
 
   faBackwardStep,

Public/scss/default.scss

@@ -20,6 +20,7 @@ $table-cell-padding-y-sm: 0.05rem;
 @import "bootstrap/scss/badge";
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
 
 @import "bootstrap/scss/helpers";
 @import "bootstrap/scss/utilities/api";