Fix execution trace panel collapse/expand functionality
- Expose toggleTracePanel() to global scope for onclick access - Add localStorage state persistence for collapsed/expanded state - Add restoreTracePanelState() to remember user preference - Update onclick handler to safely call global function - Bump cache-bust version to force browser reload The trace panel toggle button now works correctly and remembers its state across page reloads. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -102,10 +102,10 @@
|
|||||||
const panel = document.createElement('div');
|
const panel = document.createElement('div');
|
||||||
panel.id = 'execution-trace-panel';
|
panel.id = 'execution-trace-panel';
|
||||||
panel.innerHTML = `
|
panel.innerHTML = `
|
||||||
<div style="position: fixed; top: 10px; right: 10px; z-index: 99999; background: rgba(0,0,0,0.95); border: 2px solid #00ff00; border-radius: 8px; font-family: monospace; font-size: 11px; color: #00ff00; max-width: 400px; max-height: 300px; overflow: hidden;">
|
<div id="trace-container" style="position: fixed; top: 10px; right: 10px; z-index: 99999; background: rgba(0,0,0,0.95); border: 2px solid #00ff00; border-radius: 8px; font-family: monospace; font-size: 11px; color: #00ff00; max-width: 400px; max-height: 300px; overflow: hidden;">
|
||||||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #00ff00; cursor: pointer;" onclick="toggleTracePanel()">
|
<div id="trace-header" style="display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #00ff00; cursor: pointer;" onclick="window.toggleTracePanel && window.toggleTracePanel()">
|
||||||
<strong>🔍 EXECUTION TRACE</strong>
|
<strong>🔍 EXECUTION TRACE</strong>
|
||||||
<button id="trace-toggle" style="background: transparent; border: 1px solid #00ff00; color: #00ff00; cursor: pointer;">▼</button>
|
<button id="trace-toggle" style="background: transparent; border: 1px solid #00ff00; color: #00ff00; cursor: pointer; padding: 2px 6px;">▼</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="trace-content" style="padding: 8px; max-height: 250px; overflow-y: auto; font-size: 10px; line-height: 1.4;">
|
<div id="trace-content" style="padding: 8px; max-height: 250px; overflow-y: auto; font-size: 10px; line-height: 1.4;">
|
||||||
<div style="color: #888;">Waiting for events...</div>
|
<div style="color: #888;">Waiting for events...</div>
|
||||||
@@ -153,16 +153,42 @@
|
|||||||
const content = document.getElementById('trace-content');
|
const content = document.getElementById('trace-content');
|
||||||
const toggle = document.getElementById('trace-toggle');
|
const toggle = document.getElementById('trace-toggle');
|
||||||
if (content && toggle) {
|
if (content && toggle) {
|
||||||
if (content.style.display === 'none') {
|
const isCollapsed = content.style.display === 'none';
|
||||||
|
|
||||||
|
if (isCollapsed) {
|
||||||
content.style.display = 'block';
|
content.style.display = 'block';
|
||||||
toggle.textContent = '▼';
|
toggle.textContent = '▼';
|
||||||
|
localStorage.setItem('tracePanelCollapsed', 'false');
|
||||||
} else {
|
} else {
|
||||||
content.style.display = 'none';
|
content.style.display = 'none';
|
||||||
toggle.textContent = '▶';
|
toggle.textContent = '▶';
|
||||||
|
localStorage.setItem('tracePanelCollapsed', 'true');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Restore collapsed state from localStorage
|
||||||
|
function restoreTracePanelState() {
|
||||||
|
const wasCollapsed = localStorage.getItem('tracePanelCollapsed') === 'true';
|
||||||
|
const content = document.getElementById('trace-content');
|
||||||
|
const toggle = document.getElementById('trace-toggle');
|
||||||
|
|
||||||
|
if (content && toggle && wasCollapsed) {
|
||||||
|
content.style.display = 'none';
|
||||||
|
toggle.textContent = '▶';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call restore after panel is created
|
||||||
|
const originalCreateTracePanel = createTracePanel;
|
||||||
|
createTracePanel = function() {
|
||||||
|
originalCreateTracePanel();
|
||||||
|
setTimeout(restoreTracePanelState, 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Expose toggleTracePanel globally so onclick can access it
|
||||||
|
window.toggleTracePanel = toggleTracePanel;
|
||||||
|
|
||||||
// Initialize on DOM ready
|
// Initialize on DOM ready
|
||||||
if (document.readyState === 'loading') {
|
if (document.readyState === 'loading') {
|
||||||
document.addEventListener('DOMContentLoaded', createTracePanel);
|
document.addEventListener('DOMContentLoaded', createTracePanel);
|
||||||
@@ -207,7 +233,7 @@
|
|||||||
<script>
|
<script>
|
||||||
(function() {
|
(function() {
|
||||||
'use strict';
|
'use strict';
|
||||||
const EXPECTED_JS_VERSION = '1769082354552'; // Cache bust for sidebar refresh fix
|
const EXPECTED_JS_VERSION = '1769083000000'; // Cache bust for trace panel collapse fix
|
||||||
const CACHE_BUST_KEY = '_claude_cache_bust';
|
const CACHE_BUST_KEY = '_claude_cache_bust';
|
||||||
|
|
||||||
// Check if we need to force reload
|
// Check if we need to force reload
|
||||||
|
|||||||
Reference in New Issue
Block a user