From 40ac3a9343e9653ad5a15b06741e55f67322eeb2 Mon Sep 17 00:00:00 2001
From: Stan Ulbrych <89152624+StanFromIreland@users.noreply.github.com>
Date: Fri, 12 Dec 2025 17:27:12 +0000
Subject: [PATCH] gh-138122: Tachyon Flamegraph: Make toggle keyboard accesible
 and adjust sidebar collapse CSS (#142638)

---
 .../_flamegraph_assets/flamegraph.css         | 26 +++++++------------
 .../sampling/_flamegraph_assets/flamegraph.js | 11 ++++++++
 .../flamegraph_template.html                  | 19 +++++++++-----
 .../sampling/_shared_assets/base.css          |  1 +
 4 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
index 2940f263f7ff..03eb2274d23e 100644
--- a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
+++ b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.css
@@ -275,16 +275,8 @@ body.resizing-sidebar {
 }
 
 /* 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 @@ body.resizing-sidebar {
 }
 
 .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 @@ body.resizing-sidebar {
 .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 @@ body.resizing-sidebar {
    Legend
    -------------------------------------------------------------------------- */
 
-.legend-section {
-  margin-top: auto;
-  padding-top: 12px;
-}
 
 .legend {
   display: flex;
@@ -1023,3 +1013,7 @@ body.resizing-sidebar {
   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 6345320bd255..17fd95af8595 100644
--- a/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
+++ b/Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
@@ -1302,6 +1302,17 @@ function initFlamegraph() {
   }
 }
 
+// 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 02855563f83f..936c9adfc8c5 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 d51636a3bf7d..39bdd52e943a 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) */
-- 
2.47.3