Skip to content

Commit 6401ae6

Browse files
leonvogtleonvogt
committed
Improve Stimulus UX
1 parent d13b2f7 commit 6401ae6

File tree

9 files changed

+128
-19
lines changed

9 files changed

+128
-19
lines changed

‎public/styles/dev_tool_panel.css‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -262,9 +262,9 @@ svg.icon-muted {
262262
padding: 0.5rem;
263263
}
264264

265-
.flow > * + * {
265+
/* .flow > * + * {
266266
margin-top: 1em;
267-
}
267+
} */
268268

269269
.full-pane {
270270
display: flex;
@@ -309,6 +309,17 @@ svg.icon-muted {
309309
display: block;
310310
}
311311

312+
.small-icon-button::part(base) {
313+
padding: 0;
314+
margin: 0;
315+
height: 100%;
316+
width: 100%;
317+
}
318+
319+
.small-icon-button:not(.disabled):not(.loading)::part(base):hover {
320+
background-color: transparent !important;
321+
}
322+
312323
/* Utilities */
313324
.d-flex {
314325
display: flex;
@@ -331,6 +342,11 @@ svg.icon-muted {
331342
.flex-column {
332343
flex-direction: column;
333344
}
345+
.flex-center {
346+
display: flex;
347+
justify-content: center;
348+
align-items: center;
349+
}
334350

335351
.cursor-pointer {
336352
cursor: pointer;
@@ -644,6 +660,13 @@ svg.icon-muted {
644660
display: table-row;
645661
}
646662

663+
.code-key {
664+
color: var(--wa-color-blue-60);
665+
}
666+
.code-value {
667+
color: var(--wa-color-purple-50);
668+
}
669+
647670
/* Highlight.js GitHub Theme */
648671
pre code.hljs {
649672
display: block;

‎src/browser_panel/panel/App.svelte‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,24 @@
5959
<button class:active={currentTab == "stimulus-tab"} onclick={updateTab} data-tab-id="stimulus-tab">Stimulus</button>
6060
<button class:active={currentTab == "native-tab"} onclick={updateTab} data-tab-id="native-tab">Native</button>
6161
<button class:active={currentTab == "logs-tab"} onclick={updateTab} data-tab-id="logs-tab">Log</button>
62+
<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" title="Press \ to toggle">
63+
<wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
64+
<wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
65+
<wa-option value="light">
66+
<wa-icon slot="start" name="sun" variant="regular"></wa-icon>
67+
Light
68+
</wa-option>
69+
<wa-option value="dark">
70+
<wa-icon slot="start" name="moon" variant="regular"></wa-icon>
71+
Dark
72+
</wa-option>
73+
<wa-divider></wa-divider>
74+
<wa-option value="auto">
75+
<wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
76+
<wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
77+
System
78+
</wa-option>
79+
</wa-select>
6280
</nav>
6381
<div id="turbo-tab" class="tab-content active">
6482
<TurboTab />

‎src/browser_panel/panel/tabs/LogsTab.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@
123123
<div class="position-absolute end-0">
124124
<wa-dropdown class="mb-2" use:preventDropdownClose>
125125
<wa-button slot="trigger" label="Filter Events">
126-
<wa-icon name="filter"></wa-icon>
126+
<wa-icon name="filter" label="filter"></wa-icon>
127127
</wa-button>
128128
{#each Object.entries(TURBO_EVENTS_GROUPED) as [groupName, events]}
129129
<wa-dropdown-item role="button" tabindex="0" onkeyup={() => handleFilterGroupToggle(groupName)} onclick={() => handleFilterGroupToggle(groupName)}>

‎src/browser_panel/panel/tabs/StimulusTab.svelte‎

Lines changed: 58 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { flip } from "svelte/animate"
44
55
import CopyButton from "$components/CopyButton.svelte"
6+
import TreeItem from "$components/TreeItem.svelte"
67
import InspectButton from "$components/InspectButton.svelte"
78
import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte"
89
import IconButton from "$uikit/IconButton.svelte"
@@ -145,7 +146,10 @@
145146
</div>
146147

147148
<div class="stimulus-instance-second-column">
148-
<div class="me-3 overflow-x-auto scrollbar-none"><HTMLRenderer htmlString={instance.serializedTag} /></div>
149+
<div class="me-3 overflow-x-auto scrollbar-none">
150+
<InspectButton class="btn-hoverable me-2" selector={`[data-hotwire-dev-tools-uuid="${instance.uuid}"]`}></InspectButton>
151+
<HTMLRenderer htmlString={instance.serializedTag} />
152+
</div>
149153
</div>
150154
</div>
151155
</div>
@@ -167,18 +171,59 @@
167171
<div class="d-flex flex-column h-100">
168172
<div class="scrollable-list flow">
169173
<div class="pane-section-heading">Values</div>
170-
<table class="table table-sm w-100 turbo-table">
171-
<tbody>
172-
{#each Object.entries(selected.controller.values) as [_key, object]}
173-
{#each Object.entries(object) as [key, value]}
174-
<tr>
175-
<td><div class="code-keyword">{key}</div></td>
176-
<td>{value}</td>
177-
</tr>
178-
{/each}
179-
{/each}
180-
</tbody>
181-
</table>
174+
{#each Object.entries(selected.controller.values) as [_key, valueObject]}
175+
<div class="d-flex gap-2">
176+
{#if typeof valueObject.value === "object" && valueObject.value !== null}
177+
<wa-tree>
178+
<wa-tree-item expanded>
179+
{valueObject.name}
180+
{#each Object.entries(valueObject.value) as [label, children]}
181+
<TreeItem {label} {children} />
182+
{/each}
183+
</wa-tree-item>
184+
</wa-tree>
185+
{:else}
186+
<span class="code-key">{valueObject.name}:</span>
187+
<span class="code-value">
188+
{valueObject.value}
189+
</span>
190+
{/if}
191+
<wa-button id={`rich-tooltip-${valueObject.key}`} variant="neutral" appearance="plain" size="small" class="small-icon-button">
192+
<wa-icon name="copy" label="Home"></wa-icon>
193+
</wa-button>
194+
<wa-tooltip for={`rich-tooltip-${valueObject.key}`} trigger="click" style="--max-width: 100%;">
195+
<div class="">
196+
<div class="flex-center">Type: {valueObject.type}</div>
197+
<ul>
198+
<li>
199+
<div>
200+
<span>{`data-${selected.identifier}-${valueObject.key}`}</span>
201+
<CopyButton value={`data-${selected.identifier}-${valueObject.key}`} />
202+
</div>
203+
</li>
204+
<li>
205+
<div>
206+
<span>{`this.${valueObject.name}`}</span>
207+
<CopyButton value={`this.${valueObject.name}`} />
208+
</div>
209+
</li>
210+
<li>
211+
<div>
212+
<span>{`this.${valueObject.name}s`}</span>
213+
<CopyButton value={`this.${valueObject.name}s`} />
214+
</div>
215+
</li>
216+
<li>
217+
<div>
218+
<span>{`this.has${valueObject.name[0].toUpperCase() + valueObject.name.slice(1)}`}</span>
219+
<CopyButton value={`this.has${valueObject.name[0].toUpperCase() + valueObject.name.slice(1)}`} />
220+
</div>
221+
</li>
222+
</ul>
223+
</div>
224+
</wa-tooltip>
225+
</div>
226+
{/each}
182227
</div>
183228
</div>
184229
{:else}

‎src/browser_panel/panel/tabs/TurboTab.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -202,7 +202,7 @@
202202
{/if}
203203
{#if turboCables.length > 0}
204204
<wa-tooltip for="turbo-cable-indication-icon">{`${connectedTurboCablesCount()} / ${turboCables.length} Turbo Stream WebSockets are connected`}</wa-tooltip>
205-
<wa-icon name="circle" id="turbo-cable-indication-icon" class:connected={connectedTurboCablesCount() == turboCables.length}></wa-icon>
205+
<wa-icon name="circle" label="websocket-indication" id="turbo-cable-indication-icon" class:connected={connectedTurboCablesCount() == turboCables.length}></wa-icon>
206206
{/if}
207207
</div>
208208
</div>

‎src/components/CopyButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
2121
<button class="btn-copy" onclick={handleCopy} aria-label="Copy to clipboard">
2222
<wa-tooltip for={id} trigger="manual" bind:this={tooltip}>Copied</wa-tooltip>
23-
<wa-icon {id} class="copy-icon" class:copied name={copied ? "check" : "copy"}></wa-icon>
23+
<wa-icon {id} class="copy-icon" class:copied name={copied ? "check" : "copy"} label="copy-icon"></wa-icon>
2424
</button>
2525
2626
<style>

‎src/components/TreeItem.svelte‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script>
2+
const { label, children } = $props()
3+
const childrenIsObject = children && typeof children === "object"
4+
const childrenIsPresent = children !== null && children !== undefined
5+
</script>
6+
7+
<wa-tree-item>
8+
<span>
9+
{label}
10+
{#if !childrenIsObject && childrenIsPresent}
11+
:
12+
{/if}
13+
</span>
14+
{#if childrenIsObject}
15+
{#each Object.entries(children) as [childLabel, grandChildren]}
16+
{console.log({ childLabel, grandChildren })}
17+
<TreeItem label={childLabel} children={grandChildren} />
18+
{/each}
19+
{:else if childrenIsPresent}
20+
<span>{children}</span>
21+
{/if}
22+
</wa-tree-item>

‎src/uikit/IconButton.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
let props = $props()
33
</script>
44

5-
<wa-button variant="neutral" appearance="plain">
5+
<wa-button class="small-icon-button" variant="neutral" appearance="plain">
66
<wa-icon {...props}></wa-icon>
77
</wa-button>

‎src/uikit/webawesome.svelte.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import "@awesome.me/webawesome/dist/components/skeleton/skeleton.js"
1010
import "@awesome.me/webawesome/dist/components/tooltip/tooltip.js"
1111
import "@awesome.me/webawesome/dist/components/spinner/spinner.js"
1212
import "@awesome.me/webawesome/dist/components/badge/badge.js"
13+
import "@awesome.me/webawesome/dist/components/tree/tree.js"
1314

1415
// Set WebAwesome base path to point to the correct location of the WebAwesome icons
1516
import { setBasePath, registerIconLibrary } from "@awesome.me/webawesome/dist/webawesome.js"

0 commit comments

Comments
 (0)