Bug 1581933 - Hovering on a marker in the timeline should highlight the message in the console. r=bhackett

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

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

devtools/client/themes/webconsole.css

@@ -64,7 +64,8 @@ a {
 
 /* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
  * assertion when loading HTML page with links in XUL iframe */
-*:visited { }
+*:visited {
+}
 
 * {
   box-sizing: border-box;
@@ -144,7 +145,8 @@ a {
   width: 3px;
 }
 
-.message:hover::before {
+.message:hover::before,
+.message.highlight::before {
   background-color: var(--theme-highlight-blue);
 }
 
@@ -562,7 +564,7 @@ html #webconsole-notificationbox {
 }
 
 a.learn-more-link.webconsole-learn-more-link {
-    font-style: normal;
+  font-style: normal;
 }
 
 /*
@@ -835,14 +837,14 @@ a.learn-more-link.webconsole-learn-more-link {
   z-index: 1;
 }
 
-.new-consoletable > [role=gridcell] {
+.new-consoletable > [role="gridcell"] {
   background-color: var(--theme-body-background);
   padding: 3px 4px;
   min-width: 100px;
   color: var(--theme-body-color);
 }
 
-.new-consoletable > [role=gridcell].even {
+.new-consoletable > [role="gridcell"].even {
   background-color: var(--table-zebra-background);
 }
 
@@ -916,7 +918,9 @@ a.learn-more-link.webconsole-learn-more-link {
 /* Use a bigger arrow that is visually similar to other icons (10px) */
 .message.network > .collapse-button::before,
 .message.startGroup > .indent[data-indent="0"] ~ .collapse-button::before,
-.message.startGroupCollapsed > .indent[data-indent="0"] ~ .collapse-button::before {
+.message.startGroupCollapsed
+  > .indent[data-indent="0"]
+  ~ .collapse-button::before {
   width: 100%;
   background-image: url("chrome://devtools/skin/images/arrow-big.svg");
   fill: var(--theme-icon-dimmed-color);
@@ -943,7 +947,7 @@ a.learn-more-link.webconsole-learn-more-link {
 
 .webconsole-app .tree.focused .arrow,
 .webconsole-app .object-inspector .tree-node.focused .arrow {
-  fill: currentColor
+  fill: currentColor;
 }
 
 /** Utils **/

devtools/client/webreplay/components/WebReplayPlayer.js

@@ -134,6 +134,7 @@ class WebReplayPlayer extends Component {
     };
 
     this.lastPaint = null;
+    this.hoveredMessage = null;
     this.overlayWidth = 1;
 
     this.onProgressBarClick = this.onProgressBarClick.bind(this);
@@ -158,7 +159,7 @@ class WebReplayPlayer extends Component {
     this.overlayWidth = this.updateOverlayWidth();
 
     if (prevState.closestMessage != this.state.closestMessage) {
-      this.scrollToMessage();
+      this.scrollToMessage(this.state.closestMessage);
     }
   }
 
@@ -222,7 +223,7 @@ class WebReplayPlayer extends Component {
   }
 
   paint(point) {
-    if (this.lastPaint !== point) {
+    if (point && this.lastPaint !== point) {
       this.lastPaint = point;
       this.threadFront.paint(point);
     }
@@ -316,17 +317,20 @@ class WebReplayPlayer extends Component {
     this.setState({ [direction]: position });
   }
 
-  scrollToMessage() {
-    const { closestMessage } = this.state;
+  findMessage(message) {
+    const consoleOutput = this.console.hud.ui.outputNode;
+    return consoleOutput.querySelector(
+      `.message[data-message-id="${message.id}"]`
+    );
+  }
 
-    if (!closestMessage) {
+  scrollToMessage(message) {
+    if (!message) {
       return;
     }
 
+    const element = this.findMessage(message);
     const consoleOutput = this.console.hud.ui.outputNode;
-    const element = consoleOutput.querySelector(
-      `.message[data-message-id="${closestMessage.id}"]`
-    );
 
     if (element) {
       const consoleHeight = consoleOutput.getBoundingClientRect().height;
@@ -337,8 +341,40 @@ class WebReplayPlayer extends Component {
     }
   }
 
-  onMessageMouseEnter(executionPoint) {
-    return this.paint(executionPoint);
+  async clearPreviewLocation() {
+    const dbg = await this.toolbox.loadTool("jsdebugger");
+    dbg.clearPreviewPausedLocation();
+  }
+
+  unhighlightConsoleMessage() {
+    if (this.hoveredMessage) {
+      this.hoveredMessage.classList.remove("highlight");
+    }
+  }
+
+  highlightConsoleMessage(message) {
+    if (!message) {
+      return;
+    }
+
+    const element = this.findMessage(message);
+    if (!element) {
+      return;
+    }
+
+    this.unhighlightConsoleMessage();
+    element.classList.add("highlight");
+    this.hoveredMessage = element;
+  }
+
+  showMessage(message) {
+    this.highlightConsoleMessage(message);
+    this.scrollToMessage(message);
+    this.paint(message.executionPoint);
+  }
+
+  onMessageMouseEnter(message) {
+    this.showMessage(message);
   }
 
   onProgressBarClick(e) {
@@ -362,10 +398,11 @@ class WebReplayPlayer extends Component {
       return;
     }
 
-    this.paint(closestMessage.executionPoint);
+    this.showMessage(closestMessage);
   }
 
   onPlayerMouseLeave() {
+    this.unhighlightConsoleMessage();
     return this.threadFront.paintCurrentPoint();
   }
 
@@ -569,7 +606,9 @@ class WebReplayPlayer extends Component {
         left: `${Math.max(offset - markerWidth / 2, 0)}px`,
         zIndex: `${index + 100}`,
       },
-      title: getFormatStr("jumpMessage2", frameLocation),
+      title: uncached
+        ? "Loading..."
+        : getFormatStr("jumpMessage2", frameLocation),
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();