Bug 1522138 - [release 120] [Preview] Ensure correct event listening (#7778). r=dwalsh
authorJason Laster <jason.laster.11@gmail.com>
Thu, 24 Jan 2019 15:24:04 -0500
changeset 515389 38d9045b04e6ac6debe87dcfa42322a24359eebd
parent 515388 10b38250b65ef6c43aceb38402e254f18b8a60ec
child 515390 c4c105118de1ad525241df78704b8c5e04444599
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1522138
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1522138 - [release 120] [Preview] Ensure correct event listening (#7778). r=dwalsh
devtools/client/debugger/new/src/components/Editor/Preview/index.js
--- a/devtools/client/debugger/new/src/components/Editor/Preview/index.js
+++ b/devtools/client/debugger/new/src/components/Editor/Preview/index.js
@@ -62,43 +62,39 @@ class Preview extends PureComponent<Prop
     super(props);
     this.state = { selecting: false };
   }
 
   componentDidMount() {
     this.updateListeners();
   }
 
+  componentWillUnmount() {
+    const { codeMirror } = this.props.editor;
+    const codeMirrorWrapper = codeMirror.getWrapperElement();
+
+    codeMirror.off("scroll", this.onScroll);
+    codeMirror.off("tokenenter", this.onTokenEnter);
+    codeMirror.off("tokenleave", this.onTokenLeave);
+    codeMirrorWrapper.removeEventListener("mouseup", this.onMouseUp);
+    codeMirrorWrapper.removeEventListener("mousedown", this.onMouseDown);
+  }
+
   componentDidUpdate(prevProps) {
-    this.updateListeners(prevProps);
     this.updateHighlight(prevProps);
   }
 
   updateListeners(prevProps: ?Props) {
-    const { isPaused } = this.props;
-
     const { codeMirror } = this.props.editor;
     const codeMirrorWrapper = codeMirror.getWrapperElement();
-    const wasNotPaused = !prevProps || !prevProps.isPaused;
-    const wasPaused = prevProps && prevProps.isPaused;
-
-    if (isPaused && wasNotPaused) {
-      codeMirror.on("scroll", this.onScroll);
-      codeMirror.on("tokenenter", this.onTokenEnter);
-      codeMirror.on("tokenleave", this.onTokenLeave);
-      codeMirrorWrapper.addEventListener("mouseup", this.onMouseUp);
-      codeMirrorWrapper.addEventListener("mousedown", this.onMouseDown);
-    }
-
-    if (!isPaused && wasPaused) {
-      codeMirror.off("tokenenter", this.onTokenEnter);
-      codeMirror.off("tokenleave", this.onTokenLeave);
-      codeMirrorWrapper.removeEventListener("mouseup", this.onMouseUp);
-      codeMirrorWrapper.removeEventListener("mousedown", this.onMouseDown);
-    }
+    codeMirror.on("scroll", this.onScroll);
+    codeMirror.on("tokenenter", this.onTokenEnter);
+    codeMirror.on("tokenleave", this.onTokenLeave);
+    codeMirrorWrapper.addEventListener("mouseup", this.onMouseUp);
+    codeMirrorWrapper.addEventListener("mousedown", this.onMouseDown);
   }
 
   updateHighlight(prevProps) {
     const { preview } = this.props;
 
     if (preview && !preview.updating) {
       const target = getElementFromPos(preview.cursorPos);
       target && target.classList.add("preview-selection");
@@ -106,41 +102,51 @@ class Preview extends PureComponent<Prop
 
     if (prevProps.preview && !prevProps.preview.updating) {
       const target = getElementFromPos(prevProps.preview.cursorPos);
       target && target.classList.remove("preview-selection");
     }
   }
 
   onTokenEnter = ({ target, tokenPos }) => {
-    this.props.updatePreview(target, tokenPos, this.props.editor.codeMirror);
+    if (this.props.isPaused) {
+      this.props.updatePreview(target, tokenPos, this.props.editor.codeMirror);
+    }
   };
 
   onTokenLeave = e => {
-    if (!inPopup(e)) {
+    if (this.props.isPaused && !inPopup(e)) {
       this.props.clearPreview();
     }
   };
 
   onMouseUp = () => {
-    this.setState({ selecting: false });
-    return true;
+    if (this.props.isPaused) {
+      this.setState({ selecting: false });
+      return true;
+    }
   };
 
   onMouseDown = () => {
-    this.setState({ selecting: true });
-    return true;
+    if (this.props.isPaused) {
+      this.setState({ selecting: true });
+      return true;
+    }
   };
 
   onScroll = () => {
-    this.props.clearPreview();
+    if (this.props.isPaused) {
+      this.props.clearPreview();
+    }
   };
 
   onClose = e => {
-    this.props.clearPreview();
+    if (this.props.isPaused) {
+      this.props.clearPreview();
+    }
   };
 
   render() {
     const { selectedSource, preview } = this.props;
     if (!this.props.editor || !selectedSource || this.state.selecting) {
       return null;
     }