Skip to content

Commit 78bbbcc

Browse files
hugovkhugovk
committed
Detect system theme in flame graph
1 parent 837166f commit 78bbbcc

File tree

6 files changed

+47
-52
lines changed

6 files changed

+47
-52
lines changed

‎Lib/profiling/sampling/_flamegraph_assets/flamegraph.js‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -83,18 +83,7 @@ function resolveStringIndices(node) {
8383
// ============================================================================
8484

8585
function toggleTheme() {
86-
const html = document.documentElement;
87-
const current = html.getAttribute('data-theme') || 'light';
88-
const next = current === 'light' ? 'dark' : 'light';
89-
html.setAttribute('data-theme', next);
90-
localStorage.setItem('flamegraph-theme', next);
91-
92-
// Update theme button icon
93-
const btn = document.getElementById('theme-btn');
94-
if (btn) {
95-
btn.querySelector('.icon-moon').style.display = next === 'dark' ? 'none' : '';
96-
btn.querySelector('.icon-sun').style.display = next === 'dark' ? '' : 'none';
97-
}
86+
toggleAndSaveTheme();
9887

9988
// Re-render flamegraph with new theme colors
10089
if (window.flamegraphData && normalData) {
@@ -154,17 +143,9 @@ function toggleSection(sectionId) {
154143
}
155144
}
156145

146+
// Restore theme from localStorage, or use browser preference
157147
function restoreUIState() {
158-
// Restore theme
159-
const savedTheme = localStorage.getItem('flamegraph-theme');
160-
if (savedTheme) {
161-
document.documentElement.setAttribute('data-theme', savedTheme);
162-
const btn = document.getElementById('theme-btn');
163-
if (btn) {
164-
btn.querySelector('.icon-moon').style.display = savedTheme === 'dark' ? 'none' : '';
165-
btn.querySelector('.icon-sun').style.display = savedTheme === 'dark' ? '' : 'none';
166-
}
167-
}
148+
applyTheme(getPreferredTheme());
168149

169150
// Restore sidebar state
170151
const savedSidebar = localStorage.getItem('flamegraph-sidebar');

‎Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html lang="en" data-theme="light">
2+
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

‎Lib/profiling/sampling/_heatmap_assets/heatmap_shared.js‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -43,33 +43,6 @@ function intensityToColor(intensity) {
4343
// Theme Support
4444
// ============================================================================
4545

46-
// Get the preferred theme from localStorage or browser preference
47-
function getPreferredTheme() {
48-
const saved = localStorage.getItem('heatmap-theme');
49-
if (saved) return saved;
50-
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
51-
}
52-
53-
// Apply theme and update UI. Returns the applied theme.
54-
function applyTheme(theme) {
55-
document.documentElement.setAttribute('data-theme', theme);
56-
const btn = document.getElementById('theme-btn');
57-
if (btn) {
58-
btn.querySelector('.icon-moon').style.display = theme === 'dark' ? 'none' : '';
59-
btn.querySelector('.icon-sun').style.display = theme === 'dark' ? '' : 'none';
60-
}
61-
return theme;
62-
}
63-
64-
// Toggle theme and save preference. Returns the new theme.
65-
function toggleAndSaveTheme() {
66-
const current = document.documentElement.getAttribute('data-theme') || 'light';
67-
const next = current === 'light' ? 'dark' : 'light';
68-
applyTheme(next);
69-
localStorage.setItem('heatmap-theme', next);
70-
return next;
71-
}
72-
7346
// Restore theme from localStorage, or use browser preference
7447
function restoreUIState() {
7548
applyTheme(getPreferredTheme());

‎Lib/profiling/sampling/_shared_assets/base.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Tachyon Profiler - Shared JavaScript
2+
// Common utilities shared between flamegraph and heatmap views
3+
4+
// ============================================================================
5+
// Theme Support
6+
// ============================================================================
7+
8+
// Storage key for theme preference
9+
const THEME_STORAGE_KEY = 'tachyon-theme';
10+
11+
// Get the preferred theme from localStorage or system preference
12+
function getPreferredTheme() {
13+
const saved = localStorage.getItem(THEME_STORAGE_KEY);
14+
if (saved) return saved;
15+
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
16+
}
17+
18+
// Apply theme and update UI
19+
function applyTheme(theme) {
20+
document.documentElement.setAttribute('data-theme', theme);
21+
const btn = document.getElementById('theme-btn');
22+
if (btn) {
23+
const moonIcon = btn.querySelector('.icon-moon');
24+
const sunIcon = btn.querySelector('.icon-sun');
25+
if (moonIcon) moonIcon.style.display = theme === 'dark' ? 'none' : '';
26+
if (sunIcon) sunIcon.style.display = theme === 'dark' ? '' : 'none';
27+
}
28+
}
29+
30+
// Toggle theme and save preference. Returns the new theme.
31+
function toggleAndSaveTheme() {
32+
const current = document.documentElement.getAttribute('data-theme') || 'light';
33+
const next = current === 'light' ? 'dark' : 'light';
34+
applyTheme(next);
35+
localStorage.setItem(THEME_STORAGE_KEY, next);
36+
return next;
37+
}

‎Lib/profiling/sampling/heatmap_collector.py‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,9 @@ def _load_templates(self):
204204
self.file_css = css_content
205205

206206
# Load JS
207-
shared_js = (assets_dir / "heatmap_shared.js").read_text(encoding="utf-8")
207+
base_js = (template_dir / "_shared_assets" / "base.js").read_text(encoding="utf-8")
208+
heatmap_shared_js = (assets_dir / "heatmap_shared.js").read_text(encoding="utf-8")
209+
shared_js = f"{base_js}\n{heatmap_shared_js}"
208210
self.index_js = f"{shared_js}\n{(assets_dir / 'heatmap_index.js').read_text(encoding='utf-8')}"
209211
self.file_js = f"{shared_js}\n{(assets_dir / 'heatmap.js').read_text(encoding='utf-8')}"
210212

‎Lib/profiling/sampling/stack_collector.py‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -373,7 +373,9 @@ def _create_flamegraph_html(self, data):
373373

374374
html_template = (template_dir / "_flamegraph_assets" / "flamegraph_template.html").read_text(encoding="utf-8")
375375
css_content = get_combined_css("flamegraph")
376-
js_content = (template_dir / "_flamegraph_assets" / "flamegraph.js").read_text(encoding="utf-8")
376+
base_js = (template_dir / "_shared_assets" / "base.js").read_text(encoding="utf-8")
377+
component_js = (template_dir / "_flamegraph_assets" / "flamegraph.js").read_text(encoding="utf-8")
378+
js_content = f"{base_js}\n{component_js}"
377379

378380
# Inline first-party CSS/JS
379381
html_template = html_template.replace(

0 commit comments

Comments
 (0)