4 files changed, 26 insertions, 4 deletions
diff --git a/devtools/client/themes/dark-theme.css b/devtools/client/themes/dark-theme.css
index 8433bc75c4..cd1b58e36e 100644
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -261,12 +261,16 @@ div.CodeMirror span.marked-text {
 }
 
 
-.cm-s-mozilla .empty-line .CodeMirror-linenumber {
+.cm-s-mozilla .empty-line .CodeMirror-linenumber,
+/* Codemirror 6 */
+.cm-editor .cm-gutterElement.empty-line {
   color: var(--grey-50);
 }
 
 /* Blackboxing lines */
-.CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt) {
+.CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt),
+/* Codemirror 6 */
+.cm-gutterElement.blackboxed-line, .cm-line.blackboxed-line span[class^="tok-"] {
   color: #806414cc;
 }
 
diff --git a/devtools/client/themes/images/whatsnew.svg b/devtools/client/themes/images/whatsnew.svg
new file mode 100644
index 0000000000..b77d0165a6
--- /dev/null
+++ b/devtools/client/themes/images/whatsnew.svg
@@ -0,0 +1,10 @@
+<!-- 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" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M2 13.76A1.23 1.23 0 0 0 3.24 15H7V9H2z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M9 9v6h3.76A1.23 1.23 0 0 0 14 13.76V9H9z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M1 5v3h6V4H2a1 1 0 0 0-1 1z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 4H9v4h6V5a1 1 0 0 0-1-1z"/>
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M10.05.41A1.34 1.34 0 0 0 8 1a1.35 1.35 0 0 0-2-.59C5.2 1.08 4.91 2.48 8 4c3.09-1.52 2.8-2.92 2.05-3.59z"/>
+</svg>
diff --git a/devtools/client/themes/light-theme.css b/devtools/client/themes/light-theme.css
index d54bfffef3..979999bd31 100644
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -248,12 +248,16 @@ div.CodeMirror span.marked-text {
   margin-inline-end: -1px;
 }
 
-.cm-s-mozilla .empty-line .CodeMirror-linenumber {
+.cm-s-mozilla .empty-line .CodeMirror-linenumber,
+/* Codemirror 6 */
+.cm-editor .cm-gutterElement.empty-line {
   color: var(--grey-40);
 }
 
 /* Blackboxing lines */
-.CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt) {
+.CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt),
+/* Codemirror 6 */
+.cm-gutterElement.blackboxed-line, .cm-line.blackboxed-line span[class^="tok-"] {
   color: #806414cc;
 }
 
diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css
index 72ca35fff7..c3079e3d62 100644
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -825,6 +825,10 @@
   cursor: text;
 }
 
+.ruleview-variable {
+  color: var(--theme-highlight-blue);
+}
+
 .ruleview-selector-separator,
 .ruleview-selector.unmatched,
 .ruleview-unmatched-variable,