Bug 1578252 - Highlight messages that are at the same location. r=bhackett

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

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

devtools/client/locales/en-US/toolbox.properties

@@ -281,9 +281,9 @@ toolbox.debugTargetInfo.targetType.worker=Worker
 # appears to be taking a while to do so.
 browserToolbox.statusMessage=Browser Toolbox connection status:
 
-# LOCALIZATION NOTE (toolbox.replay.jumpMessage): This is the label
+# LOCALIZATION NOTE (toolbox.replay.jumpMessage2): This is the label
 # shown in the web replay timeline marker
-toolbox.replay.jumpMessage=Jump to message %1$S
+toolbox.replay.jumpMessage2=Jump to %1$S
 
 # LOCALIZATION NOTE (toolbox.debugTargetErrorPage.title): This is the title
 # for the Error view shown by the toolbox when a connection to a debug target

devtools/client/themes/toolbox.css

@@ -437,8 +437,10 @@
   --progress-recording-background: hsl(0, 100%, 97%);
   --progress-playing-background: hsl(207, 100%, 97%);
   --recording-marker-background: hsl(14.9, 100%, 67%);
-  --recording-marker-background-hover: hsl(14.9, 100%, 47%);
   --replaying-marker-background: var(--blue-40);
+  --replaying-marker-highlighted-background: var(--blue-60);
+  --replaying-marker-location-background: var(--blue-50);
+  --recording-marker-background-hover: hsl(14.9, 100%, 47%);
   --replaying-marker-background-hover: var(--blue-60);
   --progress-recording-line: #d0021b;
   --progressbar-background: #fff;
@@ -459,6 +461,8 @@
   --recording-marker-background: #9b3131;
   --recording-marker-background-hover: #a82323;
   --replaying-marker-background: #266fb1;
+  --replaying-marker-highlighted-background: #3084d0;
+  --replaying-marker-location-background: #3084d0;
   --replaying-marker-background-hover: #3a8edb;
   --progressbar-background: #0c0c0d;
   --proggressbar-border-color: #31313d;
@@ -529,7 +533,7 @@
 }
 
 .webreplay-player .message.highlighted {
-  background-color: var(--blue-60);
+  background-color: var(--replaying-marker-highlighted-background);
   transform: scale(1.25);
   transition-duration: 100ms;
 }
@@ -538,6 +542,10 @@
   opacity: 0.5;
 }
 
+.webreplay-player .message.location {
+  background: var(--replaying-marker-location-background);
+}
+
 .webreplay-player .recording .message.highlighted {
   background-color: var(--recording-marker-background-hover);
 }

devtools/client/webreplay/components/WebReplayPlayer.js

@@ -9,6 +9,12 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { sortBy, range } = require("devtools/client/shared/vendor/lodash");
 
+ChromeUtils.defineModuleGetter(
+  this,
+  "pointEquals",
+  "resource://devtools/shared/execution-point-utils.js"
+);
+
 const { LocalizationHelper } = require("devtools/shared/l10n");
 const L10N = new LocalizationHelper(
   "devtools/client/locales/toolbox.properties"
@@ -81,6 +87,15 @@ function getClosestMessage(messages, executionPoint) {
   )[0];
 }
 
+function sameLocation(m1, m2) {
+  const f1 = m1.frame;
+  const f2 = m2.frame;
+
+  return (
+    f1.source === f2.source && f1.line === f2.line && f1.column === f2.column
+  );
+}
+
 /*
  *
  * The player has 4 valid states
@@ -186,6 +201,10 @@ class WebReplayPlayer extends Component {
         executionPoint
       );
 
+      const pausedMessage = this.state.messages.find(message =>
+        pointEquals(message.executionPoint, executionPoint)
+      );
+
       this.setState({
         executionPoint,
         recordingEndpoint,
@@ -193,12 +212,13 @@ class WebReplayPlayer extends Component {
         seeking: false,
         recording: false,
         closestMessage,
+        pausedMessage,
       });
     }
   }
 
   onResumed(packet) {
-    this.setState({ paused: false, closestMessage: null });
+    this.setState({ paused: false, closestMessage: null, pausedMessage: null });
   }
 
   onProgress(packet) {
@@ -469,6 +489,7 @@ class WebReplayPlayer extends Component {
     const {
       messages,
       executionPoint,
+      pausedMessage,
       highlightedMessage,
       cachedPoints,
     } = this.state;
@@ -499,18 +520,29 @@ class WebReplayPlayer extends Component {
       message.executionPoint &&
       !cachedPoints.includes(message.executionPoint.progress);
 
+    const atPausedLocation =
+      pausedMessage && sameLocation(pausedMessage, message);
+
+    const { source, line, column } = message.frame;
+    const filename = source.split("/").pop();
+    let frameLocation = `${filename}:${line}`;
+    if (column > 100) {
+      frameLocation += `:${column}`;
+    }
+
     return dom.a({
       className: classname("message", {
         overlayed: isOverlayed,
         future: isFuture,
         highlighted: isHighlighted,
         uncached,
+        location: atPausedLocation,
       }),
       style: {
         left: `${Math.max(offset - markerWidth / 2, 0)}px`,
         zIndex: `${index + 100}`,
       },
-      title: getFormatStr("jumpMessage", index + 1),
+      title: getFormatStr("jumpMessage2", frameLocation),
       onClick: e => {
         e.preventDefault();
         e.stopPropagation();