gh-138122: Tachyon Flamegraph: Make toggle keyboard accesible and adjust sidebar collapse CSS (#142638)
diff --git a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
index 2940f26..03eb227 100644
--- a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
+++ b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
@@ -275,16 +275,8 @@
}
/* View Mode Section */
-.view-mode-section {
- padding-bottom: 20px;
- border-bottom: 1px solid var(--border);
-}
-
-.view-mode-section .section-title {
- margin-bottom: 12px;
-}
-
-.view-mode-section .toggle-switch {
+.view-mode-section .section-content {
+ display: flex;
justify-content: center;
}
@@ -316,7 +308,7 @@
}
.section-content {
- transition: max-height var(--transition-normal), opacity var(--transition-normal);
+ transition: max-height var(--transition-slow) ease-out, opacity var(--transition-normal) ease-out, padding var(--transition-normal) ease-out;
max-height: 1000px;
opacity: 1;
}
@@ -324,7 +316,9 @@
.collapsible.collapsed .section-content {
max-height: 0;
opacity: 0;
- margin-bottom: -10px;
+ padding-top: 0;
+ pointer-events: none;
+ transition: max-height var(--transition-slow) ease-in, opacity var(--transition-normal) ease-in, padding var(--transition-normal) ease-in;
}
/* --------------------------------------------------------------------------
@@ -634,10 +628,6 @@
Legend
-------------------------------------------------------------------------- */
-.legend-section {
- margin-top: auto;
- padding-top: 12px;
-}
.legend {
display: flex;
@@ -1023,3 +1013,7 @@
border-color: #8e44ad;
box-shadow: 0 0 8px rgba(142, 68, 173, 0.3);
}
+
+.toggle-switch:focus-visible {
+ border-radius: 4px;
+}
diff --git a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
index 6345320..17fd95a 100644
--- a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
+++ b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
@@ -1302,6 +1302,17 @@
}
}
+// Keyboard shortcut: Enter/Space activates toggle switches
+document.addEventListener('keydown', function(e) {
+ if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+ return;
+ }
+ if ((e.key === 'Enter' || e.key === ' ') && e.target.classList.contains('toggle-switch')) {
+ e.preventDefault();
+ e.target.click();
+ }
+});
+
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initFlamegraph);
} else {
diff --git a/Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html b/Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html
index 0285556..936c9ad 100644
--- a/Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html
+++ b/Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html
@@ -102,12 +102,19 @@
</div>
<!-- View Mode Section -->
- <section class="sidebar-section view-mode-section">
- <h3 class="section-title">View Mode</h3>
- <div class="toggle-switch" id="toggle-invert">
- <span class="toggle-label active">Flamegraph</span>
- <div class="toggle-track"></div>
- <span class="toggle-label">Inverted Flamegraph</span>
+ <section class="sidebar-section view-mode-section collapsible" id="view-mode-section">
+ <button class="section-header" onclick="toggleSection('view-mode-section')">
+ <h3 class="section-title">View Mode</h3>
+ <svg class="section-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none">
+ <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+ </svg>
+ </button>
+ <div class="section-content">
+ <div class="toggle-switch" id="toggle-invert" title="Toggle between standard and inverted flamegraph view" tabindex="0">
+ <span class="toggle-label active" data-text="Flamegraph">Flamegraph</span>
+ <div class="toggle-track"></div>
+ <span class="toggle-label" data-text="Inverted Flamegraph">Inverted Flamegraph</span>
+ </div>
</div>
</section>
diff --git a/Lib/profiling/sampling/_shared_assets/base.css b/Lib/profiling/sampling/_shared_assets/base.css
index d51636a..39bdd52 100644
--- a/Lib/profiling/sampling/_shared_assets/base.css
+++ b/Lib/profiling/sampling/_shared_assets/base.css
@@ -37,6 +37,7 @@
/* Transitions */
--transition-fast: 0.15s ease;
--transition-normal: 0.25s ease;
+ --transition-slow: 0.3s ease;
}
/* Light theme (default) */
