Skip to content

Commit 5e68e53

Browse files
leonvogtleonvogt
committed
Refactor
1 parent 17b24f0 commit 5e68e53

12 files changed

Lines changed: 75 additions & 109 deletions

‎src/browser_panel/page/backend.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ function init() {
133133
turboFramesChanged() {
134134
this.sendTurboFrames()
135135
}
136-
turboCableChaned() {
136+
turboCableChanged() {
137137
this.sendTurboCableData()
138138
}
139139
stimulusDataChanged() {
@@ -376,6 +376,7 @@ function init() {
376376
}
377377
case PANEL_TO_BACKEND_MESSAGES.SCROLL_AND_HIGHLIGHT: {
378378
const elements = devtoolsBackend.getElementsByPayload(e.data.payload)
379+
379380
if (elements) {
380381
const element = elements[0]
381382
element.scrollIntoView({ behavior: "smooth", block: "center" })

‎src/browser_panel/page/stimulus_observer.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ensureUUIDOnElement, getUUIDFromElement, stringifyHTMLElementTag, capitalizeFirstChar, serializeAttributes } from "$utils/utils.js"
1+
import { ensureUUIDOnElement, getUUIDFromElement, capitalizeFirstChar, serializeAttributes } from "$utils/utils.js"
22

33
export default class StimulusObserver {
44
constructor(delegate) {
@@ -71,7 +71,6 @@ export default class StimulusObserver {
7171
targetsAttribute: controller?.context?.schema?.targetAttributeForScope(controller?.identifier),
7272
attributes: serializeAttributes(element),
7373
tagName: element.tagName.toLowerCase(),
74-
serializedTag: stringifyHTMLElementTag(element),
7574
values: this.buildControllerValues(controller),
7675
targets: this.buildControllerTargets(controller),
7776
outlets: this.buildControllerOutlets(controller),
@@ -110,7 +109,7 @@ export default class StimulusObserver {
110109
id: target.id,
111110
uuid: ensureUUIDOnElement(target),
112111
attributes: serializeAttributes(target),
113-
serializedTag: stringifyHTMLElementTag(target),
112+
tagName: target.tagName.toLowerCase(),
114113
}
115114
}),
116115
}
@@ -135,7 +134,7 @@ export default class StimulusObserver {
135134
id: outlet.id,
136135
uuid: ensureUUIDOnElement(outlet.element),
137136
attributes: serializeAttributes(outlet.element),
138-
serializedTag: stringifyHTMLElementTag(outlet.element),
137+
tagName: outlet.element.tagName.toLowerCase(),
139138
}
140139
}),
141140
}

‎src/browser_panel/page/turbo_attribute_elements_observer.js‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ensureUUIDOnElement, getUUIDFromElement, stringifyHTMLElementTag, getElementPath, serializeAttributes } from "$utils/utils.js"
1+
import { ensureUUIDOnElement, getUUIDFromElement, serializeAttributes } from "$utils/utils.js"
22

33
export default class TurboAttributeElementsObserver {
44
constructor(delegate) {
@@ -94,16 +94,11 @@ export default class TurboAttributeElementsObserver {
9494

9595
buildElementData(element, type) {
9696
return {
97-
uuid: getUUIDFromElement(element),
97+
type: type,
9898
id: element.id || null,
99+
uuid: getUUIDFromElement(element),
99100
attributes: serializeAttributes(element),
100-
tag: element.tagName.toLowerCase(),
101-
classes: Array.from(element.classList),
102-
serializedElement: stringifyHTMLElementTag(element),
103-
elementPath: getElementPath(element),
104-
type: type,
105-
innerHTML: element.innerHTML?.substring(0, 500) || "", // Truncate for performance
106-
outerHTML: element.outerHTML?.substring(0, 1000) || "", // Truncate for performance
101+
tagName: element.tagName.toLowerCase(),
107102
}
108103
}
109104

‎src/browser_panel/page/turbo_cable_observer.js‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ensureUUIDOnElement, getUUIDFromElement } from "$utils/utils.js"
1+
import { ensureUUIDOnElement, getUUIDFromElement, serializeAttributes } from "$utils/utils.js"
22

33
// The TurboCableObserver class is responsible for observing `<turbo-cable-stream-source>` elements,
44
// which are used in Turbo Streams to manage WebSocket connections.
@@ -24,7 +24,7 @@ export default class TurboCableObserver {
2424
if (!this.streamSources.has(uuid)) {
2525
const turboCableData = this.buildTurboCableData(element)
2626
this.streamSources.set(uuid, turboCableData)
27-
this.delegate.turboCableChaned()
27+
this.delegate.turboCableChanged()
2828
}
2929
}
3030

@@ -33,7 +33,7 @@ export default class TurboCableObserver {
3333

3434
if (this.streamSources.has(uuid)) {
3535
this.streamSources.delete(uuid)
36-
this.delegate.turboCableChaned()
36+
this.delegate.turboCableChanged()
3737
}
3838
}
3939

@@ -51,18 +51,15 @@ export default class TurboCableObserver {
5151
}
5252
turboCableData.connected = element.hasAttribute("connected")
5353

54-
this.delegate.turboCableChaned()
54+
this.delegate.turboCableChanged()
5555
}
5656
}
5757
}
5858

5959
buildTurboCableData(element) {
6060
return {
6161
connected: element.hasAttribute("connected"),
62-
attributes: Array.from(element.attributes).reduce((map, attr) => {
63-
map[attr.name] = attr.value
64-
return map
65-
}, {}),
62+
attributes: serializeAttributes(element),
6663
}
6764
}
6865

‎src/browser_panel/page/turbo_frame_observer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export default class TurboFrameObserver {
4848
frameData.attributes[attributeName] = newValue
4949
}
5050

51-
frameData.serializedTag = stringifyHTMLElementTag(element)
51+
// frameData.serializedTag = stringifyHTMLElementTag(element)
5252

5353
this.delegate.turboFramesChanged()
5454
}

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

Lines changed: 18 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
import ClassTreeItem from "$src/components/Stimulus/ClassTreeItem.svelte"
99
import ActionTreeItem from "$src/components/Stimulus/ActionTreeItem.svelte"
1010
import InspectButton from "$components/InspectButton.svelte"
11-
import HTMLRenderer from "$src/browser_panel/HTMLRenderer.svelte"
1211
import StripedHtmlTag from "$src/components/StripedHtmlTag.svelte"
1312
import { getStimulusData, getRegisteredStimulusIdentifiers } from "../../State.svelte.js"
1413
import { handleKeyboardNavigation, selectorByUUID } from "$utils/utils.js"
@@ -35,22 +34,27 @@
3534
3635
$effect(() => {
3736
stimulusControllers = getStimulusData()
37+
})
38+
39+
$effect(() => {
40+
registeredStimulusIdentifiers = getRegisteredStimulusIdentifiers()
41+
})
42+
43+
$effect(() => {
44+
const currentData = stimulusControllers
3845
39-
const instance = stimulusControllers.find((n) => n.uuid === selected.uuid && n.identifier === selected.identifier)
46+
const instance = currentData.find((n) => n.uuid === selected.uuid && n.identifier === selected.identifier)
4047
const selectedInstanceMissing = selected.uuid && !instance
41-
const shouldSelectFirstController = stimulusControllers.length > 0 && (!selected.identifier || selectedInstanceMissing)
48+
const shouldSelectFirstController = currentData.length > 0 && (!selected.identifier || selectedInstanceMissing)
49+
4250
if (shouldSelectFirstController) {
4351
const instance = getStimulusInstances(uniqueIdentifiers[0])[0]
4452
setSelectedController(instance)
45-
} // else if (selected.uuid && instance) {
46-
// // Update selected controller reference, to store the latest data
47-
// selected.controller = instance
48-
// selected.identifier = instance.identifier
49-
// }
50-
})
51-
52-
$effect(() => {
53-
registeredStimulusIdentifiers = getRegisteredStimulusIdentifiers()
53+
} else if (selected.uuid && instance && instance !== selected.controller) {
54+
// Update selected controller reference, to store the latest data
55+
selected.controller = instance
56+
selected.identifier = instance.identifier
57+
}
5458
})
5559
5660
const getStimulusInstances = (identifier) => {
@@ -71,6 +75,7 @@
7175
}
7276
7377
const setSelectedController = (instance) => {
78+
if (!instance) return
7479
selected = {
7580
uuid: instance.uuid,
7681
controller: instance,
@@ -197,7 +202,7 @@
197202

198203
<div class="stimulus-instance-second-column">
199204
<div class="me-3 overflow-x-auto scrollbar-none">
200-
<InspectButton class="btn-hoverable me-2" selector={selectorByUUID(instance.uuid)}></InspectButton>
205+
<InspectButton class="btn-hoverable me-2" uuid={instance.uuid}></InspectButton>
201206
</div>
202207
</div>
203208
</div>

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

Lines changed: 8 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
import HTMLRenderer from "$src/browser_panel/HTMLRenderer.svelte"
1111
import StripedHtmlTag from "$src/components/StripedHtmlTag.svelte"
1212
import { getTurboFrames, getTurboCables, getTurboStreams, clearTurboStreams, getTurboPermanentElements, getTurboTemporaryElements, getTurboConfig } from "../../State.svelte.js"
13-
import { debounce, handleKeyboardNavigation } from "$utils/utils.js"
14-
import { panelPostMessage, addHighlightOverlay, addHighlightOverlayByPath, hideHighlightOverlay } from "../../messaging.js"
13+
import { debounce, handleKeyboardNavigation, selectorByUUID } from "$utils/utils.js"
14+
import { panelPostMessage, addHighlightOverlay, hideHighlightOverlay } from "../../messaging.js"
1515
import { HOTWIRE_DEV_TOOLS_PANEL_SOURCE, PANEL_TO_BACKEND_MESSAGES } from "$lib/constants.js"
1616
import { getDevtoolInstance } from "$lib/devtool.js"
1717
import { horizontalPanes } from "../../theme.svelte.js"
@@ -376,59 +376,23 @@
376376
{#if turboPermanentElements.length > 0}
377377
<div class="pane-section-heading">Permanent Elements ({turboPermanentElements.length})</div>
378378
{#each turboPermanentElements as element (element.uuid)}
379-
<div class="entry-row p-2 border-bottom">
379+
<div class="entry-row p-2 border-bottom" onmouseenter={() => addHighlightOverlay(selectorByUUID(element.uuid))} onmouseleave={() => hideHighlightOverlay()} role="button" tabindex="0">
380380
<div class="d-flex justify-content-between align-items-center">
381-
<div class="d-flex align-items-center">
382-
<code class="me-2">&lt;{element.tag}&gt;</code>
383-
{#if element.id}
384-
<span class="badge bg-secondary me-2">#{element.id}</span>
385-
{/if}
386-
{#if element.classes.length > 0}
387-
{#each element.classes as className}
388-
<span class="badge bg-info me-1">.{className}</span>
389-
{/each}
390-
{/if}
391-
</div>
392-
<div>
393-
<ScrollIntoViewButton elementPath={element.elementPath}></ScrollIntoViewButton>
394-
<InspectButton elementPath={element.elementPath}></InspectButton>
395-
</div>
381+
<StripedHtmlTag {element} />
382+
<InspectButton uuid={element.uuid}></InspectButton>
396383
</div>
397-
{#if element.attributeValue}
398-
<div class="mt-1 text-muted small">data-turbo-permanent="{element.attributeValue}"</div>
399-
{:else}
400-
<div class="mt-1 text-muted small">data-turbo-permanent</div>
401-
{/if}
402384
</div>
403385
{/each}
404386
{/if}
405387
406388
{#if turboTemporaryElements.length > 0}
407389
<div class="pane-section-heading">Temporary Elements ({turboTemporaryElements.length})</div>
408390
{#each turboTemporaryElements as element (element.uuid)}
409-
<div class="entry-row p-2 border-bottom">
391+
<div class="entry-row p-2 border-bottom" onmouseenter={() => addHighlightOverlay(selectorByUUID(element.uuid))} onmouseleave={() => hideHighlightOverlay()} role="button" tabindex="0">
410392
<div class="d-flex justify-content-between align-items-center">
411-
<div class="d-flex align-items-center">
412-
<code class="me-2">&lt;{element.tag}&gt;</code>
413-
{#if element.id}
414-
<span class="badge bg-secondary me-2">#{element.id}</span>
415-
{/if}
416-
{#if element.classes.length > 0}
417-
{#each element.classes as className}
418-
<span class="badge bg-info me-1">.{className}</span>
419-
{/each}
420-
{/if}
421-
</div>
422-
<div>
423-
<ScrollIntoViewButton elementPath={element.elementPath}></ScrollIntoViewButton>
424-
<InspectButton elementPath={element.elementPath}></InspectButton>
425-
</div>
393+
<StripedHtmlTag {element} />
394+
<InspectButton uuid={element.uuid}></InspectButton>
426395
</div>
427-
{#if element.attributeValue}
428-
<div class="mt-1 text-muted small">data-turbo-temporary="{element.attributeValue}"</div>
429-
{:else}
430-
<div class="mt-1 text-muted small">data-turbo-temporary</div>
431-
{/if}
432396
</div>
433397
{/each}
434398
{/if}

‎src/components/InspectButton.svelte‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
<script>
22
import IconButton from "$uikit/IconButton.svelte"
3-
import { inspectElement } from "$utils/utils.js"
3+
import { inspectElement, selectorByUUID } from "$utils/utils.js"
44
5-
let props = $props()
6-
let mergedClass = $derived(`fs-400 ${props.class ?? ""}`.trim())
5+
let { selector, elementPath, uuid, class: className, ...restProps } = $props()
6+
7+
let mergedClass = $derived(`fs-400 ${className ?? ""}`.trim())
8+
if (uuid) {
9+
selector = selectorByUUID(uuid)
10+
}
711
</script>
812
9-
<IconButton {...props} class={mergedClass} name="inspect" library="custom" onclick={() => inspectElement(props.selector)}></IconButton>
13+
<IconButton {...restProps} class={mergedClass} name="inspect" library="custom" onclick={() => inspectElement(selector)}></IconButton>

‎src/components/ScrollIntoViewButton.svelte‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,36 @@
22
import IconButton from "$uikit/IconButton.svelte"
33
import { panelPostMessage } from "$src/browser_panel/messaging.js"
44
import { HOTWIRE_DEV_TOOLS_PANEL_SOURCE, PANEL_TO_BACKEND_MESSAGES } from "$lib/constants.js"
5-
let props = $props()
6-
let mergedClass = $derived(`fs-400 ${props.class ?? ""}`.trim())
7-
let id = props.id ?? `scroll-into-view-button-${crypto.randomUUID()}`
5+
import { selectorByUUID } from "$utils/utils.js"
6+
7+
let { selector, elementPath, uuid, class: className, id, ...restProps } = $props()
8+
9+
let mergedClass = $derived(`fs-400 ${className ?? ""}`.trim())
10+
let buttonId = id ?? `scroll-into-view-button-${crypto.randomUUID()}`
11+
12+
if (uuid) {
13+
selector = selectorByUUID(uuid)
14+
}
815
916
const scrollAndHighlight = () => {
1017
let message = {
1118
action: PANEL_TO_BACKEND_MESSAGES.SCROLL_AND_HIGHLIGHT,
1219
source: HOTWIRE_DEV_TOOLS_PANEL_SOURCE,
1320
}
14-
if (props.selector) {
15-
message.selector = props.selector
16-
} else if (props.elementPath) {
17-
message.elementPath = props.elementPath
21+
if (selector) {
22+
message.selector = selector
23+
} else if (elementPath) {
24+
message.elementPath = elementPath
1825
}
1926
panelPostMessage(message)
2027
}
2128
</script>
2229
23-
<wa-tooltip for={id}>Scroll into view</wa-tooltip>
30+
<wa-tooltip for={buttonId}>Scroll into view</wa-tooltip>
2431
<IconButton
25-
{...props}
32+
{...restProps}
2633
class={mergedClass}
27-
{id}
34+
id={buttonId}
2835
name="eye"
2936
onclick={() => {
3037
scrollAndHighlight()

‎src/components/Stimulus/ActionTreeItem.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import { addHighlightOverlay, hideHighlightOverlay } from "$src/browser_panel/messaging"
55
import { selectorByUUID } from "$utils/utils.js"
66
7-
let { action, selected } = $props()
7+
let { action } = $props()
88
</script>
99

1010
<div class="entry-row" role="button" tabindex="0" onmouseenter={() => addHighlightOverlay(selectorByUUID(action.element.uuid))} onmouseleave={() => hideHighlightOverlay()}>
@@ -28,7 +28,7 @@
2828
{/if}
2929
</div>
3030
<div>
31-
<InspectButton selector={selectorByUUID(action.element.uuid)}></InspectButton>
31+
<InspectButton uuid={action.element.uuid}></InspectButton>
3232
</div>
3333
</div>
3434
</div>

0 commit comments

Comments
 (0)