Skip to content

Commit 18ad970

Browse files
leonvogtleonvogt
committed
Improve Stimulus UX
1 parent d13b2f7 commit 18ad970

File tree

9 files changed

+138
-33
lines changed

9 files changed

+138
-33
lines changed

‎public/styles/dev_tool_panel.css‎

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

265-
.flow > * + * {
266-
margin-top: 1em;
267-
}
268-
269265
.full-pane {
270266
display: flex;
271267
flex-direction: column;
@@ -283,20 +279,12 @@ svg.icon-muted {
283279
height: 100%;
284280
}
285281

286-
.count-badge.count-badge--small::part(base) {
287-
font-size: var(--fs-100);
288-
}
289-
290282
.collapse-icon {
291283
font-size: var(--fs-400);
292284
transition: transform 0.3s ease;
293285
transform-origin: center center;
294286
}
295287

296-
.collapse-icon::part(base) {
297-
padding: 0.25rem;
298-
}
299-
300288
.collapse-icon.rotated {
301289
transform: rotate(-90deg);
302290
}
@@ -309,6 +297,30 @@ svg.icon-muted {
309297
display: block;
310298
}
311299

300+
/* Web Awesome Overrides */
301+
.small-icon-button::part(base) {
302+
padding: 0;
303+
margin: 0;
304+
height: 100%;
305+
width: 100%;
306+
}
307+
308+
.small-icon-button:not(.disabled):not(.loading)::part(base):hover {
309+
background-color: transparent !important;
310+
}
311+
312+
.count-badge.count-badge--small::part(base) {
313+
font-size: var(--fs-100);
314+
}
315+
316+
.collapse-icon::part(base) {
317+
padding: 0.25rem;
318+
}
319+
320+
wa-tooltip .copy-icon:not(.copied) {
321+
color: var(--wa-color-surface-raised) !important;
322+
}
323+
312324
/* Utilities */
313325
.d-flex {
314326
display: flex;
@@ -331,6 +343,11 @@ svg.icon-muted {
331343
.flex-column {
332344
flex-direction: column;
333345
}
346+
.flex-center {
347+
display: flex;
348+
justify-content: center;
349+
align-items: center;
350+
}
334351

335352
.cursor-pointer {
336353
cursor: pointer;
@@ -644,6 +661,13 @@ svg.icon-muted {
644661
display: table-row;
645662
}
646663

664+
.code-key {
665+
color: var(--wa-color-blue-60);
666+
}
667+
.code-value {
668+
color: var(--wa-color-purple-50);
669+
}
670+
647671
/* Highlight.js GitHub Theme */
648672
pre code.hljs {
649673
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: 2 additions & 2 deletions
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)}>
@@ -223,7 +223,7 @@
223223
</h2>
224224
</div>
225225
226-
<div class="scrollable-list flow">
226+
<div class="scrollable-list">
227227
{#if selected.turboEvent.eventName === "turbo:before-stream-render"}
228228
<div class="d-flex justify-content-end">
229229
<CopyButton value={selected.turboEvent.turboStreamContent} />

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

Lines changed: 52 additions & 14 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>
@@ -165,20 +169,54 @@
165169
<div class="card-body">
166170
{#if selected.controller}
167171
<div class="d-flex flex-column h-100">
168-
<div class="scrollable-list flow">
172+
<div class="scrollable-list">
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+
<div class="d-flex justify-content-between align-items-center">
198+
<span>{`data-${selected.identifier}-${valueObject.key}`}</span>
199+
<CopyButton value={`data-${selected.identifier}-${valueObject.key}`} />
200+
</div>
201+
202+
<div class="d-flex justify-content-between align-items-center">
203+
<span>{`this.${valueObject.name}`}</span>
204+
<CopyButton value={`this.${valueObject.name}`} />
205+
</div>
206+
207+
<div class="d-flex justify-content-between align-items-center">
208+
<span>{`this.${valueObject.name}s`}</span>
209+
<CopyButton value={`this.${valueObject.name}s`} />
210+
</div>
211+
212+
<div class="d-flex justify-content-between align-items-center">
213+
<span>{`this.has${valueObject.name[0].toUpperCase() + valueObject.name.slice(1)}`}</span>
214+
<CopyButton value={`this.has${valueObject.name[0].toUpperCase() + valueObject.name.slice(1)}`} />
215+
</div>
216+
</div>
217+
</wa-tooltip>
218+
</div>
219+
{/each}
182220
</div>
183221
</div>
184222
{:else}

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

Lines changed: 3 additions & 3 deletions
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>
@@ -327,7 +327,7 @@
327327
{/if}
328328
</div>
329329
330-
<div class="scrollable-list flow">
330+
<div class="scrollable-list">
331331
{#if selected.frame.referenceElements.length > 0}
332332
<div class="pane-section-heading">
333333
<span>Will get updated by elements</span>
@@ -368,7 +368,7 @@
368368
<div class="d-flex justify-content-center">
369369
<h2>{selected.stream.action} {selected.stream.targetSelector}</h2>
370370
</div>
371-
<div class="scrollable-list flow">
371+
<div class="scrollable-list">
372372
<div class="pane-section-heading">Attributes</div>
373373
<table class="table table-sm w-100">
374374
<tbody>

‎src/components/CopyButton.svelte‎

Lines changed: 3 additions & 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>
@@ -35,6 +35,8 @@
3535
padding: 0.5rem;
3636
cursor: pointer;
3737
transition: 50ms color;
38+
padding: 0;
39+
height: 100%;
3840
}
3941
4042
.copy-icon {

‎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)