Bug 1593302 - Fix frame timeline scrubbing so it doesn't highlight other elements r=jlast

Differential Revision: https://phabricator.services.mozilla.com/D51424

--HG--
extra : moz-landing-system : lando

devtools/client/debugger/src/components/SecondaryPanes/FrameTimeline.css

@@ -10,6 +10,10 @@
   --replay-head-background: var(--theme-highlight-purple);
 }
 
+body.scrubbing {
+  user-select: none;
+}
+
 .frame-timeline-container {
   border-bottom: 1px solid var(--theme-splitter-color);
   background-color: var(--accordion-header-background);

devtools/client/debugger/src/components/SecondaryPanes/FrameTimeline.js

@@ -76,6 +76,26 @@ class FrameTimeline extends Component<Props, State> {
     displayedFrame: {},
   };
 
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (!document.body) {
+      return;
+    }
+
+    // To please Flow.
+    const bodyClassList = document.body.classList;
+
+    if (this.state.scrubbing && !prevState.scrubbing) {
+      document.addEventListener("mousemove", this.onMouseMove);
+      document.addEventListener("mouseup", this.onMouseUp);
+      bodyClassList.add("scrubbing");
+    }
+    if (!this.state.scrubbing && prevState.scrubbing) {
+      document.removeEventListener("mousemove", this.onMouseMove);
+      document.removeEventListener("mouseup", this.onMouseUp);
+      bodyClassList.remove("scrubbing");
+    }
+  }
+
   getProgress(clientX: number) {
     const { width, left } = getBoundingClientRect(this._timeline);
     const progress = ((clientX - left) / width) * 100;
@@ -124,13 +144,8 @@ class FrameTimeline extends Component<Props, State> {
     this.setState({ scrubbing: true, percentage: progress });
   };
 
-  onMouseUp = (event: SyntheticMouseEvent<>) => {
+  onMouseUp = (event: MouseEvent) => {
     const { seekToPosition, selectedLocation } = this.props;
-    const { scrubbing } = this.state;
-
-    if (!scrubbing) {
-      return;
-    }
 
     const progress = this.getProgress(event.clientX);
     const position = this.getPosition(progress);
@@ -145,19 +160,8 @@ class FrameTimeline extends Component<Props, State> {
     }
   };
 
-  onMouseMove = (event: SyntheticMouseEvent<>) => {
-    const { scrubbing } = this.state;
-
-    if (!scrubbing) {
-      return;
-    }
-
-    const { width, left } = getBoundingClientRect(this._timeline);
-    const percentage = ((event.clientX - left) / width) * 100;
-
-    if (percentage < 0 || percentage > 100) {
-      return;
-    }
+  onMouseMove = (event: MouseEvent) => {
+    const percentage = this.getProgress(event.clientX);
 
     this.displayPreview(percentage);
     this.setState({ percentage });
@@ -260,11 +264,7 @@ class FrameTimeline extends Component<Props, State> {
     }
 
     return (
-      <div
-        onMouseUp={this.onMouseUp}
-        onMouseMove={this.onMouseMove}
-        className={classnames("frame-timeline-container", { scrubbing })}
-      >
+      <div className={classnames("frame-timeline-container", { scrubbing })}>
         {this.renderTimeline()}
       </div>
     );