From dacbc3b508b207e27828bcd6b7335a431c3be320 Mon Sep 17 00:00:00 2001
From: Sanjay Ghemawat <sanjay@google.com>
Date: Mon, 24 Jun 2024 09:24:36 -0700
Subject: [PATCH] Allow text selection in flamegraph view.

Previously, the click handler would fire after some text was selected
with the mouse. This would switch pivots and forget the selected text.

We now switch the pivot only if the mouse did not move significantly
between mouse-down and mouse-up.

Fixes #870.
---
 internal/driver/html/stacks.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/internal/driver/html/stacks.js b/internal/driver/html/stacks.js
index df0f0649..ced7151e 100644
--- a/internal/driver/html/stacks.js
+++ b/internal/driver/html/stacks.js
@@ -436,13 +436,29 @@ function stackViewer(stacks, nodes) {
       r.appendChild(t);
     }
 
-    r.addEventListener('click', () => { switchPivots(pprofQuoteMeta(src.UniqueName)); });
+    onClick(r, () => { switchPivots(pprofQuoteMeta(src.UniqueName)); });
     r.addEventListener('mouseenter', () => { handleEnter(box, r); });
     r.addEventListener('mouseleave', () => { handleLeave(box); });
     r.addEventListener('contextmenu', (e) => { showActionMenu(e, box); });
     return r;
   }
 
+  // Handle clicks, but only if the mouse did not move during the click.
+  function onClick(target, handler) {
+    // Disable click if mouse moves more than threshold pixels since mousedown.
+    const threshold = 3;
+    let [x, y] = [-1, -1];
+    target.addEventListener('mousedown', (e) => {
+      [x, y] = [e.clientX, e.clientY];
+    });
+    target.addEventListener('click', (e) => {
+      if (Math.abs(e.clientX - x) <= threshold &&
+          Math.abs(e.clientY - y) <= threshold) {
+        handler();
+      }
+    });
+  }
+
   function drawSep(y, posTotal, negTotal) {
     const m = document.createElement('div');
     m.innerText = summary(posTotal, negTotal);