diff --git a/devtools/client/debugger/images/moz.build b/devtools/client/debugger/images/moz.build index 7e1a04f2425e..4d2751d5e086 100644 --- a/devtools/client/debugger/images/moz.build +++ b/devtools/client/debugger/images/moz.build @@ -38,6 +38,8 @@ DevToolsModules( 'prettyPrint.svg', 'regex-match.svg', 'reload.svg', + 'replay-pause.svg', + 'replay-resume.svg', 'resume.svg', 'rewind.svg', 'search.svg', diff --git a/devtools/client/debugger/images/replay-pause.svg b/devtools/client/debugger/images/replay-pause.svg new file mode 100644 index 000000000000..8fca84a582e1 --- /dev/null +++ b/devtools/client/debugger/images/replay-pause.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/devtools/client/debugger/images/replay-resume.svg b/devtools/client/debugger/images/replay-resume.svg new file mode 100644 index 000000000000..cf2158faf66f --- /dev/null +++ b/devtools/client/debugger/images/replay-resume.svg @@ -0,0 +1,6 @@ + + + + diff --git a/devtools/client/locales/en-US/toolbox.properties b/devtools/client/locales/en-US/toolbox.properties index d375e563d3a9..55c585cf0fde 100644 --- a/devtools/client/locales/en-US/toolbox.properties +++ b/devtools/client/locales/en-US/toolbox.properties @@ -285,6 +285,18 @@ browserToolbox.statusMessage=Browser Toolbox connection status: # shown in the web replay timeline marker toolbox.replay.jumpMessage2=Jump to %1$S +# LOCALIZATION NOTE (toolbox.replay.resume): This is the text that appears in the +# Replay command bar to prompt the user to resume the program. +toolbox.replay.resume=Resume + +# LOCALIZATION NOTE (toolbox.replay.rewind): This is the text that appears in the +# Replay command bar to prompt the user to rewind the program. +toolbox.replay.rewind=Rewind + +# LOCALIZATION NOTE (toolbox.replay.pause): This is the text that appears in the +# Replay command bar to prompt the user to pause the program. +toolbox.replay.pause=Pause + # LOCALIZATION NOTE (toolbox.debugTargetErrorPage.title): This is the title # for the Error view shown by the toolbox when a connection to a debug target # could not be made @@ -295,7 +307,7 @@ toolbox.debugTargetErrorPage.title = Error # has happened while trying to connect to a debug target toolbox.debugTargetErrorPage.description = Cannot connect to the debug target. See error details below: -# LOCALIZATION NOTE (options.deprecationNotice): This is the text that appears in the +# LOCALIZATION NOTE (options.deprecationNotice): This is the text that appears in the # settings panel for panel that will be removed in future releases. # This entire text is treated as a link to an MDN page. options.deprecationNotice=Deprecated. Learn More… diff --git a/devtools/client/themes/toolbox.css b/devtools/client/themes/toolbox.css index 382e20fda201..83e4f9930465 100644 --- a/devtools/client/themes/toolbox.css +++ b/devtools/client/themes/toolbox.css @@ -426,10 +426,7 @@ border-bottom: 1px solid var(--theme-splitter-color); box-sizing: border-box; min-height: 29px; - --progressbar-transition: 200ms; - --command-button-size: 14px; - --command-button-primary-size: 20px; } .theme-light .webreplay-player { @@ -445,12 +442,11 @@ --progress-recording-line: #d0021b; --progressbar-background: #fff; --progressbar-line-color: var(--blue-40); - --proggressbar-border-color: #bfc9d2; + --proggressbar-border-color: var(--theme-splitter-color); --tick-future-background: #bfc9d2; --tick-background: var(--blue-50); --tick-recording-background: #d0021b; --replay-head-background: var(--purple-50); - --command-button-background: #6a6a6a; } .theme-dark .webreplay-player { @@ -465,13 +461,12 @@ --replaying-marker-location-background: #3084d0; --replaying-marker-background-hover: #3a8edb; --progressbar-background: #0c0c0d; - --proggressbar-border-color: #31313d; + --proggressbar-border-color: var(--theme-splitter-color); --progressbar-line-color: #0a4786; --tick-future-background: #bfc9d2; --tick-background: var(--blue-50); --tick-recording-background: #e77884; --replay-head-background: var(--theme-highlight-purple); - --command-button-background: var(--grey-20); } .webreplay-player .overlay-container { @@ -573,31 +568,31 @@ .webreplay-player .commands { display: flex; + margin: 0 4px; } .webreplay-player .command-button { display: flex; - min-width: 17px; - opacity: 0.7; + min-width: 20px; } .webreplay-player .command-button.primary { - min-width: 24px; + min-width: 22px; } .webreplay-player .btn { - width: var(--command-button-size); - height: var(--command-button-size); - mask-size: var(--command-button-size); - background: var(--command-button-background); + width: 14px; + height: 14px; + mask-size: 14px; + background: var(--theme-icon-color); align-self: center; margin: 0 auto; } .webreplay-player .primary .btn { - width: var(--command-button-primary-size); - height: var(--command-button-primary-size); - mask-size: var(--command-button-primary-size); + width: 18px; + height: 18px; + mask-size: 18px; } .webreplay-player .command-button.active:hover { diff --git a/devtools/client/webreplay/components/WebReplayPlayer.js b/devtools/client/webreplay/components/WebReplayPlayer.js index b2dee5eabe47..18815b721f4f 100644 --- a/devtools/client/webreplay/components/WebReplayPlayer.js +++ b/devtools/client/webreplay/components/WebReplayPlayer.js @@ -44,26 +44,31 @@ function log(message) { } } -function CommandButton({ img, className, onClick }) { +function CommandButton({ img, className, onClick, active }) { const images = { - rewind: "resume", - resume: "resume", + rewind: "replay-resume", + resume: "replay-resume", next: "next", previous: "next", - pause: "pause", - play: "resume", + pause: "replay-pause", + play: "replay-resume", }; const filename = images[img]; const path = filename == "next" ? imgChrome : imgResource; + const attrs = { + className: classname(`command-button ${className}`, { active }), + onClick, + }; + + if (active) { + attrs.title = L10N.getStr(`toolbox.replay.${img}`); + } return dom.div( - { - className: `command-button ${className}`, - onClick, - }, + attrs, dom.img({ - className: `btn ${img}`, + className: `btn ${img} ${className}`, style: { maskImage: `url("${path}/${filename}.svg")`, }, @@ -404,34 +409,25 @@ class WebReplayPlayer extends Component { return [ CommandButton({ - className: classname("", { active: paused || recording }), - img: "previous", - onClick: () => this.previous(), - }), - - CommandButton({ - className: classname("", { active: paused || recording }), + className: "", + active: paused || recording, img: "rewind", onClick: () => this.rewind(), }), CommandButton({ - className: classname(" primary", { active: !paused || seeking }), + className: "primary", + active: !paused || seeking, img: "pause", onClick: () => this.pause(), }), CommandButton({ - className: classname("", { active: paused }), + className: "", + active: paused, img: "resume", onClick: () => this.resume(), }), - - CommandButton({ - className: classname("", { active: paused }), - img: "next", - onClick: () => this.next(), - }), ]; }