9 files changed, 29 insertions, 32 deletions
diff --git a/devtools/client/themes/compatibility.css b/devtools/client/themes/compatibility.css
index 0fd3c7f00d..98739ee81c 100644
--- a/devtools/client/themes/compatibility.css
+++ b/devtools/client/themes/compatibility.css
@@ -105,7 +105,7 @@
 }
 
 .compatibility-issue-item--deprecated::before {
-  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  background-image: url(resource://devtools-shared-images/alert-small.svg);
   fill: var(--theme-icon-warning-color);
 }
 
diff --git a/devtools/client/themes/dark-theme.css b/devtools/client/themes/dark-theme.css
index 4dffefd9cf..8433bc75c4 100644
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -35,7 +35,7 @@ body {
 .cm-s-mozilla .cm-link,
 .cm-editor .tok-link,
 .CodeMirror-Tern-type {
-  color: var(--grey-50);
+  color: var(--grey-45);
 }
 
 /*
@@ -222,7 +222,8 @@ body {
   color: var(--theme-text-color-strong);
 }
 
-.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
+.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor,
+.cm-editor .cm-cursor {
   border-left: solid 1px #fff;
 }
 .cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor.CodeMirror-secondarycursor {
diff --git a/devtools/client/themes/images/alert-small.svg b/devtools/client/themes/images/alert-small.svg
deleted file mode 100644
index 8b9102cae3..0000000000
--- a/devtools/client/themes/images/alert-small.svg
+++ /dev/null
@@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
-  <path fill="context-fill" d="M6 0a1 1 0 0 1 .89.54l5 9.6A1 1 0 0 1 11 11.6H1a1 1 0 0 1-.89-1.46l5-9.6A1 1 0 0 1 6 0zm-.25 8a.75.75 0 0 0-.75.75v.5c0 .41.34.75.75.75h.5c.41 0 .75-.34.75-.75v-.5A.75.75 0 0 0 6.25 8h-.5zM7 3.7a1 1 0 1 0-2 0v2.6a1 1 0 1 0 2 0V3.7z" />
-</svg>
diff --git a/devtools/client/themes/images/info-small.svg b/devtools/client/themes/images/info-small.svg
deleted file mode 100644
index df505d9f14..0000000000
--- a/devtools/client/themes/images/info-small.svg
+++ /dev/null
@@ -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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
-  <path fill="context-fill" fill-opacity=".8" d="M6 1a5 5 0 1 0 0 10A5 5 0 0 0 6 1zM0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6z"/>
-  <path fill="context-fill" d="M7 3.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM5 6.5a1 1 0 0 1 2 0v1.75a1 1 0 0 1-2 0V6.5z"/>
-</svg>
diff --git a/devtools/client/themes/light-theme.css b/devtools/client/themes/light-theme.css
index 2b38926bc3..d54bfffef3 100644
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -213,7 +213,8 @@ body {
   color: var(--theme-body-color);
 }
 
-.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor:not(.CodeMirror-secondarycursor) {
+.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor:not(.CodeMirror-secondarycursor),
+.cm-editor .cm-cursor {
   border-left: solid 1px black;
 }
 
diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css
index 23767acbcf..2e2ba71650 100644
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -572,7 +572,7 @@ html, body, #app, #memory-tool {
   height: 12px;
   max-height: 12px;
   margin-inline-end: 5px;
-  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  background-image: url(resource://devtools-shared-images/alert-small.svg);
   background-repeat: no-repeat;
   background-size: contain;
   -moz-context-properties: fill;
diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css
index 363556732d..72ca35fff7 100644
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -486,12 +486,12 @@
 }
 
 .ruleview-warning {
-  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  background-image: url(resource://devtools-shared-images/alert-small.svg);
   fill: var(--yellow-60);
 }
 
 .ruleview-unused-warning {
-  background-image: url(chrome://devtools/skin/images/info-small.svg);
+  background-image: url(resource://devtools-shared-images/info-small.svg);
   background-color: var(--theme-sidebar-background);
   fill: var(--theme-icon-dimmed-color);
 }
@@ -872,7 +872,7 @@
   -moz-context-properties: fill;
 
   /* Default warning icon */
-  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  background-image: url(resource://devtools-shared-images/alert-small.svg);
   background-size: 10px;
 
   &.slow {
diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css
index 5df6a6143f..91e3e04086 100644
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -284,14 +284,9 @@
   background-image: url(chrome://devtools/skin/images/webconsole/return.svg);
 }
 
-.message.info > .icon {
+.message:is(.info, .disabled) > .icon {
   color: var(--theme-icon-color);
-  background-image: url(chrome://devtools/skin/images/info-small.svg);
-}
-
-.message.disabled > .icon {
-  color: var(--theme-icon-color);
-  background-image: url(chrome://devtools/skin/images/info-small.svg);
+  background-image: url(resource://devtools-shared-images/info-small.svg);
 }
 
 .message.error > .icon {
@@ -301,7 +296,7 @@
 
 .message.warn > .icon {
   color: var(--theme-icon-warning-color);
-  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  background-image: url(resource://devtools-shared-images/alert-small.svg);
 }
 
 .message.navigationMarker > .icon {
@@ -804,15 +799,24 @@ a.learn-more-link.webconsole-learn-more-link {
 }
 
 /* Styles for JavaScript Tracer messages */
-.webconsole-app .jstracer-dom-event {
+.webconsole-app :is(
+   .jstracer-dom-event,
+   .jstracer-dom-mutation,
+   .jstracer-implementation
+ ) {
   padding-inline: 4px;
   margin-inline: 2px;
+}
+.webconsole-app .jstracer-dom-event {
   background-color: var(--toolbarbutton-checked-background);
   color: var(--toolbarbutton-checked-color);
 }
+.webconsole-app .jstracer-dom-mutation {
+  background-color: var(--toolbarbutton-checked-background);
+  color: var(--toolbarbutton-checked-color);
+  margin-inline-end: 4px;
+}
 .webconsole-app .jstracer-implementation {
-  padding-inline: 4px;
-  margin-inline: 2px;
   background-color: var(--theme-toolbarbutton-checked-hover-background);
   color: var(--theme-toolbarbutton-checked-hover-color);
 }
diff --git a/devtools/client/themes/widgets.css b/devtools/client/themes/widgets.css
index 115d10aadd..8f454f557e 100644
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -107,6 +107,10 @@
 .variables-view-container {
   /* Hack: force hardware acceleration */
   transform: translateZ(1px);
+
+  & > scrollbox {
+    overflow: auto;
+  }
 }
 
 .variables-view-empty-notice {