https://github.com/python/cpython/commit/2eca80ffab5a5fd616a71757a4bf84908bce3a8d
commit: 2eca80ffab5a5fd616a71757a4bf84908bce3a8d
branch: main
author: Stan Ulbrych <[email protected]>
committer: pablogsal <[email protected]>
date: 2025-12-11T21:28:42Z
summary:
gh-138122: Make Tachyon flamegraph and heatmap output more similar (#142590)
files:
M Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
M Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
M Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html
M Lib/profiling/sampling/_heatmap_assets/heatmap.css
M Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
M Lib/profiling/sampling/_shared_assets/base.css
diff --git a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
index ee699f2982616a..c3b1d955f7f526 100644
--- a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
+++ b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
@@ -329,34 +329,44 @@ body.resizing-sidebar {
gap: 8px;
padding: 8px 10px;
background: var(--bg-primary);
- border: 1px solid var(--border);
+ border: 2px solid var(--border);
border-radius: 8px;
transition: all var(--transition-fast);
animation: slideUp 0.4s ease-out backwards;
- animation-delay: calc(var(--i, 0) * 0.05s);
+ animation-delay: calc(var(--i, 0) * 0.08s);
overflow: hidden;
+ position: relative;
}
-.summary-card:nth-child(1) { --i: 0; }
-.summary-card:nth-child(2) { --i: 1; }
-.summary-card:nth-child(3) { --i: 2; }
-.summary-card:nth-child(4) { --i: 3; }
+.summary-card:nth-child(1) { --i: 0; --card-color: 55, 118, 171; }
+.summary-card:nth-child(2) { --i: 1; --card-color: 40, 167, 69; }
+.summary-card:nth-child(3) { --i: 2; --card-color: 255, 193, 7; }
+.summary-card:nth-child(4) { --i: 3; --card-color: 111, 66, 193; }
.summary-card:hover {
- border-color: var(--accent);
- background: var(--accent-glow);
+ border-color: rgba(var(--card-color), 0.6);
+ background: linear-gradient(135deg, rgba(var(--card-color), 0.08) 0%,
var(--bg-primary) 100%);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(var(--card-color), 0.15);
}
.summary-icon {
- font-size: 16px;
+ font-size: 14px;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
- background: var(--bg-tertiary);
+ background: linear-gradient(135deg, rgba(var(--card-color), 0.15) 0%,
rgba(var(--card-color), 0.05) 100%);
+ border: 1px solid rgba(var(--card-color), 0.2);
border-radius: 6px;
flex-shrink: 0;
+ transition: all var(--transition-fast);
+}
+
+.summary-card:hover .summary-icon {
+ transform: scale(1.05);
+ background: linear-gradient(135deg, rgba(var(--card-color), 0.25) 0%,
rgba(var(--card-color), 0.1) 100%);
}
.summary-data {
@@ -368,8 +378,8 @@ body.resizing-sidebar {
.summary-value {
font-family: var(--font-mono);
font-size: 13px;
- font-weight: 700;
- color: var(--accent);
+ font-weight: 800;
+ color: rgb(var(--card-color));
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
diff --git a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
index 0370c18a25049f..dc7bfed602f32a 100644
--- a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
+++ b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
@@ -187,6 +187,27 @@ function restoreUIState() {
}
}
+// ============================================================================
+// Logo/Favicon Setup
+// ============================================================================
+
+function setupLogos() {
+ const logo = document.querySelector('.sidebar-logo-img img');
+ if (!logo) return;
+
+ const navbarLogoContainer = document.getElementById('navbar-logo');
+ if (navbarLogoContainer) {
+ const navbarLogo = logo.cloneNode(true);
+ navbarLogoContainer.appendChild(navbarLogo);
+ }
+
+ const favicon = document.createElement('link');
+ favicon.rel = 'icon';
+ favicon.type = 'image/png';
+ favicon.href = logo.src;
+ document.head.appendChild(favicon);
+}
+
// ============================================================================
// Status Bar
// ============================================================================
@@ -198,6 +219,11 @@ function updateStatusBar(nodeData, rootValue) {
const timeMs = (nodeData.value / 1000).toFixed(2);
const percent = rootValue > 0 ? ((nodeData.value / rootValue) *
100).toFixed(1) : "0.0";
+ const brandEl = document.getElementById('status-brand');
+ const taglineEl = document.getElementById('status-tagline');
+ if (brandEl) brandEl.style.display = 'none';
+ if (taglineEl) taglineEl.style.display = 'none';
+
const locationEl = document.getElementById('status-location');
const funcItem = document.getElementById('status-func-item');
const timeItem = document.getElementById('status-time-item');
@@ -230,6 +256,11 @@ function clearStatusBar() {
const el = document.getElementById(id);
if (el) el.style.display = 'none';
});
+
+ const brandEl = document.getElementById('status-brand');
+ const taglineEl = document.getElementById('status-tagline');
+ if (brandEl) brandEl.style.display = 'flex';
+ if (taglineEl) taglineEl.style.display = 'flex';
}
// ============================================================================
@@ -1065,6 +1096,7 @@ function exportSVG() {
function initFlamegraph() {
ensureLibraryLoaded();
restoreUIState();
+ setupLogos();
let processedData = EMBEDDED_DATA;
if (EMBEDDED_DATA.strings) {
diff --git a/Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html
b/Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html
index 29e5fdd3f35069..05277fb225c86f 100644
--- a/Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html
+++ b/Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Tachyon Profiler - Flamegraph</title>
+ <title>Tachyon Profiler - Flamegraph Report</title>
<!-- INLINE_VENDOR_D3_JS -->
<!-- INLINE_VENDOR_FLAMEGRAPH_CSS -->
<!-- INLINE_VENDOR_FLAMEGRAPH_JS -->
@@ -15,9 +15,10 @@
<!-- Top Bar -->
<header class="top-bar">
<div class="brand">
+ <div class="brand-logo" id="navbar-logo"></div>
<span class="brand-text">Tachyon</span>
<span class="brand-divider"></span>
- <span class="brand-subtitle">Profiler</span>
+ <span class="brand-subtitle">Flamegraph Report</span>
</div>
<div class="search-wrapper">
<input
@@ -290,6 +291,12 @@ <h3 class="section-title">Heat Map</h3>
<!-- Status Bar -->
<footer class="status-bar">
+ <span class="status-item" id="status-brand">
+ <span class="status-value">Tachyon Profiler</span>
+ </span>
+ <span class="status-item" id="status-tagline">
+ <span class="status-label">Python Sampling Profiler</span>
+ </span>
<span class="status-item" id="status-location" style="display: none;">
<span class="status-label">File:</span>
<span class="status-value" id="status-file">--</span>
diff --git a/Lib/profiling/sampling/_heatmap_assets/heatmap.css
b/Lib/profiling/sampling/_heatmap_assets/heatmap.css
index 3094279520ab13..b5aa828c99c3e0 100644
--- a/Lib/profiling/sampling/_heatmap_assets/heatmap.css
+++ b/Lib/profiling/sampling/_heatmap_assets/heatmap.css
@@ -20,24 +20,6 @@
z-index: 100;
}
-/* Back link in toolbar */
-.back-link {
- color: white;
- text-decoration: none;
- padding: 6px 14px;
- background: rgba(255, 255, 255, 0.12);
- border: 1px solid rgba(255, 255, 255, 0.18);
- border-radius: 6px;
- font-size: 13px;
- font-weight: 500;
- transition: all var(--transition-fast);
-}
-
-.back-link:hover {
- background: rgba(255, 255, 255, 0.22);
- border-color: rgba(255, 255, 255, 0.35);
-}
-
/* --------------------------------------------------------------------------
Main Content Area
--------------------------------------------------------------------------
*/
diff --git
a/Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
b/Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
index 9e57643d59ff9a..3d857c49d27962 100644
--- a/Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
+++ b/Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
@@ -17,7 +17,7 @@
<span class="brand-subtitle" style="font-family:
var(--font-mono); font-size: 13px;"><!-- FILENAME --></span>
</div>
<div class="toolbar">
- <a href="index.html" class="back-link">Back to Index</a>
+ <a href="index.html" class="toolbar-btn" title="Back to Index"
aria-label="Back to Index">⌂</a>
<button
class="toolbar-btn theme-toggle"
onclick="toggleTheme()"
diff --git a/Lib/profiling/sampling/_shared_assets/base.css
b/Lib/profiling/sampling/_shared_assets/base.css
index 4117cbb8f2fd50..46916709f19f54 100644
--- a/Lib/profiling/sampling/_shared_assets/base.css
+++ b/Lib/profiling/sampling/_shared_assets/base.css
@@ -292,6 +292,7 @@ body {
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
cursor: pointer;
+ text-decoration: none;
transition: all var(--transition-fast);
}
@@ -385,7 +386,8 @@ body {
button:focus-visible,
select:focus-visible,
-input:focus-visible {
+input:focus-visible,
+a.toolbar-btn:focus-visible {
outline: 2px solid var(--python-gold);
outline-offset: 2px;
}
_______________________________________________
Python-checkins mailing list -- [email protected]
To unsubscribe send an email to [email protected]
https://mail.python.org/mailman3//lists/python-checkins.python.org
Member address: [email protected]
