Adding upstream version 115.8.0esr.upstream/115.8.0esr

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

184 files changed, 13303 insertions, 0 deletions

diff --git a/devtools/client/themes/aboutprofiling.css b/devtools/client/themes/aboutprofiling.css
new file mode 100644
index 0000000000..c403e86b02
--- /dev/null
+++ b/devtools/client/themes/aboutprofiling.css
@@ -0,0 +1,185 @@
+/* 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/. */
+
+.perf {
+  max-width: 670px;
+  margin: 10vh auto;
+  padding: 0 5%;
+}
+
+/* This styling was originally taken from the about:preferences page. */
+h1 {
+  margin: 0 0 8px;
+  font-size: 1.46em;
+  font-weight: 300;
+  line-height: 1.3em;
+}
+
+/* This styling was originally taken from the about:preferences page. */
+h2 {
+  /* This margin was enlarged */
+  margin: 30px 0 15px;
+  font-size: 1.14em;
+  line-height: normal;
+}
+
+/* Intro */
+
+.perf-intro-row {
+  margin: 1.7em 0;
+  display: flex;
+  line-height: 1.8em;
+  align-items: center;
+}
+
+.perf-intro-icon {
+  width: 4em;
+  height: 4em;
+  margin-inline-end: 1.3em;
+  background-image: url(chrome://devtools/skin/images/tool-profiler.svg);
+  background-size: 100%;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  opacity: 0.5;
+}
+
+/* Shared rules */
+
+.perf-toggle-label {
+  padding: 7px 0;
+  display: grid;
+  grid-template-columns: max-content auto;
+  max-width: max-content;
+}
+
+.perf-toggle-text-label {
+  display: flex;
+  align-items: center;
+}
+
+.perf-toggle-description {
+  font-size: 13px;
+  line-height: 1.8;
+  color: var(--text-color-deemphasized);
+  grid-column: 2;
+}
+
+/* Presets section */
+
+.perf-presets {
+  margin: 2em 0;
+  border-bottom: 1px solid var(--in-content-border-color);
+  padding-bottom: 1em;
+}
+
+/* Features and settings */
+
+.perf-settings-row {
+  display: flex;
+  line-height: 1.8;
+}
+
+.perf-settings-range-row {
+  display: grid;
+  grid-template-columns: 140px 1fr 90px;
+  align-items: center;
+  min-height: 30px;
+}
+
+.perf-settings-range-input {
+  margin: 0;
+}
+
+.perf-settings-range-value {
+  text-align: end;
+}
+
+.perf-settings-thread-columns {
+  display: flex;
+  line-height: 1.3;
+}
+
+.perf-settings-thread-column {
+  flex: 1;
+}
+
+.perf-settings-thread-label {
+  margin-block: 12px;
+}
+
+.perf-settings-all-threads {
+  margin-block: 12px;
+}
+
+.perf-settings-text-label {
+  flex: 1;
+}
+
+.perf-settings-text-input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+#perftools-settings-thread-text {
+  margin-inline: 0;
+}
+
+.perf-settings-checkbox-label-disabled > :not(input) {
+  /* The checkboxes already get their opacity set to 0.5 in common.inc.css,
+     so only target the text. The descriptions get their text deemphasized,
+     so set a value a bit higher than 0.5 to compensate for that. */
+  opacity: 0.65;
+}
+
+/* Local build section */
+
+.perf-settings-dir-list {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100px;
+  border: 1px solid var(--in-content-border-color);
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  background-color: var(--in-content-box-background);
+}
+
+.perf-settings-dir-list:hover {
+  border-color: var(--in-content-border-hover);
+}
+
+.pref-settings-dir-list-item {
+  display: flex;
+  padding: 3px 5px;
+}
+
+.pref-settings-dir-list-item::before {
+  content: url(chrome://devtools/skin/images/folder.svg);
+  display: inline-flex;
+  align-self: center;
+  width: 12px;
+  height: 12px;
+  margin-inline-end: 5px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.perf-settings-dir-list-button-group {
+  padding-block: 4px;
+}
+
+.perf-settings-dir-list-button-group > button {
+  margin-inline: 0 8px;
+}
+
+/* Back button */
+
+.perf-back {
+  margin-block-end: 13px;
+}
+
+.perf-back-button {
+  /* Remove the inherited margins */
+  margin-inline: 0;
+}
diff --git a/devtools/client/themes/accessibility-color-contrast.css b/devtools/client/themes/accessibility-color-contrast.css
new file mode 100644
index 0000000000..a612b0832e
--- /dev/null
+++ b/devtools/client/themes/accessibility-color-contrast.css
@@ -0,0 +1,77 @@
+/* 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/. */
+
+/* Classes used to style the color contrast section in the Accessibility
+ * Checks panel and color picker tooltip across the Inspector panel.
+ *
+ * The section consists of:
+ *   - contrast ratio value (numeric + score badge (AA/AAA/FAIL)):
+ *       Only shows up if contrast ratio can be calculated.
+ *   - large text indicator badge:
+ *       Only shows up if the selected text node contains large text.
+ */
+.accessibility-color-contrast {
+  position: relative;
+  display: flex;
+  cursor: default;
+  height: inherit;
+  align-items: baseline;
+}
+
+.accessibility-color-contrast .accessibility-contrast-value:empty:after {
+  display: none;
+}
+
+.accessibility-color-contrast .accessibility-contrast-value:after {
+  margin-inline-start: 4px;
+}
+
+.accessibility-color-contrast
+  .accessibility-contrast-value.AA:after,
+.accessibility-color-contrast
+  .accessibility-contrast-value.AAA:after {
+  color: var(--theme-highlight-green);
+}
+
+.accessibility-color-contrast
+  .accessibility-contrast-value.FAIL:after {
+  color: var(--theme-icon-error-color);
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  content: "";
+  vertical-align: -2px;
+  background-image: url(chrome://devtools/skin/images/error-small.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.accessibility-color-contrast
+  .accessibility-contrast-value.AA:after {
+  content: "AA\2713";
+  unicode-bidi: isolate;
+}
+
+.accessibility-color-contrast
+  .accessibility-contrast-value.AAA:after {
+  content: "AAA\2713";
+  unicode-bidi: isolate;
+}
+
+.accessibility-color-contrast .accessibility-color-contrast-separator:before {
+  content: "–";
+  margin-inline-start: 4px;
+}
+
+.accessibility-color-contrast-large-text {
+  background-color: var(--badge-background-color);
+  color: var(--badge-color);
+  outline: 1px solid var(--badge-border-color);
+  padding: 0px 2px;
+  margin-inline-start: 6px;
+  line-height: initial;
+  user-select: none;
+}
diff --git a/devtools/client/themes/animation.css b/devtools/client/themes/animation.css
new file mode 100644
index 0000000000..b6b581bc3e
--- /dev/null
+++ b/devtools/client/themes/animation.css
@@ -0,0 +1,754 @@
+/* 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/. */
+
+/* Animation-inspector specific theme variables */
+
+:root {
+  --animation-item-hover-color: rgba(215, 215, 219, 0.4);
+  --animation-item-selected-color: rgba(215, 215, 219, 0.9);
+  --cssanimation-color: var(--purple-50);
+  --csstransition-color: var(--blue-55);
+  --fast-track-image: url("images/animation-fast-track.svg");
+  --graph-height: 30px;
+  --graph-right-offset: 10px;
+  --keyframe-marker-shadow-color: #c4c4c4;
+  --pause-image: url(chrome://devtools/skin/images/pause.svg);
+  --progress-bar-color: var(--grey-40);
+  --resume-image: url(chrome://devtools/skin/images/play.svg);
+  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
+  --scriptanimation-color: var(--green-60);
+  --scrubber-color: var(--magenta-65);
+  --sidebar-width: 200px;
+  --tick-line-style: 0.5px solid var(--theme-splitter-color);
+}
+
+:root.theme-dark {
+  --animation-item-hover-color: rgba(74, 74, 79, 0.5);
+  --animation-item-selected-color: var(--grey-60);
+  --csstransition-color: var(--blue-50);
+  --keyframe-marker-shadow-color: #818181;
+  --progress-bar-color: var(--grey-50);
+  --scrubber-color: var(--magenta-50);
+}
+
+#animationinspector-panel {
+  overflow-x: auto;
+}
+
+/* Root element of animation inspector */
+#animation-container {
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  outline: none;
+  min-width: var(--min-container-width);
+}
+
+#animation-container .uncontrolled {
+  overflow: hidden;
+}
+
+#animation-container:not(.animation-detail-visible) .controlled {
+  display: none;
+}
+
+#animation-container .animation-container-splitter {
+  overflow: hidden;
+}
+
+/* Animation Toolbar */
+.animation-toolbar {
+  display: flex;
+}
+
+.pause-resume-button::before {
+  background-image: var(--pause-image);
+}
+
+.pause-resume-button.paused::before {
+  background-image: var(--resume-image);
+}
+
+select.playback-rate-selector.devtools-button {
+  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  background-position: calc(100% - 4px) center;
+  background-repeat: no-repeat;
+  padding-inline-end: 1em;
+  text-align: center;
+}
+
+select.playback-rate-selector.devtools-button:not(:empty, :disabled, .checked):hover {
+  background: none;
+  background-color: var(--toolbarbutton-background);
+  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  background-position: calc(100% - 4px) center;
+  background-repeat: no-repeat;
+  border-color: var(--toolbarbutton-hover-border-color);
+}
+
+.rewind-button::before {
+  background-image: var(--rewind-image);
+}
+
+/* Animation List Container */
+.animation-list-container {
+  overflow: hidden;
+  width: 100%;
+  user-select: none;
+}
+
+.animation-list-container.active-scrubber,
+.animation-list-container.active-scrubber .animation-summary-graph {
+  cursor: col-resize;
+}
+
+/* Current Time Scrubber */
+.current-time-scrubber-area {
+  grid-column: 2 / 3;
+  position: relative;
+  z-index: 2;
+}
+
+.current-time-scrubber-area::before {
+  content: "";
+  cursor: col-resize;
+  height: var(--theme-toolbar-height);
+  pointer-events: auto;
+  position: absolute;
+  /* In order to click on edge of current-time-scrubber-controller element */
+  width: calc(100% + 1px);
+}
+
+.current-time-scrubber-area:dir(rtl)::before {
+  /* In order to click on the start edge of current-time-scrubber-area element on RTL */
+  margin-inline-start: -1px;
+}
+
+.indication-bar.current-time-scrubber {
+  cursor: col-resize;
+  pointer-events: auto;
+}
+
+.indication-bar.current-time-scrubber:dir(rtl)::before {
+  transform: translateX(6px);
+}
+
+.indication-bar.current-time-scrubber:dir(rtl)::after {
+  transform: translateX(1px);
+}
+
+.indication-bar.current-time-scrubber::before {
+  border-top-color: var(--scrubber-color);
+}
+
+.indication-bar.current-time-scrubber::after {
+  background-color: var(--scrubber-color);
+}
+
+/* Animation Item */
+.animation-item.cssanimation {
+  --graph-color: var(--cssanimation-color);
+  --graph-opacity: 0.7;
+}
+
+.animation-item.csstransition {
+  --graph-color: var(--csstransition-color);
+  --graph-opacity: 0.8;
+}
+
+.animation-item.scriptanimation {
+  --graph-color: var(--scriptanimation-color);
+  --graph-opacity: 0.5;
+}
+
+.animation-item:hover {
+  background-color: var(--animation-item-hover-color);
+}
+
+.animation-item.selected {
+  background-color: var(--animation-item-selected-color);
+}
+
+/* Animation Target */
+.animation-target {
+  align-items: center;
+  display: flex;
+  grid-column: 1 / 2;
+  height: inherit;
+  padding-inline-start: 4px;
+  /* animation-target is tech term, so it should be displayed as ltr. */
+  direction: ltr;
+}
+
+.animation-item:dir(rtl).animation-target {
+  right:0;
+}
+
+/* Reps component */
+.animation-target .objectBox {
+  display: flex;
+  max-width: 100%;
+}
+
+.animation-target .objectBox .attrName {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.animation-target .objectBox .highlight-node {
+  fill: var(--theme-icon-dimmed-color);
+  flex: none;
+}
+
+.animation-target .objectBox .highlight-node:hover{
+  fill: var(--theme-icon-color);
+}
+
+.animation-target .objectBox .highlight-node:active,
+.animation-target.highlighting .objectBox .highlight-node {
+  fill: var(--theme-icon-checked-color);
+  /* Since the icon is quite thin, it can be hard to differentiate it
+     from its regular state. Adding some background helps make it pop a bit */
+  background-color: var(--dimmed-highlighter-box-content-color);
+}
+
+/* Summary Graph */
+.animation-summary-graph {
+  cursor: pointer;
+  grid-column: 2 / 3;
+  height: inherit;
+  padding-bottom: 3px;
+  padding-top: 3px;
+  position: relative;
+}
+
+.animation-summary-graph.compositor::after {
+  background-image: var(--fast-track-image);
+  background-repeat: no-repeat;
+  content: "";
+  display: block;
+  fill: var(--theme-icon-dimmed-color);
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 5px;
+  width: 15px;
+  -moz-context-properties: fill;
+}
+
+.animation-summary-graph.compositor:dir(rtl)::after {
+  right: unset;
+  left: 0;
+}
+
+.animation-summary-graph-path {
+  height: 100%;
+  width: 100%;
+}
+
+.animation-summary-graph:dir(rtl) .animation-summary-graph-path {
+  transform: scaleX(-1.0);
+}
+
+.animation-computed-timing-path path {
+  fill: var(--graph-color);
+  fill-opacity: var(--graph-opacity);
+  stroke: var(--graph-color);
+  vector-effect: non-scaling-stroke;
+  transform: scale(1, -1);
+}
+
+.animation-computed-timing-path path.infinity:nth-child(n+2) {
+  opacity: 0.3;
+}
+
+.animation-effect-timing-path path {
+  fill: none;
+  stroke: var(--graph-color);
+  stroke-dasharray: 2px 2px;
+  transform: scale(1, -1);
+  vector-effect: non-scaling-stroke;
+}
+
+.animation-effect-timing-path path.infinity:nth-child(n+2) {
+  opacity: 0.3;
+}
+
+.animation-computed-timing-path path.infinity-duration,
+.animation-effect-timing-path path.infinity-duration {
+  mask-clip: stroke-box;
+  mask-image: linear-gradient(90deg, black, transparent);
+  mask-origin: stroke-box;
+}
+
+.animation-negative-delay-path path,
+.animation-negative-end-delay-path path {
+  fill: none;
+  stroke: var(--theme-graphs-grey);
+  stroke-dasharray: 2px 2px;
+  transform: scale(1, -1);
+  vector-effect: non-scaling-stroke;
+}
+
+.animation-delay-sign,
+.animation-end-delay-sign {
+  background-color: var(--theme-graphs-grey);
+  height: 3px;
+  position: absolute;
+  bottom: 2px;
+}
+
+.animation-delay-sign::before,
+.animation-end-delay-sign::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: "";
+  height: 6px;
+  position: absolute;
+  top: -1.5px;
+  width: 6px;
+}
+
+.animation-delay-sign.fill,
+.animation-end-delay-sign.fill {
+  background-color: var(--graph-color);
+}
+
+/* These are delay sign directions. Basically, we can't use
+  the transform due to pseudo element, So we use the left/right align. */
+
+.animation-delay-sign:dir(ltr)::before {
+  left: -3px;
+  right: unset;
+}
+
+.animation-delay-sign:dir(rtl)::before {
+  left: unset;
+  right: -3px;
+}
+
+.animation-delay-sign.negative:dir(ltr)::before {
+  left: unset;
+  right: -3px;
+}
+
+.animation-delay-sign.negative:dir(rtl)::before {
+  left: -3px;
+  right: unset;
+}
+
+.animation-end-delay-sign:dir(ltr)::before {
+  left: unset;
+  right: -3px;
+}
+
+.animation-end-delay-sign:dir(rtl)::before {
+  left: -3px;
+  right: unset;
+}
+
+.animation-end-delay-sign.negative:dir(ltr)::before {
+  left: -3px;
+  right: unset;
+}
+.animation-end-delay-sign.negative:dir(rtl)::before {
+  left: unset;
+  right: -3px;
+}
+
+.animation-name {
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: calc(100% - 20px);
+}
+
+.animation-name text {
+  dominant-baseline: middle;
+  fill: var(--theme-focus-outline-color);
+  paint-order: stroke;
+  stroke: var(--theme-body-background);
+  stroke-linejoin: round;
+  stroke-opacity: .5;
+  stroke-width: 4;
+  text-anchor: end;
+}
+
+.animation-summary-graph:dir(rtl) .animation-name text {
+  transform: translateX(-100%);
+}
+
+.animation-summary-graph:dir(rtl) .animation-name {
+  right:0;
+}
+
+/* Animation Detail */
+.animation-detail-container {
+  background-color: var(--theme-sidebar-background);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  width: 100%;
+  z-index: 2;
+}
+
+.animation-detail-header {
+  display: flex;
+  padding-inline-end: 0;
+}
+
+/* On OSX the cursor turns into a window-resizing cursor at the edges of the
+ * window, so bring the end of the close button in. */
+:root[platform="mac"] .animation-detail-header {
+  padding-inline-end: 2px;
+}
+
+.animation-detail-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.animation-detail-close-button {
+  margin: 0;
+}
+
+.animation-detail-close-button::before {
+  background-image: url(chrome://devtools/skin/images/close.svg);
+}
+
+/* Animated Property List Container */
+.animated-property-list-container {
+  flex: 1;
+  overflow: hidden;
+  user-select: none;
+}
+
+/* Keyframes Progress Bar */
+.keyframes-progress-bar-area {
+  background: none;
+  grid-column: 2 / 3;
+  pointer-events: none;
+  position: relative;
+  z-index: 2;
+}
+
+.indication-bar.keyframes-progress-bar::before {
+  border-top-color: var(--progress-bar-color);
+}
+
+.indication-bar.keyframes-progress-bar::after {
+  background-color: var(--progress-bar-color);
+}
+
+/* Animated Property Item */
+.animated-property-item.unchanged {
+  opacity: 0.6;
+}
+
+/* Animated Property Name */
+.animated-property-name {
+  align-items: center;
+  display: flex;
+  height: inherit;
+  justify-content: flex-end;
+  padding-inline-end: 10px;
+}
+
+.animated-property-name.compositor span {
+  padding-inline-start: 15px;
+  position: relative;
+}
+
+.animated-property-list-container.cssanimation .animated-property-name.compositor {
+  --fast-track-color: var(--cssanimation-color);
+}
+
+.animated-property-list-container.csstransition .animated-property-name.compositor {
+  --fast-track-color: var(--csstransition-color);
+}
+
+.animated-property-list-container.scriptanimation .animated-property-name.compositor {
+  --fast-track-color: var(--scriptanimation-color);
+}
+
+.animated-property-name.compositor span:dir(ltr)::before,
+.animated-property-name.compositor span:dir(rtl)::after {
+  background-image: var(--fast-track-image);
+  background-repeat: no-repeat;
+  background-size: contain;
+  content: "";
+  fill: var(--fast-track-color);
+  height: 100%;
+  position: absolute;
+  /* In order to support RTL/LTR both of environment, set the left and right to zero */
+  left: 0;
+  right: 0;
+  width: 15px;
+  -moz-context-properties: fill;
+}
+
+.animated-property-name.warning span {
+  text-decoration: underline dotted;
+}
+
+/* Keyframes Graph */
+.keyframes-graph {
+  grid-column: 2 / 3;
+  height: inherit;
+  padding-top: 5px;
+  position: relative;
+}
+
+.keyframes-graph:dir(rtl) .keyframes-graph-path {
+  transform: scaleX(-1.0);
+}
+
+.keyframes-graph-path {
+  height: 100%;
+  width: 100%;
+}
+
+.keyframes-graph-path path {
+  fill: var(--teal-60);
+  fill-opacity: 0.5;
+  stroke: var(--teal-70);
+  vector-effect: non-scaling-stroke;
+  transform: scale(1, -1);
+}
+
+.keyframes-graph.opacity .keyframes-graph-path path {
+  fill: var(--magenta-50);
+  stroke: var(--magenta-70);
+}
+
+.keyframes-graph.transform .keyframes-graph-path path {
+  fill: var(--yellow-50);
+  stroke: var(--yellow-60);
+}
+
+.keyframes-graph-path .color-path path {
+  fill-opacity: 1;
+  stroke: none;
+}
+
+.keyframes-graph .keyframes-graph-path .hint path {
+  fill: none;
+  stroke-linecap: round;
+  stroke-opacity: 0;
+}
+
+.keyframes-graph-path .hint path:hover {
+  stroke-opacity: 1;
+}
+
+.keyframes-graph-path .hint rect {
+  fill-opacity: 0.1;
+}
+
+.keyframes-graph-path .hint line {
+  stroke: #00b0bd;
+  stroke-opacity: 0;
+  vector-effect: non-scaling-stroke;
+}
+
+.keyframes-graph-path .hint:hover line {
+  stroke-opacity: 1;
+}
+
+/* Keyframe Marker List */
+.keyframe-marker-list {
+  pointer-events: none;
+  position: absolute;
+  height: 100%;
+  list-style-type: none;
+  top: 0%;
+  width: 100%;
+  padding-inline-start: 0;
+}
+
+.keyframe-marker-item {
+  box-shadow: 0 0 0 1px var(--keyframe-marker-shadow-color);
+  border-radius: 100%;
+  pointer-events: auto;
+  position: absolute;
+  top: 50%;
+  height: 10px;
+  transform: translate(-5px, -3px);
+  width: 10px;
+}
+
+.keyframe-marker-item:dir(rtl) {
+  transform: translate(5px, -3px);
+}
+
+.animated-property-list-container.cssanimation .keyframe-marker-item {
+  background-color: var(--cssanimation-color);
+}
+
+.animated-property-list-container.csstransition .keyframe-marker-item {
+  background-color: var(--csstransition-color);
+}
+
+.animated-property-list-container.scriptanimation .keyframe-marker-item {
+  background-color: var(--scriptanimation-color);
+}
+
+/* Common Components */
+/* Progress Inspection Panel */
+.progress-inspection-panel {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  display: grid;
+  grid-template-columns: var(--sidebar-width) 1fr var(--graph-right-offset);
+  grid-template-rows: var(--theme-toolbar-height) calc(100% - var(--theme-toolbar-height));
+}
+
+.progress-inspection-panel > .background {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+
+  position: sticky;
+  top: 0;
+
+  /* Correspond to the bug 1462235 */
+  height: calc(100% - 1px);
+
+  pointer-events: none;
+
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+.progress-inspection-panel > .header {
+  grid-column: 1 / -1;
+  grid-row: 1 / 2;
+
+  position: sticky;
+  top: 0;
+
+  padding: 0;
+  z-index: 1;
+
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+.progress-inspection-panel > .indicator {
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+
+  position: sticky;
+  top: 0;
+
+  /* Correspond to the bug 1462235 */
+  height: calc(100% - 1px);
+
+  pointer-events: none;
+  z-index: 2;
+
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+.progress-inspection-panel > ul {
+  grid-column: 1 / -1;
+  grid-row: 2 / -1;
+
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-auto-rows: min-content;
+}
+
+.progress-inspection-panel > ul > li {
+  grid-column: 1 / -1;
+  height: var(--graph-height);
+  display: grid;
+  grid-template-columns: subgrid;
+}
+
+/* Tick Lines */
+.tick-lines {
+  grid-column: 2 / 3;
+  position: relative;
+}
+
+.tick-line {
+  position: absolute;
+  height: 100%;
+  border-inline-start: var(--tick-line-style);
+}
+
+/* Tick Labels */
+.tick-labels {
+  grid-column: 2 / 3;
+  height: 100%;
+  position: relative;
+}
+
+.tick-label {
+  border-inline-start: var(--tick-line-style);
+  height: 100%;
+  position: absolute;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.animated-property-list-container .tick-label:last-child {
+  border-inline-start: unset;
+  border-inline-end: var(--tick-line-style);
+  transform: translateX(calc(-100% + 0.5px));
+}
+
+.animated-property-list-container .tick-label:dir(rtl):last-child {
+  transform: translateX(calc(100% - 0.6px));
+}
+
+/* Indication Bar */
+.indication-bar {
+  position: absolute;
+  height: 100%;
+}
+
+.indication-bar::before {
+  border-inline-start: 5px solid transparent;
+  border-inline-end: 5px solid transparent;
+  border-top: 5px solid;
+  content: "";
+  height: calc(100% - 5px);
+  position: absolute;
+  transform: translateX(-6px);
+  width: 1px;
+}
+
+.indication-bar::after {
+  content: "";
+  height: 100%;
+  position: absolute;
+  transform: translateX(-1px);
+  width: 1px;
+}
+
+/* No Animation Panel */
+.animation-error-message > p {
+  white-space: pre-wrap;
+}
+
+.animation-element-picker::before {
+  background-image: url("chrome://devtools/content/shared/images/command-pick.svg");
+}
diff --git a/devtools/client/themes/audio/moz.build b/devtools/client/themes/audio/moz.build
new file mode 100644
index 0000000000..b5c0e9b754
--- /dev/null
+++ b/devtools/client/themes/audio/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DevToolsModules(
+    "shutter.wav",
+)
diff --git a/devtools/client/themes/audio/shutter.wav b/devtools/client/themes/audio/shutter.wav
new file mode 100644
index 0000000000..e9d742913e
--- /dev/null
+++ b/devtools/client/themes/audio/shutter.wav
diff --git a/devtools/client/themes/badge.css b/devtools/client/themes/badge.css
new file mode 100644
index 0000000000..5f635a225c
--- /dev/null
+++ b/devtools/client/themes/badge.css
@@ -0,0 +1,108 @@
+/* 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/. */
+
+:root {
+  --badge-active-background-color: var(--blue-50);
+  --badge-active-border-color: #FFFFFFB3;
+  --badge-background-color: white;
+  --badge-border-color: #CACAD1;
+  --badge-color: var(--grey-60);
+  --badge-hover-background-color: #DFDFE8;
+  --badge-interactive-background-color: var(--grey-20);
+  --badge-interactive-color: var(--grey-90);
+  --badge-scrollable-color: #8000D7;
+  --badge-scrollable-background-color: #FFFFFF;
+  --badge-scrollable-active-background-color: #8000D7;
+}
+
+.theme-dark:root {
+  --badge-active-background-color: var(--blue-60);
+  --badge-active-border-color: #FFF6;
+  --badge-background-color: var(--grey-80);
+  --badge-border-color: var(--grey-50);
+  --badge-color: var(--grey-40);
+  --badge-hover-background-color: var(--grey-80);
+  --badge-interactive-background-color: var(--grey-70);
+  --badge-interactive-color: var(--grey-30);
+  --badge-scrollable-color: #B98EFF;
+  --badge-scrollable-background-color: transparent;
+}
+
+/* Inspector badge */
+.inspector-badge,
+.editor.text .whitespace::before,
+.unavailable-children::before {
+  display: inline-block;
+  /* 9px text is too blurry on low-resolution screens */
+  font-size: 10px;
+  font-weight: normal;
+  line-height: 10px;
+  height: 12px;
+  margin-top: 1px;
+  vertical-align: top;
+  border: 1px solid var(--badge-border-color);
+  border-radius: 3px;
+  padding: 0px 2px;
+  margin-inline-start: 5px;
+  user-select: none;
+  background-color: var(--badge-background-color);
+  color: var(--badge-color);
+  box-sizing: border-box;
+}
+
+.editor.text .whitespace::before {
+  content: attr(data-label);
+  margin-inline-start: 0;
+}
+
+.unavailable-children::before {
+  content: attr(data-label);
+  height: auto;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .inspector-badge,
+  .editor.text .whitespace::before {
+    font-size: 9px;
+  }
+}
+
+/* Inspector badges that are interactive/clickable */
+.inspector-badge.interactive {
+  background-color: var(--badge-interactive-background-color);
+  color: var(--badge-interactive-color);
+  cursor: pointer;
+}
+
+.inspector-badge:not(.active).interactive:focus,
+.inspector-badge:not(.active).interactive:hover {
+  background-color: var(--badge-hover-background-color);
+}
+
+.inspector-badge.active,
+.inspector-badge.interactive.active {
+  background-color: var(--badge-active-background-color);
+  border-color: var(--badge-active-border-color);
+  color: var(--theme-selection-color);
+}
+
+.inspector-badge.interactive.scrollable-badge {
+  background-color: var(--badge-scrollable-background-color);
+  border-color: var(--badge-scrollable-color);
+  color: var(--badge-scrollable-color);
+}
+
+.inspector-badge.interactive.scrollable-badge.active {
+  background-color: var(--badge-scrollable-active-background-color);
+  color: var(--theme-selection-color);
+}
+
+.inspector-badge.has-disabled-events {
+  font-style: italic;
+}
+
+.inspector-badge.has-disabled-events::before {
+  content: "*";
+  padding-inline-end: 2px;
+}
diff --git a/devtools/client/themes/boxmodel.css b/devtools/client/themes/boxmodel.css
new file mode 100644
index 0000000000..96c58649d9
--- /dev/null
+++ b/devtools/client/themes/boxmodel.css
@@ -0,0 +1,431 @@
+/* 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/ */
+
+:root {
+  --marginbox-color: #FDFFDF;
+  --borderbox-color: var(--grey-50);
+  --paddingbox-color: #E3DCFF;
+  --contentbox-color: #CFF0FB;
+  --marginbox-border-color: #D8E60A;
+  --contentbox-border-color: #54A9FF;
+  --position-border-color: var(--grey-50);
+}
+
+:root.theme-dark {
+  --marginbox-color: #73764A;
+  --borderbox-color: var(--grey-70);
+  --paddingbox-color: #6657A6;
+  --contentbox-color: #407AA4;
+  --marginbox-border-color: #BDCA00;
+  --contentbox-border-color: #00B8FF;
+  --position-border-color: var(--grey-40);
+}
+
+.boxmodel-container {
+  overflow: auto;
+  padding-bottom: 4px;
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+/* Header */
+
+.boxmodel-header,
+.boxmodel-info {
+  display: flex;
+  align-items: center;
+  padding: 4px 19px;
+}
+
+.layout-geometry-editor::before {
+  background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
+}
+
+/* Main: contains the box-model regions */
+
+.boxmodel-main {
+  position: relative;
+  color: var(--theme-selection-color);
+  /* Make sure there is some space between the window's edges and the regions */
+  margin: 14px auto;
+  width: calc(100% - 2 * 14px);
+  min-width: 240px;
+  /* The view will grow bigger as the window gets resized, until 400px */
+  max-width: 400px;
+}
+
+.boxmodel-box {
+  margin: 25px;
+}
+
+.boxmodel-size {
+  color: var(--grey-90);
+}
+
+.boxmodel-position,
+.boxmodel-margin,
+.boxmodel-padding {
+  color: var(--grey-50);
+}
+
+.theme-dark .boxmodel-margin,
+.theme-dark .boxmodel-border,
+.theme-dark .boxmodel-padding,
+.theme-dark .boxmodel-size {
+  color: var(--grey-10);
+}
+
+.theme-dark .boxmodel-position {
+  color: var(--grey-30);
+}
+
+/* Regions are 3 nested elements with wide borders and outlines */
+
+.boxmodel-contents {
+  height: 18px;
+  outline: dashed 1px var(--contentbox-border-color);
+}
+
+.boxmodel-margins {
+  border-width: 22px;
+  border-style: solid;
+  outline: dashed 1px var(--marginbox-border-color);
+}
+
+.boxmodel-borders {
+  border-width: 5px;
+  border-style: solid;
+}
+
+.boxmodel-paddings {
+  border-width: 27px;
+  border-style: solid;
+}
+
+/* Regions colors */
+
+.boxmodel-margins {
+  border-color: var(--marginbox-color);
+}
+
+.boxmodel-borders {
+  border-color: var(--borderbox-color);
+}
+
+.boxmodel-paddings {
+  border-color: var(--paddingbox-color);
+}
+
+.boxmodel-contents {
+  background-color: var(--contentbox-color);
+}
+
+/* Editable region sizes are contained in absolutely positioned <p> */
+
+.boxmodel-main > p,
+.boxmodel-size {
+  position: absolute;
+  pointer-events: none;
+  margin: 0;
+  text-align: center;
+  direction: ltr;
+}
+
+.boxmodel-main > p > span,
+.boxmodel-main > p > input,
+.boxmodel-content,
+.boxmodel-size > span {
+  vertical-align: middle;
+  pointer-events: auto;
+}
+
+/* Coordinates for the region sizes */
+
+.boxmodel-top,
+.boxmodel-bottom {
+  width: calc(100% - 2px);
+  text-align: center;
+  z-index: 1; /* workaround for bug 1559706 */
+}
+
+.boxmodel-padding.boxmodel-top {
+  top: 34px;
+}
+
+.boxmodel-padding.boxmodel-bottom {
+  bottom: 35px;
+}
+
+.boxmodel-border.boxmodel-top {
+  top: 17px;
+}
+
+.boxmodel-border.boxmodel-bottom {
+  bottom: 17px;
+}
+
+.boxmodel-margin.boxmodel-top {
+  top: 0px;
+}
+
+.boxmodel-margin.boxmodel-bottom {
+  bottom: 1px;
+}
+
+.boxmodel-size,
+.boxmodel-position.boxmodel-left,
+.boxmodel-position.boxmodel-right,
+.boxmodel-margin.boxmodel-left,
+.boxmodel-margin.boxmodel-right,
+.boxmodel-border.boxmodel-left,
+.boxmodel-border.boxmodel-right,
+.boxmodel-padding.boxmodel-left,
+.boxmodel-padding.boxmodel-right {
+  top: 22px;
+  line-height: 80px;
+  z-index: 1; /* workaround for bug 1559706 */
+}
+
+.boxmodel-size {
+  width: calc(100% - 2px);
+}
+
+.boxmodel-position.boxmodel-top,
+.boxmodel-position.boxmodel-bottom,
+.boxmodel-position.boxmodel-left,
+.boxmodel-position.boxmodel-right,
+.boxmodel-margin.boxmodel-right,
+.boxmodel-margin.boxmodel-left,
+.boxmodel-border.boxmodel-right,
+.boxmodel-border.boxmodel-left,
+.boxmodel-padding.boxmodel-right,
+.boxmodel-padding.boxmodel-left {
+  width: 21px;
+}
+
+.boxmodel-padding.boxmodel-left {
+  left: 56px;
+}
+
+.boxmodel-padding.boxmodel-right {
+  right: 56px;
+}
+
+.boxmodel-border.boxmodel-left {
+  left: 39px;
+}
+
+.boxmodel-border.boxmodel-right {
+  right: 39px;
+}
+
+.boxmodel-margin.boxmodel-right {
+  right: 24px;
+}
+
+.boxmodel-margin.boxmodel-left {
+  left: 24px;
+}
+
+.boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
+  transform: rotate(-90deg);
+}
+
+.boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
+  transform: rotate(90deg);
+}
+
+.boxmodel-rotate.boxmodel-left.boxmodel-position:not(.boxmodel-editing) {
+  border-top: none;
+  border-right: 1px solid var(--theme-highlight-purple);
+  width: auto;
+  height: 30px;
+}
+
+.boxmodel-size > p {
+  display: inline-block;
+  margin: auto;
+  line-height: 0;
+}
+
+.boxmodel-rotate.boxmodel-right.boxmodel-position:not(.boxmodel-editing) {
+  border-top: none;
+  border-left: 1px solid var(--theme-highlight-purple);
+  width: auto;
+  height: 30px;
+}
+
+/* Box Model Positioning: contains top, right, bottom, left */
+
+.boxmodel-position.boxmodel-top,
+.boxmodel-position.boxmodel-bottom {
+  border-left: 1px solid var(--position-border-color);
+  left: calc(50% - 2px);
+  padding-left: 1px;
+}
+
+.boxmodel-position.boxmodel-right,
+.boxmodel-position.boxmodel-left {
+  border-top: 1px solid var(--position-border-color);
+  line-height: 15px;
+  top: calc(50% - 1px);
+  width: 30px;
+}
+
+.boxmodel-position.boxmodel-top {
+  top: -18px;
+}
+
+.boxmodel-position.boxmodel-right {
+  right: -9px;
+}
+
+.boxmodel-position.boxmodel-bottom {
+  bottom: -18px;
+}
+
+.boxmodel-position.boxmodel-left {
+  left: -9px;
+}
+
+/* Legend: displayed inside regions */
+
+.boxmodel-legend {
+  position: absolute;
+  z-index: 1;
+  cursor: default;
+}
+
+.boxmodel-legend[data-box="margin"] {
+  margin-left: 9px;
+  margin-top: 4px;
+  color: var(--grey-90);
+}
+
+.boxmodel-legend[data-box="position"] {
+  color: var(--grey-90);
+  margin: -18px 13px;
+}
+
+.boxmodel-legend[data-box="padding"] {
+  margin-top: 12px;
+  margin-left: 12px;
+  color: var(--grey-90);
+}
+
+.boxmodel-legend[data-box="border"] {
+  background-color: var(--borderbox-color);
+  height: 15px;
+  padding-top: 1px;
+  padding-left: 4px;
+  padding-right: 4px;
+  border-radius: 3px;
+  margin: 0px 0px;
+}
+
+.theme-dark .boxmodel-legend[data-box="margin"],
+.theme-dark .boxmodel-legend[data-box="border"],
+.theme-dark .boxmodel-legend[data-box="padding"] {
+  color: var(--grey-10);
+}
+
+.theme-dark .boxmodel-legend[data-box="position"] {
+  color: var(--grey-30);
+}
+
+/* Editable fields */
+
+.boxmodel-editable {
+  position: relative;
+  border: 1px dashed transparent;
+  user-select: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.boxmodel-editable[data-box="border"] {
+  background-color: var(--borderbox-color);
+  border-radius: 3px;
+  padding: 0 2px;
+}
+
+.boxmodel-editable:hover {
+  border-bottom-color: hsl(0, 0%, 50%);
+}
+
+.boxmodel-editable:focus,
+.boxmodel-editable:active {
+  border: 1px solid var(--blue-50);
+  outline: none;
+}
+
+.boxmodel-editable[data-box="margin"]:hover {
+  background-color: var(--marginbox-border-color);
+}
+
+.boxmodel-editable[data-box="padding"]:hover {
+  background-color: #c78fc7b3;
+}
+
+.boxmodel-editable[data-box="border"]:hover {
+  background-color: #545454;
+}
+
+.boxmodel-editable[data-box="content"]:hover {
+  background-color: var(--contentbox-border-color);
+}
+
+.boxmodel-editable[data-box="margin"]:hover,
+.boxmodel-editable[data-box="padding"]:hover,
+.boxmodel-editable[data-box="border"]:hover,
+.boxmodel-editable[data-box="content"]:hover {
+  border-radius: 3px;
+}
+
+.boxmodel-size > span {
+  cursor: default;
+}
+
+/* Box Model Info: contains the position and size of the element */
+
+.boxmodel-element-size {
+  flex: 1;
+  direction: ltr;
+  text-align: match-parent;
+}
+
+.boxmodel-position-group {
+  display: flex;
+  align-items: center;
+}
+
+/* Tag displayed next to DOM Node previews (used to display reference elements) */
+
+.boxmodel-container .reference-element {
+  margin-inline-start: 14px;
+  margin-block-start: 4px;
+  display: block;
+}
+
+.boxmodel-container .reference-element-type {
+  background: var(--theme-highlight-purple);
+  color: white;
+  padding: 1px 2px;
+  border-radius: 2px;
+  font-size: 9px;
+  margin-inline-end: 5px;
+}
+
+.theme-dark .boxmodel-container .reference-element-type {
+  color: black;
+}
+
+/* Box Model Main - Offset Parent */
+
+.boxmodel-offset-parent {
+  position: absolute;
+  top: -20px;
+  right: -10px;
+  color: var(--theme-highlight-purple);
+}
diff --git a/devtools/client/themes/breadcrumbs.css b/devtools/client/themes/breadcrumbs.css
new file mode 100644
index 0000000000..a8398cac7a
--- /dev/null
+++ b/devtools/client/themes/breadcrumbs.css
@@ -0,0 +1,135 @@
+/* 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/. */
+
+ :root {
+  --breadcrumb-id-class-color: #909090;
+  --breadcrumb-pseudo-class-text-color: var(--yellow-70) ;
+ }
+
+ .theme-dark:root {
+  --breadcrumb-id-class-color: var(--theme-text-color-strong);
+  --breadcrumb-pseudo-class-text-color: var(--yellow-50);
+ }
+
+/* Inspector HTMLBreadcrumbs */
+
+.breadcrumbs-widget-container {
+  margin-right: 3px;
+  max-height: 24px; /* Set max-height for proper sizing on linux */
+  height: 24px; /* Set height to prevent starting small waiting for content */
+}
+
+.breadcrumbs-widget-container:-moz-locale-dir(rtl) {
+  margin-right: 0;
+  margin-left: 3px;
+}
+
+.scrollbutton-up,
+.scrollbutton-down {
+  appearance: none;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  list-style-image: none;
+  margin: 0;
+  padding: 0;
+  visibility: collapse;
+}
+
+.scrollbutton-up > .toolbarbutton-icon,
+.scrollbutton-down > .toolbarbutton-icon {
+  appearance: none;
+  width: 20px;
+  height: 16px;
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("images/breadcrumbs-scrollbutton.svg");
+  list-style-image: none;
+  padding: 0;
+
+  -moz-context-properties: fill;
+  fill: var(--theme-toolbar-color);
+}
+
+.scrollbutton-up:not([disabled]):active:hover,
+.scrollbutton-down:not([disabled]):active:hover {
+  background-color: var(--theme-toolbar-hover);
+}
+
+.scrollbutton-up[disabled] > .toolbarbutton-icon,
+.scrollbutton-down[disabled] > .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
+.scrollbutton-up {
+  border-right: solid 1px var(--theme-splitter-color);
+  border-left: solid 1px transparent;
+  box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
+}
+
+.scrollbutton-down {
+  border-right: solid 1px transparent;
+  border-left: solid 1px var(--theme-splitter-color);
+  box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
+}
+
+.scrollbutton-up[disabled],
+.scrollbutton-down[disabled] {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+.scrollbutton-down > .toolbarbutton-icon {
+  transform: scaleX(-1);
+}
+
+.breadcrumbs-widget-item {
+  background-color: transparent;
+  border: none;
+  margin-inline: 10px 1px;
+  padding: 0;
+}
+
+.breadcrumbs-widget-item:first-child::before {
+  /* The first crumb does not need any separator before itself */
+  content: unset;
+}
+
+.breadcrumbs-widget-item:not(:first-child)::before {
+  content: url(chrome://devtools/skin/images/breadcrumbs-divider.svg);
+  background: none;
+  position: relative;
+  left: -3px;
+  margin: 0 4px 0 -1px;
+  top: -1px;
+}
+
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
+  color: var(--theme-highlight-purple);
+}
+
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
+  color: var(--theme-highlight-blue);
+}
+
+.theme-dark .breadcrumbs-widget-item {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .breadcrumbs-widget-item {
+  color: var(--theme-body-color);
+}
+
+.breadcrumbs-widget-item-id,
+.breadcrumbs-widget-item-classes {
+  color: var(--breadcrumb-id-class-color);
+}
+
+.breadcrumbs-widget-item-pseudo-classes {
+  color: var(--breadcrumb-pseudo-class-text-color);
+}
diff --git a/devtools/client/themes/changes.css b/devtools/client/themes/changes.css
new file mode 100644
index 0000000000..fa16cd04b1
--- /dev/null
+++ b/devtools/client/themes/changes.css
@@ -0,0 +1,211 @@
+/* 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/. */
+
+/* CSS Variables specific to the Changes panel that aren't defined by the themes */
+:root {
+  --diff-add-background-color: #f1feec;
+  --diff-add-text-color: #54983f;
+  --diff-remove-background-color: #fbf2f5;
+  --diff-remove-text-color: #bf7173;
+  --diff-source-background: var(--theme-toolbar-background);
+  --diff-level: 0;
+  --diff-level-offset: 10px;
+  /*
+    Minimum padding so content on the first level (zero) isn't touching the edge. Added
+    and removed lines will re-declare this to add extra padding to clear the +/- icons.
+  */
+  --diff-level-min-offset: 5px;
+}
+
+:root.theme-dark {
+  --diff-add-background-color: rgba(18, 188, 0, 0.15);
+  --diff-add-text-color: #12BC00;
+  --diff-remove-background-color: rgba(255, 0, 57, 0.15);
+  --diff-remove-text-color: #FF0039;
+  --diff-source-background: #222225;
+}
+
+:root[dir="rtl"] {
+  /* Increase minimum offset on right-to-left layout to clear the floating scrollbar. */
+  --diff-level-min-offset: 15px;
+}
+
+:root[dir="rtl"] #sidebar-panel-changes .source {
+  /* Enforce left-to-right code rendering on right-to-left layout. */
+  direction: ltr;
+}
+
+#sidebar-panel-changes {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: var(--theme-sidebar-background);
+}
+
+#sidebar-panel-changes .href {
+  display: flex;
+  align-items: center;
+  color: var(--theme-toolbar-color);
+  background: var(--diff-source-background);
+  border-top: 1px solid var(--theme-splitter-color);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 4px;
+  padding-inline-start: var(--diff-level-min-offset);
+  font-size: 12px;
+}
+
+#sidebar-panel-changes .source:first-child .href {
+  border-top: unset;
+}
+
+#sidebar-panel-changes .href span {
+  /* Allows trimming of flex item with overflow ellipsis within the flex container */
+  min-width: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+#sidebar-panel-changes .level {
+  padding-top: 3px;
+  padding-right: 5px;
+  padding-bottom: 3px;
+  padding-left: calc(var(--diff-level-min-offset) +
+                     var(--diff-level-offset) * var(--diff-level));
+}
+
+#sidebar-panel-changes .changes__toolbar {
+  background: var(--theme-sidebar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 2px 5px;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+/* Remove the top border of the first source to avoid double border from sticky toolbar */
+#sidebar-panel-changes .changes__toolbar + .source .href {
+  border-top: none;
+}
+
+.changes__copy-all-changes-button {
+  -moz-context-properties: fill;
+  /* Use the Firefox copy icon (16px) instead of the smaller DevTools one (12px) */
+  background: url(chrome://global/skin/icons/edit-copy.svg) no-repeat;
+  background-position: 4px 3px;
+  background-size: 16px;
+  border: none;
+  border-radius: 3px;
+  color: var(--theme-body-color);
+  fill: currentColor;
+  padding-block: 4px;
+  padding-inline: 25px 5px;
+}
+
+.changes__copy-all-changes-button:dir(rtl) {
+  background-position-x: right 4px;
+}
+
+.changes__copy-all-changes-button:hover,
+.changes__copy-all-changes-button:focus {
+  background-color: var(--theme-button-background);
+}
+
+.changes__copy-all-changes-button:active {
+  background-color: var(--theme-button-active-background);
+}
+
+/* Hide the Copy Rule button by default. */
+.changes__copy-rule-button {
+  /**
+   * The rgba() format of the background colors makes the button see-through and it looks
+   * bad when stacked on top of long selectors.
+   *
+   * To solve this and not change the color format which is inherited from the Photon
+   * color guide in `client/themes/variables.css`, we use a blending trick to overlay the
+   * rgba() color value onto a solid color used for the panel background (achieved with
+   * a linear gradient with no transition). This keeps the rgba() color, but prevents the
+   * see-through effect.
+   */
+  background-blend-mode: overlay;
+  background-color: var(--theme-button-background);
+  background-image:
+    linear-gradient(var(--theme-sidebar-background), var(--theme-sidebar-background));
+  border-radius: 8px;
+  border: none;
+  color: var(--theme-body-color);
+  display: none;
+  padding: 1px 7px;
+  position: absolute;
+  right: 5px;
+  top: 2px;
+}
+
+.changes__copy-rule-button:active {
+  background-color: var(--theme-button-active-background);
+}
+
+.changes__rule {
+  position: relative;
+}
+
+.changes__selector {
+  word-wrap: break-word;
+}
+
+/* Show the Copy Rule button when hovering over the rule's selector elements */
+.changes__selector:hover + .changes__copy-rule-button,
+.changes__selector:hover + .changes__selector + .changes__copy-rule-button,
+.changes__copy-rule-button:hover {
+  display: block;
+}
+
+.changes__declaration {
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.changes__declaration-name {
+  margin-left: 10px;
+}
+
+.diff-add,
+.diff-remove {
+  --diff-level-min-offset: 15px;
+  position: relative;
+}
+
+.diff-add::before,
+.diff-remove::before {
+  position: absolute;
+  left: 5px;
+}
+
+.diff-add {
+  background-color: var(--diff-add-background-color);
+}
+
+.diff-add::before {
+  content: "+";
+  color: var(--diff-add-text-color);
+}
+
+.diff-remove {
+  background-color: var(--diff-remove-background-color);
+}
+
+.diff-remove::before {
+  content: "-";
+  color: var(--diff-remove-text-color);
+}
+
+#sidebar-panel-changes .devtools-sidepanel-no-result :not(:first-child) {
+  font-style: normal;
+}
+
+#sidebar-panel-changes.inspector-tabpanel {
+  min-width: 0;
+}
diff --git a/devtools/client/themes/chart.css b/devtools/client/themes/chart.css
new file mode 100644
index 0000000000..f0e072edf0
--- /dev/null
+++ b/devtools/client/themes/chart.css
@@ -0,0 +1,135 @@
+/* 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/. */
+
+/* Chart */
+
+.generic-chart-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.theme-dark .generic-chart-container {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .generic-chart-container {
+  color: var(--theme-text-color-alt);
+}
+
+.chart-colored-blob {
+  fill: var(--theme-body-color);
+  background: var(--theme-body-color);
+}
+
+/* Chart: Pie */
+
+.pie-chart-slice {
+  stroke-width: 1px;
+  cursor: pointer;
+}
+
+.theme-dark .pie-chart-slice {
+  stroke: rgba(0,0,0,0.2);
+}
+
+.theme-light .pie-chart-slice {
+  stroke: rgba(255,255,255,0.8);
+}
+
+.theme-dark .pie-chart-slice[largest] {
+  stroke-width: 2px;
+  stroke: #fff;
+}
+
+.theme-light .pie-chart-slice[largest] {
+  stroke: #000;
+}
+
+.pie-chart-label {
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+}
+
+.theme-dark .pie-chart-label {
+  fill: #000;
+}
+
+.theme-light .pie-chart-label {
+  fill: #fff;
+}
+
+.pie-chart-container[slices="1"] > .pie-chart-slice {
+  stroke-width: 0px;
+}
+
+.pie-chart-slice,
+.pie-chart-label {
+  transition: all 0.1s ease-out;
+}
+
+.pie-chart-slice:not(:hover, [focused]),
+.pie-chart-slice:not(:hover, [focused]) + .pie-chart-label {
+  transform: none !important;
+}
+
+/* Chart: Table */
+
+.table-chart-title {
+  padding-bottom: 10px;
+  font-size: 120%;
+  font-weight: 600;
+}
+
+.table-chart-row {
+  margin-top: 1px;
+  cursor: pointer;
+}
+
+.table-chart-grid:hover .table-chart-row {
+  transition: opacity 0.1s ease-in-out;
+}
+
+.table-chart-grid:not(:hover) .table-chart-row {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.generic-chart-container:hover > .table-chart-grid:hover .table-chart-row:not(:hover),
+.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid .table-chart-row:not([focused]) {
+  opacity: 0.4;
+}
+
+.table-chart-row-box {
+  width: 8px;
+  height: 1.5em;
+  margin-inline-end: 10px;
+}
+
+.table-chart-row-label {
+  width: 8em;
+  padding-inline-end: 6px;
+  cursor: inherit;
+}
+
+.table-chart-totals {
+  margin-top: 8px;
+  padding-top: 6px;
+}
+
+.table-chart-totals {
+  border-top: 1px solid var(--theme-splitter-color);
+}
+
+.table-chart-summary-label {
+  font-weight: 600;
+  padding: 1px 0px;
+}
+
+.theme-dark .table-chart-summary-label {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .table-chart-summary-label {
+  color: var(--theme-body-color);
+}
diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css
new file mode 100644
index 0000000000..2188991e34
--- /dev/null
+++ b/devtools/client/themes/common.css
@@ -0,0 +1,770 @@
+/* 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/. */
+
+@import url("chrome://devtools/skin/splitters.css");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+:root {
+  /* Bug 1458224: the initial `font-size` is different on Mac/Windows
+   * (appears fixed to 11px) and Linux (bigger, depends on user settings).
+   * Workaround: specify font-size on root, on form inputs, and whenever
+   * we're using the `font` shorthand. */
+  font: message-box;
+  font-size: var(--theme-body-font-size);
+
+  --tab-line-hover-color: rgba(0,0,0,.2);
+  --tab-line-selected-color: var(--blue-50);
+  --toggle-thumb-color: white;
+  --toggle-track-color: var(--grey-30);
+
+  --searchbox-no-match-background-color: #ffe5e5;
+  --searchbox-no-match-stroke-color: var(--red-60);
+}
+
+:root.theme-light {
+  color-scheme: light;
+}
+
+:root.theme-dark {
+  color-scheme: dark;
+
+  --tab-line-hover-color: rgba(255,255,255,.2);
+  --toggle-thumb-color: var(--grey-40);
+  --toggle-track-color: var(--grey-60);
+
+  --searchbox-no-match-background-color: #402325;
+  --searchbox-no-match-stroke-color: var(--red-50);
+}
+
+:root[platform="mac"] {
+  --monospace-font-family: Menlo, monospace;
+}
+
+:root[platform="win"] {
+  --monospace-font-family: Consolas, monospace;
+}
+
+:root[platform="linux"] {
+  --monospace-font-family: monospace;
+}
+
+/**
+ * Customize the dark theme's scrollbar colors to avoid excessive contrast.
+ */
+:root.theme-dark {
+  scrollbar-color: var(--grey-50) var(--theme-splitter-color);
+}
+
+/**
+ * Customize scrollbar colors on Linux + light theme, to avoid visual conflicts
+ * between the light theme and the selected GTK theme (see bug 1471163).
+ * This removes GTK scrollbars and uses a fallback design (see bug 1464723).
+ */
+:root[platform="linux"].theme-light {
+  scrollbar-color: var(--grey-40) var(--grey-20);
+}
+
+::selection {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.devtools-monospace {
+  font-family: var(--monospace-font-family);
+  font-size: var(--theme-code-font-size);
+}
+
+/**
+ * For text that needs to be cut with an ellipsis …
+ */
+.devtools-ellipsis-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/**
+ * Override global.css input styles
+ */
+html|input {
+  margin: revert;
+}
+
+/**
+ * Override wrong system font from forms.css
+ * Bug 1458224: buttons use a wrong default font-size on Linux
+ */
+html|button, html|select, html|input {
+  font: message-box;
+  font-size: var(--theme-body-font-size);
+}
+
+/* Devtools rely on the old Gecko/HTML4 button hit testing */
+html|button > * {
+  pointer-events: none;
+}
+
+/* Prevent buttons from having a text selection highlight. Bug 1546366 */
+button::selection {
+  all: unset;
+}
+
+/* Autocomplete Popup */
+.devtools-autocomplete-popup {
+  overflow: hidden;
+
+  /* Devtools autocompletes display technical english keywords and should be displayed
+     using LTR direction. */
+  direction: ltr !important;
+}
+
+/* Reset list styles. */
+.devtools-autocomplete-popup ul {
+  list-style: none;
+}
+
+.devtools-autocomplete-popup ul,
+.devtools-autocomplete-popup li {
+  margin: 0;
+}
+
+.devtools-autocomplete-listbox {
+  --autocomplete-item-padding-inline: 8px;
+  appearance: none !important;
+  background-color: transparent;
+  border-width: 0px !important;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  max-height: 20rem;
+  box-sizing: border-box;
+}
+
+.devtools-autocomplete-listbox .autocomplete-item {
+  width: 100%;
+  background-color: transparent;
+  color: var(--theme-popup-color);
+  padding: 1px var(--autocomplete-item-padding-inline);
+  cursor: default;
+  text-overflow: ellipsis;
+  white-space: pre;
+  overflow: hidden;
+}
+
+.devtools-autocomplete-listbox .autocomplete-item > .initial-value,
+.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value {
+  margin: 0;
+  padding: 0;
+  float: inline-start;
+}
+
+.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-postlabel {
+  font-style: italic;
+  float: inline-end;
+  padding-inline-end: 3px;
+}
+
+.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count {
+  text-align: end;
+}
+
+.devtools-autocomplete-listbox .autocomplete-swatch {
+  cursor: pointer;
+  border-radius: 50%;
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+  /* align the swatch with its value */
+  margin-top: -1px;
+  margin-inline-end: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+.devtools-autocomplete-listbox .autocomplete-colorswatch::before {
+  content: '';
+  background-color: #eee;
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 6px;
+  position: absolute;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+/* Rest of the dark and light theme */
+.devtools-autocomplete-popup,
+.tooltip-panel.devtools-autocomplete-popup,
+.CodeMirror-hints,
+.CodeMirror-Tern-tooltip {
+  border: 1px solid var(--theme-popup-border-color);
+  background-color: var(--theme-popup-background);
+  color: var(--theme-popup-color);
+}
+
+.devtools-autocomplete-listbox .autocomplete-item:hover {
+  background-color: var(--theme-popup-dimmed);
+}
+
+.devtools-autocomplete-listbox .autocomplete-selected,
+.devtools-autocomplete-listbox .autocomplete-selected:hover {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.devtools-autocomplete-listbox .autocomplete-selected > .initial-value {
+  font-weight: bold;
+}
+
+/* Autocomplete list clone used for accessibility. */
+
+.devtools-autocomplete-list-aria-clone {
+  /* Cannot use display:none or visibility:hidden : screen readers ignore the element. */
+  position: fixed;
+  overflow: hidden;
+  margin: 0;
+  width: 0;
+  height: 0;
+}
+
+.devtools-autocomplete-list-aria-clone li {
+  /* Prevent screen readers from prefacing every item with 'bullet'. */
+  list-style-type: none;
+}
+
+/* Keyboard focus highlight styles */
+
+:-moz-focusring {
+  outline: var(--theme-focus-outline);
+  outline-offset: -1px;
+}
+
+textbox[focused="true"] {
+  border-color: var(--theme-focus-border-color-textbox);
+  box-shadow: var(--theme-focus-box-shadow-textbox);
+  transition: all 0.2s ease-in-out
+}
+
+textbox :-moz-focusring {
+  box-shadow: none;
+  outline: none;
+}
+
+/* Form fields should already have box-shadow hightlight */
+select:-moz-focusring,
+input[type="radio"]:-moz-focusring,
+input[type="checkbox"]:-moz-focusring,
+checkbox:-moz-focusring {
+  outline: none;
+}
+
+/* Tab and button of toolbox does not need to display outline */
+
+.devtools-button:-moz-focusring,
+.devtools-tab:-moz-focusring {
+  outline:none;
+}
+
+/* Toolbar buttons */
+.devtools-togglebutton,
+.devtools-button {
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: var(--theme-body-color);
+  transition: background-color 0.05s ease-in-out;
+  align-items: center;
+  text-shadow: none;
+  padding: 2px;
+  margin: 1px;
+
+  /* Button text should not wrap on multiple lines */
+  white-space: nowrap;
+}
+
+.devtools-togglebutton {
+  padding: 1px 6px;
+}
+
+/* Remove system form border from devtools-button. */
+.devtools-button::-moz-focus-inner {
+  border: 0;
+}
+
+/* Button with text */
+.devtools-button:not(:empty) {
+  padding-inline: 5px;
+  background: var(--toolbarbutton-background);
+}
+
+/* Button icon */
+.devtools-button::before {
+  content: none;
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  height: 16px;
+  margin: 0 3px;
+  transition: opacity 0.05s ease-in-out;
+  color: var(--theme-icon-color);
+  font-size: 11px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* Reveal the icon */
+.devtools-button:empty::before {
+  content: "";
+}
+
+.devtools-button.checked::before {
+  color: var(--theme-icon-checked-color);
+}
+
+/* Icon-only buttons */
+.devtools-button:hover::before,
+.devtools-button.checked::before {
+  opacity: 1;
+}
+
+/* Button states */
+.devtools-button:disabled {
+  pointer-events: none;
+  opacity: 0.5 !important;
+}
+
+.devtools-button:focus {
+  background-color: var(--theme-toolbar-hover);
+}
+
+.devtools-button:empty:not([aria-expanded="true"]):hover {
+  background: var(--toolbarbutton-hover-background);
+}
+
+/* Standalone buttons */
+.devtools-button[data-standalone] {
+  min-height: 28px;
+  padding: 4px 6px;
+  border: 1px solid transparent;
+  background: var(--toolbarbutton-background);
+}
+
+.theme-light .devtools-button[data-standalone] {
+  border-color: rgba(138,161,180,0.2);
+}
+
+/* Selectable button which is unchecked. */
+
+.devtools-button:not(:empty, .checked):hover,
+.devtools-button:empty:is(:hover:active,.checked),
+.devtools-button[aria-haspopup="menu"][aria-expanded="true"] {
+  background-color: var(--toolbarbutton-hover-background);
+}
+
+.devtools-button:not(:empty, .checked):hover:active {
+  background-color: var(--theme-selection-background-hover);
+}
+
+.devtools-button:not(:empty, .checked):focus {
+  background-color: var(--toolbarbutton-focus-background);
+  color: var(--toolbarbutton-focus-color);
+}
+
+.devtools-togglebutton:not([aria-pressed="true"]) {
+  background: var(--theme-toolbarbutton-background);
+  color: var(--theme-toolbarbutton-color);
+}
+
+.devtools-togglebutton:hover:not([aria-pressed="true"], :active) {
+  background-color: var(--theme-toolbarbutton-hover-background);
+}
+
+/* Selectable button which is checked. */
+
+.devtools-button:not(:empty).checked {
+  background: var(--toolbarbutton-checked-background);
+  color: var(--toolbarbutton-checked-color);
+}
+
+.devtools-button:not(:empty).checked:focus {
+  background-color: var(--toolbarbutton-checked-focus-background);
+}
+
+.devtools-togglebutton[aria-pressed="true"] {
+  background-color: var(--theme-toolbarbutton-checked-background);
+  color: var(--theme-toolbarbutton-checked-color);
+}
+
+.devtools-togglebutton[aria-pressed="true"]:hover:not(:active) {
+  background: var(--theme-toolbarbutton-checked-hover-background);
+  color: var(--theme-toolbarbutton-checked-hover-color);
+}
+
+.devtools-togglebutton:active {
+  background: var(--theme-toolbarbutton-active-background);
+  color: var(--theme-toolbarbutton-active-color);
+}
+
+.devtools-togglebutton::-moz-focus-inner {
+  border-color: transparent;
+}
+
+/* Icons */
+
+.devtools-button.devtools-clear-icon::before {
+  background-image: url("chrome://devtools/skin/images/clear.svg");
+}
+
+.devtools-option-toolbarbutton {
+  list-style-image: url("chrome://devtools/skin/images/settings.svg");
+}
+
+.devtools-button.devtools-feature-callout::after {
+  content: url("chrome://global/skin/icons/badge-blue.svg");
+  width: 14px;
+  height: 14px;
+  display: block;
+  position: absolute;
+  top: -2px;
+  right: 0;
+}
+
+/* Text input */
+
+.devtools-textinput,
+.devtools-searchinput,
+.devtools-filterinput {
+  appearance: none;
+  margin: 0;
+  padding: 0 4px;
+  font: inherit;
+  border: 1px solid transparent;
+  background-color: var(--theme-body-background);
+  color: var(--theme-body-color);
+  flex-grow: 1;
+}
+
+.devtools-searchinput,
+.devtools-filterinput {
+  padding-inline-start: 22px;
+  background-position: 7px center;
+  background-size: 12px;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.devtools-searchinput {
+  background-image: url(chrome://devtools/skin/images/search.svg);
+}
+
+.devtools-filterinput {
+  background-image: url(chrome://devtools/skin/images/filter-small.svg);
+}
+
+.devtools-searchinput:-moz-locale-dir(rtl),
+.devtools-searchinput:dir(rtl),
+.devtools-filterinput:-moz-locale-dir(rtl),
+.devtools-filterinput:dir(rtl) {
+  background-position-x: right 7px;
+}
+
+.devtools-searchinput .textbox-input::placeholder,
+.devtools-filterinput .textbox-input::placeholder {
+  font-style: normal;
+}
+
+/* Searchbox with extra button(s) (MDN help or clear button) */
+.devtools-searchbox {
+  display: inline-flex;
+  flex-grow: 1;
+  position: relative;
+  border: 1px solid transparent;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.devtools-searchbox > .devtools-searchinput,
+.devtools-searchbox > .devtools-filterinput {
+  /* Let .devtools-searchbox handle the background and border */
+  background-color: transparent;
+  border: none;
+  flex-grow: 1;
+  min-width: 0;
+  width: 100%;
+}
+
+.devtools-searchbox:focus-within,
+.devtools-textinput:focus,
+.devtools-searchinput:focus,
+.devtools-filterinput:focus {
+  border-color: var(--blue-50);
+  outline: none;
+}
+
+.devtools-searchbox-no-match {
+  background-color: var(--searchbox-no-match-background-color);
+  border-color: var(--searchbox-no-match-stroke-color);
+}
+
+/* Clear icon within the searchbox */
+.devtools-searchinput-clear {
+  flex: 0 0 auto;
+  align-self: center;
+  margin: 0 4px;
+  padding: 0;
+  border: 0;
+  width: 16px;
+  height: 16px;
+  background-color: transparent;
+  background-image: url("chrome://devtools/skin/images/search-clear.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill: var(--theme-icon-color);
+  fill-opacity: 0.8;
+}
+
+.devtools-searchbox-no-match > .devtools-searchinput-clear {
+  fill: var(--searchbox-no-match-stroke-color);
+}
+
+.devtools-searchinput-clear:hover {
+  fill-opacity: 1;
+}
+
+/* MDN link within the searchbox */
+.devtools-searchbox .learn-more-link::before {
+  opacity: 0.6;
+}
+
+.devtools-searchbox:not(:hover) .learn-more-link {
+  visibility: hidden;
+}
+
+.devtools-searchbox .devtools-searchinput-summary {
+  flex-basis: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+  color: var(--theme-comment);
+  align-self: center;
+}
+
+/* Autocomplete popup within the searchbox */
+.devtools-searchbox .devtools-autocomplete-popup {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  width: 100%;
+  line-height: initial !important;
+  /* See bug - 1414609. z-index is greater than 1000 so that searchbox's z-index
+  is more than z-index of requests-list-headers-wrapper in netmonitor */
+  z-index: 1001;
+}
+
+/* Twisty and checkbox controls */
+
+.theme-twisty {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  background-image: url("chrome://devtools/skin/images/arrow.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 10px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+  transform: rotate(-90deg);
+}
+
+/* Mirror the twisty for rtl direction */
+.theme-twisty:dir(rtl),
+.theme-twisty:-moz-locale-dir(rtl) {
+  transform: rotate(90deg);
+}
+
+.theme-selected ~ .theme-twisty {
+  fill: var(--theme-selection-color);
+}
+
+.theme-twisty:-moz-focusring {
+  outline-style: none;
+}
+
+.theme-twisty[open],
+.theme-twisty.open {
+  transform: none;
+}
+
+.theme-twisty[invisible] {
+  visibility: hidden;
+}
+
+/* Throbbers */
+.devtools-throbber::before {
+  content: "";
+  display: inline-block;
+  vertical-align: bottom;
+  margin-inline-end: 0.5em;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: 1.1s linear throbber-spin infinite;
+}
+
+@keyframes throbber-spin {
+  from {
+    transform: none;
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Common tabs styles */
+
+.all-tabs-menu {
+  position: absolute;
+
+  top: 0;
+  inset-inline-end: 0;
+  width: 15px;
+  height: 100%;
+
+  padding: 0;
+  border: none;
+  border-inline-start: 1px solid var(--theme-splitter-color);
+
+  background: var(--theme-tab-toolbar-background);
+  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-color);
+}
+
+.all-tabs-menu:hover {
+  background-color: var(--theme-toolbar-hover);
+}
+
+.all-tabs-menu:hover:active {
+  background-color: var(--theme-toolbar-hover-active);
+}
+
+.devtools-tab-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: transparent;
+  transition: transform 250ms var(--animation-curve), opacity 250ms var(--animation-curve);
+  opacity: 0;
+  transform: scaleX(0);
+}
+
+.devtools-tab:hover .devtools-tab-line,
+.tabs-menu-item:hover .devtools-tab-line {
+  background: var(--tab-line-hover-color);
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.devtools-tab.selected .devtools-tab-line,
+.tabs-menu-item.is-active .devtools-tab-line {
+  background: var(--tab-line-selected-color);
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+@media (prefers-reduced-motion) {
+  .devtools-tab-line {
+    transition: none;
+  }
+}
+
+.devtools-tab:not(.selected):focus .devtools-tab-line {
+  background: var(--tab-line-hover-color);
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+/* No result message styles */
+
+.devtools-sidepanel-no-result {
+  font-style: italic;
+  padding: 0.5em 20px;
+  user-select: none;
+  font-size: 12px;
+  line-height: calc(16 / 12);
+}
+
+/* Checkbox Toggle */
+
+.devtools-checkbox-toggle {
+  --x-pos: .15em;
+  /* Reset native checkbox styling. */
+  appearance: none;
+  background-color: var(--toggle-track-color);
+  cursor: pointer;
+  /* Change font-size to scale. */
+  font-size: 16px;
+  width: 2em;
+  height: 1em;
+  border-radius: 1em;
+  border: 1px solid transparent;
+  box-sizing: content-box;
+  /* Animate the thumb position between states of the checkbox. */
+  transition: background-color .1s ease-out;
+}
+
+.devtools-checkbox-toggle[disabled]{
+  opacity: 0.5;
+}
+
+/* For right-to-left layout, the toggle thumb goes in the opposite direction. */
+html[dir="rtl"] .devtools-checkbox-toggle {
+  --x-pos: -.15em;
+}
+
+.devtools-checkbox-toggle:not(:checked):focus {
+  border-color: var(--blue-55);
+}
+
+.devtools-checkbox-toggle:checked:focus {
+  background-color: var(--blue-40);
+}
+
+.devtools-checkbox-toggle:checked {
+  --x-pos: 1.15em;
+  background-color: var(--blue-55);
+}
+
+html[dir="rtl"] .devtools-checkbox-toggle:checked {
+  --x-pos: -1.15em;
+}
+
+.devtools-checkbox-toggle::before {
+  position: relative;
+  width: calc(1em - .3em);
+  height: calc(1em - .3em);
+  transform: translateY(.15em) translateX(var(--x-pos));
+  border-radius: 100%;
+  display: block;
+  content: "";
+  background-color: var(--toggle-thumb-color);
+  transition: transform .1s ease-out;
+}
+
+.devtools-checkbox-toggle:checked::before {
+  background-color: white;
+}
diff --git a/devtools/client/themes/compatibility.css b/devtools/client/themes/compatibility.css
new file mode 100644
index 0000000000..6f3e6a130e
--- /dev/null
+++ b/devtools/client/themes/compatibility.css
@@ -0,0 +1,326 @@
+/* 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/. */
+
+:root {
+  --compatibility-base-unit: 4px;
+  --compatibility-cause-color: var(--theme-text-color-alt);
+  --compatibility-issue-icon-size: calc(var(--compatibility-base-unit) * 3);
+  --compatibility-issue-item-height: calc(var(--compatibility-base-unit) * 4);
+  --compatibility-issue-mdn-icon-fill-color: var(--grey-60);
+  --compatibility-browser-icon-size: calc(var(--compatibility-base-unit) * 4);
+  --compatibility-browser-icon-fill-color: var(--theme-icon-dimmed-color);
+  --compatibility-browser-version-background-color: var(--theme-icon-error-color);
+  --compatibility-browser-version-color: white;
+}
+
+:root.theme-dark {
+  --compatibility-issue-mdn-icon-fill-color: var(--grey-40);
+  --compatibility-browser-version-color: black;
+}
+
+/*
+ * In dark mode, the tooltip background is slightly lighter than the compatibility panel
+ * background, so we need to adjust colors to have good contrast.
+ */
+:root.theme-dark .devtools-tooltip-css-compatibility {
+  --compatibility-browser-icon-fill-color: var(--theme-icon-color);
+  --compatibility-browser-version-background-color: var(--red-40-a90);
+}
+
+.compatibility-app {
+  height: 100%;
+}
+
+.compatibility-app__throbber {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(var(--compatibility-base-unit) * 8);
+}
+
+.compatibility-app__container {
+  display: grid;
+  grid-template-rows: 1fr calc(var(--compatibility-base-unit) * 7);
+  height: 100%;
+}
+
+.compatibility-app__container-hidden {
+  display: none;
+}
+
+.compatibility-app__main {
+  overflow: auto;
+}
+
+.compatibility-issue-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Layout of the issue item
+ *  +--------+-------------------+
+ *  | [icon] | issue description |
+ *  +--------+-------------------+
+ *  |        | aliases           |
+ *  +--------+-------------------+
+ *  |        | occurrences       |
+ *  +--------+-------------------+
+ */
+.compatibility-issue-item {
+  display: grid;
+  column-gap: var(--compatibility-base-unit);
+  padding: calc(var(--compatibility-base-unit) * 2);
+  grid-template-areas: "icon description"
+                       ".    aliases"
+                       ".    node-pane";
+  grid-template-columns: auto 1fr;
+}
+
+.compatibility-issue-item:not(:last-child) {
+  border-block-end: 1px solid var(--theme-splitter-color);
+}
+
+.compatibility-issue-item::before {
+  grid-area: icon;
+  content: "";
+  display: block;
+  width: var(--compatibility-issue-item-height);
+  height: var(--compatibility-issue-item-height);
+  background-size: var(--compatibility-issue-icon-size);
+  background-position: center;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  /* In order to fit to the position */
+  position: relative;
+  top: -1px;
+}
+
+.compatibility-issue-item--experimental::before,
+.compatibility-issue-item--unsupported::before {
+  background-image: url(chrome://devtools/skin/images/info.svg);
+  fill: currentColor;
+}
+
+.compatibility-issue-item--deprecated::before {
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  fill: var(--theme-icon-warning-color);
+}
+
+/*
+ * Layout of the issue description
+ *  +--------------+----------------+---------------------------+
+ *  | issue factor | (issue causes) | unsupported browser icons |
+ *  +--------------+----------------+---------------------------+
+ */
+.compatibility-issue-item__description {
+  grid-area: description;
+  display: flex;
+  column-gap: var(--compatibility-base-unit);
+  row-gap: calc(var(--compatibility-base-unit) / 2);
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.compatibility-issue-item__causes {
+  flex: auto;
+  color: var(--compatibility-cause-color);
+}
+
+.compatibility-issue-item__property {
+  color: var(--theme-highlight-blue);
+  unicode-bidi: plaintext;
+  display: flex;
+  gap: var(--compatibility-base-unit);
+}
+
+.compatibility-issue-item__mdn-link::after {
+  content: "";
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  background-image: url("chrome://devtools/skin/images/mdn.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  border: 1px solid var(--compatibility-issue-mdn-icon-fill-color);
+  -moz-context-properties: fill;
+  fill: var(--compatibility-issue-mdn-icon-fill-color);
+}
+
+.compatibility-issue-item__aliases {
+  grid-area: aliases;
+  list-style: none;
+  margin: 0;
+  padding-inline-start: calc(var(--compatibility-base-unit) * 2);
+  padding-block-end: var(--compatibility-base-unit);
+}
+
+.compatibility-issue-item__alias {
+  unicode-bidi: plaintext;
+}
+
+.compatibility-unsupported-browser-list {
+  list-style: none;
+  padding: 0;
+  column-gap: var(--compatibility-base-unit);
+  display: flex;
+}
+
+.compatibility-browser {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-inline: 1px;
+}
+
+.compatibility-browser-icon {
+  display: inline-block;
+  width: var(--compatibility-browser-icon-size);
+  height: var(--compatibility-browser-icon-size);
+  position: relative;
+}
+
+.compatibility-browser-icon--mobile::after {
+  content: "";
+  width: calc(var(--compatibility-base-unit) * 2);
+  height: calc(var(--compatibility-base-unit) * 3);
+  background-color: var(--theme-body-background);
+  background-size: calc(var(--compatibility-base-unit) * 2 - 2px);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url(chrome://devtools/skin/images/browsers/mobile.svg);
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+  position: absolute;
+  right: calc(var(--compatibility-base-unit) * -1);
+  bottom: calc(var(--compatibility-base-unit) * -1);
+}
+
+.compatibility-browser-icon__image {
+  width: 100%;
+  height: 100%;
+  fill: var(--compatibility-browser-icon-fill-color);
+  -moz-context-properties: fill;
+}
+
+.compatibility-browser .compatibility-browser-version {
+  font-size: 9px;
+  border-radius: 2px;
+  padding: 1px 2px;
+  line-height: 1;
+  background-color: var(--compatibility-browser-version-background-color);
+  color: var(--compatibility-browser-version-color);
+}
+
+.compatibility-node-pane {
+  grid-area: node-pane;
+}
+
+.compatibility-node-pane__summary {
+  color: var(--theme-comment);
+  cursor: pointer;
+  font-variant-numeric: tabular-nums;
+  padding-block-end: var(--compatibility-base-unit);
+}
+
+.compatibility-node-list {
+  list-style: none;
+  margin: 0;
+  padding-inline-start: calc(var(--compatibility-base-unit) * 2);
+}
+
+.compatibility-node-item:not(:last-child) {
+  padding-block-end: var(--compatibility-base-unit);
+}
+
+.compatibility-footer {
+  border-top: 1px solid var(--theme-splitter-color);
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.compatibility-footer__button {
+  background: none;
+  border: none;
+  display: flex;
+  align-items: center;
+  column-gap: var(--compatibility-base-unit);
+}
+
+.compatibility-footer__icon {
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-color);
+  width: calc(var(--compatibility-base-unit) * 4);
+  height: calc(var(--compatibility-base-unit) * 4);
+}
+
+.compatibility-footer__label {
+  color: var(--theme-toolbar-color);
+  font-size: calc(var(--compatibility-base-unit) * 3);
+}
+
+.compatibility-settings {
+  width: 100%;
+  height: 100%;
+  background-color: var(--theme-body-background);
+  overflow: auto;
+}
+
+.compatibility-settings__header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  padding-block: calc(var(--compatibility-base-unit) * 3);
+  padding-inline: calc(var(--compatibility-base-unit) * 4);
+}
+
+.compatibility-settings__header-label {
+  color: var(--theme-toolbar-color);
+  font-size: calc(var(--compatibility-base-unit) * 3);
+  font-weight: bold;
+}
+
+.compatibility-settings__header-button {
+  background: none;
+  border: none;
+}
+
+.compatibility-settings__header-icon {
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-color);
+  width: calc(var(--compatibility-base-unit) * 4);
+  height: calc(var(--compatibility-base-unit) * 4);
+}
+
+.compatibility-settings__target-browsers-header {
+  font-size: calc(var(--compatibility-base-unit) * 3);
+  line-height: calc(var(--compatibility-base-unit) * 4);
+  padding-block: var(--compatibility-base-unit);
+  padding-inline: calc(var(--compatibility-base-unit) * 4);
+  background-color: var(--theme-toolbar-background);
+  border-block: 1px solid var(--theme-splitter-color);
+}
+
+.compatibility-settings__target-browsers-list {
+  display: grid;
+  list-style: none;
+  margin: 0;
+  padding-block: calc(var(--compatibility-base-unit) * 3);
+  padding-inline: calc(var(--compatibility-base-unit) * 4);
+  row-gap: calc(var(--compatibility-base-unit) * 2);
+}
+
+.compatibility-settings__target-browsers-item {
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  align-items: center;
+  padding-inline-start: calc(var(--compatibility-base-unit) * 2);
+  column-gap: calc(var(--compatibility-base-unit) * 2);
+}
+
+.compatibility-settings__target-browsers-item-label {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 2/-1;
+}
diff --git a/devtools/client/themes/components-frame.css b/devtools/client/themes/components-frame.css
new file mode 100644
index 0000000000..54e1addb1e
--- /dev/null
+++ b/devtools/client/themes/components-frame.css
@@ -0,0 +1,68 @@
+/* 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/. */
+
+/**
+ * Frame Component
+ * Styles for React component at `devtools/client/shared/components/Frame.js`
+ */
+
+.theme-light {
+  --frame-link-line-color: var(--theme-highlight-blue);
+  --frame-link-source: var(--theme-highlight-purple);
+}
+
+.theme-dark {
+  --frame-link-line-color: hsl(210, 40%, 60%);
+  --frame-link-source: var(--blue-40);
+}
+
+.stack-trace {
+  display: grid;
+  grid-template-columns: auto auto;
+  justify-content: start;
+}
+
+.stack-trace .frame-link-async-cause {
+  grid-column: 1 / -1;
+}
+
+.stack-trace .frame-link {
+  display: contents;
+}
+
+.frame-link-async-cause {
+  color: var(--theme-comment);
+}
+
+.frame-link .frame-link-source {
+  color: var(--frame-link-source);
+}
+
+.frame-link a.frame-link-source {
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  font-style: normal;
+}
+
+.frame-link .frame-link-host {
+  margin-inline-start: 5px;
+  font-size: 90%;
+  color: var(--theme-comment);
+}
+
+.frame-link .frame-link-function-display-name {
+  margin-inline-end: 5px;
+  color: var(--console-output-color, currentColor);
+}
+
+.frame-link .frame-link-line {
+  color: var(--frame-link-line-color);
+}
+
+.focused .frame-link .frame-link-source,
+.focused .frame-link .frame-link-line,
+.focused .frame-link .frame-link-host {
+  color: var(--theme-selection-color);
+}
diff --git a/devtools/client/themes/components-h-split-box.css b/devtools/client/themes/components-h-split-box.css
new file mode 100644
index 0000000000..7d0befc269
--- /dev/null
+++ b/devtools/client/themes/components-h-split-box.css
@@ -0,0 +1,23 @@
+/* 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/. */
+
+/**
+ * HSplitBox Component
+ * Styles for React component at `devtools/client/shared/components/HSplitBox.js`
+ */
+
+.h-split-box,
+.h-split-box-pane {
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.h-split-box {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+}
diff --git a/devtools/client/themes/computed.css b/devtools/client/themes/computed.css
new file mode 100644
index 0000000000..bf30d08666
--- /dev/null
+++ b/devtools/client/themes/computed.css
@@ -0,0 +1,250 @@
+/* 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/. */
+
+ .theme-dark {
+  --row-striped-background: rgba(255, 255, 255, 0.05);
+ }
+
+.theme-light {
+  --row-striped-background: rgba(247, 247, 247, 0.8);
+}
+
+#sidebar-panel-computedview {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+/* Reset the global rotation of the icon done for RTL layout.
+   Computed view is always LTR */
+#sidebar-panel-computedview .theme-twisty:not(.open):dir(rtl),
+#sidebar-panel-computedview .theme-twisty:not([open]):-moz-locale-dir(rtl) {
+  transform: rotate(-90deg);
+}
+
+#computedview-panel .inspector-tabpanel {
+  min-width: 0;
+}
+
+#computedview-panel #browser-style-checkbox-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#computed-container {
+  overflow: auto;
+  height: 100%;
+}
+
+/* This extra wrapper only serves as a way to get the content of the view focusable.
+   So that when the user reaches it either via keyboard or mouse, we know that the view
+   is focused and therefore can handle shortcuts.
+   However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
+   through it, and the outline is hidden. */
+#computed-container-focusable {
+  height: 100%;
+  outline: none;
+}
+
+#computed-toolbar {
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+
+#browser-style-checkbox {
+  /* Bug 1200073 - extra space before the browser styles checkbox so
+     they aren't squished together in a small window. Put also
+     an extra space after. */
+  margin-inline-start: 5px;
+  margin-inline-end: 0;
+}
+
+#browser-style-checkbox-label {
+  white-space: nowrap;
+  padding-inline-start: 5px;
+  margin-inline-end: 5px;
+}
+
+#computed-property-container {
+  user-select: text;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: auto;
+  border-top: 1px solid var(--theme-splitter-color);
+  margin-top: -1px;
+}
+
+.row-striped {
+  background: var(--row-striped-background);
+}
+
+.computed-property-hidden {
+  display: none;
+}
+
+.computed-property-view {
+  padding: 2px 0px;
+  padding-inline-start: 5px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.computed-property-name-container {
+  width: 230px;
+}
+
+.computed-property-value-container {
+  display: flex;
+  flex: 1 1 168px;
+  overflow: hidden;
+}
+
+.computed-property-name-container > *,
+.computed-property-value-container > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.computed-property-name {
+  outline: 0 !important;
+}
+
+.computed-other-property-value::before {
+  content: "";
+  display: inline-block;
+  vertical-align: -0.5px;
+  width: 8px;
+  height: 8px;
+  margin: 0 1px;
+  background-image: url(images/arrow-e.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: var(--theme-text-color-inactive);
+}
+
+.computed-other-property-value:dir(rtl)::before {
+  transform: scaleX(-1);
+}
+
+.computed-property-value {
+  padding-inline-start: 14px;
+  outline: 0 !important;
+}
+
+.computed-property-content {
+  padding-inline-start: 17px;
+}
+
+/* Bug 1360238 - getSelection displays an extra "\n" on multiple sibling block elements.
+   We rely on this behavior to add an extra "\n" between matched selectors (Bug 1222737).
+   Therefore we use <div> elements around matched selectors and need this class
+   to keep them inline. We do that to avoid doing any formatting logic in JS.
+   Once Bug 1360238 will be fixed, we'll probably have to change the behavior
+   and remove this class. */
+.fix-get-selection {
+  display: inline;
+}
+
+.visually-hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}
+
+/* From skin */
+.computed-expander {
+  visibility: hidden;
+}
+
+.computed-expandable {
+  visibility: visible;
+}
+
+.match {
+  visibility: hidden;
+}
+
+.matchedselectors > p {
+  clear: both;
+  margin: 0;
+  margin-inline-end: 2px;
+  padding: 2px;
+  overflow-x: hidden;
+  border-style: dotted;
+  border-color: var(--theme-splitter-color);
+  border-width: 1px 1px 0 1px;
+}
+
+.matchedselectors > p:last-of-type {
+  border-bottom-width: 1px;
+}
+
+.matched {
+  text-decoration: line-through;
+}
+
+.parentmatch {
+  opacity: 0.5;
+}
+
+#computed-no-results {
+  height: 100%;
+}
+
+.onlyuserstyles {
+  cursor: pointer;
+}
+
+.legendKey {
+  margin: 0 5px;
+}
+
+.computed-link {
+  padding: 0 3px;
+  cursor: pointer;
+  float: inline-end;
+}
+
+/* Take away these two :visited rules to get a core dumper     */
+/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
+
+.computed-link {
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+}
+
+.computed-colorswatch {
+  border-radius: 50%;
+  width: 0.9em;
+  height: 0.9em;
+  vertical-align: middle;
+  margin-inline-end: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+.computed-colorswatch::before {
+  content: '';
+  background-color: #eee;
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 6px;
+  position: absolute;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
diff --git a/devtools/client/themes/dark-theme.css b/devtools/client/themes/dark-theme.css
new file mode 100644
index 0000000000..2eae01ef47
--- /dev/null
+++ b/devtools/client/themes/dark-theme.css
@@ -0,0 +1,268 @@
+/* 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/. */
+
+@import url(chrome://devtools/skin/variables.css);
+@import url(chrome://devtools/skin/common.css);
+@import url(chrome://devtools/skin/toolbars.css);
+@import url(chrome://devtools/skin/tooltips.css);
+
+body {
+  margin: 0;
+}
+
+.theme-body {
+  background: var(--theme-body-background);
+  color: var(--theme-body-color);
+}
+
+.theme-sidebar {
+  background: var(--theme-sidebar-background);
+  color: var(--theme-body-color);
+}
+
+.theme-selected,
+.CodeMirror-hint-active {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.variable-or-property:not([overridden])[changed] {
+  background: var(--theme-contrast-background);
+}
+
+.theme-link,
+.cm-s-mozilla .cm-link,
+.CodeMirror-Tern-type {
+  color: var(--grey-50);
+}
+
+/*
+ * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
+ * failures in debug builds.
+ */
+.theme-link:visited,
+.cm-s-mozilla .cm-link:visited {
+  color: var(--theme-highlight-blue);
+}
+
+.theme-comment,
+.cm-s-mozilla .cm-meta,
+.cm-s-mozilla .cm-hr,
+.cm-s-mozilla .cm-comment,
+.variable-or-property .token-undefined,
+.variable-or-property .token-null,
+.CodeMirror-Tern-completion-unknown:before {
+  color: var(--theme-comment);
+}
+
+.cm-s-mozilla .cm-unused-line {
+  text-decoration: line-through;
+  text-decoration-color: #0072ab;
+}
+
+.cm-s-mozilla .cm-executed-line {
+  background-color: #133c26;
+}
+
+.cm-s-mozilla .cm-number,
+.variable-or-property .token-number,
+.variable-or-property[return] > .title > .name,
+.variable-or-property[scope] > .title > .name {
+  color: #709AFF;
+}
+
+.CodeMirror-Tern-completion-number:before {
+  background-color: #5c9966;
+}
+
+.theme-fg-color1,
+.cm-s-mozilla .cm-attribute,
+.cm-s-mozilla .cm-builtin,
+.cm-s-mozilla .cm-keyword,
+.variables-view-variable > .title > .name {
+  color: var(--theme-highlight-red);
+}
+
+.cm-s-mozilla .cm-def,
+.cm-s-mozilla .cm-variable-2 {
+  color: var(--theme-highlight-blue);
+}
+
+.cm-s-mozilla .cm-variable {
+  color: var(--theme-highlight-purple);
+}
+
+.cm-s-mozilla .cm-property {
+  color: var(--theme-highlight-green);
+}
+
+.CodeMirror-Tern-completion-object:before {
+  background-color: #3689b2;
+}
+
+.theme-fg-color3,
+.cm-s-mozilla .cm-tag,
+.cm-s-mozilla .cm-header,
+.cm-s-mozilla .cm-bracket,
+.cm-s-mozilla .cm-qualifier,
+.variables-view-property > .title > .name {
+  color: var(--theme-highlight-blue);
+}
+
+.CodeMirror-Tern-completion-array:before {
+  background-color: var(--theme-highlight-bluegrey);
+}
+
+.theme-fg-color2 {
+  color: var(--theme-highlight-purple);
+}
+
+.cm-s-mozilla .cm-string,
+.cm-s-mozilla .cm-string-2,
+.variable-or-property .token-string,
+.CodeMirror-Tern-farg {
+  color: #709AFF;
+}
+
+.CodeMirror-Tern-completion-string:before,
+.CodeMirror-Tern-completion-fn:before {
+  background-color: #b26b47;
+}
+
+.cm-s-mozilla .cm-atom,
+.cm-s-mozilla .cm-quote,
+.cm-s-mozilla .cm-error,
+.variable-or-property .token-boolean,
+.variable-or-property .token-domnode,
+.variable-or-property[exception] > .title > .name {
+  color: var(--theme-highlight-red);
+}
+
+.CodeMirror-Tern-completion-bool:before {
+  background-color: #bf5656;
+}
+
+.variable-or-property .token-domnode {
+  font-weight: bold;
+}
+
+.theme-toolbar,
+.devtools-toolbar,
+.devtools-sidebar-tabs tabs,
+.devtools-sidebar-alltabs,
+.cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
+  color: var(--theme-body-color);
+  background-color: var(--theme-toolbar-background);
+  border-color: var(--theme-splitter-color);
+}
+
+.theme-bg-contrast {
+  background: var(--theme-contrast-background);
+}
+
+.theme-fg-contrast {
+  color: var(--theme-contrast-color);
+}
+
+.ruleview-swatch,
+.computed-colorswatch {
+  box-shadow: 0 0 0 1px #818181;
+}
+
+/* CodeMirror specific styles.
+ * Best effort to match the existing theme, some of the colors
+ * are duplicated here to prevent weirdness in the main theme. */
+
+.CodeMirror.cm-s-mozilla  { /* Inherit platform specific font sizing and styles */
+  font-family: inherit;
+  font-size: inherit;
+  background: transparent;
+}
+
+.CodeMirror.cm-s-mozilla  pre,
+.CodeMirror.cm-s-mozilla  pre.CodeMirror-line,
+.CodeMirror.cm-s-mozilla  pre.CodeMirror-line-like {
+  color: var(--theme-text-color-strong);
+}
+
+.cm-s-mozilla .cm-operator {
+  color: var(--theme-body-color);
+}
+
+.cm-s-mozilla .cm-variable-3,
+.cm-s-mozilla .cm-special {
+  color: var(--theme-text-color-strong);
+}
+
+.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
+  border-left: solid 1px #fff;
+}
+.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor.CodeMirror-secondarycursor {
+  border-left-color: #aaa;
+}
+
+.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
+  background: var(--theme-selection-background-hover);
+}
+
+.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
+  background: var(--theme-selection-background-hover);
+}
+
+.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
+  background: rgba(185, 215, 253, .15);
+}
+
+div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
+  outline: solid 1px rgba(255, 255, 255, .25);
+  color: white;
+}
+
+/* Highlight for a line that contains an error. */
+div.CodeMirror div.error-line {
+  background: rgba(255,0,0,0.2);
+}
+
+/* Generic highlighted text */
+div.CodeMirror span.marked-text {
+  background: rgba(255,255,0,0.2);
+  border: 1px dashed rgba(192,192,0,0.6);
+  margin-inline-start: -1px;
+  margin-inline-end: -1px;
+}
+
+
+.cm-s-mozilla .empty-line .CodeMirror-linenumber {
+  color: var(--grey-50);
+}
+
+/* Blackboxing lines */
+.CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt) {
+  color: #806414cc;
+}
+
+/* Highlight for evaluating current statement. */
+div.CodeMirror span.eval-text {
+  background-color: #556;
+}
+
+.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
+  color: var(--grey-40);
+}
+
+.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
+  border-right-color: var(--theme-toolbar-background);
+  background-color: var(--theme-sidebar-background);
+}
+
+.CodeMirror-Tern-fname {
+  color: #f7f7f7;
+}
+
+.CodeMirror-hints,
+.CodeMirror-Tern-tooltip {
+  box-shadow: 0 0 4px rgba(255, 255, 255, .3);
+  background-color: #0f171f;
+  color: var(--theme-body-color);
+}
diff --git a/devtools/client/themes/devtools-browser.css b/devtools/client/themes/devtools-browser.css
new file mode 100644
index 0000000000..bc208e3bc8
--- /dev/null
+++ b/devtools/client/themes/devtools-browser.css
@@ -0,0 +1,14 @@
+/* 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/. */
+
+@import url("chrome://devtools/skin/splitters.css");
+/* Imports the styles that will apply to the browser window for Responsive Design Mode.
+   This is dynamically loaded when either the toolbox or RDM is open. */
+@import url("chrome://devtools/content/responsive/responsive-browser.css");
+
+/* Set min-height to 29px as it matches the height of the .devtools-tabbar (/devtools/client/themes/toolbox.css#67)
+ * This prevents the shrinking of the toolbox until it disappears. */
+.devtools-toolbox-bottom-iframe {
+  min-height: 29px;
+}
diff --git a/devtools/client/themes/fonts.css b/devtools/client/themes/fonts.css
new file mode 100644
index 0000000000..5be2513052
--- /dev/null
+++ b/devtools/client/themes/fonts.css
@@ -0,0 +1,477 @@
+/* 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/. */
+
+/* CSS Variables specific to the font editor that aren't defined by the themes */
+:root {
+  --highlight-color: var(--blue-55);
+  --input-background-color: white;
+  --input-border-color: var(--grey-30);
+  --preview-input-background: var(--theme-toolbar-background);
+  --slider-thumb-color: var(--grey-50);
+  --slider-track-color: var(--grey-30);
+}
+
+:root.theme-dark {
+  --input-background-color: var(--grey-70);
+  --input-border-color: var(--grey-70);
+  --preview-input-background: #222225;
+  --slider-thumb-color: var(--grey-40);
+  --slider-track-color: var(--grey-60);
+}
+
+#sidebar-panel-fontinspector {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+#font-container, #font-editor {
+  min-width: var(--min-container-width);
+}
+
+#font-container {
+  flex: auto;
+}
+
+#font-editor {
+  padding-bottom: .5em;
+}
+
+#font-editor summary {
+  user-select: none;
+  cursor: pointer;
+  margin-bottom: .4em;
+  width: -moz-fit-content;
+}
+
+#font-editor details {
+  padding-bottom: .5em;
+}
+
+#font-editor details .label-open,
+#font-editor details .label-close {
+  display: none;
+}
+
+#font-editor details[open] .label-close,
+#font-editor details:not([open]) .label-open {
+  display: inline-block;
+}
+
+#font-editor .devtools-sidepanel-no-result {
+  padding-bottom: 0;
+}
+
+.fonts-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.font {
+  border: 1px solid var(--theme-splitter-color);
+  border-width: 0 0 1px 0;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-column-gap: 10px;
+  padding: 10px 20px;
+  overflow: auto;
+}
+
+#font-container .theme-twisty {
+  display: inline-block;
+  cursor: pointer;
+  vertical-align: bottom;
+}
+
+#font-preview-input-container {
+  background: var(--preview-input-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  display: flex;
+  height: 25px;
+}
+
+#font-preview-input-container input {
+  background-image: none;
+  flex: 1;
+  padding-inline: 19px;
+}
+
+.font-preview {
+  grid-column: 2;
+  grid-row: 1 / span 2;
+  object-fit: contain;
+  height: 50px;
+  width: 100%;
+}
+
+.font-name,
+.font-family-name {
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+.font-name {
+  display: inline-block;
+  margin-bottom: 0.6em;
+  font-size: 1em;
+  color: var(--theme-text-color-alt);
+}
+
+.font-family-name {
+  margin-bottom: 0.2em;
+  font-size: 1.2em;
+}
+
+.font-group {
+  margin-bottom: .5em;
+}
+
+.font-group .font-name {
+  white-space: unset;
+}
+
+.font-group .font-name::after {
+  content: ",";
+}
+
+.font-group .font-name:nth-last-child(1)::after {
+  content: "";
+}
+
+/* Make font-name hoverable as doing so highlights text runs in the page.
+   The hit target is 3px around the font name, which is why we offset them with a -3px
+   horizontal margin so they appear at the same place as they normall would. */
+
+.font-name {
+  padding: 3px;
+  margin-inline-start: -3px;
+  border-radius: 3px;
+}
+
+.font-name:hover {
+  background-color: var(--theme-selection-background-hover);
+}
+
+.font-css-code {
+  /* Force text direction in LTR and RTL */
+  direction: ltr;
+  text-align: left;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--theme-text-color-strong);
+  grid-column: span 2;
+}
+
+.font-css-code .theme-twisty {
+  margin-inline-start: -3px;
+}
+
+/* Force arrow direction in LTR and RTL */
+.font-css-code .theme-twisty:not([open]) {
+  transform: rotate(-90deg) !important;
+}
+
+.font-css-code-expander::before {
+  content: "\2026";
+  display: inline-block;
+  width: 12px;
+  height: 8px;
+  margin: 0 2px;
+  line-height: 3px;
+  color: var(--theme-text-color-inactive);
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.font-control {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  margin: .6em 0;
+}
+
+/* Style *all* axis controls with a top separator. See reset below. */
+.font-control-axis {
+  border-top: 1px solid var(--theme-splitter-color);
+  padding-top: 1.1em;
+}
+
+/* Remove styles form all axis controls aside from the first one.
+   Workaround for :first-of-type which doesn't work with class names. */
+.font-control-axis ~ .font-control-axis {
+  border-top: unset;
+  padding-top: unset;
+}
+
+.font-control-used-fonts {
+  align-items: flex-start;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  margin-block: 0 1em;
+  padding-top: 1em;
+}
+
+.font-control-box,
+.font-control-input {
+  flex: 4;
+  min-width: 100px;
+}
+
+.font-control-input {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.font-control-input .devtools-checkbox-toggle {
+  margin: 2px 0;
+}
+
+.font-control-label {
+  display: inline-block;
+  flex: 1;
+  font-size: 12px;
+  min-width: 70px;
+  margin-inline-end: 10px;
+  user-select: none;
+}
+
+.font-control-label-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.font-control-label-detail {
+  color: var(--theme-text-color-alt);
+  font-size: smaller;
+}
+
+.font-value-input {
+  text-align: right;
+  width: 60px;
+  padding: 2px 3px;
+  padding-inline-end: 5px;
+}
+
+.font-value-input,
+.font-value-select {
+  color: var(--theme-text-color-strong);
+  border: 1px solid var(--input-border-color);
+  background-color: var(--input-background-color);
+}
+
+/* Styles for disabled input fields */
+.font-value-input[disabled],
+.font-value-select[disabled],
+.font-value-slider[disabled] {
+  opacity: 0.5;
+}
+
+/* Do not use browser "invalid" state */
+.font-value-slider:-moz-ui-invalid,
+.font-value-input:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/* Do not show dotted line focus outline */
+.font-value-input:-moz-focusring {
+  outline: none;
+}
+
+/* Make native number steppers disappear by treating it as text field*/
+.font-value-input[type=number] {
+  appearance: textfield;
+}
+
+/* Swap around order of value input and unit dropdown for RTL */
+.font-value-input:dir(rtl) {
+  order: 3;
+}
+
+.font-value-label {
+  /* Combined width of .font-value-input and .font-value-select */
+  width: calc(60px + 3.8em);
+  padding-block: 2px 4px;
+}
+
+/* Mock separator because inputs don't have distinguishable borders in dark theme */
+.theme-dark .font-value-input + .font-value-select:dir(ltr) {
+  margin-inline-start: 2px;
+}
+.theme-dark .font-value-input + .font-value-select:dir(rtl) {
+  margin-inline-end: 2px;
+}
+
+/* Custom styles for <select> elements within the font editor. */
+.font-value-select {
+  background-image: url(chrome://devtools/skin/images/select-arrow.svg);
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  fill: var(--theme-icon-color);
+  -moz-context-properties: fill;
+  appearance: none;
+  box-shadow: none;
+  padding: 1px 10px 1px 2px;
+  min-width: 3.8em;
+}
+
+.font-value-input + .font-value-select:dir(ltr) {
+  border-inline-start: none;
+}
+
+/* Swap around order of value input and unit dropdown for RTL */
+.font-value-input + .font-value-select:dir(rtl) {
+  border-inline-end: none;
+  order: 2;
+  text-align: left;
+}
+
+.font-value-select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 var(--theme-text-color-strong);
+}
+
+.font-value-input:focus,
+.font-value-select:focus {
+  outline: 1px solid var(--highlight-color);
+  outline-offset: -1px;
+}
+
+.font-value-slider-container {
+  flex: 1;
+  min-width: 50px;
+  position: relative;
+  margin-inline-end: 10px;
+}
+
+/* Firefox doesn't support pseudo-elements on inputs. Using the container instead. */
+.font-value-slider-container::before,
+.font-value-slider-container::after {
+  user-select: none;
+  color: var(--theme-text-color-alt);
+  font-size: smaller;
+  position: absolute;
+  bottom: -.6em;
+  visibility: hidden;
+}
+
+.font-control-input:hover .font-value-slider-container::before,
+.font-control-input:hover .font-value-slider-container::after,
+.font-control-input:focus-within .font-value-slider-container::before,
+.font-control-input:focus-within .font-value-slider-container::after {
+  visibility: visible;
+}
+
+.font-value-slider-container::before {
+  content: attr(data-min);
+  inset-inline-start: .3em;
+}
+
+.font-value-slider-container::after {
+  content: attr(data-max);
+  inset-inline-end: .3em;
+}
+
+.font-value-slider {
+  background: transparent;
+  width: 100%;
+  margin: 0;
+}
+
+/*
+  The value of font-weight goes from 100 to 900 in increments of 100.
+  Decorate the slider for font-weight to have 9 vertical notches using a linear gradient.
+*/
+.font-value-slider[name=font-weight] {
+  --notch-size: 3px;
+  /* Draw a vertical line to get one notch per background-image instance */
+  background-image: linear-gradient(90deg, var(--slider-track-color) var(--notch-size),
+   transparent 0);
+  /* Offset the background so the notch aligns with the center of the slider thumb */
+  background-position: 5px center;
+  /* Repeat the background-image horizontally */
+  background-repeat: repeat-x;
+  /* Size the background to get nine visible notch instances. */
+  background-size: calc(12.5% - var(--notch-size) / 2) 7px;
+}
+
+.font-value-slider:-moz-focusring {
+  outline: none;
+}
+
+.font-value-slider::-moz-range-thumb {
+  background-color: var(--slider-thumb-color);
+  border: 0;
+}
+
+.font-value-slider:focus::-moz-range-thumb {
+  background-color: var(--highlight-color);
+}
+
+.font-value-slider::-moz-range-track {
+  background-color: var(--slider-track-color);
+  height: 3px;
+}
+
+.font-origin {
+  margin-top: -.25em;
+  color: var(--theme-comment);
+  justify-self: start;
+}
+
+.font-origin.system {
+  text-transform: capitalize;
+}
+
+.font-origin.remote {
+  display: grid;
+  grid-template-columns: 1fr 20px;
+}
+
+.font-origin.remote .url {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  direction: ltr;
+}
+
+.font-origin .copy-icon {
+  border: 0;
+  padding: 0;
+  position: relative;
+  cursor: pointer;
+  width: 12px;
+  height: 12px;
+  place-self: center;
+
+  background: url(chrome://devtools/skin/images/copy.svg) no-repeat;
+  background-size: 12px;
+  background-position-x: -1px;
+  -moz-context-properties: fill;
+  fill: var(--grey-50);
+}
+
+#font-container .accordion {
+  border-top: 1px solid var(--theme-splitter-color);
+}
+
+#font-container .accordion ._content {
+  padding: 0;
+}
+
+#font-container .accordion + .accordion {
+  border-top: none;
+}
diff --git a/devtools/client/themes/images/aboutdebugging-connect-icon.svg b/devtools/client/themes/images/aboutdebugging-connect-icon.svg
new file mode 100644
index 0000000000..162cb6611c
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-connect-icon.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="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4zm2 .51A.51.51 0 0 1 7.51 4h8.98a.51.51 0 0 1 .51.51v13.98a.51.51 0 0 1-.51.51H7.51a.51.51 0 0 1-.51-.51V4.51zM10.5 20a.5.5 0 1 0 0 1h3a.5.5 0 1 0 0-1h-3z" fill="context-fill #0b0b0b"></path>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/aboutdebugging-error.svg b/devtools/client/themes/images/aboutdebugging-error.svg
new file mode 100644
index 0000000000..077087ceb6
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-error.svg
@@ -0,0 +1,11 @@
+<!-- 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-rule="evenodd"
+			transform="rotate(180 8 8)" 
+			d="M8 1a7 7 0 1 1-7 7 7 7 0 0 1 7-7zm0 3a1 1 0 1 1-1 1 1 1 0 0 1 1-1zm0 3a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V8a1 1 0 0 1 1-1z">
+	</path>
+</svg>
diff --git a/devtools/client/themes/images/aboutdebugging-fenix-nightly.svg b/devtools/client/themes/images/aboutdebugging-fenix-nightly.svg
new file mode 100644
index 0000000000..f13a0fada3
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-fenix-nightly.svg
@@ -0,0 +1,16 @@
+<!-- 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="26 26 56 56">
+  <defs>
+    <linearGradient id="a" x1="78.92" y1="25.09" x2="37.26" y2="74.45" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#88ffd1"/>
+      <stop offset=".04" stop-color="#7bfcd6"/>
+      <stop offset=".13" stop-color="#57f3e2"/>
+      <stop offset=".24" stop-color="#1ee5f5"/>
+      <stop offset=".29" stop-color="#0df"/>
+      <stop offset="1" stop-color="#9059ff"/>
+    </linearGradient>
+  </defs>
+  <path d="M78.12 44.5c-1.19-2.85-3.51-5.74-5.4-6.74a1 1 0 0 0-1 0 .91.91 0 0 0-.39.91c-.79-1-1.62-1.91-2.46-2.86A47.35 47.35 0 0 1 64 29.62c-.19-.31-.39-.61-.58-.93l-.24-.46a4.06 4.06 0 0 1-.3-.76 1 1 0 0 0-.79-.79.81.81 0 0 0-.31 0 .87.87 0 0 0-.38.11 19.31 19.31 0 0 0-9 13.78 9.61 9.61 0 0 0-2.3.66.91.91 0 0 0 .32 1.77.78.78 0 0 0 .36-.08 7.44 7.44 0 0 1 1.87-.52 22.18 22.18 0 0 1 2.29 0h.74l.68.11h.13l.55.13.2.06.55.17h.11l.64.25.16.07.48.22.18.08.6.33c.19.11.37.23.55.35l.18.12.46.33.09.07.53.44.11.09.26.24-.4-.08h-.08l-.36-.06h-1.98l-.41.05a1 1 0 0 0-.74.55.9.9 0 0 0 .44 1.16 9.25 9.25 0 0 1 4.59 10.83c-.08.3-.17.6-.27.88v.05c-.1.27-.21.53-.32.78a.25.25 0 0 0 0 .07 7.55 7.55 0 0 1-.37.69.41.41 0 0 1 0 .09c-.13.21-.27.42-.41.61l-.06.09c-.15.19-.3.38-.45.55l-.07.08c-.16.17-.32.34-.49.49l-.08.07c-.17.16-.35.3-.53.44l-.07.06c-.19.13-.37.26-.57.38h-.07c-.19.12-.39.23-.6.34L58 64l-.68.25-.72.22-.67.14h-.07l-.65.1h-.09l-.64.06h-1.32a10.18 10.18 0 0 1-3-.57l-.68-.28a3.39 3.39 0 0 1-.39-.18 9.69 9.69 0 0 1-5.41-7.26c.26-.64 1.71-3.49 7.38-3.49 1.2 0 3.59-2.3 3.9-3.43v-.28c0-.6-.34-.75-1.67-1.4a21.42 21.42 0 0 1-4.68-2.8l-.27-.26-.34-.33-.29-.29a4.12 4.12 0 0 0-.65-.77 7.34 7.34 0 0 0-.69-.52 10.76 10.76 0 0 1 .05-5.12.89.89 0 0 0-.42-1.1.94.94 0 0 0-.82 0 18.32 18.32 0 0 0-5.33 3.82 20.05 20.05 0 0 1-.32-4.51.71.71 0 0 0 0-.25.9.9 0 0 0-.56-.65c-.23-.1-.56-.23-1.69.54a18.75 18.75 0 0 0-2.58 2.2 22.19 22.19 0 0 0-2.45 2.91 21.89 21.89 0 0 0-3.51 7.88v.18c-.05.26-.23 1.38-.26 1.63-.09.44-.16.91-.23 1.45-.1.72-.16 1.4-.19 2.11v.13a26 26 0 0 0 51.7 4.35c0-.24.06-.48.08-.73v-.25a26.27 26.27 0 0 0-1.72-13zm-18.81-3h-.11c-.21-.09-.43-.17-.64-.24l-.23-.08a5.76 5.76 0 0 0-.59-.18h-.19c-.25-.07-.51-.13-.77-.18h-.15l-.63-.19h-.24l-.65-.07h-.89a18 18 0 0 1 4.51-9.27c0 .08-.05.16-.07.24a1.42 1.42 0 0 0-.07.22 3.57 3.57 0 0 0-.1.35l-.06.21c0 .13-.07.27-.1.4s0 .12 0 .18l-.12.59-.06.37v1.33a.41.41 0 0 0 0 .11v1.36a.31.31 0 0 1 0 .1v1.06c0 .04 0 .31.08.46 0 .16.07.32.11.49v.13c0 .13.07.26.1.39v.11c0 .17.1.33.16.5v.1l.15.41.06.14c.06.15.12.31.19.47.07.17.16.33.24.5v.06zm.49-6.5c0-.2 0-.4.05-.6a.88.88 0 0 0 0-.16c0-.16.05-.32.07-.47s0-.08 0-.12.07-.36.11-.54v-.13c0-.14.07-.28.1-.42s0-.09 0-.14l.15-.49a.14.14 0 0 1 0-.06c0-.14.09-.28.14-.41l.05-.14.14-.36v-.08l.18-.4a.47.47 0 0 1 0-.1 2.59 2.59 0 0 1 .14-.29V30q.09-.18.18-.33v-.06l.14-.25v-.13c0-.06.12.23.2.35l.6 1A49.71 49.71 0 0 0 67.51 37c2.44 2.76 4.75 5.36 6.38 9.35a7.53 7.53 0 0 1 .1.83 1.27 1.27 0 0 1 0 .2v1.9c0 .11 0 .4-.07.6a2.89 2.89 0 0 1 0 .29c0 .28-.09.57-.15.85-.06.3-.14.59-.22.87l-.09.28c-.06.2-.12.4-.19.6l-.12.31c-.07.19-.15.38-.23.57s-.09.2-.13.29-.21.44-.32.66l-.09.19c-.15.28-.3.55-.47.82l-.12.21c-.13.2-.26.41-.4.61l-.19.27-.4.54a2.47 2.47 0 0 1-.21.27c-.14.19-.3.37-.46.56l-.18.21a.23.23 0 0 1-.07.07c0-.18 0-.37.07-.55s0-.1 0-.15v-.47a.57.57 0 0 1 0-.13v-1.99a.19.19 0 0 1 0-.08c0-.18 0-.37-.07-.55s0-.11 0-.16a11.5 11.5 0 0 0-.32-1.27.75.75 0 0 0 0-.16c0-.19-.11-.38-.17-.56v-.09q-.1-.31-.24-.63l-.15-.1c-.07-.18-.15-.35-.24-.53l-.06-.12-.34-.62-.07-.12c-.11-.17-.21-.34-.33-.51l-.1-.14c-.14-.2-.28-.4-.44-.59l-.07-.08-.44-.51a1.85 1.85 0 0 1-.14-.14c-.18-.19-.37-.38-.57-.56l-.2-.16h-.05l-.06-.05v-.06c-.13-.23-.28-.47-.43-.69a.86.86 0 0 0-.07-.1c-.16-.23-.32-.46-.5-.69l-.06-.07c-.18-.24-.37-.47-.58-.7-.21-.24-.43-.47-.67-.71A11.58 11.58 0 0 1 59.8 35zm1.4 29.21l.66-.57.06-.06c.2-.2.4-.4.58-.6l.06-.08c.18-.2.35-.41.51-.62l.06-.09c.16-.21.31-.43.45-.65l.05-.08q.21-.34.39-.69a.25.25 0 0 0 0-.07 7.79 7.79 0 0 0 .38-.7v-.06c.1-.25.2-.5.29-.75q.13-.39.24-.78a11.22 11.22 0 0 0-2.86-11 8.1 8.1 0 0 1 2.44 1.12l.09.07c.11.09.22.17.3.25l.46.45.14.14.27.31.23.25.22.28a1.43 1.43 0 0 1 .14.2l.19.27.13.2c.06.09.12.18.17.27a2.12 2.12 0 0 1 .11.21l.15.28.1.21.12.27.09.21c0 .09.07.19.11.28s0 .14.07.2.06.19.09.29a1.17 1.17 0 0 1 .06.2c0 .1.06.2.08.29s0 .13 0 .19l.06.32v.16l.06.39v.55a3 3 0 0 1 0 .42.57.57 0 0 0 0 .13v.76a.81.81 0 0 1 0 .16 2.44 2.44 0 0 1 0 .27v.16a2.28 2.28 0 0 0 0 .26v.4A.59.59 0 0 1 68 58v.25a.5.5 0 0 0 0 .12v.26a.36.36 0 0 1 0 .1 1.84 1.84 0 0 1-.05.25V59l-.06.26v.05c-.1.41-.2.76-.29 1l-.06.18c0 .05 0 .09-.05.13l-.4.31c-.12.09-.24.19-.36.27a4.73 4.73 0 0 1-.46.32l-.33.24-.47.3-.32.2-.48.28-.3.18-.48.25-.29.16-.49.23-.28.13-.44.18-.83.33-.23.08zM51.39 51l-.18.12-.15.07h-1.14l-.78.07H49c-.27 0-.52.07-.77.12h-.19l-.62.14h-.1c-.22.06-.44.12-.64.19h-.16l-.5.19h-.1l-.53.25-.12.06-.4.22-.1.06a4.38 4.38 0 0 0-.42.28l-.09.06-.32.24-.08.07-.34.29-.06.06-.25.25-.06.07c-.09.1-.18.19-.26.29v.05l-.19.24v.07a2.11 2.11 0 0 0-.18.27l-.14.22v-.48a.25.25 0 0 0 0-.08v-1.46a.88.88 0 0 0-.23-.71.92.92 0 0 0-.68-.3 5.48 5.48 0 0 1-4.71-2.47 8.8 8.8 0 0 1 7.61.11l.5.22.19.07.32.13.22.07.27.1.23.07.27.07a1.55 1.55 0 0 0 .23.06l.25.07.24.05h4.52zm-7.07-11.81a12.42 12.42 0 0 0 0 2.72h-.05q-.3-.11-.6-.18h-.11l-.56-.19h-.07c-.45-.08-.89-.14-1.3-.19a17.12 17.12 0 0 1 2.69-2.16zM30 54.53a8.81 8.81 0 0 1 0-2.42c.07-.5.14-1 .22-1.38v-.06c0-.25.19-1.31.23-1.48v-.16a20 20 0 0 1 3.2-7.19l.06-.09A20.82 20.82 0 0 1 36 39.06a18.77 18.77 0 0 1 1.7-1.52c0 1.66.23 4.09 1.09 5.17a.91.91 0 0 0 .21.18l.1.06a.6.6 0 0 0 .19.06.65.65 0 0 0 .2 0h1.46a8.69 8.69 0 0 1 3.65.99l.5.33c.23.16.4.28.58.43s.7.65 1.41 1.34l.26.26.37.33.08.07.41.31.08.06.4.28h.09l.46.3.13.07.48.29.47.26.12.07.48.25h.1l.44.23H49c-.26 0-.53 0-.8-.07h-.99l-.21.01h-.18l-.25-.07-.18-.06-.26-.09-.17-.05-.29-.12h-.15l-.52-.28a10.36 10.36 0 0 0-10.16.45.89.89 0 0 0-.31 1.07 7.28 7.28 0 0 0 5.82 4.24c-.12 4.66 2.75 9 7.52 11.29l.33.16a14.56 14.56 0 0 0 7.17 1.66h.22a19.62 19.62 0 0 0 7.73-1.74l.19-.09c.21-.1.42-.19.63-.3l.34-.17.51-.27.45-.26L66 64l.52-.33.37-.24.61-.43.29-.21c.31-.22.61-.46.92-.7l.1-.11c.26-.22.52-.44.77-.67l.17-.16q.41-.36.78-.75l.11-.11c.24-.25.46-.5.69-.75l.09-.1c.23-.27.45-.54.67-.82a1.83 1.83 0 0 1 .13-.16l.61-.84.07-.11c.19-.28.38-.57.55-.86a.43.43 0 0 0 0-.07c.18-.3.35-.6.51-.91 0 0 .05-.09.07-.14.16-.3.31-.62.45-.93v-.07q.21-.5.39-1 .13-.34.24-.69v2.4a1.8 1.8 0 0 1 0 .22c0 .3-.06.6-.09.89v.18c0 .25-.07.51-.12.76v.19c-.05.29-.11.57-.17.84v.19c-.06.24-.11.48-.17.71a1.24 1.24 0 0 0 0 .16c-.08.26-.15.52-.23.78l-.06.18c-.07.23-.15.46-.23.68v.09c-.09.24-.18.48-.28.71l-.06.16c-.1.23-.2.46-.3.67-2.72 5.8-9.38 11.9-19.9 11.6-11.61-.35-21.6-8.8-23.45-19.68zm48 2.76v.26c0 .23 0 .46-.08.65a24.25 24.25 0 0 1-45.65 6.4l.15.2.15.23.52.69.07.09.6.74.18.21.51.58.15.16q.33.36.66.69l.18.17.55.53.2.18c.23.22.47.43.71.63l.13.11q.31.27.63.51l.23.18.7.52.09.07.79.54.24.15c.21.15.43.28.66.42a1.18 1.18 0 0 0 .19.11c.27.17.55.33.83.48l.22.12.68.35.24.12.88.41.16.07.76.32.26.1.88.32h.05c.31.11.63.21.94.3l.27.08.79.22h.19l1 .22.24.05.79.14h.25c.33 0 .66.1 1 .13h.17l.85.08h.28q.51 0 1 .06H54a22.6 22.6 0 0 0 19.56-10.17 22.29 22.29 0 0 0 1.28-2.32 23.44 23.44 0 0 0 .94-17.16c0-.1-.06-.2-.1-.3a23.75 23.75 0 0 0-.9-3.66 15.22 15.22 0 0 1 1.65 2.93A24.39 24.39 0 0 1 78 57.29z" fill="url(#a)" data-name="Foreground Layer"/>
+</svg>
diff --git a/devtools/client/themes/images/aboutdebugging-fenix.svg b/devtools/client/themes/images/aboutdebugging-fenix.svg
new file mode 100644
index 0000000000..b1f2c1bc4d
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-fenix.svg
@@ -0,0 +1,15 @@
+<!-- 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="26 26 56 56">
+  <defs>
+    <linearGradient id="a" x1="78.92" y1="25.09" x2="37.26" y2="74.45" gradientUnits="userSpaceOnUse">
+      <stop offset=".09" stop-color="#ff980e"/>
+      <stop offset=".18" stop-color="#ff8b16"/>
+      <stop offset=".36" stop-color="#ff672a"/>
+      <stop offset=".56" stop-color="#ff3647"/>
+      <stop offset=".94" stop-color="#e31587"/>
+    </linearGradient>
+  </defs>
+  <path d="M78.12 44.5c-1.19-2.85-3.51-5.74-5.4-6.74a1 1 0 0 0-1 0 .91.91 0 0 0-.39.91c-.79-1-1.62-1.91-2.46-2.86A47.35 47.35 0 0 1 64 29.62c-.19-.31-.39-.61-.58-.93l-.24-.46a4.06 4.06 0 0 1-.3-.76 1 1 0 0 0-.79-.79.81.81 0 0 0-.31 0 .87.87 0 0 0-.38.11 19.31 19.31 0 0 0-9 13.78 9.61 9.61 0 0 0-2.3.66.91.91 0 0 0 .32 1.77.78.78 0 0 0 .36-.08 7.44 7.44 0 0 1 1.87-.52 22.18 22.18 0 0 1 2.29 0h.74l.68.11h.13l.55.13.2.06.55.17h.11l.64.25.16.07.48.22.18.08.6.33c.19.11.37.23.55.35l.18.12.46.33.09.07.53.44.11.09.26.24-.4-.08h-.08l-.36-.06h-1.98l-.41.05a1 1 0 0 0-.74.55.9.9 0 0 0 .44 1.16 9.25 9.25 0 0 1 4.59 10.83c-.08.3-.17.6-.27.88v.05c-.1.27-.21.53-.32.78a.25.25 0 0 0 0 .07 7.55 7.55 0 0 1-.37.69.41.41 0 0 1 0 .09c-.13.21-.27.42-.41.61l-.06.09c-.15.19-.3.38-.45.55l-.07.08c-.16.17-.32.34-.49.49l-.08.07c-.17.16-.35.3-.53.44l-.07.06c-.19.13-.37.26-.57.38h-.07c-.19.12-.39.23-.6.34L58 64l-.68.25-.72.22-.67.14h-.07l-.65.1h-.09l-.64.06h-1.32a10.18 10.18 0 0 1-3-.57l-.68-.28a3.39 3.39 0 0 1-.39-.18 9.69 9.69 0 0 1-5.41-7.26c.26-.64 1.71-3.49 7.38-3.49 1.2 0 3.59-2.3 3.9-3.43v-.28c0-.6-.34-.75-1.67-1.4a21.42 21.42 0 0 1-4.68-2.8l-.27-.26-.34-.33-.29-.29a4.12 4.12 0 0 0-.65-.77 7.34 7.34 0 0 0-.69-.52 10.76 10.76 0 0 1 .05-5.12.89.89 0 0 0-.42-1.1.94.94 0 0 0-.82 0 18.32 18.32 0 0 0-5.33 3.82 20.05 20.05 0 0 1-.32-4.51.71.71 0 0 0 0-.25.9.9 0 0 0-.56-.65c-.23-.1-.56-.23-1.69.54a18.75 18.75 0 0 0-2.58 2.2 22.19 22.19 0 0 0-2.45 2.91 21.89 21.89 0 0 0-3.51 7.88v.18c-.05.26-.23 1.38-.26 1.63-.09.44-.16.91-.23 1.45-.1.72-.16 1.4-.19 2.11v.13a26 26 0 0 0 51.7 4.35c0-.24.06-.48.08-.73v-.25a26.27 26.27 0 0 0-1.72-13zm-18.81-3h-.11c-.21-.09-.43-.17-.64-.24l-.23-.08a5.76 5.76 0 0 0-.59-.18h-.19c-.25-.07-.51-.13-.77-.18h-.15l-.63-.19h-.24l-.65-.07h-.89a18 18 0 0 1 4.51-9.27c0 .08-.05.16-.07.24a1.42 1.42 0 0 0-.07.22 3.57 3.57 0 0 0-.1.35l-.06.21c0 .13-.07.27-.1.4s0 .12 0 .18l-.12.59-.06.37v1.33a.41.41 0 0 0 0 .11v1.36a.31.31 0 0 1 0 .1v1.06c0 .04 0 .31.08.46 0 .16.07.32.11.49v.13c0 .13.07.26.1.39v.11c0 .17.1.33.16.5v.1l.15.41.06.14c.06.15.12.31.19.47.07.17.16.33.24.5v.06zm.49-6.5c0-.2 0-.4.05-.6a.88.88 0 0 0 0-.16c0-.16.05-.32.07-.47s0-.08 0-.12.07-.36.11-.54v-.13c0-.14.07-.28.1-.42s0-.09 0-.14l.15-.49a.14.14 0 0 1 0-.06c0-.14.09-.28.14-.41l.05-.14.14-.36v-.08l.18-.4a.47.47 0 0 1 0-.1 2.59 2.59 0 0 1 .14-.29V30q.09-.18.18-.33v-.06l.14-.25v-.13c0-.06.12.23.2.35l.6 1A49.71 49.71 0 0 0 67.51 37c2.44 2.76 4.75 5.36 6.38 9.35a7.53 7.53 0 0 1 .1.83 1.27 1.27 0 0 1 0 .2v1.9c0 .11 0 .4-.07.6a2.89 2.89 0 0 1 0 .29c0 .28-.09.57-.15.85-.06.3-.14.59-.22.87l-.09.28c-.06.2-.12.4-.19.6l-.12.31c-.07.19-.15.38-.23.57s-.09.2-.13.29-.21.44-.32.66l-.09.19c-.15.28-.3.55-.47.82l-.12.21c-.13.2-.26.41-.4.61l-.19.27-.4.54a2.47 2.47 0 0 1-.21.27c-.14.19-.3.37-.46.56l-.18.21a.23.23 0 0 1-.07.07c0-.18 0-.37.07-.55s0-.1 0-.15v-.47a.57.57 0 0 1 0-.13v-1.99a.19.19 0 0 1 0-.08c0-.18 0-.37-.07-.55s0-.11 0-.16a11.5 11.5 0 0 0-.32-1.27.75.75 0 0 0 0-.16c0-.19-.11-.38-.17-.56v-.09q-.1-.31-.24-.63l-.15-.1c-.07-.18-.15-.35-.24-.53l-.06-.12-.34-.62-.07-.12c-.11-.17-.21-.34-.33-.51l-.1-.14c-.14-.2-.28-.4-.44-.59l-.07-.08-.44-.51a1.85 1.85 0 0 1-.14-.14c-.18-.19-.37-.38-.57-.56l-.2-.16h-.05l-.06-.05v-.06c-.13-.23-.28-.47-.43-.69a.86.86 0 0 0-.07-.1c-.16-.23-.32-.46-.5-.69l-.06-.07c-.18-.24-.37-.47-.58-.7-.21-.24-.43-.47-.67-.71A11.58 11.58 0 0 1 59.8 35zm1.4 29.21l.66-.57.06-.06c.2-.2.4-.4.58-.6l.06-.08c.18-.2.35-.41.51-.62l.06-.09c.16-.21.31-.43.45-.65l.05-.08q.21-.34.39-.69a.25.25 0 0 0 0-.07 7.79 7.79 0 0 0 .38-.7v-.06c.1-.25.2-.5.29-.75q.13-.39.24-.78a11.22 11.22 0 0 0-2.86-11 8.1 8.1 0 0 1 2.44 1.12l.09.07c.11.09.22.17.3.25l.46.45.14.14.27.31.23.25.22.28a1.43 1.43 0 0 1 .14.2l.19.27.13.2c.06.09.12.18.17.27a2.12 2.12 0 0 1 .11.21l.15.28.1.21.12.27.09.21c0 .09.07.19.11.28s0 .14.07.2.06.19.09.29a1.17 1.17 0 0 1 .06.2c0 .1.06.2.08.29s0 .13 0 .19l.06.32v.16l.06.39v.55a3 3 0 0 1 0 .42.57.57 0 0 0 0 .13v.76a.81.81 0 0 1 0 .16 2.44 2.44 0 0 1 0 .27v.16a2.28 2.28 0 0 0 0 .26v.4A.59.59 0 0 1 68 58v.25a.5.5 0 0 0 0 .12v.26a.36.36 0 0 1 0 .1 1.84 1.84 0 0 1-.05.25V59l-.06.26v.05c-.1.41-.2.76-.29 1l-.06.18c0 .05 0 .09-.05.13l-.4.31c-.12.09-.24.19-.36.27a4.73 4.73 0 0 1-.46.32l-.33.24-.47.3-.32.2-.48.28-.3.18-.48.25-.29.16-.49.23-.28.13-.44.18-.83.33-.23.08zM51.39 51l-.18.12-.15.07h-1.14l-.78.07H49c-.27 0-.52.07-.77.12h-.19l-.62.14h-.1c-.22.06-.44.12-.64.19h-.16l-.5.19h-.1l-.53.25-.12.06-.4.22-.1.06a4.38 4.38 0 0 0-.42.28l-.09.06-.32.24-.08.07-.34.29-.06.06-.25.25-.06.07c-.09.1-.18.19-.26.29v.05l-.19.24v.07a2.11 2.11 0 0 0-.18.27l-.14.22v-.48a.25.25 0 0 0 0-.08v-1.46a.88.88 0 0 0-.23-.71.92.92 0 0 0-.68-.3 5.48 5.48 0 0 1-4.71-2.47 8.8 8.8 0 0 1 7.61.11l.5.22.19.07.32.13.22.07.27.1.23.07.27.07a1.55 1.55 0 0 0 .23.06l.25.07.24.05h4.52zm-7.07-11.81a12.42 12.42 0 0 0 0 2.72h-.05q-.3-.11-.6-.18h-.11l-.56-.19h-.07c-.45-.08-.89-.14-1.3-.19a17.12 17.12 0 0 1 2.69-2.16zM30 54.53a8.81 8.81 0 0 1 0-2.42c.07-.5.14-1 .22-1.38v-.06c0-.25.19-1.31.23-1.48v-.16a20 20 0 0 1 3.2-7.19l.06-.09A20.82 20.82 0 0 1 36 39.06a18.77 18.77 0 0 1 1.7-1.52c0 1.66.23 4.09 1.09 5.17a.91.91 0 0 0 .21.18l.1.06a.6.6 0 0 0 .19.06.65.65 0 0 0 .2 0h1.46a8.69 8.69 0 0 1 3.65.99l.5.33c.23.16.4.28.58.43s.7.65 1.41 1.34l.26.26.37.33.08.07.41.31.08.06.4.28h.09l.46.3.13.07.48.29.47.26.12.07.48.25h.1l.44.23H49c-.26 0-.53 0-.8-.07h-.99l-.21.01h-.18l-.25-.07-.18-.06-.26-.09-.17-.05-.29-.12h-.15l-.52-.28a10.36 10.36 0 0 0-10.16.45.89.89 0 0 0-.31 1.07 7.28 7.28 0 0 0 5.82 4.24c-.12 4.66 2.75 9 7.52 11.29l.33.16a14.56 14.56 0 0 0 7.17 1.66h.22a19.62 19.62 0 0 0 7.73-1.74l.19-.09c.21-.1.42-.19.63-.3l.34-.17.51-.27.45-.26L66 64l.52-.33.37-.24.61-.43.29-.21c.31-.22.61-.46.92-.7l.1-.11c.26-.22.52-.44.77-.67l.17-.16q.41-.36.78-.75l.11-.11c.24-.25.46-.5.69-.75l.09-.1c.23-.27.45-.54.67-.82a1.83 1.83 0 0 1 .13-.16l.61-.84.07-.11c.19-.28.38-.57.55-.86a.43.43 0 0 0 0-.07c.18-.3.35-.6.51-.91 0 0 .05-.09.07-.14.16-.3.31-.62.45-.93v-.07q.21-.5.39-1 .13-.34.24-.69v2.4a1.8 1.8 0 0 1 0 .22c0 .3-.06.6-.09.89v.18c0 .25-.07.51-.12.76v.19c-.05.29-.11.57-.17.84v.19c-.06.24-.11.48-.17.71a1.24 1.24 0 0 0 0 .16c-.08.26-.15.52-.23.78l-.06.18c-.07.23-.15.46-.23.68v.09c-.09.24-.18.48-.28.71l-.06.16c-.1.23-.2.46-.3.67-2.72 5.8-9.38 11.9-19.9 11.6-11.61-.35-21.6-8.8-23.45-19.68zm48 2.76v.26c0 .23 0 .46-.08.65a24.25 24.25 0 0 1-45.65 6.4l.15.2.15.23.52.69.07.09.6.74.18.21.51.58.15.16q.33.36.66.69l.18.17.55.53.2.18c.23.22.47.43.71.63l.13.11q.31.27.63.51l.23.18.7.52.09.07.79.54.24.15c.21.15.43.28.66.42a1.18 1.18 0 0 0 .19.11c.27.17.55.33.83.48l.22.12.68.35.24.12.88.41.16.07.76.32.26.1.88.32h.05c.31.11.63.21.94.3l.27.08.79.22h.19l1 .22.24.05.79.14h.25c.33 0 .66.1 1 .13h.17l.85.08h.28q.51 0 1 .06H54a22.6 22.6 0 0 0 19.56-10.17 22.29 22.29 0 0 0 1.28-2.32 23.44 23.44 0 0 0 .94-17.16c0-.1-.06-.2-.1-.3a23.75 23.75 0 0 0-.9-3.66 15.22 15.22 0 0 1 1.65 2.93A24.39 24.39 0 0 1 78 57.29z" fill="url(#a)" data-name="Foreground Layer"/>
+</svg>
diff --git a/devtools/client/themes/images/aboutdebugging-firefox-aurora.svg b/devtools/client/themes/images/aboutdebugging-firefox-aurora.svg
new file mode 100644
index 0000000000..d4c0cdace9
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-firefox-aurora.svg
@@ -0,0 +1,4 @@
+<!-- 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 512 512"><defs><linearGradient x1="42%" y1="-10%" x2="61%" y2="114%" id="f"><stop stop-color="#AAF2FF" offset="0%"/><stop stop-color="#0DF" offset="29%"/><stop stop-color="#0090ED" offset="61%"/><stop stop-color="#0250BB" offset="89%"/></linearGradient><linearGradient x1="38%" y1="0%" x2="63%" y2="124%" id="g"><stop stop-color="#AAF2FF" offset="0%"/><stop stop-color="#0DF" offset="29%"/><stop stop-color="#0090ED" offset="74%"/><stop stop-color="#0250BB" offset="100%"/></linearGradient><linearGradient x1="86%" y1="15%" x2="20%" y2="84%" id="k"><stop stop-color="#80EBFF" stop-opacity=".5" offset="24%"/><stop stop-color="#0DF" stop-opacity="0" offset="70%"/></linearGradient><linearGradient x1="61%" y1="-10%" x2="20%" y2="149%" id="l"><stop stop-color="#BFF3FF" stop-opacity=".9" offset="0%"/><stop stop-color="#80EBFF" stop-opacity=".5" offset="100%"/></linearGradient><linearGradient x1="51%" y1="-2%" x2="48%" y2="139%" id="m"><stop stop-color="#BFF3FF" offset="0%"/><stop stop-color="#0DF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="52%" y1="-4%" x2="47%" y2="143%" id="n"><stop stop-color="#BFF3FF" offset="0%"/><stop stop-color="#AAF2FF" stop-opacity=".5" offset="100%"/></linearGradient><linearGradient x1="53%" y1="-2%" x2="47%" y2="142%" id="o"><stop stop-color="#BFF3FF" offset="0%"/><stop stop-color="#0DF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="49%" y1="-2%" x2="57%" y2="123%" id="p"><stop stop-color="#BFF3FF" stop-opacity=".8" offset="0%"/><stop stop-color="#80EBFF" stop-opacity=".2" offset="100%"/></linearGradient><linearGradient x1="117%" y1="-23%" x2="24%" y2="128%" id="q"><stop stop-color="#BFF3FF" stop-opacity=".8" offset="0%"/><stop stop-color="#80EBFF" stop-opacity=".2" offset="100%"/></linearGradient><linearGradient x1="52%" y1="-1%" x2="47%" y2="137%" id="r"><stop stop-color="#0DF" stop-opacity=".4" offset="0%"/><stop stop-color="#0DF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="50%" y1="-12%" x2="50%" y2="99%" id="s"><stop stop-color="#BFF3FF" offset="0%"/><stop stop-color="#0DF" stop-opacity="0" offset="100%"/></linearGradient><linearGradient x1="53%" y1="-3%" x2="47%" y2="142%" id="t"><stop stop-color="#BFF3FF" stop-opacity=".8" offset="0%"/><stop stop-color="#0DF" stop-opacity="0" offset="100%"/></linearGradient><radialGradient cx="55%" cy="25%" r="60%" id="a"><stop stop-color="#0DF" stop-opacity=".4" offset="10%"/><stop stop-color="#7542E5" stop-opacity=".25" offset="90%"/></radialGradient><radialGradient cx="49.238%" cy="52.7%" fx="49%" fy="52.7%" r="51%" id="b"><stop stop-color="#7542E5" stop-opacity="0" offset="91%"/><stop stop-color="#0DF" stop-opacity=".4" offset="100%"/></radialGradient><radialGradient cx="86%" cy="-13%" fx="86%" fy="-13%" r="128%" gradientTransform="matrix(.81263 0 0 1 .16 0)" id="c"><stop stop-color="#80EBFF" offset="0%"/><stop stop-color="#0DF" offset="26%"/><stop stop-color="#0090ED" offset="53%"/><stop stop-color="#0060DF" offset="86%"/></radialGradient><radialGradient cx="47.729%" cy="40%" fx="48%" fy="40%" r="128%" gradientTransform="matrix(.81263 0 0 1 .09 0)" id="d"><stop stop-color="#321C64" stop-opacity=".8" offset="30%"/><stop stop-color="#212F83" stop-opacity=".5" offset="37%"/><stop stop-color="#0A47AC" stop-opacity=".14" offset="48%"/><stop stop-color="#0250BB" stop-opacity="0" offset="53%"/></radialGradient><radialGradient cx="90%" cy="-50%" r="210%" gradientTransform="matrix(.83857 0 0 1 .128 0)" id="e"><stop stop-color="#80EBFF" offset="0%"/><stop stop-color="#00B3F4" offset="47%"/><stop stop-color="#0060DF" offset="84%"/><stop stop-color="#592ACB" offset="100%"/></radialGradient><radialGradient cx="208%" cy="-104%" fx="208%" fy="-104%" r="300%" gradientTransform="matrix(1 0 0 .99746 0 -.003)" id="h"><stop stop-color="#0DF" offset="0%"/><stop stop-color="#0090ED" offset="82%"/></radialGradient><radialGradient cx="155%" cy="-45%" fx="155%" fy="-45%" r="313%" gradientTransform="matrix(.8937 0 0 1 .165 0)" id="i"><stop stop-color="#80EBFF" offset="29%"/><stop stop-color="#00B3F4" offset="100%"/></radialGradient><radialGradient cx="15%" cy="-43%" fx="15%" fy="-43%" r="230%" gradientTransform="matrix(.9814 0 0 1 .003 0)" id="j"><stop stop-color="#AAF2FF" offset="18%"/><stop stop-color="#0DF" offset="43%"/><stop stop-color="#0060DF" offset="69%"/></radialGradient></defs><path fill="#09204d" d="M146.622 289.098l15.141 41.978 22.752 30.697 53.417 10.188 25.555 2.174 43.626-10.899 18.794-18.015-179.285-56.123z"/><path fill="#09204d" d="M372.686 227.178l-5.348-17.744-15.292-28.856-17.493-18.437-18.57-13.258-16.124-6.329-19.347-6.882-31.855-2.027-20.087 3.625-16.39 5.038-29.082 17.02-18.176 20.277-16.76 27.22-6.593 23.164-1.232 35.146 6.285 23.963 13.863 27.282 9.778 13.177 13.52 12.395 16.886 11.423 20.822 9.056 34.846 4.09 18.195.507 26.929-7.585 24.07-13.21 15.486-13.211 12.008-14.326 16.977-33.232 3.748-22.733-1.064-35.553z"/><path fill="#0e56d7" d="M249.24 149.615l-14.266 14.154 23.271 9.433 17.311-21.467-26.316-2.12z"/><path fill="#1053d1" d="M258.245 173.202l45.053-1.367-27.742-20.1-17.311 21.467z"/><path fill="#0b4fbf" d="M299.951 151.584l-24.395.151 27.742 20.1 25.654-1.675-29.001-18.576z"/><path fill="#0b48b0" d="M328.952 170.16l-14.584-20.11 20.185 12.091-5.601 8.019z"/><path fill="#0c45a7" d="M348.265 182.475l-19.313-12.315 5.601-8.019 13.712 20.334z"/><path fill="#0f46af" d="M328.952 170.16l-3.231 13.777 17.664 7.06-14.433-20.837z"/><path fill="#0c47ad" d="M328.952 170.16l19.313 12.315-4.88 8.522-14.433-20.837z"/><path fill="#0e4fc3" d="M303.298 171.835l25.654-1.675-3.231 13.777-22.423-12.102z"/><path fill="#174dca" d="M303.298 171.835l-20.269 18.347 26.087 12.775-5.818-31.122z"/><path fill="#1650d4" d="M258.245 173.202l45.053-1.367-20.269 18.347-24.784-16.98z"/><path fill="#1246b2" d="M325.721 183.937l12.268 23.791 5.396-16.731-17.664-7.06z"/><path fill="#133ea1" d="M337.989 207.728l5.396-16.731 12.853 30.569-18.249-13.838z"/><path fill="#103d98" d="M343.385 190.997l19.589 14.346-6.736 16.223-12.853-30.569z"/><path fill="#0b3785" d="M348.265 182.475l3.781-1.897 10.928 24.765-14.709-22.868z"/><path fill="#0b3685" d="M362.974 205.343l4.364 4.091-15.292-28.856 10.928 24.765z"/><path d="M362.974 205.342l-14.709-22.867-4.88 8.525zm-28.421-43.2l13.712 20.334 3.781-1.9z" fill="#0c3b91"/><path fill="#0b3279" d="M371.703 241.042l-4.365-31.608 5.348 17.744-1.054 13.864h.071z"/><path fill="#0f388d" d="M362.974 205.343l8.729 35.699-4.365-31.608-4.364-4.091z"/><path fill="#0d3481" d="M356.238 221.566l15.465 19.476-8.729-35.699-6.736 16.223z"/><path fill="#0b2e71" d="M371.632 241.042l1.054-13.864 1.064 35.553-2.047-21.689h-.071z"/><path fill="#0e2f77" d="M369.111 269.139l4.639-6.408-2.047-21.689-2.592 28.097z"/><path fill="#0e2969" d="M370.002 285.464l-3.709 1.787 7.457-24.52-3.748 22.733z"/><path fill="#0c2a69" d="M366.293 287.251l7.457-24.52-4.639 6.408-2.818 18.112z"/><path fill="#123180" d="M369.111 269.139l2.592-28.097-7.945 9.372 5.353 18.725z"/><path fill="#112b70" d="M366.293 287.251l2.818-18.112-15.324 25.753 12.506-7.641z"/><path fill="#12378c" d="M356.238 221.566l15.465 19.476-7.945 9.372-7.52-28.848z"/><path fill="#122e7b" d="M369.111 269.139l-5.353-18.725-8.079 23.064 13.432-4.339z"/><path fill="#11296c" d="M353.025 318.696l13.268-31.445-12.413 22.923-.855 8.522z"/><path fill="#142a72" d="M353.88 310.174l12.413-22.923-12.506 7.641.093 15.282z"/><path d="M366.293 287.251L353.025 318.7 370 285.464zm-25.276 45.771l12.008-14.322.855-8.522zm-15.486 13.211l15.486-13.211-16.366 7.527z" fill="#112768"/><path fill="#1c226a" d="M235.149 355.435l-15.646 3.827.477-10.919 15.169 7.092z"/><path fill="#182b7a" d="M148.162 206.825l4.313-1.598-10.906 24.762 6.593-23.164z"/><path fill="#1f308d" d="M141.569 229.989l8.257-1.536 2.649-23.226-10.906 24.762z"/><path fill="#1e2b7f" d="M142.062 259.728l-.493-29.739 8.257-1.536-7.764 31.275z"/><path d="M325.721 183.937l-16.605 19.02 28.873 4.771zm-144.9-19.509l21.2-14.5-18.916 9.4z" fill="#1346b5"/><path fill="#1244ac" d="M183.098 159.328l29.082-17.02-10.166 7.619-18.916 9.401"/><path fill="#0e4ab6" d="M202.014 149.927l26.556-12.657-16.39 5.038-10.166 7.619z"/><path d="M303.3 171.835l5.818 31.122 16.605-19.02zm-85.11-23.382l24.738-9.893-14.356-1.29z" fill="#0e4bba"/><path fill="#0a4ebc" d="M248.657 133.645l-20.087 3.625 14.356 1.29 5.731-4.915z"/><path fill="#0c54cc" d="M267.655 138.314l-24.729.246 5.731-4.915"/><path d="M314.368 150.05l-14.417 1.534 29 18.576zm-46.713-11.736l32.2 4.24-19.347-6.882z" fill="#0b4bb4"/><path fill="#0c3889" d="M314.368 150.05l-14.509-7.496 16.124 6.329-1.615 1.167z"/><path d="M146.622 289.1l9.52 7.834-14.079-37.2zm131.394 73.985l8.369-19.7-30.5 8.194zm8.369-19.7l25.5 7.075 1.547-19.716z" fill="#202575"/><path fill="#1b2773" d="M324.651 340.549l-11.222-9.81 27.114-18.018-15.892 27.828z"/><path fill="#15276d" d="M340.544 312.721l-15.893 27.828 16.366-7.527 12.863-22.848-13.336 2.547z"/><path d="M315.983 148.883l-1.615 1.167 20.185 12.091zm-16.032 2.7l14.417-1.534-14.509-7.5z" fill="#0c409d"/><path d="M248.657 133.645l19 4.669 12.857-2.642zm51.2 8.909l-32.2-4.24 32.3 13.27z" fill="#0b4cb7"/><path fill="#0b55ce" d="M267.655 138.314l7.901 13.421 24.395-.151-32.296-13.27z"/><path fill="#0a52c5" d="M267.655 138.314l7.901 13.421-26.316-2.119 18.415-11.302z"/><path fill="#0951c4" d="M242.926 138.56l6.314 11.056 18.415-11.302-24.729.246z"/><path fill="#0b50c4" d="M218.188 148.453l24.738-9.893 6.314 11.056-31.052-1.163z"/><path d="M202.014 149.927l16.174-1.474 10.382-11.183zm16.174-1.474l16.786 15.316 14.266-14.154z" fill="#0f4dbf"/><path fill="#1546b6" d="M218.188 148.453l-27.326 25.622 11.152-24.148 16.174-1.474z"/><path fill="#1549bd" d="M190.862 174.075l17.437 2.9 9.889-28.522-27.326 25.622z"/><path fill="#144bc3" d="M208.299 176.975l9.889-28.522 16.787 15.316-26.676 13.206z"/><path fill="#173794" d="M164.922 179.605l1.062 10.307 14.834-25.484-15.896 15.177z"/><path fill="#192f84" d="M152.475 205.227l12.447-25.622 1.062 10.307-13.509 15.315z"/><path fill="#1a389b" d="M165.984 189.912l14.834-25.484 10.044 9.647-24.878 15.837z"/><path fill="#1d3089" d="M165.086 212.006l.898-22.094-13.509 15.315 12.611 6.779z"/><path fill="#1e389f" d="M165.086 212.006l.898-22.094 17.53 14.231-18.428 7.863z"/><path fill="#1c40af" d="M183.514 204.143l7.348-30.068-24.878 15.837 17.53 14.231z"/><path fill="#1e41b7" d="M183.514 204.143l7.348-30.068 17.437 2.9-24.785 27.168z"/><path fill="#192c7d" d="M149.826 228.453l2.649-23.226 12.611 6.779-15.26 16.447z"/><path d="M278.016 363.083l23.445-3.64 10.42-8.989zm-137.679-97.948l1.726-5.407-.494-29.739zm9.489-36.682l-7.763 31.275 14.079 37.2-6.871-43.1z" fill="#162467"/><path fill="#1a236a" d="M156.141 296.933l11.615 1.628-8.133-18.986-3.482 17.358z"/><path d="M324.651 340.549l-12.77 9.905-10.42 8.989 24.07-13.21zm-68.314 25.972l18.195.507 26.929-7.585-23.445 3.64zm-89.358-48l12.207 2.348-11.43-22.3z" fill="#132668"/><path d="M219.98 348.343l-20.668-15.908-8.59 8.259 28.778 18.568zM146.622 289.1l13.863 27.282-4.343-19.448zm-6.285-23.963l6.285 23.963-4.559-29.37zm115.547 86.438l-35.9-3.23 15.169 7.093-15.653 3.824-18.834-5.887 20.822 9.056 34.846 4.09 21.679-3.438zm-88.128-53.012l-11.614-1.629 10.837 21.585zm-18.485-44.733l6.871 43.1 3.481-17.358zm29.915 67.035l-12.207-2.348-6.494-2.137 9.778 13.177 13.52 12.395 16.886 11.423-9.947-12.681z" fill="#1b2268"/><path fill="#212a81" d="M149.826 228.453l16.39 25.352-1.13-41.799-15.26 16.447z"/><path fill="#21267a" d="M149.271 253.829l10.352 25.746 6.593-25.77-16.945.024z"/><path fill="#262781" d="M159.623 279.575l6.593-25.77 8.194 20.362-14.787 5.408z"/><path fill="#272379" d="M167.756 298.561l31.424 19.472-24.77-43.866-6.654 24.394z"/><path d="M160.485 316.38l6.494 2.137-10.837-21.585zm69.413 11.2l-9.918 20.759 35.9 3.23zm-62.142-29.023l11.43 22.3 11.536 19.829 8.59-8.259-.132-14.4z" fill="#1e226d"/><path d="M313.428 330.738l-1.547 19.716 12.77-9.905zm-54.935-2.829l-2.609 23.664 30.5-8.194-1.086-26.6z" fill="#222475"/><path d="M149.271 253.83l16.944-.025-16.389-25.352zM285.3 316.777l1.086 26.6 27.043-12.641z" fill="#23277d"/><path fill="#1e2776" d="M285.299 316.777l17.405-15.76 10.725 29.722-28.13-13.962z"/><path fill="#222b86" d="M313.429 330.739l13.156-39.844-23.881 10.122 10.725 29.722z"/><path fill="#192974" d="M340.543 312.721l-27.114 18.018 13.156-39.844 13.958 21.826z"/><path fill="#172a75" d="M353.787 294.892l-27.202-3.998 13.959 21.827 13.336-2.547-.093-15.282z"/><path fill="#172d7d" d="M355.679 273.478l-29.094 17.416 27.202 3.998 15.324-25.753-13.432 4.339z"/><path d="M152.475 205.227l12.447-25.622-16.76 27.22zm192.352 31.713l10.852 36.538 8.079-23.064z" fill="#18338a"/><path fill="#153791" d="M363.758 250.414l-7.52-28.848-11.411 15.373 18.931 13.475z"/><path fill="#1b318b" d="M326.585 290.895l29.094-17.417-28.198-12.552-.896 29.969z"/><path fill="#242d8d" d="M326.585 290.895l-26.367-26.642 2.486 36.764 23.881-10.122z"/><path fill="#2a2b8f" d="M285.299 316.777l-20.243-17.923 37.648 2.163-17.405 15.76z"/><path d="M167.756 298.561l6.654-24.393-14.787 5.406zm97.3.293l-6.563 29.055 26.807-11.132z" fill="#27267f"/><path fill="#2d2381" d="M223.15 304.797l-19.487-9.905-4.483 23.141 30.718 9.551 28.595.325-35.343-23.112z"/><path fill="#2f2485" d="M258.492 327.909l6.564-29.055-41.906 5.943 35.342 23.112z"/><path fill="#233196" d="M166.216 253.805l8.406-26.833-9.536-14.966 1.13 41.799z"/><path fill="#293cb7" d="M183.514 204.143l36.893-10.754-19.487 39.809-17.406-29.055z"/><path fill="#25339c" d="M326.585 290.895l-26.367-26.642 27.263-3.327-.896 29.969z"/><path fill="#19348f" d="M355.679 273.478l-10.852-36.539-17.346 23.987 28.198 12.552z"/><path fill="#2a309a" d="M302.704 301.017l-30.153-29.154 27.667-7.61 2.486 36.764z"/><path fill="#302b96" d="M265.056 298.854l37.648 2.163-30.153-29.154-7.495 26.991z"/><path fill="#3630a7" d="M265.056 298.854l-20.622-16.791 28.117-10.2-7.495 26.991z"/><path d="M180.818 164.428l2.28-5.1-18.176 20.277zm157.171 43.3l6.838 29.212 11.411-15.374z" fill="#173da2"/><path fill="#2a36a8" d="M183.514 204.143l17.406 29.055-26.298-6.226 8.892-22.829z"/><path fill="#312e9f" d="M174.622 226.972l26.298 6.226-17.784 28.011-8.514-34.237z"/><path fill="#184dcd" d="M220.407 193.389l14.568-29.62-26.676 13.206 12.108 16.414z"/><path fill="#272986" d="M166.216 253.805l16.92 7.404-8.726 12.958-8.194-20.362z"/><path fill="#2c2584" d="M183.136 261.209l-8.726 12.959 24.77 43.865 4.483-23.141-20.527-33.683z"/><path fill="#32268b" d="M203.663 294.892l2.744-40.752-23.271 7.069 20.527 33.683z"/><path fill="#372999" d="M203.663 294.892l40.771-12.829-38.027-27.923-2.744 40.752z"/><path fill="#392da5" d="M244.434 282.063l-3.973-31.508-34.054 3.585 38.027 27.923z"/><path fill="#3338bc" d="M240.461 250.555l28.757-10.754 3.333 32.062-32.09-21.308z"/><path fill="#362896" d="M223.15 304.797l41.906-5.943-20.622-16.791-21.284 22.734z"/><path fill="#35268f" d="M223.15 304.797l-19.487-9.905 40.771-12.829-21.284 22.734z"/><path fill="#2648d3" d="M220.407 193.389l24.973 2.642-10.405-32.262-14.568 29.62z"/><path fill="#1057dc" d="M258.245 173.202l-23.27-9.433 10.405 32.262 12.865-22.829z"/><path fill="#1653da" d="M258.245 173.202l24.784 16.98-37.649 5.849 12.865-22.829z"/><path fill="#2b46d5" d="M245.38 196.031l36.93 19.583-13.092 24.187-23.838-43.77z"/><path fill="#244ad7" d="M282.31 215.614l.719-25.432-37.649 5.849 36.93 19.583z"/><path fill="#2547cf" d="M282.31 215.614l.719-25.432 26.087 12.775-26.806 12.657z"/><path fill="#333cc5" d="M245.38 196.031l23.838 43.77-41.811-20.942 17.973-22.828z"/><path fill="#3833b6" d="M240.461 250.555l28.757-10.754-41.811-20.942 13.054 31.696z"/><path fill="#2a41c6" d="M269.218 239.801l36.876-6.735-23.784-17.452-13.092 24.187z"/><path fill="#2045c1" d="M309.116 202.957l-3.022 30.109-23.784-17.452 26.806-12.657z"/><path fill="#1b43b7" d="M309.116 202.957l17.406 23.638-20.428 6.471 3.022-30.109z"/><path fill="#1742af" d="M337.989 207.728l-28.873-4.771 17.406 23.638 11.467-18.867z"/><path d="M190.862 174.075l11.152-24.148-21.2 14.5zm147.127 33.653L326.522 226.6l18.305 10.345z" fill="#1740a9"/><path fill="#1b3ca4" d="M327.481 260.926l17.346-23.987-18.305-10.344.959 34.331z"/><path fill="#1f3dad" d="M327.481 260.926l-.959-34.331-20.428 6.471 21.387 27.86z"/><path d="M183.515 204.143l36.892-10.754-12.107-16.414zm85.7 35.658l31 24.452 5.876-31.187z" fill="#2543c3"/><path fill="#2e37b2" d="M272.551 271.863l27.667-7.61-31-24.452 3.333 32.062z"/><path fill="#2d40c7" d="M220.407 193.389l7 25.47 17.973-22.828-24.973-2.642z"/><path fill="#3537b8" d="M220.407 193.389l-19.487 39.809 26.487-14.339-7-25.47z"/><path fill="#3931b0" d="M227.407 218.859l-21 35.281 34.054-3.585-13.054-31.696z"/><path d="M240.461 250.555l3.973 31.508 28.117-10.2zm-34.054 3.585l21-35.28-26.487 14.34z" fill="#3735b8"/><path fill="#342892" d="M183.136 261.209l17.784-28.011 5.487 20.942-23.271 7.069z"/><path d="M200.669 353.375l18.834 5.887-28.781-18.568zm-1.357-20.94l20.668 15.908 9.918-20.759-30.718-9.551zm56.572 19.138l2.609-23.664-28.595-.325zm30.5-8.194l-8.369 19.7 33.865-12.629z" fill="#232372"/><path fill="#2a2f96" d="M166.216 253.805l8.406-26.833 8.514 34.237-16.92-7.404z"/><path d="M174.622 226.972l8.893-22.829-18.429 7.863zm131.472 6.094l-5.876 31.187 27.263-3.327z" fill="#2636a5"/><path d="M374.274 262.764v-.055l-1.064-35.547v-.04c0-.013 0-.025-.006-.037s-.006-.032-.01-.047v-.011l-5.345-17.738v-.011l-.011-.029c0-.013-.01-.026-.016-.038l-.007-.016-15.293-28.856-.009-.014-.019-.03-.017-.025-.011-.015-.016-.018-.011-.014-17.503-18.443-.008-.007-.012-.012c-.01-.01-.022-.018-.033-.027l-.023-.02-18.565-13.253h-.009l-.017-.012a.36.36 0 00-.039-.02.3.3 0 00-.04-.02h-.008l-16.113-6.324h-.025l-19.343-6.88h-.018l-.037-.01-.034-.007h-.054l-31.855-2.027h-.055a.455.455 0 00-.052 0h-.02l-20.087 3.625h-.043l-.036.01-16.372 5.033-.036.014c-.014.006-.029.012-.042.019l-.021.01h-.007l-29.082 17.021h-.006l-.024.016-.023.015-.019.017-.018.014-.02.022-.016.014-.007.008-18.169 20.268-.007.01-.013.015-.012.017-.016.023-.008.01-.006.01-16.772 27.198-.008.016-.016.028-.014.033c0 .013-.01.025-.014.038l-.006.016-6.593 23.165v.076a.26.26 0 00-.005.039v.01l-1.232 35.146v.087a.3.3 0 00.008.043v.036l6.281 23.948v.01l.006.018a.521.521 0 00.02.05c0 .008.006.017.01.025l13.86 27.274.009.013a.492.492 0 00.028.045l.007.013 9.772 13.169.012.015c.009.011.02.02.029.03a.25.25 0 00.022.024l13.52 12.4c.011.01.022.017.034.026l.027.022 16.885 11.422.012.006.04.024.022.01h.007l20.822 9.056.021.007a.353.353 0 00.046.015l.024.007.037.007h.021l34.846 4.091h.047l18.195.506h.019a.569.569 0 00.1-.01l.022-.007h.015l26.929-7.585.016-.006.023-.006.021-.01.015-.007.032-.014.011-.006 24.056-13.2h.007l.01-.006a.348.348 0 00.039-.028l.032-.022 15.486-13.21.016-.017.02-.018.02-.022h.006l12.006-14.323.005-.007a.531.531 0 00.042-.063l.015-.022v-.006l17.012-33.221c0-.007.006-.016.01-.024l.017-.039v-.019a.3.3 0 00.011-.043c0-.009.006-.018.008-.028l3.747-22.727v-.039zM184.111 341.54l-3.5-3.212 7.877 6.171zm51.108 13.348l-12.307-5.754 29.13 2.62zm4.488-104.781l-32.312 3.4 19.926-33.476zm-11.278-30.148l39.477 19.772-27.152 10.154zM240 251.131l3.756 29.784-35.947-26.4zm3.285 30.742L204.24 294.16l2.627-39.03zm-2.161-30.245l30.265 20.1-26.518 9.62zm.482-.941l27.156-10.155 3.147 30.275zm41.723-34.975l25.171-11.883-2.838 28.271zm21.471 17.056l-34.6 6.32 12.286-22.688zm-35.583 5.932l-22.539-41.385L281.6 215.83zm-1.263-.118l-39.735-19.9 17.081-21.699zM206.6 252.791l-5.063-19.328 24.445-13.233zm-3.35 40.409l-19.312-31.688 21.892-6.65zm39.432-10.038l-19.646 20.985-17.987-9.142zm29.089-10.46l-7.007 25.234-19.279-15.7zm-1.9-31.718l29.206 23.037-26.067 7.169zm.586-.877l34.978-6.389-5.573 29.582zm36.241-7.785l2.802-27.952 16.159 21.946zm19.317-5.018l.894 32.012-19.941-25.976zm-43.154-12.532l.671-23.76 24.368 11.937zm-1.053-.021l-34.786-18.446 35.463-5.509zm-54.17 2.962l-6.519-23.722 23.259 2.46zm-.849.882l-24.674 13.357 18.153-37.084zm-21.02 35.188l-21.429 6.509 16.377-25.792zm-3.881 39.205l-26.755-18.954 7.981-11.852zm2.16 2.687l17.98 9.139-22.117 12.216zm40.435-12.9l19.309 15.725-39.239 5.564zm28.339-9.924l28.5 27.556-35.584-2.045zm.756-.731l26.158-7.195 2.35 34.759zm32.816-37.805l20.109 26.2-25.634 3.129zm20.68-6.81l16.983 9.6-16.094 22.253zm.179-1.106l10.517-17.3 6.272 26.791zm-.773-.753l-16.174-21.965 26.83 4.433zm-42.523-35.6l19-17.195 5.454 29.168zm-37.587 5.3l12.052-21.386 23.217 15.907zm-25.159-2.4l13.662-27.779 9.758 30.256zM200.873 232.1l-16.558-27.64 35.1-10.23zm-17.522 27.79l-8.009-32.208 24.739 5.857zm-8.823 13.161l-7.344-18.251 15.164 6.635zm28.554 22.073l-4.147 21.4-22.911-40.574zm19.749 10.449l6.283 21.217-28.6-8.892zm41.544-6.092l-6.229 27.573-33.54-21.933zm37.046 1.988l-16.125 14.6-18.757-16.607zm-.582-35.841l24.827 25.086-22.487 9.531zm.507-.983l25.59-3.124-.841 28.131zm43.281-26.531l10.222 34.42-26.563-11.824zm-5.793-29.086l16.672 12.642-10.425 14.045zm-28.7-6.435l15.475-17.727 11.434 22.173zm-.7-.8l-5.416-28.972 20.874 11.266zm-26.45-12.279l-23.114-15.836 42.017-1.275zm-37.472 5.211l-9.691-30.046 21.673 8.785zm-25.2-2.344l-11.222-15.213 24.724-12.24zm-.779.715l-34.373 10.02 23.095-25.316zm-19.708 39.3l-24.5-5.8 8.283-21.265zm-17.462 27.9l-15.508-6.786 7.7-24.594zm-8.647 13.562l-13.34 4.878 5.947-23.247zm23.993 42.645l-29.346-18.185 6.214-22.78zm29.881 10.911l-27.761 4.4-.12-13.071zm-3.533-21.4l32.643 21.349-26.4-.3zm41.312-6.184l18.949 16.777-25.088 10.426zm37.1 2.1l10.014 27.752-26.259-13.032zm.893-.628l22.354-9.475-12.316 37.3zm24.615-39.581l26.558 11.822-27.4 16.4zm17.784-23.472l17.364 12.359-7.411 21.156zm-.2-1.43l10.437-14.061 6.878 26.384zm-6.964-29.288l4.846-15.025 11.542 27.452zm-.728-1.173l-11.043-21.415 15.9 6.355zm-32.714-34.118l23.122-1.51-2.911 12.418zm-45.783.4l16.28-20.189 26.09 18.9zm-.962-.484l-8.382-21.953 24.5 1.973zm-1.087.1l-21.413-8.68 13.126-13.023zm-48.106 3.674l9.207-26.556 15.628 14.26zm-24.7 26.331l6.742-27.593 16 2.662zm-10.006 23.548l-8.646-13.568 16.707-7.128zm-.462 1.234l-7.39 23.589-.993-36.745zm-8.509 27.283l-6.027 23.556-9.462-23.533zm-15.73-1.026l.5-23.126 14.936 23.1zm23.825 21.706l-5.99 21.956-7.32-17.089zm24.036 42.707l-18.187 2.576L169.087 300zm.988.921l.118 12.883-18-10.35zm30.333 9.621l-9.207 19.271-19.185-14.764zm1.073.195l24.328 22.457-33.612-3.023zm1.193-.33l26.648.3-2.431 22.053zm53.542-10.568l1.017 24.914-26.117-14.489zm1.058.091l26.356 13.081-25.34 11.845zm40.876-25.533l13.084 20.459-25.416 16.889zm.911-.528l25.192 3.7-12.261 16.518zm.469-.993l26.946-16.13-1.753 19.832zm35.589-38.438l4.758 16.645-11.94 3.857zm-6.331-28.306l13.647 17.186-7.011 8.27zm-12.77-31.3l17.724 12.98-6.091 14.675zm-18.269-8.925l2.857-12.184 12.765 18.428zm-22.6-12.337l-3.076-18.616 26.658 17.076zm-1.17-.621l-25.4-18.412 22.342-.138zm-51.684-21.438l16.587-10.179 7.116 12.089zm-15.927 13.822L219.6 149.031l28.41 1.069zm-27.013 13.342L192 173.731l24.995-23.436zM183.2 203.211l-16.318-13.247 23.158-14.743zm-.693.791l-16.861 7.198.822-20.214zm-16.868 47.942l-15.149-23.433 14.1-15.2zm-6.563 27.681L156.2 293.96l-5.674-35.6zm.73 1.714l7.1 16.572-10.138-1.421zm18.42 38.807l-10.7-2.059.681-17.5zm20.217 12.395l-7.6 7.31L180.63 322.3zm.907.586l18.258 14.053-25.846-6.757zm59.579-4.375L285 343.209l-28.5 7.657zm53.9 2.845l-1.427 18.18-23.502-6.524zm26.153-17.21l-14.469 25.343-10.221-8.93zm14.288-17.917l.08 13.271-11.58 2.211zm2.9-22.6l11.774-3.8-13.433 22.574zm8.168-23.331l6.685-7.885-2.181 23.639zm-7.5-29.057l6-14.454 7.777 31.805zm-12.763-30.632l4.216-7.362L361 203.245zm-.732-.838l-12.472-18 16.689 10.641zm-41.849-38.064l12.626-1.348 12.773 17.613zm-25.638-.74l-6.956-11.814 28.43 11.681zm-26.428-2.324l-5.6-9.808 21.937-.218zm-1.114.172l-27.631-1.035 22.013-8.8zm-55.843 22.789l9.894-21.422 14.349-1.309zm-1.778 1.339l-9.044-8.687 19.088-13.059zm-.678.807l-22.487 14.316 13.409-23.036zm-25.421 37.155l-11.286-6.068 12.09-13.706zm-.356 1l-13.707 14.774 2.38-20.862zm-15.488 41.43l-5.795 4.742 6.241-25.143zm.145 1.239l5.916 37.113-12.123-32.028zm18.317 44.2l-.679 17.44-9.472-18.863zm11.639 22.32l9.621 16.538-19.8-18.5zm40.585 27.409l-.419 9.58-25.251-16.292zm1.036.409l13.1 6.127-13.516 3.306zm34.9 3.048l.407 13.437-19.045-9.965zm30.1-8.035l-7.725 18.189-20.43-10.625zm1.21-.157l23.492 6.518-31.2 11.637zm27.182-12.185l9.954 8.7-11.318 8.785zm27.01-18.633L352.355 311l-25.148 26.135zm13.513-5.071l-.079-12.935 10.585-6.468zm.93-14.783l12.849-21.592-2.356 15.185zm16.385-46.629l1.5 15.876-3.395 4.69zm-7.8-39.771l2.936 2.753 2.937 21.265zm-14.882-24.255l2.763-1.386 7.987 18.1zm-19.32-12.67l4.849-6.942 11.869 17.6zm-.753-.759L316.3 151.821l17.5 10.479zM300.472 151l-.078-7.579 12.177 6.291zm-1.055-.205l-27.832-11.435 27.752 3.654zm-55.054-12.775l4.431-3.8 14.693 3.612zm-24.2 9.076l8.616-9.281 11.914 1.071zm-2.226.851l-13.047 1.19 21.422-10.211zm-35.88 14.994l1.443-3.228 11.974-5.951zM166.34 188.25l-.87-8.444 13.03-12.434zm-.905 1.487l-10.8 12.244 9.951-20.485zm-16.09 38.27l-6.9 1.283 9.107-20.678zm-.229 1.111l-6.6 26.572-.419-25.267zm5.832 66.152l-7.839-6.451-3.754-24.183zm10.991 22.352l-5.007-1.649-3.349-14.994zm21.4 20.632l-16.633-9.054-2.67-8.975zm3.034 2.848l7.2 9.181-22.015-17.245zm2.694 1.73l22.9 14.774-14.985-4.684zm42.013 13.16l17.8 9.311-30.938-6.1zm21.356-3.54l19.923 10.361-19.515 3.095zm52.882-.483l-8.088 6.977-18.2 2.826zm14.949-10.458l.673 4.353-10.454 3.236zm27.127-28l-10.754 19.1-13.682 6.293zm3-3.184l7.2-13.3-7.7 18.243zm15.219-40.987l2.719-3.755-4.371 14.37zm2.615-28.34v-.032l-.039-.279.271-3.56.276 9.219zm-.723-5.242l-2.72-19.7 3.368 11.179zm-8.092-30.726l-4.965-11.251 6.948 13.109zm-14.97-23.232l-9.915-14.7 12.649 13.332zm-33.121-31.789l.663-.479 7.622 5.442zm-1-.574l-5.154-2.663 5.727 2.248zM270.816 138.2l9.658-1.985 14.533 5.17zm-3.151-.425l-13.151-3.232 22.051 1.4zm-24.913.241l-10.258-.922 14.352-2.59zm-36.2 9.164l5.869-4.4 9.461-2.908zm-4.817 2.3l-5.091 2.53 7.827-4.58zm-21.356 14.64l-6.039 5.766 6.905-7.7zm-28.285 40.688l-2.685 1 10.431-16.942zm-3.5 2.416l2.9-1.073-7.327 16.636zm-7.215 43.167l.154 9.26-.533 1.683zm.5 11.626l2.642 17.019-3.642-13.886zm13.782 35.206l3.393 15.19-10.823-21.313zm10.886 21.707l2.355 7.919-7.002-9.449zm52.607 40.775l.983 1.567-10.288-4.472zm2.643 2.234l-1.208-1.926 22.392 4.412zm54.851 1.892L274.3 366.5l-12.292-.342zm1.631-.258l14.653-2.275-16.831 4.74zm33.857-12.65l8.593-2.658-15.153 8.317zm13.765-5.7l-.675-4.361 12.557-5.775zm27.2-32.6l-.588 5.86-8.258 9.852zm13.6-24.986l2.122-1.022-9.712 19.012zm2.826-2.527l-2.382 1.147 4.788-15.743z" fill="url(#a)"/><path d="M374.274 262.764v-.055l-1.064-35.547v-.04c0-.013 0-.025-.006-.037s-.006-.032-.01-.047v-.011l-5.345-17.738v-.011l-.011-.029c0-.013-.01-.026-.016-.038l-.007-.016-15.293-28.856-.009-.014-.019-.03-.017-.025-.011-.015-.016-.018-.011-.014-17.503-18.443-.008-.007-.012-.012c-.01-.01-.022-.018-.033-.027l-.023-.02-18.565-13.253h-.009l-.017-.012a.36.36 0 00-.039-.02.3.3 0 00-.04-.02h-.008l-16.113-6.324h-.025l-19.343-6.88h-.018l-.037-.01-.034-.007h-.054l-31.855-2.027h-.055a.455.455 0 00-.052 0h-.02l-20.087 3.625h-.043l-.036.01-16.372 5.033-.036.014c-.014.006-.029.012-.042.019l-.021.01h-.007l-29.082 17.021h-.006l-.024.016-.023.015-.019.017-.018.014-.02.022-.016.014-.007.008-18.169 20.268-.007.01-.013.015-.012.017-.016.023-.008.01-.006.01-16.772 27.198-.008.016-.016.028-.014.033c0 .013-.01.025-.014.038l-.006.016-6.593 23.165v.076a.26.26 0 00-.005.039v.01l-1.232 35.146v.087a.3.3 0 00.008.043v.036l6.281 23.948v.01l.006.018a.521.521 0 00.02.05c0 .008.006.017.01.025l13.86 27.274.009.013a.492.492 0 00.028.045l.007.013 9.772 13.169.012.015c.009.011.02.02.029.03a.25.25 0 00.022.024l13.52 12.4c.011.01.022.017.034.026l.027.022 16.885 11.422.012.006.04.024.022.01h.007l20.822 9.056.021.007a.353.353 0 00.046.015l.024.007.037.007h.021l34.846 4.091h.047l18.195.506h.019a.569.569 0 00.1-.01l.022-.007h.015l26.929-7.585.016-.006.023-.006.021-.01.015-.007.032-.014.011-.006 24.056-13.2h.007l.01-.006a.348.348 0 00.039-.028l.032-.022 15.486-13.21.016-.017.02-.018.02-.022h.006l12.006-14.323.005-.007a.531.531 0 00.042-.063l.015-.022v-.006l17.012-33.221c0-.007.006-.016.01-.024l.017-.039v-.019a.3.3 0 00.011-.043c0-.009.006-.018.008-.028l3.747-22.727v-.039zM184.111 341.54l-3.5-3.212 7.877 6.171zm51.108 13.348l-12.307-5.754 29.13 2.62zm4.488-104.781l-32.312 3.4 19.926-33.476zm-11.278-30.148l39.477 19.772-27.152 10.154zM240 251.131l3.756 29.784-35.947-26.4zm3.285 30.742L204.24 294.16l2.627-39.03zm-2.161-30.245l30.265 20.1-26.518 9.62zm.482-.941l27.156-10.155 3.147 30.275zm41.723-34.975l25.171-11.883-2.838 28.271zm21.471 17.056l-34.6 6.32 12.286-22.688zm-35.583 5.932l-22.539-41.385L281.6 215.83zm-1.263-.118l-39.735-19.9 17.081-21.699zM206.6 252.791l-5.063-19.328 24.445-13.233zm-3.35 40.409l-19.312-31.688 21.892-6.65zm39.432-10.038l-19.646 20.985-17.987-9.142zm29.089-10.46l-7.007 25.234-19.279-15.7zm-1.9-31.718l29.206 23.037-26.067 7.169zm.586-.877l34.978-6.389-5.573 29.582zm36.241-7.785l2.802-27.952 16.159 21.946zm19.317-5.018l.894 32.012-19.941-25.976zm-43.154-12.532l.671-23.76 24.368 11.937zm-1.053-.021l-34.786-18.446 35.463-5.509zm-54.17 2.962l-6.519-23.722 23.259 2.46zm-.849.882l-24.674 13.357 18.153-37.084zm-21.02 35.188l-21.429 6.509 16.377-25.792zm-3.881 39.205l-26.755-18.954 7.981-11.852zm2.16 2.687l17.98 9.139-22.117 12.216zm40.435-12.9l19.309 15.725-39.239 5.564zm28.339-9.924l28.5 27.556-35.584-2.045zm.756-.731l26.158-7.195 2.35 34.759zm32.816-37.805l20.109 26.2-25.634 3.129zm20.68-6.81l16.983 9.6-16.094 22.253zm.179-1.106l10.517-17.3 6.272 26.791zm-.773-.753l-16.174-21.965 26.83 4.433zm-42.523-35.6l19-17.195 5.454 29.168zm-37.587 5.3l12.052-21.386 23.217 15.907zm-25.159-2.4l13.662-27.779 9.758 30.256zM200.873 232.1l-16.558-27.64 35.1-10.23zm-17.522 27.79l-8.009-32.208 24.739 5.857zm-8.823 13.161l-7.344-18.251 15.164 6.635zm28.554 22.073l-4.147 21.4-22.911-40.574zm19.749 10.449l6.283 21.217-28.6-8.892zm41.544-6.092l-6.229 27.573-33.54-21.933zm37.046 1.988l-16.125 14.6-18.757-16.607zm-.582-35.841l24.827 25.086-22.487 9.531zm.507-.983l25.59-3.124-.841 28.131zm43.281-26.531l10.222 34.42-26.563-11.824zm-5.793-29.086l16.672 12.642-10.425 14.045zm-28.7-6.435l15.475-17.727 11.434 22.173zm-.7-.8l-5.416-28.972 20.874 11.266zm-26.45-12.279l-23.114-15.836 42.017-1.275zm-37.472 5.211l-9.691-30.046 21.673 8.785zm-25.2-2.344l-11.222-15.213 24.724-12.24zm-.779.715l-34.373 10.02 23.095-25.316zm-19.708 39.3l-24.5-5.8 8.283-21.265zm-17.462 27.9l-15.508-6.786 7.7-24.594zm-8.647 13.562l-13.34 4.878 5.947-23.247zm23.993 42.645l-29.346-18.185 6.214-22.78zm29.881 10.911l-27.761 4.4-.12-13.071zm-3.533-21.4l32.643 21.349-26.4-.3zm41.312-6.184l18.949 16.777-25.088 10.426zm37.1 2.1l10.014 27.752-26.259-13.032zm.893-.628l22.354-9.475-12.316 37.3zm24.615-39.581l26.558 11.822-27.4 16.4zm17.784-23.472l17.364 12.359-7.411 21.156zm-.2-1.43l10.437-14.061 6.878 26.384zm-6.964-29.288l4.846-15.025 11.542 27.452zm-.728-1.173l-11.043-21.415 15.9 6.355zm-32.714-34.118l23.122-1.51-2.911 12.418zm-45.783.4l16.28-20.189 26.09 18.9zm-.962-.484l-8.382-21.953 24.5 1.973zm-1.087.1l-21.413-8.68 13.126-13.023zm-48.106 3.674l9.207-26.556 15.628 14.26zm-24.7 26.331l6.742-27.593 16 2.662zm-10.006 23.548l-8.646-13.568 16.707-7.128zm-.462 1.234l-7.39 23.589-.993-36.745zm-8.509 27.283l-6.027 23.556-9.462-23.533zm-15.73-1.026l.5-23.126 14.936 23.1zm23.825 21.706l-5.99 21.956-7.32-17.089zm24.036 42.707l-18.187 2.576L169.087 300zm.988.921l.118 12.883-18-10.35zm30.333 9.621l-9.207 19.271-19.185-14.764zm1.073.195l24.328 22.457-33.612-3.023zm1.193-.33l26.648.3-2.431 22.053zm53.542-10.568l1.017 24.914-26.117-14.489zm1.058.091l26.356 13.081-25.34 11.845zm40.876-25.533l13.084 20.459-25.416 16.889zm.911-.528l25.192 3.7-12.261 16.518zm.469-.993l26.946-16.13-1.753 19.832zm35.589-38.438l4.758 16.645-11.94 3.857zm-6.331-28.306l13.647 17.186-7.011 8.27zm-12.77-31.3l17.724 12.98-6.091 14.675zm-18.269-8.925l2.857-12.184 12.765 18.428zm-22.6-12.337l-3.076-18.616 26.658 17.076zm-1.17-.621l-25.4-18.412 22.342-.138zm-51.684-21.438l16.587-10.179 7.116 12.089zm-15.927 13.822L219.6 149.031l28.41 1.069zm-27.013 13.342L192 173.731l24.995-23.436zM183.2 203.211l-16.318-13.247 23.158-14.743zm-.693.791l-16.861 7.198.822-20.214zm-16.868 47.942l-15.149-23.433 14.1-15.2zm-6.563 27.681L156.2 293.96l-5.674-35.6zm.73 1.714l7.1 16.572-10.138-1.421zm18.42 38.807l-10.7-2.059.681-17.5zm20.217 12.395l-7.6 7.31L180.63 322.3zm.907.586l18.258 14.053-25.846-6.757zm59.579-4.375L285 343.209l-28.5 7.657zm53.9 2.845l-1.427 18.18-23.502-6.524zm26.153-17.21l-14.469 25.343-10.221-8.93zm14.288-17.917l.08 13.271-11.58 2.211zm2.9-22.6l11.774-3.8-13.433 22.574zm8.168-23.331l6.685-7.885-2.181 23.639zm-7.5-29.057l6-14.454 7.777 31.805zm-12.763-30.632l4.216-7.362L361 203.245zm-.732-.838l-12.472-18 16.689 10.641zm-41.849-38.064l12.626-1.348 12.773 17.613zm-25.638-.74l-6.956-11.814 28.43 11.681zm-26.428-2.324l-5.6-9.808 21.937-.218zm-1.114.172l-27.631-1.035 22.013-8.8zm-55.843 22.789l9.894-21.422 14.349-1.309zm-1.778 1.339l-9.044-8.687 19.088-13.059zm-.678.807l-22.487 14.316 13.409-23.036zm-25.421 37.155l-11.286-6.068 12.09-13.706zm-.356 1l-13.707 14.774 2.38-20.862zm-15.488 41.43l-5.795 4.742 6.241-25.143zm.145 1.239l5.916 37.113-12.123-32.028zm18.317 44.2l-.679 17.44-9.472-18.863zm11.639 22.32l9.621 16.538-19.8-18.5zm40.585 27.409l-.419 9.58-25.251-16.292zm1.036.409l13.1 6.127-13.516 3.306zm34.9 3.048l.407 13.437-19.045-9.965zm30.1-8.035l-7.725 18.189-20.43-10.625zm1.21-.157l23.492 6.518-31.2 11.637zm27.182-12.185l9.954 8.7-11.318 8.785zm27.01-18.633L352.355 311l-25.148 26.135zm13.513-5.071l-.079-12.935 10.585-6.468zm.93-14.783l12.849-21.592-2.356 15.185zm16.385-46.629l1.5 15.876-3.395 4.69zm-7.8-39.771l2.936 2.753 2.937 21.265zm-14.882-24.255l2.763-1.386 7.987 18.1zm-19.32-12.67l4.849-6.942 11.869 17.6zm-.753-.759L316.3 151.821l17.5 10.479zM300.472 151l-.078-7.579 12.177 6.291zm-1.055-.205l-27.832-11.435 27.752 3.654zm-55.054-12.775l4.431-3.8 14.693 3.612zm-24.2 9.076l8.616-9.281 11.914 1.071zm-2.226.851l-13.047 1.19 21.422-10.211zm-35.88 14.994l1.443-3.228 11.974-5.951zM166.34 188.25l-.87-8.444 13.03-12.434zm-.905 1.487l-10.8 12.244 9.951-20.485zm-16.09 38.27l-6.9 1.283 9.107-20.678zm-.229 1.111l-6.6 26.572-.419-25.267zm5.832 66.152l-7.839-6.451-3.754-24.183zm10.991 22.352l-5.007-1.649-3.349-14.994zm21.4 20.632l-16.633-9.054-2.67-8.975zm3.034 2.848l7.2 9.181-22.015-17.245zm2.694 1.73l22.9 14.774-14.985-4.684zm42.013 13.16l17.8 9.311-30.938-6.1zm21.356-3.54l19.923 10.361-19.515 3.095zm52.882-.483l-8.088 6.977-18.2 2.826zm14.949-10.458l.673 4.353-10.454 3.236zm27.127-28l-10.754 19.1-13.682 6.293zm3-3.184l7.2-13.3-7.7 18.243zm15.219-40.987l2.719-3.755-4.371 14.37zm2.615-28.34v-.032l-.039-.279.271-3.56.276 9.219zm-.723-5.242l-2.72-19.7 3.368 11.179zm-8.092-30.726l-4.965-11.251 6.948 13.109zm-14.97-23.232l-9.915-14.7 12.649 13.332zm-33.121-31.789l.663-.479 7.622 5.442zm-1-.574l-5.154-2.663 5.727 2.248zM270.816 138.2l9.658-1.985 14.533 5.17zm-3.151-.425l-13.151-3.232 22.051 1.4zm-24.913.241l-10.258-.922 14.352-2.59zm-36.2 9.164l5.869-4.4 9.461-2.908zm-4.817 2.3l-5.091 2.53 7.827-4.58zm-21.356 14.64l-6.039 5.766 6.905-7.7zm-28.285 40.688l-2.685 1 10.431-16.942zm-3.5 2.416l2.9-1.073-7.327 16.636zm-7.215 43.167l.154 9.26-.533 1.683zm.5 11.626l2.642 17.019-3.642-13.886zm13.782 35.206l3.393 15.19-10.823-21.313zm10.886 21.707l2.355 7.919-7.002-9.449zm52.607 40.775l.983 1.567-10.288-4.472zm2.643 2.234l-1.208-1.926 22.392 4.412zm54.851 1.892L274.3 366.5l-12.292-.342zm1.631-.258l14.653-2.275-16.831 4.74zm33.857-12.65l8.593-2.658-15.153 8.317zm13.765-5.7l-.675-4.361 12.557-5.775zm27.2-32.6l-.588 5.86-8.258 9.852zm13.6-24.986l2.122-1.022-9.712 19.012zm2.826-2.527l-2.382 1.147 4.788-15.743z" fill="url(#b)"/><path d="M478.979 166.36c-10.457-25.124-31.636-52.248-48.267-60.82 13.536 26.5 21.369 53.092 24.363 72.934 0-.057.011.049.036.226.012.086.027.174.04.26 22.7 61.468 10.334 123.975-7.487 162.171-27.572 59.1-94.325 119.668-198.808 116.713-112.89-3.192-212.335-86.853-230.9-196.43-3.382-17.279 0-26.053 1.7-40.083-2.074 10.816-2.863 13.94-3.9 33.157 0 .41-.025.816-.025 1.227C15.732 388.421 123.453 496 256.335 496a240.565 240.565 0 00237.156-199.626c.408-3.076.734-6.168 1.094-9.27 4.783-41.21-.531-84.524-15.606-120.744z" fill="url(#c)"/><path d="M478.979 166.36c-10.457-25.124-31.636-52.248-48.267-60.82 13.536 26.5 21.369 53.092 24.363 72.934 0-.057.011.049.036.226.012.086.027.174.04.26 22.7 61.468 10.334 123.975-7.487 162.171-27.572 59.1-94.325 119.668-198.808 116.713-112.89-3.192-212.335-86.853-230.9-196.43-3.382-17.279 0-26.053 1.7-40.083-2.074 10.816-2.863 13.94-3.9 33.157 0 .41-.025.816-.025 1.227C15.732 388.421 123.453 496 256.335 496a240.565 240.565 0 00237.156-199.626c.408-3.076.734-6.168 1.094-9.27 4.783-41.21-.531-84.524-15.606-120.744z" fill="url(#d)"/><path d="M17.957 261.414c18.564 109.577 118.009 193.238 230.9 196.43 104.483 2.955 171.236-57.618 198.808-116.713 17.821-38.2 30.188-100.7 7.487-162.171l-.008-.026-.032-.234c-.025-.177-.041-.283-.036-.226 0 .04.015.136.047.4 8.533 55.66-19.813 109.581-64.126 146.04-.079.189-.133.313-.133.313-86.345 70.222-168.97 42.368-185.7 30.966a137.192 137.192 0 01-3.5-1.743c-50.34-24.029-71.137-69.837-66.678-109.122-42.506 0-57-35.808-57-35.808s38.163-27.179 88.461-3.541c46.583 21.893 90.332 3.543 90.337 3.541-.09-1.952-41.965-18.589-58.291-34.655-8.723-8.585-12.865-12.723-16.533-15.828a71.492 71.492 0 00-6.232-4.7 281.912 281.912 0 00-4.987-3.3c-17.548-11.392-52.448-10.764-53.6-10.735h-.112c-9.538-12.066-8.865-51.871-8.321-60.182-.115-.516-7.116 3.63-8.033 4.254A175.239 175.239 0 0077.156 104.5a210.379 210.379 0 00-22.469 26.912c0 .012-.007.025-.011.037 0-.012.007-.025.011-.038a202.707 202.707 0 00-32.284 72.8c-.116.527-8.661 37.847-4.446 57.203z" fill="url(#e)"/><path d="M341.214 166.593a130.73 130.73 0 0122.336 29.112c1.325.994 2.561 1.985 3.612 2.952 54.545 50.2 25.967 121.2 23.834 126.257 44.313-36.459 72.659-90.38 64.126-146.04-27.207-67.731-73.339-95.043-111.015-154.509-1.905-3.007-3.809-6.022-5.667-9.2a73.154 73.154 0 01-2.649-4.971A43.74 43.74 0 01332.2.688a.627.627 0 00-.546-.645.822.822 0 00-.452 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1-9.306 4.428-64.484 91.692 10.308 166.385z" fill="url(#f)"/><path d="M248.657 133.645l31.855 2.027 19.347 6.882 16.124 6.329 18.57 13.258 17.493 18.437 6.077 11.467c.816.5 2.5 1.586 3.932 2.558.525.368 1 .735 1.5 1.1a130.73 130.73 0 00-22.336-29.112C266.422 91.9 321.6 4.636 330.908.2c.027-.036.083-.117.1-.136-60.44 35.356-80.944 100.759-82.828 133.482l-.009.183z" fill="url(#g)"/><path d="M170.74 151.043a243.329 243.329 0 014.987 3.3 111.208 111.208 0 01-.675-58.731c-24.716 11.241-43.941 29.01-57.916 44.7 1.156-.033 36.056-.661 53.604 10.731z" fill="url(#h)"/><path d="M148.32 277.45s11.11-41.34 79.53-41.34c7.4 0 28.54-20.61 28.93-26.59 0 0-43.75 18.35-90.33-3.54-50.3-23.64-88.45 3.54-88.45 3.54s14.5 35.81 57 35.81c-4.45 39.28 16.34 85.09 66.68 109.12 1.13.54 2.19 1.12 3.34 1.64-29.4-15.17-53.66-43.83-56.7-78.64z" fill="url(#i)"/><path d="M367.162 198.657c-1.051-.967-2.287-1.958-3.612-2.952-.49-.367-.97-.734-1.5-1.1-12.847-9.014-35.851-17.917-58.014-14.067 86.541 43.213 63.308 192.023-56.611 186.4a106.974 106.974 0 01-31.307-6.03 133.003 133.003 0 01-7.067-2.886c-1.358-.619-2.714-1.243-4.055-1.936.048.034.114.071.163.1 16.729 11.4 99.354 39.256 185.7-30.966 0 0 .054-.124.133-.313 2.137-5.048 30.715-76.05-23.83-126.25z" fill="url(#j)"/><path d="M478.959 166.35c-10.457-25.124-31.637-52.248-48.268-60.82 13.536 26.5 21.37 53.092 24.364 72.934 0 .04.015.136.047.4-27.202-67.731-73.34-95.043-111.015-154.509-1.9-3.008-3.809-6.022-5.668-9.2a73.11 73.11 0 01-2.648-4.971 43.755 43.755 0 01-3.589-9.5.626.626 0 00-.547-.644.818.818 0 00-.451 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1.026-.036.083-.117.1-.136-60.44 35.356-80.933 100.952-82.817 133.675l.488-.088 31.855 2.027 17.928 6.377 17.543 6.834 18.57 13.258 17.472 18.427s6.014 11.287 6.1 11.477c-13.944-8.293-34.208-14.975-54.1-11.519 86.541 43.213 63.308 192.023-56.611 186.4A106.936 106.936 0 01216.1 360.9a131.807 131.807 0 01-7.067-2.885c-1.358-.619-2.714-1.244-4.055-1.936.048.034.114.071.163.105a137.192 137.192 0 01-3.5-1.743c1.125.537 2.183 1.123 3.338 1.638-29.384-15.167-53.646-43.832-56.677-78.641 0 0 11.106-41.334 79.524-41.334 7.4 0 28.542-20.614 28.935-26.593-.09-1.952-41.966-18.589-58.291-34.655-8.723-8.585-12.865-12.723-16.533-15.828a71.492 71.492 0 00-6.232-4.7 111.208 111.208 0 01-.675-58.731c-24.716 11.241-43.941 29.01-57.917 44.7h-.111c-9.538-12.066-8.865-51.871-8.322-60.182-.114-.516-7.115 3.63-8.033 4.254a175.3 175.3 0 00-23.513 20.12A210.463 210.463 0 0054.666 131.4a.259.259 0 01-.011.037.272.272 0 00.011-.038 202.724 202.724 0 00-32.284 72.8c-.115.521-.212 1.061-.325 1.586-.452 2.116-2.488 12.852-2.772 15.156-.022.176.021-.177 0 0a279.127 279.127 0 00-3.548 33.529c0 .41-.026.816-.026 1.227 0 132.705 107.722 240.285 240.6 240.285a240.568 240.568 0 00237.16-199.618c.408-3.076.734-6.168 1.094-9.27 4.782-41.21-.531-84.524-15.606-120.744zm-23.868 12.34c.012.086.027.174.04.26l-.009-.026c-.011-.083-.022-.157-.031-.234z" fill="url(#k)"/><path d="M256.78 209.522s-1.02.427-2.9 1.071c-4.7 7.943-21.409 23.1-27.8 23.075-68.418-.3-79.7 40.587-79.7 40.587a87.34 87.34 0 0013.4 39.263 88.025 88.025 0 01-11.456-36.069s11.106-41.334 79.525-41.334c7.4 0 28.541-20.614 28.935-26.593z" fill="url(#l)"/><path d="M455.152 178.958l-.009-.024c-.012-.082-.021-.157-.033-.233a2.116 2.116 0 00-.033-.227 5.804 5.804 0 00.045.4 239.04 239.04 0 00-5.168-11.9c-.612-1.314-1.269-2.543-1.9-3.826-1.2-2.465-2.4-4.935-3.657-7.293-.775-1.456-1.59-2.837-2.383-4.254-1.163-2.076-2.316-4.165-3.515-6.166-.879-1.463-1.787-2.864-2.68-4.29-1.169-1.862-2.334-3.73-3.533-5.534-.948-1.429-1.92-2.813-2.886-4.208-1.193-1.723-2.386-3.448-3.6-5.128-1.008-1.387-2.032-2.743-3.052-4.1a349.149 349.149 0 00-3.673-4.825q-1.589-2.034-3.2-4.033a486.632 486.632 0 00-3.751-4.619q-1.644-1.989-3.307-3.963c-.6-.714-1.2-1.447-1.8-2.159.26.309.511.63.769.942-20.846-24.591-43.47-47.254-63.674-79.15-1.908-3.006-3.812-6.021-5.668-9.2a72.064 72.064 0 01-2.649-4.971 49.1 49.1 0 01-3.31-8.434c-.042-.155-.118-.391-.145-.509-.082-.318-.133-.56-.133-.56a.63.63 0 00-.548-.645.847.847 0 00-.451 0c-.034.012-.085.052-.122.067s-.118.067-.175.094a7.406 7.406 0 00-1.46 1.072 17.267 17.267 0 00-.348.311A25.044 25.044 0 00327.2 3.6c-.024.027-.043.042-.067.069.006-.006.012-.006.018-.012-14.415 16.944-51.226 90.584 8.1 156.635-55.543-65.345-20.542-135.964-5.33-154.464a53.657 53.657 0 002.964 7.268 74.305 74.305 0 002.649 4.971c1.856 3.182 3.761 6.2 5.668 9.2 37.675 59.466 83.806 86.779 111.013 154.51a9.121 9.121 0 01-.045-.4 1.707 1.707 0 01.033.227c.012.076.021.152.033.233l.01.025c22.7 61.47 10.333 123.975-7.488 162.171a199.358 199.358 0 01-38.217 54.8 199.8 199.8 0 0041.124-57.7c17.821-38.199 30.186-100.704 7.487-162.175z" fill="url(#m)"/><path d="M330.908.2c.027-.036.083-.117.1-.136-54.445 31.849-76.48 88.075-81.693 122.836 5.988-32.116 26.574-81.173 72.71-112.144 3.797-5.996 7.143-9.723 8.883-10.556z" fill="url(#n)"/><path d="M390.863 325.227s.054-.124.133-.313c2.133-5.055 30.711-76.057-23.834-126.257-1.051-.967-2.287-1.958-3.612-2.952-.49-.367-.97-.734-1.5-1.1-12.415-8.711-34.316-17.316-55.776-14.41l-.052.006q-1.093.15-2.186.337c85.565 42.726 63.813 188.673-52.595 186.529.316.015.633.04.948.053 118.009 4.618 141.259-140.089 59.271-185.457 17.768-.174 34.954 6.314 45.567 13.158.539.347 1.034.694 1.537 1.042 1.363.941 2.637 1.883 3.725 2.809 56.473 48.028 30.696 120.09 28.763 125.228a72.283 72.283 0 01-.12.318" fill="url(#o)"/><path d="M167.09 208.38c39.38 17.06 75.93 6.22 87 2.14-10.2 3.52-47.89 14.14-87.64-4.54-45.22-21.25-80.62-1.44-87.32 2.78l-.32.2-.26.17-.2.13-.13.08-.09.06.12.26.14.31v.06l.21.45c.34.72.86 1.75 1.58 3 5.34 9.45 21.43 31.63 54.89 31.63-4.32 38.11 15.12 82.35 62.24 106.9-45-26-64-73-58.7-110.49-34.76-.92-50.31-21.76-54.75-30.59 12.64-6.7 44.73-19.23 83.23-2.55z" fill="url(#p)"/><path d="M175.69 154.205q-.568-.333-1.176-.684.628.42 1.213.818c-.013-.045-.027-.089-.037-.134zm-.247-.882a111.35 111.35 0 01-.391-57.715c-23.43 10.656-41.917 27.176-55.684 42.233 13.11-12.77 30.093-26.473 50.778-35.862-1.28 9.821-2.383 29.926 5.297 51.344z" fill="url(#q)"/><path d="M23.758 286.6c-.067-.229-.126-.459-.191-.689a220.739 220.739 0 01-5.61-24.5c-1.836-8.43-1.25-20.266 0-30.987-.929 5.565-1.511 11.221-2.2 24.061 0 .41-.025.816-.025 1.227C15.732 360.731 83.2 450 177.2 482.683 95.716 451.478 35.35 376.8 23.758 286.6z" fill="url(#r)"/><path d="M21.832 262.383c-4.214-19.356 4.331-56.676 4.446-57.2a202.7 202.7 0 0132.284-72.8l-.011.038c0-.012.007-.025.011-.037a210.463 210.463 0 0122.47-26.912 175.229 175.229 0 0123.513-20.12 29.207 29.207 0 011.015-.634c-.083 18.28.954 49.124 9.423 59.237h.111c1.16-.06 36.177-1.605 54.092 9.322a273.279 273.279 0 015.092 3.164 71.848 71.848 0 016.378 4.532c3.764 3.008 8.03 7.036 17.012 15.389 13 12.091 41.356 24.121 53.6 29.852-11.929-6.009-40.077-18.848-52.774-31.343-8.723-8.585-12.865-12.723-16.533-15.828a71.492 71.492 0 00-6.232-4.7 281.912 281.912 0 00-4.987-3.3c-17.548-11.392-52.448-10.765-53.6-10.735h-.112c-8.718-11.028-8.905-45.214-8.458-57.362.018-.468.036-.9.054-1.3l.021-.429a119.792 119.792 0 01.018-.356c.015-.262.029-.515.044-.734-.007-.031-.042-.043-.095-.042-.018 0-.048.009-.071.012a1.022 1.022 0 00-.151.034c-.039.011-.087.03-.132.046a4.265 4.265 0 00-.39.157l-.234.106a16.595 16.595 0 00-.495.24l-.3.151-.245.128-.359.188-.2.109c-2.121 1.141-4.813 2.754-5.358 3.125A175.239 175.239 0 0077.156 104.5a210.379 210.379 0 00-22.469 26.912c0 .012-.007.025-.011.037 0-.012.007-.025.011-.038a202.707 202.707 0 00-32.284 72.8c-.116.521-8.661 37.841-4.446 57.2 15.8 93.251 90.176 167.72 181.563 189.812-89.608-23.234-162.113-96.911-177.688-188.84z" fill="url(#s)"/><path d="M478.979 166.36c-9.226-22.167-26.8-45.883-42.231-57.048l-.425-.3q-.717-.508-1.428-.982-.27-.18-.54-.356-.675-.435-1.341-.834c-.172-.1-.345-.212-.517-.312a42.518 42.518 0 00-1.786-.986c.65 1.272 1.275 2.544 1.9 3.816a394.886 394.886 0 011.148 2.373c11.668 24.415 18.557 48.448 21.317 66.745 0 .04.015.136.047.4 8.533 55.66-19.813 109.581-64.126 146.04-.079.189-.133.313-.133.313-55.08 44.8-108.642 49.678-144.555 44.383 35.786 6.684 92.233 3.866 150.369-43.414l.133-.313c44.312-36.459 72.659-90.381 64.126-146.04a12.553 12.553 0 01-.047-.4c-2.451-16.242-8.159-37.005-17.57-58.54a159 159 0 0126.316 37.486c17.047 34.76 24.739 77.04 22.235 117.816-.188 3.07-.343 6.128-.58 9.174-13.068 112.5-106.967 202.843-225.783 209.5a245.659 245.659 0 01-47.5-1.93A242.635 242.635 0 00256.335 496c119 0 217.812-86.287 237.156-199.626.408-3.076.734-6.168 1.094-9.27 4.783-41.21-.531-84.524-15.606-120.744zm-23.828 12.6l-.008-.026-.032-.234c.012.086.027.174.04.26z" fill="url(#t)"/></svg>
diff --git a/devtools/client/themes/images/aboutdebugging-firefox-beta.svg b/devtools/client/themes/images/aboutdebugging-firefox-beta.svg
new file mode 100644
index 0000000000..8ece78c5c1
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-firefox-beta.svg
@@ -0,0 +1,4 @@
+<!-- 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="512" height="512"><defs><radialGradient id="c" cx="87.4%" cy="-12.9%" r="128%" gradientTransform="matrix(.8 0 0 1 .178 .129)"><stop offset=".13" stop-color="#ffbd4f"/><stop offset=".28" stop-color="#ff980e"/><stop offset=".47" stop-color="#ff3750"/><stop offset=".78" stop-color="#eb0878"/><stop offset=".86" stop-color="#e50080"/></radialGradient><radialGradient id="d" cx="49%" cy="40%" r="128%" gradientTransform="matrix(.82 0 0 1 .088 0)"><stop offset=".3" stop-color="#960e18"/><stop offset=".35" stop-color="#b11927" stop-opacity=".74"/><stop offset=".43" stop-color="#db293d" stop-opacity=".34"/><stop offset=".5" stop-color="#f5334b" stop-opacity=".09"/><stop offset=".53" stop-color="#ff3750" stop-opacity="0"/></radialGradient><radialGradient id="e" cx="48%" cy="-12%" r="140%"><stop offset=".13" stop-color="#fff44f"/><stop offset=".53" stop-color="#ff980e"/></radialGradient><radialGradient id="f" cx="22.76%" cy="110.11%" r="100%"><stop offset=".35" stop-color="#3a8ee6"/><stop offset=".67" stop-color="#9059ff"/><stop offset="1" stop-color="#c139e6"/></radialGradient><radialGradient id="g" cx="52%" cy="33%" r="59%" gradientTransform="scale(.9 1)"><stop offset=".21" stop-color="#9059ff" stop-opacity="0"/><stop offset=".97" stop-color="#6e008b" stop-opacity=".6"/></radialGradient><radialGradient id="h" cx="210%" cy="-100%" r="290%"><stop offset=".1" stop-color="#ffe226"/><stop offset=".79" stop-color="#ff7139"/></radialGradient><radialGradient id="i" cx="84%" cy="-41%" r="180%"><stop offset=".11" stop-color="#fff44f"/><stop offset=".46" stop-color="#ff980e"/><stop offset=".72" stop-color="#ff3647"/><stop offset=".9" stop-color="#e31587"/></radialGradient><radialGradient id="j" cx="16.1%" cy="-18.6%" r="348.8%" gradientTransform="matrix(.10453 .46743 -.99452 .04913 -.046 -.255)"><stop offset="0" stop-color="#fff44f"/><stop offset=".3" stop-color="#ff980e"/><stop offset=".57" stop-color="#ff3647"/><stop offset=".74" stop-color="#e31587"/></radialGradient><radialGradient id="k" cx="18.9%" cy="-42.5%" r="238.4%"><stop offset=".14" stop-color="#fff44f"/><stop offset=".48" stop-color="#ff980e"/><stop offset=".66" stop-color="#ff3647"/><stop offset=".9" stop-color="#e31587"/></radialGradient><radialGradient id="l" cx="159.3%" cy="-44.72%" r="313.1%"><stop offset=".09" stop-color="#fff44f"/><stop offset=".63" stop-color="#ff980e"/></radialGradient><linearGradient id="b" x1="87.25%" y1="15.5%" x2="9.4%" y2="93.1%"><stop offset=".05" stop-color="#fff44f"/><stop offset=".37" stop-color="#ff980e"/><stop offset=".53" stop-color="#ff3647"/><stop offset=".7" stop-color="#e31587"/></linearGradient><linearGradient id="m" x1="80%" y1="14%" x2="18%" y2="84%"><stop offset=".17" stop-color="#fff44f" stop-opacity=".8"/><stop offset=".6" stop-color="#fff44f" stop-opacity="0"/></linearGradient><linearGradient id="a" x1="446.053" y1="434.456" x2="385.267" y2="376.907" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#054096" stop-opacity=".5"/><stop offset=".054" stop-color="#0f3d9c" stop-opacity=".441"/><stop offset=".261" stop-color="#2f35b1" stop-opacity=".249"/><stop offset=".466" stop-color="#462fbf" stop-opacity=".111"/><stop offset=".669" stop-color="#542bc8" stop-opacity=".028"/><stop offset=".864" stop-color="#592acb" stop-opacity="0"/></linearGradient><linearGradient id="n" x1="280.371" y1="377.927" x2="499.809" y2="470.777" gradientUnits="userSpaceOnUse"><stop offset=".001" stop-color="#54ffbd"/><stop offset="1" stop-color="#0df"/></linearGradient><filter id="o" x="-1" y="-1" width="300%" height="300%"><feOffset result="offOut" in="SourceGraphic" dx="-4" dy="-4"/><feColorMatrix result="matrixOut" in="offOut" values=".01 0 0 0 0 0 0 0 0 0 0 .2 0 0 0 0 0 0 .2 0"/><feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="8"/><feBlend in="SourceGraphic" in2="blurOut"/></filter></defs><path d="M450.683 326.634h-175.61a9.366 9.366 0 00-9.366 9.366v28.1a74.926 74.926 0 0074.927 74.926h97.171A56.2 56.2 0 00494 382.829v-24.585c0-14.044-14.049-31.61-43.317-31.61z" fill="#008787"/><path d="M450.683 326.634h-175.61a9.366 9.366 0 00-9.366 9.366v28.1a74.926 74.926 0 0074.927 74.926h97.171A56.2 56.2 0 00494 382.829v-24.585c0-14.044-14.049-31.61-43.317-31.61z" fill="url(#a)" opacity=".9"/><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0 .039.015.136.047.4C427.706 111.135 381.627 83.823 344 24.355c-1.9-3.007-3.805-6.022-5.661-9.2a73.716 73.716 0 01-2.646-4.972A43.7 43.7 0 01332.1.677a.626.626 0 00-.546-.644.818.818 0 00-.451 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1.027-.036.083-.117.1-.136-60.37 35.356-80.85 100.761-82.732 133.484a120.249 120.249 0 00-66.142 25.488 71.355 71.355 0 00-6.225-4.7 111.338 111.338 0 01-.674-58.732c-24.688 11.241-43.89 29.01-57.85 44.7h-.111c-9.527-12.067-8.855-51.873-8.312-60.184-.114-.515-7.107 3.63-8.023 4.255a175.073 175.073 0 00-23.486 20.12 210.478 210.478 0 00-22.442 26.913c0 .012-.007.026-.011.038 0-.013.007-.026.011-.038a202.838 202.838 0 00-32.247 72.805c-.115.521-.212 1.061-.324 1.586-.452 2.116-2.08 12.7-2.365 15-.022.177-.032.347-.053.524a229.066 229.066 0 00-3.9 33.157c0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746zM201.716 354.447c1.124.537 2.18 1.124 3.334 1.639.048.033.114.07.163.1a126.191 126.191 0 01-3.497-1.739zm55.053-144.93zm198.131-30.59l-.032-.233c.012.085.027.174.04.259z" fill="url(#b)"/><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0-.058.011.048.036.226.012.085.027.174.04.259 22.675 61.47 10.322 123.978-7.479 162.175-27.539 59.1-94.215 119.67-198.576 116.716C136.1 454.651 36.766 370.988 18.223 261.41c-3.379-17.28 0-26.054 1.7-40.084-2.071 10.816-2.86 13.94-3.9 33.157 0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746z" fill="url(#c)"/><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0-.058.011.048.036.226.012.085.027.174.04.259 22.675 61.47 10.322 123.978-7.479 162.175-27.539 59.1-94.215 119.67-198.576 116.716C136.1 454.651 36.766 370.988 18.223 261.41c-3.379-17.28 0-26.054 1.7-40.084-2.071 10.816-2.86 13.94-3.9 33.157 0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746z" fill="url(#d)"/><path d="M361.922 194.6c.524.368 1 .734 1.493 1.1a130.706 130.706 0 00-22.31-29.112C266.4 91.892 321.516 4.626 330.811.194c.027-.036.083-.117.1-.136-60.37 35.356-80.85 100.761-82.732 133.484 2.8-.194 5.592-.429 8.442-.429 45.051 0 84.289 24.77 105.301 61.487z" fill="url(#e)"/><path d="M256.772 209.514c-.393 5.978-21.514 26.593-28.9 26.593-68.339 0-79.432 41.335-79.432 41.335 3.027 34.81 27.261 63.475 56.611 78.643 1.339.692 2.694 1.317 4.05 1.935a132.768 132.768 0 007.059 2.886 106.743 106.743 0 0031.271 6.031c119.78 5.618 142.986-143.194 56.545-186.408 22.137-3.85 45.115 5.053 57.947 14.067-21.012-36.714-60.25-61.484-105.3-61.484-2.85 0-5.641.235-8.442.429a120.249 120.249 0 00-66.142 25.488c3.664 3.1 7.8 7.244 16.514 15.828 16.302 16.067 58.13 32.705 58.219 34.657z" fill="url(#f)"/><path d="M256.772 209.514c-.393 5.978-21.514 26.593-28.9 26.593-68.339 0-79.432 41.335-79.432 41.335 3.027 34.81 27.261 63.475 56.611 78.643 1.339.692 2.694 1.317 4.05 1.935a132.768 132.768 0 007.059 2.886 106.743 106.743 0 0031.271 6.031c119.78 5.618 142.986-143.194 56.545-186.408 22.137-3.85 45.115 5.053 57.947 14.067-21.012-36.714-60.25-61.484-105.3-61.484-2.85 0-5.641.235-8.442.429a120.249 120.249 0 00-66.142 25.488c3.664 3.1 7.8 7.244 16.514 15.828 16.302 16.067 58.13 32.705 58.219 34.657z" fill="url(#g)"/><path d="M170.829 151.036a244.042 244.042 0 014.981 3.3 111.338 111.338 0 01-.674-58.732c-24.688 11.241-43.89 29.01-57.85 44.7 1.155-.033 36.014-.66 53.543 10.732z" fill="url(#h)"/><path d="M18.223 261.41C36.766 370.988 136.1 454.651 248.855 457.844c104.361 2.954 171.037-57.62 198.576-116.716 17.8-38.2 30.154-100.7 7.479-162.175l-.008-.026-.032-.233c-.025-.178-.04-.284-.036-.226 0 .039.015.136.047.4 8.524 55.661-19.79 109.584-64.051 146.044l-.133.313c-86.245 70.223-168.774 42.368-185.484 30.966a144.108 144.108 0 01-3.5-1.743c-50.282-24.029-71.054-69.838-66.6-109.124-42.457 0-56.934-35.809-56.934-35.809s38.119-27.179 88.358-3.541c46.53 21.893 90.228 3.543 90.233 3.541-.089-1.952-41.917-18.59-58.223-34.656-8.713-8.584-12.85-12.723-16.514-15.828a71.355 71.355 0 00-6.225-4.7 282.929 282.929 0 00-4.981-3.3c-17.528-11.392-52.388-10.765-53.543-10.735h-.111c-9.527-12.067-8.855-51.873-8.312-60.184-.114-.515-7.107 3.63-8.023 4.255a175.073 175.073 0 00-23.486 20.12 210.478 210.478 0 00-22.442 26.919c0 .012-.007.026-.011.038 0-.013.007-.026.011-.038a202.838 202.838 0 00-32.247 72.805c-.115.521-8.65 37.842-4.44 57.199z" fill="url(#i)"/><path d="M341.105 166.587a130.706 130.706 0 0122.31 29.112c1.323.994 2.559 1.985 3.608 2.952 54.482 50.2 25.936 121.2 23.807 126.26 44.261-36.46 72.575-90.383 64.051-146.044C427.706 111.135 381.627 83.823 344 24.355c-1.9-3.007-3.805-6.022-5.661-9.2a73.716 73.716 0 01-2.646-4.972A43.7 43.7 0 01332.1.677a.626.626 0 00-.546-.644.818.818 0 00-.451 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1-9.291 4.428-64.407 91.694 10.298 166.389z" fill="url(#j)"/><path d="M367.023 198.651c-1.049-.967-2.285-1.958-3.608-2.952-.489-.368-.969-.734-1.493-1.1-12.832-9.014-35.81-17.917-57.947-14.067 86.441 43.214 63.235 192.026-56.545 186.408a106.743 106.743 0 01-31.271-6.031 134.51 134.51 0 01-7.059-2.886c-1.356-.618-2.711-1.243-4.05-1.935.048.033.114.07.163.1 16.71 11.4 99.239 39.257 185.484-30.966l.133-.313c2.129-5.054 30.675-76.057-23.807-126.258z" fill="url(#k)"/><path d="M148.439 277.443s11.093-41.335 79.432-41.335c7.388 0 28.509-20.615 28.9-26.593s-43.7 18.352-90.233-3.541c-50.239-23.638-88.358 3.541-88.358 3.541s14.477 35.809 56.934 35.809c-4.453 39.286 16.319 85.1 66.6 109.124 1.124.537 2.18 1.124 3.334 1.639-29.348-15.169-53.582-43.834-56.609-78.644z" fill="url(#l)"/><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0 .039.015.136.047.4C427.706 111.135 381.627 83.823 344 24.355c-1.9-3.007-3.805-6.022-5.661-9.2a73.716 73.716 0 01-2.646-4.972A43.7 43.7 0 01332.1.677a.626.626 0 00-.546-.644.818.818 0 00-.451 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1.027-.036.083-.117.1-.136-60.37 35.356-80.85 100.761-82.732 133.484 2.8-.194 5.592-.429 8.442-.429 45.053 0 84.291 24.77 105.3 61.484-12.832-9.014-35.81-17.917-57.947-14.067 86.441 43.214 63.235 192.026-56.545 186.408a106.743 106.743 0 01-31.271-6.031 134.51 134.51 0 01-7.059-2.886c-1.356-.618-2.711-1.243-4.05-1.935.048.033.114.07.163.1a144.108 144.108 0 01-3.5-1.743c1.124.537 2.18 1.124 3.334 1.639-29.35-15.168-53.584-43.833-56.611-78.643 0 0 11.093-41.335 79.432-41.335 7.388 0 28.509-20.615 28.9-26.593-.089-1.952-41.917-18.59-58.223-34.656-8.713-8.584-12.85-12.723-16.514-15.828a71.355 71.355 0 00-6.225-4.7 111.338 111.338 0 01-.674-58.732c-24.688 11.241-43.89 29.01-57.85 44.7h-.111c-9.527-12.067-8.855-51.873-8.312-60.184-.114-.515-7.107 3.63-8.023 4.255a175.073 175.073 0 00-23.486 20.12 210.478 210.478 0 00-22.435 26.916c0 .012-.007.026-.011.038 0-.013.007-.026.011-.038a202.838 202.838 0 00-32.247 72.805c-.115.521-.212 1.061-.324 1.586-.452 2.116-2.486 12.853-2.77 15.156-.022.177.021-.176 0 0a279.565 279.565 0 00-3.544 33.53c0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746zm-23.841 12.341c.012.085.027.174.04.259l-.008-.026-.032-.233z" fill="url(#m)"/><path d="M484.634 367.61H323.189A69.189 69.189 0 00254 436.8v33.835a9.366 9.366 0 009.366 9.365h161.445A69.189 69.189 0 00494 410.811v-52.567a9.366 9.366 0 01-9.366 9.366z" fill="url(#n)" filter="url(#o)"/><path d="M326.241 423.168a10.264 10.264 0 005.349-9.424c0-8.342-5.795-12.991-16.11-12.991h-19.232v46.486h19.359c10.315 0 16.684-4.584 16.684-13.755 0-4.839-2.166-8.341-6.05-10.316zM305.1 408.713h10.57c4.713 0 6.941 1.975 6.941 5.223 0 3.183-2.038 5.539-6.813 5.539H305.1zm10.635 30.439H305.1v-11.59h10.253c5.667 0 7.833 2.1 7.833 5.731s-2.548 5.859-7.452 5.859zm25.15 8.087h31.265v-8.532h-22.287v-10.572h22.287v-8.469h-22.287v-10.444h22.287v-8.469h-31.266zm73.548-46.486h-34.58v8.278h12.928v38.208h8.851v-38.208h12.8zm24.069 0h-8.852l-17.576 46.486h9.234l3.056-8.469h19.422l3.058 8.469h9.233zm-11.144 29.866l6.75-18.467 6.686 18.467z" fill="#20123a"/></svg>
diff --git a/devtools/client/themes/images/aboutdebugging-firefox-logo.svg b/devtools/client/themes/images/aboutdebugging-firefox-logo.svg
new file mode 100644
index 0000000000..fe4d116b16
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-firefox-logo.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path fill="context-fill #20123a" d="M190.368 150.591c0.157 0.009 0.079 0.003 0 0zm-57.874-28.933c0.158 0.008 0.079 0.003 0 0zm346.228 44.674c-10.445-25.123-31.6-52.248-48.211-60.82 13.52 26.5 21.345 53.093 24.335 72.935 0 0.04 0.015 0.136 0.047 0.4-27.175-67.732-73.254-95.047-110.886-154.512-1.9-3.008-3.805-6.022-5.661-9.2a73.237 73.237 0 0 1-2.646-4.972 43.757 43.757 0 0 1-3.585-9.5 0.625 0.625 0 0 0-0.546-0.644 0.8 0.8 0 0 0-0.451 0c-0.033 0.011-0.084 0.051-0.119 0.065-0.053 0.02-0.12 0.069-0.176 0.095 0.026-0.036 0.083-0.117 0.1-0.135-53.437 31.3-75.587 86.093-81.282 120.97a128.057 128.057 0 0 0-47.624 12.153 6.144 6.144 0 0 0-3.041 7.63 6.034 6.034 0 0 0 8.192 3.525 116.175 116.175 0 0 1 41.481-10.826c0.468-0.033 0.937-0.062 1.405-0.1a117.624 117.624 0 0 1 5.932-0.211 120.831 120.831 0 0 1 34.491 4.777c0.654 0.192 1.295 0.414 1.946 0.616a120.15 120.15 0 0 1 5.539 1.842 121.852 121.852 0 0 1 3.992 1.564c1.074 0.434 2.148 0.868 3.206 1.331a118.453 118.453 0 0 1 4.9 2.307c0.743 0.368 1.485 0.735 2.217 1.117a120.535 120.535 0 0 1 4.675 2.587 107.785 107.785 0 0 1 2.952 1.776 123.018 123.018 0 0 1 42.028 43.477c-12.833-9.015-35.81-17.918-57.947-14.068 86.441 43.214 63.234 192.027-56.545 186.408a106.7 106.7 0 0 1-31.271-6.031 132.461 132.461 0 0 1-7.059-2.886c-1.356-0.618-2.711-1.243-4.051-1.935-29.349-15.168-53.583-43.833-56.611-78.643 0 0 11.093-41.335 79.433-41.335 7.388 0 28.508-20.614 28.9-26.593-0.09-1.953-41.917-18.59-58.223-34.656-8.714-8.585-12.851-12.723-16.514-15.829a71.7 71.7 0 0 0-6.225-4.7 111.335 111.335 0 0 1-0.675-58.733c-24.687 11.242-43.89 29.011-57.849 44.7h-0.111c-9.528-12.067-8.855-51.873-8.312-60.184-0.114-0.516-7.107 3.63-8.024 4.254a175.21 175.21 0 0 0-23.486 20.12 210.5 210.5 0 0 0-22.443 26.913c0 0.012-0.007 0.025-0.011 0.037 0-0.012 0.007-0.025 0.011-0.038a202.837 202.837 0 0 0-32.244 72.81c-0.058 0.265-2.29 10.054-3.92 22.147a265.794 265.794 0 0 0-0.769 5.651c-0.558 3.636-0.992 7.6-1.42 13.767-0.019 0.239-0.031 0.474-0.048 0.712a591.152 591.152 0 0 0-0.481 7.995c0 0.411-0.025 0.816-0.025 1.227 0 132.709 107.6 240.29 240.324 240.29 118.865 0 217.559-86.288 236.882-199.63 0.407-3.075 0.732-6.168 1.092-9.27 4.777-41.21-0.53-84.525-15.588-120.747zm-164.068 72.1z" />
+</svg>
diff --git a/devtools/client/themes/images/aboutdebugging-firefox-nightly.svg b/devtools/client/themes/images/aboutdebugging-firefox-nightly.svg
new file mode 100644
index 0000000000..dbc7b084d6
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-firefox-nightly.svg
@@ -0,0 +1,4 @@
+<!-- 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 512 512"><defs><radialGradient id="b" cx="-9227.187" cy="-9815.121" r="80.797" gradientTransform="matrix(6.201 0 0 6.2 57644.994 60908.8)" gradientUnits="userSpaceOnUse"><stop offset=".108" stop-color="#3fe1b0"/><stop offset=".122" stop-color="#3bdcb3"/><stop offset=".254" stop-color="#1bb3d3"/><stop offset=".358" stop-color="#0799e6"/><stop offset=".42" stop-color="#0090ed"/><stop offset=".487" stop-color="#2482f1"/><stop offset=".64" stop-color="#7165fb"/><stop offset=".71" stop-color="#9059ff"/><stop offset=".795" stop-color="#7d49ed"/><stop offset=".86" stop-color="#7542e5"/></radialGradient><radialGradient id="c" cx="-9256.711" cy="-9782.089" r="80.797" gradientTransform="matrix(6.201 0 0 6.2 57644.994 60908.8)" gradientUnits="userSpaceOnUse"><stop offset=".3" stop-color="#45278d"/><stop offset=".341" stop-color="#562896" stop-opacity=".787"/><stop offset=".43" stop-color="#782aa9" stop-opacity=".364"/><stop offset=".495" stop-color="#8d2bb5" stop-opacity=".1"/><stop offset=".53" stop-color="#952bb9" stop-opacity="0"/></radialGradient><radialGradient id="d" cx="-9246.97" cy="-9833.457" r="58.534" gradientTransform="matrix(6.201 0 0 6.2 57644.994 60908.8)" gradientUnits="userSpaceOnUse"><stop offset=".132" stop-color="#3fe1b0"/><stop offset=".289" stop-color="#28d0c8"/><stop offset=".526" stop-color="#00b3f4"/></radialGradient><radialGradient id="e" cx="-9265.648" cy="-9760.984" r="38.471" gradientTransform="matrix(6.201 0 0 6.2 57644.994 60908.8)" gradientUnits="userSpaceOnUse"><stop offset=".287" stop-color="#0060df"/><stop offset=".417" stop-color="#2357e1"/><stop offset=".604" stop-color="#4f4ce3"/><stop offset=".748" stop-color="#6b45e4"/><stop offset=".833" stop-color="#7542e5"/></radialGradient><radialGradient id="f" cx="-9255.62" cy="-9791.546" r="20.397" gradientTransform="matrix(6.027 -1.458 1.708 7.059 72758.651 55821.181)" gradientUnits="userSpaceOnUse"><stop offset=".206" stop-color="#45278d" stop-opacity="0"/><stop offset=".251" stop-color="#44268a" stop-opacity=".055"/><stop offset=".725" stop-color="#371f6f" stop-opacity=".591"/><stop offset=".956" stop-color="#321c64" stop-opacity=".8"/></radialGradient><radialGradient id="g" cx="-9257.731" cy="-9818.427" r="27.676" gradientTransform="matrix(6.201 0 0 6.2 57644.994 60908.8)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0df"/><stop offset=".235" stop-color="#00d6fd"/><stop offset=".572" stop-color="#00c3f8"/><stop offset=".792" stop-color="#00b3f4"/></radialGradient><radialGradient id="h" cx="-9235.977" cy="-9835.981" r="118.081" gradientTransform="matrix(6.201 0 0 6.2 57644.994 60908.8)" gradientUnits="userSpaceOnUse"><stop offset=".126" stop-color="#3fe1b0"/><stop offset=".429" stop-color="#0df"/><stop offset=".479" stop-color="#1ec1ff"/><stop offset=".624" stop-color="#7077ff"/><stop offset=".69" stop-color="#9059ff"/><stop offset=".904" stop-color="#b833e1"/></radialGradient><radialGradient id="i" cx="-9247.165" cy="-9822.859" r="86.499" gradientTransform="matrix(.649 6.166 -4.046 .426 -33440.427 61207.861)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#54ffbd"/><stop offset=".095" stop-color="#4cf3b8"/><stop offset=".197" stop-color="#3fe1b0"/><stop offset=".257" stop-color="#33d8bd"/><stop offset=".369" stop-color="#12c0e1"/><stop offset=".423" stop-color="#00b3f4"/><stop offset=".737" stop-color="#0060df"/></radialGradient><radialGradient id="j" cx="-9258.383" cy="-9808.176" r="73.72" gradientTransform="matrix(6.201 0 0 6.2 57644.994 60908.8)" gradientUnits="userSpaceOnUse"><stop offset=".137" stop-color="#3fe1b0"/><stop offset=".435" stop-color="#0df"/><stop offset=".484" stop-color="#1ec1ff"/><stop offset=".622" stop-color="#7077ff"/><stop offset=".685" stop-color="#9059ff"/></radialGradient><radialGradient id="k" cx="-9238.923" cy="-9803.861" r="80.686" gradientTransform="matrix(6.201 0 0 6.2 57644.994 60908.8)" gradientUnits="userSpaceOnUse"><stop offset=".094" stop-color="#54ffbd"/><stop offset=".242" stop-color="#41f7cc"/><stop offset=".543" stop-color="#0fe3f3"/><stop offset=".626" stop-color="#0df"/></radialGradient><linearGradient id="a" x1="471.8" y1="127.352" x2="55.983" y2="389.284" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3fe1b0"/><stop offset=".406" stop-color="#00b3f4"/><stop offset=".421" stop-color="#03b0f4"/><stop offset=".818" stop-color="#5561e9"/><stop offset="1" stop-color="#7542e5"/></linearGradient><linearGradient id="l" x1="442.084" y1="74.772" x2="102.645" y2="414.21" gradientUnits="userSpaceOnUse"><stop offset=".167" stop-color="#54ffbd" stop-opacity=".8"/><stop offset=".236" stop-color="#43f8ca" stop-opacity=".639"/><stop offset=".361" stop-color="#27ede1" stop-opacity=".368"/><stop offset=".466" stop-color="#12e4f1" stop-opacity=".169"/><stop offset=".545" stop-color="#05dffb" stop-opacity=".046"/><stop offset=".589" stop-color="#0df" stop-opacity="0"/></linearGradient></defs><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0 .039.015.136.047.4C427.706 111.135 381.627 83.823 344 24.355c-1.9-3.007-3.805-6.022-5.661-9.2a73.716 73.716 0 01-2.646-4.972A43.7 43.7 0 01332.1.677a.626.626 0 00-.546-.644.818.818 0 00-.451 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1.027-.036.083-.117.1-.136-60.37 35.356-80.85 100.761-82.732 133.484a120.249 120.249 0 00-66.142 25.488 71.355 71.355 0 00-6.225-4.7 111.338 111.338 0 01-.674-58.732c-24.688 11.241-43.89 29.01-57.85 44.7h-.111c-9.527-12.067-8.855-51.873-8.312-60.184-.114-.515-7.107 3.63-8.023 4.255a175.073 175.073 0 00-23.486 20.12 210.478 210.478 0 00-22.442 26.913c0 .012-.007.026-.011.038 0-.013.007-.026.011-.038a202.838 202.838 0 00-32.247 72.805c-.115.521-.212 1.061-.324 1.586-.452 2.116-2.08 12.7-2.365 15-.022.177-.032.347-.053.524a229.066 229.066 0 00-3.9 33.157c0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746zM201.716 354.447c1.124.537 2.18 1.124 3.334 1.639.048.033.114.07.163.1a126.191 126.191 0 01-3.497-1.739zm55.053-144.93zm198.131-30.59l-.032-.233c.012.085.027.174.04.259z" fill="url(#a)"/><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0-.058.011.048.036.226.012.085.027.174.04.259 22.675 61.47 10.322 123.978-7.479 162.175-27.539 59.1-94.215 119.67-198.576 116.716C136.1 454.651 36.766 370.988 18.223 261.41c-3.379-17.28 0-26.054 1.7-40.084-2.071 10.816-2.86 13.94-3.9 33.157 0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746z" fill="url(#b)"/><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0-.058.011.048.036.226.012.085.027.174.04.259 22.675 61.47 10.322 123.978-7.479 162.175-27.539 59.1-94.215 119.67-198.576 116.716C136.1 454.651 36.766 370.988 18.223 261.41c-3.379-17.28 0-26.054 1.7-40.084-2.071 10.816-2.86 13.94-3.9 33.157 0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746z" fill="url(#c)"/><path d="M361.922 194.6c.524.368 1 .734 1.493 1.1a130.706 130.706 0 00-22.31-29.112C266.4 91.892 321.516 4.626 330.811.194c.027-.036.083-.117.1-.136-60.37 35.356-80.85 100.761-82.732 133.484 2.8-.194 5.592-.429 8.442-.429 45.051 0 84.289 24.77 105.301 61.487z" fill="url(#d)"/><path d="M256.772 209.514c-.393 5.978-21.514 26.593-28.9 26.593-68.339 0-79.432 41.335-79.432 41.335 3.027 34.81 27.261 63.475 56.611 78.643 1.339.692 2.694 1.317 4.05 1.935a132.768 132.768 0 007.059 2.886 106.743 106.743 0 0031.271 6.031c119.78 5.618 142.986-143.194 56.545-186.408 22.137-3.85 45.115 5.053 57.947 14.067-21.012-36.714-60.25-61.484-105.3-61.484-2.85 0-5.641.235-8.442.429a120.249 120.249 0 00-66.142 25.488c3.664 3.1 7.8 7.244 16.514 15.828 16.302 16.067 58.13 32.705 58.219 34.657z" fill="url(#e)"/><path d="M256.772 209.514c-.393 5.978-21.514 26.593-28.9 26.593-68.339 0-79.432 41.335-79.432 41.335 3.027 34.81 27.261 63.475 56.611 78.643 1.339.692 2.694 1.317 4.05 1.935a132.768 132.768 0 007.059 2.886 106.743 106.743 0 0031.271 6.031c119.78 5.618 142.986-143.194 56.545-186.408 22.137-3.85 45.115 5.053 57.947 14.067-21.012-36.714-60.25-61.484-105.3-61.484-2.85 0-5.641.235-8.442.429a120.249 120.249 0 00-66.142 25.488c3.664 3.1 7.8 7.244 16.514 15.828 16.302 16.067 58.13 32.705 58.219 34.657z" fill="url(#f)"/><path d="M170.829 151.036a244.042 244.042 0 014.981 3.3 111.338 111.338 0 01-.674-58.732c-24.688 11.241-43.89 29.01-57.85 44.7 1.155-.033 36.014-.66 53.543 10.732z" fill="url(#g)"/><path d="M18.223 261.41C36.766 370.988 136.1 454.651 248.855 457.844c104.361 2.954 171.037-57.62 198.576-116.716 17.8-38.2 30.154-100.7 7.479-162.175l-.008-.026-.032-.233c-.025-.178-.04-.284-.036-.226 0 .039.015.136.047.4 8.524 55.661-19.79 109.584-64.051 146.044l-.133.313c-86.245 70.223-168.774 42.368-185.484 30.966a144.108 144.108 0 01-3.5-1.743c-50.282-24.029-71.054-69.838-66.6-109.124-42.457 0-56.934-35.809-56.934-35.809s38.119-27.179 88.358-3.541c46.53 21.893 90.228 3.543 90.233 3.541-.089-1.952-41.917-18.59-58.223-34.656-8.713-8.584-12.85-12.723-16.514-15.828a71.355 71.355 0 00-6.225-4.7 282.929 282.929 0 00-4.981-3.3c-17.528-11.392-52.388-10.765-53.543-10.735h-.111c-9.527-12.067-8.855-51.873-8.312-60.184-.114-.515-7.107 3.63-8.023 4.255a175.073 175.073 0 00-23.486 20.12 210.478 210.478 0 00-22.442 26.919c0 .012-.007.026-.011.038 0-.013.007-.026.011-.038a202.838 202.838 0 00-32.247 72.805c-.115.521-8.65 37.842-4.44 57.199z" fill="url(#h)"/><path d="M341.105 166.587a130.706 130.706 0 0122.31 29.112c1.323.994 2.559 1.985 3.608 2.952 54.482 50.2 25.936 121.2 23.807 126.26 44.261-36.46 72.575-90.383 64.051-146.044C427.706 111.135 381.627 83.823 344 24.355c-1.9-3.007-3.805-6.022-5.661-9.2a73.716 73.716 0 01-2.646-4.972A43.7 43.7 0 01332.1.677a.626.626 0 00-.546-.644.818.818 0 00-.451 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1-9.291 4.428-64.407 91.694 10.298 166.389z" fill="url(#i)"/><path d="M367.023 198.651c-1.049-.967-2.285-1.958-3.608-2.952-.489-.368-.969-.734-1.493-1.1-12.832-9.014-35.81-17.917-57.947-14.067 86.441 43.214 63.235 192.026-56.545 186.408a106.743 106.743 0 01-31.271-6.031 134.51 134.51 0 01-7.059-2.886c-1.356-.618-2.711-1.243-4.05-1.935.048.033.114.07.163.1 16.71 11.4 99.239 39.257 185.484-30.966l.133-.313c2.129-5.054 30.675-76.057-23.807-126.258z" fill="url(#j)"/><path d="M148.439 277.443s11.093-41.335 79.432-41.335c7.388 0 28.509-20.615 28.9-26.593s-43.7 18.352-90.233-3.541c-50.239-23.638-88.358 3.541-88.358 3.541s14.477 35.809 56.934 35.809c-4.453 39.286 16.319 85.1 66.6 109.124 1.124.537 2.18 1.124 3.334 1.639-29.348-15.169-53.582-43.834-56.609-78.644z" fill="url(#k)"/><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0 .039.015.136.047.4C427.706 111.135 381.627 83.823 344 24.355c-1.9-3.007-3.805-6.022-5.661-9.2a73.716 73.716 0 01-2.646-4.972A43.7 43.7 0 01332.1.677a.626.626 0 00-.546-.644.818.818 0 00-.451 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1.027-.036.083-.117.1-.136-60.37 35.356-80.85 100.761-82.732 133.484 2.8-.194 5.592-.429 8.442-.429 45.053 0 84.291 24.77 105.3 61.484-12.832-9.014-35.81-17.917-57.947-14.067 86.441 43.214 63.235 192.026-56.545 186.408a106.743 106.743 0 01-31.271-6.031 134.51 134.51 0 01-7.059-2.886c-1.356-.618-2.711-1.243-4.05-1.935.048.033.114.07.163.1a144.108 144.108 0 01-3.5-1.743c1.124.537 2.18 1.124 3.334 1.639-29.35-15.168-53.584-43.833-56.611-78.643 0 0 11.093-41.335 79.432-41.335 7.388 0 28.509-20.615 28.9-26.593-.089-1.952-41.917-18.59-58.223-34.656-8.713-8.584-12.85-12.723-16.514-15.828a71.355 71.355 0 00-6.225-4.7 111.338 111.338 0 01-.674-58.732c-24.688 11.241-43.89 29.01-57.85 44.7h-.111c-9.527-12.067-8.855-51.873-8.312-60.184-.114-.515-7.107 3.63-8.023 4.255a175.073 175.073 0 00-23.486 20.12 210.478 210.478 0 00-22.435 26.916c0 .012-.007.026-.011.038 0-.013.007-.026.011-.038a202.838 202.838 0 00-32.247 72.805c-.115.521-.212 1.061-.324 1.586-.452 2.116-2.486 12.853-2.77 15.156-.022.177.021-.176 0 0a279.565 279.565 0 00-3.544 33.53c0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746zm-23.841 12.341c.012.085.027.174.04.259l-.008-.026-.032-.233z" fill="url(#l)"/></svg>
diff --git a/devtools/client/themes/images/aboutdebugging-firefox-release.svg b/devtools/client/themes/images/aboutdebugging-firefox-release.svg
new file mode 100644
index 0000000000..4c195cf17c
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-firefox-release.svg
@@ -0,0 +1,4 @@
+<!-- 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 512 512"><defs><radialGradient id="b" cx="87.4%" cy="-12.9%" r="128%" gradientTransform="matrix(.8 0 0 1 .178 .129)"><stop offset=".13" stop-color="#ffbd4f"/><stop offset=".28" stop-color="#ff980e"/><stop offset=".47" stop-color="#ff3750"/><stop offset=".78" stop-color="#eb0878"/><stop offset=".86" stop-color="#e50080"/></radialGradient><radialGradient id="c" cx="49%" cy="40%" r="128%" gradientTransform="matrix(.82 0 0 1 .088 0)"><stop offset=".3" stop-color="#960e18"/><stop offset=".35" stop-color="#b11927" stop-opacity=".74"/><stop offset=".43" stop-color="#db293d" stop-opacity=".34"/><stop offset=".5" stop-color="#f5334b" stop-opacity=".09"/><stop offset=".53" stop-color="#ff3750" stop-opacity="0"/></radialGradient><radialGradient id="d" cx="48%" cy="-12%" r="140%"><stop offset=".13" stop-color="#fff44f"/><stop offset=".53" stop-color="#ff980e"/></radialGradient><radialGradient id="e" cx="22.76%" cy="110.11%" r="100%"><stop offset=".35" stop-color="#3a8ee6"/><stop offset=".67" stop-color="#9059ff"/><stop offset="1" stop-color="#c139e6"/></radialGradient><radialGradient id="f" cx="52%" cy="33%" r="59%" gradientTransform="scale(.9 1)"><stop offset=".21" stop-color="#9059ff" stop-opacity="0"/><stop offset=".97" stop-color="#6e008b" stop-opacity=".6"/></radialGradient><radialGradient id="g" cx="210%" cy="-100%" r="290%"><stop offset=".1" stop-color="#ffe226"/><stop offset=".79" stop-color="#ff7139"/></radialGradient><radialGradient id="h" cx="84%" cy="-41%" r="180%"><stop offset=".11" stop-color="#fff44f"/><stop offset=".46" stop-color="#ff980e"/><stop offset=".72" stop-color="#ff3647"/><stop offset=".9" stop-color="#e31587"/></radialGradient><radialGradient id="i" cx="16.1%" cy="-18.6%" r="348.8%" gradientTransform="matrix(.10453 .46743 -.99452 .04913 -.046 -.255)"><stop offset="0" stop-color="#fff44f"/><stop offset=".3" stop-color="#ff980e"/><stop offset=".57" stop-color="#ff3647"/><stop offset=".74" stop-color="#e31587"/></radialGradient><radialGradient id="j" cx="18.9%" cy="-42.5%" r="238.4%"><stop offset=".14" stop-color="#fff44f"/><stop offset=".48" stop-color="#ff980e"/><stop offset=".66" stop-color="#ff3647"/><stop offset=".9" stop-color="#e31587"/></radialGradient><radialGradient id="k" cx="159.3%" cy="-44.72%" r="313.1%"><stop offset=".09" stop-color="#fff44f"/><stop offset=".63" stop-color="#ff980e"/></radialGradient><linearGradient id="a" x1="87.25%" y1="15.5%" x2="9.4%" y2="93.1%"><stop offset=".05" stop-color="#fff44f"/><stop offset=".37" stop-color="#ff980e"/><stop offset=".53" stop-color="#ff3647"/><stop offset=".7" stop-color="#e31587"/></linearGradient><linearGradient id="l" x1="80%" y1="14%" x2="18%" y2="84%"><stop offset=".17" stop-color="#fff44f" stop-opacity=".8"/><stop offset=".6" stop-color="#fff44f" stop-opacity="0"/></linearGradient></defs><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0 .039.015.136.047.4C427.706 111.135 381.627 83.823 344 24.355c-1.9-3.007-3.805-6.022-5.661-9.2a73.716 73.716 0 01-2.646-4.972A43.7 43.7 0 01332.1.677a.626.626 0 00-.546-.644.818.818 0 00-.451 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1.027-.036.083-.117.1-.136-60.37 35.356-80.85 100.761-82.732 133.484a120.249 120.249 0 00-66.142 25.488 71.355 71.355 0 00-6.225-4.7 111.338 111.338 0 01-.674-58.732c-24.688 11.241-43.89 29.01-57.85 44.7h-.111c-9.527-12.067-8.855-51.873-8.312-60.184-.114-.515-7.107 3.63-8.023 4.255a175.073 175.073 0 00-23.486 20.12 210.478 210.478 0 00-22.442 26.913c0 .012-.007.026-.011.038 0-.013.007-.026.011-.038a202.838 202.838 0 00-32.247 72.805c-.115.521-.212 1.061-.324 1.586-.452 2.116-2.08 12.7-2.365 15-.022.177-.032.347-.053.524a229.066 229.066 0 00-3.9 33.157c0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746zM201.716 354.447c1.124.537 2.18 1.124 3.334 1.639.048.033.114.07.163.1a126.191 126.191 0 01-3.497-1.739zm55.053-144.93zm198.131-30.59l-.032-.233c.012.085.027.174.04.259z" fill="url(#a)"/><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0-.058.011.048.036.226.012.085.027.174.04.259 22.675 61.47 10.322 123.978-7.479 162.175-27.539 59.1-94.215 119.67-198.576 116.716C136.1 454.651 36.766 370.988 18.223 261.41c-3.379-17.28 0-26.054 1.7-40.084-2.071 10.816-2.86 13.94-3.9 33.157 0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746z" fill="url(#b)"/><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0-.058.011.048.036.226.012.085.027.174.04.259 22.675 61.47 10.322 123.978-7.479 162.175-27.539 59.1-94.215 119.67-198.576 116.716C136.1 454.651 36.766 370.988 18.223 261.41c-3.379-17.28 0-26.054 1.7-40.084-2.071 10.816-2.86 13.94-3.9 33.157 0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746z" fill="url(#c)"/><path d="M361.922 194.6c.524.368 1 .734 1.493 1.1a130.706 130.706 0 00-22.31-29.112C266.4 91.892 321.516 4.626 330.811.194c.027-.036.083-.117.1-.136-60.37 35.356-80.85 100.761-82.732 133.484 2.8-.194 5.592-.429 8.442-.429 45.051 0 84.289 24.77 105.301 61.487z" fill="url(#d)"/><path d="M256.772 209.514c-.393 5.978-21.514 26.593-28.9 26.593-68.339 0-79.432 41.335-79.432 41.335 3.027 34.81 27.261 63.475 56.611 78.643 1.339.692 2.694 1.317 4.05 1.935a132.768 132.768 0 007.059 2.886 106.743 106.743 0 0031.271 6.031c119.78 5.618 142.986-143.194 56.545-186.408 22.137-3.85 45.115 5.053 57.947 14.067-21.012-36.714-60.25-61.484-105.3-61.484-2.85 0-5.641.235-8.442.429a120.249 120.249 0 00-66.142 25.488c3.664 3.1 7.8 7.244 16.514 15.828 16.302 16.067 58.13 32.705 58.219 34.657z" fill="url(#e)"/><path d="M256.772 209.514c-.393 5.978-21.514 26.593-28.9 26.593-68.339 0-79.432 41.335-79.432 41.335 3.027 34.81 27.261 63.475 56.611 78.643 1.339.692 2.694 1.317 4.05 1.935a132.768 132.768 0 007.059 2.886 106.743 106.743 0 0031.271 6.031c119.78 5.618 142.986-143.194 56.545-186.408 22.137-3.85 45.115 5.053 57.947 14.067-21.012-36.714-60.25-61.484-105.3-61.484-2.85 0-5.641.235-8.442.429a120.249 120.249 0 00-66.142 25.488c3.664 3.1 7.8 7.244 16.514 15.828 16.302 16.067 58.13 32.705 58.219 34.657z" fill="url(#f)"/><path d="M170.829 151.036a244.042 244.042 0 014.981 3.3 111.338 111.338 0 01-.674-58.732c-24.688 11.241-43.89 29.01-57.85 44.7 1.155-.033 36.014-.66 53.543 10.732z" fill="url(#g)"/><path d="M18.223 261.41C36.766 370.988 136.1 454.651 248.855 457.844c104.361 2.954 171.037-57.62 198.576-116.716 17.8-38.2 30.154-100.7 7.479-162.175l-.008-.026-.032-.233c-.025-.178-.04-.284-.036-.226 0 .039.015.136.047.4 8.524 55.661-19.79 109.584-64.051 146.044l-.133.313c-86.245 70.223-168.774 42.368-185.484 30.966a144.108 144.108 0 01-3.5-1.743c-50.282-24.029-71.054-69.838-66.6-109.124-42.457 0-56.934-35.809-56.934-35.809s38.119-27.179 88.358-3.541c46.53 21.893 90.228 3.543 90.233 3.541-.089-1.952-41.917-18.59-58.223-34.656-8.713-8.584-12.85-12.723-16.514-15.828a71.355 71.355 0 00-6.225-4.7 282.929 282.929 0 00-4.981-3.3c-17.528-11.392-52.388-10.765-53.543-10.735h-.111c-9.527-12.067-8.855-51.873-8.312-60.184-.114-.515-7.107 3.63-8.023 4.255a175.073 175.073 0 00-23.486 20.12 210.478 210.478 0 00-22.442 26.919c0 .012-.007.026-.011.038 0-.013.007-.026.011-.038a202.838 202.838 0 00-32.247 72.805c-.115.521-8.65 37.842-4.44 57.199z" fill="url(#h)"/><path d="M341.105 166.587a130.706 130.706 0 0122.31 29.112c1.323.994 2.559 1.985 3.608 2.952 54.482 50.2 25.936 121.2 23.807 126.26 44.261-36.46 72.575-90.383 64.051-146.044C427.706 111.135 381.627 83.823 344 24.355c-1.9-3.007-3.805-6.022-5.661-9.2a73.716 73.716 0 01-2.646-4.972A43.7 43.7 0 01332.1.677a.626.626 0 00-.546-.644.818.818 0 00-.451 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1-9.291 4.428-64.407 91.694 10.298 166.389z" fill="url(#i)"/><path d="M367.023 198.651c-1.049-.967-2.285-1.958-3.608-2.952-.489-.368-.969-.734-1.493-1.1-12.832-9.014-35.81-17.917-57.947-14.067 86.441 43.214 63.235 192.026-56.545 186.408a106.743 106.743 0 01-31.271-6.031 134.51 134.51 0 01-7.059-2.886c-1.356-.618-2.711-1.243-4.05-1.935.048.033.114.07.163.1 16.71 11.4 99.239 39.257 185.484-30.966l.133-.313c2.129-5.054 30.675-76.057-23.807-126.258z" fill="url(#j)"/><path d="M148.439 277.443s11.093-41.335 79.432-41.335c7.388 0 28.509-20.615 28.9-26.593s-43.7 18.352-90.233-3.541c-50.239-23.638-88.358 3.541-88.358 3.541s14.477 35.809 56.934 35.809c-4.453 39.286 16.319 85.1 66.6 109.124 1.124.537 2.18 1.124 3.334 1.639-29.348-15.169-53.582-43.834-56.609-78.644z" fill="url(#k)"/><path d="M478.711 166.353c-10.445-25.124-31.6-52.248-48.212-60.821 13.52 26.505 21.345 53.093 24.335 72.936 0 .039.015.136.047.4C427.706 111.135 381.627 83.823 344 24.355c-1.9-3.007-3.805-6.022-5.661-9.2a73.716 73.716 0 01-2.646-4.972A43.7 43.7 0 01332.1.677a.626.626 0 00-.546-.644.818.818 0 00-.451 0c-.034.012-.084.051-.12.065-.053.021-.12.069-.176.1.027-.036.083-.117.1-.136-60.37 35.356-80.85 100.761-82.732 133.484 2.8-.194 5.592-.429 8.442-.429 45.053 0 84.291 24.77 105.3 61.484-12.832-9.014-35.81-17.917-57.947-14.067 86.441 43.214 63.235 192.026-56.545 186.408a106.743 106.743 0 01-31.271-6.031 134.51 134.51 0 01-7.059-2.886c-1.356-.618-2.711-1.243-4.05-1.935.048.033.114.07.163.1a144.108 144.108 0 01-3.5-1.743c1.124.537 2.18 1.124 3.334 1.639-29.35-15.168-53.584-43.833-56.611-78.643 0 0 11.093-41.335 79.432-41.335 7.388 0 28.509-20.615 28.9-26.593-.089-1.952-41.917-18.59-58.223-34.656-8.713-8.584-12.85-12.723-16.514-15.828a71.355 71.355 0 00-6.225-4.7 111.338 111.338 0 01-.674-58.732c-24.688 11.241-43.89 29.01-57.85 44.7h-.111c-9.527-12.067-8.855-51.873-8.312-60.184-.114-.515-7.107 3.63-8.023 4.255a175.073 175.073 0 00-23.486 20.12 210.478 210.478 0 00-22.435 26.916c0 .012-.007.026-.011.038 0-.013.007-.026.011-.038a202.838 202.838 0 00-32.247 72.805c-.115.521-.212 1.061-.324 1.586-.452 2.116-2.486 12.853-2.77 15.156-.022.177.021-.176 0 0a279.565 279.565 0 00-3.544 33.53c0 .41-.025.816-.025 1.227C16 388.418 123.6 496 256.324 496c118.865 0 217.56-86.288 236.882-199.63.407-3.076.733-6.168 1.092-9.271 4.777-41.21-.53-84.525-15.587-120.746zm-23.841 12.341c.012.085.027.174.04.259l-.008-.026-.032-.233z" fill="url(#l)"/></svg>
diff --git a/devtools/client/themes/images/aboutdebugging-globe-icon.svg b/devtools/client/themes/images/aboutdebugging-globe-icon.svg
new file mode 100644
index 0000000000..1582e5e861
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-globe-icon.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="24" height="24" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
+  <!-- We transform the icon here in order to have consistent sizes between this icon and aboutdebugging-connect-icon.svg
+  which is used for USB runtimes. -->
+  <g transform="scale(0.75) translate(2.5, 2.5)">
+    <path d="M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm5.16 4.96h-1.55a7.7 7.7 0 0 0-1.05-2.38 6.03 6.03 0 0 1 2.6 2.38zM14 8a5.96 5.96 0 0 1-.34 1.96h-1.82A12.33 12.33 0 0 0 12 8a12.33 12.33 0 0 0-.16-1.96h1.82A5.96 5.96 0 0 1 14 8zm-6 6c-1.07 0-2.04-1.2-2.57-2.96h5.14C10.04 12.8 9.07 14 8 14zM5.17 9.96a11.08 11.08 0 0 1 0-3.92h5.66A11.11 11.11 0 0 1 11 8a11.11 11.11 0 0 1-.17 1.96zM2 8a5.96 5.96 0 0 1 .34-1.96h1.82a12.36 12.36 0 0 0 0 3.92H2.33A5.96 5.96 0 0 1 2 8zm6-6c1.07 0 2.04 1.2 2.57 2.96H5.43C5.96 3.2 6.93 2 8 2zm-2.56.58a7.7 7.7 0 0 0-1.05 2.38H2.84a6.03 6.03 0 0 1 2.6-2.38zm-2.6 8.46h1.55a7.7 7.7 0 0 0 1.05 2.38 6.03 6.03 0 0 1-2.6-2.38zm7.72 2.38a7.7 7.7 0 0 0 1.05-2.38h1.56a6.03 6.03 0 0 1-2.61 2.38z"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/aboutdebugging-information.svg b/devtools/client/themes/images/aboutdebugging-information.svg
new file mode 100644
index 0000000000..789d1d9ead
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-information.svg
@@ -0,0 +1,8 @@
+<!-- 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" fill="context-fill">
+	<path d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8zM8 2a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6z"/>
+	<path d="M8 7a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z"/>
+	<circle cx="8" cy="5" r="1.188"/>
+</svg>
diff --git a/devtools/client/themes/images/aboutdebugging-process-icon.svg b/devtools/client/themes/images/aboutdebugging-process-icon.svg
new file mode 100644
index 0000000000..1ad85974a5
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-process-icon.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill #0c0c0d">
+  <path d="M13 1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10zm0 2H3c-.54 0-1 .46-1 1v1h12V4c0-.54-.46-1-1-1zm1 3H2v6c0 .54.46 1 1 1h10c.54 0 1-.46 1-1V6z"/>
+  <path d="M4.15 7.15c.2-.2.5-.2.7 0l2 2c.2.2.2.5 0 .7l-2 2a.5.5 0 0 1-.7-.7L5.79 9.5 4.15 7.85a.5.5 0 0 1 0-.7z"/>
+</svg>
diff --git a/devtools/client/themes/images/aboutdebugging-usb-icon.svg b/devtools/client/themes/images/aboutdebugging-usb-icon.svg
new file mode 100644
index 0000000000..a30949a298
--- /dev/null
+++ b/devtools/client/themes/images/aboutdebugging-usb-icon.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 data-name="usb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M13.5 4h-2a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h.44c-.17.63-.69.8-1.56 1A4.76 4.76 0 0 0 9 8.53V4h1.07a.46.46 0 0 0 .37-.74L8.37.5a.46.46 0 0 0-.74 0L5.56 3.26a.46.46 0 0 0 .37.74H7v6.53A4.76 4.76 0 0 0 5.62 10C4.71 9.79 4.17 9.61 4 8.9a1.5 1.5 0 1 0-2-1.4 1.49 1.49 0 0 0 1 1.42c.2 1.51 1.42 1.84 2.34 2.07s1.53.43 1.6 1.3a2 2 0 1 0 2 0V10.5C9 9.44 9.56 9.25 10.62 9s2.1-.54 2.33-2h.55a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z" />
+</svg>
diff --git a/devtools/client/themes/images/accessibility.svg b/devtools/client/themes/images/accessibility.svg
new file mode 100644
index 0000000000..fc69977b0f
--- /dev/null
+++ b/devtools/client/themes/images/accessibility.svg
@@ -0,0 +1,9 @@
+<!-- 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 16 16" fill="context-fill">
+<path d="M8,0C3.6,0,0,3.6,0,8s3.6,8,8,8s8-3.6,8-8S12.4,0,8,0z M8,2.7c0.7,0,1.3,0.6,1.3,1.3S8.7,5.3,8,5.3
+	S6.7,4.7,6.7,4S7.3,2.7,8,2.7z M12,6.9H9.7v3v2.7c0,0.4-0.3,0.7-0.7,0.7S8.3,13,8.3,12.6V9.9H7.7v2.7c0,0.4-0.3,0.7-0.7,0.7
+	S6.3,13,6.3,12.6V7.4V7H4C3.6,7,3.3,6.7,3.3,6.3c0-0.4,0.3-0.7,0.7-0.7h2.3h3.3h2.4c0.3,0,0.6,0.2,0.6,0.5C12.7,6.6,12.4,6.9,12,6.9
+	z"/>
+</svg>
diff --git a/devtools/client/themes/images/add.svg b/devtools/client/themes/images/add.svg
new file mode 100644
index 0000000000..b75916813c
--- /dev/null
+++ b/devtools/client/themes/images/add.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M14 7H9V2a1 1 0 0 0-2 0v5H2a1 1 0 1 0 0 2h5v5a1 1 0 0 0 2 0V9h5a1 1 0 0 0 0-2z"/>
+</svg>
diff --git a/devtools/client/themes/images/alert-small.svg b/devtools/client/themes/images/alert-small.svg
new file mode 100644
index 0000000000..8b9102cae3
--- /dev/null
+++ b/devtools/client/themes/images/alert-small.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 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/alert-tiny.svg b/devtools/client/themes/images/alert-tiny.svg
new file mode 100644
index 0000000000..4238dd5846
--- /dev/null
+++ b/devtools/client/themes/images/alert-tiny.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" width="9" height="9">
+  <path fill="context-fill" fill-rule="evenodd" d="M4.941.765a.5.5 0 0 0-.882 0l-4 7.5A.5.5 0 0 0 .5 9h8a.5.5 0 0 0 .441-.735l-4-7.5zM4.5 2.8a.7.7 0 0 0-.7.7v1.8a.7.7 0 1 0 1.4 0V3.5a.7.7 0 0 0-.7-.7zm0 5.4a.7.7 0 1 0 0-1.4.7.7 0 0 0 0 1.4z"/>
+</svg>
diff --git a/devtools/client/themes/images/alert.svg b/devtools/client/themes/images/alert.svg
new file mode 100644
index 0000000000..49d37234d9
--- /dev/null
+++ b/devtools/client/themes/images/alert.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill #FFBF00" d="M14.742 12.106L9.789 2.2a2 2 0 0 0-3.578 0l-4.953 9.91A2 2 0 0 0 3.047 15h9.905a2 2 0 0 0 1.79-2.894zM7 5a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0zm1 8.25A1.25 1.25 0 1 1 9.25 12 1.25 1.25 0 0 1 8 13.25z" />
+</svg>
diff --git a/devtools/client/themes/images/angle-swatch.svg b/devtools/client/themes/images/angle-swatch.svg
new file mode 100644
index 0000000000..d32168495a
--- /dev/null
+++ b/devtools/client/themes/images/angle-swatch.svg
@@ -0,0 +1,16 @@
+<!-- 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="12px" height="12px">
+  <mask id="angle-mask">
+    <rect width="100%" height="100%" fill="#fff"/>
+    <polygon points="6 6, 12 12, 0 12, 0 0, 6 0, 6 6"/>
+  </mask>
+  <mask id="circle-mask">
+    <circle cx="6" cy="6" r="6" fill="#fff"/>
+  </mask>
+  <circle cx="6" cy="6" r="6" fill="#fff"/>
+  <circle cx="6" cy="6" r="6" mask="url(#angle-mask)" fill="#aeb0b1"/>
+  <line x1="6" y1="0" x2="6" y2="6" stroke-width="0.5" stroke="rgba(0,0,0,0.5)"></line>
+  <line x1="6" y1="6" x2="12" y2="12" stroke-width="0.5" stroke="rgba(0,0,0,0.5)" mask="url(#circle-mask)"></line>
+</svg>
diff --git a/devtools/client/themes/images/animation-fast-track.svg b/devtools/client/themes/images/animation-fast-track.svg
new file mode 100644
index 0000000000..5721c9a510
--- /dev/null
+++ b/devtools/client/themes/images/animation-fast-track.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 12" width="16" height="16">
+  <path d="M5.75 0l-1 5.5 2 .5-3.5 6 1-5-2-.5z" fill="context-fill"/>
+</svg>
diff --git a/devtools/client/themes/images/application-debug.svg b/devtools/client/themes/images/application-debug.svg
new file mode 100644
index 0000000000..d52311b12a
--- /dev/null
+++ b/devtools/client/themes/images/application-debug.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="10" height="7" viewBox="0 0 10 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.146 5.146C7.09824 5.19212 7.06015 5.2473 7.03395 5.3083C7.00774 5.3693 6.99395 5.43491 6.99337 5.5013C6.9928 5.56769 7.00545 5.63353 7.03059 5.69498C7.05573 5.75642 7.09286 5.81225 7.1398 5.8592C7.18675 5.90614 7.24257 5.94327 7.30402 5.96841C7.36547 5.99355 7.43131 6.0062 7.4977 6.00562C7.56409 6.00505 7.6297 5.99126 7.6907 5.96505C7.7517 5.93885 7.80688 5.90075 7.853 5.853L9.853 3.853C9.94674 3.75924 9.99939 3.63208 9.99939 3.4995C9.99939 3.36692 9.94674 3.23976 9.853 3.146L7.853 1.146C7.7587 1.05492 7.6324 1.00452 7.5013 1.00566C7.3702 1.0068 7.24479 1.05939 7.15209 1.15209C7.05939 1.24479 7.0068 1.3702 7.00566 1.5013C7.00452 1.6324 7.05492 1.7587 7.146 1.853L8.293 3H1.5C1.36739 3 1.24021 2.94732 1.14645 2.85355C1.05268 2.75979 1 2.63261 1 2.5V0.5C1 0.367392 0.947322 0.240215 0.853553 0.146447C0.759785 0.0526785 0.632608 0 0.5 0C0.367392 0 0.240215 0.0526785 0.146447 0.146447C0.0526784 0.240215 0 0.367392 0 0.5L0 2.5C0 2.89782 0.158035 3.27936 0.43934 3.56066C0.720644 3.84196 1.10218 4 1.5 4H8.293L7.146 5.146Z" fill="#737373"/>
+</svg>
diff --git a/devtools/client/themes/images/application-manifest.svg b/devtools/client/themes/images/application-manifest.svg
new file mode 100644
index 0000000000..4bf5ae4d18
--- /dev/null
+++ b/devtools/client/themes/images/application-manifest.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 xmlns="http://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16" fill="context-fill">
+	<path d="M12.6647273,4.78981818 L8.30109091,0.426181818 C8.02837421,0.153382728 7.65846518,8.23816807e-05 7.27272727,0 L5.81818182,0 L2,0 C0.8954305,2.02906125e-16 -2.13367219e-15,0.8954305 -1.99840144e-15,2 L-1.86719327e-15,8.72727273 L-1.86719327e-15,13.0909091 C-1.86719327e-15,14.6975556 1.30244436,16 2.90909091,16 L10.1818182,16 C11.7884647,16 13.0909091,14.6975556 13.0909091,13.0909091 L13.0909091,5.81818182 C13.0908267,5.43244391 12.9375264,5.06253488 12.6647273,4.78981818 Z M9.57963636,5.81818182 L7.27272727,5.81818182 L7.27272727,3.51127273 L9.57963636,5.81818182 Z M2.90909091,13.0909091 L2.90909091,2.90909091 L5.81818182,2.90909091 L5.81818182,6.54545455 C5.81818182,6.94711618 6.14379291,7.27272727 6.54545455,7.27272727 L10.1818182,7.27272727 L10.1818182,13.0909091 L2.90909091,13.0909091 Z" />
+</svg>
diff --git a/devtools/client/themes/images/arrow-big.svg b/devtools/client/themes/images/arrow-big.svg
new file mode 100644
index 0000000000..236dc16f93
--- /dev/null
+++ b/devtools/client/themes/images/arrow-big.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 viewBox="0 0 10 10" fill="context-fill #0b0b0b" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 8c-.25 0-.35-.1-.65-.4l-4-4.1C-.28 2.87 0 2 .9 2h8.2c.9 0 1.18.88.55 1.5l-4 4.1c-.3.3-.4.4-.65.4z" />
+</svg>
diff --git a/devtools/client/themes/images/arrow-dropdown-12.svg b/devtools/client/themes/images/arrow-dropdown-12.svg
new file mode 100644
index 0000000000..1a784357ce
--- /dev/null
+++ b/devtools/client/themes/images/arrow-dropdown-12.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 xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M6 9a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414L6 6.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3A1 1 0 0 1 6 9z"/>
+</svg>
diff --git a/devtools/client/themes/images/arrow-e.svg b/devtools/client/themes/images/arrow-e.svg
new file mode 100644
index 0000000000..781436c1dc
--- /dev/null
+++ b/devtools/client/themes/images/arrow-e.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
+  <path stroke="context-fill #0b0b0b" stroke-width="1.5" d="M2.5 1.2l3 2.8-3 2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/devtools/client/themes/images/arrow.svg b/devtools/client/themes/images/arrow.svg
new file mode 100644
index 0000000000..6c588b7f68
--- /dev/null
+++ b/devtools/client/themes/images/arrow.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 viewBox="0 0 10 10" fill="context-fill #0b0b0b" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 8c-.25 0-.35-.1-.65-.4l-3.1-3.35C.75 3.7 1.1 3 1.75 3h6.5c.65 0 1 .7.5 1.25L5.65 7.6c-.3.3-.4.4-.65.4z"/>
+</svg>
diff --git a/devtools/client/themes/images/arrowhead-down.svg b/devtools/client/themes/images/arrowhead-down.svg
new file mode 100644
index 0000000000..e8b649d504
--- /dev/null
+++ b/devtools/client/themes/images/arrowhead-down.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="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill #0C0C0D" fill-rule="evenodd" clip-rule="evenodd" d="M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414z"></path>
+</svg>
diff --git a/devtools/client/themes/images/arrowhead-left.svg b/devtools/client/themes/images/arrowhead-left.svg
new file mode 100644
index 0000000000..80ef9db241
--- /dev/null
+++ b/devtools/client/themes/images/arrowhead-left.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="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill #0C0C0D" fill-rule="evenodd" clip-rule="evenodd" d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 1 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0z"></path>
+</svg>
diff --git a/devtools/client/themes/images/arrowhead-right.svg b/devtools/client/themes/images/arrowhead-right.svg
new file mode 100644
index 0000000000..cdeba1821d
--- /dev/null
+++ b/devtools/client/themes/images/arrowhead-right.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="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill #0C0C0D" fill-rule="evenodd" clip-rule="evenodd" d="M8.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L14.586 12 8.293 5.707a1 1 0 0 1 0-1.414z"></path>
+</svg>
diff --git a/devtools/client/themes/images/arrowhead-up.svg b/devtools/client/themes/images/arrowhead-up.svg
new file mode 100644
index 0000000000..3eb5ff635a
--- /dev/null
+++ b/devtools/client/themes/images/arrowhead-up.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="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill="context-fill #0C0C0D" fill-rule="evenodd" clip-rule="evenodd" d="M12.707 7.293a1 1 0 0 0-1.414 0l-7 7a1 1 0 0 0 1.414 1.414L12 9.414l6.293 6.293a1 1 0 0 0 1.414-1.414l-7-7z"></path>
+</svg>
diff --git a/devtools/client/themes/images/blocked.svg b/devtools/client/themes/images/blocked.svg
new file mode 100644
index 0000000000..f887407aed
--- /dev/null
+++ b/devtools/client/themes/images/blocked.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="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="5" stroke="context-fill" stroke-width="2"/>
+<path d="M2.625 2.625L9.375 9.375" stroke="context-fill" stroke-width="2"/>
+</svg>
diff --git a/devtools/client/themes/images/breadcrumbs-divider.svg b/devtools/client/themes/images/breadcrumbs-divider.svg
new file mode 100644
index 0000000000..1cda1156b8
--- /dev/null
+++ b/devtools/client/themes/images/breadcrumbs-divider.svg
@@ -0,0 +1,18 @@
+<!-- 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="5" height="7">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#9a9aba"/>
+      <stop offset="1" stop-color="#a6a6c2"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#8e8eb2"/>
+      <stop offset="1" stop-color="#9a9aba"/>
+    </linearGradient>
+    <linearGradient x1="3.616" y1="3.893" x2="1.285" y2="-.757" id="d" href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 .8684 0 1046.257)"/>
+    <linearGradient x1="2.232" y1="4.162" x2=".629" y2=".966" id="c" href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 .8684 0 1046.257)"/>
+  </defs>
+  <path d="M.2 1045.562l4.6 3.3-4.6 3.3 2-3.3z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linejoin="round" transform="translate(0 -1045.362)"/>
+</svg>
diff --git a/devtools/client/themes/images/breadcrumbs-scrollbutton.svg b/devtools/client/themes/images/breadcrumbs-scrollbutton.svg
new file mode 100644
index 0000000000..59c9c5d72f
--- /dev/null
+++ b/devtools/client/themes/images/breadcrumbs-scrollbutton.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M6.414 8l4.293-4.293a1 1 0 0 0-1.414-1.414l-5 5a1 1 0 0 0 0 1.414l5 5a1 1 0 0 0 1.414-1.414z"></path>
+</svg>
diff --git a/devtools/client/themes/images/browsers/chrome.svg b/devtools/client/themes/images/browsers/chrome.svg
new file mode 100644
index 0000000000..6e72bf6e6e
--- /dev/null
+++ b/devtools/client/themes/images/browsers/chrome.svg
@@ -0,0 +1,8 @@
+<!-- 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="30" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill rgba(135, 135, 137, 0.9)"
+      d="M13.953 0A13.9 13.9 0 0 1 21 1.875a14.04 14.04 0 0 1 5.5 5.812l-11.594-.609c-3.281-.187-6.406 1.656-7.484 4.75L3.11 5.203C5.798 1.859 9.829.016 13.954 0zM2.281 6.328l5.266 10.359c1.484 2.922 4.625 4.703 7.875 4.094l-3.594 7.047C5.125 26.797 0 21 0 14c0-2.828.844-5.469 2.281-7.672zm24.781 2.641c2.453 6.312 0 13.656-6.062 17.156a13.962 13.962 0 0 1-7.781 1.859l6.328-9.734c1.797-2.766 1.766-6.375-.375-8.875zM14 9.281c2.609 0 4.719 2.109 4.719 4.719S16.61 18.719 14 18.719 9.281 16.61 9.281 14 11.39 9.281 14 9.281z"/>
+</svg>
diff --git a/devtools/client/themes/images/browsers/edge.svg b/devtools/client/themes/images/browsers/edge.svg
new file mode 100644
index 0000000000..6f29030e0e
--- /dev/null
+++ b/devtools/client/themes/images/browsers/edge.svg
@@ -0,0 +1,8 @@
+<!-- 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="28" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill rgba(135, 135, 137, 0.9)"
+      d="M13.966 0A13.966 13.973 0 0 0 .494 10.294c1.276-1.36 2.62-2.343 4.039-2.955 2.12-.914 4.382-1.004 6.716-.467 4.841 1.114 6.054 6.024 6.054 6.024l-.042.01c.139.403.214.835.214 1.283 0 1.184-.526 2.25-1.354 2.955.954.69 2.703 1.454 4.784 1.28 1.97-.163 4.365-1.1 7.014-3.99a13.966 13.973 0 0 0 .013-.461A13.966 13.973 0 0 0 13.966 0zM8.405 7.823a8.511 8.511 0 0 0-3.362.699c-1.726.744-3.391 2.135-4.994 4.332a13.966 13.973 0 0 0-.05 1.119 13.966 13.973 0 0 0 13.464 13.96c-1.561-.822-2.804-1.802-3.746-2.942-1.472-1.78-2.199-3.935-2.337-6.326-.288-4.962 4.09-7.496 4.09-7.496l.003.006a3.61 3.61 0 0 1 3.154-.717c-.784-.98-1.952-1.94-3.666-2.334a11.243 11.243 0 0 0-2.32-.299c-.079-.002-.158-.002-.235-.002zm1.648 6.351c-.798 1.047-1.498 2.52-1.388 4.422.126 2.182.758 4.019 2.04 5.57 1.2 1.452 3.004 2.66 5.567 3.584a13.966 13.973 0 0 0 10.02-7.22c-1.744.987-3.463 1.494-5.07 1.628-3.177.264-5.767-.842-7.389-2.049-1.448-1.077-2.31-2.094-2.811-2.924a5.443 5.443 0 0 1-.507-1.071 3.142 3.142 0 0 1-.06-.204 3.896 3.896 0 0 1-.402-1.721v-.014z"/>
+</svg>
diff --git a/devtools/client/themes/images/browsers/firefox.svg b/devtools/client/themes/images/browsers/firefox.svg
new file mode 100644
index 0000000000..ea356d4331
--- /dev/null
+++ b/devtools/client/themes/images/browsers/firefox.svg
@@ -0,0 +1,8 @@
+<!-- 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="28" height="28" aria-hidden="true" role="img" viewBox="0 0 512 512">
+  <path
+      fill="context-fill rgba(135, 135, 137, 0.9)"
+      d="M190.368 150.591c0.157 0.009 0.079 0.003 0 0zm-57.874-28.933c0.158 0.008 0.079 0.003 0 0zm346.228 44.674c-10.445-25.123-31.6-52.248-48.211-60.82 13.52 26.5 21.345 53.093 24.335 72.935 0 0.04 0.015 0.136 0.047 0.4-27.175-67.732-73.254-95.047-110.886-154.512-1.9-3.008-3.805-6.022-5.661-9.2a73.237 73.237 0 0 1-2.646-4.972 43.757 43.757 0 0 1-3.585-9.5 0.625 0.625 0 0 0-0.546-0.644 0.8 0.8 0 0 0-0.451 0c-0.033 0.011-0.084 0.051-0.119 0.065-0.053 0.02-0.12 0.069-0.176 0.095 0.026-0.036 0.083-0.117 0.1-0.135-53.437 31.3-75.587 86.093-81.282 120.97a128.057 128.057 0 0 0-47.624 12.153 6.144 6.144 0 0 0-3.041 7.63 6.034 6.034 0 0 0 8.192 3.525 116.175 116.175 0 0 1 41.481-10.826c0.468-0.033 0.937-0.062 1.405-0.1a117.624 117.624 0 0 1 5.932-0.211 120.831 120.831 0 0 1 34.491 4.777c0.654 0.192 1.295 0.414 1.946 0.616a120.15 120.15 0 0 1 5.539 1.842 121.852 121.852 0 0 1 3.992 1.564c1.074 0.434 2.148 0.868 3.206 1.331a118.453 118.453 0 0 1 4.9 2.307c0.743 0.368 1.485 0.735 2.217 1.117a120.535 120.535 0 0 1 4.675 2.587 107.785 107.785 0 0 1 2.952 1.776 123.018 123.018 0 0 1 42.028 43.477c-12.833-9.015-35.81-17.918-57.947-14.068 86.441 43.214 63.234 192.027-56.545 186.408a106.7 106.7 0 0 1-31.271-6.031 132.461 132.461 0 0 1-7.059-2.886c-1.356-0.618-2.711-1.243-4.051-1.935-29.349-15.168-53.583-43.833-56.611-78.643 0 0 11.093-41.335 79.433-41.335 7.388 0 28.508-20.614 28.9-26.593-0.09-1.953-41.917-18.59-58.223-34.656-8.714-8.585-12.851-12.723-16.514-15.829a71.7 71.7 0 0 0-6.225-4.7 111.335 111.335 0 0 1-0.675-58.733c-24.687 11.242-43.89 29.011-57.849 44.7h-0.111c-9.528-12.067-8.855-51.873-8.312-60.184-0.114-0.516-7.107 3.63-8.024 4.254a175.21 175.21 0 0 0-23.486 20.12 210.5 210.5 0 0 0-22.443 26.913c0 0.012-0.007 0.025-0.011 0.037 0-0.012 0.007-0.025 0.011-0.038a202.837 202.837 0 0 0-32.244 72.81c-0.058 0.265-2.29 10.054-3.92 22.147a265.794 265.794 0 0 0-0.769 5.651c-0.558 3.636-0.992 7.6-1.42 13.767-0.019 0.239-0.031 0.474-0.048 0.712a591.152 591.152 0 0 0-0.481 7.995c0 0.411-0.025 0.816-0.025 1.227 0 132.709 107.6 240.29 240.324 240.29 118.865 0 217.559-86.288 236.882-199.63 0.407-3.075 0.732-6.168 1.092-9.27 4.777-41.21-0.53-84.525-15.588-120.747zm-164.068 72.1z" />
+</svg>
diff --git a/devtools/client/themes/images/browsers/ie.svg b/devtools/client/themes/images/browsers/ie.svg
new file mode 100644
index 0000000000..7a3a991eef
--- /dev/null
+++ b/devtools/client/themes/images/browsers/ie.svg
@@ -0,0 +1,8 @@
+<!-- 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="28" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill rgba(135, 135, 137, 0.9)"
+      d="M28 14.641c0 .547-.031 1.094-.109 1.625H9.907c0 3.109 2.734 5.359 5.734 5.359 2.031 0 3.984-1 5.031-2.766h6.609a12.604 12.604 0 0 1-11.859 8.375c-1.922 0-3.844-.453-5.563-1.297-1.75.891-4.203 1.813-6.156 1.813C1.078 27.75 0 26.141 0 23.641c0-1.453.313-2.906.703-4.297.25-.906 1.25-2.75 1.703-3.578 1.922-3.484 4.453-6.828 7.422-9.469-2.391 1.031-4.984 3.625-6.672 5.531a12.585 12.585 0 0 1 12.266-9.766c.234 0 .469 0 .703.016C18.062 1.187 20.766.25 22.891.25c2.531 0 4.703.969 4.703 3.828 0 1.5-.578 3.125-1.172 4.469A12.605 12.605 0 0 1 28 14.641zm-1.094-10c0-1.75-1.25-2.828-2.969-2.828-1.313 0-2.797.531-3.969 1.094a12.69 12.69 0 0 1 6.141 5.109c.391-1.031.797-2.281.797-3.375zM2 23.969c0 1.813 1.078 2.797 2.859 2.797 1.391 0 2.938-.625 4.156-1.297a12.587 12.587 0 0 1-5.484-6.687C2.812 20.282 2 22.282 2 23.969zm7.875-11.141H21.25c-.109-3.016-2.766-5.187-5.688-5.187-2.938 0-5.578 2.172-5.688 5.187z"/>
+</svg>
diff --git a/devtools/client/themes/images/browsers/mobile.svg b/devtools/client/themes/images/browsers/mobile.svg
new file mode 100644
index 0000000000..ddf32f3c3f
--- /dev/null
+++ b/devtools/client/themes/images/browsers/mobile.svg
@@ -0,0 +1,8 @@
+<!-- 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="12" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill"
+      d="M7.25 22c0-.688-.562-1.25-1.25-1.25s-1.25.562-1.25 1.25.562 1.25 1.25 1.25 1.25-.562 1.25-1.25zm3.25-2.5v-11c0-.266-.234-.5-.5-.5H2c-.266 0-.5.234-.5.5v11c0 .266.234.5.5.5h8c.266 0 .5-.234.5-.5zm-3-13.25A.246.246 0 0 0 7.25 6h-2.5c-.141 0-.25.109-.25.25s.109.25.25.25h2.5c.141 0 .25-.109.25-.25zM12 6v16c0 1.094-.906 2-2 2H2c-1.094 0-2-.906-2-2V6c0-1.094.906-2 2-2h8c1.094 0 2 .906 2 2z"/>
+</svg>
diff --git a/devtools/client/themes/images/browsers/opera.svg b/devtools/client/themes/images/browsers/opera.svg
new file mode 100644
index 0000000000..86f127290b
--- /dev/null
+++ b/devtools/client/themes/images/browsers/opera.svg
@@ -0,0 +1,8 @@
+<!-- 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="28" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill rgba(135, 135, 137, 0.9)"
+      d="M23.328 3.563a10.068 10.068 0 0 0-5.609-1.719c-3.328 0-6.266 1.703-8.328 4.266-1.5 1.875-2.547 4.531-2.625 7.562v.656c.078 3.031 1.125 5.688 2.625 7.562 2.063 2.562 5 4.266 8.328 4.266 2.047 0 3.969-.625 5.609-1.719A13.922 13.922 0 0 1 14 28c-.219 0-.453 0-.672-.016C5.906 27.64 0 21.515 0 14 0 6.266 6.266 0 14 0h.047a13.981 13.981 0 0 1 9.281 3.563zM28 14c0 4.078-1.75 7.734-4.531 10.297a6.653 6.653 0 0 1-3.469.984c-1.437 0-2.797-.469-3.984-1.313 3.172-1.156 5.516-5.172 5.516-9.969 0-4.781-2.328-8.797-5.5-9.969 1.188-.828 2.531-1.297 3.969-1.297 1.266 0 2.453.359 3.531 1.016a13.963 13.963 0 0 1 4.469 10.25z"/>
+</svg>
diff --git a/devtools/client/themes/images/browsers/safari.svg b/devtools/client/themes/images/browsers/safari.svg
new file mode 100644
index 0000000000..f9934ee509
--- /dev/null
+++ b/devtools/client/themes/images/browsers/safari.svg
@@ -0,0 +1,8 @@
+<!-- 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="28" height="28" aria-hidden="true" role="img">
+  <path
+      fill="context-fill rgba(135, 135, 137, 0.9)"
+      d="M14.828 13.953c0 .516-.359 1-.906 1-.516 0-1-.375-1-.906 0-.516.375-1 .922-1 .5 0 .984.359.984.906zm.234.906l5.469-9.078c-.734.688-7.578 6.984-7.766 7.313l-5.453 9.063c.719-.672 7.578-7 7.75-7.297zM25.172 14c0 2.047-.562 4.062-1.625 5.797-.156-.078-.812-.547-.938-.547a.207.207 0 0 0-.203.203c0 .203.734.578.922.688a11.229 11.229 0 0 1-6.656 4.703l-.25-1.047c-.016-.141-.109-.156-.234-.156-.109 0-.172.156-.156.234l.25 1.062c-.75.156-1.516.234-2.281.234-2.047 0-4.062-.578-5.812-1.641.094-.156.688-1.016.688-1.141a.207.207 0 0 0-.203-.203c-.219 0-.688.938-.828 1.125a11.24 11.24 0 0 1-4.719-6.75l1.078-.234c.125-.031.156-.125.156-.234s-.156-.172-.25-.156l-1.062.234a11.222 11.222 0 0 1-.219-2.172c0-2.094.594-4.156 1.703-5.922.156.094.906.609 1.031.609.109 0 .203-.078.203-.187 0-.219-.828-.641-1.016-.766 1.594-2.328 4.016-4 6.766-4.625l.234 1.047c.031.125.125.156.234.156s.172-.156.156-.25l-.234-1.031a11.745 11.745 0 0 1 2.094-.203 11.2 11.2 0 0 1 5.922 1.703c-.109.156-.609.891-.609 1.016 0 .109.078.203.187.203.219 0 .641-.812.75-1a11.165 11.165 0 0 1 4.609 6.672l-.875.187c-.141.031-.156.125-.156.25 0 .109.156.172.234.156l.891-.203c.141.719.219 1.453.219 2.187zm1.328 0c0-6.906-5.594-12.5-12.5-12.5S1.5 7.094 1.5 14 7.094 26.5 14 26.5 26.5 20.906 26.5 14zm1.5 0c0 7.734-6.266 14-14 14S0 21.734 0 14 6.266 0 14 0s14 6.266 14 14z"/>
+</svg>
diff --git a/devtools/client/themes/images/case-match.svg b/devtools/client/themes/images/case-match.svg
new file mode 100644
index 0000000000..55215cbb16
--- /dev/null
+++ b/devtools/client/themes/images/case-match.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 16" fill="context-fill #0c0c0d">

+  <path d="M10.919,13 L9.463,13 C9.29966585,13 9.16550052,12.9591671 9.0605,12.8775 C8.95549947,12.7958329 8.8796669,12.6943339 8.833,12.573 L8.077,10.508 L3.884,10.508 L3.128,12.573 C3.09066648,12.6803339 3.01716722,12.7783329 2.9075,12.867 C2.79783279,12.9556671 2.66366746,13 2.505,13 L1.042,13 L5.018,2.878 L6.943,2.878 L10.919,13 Z M4.367,9.178 L7.594,9.178 L6.362,5.811 C6.30599972,5.66166592 6.24416701,5.48550102 6.1765,5.2825 C6.108833,5.07949898 6.04233366,4.85900119 5.977,4.621 C5.91166634,4.85900119 5.84750032,5.08066564 5.7845,5.286 C5.72149969,5.49133436 5.65966697,5.67099923 5.599,5.825 L4.367,9.178 Z M18.892,13 L18.115,13 C17.9516658,13 17.8233338,12.9755002 17.73,12.9265 C17.6366662,12.8774998 17.5666669,12.7783341 17.52,12.629 L17.366,12.118 C17.1839991,12.2813341 17.0055009,12.4248327 16.8305,12.5485 C16.6554991,12.6721673 16.4746676,12.7759996 16.288,12.86 C16.1013324,12.9440004 15.903001,13.0069998 15.693,13.049 C15.4829989,13.0910002 15.2496679,13.112 14.993,13.112 C14.6896651,13.112 14.4096679,13.0711671 14.153,12.9895 C13.896332,12.9078329 13.6758342,12.7853342 13.4915,12.622 C13.3071657,12.4586658 13.1636672,12.2556679 13.061,12.013 C12.9583328,11.7703321 12.907,11.4880016 12.907,11.166 C12.907,10.895332 12.9781659,10.628168 13.1205,10.3645 C13.262834,10.100832 13.499665,9.8628344 13.831,9.6505 C14.162335,9.43816561 14.6033306,9.2620007 15.154,9.122 C15.7046694,8.9819993 16.3883292,8.90266676 17.205,8.884 L17.205,8.464 C17.205,7.98333093 17.103501,7.62750116 16.9005,7.3965 C16.697499,7.16549885 16.4023352,7.05 16.015,7.05 C15.7349986,7.05 15.5016676,7.08266634 15.315,7.148 C15.1283324,7.21333366 14.9661673,7.28683292 14.8285,7.3685 C14.6908326,7.45016707 14.5636672,7.52366634 14.447,7.589 C14.3303327,7.65433366 14.2020007,7.687 14.062,7.687 C13.9453327,7.687 13.8450004,7.65666697 13.761,7.596 C13.6769996,7.53533303 13.6093336,7.46066711 13.558,7.372 L13.243,6.819 C14.0690041,6.06299622 15.0653275,5.685 16.232,5.685 C16.6520021,5.685 17.0264983,5.75383264 17.3555,5.8915 C17.6845016,6.02916736 17.9633322,6.22049877 18.192,6.4655 C18.4206678,6.71050122 18.5944994,7.00333163 18.7135,7.344 C18.8325006,7.68466837 18.892,8.05799797 18.892,8.464 L18.892,13 Z M15.532,11.922 C15.7093342,11.922 15.8726659,11.9056668 16.022,11.873 C16.1713341,11.8403332 16.3124993,11.7913337 16.4455,11.726 C16.5785006,11.6606663 16.7068327,11.5801671 16.8305,11.4845 C16.9541673,11.3888329 17.0789993,11.2756673 17.205,11.145 L17.205,9.934 C16.7009975,9.95733345 16.279835,10.0004997 15.9415,10.0635 C15.603165,10.1265003 15.3313343,10.2069995 15.126,10.305 C14.9206656,10.4030005 14.7748337,10.5173327 14.6885,10.648 C14.6021662,10.7786673 14.559,10.9209992 14.559,11.075 C14.559,11.3783349 14.6488324,11.5953327 14.8285,11.726 C15.0081675,11.8566673 15.2426652,11.922 15.532,11.922 L15.532,11.922 Z"/>

+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/check.svg b/devtools/client/themes/images/check.svg
new file mode 100644
index 0000000000..e19cbe0960
--- /dev/null
+++ b/devtools/client/themes/images/check.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path stroke="context-stroke none" stroke-width="0.5" d="M6.52,12.5a1,1,0,0,1-.705-.291l-3.52-3.5a1,1,0,1,1,1.41-1.418l2.812,2.8,5.774-5.793a1,1,0,0,1,1.416,1.412l-6.479,6.5A1,1,0,0,1,6.52,12.5Z"/>
+</svg>
diff --git a/devtools/client/themes/images/checkbox.svg b/devtools/client/themes/images/checkbox.svg
new file mode 100644
index 0000000000..492b954055
--- /dev/null
+++ b/devtools/client/themes/images/checkbox.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="context-fill #0b0b0b">
+  <path d="M3 1h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3c0-1.1.9-2 2-2zm0 1a1 1 0 0 0-1 1v8c0 .6.4 1 1 1h8c.6 0 1-.4 1-1V3c0-.6-.4-1-1-1H3z"/>
+  <path stroke="context-stroke" stroke-width="1.4" d="M4.5 8.05L6.25 9.8 9.8 4.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/devtools/client/themes/images/clear.svg b/devtools/client/themes/images/clear.svg
new file mode 100644
index 0000000000..0588548513
--- /dev/null
+++ b/devtools/client/themes/images/clear.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M5.5 12a.5.5 0 0 0 .5-.5v-6a.5.5 0 1 0-1 0v6a.5.5 0 0 0 .5.5zm2 0a.5.5 0 0 0 .5-.5v-6a.5.5 0 1 0-1 0v6a.5.5 0 0 0 .5.5zm2 0a.5.5 0 0 0 .5-.5v-6a.5.5 0 1 0-1 0v6a.5.5 0 0 0 .5.5zM13 2H9.95a2.5 2.5 0 0 0-4.9 0H2a1 1 0 0 0 0 2v9a3 3 0 0 0 3 3h5a3 3 0 0 0 3-3V4a1 1 0 1 0 0-2zM7.5 1a1.49 1.49 0 0 1 1.4 1H6.1a1.49 1.49 0 0 1 1.4-1zM11 13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4h7v9z"/>
+</svg>
diff --git a/devtools/client/themes/images/close-3-pane.svg b/devtools/client/themes/images/close-3-pane.svg
new file mode 100644
index 0000000000..8e5e5ca015
--- /dev/null
+++ b/devtools/client/themes/images/close-3-pane.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">
+  <g fill="context-fill #0b0b0b">
+    <rect width="3" height="10" x="11" y="3" fill-opacity=".2"/>
+    <path d="M2,3.00247329 L2,3.00247329 L2,12.9975267 C2,12.9944441 2.00555363,13 2.00684547,13 L13.9931545,13 C13.9983241,13 14,12.9983304 14,12.9975267 L14,3.00247329 C14,3.00555595 13.9944464,3 13.9931545,3 L2.00684547,3 C2.00167589,3 2,3.00166957 2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 Z M1,3.00247329 C1,2.44882258 1.44994876,2 2.00684547,2 L13.9931545,2 C14.5492199,2 15,2.45576096 15,3.00247329 L15,12.9975267 C15,13.5511774 14.5500512,14 13.9931545,14 L2.00684547,14 C1.45078007,14 1,13.544239 1,12.9975267 L1,3.00247329 Z M10,3.45454545 L10,12.5454545 L10,13 L11,13 L11,12.5454545 L11,3.45454545 L11,3 L10,3 L10,3.45454545 Z"/>
+    <polygon points="4 10.75 4 6 8.5 8.375"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/close.svg b/devtools/client/themes/images/close.svg
new file mode 100644
index 0000000000..c293d54eb8
--- /dev/null
+++ b/devtools/client/themes/images/close.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill #0c0c0d">
+  <path d="M2.88 2.88a.87.87 0 0 1 1.24 0L8 6.76l3.88-3.88a.87.87 0 1 1 1.24 1.24L9.24 8l3.88 3.88a.87.87 0 1 1-1.24 1.24L8 9.24l-3.88 3.88a.88.88 0 0 1-1.24-1.24L6.76 8 2.88 4.12a.88.88 0 0 1 0-1.24z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-accented.svg b/devtools/client/themes/images/command-accented.svg
new file mode 100644
index 0000000000..4b32ecbcbf
--- /dev/null
+++ b/devtools/client/themes/images/command-accented.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M13 1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10ZM3 3c-.54 0-1 .46-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4c0-.54-.46-1-1-1H3Z"/>
+  <path d="M6.42 8.48a1.7 1.7 0 0 0-.1-.48 1.19 1.19 0 0 0-.6-.68c-.16-.07-.32-.1-.5-.1s-.35.03-.5.1c-.15.06-.28.15-.39.26a1.32 1.32 0 0 0-.36.9h2.45Zm-2.45.7c0 .18.02.35.08.53.05.17.13.32.23.45s.24.23.4.3c.16.08.35.12.57.12.3 0 .56-.06.74-.2.2-.13.33-.33.42-.59h1A1.98 1.98 0 0 1 6 11.31c-.23.07-.48.1-.74.1-.37 0-.7-.06-1-.18a2.06 2.06 0 0 1-1.18-1.31 3.22 3.22 0 0 1 0-1.98c.12-.3.27-.57.47-.8a2.2 2.2 0 0 1 2.7-.52c.3.16.54.36.74.62a2.73 2.73 0 0 1 .5 1.93H3.97Zm1.66-4.65h1.25L5.57 5.85H4.8l.83-1.32ZM11.96 8.48a1.7 1.7 0 0 0-.1-.48 1.19 1.19 0 0 0-.6-.68c-.16-.07-.32-.1-.5-.1s-.35.03-.5.1c-.15.06-.28.15-.39.26a1.32 1.32 0 0 0-.36.9h2.45Zm-2.45.7c0 .18.02.35.07.53.06.17.14.32.24.45.1.13.24.23.4.3.16.08.35.12.57.12.3 0 .55-.06.74-.2.19-.13.33-.33.42-.59h1a1.98 1.98 0 0 1-1.42 1.52c-.23.07-.48.1-.74.1-.38 0-.7-.06-1-.18a2.06 2.06 0 0 1-1.18-1.31 3.22 3.22 0 0 1 0-1.98c.11-.3.27-.57.47-.8a2.2 2.2 0 0 1 2.7-.52c.29.16.54.36.73.62a2.73 2.73 0 0 1 .5 1.93h-3.5Zm1.66-4.65h1.24l-1.3 1.32h-.77l.83-1.32Z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-always-on-top-window.svg b/devtools/client/themes/images/command-always-on-top-window.svg
new file mode 100644
index 0000000000..afd30423e3
--- /dev/null
+++ b/devtools/client/themes/images/command-always-on-top-window.svg
@@ -0,0 +1,14 @@
+<!-- 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">
+  <g clip-path="url(#clip0_483_11)">
+    <path d="M3 4H2C0.895431 4 0 4.89543 0 6V14C0 15.1046 0.895431 16 2 16H10C11.1046 16 12 15.1046 12 14V13H10V14H2L2 6H3V4Z" fill="context-fill black" fill-opacity="0.4"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M14 2H6L6 10H14V2ZM6 0C4.89543 0 4 0.895431 4 2V10C4 11.1046 4.89543 12 6 12H14C15.1046 12 16 11.1046 16 10V2C16 0.895431 15.1046 0 14 0H6Z" fill="context-fill black"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_483_11">
+    <rect width="16" height="16"/>
+  </clipPath>
+  </defs>
+</svg>
diff --git a/devtools/client/themes/images/command-bidi.svg b/devtools/client/themes/images/command-bidi.svg
new file mode 100644
index 0000000000..61bb66582e
--- /dev/null
+++ b/devtools/client/themes/images/command-bidi.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M13 1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10ZM3 3c-.54 0-1 .46-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4c0-.54-.46-1-1-1H3Z"/>
+  <path d="M3.6 6.83h1.07v1h.02c.03-.14.1-.28.2-.41a1.9 1.9 0 0 1 .8-.63c.17-.07.34-.1.51-.1a2.47 2.47 0 0 1 .43.03v1.1a5.41 5.41 0 0 0-.49-.05c-.2 0-.37.04-.54.12-.18.07-.32.18-.45.33-.13.16-.23.34-.3.56a2.4 2.4 0 0 0-.11.76V12H3.6V6.83Zm3.43 0h.86V5.28h1.14v1.55h1.03v.85H9.03v2.76c0 .12 0 .22.02.31 0 .09.03.16.07.22.03.06.09.1.16.13.08.04.18.05.3.05a5.76 5.76 0 0 0 .48-.04v.88a64.42 64.42 0 0 0-.74.06c-.3 0-.54-.03-.72-.09a.97.97 0 0 1-.43-.25.86.86 0 0 1-.21-.41 3.12 3.12 0 0 1-.07-.57V7.68h-.86v-.85Zm3.95-1.97h1.14V12h-1.14V4.86Z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-chevron.svg b/devtools/client/themes/images/command-chevron.svg
new file mode 100644
index 0000000000..90f251a28b
--- /dev/null
+++ b/devtools/client/themes/images/command-chevron.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M2.293 2.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L6.586 8 2.293 3.707a1 1 0 0 1 0-1.414zM8.293 2.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L12.586 8 8.293 3.707a1 1 0 0 1 0-1.414z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-console.svg b/devtools/client/themes/images/command-console.svg
new file mode 100644
index 0000000000..1c809f1f40
--- /dev/null
+++ b/devtools/client/themes/images/command-console.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M13 1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10zm0 2H3c-.54 0-1 .46-1 1v1h12V4c0-.54-.46-1-1-1zm1 3H2v6c0 .54.46 1 1 1h10c.54 0 1-.46 1-1V6z"/>
+  <path d="M4.15 7.15c.2-.2.5-.2.7 0l2 2c.2.2.2.5 0 .7l-2 2a.5.5 0 0 1-.7-.7L5.79 9.5 4.15 7.85a.5.5 0 0 1 0-.7z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-eyedropper.svg b/devtools/client/themes/images/command-eyedropper.svg
new file mode 100644
index 0000000000..10acadcb04
--- /dev/null
+++ b/devtools/client/themes/images/command-eyedropper.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill" fill-rule="evenodd" d="M1.146 14.854c.748.747 1.96.747 2.708 0l6.542-6.543.897.896a1 1 0 1 0 1.414-1.414l-.9-.9 3.047-3.04a1.914 1.914 0 0 0-2.708-2.707L9.107 4.193l-.9-.9a1 1 0 0 0-1.414 1.414l.896.897-6.543 6.542a1.914 1.914 0 0 0 0 2.708zm.708-2a.914.914 0 1 0 1.292 1.292L9.69 7.604 8.396 6.31l-6.542 6.543z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-frames.svg b/devtools/client/themes/images/command-frames.svg
new file mode 100644
index 0000000000..f0756911bb
--- /dev/null
+++ b/devtools/client/themes/images/command-frames.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path fill-opacity="context-fill-opacity" d="M6,7h8v6h-8z"/>
+  <path d="M6 7v6H5V7H2V6h12v1H6zm7-6a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10zM3 3a1 1 0 0 0-1 1v8c0 .6.4 1 1 1h10c.6 0 1-.4 1-1V4c0-.6-.4-1-1-1H3z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-measure.svg b/devtools/client/themes/images/command-measure.svg
new file mode 100644
index 0000000000..3135651088
--- /dev/null
+++ b/devtools/client/themes/images/command-measure.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M0 5c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5zm14 0H2v6h12V5z"/>
+  <path d="M5 5v2.5a.5.5 0 0 1-1 0V5h1zM7 5v1.5a.5.5 0 0 1-1 0V5h1zM11 5v1.5a.5.5 0 0 1-1 0V5h1zM9 5v2.5a.5.5 0 0 1-1 0V5h1zM13 5v2.5a.5.5 0 0 1-1 0V5h1z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-noautohide.svg b/devtools/client/themes/images/command-noautohide.svg
new file mode 100644
index 0000000000..957b9bfe87
--- /dev/null
+++ b/devtools/client/themes/images/command-noautohide.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M5.293.293a1 1 0 0 1 1.414 0L8.414 2H13a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h.586L5.293.293zM6 2.414L4.707 3.707A1 1 0 0 1 4 4H3c-.545 0-1 .455-1 1v8c0 .545.455 1 1 1h10c.545 0 1-.455 1-1V5c0-.545-.455-1-1-1H8a1 1 0 0 1-.707-.293L6 2.414z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-pick-accessibility.svg b/devtools/client/themes/images/command-pick-accessibility.svg
new file mode 100644
index 0000000000..19525e69cf
--- /dev/null
+++ b/devtools/client/themes/images/command-pick-accessibility.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M3 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2.6a1 1 0 1 1 0 2H3a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v2.6a1 1 0 1 1-2 0V4a1 1 0 0 0-1-1H3z"/>
+  <path d="M10.5 8.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM6 9.75c0-.41.34-.75.75-.75h7.5a.75.75 0 0 1 0 1.5H12.5v4.75a.75.75 0 0 1-1.5 0V13h-1v2.25a.75.75 0 0 1-1.5 0V10.5H6.75A.75.75 0 0 1 6 9.75z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-responsivemode.svg b/devtools/client/themes/images/command-responsivemode.svg
new file mode 100644
index 0000000000..012e79c6b7
--- /dev/null
+++ b/devtools/client/themes/images/command-responsivemode.svg
@@ -0,0 +1,8 @@
+<!-- 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" fill="context-fill #0c0c0d">
+  <path fill-opacity="context-fill-opacity" d="M4 1h10v14H6V5H4V1z"/>
+  <path d="M1 4h5a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm0 2v8h5V6H1z"/>
+  <path d="M5 0a2 2 0 0 0-2 2v1h2V2h8v12H8v2h5a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-rulers.svg b/devtools/client/themes/images/command-rulers.svg
new file mode 100644
index 0000000000..707c56fc52
--- /dev/null
+++ b/devtools/client/themes/images/command-rulers.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M3 3a1 1 0 0 0-1 1v10h4V8a1 1 0 0 1 1-1h7V3H3zM0 4a3 3 0 0 1 3-3h11a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H8v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4z"/>
+  <path d="M3.5 11H2v1h1.5a.5.5 0 0 0 0-1zM6 4.5V3H5v1.5a.5.5 0 0 0 1 0zM9 4.5V3H8v1.5a.5.5 0 0 0 1 0zM12 4.5V3h-1v1.5a.5.5 0 0 0 1 0zM3.5 8H2v1h1.5a.5.5 0 0 0 0-1zM3.5 5H2v1h1.5a.5.5 0 0 0 0-1z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-screenshot.svg b/devtools/client/themes/images/command-screenshot.svg
new file mode 100644
index 0000000000..b89a85a4a2
--- /dev/null
+++ b/devtools/client/themes/images/command-screenshot.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M3 4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H3zM0 5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V5M3 2h3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1z"/>
+  <path d="M8 6a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+</svg>
diff --git a/devtools/client/themes/images/copy.svg b/devtools/client/themes/images/copy.svg
new file mode 100644
index 0000000000..99b2d48b47
--- /dev/null
+++ b/devtools/client/themes/images/copy.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="context-fill #0b0b0b">
+  <path d="M5.70001221,11.125 L5.70001221,4.625 L7.66001225,4.625 L7.66001225,6.94642857 C7.66001225,7.20271429 7.87953225,7.41071429 8.15001225,7.41071429 L10.6000123,7.41071429 L10.6000123,11.125 L5.70001221,11.125 Z M4.7,5.475 L4.7,7.275 L2,7.275 L2,0.975 L3.8,0.975 L3.8,3.225 C3.8,3.4734 4.0016,3.675 4.25,3.675 L6.5,3.675 C5.5064,3.675 4.7,4.4814 4.7,5.475 Z M6.84002447,3.00050006 L4.65002441,3.00050006 L4.65002441,0.8105 L6.84002447,3.00050006 Z M10.5,6.6000061 L8.5,6.6000061 L8.5,4.6000061 L10.5,6.6000061 Z M11.28025,6.21975 L9.03025,3.96975 C8.89,3.82875 8.6995,3.75 8.5,3.75 L7.75,3.75 L7.75,3 C7.75,2.80125 7.67125,2.61 7.53025,2.46975 L5.28025,0.21975 C5.14,0.07875 4.94875,0 4.75,0 L2.5,0 C1.672,0 1,0.672 1,1.5 L1,6.75 C1,7.578 1.672,8.25 2.5,8.25 L4.75,8.25 L4.75,10.5 C4.75,11.328 5.422,12 6.25,12 L10,12 C10.828,12 11.5,11.328 11.5,10.5 L11.5,6.75 C11.5,6.55125 11.42125,6.36 11.28025,6.21975 Z"></path>
+</svg>
diff --git a/devtools/client/themes/images/cubic-bezier-swatch.svg b/devtools/client/themes/images/cubic-bezier-swatch.svg
new file mode 100644
index 0000000000..a0ea165a4d
--- /dev/null
+++ b/devtools/client/themes/images/cubic-bezier-swatch.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 viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="6" cy="6" r="6" fill="#fff"/>
+  <path d="M7 .5C4 3 4.1 5.4 5.6 6.4S7 9 5 11.5C8 9 7.9 6.6 6.4 5.6S5 3 7 .5z" stroke="#808080" stroke-width=".5" fill="#808080" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/devtools/client/themes/images/datastore.svg b/devtools/client/themes/images/datastore.svg
new file mode 100644
index 0000000000..e6dcb8c005
--- /dev/null
+++ b/devtools/client/themes/images/datastore.svg
@@ -0,0 +1,9 @@
+<!-- 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 16 16" fill="context-fill #0b0b0b">
+  <path d="M4 0h8a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4z"/>
+  <path d="M3 7h10v1H3z"/>
+  <rect x="6" y="4" width="4" height="1" rx=".5"/>
+  <rect x="6" y="10" width="4" height="1" rx=".5"/>
+</svg>
diff --git a/devtools/client/themes/images/debugging-addons.svg b/devtools/client/themes/images/debugging-addons.svg
new file mode 100644
index 0000000000..329d18e671
--- /dev/null
+++ b/devtools/client/themes/images/debugging-addons.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 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="M14.5 8c-.971 0-1 1-1.75 1a.765.765 0 0 1-.75-.75V5a1 1 0 0 0-1-1H7.75A.765.765 0 0 1 7 3.25c0-.75 1-.779 1-1.75C8 .635 7.1 0 6 0S4 .635 4 1.5c0 .971 1 1 1 1.75a.765.765 0 0 1-.75.75H1a1 1 0 0 0-1 1v2.25A.765.765 0 0 0 .75 8c.75 0 .779-1 1.75-1C3.365 7 4 7.9 4 9s-.635 2-1.5 2c-.971 0-1-1-1.75-1a.765.765 0 0 0-.75.75V15a1 1 0 0 0 1 1h3.25a.765.765 0 0 0 .75-.75c0-.75-1-.779-1-1.75 0-.865.9-1.5 2-1.5s2 .635 2 1.5c0 .971-1 1-1 1.75a.765.765 0 0 0 .75.75H11a1 1 0 0 0 1-1v-3.25a.765.765 0 0 1 .75-.75c.75 0 .779 1 1.75 1 .865 0 1.5-.9 1.5-2s-.635-2-1.5-2z"></path>
+</svg>
diff --git a/devtools/client/themes/images/debugging-tabs.svg b/devtools/client/themes/images/debugging-tabs.svg
new file mode 100644
index 0000000000..16a5128e06
--- /dev/null
+++ b/devtools/client/themes/images/debugging-tabs.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+  <path fill="context-fill" fill-opacity="context-fill-opacity" d="M15 11h-1V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6H1a1 1 0 0 0 0 2h14a1 1 0 1 0 0-2z"></path>
+</svg>
diff --git a/devtools/client/themes/images/debugging-workers.svg b/devtools/client/themes/images/debugging-workers.svg
new file mode 100644
index 0000000000..66a65843c6
--- /dev/null
+++ b/devtools/client/themes/images/debugging-workers.svg
@@ -0,0 +1,11 @@
+<!-- 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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
+<path d="M14.6,6.1L13.5,5l0,0c0.1-0.1,0.2-0.4,0.2-0.6c0-0.2-0.1-0.4-0.2-0.6l-0.4-0.4c-0.3-0.3-0.8-0.3-1.1,0l0,0
+	L10.5,2c-0.2-0.2-0.3-0.2-0.5-0.2c-0.2,0-0.3,0.1-0.5,0.2L8.3,3.2C8.1,3.3,8.1,3.4,8.1,3.6S8.2,4,8.3,4.1l1.6,1.6L7.8,7.8L5.6,5.7
+	l1.5-1.5C7.3,4,7.4,3.8,7.4,3.6c0-0.2-0.1-0.4-0.2-0.6l-1-1C5.8,1.7,5.3,1.7,5,2L0.9,6.1C0.7,6.3,0.6,6.5,0.6,6.7
+	c0,0.2,0.1,0.4,0.2,0.6l1,1c0.3,0.3,0.9,0.3,1.2,0l1.4-1.4l2,2.1l-3.4,3.3c-0.3,0.3-0.3,0.8,0,1.1l0.3,0.3c0.3,0.3,0.8,0.3,1.1,0
+	l3.3-3.4l3.3,3.4c0.1,0.1,0.3,0.2,0.6,0.2c0.2,0,0.4-0.1,0.6-0.2l0.3-0.3c0.3-0.3,0.3-0.8,0-1.1L9,9l2-2.1l1.4,1.4
+	c0.1,0.1,2.3,1.1,2.7,0.7C15.5,8.6,14.8,6.3,14.6,6.1z"/>
+</svg>
diff --git a/devtools/client/themes/images/devtools-reps/jump-definition.svg b/devtools/client/themes/images/devtools-reps/jump-definition.svg
new file mode 100644
index 0000000000..2833537eef
--- /dev/null
+++ b/devtools/client/themes/images/devtools-reps/jump-definition.svg
@@ -0,0 +1,8 @@
+<!-- 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" xmlns="http://www.w3.org/2000/svg" stroke="#000" fill="none" stroke-linecap="round">
+  <path d="M5.5 3.5l2 2M5.5 7.5l2-2"/>
+  <path d="M7 5.5H4.006c-1.012 0-1.995 1.017-2.011 2.024-.005.023-.005 1.347 0 3.971" stroke-linejoin="round"/>
+  <path d="M10.5 5.5h4M9.5 3.5h5M9.5 7.5h5"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/diff.svg b/devtools/client/themes/images/diff.svg
new file mode 100644
index 0000000000..458cde25bc
--- /dev/null
+++ b/devtools/client/themes/images/diff.svg
@@ -0,0 +1,9 @@
+<!-- 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" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
+  <path d="M6 13A5 5 0 1 0 6 3a5 5 0 0 0 0 10zm0-.91a4.09 4.09 0 1 1 0-8.18 4.09 4.09 0 0 1 0 8.18z"/>
+  <path d="M10 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-.91a4.09 4.09 0 1 1 0-8.18 4.09 4.09 0 0 1 0 8.18z"/>
+  <path d="M7.146 8.854l1 1a.5.5 0 0 0 .708-.708l-1-1a.5.5 0 1 0-.708.708zM7.146 6.854l1 1a.5.5 0 1 0 .708-.708l-1-1a.5.5 0 1 0-.708.708z"/>
+  <path d="M12.656 11.723c-2.044 1.169-3.872 1.015-4.282.577-.41-.438 2.115-1.269 2.115-3.925 0-2.657-2.115-4.827-2.115-4.827s2.919-.47 4.282.624c1.364 1.094 2.12 1.975 1.85 3.828-.103.703.194 2.555-1.85 3.723z" fill-opacity=".3"/>
+</svg>
diff --git a/devtools/client/themes/images/dock-bottom.svg b/devtools/client/themes/images/dock-bottom.svg
new file mode 100644
index 0000000000..98c5b662ed
--- /dev/null
+++ b/devtools/client/themes/images/dock-bottom.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 viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+  fill="context-fill #0b0b0b">
+  <path d="
+    M13 1a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-10a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3z
+    M13 3h-10a1 1 0 0 0-1 1v5h12v-5a1 1 0 0 0-1-1z
+    M14 10h-12v2a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1z"/>
+</svg>
diff --git a/devtools/client/themes/images/dock-side-left.svg b/devtools/client/themes/images/dock-side-left.svg
new file mode 100644
index 0000000000..515c31fce1
--- /dev/null
+++ b/devtools/client/themes/images/dock-side-left.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 viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+  fill="context-fill #0b0b0b">
+  <path d="
+    M0 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-10a3 3 0 0 1-3-3z
+    M2 4v8a1 1 0 0 0 1 1h2v-10h-2a1 1 0 0 0-1 1z
+    M6 3v10h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1z"/>
+</svg>
diff --git a/devtools/client/themes/images/dock-side-right.svg b/devtools/client/themes/images/dock-side-right.svg
new file mode 100644
index 0000000000..38fe13bd82
--- /dev/null
+++ b/devtools/client/themes/images/dock-side-right.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 viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+  fill="context-fill #0b0b0b">
+  <path d="
+    M0 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-10a3 3 0 0 1-3-3z
+    M2 4v8a1 1 0 0 0 1 1h7v-10h-7a1 1 0 0 0-1 1z
+    M11 3v10h2a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1z"/>
+</svg>
diff --git a/devtools/client/themes/images/dock-undock.svg b/devtools/client/themes/images/dock-undock.svg
new file mode 100644
index 0000000000..e0ec68bc73
--- /dev/null
+++ b/devtools/client/themes/images/dock-undock.svg
@@ -0,0 +1,11 @@
+<!-- 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 viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+  fill="context-fill #0b0b0b">
+  <path d="
+    M5 1a1 1 0 0 1 0 2h-2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1
+    a1 1 0 0 1 2 0a3 3 0 0 1-3 3h-10a3 3 0 0 1-3-3v-8a3 3 0 0 1 3-3z
+    M9 3a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-3.586l-5.293 5.293
+    a1 1 0 0 1-1.414-1.414l5.293 -5.293z"/>
+</svg>
diff --git a/devtools/client/themes/images/dropmarker.svg b/devtools/client/themes/images/dropmarker.svg
new file mode 100644
index 0000000000..0cd5ad25db
--- /dev/null
+++ b/devtools/client/themes/images/dropmarker.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 xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4">
+  <polygon points="0,0 4,4 8,0" fill="context-fill #b6babf"/>
+</svg>
diff --git a/devtools/client/themes/images/error-small.svg b/devtools/client/themes/images/error-small.svg
new file mode 100644
index 0000000000..a5ca167097
--- /dev/null
+++ b/devtools/client/themes/images/error-small.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path fill="context-fill" d="M12 6A6 6 0 1 1 0 6a6 6 0 0 1 12 0zM5.75 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-.5zM5 6c0 .54.46 1 1 1s1-.46 1-1V3.15c0-.54-.46-1-1-1s-1 .46-1 1V6z"/>
+</svg>
diff --git a/devtools/client/themes/images/error-tiny.svg b/devtools/client/themes/images/error-tiny.svg
new file mode 100644
index 0000000000..1e898c0383
--- /dev/null
+++ b/devtools/client/themes/images/error-tiny.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" width="9" height="9">
+  <path fill="context-fill" fill-rule="evenodd" d="M4.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm0-7.2a.7.7 0 0 0-.7.7v1.8a.7.7 0 1 0 1.4 0V2.5a.7.7 0 0 0-.7-.7zm0 5.4a.7.7 0 1 0 0-1.4.7.7 0 0 0 0 1.4z"/>
+</svg>
diff --git a/devtools/client/themes/images/error.svg b/devtools/client/themes/images/error.svg
new file mode 100644
index 0000000000..d2d7799d28
--- /dev/null
+++ b/devtools/client/themes/images/error.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill" fill-rule="evenodd" d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm0-3.429a1.143 1.143 0 1 0 0-2.285 1.143 1.143 0 0 0 0 2.285zm0-3.428c.631 0 1.143-.512 1.143-1.143V4.571a1.143 1.143 0 0 0-2.286 0V8c0 .631.512 1.143 1.143 1.143z"/>
+</svg>
diff --git a/devtools/client/themes/images/eye-closed.svg b/devtools/client/themes/images/eye-closed.svg
new file mode 100644
index 0000000000..51739a83a4
--- /dev/null
+++ b/devtools/client/themes/images/eye-closed.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 width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6C2 8 5 10 8 10C11 10 14 8 15 6" stroke="context-stroke #0b0b0b" stroke-width="2" stroke-linecap="round"/>
+<path d="M6.5 10.5L6 13" stroke="context-stroke #0b0b0b" stroke-linecap="round"/>
+<path d="M9.5 10.5L10 13" stroke="context-stroke #0b0b0b" stroke-linecap="round"/>
+<path d="M12 9.5L13.5 12" stroke="context-stroke #0b0b0b" stroke-linecap="round"/>
+<path d="M4 9.5L2.5 12" stroke="context-stroke #0b0b0b" stroke-linecap="round"/>
+</svg>
diff --git a/devtools/client/themes/images/eye-opened.svg b/devtools/client/themes/images/eye-opened.svg
new file mode 100644
index 0000000000..ac2da2bf01
--- /dev/null
+++ b/devtools/client/themes/images/eye-opened.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="M8 4C5.11003 4 2.22006 5.85598 1.118 7.78004C1.03978 7.9166 1.03978 8.0834 1.118 8.21996C2.22006 10.144 5.11003 12 8 12C10.89 12 13.7799 10.144 14.882 8.21996C14.9602 8.0834 14.9602 7.9166 14.882 7.78003C13.7799 5.85598 10.89 4 8 4Z" stroke="context-stroke #0b0b0b" stroke-width="2"/>
+<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="context-fill #0b0b0b"/>
+</svg>
diff --git a/devtools/client/themes/images/eye.svg b/devtools/client/themes/images/eye.svg
new file mode 100644
index 0000000000..d0e964b606
--- /dev/null
+++ b/devtools/client/themes/images/eye.svg
@@ -0,0 +1,8 @@
+<!-- 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">
+<path d="M6,2.2c-2.1,0-4.3,2-5.1,3.5c-0.1,0.1-0.1,0.3,0,0.4c0.8,1.5,3,3.5,5.1,3.5s4.3-2,5.1-3.5
+	c0.1-0.1,0.1-0.3,0-0.4C10.3,4.3,8.1,2.2,6,2.2z" stroke="context-stroke" fill="none" stroke-linejoin="round"/>
+<path d="M6,7.9C7,7.9,7.9,7,7.9,6S7,4.1,6,4.1S4.1,5,4.1,6S5,7.9,6,7.9z" fill="context-fill"/>
+</svg>
diff --git a/devtools/client/themes/images/filter-small.svg b/devtools/client/themes/images/filter-small.svg
new file mode 100644
index 0000000000..f0e42c8745
--- /dev/null
+++ b/devtools/client/themes/images/filter-small.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+  <path fill="context-fill" opacity=".4" d="M5 9.2l2 1.6V6.1L8.55 4h-5.1L5 6.1v3.1z"/>
+  <path fill="context-fill" d="M1.18 2.6A1 1 0 0 1 2 1H10a1 1 0 0 1 .8 1.6L8 6.4v4.82c0 .63-.72.98-1.22.6l-2.5-1.99A.75.75 0 0 1 4 9.25V6.41L1.18 2.6zM2 2L5 6.09v3.04l2 1.59V6.09L10.01 2H2z"/>
+</svg>
diff --git a/devtools/client/themes/images/filter-swatch.svg b/devtools/client/themes/images/filter-swatch.svg
new file mode 100644
index 0000000000..ecf760637e
--- /dev/null
+++ b/devtools/client/themes/images/filter-swatch.svg
@@ -0,0 +1,11 @@
+<!-- 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="12px" height="12px">
+  <mask id="mask">
+    <rect width="100%" height="100%" fill="#fff"/>
+    <polygon points="12,0 0,0 0,12"/>
+  </mask>
+  <circle cx="6" cy="6" r="6" fill="#fff"/>
+  <circle cx="6" cy="6" r="6" mask="url(#mask)" fill="#aeb0b1"/>
+</svg>
diff --git a/devtools/client/themes/images/flexbox-swatch.svg b/devtools/client/themes/images/flexbox-swatch.svg
new file mode 100644
index 0000000000..05e529d12c
--- /dev/null
+++ b/devtools/client/themes/images/flexbox-swatch.svg
@@ -0,0 +1,8 @@
+<!-- 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 13 11" fill="none" stroke="context-stroke" stroke-width="1" stroke-linejoin="round">
+  <rect x="0.5" y="0.5" width="12" height="10" stroke-dasharray="1 1" stroke-dashoffset="0.5"/>
+  <rect x="2.5" y="3.5" width="8" height="4"/>
+  <line x1="6.5" x2="6.5" y1="3" y2="8"/>
+</svg>
diff --git a/devtools/client/themes/images/folder.svg b/devtools/client/themes/images/folder.svg
new file mode 100644
index 0000000000..309d419ebc
--- /dev/null
+++ b/devtools/client/themes/images/folder.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
+  <path d="M14 3H8.15L6.58 1.54A2 2 0 0 0 5.22 1H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zM5.22 3l1.07 1H2V3zM14 13H2V5h6v-.01l.15.01H14z"/>
+</svg>
diff --git a/devtools/client/themes/images/fox-smiling.svg b/devtools/client/themes/images/fox-smiling.svg
new file mode 100644
index 0000000000..e54633a65e
--- /dev/null
+++ b/devtools/client/themes/images/fox-smiling.svg
@@ -0,0 +1,37 @@
+<!-- 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 version="1.0" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+	 width="72px" height="72px" viewBox="0 0 72 72" enable-background="new 0 0 72 72" xml:space="preserve">
+<path fill="#FFD8CA" d="M30.4,61C15.5,60,7.7,54.7,0.3,41.4C0.1,41.1,0,40.7,0,40.4h8.5l0-3.2h0c0-0.2,0-0.4,0-0.6
+	c0-4.9,3.9-8.8,8.8-8.8c4.9,0,8.8,3.9,8.8,8.8c0,0.2,0,0.4,0,0.6h0v15.7C26.1,56.2,27.8,59.2,30.4,61z M63.5,40.4v-3.2h0
+	c0-0.2,0-0.5,0-0.7c0-4.9-3.9-8.8-8.8-8.8c-4.8,0-8.7,3.8-8.8,8.5v0.5c0,0.2,0,0.3,0,0.5h0v15.7c0,3.4-1.7,6.3-4.3,8.1
+	c14.9-1,22.7-6.2,30.1-19.5c0.2-0.3,0.3-0.7,0.2-1.1H63.5z"/>
+<path fill="#FF6F1F" d="M42.5,60.3c0.1,0,0.1-0.1,0.2-0.1c0.2-0.2,0.4-0.4,0.6-0.6c0.1-0.1,0.1-0.1,0.2-0.2c0.2-0.2,0.4-0.5,0.6-0.7
+	c0,0,0.1-0.1,0.1-0.1c0.2-0.3,0.4-0.6,0.6-1c0,0,0,0,0,0c0.2-0.3,0.3-0.6,0.4-1c0-0.1,0.1-0.2,0.1-0.3c0.1-0.2,0.2-0.5,0.2-0.7
+	c0-0.1,0.1-0.2,0.1-0.4c0.1-0.3,0.1-0.5,0.1-0.8c0-0.1,0-0.2,0.1-0.3c0-0.4,0.1-0.8,0.1-1.1v-1.2V37.1h0c0-0.2,0-0.3,0-0.5v-0.5
+	c0.1-4.7,4-8.5,8.8-8.5c4.9,0,8.8,3.9,8.8,8.8c0,0.2,0,0.5,0,0.7h0v3.2H72c0-0.4-0.1-0.8-0.3-1.1c-2-3.7-4.1-7.2-6.3-10.4
+	c1.6-1.2,2.9-2.8,4-4.6c3-5.2,2.8-11.3,0.1-16.2c-0.2-0.3-0.5-0.5-0.9-0.5c-5.5,0-10.4,3-13.4,8.2c-0.4,0.6-0.7,1.3-1,1.9
+	C49.2,14.7,43.4,13,36,13s-13.2,1.8-18.1,4.8c-0.3-0.7-0.6-1.3-1-1.9c-3-5.2-7.9-8.2-13.4-8.2c-0.4,0-0.7,0.2-0.9,0.5
+	c-2.7,4.8-2.9,11,0.1,16.2c1.1,1.8,2.4,3.3,4,4.6C4.4,32,2.3,35.5,0.3,39.3C0.1,39.6,0,40,0,40.4h8.5l0-3.2h0c0-0.2,0-0.4,0-0.6
+	c0-4.9,3.9-8.8,8.8-8.8c4.9,0,8.8,3.9,8.8,8.8c0,0.2,0,0.4,0,0.6h0v14.5v1.2c0,0.4,0,0.8,0.1,1.1c0,0.1,0,0.2,0.1,0.3
+	c0,0.3,0.1,0.5,0.1,0.8c0,0.1,0.1,0.2,0.1,0.4c0.1,0.3,0.2,0.5,0.2,0.7c0,0.1,0.1,0.2,0.1,0.3c0.1,0.3,0.3,0.6,0.4,1c0,0,0,0,0,0
+	c0.2,0.3,0.4,0.7,0.6,1c0,0,0.1,0.1,0.1,0.1c0.2,0.3,0.4,0.5,0.6,0.7c0.1,0.1,0.1,0.1,0.2,0.2c0.2,0.2,0.4,0.4,0.6,0.6
+	c0.1,0,0.1,0.1,0.2,0.1c0.3,0.2,0.6,0.5,0.9,0.7c1.6,1.1,3.5,1.7,5.6,1.7c2.1,0,4-0.6,5.6-1.7C41.9,60.8,42.2,60.6,42.5,60.3z"/>
+<g>
+	<path fill="#2B3B47" d="M32.9,45.7c0,0,0.4,0,1,0c0.6,0,1.3,0,2.1,0c0.8,0,1.5,0,2.1,0c0.6,0,1-0.1,1-0.1c1.2-0.1,2.3,0.8,2.4,2.1
+		c0.1,0.6-0.2,1.3-0.6,1.7l-1.9,2.1c0,0-0.4,0.4-1,0.7c-0.3,0.2-0.6,0.3-1,0.4c-0.2,0.1-0.4,0.1-0.6,0.1c-0.2,0-0.4,0-0.6,0
+		c-0.2,0-0.4,0-0.6,0c-0.2,0-0.4-0.1-0.6-0.1c-0.2,0-0.4-0.1-0.5-0.2c-0.2,0-0.3-0.1-0.5-0.2c-0.6-0.3-1-0.6-1-0.6l-1.8-1.8
+		c-0.9-0.9-0.9-2.4,0-3.3C31.6,45.9,32.3,45.6,32.9,45.7z"/>
+</g>
+<path fill="#2B3B47" stroke="#2B3B47" stroke-width="1.0904" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
+	M30.6,55c0,0,2.1,1.3,5.4,1.3s5.4-1.3,5.4-1.3s-0.3,4.9-5.4,4.9S30.6,55,30.6,55z"/>
+<path fill="#2B3B47" d="M17.3,32.5c1.7,0,3,1.3,3,3v6.8c0,1.7-1.3,3-3,3l0,0c-1.7,0-3-1.3-3-3v-6.8C14.3,33.8,15.7,32.5,17.3,32.5
+	L17.3,32.5z"/>
+<path fill="#2B3B47" d="M54.8,32.5c1.7,0,3,1.3,3,3v6.8c0,1.7-1.3,3-3,3l0,0c-1.7,0-3-1.3-3-3v-6.8C51.8,33.8,53.1,32.5,54.8,32.5
+	L54.8,32.5z"/>
+<path fill="#2B3B47" d="M57.3,20.1c3.6-8,10-11.5,11.5-12.3c0,0,0-0.1,0-0.1c-0.1,0-0.2,0-0.3,0c-0.1,0-0.3,0-0.4,0
+	c-0.2,0-0.4,0-0.6,0c-0.1,0-0.1,0-0.2,0c-5.1,0.4-9.5,3.3-12.3,8.1c-0.4,0.6-0.7,1.3-1,1.9C55.2,18.5,56.3,19.2,57.3,20.1z"/>
+<path fill="#2B3B47" d="M14.7,20.1c1.1-0.9,2.3-1.8,3.6-2.5c-0.2-0.7-0.5-1.3-0.9-1.8c-3.1-5.2-8.6-8.1-14.2-8.1
+	c-0.1,0-0.1,0.1,0,0.2C4.7,8.5,11.1,12.1,14.7,20.1z"/>
+</svg>
diff --git a/devtools/client/themes/images/geometry-editor.svg b/devtools/client/themes/images/geometry-editor.svg
new file mode 100644
index 0000000000..b9049d541a
--- /dev/null
+++ b/devtools/client/themes/images/geometry-editor.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" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
+  <path d="M14,8 L12,8 L12,11.25 L12,12 L11.5,12 L3.5,12 L3,12 L3,11.75 L3,11.5 L3,8 L1,8 L1,8 L1,8.5 L1,9 L0,9 L0,8.5 L0,6.5 L0,6 L1,6 L1,6.5 L1,7 L3,7 L3,3.5 L3,3 L3.72222222,3 L3.72222222,3 L10.5555556,3 L11,3 L11,4 L10.5555556,4 L4,4 L4,11 L11,11 L11,3.5 L11,3 L12,3 L12,3.5 L12,7 L14,7 L14,6.5 L14,6 L15,6 L15,6.5 L15,8.5 L15,9 L14,9 L14,8.5 L14,8 Z M8,14 L8.5,14 L9,14 L9,15 L8.5,15 L6.5,15 L6,15 L6,14 L6.5,14 L7,14 L7,11.5 L7,11 L8,11 L8,11.5 L8,14 Z M7,1 L6.5,1 L6,1 L6,0 L6.5,0 L8.5,0 L9,0 L9,1 L8.5,1 L8,1 L8,3.5 L8,4 L7,4 L7,3.5 L7,1 L7,1 Z"/>
+  <path d="M3.5,9 C4.32842712,9 5,8.32842712 5,7.5 C5,6.67157288 4.32842712,6 3.5,6 C2.67157288,6 2,6.67157288 2,7.5 C2,8.32842712 2.67157288,9 3.5,9 Z M7.5,13 C8.32842712,13 9,12.3284271 9,11.5 C9,10.6715729 8.32842712,10 7.5,10 C6.67157288,10 6,10.6715729 6,11.5 C6,12.3284271 6.67157288,13 7.5,13 Z M11.5,9 C12.3284271,9 13,8.32842712 13,7.5 C13,6.67157288 12.3284271,6 11.5,6 C10.6715729,6 10,6.67157288 10,7.5 C10,8.32842712 10.6715729,9 11.5,9 Z M7.5,5 C8.32842712,5 9,4.32842712 9,3.5 C9,2.67157288 8.32842712,2 7.5,2 C6.67157288,2 6,2.67157288 6,3.5 C6,4.32842712 6.67157288,5 7.5,5 Z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/globe.svg b/devtools/client/themes/images/globe.svg
new file mode 100644
index 0000000000..edfff38f46
--- /dev/null
+++ b/devtools/client/themes/images/globe.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill" d="M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm5.16 4.96h-1.55a7.7 7.7 0 0 0-1.05-2.38 6.03 6.03 0 0 1 2.6 2.38zM14 8a5.96 5.96 0 0 1-.34 1.96h-1.82A12.33 12.33 0 0 0 12 8a12.33 12.33 0 0 0-.16-1.96h1.82A5.96 5.96 0 0 1 14 8zm-6 6c-1.07 0-2.04-1.2-2.57-2.96h5.14C10.04 12.8 9.07 14 8 14zM5.17 9.96a11.08 11.08 0 0 1 0-3.92h5.66A11.11 11.11 0 0 1 11 8a11.11 11.11 0 0 1-.17 1.96zM2 8a5.96 5.96 0 0 1 .34-1.96h1.82a12.36 12.36 0 0 0 0 3.92H2.33A5.96 5.96 0 0 1 2 8zm6-6c1.07 0 2.04 1.2 2.57 2.96H5.43C5.96 3.2 6.93 2 8 2zm-2.56.58a7.7 7.7 0 0 0-1.05 2.38H2.84a6.03 6.03 0 0 1 2.6-2.38zm-2.6 8.46h1.55a7.7 7.7 0 0 0 1.05 2.38 6.03 6.03 0 0 1-2.6-2.38zm7.72 2.38a7.7 7.7 0 0 0 1.05-2.38h1.56a6.03 6.03 0 0 1-2.61 2.38z"/>
+</svg>
diff --git a/devtools/client/themes/images/grid.svg b/devtools/client/themes/images/grid.svg
new file mode 100644
index 0000000000..61792d1189
--- /dev/null
+++ b/devtools/client/themes/images/grid.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="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke">
+  <path fill="none" d="M1 2.5h9m-9 3h9m-9 3h9M2.5 1v9m3-9v9m3-9v9"/>
+</svg>
diff --git a/devtools/client/themes/images/help.svg b/devtools/client/themes/images/help.svg
new file mode 100644
index 0000000000..a3d0b2986e
--- /dev/null
+++ b/devtools/client/themes/images/help.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" fill="context-fill" d="M8 14A6 6 0 108 2a6 6 0 000 12zm0 1A7 7 0 108 1a7 7 0 000 14z"/>
+  <path fill="context-fill" d="M8.767 11.333a.766.766 0 11-1.533 0 .766.766 0 011.533 0zM7 6.333c0-.509.41-1 1-1 .59 0 1 .491 1 1 0 .208-.096.424-.272.65-.133.169-.257.286-.38.4-.051.048-.102.095-.153.146l-.032.03c-.087.078-.311.28-.466.504-.217.316-.364.724-.364 1.27a.667.667 0 001.334 0c0-.287.07-.43.129-.514.034-.05.076-.096.131-.15l.086-.08.002-.002.006-.005c.034-.03.076-.07.117-.11l.057-.054c.21-.19.406-.396.584-.616.267-.341.554-.843.554-1.469C10.333 5.176 9.411 4 8 4 6.59 4 5.667 5.176 5.667 6.333a.667.667 0 101.333 0z"/>
+</svg>
diff --git a/devtools/client/themes/images/highlight-selector.svg b/devtools/client/themes/images/highlight-selector.svg
new file mode 100644
index 0000000000..887e49541d
--- /dev/null
+++ b/devtools/client/themes/images/highlight-selector.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 viewBox="0 0 15 15" fill="context-fill #0C0C0D" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4 3C3.44772 3 3 3.44772 3 4V5H5V3H4ZM3 6.5V8.5H5V6.5H3ZM3 11V10H5V12H4C3.44772 12 3 11.5523 3 11ZM8.5 12H6.5V10H8.5V12ZM10 12H11C11.5523 12 12 11.5523 12 11V10H10V12ZM12 6.5V8.5H10V6.5H12ZM12 5V4C12 3.44772 11.5523 3 11 3H10V5H12ZM8.5 3H6.5V5H8.5V3Z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/import.svg b/devtools/client/themes/images/import.svg
new file mode 100644
index 0000000000..8b58da9c8b
--- /dev/null
+++ b/devtools/client/themes/images/import.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M13.374 1H4.623A2.83 2.83 0 0 0 2 4v4h2V4a.928.928 0 0 1 .833-1h8.333A.928.928 0 0 1 14 4v8a.928.928 0 0 1-.833 1H4.833A.928.928 0 0 1 4 12v-1H2v1a2.833 2.833 0 0 0 2.627 3h9.623A1.888 1.888 0 0 0 16 13V4a2.833 2.833 0 0 0-2.626-3zM7.146 11.146a.5.5 0 1 0 .707.707l2-2a.5.5 0 0 0 0-.707l-2-2a.5.5 0 0 0-.707.707L8.293 9H1.5a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 1.5 10h6.793z"/>
+</svg>
diff --git a/devtools/client/themes/images/info-small.svg b/devtools/client/themes/images/info-small.svg
new file mode 100644
index 0000000000..df505d9f14
--- /dev/null
+++ b/devtools/client/themes/images/info-small.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 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/images/info-tiny.svg b/devtools/client/themes/images/info-tiny.svg
new file mode 100644
index 0000000000..f170a18778
--- /dev/null
+++ b/devtools/client/themes/images/info-tiny.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" width="9" height="9">
+  <path fill="context-fill" fill-rule="evenodd" d="M4.5 8.2a3.7 3.7 0 1 0 0-7.4 3.7 3.7 0 0 0 0 7.4zm0 .8a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z M4.5 4a.6.6 0 0 1 .6.6v1.6a.6.6 0 0 1-1.2 0V4.6a.6.6 0 0 1 .6-.6z M5.2 2.7a.7.7 0 1 1-1.4 0 .7.7 0 0 1 1.4 0z"/>
+</svg>
diff --git a/devtools/client/themes/images/info.svg b/devtools/client/themes/images/info.svg
new file mode 100644
index 0000000000..9b67a6da1b
--- /dev/null
+++ b/devtools/client/themes/images/info.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M8 1a7 7 0 1 0 7 7 7.008 7.008 0 0 0-7-7zm0 13a6 6 0 1 1 6-6 6.007 6.007 0 0 1-6 6zm0-7a1 1 0 0 0-1 1v3a1 1 0 1 0 2 0V8a1 1 0 0 0-1-1zm0-3.188A1.188 1.188 0 1 0 9.188 5 1.188 1.188 0 0 0 8 3.812z" />
+</svg>
diff --git a/devtools/client/themes/images/item-arrow-dark-ltr.svg b/devtools/client/themes/images/item-arrow-dark-ltr.svg
new file mode 100644
index 0000000000..c2accabde2
--- /dev/null
+++ b/devtools/client/themes/images/item-arrow-dark-ltr.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="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12">
+  <path fill="#181d20" d="M7,11.6 7,.4 1.5,6z"/>
+  <path fill="#000" d="M7,0 6,0 0,6 6,12 7,12 7,11.6 1.5,6 7,.4z"/>
+</svg>
diff --git a/devtools/client/themes/images/item-arrow-dark-rtl.svg b/devtools/client/themes/images/item-arrow-dark-rtl.svg
new file mode 100644
index 0000000000..5ccd34c094
--- /dev/null
+++ b/devtools/client/themes/images/item-arrow-dark-rtl.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="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12">
+  <path fill="#181d20" d="M0,11.6 0,.4 5.5,6z"/>
+  <path fill="#000" d="M1,0 0,0 0,.4 5.5,6 0,11.6 0,12 1,12 7,6z"/>
+</svg>
diff --git a/devtools/client/themes/images/item-arrow-ltr.svg b/devtools/client/themes/images/item-arrow-ltr.svg
new file mode 100644
index 0000000000..a9f7b33d95
--- /dev/null
+++ b/devtools/client/themes/images/item-arrow-ltr.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="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12">
+  <path fill="#ffffff" d="M7,11.6 7,.4 1.5,6z"/>
+  <path fill="#dde1e4" d="M7,0 6,0 0,6 6,12 7,12 7,11.6 1.5,6 7,.4z"/>
+</svg>
diff --git a/devtools/client/themes/images/item-arrow-rtl.svg b/devtools/client/themes/images/item-arrow-rtl.svg
new file mode 100644
index 0000000000..80ea9e89c8
--- /dev/null
+++ b/devtools/client/themes/images/item-arrow-rtl.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="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12">
+  <path fill="#ffffff" d="M0,11.6 0,.4 5.5,6z"/>
+  <path fill="#dde1e4" d="M1,0 0,0 0,.4 5.5,6 0,11.6 0,12 1,12 7,6z"/>
+</svg>
diff --git a/devtools/client/themes/images/linear-easing-swatch.svg b/devtools/client/themes/images/linear-easing-swatch.svg
new file mode 100644
index 0000000000..91d9112e8e
--- /dev/null
+++ b/devtools/client/themes/images/linear-easing-swatch.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 viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="6" cy="6" r="6" fill="#fff"/>
+  <path d="M3 9L4 6H8L9 3" stroke="#808080" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>
diff --git a/devtools/client/themes/images/lock.svg b/devtools/client/themes/images/lock.svg
new file mode 100644
index 0000000000..26b0687846
--- /dev/null
+++ b/devtools/client/themes/images/lock.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12">
+  <path fill="context-fill" fill-rule="evenodd" d="M9 7a3 3 0 1 1 6 0v3H9V7zm-2 3V7a5 5 0 1 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1z" />
+</svg>
diff --git a/devtools/client/themes/images/mdn.svg b/devtools/client/themes/images/mdn.svg
new file mode 100644
index 0000000000..95325cb7c5
--- /dev/null
+++ b/devtools/client/themes/images/mdn.svg
@@ -0,0 +1,11 @@
+<!-- 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="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g fill="context-fill white">
+    <path d="M22.4203 12.5367L12.8529 43.4192H8.91937L18.4879 12.5322L22.4203 12.5367Z"/>
+    <path d="M25.9079 12.5369V43.4193H22.4282V12.5369H25.9079Z"/>
+    <path d="M39.4393 12.5367L29.8719 43.4192H25.9349L35.5024 12.5322L39.4393 12.5367Z"/>
+    <path d="M42.919 12.5369V43.4193H39.4393V12.5369H42.919Z"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/more.svg b/devtools/client/themes/images/more.svg
new file mode 100644
index 0000000000..b18d8e5bef
--- /dev/null
+++ b/devtools/client/themes/images/more.svg
@@ -0,0 +1,8 @@
+<!-- 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 16 16" width="16" height="16" fill="context-fill #0c0c0d">
+  <circle cx="2" cy="8" r="1.9"/>
+  <circle cx="8" cy="8" r="1.9"/>
+  <circle cx="14" cy="8" r="1.9"/>
+</svg>
diff --git a/devtools/client/themes/images/next.svg b/devtools/client/themes/images/next.svg
new file mode 100644
index 0000000000..7462afba42
--- /dev/null
+++ b/devtools/client/themes/images/next.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 version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+<path d="M12.4,2.1c-0.3,0-0.5,0.2-0.5,0.5v4.8c0,0-0.1-0.1-0.1-0.1l-7.4-5C3.8,1.8,3,2.2,3,3v10c0,0.8,0.8,1.3,1.4,0.8l7.4-5
+    c0.1,0,0.1-0.1,0.1-0.1v4.8c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5v-11C12.9,2.3,12.7,2.1,12.4,2.1z M3.9,13V3l7.4,5L3.9,13z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/open-3-pane.svg b/devtools/client/themes/images/open-3-pane.svg
new file mode 100644
index 0000000000..6328b1f544
--- /dev/null
+++ b/devtools/client/themes/images/open-3-pane.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">
+  <g fill="context-fill #0b0b0b">
+    <rect width="5" height="10" x="10" y="3" fill-opacity=".2"/>
+    <path d="M2,3.00247329 L2,3.00247329 L2,12.9975267 C2,12.9944441 2.00601643,13 2.00741593,13 L14.9925841,13 C14.9981844,13 15,12.9983304 15,12.9975267 L15,3.00247329 C15,3.00555595 14.9939836,3 14.9925841,3 L2.00741593,3 C2.00181555,3 2,3.00166957 2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 L2,3.00247329 Z M2.07876301,2 L14.921237,2 C15.5170213,2 16,2.45576096 16,3.00247329 L16,12.9975267 C16,13.5511774 15.517912,14 14.921237,14 L2.07876301,14 C1.48297865,14 1,13.544239 1,12.9975267 L1,3.00247329 C1,2.44882258 1.48208795,2 2.07876301,2 Z M12,12.5454545 L12,13 L13,13 L13,12.5454545 L13,3.45454545 L13,3 L12,3 L12,3.45454545 L12,12.5454545 Z M9,3.45454545 L9,12.5454545 L9,13 L10,13 L10,12.5454545 L10,3.45454545 L10,3 L9,3 L9,3.45454545 Z"/>
+    <polygon points="3 10.75 3 6 7.5 8.375" transform="rotate(-180 5.25 8.375)"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/open-inspector.svg b/devtools/client/themes/images/open-inspector.svg
new file mode 100644
index 0000000000..fd50929884
--- /dev/null
+++ b/devtools/client/themes/images/open-inspector.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 viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0C0C0D">
+  <path d="M7 3H5a2 2 0 0 0-2 2v2H1.5a.5.5 0 0 0 0 1H3v2c0 1.1.9 2 2 2h2v1.5a.5.5 0 0 0 1 0V12h2a2 2 0 0 0 2-2V8h1.5a.5.5 0 0 0 0-1H12V5a2 2 0 0 0-2-2H8V1.5a.5.5 0 0 0-1 0V3zM5 5h5v5H5V5z"/>
+</svg>
diff --git a/devtools/client/themes/images/pane-collapse.svg b/devtools/client/themes/images/pane-collapse.svg
new file mode 100644
index 0000000000..615734774e
--- /dev/null
+++ b/devtools/client/themes/images/pane-collapse.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" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">

+  <path fill-opacity=".3" d="M12,3h2v10h-2V3z M5,9.9V6.1L8,8L5,9.9z"/>

+  <path d="M14,2H2C1.4,2,1,2.4,1,3v10c0,0.6,0.4,1,1,1h12c0.6,0,1-0.4,1-1V3C15,2.4,14.6,2,14,2z M2,13L2,13V3h0h9v10   H2L2,13z M14,13C14,13,14,13,14,13h-2V3h2c0,0,0,0,0,0V13z M8.5,7.2l-3-1.9C4.6,4.7,4,5,4,6.1v3.8c0,1.1,0.6,1.4,1.5,0.8l3-1.9   C9.5,8.3,9.5,7.8,8.5,7.2z M5,9.9V6.1L8,8L5,9.9z"/>

+</svg>

diff --git a/devtools/client/themes/images/pane-expand.svg b/devtools/client/themes/images/pane-expand.svg
new file mode 100644
index 0000000000..8b6a02f2c3
--- /dev/null
+++ b/devtools/client/themes/images/pane-expand.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" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">

+  <path fill-opacity=".3" d="M4,13H2V3h2V13z M11,6.1v3.8L8,8L11,6.1z"/>

+  <path d="M2,14h12c0.6,0,1-0.4,1-1V3c0-0.6-0.4-1-1-1H2C1.4,2,1,2.4,1,3v10C1,13.6,1.4,14,2,14z M14,3L14,3v10h0H5V3   H14L14,3z M2,3C2,3,2,3,2,3h2v10H2c0,0,0,0,0,0V3z M7.5,8.8l3,1.9c1,0.6,1.5,0.3,1.5-0.8V6.1c0-1.1-0.6-1.4-1.5-0.8l-3,1.9   C6.5,7.7,6.5,8.2,7.5,8.8z M11,6.1v3.8L8,8L11,6.1z"/>

+</svg>

diff --git a/devtools/client/themes/images/pause.svg b/devtools/client/themes/images/pause.svg
new file mode 100644
index 0000000000..f799a74ab4
--- /dev/null
+++ b/devtools/client/themes/images/pause.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" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
+  <path d="M5 12.503l.052-9a.5.5 0 0 0-1-.006l-.052 9a.5.5 0 0 0 1 .006zM12 12.497l-.05-9A.488.488 0 0 0 11.474 3a.488.488 0 0 0-.473.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z"/>
+</svg>
diff --git a/devtools/client/themes/images/pencil-icon.svg b/devtools/client/themes/images/pencil-icon.svg
new file mode 100644
index 0000000000..d9b838d7cb
--- /dev/null
+++ b/devtools/client/themes/images/pencil-icon.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" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
+  <path d="M3.89 14.66L10.51 8l2.33-2.3-2.56-2.54L8 5.49l-6.66 6.62S-.53 15.17.15 15.85s3.74-1.19 3.74-1.19zM14.3 4.23l.45-.44.92-.93a1 1 0 0 0 .09-1.36L14.48.24a1 1 0 0 0-1.36.09l-.93.93-.44.44z"/>
+</svg>
diff --git a/devtools/client/themes/images/play.svg b/devtools/client/themes/images/play.svg
new file mode 100644
index 0000000000..5ce67117f7
--- /dev/null
+++ b/devtools/client/themes/images/play.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" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
+  <path d="M4 12.5l8-5-8-5v10zm-1 0v-10a1 1 0 0 1 1.53-.848l8 5a1 1 0 0 1 0 1.696l-8 5A1 1 0 0 1 3 12.5z" fill-rule="evenodd"/>
+</svg>
diff --git a/devtools/client/themes/images/profiler-stopwatch.svg b/devtools/client/themes/images/profiler-stopwatch.svg
new file mode 100644
index 0000000000..c453ff8856
--- /dev/null
+++ b/devtools/client/themes/images/profiler-stopwatch.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 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="M10.85 6.85a.5.5 0 0 0-.7-.7l-2.5 2.5.7.7 2.5-2.5zM8 10a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM5 1a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1zM8 4a5 5 0 1 0 0 10A5 5 0 0 0 8 4zM1 9a7 7 0 1 1 14 0A7 7 0 0 1 1 9z"/>
+</svg>
diff --git a/devtools/client/themes/images/pseudo-class.svg b/devtools/client/themes/images/pseudo-class.svg
new file mode 100644
index 0000000000..00cb163106
--- /dev/null
+++ b/devtools/client/themes/images/pseudo-class.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
+  <path d="M11 7V5.5c0-.3-.2-.5-.5-.5h-5c-.3 0-.5.2-.5.5v5c0 .3.2.5.5.5h1.9V7.5c0-.3.2-.5.5-.5H11zM3 7H.8c-.1 0-.6 0-.7-.7-.1-.2-.1-.4-.1-.6v-5C0 .5 0 .3.2.1.4 0 .6 0 .7 0h5.2c.3 0 .6 0 .8.2.2.1.3.3.3.5V3H3v4zM1 6h1V2.7c0-.2.1-.4.2-.5.3-.2.6-.2.8-.2h3V1H1v5z"/>
+  <path d="M9 9h1v1H9V9zm5 1h-1V9h1v1zm-2 0h-1V9h1v1zm3-1h1v1h-1V9zm1 5h-1v-1h1v1zm0-2h-1v-1h1v1zm-1 3h1v1h-1v-1zm-1 1h-1v-1h1v1zm-2 0h-1v-1h1v1zm-3-1h1v1H9v-1zm1-1H9v-1h1v1zm0-2H9v-1h1v1z"/>
+</svg>
diff --git a/devtools/client/themes/images/reload.svg b/devtools/client/themes/images/reload.svg
new file mode 100644
index 0000000000..5e98246093
--- /dev/null
+++ b/devtools/client/themes/images/reload.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M15 1a1 1 0 0 0-1 1v2.418A6.995 6.995 0 1 0 8 15a6.954 6.954 0 0 0 4.95-2.05 1 1 0 0 0-1.414-1.414A5.019 5.019 0 1 1 12.549 6H10a1 1 0 0 0 0 2h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
+</svg>
diff --git a/devtools/client/themes/images/report.svg b/devtools/client/themes/images/report.svg
new file mode 100644
index 0000000000..7359028aef
--- /dev/null
+++ b/devtools/client/themes/images/report.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M8 0C4.3 0 2 2.107 2 5.5c0 2.372 2.065 4.268 3 5V14c0 1.476 1.616 2 3 2s3-.524 3-2v-3.5c.935-.736 3-2.632 3-5C14 2.107 11.7 0 8 0zm1 12H7v-1h2zm-1 2a3.086 3.086 0 0 1-1-.172V13h2v.828A3.047 3.047 0 0 1 8 14zm1.445-4.832A1 1 0 0 0 9 10H7a1 1 0 0 0-.444-.831C5.845 8.691 4 7.1 4 5.5 4 2.607 6.175 2 8 2s4 .607 4 3.5c0 1.6-1.845 3.191-2.555 3.668z"></path>
+</svg>
diff --git a/devtools/client/themes/images/reveal.svg b/devtools/client/themes/images/reveal.svg
new file mode 100644
index 0000000000..2e6c5918e9
--- /dev/null
+++ b/devtools/client/themes/images/reveal.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 width="16" height="8" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" fill="none" stroke-linecap="round">
+  <g transform="rotate(90 8,8)">
+    <path d="M5.5 3.5l2 2M5.5 7.5l2-2"/>
+    <path d="M7 5.5H4.006c-1.012 0-1.995 1.017-2.011 2.024-.005.023-.005 1.347 0 3.971" stroke-linejoin="round"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/rewind.svg b/devtools/client/themes/images/rewind.svg
new file mode 100644
index 0000000000..a63401b098
--- /dev/null
+++ b/devtools/client/themes/images/rewind.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" xmlns="http://www.w3.org/2000/svg" fill="context-fill #0b0b0b">
+  <path d="M13 2.5l-8 5 8 5v-10zm1 0v10a1 1 0 0 1-1.53.848l-8-5a1 1 0 0 1 0-1.696l8-5A1 1 0 0 1 14 2.5zM2 12.497l-.04-7.342-.01-1.658A.488.488 0 0 0 1.474 3 .488.488 0 0 0 1 3.503l.05 9a.488.488 0 0 0 .477.497.488.488 0 0 0 .473-.503z"/>
+</svg>
diff --git a/devtools/client/themes/images/rules-view-dark-mode-simulation.svg b/devtools/client/themes/images/rules-view-dark-mode-simulation.svg
new file mode 100644
index 0000000000..0dffdfe01c
--- /dev/null
+++ b/devtools/client/themes/images/rules-view-dark-mode-simulation.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill #0b0b0b">
+  <path d="M15 8A7 7 0 111 8a7 7 0 0114 0zM8 3a5 5 0 102 9.58 5 5 0 010-9.16A4.98 4.98 0 008 3z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/rules-view-light-mode-simulation.svg b/devtools/client/themes/images/rules-view-light-mode-simulation.svg
new file mode 100644
index 0000000000..13ec129f0a
--- /dev/null
+++ b/devtools/client/themes/images/rules-view-light-mode-simulation.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="context-fill #0b0b0b" stroke="context-stroke #0b0b0b">
+  <ellipse cx="8" cy="8" rx="4" ry="4"/>
+  <path d="M8 1V2M8 14V15M1 8H2M14 8H15M3.05024 3.05025L3.75735 3.75736M12.2426 12.2426L12.9497 12.9497M3.05024 12.9497L3.75735 12.2426M12.2426 3.75736L12.9497 3.05025" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/devtools/client/themes/images/rules-view-print-simulation.svg b/devtools/client/themes/images/rules-view-print-simulation.svg
new file mode 100644
index 0000000000..babde2cd39
--- /dev/null
+++ b/devtools/client/themes/images/rules-view-print-simulation.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill">
+  <path d="M2 4a3 3 0 0 1 3-3h4.17a3 3 0 0 1 2.12.88l1.83 1.83A3 3 0 0 1 14 5.83V12a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V4zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V5.83a1 1 0 0 0-.3-.7L9.89 3.28a1 1 0 0 0-.7-.29H5z"/>
+  <path d="M6 10.5c0-.28.22-.5.5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zM6 8.5c0-.28.22-.5.5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zM6 6.5c0-.28.22-.5.5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zM9 4.5V3h1v1.5c0 .28.22.5.5.5H12v1h-1.5A1.5 1.5 0 0 1 9 4.5z"/>
+</svg>
diff --git a/devtools/client/themes/images/sad-face.svg b/devtools/client/themes/images/sad-face.svg
new file mode 100644
index 0000000000..6c42ca43b6
--- /dev/null
+++ b/devtools/client/themes/images/sad-face.svg
@@ -0,0 +1,9 @@
+<!-- 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" fill="#D92215">
+  <path d="M8 14.5c-3.6 0-6.5-2.9-6.5-6.5S4.4 1.5 8 1.5s6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5zm0-12C5 2.5 2.5 5 2.5 8S5 13.5 8 13.5 13.5 11 13.5 8 11 2.5 8 2.5z"/>
+  <circle cx="5" cy="6" r="1" transform="translate(1 1)"/>
+  <circle cx="9" cy="6" r="1" transform="translate(1 1)"/>
+  <path d="M5.5 11c-.1 0-.2 0-.3-.1-.2-.1-.3-.4-.1-.7C6 9 7 8.5 8.1 8.5c1.7.1 2.8 1.7 2.8 1.8.2.2.1.5-.1.7-.2.1-.6 0-.7-.2 0 0-.9-1.3-2-1.3-.7 0-1.4.4-2.1 1.3-.2.2-.4.2-.5.2z"/>
+</svg>
diff --git a/devtools/client/themes/images/search-clear.svg b/devtools/client/themes/images/search-clear.svg
new file mode 100644
index 0000000000..368c0ba872
--- /dev/null
+++ b/devtools/client/themes/images/search-clear.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M6.586 8l-2.293 2.293a1 1 0 0 0 1.414 1.414L8 9.414l2.293 2.293a1 1 0 0 0 1.414-1.414L9.414 8l2.293-2.293a1 1 0 1 0-1.414-1.414L8 6.586 5.707 4.293a1 1 0 0 0-1.414 1.414L6.586 8zM8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0z"/>
+</svg>
diff --git a/devtools/client/themes/images/search.svg b/devtools/client/themes/images/search.svg
new file mode 100644
index 0000000000..23ace13ae1
--- /dev/null
+++ b/devtools/client/themes/images/search.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill" d="M15.707 14.293l-5-5-1.414 1.414 5 5a1 1 0 0 0 1.414-1.414z"/>
+  <path fill="context-fill" fill-rule="evenodd" d="M6 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2A6 6 0 1 0 6 0a6 6 0 0 0 0 12z"/>
+</svg>
diff --git a/devtools/client/themes/images/security-state-insecure.svg b/devtools/client/themes/images/security-state-insecure.svg
new file mode 100644
index 0000000000..081dc12d5d
--- /dev/null
+++ b/devtools/client/themes/images/security-state-insecure.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill" d="M4.56 14H12a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-.44l-7 7zM4 7a1 1 0 0 0-1 1v4.94L8.94 7H6V6a2 2 0 0 1 3.414-1.414l1.414-1.414A4 4 0 0 0 4 6v1z"/>
+  <path fill="context-stroke" d="M14.03 1.97a.75.75 0 0 1 0 1.06l-11.5 11.5a.75.75 0 0 1-1.06-1.06l11.5-11.5a.75.75 0 0 1 1.06 0z"/>
+</svg>
diff --git a/devtools/client/themes/images/security-state-secure.svg b/devtools/client/themes/images/security-state-secure.svg
new file mode 100644
index 0000000000..c8da3c0588
--- /dev/null
+++ b/devtools/client/themes/images/security-state-secure.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill" d="M13 8v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1V6a4 4 0 1 1 8 0v1a1 1 0 0 1 1 1zM8 4a2 2 0 0 0-2 2v1h4V6a2 2 0 0 0-2-2z"/>
+</svg>
diff --git a/devtools/client/themes/images/security-state-weak.svg b/devtools/client/themes/images/security-state-weak.svg
new file mode 100644
index 0000000000..9e14e005f8
--- /dev/null
+++ b/devtools/client/themes/images/security-state-weak.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill" fill-rule="evenodd" d="M10 5.453a1.33 1.33 0 0 0-.685.61L5.53 13H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1V5a4 4 0 1 1 8 0v.453zM4 5a2 2 0 1 1 4 0v1H4V5z"/>
+  <path fill="context-stroke" fill-rule="evenodd" d="M10.941 6.765a.5.5 0 0 0-.882 0l-4 7.5A.5.5 0 0 0 6.5 15h8a.5.5 0 0 0 .441-.735l-4-7.5zM10.5 8.8a.7.7 0 0 0-.7.7v1.8a.7.7 0 1 0 1.4 0V9.5a.7.7 0 0 0-.7-.7zm0 5.4a.7.7 0 1 0 0-1.4.7.7 0 0 0 0 1.4z"/>
+</svg>
diff --git a/devtools/client/themes/images/select-arrow.svg b/devtools/client/themes/images/select-arrow.svg
new file mode 100644
index 0000000000..d8f13d63f5
--- /dev/null
+++ b/devtools/client/themes/images/select-arrow.svg
@@ -0,0 +1,8 @@
+<!-- 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="8" height="8" viewBox="0 0 16 16">
+  <path fill="context-fill" d="M7.9 16.3c-.3 0-.6-.1-.8-.4l-4-4.8c-.2-.3-.3-.5-.1-.8.1-.3.5-.3.9-.3h8c.4 0 .7 0 .9.3.2.4.1.6-.1.9l-4 4.8c-.2.3-.5.3-.8.3zM7.8 0c.3 0 .6.1.7.4L12.4 5c.2.3.3.4.1.7-.1.4-.5.3-.8.3H3.9c-.4 0-.8.1-.9-.2-.2-.4-.1-.6.1-.9L7 .3c.2-.3.5-.3.8-.3z"/>
+</svg>
+
diff --git a/devtools/client/themes/images/settings.svg b/devtools/client/themes/images/settings.svg
new file mode 100644
index 0000000000..fc8424b211
--- /dev/null
+++ b/devtools/client/themes/images/settings.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path fill-rule="evenodd" d="M8 16a1 1 0 0 1-1-1v-2.1a5 5 0 0 1-1.65-0.76l-1.5 1.5a1 1 0 0 1-1.5-1.5l1.5-1.5A5 5 0 0 1 3.1 9h-2.1a1 1 0 1 1 0-2h2.1a5 5 0 0 1 0.76-1.65l-1.5-1.5a1 1 0 0 1 1.5-1.5l1.5 1.5A5 5 0 0 1 7 3.1v-2.1a1 1 0 1 1 2 0v2.1a5 5 0 0 1 1.65 0.76l1.5-1.5a1 1 0 1 1 1.5 1.5l-1.5 1.5A5 5 0 0 1 12.9 7h2.1a1 1 0 1 1 0 2h-2.1a5 5 0 0 1-0.76 1.65l1.5 1.5a1 1 0 0 1-1.5 1.5l-1.5-1.5A5 5 0 0 1 9 12.9v2.1a1 1 0 0 1-1 1zM5 8a3 3 0 1 1 6 0 3 3 0 0 1-6 0z"/>
+</svg>
diff --git a/devtools/client/themes/images/shape-swatch.svg b/devtools/client/themes/images/shape-swatch.svg
new file mode 100644
index 0000000000..f1a89048f8
--- /dev/null
+++ b/devtools/client/themes/images/shape-swatch.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" viewBox="0 0 16 16" fill="none" stroke="context-stroke">
+  <path d="M2.5,5.55V9L2.12,9A1.5,1.5,0,1,0,4,10.88L4,10.5H11l.1.38a1.5,1.5,0,1,0,.89-1.77l-.42.17-2-3.8.36-.25A1.5,1.5,0,1,0,7.55,3.62L7.45,4H4L4,3.62A1.5,1.5,0,1,0,2.12,5.45Z"/>
+  <circle cx="12.5" cy="10.5" r="1.5"/>
+  <circle cx="2.5" cy="10.5" r="1.5"/>
+  <circle cx="9" cy="4" r="1.5"/>
+  <circle cx="2.5" cy="4" r="1.5"/>
+</svg>
diff --git a/devtools/client/themes/images/sort-ascending-arrow.svg b/devtools/client/themes/images/sort-ascending-arrow.svg
new file mode 100644
index 0000000000..de3e5b3c62
--- /dev/null
+++ b/devtools/client/themes/images/sort-ascending-arrow.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 xmlns="http://www.w3.org/2000/svg" width="7" height="4" viewBox="0 0 7 4">
+  <path d="M0,4 L3.5,0 L7,4" fill="#f9f9fa" fill-opacity="0.8"/>
+</svg>
diff --git a/devtools/client/themes/images/sort-descending-arrow.svg b/devtools/client/themes/images/sort-descending-arrow.svg
new file mode 100644
index 0000000000..9b14f28a24
--- /dev/null
+++ b/devtools/client/themes/images/sort-descending-arrow.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 xmlns="http://www.w3.org/2000/svg" width="7" height="4" viewBox="0 0 7 4">
+  <path d="M0,0 L3.5,4 L7,0" fill="#f9f9fa" fill-opacity="0.8"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-accessibility.svg b/devtools/client/themes/images/tool-accessibility.svg
new file mode 100644
index 0000000000..305699f2fe
--- /dev/null
+++ b/devtools/client/themes/images/tool-accessibility.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <circle cx="8" cy="2.2" r="2"/>
+  <path d="M1 6a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2h-3v8a1 1 0 1 1-2 0v-4H7v4a1 1 0 1 1-2 0V7H2a1 1 0 0 1-1-1z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-application.svg b/devtools/client/themes/images/tool-application.svg
new file mode 100644
index 0000000000..e320192c38
--- /dev/null
+++ b/devtools/client/themes/images/tool-application.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="none" stroke="context-fill #0c0c0d" d="M4 1.5H2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V2a.5.5 0 0 0-.5-.5zM9 1.5H7a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V2a.5.5 0 0 0-.5-.5zM14 1.5h-2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V2a.5.5 0 0 0-.5-.5zM4 6.5H2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V7a.5.5 0 0 0-.5-.5zM9 6.5H7a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V7a.5.5 0 0 0-.5-.5zM14 6.5h-2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5V7a.5.5 0 0 0-.5-.5zM4 11.5H2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5zM9 11.5H7a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5zM14 11.5h-2a.5.5 0 0 0-.5.5v2c0 .28.22.5.5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-debugger.svg b/devtools/client/themes/images/tool-debugger.svg
new file mode 100644
index 0000000000..f7e2116a0e
--- /dev/null
+++ b/devtools/client/themes/images/tool-debugger.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M2.5 4a.5.5 0 0 0-.5.5v7c0 .28.22.5.5.5h7.55l3.6-4-3.6-4H2.5zM0 4.5A2.5 2.5 0 0 1 2.5 2h8a1 1 0 0 1 .74.33l4.5 5a1 1 0 0 1 0 1.34l-4.5 5a1 1 0 0 1-.74.33h-8A2.5 2.5 0 0 1 0 11.5v-7z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-dom.svg b/devtools/client/themes/images/tool-dom.svg
new file mode 100644
index 0000000000..45a40fa879
--- /dev/null
+++ b/devtools/client/themes/images/tool-dom.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">

+  <path d="M9.8 15.2a1 1 0 0 1 0-1.4l3.79-3.8-3.8-3.8a1 1 0 0 1 1.42-1.4l4.5 4.5a1 1 0 0 1 0 1.4l-4.5 4.5a1 1 0 0 1-1.42 0zM6.2.8a1 1 0 0 1 0 1.4L2.42 6l3.8 3.8a1 1 0 0 1-1.42 1.4L.3 6.7a1.01 1.01 0 0 1 0-1.4L4.8.8a1 1 0 0 1 1.42 0z"/>

+</svg>

diff --git a/devtools/client/themes/images/tool-inspector.svg b/devtools/client/themes/images/tool-inspector.svg
new file mode 100644
index 0000000000..954e92a04c
--- /dev/null
+++ b/devtools/client/themes/images/tool-inspector.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M4.5 4a.5.5 0 0 0-.5.5v7c0 .28.22.5.5.5h7a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.5-.5h-7zM2 4.5A2.5 2.5 0 0 1 4.5 2h7A2.5 2.5 0 0 1 14 4.5v7a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 2 11.5v-7M.5 7.5a.5.5 0 0 0 0 1H2v-1H.5zM14 7.5h1.5a.5.5 0 0 1 0 1H14v-1zM8 0c.28 0 .5.22.5.5V2h-1V.5c0-.28.22-.5.5-.5zM8.5 14v1.5a.5.5 0 0 1-1 0V14h1z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-memory.svg b/devtools/client/themes/images/tool-memory.svg
new file mode 100644
index 0000000000..8f3fc710ce
--- /dev/null
+++ b/devtools/client/themes/images/tool-memory.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M3 4a3 3 0 0 1 3-3h4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V4zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H6M13.82 4.03a.5.5 0 0 1 .5.09l1.5 1.25a.5.5 0 0 1-.64.76L13.9 5.07l-.9.34V4.34l.82-.3zM13.82 7.03a.5.5 0 0 1 .5.09l1.5 1.25a.5.5 0 0 1-.64.76L13.9 8.07l-.9.34V7.34l.82-.3zM13.82 10.03a.5.5 0 0 1 .5.09l1.5 1.25a.5.5 0 0 1-.64.76l-1.28-1.06-.9.34v-1.07l.82-.3zM2.18 4.03a.5.5 0 0 0-.5.09L.18 5.37a.5.5 0 1 0 .64.76L2.1 5.07l.9.34V4.34l-.82-.3zM2.18 7.03a.5.5 0 0 0-.5.09L.18 8.37a.5.5 0 1 0 .64.76L2.1 8.07l.9.34V7.34l-.82-.3zM2.18 10.03a.5.5 0 0 0-.5.09l-1.5 1.25a.5.5 0 1 0 .64.76l1.28-1.06.9.34v-1.07l-.82-.3z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-network.svg b/devtools/client/themes/images/tool-network.svg
new file mode 100644
index 0000000000..e0aab91a7a
--- /dev/null
+++ b/devtools/client/themes/images/tool-network.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M12 14a1 1 0 0 0 1-1V2a1 1 0 1 0-2 0v11a1 1 0 0 0 1 1M12 15c.23 0 .45-.1.6-.3l3.25-4.24a.75.75 0 0 0-1.08-1.03L12 11.77 9.23 9.43a.75.75 0 0 0-1.08 1.03l3.25 4.25c.15.18.37.29.6.29zM4 2a1 1 0 0 1 1 1v11a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1M4 1c.23 0 .45.1.6.3l3.25 4.24a.75.75 0 0 1-1.08 1.03L4 4.23 1.23 6.57A.75.75 0 0 1 .15 5.54L3.4 1.3c.15-.18.37-.29.6-.29z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-profiler.svg b/devtools/client/themes/images/tool-profiler.svg
new file mode 100644
index 0000000000..44e435001a
--- /dev/null
+++ b/devtools/client/themes/images/tool-profiler.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8 0A8 8 0 0 0 .78 11.43a1 1 0 1 0 1.8-.86 5.94 5.94 0 0 1 0-5.17 6 6 0 0 1 10.83 5.17 1 1 0 1 0 1.81.86A7.99 7.99 0 0 0 8 0M10 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0M10.96 6.7a.5.5 0 1 0-.92-.4l-1.7 3.73a2 2 0 0 1 .92.41l1.7-3.73z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-storage.svg b/devtools/client/themes/images/tool-storage.svg
new file mode 100644
index 0000000000..77ea5a24fa
--- /dev/null
+++ b/devtools/client/themes/images/tool-storage.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M4 0h8a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4zM3 7h10v1H3V7zM9.5 4h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zM9.5 10h-3a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-styleeditor.svg b/devtools/client/themes/images/tool-styleeditor.svg
new file mode 100644
index 0000000000..e6af15c1bd
--- /dev/null
+++ b/devtools/client/themes/images/tool-styleeditor.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M13.2 14.08c-.62.63-1.55.92-2.7.92a1 1 0 1 1 0-2c.85 0 1.17-.21 1.3-.33.11-.12.2-.32.2-.67v-1.9a2.74 2.74 0 0 1 .91-2.1A2.74 2.74 0 0 1 12 5.9V4c0-.35-.09-.55-.2-.67-.13-.12-.45-.33-1.3-.33a1 1 0 1 1 0-2c1.15 0 2.08.29 2.7.92.64.63.8 1.43.8 2.08v1.9c0 .41.27.65.57.89l.55.43a1 1 0 0 1 0 1.56l-.55.43c-.3.24-.57.48-.57.89V12c0 .65-.16 1.45-.8 2.08zM2.8 14.08c.62.63 1.55.92 2.7.92a1 1 0 1 0 0-2c-.85 0-1.17-.21-1.3-.33-.11-.12-.2-.32-.2-.67v-1.9A2.74 2.74 0 0 0 3.09 8l.18-.2C3.7 7.34 4 6.73 4 5.9V4c0-.35.09-.55.2-.67.13-.12.45-.33 1.3-.33a1 1 0 1 0 0-2c-1.15 0-2.08.29-2.7.92C2.15 2.55 2 3.35 2 4v1.9c0 .41-.27.65-.57.89l-.55.43a1 1 0 0 0 0 1.56c.2.17.4.3.55.43.3.24.57.48.57.89V12c0 .65.16 1.45.8 2.08z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-webconsole.svg b/devtools/client/themes/images/tool-webconsole.svg
new file mode 100644
index 0000000000..b2a59503c0
--- /dev/null
+++ b/devtools/client/themes/images/tool-webconsole.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #0c0c0d">
+  <path d="M0 4a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V4zm3-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3z"/>
+  <path d="M4.22 5.2a.62.62 0 0 1 .88.02l2.75 2.85c.23.24.23.62 0 .86L5.1 11.78a.63.63 0 0 1-.9-.86L6.53 8.5 4.2 6.08a.62.62 0 0 1 .02-.88z"/>
+</svg>
diff --git a/devtools/client/themes/images/vview-delete.svg b/devtools/client/themes/images/vview-delete.svg
new file mode 100644
index 0000000000..251e63a344
--- /dev/null
+++ b/devtools/client/themes/images/vview-delete.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill #d7d7d7" d="M6.09 7.5L3.54 4.96l1.42-1.42L7.5 6.1l2.54-2.55 1.42 1.42L8.9 7.5l2.55 2.54-1.42 1.42L7.5 8.9l-2.54 2.55-1.42-1.42L6.1 7.5z" />
+</svg>
diff --git a/devtools/client/themes/images/vview-edit.svg b/devtools/client/themes/images/vview-edit.svg
new file mode 100644
index 0000000000..0c56457831
--- /dev/null
+++ b/devtools/client/themes/images/vview-edit.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill #d7d7d7" d="M12.2 5.2L9.8 2.8l.8-.8L13 4.4l-.8.8zM3.4 9.2l6-6 2.4 2.4-6 6-2.4-2.4zM5.4 12L3 9.6V12h2.4z"/>
+</svg>
diff --git a/devtools/client/themes/images/vview-lock.svg b/devtools/client/themes/images/vview-lock.svg
new file mode 100644
index 0000000000..62349b60a2
--- /dev/null
+++ b/devtools/client/themes/images/vview-lock.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill #d7d7d7" d="M11 6.5a1 1 0 011 1V12a1 1 0 01-1 1H4a1 1 0 01-1-1V7.5a1 1 0 011-1V5a3.5 3.5 0 117 0v1.5zM7.5 3a2 2 0 00-2 2v1.5h4V5a2 2 0 00-2-2z"/>
+</svg>
diff --git a/devtools/client/themes/images/webconsole/editor.svg b/devtools/client/themes/images/webconsole/editor.svg
new file mode 100644
index 0000000000..242440f90a
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/editor.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
+  <path d="M3 1h10c1.655.004 2.996 1.345 3 3v8c-.005 1.655-1.345 2.995-3 3H3c-1.656-.003-2.997-1.344-3-3V4c.007-1.654 1.346-2.993 3-3zm11 11V4c0-.552-.448-1-1-1H8v10h5c.552 0 1-.448 1-1zM2 12c0 .552.448 1 1 1h4V3H3c-.552 0-1 .448-1 1v8z"/>
+  <path d="M3.5 5h2c.276 0 .5-.224.5-.5S5.776 4 5.5 4h-2c-.276 0-.5.224-.5.5s.224.5.5.5zm0 2h2c.276 0 .5-.224.5-.5S5.776 6 5.5 6h-2c-.276 0-.5.224-.5.5s.224.5.5.5zm1 2h1c.276 0 .5-.224.5-.5S5.776 8 5.5 8h-1c-.276 0-.5.224-.5.5s.224.5.5.5z"/>
+</svg>
diff --git a/devtools/client/themes/images/webconsole/input.svg b/devtools/client/themes/images/webconsole/input.svg
new file mode 100644
index 0000000000..7212818fb0
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/input.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path fill="context-fill" d="M1.07 1.32c.3-.3.77-.3 1.06 0l4.15 4.15a.75.75 0 0 1 0 1.06l-4.15 4.15a.75.75 0 1 1-1.06-1.06L4.69 6 1.07 2.38a.75.75 0 0 1 0-1.06zm5 0c.3-.3.77-.3 1.06 0l4.15 4.15a.75.75 0 0 1 0 1.06l-4.15 4.15a.75.75 0 1 1-1.06-1.06L9.69 6 6.07 2.38a.75.75 0 0 1 0-1.06z"/>
+</svg>
diff --git a/devtools/client/themes/images/webconsole/navigation.svg b/devtools/client/themes/images/webconsole/navigation.svg
new file mode 100644
index 0000000000..89fe50c7c4
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/navigation.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path fill="context-fill" 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 6zM1 4h10v1H1V4zM1 7h10v1H1V7z"/>
+  <path fill="context-fill" fill-rule="evenodd" d="M7.23 9.8C7.69 8.88 8 7.54 8 6s-.31-2.88-.77-3.8C6.73 1.23 6.25 1 6 1s-.74.23-1.23 1.2A8.74 8.74 0 0 0 4 6c0 1.54.31 2.88.77 3.8.5.97.98 1.2 1.23 1.2s.74-.23 1.23-1.2zM6 12c1.66 0 3-2.69 3-6S7.66 0 6 0 3 2.69 3 6s1.34 6 3 6z"/>
+</svg>
diff --git a/devtools/client/themes/images/webconsole/return.svg b/devtools/client/themes/images/webconsole/return.svg
new file mode 100644
index 0000000000..535c99ea3a
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/return.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12">
+  <path fill="context-fill" d="M6.68 1.32c.3.3.3.77 0 1.06L3.81 5.25h6.44a.75.75 0 0 1 0 1.5H3.81l2.87 2.87a.75.75 0 1 1-1.06 1.06L1.47 6.53a.75.75 0 0 1 0-1.06l4.15-4.15c.3-.3.77-.3 1.06 0z"/>
+</svg>
diff --git a/devtools/client/themes/images/webconsole/reverse-search.svg b/devtools/client/themes/images/webconsole/reverse-search.svg
new file mode 100644
index 0000000000..10207588e5
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/reverse-search.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 viewBox="0 0 16 16" fill="context-fill black" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 4C7 3.72386 6.77614 3.5 6.5 3.5C6.22386 3.5 6 3.72386 6 4V7.5C6 7.77614 6.22386 8 6.5 8H10C10.2761 8 10.5 7.77614 10.5 7.5C10.5 7.22386 10.2761 7 10 7H7V4Z"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 14C8.57497 14 10.0285 13.4799 11.1981 12.602C11.2228 12.6335 11.2496 12.6638 11.2786 12.6928L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L12.6928 11.2786C12.6638 11.2496 12.6335 11.2228 12.602 11.1981C13.4799 10.0285 14 8.57497 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM7 12C9.76143 12 12 9.76142 12 7C12 4.23858 9.76143 2 7 2C4.23858 2 2 4.23858 2 7C2 9.76142 4.23858 12 7 12Z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/webconsole/run.svg b/devtools/client/themes/images/webconsole/run.svg
new file mode 100644
index 0000000000..cfd078c21a
--- /dev/null
+++ b/devtools/client/themes/images/webconsole/run.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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+   <path fill="context-fill" d="M5 3v10l7-5-7-5zM4 3c0-.81.92-1.31 1.58-.84l7 5.03a1 1 0 0 1 0 1.62l-7 5.03C4.92 14.31 4 13.81 4 13V3z"/>
+</svg>
diff --git a/devtools/client/themes/inspector.css b/devtools/client/themes/inspector.css
new file mode 100644
index 0000000000..1ddd127ceb
--- /dev/null
+++ b/devtools/client/themes/inspector.css
@@ -0,0 +1,221 @@
+/* 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/. */
+
+:root {
+  --min-container-width: 300px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* Make sure to hide scroll bars for the parent window */
+window {
+  overflow: hidden;
+}
+
+/* The main Inspector panel container. */
+.inspector-responsive-container {
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* The main panel layout. This area consists of a toolbar, markup view
+  and breadcrumbs bar. */
+#inspector-main-content {
+  /* Subtract 1 pixel from the panel height. It's puzzling why this
+    is needed, but if not presented the entire Inspector panel
+    content jumps 1 pixel up when the Toolbox is opened. */
+  height: calc(100% - 1px);
+  /* This min-width avoids a visual glitch when moving the splitter quickly to the left.
+     See bug 1307408 comment #12. */
+  min-width: 125px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Inspector Panel Splitter */
+
+#inspector-splitter-box {
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+}
+
+/* Minimum dimensions for the Inspector splitter areas. */
+#inspector-splitter-box .uncontrolled,
+#inspector-splitter-box .controlled {
+  min-height: 50px;
+  min-width: 50px;
+  overflow-x: hidden;
+}
+
+/* Set a minimum width of 200px for tab content to avoid breaking the layout when resizing
+   the sidebar tab to small width. If a specific panel supports smaller width, this should
+   be overridden on a panel-by-panel basis */
+.inspector-tabpanel {
+  min-width: 200px;
+}
+
+#inspector-splitter-box .controlled.pane-collapsed {
+  visibility: collapse;
+}
+
+#inspector-splitter-box .sidebar-toggle::before {
+  background-image: url("chrome://devtools/skin/images/close-3-pane.svg");
+  transform: unset;
+}
+
+#inspector-splitter-box .sidebar-toggle.pane-collapsed::before {
+  background-image: url("chrome://devtools/skin/images/open-3-pane.svg");
+}
+
+/* Flip the icon horizontally when in RTL mode */
+#inspector-splitter-box .sidebar-toggle:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#inspector-searchlabel-container {
+  display: flex;
+}
+
+#inspector-searchlabel-container[hidden] {
+  display: none;
+}
+
+#inspector-searchlabel {
+  padding: 0 3px;
+}
+
+/* Add element toolbar button */
+#inspector-element-add-button::before {
+  background-image: url("chrome://devtools/skin/images/add.svg");
+  background-position: center;
+  background-size: 14px;
+  -moz-user-focus: normal;
+}
+
+/* Eyedropper toolbar button */
+
+#inspector-eyedropper-toggle {
+  /* Required to display tooltip when eyedropper is disabled in non-HTML documents */
+  pointer-events: auto;
+}
+
+#inspector-eyedropper-toggle::before {
+  background-image: url(images/command-eyedropper.svg);
+  background-position: center;
+  background-size: 14px;
+}
+
+#inspector-breadcrumbs-toolbar {
+  padding: 0px;
+  border-bottom-width: 0px;
+  border-top-width: 1px;
+  border-top-color: var(--theme-splitter-color);
+  /* Bug 1262668 - Use the same background as the body so the breadcrumbs toolbar doesn't
+     get mistaken as a splitter */
+  background-color: var(--theme-body-background);
+  display: block;
+  position: relative;
+}
+
+#inspector-breadcrumbs-toolbar,
+#inspector-breadcrumbs-toolbar * {
+  box-sizing: border-box;
+  direction: ltr;
+}
+
+#inspector-breadcrumbs {
+  display: flex;
+
+  /* Break out of the XUL flexbox, so the splitter can still shrink the
+     markup view even if the contents of the breadcrumbs are wider than
+     the new width. */
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+#inspector-breadcrumbs .scrollbutton-up,
+#inspector-breadcrumbs .scrollbutton-down {
+  flex: 0;
+  display: flex;
+  align-items: center;
+}
+
+#inspector-breadcrumbs .html-arrowscrollbox-inner {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+#inspector-breadcrumbs .breadcrumbs-widget-item {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+#inspector-rules-container,
+#inspector-sidebar-container {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+
+#inspector-rules-sidebar,
+#inspector-sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+/* Override `-moz-user-focus:ignore;` from toolkit/content/xul.css */
+.inspector-tabpanel > * {
+  -moz-user-focus: normal;
+}
+
+/* Markup Box */
+
+iframe {
+  border: 0;
+}
+
+#markup-box {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+#markup-box > iframe {
+  height: 100%;
+  width: 100%;
+}
+
+/* Extension Sidebar */
+.inspector-tabpanel.extension-sidebar {
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Used for both the computed view and the rule view, to truncate extremely
+long base64 URLs and other unexpectedly long text properties. */
+.propertyvalue-long-text {
+  /* Force inline-block to be able to set a max-width. */
+  display: inline-block;
+  /* Arbitrary max-width, this should allow the value to be inlined with the
+     property name in very wide containers */
+  max-width: 80%;
+  /* Add ellipsis. */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Introducing display: inline-block; shifts the vertical alignment, force to
+     align it to the parent's text */
+  vertical-align: text-top;
+  /* Force the long text to be rendered on a single line. */
+  white-space: nowrap;
+}
diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css
new file mode 100644
index 0000000000..34eebf45d6
--- /dev/null
+++ b/devtools/client/themes/layout.css
@@ -0,0 +1,736 @@
+/* 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/. */
+
+ :root {
+  --flex-basis-outline-border-color: var(--blue-40);
+  --flex-basis-outline-background-color: rgba(69, 161, 255, 0.25);
+  --flex-growing-delta-outline-background-color: rgba(221, 0, 169, 0.13);
+  --flex-shrinking-delta-outline-background-color: #E9E3FF;
+  --flex-min-max-properties-color: var(--purple-60);
+}
+
+:root.theme-dark {
+  --flex-basis-outline-border-color: rgba(10, 132, 255, 0.85);
+  --flex-basis-outline-background-color: rgba(10, 132, 255, 0.3);
+  --flex-growing-delta-outline-background-color: rgba(255, 26, 217, 0.25);
+  --flex-shrinking-delta-outline-background-color: #322952;
+  --flex-min-max-properties-color: var(--theme-highlight-purple);
+}
+
+.layout-container {
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: auto;
+  min-width: 200px;
+}
+
+.layout-container .accordion ._content {
+  padding: 0;
+}
+
+#layout-container .accordion ._header {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+/**
+ * Common styles for the layout container
+ */
+
+.layout-content ul {
+  list-style: none;
+}
+
+.layout-content li {
+  padding: 3px 0;
+  user-select: none;
+}
+
+.layout-content input {
+  margin-inline-end: 7px;
+  vertical-align: middle;
+}
+
+.layout-content label {
+  margin-inline-start: -3px;
+}
+
+.layout-content .open-inspector {
+  vertical-align: middle;
+}
+
+.layout-color-swatch {
+  width: 12px;
+  height: 12px;
+  margin-inline-start: -1px;
+  border: 1px solid var(--theme-highlight-gray);
+  border-radius: 50%;
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.layout-color-value {
+  display: none;
+}
+
+/* Layout Properties: Common styles used for the Box Model and Flexbox Properties */
+
+.layout-properties-header {
+  font-size: 12px;
+  padding: 2px 3px;
+  user-select: none;
+}
+
+.layout-properties-expander {
+  vertical-align: middle;
+  display: inline-block;
+  margin-inline: 2px 1px;
+}
+
+.layout-properties-wrapper {
+  column-width: 250px;
+  column-gap: 20px;
+  column-rule: 1px solid var(--theme-splitter-color);
+}
+
+.layout-properties-wrapper .computed-property-view {
+  padding-inline-start: 20px;
+}
+
+.layout-properties-wrapper .computed-property-name-container {
+  flex: 1;
+}
+
+.layout-properties-wrapper .computed-property-value-container {
+  flex: 1;
+  display: block;
+}
+
+/**
+ * Flex Container
+ */
+
+#layout-flexbox-container {
+  display: flex;
+  flex-direction: column;
+}
+
+/**
+ * Header
+ */
+
+.flex-header {
+  display: flex;
+  align-items: center;
+  padding: 3px;
+  border-block-end: 1px solid var(--theme-splitter-color);
+}
+
+.flex-header-button-prev {
+  cursor: pointer;
+}
+
+.flex-header-button-prev::before {
+  background-image: url("chrome://devtools/skin/images/arrowhead-left.svg");
+  background-size: 16px;
+}
+
+html[dir="rtl"] .flex-header-button-prev::before {
+  background-image: url("chrome://devtools/skin/images/arrowhead-right.svg");
+}
+
+.flex-header-content {
+  display: flex;
+  flex: 1;
+  padding: 2px 0;
+  padding-inline-start: 20px;
+  user-select: none;
+}
+
+.flex-header-content:not(.flex-item-shown) {
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.flex-header-content:not(.flex-item-shown) .objectBox {
+  max-width: calc(100% - 20px);
+  margin-inline-end: 5px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.flex-header-content.flex-item-shown {
+  justify-content: center;
+  padding: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.flex-header-container-properties {
+  display: flex;
+}
+
+.flex-header-container-properties .inspector-badge:first-child {
+  margin-inline-start: 0;
+}
+
+.flex-header-container-label,
+.flex-header-container-properties {
+  display: flex;
+  padding: 3px 0;
+}
+
+/**
+ * Flex Item List
+ */
+
+.flex-item-list {
+  font-size: 12px;
+  margin: 0;
+  padding-block: 5px;
+  overflow: hidden;
+}
+
+.flex-item-list .flex-item-list-header {
+  color: var(--theme-comment);
+  padding-inline-start: 23px;
+  margin-bottom: 4px;
+  user-select: none;
+}
+
+.flex-item-list .devtools-button {
+  background-color: transparent;
+  cursor: pointer;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  inline-size: 100%;
+  text-align: start;
+  height: 24px;
+  margin: 0;
+  padding-inline: 28px 16px;
+  position: relative;
+}
+
+.flex-item-list .devtools-button::after {
+  content: "";
+  background-image: url(chrome://devtools/skin/images/arrowhead-right.svg);
+  background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: center -1px;
+  fill: var(--theme-comment);
+  -moz-context-properties: fill;
+  position: absolute;
+  right: 7px;
+  width: 16px;
+  height: 16px;
+}
+
+html[dir="rtl"] .flex-item-list .devtools-button::after {
+  background-image: url(chrome://devtools/skin/images/arrowhead-left.svg);
+  right: unset;
+  left: 7px;
+}
+
+.flex-item-list .flex-item-index {
+  font-size: 12px;
+  font-weight: bold;
+  float: inline-start;
+}
+
+.flex-item-list .objectBox-node {
+  padding-inline-start: 8px;
+  vertical-align: middle;
+}
+
+/**
+ * Flex Item Selector
+ */
+
+#flex-item-selector {
+  cursor: pointer;
+  font-size: 12px;
+}
+
+/**
+ * Flex Item Sizing Outline
+ */
+
+.flex-outline-container {
+  display: flex;
+  justify-content: center;
+  /* The flex outline is always drawn in ltr. Whether the UI of DevTools is in RTL or some
+     other writing mode doesn't have an impact on whether the outline should face left,
+     right, top or bottom. This should only be dictated by which direction does the flex
+     item currently face in the page. */
+  direction: ltr;
+}
+
+.flex-outline {
+  display: grid;
+  margin: 2em 0;
+  grid-auto-rows: 35px;
+  flex-basis: 80%;
+  max-width: 450px;
+}
+
+.flex-outline > * {
+  /* To make sure very small distances on the outline still have enough room to be
+     represented and to avoid overlapping labels, we make sure each grid item is at least
+     10px wide. This might sometimes render the outline in a different way than the item
+     but the information shown will still be correct, and will be more easily visible */
+  min-width: 10px;
+}
+
+.flex-outline.vertical-tb {
+  transform: translate(50%, -2em) rotate(.25turn);
+}
+
+.flex-outline.vertical-bt {
+  transform:translate(50%, 12em) rotate(0.75turn);
+}
+
+.flex-outline.vertical-tb,
+.flex-outline.vertical-bt {
+  transform-origin: center left;
+  flex-basis: 150px;
+  margin-bottom: 120px;
+}
+
+.flex-outline-final,
+.flex-outline-basis,
+.flex-outline-delta {
+  grid-row: 1;
+}
+
+.flex-outline-final {
+  border: 2px solid currentColor;
+  position: relative;
+  grid-column: final-start / final-end;
+}
+
+.flex-outline-final.clamped::after {
+  content: "";
+  background-image: url(chrome://devtools/skin/images/lock.svg);
+  background-size: 16px;
+  background-repeat: no-repeat;
+  background-position: center 1px;
+  fill: var(--flex-min-max-properties-color);
+  -moz-context-properties: fill;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: -10px;
+  top: 6px;
+  /* Making sure the icon is visible against any background by creating a plain background
+     around its shape, using a drop-shadow filter. */
+  filter:
+    drop-shadow(1px 0px 0px var(--theme-body-background))
+    drop-shadow(0px 1px 0px var(--theme-body-background))
+    drop-shadow(-1px 0px 0px var(--theme-body-background))
+    drop-shadow(0px -1px 0px var(--theme-body-background));
+}
+
+.flex-outline.vertical-tb .flex-outline-final.clamped::after {
+  transform: rotate(-.25turn);
+}
+
+.flex-outline.vertical-bt .flex-outline-final.clamped::after {
+  transform: rotate(-.75turn);
+}
+
+.flex-outline-basis {
+  position: relative;
+  border: 3px dotted var(--flex-basis-outline-border-color);
+  margin: 2px;
+  grid-column: basis-start / basis-end;
+}
+
+/* Fills the basis outline with a blue background color that is contained inside the
+   dotted border. This gives the impression the dotted border alternates between
+   white and blue. */
+.flex-outline-basis::before {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  background-color: var(--flex-basis-outline-background-color);
+}
+
+.flex-outline-basis.zero-basis {
+  border-width: 0 0 0 3px;
+}
+
+.flex-outline-delta {
+  grid-column: delta-start / delta-end;
+  position: relative;
+}
+
+.flex-outline.growing .flex-outline-delta {
+  background-color: var(--flex-growing-delta-outline-background-color);
+  right: 2px;
+}
+
+.flex-outline.shrinking .flex-outline-delta {
+  background-color: var(--flex-shrinking-delta-outline-background-color);
+  margin: 5px 5px 5px 0;
+}
+
+.flex-outline-delta::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  top: calc(50% - .5px);
+  height: 1px;
+  background: var(--theme-highlight-red);
+}
+
+.flex-outline-delta::after {
+  content: "";
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  top: 50%;
+  border: 1px solid var(--theme-highlight-red);
+}
+
+.flex-outline.growing .flex-outline-delta:after {
+  right: 2px;
+  border-width: 1px 1px 0 0;
+  transform-origin: top right;
+  transform: rotate(.125turn);
+}
+
+.flex-outline.shrinking .flex-outline-delta:after {
+  left: 2px;
+  border-width: 1px 0 0 1px;
+  transform-origin: top left;
+  transform: rotate(-.125turn);
+}
+
+.flex-outline-point {
+  position: relative;
+  user-select: none;
+  grid-row: 1;
+  display: grid;
+}
+
+.flex-outline.horizontal-rl .flex-outline-point {
+  justify-self: start;
+}
+
+.flex-outline.vertical-bt .flex-outline-point {
+  transform: rotate(180deg);
+  justify-content: end;
+}
+
+.flex-outline-point.basis,
+.flex-outline-point.basisfinal,
+.flex-outline.horizontal-rl .flex-outline-point.basis,
+.flex-outline.horizontal-rl .flex-outline-point.basisfinal {
+  grid-column-end: basis-end;
+  justify-self: end;
+  color: var(--theme-highlight-blue);
+}
+
+.flex-outline.shrinking .flex-outline-point.basis {
+  grid-column-start: basis-end;
+  justify-self: start;
+}
+
+.flex-outline.horizontal-rl.shrinking .flex-outline-point.basis {
+  grid-column-start: basis-start;
+  justify-self: unset;
+}
+
+.flex-outline-point.final {
+  grid-column-start: final-end;
+  left: -1px;
+}
+
+.flex-outline.shrinking .flex-outline-point.final {
+  grid-column-end: final-end;
+  grid-column-start: unset;
+  justify-self: end;
+}
+
+.flex-outline-point.min,
+.flex-outline-point.max {
+  color: var(--flex-min-max-properties-color);
+}
+
+.flex-outline-point.min {
+  grid-column: min;
+  place-self: end;
+  left: -4px;
+}
+
+.flex-outline.shrinking .flex-outline-point.min {
+  place-self: end start;
+  left: -1px;
+}
+
+.flex-outline-point.max {
+  grid-column: max;
+  align-self: end;
+  left: -1px;
+}
+
+.flex-outline-point::before {
+  content: attr(data-label);
+  display: block;
+  position: relative;
+  padding: 0 3px;
+  height: 10px;
+  border-color: currentColor;
+  border-style: solid;
+  border-width: 0;
+  line-height: 1;
+}
+
+.flex-outline.vertical-tb .flex-outline-point::before,
+.flex-outline.vertical-bt .flex-outline-point::before {
+  padding: 0;
+  writing-mode: sideways-lr;
+}
+
+.flex-outline-point.basis::before,
+.flex-outline-point.final::before,
+.flex-outline-point.basisfinal::before {
+  top: -12px;
+}
+
+.flex-outline-point.min::before,
+.flex-outline-point.max::before {
+  bottom: -12px;
+}
+
+.flex-outline.horizontal-rl .flex-outline-point.min::before,
+.flex-outline.horizontal-rl .flex-outline-point.max::before,
+.flex-outline.vertical-bt .flex-outline-point.min::before,
+.flex-outline.vertical-bt .flex-outline-point.max::before {
+  bottom: -37px;
+}
+
+.flex-outline.vertical-tb .flex-outline-point.max::before,
+.flex-outline.vertical-tb .flex-outline-point.min::before,
+.flex-outline.vertical-bt .flex-outline-point.max::before,
+.flex-outline.vertical-bt .flex-outline-point.min::before {
+  text-indent: -12px;
+}
+
+.flex-outline-point.final::before,
+.flex-outline-point.min::before,
+.flex-outline-point.max::before,
+.flex-outline.shrinking .flex-outline-point.basis::before,
+.flex-outline.horizontal-rl .flex-outline-point.basis::before,
+.flex-outline.horizontal-rl .flex-outline-point.basisfinal::before,
+.flex-outline.horizontal-rl.shrinking .flex-outline-point.final::before,
+.flex-outline.vertical-bt .flex-outline-point.basis::before,
+.flex-outline.vertical-bt .flex-outline-point.basisfinal::before,
+.flex-outline.vertical-bt.shrinking .flex-outline-point.final::before {
+  border-left-width: 1px;
+  border-right-width: 0;
+}
+
+.flex-outline-point.basis::before,
+.flex-outline.shrinking .flex-outline-point.final::before,
+.flex-outline-point.basisfinal::before,
+.flex-outline.horizontal-rl .flex-outline-point.final::before,
+.flex-outline.horizontal-rl .flex-outline-point.min::before,
+.flex-outline.horizontal-rl .flex-outline-point.max::before,
+.flex-outline.vertical-bt.shrinking .flex-outline-point.basis::before,
+.flex-outline.vertical-bt .flex-outline-point.final::before,
+.flex-outline.vertical-bt .flex-outline-point.min::before,
+.flex-outline.vertical-bt .flex-outline-point.max::before {
+  border-right-width: 1px;
+  border-left-width: 0;
+}
+
+.flex-outline.horizontal-rl,
+.flex-outline.horizontal-rl .flex-outline-point,
+.flex-outline.horizontal-rl .flex-outline-final.clamped::after {
+  transform: rotate(.5turn);
+}
+
+/**
+ * Flex Item Sizing Properties
+ */
+
+.flex-item-sizing {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.flex-item-sizing .section {
+  --padding: 10px;
+  padding: var(--padding);
+  border-block-start: 1px solid var(--theme-splitter-color);
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  grid-column-gap: var(--padding);
+}
+
+.flex-item-sizing .section:first-child {
+  border: 0;
+}
+
+.flex-item-sizing .name {
+  font-weight: 600;
+  grid-column: 1;
+  display: grid;
+  grid-template-columns: max-content max-content;
+  gap: .5em;
+}
+
+.flex-item-sizing .flexibility .name {
+  color: var(--theme-highlight-red);
+}
+
+.flex-item-sizing .base .name {
+  color: var(--theme-highlight-blue);
+}
+
+.flex-item-sizing .min .name,
+.flex-item-sizing .max .name {
+  color: var(--flex-min-max-properties-color);
+}
+
+.flex-item-sizing .value {
+  text-align: end;
+  font-weight: 600;
+  direction: ltr;
+}
+
+.flex-item-sizing .value .unit {
+  color: var(--theme-comment);
+  font-weight: normal;
+}
+
+.flex-item-sizing .css-property-link {
+  font-weight: normal;
+  margin-inline-start: .5em;
+}
+
+.flex-item-sizing .reasons,
+.flex-item-sizing .reasons li {
+  grid-column: 1 / 3;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/**
+ * Grid Container
+ */
+
+#layout-grid-container {
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+}
+
+.grid-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 auto;
+  min-width: 140px;
+  margin-inline-start: 16px;
+}
+
+.grid-container:first-child {
+  margin-bottom: 10px;
+}
+
+.grid-container > span {
+  font-weight: 600;
+  margin-bottom: 5px;
+  pointer-events: none;
+}
+
+.grid-container > ul {
+  margin: 0;
+  padding: 0;
+}
+
+#grid-list ul {
+  padding-inline-start: 20px;
+}
+
+/**
+ * Grid Content
+ */
+
+.grid-content {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+  padding: 5px 0;
+}
+
+/**
+ * Grid Outline
+ */
+
+.grid-outline-container {
+  margin: 5px;
+}
+
+.grid-outline-container svg {
+  overflow: visible;
+}
+
+.grid-outline-border {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 0.75;
+  vector-effect: non-scaling-stroke;
+}
+
+.grid-outline-cell {
+  pointer-events: all;
+  stroke: currentColor;
+  stroke-dasharray: 0.5, 2;
+  vector-effect: non-scaling-stroke;
+}
+
+.grid-outline-cell:hover {
+  opacity: 0.45;
+  fill: currentColor;
+}
+
+.grid-outline-line {
+  opacity: 0;
+  stroke-width: 10;
+}
+
+.grid-outline-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--theme-graphs-full-red);
+}
+
+.grid-outline-text-icon {
+  background: url("chrome://devtools/skin/images/sad-face.svg");
+  margin-inline-end: 5px;
+  width: 16px;
+  height: 16px;
+}
+
+/**
+ * Settings Item
+ */
+
+.grid-settings-item label {
+  line-height: 16px;
+}
diff --git a/devtools/client/themes/light-theme.css b/devtools/client/themes/light-theme.css
new file mode 100644
index 0000000000..b61a5e2a05
--- /dev/null
+++ b/devtools/client/themes/light-theme.css
@@ -0,0 +1,250 @@
+/* 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/. */
+
+@import url(chrome://devtools/skin/variables.css);
+@import url(chrome://devtools/skin/common.css);
+@import url(chrome://devtools/skin/toolbars.css);
+@import url(chrome://devtools/skin/tooltips.css);
+
+body {
+  margin: 0;
+}
+
+.theme-body {
+  background: var(--theme-body-background);
+  color: var(--theme-body-color);
+}
+
+.theme-sidebar {
+  background: var(--theme-sidebar-background);
+  color: var(--theme-body-color);
+}
+
+.theme-selected,
+.CodeMirror-hint-active {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.variable-or-property:not([overridden])[changed] {
+  background: var(--theme-contrast-background);
+}
+
+.theme-link,
+.cm-s-mozilla .cm-link,
+.CodeMirror-Tern-type {
+  color: var(--theme-comment);
+}
+
+/*
+ * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
+ * failures in debug builds.
+ */
+.theme-link:visited,
+.cm-s-mozilla .cm-link:visited {
+  color: var(--theme-highlight-blue);
+}
+
+.theme-comment,
+.cm-s-mozilla .cm-meta,
+.cm-s-mozilla .cm-hr,
+.cm-s-mozilla .cm-comment,
+.variable-or-property .token-undefined,
+.variable-or-property .token-null,
+.CodeMirror-Tern-completion-unknown:before {
+  color: var(--theme-comment);
+}
+
+.cm-s-mozilla .cm-unused-line {
+  text-decoration: line-through;
+  text-decoration-color: var(--theme-highlight-bluegrey);
+}
+
+.cm-s-mozilla .cm-executed-line {
+  background-color: #fcfffc;
+}
+
+.cm-s-mozilla .cm-number,
+.variable-or-property .token-number,
+.variable-or-property[return] > .title > .name,
+.variable-or-property[scope] > .title > .name {
+  color: var(--theme-highlight-purple);
+}
+
+.CodeMirror-Tern-completion-number:before {
+  background-color: hsl(72,100%,27%);
+}
+
+.theme-fg-color1,
+.cm-s-mozilla .cm-attribute,
+.cm-s-mozilla .cm-builtin,
+.cm-s-mozilla .cm-keyword,
+.variables-view-variable > .title > .name {
+  color: var(--theme-highlight-red);
+}
+
+.cm-s-mozilla .cm-def,
+.cm-s-mozilla .cm-variable-2 {
+  color: var(--blue-55);
+}
+
+.cm-s-mozilla .cm-variable {
+  color: var(--purple-60);
+}
+
+.cm-s-mozilla .cm-property {
+  color: var(--theme-highlight-green);
+}
+
+.CodeMirror-Tern-completion-object:before {
+  background-color: hsl(208,56%,40%);
+}
+
+.theme-fg-color3,
+.cm-s-mozilla .cm-tag,
+.cm-s-mozilla .cm-header,
+.cm-s-mozilla .cm-bracket,
+.cm-s-mozilla .cm-qualifier,
+.variables-view-property > .title > .name {
+  color: var(--theme-highlight-blue);
+}
+
+.CodeMirror-Tern-completion-array:before {
+  background-color: var(--theme-highlight-bluegrey);
+}
+
+.theme-fg-color2,
+.cm-s-mozilla .cm-string,
+.cm-s-mozilla .cm-string-2,
+.variable-or-property .token-string,
+.CodeMirror-Tern-farg {
+  color: var(--theme-highlight-purple);
+}
+
+.CodeMirror-Tern-completion-string:before,
+.CodeMirror-Tern-completion-fn:before {
+  background-color: hsl(24,85%,39%);
+}
+
+.cm-s-mozilla .cm-atom,
+.cm-s-mozilla .cm-quote,
+.cm-s-mozilla .cm-error,
+.variable-or-property .token-boolean,
+.variable-or-property .token-domnode,
+.variable-or-property[exception] > .title > .name {
+  color: var(--theme-highlight-red);
+}
+
+.CodeMirror-Tern-completion-bool:before {
+  background-color: #bf5656;
+}
+
+.variable-or-property .token-domnode {
+  font-weight: bold;
+}
+
+.theme-toolbar,
+.devtools-toolbar,
+.devtools-sidebar-tabs tabs,
+.devtools-sidebar-alltabs,
+.cm-s-mozilla .CodeMirror-dialog { /* General toolbar styling */
+  color: var(--theme-body-color);
+  background-color: var(--theme-toolbar-background);
+  border-color: var(--theme-splitter-color);
+}
+
+.theme-bg-contrast {
+  background: var(--theme-contrast-background);
+}
+
+.theme-fg-contrast {
+  color: var(--theme-contrast-color);
+}
+
+.ruleview-swatch,
+.computed-colorswatch {
+  box-shadow: 0 0 0 1px #c4c4c4;
+}
+
+/* CodeMirror specific styles.
+ * Best effort to match the existing theme, some of the colors
+ * are duplicated here to prevent weirdness in the main theme. */
+
+.CodeMirror.cm-s-mozilla { /* Inherit platform specific font sizing and styles */
+  font-family: inherit;
+  font-size: inherit;
+  background: transparent;
+}
+
+.CodeMirror.cm-s-mozilla  pre,
+.CodeMirror.cm-s-mozilla  pre.CodeMirror-line,
+.CodeMirror.cm-s-mozilla  pre.CodeMirror-line-like,
+.cm-s-mozilla .cm-variable-3,
+.cm-s-mozilla .cm-operator,
+.cm-s-mozilla .cm-special {
+  color: var(--theme-body-color);
+}
+
+.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor:not(.CodeMirror-secondarycursor) {
+  border-left: solid 1px black;
+}
+
+.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
+  background: rgb(185, 215, 253);
+}
+
+.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
+  background: rgb(210, 210, 210);
+}
+
+.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
+  background: rgba(185, 215, 253, .35);
+}
+
+div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
+  outline: solid 1px rgba(0, 0, 0, .25);
+  color: black;
+}
+
+/* Highlight for a line that contains an error. */
+div.CodeMirror div.error-line {
+  background: rgba(255,0,0,0.2);
+}
+
+/* Generic highlighted text */
+div.CodeMirror span.marked-text {
+  background: rgba(255,255,0,0.2);
+  border: 1px dashed rgba(192,192,0,0.6);
+  margin-inline-start: -1px;
+  margin-inline-end: -1px;
+}
+
+.cm-s-mozilla .empty-line .CodeMirror-linenumber {
+  color: var(--grey-40);
+}
+
+/* Blackboxing lines */
+.CodeMirror-lines .blackboxed-line :is(span, .cm-comment, .CodeMirror-gutter-elt) {
+  color: #806414cc;
+}
+
+/* Highlight for evaluating current statement. */
+div.CodeMirror span.eval-text {
+  background-color: #ccd;
+}
+
+.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
+  color: var(--grey-50);
+}
+
+.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
+  border-right-color: var(--theme-splitter-color);
+  background-color: var(--theme-sidebar-background);
+}
+
+.CodeMirror-hints,
+.CodeMirror-Tern-tooltip {
+  box-shadow: 0 0 4px rgba(128, 128, 128, .5);
+  background-color: var(--theme-sidebar-background);
+}
diff --git a/devtools/client/themes/markup.css b/devtools/client/themes/markup.css
new file mode 100644
index 0000000000..dfddc3c17c
--- /dev/null
+++ b/devtools/client/themes/markup.css
@@ -0,0 +1,449 @@
+/* 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/. */
+
+:root {
+  --markup-hidden-attr-name-color: var(--grey-43);
+  --markup-hidden-attr-value-color: var(--grey-55);
+  --markup-hidden-punctuation-color: var(--grey-43);
+  --markup-pseudoclass-disk-color: #e9c600;
+  --markup-hidden-tag-color: var(--grey-50);
+  --markup-outline: var(--theme-splitter-color);
+  --markup-drag-line: var(--grey-40);
+  --markup-drop-line: var(--blue-55);
+  --markup-overflow-causing-background-color: rgba(128, 0, 215, 0.15);
+}
+
+.theme-dark:root {
+  --markup-hidden-attr-name-color: #787878;
+  --markup-hidden-attr-value-color: #a4a4a4;
+  --markup-hidden-punctuation-color: #787878;
+  --markup-hidden-tag-color: var(--grey-45);
+  --markup-outline: var(--theme-selection-background);
+  --markup-drag-line: var(--grey-55);
+  --markup-drop-line: var(--blue-50);
+  --markup-overflow-causing-background-color: rgba(148, 0, 255, 0.38);
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+:root {
+  -moz-control-character-visibility: visible;
+}
+
+body {
+  user-select: none;
+}
+
+/* Force height and width (possibly overflowing) from inline elements.
+ * This allows long overflows of text or input fields to still be styled with
+ * the container, rather than the background disappearing when scrolling */
+#root {
+  float: left; /* The markup view should always be LTR */
+  min-width: 100%;
+  /* Reserve extra space (in addition to the indent size) for DOM mutation
+   * breakpoint and pseudo icons. */
+  padding-left: 6px;
+  box-sizing: border-box;
+}
+
+/* Reset the global rotation of the icon done for RTL layout.
+   Markup view is always LTR */
+#root .theme-twisty:not(.open):dir(rtl),
+#root .theme-twisty:not([open]):-moz-locale-dir(rtl) {
+  transform: rotate(-90deg);
+}
+
+/* Don't display a parent-child outline for the root elements */
+#root > ul > li > .children {
+  background: none;
+}
+
+html.dragging {
+  overflow-x: hidden;
+}
+
+body.dragging .tag-line {
+  cursor: grabbing;
+}
+
+#root-wrapper:after {
+   content: "";
+   display: block;
+   clear: both;
+   position:relative;
+}
+
+.html-editor {
+  display: none;
+  position: absolute;
+  z-index: 2;
+
+  /* Use the same margin/padding trick used by .child tags to ensure that
+   * the editor covers up any content to the left (including expander arrows
+   * and hover effects). */
+  margin-left: -1000em;
+  padding-left: 1000em;
+}
+
+.html-editor-inner {
+  border: solid .1px;
+  flex: 1 1 auto;
+
+  /* Keep the editor away from the markup view floating scrollbars */
+  margin-inline-end: 12px;
+}
+
+.html-editor iframe {
+  height: 100%;
+  width: 100%;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.children {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+/* Tags are organized in a UL/LI tree and indented thanks to a left padding.
+ * A very large padding is used in combination with a slightly smaller margin
+ * to make sure childs actually span from edge-to-edge. */
+.child {
+  margin-left: -10000px;
+  padding-left: 10011px;
+}
+
+/* Normally this element takes space in the layout even if it's position: relative
+ * by adding height: 0 we let surrounding elements to fill the blank space */
+.child.dragging {
+  position: relative;
+  pointer-events: none;
+  opacity: 0.7;
+  z-index: 1;
+  height: 0;
+}
+
+/* Indicates a tag-line in the markup-view as being an active drop target by
+ * drawing a horizontal line where the dragged element would be inserted if
+ * dropped here */
+.tag-line.drop-target::before,
+.tag-line.drag-target::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  height: 2px;
+  /* Offset these by 1000px to make sure they cover the full width of the view */
+  width: calc(100% + 1000px);
+  left: -1000px;
+  background-color: var(--markup-drag-line);
+}
+
+.tag-line.drop-target::before {
+  background-color: var(--markup-drop-line);
+}
+
+/* In case the indicator is put on the closing .tag-line, the indentation level
+ * will become misleading, so we push it forward to match the indentation level */
+ul.children + .tag-line::before {
+  margin-left: 14px;
+}
+
+/* A tag line should have a height of 16px, with a line-height of 14px,
+ * (assuming a font-size of 11px). */
+.tag-line {
+  font-size: var(--theme-code-font-size);
+  min-height: 1.2727em;
+  line-height: 1.2727em;
+  padding-block: 1px;
+  position: relative;
+  cursor: default;
+}
+
+.tag-line[selected] + .children,
+.tag-line[selected] ~ .tag-line {
+  background-image: linear-gradient(to top, var(--markup-outline), var(--markup-outline));
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-size: 1.5px 100%;
+  padding-left: 8px;
+  margin-left: -8px;
+}
+
+.tag-line[selected] + .children {
+  background-position-y: 2px;
+}
+
+.tag-line[selected] ~ .tag-line {
+  background-position-y: -2px;
+  /* Unset transition-property to prevent the markup outline from horizontal shifting */
+  transition-property: none;
+}
+
+/**
+ * Positioning the mutation marker on the viewport's left edge:
+ * - left: walk back the indentation level up
+ * - margin-left: walk back the #root's 6px padding-left
+ *   (plus hide the leftmost 2px of the icon outside the viewport)
+ */
+.markup-tag-mutation-marker {
+  display: none;
+  position: absolute;
+  top: 2px;
+  left: calc(var(--markup-level, 1) * -11px);
+  margin-left: -8px;
+  height: 12px;
+  width: 12px;
+  background-image: url(chrome://devtools/content/debugger/images/markup-breakpoint.svg);
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  background-position: right center;
+  -moz-context-properties: fill, stroke;
+  fill: var(--blue-50);
+  fill-opacity: 1;
+  opacity: 1;
+  stroke: none;
+  z-index: 2;
+}
+
+.markup-tag-mutation-marker.has-mutations {
+  display: block;
+}
+
+.markup-tag-mutation-marker.has-mutations.mutation-breakpoint-disabled {
+  opacity: 0.6;
+}
+
+.tag-line[selected] .markup-tag-mutation-marker.mutation-breakpoint-disabled {
+  fill: #fff;
+  stroke: none;
+}
+
+.tag-line[selected] .markup-tag-mutation-marker {
+  stroke: #fff;
+}
+
+.html-editor-container {
+  position: relative;
+  min-height: 200px;
+}
+
+/* This extra element placed in each tag is positioned absolutely to cover the
+ * whole tag line and is used for background styling (when a selection is made
+ * or when the tag is flashing) */
+.tag-line .tag-state {
+  position: absolute;
+  left: -1000em;
+  right: 0;
+  top: 0;
+  height: 100%;
+  z-index: 0;
+}
+
+.tag-line .tag-hover:not(.theme-selected) {
+  background: var(--theme-selection-background-hover);
+  z-index: -1;
+}
+
+.expander {
+  display: inline-block;
+  vertical-align: top;
+  width: 14px;
+  height: 16px;
+  margin: -1px 0 -1px -14px;
+  /* Make sure the expander still appears above the tag-state */
+  position: relative;
+  z-index: 1;
+}
+
+.child.collapsed .child, .child.collapsed .children {
+  display: none;
+}
+
+.child > .tag-line:first-child .close {
+  display: none;
+}
+
+.child.collapsed > .tag-line:first-child .close {
+  display: inline;
+}
+
+.child.collapsed > .tag-line ~ .tag-line {
+  display: none;
+}
+
+.child.collapsed .close {
+  display: inline;
+}
+
+.expandable.collapsed .markup-expand-badge {
+  cursor: pointer;
+  display: inline-block;
+  vertical-align: top;
+  box-sizing: border-box;
+  height: 16px;
+  margin: -1px 0;
+  padding: 3px 2px;
+}
+
+.expandable.collapsed .markup-expand-badge::before {
+  /* Display an ellipsis character in collapsed nodes that can be expanded. */
+  content: "";
+  background-color: var(--badge-interactive-background-color);
+  background-image: url(chrome://devtools/skin/images/more.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 8px;
+  border: 1px solid var(--badge-border-color);
+  color: var(--badge-color);
+  fill: var(--badge-interactive-color);
+  display: block;
+  width: 12px;
+  height: 8px;
+  line-height: 8px;
+  border-radius: 3px;
+  -moz-context-properties: fill;
+}
+
+.expandable.collapsed .markup-expand-badge:focus::before,
+.expandable.collapsed .markup-expand-badge:hover::before {
+  background-color: var(--badge-hover-background-color);
+}
+
+/* Hide HTML void elements (img, hr, br, …) closing tag when the element is not
+ * expanded (it can be if it has pseudo-elements attached) */
+.child.collapsed > .tag-line .void-element .close {
+  display: none;
+}
+
+.tag-line .tag-state.overflow-causing-highlighted:not(.theme-selected) {
+  background-color: var(--markup-overflow-causing-background-color);
+}
+
+.closing-bracket {
+  pointer-events: none;
+}
+
+.newattr {
+  margin-right: -13px;
+}
+
+.newattr:before {
+  content: "\00a0\00a0";
+}
+
+.attr-value .link {
+  text-decoration: underline;
+}
+
+.newattr:focus {
+  margin-right: 0;
+}
+
+.flash-out {
+  transition: background,color .5s;
+}
+
+.editor {
+  /* Make sure the editor still appears above the tag-state */
+  position: relative;
+  z-index: 1;
+}
+
+.editor.comment:not(.doctype) {
+  color: var(--theme-highlight-green);
+}
+
+.editor.text {
+  display: inline-block;
+}
+
+.editor.text pre,
+.editor.comment pre {
+  font: inherit;
+}
+
+.theme-dark .editor.text pre {
+  color: var(--theme-text-color-strong);
+}
+
+.more-nodes {
+  padding-left: 16px;
+}
+
+.styleinspector-propertyeditor {
+  vertical-align: top;
+  margin: -1px 0;
+  border: 1px solid #CCC;
+}
+
+.reveal-link {
+  cursor: pointer;
+  background: url("chrome://devtools/skin/images/reveal.svg") no-repeat;
+  display: inline-block;
+  width: 16px;
+  height: 8px;
+
+  -moz-context-properties: stroke;
+  stroke: currentColor;
+}
+
+/* Draw a circle next to nodes that have a pseudo class lock.
+   Center vertically with the 1.4em line height on .tag-line */
+.child.pseudoclass-locked::before {
+  content: "";
+  background: var(--markup-pseudoclass-disk-color);
+  border-radius: 50%;
+  width: 6px;
+  height: 6px;
+  margin-top: 5px;
+  left: 8px;
+  position: absolute;
+  z-index: 1;
+}
+
+.not-displayed {
+  color: var(--markup-hidden-punctuation-color);
+}
+
+.not-displayed .attr-name {
+  color: var(--markup-hidden-attr-name-color);
+}
+
+.not-displayed .attr-value {
+  color: var(--markup-hidden-attr-value-color);
+}
+
+.not-displayed .tag {
+  color: var(--markup-hidden-tag-color);
+}
+
+/* Selected nodes in the tree should have light selected text.
+   theme-selected doesn't work in this case since the text is a
+   sibling of the class, not a child. */
+.theme-selected ~ .editor,
+.theme-selected ~ .editor.comment,
+.theme-selected ~ .editor .tag,
+.theme-selected ~ .editor .theme-fg-color1,
+.theme-selected ~ .editor .theme-fg-color2,
+.theme-selected ~ .editor .theme-fg-color3 {
+  color: var(--theme-selection-color);
+}
+
+/* Selected nodes being flashed in the tree should have dark selected text. Here we target
+   nodes with theme-selected text colors and apply a dark, accessible text color for when
+   the yellow flashing background is applied. */
+.theme-selected.theme-bg-contrast ~ .editor,
+.theme-selected ~ .editor .theme-fg-contrast {
+  color: var(--theme-contrast-color);
+}
+
+/* Applicable to the DOCTYPE */
+.doctype {
+  font-style: italic;
+}
diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css
new file mode 100644
index 0000000000..3dbdff6725
--- /dev/null
+++ b/devtools/client/themes/memory.css
@@ -0,0 +1,649 @@
+/* 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/. */
+
+/* CSS Variables specific to this panel that aren't defined by the themes */
+.theme-dark {
+  --cell-border-color: rgba(255,255,255,0.15);
+  --row-alt-background-color: rgba(86, 117, 185, 0.15);
+  --row-hover-background-color: rgba(86, 117, 185, 0.25);
+  --link-color: var(--blue-40);
+  --link-color-active: var(--blue-30);
+}
+
+.theme-light {
+  --cell-border-color: rgba(0,0,0,0.15);
+  --row-alt-background-color: rgba(76,158,217,0.1);
+  --row-hover-background-color: rgba(76,158,217,0.2);
+  --link-color: var(--blue-60);
+  --link-color-active: var(--blue-70);
+}
+
+html, body, #app, #memory-tool {
+  height: 100%;
+}
+
+#memory-tool {
+  /**
+   * Flex: contains two children: .devtools-toolbar and #memory-tool-container,
+   * which need to be laid out vertically. The toolbar has a fixed height and
+   * the container needs to flex to fill out all remaining vertical space.
+   */
+  display: flex;
+  flex-direction: column;
+  --sidebar-width: 185px;
+  /**
+   * If --heap-tree-row-height changes, be sure to change HEAP_TREE_ROW_HEIGHT
+   * in `devtools/client/memory/components/Heap.js`.
+   */
+  --heap-tree-row-height: 18px;
+  --heap-tree-header-height: 18px;
+}
+
+/**
+ * Toolbar
+ */
+
+.devtools-toolbar {
+  /**
+   * Flex: contains several children, which need to be laid out horizontally,
+   * and aligned vertically in the middle of the container.
+   */
+  display: flex;
+  line-height: initial;
+  align-items: stretch;
+}
+
+.devtools-toolbar > .toolbar-group:nth-of-type(1) {
+  /**
+   * We want this to be exactly at a `--sidebar-width` distance from the
+   * toolbar's start boundary. A `.devtools-toolbar` has a 3px start padding.
+   */
+  flex: 0 0 calc(var(--sidebar-width) - 4px);
+  border-inline-end: 1px solid var(--theme-splitter-color);
+  margin-inline-end: 5px;
+  padding-right: 1px;
+}
+
+.devtools-toolbar > .toolbar-group {
+  /**
+   * Flex: contains several children, which need to be laid out horizontally,
+   * and aligned vertically in the middle of the container.
+   */
+  display: flex;
+  align-items: center;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.devtools-toolbar > .toolbar-group > label {
+  /**
+   * Flex: contains form controls and text, which need to be laid out
+   * horizontally, vertically aligned in the middle of the container.
+   */
+  display: flex;
+  align-items: center;
+  margin-inline-end: 5px;
+}
+
+.devtools-toolbar > label {
+  margin-inline-end: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.devtools-toolbar > .toolbar-text {
+  display: flex;
+  align-items: center;
+}
+
+.devtools-toolbar-select {
+  margin-inline-start: 5px;
+}
+
+#take-snapshot::before {
+  background-image: url(images/command-screenshot.svg);
+}
+
+#clear-snapshots::before {
+  background-image: url(chrome://devtools/skin/images/clear.svg);
+}
+
+#diff-snapshots::before {
+  background-image: url(chrome://devtools/skin/images/diff.svg);
+}
+
+#import-snapshot::before {
+  background-image: url(chrome://devtools/skin/images/import.svg);
+}
+
+#record-allocation-stacks-label,
+#pop-view-button-label {
+  border-inline-end: 1px solid var(--theme-splitter-color);
+  padding-inline-end: 5px;
+}
+
+.spacer {
+  flex: 1;
+}
+
+#filter {
+  box-sizing: border-box;
+  height: 100%;
+}
+
+/**
+ * Container (sidebar + main panel)
+ */
+
+#memory-tool-container {
+  /**
+   * Flex: contains two children: .list (sidebar) and #heap-view (main panel),
+   * which need to be laid out horizontally. The sidebar has a fixed width and
+   * the main panel needs to flex to fill out all remaining horizontal space.
+   */
+  display: flex;
+  /**
+   * Flexing to fill out remaining vertical space. The preceeding sibling is
+   * the toolbar. @see #memory-tool.
+   */
+  flex: 1;
+  overflow: hidden;
+}
+
+/**
+ * Sidebar
+ */
+
+.list {
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  background-color: var(--theme-sidebar-background);
+  border-inline-end: 1px solid var(--theme-splitter-color);
+}
+
+.snapshot-list-item {
+  /**
+   * Flex: contains several children, which need to be laid out vertically.
+   */
+  display: flex;
+  flex-direction: column;
+  color: var(--theme-body-color);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 8px;
+  cursor: default;
+}
+
+.snapshot-list-item.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.snapshot-list-item.selected ::-moz-selection {
+  background-color: var(--theme-selection-color);
+  color: var(--theme-selection-background);
+}
+
+.snapshot-list-item .snapshot-info {
+  display: flex;
+  justify-content: space-between;
+  font-size: 90%;
+}
+
+.snapshot-list-item .snapshot-title {
+  display: flex;
+  justify-content: space-between;
+}
+
+.snapshot-list-item .save {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.snapshot-list-item .delete {
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  padding: 0;
+  position: relative;
+  min-height: 1em;
+  min-width: 1.3em;
+  color: currentColor;
+}
+
+.snapshot-list-item .delete::before {
+  display: block;
+  width: 16px;
+  height: 16px;
+  content: "";
+  background-image: url("chrome://devtools/skin/images/close.svg");
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.snapshot-list-item > .snapshot-title {
+  margin-bottom: 14px;
+}
+
+.snapshot-list-item > .snapshot-title > input[type=checkbox] {
+  margin: 0;
+  margin-inline-end: 5px;
+}
+
+.snapshot-list-item > .snapshot-state,
+.snapshot-list-item > .snapshot-totals {
+  font-size: 90%;
+  color: var(--theme-text-color-alt);
+}
+
+.snapshot-list-item.selected > .snapshot-state,
+.snapshot-list-item.selected > .snapshot-totals {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/**
+ * Main panel
+ */
+
+.vbox {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  padding: 0;
+  margin: 0;
+}
+
+.vbox > * {
+  flex: 1;
+
+  /**
+   * By default, flex items have min-width: auto;
+   * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
+   */
+  min-width: 0;
+}
+
+#heap-view {
+  /**
+   * Flex: contains a .heap-view-panel which needs to fill out all the
+   * available space, horizontally and vertically.
+   */
+  display: flex;
+  /**
+   * Flexing to fill out remaining horizontal space. The preceeding sibling
+   * is the sidebar. @see #memory-tool-container.
+   */
+  flex: 1;
+  background-color: var(--theme-body-background);
+
+  /**
+   * By default, flex items have min-width: auto;
+   * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
+   */
+  min-width: 0;
+  font-size: 90%;
+}
+
+#heap-view > .heap-view-panel {
+  /**
+   * Flex: can contain several children, including a tree with a header and
+   * multiple rows, all of which need to be laid out vertically. When the
+   * tree is visible, the header has a fixed height and tree body needs to flex
+   * to fill out all remaining vertical space.
+   */
+  display: flex;
+  flex-direction: column;
+  /**
+   * Flexing to fill out remaining horizontal space. @see #heap-view.
+   */
+  flex: 1;
+
+  /**
+   * By default, flex items have min-width: auto;
+   * (https://drafts.csswg.org/css-flexbox/#min-size-auto)
+   */
+  min-width: 0;
+}
+
+#heap-view > .heap-view-panel > .snapshot-status,
+#heap-view > .heap-view-panel > .take-snapshot,
+#heap-view .empty,
+#shortest-paths-select-node-msg {
+  margin: auto;
+  margin-top: 65px;
+  font-size: 120%;
+}
+
+#heap-view > .heap-view-panel[data-state="snapshot-state-error"] pre {
+  background-color: var(--theme-body-background);
+  margin: 20px;
+  padding: 20px;
+}
+
+/**
+ * Heap tree view header
+ */
+
+.header {
+  /**
+   * Flex: contains several span columns, all of which need to be laid out
+   * horizontally. All columns except the last one have percentage widths, and
+   * the last one needs to flex to fill out all remaining horizontal space.
+   */
+  display: flex;
+  color: var(--theme-body-color);
+  background-color: var(--theme-tab-toolbar-background);
+  border-bottom: 1px solid var(--cell-border-color);
+  flex: 0;
+}
+
+.header > span,
+#shortest-paths-header {
+  text-overflow: ellipsis;
+  line-height: var(--heap-tree-header-height);
+  justify-content: center;
+  justify-self: center;
+  white-space: nowrap;
+}
+
+.header > span {
+  overflow: hidden;
+}
+
+.header > .heap-tree-item-name {
+  justify-content: flex-start;
+}
+
+#shortest-paths {
+  background-color: var(--theme-body-background);
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+}
+
+#shortest-paths-select-node-msg {
+  justify-self: center;
+}
+
+/**
+ * Heap tree view body
+ */
+
+.tree {
+  /**
+   * Flexing to fill out remaining vertical space. @see .heap-view-panel
+   */
+  flex: 1;
+  overflow-y: auto;
+  background-color: var(--theme-body-background);
+}
+
+.tree-node {
+  height: var(--heap-tree-row-height);
+  line-height: var(--heap-tree-row-height);
+  cursor: default;
+}
+
+.children-pointer {
+  display: inline-block;
+  /* We use transform to reverse the icon in RTL,
+   * so `padding-right` will get reversed as well. */
+  padding-right: 5px;
+}
+
+.children-pointer:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+/**
+ * Heap tree view columns
+ */
+
+.heap-tree-item {
+  /**
+   * Flex: contains several span columns, all of which need to be laid out
+   * horizontally. All columns except the last one have percentage widths, and
+   * the last one needs to flex to fill out all remaining horizontal space.
+   */
+  display: flex;
+}
+
+.tree-node-odd {
+  background-color: var(--row-alt-background-color);
+}
+
+.tree-node:hover {
+  background-color: var(--row-hover-background-color);
+}
+
+.heap-tree-item.focused {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.heap-tree-item.focused ::-moz-selection {
+  background-color: var(--theme-selection-color);
+  color: var(--theme-selection-background);
+}
+
+.heap-tree-item-individuals,
+.heap-tree-item-bytes,
+.heap-tree-item-count,
+.heap-tree-item-total-bytes,
+.heap-tree-item-total-count {
+  /**
+   * Flex: contains several subcolumns, which need to be laid out horizontally.
+   * These subcolumns may have specific widths or need to flex.
+   */
+  display: flex;
+  /* Make sure units/decimals/... are always vertically aligned to right in both LTR and RTL locales */
+  text-align: right;
+  border-inline-end: var(--cell-border-color) 1px solid;
+}
+
+.heap-tree-item-count,
+.heap-tree-item-total-count,
+.heap-tree-item-bytes,
+.heap-tree-item-total-bytes {
+  width: 10%;
+  /*
+   * Provision for up to 19 characters:
+   *
+   *     GG_MMM_KKK_BBB_100%
+   *     |            |||  |
+   *     '------------'|'--'
+   *     14 ch for 10s | 4 ch for the largest % we will
+   *     of GB and     | normally see: "100%"
+   *     spaces every  |
+   *     3 digits      |
+   *                   |
+   *             A space between the number and percent
+   */
+  min-width: 19ch;
+}
+
+.heap-tree-item-name {
+  /**
+   * Flexing to fill out remaining vertical space.
+   * @see .header and .heap-tree-item */
+  flex: 1;
+  padding-inline-start: 5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.heap-tree-item-name .arrow {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/**
+ * Heap tree view subcolumns
+ */
+
+.heap-tree-number,
+.heap-tree-percent,
+.heap-tree-item-name {
+  white-space: nowrap;
+}
+
+.heap-tree-number {
+  padding: 0 3px;
+  flex: 1;
+  color: var(--theme-text-color-alt);
+  /* Make sure number doesn't appear backwards on RTL locales */
+  direction: ltr;
+}
+
+.heap-tree-percent {
+  padding-inline-start: 3px;
+  padding-inline-end: 3px;
+}
+
+.heap-tree-number,
+.heap-tree-percent {
+  font-family: var(--monospace-font-family);
+}
+
+.heap-tree-percent {
+  width: 4ch;
+}
+
+.heap-tree-item.focused .heap-tree-number,
+.heap-tree-item.focused .heap-tree-percent {
+  color: inherit;
+}
+
+.heap-tree-item-individuals {
+  min-width: 38px;
+  overflow: hidden;
+  margin: 0;
+}
+
+.heap-tree-item-individuals > button {
+  width: 32px;
+  /* Override default styles for toolbar buttons to fix entire row height. */
+  margin: 0 auto !important;
+  color: inherit;
+}
+
+/**
+ * Tree map
+ */
+
+.tree-map-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.load-more-link {
+  cursor: pointer;
+  color: var(--link-color);
+}
+
+.load-more-link:hover {
+  text-decoration: underline;
+}
+
+.load-more-link:active {
+  color: var(--link-color-active);
+}
+
+/**
+ * Heap tree errors.
+ */
+
+.error::before {
+  content: "";
+  display: inline-block;
+  vertical-align: -2px;
+  width: 12px;
+  height: 12px;
+  max-height: 12px;
+  margin-inline-end: 5px;
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  background-repeat: no-repeat;
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: var(--yellow-60);
+}
+
+/**
+ * Frame View components
+ */
+
+.separator,
+.not-available,
+.heap-tree-item-address {
+  opacity: .5;
+  margin-left: .5em;
+  margin-right: .5em;
+}
+
+.heap-tree-item-address {
+  font-family: monospace;
+}
+
+.no-allocation-stacks {
+  border-color: var(--theme-splitter-color);
+  border-style: solid;
+  border-width: 0px 0px 1px 0px;
+  text-align: center;
+  padding: 5px;
+}
+
+/**
+ * Dagre-D3 graphs
+ */
+
+svg {
+  --arrow-color: var(--theme-splitter-color);
+  --text-color: var(--theme-body-color);
+}
+
+.theme-dark svg {
+  --arrow-color: var(--theme-text-color-alt);
+}
+
+svg #arrowhead {
+  /* !important is needed to override inline style */
+  fill: var(--arrow-color) !important;
+}
+
+.edgePath path {
+  stroke-width: 1px;
+  fill: none;
+  stroke: var(--arrow-color);
+}
+
+g.edgeLabel rect {
+  fill: var(--theme-body-background);
+}
+
+g.edgeLabel tspan {
+  fill: var(--text-color);
+}
+
+.nodes rect {
+  stroke-width: 1px;
+  stroke: var(--theme-splitter-color);
+  fill: var(--theme-toolbar-background);
+}
+
+text {
+  font-size: 1.25em;
+  fill: var(--text-color);
+  /* Make sure text stays inside its container in RTL locales */
+  direction: ltr;
+}
diff --git a/devtools/client/themes/moz.build b/devtools/client/themes/moz.build
new file mode 100644
index 0000000000..a8e889cb3d
--- /dev/null
+++ b/devtools/client/themes/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# 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/.
+
+DIRS += [
+    "audio",
+]
diff --git a/devtools/client/themes/perf.css b/devtools/client/themes/perf.css
new file mode 100644
index 0000000000..17f8bf46ec
--- /dev/null
+++ b/devtools/client/themes/perf.css
@@ -0,0 +1,277 @@
+/* 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/. */
+
+:root.theme-light {
+  /**
+   * Override this variable to match the Photon guidelines and make sure the
+   * links have enough contrast on the background of the onboarding message.
+   * See Bug 1673582 to apply this back to devtools main variable.css file.
+   */
+  --theme-highlight-blue: var(--blue-60);
+}
+
+.perf {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.perf-devtools {
+  box-sizing: border-box;
+  width: 100%;
+  position: absolute;
+  margin-top: 10vh;
+  padding-inline: 5vh;
+}
+
+.perf-button-image {
+  vertical-align: middle;
+  padding-inline-start: 8px;
+  width: 13px;
+  -moz-context-properties: fill;
+  fill: #fff;
+}
+
+.perf-button-container {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+}
+
+.perf-additional-message {
+  font-size: 13px;
+  font-weight: bold;
+  font-style: italic;
+}
+
+.perf > * {
+  max-width: 440px;
+}
+
+.perf-description {
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.perf-external-link {
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--theme-highlight-blue);
+  text-decoration: underline;
+  white-space: nowrap;
+  cursor: pointer;
+  font-size: inherit;
+}
+
+/* See https://design.firefox.com/photon/components/buttons.html for the spec */
+.perf-photon-button {
+  padding: 0 8px;
+  border: none;
+  margin: 0;
+
+  /* reset default styles */
+  background: none;
+
+  /* photon styles */
+  background-color: var(--toolbarbutton-background);
+  border-radius: 2px;
+  color: var(--theme-body-color);
+  font: inherit;
+}
+
+/* This is a Firefox-specific style because Firefox adds a focusring at a bad
+ * position. We're adding our own below. */
+.perf-photon-button::-moz-focus-inner {
+  border: none;
+}
+
+.perf-photon-button:hover:active:not([disabled]) {
+  background-color: var(--grey-90-a30);
+}
+
+.perf-photon-button-primary,
+.perf-photon-button-default {
+  min-width: 132px;
+  height: 32px;
+  padding: 0 8px;
+  font-size: 13px;
+}
+
+.perf-photon-button-primary {
+  background-color: var(--blue-60);
+  color: #fff;
+}
+
+.perf-photon-button-primary:hover:not([disabled]) {
+  background-color: var(--blue-70);
+}
+
+.perf-photon-button-primary:hover:active:not([disabled]) {
+  background-color: var(--blue-80);
+}
+
+.perf-photon-button[disabled] {
+  opacity: 0.6;
+}
+
+.perf-photon-button.perf-button {
+  margin: 10px;
+}
+
+button.perf-photon-button:focus,
+.perf-presets-select:focus {
+  box-shadow: 0 0 0 1px var(--blue-50) inset, 0 0 0 1px var(--blue-50),
+    0 0 0 4px var(--blue-50-a30);
+  outline: 0;
+}
+
+a.perf-photon-button:focus {
+  box-shadow: 0 0 0 2px var(--blue-50), 0 0 0 6px var(--blue-50-a30);
+  outline: 0;
+}
+
+.perf-photon-button-ghost {
+  width: 32px;
+  height: 32px;
+  background-color: transparent;
+}
+
+.perf-photon-button-ghost:hover:enabled {
+  background-color: var(--theme-toolbarbutton-hover-background);
+}
+
+.perf-photon-button-ghost:hover:active:enabled {
+  background-color: var(--theme-toolbarbutton-active-background);
+}
+
+.perf-photon-button-micro {
+  height: 24px;
+}
+
+.perf-presets-hr {
+  width: 100%;
+  border: 1px solid var(--theme-splitter-color);
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+}
+
+.perf-presets {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  width: 100%;
+  margin-block: 12px;
+}
+
+.perf-presets-settings {
+  margin-inline-end: 17px;
+  margin-block: 3px;
+  font-size: 13px;
+  font-weight: bold;
+}
+
+.perf-presets-description {
+  margin-block: 13px;
+}
+
+.perf-presets-select {
+  /* Layout */
+  position: relative;
+  min-width: 186px;
+  padding-block: 3px;
+  padding-inline: 5px;
+
+  /* Presentational: */
+  appearance: none;
+  color: var(--theme-select-color);
+  background-color: var(--theme-select-background);
+  background-image: url('chrome://devtools/skin/images/arrow-dropdown-12.svg');
+  background-position: right 4px center;
+  background-repeat: no-repeat;
+
+  /* adapt the SVG color using the text color */
+  -moz-context-properties: fill;
+  fill: currentColor;
+
+  border-radius: 2px;
+  border: 1px solid transparent;
+  font-size: 12px;
+  font-weight: 400;
+  text-decoration: none;
+}
+
+.perf-presets-select:hover {
+  border: 1px solid var(--theme-select-hover-border-color);
+}
+
+.perf-presets-select:focus {
+  box-shadow:
+    0 0 0 2px var(--blue-50),
+    0 0 0 6px var(--blue-50-a30);
+  outline: 0;
+}
+
+.perf-presets-custom {
+  padding-inline: 10px;
+  margin-block: 13px;
+  line-height: 1.3;
+}
+
+.perf-presets-custom-bold {
+  font-weight: bold;
+}
+
+/* OnboardingMessage component styles */
+
+/*
+ * The grid layout of the onboarding message is:
+ *
+ *  +-----------------------------+---+
+ *  |     onboarding message      | X |
+ *  +-----------------------------+---+
+ */
+.perf-onboarding {
+  background-color: var(--theme-body-alternate-emphasized-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  display: grid;
+  font-size: 13px;
+  grid-template-columns: auto 36px;
+  /* Override the max-width set on ".perf > *" */
+  max-width: unset;
+  width: 100%;
+}
+
+.perf-onboarding + .perf-devtools {
+  margin-top: 15px;
+}
+
+.perf-onboarding-message {
+  background-image: url(chrome://devtools/skin/images/fox-smiling.svg);
+  background-position: 12px center;
+  background-repeat: no-repeat;
+  background-size: 22px;
+  justify-self: center;
+  margin: 12px 0;
+  padding-inline-start: 46px;
+}
+
+.perf-onboarding-message:dir(rtl) {
+  background-position-x: right 12px;
+}
+
+.perf-onboarding-message-row {
+  margin: 6px 0;
+}
+
+.perf-onboarding-close-button {
+  background-image: url("chrome://devtools/skin/images/close.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-top: 4px;
+}
diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css
new file mode 100644
index 0000000000..ae06b09991
--- /dev/null
+++ b/devtools/client/themes/rules.css
@@ -0,0 +1,839 @@
+/* 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/. */
+
+/* CSS Variables specific to this panel that aren't defined by the themes */
+:root {
+  --rule-highlight-background-color: var(--theme-highlight-yellow);
+  --rule-header-background-color: var(--theme-toolbar-background);
+  --rule-pseudo-class-text-color: var(--yellow-70) ;
+  --rule-unused-name-text-color: var(--grey-50);
+  --rule-unused-value-text-color: var(--grey-45);
+  --rule-overridden-name-text-color: var(--grey-50);
+  --rule-overridden-value-text-color: var(--grey-45);
+}
+
+:root.theme-dark {
+  --rule-highlight-background-color: #521C76;
+  --rule-header-background-color: #222225;
+  --rule-pseudo-class-text-color: var(--yellow-50);
+
+  --rule-unused-name-text-color: var(--grey-45);
+  --rule-unused-value-text-color: #787878;
+  --rule-overridden-name-text-color: var(--grey-45);
+  --rule-overridden-value-text-color: #787878;
+}
+
+/* Rule View Tabpanel */
+
+#sidebar-panel-ruleview {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  /* Override the min-width from .inspector-tabpanel, as the rule panel can support small
+     widths */
+  min-width: 100px;
+}
+
+/* Rule View Toolbar */
+
+#ruleview-toolbar-container {
+  line-height: var(--theme-toolbar-height);
+}
+
+#ruleview-toolbar {
+  flex-wrap: wrap;
+  height: auto;
+}
+
+#ruleview-toolbar .devtools-searchbox {
+  flex-basis: 7em;
+  height: var(--theme-toolbar-height);
+}
+
+#ruleview-command-toolbar {
+  display: flex;
+}
+
+.ruleview-reveal-panel {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  display: flex;
+  overflow: hidden;
+  flex-wrap: wrap;
+  margin: 2px;
+}
+
+.ruleview-reveal-panel[hidden] {
+  display: none;
+}
+
+.ruleview-reveal-panel .add-class {
+  height: var(--theme-toolbar-height);
+  line-height: normal;
+}
+
+.ruleview-reveal-panel label {
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+
+#pseudo-class-panel,
+#ruleview-class-panel .classes {
+  padding: 0 3px;
+}
+
+/* Pseudo Class toggle panel */
+
+#pseudo-class-panel {
+  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
+}
+
+#pseudo-class-panel:not([hidden]) {
+  display: grid;
+}
+
+/* Class toggle panel */
+
+#ruleview-class-panel {
+  flex-direction: column;
+}
+
+#ruleview-class-panel .classes {
+  border-top: 1px solid var(--theme-splitter-color);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-height: 100px;
+  overflow-y: auto;
+}
+
+#ruleview-class-panel .classes label {
+  flex: 0 0;
+  max-width: 50%;
+  min-width: 100px;
+}
+
+#ruleview-class-panel .classes label span {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+#ruleview-class-panel .no-classes {
+  flex: 1;
+  color: var(--theme-text-color-inactive);
+  margin: 0;
+  text-align: center;
+}
+
+/* Rule View Container */
+
+#ruleview-container {
+  user-select: text;
+  overflow: auto;
+  flex: auto;
+  height: 100%;
+}
+
+/* This extra wrapper only serves as a way to get the content of the view focusable.
+   So that when the user reaches it either via keyboard or mouse, we know that the view
+   is focused and therefore can handle shortcuts.
+   However, for accessibility reasons, tabindex is set to -1 to avoid having to tab
+   through it, and the outline is hidden. */
+#ruleview-container-focusable {
+  height: 100%;
+  outline: none;
+}
+
+#ruleview-container.non-interactive {
+  pointer-events: none;
+  visibility: collapse;
+  transition: visibility 0.25s;
+}
+
+#ruleview-container .accordion ._content {
+  padding: 0;
+}
+
+.ruleview-property:not(:hover) > .ruleview-enableproperty {
+  pointer-events: none;
+}
+
+.ruleview-expandable-container {
+  display: block;
+}
+
+.ruleview-namecontainer {
+  cursor: text;
+  margin-left: -35px;
+}
+
+.ruleview-computed > .ruleview-namecontainer {
+  margin: 0;
+}
+
+.ruleview-propertyvaluecontainer {
+  cursor: text;
+  padding-right: 5px;
+}
+
+.ruleview-propertyvaluecontainer a {
+  color: var(--theme-highlight-purple);
+  cursor: pointer;
+}
+
+.ruleview-computedlist,
+.ruleview-expandable-container[hidden],
+.ruleview-overridden-items[hidden],
+.ruleview-overridden-rule-filter[hidden],
+.ruleview-warning[hidden],
+.ruleview-unused-warning[hidden],
+.ruleview-compatibility-warning[hidden],
+.ruleview-used[hidden],
+.ruleview-overridden .ruleview-grid {
+  display: none;
+}
+
+.ruleview-computedlist[user-open],
+.ruleview-computedlist[filter-open],
+.ruleview-overridden-items {
+  display: block;
+}
+
+.ruleview-rule-source {
+  text-align: end;
+  float: right;
+  max-width: 100%;
+
+  /* Force RTL direction to crop the source link at the beginning. */
+  direction: rtl;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  user-select: none;
+  margin-bottom: 2px;
+  margin-left: 1ch;
+}
+
+.ruleview-rule-source-label {
+  white-space: nowrap;
+  margin: 0;
+  cursor: pointer;
+
+  /* Create an LTR embed to avoid special characters being shifted to the start due to the
+     parent node direction: rtl; */
+  direction: ltr;
+  unicode-bidi: embed
+}
+
+.ruleview-rule-source.disabled > .ruleview-rule-source-label,
+.ruleview-rule-source[unselectable] > .ruleview-rule-source-label {
+  cursor: default;
+}
+
+.ruleview-rule-source:not([unselectable]) {
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+}
+
+.ruleview-header {
+  background: var(--rule-header-background-color);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  color: var(--theme-toolbar-color);
+  font-size: 12px;
+  line-height: 16px;
+  padding: 4px;
+  width: 100%;
+  align-items: center;
+  display: flex;
+  user-select: none;
+}
+
+.ruleview-expandable-header {
+  cursor: pointer;
+}
+
+.ruleview-expandable-header:hover {
+  background-color: var(--theme-accordion-header-hover);
+}
+
+.ruleview-expandable-header .theme-twisty {
+  margin-inline-start: 0;
+  margin-inline-end: 2px;
+}
+
+.ruleview-rule-pseudo-element {
+  padding-left: 20px;
+  border-left: solid 10px;
+}
+
+.ruleview-rule {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 2px 4px;
+  direction: ltr;
+}
+
+#ruleview-container-focusable > .ruleview-rule:last-child {
+  border-bottom: none;
+}
+
+/**
+ * Display rules that don't match the current selected element and uneditable
+ * user agent styles differently
+ */
+.ruleview-rule.unmatched,
+.ruleview-rule.uneditable,
+.ruleview-rule[unmatched=true],
+.ruleview-rule[uneditable=true] {
+  background: var(--theme-tab-toolbar-background);
+}
+
+.ruleview-rule.unmatched,
+.ruleview-rule[unmatched=true] {
+  opacity: 0.5;
+}
+
+.ruleview-rule.uneditable :focus,
+.ruleview-rule[uneditable=true] :focus {
+  outline: none;
+}
+
+.ruleview-rule.uneditable .theme-link,
+.ruleview-rule[uneditable=true] .theme-link {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.ruleview-rule.uneditable .ruleview-enableproperty,
+.ruleview-rule[uneditable=true] .ruleview-enableproperty {
+  visibility: hidden;
+}
+
+.ruleview-rule.uneditable .ruleview-swatch,
+.ruleview-rule[uneditable=true] .ruleview-swatch {
+  cursor: default;
+}
+
+.ruleview-rule.uneditable .ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-rule.uneditable .ruleview-propertyvaluecontainer >
+.ruleview-propertyvalue,
+.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
+.ruleview-propertyvalue {
+  border-bottom-color: transparent;
+}
+
+.ruleview-property.unused .ruleview-propertyname {
+  color: var(--rule-unused-name-text-color);
+}
+
+.ruleview-property.unused .ruleview-propertyvalue {
+  color: var(--rule-unused-value-text-color);
+}
+
+.ruleview-overridden-rule-filter {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin-inline-start: 3px;
+  background-image: url(chrome://devtools/skin/images/filter-small.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.ruleview-overridden-rule-filter:hover {
+  fill: var(--theme-icon-color);
+}
+
+.ruleview-ruleopen {
+  padding-inline-end: 5px;
+}
+
+.ruleview-ruleclose {
+  clear: both;
+  cursor: text;
+  padding-right: 20px;
+}
+
+.ruleview-propertylist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ruleview-enableproperty {
+  position: relative;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:root[platform="mac"] .ruleview-enableproperty {
+  left: -29px;
+  box-sizing: border-box;
+  margin-inline-start: 3px;
+  margin-inline-end: 9px;
+  width: 12px;
+  height: 12px;
+}
+
+/* The SVG checkbox on Windows and Linux */
+:root[platform="win"] .ruleview-enableproperty,
+:root[platform="linux"] .ruleview-enableproperty {
+  appearance: none;
+  float: left;
+  left: -27px;
+  box-sizing: content-box;
+  margin-inline-start: 0;
+  margin-inline-end: 10px;
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 0;
+  padding: 0;
+  outline: none;
+  background: url("chrome://devtools/skin/images/checkbox.svg") center no-repeat content-box;
+  /* Using fill to paint the border, and stroke for the tick */
+  -moz-context-properties: fill, stroke;
+  fill: rgba(0,0,0,.3);
+  stroke: transparent;
+}
+
+:root[platform="win"].theme-dark .ruleview-enableproperty,
+:root[platform="linux"].theme-dark .ruleview-enableproperty {
+  fill: rgba(255,255,255,.4);
+}
+
+:root[platform="win"] .ruleview-enableproperty:checked,
+:root[platform="linux"] .ruleview-enableproperty:checked {
+  stroke: rgba(0,0,0,.6);
+}
+
+:root[platform="win"].theme-dark .ruleview-enableproperty:checked,
+:root[platform="linux"].theme-dark .ruleview-enableproperty:checked {
+  stroke: rgba(255,255,255,.8);
+}
+
+:root[platform="mac"] .ruleview-enableproperty {
+  appearance: auto;
+  -moz-default-appearance: checkbox;
+}
+
+.ruleview-warning,
+.ruleview-unused-warning,
+.ruleview-compatibility-warning {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background-size: 12px;
+  background-repeat: no-repeat;
+  -moz-context-properties: fill;
+}
+
+.ruleview-warning {
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+  fill: var(--yellow-60);
+}
+
+.ruleview-unused-warning {
+  background-image: url(chrome://devtools/skin/images/info-small.svg);
+  background-color: var(--theme-sidebar-background);
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.ruleview-compatibility-warning {
+  background-image: url(chrome://devtools/skin/images/report.svg);
+  background-color: var(--theme-sidebar-background);
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.ruleview-unused-warning:hover,
+.ruleview-compatibility-warning:hover {
+  fill: var(--theme-icon-color);
+  stroke: var(--theme-icon-color);
+}
+
+.ruleview-rule:not(:hover) .ruleview-enableproperty:not(:focus) {
+  /* Use opacity to hide the checkbox instead of visibility:hidden,
+     so that it's possible to focus it with the keyboard. */
+  opacity: 0;
+}
+
+.ruleview-expander {
+  vertical-align: middle;
+}
+
+.ruleview-propertycontainer .ruleview-expander {
+  margin-left: -6px;
+}
+
+.ruleview-propertycontainer .ruleview-expander:dir(rtl):not([open]) {
+  /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
+  transform: rotate(-90deg);
+}
+
+.ruleview-newproperty {
+  margin-inline-start: -10px;
+}
+
+.ruleview-namecontainer,
+.ruleview-propertyvaluecontainer,
+.ruleview-propertyname,
+.ruleview-propertyvalue {
+  text-decoration: inherit;
+}
+
+.ruleview-computedlist {
+  list-style: none;
+  padding: 0;
+}
+
+.ruleview-overridden-items {
+  margin-inline-start: -25px;
+  list-style: none;
+  line-height: 1.5em;
+}
+
+.ruleview-overridden-item {
+  position: relative;
+}
+
+.ruleview-overridden-item::before,
+.ruleview-overridden-item::after {
+  content: "";
+  position: absolute;
+  display: block;
+  border: 0 solid var(--theme-text-color-alt);
+}
+
+.ruleview-overridden-item::before {
+  top: 0;
+  left: -15px;
+  height: 0.8em;
+  width: 10px;
+  border-left-width: 0.5px;
+  border-bottom-width: 0.5px;
+}
+
+.ruleview-overridden-item::after {
+  left: -15px;
+  bottom: -7px;
+  height: 100%;
+  border-left-width: 0.5px;
+}
+
+.ruleview-overridden-item:last-child::after {
+  display: none;
+}
+
+.ruleview-overridden-item .ruleview-namecontainer {
+  margin-left: 0;
+}
+
+/* All swatches */
+
+.ruleview-flex,
+.ruleview-grid,
+.ruleview-shapeswatch,
+.ruleview-swatch {
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+
+  /* align the swatch with its value */
+  margin-top: -1px;
+  margin-inline-end: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+/* Icon swatches not using the .ruleview-swatch class (flex, grid, shape) */
+
+.ruleview-flex,
+.ruleview-grid,
+.ruleview-shapeswatch {
+  -moz-context-properties: stroke;
+  stroke: var(--theme-icon-color);
+}
+
+.ruleview-flex.active,
+.ruleview-grid.active,
+.ruleview-shapeswatch.active {
+  stroke: var(--theme-icon-checked-color);
+}
+
+.ruleview-flex {
+  background-image: url("chrome://devtools/skin/images/flexbox-swatch.svg");
+  background-size: 13px 11px;
+  width: 13px;
+  height: 11px;
+}
+
+.ruleview-grid {
+  background-image: url("chrome://devtools/skin/images/grid.svg");
+}
+
+.ruleview-grid[disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.ruleview-shapeswatch {
+  background-image: url("chrome://devtools/skin/images/shape-swatch.svg");
+  background-size: 110%;
+  width: 1.45em;
+  height: 1.45em;
+}
+
+.ruleview-shape-point.active,
+.ruleview-shapeswatch.active + .ruleview-shape > .ruleview-shape-point:hover {
+  background-color: var(--rule-highlight-background-color);
+}
+
+/* Round swatches using the .ruleview-swatch class (color, bezier, filter and angle) */
+
+.ruleview-swatch {
+  background-size: 1em;
+  border-radius: 50%;
+}
+
+.ruleview-colorswatch::before {
+  content: '';
+  background-color: #eee;
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 6px;
+  position: absolute;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.ruleview-swatch.ruleview-colorswatch {
+  border: none;
+  padding: 0;
+}
+
+.ruleview-bezierswatch {
+  background-image: url("chrome://devtools/skin/images/cubic-bezier-swatch.svg");
+}
+
+.ruleview-filterswatch {
+  background-image: url("chrome://devtools/skin/images/filter-swatch.svg");
+}
+
+.ruleview-angleswatch {
+  background-image: url("chrome://devtools/skin/images/angle-swatch.svg");
+}
+
+.ruleview-lineareasingswatch {
+  background-image: url("chrome://devtools/skin/images/linear-easing-swatch.svg");
+}
+
+.ruleview-overridden {
+  text-decoration: line-through solid var(--theme-text-color-alt);
+}
+
+.ruleview-property.ruleview-overridden .ruleview-propertyname {
+  color: var(--rule-overridden-name-text-color);
+}
+
+.ruleview-property.ruleview-overridden .ruleview-propertyvalue {
+  color: var(--rule-overridden-value-text-color);
+}
+
+/**
+ * Hide swatches (tool icons) from properties that are overwritten by higher specificity * rules.
+ * .ruleview-swatch is a base class for many tool swatches (shapes, color, bezier curves)
+ * .ruleview-flex and .ruleview-grid are custom
+ */
+.ruleview-overridden .ruleview-flex,
+.ruleview-overridden .ruleview-grid,
+.ruleview-overridden .ruleview-shapeswatch,
+.ruleview-overridden .ruleview-swatch {
+  display: none;
+}
+
+.ruleview-font-family.used-font {
+  text-decoration: underline;
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #CCC;
+  padding: 0;
+  margin: -1px -3px -1px -1px;
+}
+
+.ruleview-property {
+  border-left: 3px solid transparent;
+  clear: both;
+  padding-left: 28px;
+  overflow-wrap: break-word;
+}
+
+.ruleview-propertycontainer  > * {
+  vertical-align: middle;
+}
+
+.ruleview-property.ruleview-changed,
+.ruleview-property[dirty] {
+  border-left-color: var(--theme-highlight-green);
+}
+
+.ruleview-highlight > .ruleview-expander,
+.ruleview-highlight > .ruleview-namecontainer,
+.ruleview-highlight > .ruleview-propertyvaluecontainer,
+.ruleview-highlight > .ruleview-rule-source-label,
+.ruleview-highlight > .ruleview-selector,
+.ruleview-rule-ancestor-data li.ruleview-highlight {
+  background-color: var(--rule-highlight-background-color);
+}
+
+.ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
+  border-bottom: 1px dashed transparent;
+}
+
+.ruleview-namecontainer:hover > .ruleview-propertyname,
+.ruleview-propertyvaluecontainer:hover > .ruleview-propertyvalue {
+  border-bottom-color: hsl(0,0%,50%);
+}
+
+/* @media and @layer rule info element */
+ul.ruleview-rule-ancestor-data {
+  max-width: 100%;
+  display: inline-block;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ruleview-rule-ancestor-data li {
+  /* When there's a search and this element is highlighted, this prevents the background
+     color to be applied to the whole width of the parent ul block */
+  max-width: max-content;
+}
+
+.ruleview-rule-ancestor-data li.has-tooltip:hover .container-query-declaration {
+  text-decoration: underline;
+  text-decoration-color: var(--theme-highlight-blue);
+  text-decoration-style: dotted;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+}
+
+.ruleview-rule-ancestor-data li button.open-inspector {
+  /* There's a space character after the button, so add a 1ch margin-inline-start to be consistent */
+  margin-inline: 1ch 0;
+}
+
+.ruleview-selectorcontainer {
+  word-wrap: break-word;
+  cursor: text;
+}
+
+.ruleview-selector-separator,
+.ruleview-selector-unmatched,
+.ruleview-unmatched-variable {
+  color: #888;
+}
+
+.ruleview-selector-matched > .ruleview-selector-attribute {
+  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
+}
+
+.ruleview-selector-matched > .ruleview-selector-pseudo-class {
+  /* TODO: Bug 1178535 Awaiting UX feedback on highlight colors */
+}
+
+.ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
+  color: var(--rule-pseudo-class-text-color);
+}
+
+.ruleview-selectorhighlighter {
+  display: inline-block;
+  vertical-align: top;
+  width: 15px;
+  height: 15px;
+  margin-left: 5px;
+  background: url("chrome://devtools/skin/images/highlight-selector.svg") no-repeat 0 0;
+  background-size: contain;
+  cursor: pointer;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.ruleview-selectorhighlighter:hover {
+  fill: var(--theme-icon-color);
+}
+
+.ruleview-selectorhighlighter:active,
+.ruleview-selectorhighlighter.highlighted {
+  fill: var(--theme-icon-checked-color);
+  /* Since the icon is quite thin, it can be hard to differentiate it
+     from its regular state. Adding some background helps make it pop a bit */
+  background-color: var(--dimmed-highlighter-box-content-color);
+}
+
+#ruleview-add-rule-button::before {
+  background-image: url("chrome://devtools/skin/images/add.svg");
+  background-size: 14px;
+}
+
+#pseudo-class-panel-toggle::before {
+  content: ":hov";
+}
+
+#class-panel-toggle::before {
+  content: ".cls";
+}
+
+#pseudo-class-panel-toggle::before,
+#class-panel-toggle::before {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  direction: ltr;
+}
+
+#print-simulation-toggle::before {
+  background-image: url("chrome://devtools/skin/images/rules-view-print-simulation.svg");
+}
+
+#color-scheme-simulation-light-toggle::before {
+  background-image: url("chrome://devtools/skin/images/rules-view-light-mode-simulation.svg");
+  -moz-context-properties: fill, stroke;
+  stroke: currentColor;
+}
+
+#color-scheme-simulation-dark-toggle::before {
+  background-image: url("chrome://devtools/skin/images/rules-view-dark-mode-simulation.svg");
+}
+
+.flash-out {
+  transition: background 1s;
+}
+
+.ruleview-propertyvalue-draggable {
+  cursor: col-resize;
+}
+
+.ruleview-propertyvalue-dragging {
+  user-select: none;
+}
+
+.ruleview-propertyvalue-break-spaces {
+  white-space: break-spaces;
+}
diff --git a/devtools/client/themes/splitters.css b/devtools/client/themes/splitters.css
new file mode 100644
index 0000000000..6b2373b9bd
--- /dev/null
+++ b/devtools/client/themes/splitters.css
@@ -0,0 +1,101 @@
+/* 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/. */
+
+/* This file is loaded by both browser.xhtml and toolbox.xhtml. Therefore, rules
+   defined here can not rely on toolbox.xhtml variables. */
+
+/* Splitters */
+
+:root {
+  /* Draggable splitter element size */
+  --devtools-splitter-element-size: 1px;
+  --devtools-emphasized-splitter-element-size: 2px;
+
+  /* Define the widths of the draggable areas on each side of a splitter. top
+     and bottom widths are used for horizontal splitters, inline-start and
+     inline-end for side splitters.*/
+
+  --devtools-splitter-top-width: 2px;
+  --devtools-splitter-bottom-width: 2px;
+  --devtools-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) +
+                                                  var(--devtools-splitter-bottom-width) +
+                                                  var(--devtools-splitter-element-size));
+  --devtools-emphasized-horizontal-splitter-min-height: calc(var(--devtools-splitter-top-width) +
+                                                             var(--devtools-splitter-bottom-width) +
+                                                             var(--devtools-emphasized-splitter-element-size));
+
+  /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
+  --devtools-splitter-inline-start-width: 1px;
+  --devtools-splitter-inline-end-width: 4px;
+
+  --devtools-vertical-splitter-min-width: calc(var(--devtools-splitter-inline-start-width) +
+                                               var(--devtools-splitter-inline-end-width) +
+                                               var(--devtools-splitter-element-size));
+}
+
+#appcontent[devtoolstheme="light"] {
+  /* These variables are used in browser.xhtml but inside the toolbox they are overridden by --theme-splitter-color */
+  --devtools-splitter-color: #e0e0e2;
+}
+
+#appcontent[devtoolstheme="dark"] {
+  --devtools-splitter-color: #38383d;
+}
+
+splitter.devtools-horizontal-splitter,
+.devtools-side-splitter {
+  appearance: none;
+  background-image: none;
+  border: 0;
+  border-style: solid;
+  border-color: transparent;
+  background-color: var(--devtools-splitter-color);
+  background-clip: content-box;
+  position: relative;
+
+  box-sizing: border-box;
+
+  z-index: var(--browser-stack-z-index-devtools-splitter, 1);
+}
+
+splitter.devtools-horizontal-splitter {
+  min-height: var(--devtools-horizontal-splitter-min-height);
+
+  border-top-width: var(--devtools-splitter-top-width);
+  border-bottom-width: var(--devtools-splitter-bottom-width);
+
+  margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
+  margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
+
+  cursor: ns-resize;
+}
+
+#toolbox-deck ~ splitter.devtools-horizontal-splitter {
+  min-height: var(--devtools-emphasized-horizontal-splitter-min-height);
+}
+
+/**
+ * Emphasized splitter has the hover style.
+ * This emphasized splitter affect splitter console only.
+ */
+#toolbox-deck ~ splitter.devtools-horizontal-splitter:hover {
+  background-color: var(--theme-emphasized-splitter-color-hover);
+}
+
+.devtools-side-splitter {
+  min-width: var(--devtools-vertical-splitter-min-width);
+
+  border-inline-start-width: var(--devtools-splitter-inline-start-width);
+  border-inline-end-width: var(--devtools-splitter-inline-end-width);
+
+  margin-inline-start: calc(-1 * var(--devtools-splitter-inline-start-width) - 1px);
+  margin-inline-end: calc(-1 * var(--devtools-splitter-inline-end-width));
+
+  cursor: ew-resize;
+}
+
+.devtools-horizontal-splitter.disabled,
+.devtools-side-splitter.disabled {
+  pointer-events: none;
+}
diff --git a/devtools/client/themes/splitview.css b/devtools/client/themes/splitview.css
new file mode 100644
index 0000000000..08ccb05d69
--- /dev/null
+++ b/devtools/client/themes/splitview.css
@@ -0,0 +1,145 @@
+/* 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/. */
+
+.theme-dark {
+  --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
+  --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
+}
+.theme-light {
+  --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
+  --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
+}
+
+box,
+.splitview-nav {
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.splitview-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background-color: var(--theme-sidebar-background);
+
+  display: flex;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.splitview-nav > li {
+  padding-inline-end: 8px;
+  align-items: center;
+  outline: 0;
+  vertical-align: bottom;
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.placeholder {
+  flex: 1;
+  text-align: center;
+}
+
+.splitview-nav > li.splitview-active {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+  background-image: var(--sidemenu-selected-arrow);
+  background-repeat: no-repeat;
+  background-position: center right;
+}
+
+.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+  background-image: var(--sidemenu-selected-arrow-rtl);
+  background-position: center left;
+}
+
+.splitview-nav > li:not(.splitview-active):where(:hover, :focus-within) {
+  background-color: var(--theme-selection-background-hover);
+}
+
+/* Toolbars */
+
+.splitview-main > .devtools-toolbar {
+  height: 29px;
+}
+
+.splitview-main > toolbar,
+.loading .splitview-nav-container {
+  border-inline-end: 1px solid var(--theme-splitter-color);
+}
+
+.splitview-nav-container {
+  justify-content: center;
+}
+
+.loading .splitview-nav-container > .placeholder {
+  display: none !important;
+}
+
+.splitview-controller,
+.splitview-main {
+  flex: none;
+}
+
+.splitview-controller {
+  min-height: 3em;
+  max-height: 14em;
+  max-width: 400px;
+  min-width: 200px;
+}
+
+.splitview-side-details > * {
+  display: none;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* only the active details pane is shown */
+.splitview-side-details > .splitview-active {
+  display: flex;
+}
+
+/* filtered items are hidden */
+ol.splitview-nav > li.splitview-filtered {
+  display: none;
+}
+
+/* "empty list" and "all filtered" placeholders are hidden */
+.splitview-nav:empty,
+.splitview-nav.splitview-all-filtered,
+.splitview-nav + .splitview-nav.placeholder {
+  display: none;
+}
+.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
+.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
+  display: flex;
+}
+
+@media (width >= 700px) {
+  .splitview-root {
+    flex-direction: row;
+  }
+  .splitview-controller {
+    max-height: none;
+    /* Override the potential splitter-set height */
+    height: auto !important;
+  }
+  .splitview-details {
+    display: none;
+  }
+  .splitview-details.splitview-active {
+    display: flex;
+  }
+}
+
+/* portrait mode */
+@media (width < 700px) {
+  .splitview-controller {
+    max-width: none;
+    /* Override the potential splitter-set width */
+    width: auto !important;
+  }
+}
diff --git a/devtools/client/themes/storage.css b/devtools/client/themes/storage.css
new file mode 100644
index 0000000000..0212ebda2c
--- /dev/null
+++ b/devtools/client/themes/storage.css
@@ -0,0 +1,169 @@
+/* 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/. */
+
+/*
+ * Global styles
+ */
+a {
+  color: var(--theme-highlight-blue);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* Storage Host Tree */
+
+#storage-tree {
+  min-width: 220px;
+  max-width: 500px;
+  overflow: auto;
+  min-height: 0;
+  background: var(--theme-sidebar-background);
+  /* Let the component gain focus when a click hits an empty area */
+  -moz-user-focus: normal;
+}
+
+#storage-tree:focus {
+  outline: 0;
+}
+
+/* Storage Table */
+
+/* Let the component gain focus when a click hits an empty area */
+#storage-table {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -moz-user-focus: normal;
+}
+
+#storage-table:focus {
+  outline: 0;
+}
+
+/* The minimum column width needs to be determined by the header width */
+.table-widget-cell {
+  min-width: unset;
+}
+
+.table-widget-column {
+  flex-grow: 1;
+}
+
+/* Set minimum column widths */
+
+#name {
+  min-width: 65px;
+}
+
+#host {
+  min-width: 80px;
+}
+
+#path {
+  min-width: 60px;
+}
+
+#value {
+  min-width: 95px;
+  /* Prevent all columns except for value from shrinking with the panel */
+  flex-shrink: 1;
+}
+
+#hostOnly,
+#isHttpOnly,
+#sameSite {
+  min-width: 58px;
+}
+
+#size,
+#isSecure {
+  min-width: 48px;
+}
+
+#expires,
+#lastAccessed,
+#creationTime {
+  min-width: 115px;
+}
+
+/* Text input in storage table */
+#storage-table input {
+  appearance: none;
+  flex: 1;
+  /* make sure the outline is not cut off */
+  position: relative;
+  box-sizing: border-box;
+  padding: 0 2px;
+  font: inherit;
+  color: var(--theme-text-color-strong);
+  background-color: var(--theme-body-background);
+}
+
+#storage-table input:focus {
+  outline: 1px solid var(--blue-50);
+}
+
+/* Variables View Sidebar */
+
+#storage-sidebar {
+  max-width: 500px;
+  min-width: 250px;
+}
+
+#storage-sidebar .devtools-toolbar {
+  padding-inline: 0;
+}
+
+/* Toolbar */
+
+/*
+  .devtools-input-toolbar forces display: flex; which does not work
+  properly with XUL. Force XUL flexbox instead.
+*/
+#storage-toolbar {
+  display: flex;
+}
+
+#storage-searchbox {
+  flex: 1;
+  margin-inline-start: -3px;
+  margin-inline-end: 1px;
+}
+
+#storage-toolbar .add-button::before {
+  background-image: url("chrome://devtools/skin/images/add.svg");
+  -moz-user-focus: normal;
+}
+
+#storage-toolbar .refresh-button::before {
+  background-image: url("chrome://devtools/skin/images/reload.svg");
+  -moz-user-focus: normal;
+}
+
+#storage-toolbar .devtools-button {
+  min-width: 0;
+}
+
+#storage-toolbar .devtools-button hbox,
+#storage-toolbar .sidebar-toggle[hidden] {
+  display: none;
+}
+
+/* Responsive sidebar */
+@media (width < 700px) {
+  #storage-tree,
+  #storage-sidebar {
+    max-width: none;
+    /* Override potential splitter-set width */
+    width: auto !important;
+  }
+}
+
+@media (width >= 700px) {
+  #storage-tree,
+  #storage-sidebar {
+    /* Override potential splitter-set height */
+    height: auto !important;
+  }
+}
diff --git a/devtools/client/themes/styleeditor.css b/devtools/client/themes/styleeditor.css
new file mode 100644
index 0000000000..154497fa5e
--- /dev/null
+++ b/devtools/client/themes/styleeditor.css
@@ -0,0 +1,283 @@
+/* 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/. */
+
+#style-editor-chrome {
+  flex: 1;
+}
+
+.splitview-nav > li,
+.stylesheet-info,
+.stylesheet-more,
+.stylesheet-rule-count,
+li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton,
+li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
+  display: flex;
+}
+
+.devtools-toolbar > spacer {
+  flex: 1;
+}
+
+.style-editor-newButton {
+  list-style-image: url(images/add.svg);
+}
+
+.style-editor-importButton {
+  list-style-image: url(images/import.svg);
+}
+
+.stylesheet-details-container {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.stylesheet-at-rules-container {
+  overflow-y: auto;
+  min-width: 0;
+  min-height: 0;
+}
+
+.stylesheet-error-message {
+  display: none;
+}
+
+li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
+  display: block;
+}
+
+.stylesheet-title,
+.stylesheet-name {
+  text-decoration: none;
+}
+
+.stylesheet-name {
+  font-size: 13px;
+  white-space: nowrap;
+}
+
+.stylesheet-name > label {
+  display: inline;
+  cursor: pointer;
+}
+
+.stylesheet-info > h1 {
+  flex: 1;
+}
+
+.splitview-nav > li > hgroup.stylesheet-info {
+  justify-content: center;
+  /* This prevents stylesheets with long names from breaking the layout of
+  the StyleEditor sources sidebar. */
+  overflow: hidden;
+}
+
+.stylesheet-more > spacer {
+  flex: 1;
+}
+
+.stylesheet-title,
+.stylesheet-name,
+.stylesheet-rule-count,
+.stylesheet-linked-file,
+.stylesheet-saveButton {
+  color: var(--theme-body-color);
+}
+
+.stylesheet-saveButton {
+  display: none;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.splitview-active .stylesheet-title,
+.splitview-active .stylesheet-name,
+.theme-light .splitview-active .stylesheet-rule-count,
+.theme-light .splitview-active .stylesheet-linked-file,
+.theme-light .splitview-active .stylesheet-saveButton {
+  color: var(--theme-selection-color);
+}
+
+.splitview-nav:focus {
+  outline: 0; /* focus ring is on the stylesheet name */
+}
+
+.splitview-nav > li {
+  flex-direction: row;
+}
+
+.splitview-nav > li > hgroup {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.splitview-nav > li.unsaved > hgroup .stylesheet-name {
+  font-style: italic;
+}
+
+.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
+.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
+  font-style: italic;
+}
+
+.splitview-nav.empty > p {
+  padding: 0 10px;
+}
+
+.stylesheet-sidebar {
+  max-width: 400px;
+  min-width: 100px;
+  border-color: var(--theme-splitter-color);
+}
+
+.at-rule-label {
+  display: grid;
+  /*
+   * +----------------------------------------------+
+   * |        Rule information        | line number |
+   * +----------------------------------------------+
+   */
+  grid-template-columns: 1fr max-content;
+  padding: 4px;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  cursor: pointer;
+  word-break: break-word;
+}
+
+.media-responsive-mode-toggle {
+  color: var(--theme-highlight-blue);
+  text-decoration: underline;
+}
+
+.at-rule-line {
+  padding-inline-start: 4px;
+}
+
+.media-condition-unmatched {
+  opacity: 0.4;
+}
+
+.stylesheet-toggle {
+  display: flex;
+  cursor: pointer;
+  padding: 8px 0;
+  margin: 0 8px;
+  background-image: url(images/eye-opened.svg);
+  background-repeat: no-repeat;
+  background-clip: content-box;
+  background-position: center;
+  background-size: 16px;
+  width: 24px;
+  height: 40px;
+  flex-shrink: 0;
+
+  /* The icon color should always match the text color. */
+  -moz-context-properties: fill, stroke;
+  fill: currentColor;
+  stroke: currentColor;
+}
+
+.disabled > .stylesheet-toggle {
+  background-image: url(images/eye-closed.svg);
+}
+
+.stylesheet-system > .stylesheet-toggle {
+  /* Override the default "color: grayText" from [disabled] browser style */
+  color: currentColor;
+  cursor: auto;
+  opacity: 0.3;
+}
+
+.stylesheet-linked-file:not(:empty){
+  margin-inline-end: 0.4em;
+}
+
+.stylesheet-linked-file:not(:empty):before {
+  margin-inline-start: 0.4em;
+  content: " ↳ ";
+}
+
+li.unsaved > hgroup > h1 > .stylesheet-name:before {
+  content: "*";
+}
+
+li.linked-file-error .stylesheet-linked-file {
+  text-decoration: line-through;
+}
+
+li.linked-file-error .stylesheet-linked-file:after {
+  font-size: 110%;
+  content: " ✘";
+}
+
+li.linked-file-error .stylesheet-rule-count {
+  visibility: hidden;
+}
+
+.stylesheet-more > h3 {
+  font-size: 11px;
+  margin-inline-end: 2px;
+}
+
+.placeholder a {
+  text-decoration: underline;
+}
+
+h1,
+h2,
+h3 {
+  font-size: inherit;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+
+@media (max-width: 700px) {
+  .stylesheet-sidebar {
+    width: 150px;
+  }
+}
+
+/* portrait mode */
+@media (max-width: 550px) {
+  li.splitview-active > hgroup > .stylesheet-more > .stylesheet-rule-count,
+  li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
+    display: none;
+  }
+
+  .splitview-nav {
+    box-shadow: none;
+  }
+
+  .splitview-nav > li.splitview-active {
+    background-size: 0 0, 0 0, auto;
+  }
+
+  .stylesheet-toggle {
+    padding: 0;
+    height: 24px;
+  }
+
+  .splitview-nav > li > hgroup.stylesheet-info {
+    align-items: baseline;
+    flex-direction: row;
+    flex: 1;
+  }
+
+  .stylesheet-sidebar {
+    width: 180px;
+  }
+
+  .stylesheet-more {
+    flex: 1;
+    justify-content: flex-end;
+  }
+
+  .stylesheet-more > spacer {
+    flex: none;
+  }
+}
diff --git a/devtools/client/themes/toolbars.css b/devtools/client/themes/toolbars.css
new file mode 100644
index 0000000000..3c310b9604
--- /dev/null
+++ b/devtools/client/themes/toolbars.css
@@ -0,0 +1,197 @@
+/* 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/. */
+
+/* Toolbars */
+.devtools-toolbar,
+.devtools-sidebar-tabs tabs {
+  appearance: none;
+  padding: 0;
+  border-width: 0;
+  border-bottom-width: 1px;
+  border-style: solid;
+  /* Reserve 1px for the border */
+  height: calc(var(--theme-toolbar-height) + 1px);
+  /* Line-height based vertical centering technique used in panels
+     which don't use Flexbox (mostly XUL panels). */
+  line-height: var(--theme-toolbar-height);
+  box-sizing: border-box;
+}
+
+.devtools-toolbar {
+  padding: 0 3px;
+}
+
+/* <thead> nor <tr> support border, we have to style the <td> */
+.devtools-toolbar td {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.devtools-toolbar-bottom {
+  border-top-width: 1px;
+  border-bottom: none;
+}
+
+/* Input toolbars (toolbars that have a full height text input) */
+
+.devtools-input-toolbar {
+  display: flex;
+  /* @TODO: Remove the !important in bug 1535956 */
+  background-color: var(--theme-body-background) !important;
+  color: inherit;
+}
+
+.devtools-input-toolbar > .devtools-searchbox:first-child {
+  margin-inline-start: -3px; /* This needs to match .devtools-toolbar's padding */
+}
+
+/* Expected space around a separator:
+ * -----------------------
+ *            4
+ * [button] 2 | 2 [button]
+ *            4
+ * -----------------------
+ * We're using a 1px horizontal margin, since buttons already have their own
+ * 1px horizontal margin, and margins don't collapse between flex items.
+ * Some separators may be using a bigger, 6px horizontal margin.
+ */
+.devtools-separator {
+  border-inline-start: 1px solid var(--theme-toolbar-separator);
+  height: calc(100% - 8px);
+  margin: 4px 1px;
+}
+
+/* In-tools sidebar */
+.devtools-sidebar-tabs {
+  appearance: none;
+  margin: 0;
+  height: 100%;
+}
+
+.devtools-sidebar-tabs > tabpanels {
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border: 0;
+}
+
+.theme-light .devtools-sidebar-tabs > tabpanels {
+  background: var(--theme-sidebar-background);
+  color: var(--theme-body-color);
+}
+
+.devtools-sidebar-tabs tabs {
+  position: static;
+  font: inherit;
+  margin-bottom: 0;
+  overflow: hidden;
+}
+
+.devtools-sidebar-alltabs {
+  appearance: none;
+  height: 24px;
+  line-height: 24px;
+  padding: 0 4px;
+  margin: 0;
+  border-width: 0 0 1px 0;
+  border-inline-start-width: 1px;
+  border-style: solid;
+}
+
+.devtools-sidebar-alltabs .toolbarbutton-icon {
+  display: none;
+}
+
+.devtools-sidebar-tabs tabs > .tabs-right,
+.devtools-sidebar-tabs tabs > .tabs-left {
+  display: none;
+}
+
+.devtools-sidebar-tabs tabs > tab {
+  appearance: none;
+  /* We want to match the height of a toolbar with a toolbarbutton
+   * First, we need to replicated the padding of toolbar (4px),
+   * then we need to take the border of the buttons into account (1px).
+   */
+  padding: 0 3px;
+  margin: 0;
+  min-width: 78px;
+  text-align: center;
+  background-color: transparent;
+  color: inherit;
+  flex: 1;
+  border-width: 0;
+  border-inline-start-width: 1px;
+  border-style: solid;
+  border-radius: 0;
+  position: static;
+  text-shadow: none;
+}
+
+.devtools-sidebar-tabs tabs > tab {
+  border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
+}
+
+.devtools-sidebar-tabs tabs > tab[selected],
+.devtools-sidebar-tabs tabs > tab[selected] + tab {
+  border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
+}
+
+.devtools-sidebar-tabs tabs > tab:first-child {
+  border-inline-start-width: 0;
+}
+
+.devtools-sidebar-tabs tabs > tab:hover {
+  background: rgba(0, 0, 0, 0.12);
+}
+
+.devtools-sidebar-tabs tabs > tab:hover:active {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.devtools-sidebar-tabs tabs > tab[selected],
+.devtools-sidebar-tabs tabs > tab[selected]:hover:active {
+  color: var(--theme-selection-color);
+  background: var(--theme-selection-background);
+}
+
+.devtools-invisible-splitter {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+splitter.devtools-horizontal-splitter,
+.devtools-side-splitter {
+  background-color: var(--theme-splitter-color);
+}
+
+/* Dropdown Menu Button */
+.devtools-dropdown-button {
+  background-image: url("chrome://devtools/skin/images/select-arrow.svg") !important;
+  background-position: right center !important;
+  background-repeat: no-repeat !important;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding-inline: 2px 10px !important;
+  fill: var(--theme-icon-color);
+  -moz-context-properties: fill;
+}
+
+.devtools-dropdown-button:dir(rtl) {
+  background-position-x: left !important;
+}
+
+.devtools-dropdown-button:not(:hover) {
+  background-color: transparent;
+}
+
+/* Style for title holder inside the dropdown menu button */
+.devtools-dropdown-button .title {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  padding-top: 0.15em;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/devtools/client/themes/toolbox.css b/devtools/client/themes/toolbox.css
new file mode 100644
index 0000000000..b7ddb98b87
--- /dev/null
+++ b/devtools/client/themes/toolbox.css
@@ -0,0 +1,660 @@
+/* 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/. */
+
+/*
+ *  Debug Target Info layout
+ *  +------------+--------------+------------------------+
+ *  | connection | runtime info | target info icon + text |
+ *  +------------+--------------+------------------------+
+ */
+.debug-target-info {
+  --border-inline-end-width: 1px;
+  --padding-inline-end-size: 24px;
+  display: flex;
+  background: var(--theme-tab-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 4px 0;
+  font-size: 1.35em;
+  color: var(--theme-toolbar-color);
+}
+
+
+.toolbox-always-on-top {
+  display: flex;
+  padding: 6px;
+  margin-inline: 8px;
+  background-color: transparent;
+  border: 2px solid transparent;
+  border-radius: 2px;
+  align-items: center;
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.toolbox-always-on-top::after {
+  content: "";
+  display: block;
+  width: 18px;
+  height: 18px;
+  background-size: cover;
+  background-image: url("chrome://devtools/skin/images/command-always-on-top-window.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
+  margin-inline-start: 5px;
+}
+
+.toolbox-always-on-top:focus {
+  outline: none;
+  background-color: var(--theme-toolbar-hover);
+  box-shadow: var(--toolbox-button-box-shadow-focus);
+}
+:root {
+  --toolbox-button-box-shadow-focus: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
+}
+
+.toolbox-always-on-top:hover {
+  background-color: var(--theme-toolbar-hover);
+  border-color: var(--tab-line-hover-color);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .toolbox-always-on-top.checked:not(.toolbox-is-focused) {
+    animation: 0.5s linear 0s 1 normal blink-always-on-top;
+  }
+
+  @keyframes blink-always-on-top {
+    from {
+      background-color: var(--theme-toolbar-background-highlighted);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+}
+
+.toolbox-always-on-top.checked:not(:active),
+.toolbox-always-on-top:not(.checked):active {
+  color: var(--theme-icon-checked-color);
+}
+
+.toolbox-always-on-top.checked:hover:not(:active),
+.toolbox-always-on-top:not(.checked):hover:active {
+  border-color: var(--tab-line-selected-color);
+}
+
+/*
+ *  Debug Target labels with icon layout
+ *  +------+------------------------+---------------+
+ *  | icon | label text (bold)      | optional text |
+ *  | 20px |     max-content        | max-content   |
+ *  +------+------------------------+---------------+
+ */
+.debug-target-info .iconized-label {
+  display: grid;
+  align-items: center;
+  white-space: nowrap;
+  grid-column-gap: 8px;
+  grid-template-columns: 20px auto auto;
+  padding: 0 var(--padding-inline-end-size);
+}
+
+.debug-target-navigation {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  padding: 0 4px;
+}
+
+.debug-target-info .iconized-label:not(:last-child) {
+  border-inline-end: var(--border-inline-end-width) solid var(--theme-splitter-color);
+}
+
+.debug-target-info .iconized-label img {
+  width: 20px;
+  height: 20px;
+}
+
+.debug-target-info img {
+  -moz-context-properties: fill;
+  fill: var(--theme-toolbar-color);
+}
+
+/*
+ * XXX: This was added to match the padding 8px used by the reload button.
+ * This padding makes the debug target component taller and also creates
+ * spacing with the debug-target-title separator.
+ * See Bug 1641920 for improving the CSS of the DebugTargetInfo component.
+ */
+.debug-target-info .debug-target-url-readonly {
+  padding: 8px;
+}
+
+.debug-target-info .navigation-button {
+  padding: 8px;
+  margin: auto 2px;
+  grid-column-gap: 0;
+  border: 0;
+  background: var(--theme-toolbarbutton-background);
+  --border-inline-end-width: 0;
+}
+
+.debug-target-info .navigation-button > img:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.debug-target-info .navigation-button:hover {
+  background-color: var(--toolbarbutton-hover-background);
+}
+
+.debug-target-info .navigation-button:focus {
+  box-shadow: var(--toolbox-button-box-shadow-focus);
+}
+
+.debug-target-info .navigation-button:active {
+  background-color: var(--theme-toolbarbutton-active-background);
+}
+
+.debug-target-info .navigation-button img {
+  fill: var(--theme-toolbarbutton-color);
+}
+
+.debug-target-info .navigation-button:active img {
+  fill: var(--theme-toolbarbutton-active-color);
+}
+
+.debug-target-info .debug-target-url {
+  display: flex;
+  flex: 1;
+  align-self: center;
+  min-width: 0;
+}
+
+/* Add some inline-end padding when the debug target url is the last child */
+.debug-target-info .debug-target-url:is(:last-child) {
+  padding-inline-end: var(--padding-inline-end-size);
+}
+
+.debug-target-info .debug-target-url-input {
+  border: 1px solid var(--theme-toolbarbutton-active-background);
+  border-radius: 2px;
+  height: 20px;
+  padding-inline-start: 10px;
+  /* Ensure that the url is displayed correctly for RTL locales. */
+  unicode-bidi: plaintext;
+  text-align: match-parent;
+}
+
+.debug-target-info .debug-target-url-input,
+.debug-target-info .debug-target-url-form {
+  width: 100%;
+}
+
+/* Toolbox tabbar */
+
+.devtools-tabbar {
+  appearance: none;
+  /* For narrow devtool width, we define the each column width of tabbar.
+    Defined layout is as follow:
+
+    -------------------------------------------------
+    | Picker |  tooltabs  |  commands |   controls  |
+    |  auto  | 26px ~ 1fr |    auto   |  max-content|
+    -------------------------------------------------
+  */
+  display: grid;
+  grid-template-columns: auto minmax(26px, 1fr) auto max-content;
+  background: var(--theme-tab-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  box-sizing: border-box;
+  min-height: 29px;
+}
+
+.dragging #toolbox-panel-iframe-webconsole {
+  pointer-events: none;
+}
+
+.toolbox-tabs-wrapper {
+  position: relative;
+  display: flex;
+  flex: 1;
+}
+
+/* These classes use to stretch the tool tabs wrapper width if toolbox does'n
+  have start buttons or end buttons element. */
+
+.devtools-tabbar .toolbox-tabs-wrapper {
+  grid-column-start: 2;
+  grid-column-end: 3;
+}
+
+.devtools-tabbar-has-start .toolbox-tabs-wrapper {
+  grid-column-start: 1;
+}
+
+.devtools-tabbar-has-end .toolbox-tabs-wrapper {
+  grid-column-end: 4;
+}
+
+.toolbox-tabs {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  margin: 0;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Set flex attribute to Toolbox buttons and Picker container so,
+   they don't overlap with the tab bar */
+#toolbox-buttons-start,
+#toolbox-buttons-end,
+#toolbox-controls {
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+}
+
+/* Toolbox tabs */
+
+.devtools-tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-height: 24px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--theme-toolbar-color);
+  background-color: transparent;
+}
+
+.devtools-tab-label {
+  font-size: 12px;
+  mask-image: linear-gradient(to left, transparent 0, black 6px);
+  /* Set the end padding on the label to make sure the label gets faded out properly */
+  padding-inline-end: 8px;
+  min-width: 1px;
+}
+
+.devtools-tab-label:-moz-locale-dir(rtl) {
+  mask-image: linear-gradient(to right, transparent 0, black 6px);
+}
+
+.devtools-tab .devtools-tab-badge {
+  color: var(--theme-highlight-blue);
+  font-size: 80%;
+  font-weight: 500;
+  margin-inline-start: 4px;
+}
+
+.devtools-tab-icon-only {
+  min-width: 26px;
+}
+
+.devtools-tab:hover,
+.devtools-tab:focus {
+  background-color: var(--theme-toolbar-hover);
+}
+
+/* Remove system control border from devtools-tab. */
+.devtools-tab::-moz-focus-inner {
+  border: 0;
+}
+
+.devtools-tab:hover:active {
+  background-color: var(--theme-toolbar-hover-active);
+}
+
+.devtools-tab.selected {
+  color: var(--theme-toolbar-selected-color);
+}
+
+.devtools-tab > img {
+  border: none;
+  margin: 0;
+  margin-inline: 8px 6px;
+  height: 16px;
+  width: 16px;
+  vertical-align: text-top;
+  flex-shrink: 0;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-color);
+}
+
+.devtools-tab.selected > img {
+  fill: var(--theme-toolbar-selected-color);
+}
+
+.devtools-tab.highlighted > img {
+  fill: var(--theme-toolbar-highlighted-color);
+}
+
+/* Toolbox controls */
+
+.devtools-tabbar-button {
+  appearance: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 26px;
+  margin: 0;
+  padding: 4px;
+  border: none;
+  direction: ltr;
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--theme-icon-color);
+  background-color: transparent;
+}
+
+/* Button icon style */
+.devtools-tabbar-button::before {
+  content: "";
+  flex: none;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 0 1px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.devtools-tabbar-button::-moz-focus-inner {
+  border: none;
+}
+
+.devtools-tabbar-button:focus {
+  outline: none;
+  background-color: var(--theme-toolbar-hover);
+}
+
+.devtools-tabbar-button:hover,
+.devtools-tabbar-button.checked {
+  background-color: var(--theme-toolbar-hover);
+}
+
+.devtools-tabbar-button.checked,
+.devtools-tabbar-button:active {
+  color: var(--theme-icon-checked-color);
+}
+
+.devtools-tabbar-button:disabled {
+  color: var(--theme-icon-dimmed-color) !important;
+  background-color: transparent !important;
+}
+
+#tools-chevron-menu-button::before {
+  background-image: url("chrome://devtools/skin/images/command-chevron.svg");
+}
+
+#tools-chevron-menu-button:-moz-locale-dir(rtl)::before {
+  transform: rotate(180deg);
+}
+
+/* On OSX the cursor turns into a window-resizing cursor at the edges of the
+ * window, so bring the end of the toolbox in. */
+:root[platform="mac"] #toolbox-controls {
+  margin-inline-end: 2px;
+}
+
+#toolbox-buttons-start > .devtools-separator {
+  margin-inline: 0;
+}
+
+#toolbox-buttons-end > .devtools-separator {
+  margin-inline: 5px;
+}
+
+#toolbox-close::before {
+  background-image: url("chrome://devtools/skin/images/close.svg");
+}
+
+#toolbox-meatball-menu-button::before {
+  background-image: url("chrome://devtools/skin/images/more.svg");
+}
+
+#toolbox-meatball-menu-dock-bottom {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/dock-bottom.svg");
+}
+
+#toolbox-meatball-menu-dock-left {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/dock-side-left.svg");
+}
+
+#toolbox-meatball-menu-dock-right {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/dock-side-right.svg");
+}
+
+#toolbox-meatball-menu-dock-window {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/dock-undock.svg");
+}
+
+#toolbox-meatball-menu-dock-window:-moz-locale-dir(rtl) .label::before {
+  transform: scaleX(-1);
+}
+
+#toolbox-meatball-menu-splitconsole {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/command-console.svg");
+}
+
+#toolbox-meatball-menu-noautohide {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/command-noautohide.svg");
+}
+
+#toolbox-meatball-menu-pseudo-locale-accented {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/command-accented.svg");
+}
+
+#toolbox-meatball-menu-pseudo-locale-bidi {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/command-bidi.svg");
+}
+
+#toolbox-meatball-menu-settings {
+  --menuitem-icon-image: url("chrome://devtools/skin/images/settings.svg");
+}
+
+.toolbox-error {
+  background-color: transparent !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.toolbox-error::before {
+  background-image: url("chrome://devtools/skin/images/error-small.svg");
+  fill: var(--theme-icon-error-color) !important;
+}
+
+.toolbox-error:hover {
+  background-color: var(--toolbarbutton-hover-background) !important;
+}
+
+/* Command buttons */
+
+#command-button-pick {
+  min-width: 32px;
+}
+
+#command-button-pick::before {
+  background-image: url("chrome://devtools/content/shared/images/command-pick.svg");
+}
+
+#command-button-pick.accessibility::before {
+  background-image: url("chrome://devtools/skin/images/command-pick-accessibility.svg");
+}
+
+#command-button-pick.remote-fenix::before {
+  background-image: url("chrome://devtools/content/shared/images/command-pick-remote-touch.svg");
+}
+
+/* Command button images */
+
+#command-button-screenshot::before {
+  background-image: url("chrome://devtools/skin/images/command-screenshot.svg");
+}
+
+#command-button-responsive::before {
+  background-image: url("chrome://devtools/skin/images/command-responsivemode.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0;
+}
+
+#command-button-responsive.checked::before {
+  fill-opacity: 0.15;
+}
+
+.theme-dark #command-button-responsive.checked::before {
+  fill-opacity: 0.25;
+}
+
+#command-button-experimental-prefs::before {
+  background-image: url("chrome://global/skin/icons/experiments.svg");
+  background-size: cover;
+}
+
+.experimental-pref-icon::before {
+  content: "";
+  background-image: url("chrome://devtools/skin/images/help.svg");
+  -moz-context-properties: fill;
+  fill: var(--theme-body-color);
+  display: block;
+  background-size: 12px;
+  width: 12px;
+  height: 12px;
+}
+
+#command-button-rulers::before {
+  background-image: url("chrome://devtools/skin/images/command-rulers.svg");
+}
+
+#command-button-measure::before {
+  background-image: url("chrome://devtools/skin/images/command-measure.svg");
+}
+
+#command-button-frames::before {
+  background-image: url("chrome://devtools/skin/images/command-frames.svg");
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0;
+}
+
+#command-button-frames.checked::before {
+  fill-opacity: 0.15;
+}
+
+.theme-dark #command-button-frames.checked::before {
+  fill-opacity: 0.25;
+}
+
+/* Tooltip of frames menu  */
+
+#command-button-frames-panel > .tooltip-panel {
+  max-width: 500px;
+  overflow-y: auto;
+}
+
+#toolbox-frame-menu span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Toolbox panels */
+
+.toolbox-panel {
+  display: flex;
+  flex: 1;
+  visibility: collapse;
+}
+
+.toolbox-panel[selected] {
+  visibility: visible;
+}
+
+/**
+ * When panels are collapsed or hidden, making sure that they are also
+ * inaccessible by keyboard. This is not the case by default because the are
+ * predominantly hidden using visibility: collapse; style or collapsed
+ * attribute.
+ */
+.toolbox-panel *,
+#toolbox-panel-webconsole[collapsed] * {
+  -moz-user-focus: ignore;
+}
+
+#toolbox-panel-webconsole {
+  min-height: 75px;
+  flex: 1 auto;
+}
+
+#toolbox-panel-webconsole[collapsed],
+#toolbox-deck[collapsed] {
+  height: 0 !important;
+  min-height: 0 !important;
+}
+
+#toolbox-deck:not([collapsed]),
+#toolbox-panel-webconsole[expanded] {
+  /* Override the splitter-set height and flex instead */
+  height: auto !important;
+}
+
+/**
+ * Ensure that selected toolbox panel's contents are keyboard accessible as they
+ * are explicitly made not to be when hidden (default).
+ */
+.toolbox-panel[selected] * {
+  -moz-user-focus: normal;
+}
+
+.toolbox-panel-iframe {
+  /* Allow toolbox frames to shrink under the default size and flex */
+  contain: size;
+}
+
+#toolbox-container {
+  flex: 1;
+  /* Let the component gain focus when a click hits an empty area */
+  -moz-user-focus: normal;
+}
+
+#toolbox-deck {
+  min-height: 75px;
+  /* Set large flex to allow the toolbox-panel-webconsole to have a
+     height set to a small value without flexing to fill up extra
+     space. There must be a flex on both to ensure that the console
+     panel itself is sized properly */
+  flex: 10000 10000;
+}
+
+#toolbox-container:focus {
+  outline: 0;
+}
+
+/* Toolbox tabs reordering */
+#toolbox-container.tabs-reordering > .theme-body {
+  pointer-events: none;
+}
+
+#toolbox-container.tabs-reordering
+  .devtools-tab:not(.selected):hover
+  .devtools-tab-line {
+  background: transparent;
+  opacity: 0;
+  transition: none;
+}
+
+#toolbox-container.tabs-reordering .devtools-tab.selected {
+  background-color: var(--theme-toolbar-hover);
+  z-index: 1;
+}
diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css
new file mode 100644
index 0000000000..11de782820
--- /dev/null
+++ b/devtools/client/themes/tooltips.css
@@ -0,0 +1,912 @@
+/* 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/. */
+
+/* Import stylesheets for specific tooltip widgets */
+@import url(chrome://devtools/skin/accessibility-color-contrast.css);
+@import url(chrome://devtools/skin/badge.css);
+@import url(chrome://devtools/content/shared/widgets/cubic-bezier.css);
+@import url(chrome://devtools/content/shared/widgets/filter-widget.css);
+@import url(chrome://devtools/content/shared/widgets/linear-widget.css);
+@import url(chrome://devtools/content/shared/widgets/spectrum.css);
+@import url(chrome://devtools/skin/variables.css);
+/*
+ * compatibility.css is primarily used by the Compatibility panel, so import it in a layer
+ * to give it a lower importance than the rule here and mitigate styling mismatch.
+ */
+@import url(chrome://devtools/skin/compatibility.css) layer(shared);
+
+/* Tooltip specific theme variables */
+
+.theme-dark {
+  --bezier-diagonal-color: #eee;
+  --bezier-grid-color: rgba(255, 255, 255, 0.1);
+
+  /* Tooltips */
+  --theme-tooltip-color: var(--theme-text-color-strong);
+  --theme-tooltip-background: var(--theme-popup-background);
+  --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
+
+  /* Doorhangers */
+  /* These colors are based on the colors used for doorhangers elsewhere in
+   * Firefox. */
+  --theme-arrowpanel-background: var(--theme-popup-background);
+  --theme-arrowpanel-color: var(--theme-popup-color);
+  --theme-arrowpanel-border-color: var(--theme-popup-border-color);
+  --theme-arrowpanel-separator: rgba(249,249,250,.1);
+  --theme-arrowpanel-dimmed: var(--theme-popup-dimmed);
+  --theme-arrowpanel-dimmed-further: rgba(249,249,250,.15);
+  --theme-arrowpanel-disabled-color: rgba(249,249,250,.5);
+}
+
+.theme-light {
+  --bezier-diagonal-color: rgba(0, 0, 0, 0.2);
+  --bezier-grid-color: rgba(0, 0, 0, 0.05);
+
+  /* Tooltips */
+  --theme-tooltip-color: var(--theme-body-color);
+  --theme-tooltip-background: rgb(255, 255, 255);
+  --theme-tooltip-shadow: var(--grey-90-a10);
+
+  /* Doorhangers */
+  /* These colors are based on the colors used for doorhangers elsewhere in
+   * Firefox. */
+  --theme-arrowpanel-background: var(--theme-popup-background);
+  --theme-arrowpanel-color: var(--theme-popup-color);
+  --theme-arrowpanel-border-color: var(--theme-popup-border-color);
+  --theme-arrowpanel-separator: ThreeDShadow;
+  --theme-arrowpanel-dimmed: var(--theme-popup-dimmed);
+  --theme-arrowpanel-dimmed-further: hsla(0,0%,80%,.45);
+  --theme-arrowpanel-disabled-color: GrayText;
+}
+
+:root {
+  --theme-arrowpanel-border-radius: 0px;
+}
+:root[platform="mac"] {
+  --theme-arrowpanel-border-radius: 3.5px;
+}
+
+:root[platform="mac"].theme-light {
+  --theme-arrowpanel-separator: hsla(210,4%,10%,.14);
+}
+
+strong {
+  font-weight: bold;
+}
+
+/* Tooltip: CSS variables tooltip */
+
+.devtools-tooltip-css-variable,
+.devtools-tooltip-css-compatibility {
+  color: var(--theme-body-color);
+  padding: 2px;
+  direction: ltr;
+}
+
+/* Tooltip: JS Evaluation Context */
+
+#webconsole-input-evaluationsButton > .tooltip-panel {
+  /* helps the JS Context selector to have scrollbars when content exceed the vertical size of the popup */
+  overflow-y: auto;
+}
+
+
+/* Tooltip: Inactive CSS tooltip */
+
+.devtools-tooltip-inactive-css,
+.devtools-tooltip-css-compatibility {
+  color: var(--theme-arrowpanel-color);
+  margin: 0;
+  padding: 10px 14px 12px 14px;
+  font-size: 12px;
+}
+
+.devtools-tooltip-inactive-css,
+.devtools-tooltip-css-compatibility,
+.devtools-tooltip-inactive-css strong,
+.devtools-tooltip-css-compatibility strong {
+  user-select: text;
+  -moz-user-focus: normal;
+}
+
+.devtools-tooltip-inactive-css p,
+.devtools-tooltip-css-compatibility p {
+  margin-block-start: 0;
+  margin-block-end: calc(1em - 4px);
+}
+
+.devtools-tooltip-inactive-css p:last-child,
+.devtools-tooltip-css-compatibility p:last-child {
+  margin-block-end: 0;
+}
+
+.devtools-tooltip-inactive-css .link,
+.devtools-tooltip-css-compatibility .link {
+  color: var(--theme-highlight-blue);
+  cursor: pointer;
+}
+
+/* Tooltip: Compatibility tooltip */
+
+.tooltip-container[type="doorhanger"] .tooltip-panel ul.compatibility-unsupported-browser-list {
+  width: 100%;
+  list-style: none;
+  padding: 0;
+  column-gap: var(--compatibility-tooltip-base-unit);
+  display: flex;
+}
+
+/* Tooltip: query container info */
+.devtools-tooltip-query-container {
+  color: var(--theme-arrowpanel-color);
+  margin: 0;
+  padding: 10px 14px 12px;
+  font-size: 12px;
+  user-select: text;
+  -moz-user-focus: normal;
+}
+
+.devtools-tooltip-query-container header {
+  --block-end-space: 5px;
+  border-block-end: 1px solid var(--theme-arrowpanel-dimmed);
+  padding-block-end: var(--block-end-space);
+  margin-block-end: var(--block-end-space);
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  color: var(--theme-body-color);
+}
+
+.devtools-tooltip-query-container ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.devtools-tooltip-query-container .objectBox-node .tag-name {
+  color: var(--theme-highlight-blue);
+}
+
+.devtools-tooltip-query-container .objectBox-node .attribute-name {
+  color: var(--theme-highlight-red);
+}
+
+.devtools-tooltip-query-container .property-name {
+  color: var(--theme-highlight-blue);
+}
+
+.devtools-tooltip-query-container .property-value {
+  color: var(--theme-highlight-red);
+}
+
+
+/* Tooltip: Tiles */
+
+.devtools-tooltip-tiles {
+  background-color: #eee;
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+  background-size: 20px 20px;
+  background-position: 0 0, 10px 10px;
+}
+
+.tooltip-container {
+  display: none;
+  position: fixed;
+  z-index: 9999;
+  background: transparent;
+  pointer-events: none;
+  overflow: hidden;
+  filter: drop-shadow(0 2px 8px var(--theme-tooltip-shadow));
+}
+
+.tooltip-xul-wrapper {
+  appearance: none;
+  background: transparent;
+  overflow: visible;
+  border-style: none;
+}
+
+.tooltip-xul-wrapper .tooltip-container {
+  /**
+   * As the width/height of xul:panel (.tooltip-xul-wrapper) is dependent on the
+   * width/height of the inner content. Thus, if "absolute" position here, as the
+   * width/height that are conveyed to the panel will be zero, the tooltip will be
+   * invisible.
+   */
+  position: static;
+}
+
+.tooltip-top {
+  flex-direction: column;
+}
+
+.tooltip-bottom {
+  flex-direction: column-reverse;
+}
+
+.tooltip-panel{
+  background-color: var(--theme-tooltip-background);
+  pointer-events: all;
+  flex-grow: 1;
+}
+
+.tooltip-visible {
+  display: flex;
+}
+
+.tooltip-hidden {
+  display: flex;
+  visibility: hidden;
+}
+
+/* Tooltip : flexible height styles */
+
+.tooltip-flexible-height .tooltip-panel {
+  /* In flexible mode the tooltip panel should only grow according to its content. */
+  flex-grow: 0;
+}
+
+.tooltip-flexible-height .tooltip-filler {
+  /* In flexible mode the filler should grow as much as possible. */
+  flex-grow: 1;
+}
+
+/* type="arrow" overrides: remove arrow decorations for the xul <panel> wrapper */
+
+.tooltip-xul-wrapper[type="arrow"][side] {
+  margin: 0;
+}
+
+/* The arrow image is hidden because the panel is opened using openPopupAtScreen(). */
+
+/* The arrow content is styled on the HTML, so we don't need the styling on the XUL element */
+.tooltip-xul-wrapper[type="arrow"]::part(content) {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+}
+
+/* Tooltip : arrow style */
+
+.tooltip-xul-wrapper .tooltip-container {
+  /* When displayed in a XUL panel the drop shadow would be abruptly cut by the panel */
+  filter: none;
+}
+
+.tooltip-container[type="arrow"] > .tooltip-panel {
+  position: relative;
+  min-height: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  border-radius: var(--theme-arrowpanel-border-radius);
+}
+
+.tooltip-top[type="arrow"] .tooltip-panel {
+  top: 0;
+}
+
+.tooltip-bottom[type="arrow"] .tooltip-panel {
+  bottom: 0;
+}
+
+.tooltip-arrow {
+  position: relative;
+  height: 16px;
+  width: 32px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+/* In RTL locales and context, only use RTL on the tooltip content, keep LTR for positioning */
+.tooltip-container:-moz-locale-dir(rtl),
+.tooltip-container:dir(rtl) {
+  direction: ltr;
+}
+
+.tooltip-panel:-moz-locale-dir(rtl),
+.tooltip-panel:dir(rtl) {
+  direction: rtl;
+}
+
+.tooltip-top .tooltip-arrow {
+  /**
+   * The -1px margin is there to make sure the middle of the arrow overlaps with
+   * the border of the tooltip container.
+   * The -2px is there because the rotated arrow is not visually as tall as its
+   * container. Since the positioning logic relies on measuring the size of the
+   * tooltip, this -2px ensures the measured size matches the visuals (and not
+   * simply the box model).
+   */
+  margin-bottom: -2px;
+  margin-top: -1px;
+}
+
+.tooltip-bottom .tooltip-arrow {
+  /* See comment in .tooltip-top .tooltip-arrow (inverted here) */
+  margin-bottom: -1px;
+  margin-top: -2px;
+}
+
+.tooltip-arrow:before {
+  content: "";
+  position: absolute;
+  width: 21px;
+  height: 21px;
+  margin-left: 4px;
+  background: linear-gradient(-45deg,
+    var(--theme-tooltip-background) 50%, transparent 50%);
+  border: 0 none;
+  pointer-events: all;
+}
+
+.tooltip-bottom .tooltip-arrow:before {
+  margin-top: 5px;
+  transform: rotate(225deg);
+}
+
+.tooltip-top .tooltip-arrow:before {
+  margin-top: -12px;
+  transform: rotate(45deg);
+}
+
+/* XUL panels have a default border, but pure HTML tooltips don't have one. */
+.tooltip-container[type="arrow"]:not(.tooltip-container-xul) > .tooltip-panel,
+.tooltip-container[type="arrow"]:not(.tooltip-container-xul) > .tooltip-arrow::before {
+  border: 1px solid var(--theme-arrowpanel-border-color);
+}
+
+/* Tooltip : doorhanger style */
+
+.tooltip-container[type="doorhanger"] > .tooltip-panel {
+  color: var(--theme-arrowpanel-color);
+  margin: 0;
+  padding: 0;
+  max-width: 320px;
+}
+
+.tooltip-container[type="doorhanger"] > .tooltip-panel,
+.tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
+  background: var(--theme-arrowpanel-background);
+  border: 1px solid var(--theme-arrowpanel-border-color);
+  border-radius: var(--theme-arrowpanel-border-radius);
+  box-shadow: 0 0 4px hsla(210,4%,10%,.2);
+}
+
+:root[platform="mac"] .tooltip-container[type="doorhanger"] > .tooltip-panel,
+:root[platform="mac"] .tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
+  box-shadow: none;
+  /*
+   * The above should be:
+   *
+   *   box-shadow: 0 0 0 1px var(--theme-arrowpanel-border-color);
+   *
+   * but although that gives the right emphasis to the border it makes the
+   * platform shadow much too dark.
+   */
+}
+
+:root[platform="mac"].theme-light .tooltip-container[type="doorhanger"] > .tooltip-panel,
+:root[platform="mac"].theme-light .tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
+  border: none;
+}
+
+.tooltip-container[type="doorhanger"] > .tooltip-arrow {
+  /* Desired width of the arrow */
+  --arrow-width: 20px;
+
+  /* Amount of room to allow for the shadow. Should be about half the radius. */
+  --shadow-radius: 4px;
+  --shadow-margin: calc(var(--shadow-radius) / 2);
+
+  /*
+   * Crop the arrow region to show half the arrow plus allow room for margins.
+   *
+   * The ARROW_WIDTH in HTMLTooltip.js needs to match the following value.
+   */
+  width: calc(var(--arrow-width) + 2 * var(--shadow-margin));
+  height: calc(var(--arrow-width) / 2 + var(--shadow-margin));
+
+  /**
+   * The rotated box slightly overlaps the left edge of the arrow container.
+   * This means the arrow is not centered in its own box by default.
+   */
+  padding-left: 1px;
+}
+
+.tooltip-container[type="doorhanger"] > .tooltip-arrow::before {
+  /* Make sure the border is included in the size */
+  box-sizing: border-box;
+
+  /* Don't inherit any rounded corners. */
+  border-radius: 0;
+
+  /*
+   * When the box is rotated, it should have width <arrow-width>.
+   * That makes the length of one side of the box equal to:
+   *
+   *    (<arrow-width> / 2) / sin 45
+   */
+  --sin-45: 0.707106781;
+  --square-side: calc(var(--arrow-width) / 2 / var(--sin-45));
+  width: var(--square-side);
+  height: var(--square-side);
+
+  /*
+   * The rotated square will overshoot the left side
+   * and need to be shifted in by:
+   *
+   *   (<arrow-width> - square side) / 2
+   *
+   * But we also want to shift it in so that the box-shadow
+   * is not clipped when we clip the parent so we add
+   * a suitable margin for that.
+   */
+  --overhang: calc((var(--arrow-width) - var(--square-side)) / 2);
+  margin-left: calc(var(--overhang) + var(--shadow-margin));
+}
+
+.tooltip-container[type="doorhanger"] .menu-standard-padding {
+  margin: 0;
+  padding: 6px 0;
+}
+
+.tooltip-container[type="doorhanger"].tooltip-top > .tooltip-arrow {
+  /* Overlap the arrow with the 1px border of the doorhanger */
+  margin-top: -1px;
+}
+
+.tooltip-container[type="doorhanger"].tooltip-bottom > .tooltip-arrow {
+  /* Overlap the arrow with the 1px border of the doorhanger */
+  margin-bottom: -1px;
+}
+
+.tooltip-container[type="doorhanger"].tooltip-top > .tooltip-arrow::before {
+  /* Show only the bottom half of the box */
+  margin-top: calc(var(--square-side) / -2);
+}
+
+.tooltip-container[type="doorhanger"].tooltip-bottom > .tooltip-arrow::before {
+  /* Shift the rotated box in so that it is not clipped */
+  margin-top: calc(var(--overhang) + var(--shadow-margin));
+}
+
+.tooltip-container[type="doorhanger"] .tooltip-panel ul {
+  /* Override the display: flex declaration in xul.css
+   * or else menu items won't stack. */
+  display: block;
+}
+
+.tooltip-container[type="doorhanger"] .menuitem > .command {
+  display: flex;
+  align-items: baseline;
+  margin: 0;
+  padding: 4px 12px;
+  outline: none;
+  /*
+   * It doesn't really make sense, since if this is just about making the items
+   * easier to click we should be using min-width instead.
+   */
+  margin-inline-end: 15px;
+}
+
+.tooltip-container[type="doorhanger"] .menuitem > button.command:is([role="menuitem"],[role="menuitemcheckbox"],[role="link"]) {
+  appearance: none;
+  border: none;
+  color: var(--theme-arrowpanel-color);
+  background-color: transparent;
+  text-align: start;
+  width: 100%;
+}
+
+.tooltip-container[type="doorhanger"] .menuitem > .command:not([disabled],[open],:active):is(:hover,:focus) {
+  background-color: var(--theme-arrowpanel-dimmed);
+}
+
+.tooltip-container[type="doorhanger"] .menuitem > .command:-moz-focusring::-moz-focus-inner {
+  border-color: transparent;
+}
+
+.tooltip-container[type="doorhanger"] .menuitem > .command:not([disabled]):is([open],:hover:active) {
+  background-color: var(--theme-arrowpanel-dimmed-further);
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+}
+
+.tooltip-container[type="doorhanger"] .menuitem > .command[disabled] {
+  opacity: 0.5;
+}
+
+.tooltip-container[type="doorhanger"] .menuitem > .command[aria-checked="true"] {
+  list-style-image: none;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  background: url(chrome://devtools/skin/images/check.svg) no-repeat transparent;
+  background-position: 7px center;
+}
+
+.tooltip-container[type="doorhanger"] .menuitem > .command[aria-checked="true"]:-moz-locale-dir(rtl),
+.tooltip-container[type="doorhanger"] .menuitem > .command[aria-checked="true"]:dir(rtl) {
+  background-position-x: right 7px;
+}
+
+.tooltip-container[type="doorhanger"] .menuitem > .command > .label {
+  flex: 1;
+  font: menu;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.tooltip-container[type="doorhanger"] .checkbox-container .menuitem > .command > .label {
+  padding-inline-start: 16px;
+}
+
+.menu-button--iconic::before,
+.tooltip-container[type="doorhanger"] .menuitem > .command.iconic > .label::before {
+  content: " ";
+  display: inline-block;
+  margin-inline-end: 8px;
+  width: 16px;
+  height: 16px;
+  /* Better optical alignment than with 'vertical-align: middle'.
+     Works well with font sizes between 12px and 16px. */
+  vertical-align: -3px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  background-image: var(--menuitem-icon-image);
+  background-size: contain;
+  background-repeat: no-repeat;
+  /*
+   * The icons in the sidebar menu have opacity: 0.8 here, but those in the
+   * hamburger menu don't. For now we match the hamburger menu styling,
+   * especially because the 80% opacity makes the icons look dull in dark mode.
+   */
+}
+
+.tooltip-container[type="doorhanger"] .menuitem > .command > .accelerator {
+  margin-inline-start: 10px;
+  color: var(--theme-arrowpanel-disabled-color);
+  font: message-box;
+}
+
+.tooltip-container[type="doorhanger"] hr {
+  display: block;
+  border: none;
+  border-top: 1px solid var(--theme-arrowpanel-separator);
+  margin: 6px 0;
+  padding: 0;
+}
+
+.tooltip-container[type="doorhanger"] [role="menuseparator"] {
+  border: none;
+  border-bottom: 1px solid #cacdd3;
+  width: 100%;
+  height: 2px;
+  display: block;
+  background: none;
+  pointer-events: none;
+}
+
+/* Tooltip: Events */
+
+.devtools-tooltip-events-container {
+  border-radius: var(--theme-arrowpanel-border-radius);
+  height: 100%;
+  overflow-y: auto;
+}
+
+@media (-moz-overlay-scrollbars) {
+  .devtools-tooltip-events-container {
+    padding-inline: calc(env(scrollbar-inline-size) / 2);
+  }
+}
+
+.devtools-tooltip-events-container .event-header {
+  display: flex;
+  align-items: center;
+  box-sizing: content-box;
+  height: 24px;
+  padding: 0 4px;
+  border-top: 1px solid var(--theme-splitter-color);
+  cursor: pointer;
+  overflow: hidden;
+  color: var(--theme-tooltip-color);
+  background-color: var(--theme-tooltip-background);
+}
+
+.devtools-tooltip-events-container .event-header:first-child {
+  border-top-width: 0;
+}
+
+.event-header .theme-twisty {
+  flex: none;
+  width: 12px;
+  height: 12px;
+  margin-inline-end: 4px;
+  fill: currentColor;
+}
+
+.event-header.content-expanded .theme-twisty {
+  transform: none;
+}
+
+.event-tooltip-listener-toggle-checkbox {
+  flex-shrink: 0;
+}
+
+.event-tooltip-debugger-icon {
+  -moz-context-properties: stroke;
+  stroke: var(--theme-icon-color);
+  background-image: url("chrome://devtools/content/shared/components/reps/images/jump-definition.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  margin-inline-end: 4px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.event-tooltip-debugger-icon:hover {
+  background-color: var(--toolbarbutton-hover-background);
+}
+
+.event-tooltip-event-type,
+.event-tooltip-filename,
+.event-tooltip-attributes {
+  margin-inline-start: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.event-tooltip-event-type {
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.event-tooltip-filename {
+  margin: 0 5px;
+  font-size: 100%;
+  flex-shrink: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Force ellipsis to be displayed on the left */
+  direction: rtl;
+}
+
+.event-tooltip-content-box {
+  display: none;
+  height: 100px;
+  overflow: hidden;
+  margin-inline-end: 0;
+  border: 1px solid var(--theme-splitter-color);
+  border-width: 1px 0 0 0;
+}
+
+.event-toolbox-content-box iframe {
+  height: 100%;
+  border-style: none;
+}
+
+.event-tooltip-content-box[open] {
+  display: block;
+}
+
+.event-tooltip-source-container {
+  margin-top: 5px;
+  margin-bottom: 10px;
+  margin-inline-start: 5px;
+  margin-inline-end: 0;
+}
+
+.event-tooltip-source {
+  margin-bottom: 0;
+}
+
+.event-tooltip-attributes-container {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+.event-tooltip-attributes-box {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: 14px;
+  border-radius: 3px;
+  padding: 1px 3px;
+  margin-inline-start: 4px;
+  background-color: var(--theme-text-color-alt);
+  color: var(--theme-body-background);
+}
+
+.event-tooltip-attributes {
+  margin: 0;
+  font-size: 9px;
+  line-height: 14px;
+}
+
+.event-tooltip-editor-frame {
+  border-style: none;
+  height: 100%;
+  width: 100%;
+}
+
+/* Tooltip: HTML Search */
+
+#searchbox-panel-listbox {
+  width: 250px;
+  max-width: 250px;
+  overflow-x: hidden;
+}
+
+#searchbox-panel-listbox .autocomplete-item,
+#searchbox-panel-listbox .autocomplete-item[selected] {
+  overflow-x: hidden;
+}
+
+/* Tooltip: Image tooltip */
+
+/*
+ * Overview of the Image Tooltip layout.
+ *
+ * ┌─────────────────────────────────────────┐
+ * │ .devtools-tooltip-image-container       │
+ * │ ┌─────────────────────────────────────┐ │
+ * │ │ .devtools-tooltip-image-wrapper     │ │
+ * │ │ ┌─────────────────────────────────┐ │ │
+ * │ │ │ .devtools-tooltip-image         │ │ │
+ * │ │ │ (the actual image tag)          │ │ │
+ * │ │ └─────────────────────────────────┘ │ │
+ * │ └─────────────────────────────────────┘ │
+ * │ ┌─────────────────────────────────────┐ │
+ * │ │ .devtools-tooltip-image-dimensions  │ │
+ * │ └─────────────────────────────────────┘ │
+ * └─────────────────────────────────────────┘
+ *
+ */
+
+.devtools-tooltip-image-container {
+  /* Saved as variables to be synchronized easily with ImageTooltipHelper.js */
+  --image-tooltip-image-padding: 4px;
+  --image-tooltip-label-height: 20px;
+
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 100px;
+  text-align: center;
+}
+
+.devtools-tooltip-image-wrapper {
+  align-items: center;
+  display: flex;
+  flex: 1;
+  padding: var(--image-tooltip-image-padding);
+  justify-content: center;
+  min-height: 1px
+}
+
+.devtools-tooltip-image {
+  max-height: 100%;
+}
+
+.devtools-tooltip-image-dimensions {
+  height: var(--image-tooltip-label-height);
+  text-align: center;
+}
+
+.devtools-tooltip-image-broken {
+  box-sizing: border-box;
+  height: 100%;
+  padding: 7px;
+}
+
+/* Tooltip: Invoke getter confirm Tooltip */
+
+.invoke-confirm {
+  color: var(--theme-popup-color);
+  border: 1px solid rgba(0,0,0, 0.1);
+  max-width: 212px;
+}
+
+.invoke-confirm .close-confirm-dialog-button::before {
+  background-image: url("chrome://devtools/skin/images/close.svg");
+}
+
+.invoke-confirm .confirm-label {
+  margin: 0;
+  padding: 4px;
+  background-color: var(--theme-toolbar-background-alt);
+  display: flex;
+  align-items: start;
+}
+
+.invoke-confirm .confirm-label p {
+  margin: 0;
+  padding: 0;
+  flex-grow: 1;
+  hyphens: auto;
+}
+
+.invoke-confirm .emphasized {
+  font-family: var(--monospace-font-family);
+  font-weight: bold;
+  overflow-wrap: break-word;
+}
+
+.invoke-confirm .close-confirm-dialog-button {
+  padding: 0;
+  margin: 0;
+  flex-grow: 0;
+}
+
+.invoke-confirm .confirm-button {
+  background-color: var(--theme-selection-background);
+  color: white;
+  border: none;
+  padding: 6px;
+  display: block;
+  width: 100%;
+  text-align: left;
+}
+
+/* The button already has a "selected" style, we can remove the focus rings. */
+.confirm-button:-moz-focusring,
+.confirm-button::-moz-focus-inner {
+  outline: none;
+  border: none;
+}
+
+.invoke-confirm .learn-more-link {
+  color: var(--theme-highlight-blue);
+  padding-inline-end: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  min-height: 20px;
+  cursor: pointer;
+}
+
+.invoke-confirm .learn-more-link::after {
+  content: "";
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+  -moz-context-properties: fill;
+  background-image: url(chrome://devtools/skin/images/help.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-inline-start: 4px;
+}
+
+/* Tooltip: Rule Preview */
+
+.rule-preview-tooltip-container {
+  display: flex;
+  flex-direction: column;
+  max-width: 200px;
+  color: var(--theme-body-color);
+  padding: 5px;
+}
+
+.rule-preview-tooltip-message {
+  white-space: pre-wrap;
+}
+
+.rule-preview-tooltip-source-rule-footer {
+  align-self: center;
+  border-top: 1px solid var(--theme-body-color);
+  margin-top: 5px;
+  margin-right: 5px;
+  margin-left: 5px;
+  padding: 3px;
+}
diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css
new file mode 100644
index 0000000000..dadf4a4179
--- /dev/null
+++ b/devtools/client/themes/variables.css
@@ -0,0 +1,359 @@
+/* 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/. */
+
+/*
+ * IMPORTANT NOTE
+ * This file is parsed in js (see client/shared/theme.js)
+ * so the formatting should be consistent (i.e. no '}' inside a rule).
+ */
+
+:root {
+  --theme-focus-border-color-textbox: #0675d3;
+  --theme-textbox-box-shadow: rgba(97, 181, 255, 0.75);
+
+  /* Text sizes */
+  --theme-body-font-size: 11px;
+  --theme-code-font-size: 11px;
+  --theme-code-line-height: calc(15 / 11);
+
+  /* Toolbar size (excluding borders) */
+  --theme-toolbar-height: 24px;
+  --theme-toolbar-tall-height: 28px;
+
+  /* For accessibility purposes we want to enhance the focus styling. This
+   * should improve keyboard navigation usability. */
+  --theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
+  --theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
+
+  /* Standardizes the height of items in the Watch Expressions and XHR Breakpoints panes */
+  --expression-item-height: 20.5px;
+
+  /* The photon animation curve */
+  --animation-curve: cubic-bezier(0.07, 0.95, 0, 1);
+
+  /* This should be similar to --highlighter-box-content-color from highlighter.css,
+   * with lower opacity than the 0.6 we apply on highlighter so this can be used as
+   * background color without being too bold
+   */
+  --dimmed-highlighter-box-content-color:hsl(197,71%,73%,.3);
+
+  /*
+   * Photon Colors CSS Variables v3.3.2
+   * - Colors are taken from https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.css
+   * - We only add Photon color variables that we are actually using; unused
+   *   variables will fail browser/base/content/test/static/browser_parsable_css.js
+   * - We added a few unofficial colors: a few intermediary values (e.g. Blue 45),
+   *   and lighter variants for the dark theme (e.g. Red 20, Red 40).
+   */
+  --magenta-50: #ff1ad9;
+  --magenta-65: #dd00a9;
+  --magenta-70: #b5007f;
+
+  --purple-50: #9400ff;
+  --purple-60: #8000d7;
+  --purple-30: #c069ff;
+
+  --blue-30: #75baff;
+  --blue-40: #45a1ff;
+  --blue-50: #0a84ff;
+  --blue-50-a30: rgba(10, 132, 255, 0.3);
+  --blue-55: #0074e8;
+  --blue-60: #0060df;
+  --blue-70: #003eaa;
+  --blue-80: #002275;
+
+  --teal-60: #00c8d7;
+  --teal-70: #008ea4;
+
+  --green-50: #30e60b;
+  --green-60: #12bc00;
+  --green-70: #058b00;
+
+  --yellow-50: #ffe900;
+  --yellow-60: #d7b600;
+  --yellow-65: #be9b00;
+  --yellow-70: #a47f00;
+  --yellow-80: #715100;
+
+  --red-20: #ffb3d2;
+  --red-40: #ff3b6b;
+  --red-40-a90: rgba(255, 59, 107, 0.9);
+  --red-50: #ff0039;
+  --red-60: #d70022;
+  --red-70: #a4000f;
+
+  --grey-10: #f9f9fa;
+  --grey-10-a15: rgba(249, 249, 250, 0.15);
+  --grey-10-a20: rgba(249, 249, 250, 0.2);
+  --grey-10-a25: rgba(249, 249, 250, 0.25);
+  --grey-10-a30: rgba(249, 249, 250, 0.3);
+  --grey-20: #ededf0;
+  --grey-25: #e0e0e2;
+  --grey-30: #d7d7db;
+  --grey-35: #c3c3c6;
+  --grey-40: #b1b1b3;
+  --grey-43: #a4a4a4;
+  --grey-45: #939395;
+  --grey-50: #737373;
+  --grey-55: #5c5c5f;
+  --grey-60: #4a4a4f;
+  --grey-70: #38383d;
+  --grey-80: #2a2a2e;
+  --grey-85: #1b1b1d;
+  --grey-90: #0c0c0d;
+  --grey-90-a05: rgba(12, 12, 13, 0.05);
+  --grey-90-a10: rgba(12, 12, 13, 0.1);
+  --grey-90-a15: rgba(12, 12, 13, 0.15);
+  --grey-90-a20: rgba(12, 12, 13, 0.2);
+  --grey-90-a30: rgba(12, 12, 13, 0.3);
+}
+
+:root.theme-light {
+  --theme-body-background: white;
+  --theme-body-emphasized-background: var(--grey-10);
+  --theme-body-alternate-emphasized-background: #f0f9fe;
+  --theme-sidebar-background: white;
+
+  /* Toolbar */
+  --theme-tab-toolbar-background: var(--grey-10);
+  --theme-toolbar-background: var(--grey-10);
+  --theme-toolbar-color: var(--grey-90);
+  --theme-toolbar-selected-color: var(--blue-60);
+  --theme-toolbar-highlighted-color: var(--green-60);
+  --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
+  --theme-toolbar-background-alt: #f5f5f5;
+  --theme-toolbar-background-highlighted: #b9dcff;
+  --theme-toolbar-hover: var(--grey-20);
+  --theme-toolbar-hover-active: var(--grey-20);
+  --theme-toolbar-separator: var(--grey-90-a10);
+
+  /* Toolbar buttons */
+  --toolbarbutton-background: var(--grey-10);
+  --toolbarbutton-hover-background: var(--grey-20);
+  --toolbarbutton-focus-background: var(--grey-20);
+  --toolbarbutton-focus-color: var(--grey-70);
+  --toolbarbutton-checked-background: var(--blue-55);
+  --toolbarbutton-checked-focus-background: var(--blue-60);
+  --toolbarbutton-checked-color: #ffffff;
+
+  /* Buttons */
+  --theme-button-background: rgba(12, 12, 13, 0.05);
+  --theme-button-active-background: rgba(12, 12, 13, 0.1);
+
+  /* Accordion headers */
+  --theme-accordion-header-background: var(--theme-toolbar-background);
+  --theme-accordion-header-hover: var(--theme-toolbar-hover);
+
+  /* Selection */
+  --theme-selection-background: var(--blue-55);
+  --theme-selection-background-hover: #f0f9fe;
+  --theme-selection-focus-background: var(--toolbarbutton-hover-background);
+  --theme-selection-color: #ffffff;
+
+  /* Border color that splits the toolbars/panels/headers. */
+  --theme-splitter-color: var(--grey-25);
+  --theme-emphasized-splitter-color: var(--grey-30);
+  --theme-emphasized-splitter-color-hover: var(--grey-40);
+
+  /* Icon colors */
+  --theme-icon-color: rgba(12, 12, 13, 0.8);
+  --theme-icon-dimmed-color: rgba(135, 135, 137, 0.9);
+  --theme-icon-checked-color: var(--blue-60);
+  --theme-icon-error-color: var(--red-60);
+  --theme-icon-warning-color: var(--yellow-65);
+
+  /* Text color */
+  --theme-comment: var(--grey-50);
+  --theme-body-color: var(--grey-70);
+  --theme-text-color-alt: var(--grey-50);
+  --theme-text-color-inactive: var(--grey-40);
+  --theme-text-color-error: var(--red-60);
+  --theme-text-color-strong: var(--grey-90);
+  --theme-stack-trace-text: var(--red-70);
+
+  --theme-highlight-green: var(--green-70);
+  --theme-highlight-blue: var(--blue-55);
+  --theme-highlight-purple: var(--blue-70);
+  --theme-highlight-red: var(--magenta-65);
+  --theme-highlight-yellow: #fff89e;
+
+  /* These theme-highlight color variables have not been photonized. */
+  --theme-highlight-bluegrey: #0072ab;
+  --theme-highlight-lightorange: #d97e00;
+  --theme-highlight-orange: #f13c00;
+  --theme-highlight-pink: #b82ee5;
+  --theme-highlight-gray: #dde1e4;
+
+  /* For accessibility purposes we want to enhance the focus styling. This
+   * should improve keyboard navigation usability. */
+  --theme-focus-outline-color: #000000;
+
+  /* Colors that were used in Graphs in the old performance tools, which was removed.
+   * They're also used on other panels and should be renamed (See Bug 1767617) */
+  --theme-graphs-purple: #b693eb;
+  --theme-graphs-yellow: #efc052;
+  --theme-graphs-orange: #d97e00;
+  --theme-graphs-grey: #cccccc;
+  --theme-graphs-full-red: #f00;
+
+  /* Common popup styles(used by HTMLTooltip and autocomplete) */
+  --theme-popup-background: Field;
+  --theme-popup-color: FieldText;
+  --theme-popup-border-color: ThreeDShadow;
+  --theme-popup-dimmed: hsla(0, 0%, 80%, 0.3);
+
+  /* Styling for devtool buttons */
+  --theme-toolbarbutton-background: none;
+  --theme-toolbarbutton-color: var(--grey-70);
+  --theme-toolbarbutton-hover-background: var(--grey-90-a05);
+  --theme-toolbarbutton-checked-background: var(--grey-90-a10);
+  --theme-toolbarbutton-checked-color: var(--grey-90);
+  --theme-toolbarbutton-checked-hover-background: var(--grey-90-a15);
+  --theme-toolbarbutton-checked-hover-color: var(--grey-90);
+  --theme-toolbarbutton-active-background: var(--grey-90-a20);
+  --theme-toolbarbutton-active-color: var(--grey-90);
+
+  /* Used for select elements */
+  /* Note: we don't use the pair of system properties Field/FieldText here (like
+   * above), because this lightgrey background makes it possible to remove the
+   * border, which is more stylish. The downsides is that we don't adjust with
+   * the OS' dark mode setting. Hopefully this trade-off is OK.
+   */
+  --theme-select-background: var(--grey-20);
+  --theme-select-color: #0c0c0d;
+  --theme-select-hover-border-color: var(--grey-30);
+
+  /* Warning colors */
+  --theme-warning-background: hsl(54, 100%, 92%);
+  --theme-warning-border: rgba(215, 182, 0, 0.28); /* Yellow 60 + opacity */
+  --theme-warning-color: var(--yellow-80);
+
+  /* Flashing colors used to highlight updates */
+  --theme-contrast-background: #fff699; /* = Yellow 50-a40 on white */
+  --theme-contrast-background-alpha: rgba(255, 233, 0, 0.4); /* Yellow 50-a40 */
+  --theme-contrast-color: black;
+  --theme-contrast-border: var(--yellow-60);
+}
+
+:root.theme-dark {
+  --theme-body-background: #232327;
+  --theme-body-emphasized-background: var(--grey-70);
+  --theme-body-alternate-emphasized-background: #353b48;
+  --theme-sidebar-background: #18181a;
+
+  /* Toolbar */
+  --theme-tab-toolbar-background: var(--grey-90);
+  --theme-toolbar-background: #18181a;
+  --theme-toolbar-color: var(--grey-40);
+  --theme-toolbar-selected-color: white;
+  --theme-toolbar-highlighted-color: var(--green-50);
+  --theme-toolbar-background-hover: #232327;
+  --theme-toolbar-background-alt: var(--grey-85);
+  --theme-toolbar-background-highlighted: var(--blue-60);
+  --theme-toolbar-hover: #232327;
+  --theme-toolbar-hover-active: #252526;
+  --theme-toolbar-separator: var(--grey-10-a20);
+
+  /* Toolbar buttons */
+  --toolbarbutton-background: var(--grey-70);
+  --toolbarbutton-hover-background: var(--grey-70);
+  --toolbarbutton-focus-background: var(--grey-60);
+  --toolbarbutton-focus-color: var(--grey-30);
+  --toolbarbutton-checked-background: #204e8a;
+  --toolbarbutton-checked-focus-background: var(--blue-60);
+  --toolbarbutton-checked-color: #ffffff;
+
+  /* Buttons */
+  --theme-button-background: rgba(249, 249, 250, 0.1);
+  --theme-button-active-background: rgba(249, 249, 250, 0.15);
+
+  /* Accordion headers */
+  --theme-accordion-header-background: #232327;
+  --theme-accordion-header-hover: #2a2a2e;
+
+  /* Selection */
+  --theme-selection-background: #204e8a;
+  --theme-selection-background-hover: #353b48;
+  --theme-selection-focus-background: var(--grey-60);
+  --theme-selection-color: #ffffff;
+
+  /* Border color that splits the toolbars/panels/headers. */
+  --theme-splitter-color: var(--grey-70);
+  --theme-emphasized-splitter-color: var(--grey-60);
+  --theme-emphasized-splitter-color-hover: var(--grey-50);
+
+  /* Icon colors */
+  --theme-icon-color: rgba(249, 249, 250, 0.7);
+  --theme-icon-dimmed-color: rgba(147, 147, 149, 0.9);
+  --theme-icon-checked-color: var(--blue-30);
+  --theme-icon-error-color: var(--red-40);
+  --theme-icon-warning-color: var(--yellow-60);
+
+  /* Text color */
+  --theme-comment: var(--grey-45);
+  --theme-body-color: var(--grey-40);
+  --theme-text-color-alt: var(--grey-45);
+  --theme-text-color-inactive: var(--grey-50);
+  --theme-text-color-error: var(--red-40);
+  --theme-text-color-strong: var(--grey-30);
+  --theme-stack-trace-text: var(--red-50);
+
+  --theme-highlight-green: #86de74;
+  --theme-highlight-blue: #75bfff;
+  --theme-highlight-purple: #b98eff;
+  --theme-highlight-red: #ff7de9;
+  --theme-highlight-yellow: #fff89e;
+
+  /* These theme-highlight color variables have not been photonized. */
+  --theme-highlight-bluegrey: #5e88b0;
+  --theme-highlight-lightorange: #d99b28;
+  --theme-highlight-orange: #d96629;
+  --theme-highlight-pink: #df80ff;
+  --theme-highlight-gray: #e9f4fe;
+
+  /* For accessibility purposes we want to enhance the focus styling. This
+   * should improve keyboard navigation usability. */
+  --theme-focus-outline-color: #ced3d9;
+
+    /* Colors that were used in Graphs in the old performance tools, which was removed.
+   * They're also used on other panels and should be renamed (See Bug 1767617) */
+  --theme-graphs-purple: #df80ff;
+  --theme-graphs-yellow: #d99b28;
+  --theme-graphs-orange: #d96629;
+  --theme-graphs-grey: #757873;
+  --theme-graphs-full-red: #f00;
+
+  /* Common popup styles(used by HTMLTooltip and autocomplete) */
+  --theme-popup-background: var(--grey-60);
+  --theme-popup-color: rgb(249, 249, 250);
+  --theme-popup-border-color: #27272b;
+  --theme-popup-dimmed: rgba(249, 249, 250, 0.1);
+
+  /* Styling for devtool buttons */
+  --theme-toolbarbutton-background: none;
+  --theme-toolbarbutton-color: var(--grey-40);
+  --theme-toolbarbutton-hover-background: var(--grey-10-a15);
+  --theme-toolbarbutton-checked-background: var(--grey-10-a20);
+  --theme-toolbarbutton-checked-color: var(--grey-30);
+  --theme-toolbarbutton-checked-hover-background: var(--grey-10-a25);
+  --theme-toolbarbutton-checked-hover-color: var(--grey-30);
+  --theme-toolbarbutton-active-background: var(--grey-10-a30);
+  --theme-toolbarbutton-active-color: var(--grey-30);
+
+  /* Used for select elements */
+  --theme-select-background: var(--grey-60);
+  --theme-select-color: #fff;
+  --theme-select-hover-border-color: var(--grey-50);
+
+  /* Warning colors */
+  --theme-warning-background: hsl(42, 37%, 19%);
+  --theme-warning-border: hsl(60, 30%, 26%);
+  --theme-warning-color: hsl(43, 94%, 81%);
+
+  /* Flashing colors used to highlight updates */
+  --theme-contrast-background: #4f4b1f; /* = Yellow 50-a20 on body background */
+  --theme-contrast-background-alpha: rgba(255, 233, 0, 0.15); /* Yellow 50-a15 */
+  --theme-contrast-color: white;
+  --theme-contrast-border: var(--yellow-65);
+}
diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css
new file mode 100644
index 0000000000..87a40226e5
--- /dev/null
+++ b/devtools/client/themes/webconsole.css
@@ -0,0 +1,1022 @@
+/* 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/. */
+
+/* Webconsole specific theme variables */
+:root {
+  /* Minimum height of a message (excluding borders) */
+  --console-row-height: 20px;
+  /* We need a unitless line-height to render formatted messages correctly.
+   * Target line-height computed value is 14px, for a 11px font-size. */
+  --console-output-line-height: calc(14 / 11);
+  --console-output-vertical-padding: 3px;
+  /* Additional vertical padding used on the JSTerm and EagerEvaluation
+   * containers. Set to 0 to make the messages and input seamless. */
+  --console-input-extra-padding: 2px;
+  /* Width of the left gutter where icons appear */
+  --console-inline-start-gutter: 32px;
+  /* Icons perfectly centered in the left gutter "feel" closer to the window
+   * edge than to message text. This value pushes them slightly to the right. */
+  --console-icon-horizontal-offset: 1px;
+  --console-warning-background: var(--theme-warning-background);
+  --console-warning-border: var(--theme-warning-border);
+  --console-warning-color: var(--theme-warning-color);
+}
+
+.theme-dark {
+  --console-input-background: var(--theme-tab-toolbar-background);
+  --console-message-background: var(--theme-body-background);
+  --console-message-border: var(--theme-splitter-color);
+  --console-message-color: var(--theme-text-color-strong);
+  --console-error-background: hsl(345, 23%, 24%);
+  --console-error-border: hsl(345, 30%, 35%);
+  --console-error-color: var(--red-20);
+  --console-navigation-color: var(--theme-highlight-blue);
+  --console-navigation-border: var(--blue-60);
+  --console-indent-border-color: var(--theme-highlight-blue);
+  --console-repeat-bubble-background: var(--blue-60);
+
+  /* TODO in bug 1549195: colors used in shared components (e.g. Reps) should
+     be renamed and/or moved to variables.css so they work everywhere */
+  --error-color: var(--red-20);
+  --console-output-color: white;
+}
+
+.theme-light {
+  --console-input-background: var(--theme-body-background);
+  --console-message-background: var(--theme-body-background);
+  --console-message-border: #f2f2f4; /* between Grey 10 and Grey 20 */
+  --console-message-color: var(--theme-text-color-strong);
+  --console-error-background: hsl(344, 73%, 97%);
+  --console-error-border: rgba(215, 0, 34, 0.12); /* Red 60 + opacity */
+  --console-error-color: var(--red-70);
+  --console-navigation-color: var(--theme-highlight-blue);
+  --console-navigation-border: var(--blue-30);
+  --console-indent-border-color: var(--theme-highlight-blue);
+  --console-repeat-bubble-background: var(--theme-highlight-blue);
+
+  /* TODO in bug 1549195: colors used in shared components (e.g. Reps) should
+     be renamed and/or moved to variables.css so they work everywhere */
+  --error-color: var(--red-70);
+  --console-output-color: var(--grey-90);
+}
+
+/* General output styles */
+
+* {
+  box-sizing: border-box;
+}
+
+/*
+ * Stack messages on the z axis so that we can make their borders overlap
+ * and show color borders on top:
+ *
+ *   -----------------  <-- Red
+ *   Error message
+ *   -----------------  <-- Red
+ *   Normal message
+ *   -----------------  <-- Grey
+ *
+ * and:
+ *
+ *   -----------------  <-- Grey
+ *   Normal message
+ *   -----------------  <-- Red
+ *   Error message
+ *   -----------------  <-- Red
+ *
+ * The exact stacking order is:
+ *
+ *   - z-index: 3 = Navigation
+ *   - z-index: 2 = Errors and warnings
+ *   - z-index: 1 = Other (console.log, console.info, requests, etc.)
+ */
+.message {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  /* Make the top border cover the previous message's bottom border */
+  margin-top: -1px;
+  /* Min height is the target row height plus borders */
+  min-height: calc(var(--console-row-height) + 2px);
+  border-top: 1px solid var(--console-message-border);
+  border-bottom: 1px solid var(--console-message-border);
+  /* Avoid vertical padding, so that we can draw full-height items (e.g. indent guides).
+   * Use vertical margins of --console-output-vertical-padding on children instead. */
+  padding-block: 0;
+  /* Layout of the 32px-wide left gutter:
+   * | 4px message padding | 24px icon container | 4px icon margin |
+   * Note: on hover we show a 3px pseudo-border on top of the left padding. */
+  padding-inline-start: 4px;
+  padding-inline-end: 8px;
+  font-size: var(--theme-code-font-size);
+  line-height: var(--console-output-line-height);
+  color: var(--console-message-color);
+  background-color: var(--console-message-background);
+}
+
+@media (min-width: 1000px) {
+  .message {
+    padding-inline-end: 12px;
+  }
+}
+
+/* Always hide the border of the first message, but keep its spacing */
+.message:first-child {
+  border-top-color: transparent !important;
+}
+
+/* We already paint a top border on jsterm-input-container (and we need to keep
+ * it when scrolling console content), so remove the last item's border. (NOTE:
+ * the last element is actually the second-to-last element when the output is
+ * scrolled all the way down, because we include an empty buffer div which
+ * grows to simulate the height of unrendered content.) */
+ .webconsole-app:not(.jsterm-editor) .message:nth-last-child(2) {
+  border-bottom-width: 0;
+  /* Adjust the min-height since we now only have a single border. */
+  min-height: calc(var(--console-row-height) + 1px);
+}
+
+/*
+ * By default, prevent any element in message to overflow.
+ * We exclude network messages as it may cause issues in the network detail panel.
+ * This makes console reflows faster (See Bug 1487457).
+ */
+.message:not(.network) * {
+  overflow: hidden;
+}
+
+.message.disabled {
+  z-index: 2;
+  opacity: 0.6;
+}
+
+.message.error {
+  z-index: 2;
+  color: var(--console-error-color);
+  border-color: var(--console-error-border);
+  background-color: var(--console-error-background);
+}
+
+.message.warn {
+  z-index: 2;
+  color: var(--console-warning-color);
+  border-color: var(--console-warning-border);
+  background-color: var(--console-warning-background);
+}
+
+.message.navigationMarker {
+  z-index: 3;
+  color: var(--console-navigation-color);
+  border-color: var(--console-navigation-border);
+}
+
+.message.startGroup,
+.message.startGroupCollapsed {
+  --console-indent-border-color: transparent;
+}
+
+/* Hide border between a command and its result */
+.message.command + .result.log {
+  border-top-width: 0;
+}
+
+.message > .prefix,
+.message > .timestamp {
+  flex: none;
+  color: var(--theme-comment);
+  margin: var(--console-output-vertical-padding) 4px;
+}
+
+/* Use a container query as the inline-size of the output might vary when the console is in editor mode */
+@container console-output (width < 500px) {
+  /*
+   * When we export messages, we mount the app as a sibling of the #app-wrapper element,
+   * in a 0-width section which would cause the timestamp to be hidden, so only hide
+   * the timestamp in the "visible" element.
+   */
+  #app-wrapper .message > .timestamp {
+    display: none;
+  }
+
+  /**
+   * This element might have:
+   * - the message body
+   * - the repeat bubble
+   * - the location
+   *
+   * What we want here is to display the location one its own line, at the bottom of the
+   * element:
+   * +----------------------------+
+   * |  Message body   | [repeat] |
+   * +----------------------------+
+   * |                   location |
+   * +----------------------------+
+   */
+  .message:not(.message-did-catch) .message-flex-body:not(.error-note) {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    row-gap: 8px;
+  }
+
+  .message-flex-body .message-location {
+    max-width: 100%;
+    grid-column: 1 / -1;
+    grid-row: 2;
+    justify-self: end;
+  }
+}
+
+.message > .indent {
+  flex: none;
+  display: inline-block;
+  /* Display indent borders above the message's top and bottom border.
+   * This avoids interrupted indent lines (looking like dashes). */
+  margin-block: -1px;
+  margin-inline-start: 12px;
+  border-inline-end: solid 1px var(--console-indent-border-color);
+}
+
+.message > .indent.warning-indent {
+  border-inline-end-color: var(--console-warning-color);
+  /* Align the border of the message in warning groups with the toggle icon */
+  margin-inline-start: 15px;
+}
+
+/* Center first level indent within the left gutter */
+.message[data-indent="1"]:not(.startGroup, .startGroupCollapsed) > .indent,
+.warning-indent {
+  margin-inline-start: calc(1px + var(--console-icon-horizontal-offset));
+  margin-inline-end: calc(11px - var(--console-icon-horizontal-offset));
+}
+
+.message > .icon {
+  flex: none;
+  align-self: flex-start;
+  /* Width and height must be a multiples of 2px to avoid blurry images.
+   * Height should match the text's line-height for optimal vertical alignment */
+  width: 14px;
+  height: 14px;
+  margin: var(--console-output-vertical-padding) 4px;
+  background-image: none;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* Icon on unindented row should be centered within the left gutter */
+.message[data-indent="0"] + .icon {
+  width: 24px;
+  margin-inline-start: var(--console-icon-horizontal-offset);
+  margin-inline-end: calc(4px - var(--console-icon-horizontal-offset));
+}
+
+.message.command > .icon {
+  color: var(--theme-icon-color);
+  background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
+}
+
+.message.result > .icon {
+  color: var(--theme-icon-dimmed-color);
+  background-image: url(chrome://devtools/skin/images/webconsole/return.svg);
+}
+
+.message.info > .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);
+}
+
+.message.error > .icon {
+  color: var(--theme-icon-error-color);
+  background-image: url(chrome://devtools/skin/images/error-small.svg);
+}
+
+.message.warn > .icon {
+  color: var(--theme-icon-warning-color);
+  background-image: url(chrome://devtools/skin/images/alert-small.svg);
+}
+
+.message.navigationMarker > .icon {
+  color: var(--console-navigation-color);
+  background-image: url(chrome://devtools/skin/images/webconsole/navigation.svg);
+}
+
+.message > .icon.logpoint {
+  background-image: url(chrome://devtools/content/debugger/images/webconsole-logpoint.svg);
+  -moz-context-properties: fill, stroke;
+  fill: var(--theme-graphs-purple);
+  stroke: var(--theme-graphs-purple);
+}
+
+.message > .icon.logtrace {
+  background-image: url(chrome://devtools/content/debugger/images/trace.svg);
+  -moz-context-properties: fill, stroke;
+  fill: var(--theme-icon-checked-color);
+}
+
+.message.network-message-blocked > .icon {
+  color: var(--theme-icon-error-color);
+  background-image: url(chrome://devtools/skin/images/blocked.svg);
+}
+
+.message > .message-body-wrapper {
+  flex: auto;
+  min-width: 0px;
+  margin: var(--console-output-vertical-padding) 0;
+}
+
+.message-body-wrapper .elements-label {
+  color: var(--location-color);
+  margin: calc(var(--console-output-vertical-padding) * 2) 0;
+}
+
+/* The bubble that shows the number of times a message is repeated */
+.message-repeats,
+.warning-group-badge {
+  display: inline-block;
+  flex-shrink: 0;
+  margin: 2px 5px 0 5px;
+  padding: 0 6px;
+  height: 1.25em;
+  border-radius: 40px;
+  font: message-box;
+  font-size: 0.8em;
+  font-weight: normal;
+}
+
+.message-repeats {
+  color: white;
+  background-color: var(--console-repeat-bubble-background);
+}
+
+.warning-group-badge {
+  color: var(--console-warning-background);
+  background-color: var(--console-warning-color);
+}
+
+.message-location {
+  max-width: 40%;
+  flex-shrink: 0;
+  color: var(--frame-link-source);
+  margin-left: 1ch;
+  /* Makes the file name truncated (and ellipsis shown) on the left side */
+  direction: rtl;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: end;
+}
+
+.message-location:empty {
+  display: none;
+}
+
+.message-location .frame-link-source {
+  font-style: normal !important;
+  /* Enforce LTR direction for the file name - fixes bug 1290056 */
+  direction: ltr;
+  unicode-bidi: embed;
+}
+
+.message-location .frame-link-source:visited {
+  color: currentColor;
+}
+
+.message-flex-body {
+  display: flex;
+}
+
+.message-body {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.message-flex-body > .message-body {
+  display: block;
+  flex: 1;
+}
+
+/* Network styles */
+.webconsole-app .message.network.network-message-blocked .method,
+.webconsole-app .message.network.network-message-blocked .message-flex-body .message-body .url,
+.webconsole-app .message.network.network-message-blocked .status {
+  color: var(--timing-blocked-color);
+}
+
+.webconsole-app .message.network .method {
+  flex: none;
+  margin-inline-end: 1ch;
+}
+
+.webconsole-app .message.network .xhr {
+  background-color: var(--theme-comment);
+  color: white;
+  border-radius: 2px;
+  font-size: 10px;
+  padding: 1px 2px;
+  margin-inline-start: 0;
+  margin-inline-end: 1ex;
+}
+
+.webconsole-app .message.network .message-flex-body .message-body .url {
+  color: var(--theme-comment);
+  font-style: inherit;
+}
+
+.webconsole-app .message.network .status {
+  color: var(--theme-highlight-blue);
+  font-style: inherit;
+}
+
+.webconsole-app .message.network .network-monitor .empty-notice {
+  font-size: 16px;
+}
+
+/* For 4XX and 5XX requests, display the text in the "error" color */
+.webconsole-app .message.network.error .message-flex-body .message-body .url,
+.webconsole-app .message.network.error .message-flex-body .message-body .status {
+  color: currentColor;
+}
+
+.network.message .network-info {
+  display: none;
+  margin-block: 6px 2px;
+  border: solid 1px var(--theme-splitter-color);
+}
+
+.network.message.open .network-info {
+  display: block;
+}
+
+:root:dir(rtl) .network.message.open .network-info {
+  direction: rtl;
+}
+
+.network.message .network-info .panels {
+  min-height: 250px;
+}
+/* Response panel needs an absolute height size as the
+ * sizing of its content depends on it, it also needs override
+ * the inline height set on the panels */
+.network.message .network-info #response-panel {
+  height: 250px !important;
+}
+
+.network.message .network-info .accordion-item:last-child .accordion-content {
+  position: static;
+}
+
+.network .message-flex-body > .message-body {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+
+.message.network > .message-body {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.message.network .url {
+  flex: 1 1 auto;
+  /* Make sure the URL is very small initially, let flex change width as needed. */
+  width: 100px;
+  min-width: 5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+}
+
+.message.network .message-body .status {
+  flex: none;
+  margin-left: 1ch;
+  cursor: default;
+}
+
+.message.network.mixed-content .url {
+  color: var(--theme-highlight-red);
+  cursor: default;
+}
+
+.message .learn-more-link {
+  user-select: none;
+  color: var(--theme-highlight-blue);
+  margin: 0 1ch;
+}
+
+/* Hide the headers panel toolbar buttons in the console */
+.message.network .headers-panel-container :is(#block-button, #edit-resend-button, .devtools-separator) {
+  display: none;
+}
+
+/* Override the `postion:absolute` set on the `.panel-container`, this is only needed in the
+netmonitor to enable the use of top, right, bottom etc to support content scrolling.
+See https://searchfox.org/mozilla-central/rev/7bafa9b9c2156018ec1d410194f9bf4b5b23e77f
+/devtools/client/netmonitor/src/assets/styles/HeadersPanel.css#17-24.
+The webconsole does not need that as the `.webconsole-output` is already scrollable */
+.message.network .headers-panel-container .panel-container {
+  position: static;
+}
+
+/* JSTerm Styles */
+html #webconsole-notificationbox {
+  flex: 0;
+  width: 100%;
+}
+
+.webconsole-output:empty ~ .notificationbox .notification {
+  border-top-width: 0;
+  border-bottom-width: 1px;
+}
+
+.jsterm-input-container {
+  position: relative;
+  max-width: 100%;
+  background-color: var(--console-input-background);
+  font-family: var(--monospace-font-family);
+  font-size: var(--theme-code-font-size);
+  line-height: var(--console-output-line-height);
+}
+
+/* CodeMirror-powered JsTerm */
+.jsterm-input-container > .CodeMirror {
+  /* aim for a 32px left space (a descendent has 4px padding) */
+  padding-inline-start: calc(var(--console-inline-start-gutter) - 4px);
+  /* Create a new stacking context */
+  position: relative;
+  z-index: 0; /* Keep below column resizers */
+  /* input icon */
+  background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
+  background-position-x: calc(10px + var(--console-icon-horizontal-offset));
+  background-position-y: 4px;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.jsterm-input-container > .CodeMirror-focused {
+  fill: var(--theme-icon-checked-color);
+}
+
+.jsterm-input-container .CodeMirror-lines {
+  padding-block: var(--console-output-vertical-padding);
+}
+
+.webconsole-app .cm-auto-complete-shadow-text::after {
+  content: attr(data-completion);
+  color: var(--theme-comment);
+  /* This is important for the completion text not to move while the user is typing */
+  /* See Bugs 1491776 & 1558248 */
+  position: absolute;
+}
+
+.jsterm-input-container .CodeMirror-hscrollbar {
+  /* We never want to see the horizontal scrollbar */
+  display: none !important;
+}
+
+.stacktrace {
+  display: none;
+  overflow-y: auto;
+  margin-block-start: 5px;
+  margin-block-end: var(--attachment-margin-block-end);
+  padding-inline-start: 16px;
+}
+
+.message.open .stacktrace:not(:empty) {
+  display: block;
+}
+
+.objectBox-stackTrace .frames {
+  padding-inline-start: 16px;
+}
+
+.cm-s-mozilla a[class] {
+  font-style: italic;
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+}
+
+a.learn-more-link.webconsole-learn-more-link {
+  font-style: normal;
+}
+
+/*
+  This element contains the different toolbars in the console
+    - primary, containing the clear messages button and the text search input, and a
+      checkbox (Persist logs or Show Content Messages).
+      It can expand as much as it needs.
+    - close button, close the split console panel. This button will always be displayed on
+      righ-top of the toolbar.
+    - secondary, containing the filter buttons (Error, Warning, …). It's placed inside the
+      primary toolbar if there's enought space.
+
+  We have 2 different layout:
+
+  Narrow:
+
+  --------------------------------------------------------------
+  | 🗑 - Filter Input                                      | ✕ |
+  --------------------------------------------------------------
+  | Error - Warning - Log - Info - Debug - CSS - Network - XHR |
+  --------------------------------------------------------------
+
+  And wide:
+
+  --------------------------------------------------------------------------------------
+  | 🗑 - Filter Input | Error - Warning - Log - Info - Debug - CSS - Network - XHR | ✕ |
+  --------------------------------------------------------------------------------------
+*/
+.webconsole-filteringbar-wrapper {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  --primary-toolbar-height: 29px;
+}
+
+.webconsole-filteringbar-wrapper .devtools-toolbar {
+  background-color: var(--theme-body-background);
+}
+
+.webconsole-filterbar-primary {
+  display: flex;
+  /* We want the toolbar (which contain the text search input) to fit
+  the content, we don't allow to shrink/overlap it */
+  flex: 100 0 -moz-fit-content;
+  align-items: center;
+  min-height: var(--primary-toolbar-height);
+}
+
+.devtools-toolbar.webconsole-filterbar-secondary {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+  user-select: none;
+  grid-column: 1 / -1;
+  min-height: var(--primary-toolbar-height);
+}
+
+.devtools-toolbar.webconsole-filterbar-secondary .devtools-separator {
+  margin-inline: 5px;
+}
+
+.webconsole-filterbar-primary .devtools-togglebutton {
+  font-variant-numeric: tabular-nums;
+}
+
+.split-console-close-button-wrapper {
+  min-height: var(--primary-toolbar-height);
+  /* We will need to display the close button in the right-top always. */
+  grid-column: -1 / -2;
+  grid-row: 1 / 2;
+  padding-inline-end: 0;
+}
+
+/* On OSX the cursor turns into a window-resizing cursor at the edges of the
+ * window, so bring the end of the close button in. */
+:root[platform="mac"] .split-console-close-button-wrapper,
+:root[platform="mac"] .webconsole-sidebar-toolbar {
+  padding-inline-end: 2px;
+}
+
+#split-console-close-button {
+  height: 100%;
+  margin: 0;
+}
+
+#split-console-close-button::before {
+  background-image: url(chrome://devtools/skin/images/close.svg);
+}
+
+.webconsole-filterbar-primary .devtools-searchbox {
+  align-self: stretch;
+  /* Prevent the filter height from devtools-searchbox */
+  height: unset;
+  flex: 1 1 100%;
+  margin-inline-start: 1px;
+  /* It's important to keep this in px as it's used in JS to control the display mode
+   * of the filter toolbar. */
+  min-width: 150px;
+}
+
+.webconsole-filterbar-primary .filter-checkbox {
+  flex-shrink: 0;
+  margin: 0 3px;
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+
+.webconsole-filterbar-filtered-messages {
+  /* Needed so the bar takes the whole horizontal space when it is wrapped */
+  flex-grow: 1;
+  justify-content: flex-end;
+  color: var(--theme-comment);
+  text-align: end;
+  align-items: center;
+  min-height: var(--primary-toolbar-height);
+  line-height: var(--primary-toolbar-height);
+}
+
+@media (max-width: 965px) {
+  /* This media query will make filtered message element to be displayed in new
+    line. This width is based on greek localized size since it is longer than
+    other localized strings. */
+  .webconsole-filterbar-filtered-messages {
+    grid-row: 2 / 3;
+    grid-column: 1 / -1;
+    justify-self: stretch;
+  }
+}
+
+.webconsole-filterbar-filtered-messages .filter-message-text {
+  font-style: italic;
+  user-select: none;
+}
+
+.webconsole-filterbar-filtered-messages .reset-filters-button {
+  margin-inline-start: 0.5em;
+}
+
+/* Special casing String reps, and warning/error string colors
+ * so they are legible */
+.message .message-body > .objectBox-string,
+.message.error .objectBox-string,
+.message.warn .objectBox-string {
+  color: inherit;
+}
+
+/* Special casing dark-theme error and warning ObjectInspector colors */
+.theme-dark .message.error .tree.object-inspector .object-label,
+.theme-dark .message.error .tree.object-inspector .object-label *,
+.theme-dark .message.warn .tree.object-inspector .object-label,
+.theme-dark .message.warn .tree.object-inspector .object-label *,
+.theme-dark .message.error .objectLeftBrace,
+.theme-dark .message.error .objectRightBrace,
+.theme-dark .message.error .arrayLeftBracket,
+.theme-dark .message.error .arrayRightBracket,
+.theme-dark .message.warn .objectLeftBrace,
+.theme-dark .message.warn .objectRightBrace,
+.theme-dark .message.warn .arrayLeftBracket,
+.theme-dark .message.warn .arrayRightBracket {
+  color: var(--theme-body-color);
+}
+.theme-dark .message.error .tree.object-inspector,
+.theme-dark .message.warn .tree.object-inspector {
+  --console-indent-border-color: var(--theme-body-color);
+}
+
+.webconsole-app .message-flex-body > .message-body {
+  overflow: hidden;
+}
+
+.webconsole-app .message-body > * {
+  flex-shrink: 0;
+  vertical-align: top;
+}
+
+.message.startGroup .message-body > .objectBox-string,
+.message.startGroupCollapsed .message-body > .objectBox-string {
+  color: var(--theme-body-color);
+  font-weight: bold;
+}
+
+/* Prefix text that can be set by ConsoleAPI option */
+.webconsole-app .console-message-prefix {
+  color: var(--theme-comment);
+}
+
+
+/* console.table() */
+.message .consoletable-wrapper {
+  --consoletable-border: var(--theme-splitter-color);
+
+  max-height: 250px;
+  overflow: auto;
+  position: relative;
+  border-width: 1px 0 0 1px;
+  padding: 0;
+  margin-block-end: var(--attachment-margin-block-end);
+  border: 1px solid var(--consoletable-border);
+}
+
+.message .consoletable {
+  width: 100%;
+  margin: 0;
+  color: var(--theme-body-color);
+  border-spacing: 0;
+}
+
+.consoletable :is(th, td) {
+  border: 0 solid var(--consoletable-border);
+  text-overflow: ellipsis;
+}
+
+.consoletable :is(th, td) + :is(th, td) {
+  border-inline-start-width: 1px;
+}
+
+.consoletable th {
+  position: sticky;
+  top: 0;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
+  border-block-end-width: 1px;
+  margin: 0;
+  padding: 5px 4px;
+  font-weight: inherit;
+}
+
+.consoletable td {
+  background-color: var(--theme-body-background);
+  color: var(--theme-body-color);
+  padding: 3px 4px;
+  font-variant-numeric: tabular-nums;
+}
+
+
+.consoletable tr:nth-child(even) td {
+  background-color: var(--table-zebra-background);
+}
+
+/* Simple Table */
+.message .simple-table {
+  width: 100%;
+  border-collapse: collapse;
+  --simpletable-border: var(--theme-splitter-color);
+  margin-block-end: var(--attachment-margin-block-end);
+  color: var(--theme-body-color);
+  text-align: left;
+  max-height: 250px;
+  overflow-y: auto;
+  border: 1px solid var(--simpletable-border);
+  table-layout: fixed;
+  margin-top: 3px;
+}
+
+.simple-table-header {
+  background-color: var(--theme-toolbar-background);
+  text-overflow: ellipsis;
+  border-bottom: 1px solid var(--simpletable-border);
+}
+
+.simple-table-header > th {
+  padding: 5px 4px;
+  font-weight: inherit;
+}
+
+.simple-table-header > th:nth-child(odd) {
+  width: 10%;
+}
+
+.simple-table td {
+  padding: 3px 4px;
+  text-overflow: ellipsis;
+  border-left: 1px solid var(--simpletable-border);
+}
+
+.simple-table td:nth-child(2n) span {
+  color: var(--theme-body-color);
+}
+
+.simple-table tr:nth-child(even) {
+  background-color: var(--table-zebra-background);
+}
+
+/* Object Inspector */
+.webconsole-app .object-inspector.tree {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.webconsole-app .object-inspector.tree .tree-indent {
+  border-inline-start-color: var(--console-indent-border-color);
+}
+
+.webconsole-app .object-inspector.tree .tree-node:hover:not(.focused) {
+  background-color: var(--object-inspector-hover-background);
+}
+
+/*
+ * Make console.group, exception and XHR message's arrow look the same as the arrow
+ * used in the ObjectInspector (same background-image, width, transition).
+ * Properties were copied from devtools/client/shared/components/reps/reps.css.
+ */
+.collapse-button {
+  flex: none;
+  align-self: flex-start;
+  margin-block-start: calc(var(--console-output-vertical-padding) - 1px);
+  margin-inline-start: -4px;
+  padding: 3px;
+  border: none;
+  color: var(--theme-icon-dimmed-color);
+  background: transparent;
+}
+
+.collapse-button::before {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 10px;
+  background: url("chrome://devtools/skin/images/arrow.svg") no-repeat center;
+  background-size: 10px;
+  transform: rotate(-90deg);
+  transition: transform 125ms ease;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+/* Align console.group messages with the border they create for their "children" messages */
+.indent ~ .collapse-button {
+  margin-inline-start: 3px;
+}
+
+.collapse-button[aria-expanded="true"]::before {
+  transform: rotate(0);
+}
+
+.collapse-button::-moz-focus-inner {
+  border: none;
+}
+
+/* Hide the icon, so that we can use the collapse-button in its place */
+.message.network:not(:where(.network-message-blocked, .disabled)) > .icon,
+.message.startGroup > .icon,
+.message.startGroupCollapsed > .icon {
+  display: none;
+}
+
+/* Center the collapse button in the left gutter (first-level only) */
+.message.network > .collapse-button,
+.message:is(.startGroup,.startGroupCollapsed)[data-indent="0"] > .collapse-button {
+  width: 24px;
+  margin-inline-start: var(--console-icon-horizontal-offset);
+  margin-inline-end: calc(4px - var(--console-icon-horizontal-offset));
+}
+
+/* Use a bigger arrow that is visually similar to other icons (10px) */
+.message.network > .collapse-button::before,
+.message:is(.startGroup,.startGroupCollapsed)[data-indent="0"] > .collapse-button::before {
+  width: 100%;
+  background-image: url("chrome://devtools/skin/images/arrow-big.svg");
+  fill: var(--theme-icon-dimmed-color);
+}
+
+/* Apply a style similar to collapse-button for the object tree arrows */
+.webconsole-app .tree .arrow,
+.webconsole-app .object-inspector .tree-node .arrow {
+  width: 10px;
+  height: 10px;
+  background: url("chrome://devtools/skin/images/arrow.svg") no-repeat center;
+  background-size: 10px;
+  transform: rotate(-90deg);
+  /* Needed for alignment */
+  margin-top: -1px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+}
+
+/* In RTL the tree arrows should usually point to the left, but in
+   this context it should point to the right.
+   This overrides the rule from other stylesheets that does the opposite. */
+.webconsole-app .tree .arrow:dir(rtl),
+.webconsole-app .object-inspector .tree-node .arrow:dir(rtl) {
+  transform: rotate(-90deg);
+}
+
+.webconsole-app .tree .arrow.expanded,
+.webconsole-app .object-inspector .tree-node .arrow.expanded {
+  transform: rotate(0deg);
+}
+
+.webconsole-app .tree.focused .arrow,
+.webconsole-app .object-inspector .tree-node.focused .arrow {
+  fill: currentColor;
+}
+
+/** Utils **/
+.clipboard-only {
+  position: absolute;
+  left: -9999px;
+  width: 0;
+  height: 0;
+}
+
+.lazy-message-list-top,
+.lazy-message-list-bottom {
+  overflow-anchor: none;
+  pointer-events: none;
+  user-select: none;
+  padding: 0;
+  margin: 0;
+  border: none;
+}
diff --git a/devtools/client/themes/widgets.css b/devtools/client/themes/widgets.css
new file mode 100644
index 0000000000..b948895459
--- /dev/null
+++ b/devtools/client/themes/widgets.css
@@ -0,0 +1,687 @@
+/* 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/. */
+
+@import url(chrome://devtools/skin/breadcrumbs.css);
+
+.theme-dark {
+  --table-splitter-color: rgba(255,255,255,0.15);
+  --table-zebra-background: rgba(255,255,255,0.05);
+  --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
+  --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
+}
+
+.theme-light {
+  --table-splitter-color: rgba(0,0,0,0.15);
+  --table-zebra-background: rgba(0,0,0,0.05);
+  --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
+  --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
+}
+
+/* Generic pane helpers */
+
+.generic-toggled-pane {
+  margin-inline-start: 0 !important;
+  /* Unfortunately, transitions don't work properly with locale-aware properties,
+     so both the left and right margins are set via js, while the start margin
+     is always overridden here. */
+}
+
+.generic-toggled-pane[animated] {
+  transition: margin 0.25s ease-in-out;
+}
+
+/* Responsive container */
+
+.devtools-responsive-container {
+  min-width: 0;
+  min-height: 0;
+  flex-direction: row;
+}
+
+.devtools-main-content {
+  min-width: 50px;
+}
+
+.devtools-main-content,
+.devtools-sidebar-tabs {
+  /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
+  position: relative;
+}
+
+@media (min-width: 701px) {
+  .devtools-responsive-container .generic-toggled-pane {
+    /* To hide generic-toggled-pane, negative margins are applied dynamically.
+     * In the default horizontal layout, the pane is on the side and should be
+     * hidden using negative margin-inline-end only.
+     */
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}
+
+@media (max-width: 700px) {
+  .devtools-responsive-container {
+    flex-direction: column;
+  }
+
+  .devtools-responsive-container > .devtools-side-splitter {
+    /* This is a normally vertical splitter, but we have turned it horizontal
+       due to the smaller resolution */
+    min-height: calc(var(--devtools-splitter-top-width) +
+    var(--devtools-splitter-bottom-width) + 1px);
+    border-top-width: var(--devtools-splitter-top-width);
+    border-bottom-width: var(--devtools-splitter-bottom-width);
+    margin-top: calc(-1 * var(--devtools-splitter-top-width) - 1px);
+    margin-bottom: calc(-1 * var(--devtools-splitter-bottom-width));
+
+    /* Reset the vertical splitter styles */
+    min-width: 0;
+    border-inline-end-width: 0;
+    border-inline-start-width: 0;
+    margin-inline-end: 0;
+    margin-inline-start: 0;
+
+    /* In some edge case the cursor is not changed to ns-resize */
+    cursor: ns-resize;
+  }
+
+  .devtools-responsive-container > .devtools-sidebar-tabs:not(.pane-collapsed) {
+    /* When the panel is collapsed min/max height should not be applied because
+       collapsing relies on negative margins, which implies constant height. */
+    min-height: 35vh;
+    max-height: 75vh;
+  }
+
+  .devtools-responsive-container .generic-toggled-pane {
+    /* To hide generic-toggled-pane, negative margins are applied dynamically.
+     * If a vertical layout, the pane is on the bottom and should be hidden
+     * using negative bottom margin only.
+     */
+    margin-inline-end: 0 !important;
+  }
+}
+
+/* VariablesView */
+
+.variables-view-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.variables-view-empty-notice {
+  padding: 2px;
+}
+
+.variables-view-empty-notice {
+  color: var(--theme-text-color-alt);
+}
+
+.variables-view-scope:focus > .title,
+.variable-or-property:focus > .title {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.variables-view-scope > .title {
+  border-top-width: 1px;
+  border-top-style: solid;
+  margin-top: -1px;
+}
+
+.variables-view-scope > .title:-moz-locale-dir(rtl) {
+  direction: rtl;
+}
+
+/* Custom scope stylings */
+
+.variables-view-watch-expressions .title > .name  {
+  max-width: 14em;
+}
+
+/* Generic variables traits */
+
+.variables-view-variable:not(:last-child) {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.variables-view-variable > .title > .name {
+  font-weight: 600;
+}
+
+/* Generic variables *and* properties traits */
+
+.variable-or-property:focus > .title > label {
+  color: inherit !important;
+}
+
+.variables-view-container .theme-twisty {
+  margin: 2px;
+}
+
+.variable-or-property > .title > .theme-twisty {
+  margin-inline-start: 5px;
+}
+
+.variables-view-container .variables-view-element-details .theme-twisty:not([open]):-moz-locale-dir(rtl) {
+  transform: rotate(-90deg);
+}
+
+.variable-or-property:not([untitled]) > .variables-view-element-details {
+  margin-inline-start: 7px;
+}
+
+/* Traits applied when variables or properties are changed or overridden */
+
+.variable-or-property:not([overridden]) {
+  transition: background 1s ease-in-out;
+}
+
+.variable-or-property:not([overridden])[changed] {
+  transition-duration: .4s;
+}
+
+.variable-or-property[overridden] {
+  background: rgba(128,128,128,0.05);
+}
+
+.variable-or-property[overridden] .title > label {
+  /* Cross out the title for this variable and all child properties. */
+  font-style: italic;
+  text-decoration: line-through;
+  border-bottom: none !important;
+  color: rgba(128,128,128,0.9);
+  opacity: 0.7;
+}
+
+/* Traits applied when variables or properties are editable */
+
+.variable-or-property[editable] > .title > .value {
+  cursor: text;
+}
+
+.variable-or-property[overridden] .title > .value {
+  /* Disallow editing this variable and all child properties. */
+  pointer-events: none;
+}
+
+/* Custom configurable/enumerable/writable or frozen/sealed/extensible
+ * variables and properties */
+
+.variable-or-property[non-enumerable]:not([self], [pseudo-item]) > .title > .name {
+  opacity: 0.6;
+}
+
+.variable-or-property-non-writable-icon {
+  background: url("chrome://devtools/skin/images/vview-lock.svg") no-repeat;
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.variable-or-property-frozen-label,
+.variable-or-property-sealed-label,
+.variable-or-property-non-extensible-label {
+  height: 16px;
+  padding-inline-end: 4px;
+}
+
+.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
+.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
+.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
+  color: #666;
+}
+
+/* Aligned values */
+
+.variables-view-container[aligned-values] .title > .separator {
+  flex: 1;
+}
+
+.variables-view-container[aligned-values] .title > .value {
+  flex: none;
+  width: 70vw;
+}
+
+.variables-view-container[aligned-values] .title > .element-value-input {
+  width: calc(70vw - 10px);
+}
+
+/* Actions first */
+
+.variables-view-open-inspector {
+  order: 1;
+}
+
+.variables-view-edit,
+.variables-view-add-property {
+  order: 2;
+}
+
+.variable-or-property-frozen-label,
+.variable-or-property-sealed-label,
+.variable-or-property-non-extensible-label,
+.variable-or-property-non-writable-icon {
+  order: 3;
+}
+
+.variables-view-delete {
+  order: 4;
+}
+
+.variables-view-container[actions-first] .variables-view-delete,
+.variables-view-container[actions-first] .variables-view-add-property,
+.variables-view-container[actions-first] .variables-view-open-inspector {
+  order: 0;
+}
+
+.variables-view-container[actions-first] [invisible] {
+  visibility: hidden;
+}
+
+/* Variables and properties tooltips */
+
+.variable-or-property > tooltip > label {
+  margin: 0 2px 0 2px;
+}
+
+.variable-or-property[non-enumerable] > tooltip > label.enumerable,
+.variable-or-property[non-configurable] > tooltip > label.configurable,
+.variable-or-property[non-writable] > tooltip > label.writable,
+.variable-or-property[non-extensible] > tooltip > label.extensible {
+  color: #800;
+  text-decoration: line-through;
+}
+
+.variable-or-property[overridden] > tooltip > label.overridden {
+  padding-inline-start: 4px;
+  border-inline-start: 1px dotted #000;
+}
+
+.variable-or-property[safe-getter] > tooltip > label.WebIDL {
+  padding-inline-start: 4px;
+  border-inline-start: 1px dotted #000;
+  color: #080;
+}
+
+/* Variables and properties editing */
+.variables-view-delete,
+.variables-view-edit,
+.variables-view-open-inspector {
+  width: 16px;
+  height: 16px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+}
+
+.variables-view-open-inspector {
+  background-size: 15px;
+}
+
+.variables-view-delete:hover,
+.variables-view-edit:hover,
+.variables-view-open-inspector:hover {
+  fill: var(--theme-icon-color);
+}
+
+.variables-view-delete:active,
+.variables-view-edit:active,
+.variables-view-open-inspector:active {
+  fill: var(--theme-icon-checked-color);
+}
+
+.variables-view-delete {
+  background-image: url("chrome://devtools/skin/images/vview-delete.svg");
+}
+
+.variables-view-edit {
+  background-image: url("chrome://devtools/skin/images/vview-edit.svg");
+}
+
+.variables-view-open-inspector {
+  background-image: url("chrome://devtools/skin/images/open-inspector.svg");
+}
+
+/* Variables and properties input boxes */
+
+.variable-or-property > .title > .separator + .element-value-input {
+  margin-inline-start: -2px !important;
+  margin-inline-end: 2px !important;
+}
+
+.variable-or-property > .title > .separator[hidden=true] + .element-value-input {
+  margin-inline-start: 4px !important;
+  margin-inline-end: 2px !important;
+}
+
+.element-name-input {
+  margin-inline-start: -2px !important;
+  margin-inline-end: 2px !important;
+  font-weight: 600;
+}
+
+.element-value-input,
+.element-name-input {
+  border: 1px solid rgba(128, 128, 128, .5) !important;
+  border-radius: 0;
+  color: inherit;
+}
+
+/* Variables and properties searching */
+
+.variable-or-property[unmatched] {
+  border: none;
+  margin: 0;
+}
+
+/* Table Widget */
+
+/* Table body */
+
+.table-widget-body > .devtools-side-splitter {
+  background-color: transparent;
+}
+
+.table-widget-body {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  contain: size;
+  display: flex;
+  align-items: start;
+}
+
+.table-widget-body > splitter {
+  align-self: stretch;
+}
+
+.table-widget-body[empty="empty"] {
+  display: none;
+}
+
+/* Column Headers */
+
+.table-widget-column-header,
+.table-widget-cell {
+  display: block;
+  border-inline-end: 1px solid var(--table-splitter-color) !important;
+  line-height: unset !important;
+}
+
+.table-widget-column:not([hidden]) {
+  display: block;
+}
+
+/* Table widget column header colors are taken from netmonitor.inc.css to match
+   the look of both the tables. */
+
+.table-widget-column-header {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  margin: 0;
+  padding: 5px 4px 0 !important;
+  color: inherit;
+  text-align: start;
+  font-weight: inherit !important;
+  border-image: linear-gradient(transparent 15%,
+                                var(--theme-splitter-color) 15%,
+                                var(--theme-splitter-color) 85%,
+                                transparent 85%,
+                                transparent calc(100% - 1px),
+                                var(--theme-splitter-color) calc(100% - 1px)) 1 1;
+  background-repeat: no-repeat;
+}
+
+.table-widget-column-header:not([sorted]):hover {
+  background-image: linear-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.1));
+}
+
+.table-widget-column-header[sorted] {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+  border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
+  box-shadow: -0.5px -0.5px 0 0.5px var(--theme-splitter-color);
+  background-position: right 6px center;
+}
+
+.table-widget-column-header[sorted]:-moz-locale-dir(rtl) {
+  background-position: 6px center;
+}
+
+.table-widget-column-header[sorted=ascending] {
+  background-image: url("chrome://devtools/skin/images/sort-ascending-arrow.svg");
+}
+
+.table-widget-column-header[sorted=descending] {
+  background-image: url("chrome://devtools/skin/images/sort-descending-arrow.svg");
+}
+
+.theme-dark .table-widget-column[readonly] {
+  background-color: rgba(255,255,255,0.1);
+}
+
+.theme-light .table-widget-column[readonly] {
+  background-color: rgba(0,0,0,0.1);
+}
+
+.table-widget-body .devtools-side-splitter:last-of-type {
+  display: none;
+}
+
+/* Cells */
+
+.table-widget-cell {
+  width: 100%;
+  padding: 3px 4px;
+  min-width: 100px;
+  -moz-user-focus: normal;
+  color: var(--theme-body-color);
+}
+
+.table-widget-cell[hidden] {
+  display: none;
+}
+
+.table-widget-cell.even:not(.theme-selected) {
+  background-color: var(--table-zebra-background);
+}
+
+:root:not(.no-animate) .table-widget-cell.flash-out {
+  animation: flash-out 0.5s ease-in;
+}
+
+@keyframes flash-out {
+  to {
+    background: var(--theme-contrast-background);
+  }
+}
+
+/* Empty text and initial text */
+
+.table-widget-empty-text {
+  display: none;
+  font-size: large;
+}
+
+.table-widget-body:empty + .table-widget-empty-text:not([value=""]),
+.table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
+  display: block;
+}
+
+/* Tree Widget */
+
+.tree-widget-container {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  list-style: none;
+}
+
+.tree-widget-container:-moz-focusring,
+.tree-widget-container *:-moz-focusring {
+  outline-style: none;
+}
+
+.tree-widget-empty-text {
+  padding: 10px 20px;
+  font-size: medium;
+  background: transparent;
+  pointer-events: none;
+}
+
+/* Tree Item */
+
+.tree-widget-container .tree-widget-item {
+  padding: 4px 0px;
+  /* OSX has line-height 14px by default, which causes weird alignment issues
+   * because of 20px high icons. thus making line-height consistent with that of
+   * windows.
+   */
+  line-height: 16px;
+  display: inline-block;
+  width: 100%;
+  word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
+                           breaking in multiple lines */
+}
+
+.tree-widget-container .tree-widget-children {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tree-widget-item[level="1"] {
+  font-weight: 700;
+}
+
+/* Twisties */
+.tree-widget-item::before {
+  content: "";
+  width: 16px;
+  height: 16px;
+  float: inline-start;
+  margin: 0 1px;
+  background-image: url("chrome://devtools/skin/images/arrow.svg");
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: 10px;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
+  cursor: pointer;
+  transition: transform 125ms ease;
+  transform: rotate(-90deg);
+}
+
+.tree-widget-item:-moz-locale-dir(rtl)::before {
+  transform: rotate(90deg);
+}
+
+.tree-widget-item[empty]::before {
+  background: transparent;
+}
+
+.tree-widget-item[expanded]::before {
+  transform: none;
+}
+
+.tree-widget-item.theme-selected::before {
+  fill: currentColor;
+}
+
+.tree-widget-item + ul {
+  overflow: hidden;
+  animation: collapse-tree-item 0.2s;
+  max-height: 0;
+}
+
+.tree-widget-item[expanded] + ul {
+  animation: expand-tree-item 0.3s;
+  max-height: unset;
+}
+
+@keyframes collapse-tree-item {
+  from {
+    max-height: 300px;
+  }
+  to {
+    max-height: 0;
+  }
+}
+
+@keyframes expand-tree-item {
+  from {
+    max-height: 0;
+  }
+  to {
+    max-height: 500px;
+  }
+}
+
+/* Indentation of child items in the tree */
+
+/* For level > 6 */
+.tree-widget-item[level] + ul > li > .tree-widget-item {
+  padding-inline-start: 98px;
+}
+
+/* First level */
+.tree-widget-item[level="1"] + ul > li > .tree-widget-item {
+  padding-inline-start: 14px;
+}
+
+/* Second level */
+.tree-widget-item[level="2"] + ul > li > .tree-widget-item {
+  padding-inline-start: 28px;
+}
+
+/* Third level */
+.tree-widget-item[level="3"] + ul > li > .tree-widget-item {
+  padding-inline-start: 42px;
+}
+
+/* Fourth level */
+.tree-widget-item[level="4"] + ul > li > .tree-widget-item {
+  padding-inline-start: 56px;
+}
+
+/* Fifth level */
+.tree-widget-item[level="5"] + ul > li > .tree-widget-item {
+  padding-inline-start: 70px;
+}
+
+/* Sixth level */
+.tree-widget-item[level="6"] + ul > li > .tree-widget-item {
+  padding-inline-start: 84px;
+}
+
+/* Custom icons for certain tree items indicating the type of the item */
+
+.tree-widget-item[type]::after {
+  content: "";
+  float: inline-start;
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 4px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.tree-widget-item[type="dir"]::after {
+  background-image: url(chrome://devtools/skin/images/folder.svg);
+}
+
+.tree-widget-item[type="url"]::after {
+  background-image: url(chrome://devtools/skin/images/globe.svg);
+}
+
+.tree-widget-item[type="store"]::after {
+  background-image: url(chrome://devtools/skin/images/datastore.svg);
+}