Backed out changeset 977f72dc221a (bug 1578602) dt failures at browser_parsable_css on a CLOSED TREE

devtools/client/debugger/images/moz.build

@@ -38,8 +38,6 @@ 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

@@ -1,7 +0,0 @@
-<!-- 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

@@ -1,6 +0,0 @@
-<!-- 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,18 +285,6 @@ 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
@@ -307,7 +295,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…

devtools/client/themes/toolbox.css

@@ -426,7 +426,10 @@
   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 {
@@ -442,7 +445,7 @@
   --progress-recording-line: #d0021b;
   --progressbar-background: #fff;
   --progressbar-line-color: var(--blue-40);
-  --proggressbar-border-color: var(--theme-splitter-color);
+  --proggressbar-border-color: #bfc9d2;
   --tick-future-background: #bfc9d2;
   --tick-background: var(--blue-50);
   --tick-recording-background: #d0021b;
@@ -462,7 +465,7 @@
   --replaying-marker-location-background: #3084d0;
   --replaying-marker-background-hover: #3a8edb;
   --progressbar-background: #0c0c0d;
-  --proggressbar-border-color: var(--theme-splitter-color);
+  --proggressbar-border-color: #31313d;
   --progressbar-line-color: #0a4786;
   --tick-future-background: #bfc9d2;
   --tick-background: var(--blue-50);
@@ -570,31 +573,31 @@
 
 .webreplay-player .commands {
   display: flex;
-  margin: 0 4px;
 }
 
 .webreplay-player .command-button {
   display: flex;
-  min-width: 20px;
+  min-width: 17px;
+  opacity: 0.7;
 }
 
 .webreplay-player .command-button.primary {
-  min-width: 22px;
+  min-width: 24px;
 }
 
 .webreplay-player .btn {
-  width: 14px;
-  height: 14px;
-  mask-size: 14px;
-  background: var(--theme-icon-color);
+  width: var(--command-button-size);
+  height: var(--command-button-size);
+  mask-size: var(--command-button-size);
+  background: var(--command-button-background);
   align-self: center;
   margin: 0 auto;
 }
 
 .webreplay-player .primary .btn {
-  width: 18px;
-  height: 18px;
-  mask-size: 18px;
+  width: var(--command-button-primary-size);
+  height: var(--command-button-primary-size);
+  mask-size: var(--command-button-primary-size);
 }
 
 .webreplay-player .command-button.active:hover {

devtools/client/webreplay/components/WebReplayPlayer.js

@@ -44,31 +44,26 @@ function log(message) {
   }
 }
 
-function CommandButton({ img, className, onClick, active }) {
+function CommandButton({ img, className, onClick }) {
   const images = {
-    rewind: "replay-resume",
-    resume: "replay-resume",
+    rewind: "resume",
+    resume: "resume",
     next: "next",
     previous: "next",
-    pause: "replay-pause",
-    play: "replay-resume",
+    pause: "pause",
+    play: "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(
-    attrs,
+    {
+      className: `command-button ${className}`,
+      onClick,
+    },
     dom.img({
-      className: `btn ${img} ${className}`,
+      className: `btn ${img}`,
       style: {
         maskImage: `url("${path}/${filename}.svg")`,
       },
@@ -409,25 +404,34 @@ class WebReplayPlayer extends Component {
 
     return [
       CommandButton({
-        className: "",
-        active: paused || recording,
+        className: classname("", { active: paused || recording }),
+        img: "previous",
+        onClick: () => this.previous(),
+      }),
+
+      CommandButton({
+        className: classname("", { active: paused || recording }),
         img: "rewind",
         onClick: () => this.rewind(),
       }),
 
       CommandButton({
-        className: "primary",
-        active: !paused || seeking,
+        className: classname(" primary", { active: !paused || seeking }),
         img: "pause",
         onClick: () => this.pause(),
       }),
 
       CommandButton({
-        className: "",
-        active: paused,
+        className: classname("", { active: paused }),
         img: "resume",
         onClick: () => this.resume(),
       }),
+
+      CommandButton({
+        className: classname("", { active: paused }),
+        img: "next",
+        onClick: () => this.next(),
+      }),
     ];
   }