WIP

Author: leonvogt

public/styles/dev_tool_panel.css

@@ -262,9 +262,9 @@ svg.icon-muted {
   padding: 0.5rem;
 }
 
-.flow > * + * {
+/* .flow > * + * {
   margin-top: 1em;
-}
+} */
 
 .full-pane {
   display: flex;
@@ -309,6 +309,13 @@ svg.icon-muted {
   display: block;
 }
 
+.small-icon-button::part(base) {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+}
+
 /* Utilities */
 .d-flex {
   display: flex;
@@ -331,6 +338,11 @@ svg.icon-muted {
 .flex-column {
   flex-direction: column;
 }
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 .cursor-pointer {
   cursor: pointer;
@@ -644,6 +656,13 @@ svg.icon-muted {
   display: table-row;
 }
 
+.code-key {
+  color: var(--wa-color-blue-60);
+}
+.code-value {
+  color: var(--wa-color-purple-50);
+}
+
 /* Highlight.js GitHub Theme */
 pre code.hljs {
   display: block;

src/browser_panel/panel/App.svelte

@@ -59,6 +59,24 @@
         <button class:active={currentTab == "stimulus-tab"} onclick={updateTab} data-tab-id="stimulus-tab">Stimulus</button>
         <button class:active={currentTab == "native-tab"} onclick={updateTab} data-tab-id="native-tab">Native</button>
         <button class:active={currentTab == "logs-tab"} onclick={updateTab} data-tab-id="logs-tab">Log</button>
+        <wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" title="Press \ to toggle">
+          <wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
+          <wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
+          <wa-option value="light">
+            <wa-icon slot="start" name="sun" variant="regular"></wa-icon>
+            Light
+          </wa-option>
+          <wa-option value="dark">
+            <wa-icon slot="start" name="moon" variant="regular"></wa-icon>
+            Dark
+          </wa-option>
+          <wa-divider></wa-divider>
+          <wa-option value="auto">
+            <wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
+            <wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
+            System
+          </wa-option>
+        </wa-select>
       </nav>
       <div id="turbo-tab" class="tab-content active">
         <TurboTab />

src/browser_panel/panel/tabs/LogsTab.svelte

@@ -123,7 +123,7 @@
             <div class="position-absolute end-0">
               <wa-dropdown class="mb-2" use:preventDropdownClose>
                 <wa-button slot="trigger" label="Filter Events">
-                  <wa-icon name="filter"></wa-icon>
+                  <wa-icon name="filter" label="filter"></wa-icon>
                 </wa-button>
                 {#each Object.entries(TURBO_EVENTS_GROUPED) as [groupName, events]}
                   <wa-dropdown-item role="button" tabindex="0" onkeyup={() => handleFilterGroupToggle(groupName)} onclick={() => handleFilterGroupToggle(groupName)}>

src/browser_panel/panel/tabs/StimulusTab.svelte

@@ -167,18 +167,46 @@
           <div class="d-flex flex-column h-100">
             <div class="scrollable-list flow">
               <div class="pane-section-heading">Values</div>
-              <table class="table table-sm w-100 turbo-table">
-                <tbody>
-                  {#each Object.entries(selected.controller.values) as [_key, object]}
-                    {#each Object.entries(object) as [key, value]}
-                      <tr>
-                        <td><div class="code-keyword">{key}</div></td>
-                        <td>{value}</td>
-                      </tr>
-                    {/each}
-                  {/each}
-                </tbody>
-              </table>
+              {#each Object.entries(selected.controller.values) as [_key, valueObject]}
+                <div class="d-flex gap-2">
+                  <span class="code-key">{valueObject.name}:</span>
+                  <span class="code-value">{valueObject.value}</span>
+                  <wa-button id={`rich-tooltip-${valueObject.key}`} variant="neutral" appearance="plain" size="small" class="small-icon-button">
+                    <wa-icon name="copy" label="Home"></wa-icon>
+                  </wa-button>
+                  <wa-tooltip for={`rich-tooltip-${valueObject.key}`} trigger="click" style="--max-width: 100%;">
+                    <div class="">
+                      <div class="flex-center">Type: {valueObject.type}</div>
+                      <ul>
+                        <li>
+                          <div>
+                            <span>{`data-${selected.identifier}-${valueObject.key}`}</span>
+                            <CopyButton value={"asdf"} />
+                          </div>
+                        </li>
+                        <li>
+                          <div>
+                            <span>{`this.${valueObject.name}`}</span>
+                            <CopyButton value={"asdf"} />
+                          </div>
+                        </li>
+                        <li>
+                          <div>
+                            <span>{`this.${valueObject.name}s`}</span>
+                            <CopyButton value={"asdf"} />
+                          </div>
+                        </li>
+                        <li>
+                          <div>
+                            <span>{`this.has${valueObject.name[0].toUpperCase() + valueObject.name.slice(1)}`}</span>
+                            <CopyButton value={"asdf"} />
+                          </div>
+                        </li>
+                      </ul>
+                    </div>
+                  </wa-tooltip>
+                </div>
+              {/each}
             </div>
           </div>
         {:else}

src/browser_panel/panel/tabs/TurboTab.svelte

@@ -202,7 +202,7 @@
               {/if}
               {#if turboCables.length > 0}
                 <wa-tooltip for="turbo-cable-indication-icon">{`${connectedTurboCablesCount()} / ${turboCables.length} Turbo Stream WebSockets are connected`}</wa-tooltip>
-                <wa-icon name="circle" id="turbo-cable-indication-icon" class:connected={connectedTurboCablesCount() == turboCables.length}></wa-icon>
+                <wa-icon name="circle" label="websocket-indication" id="turbo-cable-indication-icon" class:connected={connectedTurboCablesCount() == turboCables.length}></wa-icon>
               {/if}
             </div>
           </div>

src/components/CopyButton.svelte

@@ -20,7 +20,7 @@
 
 <button class="btn-copy" onclick={handleCopy} aria-label="Copy to clipboard">
   <wa-tooltip for={id} trigger="manual" bind:this={tooltip}>Copied</wa-tooltip>
-  <wa-icon {id} class="copy-icon" class:copied name={copied ? "check" : "copy"}></wa-icon>
+  <wa-icon {id} class="copy-icon" class:copied name={copied ? "check" : "copy"} label="copy-icon"></wa-icon>
 </button>
 
 <style>