From f93e5fd1de3a5860c202aeb83c9efd22236ac924 Mon Sep 17 00:00:00 2001 From: Jason Laster Date: Tue, 3 Sep 2019 15:34:02 +0000 Subject: [PATCH] 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 --- .../client/locales/en-US/toolbox.properties | 4 +-- devtools/client/themes/toolbox.css | 12 +++++-- .../webreplay/components/WebReplayPlayer.js | 36 +++++++++++++++++-- 3 files changed, 46 insertions(+), 6 deletions(-) diff --git a/devtools/client/locales/en-US/toolbox.properties b/devtools/client/locales/en-US/toolbox.properties index 576719e8017f..d375e563d3a9 100644 --- a/devtools/client/locales/en-US/toolbox.properties +++ b/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 diff --git a/devtools/client/themes/toolbox.css b/devtools/client/themes/toolbox.css index 34abc184896f..382e20fda201 100644 --- a/devtools/client/themes/toolbox.css +++ b/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); } diff --git a/devtools/client/webreplay/components/WebReplayPlayer.js b/devtools/client/webreplay/components/WebReplayPlayer.js index 8957df8547f4..b2dee5eabe47 100644 --- a/devtools/client/webreplay/components/WebReplayPlayer.js +++ b/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();