Merge pull request #110 from savannahostrowski/tachyon-opcodes-savannah

CSS fixes for opcode-aware Tachyon - gh-138122

Author: pablogsal

Lib/profiling/sampling/_flamegraph_assets/flamegraph.css

@@ -863,6 +863,84 @@ body.resizing-sidebar {
   text-align: center;
 }
 
+/* --------------------------------------------------------------------------
+   Tooltip Bytecode/Opcode Section
+   -------------------------------------------------------------------------- */
+
+.tooltip-opcodes {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+
+.tooltip-opcodes-title {
+  color: var(--accent);
+  font-size: 13px;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.tooltip-opcodes-list {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px;
+}
+
+.tooltip-opcode-row {
+  display: grid;
+  grid-template-columns: 1fr 60px 60px;
+  gap: 8px;
+  align-items: center;
+  padding: 3px 0;
+}
+
+.tooltip-opcode-name {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tooltip-opcode-name.specialized {
+  color: var(--spec-high-text);
+}
+
+.tooltip-opcode-base-hint {
+  color: var(--text-muted);
+  font-size: 11px;
+  margin-left: 4px;
+}
+
+.tooltip-opcode-badge {
+  background: var(--spec-high);
+  color: white;
+  font-size: 9px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  margin-left: 4px;
+}
+
+.tooltip-opcode-count {
+  text-align: right;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.tooltip-opcode-bar {
+  background: var(--bg-secondary);
+  border-radius: 2px;
+  height: 8px;
+  overflow: hidden;
+}
+
+.tooltip-opcode-bar-fill {
+  background: linear-gradient(90deg, var(--python-blue), var(--python-blue-light));
+  height: 100%;
+}
+
 /* --------------------------------------------------------------------------
    Responsive (Flamegraph-specific)
    -------------------------------------------------------------------------- */

Lib/profiling/sampling/_flamegraph_assets/flamegraph.js

@@ -292,33 +292,31 @@ function createPythonTooltip(data) {
         const pct = ((count / totalOpcodeSamples) * 100).toFixed(1);
         const barWidth = (count / maxCount) * 100;
         const specializedBadge = opcodeInfo.isSpecialized
-          ? '<span style="background: #2e7d32; color: white; font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-left: 4px;">SPECIALIZED</span>'
+          ? '<span class="tooltip-opcode-badge">SPECIALIZED</span>'
           : '';
         const baseOpHint = opcodeInfo.isSpecialized
-          ? `<span style="color: #888; font-size: 11px; margin-left: 4px;">(${opcodeInfo.baseOpname})</span>`
+          ? `<span class="tooltip-opcode-base-hint">(${opcodeInfo.baseOpname})</span>`
           : '';
+        const nameClass = opcodeInfo.isSpecialized
+          ? 'tooltip-opcode-name specialized'
+          : 'tooltip-opcode-name';
 
         return `
-          <div style="display: grid; grid-template-columns: 1fr 60px 60px; gap: 8px; align-items: center; padding: 3px 0;">
-            <div style="font-family: monospace; font-size: 11px; color: ${opcodeInfo.isSpecialized ? '#2e7d32' : '#333'}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
+          <div class="tooltip-opcode-row">
+            <div class="${nameClass}">
               ${opcodeInfo.opname}${baseOpHint}${specializedBadge}
             </div>
-            <div style="text-align: right; font-size: 11px; color: #666;">${count.toLocaleString()}</div>
-            <div style="background: #e9ecef; border-radius: 2px; height: 8px; overflow: hidden;">
-              <div style="background: linear-gradient(90deg, #3776ab, #5a9bd5); height: 100%; width: ${barWidth}%;"></div>
+            <div class="tooltip-opcode-count">${count.toLocaleString()}</div>
+            <div class="tooltip-opcode-bar">
+              <div class="tooltip-opcode-bar-fill" style="width: ${barWidth}%;"></div>
             </div>
           </div>`;
       }).join('');
 
       opcodeSection = `
-        <div style="margin-top: 16px; padding-top: 12px;
-                    border-top: 1px solid #e9ecef;">
-          <div style="color: #3776ab; font-size: 13px;
-                      margin-bottom: 8px; font-weight: 600;">
-            Bytecode Instructions:
-          </div>
-          <div style="background: #f8f9fa; border: 1px solid #e9ecef;
-                      border-radius: 6px; padding: 10px;">
+        <div class="tooltip-opcodes">
+          <div class="tooltip-opcodes-title">Bytecode Instructions:</div>
+          <div class="tooltip-opcodes-list">
             ${opcodeLines}
           </div>
         </div>`;

Lib/profiling/sampling/_shared_assets/base.css

@@ -119,15 +119,15 @@
 
   --header-gradient: linear-gradient(135deg, #21262d 0%, #30363d 100%);
 
-  /* Dark mode heat palette - dark blue to teal to yellow to orange (cold to hot) */
-  --heat-1: #4a7ba7;
-  --heat-2: #5a9fa8;
-  --heat-3: #6ab5b5;
-  --heat-4: #7ec488;
-  --heat-5: #a0d878;
-  --heat-6: #c4de6a;
-  --heat-7: #f4d44d;
-  --heat-8: #ff6b35;
+  /* Dark mode heat palette - muted colors that provide sufficient contrast with light text */
+  --heat-1: rgba(74, 123, 167, 0.35);
+  --heat-2: rgba(90, 159, 168, 0.38);
+  --heat-3: rgba(106, 181, 181, 0.40);
+  --heat-4: rgba(126, 196, 136, 0.42);
+  --heat-5: rgba(160, 216, 120, 0.45);
+  --heat-6: rgba(196, 222, 106, 0.48);
+  --heat-7: rgba(244, 212, 77, 0.50);
+  --heat-8: rgba(255, 107, 53, 0.55);
 
   /* Code view specific - dark mode */
   --code-bg: #0d1117;