Skip to content

Commit 368a267

Browse files
hugovkhugovk
authored
gh-142927: Detect system theme in flame graph like in heatmap (#144885)
1 parent 55b36fd commit 368a267

File tree

7 files changed

+68
-86
lines changed

7 files changed

+68
-86
lines changed

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

Lines changed: 3 additions & 39 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');
@@ -1242,23 +1223,6 @@ function generateInvertedFlamegraph(data) {
12421223
return invertedRoot;
12431224
}
12441225

1245-
function updateToggleUI(toggleId, isOn) {
1246-
const toggle = document.getElementById(toggleId);
1247-
if (toggle) {
1248-
const track = toggle.querySelector('.toggle-track');
1249-
const labels = toggle.querySelectorAll('.toggle-label');
1250-
if (isOn) {
1251-
track.classList.add('on');
1252-
labels[0].classList.remove('active');
1253-
labels[1].classList.add('active');
1254-
} else {
1255-
track.classList.remove('on');
1256-
labels[0].classList.add('active');
1257-
labels[1].classList.remove('active');
1258-
}
1259-
}
1260-
}
1261-
12621226
function toggleInvert() {
12631227
isInverted = !isInverted;
12641228
updateToggleUI('toggle-invert', isInverted);

‎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.js‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -203,23 +203,6 @@ function applyLineColors() {
203203
// Toggle Controls
204204
// ============================================================================
205205

206-
function updateToggleUI(toggleId, isOn) {
207-
const toggle = document.getElementById(toggleId);
208-
if (toggle) {
209-
const track = toggle.querySelector('.toggle-track');
210-
const labels = toggle.querySelectorAll('.toggle-label');
211-
if (isOn) {
212-
track.classList.add('on');
213-
labels[0].classList.remove('active');
214-
labels[1].classList.add('active');
215-
} else {
216-
track.classList.remove('on');
217-
labels[0].classList.add('active');
218-
labels[1].classList.remove('active');
219-
}
220-
}
221-
}
222-
223206
function toggleColdCode() {
224207
coldCodeHidden = !coldCodeHidden;
225208
applyHotFilter();

‎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: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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+
}
38+
39+
// ============================================================================
40+
// Toggle Switch UI
41+
// ============================================================================
42+
43+
function updateToggleUI(toggleId, isOn) {
44+
const toggle = document.getElementById(toggleId);
45+
if (toggle) {
46+
const track = toggle.querySelector('.toggle-track');
47+
const labels = toggle.querySelectorAll('.toggle-label');
48+
if (isOn) {
49+
track.classList.add('on');
50+
labels[0].classList.remove('active');
51+
labels[1].classList.add('active');
52+
} else {
53+
track.classList.remove('on');
54+
labels[0].classList.add('active');
55+
labels[1].classList.remove('active');
56+
}
57+
}
58+
}

‎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
@@ -377,7 +377,9 @@ def _create_flamegraph_html(self, data):
377377

378378
html_template = (template_dir / "_flamegraph_assets" / "flamegraph_template.html").read_text(encoding="utf-8")
379379
css_content = get_combined_css("flamegraph")
380-
js_content = (template_dir / "_flamegraph_assets" / "flamegraph.js").read_text(encoding="utf-8")
380+
base_js = (template_dir / "_shared_assets" / "base.js").read_text(encoding="utf-8")
381+
component_js = (template_dir / "_flamegraph_assets" / "flamegraph.js").read_text(encoding="utf-8")
382+
js_content = f"{base_js}\n{component_js}"
381383

382384
# Inline first-party CSS/JS
383385
html_template = html_template.replace(

0 commit comments

Comments
 (0)