gh-138122: Tachyon Flamegraph: Make toggle keyboard accesible and adjust sidebar collapse CSS (#142638)

Author: StanFromIreland

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,15 +308,17 @@ 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;
 }
 
 .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;
+}

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 {

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>
 

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) */