Bug 1578602 - Update buttons ux. r=bhackett

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

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

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',

devtools/client/debugger/images/replay-pause.svg

@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5 2.5V13.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M4.5 2.5V13.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

devtools/client/debugger/images/replay-resume.svg

@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 13.5329V2.46713C4 2.26746 4.22254 2.14836 4.38868 2.25912L12.688 7.79199C12.8364 7.89094 12.8364 8.10906 12.688 8.20801L4.38868 13.7409C4.22254 13.8516 4 13.7325 4 13.5329Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

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

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 {

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(),
-      }),
     ];
   }