@ytspar/devbar 1.4.0 → 1.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/constants.d.ts +8 -0
- package/dist/constants.d.ts.map +1 -1
- package/dist/constants.js +10 -0
- package/dist/constants.js.map +1 -1
- package/dist/modules/rendering/buttons.d.ts +19 -0
- package/dist/modules/rendering/buttons.d.ts.map +1 -0
- package/dist/modules/rendering/buttons.js +369 -0
- package/dist/modules/rendering/buttons.js.map +1 -0
- package/dist/modules/rendering/collapsed.d.ts +6 -0
- package/dist/modules/rendering/collapsed.d.ts.map +1 -0
- package/dist/modules/rendering/collapsed.js +124 -0
- package/dist/modules/rendering/collapsed.js.map +1 -0
- package/dist/modules/rendering/common.d.ts +21 -0
- package/dist/modules/rendering/common.d.ts.map +1 -0
- package/dist/modules/rendering/common.js +60 -0
- package/dist/modules/rendering/common.js.map +1 -0
- package/dist/modules/rendering/compact.d.ts +6 -0
- package/dist/modules/rendering/compact.d.ts.map +1 -0
- package/dist/modules/rendering/compact.js +107 -0
- package/dist/modules/rendering/compact.js.map +1 -0
- package/dist/modules/rendering/console.d.ts +7 -0
- package/dist/modules/rendering/console.d.ts.map +1 -0
- package/dist/modules/rendering/console.js +78 -0
- package/dist/modules/rendering/console.js.map +1 -0
- package/dist/modules/rendering/expanded.d.ts +13 -0
- package/dist/modules/rendering/expanded.d.ts.map +1 -0
- package/dist/modules/rendering/expanded.js +439 -0
- package/dist/modules/rendering/expanded.js.map +1 -0
- package/dist/modules/rendering/index.d.ts +22 -0
- package/dist/modules/rendering/index.d.ts.map +1 -0
- package/dist/modules/rendering/index.js +109 -0
- package/dist/modules/rendering/index.js.map +1 -0
- package/dist/modules/rendering/modals.d.ts +9 -0
- package/dist/modules/rendering/modals.d.ts.map +1 -0
- package/dist/modules/rendering/modals.js +1068 -0
- package/dist/modules/rendering/modals.js.map +1 -0
- package/dist/modules/rendering/settings.d.ts +6 -0
- package/dist/modules/rendering/settings.d.ts.map +1 -0
- package/dist/modules/rendering/settings.js +605 -0
- package/dist/modules/rendering/settings.js.map +1 -0
- package/dist/modules/rendering.d.ts +15 -16
- package/dist/modules/rendering.d.ts.map +1 -1
- package/dist/modules/rendering.js +16 -2902
- package/dist/modules/rendering.js.map +1 -1
- package/dist/modules/tooltips.d.ts +6 -4
- package/dist/modules/tooltips.d.ts.map +1 -1
- package/dist/modules/tooltips.js +121 -145
- package/dist/modules/tooltips.js.map +1 -1
- package/dist/ui/buttons.js +9 -9
- package/dist/ui/buttons.js.map +1 -1
- package/dist/ui/cards.js +3 -3
- package/dist/ui/cards.js.map +1 -1
- package/dist/ui/modals.js +7 -7
- package/dist/ui/modals.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Collapsed state rendering for the DevBar.
|
|
3
|
+
*/
|
|
4
|
+
import { CSS_COLORS, withAlpha } from '../../constants.js';
|
|
5
|
+
import { attachTextTooltip } from '../tooltips.js';
|
|
6
|
+
export function renderCollapsed(state) {
|
|
7
|
+
if (!state.container)
|
|
8
|
+
return;
|
|
9
|
+
const { position, accentColor } = state.options;
|
|
10
|
+
const { errorCount, warningCount } = state.getLogCounts();
|
|
11
|
+
// Use captured dot position if available, otherwise fall back to preset positions
|
|
12
|
+
// The 13px offset accounts for half the collapsed circle diameter (26px / 2)
|
|
13
|
+
let posStyle;
|
|
14
|
+
if (state.lastDotPosition) {
|
|
15
|
+
// Position based on where the dot actually was
|
|
16
|
+
const isTop = position.startsWith('top');
|
|
17
|
+
posStyle = isTop
|
|
18
|
+
? { top: `${state.lastDotPosition.top - 13}px`, left: `${state.lastDotPosition.left - 13}px` }
|
|
19
|
+
: {
|
|
20
|
+
bottom: `${state.lastDotPosition.bottom - 13}px`,
|
|
21
|
+
left: `${state.lastDotPosition.left - 13}px`,
|
|
22
|
+
};
|
|
23
|
+
// Clear after use so expand doesn't re-use stale values
|
|
24
|
+
state.lastDotPosition = null;
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
// Fallback preset positions for when no dot position was captured
|
|
28
|
+
const collapsedPositions = {
|
|
29
|
+
'bottom-left': { bottom: '27px', left: '86px' },
|
|
30
|
+
'bottom-right': { bottom: '27px', right: '29px' },
|
|
31
|
+
'top-left': { top: '27px', left: '86px' },
|
|
32
|
+
'top-right': { top: '27px', right: '29px' },
|
|
33
|
+
'bottom-center': { bottom: '19px', left: '50%', transform: 'translateX(-50%)' },
|
|
34
|
+
};
|
|
35
|
+
posStyle = collapsedPositions[position] ?? collapsedPositions['bottom-left'];
|
|
36
|
+
}
|
|
37
|
+
const wrapper = state.container;
|
|
38
|
+
wrapper.className = 'devbar-collapse';
|
|
39
|
+
state.resetPositionStyles(wrapper);
|
|
40
|
+
// Set CSS variable for accent color (used by pulse animation)
|
|
41
|
+
wrapper.style.setProperty('--devbar-color-accent', accentColor);
|
|
42
|
+
Object.assign(wrapper.style, {
|
|
43
|
+
position: 'fixed',
|
|
44
|
+
...posStyle,
|
|
45
|
+
zIndex: '9999',
|
|
46
|
+
backgroundColor: 'var(--devbar-color-bg-card)',
|
|
47
|
+
border: `1px solid ${accentColor}`,
|
|
48
|
+
borderRadius: '50%',
|
|
49
|
+
color: accentColor,
|
|
50
|
+
boxShadow: `0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px ${withAlpha(accentColor, 10)}`,
|
|
51
|
+
backdropFilter: 'blur(8px)',
|
|
52
|
+
WebkitBackdropFilter: 'blur(8px)',
|
|
53
|
+
cursor: 'pointer',
|
|
54
|
+
display: 'flex',
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
justifyContent: 'center',
|
|
57
|
+
width: '26px',
|
|
58
|
+
height: '26px',
|
|
59
|
+
boxSizing: 'border-box',
|
|
60
|
+
animation: 'devbar-collapse 150ms ease-out, devbar-collapsed-pulse 2s ease-in-out 0.2s 3',
|
|
61
|
+
});
|
|
62
|
+
wrapper.onclick = () => {
|
|
63
|
+
state.collapsed = false;
|
|
64
|
+
state.debug.state('Expanded DevBar');
|
|
65
|
+
state.render();
|
|
66
|
+
};
|
|
67
|
+
// Create inner container for dot + chevron
|
|
68
|
+
const innerContainer = document.createElement('span');
|
|
69
|
+
Object.assign(innerContainer.style, {
|
|
70
|
+
display: 'flex',
|
|
71
|
+
alignItems: 'center',
|
|
72
|
+
justifyContent: 'center',
|
|
73
|
+
position: 'relative',
|
|
74
|
+
});
|
|
75
|
+
// Connection indicator dot (same size as in expanded state)
|
|
76
|
+
const dot = document.createElement('span');
|
|
77
|
+
Object.assign(dot.style, {
|
|
78
|
+
width: '6px',
|
|
79
|
+
height: '6px',
|
|
80
|
+
borderRadius: '50%',
|
|
81
|
+
backgroundColor: state.sweetlinkConnected ? CSS_COLORS.primary : CSS_COLORS.textMuted,
|
|
82
|
+
boxShadow: state.sweetlinkConnected ? `0 0 6px ${CSS_COLORS.primary}` : 'none',
|
|
83
|
+
transition: 'transform 150ms ease-out, opacity 150ms ease-out',
|
|
84
|
+
});
|
|
85
|
+
innerContainer.appendChild(dot);
|
|
86
|
+
// Expand chevron indicator (appears on hover)
|
|
87
|
+
const chevron = document.createElement('span');
|
|
88
|
+
Object.assign(chevron.style, {
|
|
89
|
+
position: 'absolute',
|
|
90
|
+
width: '100%',
|
|
91
|
+
height: '100%',
|
|
92
|
+
display: 'flex',
|
|
93
|
+
alignItems: 'center',
|
|
94
|
+
justifyContent: 'center',
|
|
95
|
+
opacity: '0',
|
|
96
|
+
transition: 'opacity 150ms ease-out',
|
|
97
|
+
fontSize: '10px',
|
|
98
|
+
color: accentColor,
|
|
99
|
+
});
|
|
100
|
+
chevron.textContent = '\u2197';
|
|
101
|
+
innerContainer.appendChild(chevron);
|
|
102
|
+
attachTextTooltip(state, wrapper, () => `Click to expand DevBar${state.sweetlinkConnected ? ' (Sweetlink connected)' : ' (Sweetlink not connected)'}${errorCount > 0 ? `\n${errorCount} console error${errorCount === 1 ? '' : 's'}` : ''}`, {
|
|
103
|
+
onEnter: () => {
|
|
104
|
+
dot.style.opacity = '0';
|
|
105
|
+
dot.style.transform = 'scale(0)';
|
|
106
|
+
chevron.style.opacity = '1';
|
|
107
|
+
},
|
|
108
|
+
onLeave: () => {
|
|
109
|
+
dot.style.opacity = '1';
|
|
110
|
+
dot.style.transform = 'scale(1)';
|
|
111
|
+
chevron.style.opacity = '0';
|
|
112
|
+
},
|
|
113
|
+
});
|
|
114
|
+
wrapper.appendChild(innerContainer);
|
|
115
|
+
// Error badge (absolute, top-right of circle, shifted left if warning badge exists)
|
|
116
|
+
if (errorCount > 0) {
|
|
117
|
+
wrapper.appendChild(state.createCollapsedBadge(errorCount, 'rgba(239, 68, 68, 0.95)', warningCount > 0 ? '12px' : '-6px'));
|
|
118
|
+
}
|
|
119
|
+
// Warning badge (absolute, top-right)
|
|
120
|
+
if (warningCount > 0) {
|
|
121
|
+
wrapper.appendChild(state.createCollapsedBadge(warningCount, 'rgba(245, 158, 11, 0.95)', '-6px'));
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
//# sourceMappingURL=collapsed.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"collapsed.js","sourceRoot":"","sources":["../../../src/modules/rendering/collapsed.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Common helpers shared across rendering sub-modules.
|
|
3
|
+
*/
|
|
4
|
+
import type { DevBarState } from '../types.js';
|
|
5
|
+
/**
|
|
6
|
+
* Capture the center of an element's bounding rect as a dot position.
|
|
7
|
+
* Used to animate the collapsed circle to the same spot as the connection dot.
|
|
8
|
+
*/
|
|
9
|
+
export declare function captureDotPosition(state: DevBarState, element: Element): void;
|
|
10
|
+
/**
|
|
11
|
+
* Create the connection indicator (outer wrapper + inner colored dot).
|
|
12
|
+
* The caller is responsible for attaching tooltip and click handlers, since
|
|
13
|
+
* those differ between compact and expanded modes.
|
|
14
|
+
*/
|
|
15
|
+
export declare function createConnectionIndicator(state: DevBarState): HTMLSpanElement;
|
|
16
|
+
/** Prevents re-entrant render calls during rapid clicks */
|
|
17
|
+
export declare let renderGuard: boolean;
|
|
18
|
+
export declare function setRenderGuard(value: boolean): void;
|
|
19
|
+
/** Remove all child nodes from an element. */
|
|
20
|
+
export declare function clearChildren(el: HTMLElement): void;
|
|
21
|
+
//# sourceMappingURL=common.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/modules/rendering/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,CAO7E;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,WAAW,GAAG,eAAe,CA4B7E;AAED,2DAA2D;AAC3D,eAAO,IAAI,WAAW,SAAQ,CAAC;AAE/B,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAEnD;AAED,8CAA8C;AAC9C,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAInD"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Common helpers shared across rendering sub-modules.
|
|
3
|
+
*/
|
|
4
|
+
import { CSS_COLORS } from '../../constants.js';
|
|
5
|
+
/**
|
|
6
|
+
* Capture the center of an element's bounding rect as a dot position.
|
|
7
|
+
* Used to animate the collapsed circle to the same spot as the connection dot.
|
|
8
|
+
*/
|
|
9
|
+
export function captureDotPosition(state, element) {
|
|
10
|
+
const rect = element.getBoundingClientRect();
|
|
11
|
+
state.lastDotPosition = {
|
|
12
|
+
left: rect.left + rect.width / 2,
|
|
13
|
+
top: rect.top + rect.height / 2,
|
|
14
|
+
bottom: window.innerHeight - (rect.top + rect.height / 2),
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Create the connection indicator (outer wrapper + inner colored dot).
|
|
19
|
+
* The caller is responsible for attaching tooltip and click handlers, since
|
|
20
|
+
* those differ between compact and expanded modes.
|
|
21
|
+
*/
|
|
22
|
+
export function createConnectionIndicator(state) {
|
|
23
|
+
const connIndicator = document.createElement('span');
|
|
24
|
+
connIndicator.className = 'devbar-clickable';
|
|
25
|
+
Object.assign(connIndicator.style, {
|
|
26
|
+
width: '12px',
|
|
27
|
+
height: '12px',
|
|
28
|
+
borderRadius: '50%',
|
|
29
|
+
backgroundColor: 'transparent',
|
|
30
|
+
display: 'flex',
|
|
31
|
+
alignItems: 'center',
|
|
32
|
+
justifyContent: 'center',
|
|
33
|
+
cursor: 'pointer',
|
|
34
|
+
flexShrink: '0',
|
|
35
|
+
});
|
|
36
|
+
const connDot = document.createElement('span');
|
|
37
|
+
connDot.className = 'devbar-conn-dot';
|
|
38
|
+
Object.assign(connDot.style, {
|
|
39
|
+
width: '6px',
|
|
40
|
+
height: '6px',
|
|
41
|
+
borderRadius: '50%',
|
|
42
|
+
backgroundColor: state.sweetlinkConnected ? CSS_COLORS.primary : CSS_COLORS.textMuted,
|
|
43
|
+
boxShadow: state.sweetlinkConnected ? `0 0 6px ${CSS_COLORS.primary}` : 'none',
|
|
44
|
+
transition: 'all 300ms',
|
|
45
|
+
});
|
|
46
|
+
connIndicator.appendChild(connDot);
|
|
47
|
+
return connIndicator;
|
|
48
|
+
}
|
|
49
|
+
/** Prevents re-entrant render calls during rapid clicks */
|
|
50
|
+
export let renderGuard = false;
|
|
51
|
+
export function setRenderGuard(value) {
|
|
52
|
+
renderGuard = value;
|
|
53
|
+
}
|
|
54
|
+
/** Remove all child nodes from an element. */
|
|
55
|
+
export function clearChildren(el) {
|
|
56
|
+
while (el.firstChild) {
|
|
57
|
+
el.removeChild(el.firstChild);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
//# sourceMappingURL=common.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../src/modules/rendering/common.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD;;;GAGG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAkB,EAAE,OAAgB;IACrE,MAAM,IAAI,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC;IAC7C,KAAK,CAAC,eAAe,GAAG;QACtB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC;QAChC,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;KAC1D,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,yBAAyB,CAAC,KAAkB;IAC1D,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACrD,aAAa,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAC7C,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,EAAE;QACjC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,YAAY,EAAE,KAAK;QACnB,eAAe,EAAE,aAAa;QAC9B,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,GAAG;KAChB,CAAC,CAAC;IAEH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,OAAO,CAAC,SAAS,GAAG,iBAAiB,CAAC;IACtC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;QAC3B,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,YAAY,EAAE,KAAK;QACnB,eAAe,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,SAAS;QACrF,SAAS,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,WAAW,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,MAAM;QAC9E,UAAU,EAAE,WAAW;KACxB,CAAC,CAAC;IACH,aAAa,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,OAAO,aAAa,CAAC;AACvB,CAAC;AAED,2DAA2D;AAC3D,MAAM,CAAC,IAAI,WAAW,GAAG,KAAK,CAAC;AAE/B,MAAM,UAAU,cAAc,CAAC,KAAc;IAC3C,WAAW,GAAG,KAAK,CAAC;AACtB,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,aAAa,CAAC,EAAe;IAC3C,OAAO,EAAE,CAAC,UAAU,EAAE,CAAC;QACrB,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;AACH,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"compact.d.ts","sourceRoot":"","sources":["../../../src/modules/rendering/compact.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,aAAa,CAAC;AAI9D,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CA+GtD"}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Compact state rendering for the DevBar.
|
|
3
|
+
*/
|
|
4
|
+
import { BUTTON_COLORS, FONT_MONO, withAlpha } from '../../constants.js';
|
|
5
|
+
import { attachTextTooltip } from '../tooltips.js';
|
|
6
|
+
import { createConsoleBadge, createScreenshotButton, createSettingsButton } from './buttons.js';
|
|
7
|
+
import { captureDotPosition, createConnectionIndicator } from './common.js';
|
|
8
|
+
export function renderCompact(state) {
|
|
9
|
+
if (!state.container)
|
|
10
|
+
return;
|
|
11
|
+
const { position, accentColor } = state.options;
|
|
12
|
+
const { errorCount, warningCount, infoCount } = state.getLogCounts();
|
|
13
|
+
// Simple position styles - same anchor points as expanded mode
|
|
14
|
+
const positionStyles = {
|
|
15
|
+
'bottom-left': { bottom: '20px', left: '80px' },
|
|
16
|
+
'bottom-right': { bottom: '20px', right: '16px' },
|
|
17
|
+
'top-left': { top: '20px', left: '80px' },
|
|
18
|
+
'top-right': { top: '20px', right: '16px' },
|
|
19
|
+
'bottom-center': { bottom: '12px', left: '50%', transform: 'translateX(-50%)' },
|
|
20
|
+
};
|
|
21
|
+
const posStyle = positionStyles[position] ?? positionStyles['bottom-left'];
|
|
22
|
+
const wrapper = state.container;
|
|
23
|
+
state.resetPositionStyles(wrapper);
|
|
24
|
+
Object.assign(wrapper.style, {
|
|
25
|
+
position: 'fixed',
|
|
26
|
+
...posStyle,
|
|
27
|
+
zIndex: '9999',
|
|
28
|
+
backgroundColor: 'var(--devbar-color-bg-card)',
|
|
29
|
+
border: `1px solid ${accentColor}`,
|
|
30
|
+
borderRadius: '20px',
|
|
31
|
+
color: accentColor,
|
|
32
|
+
boxShadow: `0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px ${withAlpha(accentColor, 10)}`,
|
|
33
|
+
backdropFilter: 'blur(8px)',
|
|
34
|
+
WebkitBackdropFilter: 'blur(8px)',
|
|
35
|
+
padding: '6px 10px',
|
|
36
|
+
display: 'flex',
|
|
37
|
+
alignItems: 'center',
|
|
38
|
+
gap: '8px',
|
|
39
|
+
fontFamily: FONT_MONO,
|
|
40
|
+
fontSize: '0.6875rem',
|
|
41
|
+
});
|
|
42
|
+
// Connection indicator
|
|
43
|
+
const connIndicator = createConnectionIndicator(state);
|
|
44
|
+
const connDot = connIndicator.querySelector('.devbar-conn-dot');
|
|
45
|
+
attachTextTooltip(state, connIndicator, () => state.sweetlinkConnected ? 'Sweetlink connected' : 'Sweetlink disconnected');
|
|
46
|
+
connIndicator.onclick = (e) => {
|
|
47
|
+
e.stopPropagation();
|
|
48
|
+
captureDotPosition(state, connDot);
|
|
49
|
+
state.collapsed = true;
|
|
50
|
+
state.debug.state('Collapsed DevBar from compact mode');
|
|
51
|
+
state.render();
|
|
52
|
+
};
|
|
53
|
+
wrapper.appendChild(connIndicator);
|
|
54
|
+
// Error badge
|
|
55
|
+
if (errorCount > 0) {
|
|
56
|
+
wrapper.appendChild(createConsoleBadge(state, 'error', errorCount, BUTTON_COLORS.error));
|
|
57
|
+
}
|
|
58
|
+
// Warning badge
|
|
59
|
+
if (warningCount > 0) {
|
|
60
|
+
wrapper.appendChild(createConsoleBadge(state, 'warn', warningCount, BUTTON_COLORS.warning));
|
|
61
|
+
}
|
|
62
|
+
// Info badge
|
|
63
|
+
if (infoCount > 0) {
|
|
64
|
+
wrapper.appendChild(createConsoleBadge(state, 'info', infoCount, BUTTON_COLORS.info));
|
|
65
|
+
}
|
|
66
|
+
// Screenshot button (if enabled)
|
|
67
|
+
if (state.options.showScreenshot) {
|
|
68
|
+
wrapper.appendChild(createScreenshotButton(state, accentColor));
|
|
69
|
+
}
|
|
70
|
+
// Settings gear button
|
|
71
|
+
wrapper.appendChild(createSettingsButton(state));
|
|
72
|
+
// Expand button (double-arrow)
|
|
73
|
+
const expandBtn = document.createElement('button');
|
|
74
|
+
expandBtn.type = 'button';
|
|
75
|
+
Object.assign(expandBtn.style, {
|
|
76
|
+
display: 'flex',
|
|
77
|
+
alignItems: 'center',
|
|
78
|
+
justifyContent: 'center',
|
|
79
|
+
width: '18px',
|
|
80
|
+
height: '18px',
|
|
81
|
+
borderRadius: '50%',
|
|
82
|
+
border: `1px solid ${withAlpha(accentColor, 38)}`,
|
|
83
|
+
backgroundColor: 'transparent',
|
|
84
|
+
color: withAlpha(accentColor, 60),
|
|
85
|
+
cursor: 'pointer',
|
|
86
|
+
fontSize: '0.5rem',
|
|
87
|
+
transition: 'all 150ms',
|
|
88
|
+
});
|
|
89
|
+
expandBtn.textContent = '\u27EB';
|
|
90
|
+
attachTextTooltip(state, expandBtn, () => 'Expand DevBar', {
|
|
91
|
+
onEnter: () => {
|
|
92
|
+
expandBtn.style.backgroundColor = withAlpha(accentColor, 13);
|
|
93
|
+
expandBtn.style.borderColor = accentColor;
|
|
94
|
+
expandBtn.style.color = accentColor;
|
|
95
|
+
},
|
|
96
|
+
onLeave: () => {
|
|
97
|
+
expandBtn.style.backgroundColor = 'transparent';
|
|
98
|
+
expandBtn.style.borderColor = withAlpha(accentColor, 38);
|
|
99
|
+
expandBtn.style.color = withAlpha(accentColor, 60);
|
|
100
|
+
},
|
|
101
|
+
});
|
|
102
|
+
expandBtn.onclick = () => {
|
|
103
|
+
state.toggleCompactMode();
|
|
104
|
+
};
|
|
105
|
+
wrapper.appendChild(expandBtn);
|
|
106
|
+
}
|
|
107
|
+
//# sourceMappingURL=compact.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"compact.js","sourceRoot":"","sources":["../../../src/modules/rendering/compact.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Console popup rendering for the DevBar.
|
|
3
|
+
*/
|
|
4
|
+
import type { ConsoleCapture } from '@ytspar/sweetlink/browser/consoleCapture';
|
|
5
|
+
import type { DevBarState } from '../types.js';
|
|
6
|
+
export declare function renderConsolePopup(state: DevBarState, consoleCaptureSingleton: ConsoleCapture): void;
|
|
7
|
+
//# sourceMappingURL=console.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"console.d.ts","sourceRoot":"","sources":["../../../src/modules/rendering/console.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAW/E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,EAAE,uBAAuB,EAAE,cAAc,GAAG,IAAI,CAiDpG"}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Console popup rendering for the DevBar.
|
|
3
|
+
*/
|
|
4
|
+
import { BUTTON_COLORS, CSS_COLORS } from '../../constants.js';
|
|
5
|
+
import { createEmptyMessage, createModalBox, createModalContent, createModalHeader, createModalOverlay, } from '../../ui/index.js';
|
|
6
|
+
import { consoleLogsToMarkdown, handleSaveConsoleLogs } from '../screenshot.js';
|
|
7
|
+
export function renderConsolePopup(state, consoleCaptureSingleton) {
|
|
8
|
+
const filterType = state.consoleFilter;
|
|
9
|
+
if (!filterType)
|
|
10
|
+
return;
|
|
11
|
+
const logs = consoleCaptureSingleton
|
|
12
|
+
.getLogs()
|
|
13
|
+
.filter((log) => log.level === filterType);
|
|
14
|
+
const colorMap = { error: BUTTON_COLORS.error, warn: BUTTON_COLORS.warning, info: BUTTON_COLORS.info };
|
|
15
|
+
const color = colorMap[filterType];
|
|
16
|
+
const labelMap = { error: 'Errors', warn: 'Warnings', info: 'Info' };
|
|
17
|
+
const label = labelMap[filterType];
|
|
18
|
+
const closeModal = () => {
|
|
19
|
+
state.consoleFilter = null;
|
|
20
|
+
state.render();
|
|
21
|
+
};
|
|
22
|
+
const overlay = createModalOverlay(closeModal);
|
|
23
|
+
const modal = createModalBox(color);
|
|
24
|
+
const header = createModalHeader({
|
|
25
|
+
color,
|
|
26
|
+
title: `Console ${label} (${logs.length})`,
|
|
27
|
+
onClose: closeModal,
|
|
28
|
+
onCopyMd: async () => {
|
|
29
|
+
await navigator.clipboard.writeText(consoleLogsToMarkdown(logs));
|
|
30
|
+
},
|
|
31
|
+
onSave: () => handleSaveConsoleLogs(state, logs),
|
|
32
|
+
onClear: () => state.clearConsoleLogs(),
|
|
33
|
+
sweetlinkConnected: state.sweetlinkConnected,
|
|
34
|
+
saveLocation: state.options.saveLocation,
|
|
35
|
+
isSaving: state.savingConsoleLogs,
|
|
36
|
+
savedPath: state.lastConsoleLogs,
|
|
37
|
+
});
|
|
38
|
+
modal.appendChild(header);
|
|
39
|
+
const content = createModalContent();
|
|
40
|
+
if (logs.length === 0) {
|
|
41
|
+
content.appendChild(createEmptyMessage(`No ${filterType}s recorded`));
|
|
42
|
+
}
|
|
43
|
+
else {
|
|
44
|
+
renderConsoleLogs(content, logs, color);
|
|
45
|
+
}
|
|
46
|
+
modal.appendChild(content);
|
|
47
|
+
overlay.appendChild(modal);
|
|
48
|
+
state.overlayElement = overlay;
|
|
49
|
+
document.body.appendChild(overlay);
|
|
50
|
+
}
|
|
51
|
+
function renderConsoleLogs(container, logs, color) {
|
|
52
|
+
logs.forEach((log, index) => {
|
|
53
|
+
const logItem = document.createElement('div');
|
|
54
|
+
Object.assign(logItem.style, {
|
|
55
|
+
padding: '8px 14px',
|
|
56
|
+
borderBottom: index < logs.length - 1 ? '1px solid rgba(255, 255, 255, 0.05)' : 'none',
|
|
57
|
+
});
|
|
58
|
+
const timestamp = document.createElement('span');
|
|
59
|
+
Object.assign(timestamp.style, {
|
|
60
|
+
color: CSS_COLORS.textMuted,
|
|
61
|
+
fontSize: '0.625rem',
|
|
62
|
+
marginRight: '8px',
|
|
63
|
+
});
|
|
64
|
+
timestamp.textContent = new Date(log.timestamp).toLocaleTimeString();
|
|
65
|
+
logItem.appendChild(timestamp);
|
|
66
|
+
const message = document.createElement('span');
|
|
67
|
+
Object.assign(message.style, {
|
|
68
|
+
color,
|
|
69
|
+
fontSize: '0.6875rem',
|
|
70
|
+
wordBreak: 'break-word',
|
|
71
|
+
whiteSpace: 'pre-wrap',
|
|
72
|
+
});
|
|
73
|
+
message.textContent = log.message;
|
|
74
|
+
logItem.appendChild(message);
|
|
75
|
+
container.appendChild(logItem);
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
//# sourceMappingURL=console.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"console.js","sourceRoot":"","sources":["../../../src/modules/rendering/console.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAIhF,MAAM,UAAU,kBAAkB,CAAC,KAAkB,EAAE,uBAAuC;IAC5F,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC;IACvC,IAAI,CAAC,UAAU;QAAE,OAAO;IAExB,MAAM,IAAI,GAAG,uBAAuB;SACjC,OAAO,EAAE;SACT,MAAM,CAAC,CAAC,GAAe,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,aAAa,CAAC,OAAO,EAAE,IAAI,EAAE,aAAa,CAAC,IAAI,EAAE,CAAC;IACvG,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAW,CAAC;IAC9E,MAAM,KAAK,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAEnC,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC;QAC3B,KAAK,CAAC,MAAM,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAC/C,MAAM,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IAEpC,MAAM,MAAM,GAAG,iBAAiB,CAAC;QAC/B,KAAK;QACL,KAAK,EAAE,WAAW,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG;QAC1C,OAAO,EAAE,UAAU;QACnB,QAAQ,EAAE,KAAK,IAAI,EAAE;YACnB,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC;QACnE,CAAC;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,EAAE,IAAI,CAAC;QAChD,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,gBAAgB,EAAE;QACvC,kBAAkB,EAAE,KAAK,CAAC,kBAAkB;QAC5C,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY;QACxC,QAAQ,EAAE,KAAK,CAAC,iBAAiB;QACjC,SAAS,EAAE,KAAK,CAAC,eAAe;KACjC,CAAC,CAAC;IACH,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAE1B,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,CAAC,WAAW,CAAC,kBAAkB,CAAC,MAAM,UAAU,YAAY,CAAC,CAAC,CAAC;IACxE,CAAC;SAAM,CAAC;QACN,iBAAiB,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC;IAED,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC3B,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAE3B,KAAK,CAAC,cAAc,GAAG,OAAO,CAAC;IAC/B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AACrC,CAAC;AAED,SAAS,iBAAiB,CAAC,SAAsB,EAAE,IAAkB,EAAE,KAAa;IAClF,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QAC1B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;YAC3B,OAAO,EAAE,UAAU;YACnB,YAAY,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,MAAM;SACvF,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE;YAC7B,KAAK,EAAE,UAAU,CAAC,SAAS;YAC3B,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,KAAK;SACnB,CAAC,CAAC;QACH,SAAS,CAAC,WAAW,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,kBAAkB,EAAE,CAAC;QACrE,OAAO,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;QAE/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAC/C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;YAC3B,KAAK;YACL,QAAQ,EAAE,WAAW;YACrB,SAAS,EAAE,YAAY;YACvB,UAAU,EAAE,UAAU;SACvB,CAAC,CAAC;QACH,OAAO,CAAC,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC;QAClC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAE7B,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Expanded state rendering for the DevBar — helper functions and orchestrator.
|
|
3
|
+
*/
|
|
4
|
+
import type { DevBarState } from '../types.js';
|
|
5
|
+
export declare function renderExpanded(state: DevBarState, customControls: {
|
|
6
|
+
id: string;
|
|
7
|
+
label: string;
|
|
8
|
+
onClick: () => void;
|
|
9
|
+
active?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
variant?: 'default' | 'warning';
|
|
12
|
+
}[]): void;
|
|
13
|
+
//# sourceMappingURL=expanded.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"expanded.d.ts","sourceRoot":"","sources":["../../../src/modules/rendering/expanded.ts"],"names":[],"mappings":"AAAA;;GAEG;AAkBH,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,aAAa,CAAC;AAghB9D,wBAAgB,cAAc,CAC5B,KAAK,EAAE,WAAW,EAClB,cAAc,EAAE;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC,EAAE,GACF,IAAI,CAiCN"}
|