Bug 1504025 - Fixed replay line indicator to display properly r=jlast

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

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

devtools/client/themes/webconsole.css

@@ -130,6 +130,16 @@ a {
   border-bottom-width: 0;
 }
 
+.can-rewind .webconsole-output .message:last-of-type {
+  border-bottom: 1px solid var(--purple-50);
+}
+
+.can-rewind .webconsole-output .paused ~ .message:last-of-type,
+.can-rewind .webconsole-output .paused:last-of-type {
+  border-bottom-width: 0;
+}
+
+
 /*
  * By default, prevent any element in message to overflow.
  * We exclude network messages as it may cause issues in the network detail panel.
@@ -164,7 +174,8 @@ a {
 }
 
 .message.paused.paused-before {
-  border-top-color: var(--purple-50);
+  border-top: 1px solid var(--purple-50);
+  margin-top: 0px;
 }
 
 .message.paused:not(.paused-before) {
@@ -178,6 +189,11 @@ a {
   opacity: 0.5;
 }
 
+.message.paused.paused-before .message-body-wrapper,
+.message.paused.paused-before > .icon {
+  margin-top: calc(var(--console-output-vertical-padding) - 1px);
+}
+
 .message.startGroup,
 .message.startGroupCollapsed {
   --console-indent-border-color: transparent;

devtools/client/webconsole/components/App.js

@@ -361,12 +361,15 @@ class App extends Component {
   }
 
   renderRootElement(children) {
-    const { editorMode, editorFeatureEnabled } = this.props;
+    const { editorMode, editorFeatureEnabled, serviceContainer } = this.props;
 
     const classNames = ["webconsole-app"];
     if (editorMode && editorFeatureEnabled) {
       classNames.push("jsterm-editor");
     }
+    if (serviceContainer.canRewind()) {
+      classNames.push("can-rewind");
+    }
 
     return div(
       {