Testing for tuning mode

src/hub/Sidebar.ts

@@ -367,21 +367,25 @@ export default class Sidebar {
           fieldElementContainer.style.setProperty("--value-width", valueWidth.toString() + "px");
         });
       } else if (type === LoggableType.Number) {
+        let input = document.createElement("input");
+        input.type = "number";
+        input.style.width = "50px";
+        valueElement.appendChild(input);
         this.updateValueCallbacks.push((time) => {
           let value: number | null =
             time === null ? null : getOrDefault(window.log, field.fullKey!, LoggableType.Number, time, null);
           if (value !== null) {
             if (Math.abs(value) < 1e-9) {
-              valueElement.innerText = "0";
+              input.placeholder = "0";
             } else if (Math.abs(value) >= 1e5 || Math.abs(value) < 1e-3) {
-              valueElement.innerText = value.toExponential(1).replace("+", "");
+              input.placeholder = value.toExponential(1).replace("+", "");
             } else if (value % 1 === 0) {
-              valueElement.innerText = value.toString();
+              input.placeholder = value.toString();
             } else {
-              valueElement.innerText = value.toFixed(3);
+              input.placeholder = value.toFixed(3);
             }
           } else {
-            valueElement.innerText = "";
+            input.placeholder = "";
           }
           let valueWidth = valueElement.clientWidth === 0 ? 0 : valueElement.clientWidth + this.VALUE_WIDTH_MARGIN_PX;
           fieldElementContainer.style.setProperty("--value-width", valueWidth.toString() + "px");

www/hub.css

@@ -216,13 +216,27 @@ div.side-bar-search-container {
   position: relative;
 }
 
+button.side-bar-tuning-button {
+  position: absolute;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  left: 8px;
+  width: 29px;
+  height: 29px;
+}
+
+button.side-bar-tuning-button > img {
+  /* https://codepen.io/sosuke/pen/Pjoqqp */
+  filter: invert(29%) sepia(100%) saturate(7388%) hue-rotate(272deg) brightness(92%) contrast(128%);
+}
+
 input.side-bar-search {
   position: relative;
   margin-top: 5px;
   margin-bottom: 5px;
-  left: 18px;
+  left: 42px;
   height: 29px;
-  width: calc(100% - 18px - 18px);
+  width: calc(100% - 42px - 18px);
 
   font-size: 13px;
   font-family:
@@ -254,7 +268,7 @@ input.side-bar-search::-webkit-search-cancel-button {
 
 img.side-bar-search-icon {
   position: absolute;
-  left: 25px;
+  left: calc(42px + 7px);
   top: 50%;
   height: 13px;
   transform: translateY(-50%);
@@ -314,6 +328,11 @@ div.field-value {
   overflow: hidden;
 }
 
+div.field-value input::-webkit-outer-spin-button,
+div.field-value input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
 div.field-item.generated {
   opacity: 0.6;
 }

www/hub.html

@@ -67,6 +67,9 @@
         <div class="side-bar-title">No data available</div>
 
         <div class="side-bar-search-container">
+          <button class="side-bar-tuning-button" tabindex="-1">
+            <img src="symbols/slider.horizontal.3.svg" />
+          </button>
           <input class="side-bar-search" type="search" placeholder="Search" />
           <img class="side-bar-search-icon" src="symbols/magnifyingglass.svg" />
         </div>