Add m-esr52 at 52.6.0

232 files changed, 15568 insertions, 0 deletions

diff --git a/devtools/client/themes/animationinspector.css b/devtools/client/themes/animationinspector.css
new file mode 100644
index 000000000..6a17ca02f
--- /dev/null
+++ b/devtools/client/themes/animationinspector.css
@@ -0,0 +1,623 @@
+/* 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 */
+
+.theme-dark {
+  --even-animation-timeline-background-color: rgba(255,255,255,0.03);
+  --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
+  --pause-image: url(chrome://devtools/skin/images/pause.svg);
+  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
+  --play-image: url(chrome://devtools/skin/images/play.svg);
+}
+
+.theme-light {
+  --even-animation-timeline-background-color: rgba(128,128,128,0.03);
+  --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
+  --pause-image: url(chrome://devtools/skin/images/pause.svg);
+  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
+  --play-image: url(chrome://devtools/skin/images/play.svg);
+}
+
+.theme-firebug {
+  --even-animation-timeline-background-color: rgba(128,128,128,0.03);
+  --command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg);
+  --pause-image: url(chrome://devtools/skin/images/firebug/pause.svg);
+  --rewind-image: url(chrome://devtools/skin/images/firebug/rewind.svg);
+  --play-image: url(chrome://devtools/skin/images/firebug/play.svg);
+}
+
+:root {
+  /* How high should toolbars be */
+  --toolbar-height: 20px;
+  /* How wide should the sidebar be (should be wide enough to contain long
+     property names like 'border-bottom-right-radius' without ellipsis) */
+  --timeline-sidebar-width: 200px;
+  /* How high should animations displayed in the timeline be */
+  --timeline-animation-height: 20px;
+  /* The size of a keyframe marker in the keyframes diagram */
+  --keyframes-marker-size: 10px;
+  /* The color of the time graduation borders */
+  --time-graduation-border-color: rgba(128, 136, 144, .5);
+}
+
+.animation {
+  --timeline-border-color: var(--theme-body-color);
+  --timeline-background-color: var(--theme-splitter-color);
+  /* The color of the endDelay hidden progress */
+  --enddelay-hidden-progress-color: var(--theme-graphs-grey);
+  /* The color of none fill mode */
+  --fill-none-color: var(--theme-highlight-gray);
+  /* The color of enable fill mode */
+  --fill-enable-color: var(--timeline-border-color);
+}
+
+.animation.cssanimation {
+  --timeline-border-color: var(--theme-highlight-lightorange);
+  --timeline-background-color: var(--theme-contrast-background);
+}
+
+.animation.csstransition {
+  --timeline-border-color: var(--theme-highlight-bluegrey);
+  --timeline-background-color: var(--theme-highlight-blue);
+}
+
+.animation.scriptanimation {
+  --timeline-border-color: var(--theme-highlight-green);
+  --timeline-background-color: var(--theme-graphs-green);
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  display : flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  color: var(--theme-content-color3);
+}
+
+/* The top toolbar, containing the toggle-all button. And the timeline toolbar,
+   containing playback control buttons, shown only when there are animations
+   displayed in the timeline */
+
+#global-toolbar,
+#timeline-toolbar {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  height: var(--toolbar-height);
+}
+
+#timeline-toolbar {
+  display: none;
+  justify-content: flex-start;
+}
+
+[timeline] #global-toolbar {
+  display: none;
+}
+
+[timeline] #timeline-toolbar {
+  display: flex;
+}
+
+/* The main animations container */
+
+#sidebar-panel-animationinspector {
+  height: 100%;
+  width: 100%;
+}
+
+#players {
+  height: calc(100% - var(--toolbar-height));
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+[empty] #players {
+  display: none;
+}
+
+/* The error message, shown when an invalid/unanimated element is selected */
+
+#error-message {
+  padding-top: 10%;
+  text-align: center;
+  flex: 1;
+  overflow: auto;
+
+  /* The error message is hidden by default */
+  display: none;
+}
+
+[empty] #error-message {
+  display: block;
+}
+
+/* Element picker, toggle-all buttons, timeline pause button, ... */
+
+#global-toolbar > *,
+#timeline-toolbar > * {
+  min-height: var(--toolbar-height);
+  border-color: var(--theme-splitter-color);
+  border-width: 0 0 0 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#global-toolbar .label,
+#timeline-toolbar .label {
+  padding: 0 5px;
+  border-style: solid;
+}
+
+#global-toolbar .devtools-button,
+#timeline-toolbar .devtools-button {
+  margin: 0;
+  padding: 0;
+}
+
+#timeline-toolbar .devtools-button,
+#timeline-toolbar .label {
+  border-width: 0 1px 0 0;
+}
+
+#element-picker::before {
+  background-image: var(--command-pick-image);
+}
+
+.pause-button::before {
+  background-image: var(--pause-image);
+}
+
+#rewind-timeline::before {
+  background-image: var(--rewind-image);
+}
+
+.pause-button.paused::before {
+  background-image: var(--play-image);
+}
+
+#timeline-rate select.devtools-button {
+  -moz-appearance: none;
+  text-align: center;
+  font-family: inherit;
+  color: var(--theme-body-color);
+  font-size: 1em;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  background-repeat: no-repeat;
+  background-position: calc(100% - 4px) center;
+  padding-right: 1em;
+}
+
+#timeline-rate {
+  position: relative;
+  width: 4.5em;
+}
+
+/* Animation timeline component */
+
+.animation-timeline {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Useful for positioning animations or keyframes in the timeline */
+.animation-timeline .track-container {
+  position: absolute;
+  top: 0;
+  left: var(--timeline-sidebar-width);
+  /* Leave the width of a marker right of a track so the 100% markers can be
+     selected easily */
+  right: var(--keyframes-marker-size);
+  height: var(--timeline-animation-height);
+}
+
+.animation-timeline .scrubber-wrapper {
+  position: absolute;
+  left: var(--timeline-sidebar-width);
+  /* Leave the width of a marker right of a track so the 100% markers can be
+     selected easily */
+  right: var(--keyframes-marker-size);
+  height: 100%;
+}
+
+.animation-timeline .scrubber {
+  z-index: 5;
+  pointer-events: none;
+  position: absolute;
+  /* Make the scrubber as tall as the viewport minus the toolbar height and the
+     header-wrapper's borders */
+  height: calc(100vh - var(--toolbar-height) - 1px);
+  min-height: 100%;
+  width: 0;
+  border-right: 1px solid red;
+  box-sizing: border-box;
+}
+
+/* The scrubber handle is a transparent element displayed on top of the scrubber
+   line that allows users to drag it */
+.animation-timeline .scrubber .scrubber-handle {
+  position: absolute;
+  height: 100%;
+  /* Make it thick enough for easy dragging */
+  width: 6px;
+  right: -1.5px;
+  cursor: col-resize;
+  pointer-events: all;
+}
+
+.animation-timeline .scrubber .scrubber-handle::before {
+  content: "";
+  position: sticky;
+  top: 0;
+  width: 1px;
+  border-top: 5px solid red;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.animation-timeline .time-header {
+  min-height: var(--timeline-animation-height);
+  cursor: col-resize;
+  -moz-user-select: none;
+}
+
+.animation-timeline .time-header .header-item {
+  position: absolute;
+  height: 100%;
+  padding-top: 3px;
+  border-left: 0.5px solid var(--time-graduation-border-color);
+}
+
+.animation-timeline .header-wrapper {
+  position: sticky;
+  top: 0;
+  background-color: var(--theme-body-background);
+  border-bottom: 1px solid var(--time-graduation-border-color);
+  z-index: 3;
+  height: var(--timeline-animation-height);
+  overflow: hidden;
+}
+
+.animation-timeline .time-body {
+  height: 100%;
+}
+
+.animation-timeline .time-body .time-tick {
+  -moz-user-select: none;
+  position: absolute;
+  width: 0;
+  /* When scroll bar is shown, make it covers entire time-body */
+  height: 100%;
+  /* When scroll bar is hidden, make it as tall as the viewport minus the
+     timeline animation height and the header-wrapper's borders */
+  min-height: calc(100vh - var(--timeline-animation-height) - 1px);
+  border-left: 0.5px solid var(--time-graduation-border-color);
+}
+
+.animation-timeline .animations {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  list-style-type: none;
+  margin-top: 0;
+}
+
+/* Animation block widgets */
+
+.animation-timeline .animation {
+  margin: 2px 0;
+  height: var(--timeline-animation-height);
+  position: relative;
+}
+
+/* We want animations' background colors to alternate, but each animation has
+   a sibling (hidden by default) that contains the animated properties and
+   keyframes, so we need to alternate every 4 elements. */
+.animation-timeline .animation:nth-child(4n+1) {
+  background-color: var(--even-animation-timeline-background-color);
+}
+
+.animation-timeline .animation .target {
+  width: var(--timeline-sidebar-width);
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.animation-timeline .animation-target {
+  background-color: transparent;
+}
+
+.animation-timeline .animation .time-block {
+  cursor: pointer;
+}
+
+/* Animation summary graph */
+.animation-timeline .animation .summary {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.animation-timeline .animation .summary path {
+  fill: var(--timeline-background-color);
+  stroke: var(--timeline-border-color);
+}
+
+.animation-timeline .animation .summary .infinity.copied {
+  opacity: .3;
+}
+
+.animation-timeline .animation .summary path.delay-path.negative,
+.animation-timeline .animation .summary path.enddelay-path.negative {
+  fill: none;
+  stroke: var(--enddelay-hidden-progress-color);
+  stroke-dasharray: 2, 2;
+}
+
+.animation-timeline .animation .name {
+  position: absolute;
+  color: var(--theme-content-color3);
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 2px;
+  box-sizing: border-box;
+  --fast-track-icon-width: 15px;
+  z-index: 1;
+}
+
+.animation-timeline .animation .name div {
+  /* Flex items don't support text-overflow, so a child div is used */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: rgba(255, 255, 255, 0.7);
+  max-width: 50%;
+}
+
+.animation-timeline .fast-track .name::after {
+  /* Animations running on the compositor have the fast-track background image*/
+  content: "";
+  display: block;
+  position: absolute;
+  top: 1px;
+  right: 0;
+  height: 100%;
+  width: var(--fast-track-icon-width);
+  z-index: 1;
+}
+
+.animation-timeline .all-properties .name::after {
+  background-color: var(--theme-content-color3);
+  clip-path: url(images/animation-fast-track.svg#thunderbolt);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.animation-timeline .some-properties .name::after {
+  background-color: var(--theme-content-color3);
+  clip-path: url(images/animation-fast-track.svg#thunderbolt);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.animation-timeline .animation .delay,
+.animation-timeline .animation .end-delay {
+  position: absolute;
+  border-bottom: 3px solid var(--fill-none-color);
+  bottom: -0.5px;
+}
+
+.animation-timeline .animation .delay::after,
+.animation-timeline .animation .end-delay::after {
+  content: "";
+  position: absolute;
+  top: -2px;
+  width: 3px;
+  height: 3px;
+  border: 2px solid var(--fill-none-color);
+  background-color: var(--fill-none-color);
+  border-radius: 50%;
+}
+
+.animation-timeline .animation .negative.delay::after,
+.animation-timeline .animation .positive.end-delay::after {
+  right: -3px;
+}
+
+.animation-timeline .animation .positive.delay::after,
+.animation-timeline .animation .negative.end-delay::after {
+  left: -3px;
+}
+
+.animation-timeline .animation .fill.delay,
+.animation-timeline .animation .fill.end-delay {
+  border-color: var(--fill-enable-color);
+}
+
+.animation-timeline .animation .fill.delay::after,
+.animation-timeline .animation .fill.end-delay::after {
+  border-color: var(--fill-enable-color);
+  background-color: var(--fill-enable-color);
+}
+
+/* Animation target node gutter, contains a preview of the dom node */
+
+.animation-target {
+  background-color: var(--theme-toolbar-background);
+  padding: 0 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.animation-target .attribute-name {
+  padding-left: 4px;
+}
+
+.animation-target .node-highlighter {
+  background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
+  padding-left: 16px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.animation-target .node-highlighter:hover {
+  filter: url(images/filters.svg#checked-icon-state);
+}
+
+.animation-target .node-highlighter:active,
+.animation-target .node-highlighter.selected {
+  filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
+}
+
+/* Inline keyframes info in the timeline */
+
+.animation-timeline .animated-properties:not(.selected) {
+  display: none;
+}
+
+.animation-timeline .animated-properties {
+  background-color: var(--theme-selection-background-semitransparent);
+}
+
+.animation-timeline .animated-properties ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.animation-timeline .animated-properties .property {
+  height: var(--timeline-animation-height);
+  position: relative;
+}
+
+.animation-timeline .animated-properties .property:nth-child(2n) {
+  background-color: var(--even-animation-timeline-background-color);
+}
+
+.animation-timeline .animated-properties .name {
+  width: var(--timeline-sidebar-width);
+  padding-right: var(--keyframes-marker-size);
+  box-sizing: border-box;
+  height: 100%;
+  color: var(--theme-body-color-alt);
+  white-space: nowrap;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.animation-timeline .animated-properties .name div {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.animated-properties.cssanimation {
+  --background-color: var(--theme-contrast-background);
+}
+
+.animated-properties.csstransition {
+  --background-color: var(--theme-highlight-blue);
+}
+
+.animated-properties.scriptanimation {
+  --background-color: var(--theme-graphs-green);
+}
+
+.animation-timeline .animated-properties .oncompositor::before {
+  content: "";
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  background-color: var(--background-color);
+  clip-path: url(images/animation-fast-track.svg#thunderbolt);
+  vertical-align: middle;
+}
+
+.animation-timeline .animated-properties .warning {
+  text-decoration: underline dotted;
+}
+
+.animation-timeline .animated-properties .frames {
+  /* The frames list is absolutely positioned and the left and width properties
+     are dynamically set from javascript to match the animation's startTime and
+     duration */
+  position: absolute;
+  top: 0;
+  height: 100%;
+  /* Using flexbox to vertically center the frames */
+  display: flex;
+  align-items: center;
+}
+
+/* Keyframes diagram, displayed below the timeline, inside the animation-details
+   element. */
+
+.keyframes {
+  /* Actual keyframe markers are positioned absolutely within this container and
+     their position is relative to its size (we know the offset of each frame
+     in percentage) */
+  position: relative;
+  width: 100%;
+  height: 0;
+}
+
+.keyframes.cssanimation {
+  background-color: var(--theme-contrast-background);
+}
+
+.keyframes.csstransition {
+  background-color: var(--theme-highlight-blue);
+}
+
+.keyframes.scriptanimation {
+  background-color: var(--theme-graphs-green);
+}
+
+.keyframes .frame {
+  position: absolute;
+  top: 0;
+  width: 0;
+  height: 0;
+  background-color: inherit;
+  cursor: pointer;
+}
+
+.keyframes .frame::before {
+  content: "";
+  display: block;
+  transform:
+    translateX(calc(var(--keyframes-marker-size) * -.5))
+    /* The extra pixel on the Y axis is so that markers are centered on the
+       horizontal line in the keyframes diagram. */
+    translateY(calc(var(--keyframes-marker-size) * -.5 + 1px));
+  width: var(--keyframes-marker-size);
+  height: var(--keyframes-marker-size);
+  border-radius: 100%;
+  background-color: inherit;
+}
diff --git a/devtools/client/themes/audio/moz.build b/devtools/client/themes/audio/moz.build
new file mode 100644
index 000000000..b68b29b8d
--- /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 000000000..e9d742913
--- /dev/null
+++ b/devtools/client/themes/audio/shutter.wav
diff --git a/devtools/client/themes/boxmodel.css b/devtools/client/themes/boxmodel.css
new file mode 100644
index 000000000..5a3289fae
--- /dev/null
+++ b/devtools/client/themes/boxmodel.css
@@ -0,0 +1,258 @@
+/* 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/ */
+
+#boxmodel-wrapper {
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-color: var(--theme-splitter-color);
+}
+
+#boxmodel-container {
+  /* The view will grow bigger as the window gets resized, until 400px */
+  max-width: 400px;
+  margin: 0px auto;
+  padding: 0;
+}
+
+/* Header */
+
+#boxmodel-header,
+#boxmodel-info {
+  display: flex;
+  align-items: center;
+  padding: 4px 17px;
+}
+
+#layout-geometry-editor {
+  visibility: hidden;
+}
+
+#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;
+  box-sizing: border-box;
+  /* The regions are semi-transparent, so the white background is partly
+     visible */
+  background-color: white;
+  color: var(--theme-selection-color);
+  /* Make sure there is some space between the window's edges and the regions */
+  margin: 0 14px 4px 14px;
+  width: calc(100% - 2 * 14px);
+}
+
+.boxmodel-margin,
+.boxmodel-size {
+  color: var(--theme-highlight-blue);
+}
+
+/* Regions are 3 nested elements with wide borders and outlines */
+
+#boxmodel-content {
+  height: 18px;
+}
+
+#boxmodel-margins,
+#boxmodel-borders,
+#boxmodel-padding {
+  border-color: hsla(210,100%,85%,0.2);
+  border-width: 18px;
+  border-style: solid;
+  outline: dotted 1px hsl(210,100%,85%);
+}
+
+#boxmodel-margins {
+  /* This opacity applies to all of the regions, since they are nested */
+  opacity: .8;
+}
+
+/* Regions colors */
+
+#boxmodel-margins {
+  border-color: #edff64;
+}
+
+#boxmodel-borders {
+  border-color: #444444;
+}
+
+#boxmodel-padding {
+  border-color: #6a5acd;
+}
+
+#boxmodel-content {
+  background-color: #87ceeb;
+}
+
+.theme-firebug #boxmodel-main,
+.theme-firebug #boxmodel-borders,
+.theme-firebug #boxmodel-content {
+  border-style: solid;
+}
+
+.theme-firebug #boxmodel-main,
+.theme-firebug #boxmodel-header {
+  font-family: var(--proportional-font-family);
+}
+
+.theme-firebug #boxmodel-main {
+  color: var(--theme-body-color);
+  font-size: var(--theme-toolbar-font-size);
+}
+
+.theme-firebug #boxmodel-header {
+  font-size: var(--theme-toolbar-font-size);
+}
+
+/* Editable region sizes are contained in absolutely positioned <p> */
+
+#boxmodel-main > p {
+  position: absolute;
+  pointer-events: none;
+  margin: 0;
+  text-align: center;
+}
+
+#boxmodel-main > p > span,
+#boxmodel-main > p > input {
+  vertical-align: middle;
+  pointer-events: auto;
+}
+
+/* Coordinates for the region sizes */
+
+.boxmodel-top,
+.boxmodel-bottom {
+  width: calc(100% - 2px);
+  text-align: center;
+}
+
+.boxmodel-padding.boxmodel-top {
+  top: 37px;
+}
+
+.boxmodel-padding.boxmodel-bottom {
+  bottom: 38px;
+}
+
+.boxmodel-border.boxmodel-top {
+  top: 19px;
+}
+
+.boxmodel-border.boxmodel-bottom {
+  bottom: 20px;
+}
+
+.boxmodel-margin.boxmodel-top {
+  top: 1px;
+}
+
+.boxmodel-margin.boxmodel-bottom {
+  bottom: 2px;
+}
+
+.boxmodel-size,
+.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;
+}
+
+.boxmodel-size {
+  width: calc(100% - 2px);
+}
+
+.boxmodel-margin.boxmodel-right,
+.boxmodel-margin.boxmodel-left,
+.boxmodel-border.boxmodel-left,
+.boxmodel-border.boxmodel-right,
+.boxmodel-padding.boxmodel-right,
+.boxmodel-padding.boxmodel-left {
+  width: 21px;
+}
+
+.boxmodel-padding.boxmodel-left {
+  left: 35px;
+}
+
+.boxmodel-padding.boxmodel-right {
+  right: 35px;
+}
+
+.boxmodel-border.boxmodel-left {
+  left: 16px;
+}
+
+.boxmodel-border.boxmodel-right {
+  right: 17px;
+}
+
+.boxmodel-margin.boxmodel-right {
+  right: 0;
+}
+
+.boxmodel-margin.boxmodel-left {
+  left: 0;
+}
+
+.boxmodel-rotate.boxmodel-left:not(.boxmodel-editing) {
+  transform: rotate(-90deg);
+}
+
+.boxmodel-rotate.boxmodel-right:not(.boxmodel-editing) {
+  transform: rotate(90deg);
+}
+
+/* Legend: displayed inside regions */
+
+.boxmodel-legend {
+  position: absolute;
+  margin: 2px 6px;
+  z-index: 1;
+}
+
+.boxmodel-legend[data-box="margin"] {
+  color: var(--theme-highlight-blue);
+}
+
+/* Editable fields */
+
+.boxmodel-editable {
+  border: 1px dashed transparent;
+  -moz-user-select: text;
+}
+
+.boxmodel-editable:hover {
+  border-bottom-color: hsl(0, 0%, 50%);
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #ccc;
+  padding: 0;
+}
+
+/* Make sure the content size doesn't appear as editable like the other sizes */
+
+.boxmodel-size > span {
+  cursor: default;
+}
+
+/* Box Model Info: contains the position and size of the element */
+
+#boxmodel-element-size {
+  flex: 1;
+}
+
+#boxmodel-position-group {
+  display: flex;
+  align-items: center;
+}
diff --git a/devtools/client/themes/canvasdebugger.css b/devtools/client/themes/canvasdebugger.css
new file mode 100644
index 000000000..39162a96f
--- /dev/null
+++ b/devtools/client/themes/canvasdebugger.css
@@ -0,0 +1,353 @@
+/* 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 {
+  --gutter-width: 3em;
+  --gutter-padding-start: 22px;
+  --checkerboard-pattern: linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2)),
+                          linear-gradient(45deg, rgba(128,128,128,0.2) 25%, transparent 25%, transparent 75%, rgba(128,128,128,0.2) 75%, rgba(128,128,128,0.2));
+}
+
+:root.theme-dark {
+  --draw-call-background: rgba(112,191,83,0.15);
+  --interesting-call-background: rgba(223,128,255,0.15);
+}
+
+:root.theme-light {
+  --draw-call-background: rgba(44,187,15,0.1);
+  --interesting-call-background: rgba(184,46,229,0.1);
+}
+
+/* Reload and waiting notices */
+
+.notice-container {
+  margin-top: -50vh;
+  color: var(--theme-body-color-alt);
+}
+
+#empty-notice > button {
+  min-width: 30px;
+  min-height: 28px;
+  margin: 0;
+  list-style-image: url(images/profiler-stopwatch.svg);
+}
+
+#empty-notice > button .button-text {
+  display: none;
+}
+
+#waiting-notice {
+  font-size: 110%;
+}
+
+/* Snapshots pane */
+
+#snapshots-pane {
+  border-inline-end: 1px solid var(--theme-splitter-color);
+}
+
+#record-snapshot {
+  list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch.svg");
+}
+
+#import-snapshot {
+  list-style-image: url("images/import.svg");
+}
+
+/* Snapshots items */
+
+.snapshot-item-thumbnail {
+  image-rendering: -moz-crisp-edges;
+  background-image: var(--checkerboard-pattern);
+  background-size: 12px 12px, 12px 12px;
+  background-position: 0px 0px, 6px 6px;
+  background-repeat: repeat, repeat;
+}
+
+.snapshot-item-thumbnail[flipped=true] {
+  transform: scaleY(-1);
+}
+
+.snapshot-item-thumbnail {
+  background-color: var(--theme-body-background);
+}
+
+.snapshot-item-details {
+  padding-inline-start: 6px;
+}
+
+.snapshot-item-calls {
+  padding-top: 4px;
+  font-size: 80%;
+}
+
+.snapshot-item-save {
+  padding-bottom: 2px;
+  font-size: 90%;
+}
+
+.snapshot-item-calls,
+.snapshot-item-save {
+  color: var(--theme-body-color-alt);
+}
+
+.snapshot-item-save {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.snapshot-item-save[disabled=true] {
+  text-decoration: none;
+  pointer-events: none;
+}
+
+.snapshot-item-footer.devtools-throbber::before {
+  margin-top: -2px;
+}
+
+#snapshots-list .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Debugging pane controls */
+#resume {
+  list-style-image: url(images/play.svg);
+}
+
+#step-over {
+  list-style-image: url(images/debugger-step-over.svg);
+}
+
+#step-in {
+  list-style-image: url(images/debugger-step-in.svg);
+}
+
+#step-out {
+  list-style-image: url(images/debugger-step-out.svg);
+}
+
+#calls-slider {
+  padding-inline-end: 24px;
+}
+
+#calls-slider .scale-slider {
+  margin: 0;
+}
+
+#debugging-toolbar-sizer-button {
+  /* This button's only purpose in life is to make the
+     container .devtools-toolbar have the right height. */
+  visibility: hidden;
+  min-width: 1px;
+}
+
+/* Calls list pane */
+
+#calls-list .side-menu-widget-container {
+  background: transparent;
+}
+
+/* Calls list items */
+
+#calls-list .side-menu-widget-item {
+  padding: 0;
+  border-color: var(--theme-splitter-color);
+  border-bottom-color: transparent;
+}
+
+.call-item-view:hover {
+  background-color: rgba(128,128,128,0.05);
+}
+
+.call-item-view[draw-call] {
+  background-color: var(--draw-call-background);
+}
+
+.call-item-view[interesting-call] {
+  background-color: var(--interesting-call-background);
+}
+
+.call-item-gutter {
+  width: calc(var(--gutter-width) + var(--gutter-padding-start));
+  padding-inline-start: var(--gutter-padding-start);
+  padding-inline-end: 4px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  border-inline-end: 1px solid var(--theme-splitter-color);
+  margin-inline-end: 6px;
+  background-color: var(--theme-sidebar-background);
+  color: var(--theme-content-color3);
+}
+
+.selected .call-item-gutter {
+  background-color: #2cbb0f;
+  color: white;
+}
+
+.call-item-index {
+  text-align: end;
+}
+
+.call-item-context {
+  color: var(--theme-highlight-orange);
+}
+
+.call-item-name {
+  color: var(--theme-highlight-blue);
+}
+
+.call-item-location {
+  padding-inline-start: 2px;
+  padding-inline-end: 6px;
+  text-align: end;
+  cursor: pointer;
+  color: var(--theme-highlight-bluegrey);
+  border-color: var(--theme-splitter-color);
+}
+
+.call-item-location:hover {
+  color: var(--theme-highlight-blue);
+}
+
+.call-item-view:hover .call-item-location,
+.call-item-view[expanded] .call-item-location {
+  text-decoration: underline;
+}
+
+.call-item-stack {
+  padding-inline-start: calc(var(--gutter-width) + var(--gutter-padding-start));
+  padding-bottom: 10px;
+}
+
+.theme-dark .call-item-stack {
+  background: rgba(0,0,0,0.9);
+}
+
+.theme-light .call-item-stack {
+  background: rgba(255,255,255,0.9);
+}
+
+.call-item-stack-fn {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.call-item-stack-fn-location {
+  padding-inline-start: 2px;
+  padding-inline-end: 6px;
+  text-align: end;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.call-item-stack-fn-name {
+  color: var(--theme-content-color3);
+}
+
+.call-item-stack-fn-location {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.call-item-stack-fn-location:hover {
+  color: var(--theme-highlight-blue);
+}
+
+#calls-list .selected .call-item-contents > label:not(.call-item-gutter) {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Rendering preview */
+
+#screenshot-container {
+  background-color: var(--theme-body-background);
+  background-image: var(--checkerboard-pattern);
+  background-size: 30px 30px, 30px 30px;
+  background-position: 0px 0px, 15px 15px;
+  background-repeat: repeat, repeat;
+}
+
+@media (min-width: 701px) {
+  #screenshot-container {
+    width: 30vw;
+    max-width: 50vw;
+    min-width: 100px;
+  }
+}
+
+@media (max-width: 700px) {
+  #screenshot-container {
+    height: 40vh;
+    max-height: 70vh;
+    min-height: 100px;
+  }
+}
+
+#screenshot-image {
+  background-image: -moz-element(#screenshot-rendering);
+  background-size: contain;
+  background-position: center, center;
+  background-repeat: no-repeat;
+}
+
+#screenshot-image[flipped=true] {
+  transform: scaleY(-1);
+}
+
+#screenshot-dimensions {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  text-align: center;
+}
+
+.theme-dark #screenshot-dimensions {
+  background-color: rgba(0,0,0,0.4);
+}
+
+.theme-light #screenshot-dimensions {
+  background-color: rgba(255,255,255,0.8);
+}
+
+/* Snapshot filmstrip */
+
+#snapshot-filmstrip {
+  border-top: 1px solid var(--theme-splitter-color);
+  overflow: hidden;
+}
+
+.theme-dark #snapshot-filmstrip {
+  color: var(--theme-selection-color);
+}
+
+.theme-light #snapshot-filmstrip {
+  color: var(--theme-body-color-alt);
+}
+
+.filmstrip-thumbnail {
+  image-rendering: -moz-crisp-edges;
+  background-color: var(--theme-body-background);
+  background-image: var(--checkerboard-pattern);
+  background-size: 12px 12px, 12px 12px;
+  background-position: 0px -1px, 6px 5px;
+  background-repeat: repeat, repeat;
+  background-origin: content-box;
+  cursor: pointer;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  border-inline-end: 1px solid var(--theme-splitter-color);
+  transition: opacity 0.1s ease-in-out;
+}
+
+.filmstrip-thumbnail[flipped=true] {
+  transform: scaleY(-1);
+}
+
+#snapshot-filmstrip > .filmstrip-thumbnail:hover,
+#snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
+  border: 1px solid var(--theme-highlight-blue);
+  margin: 0 0 0 -1px;
+  padding: 0;
+  opacity: 0.66;
+}
diff --git a/devtools/client/themes/commandline.css b/devtools/client/themes/commandline.css
new file mode 100644
index 000000000..9dce964ed
--- /dev/null
+++ b/devtools/client/themes/commandline.css
@@ -0,0 +1,172 @@
+/* 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/. */
+
+
+/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
+   We are copy/pasting variables from light-theme and dark-theme,
+   since they aren't loaded in this context (within commandlineoutput.xhtml
+   and commandlinetooltip.xhtml). */
+:root[devtoolstheme="light"] {
+  --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
+  --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
+  --gcli-input-color: #393f4c; /* --theme-body-color */
+  --gcli-border-color: #dde1e4; /* --theme-splitter-color */
+}
+
+:root[devtoolstheme="dark"] {
+  --gcli-background-color: #272b35; /* --theme-toolbar-background */
+  --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
+  --gcli-input-color: #b6babf; /* --theme-body-color-alt */
+  --gcli-border-color: #454d5d; /* --theme-splitter-color */
+}
+
+.gcli-body {
+  margin: 0;
+  font: message-box;
+  color: var(--gcli-input-color);
+}
+
+#gcli-output-root,
+#gcli-tooltip-root {
+  border: 1px solid var(--gcli-border-color);
+  border-radius: 3px;
+  background-color: var(--gcli-background-color);
+}
+
+#gcli-output-root {
+  padding: 5px 10px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom: 0;
+}
+
+#gcli-tooltip-root {
+  padding: 5px 0px;
+}
+
+#gcli-tooltip-connector {
+  margin-top: -1px;
+  margin-left: 8px;
+  width: 20px;
+  height: 10px;
+  border-left: 1px solid var(--gcli-border-color);
+  border-right: 1px solid var(--gcli-border-color);
+  background-color: var(--gcli-background-color);
+}
+
+.gcli-tt-description,
+.gcli-tt-error {
+  padding: 0 10px;
+}
+
+.gcli-row-out {
+  padding: 0 5px;
+  line-height: 1.2em;
+  border-top: none;
+  border-bottom: none;
+  color: var(--gcli-input-color);
+}
+
+.gcli-row-out p,
+.gcli-row-out h1,
+.gcli-row-out h2,
+.gcli-row-out h3 {
+  margin: 5px 0;
+}
+
+.gcli-row-out h1,
+.gcli-row-out h2,
+.gcli-row-out h3,
+.gcli-row-out h4,
+.gcli-row-out h5,
+.gcli-row-out th,
+.gcli-row-out strong,
+.gcli-row-out pre {
+  color: var(--gcli-input-color);
+}
+
+.gcli-row-out pre {
+  font-size: 80%;
+}
+
+.gcli-row-out td {
+  white-space: nowrap;
+}
+
+.gcli-out-shortcut,
+.gcli-help-synopsis {
+  padding: 0 3px;
+  margin: 0 4px;
+  font-weight: normal;
+  font-size: 90%;
+  border-radius: 3px;
+  background-color: var(--gcli-background-color);
+  border: 1px solid var(--gcli-border-color);
+}
+
+.gcli-out-shortcut:before,
+.gcli-help-synopsis:before {
+  color: var(--gcli-input-color);
+  padding-inline-end: 2px;
+}
+
+.gcli-help-arrow {
+  color: #666;
+}
+
+.gcli-help-description {
+  margin: 0 20px;
+  padding: 0;
+}
+
+.gcli-help-parameter {
+  margin: 0 30px;
+  padding: 0;
+}
+
+.gcli-help-header {
+  margin: 10px 0 6px;
+}
+
+.gcli-menu-name {
+  padding-inline-start: 8px;
+}
+
+.gcli-menu-desc {
+  padding-inline-end: 8px;
+  color: var(--gcli-input-color);
+}
+
+.gcli-menu-name:hover,
+.gcli-menu-desc:hover {
+  background-color: var(--gcli-input-focused-background);
+}
+
+.gcli-menu-highlight,
+.gcli-menu-highlight:hover {
+  background-color: hsla(0,100%,100%,.1);
+}
+
+.gcli-menu-typed {
+  color: hsl(25,78%,50%);
+}
+
+.gcli-menu-more {
+  font-size: 80%;
+  text-align: end;
+  padding-inline-end: 8px;
+}
+
+.gcli-addon-disabled {
+  opacity: 0.6;
+  text-decoration: line-through;
+}
+
+.gcli-breakpoint-label {
+  font-weight: bold;
+}
+
+.gcli-breakpoint-lineText {
+  font-family: monospace;
+}
diff --git a/devtools/client/themes/commandline.inc.css b/devtools/client/themes/commandline.inc.css
new file mode 100644
index 000000000..db78bedf3
--- /dev/null
+++ b/devtools/client/themes/commandline.inc.css
@@ -0,0 +1,217 @@
+%if 0
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+%endif
+
+/* Developer toolbar */
+
+/* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
+   We are copy/pasting variables from light-theme and dark-theme,
+   since they aren't loaded in this context (within browser.css). */
+:root[devtoolstheme="light"] #developer-toolbar {
+  --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
+  --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */
+  --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
+  --gcli-input-color: #393f4c; /* --theme-body-color */
+  --gcli-border-color: #dde1e4; /* --theme-splitter-color */
+  --selection-background: #4c9ed9; /* --theme-selection-background */
+  --selection-color: #f5f7fa; /* --theme-selection-color */
+  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
+  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
+}
+
+:root[devtoolstheme="dark"] #developer-toolbar {
+  --gcli-background-color: #272b35; /* --theme-toolbar-background */
+  --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */
+  --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
+  --gcli-input-color: #b6babf; /* --theme-body-color-alt */
+  --gcli-border-color: #454d5d; /* --theme-splitter-color */
+  --selection-background: #5675b9; /* --theme-selection-background */
+  --selection-color: #f5f7fa; /* --theme-selection-color */
+  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
+  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
+}
+
+#developer-toolbar {
+  -moz-appearance: none;
+  padding: 0;
+  min-height: 32px;
+  background-color: var(--gcli-background-color);
+  border-top: 1px solid var(--gcli-border-color);
+}
+
+#developer-toolbar > toolbarbutton {
+  -moz-appearance: none;
+  border: none;
+  background-color: transparent;
+  margin: 0;
+  padding: 0 10px;
+  width: 32px;
+}
+
+.developer-toolbar-button > image {
+  margin: auto 10px;
+}
+
+:root[devtoolstheme="light"] #developer-toolbar > .developer-toolbar-button:not([checked=true]) > image,
+:root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before  {
+  filter: invert(1);
+}
+
+.developer-toolbar-button > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* The toolkit close button is low contrast in the dark theme so invert it. */
+:root[devtoolstheme="dark"] #developer-toolbar > .close-icon:not(:hover) > image {
+  filter: invert(1);
+}
+
+#developer-toolbar-toolbox-button {
+  list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#developer-toolbar-toolbox-button > label {
+  display: none;
+}
+
+#developer-toolbar-toolbox-button:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#developer-toolbar-toolbox-button:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+#developer-toolbar-toolbox-button[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+@media (min-resolution: 1.1dppx) {
+  #developer-toolbar-toolbox-button {
+    list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
+    -moz-image-region: rect(0px, 32px, 32px, 0px);
+  }
+
+  #developer-toolbar-toolbox-button:hover {
+    -moz-image-region: rect(0px, 64px, 32px, 32px);
+  }
+
+  #developer-toolbar-toolbox-button:hover:active {
+    -moz-image-region: rect(0px, 96px, 32px, 64px);
+  }
+
+  #developer-toolbar-toolbox-button[checked=true] {
+    -moz-image-region: rect(0px, 128px, 32px, 96px);
+  }
+}
+
+/* GCLI */
+
+html|*#gcli-tooltip-frame,
+html|*#gcli-output-frame {
+  padding: 0;
+  border-width: 0;
+  background-color: transparent;
+}
+
+#gcli-output,
+#gcli-tooltip {
+  border-width: 0;
+  background-color: transparent;
+  -moz-appearance: none;
+}
+
+.gclitoolbar-input-node,
+.gclitoolbar-complete-node {
+  margin: 0;
+  -moz-box-align: center;
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-right: 8px;
+  text-shadow: none;
+  box-shadow: none;
+  border-width: 0;
+  background-color: transparent;
+  border-radius: 0;
+}
+
+.gclitoolbar-input-node {
+  -moz-appearance: none;
+  color: var(--gcli-input-color);
+  background-color: var(--gcli-input-background);
+  background-repeat: no-repeat;
+  background-position: 4px center;
+  box-shadow: 1px 0 0 var(--gcli-border-color) inset,
+              -1px 0 0 var(--gcli-border-color) inset;
+
+  line-height: 32px;
+  outline-style: none;
+  padding: 0;
+}
+
+.gclitoolbar-input-node[focused="true"] {
+  background-color: var(--gcli-input-focused-background);
+}
+
+.gclitoolbar-input-node::before {
+  content: "";
+  display: inline-block;
+  -moz-box-ordinal-group: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0 2px;
+  background-image: var(--command-line-image);
+}
+
+.gclitoolbar-input-node[focused="true"]::before {
+  background-image: var(--command-line-image-focus);
+}
+
+.gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
+  background-color: var(--selection-background);
+  color: var(--selection-color);
+  text-shadow: none;
+}
+
+.gclitoolbar-complete-node {
+  padding-left: 21px;
+  background-color: transparent;
+  color: transparent;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.gcli-in-incomplete,
+.gcli-in-error,
+.gcli-in-ontab,
+.gcli-in-todo,
+.gcli-in-closebrace,
+.gcli-in-param,
+.gcli-in-valid {
+  margin: 0;
+  padding: 0;
+}
+
+.gcli-in-incomplete {
+  border-bottom: 2px dotted #999;
+}
+
+.gcli-in-error {
+  border-bottom: 2px dotted #F00;
+}
+
+.gcli-in-ontab {
+  color: hsl(210,0%,35%);
+}
+
+.gcli-in-todo {
+  color: hsl(210,50%,35%);
+}
+
+.gcli-in-closebrace {
+  color: hsl(0,0%,80%);
+}
diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css
new file mode 100644
index 000000000..3d713ada7
--- /dev/null
+++ b/devtools/client/themes/common.css
@@ -0,0 +1,791 @@
+/* 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("resource://devtools/client/themes/splitters.css");
+
+:root {
+  font: message-box;
+}
+
+:root[platform="mac"] {
+  --monospace-font-family: Menlo, monospace;
+}
+
+:root[platform="win"] {
+  --monospace-font-family: Consolas, monospace;
+}
+
+:root[platform="linux"],
+:root.theme-firebug {
+  --monospace-font-family: monospace;
+}
+
+:root.theme-firebug {
+  --proportional-font-family: Lucida Grande, Tahoma, sans-serif;
+}
+
+.devtools-monospace {
+  font-family: var(--monospace-font-family);
+}
+
+:root[platform="linux"] .devtools-monospace {
+  font-size: 80%;
+}
+
+
+/* Autocomplete Popup */
+
+.devtools-autocomplete-popup {
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
+  background-color: transparent;
+  border-radius: 3px;
+  overflow-x: hidden;
+  max-height: 20rem;
+
+  /* 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;
+}
+
+:root[platform="linux"] .devtools-autocomplete-popup {
+  /* Root font size is bigger on Linux, adjust rem-based values. */
+  max-height: 16rem;
+}
+
+.devtools-autocomplete-listbox {
+  -moz-appearance: none !important;
+  background-color: transparent;
+  border-width: 0px !important;
+  margin: 0;
+  padding: 2px;
+}
+
+.devtools-autocomplete-listbox .autocomplete-item {
+  width: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+  padding: 1px 0;
+}
+
+.devtools-autocomplete-listbox .autocomplete-selected {
+  background-color: rgba(0,0,0,0.2);
+}
+
+.devtools-autocomplete-listbox.dark-theme .autocomplete-selected,
+.devtools-autocomplete-listbox.dark-theme .autocomplete-item:hover {
+  background-color: rgba(0,0,0,0.5);
+}
+
+.devtools-autocomplete-listbox.dark-theme .autocomplete-selected > .autocomplete-value,
+.devtools-autocomplete-listbox:focus.dark-theme .autocomplete-selected > .initial-value {
+  color: hsl(208,100%,60%);
+}
+
+.devtools-autocomplete-listbox.dark-theme .autocomplete-selected > span {
+  color: #eee;
+}
+
+.devtools-autocomplete-listbox.dark-theme .autocomplete-item > span {
+  color: #ccc;
+}
+
+.devtools-autocomplete-listbox .autocomplete-item > .initial-value,
+.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-value {
+  margin: 0;
+  padding: 0;
+  cursor: default;
+}
+
+.devtools-autocomplete-listbox .autocomplete-item > .autocomplete-count {
+  text-align: end;
+}
+
+/* Rest of the dark and light theme */
+
+.devtools-autocomplete-popup,
+.theme-dark .CodeMirror-hints,
+.theme-dark .CodeMirror-Tern-tooltip {
+  border: 1px solid hsl(210,11%,10%);
+  background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
+}
+
+.devtools-autocomplete-popup.light-theme,
+.light-theme .CodeMirror-hints,
+.light-theme .CodeMirror-Tern-tooltip {
+  border: 1px solid hsl(210,24%,90%);
+  background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%));
+}
+
+.devtools-autocomplete-popup.light-theme {
+  box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset;
+}
+
+.theme-firebug .devtools-autocomplete-popup {
+  border-color: var(--theme-splitter-color);
+  border-radius: 5px;
+  font-size: var(--theme-autompletion-font-size);
+}
+
+.devtools-autocomplete-popup.firebug-theme {
+  background: var(--theme-body-background);
+}
+
+.devtools-autocomplete-listbox.firebug-theme .autocomplete-selected,
+.devtools-autocomplete-listbox.firebug-theme .autocomplete-item:hover,
+.devtools-autocomplete-listbox.light-theme .autocomplete-selected,
+.devtools-autocomplete-listbox.light-theme .autocomplete-item:hover {
+  background-color: rgba(128,128,128,0.3);
+}
+
+.devtools-autocomplete-listbox.firebug-theme .autocomplete-selected > .autocomplete-value,
+.devtools-autocomplete-listbox:focus.firebug-theme .autocomplete-selected > .initial-value,
+.devtools-autocomplete-listbox.light-theme .autocomplete-selected > .autocomplete-value,
+.devtools-autocomplete-listbox:focus.light-theme .autocomplete-selected > .initial-value {
+  color: #222;
+}
+
+.devtools-autocomplete-listbox.firebug-theme .autocomplete-item > span,
+.devtools-autocomplete-listbox.light-theme .autocomplete-item > span {
+  color: #666;
+}
+
+/* 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;
+}
+
+/* links to source code, like displaying `myfile.js:45` */
+
+.devtools-source-link {
+  font-family: var(--monospace-font-family);
+  color: var(--theme-highlight-blue);
+  cursor: pointer;
+  white-space: nowrap;
+  display: flex;
+  text-decoration: none;
+  font-size: 11px;
+  width: 12em; /* probably should be changed for each tool */
+}
+
+.devtools-source-link:hover {
+  text-decoration: underline;
+}
+
+.devtools-source-link > .filename {
+  text-overflow: ellipsis;
+  text-align: end;
+  overflow: hidden;
+  margin: 2px 0px;
+  cursor: pointer;
+}
+
+.devtools-source-link > .line-number {
+  flex: none;
+  margin: 2px 0px;
+  cursor: pointer;
+}
+
+/* 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;
+}
+
+/* Toolbar buttons */
+.devtools-menulist,
+.devtools-toolbarbutton,
+.devtools-button {
+  -moz-appearance: none;
+  background: transparent;
+  min-height: 18px;
+  text-shadow: none;
+  border: none;
+  border-radius: 0;
+  color: var(--theme-body-color);
+  transition: background 0.05s ease-in-out;
+}
+
+.devtools-menulist,
+.devtools-toolbarbutton {
+  -moz-box-align: center;
+  min-width: 78px;
+  padding: 1px;
+  margin: 2px 1px;
+}
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
+.devtools-button::before {
+  width: 16px;
+  height: 16px;
+  transition: opacity 0.05s ease-in-out;
+}
+
+/* HTML buttons */
+.devtools-button {
+  margin: 2px 1px;
+  padding: 1px;
+  min-width: 32px;
+  /* The icon is absolutely positioned in the button using ::before */
+  position: relative;
+}
+
+.devtools-button::before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -8px 0 0 -8px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  transition: opacity 0.05s ease-in-out;
+}
+
+.devtools-button:-moz-focusring {
+  outline: none;
+}
+
+/* Standalone buttons */
+.devtools-button[standalone],
+.devtools-button[data-standalone],
+.devtools-toolbarbutton[standalone],
+.devtools-toolbarbutton[data-standalone] {
+  border-width: 1px;
+  border-style: solid;
+  min-height: 32px;
+  background-color: var(--theme-toolbar-background);
+}
+
+.devtools-toolbarbutton[standalone], .devtools-toolbarbutton[data-standalone] {
+  margin-inline-end: 5px;
+}
+
+.devtools-toolbarbutton[label][standalone] {
+  min-height: 2em;
+}
+
+.devtools-menulist,
+.devtools-toolbarbutton,
+.devtools-button {
+  border-color: var(--toolbar-button-border-color);
+}
+
+/* Icon button styles */
+.devtools-toolbarbutton:not([label]),
+.devtools-toolbarbutton[text-as-image] {
+  min-width: 32px;
+}
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-toolbarbutton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+/* Menu button styles (eg. web console filters) */
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+  -moz-appearance: none;
+  color: inherit;
+  border-width: 0;
+  -moz-box-orient: horizontal;
+  padding: 0;
+}
+
+.devtools-toolbarbutton[type=menu-button] {
+  padding: 0 1px;
+  -moz-box-align: stretch;
+}
+
+.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+  margin-inline-end: 4px;
+}
+
+.devtools-menulist > .menulist-dropmarker {
+  -moz-appearance: none;
+  display: -moz-box;
+  list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  -moz-box-align: center;
+  min-width: 16px;
+}
+
+.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  -moz-box-align: center;
+  padding: 0 3px;
+}
+
+/* Icon-only buttons */
+.devtools-button:empty::before,
+.devtools-toolbarbutton:not([label]):not([disabled]) > image {
+  opacity: 0.8;
+}
+
+.devtools-button:hover:empty:not(:disabled):before,
+.devtools-button.checked:empty::before,
+.devtools-button[checked]:empty::before,
+.devtools-button[open]:empty::before,
+.devtools-toolbarbutton:not([label]):not([disabled=true]):hover > image,
+.devtools-toolbarbutton:not([label])[checked=true] > image,
+.devtools-toolbarbutton:not([label])[open=true] > image {
+  opacity: 1;
+}
+
+.devtools-button:disabled,
+.devtools-button[disabled],
+.devtools-toolbarbutton[disabled] {
+  opacity: 0.5 !important;
+}
+
+.devtools-button[checked]:empty::before,
+.devtools-button[open]:empty::before,
+.devtools-button.checked::before,
+.devtools-toolbarbutton:not([label])[checked=true] > image,
+.devtools-toolbarbutton:not([label])[open=true] > image {
+  filter: var(--checked-icon-filter);
+}
+
+/* Checked/opened icon button background */
+.theme-firebug .devtools-button[checked]:empty,
+.theme-firebug .devtools-button[open]:empty,
+.theme-firebug .devtools-button.checked,
+.theme-firebug .devtools-toolbarbutton:not([label])[checked=true],
+.theme-firebug .devtools-toolbarbutton:not([label])[open=true] {
+  background-color: #C8D8E7;
+}
+
+/* Icon-and-text buttons */
+.devtools-toolbarbutton.icon-and-text .toolbarbutton-text {
+  margin-inline-start: .5em !important;
+  font-weight: 600;
+}
+
+/* Text-only buttons */
+.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
+.theme-light .devtools-toolbarbutton[data-text-only],
+.theme-light .devtools-button:not(:empty) {
+  background-color: var(--toolbar-tab-hover);
+}
+.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
+.theme-dark .devtools-toolbarbutton[data-text-only],
+.theme-dark .devtools-button:not(:empty) {
+  background-color: rgba(0, 0, 0, .2); /* Splitter */
+}
+
+/* Text-only button states */
+.theme-dark .devtools-button:not(:empty):not(:disabled):hover,
+.theme-dark .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover {
+  background: rgba(0, 0, 0, .3); /* Splitters */
+}
+.theme-light .devtools-button:not(:empty):not(:disabled):hover,
+.theme-light .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover {
+  background: rgba(170, 170, 170, .3); /* Splitters */
+}
+
+.theme-dark .devtools-button:not(:empty):not(:disabled):hover:active,
+.theme-dark .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active {
+  background: rgba(0, 0, 0, .4); /* Splitters */
+}
+.theme-light .devtools-button:not(:empty):not(:disabled):hover:active,
+.theme-light .devtools-toolbarbutton:not(:-moz-any([checked=true],[disabled],[text-as-image]))[label]:hover:active {
+  background: var(--toolbar-tab-hover-active);
+}
+
+.theme-dark .devtools-toolbarbutton:not([disabled])[label][checked=true],
+.theme-dark .devtools-toolbarbutton:not([disabled])[label][open],
+.theme-dark .devtools-button:not(:empty)[checked=true] {
+  background: var(--theme-selection-background-semitransparent);
+  color: var(--theme-selection-color);
+}
+.theme-light .devtools-toolbarbutton:not([disabled])[label][checked=true],
+.theme-light .devtools-toolbarbutton:not([disabled])[label][open],
+.theme-light .devtools-button:not(:empty)[checked=true] {
+  background: rgba(76, 158, 217, .3); /* Select highlight blue */
+}
+
+:root {
+  --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
+}
+
+.devtools-button.devtools-clear-icon::before {
+  background-image: var(--clear-icon-url);
+}
+
+.devtools-button.devtools-filter-icon::before {
+  background-image: var(--filter-image);
+}
+
+.devtools-toolbarbutton.devtools-clear-icon {
+  list-style-image: var(--clear-icon-url);
+}
+
+.devtools-option-toolbarbutton {
+  list-style-image: var(--tool-options-image);
+}
+
+.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
+  margin-inline-end: 0;
+}
+
+.devtools-toolbarbutton-group + .devtools-toolbarbutton {
+  margin-inline-start: 3px;
+}
+
+.devtools-separator + .devtools-toolbarbutton {
+  margin-inline-start: 1px;
+}
+
+/*
+ * Filter buttons
+ * @TODO : Fix when https://bugzilla.mozilla.org/show_bug.cgi?id=1255116 lands
+ */
+.menu-filter-button {
+  -moz-appearance: none;
+  background: rgba(128,128,128,0.1);
+  border: none;
+  border-radius: 2px;
+  min-width: 0;
+  padding: 0 5px;
+  margin: 2px;
+  color: var(--theme-body-color);
+}
+
+.menu-filter-button:hover {
+  background: rgba(128,128,128,0.2);
+}
+
+.menu-filter-button:hover:active {
+  background-color: var(--theme-selection-background-semitransparent);
+}
+
+.menu-filter-button:not(:active).checked {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+/* Text input */
+
+.devtools-textinput,
+.devtools-searchinput,
+.devtools-filterinput {
+  -moz-appearance: none;
+  margin: 1px 3px;
+  border: 1px solid;
+  border-radius: 2px;
+  padding: 4px 6px;
+  border-color: var(--theme-splitter-color);
+  font: message-box;
+}
+
+:root[platform="mac"] .devtools-textinput,
+:root[platform="mac"] .devtools-searchinput,
+:root[platform="mac"] .devtools-filterinput {
+  border-radius: 20px;
+}
+
+.devtools-searchinput,
+.devtools-filterinput {
+  padding: 0;
+  padding-inline-start: 22px;
+  padding-inline-end: 4px;
+  background-position: 8px center;
+  background-size: 11px 11px;
+  background-repeat: no-repeat;
+  font-size: inherit;
+}
+
+/*
+ * @TODO : has-clear-btn class was added for bug 1296187 and we should remove it
+ *  once we have a standardized search and filter input across the toolboxes.
+ */
+.has-clear-btn > .devtools-searchinput,
+.has-clear-btn > .devtools-filterinput {
+  padding-inline-end: 23px;
+}
+
+.devtools-searchinput {
+  background-image: var(--magnifying-glass-image);
+}
+
+.devtools-filterinput {
+  background-image: url(chrome://devtools/skin/images/filter.svg#filterinput);
+}
+
+.devtools-searchinput:-moz-locale-dir(rtl),
+.devtools-searchinput:dir(rtl),
+.devtools-filterinput:-moz-locale-dir(rtl),
+.devtools-filterinput:dir(rtl) {
+  background-position: calc(100% - 8px) center;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon,
+.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
+  visibility: hidden;
+}
+
+.devtools-searchinput .textbox-input::placeholder,
+.devtools-filterinput .textbox-input::placeholder {
+  font-style: normal;
+}
+
+.devtools-plaininput {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.theme-dark .devtools-plaininput {
+  color: var(--theme-highlight-gray);
+}
+
+/* Searchbox is a div container element for a search input element */
+.devtools-searchbox {
+  display: inline-flex;
+  flex: 1;
+  height: 23px;
+  position: relative;
+  padding: 0 3px;
+}
+
+/* The spacing is accomplished with a padding on the searchbox */
+.devtools-searchbox > .devtools-textinput,
+.devtools-searchbox > .devtools-searchinput,
+.devtools-searchbox > .devtools-filterinput {
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+}
+
+.devtools-textinput:focus,
+.devtools-searchinput:focus,
+.devtools-filterinput:focus {
+  border-color: var(--theme-focus-border-color-textbox);
+  box-shadow: var(--theme-focus-box-shadow-textbox);
+  transition: all 0.2s ease-in-out;
+  outline: none;
+}
+
+/* Don't add 'double spacing' for inputs that are at beginning / end
+   of a toolbar (since the toolbar has it's own spacing). */
+.devtools-toolbar > .devtools-textinput:first-child,
+.devtools-toolbar > .devtools-searchinput:first-child,
+.devtools-toolbar > .devtools-filterinput:first-child {
+  margin-inline-start: 0;
+}
+.devtools-toolbar > .devtools-textinput:last-child,
+.devtools-toolbar > .devtools-searchinput:last-child,
+.devtools-toolbar > .devtools-filterinput:last-child {
+  margin-inline-end: 0;
+}
+.devtools-toolbar > .devtools-searchbox:first-child {
+  padding-inline-start: 0;
+}
+.devtools-toolbar > .devtools-searchbox:last-child {
+  padding-inline-end: 0;
+}
+
+.devtools-rule-searchbox {
+  -moz-box-flex: 1;
+  width: 100%;
+}
+
+.devtools-filterinput:-moz-any([filled],.filled) {
+  background-color: var(--searchbox-background-color);
+  border-color: var(--searchbox-border-color);
+}
+
+.devtools-style-searchbox-no-match {
+  background-color: var(--searcbox-no-match-background-color) !important;
+  border-color: var(--searcbox-no-match-border-color) !important;
+}
+
+.devtools-searchinput-clear {
+  position: absolute;
+  top: 3.5px;
+  offset-inline-end: 7px;
+  padding: 0;
+  border: 0;
+  width: 16px;
+  height: 16px;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-color: transparent;
+}
+
+.devtools-searchinput-clear:dir(rtl) {
+  right: unset;
+  left: 7px;
+}
+
+.theme-dark .devtools-searchinput-clear {
+  background-image: url("chrome://devtools/skin/images/search-clear-dark.svg");
+}
+
+.theme-light .devtools-searchinput-clear {
+  background-image: url("chrome://devtools/skin/images/search-clear-light.svg");
+}
+
+.devtools-style-searchbox-no-match + .devtools-searchinput-clear {
+  background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important;
+}
+
+.devtools-searchinput-clear:hover {
+  background-position: -16px 0;
+}
+
+.theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
+.theme-dark .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
+  list-style-image: url("chrome://devtools/skin/images/search-clear-dark.svg");
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+.theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
+.theme-light .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
+  list-style-image: url("chrome://devtools/skin/images/search-clear-light.svg");
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
+.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
+  margin-bottom: 0;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover,
+.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+/* Twisty and checkbox controls */
+.theme-twisty, .theme-checkbox {
+  width: 14px;
+  height: 14px;
+  background-repeat: no-repeat;
+  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-size: 56px 28px;
+}
+
+.theme-twisty {
+  cursor: pointer;
+  background-position: 0 -14px;
+}
+
+.theme-selected ~ .theme-twisty,
+.theme-dark .theme-twisty {
+  background-position: -28px -14px;
+}
+
+.theme-twisty:-moz-focusring {
+  outline-style: none;
+}
+
+.theme-twisty[open], .theme-twisty.open {
+  background-position: -14px -14px;
+}
+
+.theme-selected ~ .theme-twisty[open],
+.theme-dark .theme-twisty[open], .theme-dark .theme-twisty.open  {
+  background-position: -42px -14px;
+}
+
+.theme-twisty[invisible] {
+  visibility: hidden;
+}
+
+/* Mirror the twisty for rtl direction */
+.theme-twisty:dir(rtl),
+.theme-twisty:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+.theme-checkbox {
+  display: inline-block;
+  border: 0;
+  padding: 0;
+  outline: none;
+  background-position: 0 0;
+}
+
+.theme-dark .theme-checkbox {
+  background-position: -28px 0;
+}
+
+.theme-checkbox[checked] {
+  background-position: -14px 0;
+}
+
+.theme-dark .theme-checkbox[checked] {
+  background-position: -42px 0;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .theme-twisty, .theme-checkbox {
+    background-image: url("chrome://devtools/skin/images/controls@2x.png");
+  }
+}
+
+/* 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);
+  }
+}
diff --git a/devtools/client/themes/components-frame.css b/devtools/client/themes/components-frame.css
new file mode 100644
index 000000000..cbdc3d2cf
--- /dev/null
+++ b/devtools/client/themes/components-frame.css
@@ -0,0 +1,53 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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`
+ */
+
+.frame-link {
+  display: flex;
+  justify-content: space-between;
+}
+
+.frame-link-async-cause {
+  color: var(--theme-body-color-inactive);
+}
+
+.frame-link .frame-link-source {
+  flex: initial;
+  color: var(--theme-highlight-blue);
+}
+
+.frame-link a.frame-link-source {
+  cursor: pointer;
+  text-decoration: none;
+  font-style: normal;
+}
+
+.frame-link a.frame-link-source:hover {
+  text-decoration: underline;
+}
+
+.frame-link .frame-link-host {
+  margin-inline-start: 5px;
+  font-size: 90%;
+  color: var(--theme-content-color2);
+}
+
+.frame-link .frame-link-function-display-name {
+  margin-inline-end: 5px;
+}
+
+.frame-link .frame-link-line {
+  color: var(--theme-highlight-orange);
+}
+
+.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 000000000..270b007c7
--- /dev/null
+++ b/devtools/client/themes/components-h-split-box.css
@@ -0,0 +1,24 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/h-split-box.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 000000000..d36637ac9
--- /dev/null
+++ b/devtools/client/themes/computed.css
@@ -0,0 +1,237 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+#sidebar-panel-computedview {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+#computedview-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. */
+#computedview-container-focusable {
+  height: 100%;
+  outline: none;
+}
+
+#computedview-toolbar {
+  display: flex;
+  align-items: center;
+}
+
+#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 {
+  padding-inline-start: 5px;
+  margin-inline-end: 5px;
+}
+
+#propertyContainer {
+  -moz-user-select: text;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: auto;
+}
+
+.row-striped {
+  background: var(--theme-body-background);
+}
+
+.property-view-hidden,
+.property-content-hidden {
+  display: none;
+}
+
+.property-view {
+  padding: 2px 0px;
+  padding-inline-start: 5px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.property-name-container {
+  width: 202px;
+}
+
+.property-value-container {
+  display: flex;
+  flex: 1 1 168px;
+  overflow: hidden;
+}
+
+.property-name-container > *,
+.property-value-container > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.property-name {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  outline: 0 !important;
+}
+
+.other-property-value {
+  background-image: url(images/arrow-e.png);
+  background-repeat: no-repeat;
+  background-size: 5px 8px;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .other-property-value {
+    background-image: url(images/arrow-e@2x.png);
+  }
+}
+
+.property-value {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-inline-start: 14px;
+  outline: 0 !important;
+}
+
+.other-property-value {
+  background-position: left center;
+  padding-inline-start: 8px;
+}
+
+.other-property-value:dir(rtl) {
+  background-position-x: right;
+}
+
+.property-content {
+  padding-inline-start: 17px;
+}
+
+.theme-firebug .property-view,
+.theme-firebug .property-content {
+  font-family: var(--proportional-font-family);
+}
+
+.theme-firebug .property-view {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/* From skin */
+.expander {
+  visibility: hidden;
+}
+
+.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: rgba(128,128,128,0.4);
+  border-width: 1px 1px 0 1px;
+}
+
+.matchedselectors > p:last-of-type {
+  border-bottom-width: 1px;
+}
+
+.matched {
+  text-decoration: line-through;
+}
+
+.parentmatch {
+  opacity: 0.5;
+}
+
+#computedview-no-results {
+  height: 100%;
+}
+
+.onlyuserstyles {
+  cursor: pointer;
+}
+
+.legendKey {
+  margin: 0 5px;
+}
+
+.link {
+  padding: 0 3px;
+  cursor: pointer;
+  float: right;
+}
+
+/* Workaround until float: inline-end; is enabled by default */
+.link:dir(rtl) {
+  float: left;
+}
+
+/* Take away these two :visited rules to get a core dumper     */
+/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
+
+.link,
+.link:visited {
+  color: #0091ff;
+}
+
+.link,
+.helplink,
+.link:visited,
+.helplink:visited {
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.computedview-colorswatch {
+  border-radius: 50%;
+  width: 0.9em;
+  height: 0.9em;
+  vertical-align: middle;
+  margin-inline-end: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+.computedview-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 000000000..2035f8b22
--- /dev/null
+++ b/devtools/client/themes/dark-theme.css
@@ -0,0 +1,348 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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(resource://devtools/client/themes/variables.css);
+@import url(resource://devtools/client/themes/common.css);
+@import url(toolbars.css);
+@import url(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-content-color1);
+}
+
+::-moz-selection {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.theme-bg-darker {
+  background-color: var(--theme-selection-background-semitransparent);
+}
+
+.theme-selected,
+.CodeMirror-hint-active {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.theme-bg-contrast,
+.variable-or-property:not([overridden])[changed] {
+  background: var(--theme-contrast-background);
+}
+
+.theme-link,
+.cm-s-mozilla .cm-link,
+.cm-s-mozilla .cm-keyword {
+  color: var(--theme-highlight-green);
+}
+
+/*
+ * 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,
+.CodeMirror-Tern-type {
+  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);
+}
+
+.theme-gutter {
+  background-color: var(--theme-tab-toolbar-background);
+  color: var(--theme-content-color3);
+  border-color: var(--theme-splitter-color);
+}
+
+.theme-separator {
+  border-color: var(--theme-splitter-color);
+}
+
+.theme-fg-color1,
+.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-red);
+}
+
+.CodeMirror-Tern-completion-number:before {
+  background-color: #5c9966;
+}
+
+.theme-fg-color2,
+.cm-s-mozilla .cm-attribute,
+.cm-s-mozilla .cm-def,
+.cm-s-mozilla .cm-property,
+.cm-s-mozilla .cm-qualifier,
+.variables-view-variable > .title > .name {
+  color: var(--theme-highlight-purple);
+}
+
+.CodeMirror-Tern-completion-object:before {
+  background-color: #3689b2;
+}
+
+.cm-s-mozilla .cm-unused-line {
+  text-decoration: line-through;
+  text-decoration-color: #0072ab;
+}
+
+.cm-s-mozilla .cm-executed-line {
+  background-color: #133c26;
+}
+
+.theme-fg-color3,
+.cm-s-mozilla .cm-builtin,
+.cm-s-mozilla .cm-tag,
+.cm-s-mozilla .cm-header,
+.cm-s-mozilla .cm-bracket,
+.variables-view-property > .title > .name {
+  color: var(--theme-highlight-green);
+}
+
+.CodeMirror-Tern-completion-array:before {
+  background-color: var(--theme-highlight-bluegrey);
+}
+
+.theme-fg-color4 {
+  color: var(--theme-highlight-purple);
+}
+
+.theme-fg-color5 {
+  color: var(--theme-highlight-purple);
+}
+
+.theme-fg-color6,
+.cm-s-mozilla .cm-string,
+.cm-s-mozilla .cm-string-2,
+.variable-or-property .token-string,
+.cm-s-mozilla .cm-variable,
+.CodeMirror-Tern-farg {
+  color: var(--theme-highlight-gray);
+}
+
+.CodeMirror-Tern-completion-string:before,
+.CodeMirror-Tern-completion-fn:before {
+  background-color: #b26b47;
+}
+
+.theme-fg-color7,
+.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-alt);
+  background-color: var(--theme-toolbar-background);
+  border-color: var(--theme-splitter-color);
+}
+
+.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
+  color: black;
+}
+
+.ruleview-swatch,
+.computedview-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,
+.cm-s-mozilla .cm-variable-2,
+.cm-s-mozilla .cm-variable-3,
+.cm-s-mozilla .cm-operator,
+.cm-s-mozilla .cm-special {
+  color: var(--theme-content-color1);
+}
+
+.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
+  border-left: solid 1px #fff;
+}
+
+.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(176, 176, 176);
+}
+
+.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;
+}
+
+/* Highlight for evaluating current statement. */
+div.CodeMirror span.eval-text {
+  background-color: #556;
+}
+
+.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
+  color: var(--theme-content-color3);
+}
+
+.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
+  border-right-color: var(--theme-toolbar-background);
+  background-color: var(--theme-sidebar-background);
+}
+
+.cm-s-markup-view pre {
+  line-height: 1.4em;
+  min-height: 1.4em;
+}
+
+/* XUL panel styling (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
+
+.theme-tooltip-panel .panel-arrowcontent {
+  padding: 5px;
+  background: rgba(19, 28, 38, .9);
+  border-radius: 5px;
+  box-shadow: none;
+  border: 3px solid #434850;
+}
+
+/* Overring panel arrow images to fit with our light and dark themes */
+
+.theme-tooltip-panel .panel-arrow {
+  --arrow-margin: -4px;
+}
+
+:root[platform="win"] .theme-tooltip-panel .panel-arrow {
+  --arrow-margin: -7px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="top"],
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
+  /* !important is needed to override the popup.css rules in toolkit/themes */
+  width: 39px !important;
+  height: 16px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"],
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
+  /* !important is needed to override the popup.css rules in toolkit/themes */
+  width: 16px !important;
+  height: 39px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="top"] {
+  margin-bottom: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  margin-top: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"] {
+  margin-right: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  margin-left: var(--arrow-margin);
+}
+
+@media (min-resolution: 1.1dppx) {
+  .theme-tooltip-panel .panel-arrow[side="top"],
+  .theme-tooltip-panel .panel-arrow[side="bottom"] {
+    list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
+  }
+
+  .theme-tooltip-panel .panel-arrow[side="left"],
+  .theme-tooltip-panel .panel-arrow[side="right"] {
+    list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
+  }
+}
+
+.theme-tooltip-panel .devtools-tooltip-simple-text {
+  color: white;
+  border-bottom: 1px solid #434850;
+}
+
+.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
+  border-bottom: 0;
+}
+
+.devtools-textinput,
+.devtools-searchinput,
+.devtools-filterinput {
+  background-color: rgba(24, 29, 32, 1);
+  color: rgba(184, 200, 217, 1);
+}
+
+.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/debugger.css b/devtools/client/themes/debugger.css
new file mode 100644
index 000000000..3f2d49a0f
--- /dev/null
+++ b/devtools/client/themes/debugger.css
@@ -0,0 +1,670 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/* Sources and breakpoints pane */
+
+#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
+  border-color: transparent;
+}
+
+#sources-pane > tabs {
+  border-inline-end: 1px solid;
+}
+
+#sources-pane .devtools-toolbar {
+  border: none; /* Remove the devtools-toolbar bottom border. */
+  border-inline-end: 1px solid;
+}
+
+#sources-pane > tabs,
+#sources-pane .devtools-toolbar {
+  border-inline-end-color: var(--theme-splitter-color);
+}
+
+/* Sources and breakpoints list */
+
+.dbg-source-item {
+  padding: 2px 0px;
+}
+
+.dbg-wasm-item .icon {
+  display: block;
+  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-repeat: no-repeat;
+  background-size: 72px 60px;
+  /* show warning icon */
+  background-position: -24px -24px;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  margin-inline-start: -15px;
+  margin-top: 3px;
+}
+
+.dbg-breakpoint-line {
+  font-weight: 600;
+}
+
+.dbg-breakpoint-text {
+  padding-inline-start: 6px;
+  font-style: italic;
+  font-size: 90%;
+}
+
+.dbg-breakpoint-checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+}
+
+/* Firebug theme uses breakpoint icon istead of a checkbox */
+
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox .checkbox-check {
+  -moz-appearance: none;
+  border: none;
+  background: url(chrome://devtools/skin/images/firebug/breakpoint.svg) no-repeat 50% 50%;
+}
+
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) > .checkbox-check,
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) ~ * {
+  opacity: 0.5;
+}
+
+.theme-firebug #sources-pane .dbg-breakpoint-checkbox {
+  padding-inline-end: 0;
+  margin-inline-end: 0;
+}
+
+.dbg-breakpoint-condition-thrown-message {
+  display: none;
+  color: var(--theme-highlight-red);
+}
+
+.dbg-breakpoint.dbg-breakpoint-condition-thrown .dbg-breakpoint-condition-thrown-message {
+  display: block;
+  padding-inline-start: 0;
+}
+
+/* Sources toolbar */
+
+#sources-toolbar > .devtools-toolbarbutton,
+#sources-controls > .devtools-toolbarbutton {
+  min-width: 32px;
+}
+
+#black-box {
+  list-style-image: url(images/item-toggle.svg);
+}
+
+.theme-firebug #black-box {
+  list-style-image: url(images/firebug/debugger-blackbox.svg);
+}
+
+#pretty-print {
+  list-style-image: url(images/tool-styleeditor.svg);
+}
+
+.theme-firebug #pretty-print {
+  list-style-image: url(images/firebug/debugger-prettyprint.svg);
+}
+
+#toggle-breakpoints {
+  list-style-image: url(images/debugger-toggleBreakpoints.svg);
+  -moz-image-region: rect(0,32px,16px,16px);
+}
+
+.theme-firebug #toggle-breakpoints {
+  list-style-image: url(images/firebug/debugger-toggleBreakpoints.svg);
+  -moz-image-region: unset;
+}
+
+#toggle-breakpoints[checked] {
+  -moz-image-region: rect(0,16px,16px,0);
+}
+
+#toggle-breakpoints[checked] > image {
+  /* This button has a special checked image, don't make it blue */
+  filter: none;
+}
+
+#sources .black-boxed {
+  color: rgba(128,128,128,0.4);
+}
+
+#sources .selected .black-boxed {
+  color: rgba(255,255,255,0.4);
+}
+
+#sources .black-boxed ~ .dbg-breakpoint {
+  display: none;
+}
+
+/* Debugger unblackbox button */
+
+#black-boxed-message-button > .button-box > .button-icon {
+  width: 16px;
+  height: 16px;
+  background-image: url(images/item-toggle.svg);
+  background-position: 0 0;
+  background-size: cover;
+}
+
+/* Black box message and source progress meter */
+
+#black-boxed-message,
+#source-progress-container {
+  /* Prevent the container deck from aquiring the size from this message. */
+  min-width: 1px;
+  min-height: 1px;
+}
+
+#source-progress {
+  min-height: 2em;
+  min-width: 40em;
+}
+
+#black-boxed-message-label,
+#black-boxed-message-button {
+  text-align: center;
+  font-size: 120%;
+}
+
+#black-boxed-message-button {
+  margin-top: 1em;
+  padding: .25em;
+}
+
+/* Breadcrumbs stack frames view */
+
+.dbg-stackframe-details {
+  padding-inline-start: 4px;
+}
+
+/* Classic stack frames view */
+
+.dbg-classic-stackframe {
+  display: block;
+}
+
+.dbg-classic-stackframe-title {
+  font-weight: 600;
+}
+
+.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
+  float: right;
+}
+
+.dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
+  float: left;
+}
+
+.dbg-classic-stackframe-details-url {
+  max-width: 90%;
+  text-align: end;
+}
+
+.dbg-classic-stackframe-details-url {
+  color: var(--theme-content-color1);
+}
+
+.dbg-classic-stackframe-details-sep {
+  color: var(--theme-body-color-alt)
+}
+
+.dbg-classic-stackframe-details-line {
+  color: var(--theme-highlight-bluegrey);
+}
+
+#callstack-list .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Tracer */
+
+#trace {
+  list-style-image: url(images/tracer-icon.png);
+}
+
+@media (min-resolution: 1.1dppx) {
+  #trace {
+    list-style-image: url(images/tracer-icon@2x.png);
+  }
+}
+
+#clear-tracer {
+  /* Make this button as narrow as the text inside it. */
+  min-width: 1px;
+}
+
+.trace-name {
+  padding-inline-start: 4px;
+}
+
+/* Tracer dark theme */
+
+.theme-dark .trace-item {
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .trace-item.black-boxed {
+  color: rgba(128,128,128,0.4);
+}
+
+.theme-dark .trace-item.selected-matching {
+  background-color: rgba(86, 117, 185, .4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-dark .selected > .trace-item {
+  background-color: rgba(86, 117, 185, .6); /* Select highlight blue at 60% alpha */
+}
+
+.trace-call {
+  color: var(--theme-highlight-blue);
+}
+
+.trace-return,
+.trace-yield {
+  color: var(--theme-highlight-green);
+}
+
+.trace-throw {
+  color: var(--theme-highlight-red);
+}
+
+.trace-param {
+  color: var(--theme-content-color1);
+}
+
+.theme-dark .trace-syntax {
+  color: var(--theme-content-color2);
+}
+
+/* Tracer light theme */
+.theme-light .trace-item {
+  color: var(--theme-content-color1);
+}
+
+.theme-light .trace-item.black-boxed {
+  color: rgba(128,128,128,0.4);
+}
+
+.theme-light .trace-item.selected-matching {
+  background-color: rgba(76,158,217,.4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-light .selected > .trace-item {
+  background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */
+}
+
+#tracer-traces .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Watch expressions view */
+
+#expressions {
+  min-height: 10px;
+  max-height: 125px;
+}
+
+.dbg-expression {
+  height: 20px;
+}
+
+.dbg-expression-arrow {
+  background-image: var(--theme-command-line-image-focus);
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+}
+
+.dbg-expression-input {
+  color: inherit;
+}
+
+.dbg-expression-button {
+  -moz-appearance: none;
+  border: none;
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.dbg-expression-button {
+  color: var(--theme-highlight-blue);
+}
+
+/* Event listeners view */
+
+.dbg-event-listener-type {
+  font-weight: 600;
+}
+
+.dbg-event-listener-location {
+  color: var(--theme-content-color1);
+}
+
+.dbg-event-listener-separator {
+  color: var(--theme-body-color-alt);
+}
+
+.dbg-event-listener-targets {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.theme-dark #event-listeners .selected {
+  /* Selected items shouldn't be displayed differently. */
+  background: none;
+  color: #fff;
+}
+
+.theme-light #event-listeners .selected {
+  /* Selected items shouldn't be displayed differently. */
+  background: none;
+  color: #000;
+}
+
+/* Searchbox and the search operations help panel */
+
+#searchbox {
+  min-width: 220px;
+  margin-inline-start: 1px;
+}
+
+#filter-label {
+  margin-inline-start: 2px;
+}
+
+#searchbox-panel-operators {
+  margin-top: 5px;
+  margin-bottom: 8px;
+  margin-inline-start: 2px;
+}
+
+.searchbox-panel-operator-button {
+  min-width: 26px;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-inline-start: 2px;
+  margin-inline-end: 6px;
+  text-align: center;
+}
+
+.searchbox-panel-operator-label {
+  padding-bottom: 2px;
+}
+
+/* Searchbox results panel */
+
+#results-panel {
+  border: none;
+}
+
+.results-panel-item {
+  padding: 6px 8px;
+  border-top: 1px solid rgba(128,128,128,0.2);
+}
+
+.results-panel-item:first-of-type {
+  border-top: none;
+}
+
+.results-panel-item-label {
+  font-weight: 600;
+}
+
+.results-panel-item-label-before {
+  padding-inline-end: 6px;
+}
+
+.theme-dark .results-panel-item-label {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .results-panel-item-label {
+  color: var(--theme-body-color);
+}
+
+.results-panel-item-label-before {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.results-panel-item-label-below {
+  color: var(--theme-content-color3);
+}
+
+#results-panel .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Sources search view */
+
+#globalsearch {
+  min-height: 10px;
+  max-height: 50vh;
+}
+
+.dbg-results-header {
+  padding-inline-start: 6px;
+}
+
+.dbg-results-header-location {
+  font-weight: 600;
+}
+
+.dbg-results-header-match-count {
+  padding-inline-start: 6px;
+}
+
+.dbg-results-line-number {
+  min-width: 3em;
+  border-inline-end: 1px solid rgba(128,128,128,0.2);
+  padding-inline-end: 4px;
+  text-align: end;
+}
+
+.dbg-results-line-contents {
+  padding-inline-start: 4px;
+}
+
+.dbg-results-line-contents-string[match=true] {
+  background-color: rgba(255,255,0,0.2);
+  border: 1px solid rgba(128,128,128,0.7);
+  border-radius: 4px;
+  margin-top: -1px !important;
+  margin-bottom: -1px !important;
+  cursor: pointer;
+}
+
+.dbg-results-line-contents-string[match=true][focusing] {
+  transition: transform 0.3s ease-in-out;
+}
+
+.dbg-results-line-contents-string[match=true][focused] {
+  transition-duration: 0.1s;
+  transform: scale(1.75, 1.75);
+}
+
+.dbg-source-results:not(.selected):hover {
+  background-color: var(--theme-sidebar-background);
+}
+
+.dbg-results-header {
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.theme-dark .dbg-results-header {
+  color: var(--theme-content-color1);
+}
+
+.theme-light .dbg-results-header {
+  color: var(--theme-content-color3);
+}
+
+.theme-dark .dbg-search-result:hover {
+  background-color: rgba(86, 117, 185, .2); /* Select highlight blue at 40% alpha */
+}
+
+.theme-light .dbg-search-result:hover {
+  background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */
+}
+
+.dbg-results-header-match-count {
+  color: var(--theme-content-color3);
+}
+
+.dbg-results-line-number {
+  background-color: var(--theme-tab-toolbar-background);
+  color: var(--theme-body-color-alt);
+}
+
+.dbg-results-line-contents-string {
+  color: var(--theme-body-color-alt);
+}
+
+.theme-dark .dbg-results-line-contents-string[match=true] {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .dbg-results-line-contents-string[match=true] {
+  color: var(--theme-body-color);
+}
+
+/* Toolbar controls */
+
+#resume {
+  list-style-image: url(images/pause.svg);
+}
+
+#resume[checked] {
+  list-style-image: url(images/play.svg);
+}
+
+.theme-firebug #resume {
+  list-style-image: url(images/firebug/pause.svg);
+}
+
+.theme-firebug #resume[checked] {
+  list-style-image: url(images/firebug/play.svg);
+}
+
+#resume[break-on-next] {
+  background: var(--theme-highlight-lightorange);
+}
+
+#step-over {
+  list-style-image: url(images/debugger-step-over.svg);
+}
+
+#step-in {
+  list-style-image: url(images/debugger-step-in.svg);
+}
+
+#step-out {
+  list-style-image: url(images/debugger-step-out.svg);
+}
+
+.theme-firebug #step-over {
+  list-style-image: url(images/firebug/debugger-step-over.svg);
+}
+
+.theme-firebug #step-in {
+  list-style-image: url(images/firebug/debugger-step-in.svg);
+}
+
+.theme-firebug #step-out {
+  list-style-image: url(images/firebug/debugger-step-out.svg);
+}
+
+#instruments-pane-toggle {
+  list-style-image: var(--theme-pane-collapse-image);
+}
+
+#instruments-pane-toggle.pane-collapsed {
+  list-style-image: var(--theme-pane-expand-image);
+}
+
+/* Horizontal vs. vertical layout */
+
+#vertical-layout-panes-container {
+  min-height: 35vh;
+  max-height: 80vh;
+}
+
+#body[layout=vertical] #sources-pane > tabs {
+  border-inline-end: none;
+}
+
+#body[layout=vertical] #instruments-pane {
+  margin: 0 !important;
+  /* To prevent all the margin hacks to hide the sidebar. */
+}
+
+#body[layout=vertical] .side-menu-widget-container,
+#body[layout=vertical] .side-menu-widget-empty-text {
+  box-shadow: none !important;
+}
+
+#body[layout=vertical] .side-menu-widget-item-arrow {
+  background-image: none !important;
+}
+
+#body[layout=vertical] .side-menu-widget-group,
+#body[layout=vertical] .side-menu-widget-item {
+  margin-inline-end: 0;
+}
+
+/* Firebug theme customization of source group title */
+.theme-firebug #sources-pane .side-menu-widget-group-title {
+  border-bottom: none;
+  padding: 2px 4px;
+  background: var(--theme-header-background);
+  font-weight: bold;
+}
+
+/* Sections titles (toolbars) in Variables panel they have different height */
+.theme-firebug #variables-tabpanel .title.devtools-toolbar {
+  display: -moz-box;
+  height: 20px !important;
+}
+
+/* Firebug theme support for the Callstack Panel */
+
+.theme-firebug #callstack-list {
+  font-family: var(--proportional-font-family);
+}
+
+.theme-firebug #callstack-list .dbg-classic-stackframe-title {
+  color: var(--theme-content-color2);
+  font-weight: normal;
+  font-family: monospace;
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.theme-firebug #callstack-list .dbg-classic-stackframe-details-url,
+.theme-firebug #callstack-list .dbg-classic-stackframe-details-sep,
+.theme-firebug #callstack-list .dbg-classic-stackframe-details-line {
+  color: blue;
+  font-weight: bold;
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item {
+  margin: 0 4px;
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item.selected {
+  color: var(--theme-selection-color);
+}
+
+.theme-firebug #callstack-list .side-menu-widget-item:first-child {
+  border-top: none;
+}
diff --git a/devtools/client/themes/devtools-browser.css b/devtools/client/themes/devtools-browser.css
new file mode 100644
index 000000000..de846b8f3
--- /dev/null
+++ b/devtools/client/themes/devtools-browser.css
@@ -0,0 +1,26 @@
+/* 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("resource://devtools/client/themes/splitters.css");
+
+/* Bottom-docked toolbox minimize transition */
+.devtools-toolbox-bottom-iframe {
+  transition: margin-bottom .1s;
+}
+
+.devtools-toolbox-side-iframe {
+  min-width: 465px;
+}
+
+/* Eyedropper Widget */
+/* <panel> added to mainPopupSet */
+
+.devtools-eyedropper-panel {
+  pointer-events: none;
+  -moz-appearance: none;
+  width: 156px;
+  height: 120px;
+  background-color: transparent;
+  border: none;
+}
diff --git a/devtools/client/themes/dom.css b/devtools/client/themes/dom.css
new file mode 100644
index 000000000..53eb8bb28
--- /dev/null
+++ b/devtools/client/themes/dom.css
@@ -0,0 +1,9 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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-dark {
+}
+:root.theme-light {
+}
diff --git a/devtools/client/themes/firebug-theme.css b/devtools/client/themes/firebug-theme.css
new file mode 100644
index 000000000..ea06235c9
--- /dev/null
+++ b/devtools/client/themes/firebug-theme.css
@@ -0,0 +1,235 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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(resource://devtools/client/themes/variables.css);
+@import url(resource://devtools/client/themes/common.css);
+@import url(light-theme.css);
+
+:root {
+  font-size: 11px;
+  font-family: var(--proportional-font-family);
+}
+
+/* CodeMirror Color Syntax */
+
+.theme-firebug .cm-keyword {color: BlueViolet; font-weight: bold;}
+.theme-firebug .cm-atom {color: #219;}
+.theme-firebug .cm-number {color: #164;}
+.theme-firebug .cm-def {color: #00f;}
+.theme-firebug .cm-variable {color: black;}
+.theme-firebug .cm-variable-2 {color: black;}
+.theme-firebug .cm-variable-3 {color: black;}
+.theme-firebug .cm-property {color: black;}
+.theme-firebug .cm-operator {color: black;}
+.theme-firebug .cm-comment {color: Silver;}
+.theme-firebug .cm-string {color: Red;}
+.theme-firebug .cm-string-2 {color: Red;}
+.theme-firebug .cm-meta {color: rgb(120, 120, 120); font-style: italic;}
+.theme-firebug .cm-error {color: #f00;}
+.theme-firebug .cm-qualifier {color: #555;}
+.theme-firebug .cm-builtin {color: #30a;}
+.theme-firebug .cm-bracket {color: #997;}
+.theme-firebug .cm-tag {color: blue;}
+.theme-firebug .cm-attribute {color: rgb(0, 0, 136);}
+.theme-firebug .cm-header {color: blue;}
+.theme-firebug .cm-quote {color: #090;}
+.theme-firebug .cm-hr {color: #999;}
+.theme-firebug .cm-link {color: #00c;}
+
+.theme-firebug .theme-fg-color3,
+.theme-firebug .cm-s-mozilla .kind-Object .cm-variable{ /* dark blue */
+  color: #006400;
+  font-style: normal;
+  font-weight: bold;
+}
+
+.theme-firebug .console-string {
+  color: #FF183C;
+}
+
+/* Variables View */
+
+.theme-firebug .variables-view-variable > .title > .name,
+.theme-firebug .variables-view-variable > .title > .value {
+  color: var(--theme-body-color);
+}
+
+/* Firebug theme support for tabbar and panel tabs
+  (both, main and side panels )*/
+
+/* Only apply bottom-border for:
+  1) The main tab list.
+  2) The side tab list if there is no scroll-box that has its own border.
+
+  Use !important to override even the rule in webconsole.css that uses
+  ID in the selector. */
+.theme-firebug .devtools-tabbar,
+.theme-firebug .devtools-sidebar-tabs tabs {
+  background-image: linear-gradient(rgba(253, 253, 253, 0.2), rgba(253, 253, 253, 0));
+  border-bottom: 1px solid rgb(170, 188, 207) !important;
+}
+
+.theme-firebug .devtools-sidebar-tabs tabs {
+  background-color: var(--theme-tab-toolbar-background) !important;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
+}
+
+/* Add a negative bottom margin to overlap bottom border
+  of the parent element (see also the next comment for 'tabs') */
+.theme-firebug .devtools-tab,
+.theme-firebug .devtools-sidebar-tabs tab {
+  margin: 3px 0 -1px 0;
+  padding: 2px 0 0 0;
+  border: 1px solid transparent !important;
+  border-radius: 4px 4px 0 0;
+  font-weight: bold;
+  color: var(--theme-body-color);
+  -moz-box-flex: initial;
+  min-width: 0;
+}
+
+/* Also add negative bottom margin for side panel tabs*/
+.theme-firebug .devtools-sidebar-tabs tab {
+}
+
+/* In order to hide bottom-border of side panel tabs we need
+ to make the parent element overflow visible, so child element
+ can move one pixel down to hide the bottom border of the parent. */
+.theme-firebug .devtools-sidebar-tabs tabs {
+  overflow: visible;
+}
+
+.theme-firebug .devtools-tab:hover,
+.theme-firebug .devtools-sidebar-tabs tab:hover {
+  border: 1px solid #C8C8C8 !important;
+  border-bottom: 1px solid transparent;
+}
+
+.theme-firebug .devtools-tab[selected],
+.theme-firebug .devtools-sidebar-tabs tab[selected] {
+  background-color: rgb(247, 251, 254);
+  border: 1px solid rgb(170, 188, 207) !important;
+  border-bottom-width: 0 !important;
+  padding-bottom: 2px;
+  color: inherit;
+}
+
+.theme-firebug .devtools-tab spacer,
+.theme-firebug .devtools-tab image {
+  display: none;
+}
+
+.theme-firebug .toolbox-tab label {
+  margin: 0;
+}
+
+.theme-firebug .devtools-sidebar-tabs tab label {
+  margin: 2px 0 0 0;
+}
+
+/* Use different padding for labels inside tabs on Win platform.
+  Make sure this overrides the default in global.css */
+:root[platform="win"].theme-firebug .devtools-sidebar-tabs tab label {
+  margin: 0 4px !important;
+}
+
+.theme-firebug #panelSideBox .devtools-tab[selected],
+.theme-firebug .devtools-sidebar-tabs tab[selected] {
+  background-color: white;
+}
+
+.theme-firebug #panelSideBox .devtools-tab:first-child,
+.theme-firebug .devtools-sidebar-tabs tab:first-child {
+  margin-inline-start: 5px;
+}
+
+/* Firebug theme support for the Option (panel) tab */
+
+.theme-firebug #toolbox-tab-options {
+  margin-inline-end: 4px;
+  background-color: white;
+}
+
+.theme-firebug #toolbox-tab-options::before {
+  content: url(chrome://devtools/skin/images/firebug/tool-options.svg);
+  display: block;
+  margin: 4px 7px 0;
+}
+
+.theme-firebug #toolbox-tab-options:not([selected]):hover::before {
+  filter: brightness(80%);
+}
+
+/* Toolbar */
+
+.theme-firebug .theme-toolbar,
+.theme-firebug toolbar,
+.theme-firebug .devtools-toolbar {
+  border-bottom: 1px solid rgb(170, 188, 207) !important;
+  background-color: var(--theme-tab-toolbar-background) !important;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
+  padding-inline-end: 4px;
+}
+
+/* The vbox for panel content also uses theme-toolbar class from some reason
+ but it shouldn't have the padding as defined above, so fix it here */
+.theme-firebug #toolbox-deck > .toolbox-panel.theme-toolbar {
+  padding-inline-end: 0;
+}
+
+/* Space around toolbar buttons */
+.theme-firebug .devtools-toolbar {
+  padding: 3px;
+}
+
+/* The height is the same for all toolbars and side panels tabs */
+.theme-firebug .theme-toolbar,
+.theme-firebug .devtools-sidebar-tabs tabs,
+.theme-firebug .devtools-toolbar {
+  height: 28px !important;
+}
+
+/* Do not set the fixed height for rule viewtoolbar. This toolbar
+  is changing its height to show pseudo classes. */
+.theme-firebug #ruleview-toolbar-container {
+  height: auto !important;
+}
+
+/* The Inspector panel side panels are using both
+  .devtools-toolbar and .theme-toolbar. We want the
+  proportional font for all labels in these toolbars */
+.theme-firebug .devtools-toolbar label,
+.theme-firebug .devtools-toolbar .label,
+.theme-firebug .theme-toolbar label,
+.theme-firebug .theme-toolbar .label {
+  font-family: var(--proportional-font-family);
+}
+
+/* Toolbar Buttons */
+
+.theme-firebug .theme-toolbar button,
+.theme-firebug .devtools-button,
+.theme-firebug toolbarbutton {
+  margin: 1px;
+  border-radius: 2px;
+  color: var(--theme-body-color);
+  line-height: var(--theme-toolbar-font-size);
+  font-size: var(--theme-toolbar-font-size);
+}
+
+.theme-firebug .theme-toolbar button,
+.theme-firebug .devtools-button {
+  border-width: 1px !important;
+  min-width: 24px;
+}
+
+.theme-firebug .devtools-toolbarbutton {
+  min-width: 24px;
+}
+
+
+.theme-firebug #element-picker {
+  min-height: 21px;
+}
diff --git a/devtools/client/themes/floating-scrollbars-dark-theme.css b/devtools/client/themes/floating-scrollbars-dark-theme.css
new file mode 100644
index 000000000..042fe28cc
--- /dev/null
+++ b/devtools/client/themes/floating-scrollbars-dark-theme.css
@@ -0,0 +1,59 @@
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* Restrict all styles to `*|*:not(html|select) > scrollbar` so that scrollbars
+   inside a <select> are excluded (including them hides the select arrow on
+   Windows).  We want to include both the root scrollbars for the document as
+   well as any overflow: scroll elements within the page, while excluding
+   <select>. */
+*|*:not(html|select) > scrollbar {
+  -moz-appearance: none !important;
+  position: relative;
+  background-color: transparent;
+  background-image: none;
+  z-index: 2147483647;
+  padding: 2px;
+  pointer-events: auto;
+}
+
+*|*:root[platform="mac"] > scrollbar,
+*|*:root[platform="mac"] *|*:not(html|select) > scrollbar {
+  border: none;
+}
+
+/* Scrollbar code will reset the margin to the correct side depending on
+   where layout actually puts the scrollbar */
+*|*:not(html|select) > scrollbar[orient="vertical"] {
+  margin-left: -10px;
+  min-width: 10px;
+  max-width: 10px;
+}
+
+*|*:not(html|select) > scrollbar[orient="horizontal"] {
+  margin-top: -10px;
+  min-height: 10px;
+  max-height: 10px;
+}
+
+*|*:not(html|select) > scrollbar thumb {
+  background-color: rgba(170, 170, 170, .2) !important; /* --toolbar-tab-hover */
+  -moz-appearance: none !important;
+  border-width: 0px !important;
+  border-radius: 3px !important;
+}
+
+*|*:root[platform="mac"] > scrollbar slider,
+*|*:root[platform="mac"] *|*:not(html|select) > scrollbar slider {
+  -moz-appearance: none !important;
+}
+
+*|*:root[platform="win"] > scrollbar scrollbarbutton,
+*|*:root[platform="linux"] > scrollbar scrollbarbutton,
+*|*:root[platform="win"] > scrollbar gripper,
+*|*:root[platform="linux"] > scrollbar gripper,
+*|*:root[platform="win"] *|*:not(html|select) > scrollbar scrollbarbutton,
+*|*:root[platform="linux"] *|*:not(html|select) > scrollbar scrollbarbutton,
+*|*:root[platform="win"] *|*:not(html|select) > scrollbar gripper,
+*|*:root[platform="linux"] *|*:not(html|select) > scrollbar gripper {
+  display: none;
+}
diff --git a/devtools/client/themes/floating-scrollbars-responsive-design.css b/devtools/client/themes/floating-scrollbars-responsive-design.css
new file mode 100644
index 000000000..7709bdd34
--- /dev/null
+++ b/devtools/client/themes/floating-scrollbars-responsive-design.css
@@ -0,0 +1,47 @@
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* Restrict all styles to `*|*:not(html|select) > scrollbar` so that scrollbars
+   inside a <select> are excluded (including them hides the select arrow on
+   Windows).  We want to include both the root scrollbars for the document as
+   well as any overflow: scroll elements within the page, while excluding
+   <select>. */
+*|*:not(html|select) > scrollbar {
+  -moz-appearance: none !important;
+  position: relative;
+  background-color: transparent;
+  background-image: none;
+  z-index: 2147483647;
+  padding: 2px;
+  border: none;
+}
+
+/* Scrollbar code will reset the margin to the correct side depending on
+   where layout actually puts the scrollbar */
+*|*:not(html|select) > scrollbar[orient="vertical"] {
+  margin-left: -10px;
+  min-width: 10px;
+  max-width: 10px;
+}
+
+*|*:not(html|select) > scrollbar[orient="horizontal"] {
+  margin-top: -10px;
+  min-height: 10px;
+  max-height: 10px;
+}
+
+*|*:not(html|select) > scrollbar slider {
+  -moz-appearance: none !important;
+}
+
+*|*:not(html|select) > scrollbar thumb {
+  -moz-appearance: none !important;
+  background-color: rgba(0,0,0,0.2);
+  border-width: 0px !important;
+  border-radius: 3px !important;
+}
+
+*|*:not(html|select) > scrollbar scrollbarbutton,
+*|*:not(html|select) > scrollbar gripper {
+  display: none;
+}
diff --git a/devtools/client/themes/fonts.css b/devtools/client/themes/fonts.css
new file mode 100644
index 000000000..8305e34f3
--- /dev/null
+++ b/devtools/client/themes/fonts.css
@@ -0,0 +1,128 @@
+/* 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/. */
+
+#sidebar-panel-fontinspector {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+  width: 100%;
+  height: 100%;
+}
+
+#sidebar-panel-fontinspector > .devtools-toolbar {
+  display: flex;
+}
+
+#font-container {
+  overflow: auto;
+  flex: auto;
+}
+
+#all-fonts {
+  padding: 0;
+  margin: 0;
+}
+
+#font-showall {
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+#font-showall:hover {
+  text-decoration: underline;
+}
+
+.dim > #font-container,
+.font:not(.has-code) .font-css-code,
+.font-is-local,
+.font-is-remote,
+.font.is-local .font-format-url,
+#font-template {
+  display: none;
+}
+
+.font.is-remote .font-is-remote,
+.font.is-local .font-is-local {
+  display: inline;
+}
+
+.font-format::before {
+  content: "(";
+}
+
+.font-format::after {
+  content: ")";
+}
+
+.preview-input-toolbar {
+  display: flex;
+  width: 100%;
+}
+
+.font-preview-container {
+  overflow-x: auto;
+}
+
+#font-preview-text-input {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  padding-top: 0;
+  padding-bottom: 0;
+  flex: 1;
+}
+
+.font {
+  padding: 10px 10px;
+}
+
+.theme-dark .font {
+  border-bottom: 1px solid #444;
+}
+
+.theme-light .font {
+  border-bottom: 1px solid #DDD;
+}
+
+.font:last-of-type {
+  border-bottom: 0;
+}
+
+.theme-light .font:nth-child(even) {
+  background: #F4F4F4;
+}
+
+.font-preview {
+  margin-left: -4px;
+  height: 60px;
+  display: block;
+}
+
+.font-info {
+  display: block;
+}
+
+.font-name {
+  display: inline;
+}
+
+.font-css-code {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 5px;
+}
+
+.theme-light .font-css-code,
+.theme-light .font-url {
+  border: 1px solid #CCC;
+  background: white;
+}
+
+.theme-dark .font-css-code,
+.theme-dark .font-url {
+  border: 1px solid #333;
+  background: black;
+  color: white;
+}
diff --git a/devtools/client/themes/images/add.svg b/devtools/client/themes/images/add.svg
new file mode 100644
index 000000000..5eb43e78f
--- /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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+  <path d="M8 8v5.5c0 .276-.224.5-.5.5s-.5-.224-.5-.5V8H1.5c-.276 0-.5-.224-.5-.5s.224-.5.5-.5H7V1.5c0-.276.224-.5.5-.5s.5.224.5.5V7h5.5c.276 0 .5.224.5.5s-.224.5-.5.5H8z"/>
+</svg>
diff --git a/devtools/client/themes/images/alerticon-warning.png b/devtools/client/themes/images/alerticon-warning.png
new file mode 100644
index 000000000..5c5d0aec5
--- /dev/null
+++ b/devtools/client/themes/images/alerticon-warning.png
diff --git a/devtools/client/themes/images/alerticon-warning@2x.png b/devtools/client/themes/images/alerticon-warning@2x.png
new file mode 100644
index 000000000..dc3a3b108
--- /dev/null
+++ b/devtools/client/themes/images/alerticon-warning@2x.png
diff --git a/devtools/client/themes/images/angle-swatch.svg b/devtools/client/themes/images/angle-swatch.svg
new file mode 100644
index 000000000..83f9393a9
--- /dev/null
+++ b/devtools/client/themes/images/angle-swatch.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-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" 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 000000000..4723bf582
--- /dev/null
+++ b/devtools/client/themes/images/animation-fast-track.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="0" height="0">
+  <clipPath id="thunderbolt" transform="scale(1.4)">
+    <path d="M5.75 0l-1 5.5 2 .5-3.5 6 1-5-2-.5z"/>
+  </clipPath>
+</svg>
diff --git a/devtools/client/themes/images/arrow-e.png b/devtools/client/themes/images/arrow-e.png
new file mode 100644
index 000000000..cfa950a1f
--- /dev/null
+++ b/devtools/client/themes/images/arrow-e.png
diff --git a/devtools/client/themes/images/arrow-e@2x.png b/devtools/client/themes/images/arrow-e@2x.png
new file mode 100644
index 000000000..c628ca0a5
--- /dev/null
+++ b/devtools/client/themes/images/arrow-e@2x.png
diff --git a/devtools/client/themes/images/breadcrumbs-scrollbutton.png b/devtools/client/themes/images/breadcrumbs-scrollbutton.png
new file mode 100644
index 000000000..19af4c042
--- /dev/null
+++ b/devtools/client/themes/images/breadcrumbs-scrollbutton.png
diff --git a/devtools/client/themes/images/breadcrumbs-scrollbutton@2x.png b/devtools/client/themes/images/breadcrumbs-scrollbutton@2x.png
new file mode 100644
index 000000000..043702401
--- /dev/null
+++ b/devtools/client/themes/images/breadcrumbs-scrollbutton@2x.png
diff --git a/devtools/client/themes/images/breakpoint.svg b/devtools/client/themes/images/breakpoint.svg
new file mode 100644
index 000000000..9be328b83
--- /dev/null
+++ b/devtools/client/themes/images/breakpoint.svg
@@ -0,0 +1,45 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="12" viewBox="0 0 33 12">
+  <defs>
+    <style>
+      use:not(:target) {
+        display: none;
+      }
+      #light {
+        fill: #46afe3;
+      }
+      #light-hover {
+        fill: #9aa6b3;
+      }
+      #light-active {
+        fill: #2cbb0f;
+      }
+      #light-conditional {
+        fill: #d97e00;
+      }
+      #dark {
+        fill: #46afe3;
+      }
+      #dark-hover {
+        fill: #3d454d;
+      }
+      #dark-active {
+        fill: #70bf53;
+      }
+      #dark-conditional {
+        fill: #d89b28;
+      }
+    </style>
+    <path id="base-path" d="M27.1,0H1C0.4,0,0,0.4,0,1v10c0,0.6,0.4,1,1,1h26.1 c0.6,0,1.2-0.3,1.5-0.7L33,6l-4.4-5.3C28.2,0.3,27.7,0,27.1,0z"/>
+  </defs>
+  <use xlink:href="#base-path" id="light"/>
+  <use xlink:href="#base-path" id="light-hover"/>
+  <use xlink:href="#base-path" id="light-active"/>
+  <use xlink:href="#base-path" id="light-conditional"/>
+  <use xlink:href="#base-path" id="dark"/>
+  <use xlink:href="#base-path" id="dark-hover"/>
+  <use xlink:href="#base-path" id="dark-active"/>
+  <use xlink:href="#base-path" id="dark-conditional"/>
+</svg>
diff --git a/devtools/client/themes/images/clear.svg b/devtools/client/themes/images/clear.svg
new file mode 100644
index 000000000..f9ba7087f
--- /dev/null
+++ b/devtools/client/themes/images/clear.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="#0b0b0b">
+  <path d="M5 3h3V2c0-.003-3 0-3 0-.002 0 0 1 0 1zm-5 .5A.5.5 0 0 1 .494 3h12.012a.5.5 0 0 1 0 1H.494A.502.502 0 0 1 0 3.5zM4 3V2c0-.553.444-1 1-1h3c.552 0 1 .443 1 1v1H4zM5 11V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0zM7 11V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0zM9 11V6a.5.5 0 0 0-1 0v5a.5.5 0 1 0 1 0z"/>
+  <path d="M3 4v9h7V4H3zm0-1h7a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/>
+</svg>
diff --git a/devtools/client/themes/images/close.svg b/devtools/client/themes/images/close.svg
new file mode 100644
index 000000000..c5a597bae
--- /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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+  <path d="M8.707 8l4.23 4.23a.5.5 0 1 1-.707.707L8 8.707l-4.23 4.23a.5.5 0 1 1-.707-.707L7.293 8l-4.23-4.23a.5.5 0 1 1 .707-.707L8 7.293l4.23-4.23a.5.5 0 0 1 .707.707L8.707 8z" fill-rule="evenodd"/>
+</svg>
diff --git a/devtools/client/themes/images/command-console.svg b/devtools/client/themes/images/command-console.svg
new file mode 100644
index 000000000..77bb3a8e8
--- /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" viewBox="0 0 16 16" fill="#0b0b0b">
+  <path d="M6.8 9.7c0-.2 0-.3-.2-.4L4.9 7.6c-.3-.3-.7-.3-.9 0s-.3.6 0 .9l1.3 1.4L4 11.3c-.3.3-.3.6 0 .9s.6.3.9 0l1.8-1.8c.1-.2.2-.5.1-.7z"/>
+  <path d="M14.2 2H1.8c-.4 0-.8.4-.8.9v11.2c0 .4.3.9.8.9h12.4c.4 0 .8-.4.8-.9V2.9c0-.7-.6-.9-.8-.9zM14 14H2V6h12v8zm0-9H2V3h12v2z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-eyedropper.svg b/devtools/client/themes/images/command-eyedropper.svg
new file mode 100644
index 000000000..dff215857
--- /dev/null
+++ b/devtools/client/themes/images/command-eyedropper.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="#0b0b0b">
+  <path d="M8.3 2.9l4.9 4.9c.2.2.5.4.8.1.2-.2.1-.5-.1-.8L11.6 5l1.8-1.8c.2-.2.4-.5.1-.8-.2-.2-.5-.1-.8.1L11 4.3l-2.1-2c-.2-.3-.5-.4-.8-.2-.2.3-.1.6.2.8zM10.4 7.4l-6.1 6-2.4.8.7-2.4 6.2-6.1-.7-.7L2 11c-.1.1-.2.3-.2.4L1 13.7s-.1.7.1 1c.3.3.9.3 1.2.2l2.3-.8c.2-.1.3-.1.4-.3L11 8l-.6-.6z"/>
+  <path opacity="0.5" d="M7.1 7.1l-4.2 3.8-1.4 3.5 2.9-.6 2.8-2.7z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-frames.svg b/devtools/client/themes/images/command-frames.svg
new file mode 100644
index 000000000..6462c43c7
--- /dev/null
+++ b/devtools/client/themes/images/command-frames.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="#0b0b0b">
+  <path d="M14.2 2H1.8c-.4 0-.8.4-.8.9v11.2c0 .4.3.9.8.9h12.4c.4 0 .8-.4.8-.9V2.9s-.6-.9-.8-.9zM8 14H2v-4h6v4zm6 0H9v-4h5v4zm0-5H2V3h12v6z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-measure.svg b/devtools/client/themes/images/command-measure.svg
new file mode 100644
index 000000000..0aa830f15
--- /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" viewBox="0 0 16 16" fill="#0b0b0b">
+  <path d="M1 11h14V6H1v5zm15 .2c0 .5-.4.8-.8.8H.8c-.4 0-.8-.4-.8-.8V5.8c0-.4.4-.8.8-.8h14.3c.5 0 .9.4.9.8v5.4z"/>
+  <path d="M9 6v3c0 .2.3.4.5.4s.5-.2.5-.4V6H9zM13 6v3c0 .2.3.4.5.4.2-.1.5-.2.5-.4V6h-1zM5.1 5.7L4 6v2.8c0 .2.4.4.6.4s.5-.2.5-.4V5.7zM11 5v2.7c0 .2.3.4.5.4s.5-.2.5-.4V5h-1zM6 5.1v2.6c0 .2.5.4.7.4.2 0 .6-.2.6-.4l-.1-2.6H6zM2 5.1v2.6c0 .2.3.4.5.4s.5-.2.5-.4V5.1H2z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-noautohide.svg b/devtools/client/themes/images/command-noautohide.svg
new file mode 100755
index 000000000..ac53c7d54
--- /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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">

+  <path d="M2 1.99v4.02C2 6 2 6 1.99 6h4.02C6 6 6 6 6 6.01V1.99C6 2 6 2 6.01 2H1.99C2 2 2 2 2 1.99zm-1 0c0-.546.451-.99.99-.99h4.02c.546 0 .99.451.99.99v4.02c0 .546-.451.99-.99.99H1.99A.996.996 0 0 1 1 6.01V1.99zM10 1.99v4.02C10 6 10 6 9.99 6h4.02C14 6 14 6 14 6.01V1.99c0 .01 0 .01.01.01H9.99C10 2 10 2 10 1.99zm-1 0c0-.546.451-.99.99-.99h4.02c.546 0 .99.451.99.99v4.02c0 .546-.451.99-.99.99H9.99A.996.996 0 0 1 9 6.01V1.99zM10 9.99v4.02c0-.01 0-.01-.01-.01h4.02c-.01 0-.01 0-.01.01V9.99c0 .01 0 .01.01.01H9.99c.01 0 .01 0 .01-.01zm-1 0c0-.546.451-.99.99-.99h4.02c.546 0 .99.451.99.99v4.02c0 .546-.451.99-.99.99H9.99a.996.996 0 0 1-.99-.99V9.99zM2 9.99v4.02C2 14 2 14 1.99 14h4.02C6 14 6 14 6 14.01V9.99c0 .01 0 .01.01.01H1.99C2 10 2 10 2 9.99zm-1 0c0-.546.451-.99.99-.99h4.02c.546 0 .99.451.99.99v4.02c0 .546-.451.99-.99.99H1.99a.996.996 0 0 1-.99-.99V9.99z"/>

+</svg>

diff --git a/devtools/client/themes/images/command-paintflashing.svg b/devtools/client/themes/images/command-paintflashing.svg
new file mode 100644
index 000000000..dfd627a8d
--- /dev/null
+++ b/devtools/client/themes/images/command-paintflashing.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="#0b0b0b">
+  <path d="M3 6.997v6.006c0-.006.003-.003.002-.003h9.996c-.001 0 .002-.003.002.003V6.997c0 .006-.003.003-.002.003H3.002C3.003 7 3 7.003 3 6.997zm-1 0C2 6.447 2.456 6 3.002 6h9.996C13.55 6 14 6.453 14 6.997v6.006c0 .55-.456.997-1.002.997H3.002A1.004 1.004 0 0 1 2 13.003V6.997zM8.5 4V1.5a.5.5 0 0 0-1 0V4H4a.5.5 0 0 0 0 1h8a.5.5 0 1 0 0-1H8.5z"/>
+  <path fill-opacity=".3" d="M13 10v3H3v-3z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-pick.svg b/devtools/client/themes/images/command-pick.svg
new file mode 100644
index 000000000..382d236f9
--- /dev/null
+++ b/devtools/client/themes/images/command-pick.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="#0b0b0b">
+  <path d="M15 7.667V3.002A1.01 1.01 0 0 0 13.993 2H2.007C1.45 2 1 2.449 1 3.002v9.996C1 13.544 1.45 14 2.007 14h6.818l-.37-1H2V3h12v4.334l1 .333z"/>
+  <path fill-opacity=".3" d="M9 8l1.981 5.843 4.044-3.966z"/>
+  <path d="M8.526 8.16l1.982 5.844a.5.5 0 0 0 .824.196l4.043-3.966a.5.5 0 0 0-.202-.835L9.15 7.523a.5.5 0 0 0-.623.638zm.948-.32l-.623.637 6.025 1.877-.201-.834-4.044 3.966.824.197-1.981-5.844z"/>
+  <path d="M12.674 12.39l1.973 1.964a.5.5 0 1 0 .706-.708L13.38 11.68a.5.5 0 0 0-.706.709z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-responsivemode.svg b/devtools/client/themes/images/command-responsivemode.svg
new file mode 100644
index 000000000..583e59c1a
--- /dev/null
+++ b/devtools/client/themes/images/command-responsivemode.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" stroke="#0b0b0b" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" fill="transparent">
+  <circle cx="-5.5" cy="8.5" r="1"/>
+  <path d="M3.8 1.5h7.5v13H3.8z"/>
+  <path d="M11.2 8.5H3.8"/>
+  <circle cx="7.5" cy="11.5" r="1"/>
+</svg>
diff --git a/devtools/client/themes/images/command-rulers.svg b/devtools/client/themes/images/command-rulers.svg
new file mode 100644
index 000000000..995eb53e4
--- /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" viewBox="0 0 16 16" fill="#0b0b0b">
+  <path d="M11.4 3c-.2 0-.4.2-.4.4v2.5c0 .2.3.4.5.4s.5-.2.5-.4V3.4c0-.2-.3-.4-.5-.4M13.5 3.2c-.2 0-.5.2-.5.4v1.5c0 .2.3.4.5.4s.5-.2.5-.4V3.6c0-.2-.3-.4-.5-.4M9.6 3.2c-.2 0-.6.2-.6.4v1.5c0 .2.3.4.6.4.2 0 .4-.2.4-.4V3.6c0-.2-.2-.4-.4-.4M7.4 3c-.2 0-.4.2-.4.4v2.5c0 .2.3.4.5.4s.5-.2.5-.4V3.4c0-.2-.2-.4-.6-.4M5.5 3.2c-.3 0-.5.2-.5.4v1.5c0 .2.3.4.5.4s.5-.2.5-.4V3.6c0-.2-.3-.4-.5-.4M4.3 8.5c0-.2-.2-.5-.4-.5H2.4c-.2 0-.4.3-.4.5s.2.5.4.5h1.5c.2 0 .4-.3.4-.5M4.3 12.5c0-.2-.2-.5-.4-.5H2.4c-.2 0-.4.3-.4.5s.2.5.4.5h1.5c.2 0 .4-.3.4-.5M5.1 10.5c0-.2-.2-.5-.4-.5H3.2c-.2 0-.4.3-.4.5s.2.5.4.5h1.5c.2 0 .4-.3.4-.5M5.1 6.5c0-.2-.2-.5-.4-.5H3.2c-.2 0-.4.3-.4.5s.2.5.4.5h1.5c.2 0 .4-.3.4-.5"/>
+  <path d="M15.1 3H3.5C2.9 3 2 3.6 2 4.1V14c0 .6 1 1 1.5 1h3.2c.6 0 1.3-.5 1.3-1V9h7c.6 0 1-.4 1-.9v-4c0-1-.4-1.1-.9-1.1zM15 8H7.4c-.6 0-.5.1-.4 0v6H3V4h12v4z"/>
+</svg>
diff --git a/devtools/client/themes/images/command-screenshot.svg b/devtools/client/themes/images/command-screenshot.svg
new file mode 100644
index 000000000..8e81a334f
--- /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" viewBox="0 0 16 16" fill="#0b0b0b">
+  <path d="M13.6 5H11V3.5C11 2.7 10 2 9.2 2H6.8C6 2 5 2.7 5 3.5V5H2.4C1.6 5 1 5.6 1 6.4v6.5c0 .8.6 1.1 1.4 1.1h11.2c.8 0 1.4-.3 1.4-1.1V6.4c0-.8-.6-1.4-1.4-1.4zm.4 8H2V6h4V3h4v3h3.9l.1 7z"/>
+  <path d="M8 6.8c-1.3 0-2.4 1.1-2.4 2.4s1.1 2.4 2.4 2.4 2.4-1.1 2.4-2.4c0-1.3-1.1-2.4-2.4-2.4zm0 3.5c-.7 0-1.2-.5-1.2-1.1S7.3 8.1 8 8.1s1.2.5 1.2 1.1-.5 1.1-1.2 1.1z"/>
+</svg>
diff --git a/devtools/client/themes/images/commandline-icon.svg b/devtools/client/themes/images/commandline-icon.svg
new file mode 100644
index 000000000..429d6a73b
--- /dev/null
+++ b/devtools/client/themes/images/commandline-icon.svg
@@ -0,0 +1,42 @@
+<!-- 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="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      g {
+        display: none;
+      }
+
+      #light-theme:target,
+      #light-theme-focus:target ~ #light-theme,
+      #dark-theme:target,
+      #dark-theme-focus:target ~ #dark-theme {
+        display: inline;
+      }
+
+      #light-theme-focus:target ~ #light-theme {
+        fill: #4A90E2;
+      }
+      #dark-theme-focus:target ~ #dark-theme {
+        fill: #00FF7F;
+      }
+
+      /* Unfocused states */
+      #light-theme,
+      #dark-theme {
+        fill: rgba(128, 128, 128, .5);
+      }
+    </style>
+  </defs>
+  <g id="light-theme-focus"/>
+  <g id="light-theme">
+    <path d="M7.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+    <path d="M2.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+  </g>
+  <g id="dark-theme-focus"/>
+  <g id="dark-theme">
+    <path d="M7.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+    <path d="M2.29 13.907l7-5a.5.5 0 0 0 .033-.789l-6.5-5.5a.5.5 0 1 0-.646.764l6.5 5.5.032-.789-7 5a.5.5 0 1 0 .582.814z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/controls.png b/devtools/client/themes/images/controls.png
new file mode 100644
index 000000000..569c266e4
--- /dev/null
+++ b/devtools/client/themes/images/controls.png
diff --git a/devtools/client/themes/images/controls@2x.png b/devtools/client/themes/images/controls@2x.png
new file mode 100644
index 000000000..fb062516d
--- /dev/null
+++ b/devtools/client/themes/images/controls@2x.png
diff --git a/devtools/client/themes/images/cubic-bezier-swatch.png b/devtools/client/themes/images/cubic-bezier-swatch.png
new file mode 100644
index 000000000..2dcb58a2a
--- /dev/null
+++ b/devtools/client/themes/images/cubic-bezier-swatch.png
diff --git a/devtools/client/themes/images/cubic-bezier-swatch@2x.png b/devtools/client/themes/images/cubic-bezier-swatch@2x.png
new file mode 100644
index 000000000..64dbef89b
--- /dev/null
+++ b/devtools/client/themes/images/cubic-bezier-swatch@2x.png
diff --git a/devtools/client/themes/images/debugger-step-in.svg b/devtools/client/themes/images/debugger-step-in.svg
new file mode 100644
index 000000000..a74add83b
--- /dev/null
+++ b/devtools/client/themes/images/debugger-step-in.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="#0b0b0b">
+  <path d="M1.5 14.042h4.095a.5.5 0 0 0 0-1H1.5a.5.5 0 1 0 0 1zM7.5 3v6.983L4.364 6.657a.5.5 0 0 0-.728.686l4 4.243a.51.51 0 0 0 .021.02.5.5 0 0 0 .71-.024l3.997-4.239a.5.5 0 1 0-.728-.686L8.5 9.983V2.5a.5.5 0 0 0-.536-.5H1.536C1.24 2 1 2.224 1 2.5s.24.5.536.5H7.5zM10.5 14.042h4.095a.5.5 0 0 0 0-1H10.5a.5.5 0 1 0 0 1z"/>
+</svg>
diff --git a/devtools/client/themes/images/debugger-step-out.svg b/devtools/client/themes/images/debugger-step-out.svg
new file mode 100644
index 000000000..abef878f1
--- /dev/null
+++ b/devtools/client/themes/images/debugger-step-out.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="#0b0b0b">
+  <path d="M5 13.5H1a.5.5 0 1 0 0 1h4a.5.5 0 1 0 0-1zM12 13.5H8a.5.5 0 1 0 0 1h4a.5.5 0 1 0 0-1zM6.11 5.012A.427.427 0 0 1 6.21 5h7.083L9.646 1.354a.5.5 0 1 1 .708-.708l4.5 4.5a.498.498 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708-.708L13.293 6H6.5v5.5a.5.5 0 1 1-1 0v-6a.5.5 0 0 1 .61-.488z"/>
+</svg>
diff --git a/devtools/client/themes/images/debugger-step-over.png b/devtools/client/themes/images/debugger-step-over.png
new file mode 100644
index 000000000..ec28fc05e
--- /dev/null
+++ b/devtools/client/themes/images/debugger-step-over.png
diff --git a/devtools/client/themes/images/debugger-step-over.svg b/devtools/client/themes/images/debugger-step-over.svg
new file mode 100644
index 000000000..bdd5bde37
--- /dev/null
+++ b/devtools/client/themes/images/debugger-step-over.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="#0b0b0b">
+  <path d="M13.297 6.912C12.595 4.39 10.167 2.5 7.398 2.5A5.898 5.898 0 0 0 1.5 8.398a.5.5 0 0 0 1 0A4.898 4.898 0 0 1 7.398 3.5c2.75 0 5.102 2.236 5.102 4.898v.004L8.669 7.029a.5.5 0 0 0-.338.942l4.462 1.598a.5.5 0 0 0 .651-.34.506.506 0 0 0 .02-.043l2-5a.5.5 0 1 0-.928-.372l-1.24 3.098z"/>
+  <circle cx="7" cy="12" r="1"/>
+</svg>
diff --git a/devtools/client/themes/images/debugger-step-over@2x.png b/devtools/client/themes/images/debugger-step-over@2x.png
new file mode 100644
index 000000000..452f0d459
--- /dev/null
+++ b/devtools/client/themes/images/debugger-step-over@2x.png
diff --git a/devtools/client/themes/images/debugger-toggleBreakpoints.svg b/devtools/client/themes/images/debugger-toggleBreakpoints.svg
new file mode 100644
index 000000000..9d0b23004
--- /dev/null
+++ b/devtools/client/themes/images/debugger-toggleBreakpoints.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="32" height="16" viewBox="0 0 32 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+  <path d="M3.233 11.25l-.417 1H1.712C.763 12.25 0 11.574 0 10.747V6.503C0 5.675.755 5 1.712 5h4.127l-.417 1H1.597C1.257 6 1 6.225 1 6.503v4.244c0 .277.267.503.597.503h1.636zM7.405 11.02L7 12.056c.865.01 2.212-.024 2.315-.04.112-.016.112-.016.185-.035.075-.02.156-.046.251-.082.152-.056.349-.138.592-.244.415-.182.962-.435 1.612-.744l.138-.066a179.35 179.35 0 0 0 2.255-1.094c1.191-.546 1.191-2.074-.025-2.632l-.737-.34A3547.554 3547.554 0 0 0 9.732 5c-.029.11-.065.222-.11.336l-.232.596c.894.408 4.56 2.107 4.56 2.107.458.21.458.596 0 .806L9.197 11.02H7.405zM20.462 14.192l5-12a.5.5 0 0 0-.924-.384l-5 12a.5.5 0 0 0 .924.384zM19.233 11.25l-.417 1h-1.104c-.949 0-1.712-.676-1.712-1.503V6.503C16 5.675 16.755 5 17.712 5h4.127l-.417 1h-3.825c-.34 0-.597.225-.597.503v4.244c0 .277.267.503.597.503h1.636zM23.405 11.02L23 12.056c.865.01 2.212-.024 2.315-.04.112-.016.112-.016.185-.035.075-.02.156-.046.251-.082.152-.056.349-.138.592-.244.415-.182.962-.435 1.612-.744l.138-.066a179.35 179.35 0 0 0 2.255-1.094c1.191-.546 1.191-2.074-.025-2.632l-.737-.34A3547.554 3547.554 0 0 0 25.732 5c-.029.11-.065.222-.11.336l-.232.596c.894.408 4.56 2.107 4.56 2.107.458.21.458.596 0 .806l-4.753 2.174h-1.792z"/>
+</svg>
diff --git a/devtools/client/themes/images/debugging-addons.svg b/devtools/client/themes/images/debugging-addons.svg
new file mode 100644
index 000000000..8a98d0275
--- /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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="#fbfbfb">
+  <path d="M12,17c0.5,0,1-0.5,1-1v-4c0,0,0.2-0.8,0.8-0.8c0.6,0,0.6,0.8,1.8,0.8 c0.6,0,1.5-0.2,1.5-2c0-1.8-0.9-2-1.5-2c-1.1,0-1.2,0.8-1.8,0.8C13.2,8.8,13,8,13,8V6c0-0.6-0.4-1-1-1H9c0,0-0.8-0.1-0.8-0.8 S9,3.6,9,2.5C9,1.9,8.8,1,7,1S5,1.9,5,2.5c0,1.1,0.8,1.2,0.8,1.8S5,5,5,5H2C1.4,5,1,5.4,1,6l0,2.5c0,0-0.1,1.5,1.1,1.5 c0.8,0,0.9-1,1.9-1c0.5,0,1,0.5,1,1.6c0,1-0.5,1.6-1,1.6c-1,0-1.1-1-1.9-1C0.9,11,1,12.5,1,12.5L1,16c0,0.6,0.4,1,1,1h3.9 c0,0,1.5,0.1,1.5-1.1c0-0.8-1-0.9-1-1.9c0-0.5,0.7-1.2,1.8-1.2s1.9,0.7,1.9,1.2c0,1-1,1.1-1,1.9c0,1.2,1.5,1.1,1.5,1.1H12z" />
+</svg>
diff --git a/devtools/client/themes/images/debugging-devices.svg b/devtools/client/themes/images/debugging-devices.svg
new file mode 100644
index 000000000..be2cd5af6
--- /dev/null
+++ b/devtools/client/themes/images/debugging-devices.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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="#fbfbfb">
+	<path d="M10.7,14.4H5.3c-1.2,0-1.5-0.4-1.5-1.2V2.8c0-0.9,0.3-1.2,1.5-1.2h5.3c1.1,0,1.5,0.3,1.5,1.2v10.3
+		C12.2,14.1,11.8,14.4,10.7,14.4z M5,12.6h6V3.5H5V12.6z"/>
+</svg>
diff --git a/devtools/client/themes/images/debugging-tabs.svg b/devtools/client/themes/images/debugging-tabs.svg
new file mode 100644
index 000000000..91ad8e925
--- /dev/null
+++ b/devtools/client/themes/images/debugging-tabs.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
+  <path d="M17,12v2a1,1,0,0,1-1,1H2a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H1.142c2.3,0,2.536-1.773,2.874-4,0.351-2.316.083-4,3.13-4h3.707C13.917,3,13.647,4.684,14,7c0.34,2.228.582,4,2.89,4H16A1,1,0,0,1,17,12Z" fill="white"/>
+</svg>
diff --git a/devtools/client/themes/images/debugging-workers.svg b/devtools/client/themes/images/debugging-workers.svg
new file mode 100644
index 000000000..c04c63252
--- /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" viewBox="0 0 16 16" fill="#fbfbfb">
+<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/diff.svg b/devtools/client/themes/images/diff.svg
new file mode 100644
index 000000000..ce237eb75
--- /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="#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 000000000..09ce70258
--- /dev/null
+++ b/devtools/client/themes/images/dock-bottom.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="#0b0b0b">
+  <path d="M10.004 3H.996C.999 3 1 3 1 3.002v9.996c0-.001.003.002-.004.002h9.008c-.003 0-.004 0-.004-.002V3.002c0 .001-.003-.002.004-.002zm0-1c.55 0 .996.456.996 1.002v9.996A.998.998 0 0 1 10.004 14H.996C.446 14 0 13.544 0 12.998V3.002A.998.998 0 0 1 .996 2h9.008zm-.41 8H.996v1h9.01v-1h-.41z"/>
+</svg>
diff --git a/devtools/client/themes/images/dock-side.svg b/devtools/client/themes/images/dock-side.svg
new file mode 100644
index 000000000..3855ca614
--- /dev/null
+++ b/devtools/client/themes/images/dock-side.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+  <path d="M1 2.996v9.008c0-.003 0-.004.002-.004h9.996c-.001 0 .002-.003.002.004V2.996c0 .003 0 .004-.002.004H1.002C1.003 3 1 3.003 1 2.996zm-1 0C0 2.446.456 2 1.002 2h9.996A.998.998 0 0 1 12 2.996v9.008c0 .55-.456.996-1.002.996H1.002A.998.998 0 0 1 0 12.004V2.996zm8 .413V12h1V3H8v.41z"/>
+</svg>
diff --git a/devtools/client/themes/images/dock-undock.svg b/devtools/client/themes/images/dock-undock.svg
new file mode 100644
index 000000000..d4b100a03
--- /dev/null
+++ b/devtools/client/themes/images/dock-undock.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" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+  <path d="M13.003 1.941H6.997c.008 0 .003.004.003.008v6.102c0 .004.004.008-.003.008h6.006c-.008 0-.003-.004-.003-.008V1.949c0-.004-.004-.008.003-.008zm0-.941c.55 0 .997.43.997.95v6.1c0 .525-.453.95-.997.95H6.997C6.447 9 6 8.57 6 8.05v-6.1c0-.525.453-.95.997-.95h6.006z"/>
+  <path d="M9 9.91v-.278h1v1.183c0 .516-.453.935-.997.935H2.997c-.55 0-.997-.43-.997-.95V4.7c0-.525.444-.95 1.006-.95h2.288v.941H3.006C3 4.691 3 4.691 3 4.7v6.102c0 .004.004.008-.003.008h6.006c-.004 0-.003-.001-.003.006v-.248-.657-.278h1v1.183c0 .516-.453.935-.997.935H2.997c-.55 0-.997-.43-.997-.95V4.7c0-.525.444-.95 1.006-.95h2.288v.941H3.006C3 4.691 3 4.691 3 4.7v6.102c0 .004.004.008-.003.008h6.006c-.004 0-.003-.001-.003.006v-.248-.657z"/>
+  <path d="M12.52 5H6.976v1h6.046V5zM6.5 7H2.975v1H7V7z"/>
+</svg>
diff --git a/devtools/client/themes/images/dropmarker.svg b/devtools/client/themes/images/dropmarker.svg
new file mode 100644
index 000000000..7592790c4
--- /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="#b6babf"/>

+</svg>

diff --git a/devtools/client/themes/images/editor-error.png b/devtools/client/themes/images/editor-error.png
new file mode 100644
index 000000000..39ef81e20
--- /dev/null
+++ b/devtools/client/themes/images/editor-error.png
diff --git a/devtools/client/themes/images/emojis/emoji-command-pick.svg b/devtools/client/themes/images/emojis/emoji-command-pick.svg
new file mode 100755
index 000000000..4be436766
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-command-pick.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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" opacity="1.0">
+    <path fill="#C89979" d="M57.2 20.6c-1 0-2 .4-2.7 1 0 0-.1 0-.2.1-.8.8-1.6.8-2.4 0-.7-.7-1.7-1.1-2.8-1.1-1.1 0-2 .4-2.7 1 0 0-.1 0-.2.1-.8.8-1.6.8-2.4.1-.7-.7-1.8-1.2-2.9-1.2-1.1 0-2 .4-2.7 1 0 0-.1 0-.2.1-.3.3-.6.5-.9.6V4c0-2.2-1.8-4.1-4.1-4.1S29 1.7 29 4v35c-1-1.2-1.9-1.6-3.2-2.9-7.2-6.9-10.7-5-12.3-3.6-1.5 1.5-1.1 4 .5 5.5 7.9 6.8 12.1 17.5 13.8 20.8 0 0 0 .1.1.1.2.4.4.7.5.8 1 1.4 2.3 2.5 3.8 3.2V69c0 1.6 1.3 2.9 2.9 2.9h18.6c1.6 0 2.9-1.3 2.9-2.9v-8c2.8-2.3 4.6-5.9 4.6-9.8V24.7c.1-2.3-1.8-4.1-4-4.1z"/>
+    <path fill="#AD7E5E" d="M48.6 63.9h-.2H36.1c-1.4 0-2.7-.3-3.9-.9v1.3c0 1.2 1 2.2 2.2 2.2h20c1.2 0 2.2-1 2.2-2.2V61c-2.2 1.8-5 2.9-8 2.9z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-canvas.svg b/devtools/client/themes/images/emojis/emoji-tool-canvas.svg
new file mode 100644
index 000000000..97d8a91a0
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-canvas.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" viewBox="0 0 512 512" opacity="1.0">
+  <path fill="#98D4FA" d="M488.95 10.383H21.717c-6.6 0-12 5.4-12 12v467.234c0 6.6 5.4 12 12 12H488.95c6.6 0 12-5.4 12-12V22.383c0-6.6-5.4-12-12-12z"/>
+  <path fill="#0096D1" d="M215.218 489.383c0 4.1.107 8.176.278 12.234h40.953c-.2-4.053-.306-8.132-.306-12.234 0-135.203 109.604-244.807 244.807-244.807V203.65c-157.805 0-285.732 127.927-285.732 285.733z"/>
+  <path fill="#21C14B" d="M167.45 489.383c0 4.098.1 8.172.247 12.234h47.8c-.172-4.06-.28-8.134-.28-12.234 0-157.806 127.928-285.733 285.734-285.733v-47.768c-184.187 0-333.5 149.313-333.5 333.5z"/>
+  <path fill="#FFD469" d="M121.973 489.383c0 4.094.073 8.17.2 12.234h45.524c-.147-4.062-.247-8.136-.247-12.234 0-184.187 149.313-333.5 333.5-333.5v-45.478c-209.303 0-378.977 169.674-378.977 378.978z"/>
+  <path fill="#FF7B39" d="M70.294 489.383c0 4.092.063 8.17.176 12.234h51.704c-.13-4.063-.2-8.14-.2-12.234 0-209.304 169.673-378.978 378.977-378.978v-51.68c-237.845 0-430.656 192.813-430.656 430.658z"/>
+  <path fill="#FF473E" d="M488.95 10.383H400.24c-221.962 46.434-388.67 243.245-388.67 479 0 2.228.017 4.45.047 6.672 2.138 3.335 5.868 5.563 10.102 5.563H70.47c-.113-4.065-.176-8.142-.176-12.234 0-237.845 192.812-430.657 430.657-430.657V22.383c0-6.6-5.4-12-12-12z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-debugger.svg b/devtools/client/themes/images/emojis/emoji-tool-debugger.svg
new file mode 100644
index 000000000..07b9ebbb9
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-debugger.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" viewBox="0 0 72 72" opacity="1.0">
+    <path fill="#EDC0A2" d="M44.3 11.6c-.2 0-.5 0-.7.1V6.4c0-2.2-1.8-4-4-4-1.7 0-3.1 1-3.7 2.4-.6-1.4-2-2.4-3.7-2.4-2.2 0-4 1.8-4 4v5.3c-.2 0-.5-.1-.7-.1-2.2 0-4 1.8-4 4v31.7c0 2.2 1.8 4 4 4 1.1 0 2.2-.5 2.9-1.2.5.3 1.2.5 1.8.5v.2h10.1c.6.3 1.2.5 2 .5 2.2 0 4-1.8 4-4V15.6c0-2.2-1.7-4-4-4z"/>
+    <path fill="#357BA8" d="M66.7 44.5c-.3-.5-.6-.9-1-1.3-3.5-3.5-10.8-1.7-16.4 3.9-5.6 5.6-7.4 13-3.9 16.4.3.3.5.5.8.7L54 72h17.8l.2-22.2-5.3-5.3z"/>
+    <path fill="#FFD3B6" d="M61.1 42.5c-.2-.4-.5-.8-.9-1.1-6.8-6-14.5-14.8-14.5-17.9V7.7c0-2.2-1.8-4-4-4s-4 1.8-4 4v32.5c0 12.5 7.3 19.7 7.6 20 .6.5 1.4.9 2.2 1.1h.8c1.8 0 5.5-.7 10-5.2 5.2-5.1 4.2-10.9 2.8-13.6z"/>
+    <path fill="#357BA8" d="M22.6 47.1c-5.6-5.6-13-7.4-16.4-3.9-.4.4-.7.8-1 1.3l-5.3 5.3L0 72h17.8l7.8-7.8c.3-.2.6-.4.8-.7 3.6-3.5 1.8-10.8-3.8-16.4z"/>
+    <path fill="#FFD3B6" d="M30.2 3.7c-2.2 0-4 1.8-4 4v15.8c0 3.1-7.6 11.9-14.5 17.9-.4.3-.7.7-.9 1.1-1.4 2.7-2.4 8.5 2.7 13.7 4.5 4.5 8.2 5.2 10 5.2h.8c.8-.1 1.6-.5 2.2-1.1.3-.3 7.6-7.4 7.6-20V7.7c.1-2.2-1.7-4-3.9-4z"/>
+    <path fill="#00BEEA" d="M54.5 13.8c.1 0 .1 0 .2-.1l7.1-4c.1-.1.2-.2.2-.3 0-.1 0-.2-.1-.3L58.8 6c-.1 0-.2-.1-.4 0-.1 0-.2.1-.3.2l-4 7.1c-.1.2-.1.3.1.5h.3zM10.5 9.8l7.1 4c.1 0 .1.1.2.1.3 0 .4-.2.4-.4 0-.1 0-.2-.1-.3l-3.9-7c-.1-.2-.2-.2-.3-.2-.1 0-.2 0-.3.1l-3.1 3.1c-.1.1-.1.2-.1.3 0 .1 0 .2.1.3zM62.1 18.7c-.1-.1-.2-.1-.3-.1L54 20.8c-.2 0-.3.2-.3.4s.1.3.3.4l7.8 2.2h.1c.1 0 .2 0 .2-.1.1-.1.2-.2.2-.3V19c-.1-.1-.1-.3-.2-.3zM18.4 20.8l-7.8-2.2c-.1 0-.2 0-.3.1-.2 0-.3.2-.3.3v4.3c0 .1.1.2.2.3.1.1.2.1.2.1h.1l7.8-2.2c.2 0 .3-.2.3-.4s-.1-.3-.2-.3z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-dom.svg b/devtools/client/themes/images/emojis/emoji-tool-dom.svg
new file mode 100644
index 000000000..1d3e40fad
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-dom.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 512 512">
+  <path fill="#51BA7B" d="M487.819 258.669H439.1c-10.041 0-18.181-8.14-18.181-18.181s8.14-18.181 18.181-18.181h48.719c10.041 0 18.181 8.14 18.181 18.181s-8.14 18.181-18.181 18.181z"/>
+  <path fill="#BADEBE" d="M415.747 69.674s-.387.603-1.059 1.667a8.05 8.05 0 0 1-.638.799 59.208 59.208 0 0 0-1.057 1.933c-.357.806-.812 1.618-1.199 2.599a55.875 55.875 0 0 0-1.233 3.083c-.433 1.086-.783 2.248-1.19 3.426-.364 1.183-.742 2.395-1.064 3.614-.316 1.219-.645 2.445-.884 3.643-.286 1.219-.475 2.381-.679 3.523-.188 1.142-.308 2.214-.434 3.243-.041.505-.077.988-.118 1.457-.043.483-.07.939-.063 1.338-.007.812-.063 1.646 0 2.221.014.315.034.609.048.882 0 .14.007.273.015.399.014.105.027.209.041.301.113.777.161 1.26.161 1.26l.19 2.025a7.085 7.085 0 0 1-6.396 7.712c-2.829.267-5.421-1.177-6.774-3.467 0 0-.489-.826-1.308-2.353-.099-.189-.204-.392-.316-.603-.084-.203-.181-.413-.274-.63-.195-.448-.398-.932-.616-1.45-.484-1.058-.806-2.164-1.233-3.432a23.41 23.41 0 0 1-.561-1.933c-.174-.665-.349-1.352-.532-2.066-.301-1.387-.622-2.879-.876-4.393-.231-1.506-.491-3.089-.638-4.659-.195-1.583-.308-3.18-.419-4.784-.106-1.604-.147-3.201-.19-4.791 0-1.576-.027-3.145.043-4.665.034-1.513.125-2.998.238-4.42.077-1.408.28-2.802.414-4.063.188-1.31.371-2.48.588-3.622.301-1.31.622-2.529.853-3.411.31-1.212.477-1.913.477-1.913 1.968-7.887 9.967-12.692 17.856-10.724 7.894 1.975 12.691 9.968 10.725 17.862a14.708 14.708 0 0 1-1.815 4.266l-.083.126zm-56.35 17.01a14.892 14.892 0 0 0 1.036-4.518c.559-8.111-5.562-15.145-13.681-15.705-8.118-.56-15.151 5.562-15.711 13.681 0 0-.05.715-.133 1.976a70.1 70.1 0 0 0-.258 4.133c.014.665.055 1.233.091 1.912.048.638.063 1.366.154 2.025.174 1.331.308 2.823.595 4.245l.407 2.221c.168.729.335 1.478.511 2.234.322 1.527.783 3.033 1.19 4.575.477 1.526.91 3.068 1.457 4.574a88.52 88.52 0 0 0 1.654 4.483c.552 1.464 1.211 2.893 1.806 4.259a121.46 121.46 0 0 0 1.905 3.936c.694 1.254 1.255 2.41 1.948 3.496.665 1.086 1.226 2.052 1.864 2.936.622.882 1.079 1.611 1.618 2.248l1.59 1.941c1.849 2.255 4.973 3.243 7.887 2.234 3.74-1.289 5.715-5.373 4.426-9.107l-.469-1.338s-.168-.497-.469-1.366c-.162-.386-.303-1.051-.498-1.688-.204-.631-.357-1.478-.554-2.347-.217-.833-.344-1.891-.532-2.906a93.503 93.503 0 0 1-.428-3.362c-.097-1.198-.231-2.396-.274-3.664a61.991 61.991 0 0 1-.118-3.797c-.029-1.268.041-2.543.063-3.775.091-1.219.111-2.438.251-3.566.063-.56.12-1.121.174-1.661.077-.518.162-1.03.233-1.526.132-1.016.371-1.829.525-2.627.077-.407.21-.693.301-1.016.097-.294.181-.645.267-.841.188-.127.258-.147.342-.294l.751-1.829.079-.176z"/>
+  <path fill="#8ACCA0" d="M456.112 143.24c-11.449-34.634-48.8-53.434-83.441-41.983-34.634 11.449-53.431 48.807-41.982 83.442 17.717 53.598 16.873 94.849-2.59 126.04-1.716 2.393-3.661 5.076-4.907 6.585a66.228 66.228 0 0 0-7.289 6.104 66.535 66.535 0 0 0-3.758 2.035l-2.851 1.674c-.113.077-.154.112-.246.189-.041.035-.077.07-.125.112-.022.021-.029.035-.07.07l-.233.127c-.301.182-.629.371-.973.575-.364.203-.749.413-1.156.637a56.07 56.07 0 0 1-6.494 2.956c-2.711 1.044-6.03 2.109-10.03 3.04a104.442 104.442 0 0 1-13.996 2.179c-5.317.483-11.27.672-17.694.476a202.645 202.645 0 0 1-4.912-.224c-1.597-.105-3.208-.21-4.826-.322-4.134-.393-8.308-.784-12.517-1.191-1.907-.168-3.875-.42-5.821-.623-1.962-.217-3.776-.469-5.681-.693-1.828-.259-3.656-.504-5.437-.777-1.765-.287-3.537-.553-5.288-.882-1.738-.294-3.538-.673-5.331-1.023l-2.774-.603c-.925-.203-1.864-.406-2.865-.652l-2.943-.693-3.095-.77c-2.136-.539-4.26-1.078-6.382-1.618-8.713-2.241-17.861-4.617-26.604-6.732l-1.64-.398-.202-.05-.099-.028c-1.233-.357-.398-.104-.699-.189l-.4-.07-.792-.147a365.722 365.722 0 0 1-3.152-.56c-2.634-.476-5.24-.953-7.824-1.415a44.945 44.945 0 0 0-1.955-.322c-.631-.097-1.26-.196-1.891-.287-1.254-.189-2.5-.371-3.74-.56-2.516-.316-4.966-.658-7.439-.924-9.863-1.1-19.447-1.646-28.545-1.619-9.107.05-17.682.61-25.54 1.661-7.839 1.023-14.949 2.522-21.051 4.175a137.419 137.419 0 0 0-8.419 2.578 129.198 129.198 0 0 0-6.851 2.592c-2.032.847-3.79 1.646-5.204 2.326l-2.039 1.001c-.982.505-1.479.757-1.479.757-26.17 13.548-36.403 45.75-22.857 71.92 13.555 26.178 45.756 36.405 71.927 22.857l-1.45.735c-.301.14-.742.351-1.324.63-.344.155-.848.386-1.507.693-.251.133-.342.203-.21.21.169.015.504-.014 1.072-.063 1.163-.091 3.138-.259 5.955-.231 2.774 0 6.41.231 10.661.757 4.272.54 9.225 1.457 14.668 2.767 1.358.321 2.767.721 4.175 1.071.715.203 1.437.413 2.165.617l1.086.308c.378.105.735.203 1.023.302 1.394.441 2.808.882 4.231 1.331 1.765.575 3.544 1.149 5.337 1.731 7.824 2.472 15.711 5.092 24.357 7.978 2.227.743 4.462 1.478 6.709 2.221l3.496 1.142 3.692 1.17 1.864.589 1.946.588 3.923 1.177c2.704.77 5.387 1.555 8.175 2.269 2.76.75 5.527 1.415 8.294 2.087 2.745.658 5.464 1.248 8.168 1.843 2.634.54 5.344 1.121 7.901 1.604 2.584.476 5.107.981 7.704 1.429 2.543.441 5.072.876 7.586 1.31 2.208.364 4.407.722 6.6 1.086 1.443.217 2.885.427 4.315.644 1.366.182 2.724.371 4.077.553 2.711.351 5.428.666 8.139.946 10.851 1.128 21.682 1.647 32.23 1.513a239.007 239.007 0 0 0 30.479-2.291c9.666-1.366 18.689-3.313 26.716-5.548a191.408 191.408 0 0 0 20.791-7.061c1.428-.595 2.781-1.162 4.055-1.695 1.269-.568 2.459-1.093 3.566-1.59l.812-.364.912-.434c.602-.295 1.177-.568 1.731-.834 1.086-.54 2.073-1.023 2.955-1.464 1.919-.981 2.943-1.5 2.943-1.5l1.975-1.008a66.247 66.247 0 0 0 15.966-11.503 66.576 66.576 0 0 0 6.185-3.588c18.693-12.238 30.142-28.256 38.55-40.018l.926-1.294.862-1.338c23.738-36.839 36.169-79.029 36.947-125.397.602-35.782-5.867-74.417-19.227-114.833z"/>
+  <path fill="#FFF" d="M379.069 155.928l4.301 16.062h-.021c.007.028.027.028.034.042 1.688 6.311-2.059 12.798-8.363 14.486-6.312 1.688-12.799-2.059-14.487-8.364-.007-.014-.007-.021-.014-.049l-.05.014-4.301-16.062.14-.035c-1.057-5.989 2.55-11.887 8.532-13.492 5.969-1.597 12.048 1.709 14.116 7.425l.113-.027zm48.159-20.587c-2.697-5.45-9.107-8.048-14.858-5.792-5.765 2.263-8.693 8.532-6.971 14.367l-.132.049 6.08 15.481.05-.021c.007.021.007.027.014.042 2.387 6.08 9.254 9.071 15.334 6.683 6.08-2.381 9.071-9.254 6.682-15.334 0-.008-.027-.008-.034-.028l.021-.015-6.08-15.474-.106.042z"/>
+  <path fill="#51BA7B" d="M386.722 311.106l40.557 17.233c9.247 3.93 13.555 14.612 9.632 23.859-3.93 9.253-14.619 13.561-23.866 9.632a21.165 21.165 0 0 1-1.24-.581l-39.143-20.223c-8.118-4.196-11.292-14.171-7.104-22.29 3.994-7.728 13.284-10.95 21.164-7.63"/>
+  <path fill="#74C48D" d="M394.574 405.513c-12.623 0-25.31-3.56-36.185-10.523a5.688 5.688 0 0 1 6.134-9.581c15.343 9.826 35.001 11.501 51.304 4.37a5.69 5.69 0 0 1 4.558 10.424c-8.137 3.557-16.959 5.31-25.811 5.31zm-52.133 40.603a5.69 5.69 0 0 0-5.396-5.966c-14.406-.721-28.217-7.446-37.895-18.452a5.689 5.689 0 0 0-8.542 7.513c11.694 13.299 28.412 21.428 45.868 22.301a5.686 5.686 0 0 0 5.965-5.396zm81.464-133.345c15.644-.293 30.09-5.857 41.777-16.091a5.688 5.688 0 0 0-7.496-8.558c-9.641 8.443-21.568 13.033-34.493 13.275a5.69 5.69 0 0 0-5.581 5.794 5.687 5.687 0 0 0 5.684 5.581l.109-.001z"/>
+</svg>
diff --git a/devtools/client/themes/images/emojis/emoji-tool-inspector.svg b/devtools/client/themes/images/emojis/emoji-tool-inspector.svg
new file mode 100644
index 000000000..093fb91b5
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-inspector.svg
@@ -0,0 +1,13 @@
+<!-- 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" viewBox="0 0 512 512" opacity="1.0">
+  <path fill="#FFB636" d="M378.553 355.648L45.117 500.733c-21.735 8.65-43.335-12.764-34.874-34.572l145.71-338.683"/>
+  <path fill="#FFD469" d="M10.243 466.16l11.58-26.915c.993-1.514 1.983-3.03 2.977-4.543 57.597-87.744 116.038-174.952 176.475-260.768l67.765 69.46C217.91 278.496 51.89 450.064 17.115 495.57c-7.57-6.962-11.25-18.127-6.872-29.41z"/>
+  <path fill="#A06C33" d="M304.382 204.434c61.854 61.854 95.685 128.308 75.564 148.43-20.12 20.12-86.575-13.71-148.43-75.564s-95.685-128.308-75.564-148.43 86.575 13.71 148.43 75.564z"/>
+  <path fill="#F7F9AA" d="M155.6 327.572c0 6.012-4.873 10.885-10.884 10.885s-10.885-4.873-10.885-10.885 4.874-10.885 10.886-10.885 10.885 4.873 10.885 10.885z"/>
+  <path fill="#FFB636" d="M501.986 213.16c0 8.628-6.994 15.622-15.622 15.622s-15.622-6.994-15.622-15.622 6.994-15.622 15.622-15.622 15.622 6.994 15.622 15.622zM397.663 421.182c-8.628 0-15.622 6.994-15.622 15.622s6.995 15.622 15.623 15.622 15.622-6.994 15.622-15.622-6.995-15.622-15.622-15.622z"/>
+  <path fill="#BEA4FF" d="M355.95 79.523c-1.34 9.065-7.198 17.072-16.07 21.968-6.127 3.38-13.33 5.138-20.808 5.138-2.354 0-4.734-.174-7.117-.526-5.288-.782-10.58.016-14.52 2.19-1.766.973-4.8 3.104-5.293 6.437-.492 3.332 1.796 6.25 3.203 7.693 3.058 3.135 7.725 5.38 12.85 6.22.14.015.28.02.42.04 21.62 3.197 37.062 20.32 34.422 38.174-1.34 9.066-7.197 17.073-16.07 21.97-6.127 3.38-13.33 5.136-20.807 5.136-2.354 0-4.734-.174-7.117-.526-5.287-.783-10.582.015-14.52 2.19-1.767.973-4.8 3.104-5.294 6.437-.79 5.35 5.777 12.41 16.47 13.99 5.816.86 9.835 6.274 8.975 12.092-.782 5.29-5.328 9.092-10.52 9.092-.52 0-1.043-.038-1.57-.116-21.62-3.196-37.06-20.32-34.422-38.173 1.34-9.067 7.197-17.074 16.07-21.97 8.056-4.444 17.973-6.082 27.925-4.61 5.288.78 10.58-.017 14.52-2.19 1.766-.974 4.8-3.105 5.293-6.438.778-5.262-5.576-12.17-15.962-13.898-.17-.017-.34-.03-.512-.056-9.95-1.472-18.97-5.908-25.395-12.493-7.076-7.254-10.366-16.614-9.025-25.68 1.34-9.066 7.197-17.073 16.07-21.97 8.055-4.443 17.972-6.08 27.924-4.61 5.285.78 10.58-.016 14.52-2.19 1.765-.973 4.8-3.104 5.292-6.437s-1.796-6.25-3.203-7.694c-3.143-3.22-7.978-5.516-13.268-6.297-5.817-.86-9.836-6.273-8.976-12.09.86-5.82 6.274-9.833 12.09-8.978 9.952 1.47 18.972 5.907 25.396 12.492 7.078 7.255 10.368 16.615 9.027 25.68z"/>
+  <path fill="#FF6E83" d="M81.73 159.69c0 9.776-7.925 17.702-17.702 17.702s-17.703-7.926-17.703-17.703c0-9.778 7.926-17.704 17.703-17.704S81.73 149.91 81.73 159.69zm316.446-20.454c-11.296 0-20.452 9.157-20.452 20.452s9.157 20.452 20.452 20.452 20.452-9.157 20.452-20.452-9.156-20.452-20.452-20.452zM215.53 395.9c-11.297 0-20.453 9.156-20.453 20.45s9.157 20.453 20.452 20.453c11.295 0 20.45-9.157 20.45-20.452s-9.155-20.45-20.45-20.45zm271.302-93.647c3.093-5.99.745-13.352-5.244-16.445-2.388-1.232-5.238-2.868-8.538-4.76-28.993-16.634-89.32-51.243-160.352 6.108-5.245 4.234-6.063 11.92-1.83 17.163 4.234 5.244 11.918 6.064 17.164 1.828 58.035-46.856 104.882-19.985 132.87-3.928 3.404 1.952 6.618 3.796 9.484 5.276 1.79.925 3.705 1.363 5.59 1.363 4.42 0 8.688-2.41 10.856-6.607z"/>
+  <path fill="#59CAFC" d="M434.834 62.776c0 6.012-4.874 10.885-10.885 10.885-6.013 0-10.886-4.872-10.886-10.884s4.873-10.885 10.885-10.885c6.01 0 10.884 4.874 10.884 10.886zM46.324 11.894c-6.012 0-10.885 4.873-10.885 10.885s4.872 10.884 10.884 10.884S57.21 28.79 57.21 22.78s-4.874-10.886-10.886-10.886zm170.68 142.057c1.232-2.413 2.75-5.162 4.357-8.072 8.155-14.77 19.32-35 19.993-58.56.807-28.303-13.934-54-43.812-76.38-5.186-3.884-12.538-2.827-16.42 2.358-3.884 5.186-2.83 12.538 2.357 16.42 23.75 17.79 35.01 36.412 34.425 56.934-.51 17.872-9.697 34.516-17.08 47.89-1.7 3.082-3.31 5.993-4.713 8.746-2.946 5.77-.655 12.836 5.115 15.78 1.708.873 3.53 1.286 5.323 1.286 4.267 0 8.384-2.338 10.457-6.4z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-memory.svg b/devtools/client/themes/images/emojis/emoji-tool-memory.svg
new file mode 100644
index 000000000..6387d5649
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-memory.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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1.0">
+  <path fill="#A9B8C2" d="M509.507 277.512c-.132-6.324-.47-12.764-1.04-19.213-.632-6.447-1.428-12.904-2.614-19.245-1.206-6.336-2.63-12.568-4.475-18.537-1.87-5.96-3.99-11.684-6.497-16.98-.595-1.332-1.307-2.607-1.945-3.884l-.975-1.893-1.06-1.824c-.712-1.2-1.388-2.395-2.105-3.543l-2.23-3.322c-.705-1.1-1.51-2.11-2.28-3.112-.78-.994-1.507-1.99-2.287-2.913l-2.348-2.653-1.13-1.268-1.182-1.164c-1.56-1.52-2.987-2.98-4.48-4.16-1.473-1.22-2.712-2.35-4.158-3.326-1.088-.78-2.095-1.49-3-2.118-17.824-20.005-42.044-32.73-73.602-32.262-65.688.978-93.648 12.662-135.097-21.204-18.746-41.434-58.357-72.004-117.605-57.282C50.467 79.708 17.34 103.01 10.62 151.743c-1.177 3.953-1.833 8.13-1.86 12.463l-.058 9.042-.018 2.794-.056 2.945c-.038 1.238-.08 2.662-.13 4.256-.217 6.425-.762 15.903-1.466 27.59-.686 11.68-1.51 25.55-1.832 40.698-.166 7.57-.185 15.47.016 23.567.214 8.102.645 16.406 1.457 24.8.798 8.392 1.978 16.873 3.64 25.29 1.69 8.415 3.835 16.766 6.67 24.84 2.778 8.07 6.28 15.85 10.322 23.028 4.088 7.17 8.782 13.704 13.74 19.314 4.985 5.6 10.21 10.248 15.127 13.945 4.91 3.723 9.528 6.466 13.38 8.522l2.747 1.44c.874.414 1.694.8 2.457 1.16 1.526.725 2.832 1.31 3.903 1.732l3.276 1.337c7.498 3.063 16.404.77 21.39-6.07 5.868-8.047 4.1-19.328-3.946-25.196l-4.27-3.112-1.967-1.435c-.647-.447-1.408-1.05-2.277-1.77l-1.4-1.138-1.507-1.362c-2.102-1.915-4.49-4.328-6.8-7.322-2.325-2.975-4.593-6.484-6.567-10.504-1.954-4.048-3.62-8.6-4.9-13.612-1.242-5.053-2.145-10.52-2.577-16.423-.47-5.864-.484-12.145-.174-18.62.17-3.342.436-6.743.782-10.183 2.13-5.07 4.632-11.54 7.39-19.013 2.704.653 5.46 1.06 8.26 1.23l.002.014c7.48 1.072 23.013 9.41 23.51 16.948 2.443 37.036 15.236 59.378 26.407 72.06 10.125 11.492 16.997 25.48 20.296 40.437 7.742 35.107.006 76.796 46.07 76.796s20.08-48.648 34.932-78.647c14.85-30 51.294-24 51.294-24 32.974 0 47.557 10.897 55.47 25.767 10.23 19.23-3.268 76.878 47.38 76.878 49.846 0 35.89-67.9 50.29-86.76 18.117-23.724 41.402-51.33 54.37-84.85-.154 2.273-.32 4.483-.492 6.603-.398 4.603-.795 8.822-1.228 12.556-.387 3.738-.84 6.987-1.168 9.668l-1.175 8.41-.013.09c-.468 3.384 1.82 6.558 5.213 7.158 3.472.613 6.783-1.704 7.397-5.175 0 0 .55-3.12 1.516-8.58.435-2.74 1.02-6.057 1.557-9.887.583-3.823 1.15-8.152 1.73-12.882.558-4.734 1.1-9.874 1.552-15.33.2-2.73.46-5.532.603-8.408l.254-4.357.18-4.45c.248-5.99.284-12.198.185-18.52z"/>
+  <path fill="#2B3B47" d="M80.323 159.56c-8.07-.432-14.963 5.762-15.394 13.833l-1.35 25.27c-.43 8.072 5.763 14.964 13.834 15.395 8.07.43 14.963-5.763 15.394-13.834l1.35-25.27c.43-8.072-5.764-14.964-13.835-15.395z"/>
+  <path fill="#7E9AA8" d="M155.92 254.302l.545.627.67.768c.26.278.558.6.897.966 1.375 1.45 3.472 3.58 6.338 5.903 2.878 2.305 6.577 4.818 11.15 6.742 4.558 1.923 9.945 3.32 15.91 3.456 5.952.167 12.446-.82 19.002-3.106 6.56-2.253 13.2-5.68 19.5-10.12 6.315-4.412 12.35-9.754 17.747-15.804 5.403-6.053 10.17-12.735 14.56-19.53 4.383-6.795 8.28-13.91 10.84-21.304 2.587-7.375 3.857-14.943 3.643-22.166-.105-3.612-.592-7.137-1.44-10.51-.212-.842-.44-1.678-.7-2.5l-.405-1.277-.47-1.426-1.845-5.463c-2.468-7.185-5.09-13.94-7.617-20.116-2.512-6.19-5.044-11.765-7.338-16.683-2.314-4.908-4.522-9.077-6.41-12.475-1.93-3.36-3.527-5.955-4.663-7.686l-1.782-2.63-.063-.093c-.648-.957-.4-2.258.558-2.906.846-.572 1.96-.443 2.657.256l2.36 2.37c1.52 1.56 3.67 3.92 6.24 7.056 2.53 3.15 5.532 7.045 8.752 11.65 3.233 4.6 6.64 9.935 10.217 15.844 3.557 5.925 7.206 12.444 10.864 19.52.906 1.786 1.846 3.653 2.698 5.42l.657 1.35.352.733.347.79c.47 1.057.9 2.138 1.31 3.235 1.643 4.386 2.833 9.065 3.514 13.883 1.38 9.652.618 19.764-1.692 29.466-2.33 9.71-6.1 19.137-11.242 27.675-5.142 8.547-11.762 16.038-18.96 22.523-7.2 6.49-14.974 12.09-23.122 16.485-8.143 4.383-16.626 7.64-25.07 9.388-8.43 1.745-16.805 2.01-24.324.718-7.525-1.26-14.11-3.94-19.253-7.182-5.183-3.21-9.01-6.814-11.86-9.924-2.86-3.128-4.708-5.822-5.948-7.694l-.812-1.252-.53-.872-.43-.71c-.828-1.365-.393-3.14.97-3.97 1.22-.74 2.77-.47 3.676.572z"/>
+  <path fill="#E8EBED" d="M88.503 271.766l-1.664 1.06-2.395 1.56c-1.02.69-2.11 1.282-3.305 1.943-1.196.655-2.56 1.31-3.992 1.95l-2.24.927c-.77.293-1.57.556-2.372.832-.798.29-1.628.498-2.456.73-.83.237-1.664.45-2.507.615-1.684.39-3.368.628-5.034.87-1.654.162-3.297.342-4.87.387-1.585.1-3.098.074-4.562.082-1.453-.027-2.84-.078-4.145-.14l-3.636-.25c-2.228-.2-4.065-.38-5.34-.542l-2.003-.233c-2.678-.313-4.597-2.737-4.286-5.415.234-2.008 1.655-3.59 3.48-4.124l.13-.035 1.852-.54c1.183-.33 2.847-.85 4.817-1.48l3.128-1.073c1.09-.403 2.223-.835 3.37-1.296 1.127-.49 2.305-.962 3.41-1.526 1.14-.52 2.198-1.14 3.26-1.716 1.006-.636 2.008-1.242 2.884-1.915.458-.313.88-.654 1.278-.997.402-.34.812-.648 1.163-1.008.36-.35.72-.67 1.05-1.007l.936-1.013c.587-.684 1.12-1.315 1.59-1.953.465-.64.914-1.22 1.16-1.69.295-.493.47-.798.904-1.41l1.122-1.625c4.45-6.442 13.282-8.055 19.724-3.604 6.442 4.45 8.055 13.282 3.604 19.724-1.096 1.586-2.457 2.88-3.982 3.86l-.075.05z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-network.svg b/devtools/client/themes/images/emojis/emoji-tool-network.svg
new file mode 100644
index 000000000..249ac7b62
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-network.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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1.0">
+  <path fill="#FFA1E0" d="M464.142 414.09l-1.358-.873-3.944-2.48c-3.46-2.172-8.603-5.185-15.26-8.886-3.328-1.855-7.038-3.87-11.11-6.027-4.07-2.172-8.512-4.446-13.312-6.755-9.597-4.637-20.576-9.7-32.827-14.838-12.24-5.22-25.786-10.227-40.458-15.154-7.34-2.45-14.965-4.768-22.865-7.003-3.88-1.142-8.122-2.202-12.357-3.29l-5.8-1.557c-.953-.26-1.91-.518-2.868-.777l-.36-.098c-.218-.016.236-.033-.535-.048l-.136-.034-.542-.137-1.086-.272c-11.586-2.748-21.596-8.346-27.23-14.272-2.876-2.97-4.743-5.804-6.32-8.223-1.587-2.436-2.93-4.598-4.884-6.982-1.902-2.393-4.34-5.185-7.156-8.804-1.372-1.822-2.726-3.88-4.222-6.077-.73-1.113-1.458-2.27-2.185-3.476-.71-1.22-1.456-2.46-2.23-3.74-6.005-10.315-12.3-23.12-19.05-36.77-3.392-6.83-6.876-13.896-10.57-21.048-3.73-7.144-7.543-14.41-11.644-21.65-4.12-7.233-8.497-14.457-13.318-21.5-4.782-7.053-10-13.954-15.843-20.344-5.85-6.367-12.246-12.29-19.073-17.195-6.814-4.91-13.93-8.87-20.864-11.594-3.406-1.368-6.757-2.46-9.987-3.312.233-1.248.453-2.515.64-3.806.37-2.414.66-4.892.857-7.394.216-2.5.295-5.03.298-7.54.007-2.51-.145-5.008-.383-7.443-.236-2.435-.65-4.813-1.148-7.08-.493-2.266-1.18-4.42-1.914-6.405-.755-1.985-1.626-3.794-2.52-5.375-.442-.79-.928-1.515-1.35-2.19l-1.318-1.81c-.872-1.064-1.583-1.89-2.13-2.418l-.815-.824c-.227-.226-.5-.473-.76-.675-3.37-2.612-8.217-1.998-10.83 1.37s-1.997 8.216 1.37 10.828l.18.14.436.34c.298.197.697.568 1.23 1.035l.84.867c.283.358.618.713.943 1.147.654.862 1.36 1.917 2.05 3.188.67 1.283 1.376 2.736 1.97 4.404.597 1.66 1.175 3.477 1.623 5.44.45 1.96.856 4.03 1.128 6.187.274 2.153.497 4.372.59 6.618.113 2.244.14 4.51.088 6.747-.013.924-.054 1.838-.1 2.75-.174-.026-.354-.06-.528-.083-6-.85-11.352-1.042-16.037-.84-2.52.085-4.844.282-6.99.53.02-.635.048-1.26.06-1.91.03-2.3.036-4.69-.08-7.125-.093-2.435-.277-4.918-.557-7.407-.26-2.49-.662-4.984-1.133-7.444-.47-2.46-1.09-4.88-1.785-7.222-.692-2.342-1.55-4.594-2.467-6.72-.912-2.13-1.995-4.11-3.09-5.916-1.118-1.802-2.316-3.41-3.493-4.79-.585-.692-1.2-1.31-1.742-1.893l-1.64-1.525c-1.058-.877-1.913-1.55-2.55-1.965l-.958-.653c-.298-.2-.65-.408-.982-.57-3.836-1.863-8.456-.263-10.318 3.573-1.863 3.836-.263 8.456 3.573 10.318l.168.08.496.242c.333.132.8.414 1.418.763l1.003.677c.352.293.754.573 1.162.933.82.713 1.73 1.604 2.666 2.712.92 1.123 1.91 2.407 2.834 3.924.926 1.51 1.863 3.177 2.704 5.014.84 1.834 1.66 3.787 2.367 5.85.708 2.06 1.378 4.196 1.926 6.384.567 2.182 1.054 4.4 1.457 6.612.424 2.207.73 4.41 1.01 6.55.113.912.208 1.807.298 2.695-.745.15-1.458.304-2.13.457-1.42.335-2.617.604-3.835.915-1.18.302-2.222.568-3.122.8l-1.818.648-1.48.535c-3.023 1.095-5.71 3.215-7.467 6.203-4 6.808-1.724 15.57 5.084 19.57l4.115 2.42.397.232c.263.16.654.376 1.17.652.515.272 1.16.642 1.918 1.02.636.396 1.373.854 2.207 1.37 1.656 1.048 3.78 2.25 6.04 3.635 2.263 1.432 4.734 2.96 7.195 4.75 2.475 1.707 4.91 3.712 7.16 5.728 1.1 1.076 2.203 2.05 3.178 3.194.51.53.987 1.08 1.467 1.622.455.576.918 1.128 1.345 1.716 1.747 2.3 3.135 4.883 4.322 7.815 1.183 2.938 2.178 6.265 3.04 10.19 1.718 7.817 2.865 18.03 3.547 30.368.39 6.15.76 12.794 1.08 19.934.368 7.128.852 14.708 1.567 22.754 1.484 16.086 3.876 34.026 9.6 53.96 2.888 9.948 6.627 20.44 11.828 31.207 5.104 10.79 11.837 21.844 20.557 32.22 8.664 10.374 19.436 19.857 31.322 27.306 2.955 1.884 5.992 3.62 9.066 5.223 3.062 1.628 6.172 3.122 9.308 4.455 6.242 2.747 12.604 4.848 18.834 6.613 12.494 3.533 24.638 5.127 35.972 5.852 2.852.192 5.63.268 8.4.345 2.74.022 5.472.05 8.126.025 5.34-.033 10.51-.267 15.515-.657l1.875-.146.935-.075.234-.02c-.797-.01-.118-.018-.25-.027l.362-.055 2.878-.442 5.594-.866c3.233-.527 6.35-1.092 9.82-1.542 6.765-.992 13.448-1.706 20.007-2.47 6.56-.748 12.99-1.322 19.242-1.83l9.242-.655c3.036-.224 6.022-.415 8.953-.577 5.863-.34 11.503-.57 16.883-.738 5.39-.225 10.51-.334 15.335-.418l13.54-.145c4.19-.024 8.043-.01 11.512.04 6.947.09 12.365.312 16.018.373 3.656.098 5.46.17 5.24.105 8.083 2.4 16.582-2.204 18.983-10.286 2.402-8.083-2.204-16.58-10.286-18.983z" id="Layer_2"/>
+  <path fill="#D19B61" d="M420.322 245.86c-48.02-73.215-148.485-87.3-222.8-41.717-1.518.93-3.028 1.877-4.523 2.857 0 0 14 91.176 71.178 122.95-5.975 17.118-4.205 36.725 6.507 53.057 25.402 38.73 77.39 49.534 116.12 24.132 9.452-6.2 17.7-13.54 24.693-21.72 32.814-38.37 37.907-95.22 8.824-139.56z" id="Layer_3"/>
+  <path fill="#B7834F" d="M340.81 426.833c-6.172 0-12.386-.634-18.568-1.92-23.63-4.91-43.932-18.728-57.168-38.908-11.687-17.817-14.357-39.587-7.327-59.727 4.965-14.225 14.263-26.12 26.888-34.4 11.587-7.6 25.438-10.23 39.004-7.413 13.564 2.82 25.22 10.752 32.82 22.34 5.9 8.994 7.943 19.748 5.754 30.28-2.188 10.534-8.35 19.584-17.345 25.483-7.13 4.677-15.655 6.297-24.004 4.562-8.35-1.735-15.522-6.617-20.2-13.747-7.835-11.947-4.49-28.042 7.458-35.878 4.825-3.166 11.305-1.82 14.47 3.008 3.167 4.826 1.82 11.306-3.007 14.47-2.31 1.516-2.956 4.627-1.44 6.937 1.613 2.46 4.09 4.146 6.973 4.745 2.886.603 5.826.04 8.286-1.574 4.327-2.837 7.29-7.19 8.343-12.256 1.052-5.066.07-10.24-2.77-14.565-9.364-14.28-28.602-18.278-42.88-8.913-8.744 5.735-15.182 13.97-18.618 23.812-4.87 13.953-3.02 29.033 5.07 41.372 10.175 15.513 25.78 26.134 43.943 29.908 18.16 3.773 36.707.25 52.22-9.924 22.452-14.726 37.825-37.313 43.29-63.603 5.462-26.29.36-53.13-14.365-75.583-43.45-66.246-132.694-84.792-198.94-41.343-4.828 3.166-11.306 1.82-14.472-3.007-3.166-4.827-1.82-11.306 3.007-14.47 75.884-49.772 178.113-28.53 227.884 47.356 17.787 27.12 23.95 59.545 17.35 91.3-6.6 31.756-25.17 59.04-52.29 76.828-14.903 9.772-31.957 14.83-49.37 14.83z" />
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-profiler.svg b/devtools/client/themes/images/emojis/emoji-tool-profiler.svg
new file mode 100644
index 000000000..bf4b660cc
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-profiler.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" viewBox="0 0 511.9 511.9" opacity="1.0">
+  <circle fill="#E2A042" cx="254.5" cy="206.8" r="170.9"/>
+  <path fill="#AF773F" d="M494.6 226.6c0-37.9-30.7-68.6-68.6-68.6-7 0-13.8 1.1-20.2 3-18.5-18.8-44.2-30.5-72.7-30.5-23 0-44.1 7.6-61.1 20.4-10.9 8.2-25.6 8.3-36.5 0-19.6-14.8-44.7-22.7-71.8-19.9-23.4 2.4-46.2 12.8-63 28.6-4.7-1-9.7-1.6-14.8-1.6-37.9 0-68.6 30.7-68.6 68.6 0 37.5 30.1 68 67.5 68.5 27.3 83.3 99.9 115 169.7 115 76.7 0 148.3-33.6 172.1-114.9 37.6-.4 68-30.9 68-68.6z"/>
+  <path fill="#FFB636" d="M330.2 165.8c-25.3-.3-47.7 11.8-61.7 30.6-6.7 9.1-19.8 9.1-26.5 0-13.9-18.8-36.4-30.9-61.7-30.6-39.6.5-72.9 32.9-74.4 72.5-1.5 39.9 27.9 73.2 66.2 77.8 5.2.6 9.2 4.7 9.8 9.8 4.6 36.4 35.7 64.6 73.4 64.6 37.5 0 68.4-27.9 73.3-64 .7-5.5 5-9.8 10.5-10.5 38-4.9 67.1-38.1 65.6-77.8-1.6-39.4-34.9-71.9-74.5-72.4z"/>
+  <path fill="#E576CB" d="M271.8 272.4s-2.3 2.9-5.6 5c-4.2 2.9-9.2 4.7-12.4 3.7-4.5-.1-9-1.5-12.4-3.7-3.4-2.1-5.6-5-5.6-5-.5-.7-.5-1.6 0-2.2 0 0 2.3-2.9 5.6-5 3.4-2.2 7.9-3.7 12.4-3.7 4.5.1 9 1.5 12.4 3.7 3.4 2.1 5.6 5 5.6 5 .6.6.5 1.6 0 2.2zM253.8 376.9c-18.1 0-34.1-14.9-41.6-38.8-.3-1-.4-1.9-.4-2.9 0-1.8.5-3.7 1.7-5.3 9.8-13.7 24.2-21.8 39.7-22.1 15.6-.3 31 8 41 22.1 1.1 1.5 1.7 3.4 1.7 5.2v.3c0 .9-.1 1.8-.4 2.7-7.6 23.9-23.6 38.8-41.7 38.8zm-23-40c5.3 13.7 13.9 22 23 22s17.6-8.3 23-22c-6.4-7.1-15-11.3-23.2-11.1-8.4.1-16.6 4.2-22.8 11.1z"/>
+  <path fill="#E2A042" d="M221.7 196.3c-18.8-18.8-49.2-18.8-67.9 0l-17.3 17.3c2.8-5 2.1-11.3-2.1-15.6-5.1-5.1-13.3-5.1-18.4 0-10.5 10.5-21.5 23.7-22.7 41.1-.5 7.6.8 15.3 4.1 23.3-2.4 2.5-4.6 5-7.1 7.9-1.4 1.6-2.8 3.4-4.3 5.1-1.5 1.8-3 3.6-4.5 5.7-1.5 2-3.1 4-4.5 6.2l-4.5 6.6c-1.5 2.3-3 4.7-4.4 7.1-1.4 2.5-2.9 4.9-4.3 7.5-1.3 2.6-2.7 5.2-4 7.8-.6 1.3-1.3 2.7-1.9 4-.6 1.3-1.3 2.7-1.8 4.1-1.2 2.7-2.4 5.5-3.4 8.3-.5 1.4-1.1 2.8-1.6 4.2l-1.5 4.2c-1 2.8-1.8 5.6-2.7 8.4-.8 2.8-1.6 5.6-2.2 8.4-1.3 5.5-2.4 11-3.2 16.2-.8 5.2-1.4 10.2-1.7 14.9-.4 4.7-.5 9-.5 13 0 3.9.1 7.5.3 10.5.2 3 .5 5.6.7 7.5.1.5.1 1 .2 1.4.1.5.1.9.2 1.2.1.4.1.8.2 1 .1.4.1.5.1.5 5.5 25.8 30.8 42.2 56.6 36.7 25.6-5.5 42-30.5 36.8-56.2V404.9s0 .1 0 0v-.1c-.1-.3-.3-.9-.5-1.9-.2-1.1-.5-2.5-.7-4.3-.2-1.8-.4-3.9-.5-6.3-.1-2.4-.1-5 0-7.8s.3-5.8.7-8.9c.2-1.5.4-3.1.7-4.7.3-1.6.5-3.2.9-4.8.2-.8.4-1.6.5-2.5.2-.8.4-1.6.6-2.5.4-1.7.9-3.3 1.4-4.9.2-.8.5-1.6.8-2.5l.8-2.4 1.8-4.8c.7-1.6 1.4-3.2 2-4.7.7-1.5 1.5-3.1 2.2-4.6.8-1.5 1.6-2.9 2.3-4.4.7-1.4 1.6-2.8 2.4-4.1.8-1.4 1.6-2.6 2.4-3.9.8-1.2 1.5-2.5 2.4-3.6 1.6-2.2 3.1-4.5 4.3-5.9.6-.8 1.2-1.6 1.7-2.3.1-.2.3-.3.4-.5l.2-.3.3-.3c.4-.4.7-.8 1.1-1.2.3-.4.6-.7.9-1 9.6-1.5 18.9-6 26.3-13.4l32-32c18.6-18.8 18.6-49.2-.1-68zM473.8 388.8c-.3-4.7-.9-9.7-1.7-14.9-.8-5.2-1.9-10.6-3.2-16.2-.7-2.8-1.4-5.5-2.2-8.4-.9-2.8-1.7-5.6-2.7-8.4l-1.5-4.2c-.5-1.4-1.1-2.8-1.6-4.2-1-2.8-2.2-5.5-3.4-8.3-.6-1.4-1.2-2.7-1.8-4.1-.6-1.3-1.3-2.7-1.9-4-1.3-2.7-2.7-5.2-4-7.8-1.4-2.5-2.9-5-4.3-7.5-1.5-2.4-3-4.8-4.4-7.1-1.5-2.3-3-4.5-4.5-6.6-1.5-2.2-3.1-4.2-4.5-6.2-1.5-2-3-3.9-4.5-5.7-1.5-1.8-2.9-3.6-4.3-5.1-2.1-2.4-4-4.6-6-6.7 3.7-8.4 5.2-16.5 4.6-24.5-1.3-17.5-12.2-30.6-22.7-41.1-5.1-5.1-13.3-5.1-18.4 0-4.2 4.2-4.9 10.6-2.1 15.6l-17.3-17.3c-18.8-18.8-49.2-18.8-67.9 0s-18.8 49.2 0 67.9l32 32c6.9 6.9 15.4 11.3 24.3 13.1.4.4.8.9 1.2 1.4.3.4.7.8 1.1 1.2l.3.3.2.3c.1.2.3.3.4.5.5.7 1.1 1.4 1.7 2.3 1.2 1.5 2.7 3.7 4.3 5.9.8 1.1 1.5 2.4 2.4 3.6.8 1.2 1.7 2.5 2.4 3.9.8 1.4 1.6 2.7 2.4 4.1.8 1.4 1.5 2.9 2.3 4.4.7 1.5 1.5 3 2.2 4.6.7 1.6 1.3 3.1 2 4.7.6 1.6 1.3 3.2 1.8 4.8l.8 2.4c.3.8.6 1.6.8 2.5.5 1.6 1 3.3 1.4 4.9.2.8.4 1.6.6 2.5.2.8.4 1.6.5 2.5.4 1.6.6 3.2.9 4.8.2 1.6.5 3.2.7 4.7.4 3.1.6 6.1.7 8.9.1 2.8.1 5.4 0 7.8-.1 2.4-.3 4.5-.5 6.3-.2 1.8-.5 3.2-.7 4.3-.2 1.1-.4 1.7-.5 1.9v-.1-.1c-5.2 25.6 11.2 50.7 36.8 56.2 25.8 5.5 51.1-10.9 56.6-36.7 0 0 0-.2.1-.5 0-.2.1-.6.2-1 0-.3.1-.7.2-1.2.1-.4.1-.9.2-1.4.2-1.9.5-4.5.7-7.5.2-3 .3-6.6.3-10.5 0-3.9-.1-8.3-.5-13z"/>
+  <path fill="#2B3B47" d="M230.8 336.9c5.3 13.7 13.9 22 23 22s17.6-8.3 23-22c-6.4-7.1-15-11.3-23.2-11.1-8.4.1-16.6 4.2-22.8 11.1z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-scratchpad.svg b/devtools/client/themes/images/emojis/emoji-tool-scratchpad.svg
new file mode 100644
index 000000000..08128eb5d
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-scratchpad.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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" opacity="1.0">
+  <path fill="#D1CFC3" d="M22.54 39.677c-8.686 0-16.823-3.548-21.237-9.26-1.818-2.352-1.386-5.733.968-7.553 2.35-1.814 5.734-1.385 7.552.97 2.383 3.082 7.375 5.074 12.72 5.074 2.975 0 5.384 2.41 5.384 5.384s-2.41 5.385-5.385 5.385zm48.324-9.26c1.818-2.352 1.386-5.733-.968-7.553-2.35-1.814-5.73-1.385-7.55.97-2.384 3.082-7.376 5.074-12.72 5.074-2.976 0-5.385 2.41-5.385 5.384s2.41 5.384 5.385 5.384c8.687 0 16.825-3.546 21.24-9.26z"/>
+  <path fill="#E5E4DF" d="M60.38 68.154c-.842.896-2.084 1.43-3.32 1.43-.036-.004-.078-.004-.118 0-1.786 0-3.454-.942-4.462-2.514-.562-.874-1.437-1.383-2.4-1.397-.924.013-1.796.522-2.358 1.397-1.026 1.597-2.652 2.513-4.462 2.513h-.117c-1.786 0-3.454-.94-4.462-2.513-.56-.874-1.436-1.383-2.398-1.397-.925.013-1.797.522-2.36 1.397-1.025 1.597-2.654 2.513-4.464 2.513-.035-.003-.075-.003-.115 0-1.786 0-3.454-.94-4.462-2.513-.56-.874-1.436-1.383-2.398-1.397-.925.013-1.8.522-2.36 1.394-1.025 1.6-2.654 2.516-4.464 2.516-.075 0-.152-.008-.227-.024-1.302-.057-2.43-.577-3.21-1.406-.61-.642-1.31-1.783-1.206-3.577.138-2.402 4.83-40.32 5.078-42.323C16.15 11.17 25.18 2.168 36.278 2.168c11.097 0 20.13 9 20.188 20.083.247 1.987 4.98 39.922 5.118 42.327.105 1.794-.596 2.937-1.204 3.577z"/>
+  <path fill="#2B3B47" d="M29.464 22.523v3.656h-.005c0 .004.004.006.004.01 0 1.435-1.165 2.6-2.6 2.6s-2.602-1.165-2.602-2.6v-.01h-.01v-3.657h.03c.116-1.332 1.22-2.38 2.58-2.38s2.462 1.048 2.576 2.38h.026zm18.708-1.126c-.18-2.103-1.92-3.758-4.066-3.758-2.15 0-3.892 1.654-4.075 3.757h-.048v5.773H40v.016c0 2.267 1.84 4.107 4.107 4.107s4.107-1.84 4.107-4.107c0-.004-.01-.007-.01-.016h.01v-5.773h-.042zM49.78 33.91c-.053-.1-.13-.18-.24-.192-1.108-.11-25.417-.106-26.522 0-.048.004-.095.027-.14.057-.005.004-.013.003-.02.008-.15.115-.185.344-.08.51l.24.386c.553.873 1.105 1.625 1.658 2.26.554.657 1.105 1.206 1.66 1.73 1.1 1.02 2.212 1.765 3.314 2.41.45.265.655.325.906.43.018-.012.046-.023.065-.035 1.797.874 3.726 1.375 5.747 1.375 1.982 0 3.876-.482 5.643-1.324l.004.002c.298-.138.597-.258.898-.423 1.104-.637 2.21-1.39 3.314-2.414.553-.523 1.105-1.074 1.655-1.736.553-.636 1.106-1.39 1.66-2.274l.242-.388c.03-.052.052-.112.056-.177.006-.077-.026-.142-.06-.204z"/>
+  <path fill="#FF473E" d="M42.35 33.637v7.606c0 3.358-2.716 6.08-6.066 6.08-3.358 0-6.077-2.722-6.077-6.08v-7.606H42.35z"/>
+  <path fill="#2B3B47" d="M29.62 36.086v-.83c0-2.12-5.67-1.62 6.227-1.62s7.09-.502 7.09 1.62v.83H29.62zm7.6 8.15v-6.395c0-.517-.42-.94-.94-.94s-.942.422-.942.94v6.397c0 .518.42.94.94.94s.942-.422.942-.94z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-shadereditor.svg b/devtools/client/themes/images/emojis/emoji-tool-shadereditor.svg
new file mode 100644
index 000000000..1356caad1
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-shadereditor.svg
@@ -0,0 +1,96 @@
+<!-- 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" viewBox="0 0 277.9 279.4">
+    <style>
+        .st0{fill:#344555;} .st1{fill:url(#SVGID_1_);} .st2{fill:url(#SVGID_2_);} .st3{fill:url(#SVGID_3_);} .st4{fill:url(#SVGID_4_);} .st5{fill:url(#SVGID_5_);} .st6{fill:url(#SVGID_6_);} .st7{fill:url(#SVGID_7_);} .st8{fill:url(#SVGID_8_);} .st9{fill:url(#SVGID_9_);} .st10{fill:url(#SVGID_10_);} .st11{fill:#E9CCFF;} .st12{fill:none;stroke:#344555;stroke-width:0.4;stroke-miterlimit:10;} .st13{fill:#FBF6FA;} .st14{fill:#CEDAE6;} .st15{fill:#A2B3BF;}
+    </style>
+    <path class="st0" d="M245.8 78c-1.1-1.5-2.3-2.9-3.6-4.2 1-1.2 1.9-2.5 2.4-4 .5-1.3.7-2.5.7-3.8 0-.8-.1-1.4-.1-1.7 1.5-1.3 2.5-2.6 3.2-3.6 1.9-2.8 2.4-5.3 2.5-6.5.2-1.9-.2-3.1-.3-3.6l-.5-1.5c2.8-1.6 5.2-3.9 6.6-6.4 1.9-3.4 1.7-6.3 1.5-7.8-.1-.6-.3-1.3-.5-1.8.9-.9 1.6-1.8 2.1-2.8 1.2-2.3 1.7-4.8 1.1-7-.1-.6-.4-1.2-.7-1.7.4-.4.8-.9 1.1-1.4 1.2-1.8 1.7-3.9 1.4-5.7-.2-1-.5-1.9-1.1-2.6.8-1.1 1.4-2.3 1.7-3.6.3-1.2.4-2.5.2-3.6-.3-2.3-2.4-3.2-3.4-3.7-.3-.1-1.4-.6-2.2-.8-1-.2-1.9-.3-2.8-.3l-.1.1c-.7 0-1.3.1-1.9.2-.3 0-.5.1-.9.2h-.6l-.2.1c-.3.1-.5.2-.7.3-3.1 1.5-5.1 4.1-5.8 7.4-.1.8-.2 1.4-.2 1.9-1.3.4-2.5.8-3.5 1.5-2 1.2-3.6 2.9-4.6 4.8-.9 1.7-1 3.3-1 4.3-1.3.5-2.5 1.1-3.7 1.9-2.2 1.5-4.1 3.5-5.2 5.7-.2 0-.5-.1-.7-.1-.9 0-1.8.3-2.5.9-1.3 1-1.8 2.7-1.3 4.2v.6c0 .2-.1.4-.1.5-.1.2-.3.4-.5.6-.4.3-1.1.7-1.9 1.1-.7.3-1.6.6-2.7.9-.3.1-.5.1-.7.2-.4.1-.7.2-1.2.3l-.1-1.6V35c-.2-3.4-.4-6.7-.7-9.5-.4-5.3-.9-8.6-.9-8.7-.2-1.6-1.4-2.9-3-3.4-.3-.1-.7-.1-1-.1-1.3 0-2.5.6-3.2 1.6-.1.1-1.9 2.6-4.3 6.7-.9 1.5-1.7 3-2.4 4.5-.3-.4-.5-.8-.8-1.1-1.5-1.9-3.1-3.5-4.8-4.8-1.2-1-2-1.5-2.2-1.5-.6-.4-1.3-.5-2-.5-.8 0-1.6.2-2.3.7-1.3.9-1.9 2.5-1.6 4 0 0 .1.5.1 1.3.1 1.2 0 2.7-.2 4.2-.1.9-.3 1.9-.5 2.9l-.2 1.1-.1.6V33.3c-.1.6-.2 1.4-.3 2.1-.1.9-.2 1.9-.2 2.8-.5-.8-.9-1.5-1.3-2.2-3.1-5.2-5.3-8.3-5.4-8.4-.8-1.1-2-1.7-3.3-1.7h-.6c-1.5.2-2.7 1.3-3.2 2.8-.1.2-1.3 4.1-2.4 10.4-.7 3.9-1.1 7.6-1.2 11.2 0 1.1-.1 2.3 0 3.5-1.6-1.7-3.1-3.2-4.4-4.5-3.7-3.5-6.2-5.4-6.3-5.5-.7-.5-1.6-.8-2.4-.8-.7 0-1.3.2-1.9.5-1.4.7-2.2 2.2-2.1 3.8 0 .2.3 3.9 1.3 9.6.6 3.5 1.4 6.8 2.2 9.9.2.8.5 1.7.7 2.5l-5.1-4.1c-.7-.6-1.6-.9-2.5-.9-.7 0-1.4.2-2 .5-1.4.8-2.2 2.5-1.9 4.1.1.3.6 3.5 2.5 7.8.2.4.4.8.5 1.1-2.5-.8-5.1-1.4-7.8-1.8-2-.3-4-.4-6-.4h-1c-1.7 0-2.6.2-2.7.2-1.3.2-2.4 1-3 2.1s-.6 2.5 0 3.7c.1.1 1.6 3 4 7.3.6 1 1.2 2.1 1.9 3.2-5.5-3.3-9.7-4.8-10-4.9-.4-.1-.9-.2-1.3-.2-1.1 0-2.1.4-2.9 1.2-1.1 1.1-1.4 2.8-.9 4.2.1.4 2.6 6.8 7.5 14-.4-.1-.7-.2-1.1-.3-.1-.1-.3-.1-.4-.2h-.1c-2-.7-4.1-1.2-6.3-1.4-.9-.1-1.9-.1-2.7-.1-1.9 0-3.1.2-3.4.3-1.6.3-2.8 1.5-3.2 3.1-.3 1.6.4 3.2 1.7 4.1-.7.5-1.3 1.2-1.6 2-.1.2-.1.3-.1.5s-.1.3-.1.5c-.1.4-.2 1.7.1 3.5.1.8.5 2.6 1.6 4.5-6.3 1.9-12.2 4.7-17.5 8.4 0-.8-.1-1.5-.2-2.4-.8-5.2-2.7-8.4-4.1-10.2-.8-.9-1.6-1.8-2.5-2.3-.8-.5-1.4-.8-1.8-.9-.4-.1-.8-.2-1.2-.2-.4 0-.7 0-1.1.1-.1-.2-.3-.4-.5-.6-1.3-1.7-2.7-3.2-4.4-4.5-2.6-2.1-4.3-2.8-4.7-3-.4-.2-.9-.2-1.3-.2-.9 0-1.7.3-2.4.8-.9-.8-1.7-1.6-2.5-2.3-2.2-2-4.5-3.7-6.8-5.2-1.5-1-2.9-1.8-4.3-2.5-1-.5-1.5-.7-1.6-.8-.5-.2-1-.3-1.5-.3-1.4 0-2.7.7-3.4 1.9l-.3.6c-3.2-1.6-6.4-2.9-9.7-4.1-2.8-1-5.3-1.7-7.6-2.1-1.7-.4-2.7-.4-2.8-.5h-.3c-1.4 0-2.7.8-3.5 2-.2.4-.4.8-.5 1.3-1.4-1-2.8-2-4.2-2.9-3.1-2-6-3.5-8.7-4.7-2-.9-3.1-1.2-3.3-1.2-.3-.1-.7-.1-1-.1-1.2 0-2.4.6-3.2 1.6-1 1.3-1.1 3-.3 4.4 0 0 .6 1 1.7 2.8 1 1.5 2.6 4.1 5.1 7.7 2.4 3.5 5.5 7.9 8.5 12.2-.7-.3-1.4-.5-2.1-.7-.9-.3-1.6-.4-2.1-.5l-.5-.1c-.2 0-.4-.1-.7-.1-1.3 0-2.4.6-3.2 1.6-.9 1.2-1 2.8-.4 4.2.1.1 1.6 3.2 4.8 8.8 1.7 3.1 3.8 6.6 6.1 10.4l1.7 2.9 2.2 3.8v.1c.4.6.8 1.3 1.2 1.9-.3-.1-.6-.1-.9-.1-.8 0-1.7.3-2.4.8-1.2.9-1.8 2.4-1.6 3.8 0 .2.2 1 .6 2.4.6 1.8 1.5 3.6 2.5 5.5 1.7 2.9 3.7 5.6 6.1 8.1 1.8 1.9 3.5 3.4 5.3 4.7 2.2 1.6 4.6 3.2 7.9 4.5 3 1.1 5.8 1.8 8.6 2.1 1 .1 2 .2 2.9.2h1.6c.9 0 1.8 0 2.7-.1 2.4-.2 4.7-.5 6.9-1.1-.1.7-.1 1.5-.2 2.2-.6 9.2 1.3 18.4 5.4 26.6-1.3 1.8-2.5 3.5-3.6 5.2-4.5 6.8-11.4 20.6-14.2 26.2l-.1.3c-1.6 3.1-1.6 7.3 0 12 2.5 7.2 9.9 17.8 22.6 23.7 6.2 2.9 13.1 4.4 20.1 4.4 11.4 0 20.3-4 22.6-10.3.2-.6.4-1.2.5-1.9h.2v-1.6c.1-.8 0-1.7 0-2.6 0-.2-.3-14.4 1-26.7 2.7.4 5.5.8 8.4.8.9 0 1.7 0 2.5-.1 4.8-.4 9.5-1.2 14-2.4 4.3 11.9 7.3 24.4 7.7 25.9.2 1.3.7 4.1 1.6 5.7 2.5 4.5 8.7 7.1 17 7.1 8.9 0 18.4-3 26-8.2 11.5-7.9 17.1-19.5 18.4-27.1.8-4.9.2-9-1.9-11.9l-.1-.1c-3.6-5.1-12.7-17.6-18.2-23.6-1.8-2-3.9-4.1-6.1-6.2 2-5.8 2.9-11.9 2.8-18.2 0-1.8-.2-3.5-.4-5.3 1.1-3.8 3.1-10.1 6.1-15.4 3.1-5.5 6.9-10.6 9.1-13.3 3.9 2.5 8.6 4.5 14.1 4.5.9 0 1.8-.1 2.7-.2 7.2-.8 13.3-2.3 18.3-4.4.1 0 .2-.1.3-.1h.1c1.9.3 3.8.5 5.6.5 8.9 0 17.2-3.9 23.4-11.1 5.8-6.7 9.1-15.6 9.1-24.5 0-16.8-12.8-29-32.1-30.7z"/>
+    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="22.015" y1="164.168" x2="71.347" y2="164.168">
+        <stop offset="0" stop-color="#D116C5"/>
+        <stop offset="1" stop-color="#B50DD8"/>
+    </linearGradient>
+    <path class="st1" d="M69.5 170.7c-1.2-.2-3-.6-5.3-1s-5.1-.9-8.4-1.5c-3.2-.6-6.9-1.4-10.6-2.8-3.5-1.4-6.8-3.4-9.6-5.2-2.9-1.8-5.3-3.3-7.3-4.5-4-2.5-6.4-3.6-6.4-3.6s.1.6.5 1.7 1 2.7 2.2 4.8c1.2 2.1 2.9 4.6 5.5 7.3 1.3 1.4 2.9 2.8 4.7 4.2 1.9 1.4 4.1 2.8 6.9 3.9 2.7 1 5.3 1.6 7.7 1.8 1.2.2 2.3.2 3.4.2s2.1 0 3-.1c3.8-.3 6.8-1 9.1-1.8s3.8-1.6 4.8-2.2c1-.6 1.4-1 1.4-1s-.4 0-1.6-.2z"/>
+    <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="10.494" y1="142.827" x2="68.624" y2="142.827">
+        <stop offset="0" stop-color="#F83510"/>
+        <stop offset="1" stop-color="#D92E0E"/>
+    </linearGradient>
+    <path class="st2" d="M68.6 166.5s-2.3-1.5-7.5-4.7c-2.6-1.7-5.8-3.8-9.6-6.7-1.9-1.4-3.9-3.1-6-4.9-1.1-.9-2.1-2-3.2-3-.5-.5-1-1.1-1.6-1.7-.5-.6-1.1-1.1-1.6-1.8-1-1.3-2.1-2.4-2.9-3.7-.4-.6-.9-1.2-1.3-1.8-.4-.6-.9-1.3-1.3-1.9-1.7-2.5-3.5-4.6-5.2-6.5-3.4-3.7-6.7-6.2-9.4-7.9-2.7-1.6-4.9-2.5-6.3-2.9-.7-.2-1.2-.3-1.6-.4-.4-.1-.5-.1-.5-.1s1.5 3 4.7 8.6c1.6 2.8 3.6 6.2 6 10.3 1.2 2 2.5 4.2 4 6.6 1.5 2.4 2.7 4.8 5 7.8.5.8 1.1 1.4 1.7 2.1.6.6 1.2 1.3 1.7 1.9.6.6 1.2 1.1 1.9 1.7.6.5 1.2 1.1 1.9 1.5 2.5 1.9 5 3.3 7.4 4.4 4.8 2.1 9.1 2.9 12.4 3.3 3.4.3 5.9.1 7.6-.1 1.7-.2 2.5-.5 2.5-.5s-.1 0-.2-.1c.9.4 1.4.5 1.4.5z"/>
+    <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="4" y1="129.162" x2="77.422" y2="129.162">
+        <stop offset="0" stop-color="#F6A500"/>
+        <stop offset="1" stop-color="#F5A100"/>
+    </linearGradient>
+    <path class="st3" d="M72 160c1.1.8 2.1 1.4 2.8 2 .4.3.8.6 1.1.8.3.3.6.5.8.6.4.3.6.5.6.5s-.1-.2-.3-.7c-.2-.4-.6-1.1-1.1-2-1.1-1.7-3-4.2-5.7-7.3-2.8-3.2-6.5-7-11-11.7-4.5-4.7-9.9-10.3-15.4-17.3-1.4-1.8-2.8-3.6-4.1-5.3-1.3-1.7-2.8-3.3-4.1-4.8-1.4-1.5-2.7-2.9-4-4.2-1.3-1.3-2.6-2.6-3.8-3.7-5-4.6-9.4-7.8-13-10.1-3.6-2.3-6.4-3.6-8.2-4.5-1.8-.8-2.8-1-2.8-1s.5.9 1.6 2.6c1.1 1.7 2.7 4.3 5 7.6s5.2 7.4 8.6 12.3c1.7 2.4 3.6 5 5.6 7.9 1 1.4 2 2.9 3 4.4 1 1.5 2.1 3.2 3.2 4.8 9.1 13.6 18.7 22.3 26.3 26.1 3.7 1.9 6.7 2.8 8.6 3.4 1 .3 1.7.5 2.2.6 5.5 4.2 8.7 5.9 8.7 5.9s-.9-2.4-4.6-6.9z"/>
+    <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="25.262" y1="129.634" x2="83.392" y2="129.634">
+        <stop offset="0" stop-color="#6EDC00"/>
+        <stop offset="1" stop-color="#66CB00"/>
+    </linearGradient>
+    <path class="st4" d="M79.7 143.1c-1.3-3-3-6.9-5.7-11.5-1.3-2.3-2.9-4.8-4.8-7.4-1.9-2.6-4.1-5.4-6.9-8.1-1.3-1.4-2.8-2.6-4.1-3.8-.7-.6-1.4-1.1-2.1-1.6-.7-.5-1.4-1-2-1.5-2.7-1.8-5.2-3.3-7.6-4.6-4.7-2.5-8.7-4.1-11.8-5.2-3.2-1.1-5.5-1.7-7.1-2-1.6-.3-2.3-.4-2.3-.4s.5.8 1.6 2.2c1.1 1.5 2.7 3.6 4.9 6.4 1.1 1.4 2.2 3 3.6 4.7.6.9 1.3 1.8 2 2.8.7 1 1.4 2 2.1 3.1 3.1 4.4 6.9 9.4 11.6 14.9 2.3 2.7 4.6 5.2 6.8 7.5l3.3 3.3c1 1 2 1.9 3 2.8 1.8 1.7 3.4 3.5 4.9 5.1 1.5 1.6 2.8 3.1 4 4.4 2.4 2.6 4.3 4.6 5.6 5.9 1.3 1.3 2 1.9 2 1.9s-.1-.8-.6-2.4c-.5-1.6-1.3-4-2.7-7.3-1.4-3.2-3.3-7.3-6.7-12-.4-.6-.9-1.2-1.4-1.8-.5-.6-.9-1.1-1.4-1.7-.9-1.1-1.9-2.3-2.9-3.5-2.1-2.5-4.3-5.2-6.8-8.1-.4-.5-.9-1-1.3-1.5 4.1 4.1 7.4 8.2 10.4 11.7 3.2 3.8 5.9 7.1 8.3 9.6 2.3 2.5 4.3 4.3 5.7 5.4.7.6 1.3.9 1.6 1.1l.6.3s-1.2-2.6-3.8-8.7z"/>
+    <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="49.456" y1="121.778" x2="86.397" y2="121.778">
+        <stop offset="0" stop-color="#0F92F7"/>
+        <stop offset="1" stop-color="#0988F5"/>
+    </linearGradient>
+    <path class="st5" d="M86.1 130c-.6-4.1-2.1-6.8-3.3-8.3-.6-.8-1.2-1.3-1.6-1.6-.4-.3-.7-.4-.7-.4v.8c0 .5-.1 1.2-.1 2.2 0 1.3 0 2.9.1 4.9-.2-.8-.5-1.7-.7-2.6-.5-1.5-1.1-3-1.8-4.2-.7-1.2-1.4-2.2-2.1-3.1-1.4-1.8-2.7-3-3.8-3.9-2.2-1.8-3.5-2.3-3.5-2.3s.4 1.5 1.5 4.1c.5 1.3 1.3 2.9 2.1 4.7.4.9.8 1.9 1.3 2.9.2.5.4 1.1.6 1.6l.6 1.8v.1c-1.5-2.6-3.3-5.6-5.6-8.9-2.8-3.8-5.6-6.6-8.1-8.8-2.5-2.2-4.7-3.7-6.4-4.9-1.7-1.1-3.1-1.9-3.9-2.3-.9-.4-1.3-.6-1.3-.6s.4.4 1.2 1.1c.8.7 2 1.8 3.6 3.2 1.6 1.4 3.5 3.3 5.7 5.5 2.2 2.3 4.7 5 7.1 8.4 4.8 6.9 8.2 12.4 10.6 15.9.3.5.7 1 1 1.5.3.6.5 1.1.8 1.6 1.3 2.6 2.3 3.8 2.3 3.8s.4-1.3.4-4.1c0-.6 0-1.4-.1-2.2.3 1.1.5 2 .7 2.7.6 1.9.8 2.8.8 2.8s.2-.1.6-.5c.3-.4.8-1 1.2-1.9.8-1.8 1.5-4.8.8-9z"/>
+    <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="110.05" y1="107.846" x2="147.716" y2="107.846">
+        <stop offset="0" stop-color="#D116C5"/>
+        <stop offset="1" stop-color="#B50DD8"/>
+    </linearGradient>
+    <path class="st6" d="M118.8 118.8c-1-1.1-2.2-1.7-3.2-2.2-1-.4-2-.6-2.8-.8-1.6-.2-2.7-.1-2.7-.1s.2.3.6.7c-.4-.3-.7-.4-.7-.4s-.1.9.1 2.2c.2 1.3.8 3.1 2.1 4.4.9 1 2 1.4 2.8 1.5h1c.2 0 .4-.1.4-.1s.1-.6 0-1.3c0-.3-.1-.6-.2-.9 1.1 1 2.1 1.5 2.9 1.7.9.2 1.5.2 1.5.2s.1-.6-.1-1.6c-.2-.9-.6-2.1-1.7-3.3zm12-5c-2.8-1.4-5.5-2.3-7.9-2.9-.6-.2-1.1-.3-1.7-.4-.2-.1-.4-.2-.6-.2-2-.7-3.8-1-5.4-1.2-3.1-.3-4.9.1-4.9.1s1.5 1 3.5 2.8c2 1.7 4.4 4.1 6.8 6.7 1.9 2 3.4 3.2 4.6 4 1.2.8 2 1.2 2 1.2s.4-.9.3-2.5v-.3c.7.4 1.3.6 1.8.8 1.5.6 2.5.6 2.5.6s0-.9-.6-2.4c2.1 1.1 3.8 1.8 5.1 2.4 1.8.7 2.9 1 2.9 1s-.1-1.2-1.2-3c-1.1-2.1-3.2-4.6-7.2-6.7zm10.3-8.3c-10-10.1-21.5-14-21.5-14s4.6 12.1 14 21.5c7.3 7.3 14.1 6.6 14.1 6.6s.6-6.9-6.6-14.1z"/>
+    <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="128.647" y1="96.959" x2="162.052" y2="96.959">
+        <stop offset="0" stop-color="#F83510"/>
+        <stop offset="1" stop-color="#D92E0E"/>
+    </linearGradient>
+    <path class="st7" d="M161.2 97.1c-.7-2.2-2-4.8-4.2-7.2-3.1-3.4-6.8-5.6-10.3-7-3.5-1.4-6.7-2-9.4-2.4-2.7-.4-4.8-.4-6.3-.4s-2.3.1-2.3.1 1.5 2.9 3.9 7.2c1.2 2.1 2.7 4.6 4.3 7.2.8 1.3 1.6 2.7 2.5 4 .9 1.4 1.7 2.7 2.6 4.2 2.9 4.5 5.8 7.2 7.9 8.8 2.1 1.6 3.6 2.1 3.6 2.1s.3-1.5-.2-4.2-1.7-6.5-4.6-11c-.3-.4-.5-.8-.8-1.2-.3-.4-.6-.8-.8-1.2-.5-.8-1.1-1.5-1.7-2.2-1.2-1.4-2.3-2.7-3.5-3.8-2.3-2.3-4.6-4.2-6.5-5.7l-1.2-.9 1.8 1.2c2.1 1.5 4.5 3.3 6.9 5.5 1.2 1.1 2.4 2.3 3.5 3.5 1.1 1.3 2.2 2.6 3.1 4.1 3.1 4.5 4.9 8 6.3 10.3 1.3 2.3 2.1 3.5 2.1 3.5s.1-.3.3-1c.1-.7.3-1.8.2-3.2-.1-1.4-.3-3.3-1-5.4-.7-2.1-1.7-4.6-3.5-7.1-.6-.9-1.3-1.7-1.9-2.5l-.4-.4 1.5 1.5c3.6 4 5.3 7.6 6.5 10 1.2 2.5 1.7 3.7 1.7 3.7s.2-.3.4-1 .4-1.8.5-3.3c-.1-1.6-.3-3.6-1-5.8z"/>
+    <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="146.483" y1="72.45" x2="176.962" y2="72.45">
+        <stop offset="0" stop-color="#F6A500"/>
+        <stop offset="1" stop-color="#F5A100"/>
+    </linearGradient>
+    <path class="st8" d="M164.2 83.5c-.3-.4-.6-.8-.9-1.1l-.5-.6-.6-.6-.6-.5-.4-.3c-.3-.2-.6-.4-.8-.6-1.1-.9-2.2-1.7-3.2-2.5-2.1-1.7-3.9-3.2-5.5-4.4-3.3-2.6-5.2-4.2-5.2-4.2s.5 2.8 2.2 6.9c.9 2 2.1 4.3 3.8 6.6.8 1.2 1.8 2.3 2.9 3.5 1.4 1.3 1.7 1.7 2.4 2.7 1.1 1.5 2.2 3 3.3 4.3 1 1.2 2 2.2 2.9 3 1.7 1.5 3 2.1 3 2.1s.6-1.3.7-3.7c0-1.2-.1-2.7-.6-4.5-.5-1.9-1.2-3.9-2.9-6.1zm12.6-4.6c-.2-1.3-.6-3-1.3-4.9-.7-1.9-1.7-4.1-3.2-6.5-4.2-6.7-9-11.5-12.5-15-3.5-3.4-6-5.2-6-5.2s.2 3.6 1.2 9.2c.5 2.8 1.2 6 2.1 9.6 1 3.5 2.2 7.3 4.2 11.1.4.8.7 1.4 1.1 2 .4.6.7 1.2 1 1.8.7 1.1 1.3 2.2 1.8 3.1 1.1 1.9 2.1 3.4 2.9 4.6 1.6 2.4 2.5 3.5 2.5 3.5s.3-.3.6-.9c.4-.7.9-1.7 1.3-3.2.4-1.5.7-3.5.5-6-.1-1.4-.4-3-.9-4.6.8 1.1 1.4 2 2 2.7.8 1 1.4 1.7 1.8 2.2.4.5.6.8.6.8s.1-.3.2-1c.3-1 .3-2 .1-3.3z"/>
+    <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="170.938" y1="55.875" x2="192.731" y2="55.875">
+        <stop offset="0" stop-color="#6EDC00"/>
+        <stop offset="1" stop-color="#66CB00"/>
+    </linearGradient>
+    <path class="st9" d="M192.1 63.9c-.2-.8-.5-1.6-.8-2.5-.3-.8-.6-1.5-.9-2.2-3.8-8.4-7.7-15.7-10.8-20.8-3.1-5.1-5.2-8.2-5.2-8.2s-1.2 3.8-2.2 9.8c-.5 3-1 6.6-1.2 10.6-.1 4-.1 8.4 1.2 13.1 2 6.5 3.8 10.8 5.2 13.7 1.4 2.8 2.3 4.1 2.3 4.1s.4-1.6.3-4.8c-.1-2.2-.4-5.1-1.1-8.7.1.3.3.6.4.9.1.3.2.5.3.8.1.3.2.5.2.8.2.5.3 1 .4 1.5.5 1.9.5 3.6.4 5-.1 1.4-.4 2.6-.6 3.4l-.3 1.2s.5 0 1.3-.4 2-1.1 3.2-2.6c1.1-1.4 2.3-3.5 2.6-6.3.1.7.2 1.4.2 2.1.1 1.4 0 2.5-.1 3.3-.1.8-.2 1.2-.2 1.2s.4-.1 1.2-.5c.8-.4 1.9-1.3 2.9-2.9 1-1.6 1.9-3.9 1.9-6.9.1-1.5-.2-3.1-.6-4.7z"/>
+    <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="188.198" y1="40.946" x2="228.677" y2="40.946">
+        <stop offset="0" stop-color="#0F92F7"/>
+        <stop offset="1" stop-color="#0988F5"/>
+    </linearGradient>
+    <path class="st10" d="M228.6 37c-.2-1.1-.6-2-1-2.6-.4-.6-.8-1-1.1-1.2-.3-.2-.4-.3-.4-.3s.1.2.1.6c.1.4.1.9 0 1.5s-.2 1.3-.6 2c-.4.7-.9 1.3-1.6 1.8-.7.6-1.6 1-2.6 1.5s-2.1.8-3.4 1.2c-1.3.4-2.8.7-4.7 1.6-.6.3-1.3.6-1.9 1.1 0-1-.1-2.1-.1-3-.1-1.9-.2-3.8-.3-5.6-.2-3.5-.4-6.7-.6-9.4-.4-5.3-.9-8.5-.9-8.5s-1.7 2.4-4 6.3c-1.1 2-2.4 4.3-3.6 7.1-.9 1.9-1.6 4.1-2.1 6.4-.1-.5-.2-.9-.3-1.4-.7-3.6-2.4-6.3-3.9-8.3-1.6-2-3-3.3-4.1-4.2-1.1-.8-1.7-1.2-1.7-1.2s.1.7.2 1.9 0 2.9-.2 4.9c-.1 1-.3 2.1-.5 3.2-.1.6-.2 1.1-.3 1.7l-.3 2.1c-.3 2.8-.4 5.8-.2 8.9.3 4.7 1.7 8 2.9 10s2.3 2.9 2.3 2.9.9-1.1 1.6-3.4c.6-1.8 1.2-4.3 1.2-7.5v.2c1.2 5.4 3 9 4.3 11.3 1.4 2.2 2.4 3.1 2.4 3.1s.2-1.3.1-3.9c-.1-2-.4-4.8-1-8.4.2-2.2.4-4.9.8-8.4.2-1.6.4-3.2.8-4.7.1-.8.3-1.5.5-2.2l.6-2.1c.1-.2.1-.4.2-.6-.3 1.4-.7 2.8-1 4.3-.7 3.6-1 7.5-.9 11.5.1 6.2 1 10.5 1.7 13.3.8 2.8 1.4 4 1.4 4s.3-.4.7-1.1c.5.8.8 1.2.8 1.2s1.2-1.1 2.7-3.2c.7-1 1.6-2.3 2.4-3.8.4-.7.8-1.5 1.3-2.3.2-.4.4-.8.7-1.2l.3-.6c.1-.1.2-.3.3-.4.5-.8 1-1.3 2.1-2 1-.7 2.6-1.4 4.1-2.4 1.5-1 2.9-2.1 4-3.4 1.1-1.2 1.9-2.6 2.4-4 .5-1.8.6-3.2.4-4.3z"/>
+    <path class="st0" d="M255.1 30.5l-1.3 2.1c-.1.1-.2.3-.6.5-.4.3-1.3.9-2.7 1.3-1.2.4-2.7.5-4.7.6h-.9c-.8 0-1.7 0-2.7-.1h-1.5l-.6-.1c-.8-.1-2.1-.1-3.3-.1h-.3c-4.7 0-9.5 1.4-13.2 3.9-3.7 2.4-5.5 5.4-6.5 7.5-.8 1.9-1.3 3.8-1.2 5.7 0 .6.1 1.2.2 1.6.1.3.1.5.2.6l.8 2.3 2.1-1.2 1.4-.8c1.2-.6 2.4-1.2 3.6-1.7 1.6-.6 3.4-1.1 5.4-1.4 2.3-.4 4.6-.5 7.1-.5H239.3c1 0 2.2 0 3.4-.2l1.2-.2h.5c.5-.1.9-.2 1.3-.3l.2-.1c1.1-.3 2.1-.7 2.9-1 3.5-1.4 6.5-4 8.1-6.9 1.7-3.1 1.5-5.8 1.3-6.8-.1-.9-.4-1.5-.7-1.9-.2-.4-.4-.6-.5-.7l-1.9-2.1z"/>
+    <path class="st0" d="M255.9 20.5l-1.1 1.5s-.1.1-.3.2c-.2.1-.9.4-1.8.4h-.6c-.8 0-1.6-.1-2.8-.2-.3 0-.7-.1-1.1-.1-.4 0-.9-.1-1.4-.1h-.2c-.3 0-.6-.1-1-.1l-.5-.1c-.5-.1-1.5-.1-2.4-.1h-.2c-3.6 0-7.1 1-9.8 2.9-3 2-4.4 4.5-4.9 5.8-.6 1.5-.9 3.1-.8 4.6.1 1.1.4 1.7.5 1.9l.8 1.6 1.7-.7s.4-.2 1.1-.4c.6-.2 1.6-.5 2.7-.7 1-.2 2.3-.3 3.8-.4 1.2-.1 2.5-.1 4.2-.1H244.6c.8 0 1.6-.1 2.4-.2.6-.1 1.5-.2 2.3-.5.3-.1.7-.2 1-.3h.2l.6-.2.4-.2c1.3-.5 2.6-1.3 3.7-2.3 1.1-1 1.9-2 2.4-3 1.4-2.6 1.1-4.7.9-5.6-.2-.8-.5-1.3-.7-1.6-.2-.3-.4-.5-.6-.7l-1.3-1.3zM249 54.3c.2-1.5-.1-2.4-.2-2.7l-.5-1.4-1.5.1h-.1c-.2 0-.6 0-1.1-.1-.8-.1-2-.3-3.6-.6l-.3-.1c-1.5-.3-3.1-.6-5.1-.8h-.5c-.4 0-.7-.1-1.1-.1H230c-.6.1-1.1.1-1.7.2-4.1.6-7.7 2.2-10.8 4.7-2 1.6-3.5 3.5-4.7 5.5l-.1.1-.1.1c-.5 1.2-1.7 3.5-.5 4.7 6.5 6.3 24.1 11 28.5 11.6-.1-5.1-.9-9.8 0-10.2 2.6-1.5 4.9-3.5 6.4-5.8 1.5-2 1.9-4.1 2-5.2z"/>
+    <path class="st11" d="M240.7 65.8c-.4.2-1 .6-1.8 1.1-.8.4-1.7 1-2.7 1.4-1.1.4-2.3.8-3.8.9-.8.1-1.7.1-2.5.1s-1.6 0-2.2.1c-1.4.1-2.6.2-3.5.3-.3 0-.6.1-.8.1 1.1.4 2.2.9 3.3 1.3 3.1 1.1 6.2 2 9.2 2.7 1-.4 1.9-1 2.6-1.6 1.3-1.2 2-2.4 2.4-3.5.4-1 .5-1.9.5-2.4 0-.6-.1-.8-.1-.8s-.1.1-.6.3zm13.5-31.6c-.2-.3-.2-.4-.2-.4s-.3.5-1 1-1.7 1.2-3.1 1.6c-1.4.4-2.9.6-5 .7-1 0-2.2 0-3.5-.1-.3 0-.7 0-1-.1-.4 0-.7-.1-1.1-.1-.6-.1-1.8-.1-2.9-.1-4.6-.1-8.7 1.5-11.5 3.5-2.9 2-4.5 4.5-5.4 6.5-.9 2.1-1 3.7-1 4.7 0 .5.1.9.1 1.2.1.3.1.4.1.4s.5-.3 1.4-.8c.9-.5 2.1-1.1 3.7-1.8 1.5-.6 3.4-1.1 5.4-1.5 2.1-.3 4.4-.6 7.3-.6H238.9c1 0 1.9 0 2.9-.2.5-.1.9-.1 1.4-.2.5-.1.9-.2 1.3-.3.9-.2 1.7-.6 2.5-.9 3.2-1.4 5.5-3.7 6.6-5.9 1.2-2.2 1.2-4.2 1-5.4 0-.5-.2-1-.4-1.2zm-8.9 18.1c-1-.1-2.3-.3-3.8-.6s-3.2-.6-5.3-.8c-.5 0-1-.1-1.6-.1-.5 0-1.1-.1-1.7-.1H229.8c-.5.1-1 .1-1.6.2-4.3.7-7.5 2.5-9.8 4.3-2 1.6-3.3 3.4-4.2 4.9-.3.9-.7 2.4-.4 3.6.1.5.3 1 .5 1.4 1.2.8 2.6 1.5 3.9 2.2h.2c1.7.1 3.7.1 5.8 0 2.1-.1 4.2-.3 6.5-.7.8-.1 2.9-.5 4.4-.9 1.6-.5 3-1.1 4.3-1.8 2.6-1.5 4.5-3.3 5.7-5.1 1.2-1.8 1.7-3.5 1.8-4.7.1-1.2-.1-1.8-.1-1.8s-.5.1-1.5 0zm11.2-28.7c-.1-.2-.2-.3-.2-.3s-.3.3-.9.6c-.6.3-1.5.6-2.6.6-1.1.1-2.2 0-3.6-.2-.7-.1-1.5-.1-2.5-.3-.5 0-1-.1-1.5-.2-.4 0-1.4-.1-2.2-.1-3.5 0-6.7 1-8.9 2.5-2.3 1.5-3.6 3.4-4.2 4.9-.6 1.6-.7 2.8-.6 3.7.1.8.3 1.2.3 1.2s.4-.2 1.2-.4c.7-.3 1.8-.6 3-.8 1.2-.2 2.6-.4 4.1-.4 1.5-.1 3.1-.1 5.2-.1h1.8c.8 0 1.5 0 2.2-.2.7-.1 1.4-.2 2.1-.4.3-.1.7-.2 1-.3.3-.1.6-.3.9-.4 1.2-.5 2.3-1.2 3.2-2 .9-.8 1.6-1.6 2-2.5.9-1.7 1-3.2.8-4.1-.3-.3-.4-.6-.6-.8zm1.8-9s-.2.2-.7.3c-.4.1-1.1.1-1.8 0s-1.5-.3-2.5-.5c-.3 0-.5-.1-.8-.1-.3 0-.6-.1-.9-.1-.7-.1-1.2-.2-2.5-.2-2.3 0-4.3.6-5.9 1.5-1.5.9-2.5 2.1-3.1 3.1-.5 1.1-.6 1.9-.6 2.5 0 .6.2.9.2.9s1.3-.4 3-.4 3.6.2 6.4.2h1.1c.5 0 1 0 1.4-.1.9-.1 1.8-.4 2.6-.7 1.6-.7 2.9-1.7 3.6-2.8.8-1.1.9-2.2.8-2.9.1-.5-.3-.7-.3-.7zm1.3-8.9c0-.3-.1-.5-.2-.6l-.1-.1s-.1.1-.2.1-.3 0-.5-.1c-.4-.1-.9-.3-1.5-.4-.6-.1-1.3-.2-2.1-.2-.4 0-.8 0-1.2.1-.2 0-.4.1-.6.1h-.2l-.2.1c-.2.1-.3.1-.5.2-2.4 1.2-3.4 3.1-3.7 4.6-.2.8-.1 1.5 0 1.9.1.5.3.7.3.7.1-.4 3.8 1.4 6.8-.1.2-.1.3-.2.6-.3.3-.1.5-.3.7-.5.5-.3.8-.7 1.1-1.1.6-.8 1-1.6 1.2-2.4.4-.7.4-1.5.3-2z"/>
+    <path class="st12" d="M240.7 65.8c-.4.2-1 .6-1.8 1.1-.8.4-1.7 1-2.7 1.4-1.1.4-2.3.8-3.8.9-.8.1-1.7.1-2.5.1s-1.6 0-2.2.1c-1.4.1-2.6.2-3.5.3-.3 0-.6.1-.8.1 1.1.4 2.2.9 3.3 1.3 3.1 1.1 6.2 2 9.2 2.7 1-.4 1.9-1 2.6-1.6 1.3-1.2 2-2.4 2.4-3.5.4-1 .5-1.9.5-2.4 0-.6-.1-.8-.1-.8s-.1.1-.6.3zm13.5-31.6c-.2-.3-.2-.4-.2-.4s-.3.5-1 1-1.7 1.2-3.1 1.6c-1.4.4-2.9.6-5 .7-1 0-2.2 0-3.5-.1-.3 0-.7 0-1-.1-.4 0-.7-.1-1.1-.1-.6-.1-1.8-.1-2.9-.1-4.6-.1-8.7 1.5-11.5 3.5-2.9 2-4.5 4.5-5.4 6.5-.9 2.1-1 3.7-1 4.7 0 .5.1.9.1 1.2.1.3.1.4.1.4s.5-.3 1.4-.8c.9-.5 2.1-1.1 3.7-1.8 1.5-.6 3.4-1.1 5.4-1.5 2.1-.3 4.4-.6 7.3-.6H238.9c1 0 1.9 0 2.9-.2.5-.1.9-.1 1.4-.2.5-.1.9-.2 1.3-.3.9-.2 1.7-.6 2.5-.9 3.2-1.4 5.5-3.7 6.6-5.9 1.2-2.2 1.2-4.2 1-5.4 0-.5-.2-1-.4-1.2zm-8.9 18.1c-1-.1-2.3-.3-3.8-.6s-3.2-.6-5.3-.8c-.5 0-1-.1-1.6-.1-.5 0-1.1-.1-1.7-.1H229.8c-.5.1-1 .1-1.6.2-4.3.7-7.5 2.5-9.8 4.3-2 1.6-3.3 3.4-4.2 4.9-.3.9-.7 2.4-.4 3.6.1.5.3 1 .5 1.4 1.2.8 2.6 1.5 3.9 2.2h.2c1.7.1 3.7.1 5.8 0 2.1-.1 4.2-.3 6.5-.7.8-.1 2.9-.5 4.4-.9 1.6-.5 3-1.1 4.3-1.8 2.6-1.5 4.5-3.3 5.7-5.1 1.2-1.8 1.7-3.5 1.8-4.7.1-1.2-.1-1.8-.1-1.8s-.5.1-1.5 0zm11.2-28.7c-.1-.2-.2-.3-.2-.3s-.3.3-.9.6c-.6.3-1.5.6-2.6.6-1.1.1-2.2 0-3.6-.2-.7-.1-1.5-.1-2.5-.3-.5 0-1-.1-1.5-.2-.4 0-1.4-.1-2.2-.1-3.5 0-6.7 1-8.9 2.5-2.3 1.5-3.6 3.4-4.2 4.9-.6 1.6-.7 2.8-.6 3.7.1.8.3 1.2.3 1.2s.4-.2 1.2-.4c.7-.3 1.8-.6 3-.8 1.2-.2 2.6-.4 4.1-.4 1.5-.1 3.1-.1 5.2-.1h1.8c.8 0 1.5 0 2.2-.2.7-.1 1.4-.2 2.1-.4.3-.1.7-.2 1-.3.3-.1.6-.3.9-.4 1.2-.5 2.3-1.2 3.2-2 .9-.8 1.6-1.6 2-2.5.9-1.7 1-3.2.8-4.1-.3-.3-.4-.6-.6-.8zm1.8-9s-.2.2-.7.3c-.4.1-1.1.1-1.8 0s-1.5-.3-2.5-.5c-.3 0-.5-.1-.8-.1-.3 0-.6-.1-.9-.1-.7-.1-1.2-.2-2.5-.2-2.3 0-4.3.6-5.9 1.5-1.5.9-2.5 2.1-3.1 3.1-.5 1.1-.6 1.9-.6 2.5 0 .6.2.9.2.9s1.3-.4 3-.4 3.6.2 6.4.2h1.1c.5 0 1 0 1.4-.1.9-.1 1.8-.4 2.6-.7 1.6-.7 2.9-1.7 3.6-2.8.8-1.1.9-2.2.8-2.9.1-.5-.3-.7-.3-.7zm1.3-8.9c0-.3-.1-.5-.2-.6l-.1-.1s-.1.1-.2.1-.3 0-.5-.1c-.4-.1-.9-.3-1.5-.4-.6-.1-1.3-.2-2.1-.2-.4 0-.8 0-1.2.1-.2 0-.4.1-.6.1h-.2l-.2.1c-.2.1-.3.1-.5.2-2.4 1.2-3.4 3.1-3.7 4.6-.2.8-.1 1.5 0 1.9.1.5.3.7.3.7.1-.4 3.8 1.4 6.8-.1.2-.1.3-.2.6-.3.3-.1.5-.3.7-.5.5-.3.8-.7 1.1-1.1.6-.8 1-1.6 1.2-2.4.4-.7.4-1.5.3-2z"/>
+    <path class="st0" d="M182.3 46.7c8.9 2.9 18.2 11 23.1 18.3 1.6-.2 3.2-.3 4.8-.3 14.2 0 26.6 7 33.4 17.5h.9c16.2 1.1 29.4 10.6 29.4 26.9 0 16.3-12.2 31.6-28.5 31.6-1.7 0-3.3-.1-5-.4-.3 0-.5-.1-.8-.1-.6 0-1.2.1-1.8.4-4.3 1.8-9.9 3.3-17.2 4.1-.8.1-1.5.1-2.2.1-5.3 0-9.8-2.3-14.7-5.7-.5 0-7 7.6-12 16.5-3.3 5.9-5.5 12.9-6.7 17 .2 1.9.4 3.8.4 5.7.1 6.9-1.1 13.3-3.4 19.2 2.3 2.2 5.1 4.9 7.8 7.8 6.4 6.9 17.8 23 18.1 23.4 4.4 6.1-1.1 23.4-15.6 33.3-7.6 5.2-16.5 7.5-23.7 7.5-6.5 0-11.7-1.8-13.5-5.1-.7-1.2-1.2-4.5-1.2-4.5s-3.5-14.8-8.5-28.3c-.2-.6-.4-1.2-.6-1.7-5.3 1.7-10.9 2.8-16.8 3.3-.7.1-1.4.1-2.2.1-4.1 0-8.1-.9-11.9-1.4-1.9 13.6-1.5 31.4-1.5 31.4.2 1.8.1 3.3-.4 4.7-1.7 4.5-9.4 7.7-18.8 7.7-5.8 0-12.3-1.2-18.4-4.1-15.8-7.4-24.1-23.6-20.7-30.3.2-.5 8.9-18.3 14.1-26.1 1.7-2.5 3.4-4.9 5-7.1-4.5-7.9-6.8-17.1-6.1-26.7 2-30.2 24.9-56 57.8-56.6h1.3c4.1 0 8.1.4 11.9 1.1 3.5-1.1 10.5-3.9 18-11.3 7.7-7.5 13.5-17 16.2-21.8 1.2-4.8 3.5-9.3 6.5-13.2-.8-2.7-1.2-5.9-1.2-9.6-.1-9 1.7-17.1 4.7-23.3m-1.5-3.7l-1.2 2.3c-3.3 6.7-5.1 15.3-5.1 24.6 0 3.3.3 6.3 1 9-2.8 3.9-4.9 8.2-6.1 12.7-2.8 4.9-8.3 13.8-15.5 20.8-6.6 6.5-12.7 9.2-16.1 10.4-3.9-.7-7.8-1-11.7-1h-1.3c-16.3.3-31.4 6.8-42.6 18.1-10.7 10.9-17.1 25.6-18.1 41.3-.6 9.3 1.3 18.4 5.6 26.6-1.4 2-2.8 3.9-4 5.7-4.5 6.7-11.4 20.5-14.1 26.1l-.1.3c-1.5 2.9-1.4 6.8.1 11.3 2.4 7.1 9.7 17.4 22 23.2 6.1 2.8 12.9 4.3 19.7 4.3 10.8 0 19.5-3.9 21.6-9.7.3-.8.5-1.7.6-2.6h.1v-.5c.1-.8 0-1.7 0-2.6v-.1c0-.2-.3-15.2 1.1-27.9h.2c2.9.5 5.9 1 9.1 1 .8 0 1.6 0 2.4-.1 5-.4 10-1.3 14.7-2.6 4.5 12.3 7.7 25.6 8 27 .2 1.2.7 3.9 1.5 5.4 2.4 4.2 8.2 6.6 16.2 6.6 8.7 0 18-2.9 25.4-8 11.3-7.7 16.8-19.1 18-26.4.8-4.7.2-8.5-1.7-11.1l-.2-.3c-3.6-5.1-12.6-17.5-18.2-23.5-2-2.1-4.1-4.3-6.5-6.6 2.1-5.9 3-12.1 2.9-18.5 0-1.8-.2-3.6-.4-5.4 1.1-3.8 3.2-10.3 6.3-15.8 3.5-6.1 7.6-11.6 9.8-14.1 4 2.6 8.7 4.9 14.3 4.9.8 0 1.7-.1 2.6-.2 7.1-.8 13.1-2.3 18-4.3.2-.1.4-.1.6-.1h.3c1.8.3 3.6.5 5.5.5 8.6 0 16.6-3.8 22.6-10.7 5.6-6.5 8.9-15.2 8.9-23.9 0-16.4-12.7-28.4-31.6-29.8-7.8-11-20.8-17.5-35-17.5-1.1 0-2.2 0-3.4.1-5-6.8-14.1-14.9-23.7-18l-2.5-.9z"/>
+    <path class="st0" d="M206.7 67.2l3.7-2.9c-6.1-9-17.2-18.1-26.8-21.2l-3.3-1.1-1.5 3.1c-3.4 6.9-5.2 15.5-5.2 25.1 0 3.2.1 5.4 1 8.9s3.2 5.5 3.2 5.5l4-3.7 24.9-13.7z"/>
+    <path class="st13" d="M244.5 82.2h-.9c-6.8-10.5-19.2-17.5-33.4-17.5-1.6 0-3.2.1-4.8.3-4.9-7.4-14.3-15.5-23.1-18.3-3.1 6.2-4.8 14.3-4.8 23.3 0 3.7.4 6.9 1.2 9.6-3.1 3.9-5.3 8.4-6.5 13.2-2.7 4.8-8.5 14.3-16.2 21.8-7.6 7.4-14.5 10.2-18 11.3-4.3-.8-8.7-1.2-13.2-1.1-32.9.7-55.8 26.5-57.8 56.6-.6 9.6 1.6 18.8 6.1 26.7-1.6 2.1-3.3 4.6-5 7.1-5.2 7.8-13.9 25.6-14.1 26.1-3.4 6.7 4.9 22.9 20.7 30.4 15.8 7.4 34.5 3.7 37.2-3.6.5-1.3.6-2.9.4-4.7 0 0-.4-17.8 1.5-31.4 4.5.6 9.2 1.8 14.1 1.3 5.9-.5 11.5-1.6 16.8-3.3.2.6.4 1.1.6 1.7 5 13.6 8.5 28.3 8.5 28.3s.5 3.3 1.2 4.5c3.8 6.8 22.9 7.5 37.3-2.4 14.4-9.9 20-27.2 15.6-33.3-.3-.4-11.7-16.6-18.1-23.4-2.7-2.9-5.4-5.6-7.8-7.8 2.3-5.9 3.6-12.3 3.4-19.2 0-1.9-.2-3.8-.4-5.7 1.2-4.2 3.4-11.1 6.7-17 5.1-9.1 11.8-16.7 12.1-16.5 5.5 3.9 10.6 6.3 16.9 5.6 7.3-.9 13-2.3 17.2-4.1.8-.3 1.7-.4 2.6-.3 1.6.3 3.3.4 5 .4 16.3 0 28.5-15.3 28.5-31.6-.1-16.4-13.3-25.9-29.5-27z"/>
+    <path class="st13" d="M205.5 65c-4.9-7.4-14.3-15.5-23.1-18.3-3.1 6.2-4.8 14.3-4.8 23.3 0 3.7.4 6.9 1.2 9.6 1.3 3.7 7.6 11.6 19.4 4 11.9-7.6 8.7-16.3 7.3-18.6z"/>
+    <path class="st0" d="M249.3 140.9c-10.1-.9-18.5-6.8-23.1-15.1 1.8 6.5 5.9 12.2 11.3 16.1 1 .2 2 .3 3 .4 3.8.4 7.4-.2 10.8-1.4-.7.1-1.3.1-2 0z"/>
+    <ellipse transform="rotate(-14.647 259.34 101.424)" class="st0" cx="259.3" cy="101.4" rx="1.9" ry="4.2"/>
+    <path class="st0" d="M218.8 99.9c-1.2-2.3-.5-5.1 1.7-6.5 2.2-1.4 5-.8 6.5 1.1l4.1-2.7c-2.7-3.8-7.9-4.8-11.9-2.3-4 2.6-5.3 7.8-2.9 12l2.5-1.6zM197.1 121.8c0-5.8 1.6-9.8 4.6-12.6-4.8 2.7-7.3 6.9-7.3 14.1 0 12.6 10.3 24.5 22.8 23.1-12.4-2.5-20.1-12.6-20.1-24.6zM178 77.4l-1.8 2.8c2.3 4.4 5.6 6.6 9.7 7.3-3.4-2-6.1-5.3-7.9-10.1zM207.8 63.1c-1 0-2.1.1-3 .1 1.1 2.3 2 4.6 2.5 6.7.4 1.7.8 3.3 1.1 4.8.9-2.7 1.2-5.4.7-7.7-.4-1.2-.8-2.5-1.3-3.9zM185.5 60.4s-.6 7.9 2.3 13.8c2.1 4.1 4.3 6.5 5.4 7.5.4.4 1 .5 1.6.4 1-.3 2.8-1.1 4.4-2.5 1.3-1.2 2.1-2.1 2.5-2.7.4-.5.4-1.1.1-1.6-.7-1.2-2.3-3.9-6.3-7.8-4.2-4.3-10-7.1-10-7.1zM94 236.1c-13.3-6.2-27.6-4.3-33.9.5 7.3-2.8 18.8-3.2 29.6 1.9 15.8 7.4 24 22.8 21.3 30.2-.5 1.3-1.4 2.4-2.7 3.4 3.6-1.4 5.1-6.6 5.3-9.2.5-8.4-3.8-19.4-19.6-26.8zM155.3 264c1.2-7.1 9.5-18.5 22.2-25.9 15.5-9.1 29.9-7.6 33.2-2.5.1.2.3.5.4.7.3-2 0-3.6-.7-4.8-3.3-5.1-17.8-6.7-33.2 2.5-13.2 7.9-22.6 20.5-21.9 30 0-.1 0-.1 0 0z"/>
+    <path class="st0" d="M78.6 252.8c2.3 0 5 .4 7.7 1.5 6.9 2.8 11.1 8.5 10.3 11.2-.5 1.6-3.4 2.7-7.3 2.7-2.5 0-5.3-.5-8-1.6-6.9-2.8-11.1-8.8-10.1-11.2.7-1.5 3.6-2.6 7.4-2.6m0-3c-3.9 0-8.6 1.2-10.1 4.4-.4 1-.8 2.6.2 4.9 1.4 3.4 5.4 7.9 11.5 10.3 2.9 1.2 6.1 1.8 9.1 1.8 5.5 0 9.3-1.8 10.1-4.9 1.3-4.7-4.3-11.6-12.1-14.8-2.7-1.1-5.8-1.7-8.7-1.7zM195.6 244.2c.6 0 1.1.1 1.3.4 1.2 1.2-3.6 7.3-10.6 12-5.5 3.6-11 5.6-13.6 5.6-.7 0-1.2-.2-1.4-.5-.8-1.4 3.5-7.1 10.5-11.8 5.7-3.8 11.2-5.7 13.8-5.7m0-3c-3.6 0-9.8 2.5-15.4 6.1-4.1 2.7-14.2 10.9-11.5 15.7.5.9 1.6 2 4 2 3.6 0 9.8-2.5 15.2-6.1 5.6-3.7 11.8-9.7 12.2-13.5.1-1.2-.2-2.3-1-3.1-.9-.7-2.1-1.1-3.5-1.1z"/>
+    <path class="st11" d="M96.6 265.5c-.8 2.7-8.3 4-15.3 1.2-6.9-2.8-11.1-8.8-10.1-11.2 1.1-2.4 8.1-3.9 15-1.1 7 2.7 11.1 8.4 10.4 11.1zM196.9 244.6c1.2 1.2-3.6 7.3-10.6 12s-14.1 6.5-14.9 5.1c-.8-1.4 3.5-7.1 10.5-11.8 7-4.7 13.8-6.5 15-5.3z"/>
+    <path class="st0" d="M103.9 196.3c-9.7-3.4-19.7-.8-22.6 2.5 4-1.9 11.7-2.8 19.5-.1 10.2 3.6 16.5 11.6 16 15.2-.4 2.1-1 5-1.6 8-1.1 5.9-1.6 12.4-1.6 12.4l2.9.1s.1-3.9 1-9.4c.9-5.8 2-10 2-10 .3-.4.5-.9.6-1.5.9-4.1-5.4-13.4-16.2-17.2zM178.8 190.3c-.9-1-2.9-3.4-3.9-4.5-.1-.2-.2-.4-.4-.5-1.9-2-11.6.2-21.3 6.6-8.6 5.7-11.8 11.6-14.2 16 2.2-3.2 6.7-7.7 12.7-11.7 9.2-6.1 19.8-9.3 21.5-7.8 0 0 1.5 1.8 4 4.3 2.4 2.5 5 5.1 5 5.1l1.7-2.2s-3.9-4-5.1-5.3z"/>
+    <path class="st14" d="M172.3 194.4l-4.5 3.8M167.8 198.8c-.2 0-.3-.1-.5-.2-.2-.3-.2-.6.1-.8l4.5-3.8c.3-.2.6-.2.8.1.2.3.2.6-.1.8l-4.5 3.8c-.1 0-.2.1-.3.1zM124.2 221.8l-.5 7.8M134.9 222.8l2.3 5.1M175.6 200.6l-5.3 2.6M170.3 203.8c-.2 0-.4-.1-.5-.3-.1-.3 0-.7.3-.8l5.3-2.6c.3-.1.7 0 .8.3.1.3 0 .7-.3.8l-5.3 2.6h-.3zM186.1 220.5l-4.3 2.8M181.8 223.8c-.2 0-.3-.1-.4-.2-.2-.2-.1-.5.1-.7l4.3-2.8c.2-.2.5-.1.7.1.2.2.1.5-.1.7l-4.3 2.8c-.1.1-.2.1-.3.1zM185.8 162.6c-.2-.2-.5-.2-.7-.1l-1 .8c-.1-.3-.1-.5-.2-.8l1.1-.7c.3-.2.3-.6.2-.8-.2-.3-.6-.3-.8-.2l-.8.5c-2.1-6.6-5.4-12.6-9.8-17.8l1.3-1.1c.3-.3.4-.7.1-1.1-.3-.3-.7-.4-1.1-.1l-1.3 1.1c-4-4.5-8.8-8.3-14.1-11.4l1.4-2c.2-.2.1-.5-.1-.7-.2-.2-.5-.1-.7.1l-1.5 2.1-3.3-1.8c-.3-.1-.6-.1-.8.1l-.6.5c-.4.3-.3 1 .2 1.2 1.1.5 2.2 1.1 3.2 1.7l-.7 1c-.2.2-.1.5.1.7.1.1.2.1.3.1.2 0 .3-.1.4-.2l.8-1c5.1 3 9.7 6.8 13.6 11.1l-.8.7c-.3.3-.4.7-.1 1.1.1.2.4.3.6.3.2 0 .3-.1.5-.2l.8-.7c4.4 5.2 7.8 11 10 17.4l-1.2.8c-.3.2-.3.6-.2.8.1.2.3.3.5.3.1 0 .2 0 .3-.1l.9-.6.3.9-1.2 1c-.2.2-.2.5-.1.7.1.1.2.2.4.2.1 0 .2 0 .3-.1l.8-.7.6 2.4 1.1-1.9c.1-.2.1-.4.1-.5l-.3-1.2 1.3-1.1c.4-.2.4-.5.2-.7zM93.9 198.2c-.2 0-.5.3-.7.8l-3.2 6.5-2.1-.5c-.3-.1-.6.1-.7.4-.1.3.1.6.4.7l1.8.5-6.2 12.6-1.9.1c-.3 0-.5.2-.5.5s.2.5.5.5l1.3-.1-.9 1.8-1.7-.5c-.3-.1-.5.1-.6.3-.1.3.1.5.3.6l1.6.5-3.1 6.4c-.2.5-.1.9.3.9s1-.4 1.2-.9l2.8-6 1 .3h.1c.2 0 .4-.1.5-.4.1-.3-.1-.5-.3-.6l-.9-.3 1-2.2 1.3-.1c.3 0 .5-.2.5-.5s-.3-.5-.5-.5h-.8l5.7-12.4 1.2.3h.1c.3 0 .5-.2.6-.5.1-.3-.1-.6-.4-.7l-1-.2 3-6.6c.4-.3.5-.7.3-.7z"/>
+    <path class="st14" d="M185.6 226.8c-.2 0-.4-.1-.5-.3 0-.1-2.1-6.2-9-18.5s-10.3-16.3-10.3-16.3c-.2-.2-.2-.5 0-.7.2-.2.5-.2.7 0 .1.2 3.5 4.1 10.4 16.5s9 18.7 9 18.7c.1.3-.1.5-.3.6.1 0 0 0 0 0zM140.6 223.5c-.2-.4-.7-.6-1.1-.4 0 0-1.3.6-3.3 1.3l-.8-1.9c-.1-.2-.3-.3-.5-.2-.2.1-.3.3-.2.5l.8 1.8c-2 .6-4.5 1.2-7.4 1.5-1.4.1-2.7.2-3.7.2l.3-4.5c0-.2-.2-.4-.4-.4s-.4.2-.4.4l-.3 4.6c-2.8-.1-3.8-.4-3.9-.5-.4-.2-.9 0-1.1.5-.2.4 0 .9.5 1.1.2.1 1.4.5 4.4.6l-.1 1.6c0 .2.2.4.4.4s.4-.2.4-.4l.1-1.6c1.1 0 2.4 0 3.9-.2 3.1-.2 5.8-.9 7.9-1.6l.8 1.8c.1.1.2.2.4.2h.2c.2-.1.3-.3.2-.5l-.8-1.7c2-.7 3.3-1.3 3.4-1.4.3-.2.5-.8.3-1.2z"/>
+    <path class="st0" d="M46.4 112.8s2.4 2.5 6 6.6c1.8 2 3.8 4.4 6 7.2 1.1 1.4 2.1 2.8 3.2 4.3s2.2 3.1 3.3 4.7c3.6 4.9 6.5 8 8.5 10s3.1 2.7 3.1 2.7-.6-1.2-2.1-3.6c-1.5-2.4-3.9-5.9-7.4-10.7-1.2-1.7-2.4-3.3-3.6-4.8-1.2-1.6-2.4-3-3.6-4.3-2.4-2.6-4.7-4.8-6.7-6.6-4-3.7-6.7-5.5-6.7-5.5zM5.7 93.4s4.5 5.4 11.3 13.9c3.4 4.3 7.4 9.3 11.6 14.9 2.1 2.8 4.2 5.8 6 8.9 1.9 3.4 4.1 6.6 6.5 9.8 3.8 4.9 7.5 8.7 10.8 11.6 3.3 3 6.4 5 8.9 6.3 2.5 1.3 4.4 2 5.7 2.5 1.3.4 1.9.6 1.9.6s-.6-.3-1.8-1c-1.2-.7-3-1.7-5.3-3.3-2.3-1.6-5-3.8-8-6.8s-6.5-6.8-10.1-11.5c-2.5-3.3-4.8-6.6-6.7-10-2.1-3.4-4.4-6.4-6.7-9.2-4.5-5.6-8.8-10.3-12.3-14.3-7.2-7.9-11.8-12.4-11.8-12.4z"/>
+    <path class="st0" d="M27.1 136.4s.2.9.8 2.5c.6 1.6 1.7 3.9 3.4 6.4 1.7 2.5 4.1 5.3 7.3 7.7l1.2.9c.4.3.9.6 1.3.8.4.3.9.6 1.3.8.5.2.9.5 1.4.8 1.9 1 3.8 1.8 5.8 2.7 6.2 2.6 10.9 3.8 14 4.3 3.1.5 4.5.4 4.5.4s-1.4-.5-4.2-1.7c-2.9-1.1-7.2-2.9-13.2-5.4-1-.5-2.1-.9-3.1-1.3-.5-.2-1-.4-1.5-.7-.5-.2-.9-.5-1.4-.7-.5-.2-.9-.4-1.4-.7-.4-.3-.9-.5-1.3-.8-.9-.5-1.7-1.1-2.5-1.6-3.1-2.2-5.6-4.6-7.4-6.8-1.8-2.2-3.1-4.2-3.9-5.5-.8-1.2-1.1-2.1-1.1-2.1zM121.8 114.8s2.1 3.6 5.5 6.5c2.6 2.3 4.5 2.2 4.5 2.2s-.3-2-2.8-4.2c-3.6-3.2-7.2-4.5-7.2-4.5zM112.5 118.4s1 2.1 2.7 4c1.3 1.5 2.3 1.6 2.3 1.6s-.1-1.1-1.3-2.5c-1.8-1.9-3.7-3.1-3.7-3.1zM124.2 98.4s1.1 2.1 3.2 5.3c1.1 1.6 2.4 3.4 4 5.2.8.9 1.7 1.9 2.6 2.8.9.9 2 1.8 3.1 2.6 3.3 2.5 6 4 7.7 4.8 1.8.8 2.7 1 2.7 1s-.6-.8-2-2.1c-1.4-1.4-3.6-3.3-6.8-5.8-1.2-.9-2.2-1.7-3.2-2.5-1-.9-1.9-1.7-2.8-2.5-1.7-1.7-3.3-3.2-4.5-4.5-2.5-2.7-4-4.3-4-4.3zM145.2 89.1s1.2 1.4 2.9 3.8c.8 1.2 1.7 2.6 2.6 4.2.8 1.6 1.5 3.4 2.1 5.3.9 3 1.5 5.2 2 6.6.5 1.4.8 2.1.8 2.1s.3-.7.5-2.3c.2-1.6.2-4-.8-7.2-.7-2.2-1.7-4.3-2.9-5.9-1.2-1.6-2.4-2.9-3.5-3.9-2.2-1.9-3.7-2.7-3.7-2.7z"/>
+    <g>
+        <path class="st0" d="M158.5 58.1s-.1 2.7.4 6.9c.3 2.1.7 4.6 1.4 7.2.4 1.3.9 2.7 1.5 4.1.3.7.7 1.4 1.1 2.1.4.7.8 1.3 1.3 1.9 2.8 3.8 5.3 6.1 7 7.5 1.7 1.4 2.6 1.8 2.6 1.8s-.5-.9-1.7-2.7c-1.2-1.8-3.1-4.5-5.8-8.1-.5-.6-.9-1.3-1.3-1.9l-.6-.9c-.2-.3-.3-.6-.5-.9-.6-1.3-1.2-2.5-1.7-3.8-.9-2.5-1.6-4.8-2.2-6.7-.9-4.1-1.5-6.5-1.5-6.5z"/>
+    </g>
+    <g>
+        <path class="st0" d="M152.2 77.7s1.5 1.1 3.7 3c1.1 1 2.3 2.1 3.4 3.6.6.7 1 1.5 1.5 2.4.5.9.9 1.8 1.4 2.7 1.4 2.9 2.5 4.9 3.2 6.2.7 1.3 1.2 1.8 1.2 1.8s-.1-.7-.6-2.1c-.5-1.4-1.2-3.6-2.7-6.5-1-2-2-3.9-3.3-5.4-1.3-1.4-2.7-2.5-3.9-3.3-2.3-1.6-3.9-2.4-3.9-2.4z"/>
+    </g>
+    <g>
+        <path class="st0" d="M174.5 37.4s-.2 1.3-.2 3.3c0 1 0 2.2.1 3.5.1 1.3.3 2.7.7 4.1.5 2.2 1 3.7 1.4 4.7.4 1 .7 1.4.7 1.4s0-.5-.1-1.6c-.1-1-.3-2.6-.8-4.8-.7-3-1.1-5.6-1.4-7.6-.2-1.8-.4-3-.4-3z"/>
+    </g>
+    <g>
+        <path class="st0" d="M206.2 30.7s-1.2 1.7-2.3 4.8c-.6 1.5-1.2 3.4-1.6 5.4-.4 2.1-.6 4.3-.7 6.7-.1 3.6.2 6.1.6 7.8.4 1.6.7 2.4.7 2.4s.3-.8.6-2.4c.3-1.6.6-4.2.7-7.6.1-2.4.2-4.7.3-6.7.2-2 .4-3.8.7-5.4.5-3.2 1-5 1-5z"/>
+    </g>
+    <g>
+        <path class="st0" d="M194.9 33.4s.5 1.5 1.1 4c.3 1.2.5 2.6.7 4.2.2 1.6.4 3.3.8 5.1 1 5.5 2.8 7.5 2.8 7.5s.9-2.6-.2-8c-.4-1.9-.8-3.6-1.2-5.3-.5-1.6-1.1-3-1.7-4.1-1.3-2.3-2.3-3.4-2.3-3.4z"/>
+    </g>
+    <g>
+        <path class="st0" d="M192.6 36.4s.3 4.1 1.2 8.5c.7 3.5 1.5 4.8 1.5 4.8s.2-1.6-.5-5c-1-4.8-2.2-8.3-2.2-8.3z"/>
+    </g>
+    <path class="st15" d="M98.2 155c.8-.8 2.2-2.8 2.2-4.6v.1s-.2.3-.6.8v-.2c.3-.6.5-1.3.6-2 .2-1.1-.3-2.1-.6-2.5v.1l-.1-.1v.3c-.2-.8-.8-1.3-.8-1.3s0 .1-.1.4c-.9-1.5-2.5-2.6-4.5-3-2-.4-4.1.1-6 1.2 0 .1.1.2.1.4 0 0 .6 0 1.2.2 1.4-.6 2.9-.8 4.3-.6 1.8.3 3.2 1.4 4 2.9 0 .1.1.2.1.2-.3-.4-.7-.7-1-.8.5.7 1.1 2.2.2 4.5 0-.4-.2-.8-.3-1-.6 2.4-1 2.9-1.3 3.5.1-.3 0-.5 0-.7 0 0-.3.7-1.1 1.7-.6.7-1.1.9-1.2.9-.1-.1 0-.2 0-.3 0 0-.3.1-.6.3-.3.2-.6.4-.7.3l.3-.3c-.1 0-.4.2-.9.2-.2 0-1.2 0-2.1-.8.2 0 .5 0 .6.2-.1-.3-.6-.3-.9-.5-.3-.2-.5-.7-.6-.9.8.4 1.8.4 2.5.1.7-.3 1.1-.5 1.4-.4.3.1.6-.2.4-.5-.1-.3-.6-.8-1.4-.7-.6 0-1.5.5-2.3-.3-.7-.7-.5-1.1-.4-1.4.1-.2.3-.4.5-.5.1.1.2.1.2.1v-.1c.1 0 .3.2.3.2.1.1.1.2.1.2v-.1s0-.1-.1-.2c.1 0 .1.1.2.2.1-.1.2-.3.2-.5v-.3c0-.1 0-.1.1 0v-.1c.2-.2 1.5-.6 1.6-.6.1-.1.3-.2.4-.3.1 0 .3-.3.4-.5 0-.1-.1-.2-.2-.3 0 0-.2-.1-.4-.1s-.4-.1-.8-.2c-.3-.1-.5-.3-.6-.5v-.1-.2c.3-.5.8-1 1.4-1.3h-.1l.3-.1c.1 0-.2-.1-.4-.1s-.3 0-.4.1c.1 0 .2-.1.2-.1-.3 0-.6.1-.9.3v-.1c-.1 0-.5.2-.6.4v-.1c-.1.1-.2.1-.3.2-.7-.3-1.3-.4-1.9-.3-.1-.2-.3-.5-.4-.9 0 0 0 .1-.1 0v-.9-.1s-.1 0-.3.2c-.1.1-.2.2-.2.3 0 .1-.1.1-.1.2 0 0 .1-.1 0-.1l-.2.2c0 .1-.1.1-.1.2v-.1c-.1.2-.2.3-.4.5-.1.1-.2.3-.3.5-.1.2-.2.5-.3.8v.1c-.3.2-.5.5-.6.6-.4.4-.9 1.1-1.5 2.3 0 0 .3-.4.7-.9-.4.6-.9 1.5-1.3 3 0 0 .2-.4.5-.9-.3 1-.4 2.2-.1 3.6.2 1 .6 1.9 1.1 2.5.1.1.2.3.3.4.6.8 1.7 1.9 2.8 2.3-.4-.2-.5-.5-.5-.5s1.2.7 2.2.8c-.3-.1-.3-.3-.3-.3s2.8.7 4.7-.3c.4-.2.7-.5.9-.7.5-.2 1.1-.4 1.8-.8 1.1-.7 1.4-1.3 1.7-1.9v.1c.4-.3.4-.5.4-.6z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-storage.svg b/devtools/client/themes/images/emojis/emoji-tool-storage.svg
new file mode 100644
index 000000000..d9be26108
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-storage.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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" opacity="1.0">
+  <path fill="#D19B61" d="M30.588 157.435C45.694 92.48 111.838 11.252 210.984 8.688S399.89 31.77 458.878 108.708s58.986 220.88 25.646 265.6-41.87 142.173-192.764 131.914c-150.894-10.258-204.75-42.22-253.48-112.154S10.037 245.802 30.59 157.435z"/>
+  <path fill="#4F3D30" d="M161.834 173.737c0 10.843-18.425 19.634-41.154 19.634s-41.154-8.79-41.154-19.633c0-26.124 43.257-30.846 43.79-41.152.1-1.933 2.78-3.17 5.054-2.25 11.912 4.824 33.464 17.178 33.464 43.402zm161.668 236.25c-2.04-.663-4.442.227-4.532 1.617-.48 7.408-39.28 10.802-39.28 29.58 0 7.793 16.527 14.11 36.914 14.11s36.915-6.317 36.915-14.11c0-18.85-19.333-27.73-30.018-31.198zm87.547-118.38c-2.04-.968-4.443.333-4.533 2.366-.48 10.834-39.28 15.797-39.28 43.258 0 11.4 16.527 20.64 36.914 20.64s36.916-9.24 36.916-20.64c0-27.565-19.333-40.55-30.017-45.623z"/>
+  <path fill="#332A23" d="M264.82 274.863c0 10.345-16.527 18.73-36.914 18.73s-36.915-8.385-36.915-18.73c0-24.923 38.803-29.428 39.282-39.26.09-1.846 2.494-3.027 4.532-2.148 10.684 4.603 30.017 16.39 30.017 41.408zm6.9-210.826c-2.04-.662-4.443.228-4.533 1.618-.48 7.408-39.28 10.802-39.28 29.58 0 7.793 16.527 14.11 36.914 14.11s36.916-6.317 36.916-14.11c0-18.85-19.333-27.73-30.017-31.198zm121.1 54.782c-1.857-.914-4.048.314-4.13 2.232-.437 10.227-35.806 14.912-35.806 40.833 0 10.76 15.065 19.482 33.65 19.482 18.584 0 33.65-8.722 33.65-19.482-.002-26.02-17.624-38.28-27.363-43.066zM157.535 356.05c-2.272-1.118-4.95.384-5.052 2.73-.534 12.504-43.782 18.233-43.782 49.93 0 13.155 18.42 23.82 41.145 23.82 22.724 0 41.145-10.665 41.145-23.82 0-31.82-21.548-46.807-33.456-52.66z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-styleeditor.svg b/devtools/client/themes/images/emojis/emoji-tool-styleeditor.svg
new file mode 100644
index 000000000..ef7153312
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-styleeditor.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" viewBox="0 0 72 72" opacity="1.0">
+  <path fill="#FF473E" d="M45.4 35.2V2.1c0-4.9-18.8 9.8-18.8 15.1v18h18.8z"/>
+  <path fill="#D1CFC3" d="M25.8 41.1c-.4 0-.7-.3-.7-.7v-7.2c0-.4.3-.7.7-.7h20.9c.4 0 .7.3.7.7v7.2c0 .4-.3.7-.7.7H25.8z"/>
+  <path fill="#BFBCAF" d="M50.1 39.6c0-.4-.3-.7-.7-.7H22.6c-.4 0-.7.3-.7.7V67.5C21.9 70 28.2 72 36 72s14.1-2 14.1-4.5v-.1-27.8z"/>
+  <ellipse transform="rotate(45 35.977 9.37)" fill="#FF6E83" cx="36" cy="9.4" rx="4" ry="12.6"/>
+  <path fill="#FC7570" d="M41.9 30.5c-.8 0-1.5-.7-1.5-1.5V17.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5V29c-.1.9-.7 1.5-1.5 1.5z"/>
+  <circle fill="#C4F0F2" cx="36" cy="53.9" r="3.8"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-webaudio.svg b/devtools/client/themes/images/emojis/emoji-tool-webaudio.svg
new file mode 100644
index 000000000..b57c0f886
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-webaudio.svg
@@ -0,0 +1,12 @@
+<!-- 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" viewBox="0 0 511.9 511.9" opacity="1.0">
+    <circle fill="#E2A042" cx="254.5" cy="217.6" r="167.4"/>
+    <path fill="#AF773F" d="M443.1 215.3c-2.3-14-4.1-29.8-3.8-43.5-5.4-1.4-11-2.1-16.8-2.1-6.9 0-13.5 1-19.8 3-18.1-18.4-43.3-29.9-71.2-29.9-22.5 0-43.2 7.5-59.9 20-10.7 8.1-25.1 8.1-35.8 0-19.2-14.5-43.8-22.2-70.3-19.5-22.9 2.3-45.2 12.6-61.7 28-4.7-1-9.5-1.6-14.5-1.6-5.1 0-10.1.6-14.9 1.7.4 13.8-1.4 29.7-3.8 43.9 0 0 8.2 52.1-5.1 82.4.7.9 1.3 1.8 1.9 2.7 6.5 2.2 13.5 3.5 20.8 3.6 26.7 81.6 97.9 112.6 166.2 112.6 75.1 0 145.3-32.9 168.6-112.6 7.8-.1 15.3-1.5 22.3-4 .7-1.2 1.5-2.3 2.3-3.3-12.5-30.3-4.5-81.4-4.5-81.4z"/>
+    <path fill="#FFB636" d="M328.7 177.4c-24.8-.3-46.8 11.5-60.4 30-6.6 8.9-19.4 8.9-26 0-13.6-18.4-35.6-30.3-60.4-30-38.8.5-71.4 32.3-72.9 71-1.5 39.1 27.3 71.7 64.8 76.3 5.1.6 9 4.6 9.6 9.6 4.5 35.7 34.9 63.3 71.9 63.3 36.7 0 67-27.3 71.8-62.7.7-5.4 4.9-9.6 10.3-10.3 37.2-4.8 65.7-37.3 64.2-76.2-1.4-38.7-34.1-70.5-72.9-71z"/>
+    <path fill="#E576CB" d="M271.5 281.8s-2.2 2.9-5.5 4.9c-3.3 2.2-7.7 3.6-12.2 3.7-4.4-.1-8.8-1.5-12.2-3.6-3.3-2-5.5-4.9-5.5-4.9-.5-.7-.5-1.6 0-2.2 0 0 2.2-2.9 5.5-4.9 3.3-2.2 7.7-3.6 12.2-3.6 4.4.1 8.8 1.5 12.2 3.7 3.3 2 5.5 4.9 5.5 4.9.5.5.5 1.4 0 2zM293.4 338.1c-9.8-13.9-24.8-22-40.2-21.7-15.2.3-29.4 8.2-38.9 21.7-1.1 1.6-1.6 3.4-1.6 5.2 0 .9.1 1.9.4 2.8 7.4 23.5 23 38 40.8 38s33.4-14.6 40.8-38c.3-.9.4-1.8.4-2.7v-.3c-.1-1.7-.6-3.5-1.7-5z"/>
+    <path fill="#2B3B47" d="M253.8 366.5c-8.9 0-17.3-8.1-22.5-21.5 6-6.7 14.1-10.7 22.2-10.9 8.1-.2 16.5 3.9 22.8 10.9-5.2 13.4-13.6 21.5-22.5 21.5z"/>
+    <path fill="#E2A042" d="M147.3 412.6s.1.1.3.2c0 0 .1.1.2.1l.1.1v.1s0 .1.1.1v.1s-.1.1-.2.1c-.4 0-1.1-.1-2.4-.5-1.2-.4-2.8-1-4.7-1.9-1.9-.9-4.1-2-6.4-3.4-2.4-1.4-4.9-3-7.6-4.9-2.7-1.9-5.4-4.1-8.2-6.5-1.4-1.2-2.8-2.5-4.2-3.8-1.4-1.4-2.8-2.7-4.2-4.2-.7-.7-1.4-1.5-2.1-2.2-.7-.8-1.3-1.5-2-2.3-1.4-1.5-2.7-3.2-4-4.8-.7-.8-1.3-1.6-1.9-2.5l-1.9-2.5c-1.2-1.7-2.4-3.5-3.6-5.2l-3.3-5.4c-1-1.8-2.1-3.7-3.1-5.4-1-1.8-1.8-3.7-2.8-5.5-.9-1.8-1.7-3.6-2.5-5.4-.8-1.8-1.5-3.5-2.2-5.2-.7-1.7-1.4-3.4-1.9-5-1.1-3.2-2.2-6.3-3-8.9-.8-2.6-1.6-4.7-2-7.1-1-4.4-1.6-6.9-1.6-6.9l-1-4.5c-1-4.3-3-8.3-5.7-11.7 13.3-30.3 5.1-82.4 5.1-82.4 5.4-32.2 7.9-74-12-77.3-20-3.3-44.9 26.4-53.8 80-6.4 38.5-1.6 71.8 9 88.6-.9 2.7-1.5 5.7-1.6 8.7 0 0-.1 2.5-.2 6.9 0 .6 0 1.1-.1 1.7V326.3c0 1.7.1 3.6.1 5.6 0 4.1.3 8.1.6 12.8.1 2.3.4 4.7.7 7.2.2 2.5.5 5 .9 7.7.4 2.6.7 5.3 1.2 8.1s1 5.6 1.6 8.5c.6 2.9 1.3 5.8 2 8.7.8 2.9 1.6 5.9 2.4 8.9.9 3 1.8 6 2.9 9 .5 1.5 1.1 3 1.6 4.5s1.1 3 1.7 4.5c1.2 3 2.4 6 3.7 8.9.7 1.5 1.3 2.9 2 4.4.7 1.4 1.4 2.9 2.1 4.3 1.4 2.9 2.9 5.6 4.4 8.4 1.5 2.7 3.1 5.4 4.7 8 3.2 5.2 6.5 10.1 9.8 14.7 3.4 4.6 6.7 8.8 10 12.6 3.3 3.8 6.4 7.2 9.4 10.2 3 3 5.8 5.6 8.2 7.7 2.4 2.1 4.6 3.9 6.2 5.2l1.2.9c.4.3.8.6 1 .8.4.3.7.5.9.6.3.2.5.3.5.3 23.7 15.4 55.4 8.6 70.8-15.2s8.5-55.6-15.2-71zM505.2 348.8c-.1-2.3-.1-4.5-.3-6.7-.4-4.3-.6-8.1-1.1-11.7-.4-3.5-.8-6.7-1.2-8.8-.8-4.4-1.3-6.9-1.3-6.9l-.9-4.6c-.2-1-.4-2-.7-3 10.9-16.7 15.9-50.2 9.3-89.2-9-53.5-33.9-83.3-53.8-80-20 3.3-17.4 45.1-12 77.3 0 0-8 51 4.7 81.4-3.7 4.6-6.2 10.3-6.7 16.7 0 0-.2 2.5-.5 6.9 0 .5-.1 1.1-.1 1.7v.8c0 .2-.1.4-.1.7-.1.9-.3 1.9-.4 3-.2 2-.8 4.9-1.3 7.8-.2 1.5-.6 3-.9 4.5-.3 1.6-.7 3.2-1.1 4.8-.4 1.6-.8 3.3-1.3 4.9-.5 1.7-1 3.4-1.6 5.1l-1.8 5.1c-.7 1.7-1.4 3.4-2 5.1-.8 1.7-1.5 3.4-2.3 5.1l-1.2 2.5c-.4.8-.8 1.7-1.3 2.5-.9 1.6-1.7 3.3-2.7 4.8-.5.8-.9 1.6-1.4 2.3-.5.8-1 1.5-1.5 2.3-.9 1.5-2 2.9-3 4.4-1 1.4-2 2.8-3.1 4.1-2.1 2.6-4.2 5.1-6.2 7.3-2.1 2.2-4 4.2-5.9 5.9-1.9 1.7-3.6 3.2-5.1 4.4-1.5 1.2-2.8 2.1-3.8 2.8-1 .7-1.6 1-1.9 1.1h-.1s.1 0 .1-.1l.1-.1c.1 0 .1-.1.1-.1-23.4 15.5-30 46.9-14.7 70.5 15.4 23.7 47.1 30.5 70.8 15.2 0 0 .2-.1.5-.3.1-.1.2-.1.3-.2 0 0 .1-.1.2-.1l.1-.1c.1-.1.2-.2.4-.3.1-.1.3-.2.5-.4.1-.1.2-.1.3-.2.1-.1.2-.1.2-.2.3-.3.7-.6 1.1-1 1.5-1.4 3.5-3.4 5.7-5.8s4.7-5.3 7.3-8.6c2.6-3.3 5.4-7 8.1-11.2 2.8-4.1 5.6-8.7 8.3-13.5 2.7-4.9 5.3-10.1 7.8-15.5 1.2-2.7 2.4-5.5 3.5-8.3 1.1-2.8 2.2-5.7 3.2-8.6.5-1.5 1-2.9 1.5-4.4.4-1.5.9-2.9 1.3-4.4.9-2.9 1.6-5.9 2.4-8.9.4-1.5.7-3 1-4.5.3-1.5.6-3 .9-4.4.6-3 1.1-5.9 1.6-8.8.4-2.9.8-5.8 1.1-8.7.3-2.9.5-5.7.8-8.4.2-2.8.3-5.5.4-8.1.1-2.6.1-5.2.1-7.7-.2-2.5-.3-4.9-.4-7.2z"/>
+    <path fill="#2B3B47" d="M188.5 241.3c-1-11.2-10.2-20-21.6-20-11.4 0-20.7 8.8-21.7 20L145 272h.1v.1c0 12.1 9.8 21.8 21.8 21.8 12.1 0 21.8-9.8 21.8-21.8v-.1l-.2-30.7zM363.9 241.3c-1-11.2-10.2-20-21.7-20-11.4 0-20.7 8.8-21.6 20l-.3 30.7h.1v.1c0 12.1 9.8 21.8 21.8 21.8 12.1 0 21.8-9.8 21.8-21.8v-.1l-.1-30.7z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/emojis/emoji-tool-webconsole.svg b/devtools/client/themes/images/emojis/emoji-tool-webconsole.svg
new file mode 100644
index 000000000..78843dfd3
--- /dev/null
+++ b/devtools/client/themes/images/emojis/emoji-tool-webconsole.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 height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.9 511.9" opacity="1.0">
+  <path fill="#FFD469" d="M255.9 35.3C134 35.3 35.2 134.1 35.2 256c0 3.3.1 6.6.2 9.9-12.8 1.7-22.8 12.6-22.8 25.9 0 14.5 11.7 26.2 26.2 26.2H44c26.8 91.7 111.4 158.7 211.7 158.7 121.8 0 220.6-98.8 220.6-220.6.2-122-98.6-220.8-220.4-220.8z"/>
+  <path fill="#FFB636" d="M476.2 265.8c.1-3.3.2-6.6.2-9.9 0-58.9-23.1-112.5-60.8-152 21.3 34.5 33.6 75.2 33.6 118.8 0 125.2-101.5 226.7-226.7 226.7-43.6 0-84.2-12.3-118.8-33.6 39.6 37.7 93.1 60.8 152 60.8 100.3 0 185-67 211.7-158.7h5.2c14.5 0 26.2-11.7 26.2-26.2.2-13.3-9.7-24.2-22.6-25.9z"/>
+  <path fill="#2B3B47" d="M172.3 251.3H121c-6.8 0-12.3-5.5-12.3-12.3 0-6.8 5.5-12.3 12.3-12.3h51.3c6.8 0 12.3 5.5 12.3 12.3 0 6.8-5.5 12.3-12.3 12.3zM391.4 251.3h-51.3c-6.8 0-12.3-5.5-12.3-12.3 0-6.8 5.5-12.3 12.3-12.3h51.3c6.8 0 12.3 5.5 12.3 12.3 0 6.8-5.5 12.3-12.3 12.3zM328.6 342.6H185c-6.8 0-12.3-5.5-12.3-12.3 0-6.8 5.5-12.3 12.3-12.3h143.6c6.8 0 12.3 5.5 12.3 12.3-.1 6.8-5.6 12.3-12.3 12.3z"/>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/images/fast-forward.svg b/devtools/client/themes/images/fast-forward.svg
new file mode 100644
index 000000000..813c672d8
--- /dev/null
+++ b/devtools/client/themes/images/fast-forward.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="#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.5zM15 12.497l-.04-7.342-.01-1.658A.488.488 0 0 0 14.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/filetypes/dir-close.svg b/devtools/client/themes/images/filetypes/dir-close.svg
new file mode 100644
index 000000000..07d087816
--- /dev/null
+++ b/devtools/client/themes/images/filetypes/dir-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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" stroke="#0b0b0b" fill="none" fill-rule="evenodd">
+  <path d="M.5 5.5v-2c0-.553.448-1 1-1H4c.553 0 1.268.358 1.6.802L6.5 4.5h5.997c.554 0 1.003.446 1.003.998v7.004c0 .55-.447.998-1 .998h-11c-.553 0-1-.453-1-.997V5.5zM1.5 6.5h11"/>
+</svg>
diff --git a/devtools/client/themes/images/filetypes/dir-open.svg b/devtools/client/themes/images/filetypes/dir-open.svg
new file mode 100644
index 000000000..6528b7e09
--- /dev/null
+++ b/devtools/client/themes/images/filetypes/dir-open.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" stroke="#0b0b0b" fill="none" fill-rule="evenodd">
+  <path d="M.5 5.5v-2c0-.553.448-1 1-1H4c.553 0 1.268.358 1.6.802L6.5 4.5h5.997c.554 0 1.003.443 1.003 1v2H4.495c-.55 0-1.192.394-1.444.898l-2.1 4.204c-.25.496-.45.445-.45-.1V5.5z"/>
+  <path d="M.5 12v.508c0 .548.456.992 1.002.992h9.996c.553 0 1.2-.394 1.45-.898l2.103-4.204c.25-.496.004-.898-.55-.898H13"/>
+</svg>
diff --git a/devtools/client/themes/images/filetypes/globe.svg b/devtools/client/themes/images/filetypes/globe.svg
new file mode 100644
index 000000000..440499941
--- /dev/null
+++ b/devtools/client/themes/images/filetypes/globe.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="#0b0b0b">

+  <path d="M8.507 3.508l-1.978.003-.107.107v1.334l.848.891.455.031.107-.107v-.57l.75-.705.032-.877zM11.675 8.811l-1.389-1.348h-1.49l-.52.476-.032 1.023.665.708 1.22.032-.107-.107v1.108l.897.942.29.031.108-.107v-1.066l.39-.345.03-.855-.107.107h.24l.377-.334v-.151l-.116-.114-.531-.031z"/>

+  <path d="M7.973 13.145a5.177 5.177 0 0 1-5.171-5.172c0-.034 0-.034.002-.066v-.003-.03l.17-.081.667.54.453.031.458.502-.03.832.291.352h.434l.105.088-.03 1.752.483.512h.097l.023-.31.927-.88.05-.435.489-.427v-.82l-.543-.035-1.032-1.066H4.29l-.142-.084v-.796l.142-.093h1.074v-.251l.11-.105.648.03.455-.408.031-.69-.576-.603h-.668v.26l-.102.064h-.826l-.105-.084.023-.59.442-.397v-.226h-.352c-.094 0-.14-.119-.073-.184a5.154 5.154 0 0 1 7.005-.187.104.104 0 0 1-.069.184l-1.056-.031-.745.74.48.484v.148l-.354.357h-.146l-.162-.163v-.148l.07-.07-.232-.232-.342.334.49.49c.065.066.004.18-.09.179l-.694-.004v.779h.723l.03-.516.147-.133h.148l.574.562v.248l.533.025h.003l.166-.028 1.14 1.143.695-.653h.353l.107.1c0 .018.003.015.003.033v.002c0 .028-.002.028-.001.058a5.179 5.179 0 0 1-5.174 5.172M7.973 2A5.98 5.98 0 0 0 2 7.974a5.98 5.98 0 0 0 5.973 5.973 5.98 5.98 0 0 0 5.974-5.974A5.98 5.98 0 0 0 7.973 2"/>

+</svg>

diff --git a/devtools/client/themes/images/filter-swatch.svg b/devtools/client/themes/images/filter-swatch.svg
new file mode 100644
index 000000000..1f63b4f08
--- /dev/null
+++ b/devtools/client/themes/images/filter-swatch.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-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" 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/filter.svg b/devtools/client/themes/images/filter.svg
new file mode 100644
index 000000000..90bc6165f
--- /dev/null
+++ b/devtools/client/themes/images/filter.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" width="16" height="16" viewBox="0 0 16 16" fill="#0b0b0b">
+  <style>
+    /* Use a fill that's visible on both light and dark themes for filter inputs */
+    #filterinput:target + #icon {
+      fill: #aaa;
+    }
+  </style>
+  <g id="filterinput"/>
+  <g id="icon">
+    <path fill-opacity=".3" d="M6.6 8.4c0-.6-1.7.3-1.7-.3 0-.4-1.7-2.7-1.7-2.7H13s-1.8 2-1.8 2.7c0 .3-2.1-.1-2.1.3v6.1H7s-.4-4.1-.4-6.1z"/>
+    <path d="M2 2v2.3L4.7 9H6v5.4l2.1 1 1.8-.9V9h1.3L14 4.3V2H2zm11 2l-2.2 4H9v5.8l-.9.4-1.1-.5V8H5.2L3 4V3h10v1z"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/filters.svg b/devtools/client/themes/images/filters.svg
new file mode 100644
index 000000000..12a5f7cc9
--- /dev/null
+++ b/devtools/client/themes/images/filters.svg
@@ -0,0 +1,31 @@
+<!-- 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="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="checked-icon-state">
+    <feColorMatrix in="SourceGraphic" type="matrix"
+      values="0 0 0 0 0.043
+              0 0 0 0 0.415
+              0 0 0 0 0.79
+              0 0 0 1 0"/>
+  </filter>
+  <filter id="dark-theme-checked-icon-state">
+    <feColorMatrix in="SourceGraphic" type="matrix"
+      values="0 0 0 0 0
+              0 0 0 0 1
+              0 0 0 0 0.212
+              0 0 0 1 0"/>
+  </filter>
+
+  <!-- Web Audio Gradients -->
+  <linearGradient id="bypass-light" x1="8%" y1="10%" x2="16%" y2="16%" spreadMethod="repeat">
+    <stop offset="0%" stop-color="#dde1e4a0"/> <!-- theme-splitter-color (0.5 opacity) -->
+    <stop offset="50%" stop-color="transparent"/>
+  </linearGradient>
+
+  <linearGradient id="bypass-dark" x1="8%" y1="10%" x2="16%" y2="16%" spreadMethod="repeat">
+    <stop offset="0%" stop-color="#454d5d"/> <!-- theme-splitter-color -->
+    <stop offset="50%" stop-color="transparent"/>
+  </linearGradient>
+</svg>
diff --git a/devtools/client/themes/images/firebug/arrow-down.svg b/devtools/client/themes/images/firebug/arrow-down.svg
new file mode 100644
index 000000000..30a31389b
--- /dev/null
+++ b/devtools/client/themes/images/firebug/arrow-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 xmlns="http://www.w3.org/2000/svg" width="7" height="7">
+  <path d="M1.774 4.486L.257 1.86-1.259-.768h6.067L3.29 1.859z" transform="matrix(.88859 0 0 1.0498 1.923 1.549)" stroke-linejoin="round" fill="#39424a" stroke="#39424a"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/arrow-up.svg b/devtools/client/themes/images/firebug/arrow-up.svg
new file mode 100644
index 000000000..dd59e90dc
--- /dev/null
+++ b/devtools/client/themes/images/firebug/arrow-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 xmlns="http://www.w3.org/2000/svg" width="7" height="7">
+  <path d="M1.774 4.486L.257 1.86-1.259-.768h6.067L3.29 1.859z" transform="matrix(.88859 0 0 -1.0498 1.923 5.452)" stroke-linejoin="round" fill="#39424a" stroke="#39424a"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/breadcrumbs-divider.svg b/devtools/client/themes/images/firebug/breadcrumbs-divider.svg
new file mode 100644
index 000000000..e132ae2ab
--- /dev/null
+++ b/devtools/client/themes/images/firebug/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" xmlns:xlink="http://www.w3.org/1999/xlink" 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" xlink: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" xlink: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/firebug/breakpoint.svg b/devtools/client/themes/images/firebug/breakpoint.svg
new file mode 100644
index 000000000..7dc2ff8ce
--- /dev/null
+++ b/devtools/client/themes/images/firebug/breakpoint.svg
@@ -0,0 +1,13 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#c80000"/>
+      <stop offset="1" stop-color="#780000"/>
+    </linearGradient>
+    <radialGradient cx="4.8" cy="4.665" r="5.59" fx="4.8" fy="4.665" id="b" xlink:href="#a" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path d="M11.553 5.995a5.59 5.59 0 1 1-11.18 0 5.59 5.59 0 1 1 11.18 0z" transform="translate(-.4 -.435) scale(1.0734)" fill="url(#b)"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/close.svg b/devtools/client/themes/images/firebug/close.svg
new file mode 100644
index 000000000..2e5a04af3
--- /dev/null
+++ b/devtools/client/themes/images/firebug/close.svg
@@ -0,0 +1,25 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#f2451d"/>
+      <stop offset=".101" stop-color="#f01428" stop-opacity=".8"/>
+      <stop offset=".897" stop-color="#de8493"/>
+      <stop offset="1" stop-color="#efc3cc"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#520e0d"/>
+      <stop offset="1" stop-color="#c4181d"/>
+    </linearGradient>
+    <linearGradient x1="8.769" y1="1049.931" x2="8.769" y2="1038.668" id="c" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -1036.362)"/>
+    <linearGradient x1="7.231" y1="1051.323" x2="7.231" y2="1037.401" id="d" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -1036.362)"/>
+    <filter x="-.24" y="-.24" width="1.48" height="1.48" color-interpolation-filters="sRGB" id="e">
+      <feGaussianBlur stdDeviation=".713"/>
+    </filter>
+  </defs>
+  <rect width="13" height="13" rx="2" ry="2" x="1.5" y="1.5" fill="url(#c)" stroke="url(#d)" stroke-linejoin="round"/>
+  <path d="M6.5 5.437L4.938 7l2 2-2 2L6.5 12.562l2-2 2 2L12.064 11l-2-2 2-2L10.5 5.437l-2 2-2-2z" opacity=".4" filter="url(#e)"/>
+  <path d="M6 4.438L4.437 6l2 2-2 2L6 11.563l2-2 2 2L11.563 10l-2-2 2-2L10 4.437l-2 2-2-2z" fill="#fff"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-console.svg b/devtools/client/themes/images/firebug/command-console.svg
new file mode 100644
index 000000000..ff23daa64
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-console.svg
@@ -0,0 +1,31 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#325de6"/>
+      <stop offset="1" stop-color="#8ba3f1"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#1a47d6"/>
+      <stop offset="1" stop-color="#6786ed"/>
+    </linearGradient>
+    <linearGradient x1="7.771" y1="13.61" x2="7.771" y2="2.16" id="e" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.70047 0 0 .8 8.145 1037.962)"/>
+    <linearGradient x1="7.21" y1="14.919" x2="7.21" y2="1.081" id="f" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.70047 0 0 .8 8.145 1037.962)"/>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#282828"/>
+      <stop offset="1" stop-color="#505050"/>
+    </linearGradient>
+    <linearGradient id="d">
+      <stop offset="0"/>
+      <stop offset="1" stop-color="#3c3c3c"/>
+    </linearGradient>
+    <linearGradient x1="7.771" y1="15.451" x2="7.771" y2="3.941" id="g" xlink:href="#c" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.9204 0 0 .56 15.804 1039.472)"/>
+    <linearGradient x1="7.21" y1="16.411" x2="7.21" y2="3.037" id="h" xlink:href="#d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.9204 0 0 .56 15.804 1039.472)"/>
+  </defs>
+  <g stroke-linejoin="round">
+    <path d="M1.14 1039.162l4.56 5.167-4.56 5.233-.84-.8 3.166-4.433-3.166-4.367z" fill="url(#e)" stroke="url(#f)" stroke-width=".6" transform="translate(0 -1036.362)"/>
+    <path d="M5.688 1040.05v1.125h10.125v-1.125H5.687zm2.5 3.75v1.125h7.624v-1.125H8.189zm-2.5 3.75v1.125h10.125v-1.125H5.687z" style="marker:none" color="#000" fill="url(#g)" stroke="url(#h)" stroke-width=".4" overflow="visible" transform="translate(0 -1036.362)"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-eyedropper.svg b/devtools/client/themes/images/firebug/command-eyedropper.svg
new file mode 100644
index 000000000..be8f15130
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-eyedropper.svg
@@ -0,0 +1,38 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" height="16" width="16">
+  <defs>
+    <linearGradient id="e">
+      <stop offset="0" stop-color="#e97f7f"/>
+      <stop offset="1" stop-color="#efa1a1"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#e2e9ea"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#65888b"/>
+      <stop offset="1" stop-color="#91adaf"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#746b54"/>
+      <stop offset="1" stop-color="#454033"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#8c7f64"/>
+      <stop offset="1" stop-color="#5d5543"/>
+    </linearGradient>
+    <radialGradient xlink:href="#a" id="h" cx="8.847" cy="1.845" fx="8.847" fy="1.845" r="1.587" gradientTransform="matrix(1.27453 .37742 -.46407 1.55272 -1.03 -4.65)" gradientUnits="userSpaceOnUse"/>
+    <linearGradient gradientTransform="matrix(1.11829 0 0 1.11313 -.505 -.258)" xlink:href="#b" id="i" x1="8.531" y1=".95" x2="9.908" y2="4.42" gradientUnits="userSpaceOnUse"/>
+    <linearGradient gradientTransform="matrix(1.11794 0 0 1.11348 .554 .12)" xlink:href="#b" id="k" x1="-6.81" y1="-1.866" x2="-12.495" y2="-1.812" gradientUnits="userSpaceOnUse"/>
+    <linearGradient gradientTransform="matrix(1.11794 0 0 1.11348 .554 .12)" xlink:href="#a" id="j" x1="-7.216" y1="-2.356" x2="-12.008" y2="-2.36" gradientUnits="userSpaceOnUse"/>
+    <linearGradient gradientTransform="matrix(1.11829 0 0 1.11313 -.505 -.258)" xlink:href="#c" id="f" x1="7.153" y1="11.831" x2="6.271" y2="11.424" gradientUnits="userSpaceOnUse"/>
+    <linearGradient gradientTransform="matrix(1.11829 0 0 1.11313 -.505 -.258)" xlink:href="#d" id="g" x1="8.328" y1="9.463" x2="6.703" y2="8.785" gradientUnits="userSpaceOnUse"/>
+    <linearGradient xlink:href="#e" id="l" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.11829 0 0 1.11313 -.505 -.258)" x1="7.153" y1="11.831" x2="6.271" y2="11.424"/>
+  </defs>
+  <path d="M6.705 15.7c1.12-1.51 1.556-2.841 1.973-4.387.502-1.793.766-3.668 1.251-5.471l-1.73-.462c-.485 1.804-1.194 3.562-1.665 5.363-.406 1.532-.717 2.951-.495 4.78z" fill="url(#f)" stroke="url(#g)" stroke-width=".4" stroke-linejoin="round"/>
+  <path d="M10.647 4.88a1.677 2.784 15.142 0 0 .76-1.525 1.677 2.784 15.142 0 0-.896-3.12 1.677 2.784 15.142 0 0-2.344 2.256 1.677 2.784 15.142 0 0-.109 1.7l2.589.69z" fill="url(#h)" stroke="url(#i)" stroke-width=".4" stroke-linejoin="round"/>
+  <rect width="6.708" height="1.113" x="-13.565" y="-3.086" rx=".5" ry=".5" transform="rotate(-165.066) skewX(-.132)" fill="url(#j)" stroke="url(#k)" stroke-width=".4" stroke-linejoin="round"/>
+  <path d="M8.558 10.973l-2.003.496c-.315 1.252-.487 2.44-.332 3.901l.406.107c1.03-1.428 1.416-2.582 1.86-4.226.028-.107.05-.199.07-.278z" fill="url(#l)"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-frames.svg b/devtools/client/themes/images/firebug/command-frames.svg
new file mode 100644
index 000000000..257d036f4
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-frames.svg
@@ -0,0 +1,25 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" height="16" width="16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="1" stop-color="#f0f0f0"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#e1e8ff"/>
+      <stop offset="1" stop-color="#b9c9ff"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#505050"/>
+      <stop offset="1" stop-color="#787878"/>
+    </linearGradient>
+    <linearGradient gradientTransform="translate(.078 -1.018) scale(1.07692)" gradientUnits="userSpaceOnUse" y2="2.767" x2="1.624" y1="14.154" x1="13.01" id="d" xlink:href="#a"/>
+    <linearGradient gradientUnits="userSpaceOnUse" y2="12.503" x2="12.396" y1="3.285" x1="3.179" id="e" xlink:href="#b"/>
+    <linearGradient y2="12.503" x2="12.396" y1="3.285" x1="3.179" gradientUnits="userSpaceOnUse" id="f" xlink:href="#c"/>
+  </defs>
+  <rect ry="1" rx="1" y="1" x="1" height="14" width="14" fill="url(#d)"/>
+  <path d="M7 2h7v3H7zM2 2h4v12H2z" fill="url(#e)"/>
+  <path d="M7 6h7v8H7z" fill="url(#f)"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-measure.svg b/devtools/client/themes/images/firebug/command-measure.svg
new file mode 100644
index 000000000..92964c950
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-measure.svg
@@ -0,0 +1,26 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" height="16" width="16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#505424"/>
+      <stop offset="1" stop-color="#6c6f31"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#e8eace"/>
+      <stop offset="1" stop-color="#f5f6ea"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#484a2e"/>
+      <stop offset="1" stop-color="#61633d"/>
+    </linearGradient>
+    <linearGradient xlink:href="#a" id="d" x1="-.831" y1="11.595" x2="2.378" y2="1.336" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.2174 0 0 1 -11.66 -4.6)"/>
+    <linearGradient xlink:href="#b" id="e" x1="1.536" y1="14.334" x2="5.493" y2="1.678" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.2174 0 0 1 -11.66 -4.6)"/>
+    <linearGradient xlink:href="#c" id="f" x1="1.695" y1="14.28" x2="6.421" y2="1.672" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-90 3.4 8)"/>
+  </defs>
+  <g transform="translate(4.6 .6)">
+    <rect transform="rotate(-90)" ry=".5" rx=".5" y="-3.4" x="-10.2" height="13.6" width="5.6" fill="url(#d)" stroke="url(#e)" stroke-width=".4" stroke-linejoin="round"/>
+    <path d="M-2.1 10.4v-3m11 3v-3m-2.75 3V8.9M3.4 10.4v-3m-2.75 3V8.9" fill="none" stroke="url(#f)"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-noautohide.svg b/devtools/client/themes/images/firebug/command-noautohide.svg
new file mode 100644
index 000000000..cd6f4c98d
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-noautohide.svg
@@ -0,0 +1,47 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" height="16" width="16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#747254"/>
+      <stop offset="1" stop-color="#8b8965"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#e1e1d7"/>
+      <stop offset="1" stop-color="#f2f2ee"/>
+    </linearGradient>
+    <linearGradient gradientTransform="translate(-2.38 -2.38) scale(1.17241)" gradientUnits="userSpaceOnUse" y2="4.847" x2="2.94" y1="12.978" x1="13.037" id="g" xlink:href="#a"/>
+    <linearGradient gradientTransform="translate(-2.38 -2.38) scale(1.17241)" gradientUnits="userSpaceOnUse" y2="2.729" x2="4.832" y1="11.063" x1="14.997" id="h" xlink:href="#b"/>
+    <linearGradient gradientTransform="matrix(.64 0 0 .6988 .88 .987)" gradientUnits="userSpaceOnUse" xlink:href="#c" id="i" y2=".583" x2="6.34" y1="4.311" x1="8.637"/>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#c8c8c8"/>
+      <stop offset="1" stop-color="#dcdcdc"/>
+    </linearGradient>
+    <linearGradient gradientTransform="matrix(.64 0 0 .6988 .88 .987)" gradientUnits="userSpaceOnUse" xlink:href="#d" id="j" y2="1.392" x2="4.956" y1="5.078" x1="7.188"/>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#a0a0a0"/>
+      <stop offset="1" stop-color="#c8c8c8"/>
+    </linearGradient>
+    <linearGradient gradientTransform="matrix(.62152 0 0 .5895 1.028 -609.403)" gradientUnits="userSpaceOnUse" xlink:href="#c" id="k" y2="1040.666" x2="4.559" y1="1052.085" x1="11.377"/>
+    <linearGradient gradientTransform="matrix(.62152 0 0 .5895 1.028 -609.403)" gradientUnits="userSpaceOnUse" xlink:href="#d" id="l" y2="1041.923" x2="1.917" y1="1053.385" x1="8.842"/>
+    <linearGradient gradientTransform="matrix(.71429 0 0 .71492 .286 .276)" gradientUnits="userSpaceOnUse" xlink:href="#e" id="m" y2="7.825" x2="6.608" y1="12.498" x1="8.54"/>
+    <linearGradient id="e">
+      <stop offset="0" stop-color="#505050"/>
+      <stop offset="1" stop-color="#787878"/>
+    </linearGradient>
+    <linearGradient gradientTransform="matrix(.71429 0 0 .71492 .286 .276)" gradientUnits="userSpaceOnUse" xlink:href="#f" id="n" y2="7.414" x2="7.402" y1="12.116" x1="9.392"/>
+    <linearGradient id="f">
+      <stop offset="0" stop-color="#787878"/>
+      <stop offset="1" stop-color="#b4b4b4"/>
+    </linearGradient>
+  </defs>
+  <g stroke-linejoin="round">
+    <path d="M9.351.2l1.603 1.575.833.819h.84c.65 0 1.173.52 1.173 1.167v8.872c0 .646-.523 1.167-1.172 1.167H1.372C.722 13.8.2 13.28.2 12.633V3.76c0-.647.523-1.167 1.172-1.167h5.543l.834-.819L9.35.2z" fill="url(#g)" stroke="url(#h)" stroke-width=".4"/>
+    <g transform="matrix(.9821 0 0 .98213 5.107 5.107)">
+      <path d="M6 1.215a2.982 2.982 0 0 0-2.991 2.904c.114-.019.238-.045.357-.045h.938C4.386 3.194 5.1 2.421 6 2.421c.899 0 1.614.773 1.696 1.653h.938c.119 0 .243.026.357.045A2.982 2.982 0 0 0 6 1.215z" fill="url(#i)" stroke="url(#j)" stroke-width=".611"/>
+      <rect y="4.065" x="1.214" ry=".787" rx=".787" height="6.72" width="9.571" fill="url(#k)" stroke="url(#l)" stroke-width=".611"/>
+      <path d="M6 5.504A1.2 1.2 0 0 0 4.795 6.71c0 .562.375 1.023.893 1.162v1.475h.625V7.872c.517-.139.892-.6.892-1.162A1.2 1.2 0 0 0 6 5.504z" fill="url(#m)" stroke="url(#n)" stroke-width=".407"/>
+    </g>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-paintflashing.svg b/devtools/client/themes/images/firebug/command-paintflashing.svg
new file mode 100644
index 000000000..84d5741b3
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-paintflashing.svg
@@ -0,0 +1,38 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" height="16" width="16">
+  <defs>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#8c8c8c"/>
+      <stop offset="1" stop-color="#b4b4b4"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#544024"/>
+      <stop offset="1" stop-color="#8b6b3d"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#a0a0a0"/>
+      <stop offset="1" stop-color="#a0a0a0" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="e">
+      <stop offset="0" stop-color="#a0a0a0"/>
+      <stop offset="1" stop-color="#c8c8c8"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#382b18"/>
+      <stop offset="1" stop-color="#6f5631"/>
+    </linearGradient>
+    <linearGradient gradientUnits="userSpaceOnUse" y2="3.409" x2="6.735" y1="3.859" x1="9.123" id="f" xlink:href="#a"/>
+    <linearGradient gradientUnits="userSpaceOnUse" y2="8.347" x2="2.4" y1="9.586" x1="13.352" id="j" xlink:href="#a"/>
+    <linearGradient gradientUnits="userSpaceOnUse" y2="11.675" x2="7.974" y1="14.423" x1="7.974" id="l" xlink:href="#b" gradientTransform="translate(0 -.2)"/>
+    <linearGradient xlink:href="#c" id="g" x1="9.32" y1="7.243" x2="6.728" y2="6.716" gradientUnits="userSpaceOnUse"/>
+    <linearGradient xlink:href="#c" id="k" x1="12.451" y1="11.469" x2="1.56" y2="10.342" gradientUnits="userSpaceOnUse"/>
+    <linearGradient xlink:href="#d" id="i" x1="13.218" y1="13.627" x2="2.686" y2="13.627" gradientUnits="userSpaceOnUse"/>
+    <linearGradient xlink:href="#e" id="h" x1="12.607" y1="12.021" x2="3.321" y2="12.021" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path d="M8 1c-.828 0-1.5 1.343-1.5 3v3.5c0 .554.446 1 1 1h1c.554 0 1-.446 1-1V4c0-1.657-.672-3-1.5-3z" fill="url(#f)" stroke="url(#g)" stroke-width=".4" stroke-linejoin="round"/>
+  <rect width="11" height="5" x="2.5" y="10" rx=".5" ry=".5" fill="url(#h)" stroke="url(#i)" stroke-width=".4" stroke-linejoin="round"/>
+  <rect width="12" height="2" x="2" y="8" rx=".5" ry=".5" fill="url(#j)" stroke="url(#k)" stroke-width=".4" stroke-linejoin="round"/>
+  <path d="M11.5 10.8h1v4h-1zm-2 0h1v4h-1zm-2 0h1v4h-1zm-2 0h1v4h-1zm-2 0h1v4h-1z" fill="url(#l)"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-pick.svg b/devtools/client/themes/images/firebug/command-pick.svg
new file mode 100644
index 000000000..157460da3
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-pick.svg
@@ -0,0 +1,20 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#6f9fdf"/>
+      <stop offset="1" stop-color="#b8d0f1"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#133cb8"/>
+      <stop offset="1" stop-color="#7faae8"/>
+    </linearGradient>
+    <linearGradient x1="11.304" y1="9.268" x2="7.065" y2="4.197" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse"/>
+    <linearGradient x1="6.587" y1="7.594" x2="2.992" y2=".487" id="c" xlink:href="#b" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path d="M.5.813c-.273.04-.502.354-.5.687v5.625c0 .36.265.688.563.688h4.406v-1h-3.5a.52.52 0 0 1-.5-.5V2.218a.517.517 0 0 1 .437-.5h3.75c.227-.4.634-.711 1.094-.75.415-.031.84.134 1.125.437l.313.313h6.843c.262 0 .5.238.5.5v4.094a.52.52 0 0 1-.5.5h-1.969l.938 1h1.938c.297 0 .562-.328.562-.688V1.5c0-.36-.265-.688-.563-.688H.5z" fill="#fff"/>
+  <path d="M.5 0C.227.041-.002.355 0 .688v5.625C0 6.673.265 7 .563 7h4.406V6h-3.5a.52.52 0 0 1-.5-.5V1.406a.517.517 0 0 1 .437-.5h13.125c.262 0 .5.238.5.5V5.5a.52.52 0 0 1-.5.5h-2.75l.969 1h2.688c.297 0 .562-.328.562-.688V.688c0-.36-.265-.687-.563-.687H.5z" fill="url(#c)"/>
+  <path d="M6.375 2.375v9.906l2.094-.844 1.625 3.844 2.531-1.062-1.594-3.781 2.188-.876L9.813 5.97 6.374 2.375z" fill="url(#d)" stroke="#4673ce" stroke-linejoin="round"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-responsivemode.svg b/devtools/client/themes/images/firebug/command-responsivemode.svg
new file mode 100644
index 000000000..b292ffe7a
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-responsivemode.svg
@@ -0,0 +1,39 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" height="16" width="16">
+  <defs>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#141414"/>
+      <stop offset="1" stop-color="#3c3c3c"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#cdf0ff"/>
+      <stop offset="1" stop-color="#f5fcff"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#787878"/>
+      <stop offset="1" stop-color="#505050"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#282828"/>
+      <stop offset="1" stop-color="#505050"/>
+    </linearGradient>
+    <linearGradient gradientTransform="matrix(1.04615 0 0 1.06667 -.415 .667)" gradientUnits="userSpaceOnUse" y2="1.576" x2="3.337" y1="8.108" x1="14.078" id="e" xlink:href="#a"/>
+    <linearGradient gradientTransform="matrix(2 0 0 2 -13 -4)" gradientUnits="userSpaceOnUse" y2="4.752" x2="13.239" y1="5.261" x1="13.748" id="h" xlink:href="#b"/>
+    <linearGradient gradientTransform="translate(0 1)" gradientUnits="userSpaceOnUse" y2="1.854" x2="3.829" y1="8.432" x1="12.299" id="g" xlink:href="#c"/>
+    <linearGradient gradientTransform="translate(-.5 -.5)" gradientUnits="userSpaceOnUse" y2="5.946" x2=".987" y1="15.102" x1="5.989" id="i" xlink:href="#a"/>
+    <linearGradient gradientTransform="matrix(1.10989 0 0 .79278 -.4 .958)" gradientUnits="userSpaceOnUse" y2="10.774" x2="4.865" y1="10.774" x1="1.261" id="k" xlink:href="#c"/>
+    <linearGradient gradientTransform="matrix(1.5 0 0 1.5 -17.25 6)" gradientUnits="userSpaceOnUse" y2="4.752" x2="13.239" y1="5.261" x1="13.748" id="l" xlink:href="#b"/>
+    <linearGradient gradientTransform="matrix(.683 0 0 .6166 .985 2.273)" gradientUnits="userSpaceOnUse" y2="5.597" x2="2.826" y1="6.539" x1="3.079" id="m" xlink:href="#b"/>
+    <linearGradient xlink:href="#d" id="f" x1="13.677" y1="12.328" x2=".512" y2="4.058" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97143 0 0 .96 .257 .24)"/>
+    <linearGradient xlink:href="#d" id="j" x1="5.489" y1="14.602" x2=".487" y2="5.446" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <rect ry="1" rx="1" y="1.2" x="2.2" height="9.6" width="13.6" fill="url(#e)" stroke="url(#f)" stroke-width=".4" stroke-linejoin="round"/>
+  <rect ry=".5" rx=".5" y="2.5" x="3.5" height="7" width="9" fill="url(#g)"/>
+  <circle r="1" cy="6" cx="14" fill="url(#h)"/>
+  <rect ry="1" rx="1" y="5" height="10" width="6" fill="url(#i)" stroke="url(#j)" stroke-width=".4" stroke-linejoin="round"/>
+  <rect ry=".5" rx=".5" y="7" x="1" height="5" width="4" fill="url(#k)"/>
+  <circle r=".75" cy="13.5" cx="3" fill="url(#l)"/>
+  <rect ry=".5" rx=".5" y="5.75" x="2" height=".5" width="2" fill="url(#m)"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-rulers.svg b/devtools/client/themes/images/firebug/command-rulers.svg
new file mode 100644
index 000000000..0a7d4aaef
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-rulers.svg
@@ -0,0 +1,20 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" height="16" width="16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#e2e6ea"/>
+      <stop offset="1" stop-color="#f9fafb"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#323b46"/>
+      <stop offset="1" stop-color="#546374"/>
+    </linearGradient>
+    <linearGradient gradientUnits="userSpaceOnUse" y2=".822" x2="4.016" y1="13.198" x1="8.663" id="d" xlink:href="#a"/>
+    <linearGradient gradientUnits="userSpaceOnUse" y2="1.975" x2="2.064" y1="13.044" x1="6.113" id="c" xlink:href="#b"/>
+    <linearGradient gradientUnits="userSpaceOnUse" y2="1.511" x2="3.948" y1="13.163" x1="7.795" id="e" xlink:href="#a"/>
+  </defs>
+  <path d="M1.7 1.2c-.278 0-.5.222-.5.5v12.6c0 .278.222.5.5.5h3.6c.278 0 .5-.222.5-.5V5.8h8.5c.278 0 .5-.222.5-.5V1.7c0-.278-.222-.5-.5-.5H1.7z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linejoin="round"/>
+  <path d="M1 4.5h1.5M1 7.5h3m-3 3h1.5m-1.5 3h3M4.5 1v1.5m3-1.5v3m3-3v1.5m3-1.5v3" fill="none" stroke="url(#e)"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-scratchpad.svg b/devtools/client/themes/images/firebug/command-scratchpad.svg
new file mode 100644
index 000000000..a227f3c4b
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-scratchpad.svg
@@ -0,0 +1,38 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" height="16" width="16">
+  <defs>
+    <linearGradient id="e">
+      <stop offset="0" stop-color="#434f5d"/>
+      <stop offset="1" stop-color="#65788b"/>
+    </linearGradient>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#787878"/>
+      <stop offset="1" stop-color="#8c8c8c"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#8c8c8c"/>
+      <stop offset="1" stop-color="#a0a0a0"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#b6b38a"/>
+      <stop offset="1" stop-color="#d3d2bd"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#ecebe0"/>
+      <stop offset="1" stop-color="#fbfbf9" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient gradientTransform="translate(-1.018 -.726)" gradientUnits="userSpaceOnUse" y2="4.549" x2="4.08" y1="14.382" x1="13.934" id="f" xlink:href="#a"/>
+    <linearGradient gradientTransform="translate(-1.018 -.726)" gradientUnits="userSpaceOnUse" y2="4.836" x2="1.893" y1="16.614" x1="13.78" id="g" xlink:href="#b"/>
+    <linearGradient y2="2.41" x2="4.751" y1="4.023" x1="5.458" gradientTransform="translate(-1.018 -1.026)" gradientUnits="userSpaceOnUse" id="h" xlink:href="#c"/>
+    <linearGradient y2=".94" x2="4.252" y1="3.313" x1="5.323" gradientTransform="translate(0 -.3)" gradientUnits="userSpaceOnUse" id="i" xlink:href="#d"/>
+    <linearGradient gradientUnits="userSpaceOnUse" y2="9.29" x2="11.377" y1="9.29" x1="4.575" id="j" xlink:href="#e"/>
+  </defs>
+  <path style="marker:none" color="#000" overflow="visible" fill="url(#f)" stroke="url(#g)" stroke-linejoin="round" d="M2 2.75h12v12H2z"/>
+  <path style="marker:none" d="M4 .75c-.553 0-1 .672-1 1.5 0 .829.399 1.474 1 1.5.106.006.2-.08.2-.25 0-.168-.11-.25-.2-.25-.277 0-.5-.447-.5-1 0-.552.223-1 .5-1 .275 0 .5.448.5 1H5c0-.828-.448-1.5-1-1.5z" id="k" color="#000" overflow="visible" fill="url(#h)" stroke="url(#i)" stroke-width=".2" stroke-linejoin="round"/>
+  <path d="M4 11.45h7v1H4zm1-5.321h5v1H5zm1 2.66h6v1H6z" style="marker:none" color="#000" overflow="visible" fill="url(#j)"/>
+  <use height="100%" width="100%" transform="translate(2.667)" id="l" xlink:href="#k"/>
+  <use height="100%" width="100%" transform="translate(2.667)" id="m" xlink:href="#l"/>
+  <use height="100%" width="100%" transform="translate(2.667)" xlink:href="#m"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/command-screenshot.svg b/devtools/client/themes/images/firebug/command-screenshot.svg
new file mode 100644
index 000000000..9cc343e01
--- /dev/null
+++ b/devtools/client/themes/images/firebug/command-screenshot.svg
@@ -0,0 +1,39 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <linearGradient id="e">
+      <stop offset="0" stop-color="#65808b"/>
+      <stop offset="1" stop-color="#7c939c"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#43555d"/>
+      <stop offset="1" stop-color="#566a72"/>
+    </linearGradient>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#54a0ec"/>
+      <stop offset="1" stop-color="#99c5f7"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#f6fafe"/>
+      <stop offset="1" stop-color="#99c5f7"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#324046"/>
+      <stop offset="1" stop-color="#45555b"/>
+    </linearGradient>
+    <linearGradient xlink:href="#a" id="h" x1="13.661" y1="12.474" x2="2.358" y2="5.025" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97143 0 0 .96 .229 .612)"/>
+    <linearGradient xlink:href="#b" id="i" x1="16.505" y1="11.096" x2="2.974" y2="2.807" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.97143 0 0 .96 .229 .612)"/>
+    <linearGradient xlink:href="#b" id="k" x1="10.3" y1="11.02" x2="5.662" y2="6.382" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 .236)"/>
+    <linearGradient xlink:href="#a" id="j" x1="10.582" y1="9.815" x2="6.843" y2="6.172" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 .236)"/>
+    <radialGradient xlink:href="#c" id="l" cx="7.075" cy="7.944" fx="7.075" fy="7.944" r="2.5" gradientUnits="userSpaceOnUse" gradientTransform="rotate(45 9.338 9.078) scale(1.00392 1.2642)"/>
+    <linearGradient xlink:href="#d" id="m" x1="8.873" y1="11.096" x2="5.628" y2="7.85" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 .236)"/>
+    <linearGradient xlink:href="#a" id="g" x1="10.226" y1="3.728" x2="6.522" y2="2.07" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 .314)"/>
+    <linearGradient xlink:href="#e" id="f" x1="9.212" y1="4.437" x2="6.127" y2="3.047" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 .314)"/>
+  </defs>
+  <path d="M6.5 2.225c-.277 0-.641.14-.816.316L4.316 3.908c-.175.175-.093.317.184.317h7c.277 0 .359-.142.184-.317l-1.368-1.367c-.175-.175-.539-.316-.816-.316h-2z" fill="url(#f)" stroke="url(#g)" stroke-width=".4" stroke-linejoin="round"/>
+  <rect ry="1" rx="1" y="4.2" x="1.2" height="9.6" width="13.6" fill="url(#h)" stroke="url(#i)" stroke-width=".4" stroke-linejoin="round"/>
+  <circle r="3.5" cy="9" cx="8" fill="url(#j)" stroke="url(#k)" stroke-width=".4" stroke-linejoin="round"/>
+  <circle cx="8" cy="9" r="2.5" fill="url(#l)" stroke="url(#m)" stroke-width=".4" stroke-linejoin="round"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/commandline-icon.svg b/devtools/client/themes/images/firebug/commandline-icon.svg
new file mode 100644
index 000000000..7770f2b61
--- /dev/null
+++ b/devtools/client/themes/images/firebug/commandline-icon.svg
@@ -0,0 +1,26 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14">
+  <defs>
+    <style>
+      path {
+        opacity: 0.5;
+      }
+      path:target {
+        opacity: 1;
+      }
+    </style>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#234ccd"/>
+      <stop offset="1" stop-color="#5d7de3"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#1e3faa"/>
+      <stop offset="1" stop-color="#3a61de"/>
+    </linearGradient>
+    <linearGradient x1="2.002" y1="12.252" x2="-.099" y2="6.755" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.841 1034.646)"/>
+    <linearGradient x1="3.309" y1="11.177" x2="1.468" y2="6.456" id="c" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(5.841 1034.646)"/>
+  </defs>
+  <path id="focus" d="M6.841 1040.052l-.437.406 2.469 3.688-2.47 3.687.438.407 3.438-4.094z" fill="url(#c)" stroke="url(#d)" stroke-width=".4" stroke-linecap="round" stroke-linejoin="round" transform="translate(-1.341 -1037.146)"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/debugger-blackbox.svg b/devtools/client/themes/images/firebug/debugger-blackbox.svg
new file mode 100644
index 000000000..e36e5e2e4
--- /dev/null
+++ b/devtools/client/themes/images/firebug/debugger-blackbox.svg
@@ -0,0 +1,30 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#323232"/>
+      <stop offset="1" stop-color="#646464"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#b4b4b4"/>
+      <stop offset="1" stop-color="#dcdcdc"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#3c3c3c"/>
+      <stop offset="1" stop-color="#646464"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#505050"/>
+      <stop offset="1" stop-color="#8c8c8c"/>
+    </linearGradient>
+    <linearGradient gradientTransform="matrix(.97143 0 0 1.08571 .229 -1125.879)" xlink:href="#a" id="e" x1="10.803" y1="1047.39" x2="4.726" y2="1041.559" gradientUnits="userSpaceOnUse"/>
+    <linearGradient gradientTransform="matrix(.97143 0 0 1.08571 .229 -1125.879)" xlink:href="#b" id="f" x1="12.563" y1="1046.633" x2="5.974" y2="1040.229" gradientUnits="userSpaceOnUse"/>
+    <linearGradient gradientTransform="translate(-1.333 -1210.423) scale(1.16667)" xlink:href="#c" id="g" x1="9.698" y1="1046.429" x2="5.893" y2="1042.623" gradientUnits="userSpaceOnUse"/>
+    <linearGradient gradientTransform="translate(0 -1036.362)" xlink:href="#d" id="h" x1="9.023" y1="1045.897" x2="6.49" y2="1043.363" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path d="M14.8 8c0 1.085-3.044 3.8-6.8 3.8S1.2 9.085 1.2 8 4.244 4.2 8 4.2s6.8 2.715 6.8 3.8z" style="marker:none" color="#000" overflow="visible" fill="url(#e)" stroke="url(#f)" stroke-width=".4" stroke-linejoin="round"/>
+  <circle r="3.5" cy="8" cx="8" style="marker:none" color="#000" overflow="visible" fill="url(#g)"/>
+  <circle r="2" cy="8" cx="8" style="marker:none" color="#000" overflow="visible" fill="url(#h)"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/debugger-prettyprint.svg b/devtools/client/themes/images/firebug/debugger-prettyprint.svg
new file mode 100644
index 000000000..b720b39b0
--- /dev/null
+++ b/devtools/client/themes/images/firebug/debugger-prettyprint.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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#285a8c"/>
+      <stop offset="1" stop-color="#508cc8"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#1c3b5c"/>
+      <stop offset="1" stop-color="#285078"/>
+    </linearGradient>
+    <linearGradient x1="17.286" y1="1046.293" x2="-18.065" y2="1003.191" id="c" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1 0 0 1 28.42 0)"/>
+    <linearGradient x1="12.826" y1="1050.761" x2="-24.272" y2="1006.022" id="d" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1 0 0 1 28.42 0)"/>
+  </defs>
+  <path d="M21.734 1045.673v5.125h-1.816c-4.864 0-9.028-.723-10.688-2.168-1.64-1.445-2.46-4.326-2.46-8.643v-6.098c0-2.95-.528-4.99-1.583-6.123-1.054-1.133-2.968-1.7-5.742-1.7h-1.787v-4.189h1.787c2.793 0 4.707-.556 5.742-1.67 1.055-1.133 1.582-3.154 1.582-6.064v-6.127c0-4.317.82-7.188 2.461-8.613 1.66-1.446 5.824-2.168 10.688-2.168h1.816v5.093h-1.992c-2.754 0-4.55.43-5.39 1.29-.84.859-1.26 1.761-1.26 4.515v6.361c0 3.067-1.352 5.293-2.25 6.68-.88 1.387-1.49 2.324-3.64 2.813 2.169.527 2.79 1.484 3.669 2.87.879 1.387 2.22 3.604 2.22 6.65v6.363c0 2.754.42 3.654 1.26 4.514.84.859 2.96 1.289 5.391 1.289zm12.579 0v5.125h1.816c4.864 0 9.028-.723 10.688-2.168 1.64-1.445 2.46-4.326 2.46-8.643v-6.098c0-2.95.528-4.99 1.583-6.123 1.054-1.133 2.968-1.7 5.742-1.7h1.787v-4.189h-1.787c-2.793 0-4.707-.556-5.742-1.67-1.055-1.133-1.582-3.154-1.582-6.064v-6.127c0-4.317-.82-7.188-2.461-8.613-1.66-1.446-5.824-2.168-10.688-2.168h-1.816v5.093h1.992c2.754 0 4.55.43 5.39 1.29.84.859 1.26 1.761 1.26 4.515v6.361c0 3.067 1.352 5.293 2.25 6.68.88 1.387 1.49 2.324 3.64 2.813-2.169.527-2.79 1.484-3.669 2.87-.879 1.387-2.22 3.604-2.22 6.65v6.363c0 2.754-.42 3.654-1.26 4.514-.84.859-2.96 1.289-5.391 1.289z" style="-inkscape-font-specification:Fixedsys" font-size="60" fill="url(#c)" stroke="url(#d)" font-family="Fixedsys" transform="matrix(-.22157 0 0 .22103 14.138 -218.338)" font-weight="400" letter-spacing="0" word-spacing="0" stroke-width="1.807" stroke-linejoin="round"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/debugger-step-in.svg b/devtools/client/themes/images/firebug/debugger-step-in.svg
new file mode 100644
index 000000000..e9db77159
--- /dev/null
+++ b/devtools/client/themes/images/firebug/debugger-step-in.svg
@@ -0,0 +1,26 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#dd8506"/>
+      <stop offset="1" stop-color="#f4a24b"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#e68507"/>
+      <stop offset="1" stop-color="#f4b65f"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#f3a952"/>
+      <stop offset="1" stop-color="#fadbba"/>
+    </linearGradient>
+    <linearGradient x1="9.06" y1="13.305" x2="9.06" y2="1.704" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse"/>
+    <linearGradient x1="3.865" y1="14.919" x2="3.865" y2="13.049" id="f" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.9974 0 0 1.0026 -1.01 -.02)"/>
+    <linearGradient x1="14.005" y1="14.902" x2="14.005" y2="13.07" id="g" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.9974 0 0 1.0026 -.959 -.02)"/>
+    <linearGradient x1="10.576" y1="11.641" x2=".835" y2="1.901" id="e" xlink:href="#c" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path d="M.534 2.46h3.864C7.45 2.46 9.5 4.288 9.5 7.028v3.565h1.961L8.076 13.5l-3.382-2.914h1.899V7.74c0-1.554-.866-2.492-2.966-2.492H.534z" fill="url(#d)" stroke="url(#e)" stroke-linejoin="round"/>
+  <path fill="url(#f)" d="M1 13h4v2H1z"/>
+  <path fill="url(#g)" d="M11 13h4v2h-4z"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/debugger-step-out.svg b/devtools/client/themes/images/firebug/debugger-step-out.svg
new file mode 100644
index 000000000..017995859
--- /dev/null
+++ b/devtools/client/themes/images/firebug/debugger-step-out.svg
@@ -0,0 +1,26 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#dd8506"/>
+      <stop offset="1" stop-color="#f4a24b"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#e68507"/>
+      <stop offset="1" stop-color="#f4b65f"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#f3a952"/>
+      <stop offset="1" stop-color="#fadbba"/>
+    </linearGradient>
+    <linearGradient x1="-.161" y1="7.678" x2="12.316" y2="7.678" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-90 7.756 5.205)"/>
+    <linearGradient x1="14.005" y1="14.902" x2="14.005" y2="13.07" id="g" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.9974 0 0 1.0026 -.959 -.02)"/>
+    <linearGradient x1="3.865" y1="14.919" x2="3.865" y2="13.049" id="f" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.9974 0 0 1.0026 -1.01 -.02)"/>
+    <linearGradient x1="11.034" y1="9.145" x2="6.593" y2="4.703" id="e" xlink:href="#c" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -1.116)"/>
+  </defs>
+  <path d="M6.486 12.5V7.009c0-3.051 1.555-4.548 4.295-4.548h1.73V.5l2.907 3.385-2.914 3.382V5.368H11.7c-1.554 0-2.222.518-2.222 2.618V12.5z" fill="url(#d)" stroke="url(#e)" stroke-linejoin="round"/>
+  <path fill="url(#f)" d="M1 13h4v2H1z"/>
+  <path fill="url(#g)" d="M11 13h4v2h-4z"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/debugger-step-over.svg b/devtools/client/themes/images/firebug/debugger-step-over.svg
new file mode 100644
index 000000000..79960cb10
--- /dev/null
+++ b/devtools/client/themes/images/firebug/debugger-step-over.svg
@@ -0,0 +1,24 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#dd8506"/>
+      <stop offset="1" stop-color="#f4a24b"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#e68507"/>
+      <stop offset="1" stop-color="#f4b65f"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#f3a952"/>
+      <stop offset="1" stop-color="#fadbba"/>
+    </linearGradient>
+    <linearGradient x1="9.06" y1="13.305" x2="9.06" y2="1.704" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="translate(3)"/>
+    <linearGradient x1="3.865" y1="14.919" x2="3.865" y2="13.049" id="f" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(3)"/>
+    <linearGradient x1="12.911" y1="12.657" x2="2.554" y2="2.3" id="e" xlink:href="#c" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path d="M4.698 2.46h3.7c3.052 0 5.102 1.828 5.102 4.568v3.565h1.962L12.077 13.5l-3.383-2.914h1.9V7.74c0-1.793-.486-2.454-2.047-2.492-.791-.02-1.842 0-2.647 0-1.821 0-2.368.81-2.368 2.488V12.5H.522S.518 9.04.518 7.03c0-2.72 2.209-4.57 4.179-4.57z" fill="url(#d)" stroke="url(#e)" stroke-linejoin="round"/>
+  <path fill="url(#f)" d="M5.016 12.987h4.01v1.995h-4.01z"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/debugger-toggleBreakpoints.svg b/devtools/client/themes/images/firebug/debugger-toggleBreakpoints.svg
new file mode 100644
index 000000000..d85ab6391
--- /dev/null
+++ b/devtools/client/themes/images/firebug/debugger-toggleBreakpoints.svg
@@ -0,0 +1,13 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" height="16" width="16">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#c80000"/>
+      <stop offset="1" stop-color="#780000"/>
+    </linearGradient>
+    <radialGradient gradientUnits="userSpaceOnUse" xlink:href="#a" id="b" fy="4.665" fx="4.8" r="5.59" cy="4.665" cx="4.8"/>
+  </defs>
+  <path transform="translate(1.599 1.565) scale(1.07342)" d="M11.553 5.995a5.59 5.59 0 1 1-11.179 0 5.59 5.59 0 1 1 11.18 0z" fill="url(#b)"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/disable.svg b/devtools/client/themes/images/firebug/disable.svg
new file mode 100644
index 000000000..d1f178099
--- /dev/null
+++ b/devtools/client/themes/images/firebug/disable.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">
+  <path d="M5.563 0A6 6 0 0 0 0 6a6 6 0 0 0 12 0 6 6 0 0 0-6.438-6zm.156 2a4 4 0 0 1 2.25.5L2.5 7.97A4 4 0 0 1 2 6a4 4 0 0 1 3.72-4zm3.685 1.906A4 4 0 0 1 10 6a4 4 0 0 1-6.094 3.406l5.5-5.5z" fill="red"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/dock-bottom.svg b/devtools/client/themes/images/firebug/dock-bottom.svg
new file mode 100644
index 000000000..2e7efa341
--- /dev/null
+++ b/devtools/client/themes/images/firebug/dock-bottom.svg
@@ -0,0 +1,25 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#f2451d"/>
+      <stop offset=".101" stop-color="#f01428" stop-opacity=".8"/>
+      <stop offset=".897" stop-color="#de8493"/>
+      <stop offset="1" stop-color="#efc3cc"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#520e0d"/>
+      <stop offset="1" stop-color="#c4181d"/>
+    </linearGradient>
+    <linearGradient x1="7.231" y1="1051.323" x2="7.231" y2="1037.401" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -1036.362)"/>
+    <linearGradient x1="8.769" y1="1049.931" x2="8.769" y2="1038.668" id="c" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -1036.362)"/>
+    <filter height="1.48" y="-.24" width="1.48" x="-.24" id="e" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation=".8"/>
+    </filter>
+  </defs>
+  <rect y="1.5" x="1.5" ry="2" rx="2" height="13" width="13" fill="url(#c)" stroke="url(#d)" stroke-linejoin="round"/>
+  <path style="marker:none" d="M4.5 5v8h8V5zm1 1h6v4h-6z" color="#000" overflow="visible" opacity=".4" filter="url(#e)"/>
+  <path style="marker:none" d="M4 4v8h8V4zm1 1h6v4H5z" color="#000" overflow="visible" fill="#fff"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/dock-side.svg b/devtools/client/themes/images/firebug/dock-side.svg
new file mode 100644
index 000000000..e275eeaeb
--- /dev/null
+++ b/devtools/client/themes/images/firebug/dock-side.svg
@@ -0,0 +1,25 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#f2451d"/>
+      <stop offset=".101" stop-color="#f01428" stop-opacity=".8"/>
+      <stop offset=".897" stop-color="#de8493"/>
+      <stop offset="1" stop-color="#efc3cc"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#520e0d"/>
+      <stop offset="1" stop-color="#c4181d"/>
+    </linearGradient>
+    <linearGradient x1="7.231" y1="1051.323" x2="7.231" y2="1037.401" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -1036.362)"/>
+    <linearGradient x1="8.769" y1="1049.931" x2="8.769" y2="1038.668" id="c" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 -1036.362)"/>
+    <filter height="1.48" y="-.24" width="1.48" x="-.24" id="e" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation=".8"/>
+    </filter>
+  </defs>
+  <rect y="1.5" x="1.5" ry="2" rx="2" height="13" width="13" fill="url(#c)" stroke="url(#d)" stroke-linejoin="round"/>
+  <path style="marker:none" d="M4.5 5v8h8V5zm1 1h6v4h-6z" transform="rotate(-90 8.5 9)" color="#000" overflow="visible" opacity=".4" filter="url(#e)"/>
+  <path style="marker:none" d="M4 12h8V4H4zm1-1V5h4v6z" color="#000" overflow="visible" fill="#fff"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/dock-undock.svg b/devtools/client/themes/images/firebug/dock-undock.svg
new file mode 100644
index 000000000..7d24ef4b6
--- /dev/null
+++ b/devtools/client/themes/images/firebug/dock-undock.svg
@@ -0,0 +1,27 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#f2451d"/>
+      <stop offset=".101" stop-color="#f01428" stop-opacity=".8"/>
+      <stop offset=".897" stop-color="#de8493"/>
+      <stop offset="1" stop-color="#efc3cc"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#520e0d"/>
+      <stop offset="1" stop-color="#c4181d"/>
+    </linearGradient>
+    <linearGradient x1="7.231" y1="1051.323" x2="7.231" y2="1037.401" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse"/>
+    <linearGradient x1="8.769" y1="1049.931" x2="8.769" y2="1038.668" id="c" xlink:href="#b" gradientUnits="userSpaceOnUse"/>
+    <filter x="-.24" y="-.24" width="1.48" height="1.48" color-interpolation-filters="sRGB" id="e">
+      <feGaussianBlur stdDeviation=".8"/>
+    </filter>
+  </defs>
+  <g transform="translate(0 -1036.362)">
+    <rect width="13" height="13" rx="2" ry="2" x="1.5" y="1037.862" fill="url(#c)" stroke="url(#d)" stroke-linejoin="round"/>
+    <path d="M6.5 1041.362v2h-2v6h6v-2h2v-6h-6zm1 1h4v4h-1v-3h-3v-1zm-2 2h4v4h-4v-4z" opacity=".4" filter="url(#e)"/>
+    <path d="M6 1040.362v2H4v6h6v-2h2v-6H6zm1 1h4v4h-1v-3H7v-1zm-2 2h4v4H5v-4z" fill="#fff"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/firebug/moz.build b/devtools/client/themes/images/firebug/moz.build
new file mode 100644
index 000000000..1516b4030
--- /dev/null
+++ b/devtools/client/themes/images/firebug/moz.build
@@ -0,0 +1,11 @@
+# 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(
+    'read-only.svg',
+    'spinner.png',
+    'twisty-closed-firebug.svg',
+    'twisty-open-firebug.svg',
+)
diff --git a/devtools/client/themes/images/firebug/pane-collapse.svg b/devtools/client/themes/images/firebug/pane-collapse.svg
new file mode 100644
index 000000000..7e4f00781
--- /dev/null
+++ b/devtools/client/themes/images/firebug/pane-collapse.svg
@@ -0,0 +1,29 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#fff" stop-opacity=".196"/>
+      <stop offset="1" stop-color="#fff" stop-opacity=".784"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#353593"/>
+      <stop offset="1" stop-color="#7373cd"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#2a2a76"/>
+      <stop offset="1" stop-color="#5656c2"/>
+    </linearGradient>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#aabccf"/>
+      <stop offset="1" stop-color="#c5d2df"/>
+    </linearGradient>
+    <linearGradient x1="9.29" y1="6.369" x2="5.581" y2="3.673" id="g" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.53813 0 0 .74017 3.298 3.873)"/>
+    <linearGradient x1="7.02" y1="7.949" x2="2.721" y2="4.824" id="h" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.53813 0 0 .74017 3.298 3.873)"/>
+    <linearGradient x1="14.692" y1="1049.087" x2="5.246" y2="1039.64" id="e" xlink:href="#c" gradientUnits="userSpaceOnUse" gradientTransform="translate(-1.167 -949.332) scale(.91667)"/>
+    <linearGradient x1="13.658" y1="1050.509" x2="3.64" y2="1040.492" id="f" xlink:href="#d" gradientUnits="userSpaceOnUse" gradientTransform="translate(-2 -1036.362)"/>
+  </defs>
+  <path fill="url(#e)" stroke="url(#f)" d="M2.5 2.5h11v11h-11z"/>
+  <path d="M9.7 8l-3.4 2.7V5.3z" fill="url(#g)" stroke="url(#h)" stroke-width=".6" stroke-linejoin="round"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/pane-expand.svg b/devtools/client/themes/images/firebug/pane-expand.svg
new file mode 100644
index 000000000..c4857a065
--- /dev/null
+++ b/devtools/client/themes/images/firebug/pane-expand.svg
@@ -0,0 +1,29 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#353593"/>
+      <stop offset="1" stop-color="#7373cd"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#2a2a76"/>
+      <stop offset="1" stop-color="#5656c2"/>
+    </linearGradient>
+    <linearGradient x1="11.709" y1="6.295" x2="8.675" y2="4.089" id="g" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.53813 0 0 .74017 3.298 3.873)"/>
+    <linearGradient x1="11.445" y1="8.382" x2="7.061" y2="5.195" id="h" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.53813 0 0 .74017 3.298 3.873)"/>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#fff" stop-opacity=".196"/>
+      <stop offset="1" stop-color="#fff" stop-opacity=".784"/>
+    </linearGradient>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#aabccf"/>
+      <stop offset="1" stop-color="#c5d2df"/>
+    </linearGradient>
+    <linearGradient x1="14.692" y1="1049.087" x2="5.246" y2="1039.64" id="e" xlink:href="#c" gradientUnits="userSpaceOnUse" gradientTransform="translate(-1.167 -949.332) scale(.91667)"/>
+    <linearGradient x1="13.658" y1="1050.509" x2="3.64" y2="1040.492" id="f" xlink:href="#d" gradientUnits="userSpaceOnUse" gradientTransform="translate(-2 -1036.362)"/>
+  </defs>
+  <path fill="url(#e)" stroke="url(#f)" d="M2.5 2.5h11v11h-11z"/>
+  <path d="M6.3 8l3.4 2.7V5.3z" fill="url(#g)" stroke="url(#h)" stroke-width=".6" stroke-linejoin="round"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/pause.svg b/devtools/client/themes/images/firebug/pause.svg
new file mode 100644
index 000000000..8763c376d
--- /dev/null
+++ b/devtools/client/themes/images/firebug/pause.svg
@@ -0,0 +1,31 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#dd8506"/>
+      <stop offset="1" stop-color="#f9c06e" stop-opacity=".988"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#f5a742"/>
+      <stop offset="1" stop-color="#f9cb8a"/>
+    </linearGradient>
+    <linearGradient x1="4.779" y1="1048.788" x2="3.117" y2="1039.853" id="e" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.993 0 0 .998 .028 2.025)"/>
+    <linearGradient x1="5.527" y1="1049.91" x2="2.514" y2="1038.877" id="f" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.993 0 0 .998 .028 2.025)"/>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#f5a742"/>
+      <stop offset="1" stop-color="#f9cb8a"/>
+    </linearGradient>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#dd8506"/>
+      <stop offset="1" stop-color="#f9c06e" stop-opacity=".988"/>
+    </linearGradient>
+    <linearGradient x1="4.779" y1="1048.788" x2="3.117" y2="1039.853" id="g" xlink:href="#c" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.993 0 0 .998 7.028 2.025)"/>
+    <linearGradient x1="5.527" y1="1049.91" x2="2.514" y2="1038.877" id="h" xlink:href="#d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.993 0 0 .998 7.028 2.025)"/>
+  </defs>
+  <g stroke-linejoin="round">
+    <path fill="url(#e)" stroke="url(#f)" d="M2.5 1038.862h3v11h-3z" transform="translate(0 -1036.362)"/>
+    <path fill="url(#g)" stroke="url(#h)" d="M9.5 1038.862h3v11h-3z" transform="translate(0 -1036.362)"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/firebug/play.svg b/devtools/client/themes/images/firebug/play.svg
new file mode 100644
index 000000000..7762ed8e9
--- /dev/null
+++ b/devtools/client/themes/images/firebug/play.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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#2959b8"/>
+      <stop offset="1" stop-color="#83ace8"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#5c87d0"/>
+      <stop offset="1" stop-color="#abc7ed"/>
+    </linearGradient>
+    <linearGradient x1="1.472" y1="-4.098" x2="1.472" y2="6.772" id="c" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.65609 0 0 -1.01925 4.494 9.401)"/>
+    <linearGradient x1="10.18" y1="8.767" x2="3.926" y2="2.99" id="d" xlink:href="#b" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path d="M11.788 8L4.5 1.204v13.592z" fill="url(#c)" stroke="url(#d)" stroke-linejoin="round"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/read-only.svg b/devtools/client/themes/images/firebug/read-only.svg
new file mode 100644
index 000000000..7521a093c
--- /dev/null
+++ b/devtools/client/themes/images/firebug/read-only.svg
@@ -0,0 +1,34 @@
+<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
+  <defs>
+    <linearGradient id="d">
+      <stop offset="0" stop-color="#787878"/>
+      <stop offset="1" stop-color="#b4b4b4"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0" stop-color="#505050"/>
+      <stop offset="1" stop-color="#787878"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#c8c8c8"/>
+      <stop offset="1" stop-color="#dcdcdc"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#a0a0a0"/>
+      <stop offset="1" stop-color="#c8c8c8"/>
+    </linearGradient>
+    <linearGradient x1="8.637" y1="4.311" x2="6.34" y2=".583" id="e" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.64 0 0 .6988 .88 .987)"/>
+    <linearGradient x1="7.188" y1="5.078" x2="4.956" y2="1.392" id="f" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.64 0 0 .6988 .88 .987)"/>
+    <linearGradient x1="11.377" y1="1052.085" x2="4.559" y2="1040.666" id="g" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.62152 0 0 .5895 1.028 -609.403)"/>
+    <linearGradient x1="8.842" y1="1053.385" x2="1.917" y2="1041.923" id="h" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.62152 0 0 .5895 1.028 -609.403)"/>
+    <linearGradient x1="8.54" y1="12.498" x2="6.608" y2="7.825" id="i" xlink:href="#c" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.71429 0 0 .71492 .286 .276)"/>
+    <linearGradient x1="9.392" y1="12.116" x2="7.402" y2="7.414" id="j" xlink:href="#d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.71429 0 0 .71492 .286 .276)"/>
+  </defs>
+  <g transform="matrix(1.19102 0 0 1.19106 -1.146 -1.146)" stroke-linejoin="round">
+    <path d="M6 1.215a2.982 2.982 0 0 0-2.991 2.904c.114-.019.238-.045.357-.045h.938C4.386 3.194 5.1 2.421 6 2.421c.899 0 1.614.773 1.696 1.653h.938c.119 0 .243.026.357.045A2.982 2.982 0 0 0 6 1.215z" fill="url(#e)" stroke="url(#f)" stroke-width=".504"/>
+    <rect width="9.571" height="6.72" rx="1.679" ry="1.679" x="1.214" y="4.065" fill="url(#g)" stroke="url(#h)" stroke-width=".504"/>
+    <path d="M6 5.504A1.2 1.2 0 0 0 4.795 6.71c0 .562.375 1.023.893 1.162v1.475h.625V7.872c.517-.139.892-.6.892-1.162A1.2 1.2 0 0 0 6 5.504z" fill="url(#i)" stroke="url(#j)" stroke-width=".336"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/firebug/rewind.svg b/devtools/client/themes/images/firebug/rewind.svg
new file mode 100644
index 000000000..88e7bb9aa
--- /dev/null
+++ b/devtools/client/themes/images/firebug/rewind.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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#2959b8"/>
+      <stop offset="1" stop-color="#83ace8"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#5c87d0"/>
+      <stop offset="1" stop-color="#abc7ed"/>
+    </linearGradient>
+    <linearGradient x1="1.472" y1="-4.098" x2="1.472" y2="6.772" id="c" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.65609 0 0 -1.01925 4.494 9.401)"/>
+    <linearGradient x1="10.18" y1="8.767" x2="3.926" y2="2.99" id="d" xlink:href="#b" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path d="M11.788 8L4.5 1.204v13.592z" transform="matrix(-1 0 0 1 16 0)" fill="url(#c)" stroke="url(#d)" stroke-linejoin="round"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/spinner.png b/devtools/client/themes/images/firebug/spinner.png
new file mode 100644
index 000000000..eec57a809
--- /dev/null
+++ b/devtools/client/themes/images/firebug/spinner.png
diff --git a/devtools/client/themes/images/firebug/tool-debugger-paused.svg b/devtools/client/themes/images/firebug/tool-debugger-paused.svg
new file mode 100644
index 000000000..67e5b3f1b
--- /dev/null
+++ b/devtools/client/themes/images/firebug/tool-debugger-paused.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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="12">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#b4aa00"/>
+      <stop offset=".659" stop-color="#f5e600"/>
+      <stop offset="1" stop-color="#f5e600"/>
+    </linearGradient>
+    <linearGradient x1="1.256" y1="6.226" x2=".157" y2=".942" id="b" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.1625 0 0 1.2744 1.663 1040.82)"/>
+  </defs>
+  <path d="M8.553 1046.88l-2.742 1.735c-4.951 3.273-5.215 3.09-5.215.035v-6.845c0-2.706.26-2.927 5.215.208l2.593 1.641c2.642 1.553 2.642 1.648.149 3.226z" fill="url(#b)" stroke-width="1.217" stroke-linejoin="round" transform="matrix(1 0 0 .95762 0 -995.06)" stroke="#888000"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/tool-options.svg b/devtools/client/themes/images/firebug/tool-options.svg
new file mode 100644
index 000000000..4fee4fc40
--- /dev/null
+++ b/devtools/client/themes/images/firebug/tool-options.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" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#464f5a"/>
+      <stop offset="1" stop-color="#7e8b9a"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#6a7786"/>
+      <stop offset="1" stop-color="#abb3bd"/>
+    </linearGradient>
+    <linearGradient xlink:href="#a" id="c" x1="13.108" y1="13.135" x2="2.763" y2="2.791" gradientUnits="userSpaceOnUse" gradientTransform="translate(.306 1036.661) scale(.9618)"/>
+    <linearGradient xlink:href="#b" id="d" x1="14.815" y1="11.602" x2="4.34" y2="1.127" gradientUnits="userSpaceOnUse" gradientTransform="translate(.306 1036.661) scale(.9618)"/>
+  </defs>
+  <path style="marker:none" d="M7.23 1036.661c-.426 0-.665.445-.768.962l-.25 1.25a5.77 5.77 0 0 0-.825.345l-1.063-.71c-.477-.205-.924-.437-1.225-.135l-1.088 1.087c-.301.302-.157.786.136 1.225l.706 1.062a5.77 5.77 0 0 0-.333.824l-1.258.252c-.482.193-.962.344-.962.77v1.538c0 .427.445.665.962.769l1.258.252a5.77 5.77 0 0 0 .34.815l-.713 1.073c-.205.477-.437.92-.136 1.223l1.088 1.089c.301.301.786.155 1.225-.137l1.069-.712a5.77 5.77 0 0 0 .815.33l.254 1.268c.192.482.342.962.768.962h1.54c.426 0 .665-.445.768-.962l.254-1.264a5.77 5.77 0 0 0 .81-.338l1.074.716c.477.204.924.438 1.225.137l1.088-1.09c.301-.301.157-.784-.136-1.222l-.71-1.067a5.77 5.77 0 0 0 .333-.821l1.262-.252c.482-.193.962-.342.962-.769v-1.538c0-.426-.445-.667-.962-.77l-1.253-.252a5.77 5.77 0 0 0-.342-.819l.71-1.067c.205-.477.437-.923.136-1.225l-1.088-1.087c-.301-.302-.786-.158-1.225.135l-1.057.706a5.77 5.77 0 0 0-.829-.336l-.252-1.255c-.192-.482-.342-.962-.768-.962H7.23zm.77 4.81a2.885 2.885 0 0 1 2.885 2.885A2.885 2.885 0 0 1 8 1047.24a2.885 2.885 0 0 1-2.885-2.885A2.885 2.885 0 0 1 8 1041.47z" color="#000" overflow="visible" fill="url(#c)" stroke="url(#d)" stroke-width=".6" stroke-linejoin="round" transform="translate(0 -1036.362)"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/twisty-closed-firebug.svg b/devtools/client/themes/images/firebug/twisty-closed-firebug.svg
new file mode 100644
index 000000000..a3cfc324e
--- /dev/null
+++ b/devtools/client/themes/images/firebug/twisty-closed-firebug.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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="11">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#c3baaa"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+    <linearGradient x1="6.053" y1="7.093" x2="2.888" y2="1.8" id="b" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="translate(.885 .885) scale(1.02564)"/>
+  </defs>
+  <rect width="8" height="8" rx="1" ry="1" x="1.5" y="1.5" fill="url(#b)" stroke="#7898b5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M5 3v2H3v1h2v2h1V6h2V5H6V3H5z"/>
+</svg>
diff --git a/devtools/client/themes/images/firebug/twisty-open-firebug.svg b/devtools/client/themes/images/firebug/twisty-open-firebug.svg
new file mode 100644
index 000000000..e20d7f6e0
--- /dev/null
+++ b/devtools/client/themes/images/firebug/twisty-open-firebug.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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="11" height="11">
+  <defs>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#c3baaa"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+    <linearGradient x1="6.053" y1="7.093" x2="2.888" y2="1.8" id="b" xlink:href="#a" gradientUnits="userSpaceOnUse" gradientTransform="translate(.885 .885) scale(1.02564)"/>
+  </defs>
+  <rect width="8" height="8" rx="1" ry="1" x="1.5" y="1.5" fill="url(#b)" stroke="#7898b5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M3 5h5v1H3z"/>
+</svg>
diff --git a/devtools/client/themes/images/geometry-editor.svg b/devtools/client/themes/images/geometry-editor.svg
new file mode 100644
index 000000000..b766740cd
--- /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="#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 000000000..a57a5af23
--- /dev/null
+++ b/devtools/client/themes/images/globe.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-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">
+  <circle fill="#a6a6a6" cx="8" cy="8" r="7" />
+  <path transform="translate(1 1)" fill="#fff" d="M5.31617536,1.74095137 C5.29841561,1.73995137 5.27868256,1.74095137 5.26190947,1.74795137 C5.25796286,1.74995137 5.2530296,1.75395137 5.24908299,1.75895137 C5.2550029,1.75895137 5.26190947,1.75895137 5.26684273,1.75795137 C5.28460248,1.75395137 5.29841561,1.74195137 5.31617536,1.74095137 L5.31617536,1.74095137 Z M5.33886837,2.59995137 C5.36156138,2.57095137 5.30729549,2.54695137 5.27670926,2.54895137 C5.28460248,2.51395137 5.32900184,2.49595137 5.31716201,2.45195137 C5.30630884,2.40595137 5.25105629,2.41495137 5.22145672,2.43995137 C5.1948171,2.46295137 5.18100396,2.50295137 5.15831095,2.52995137 C5.14548447,2.54495137 5.12180481,2.54995137 5.11292494,2.56795137 C5.10503172,2.58495137 5.11489824,2.61395137 5.11391159,2.63295137 C5.15041773,2.63795137 5.18889718,2.62695137 5.2155368,2.60095137 L5.23329655,2.59295137 C5.22934994,2.59595137 5.22737663,2.60295137 5.22540333,2.60695137 C5.24316307,2.62895137 5.32209528,2.62295137 5.33886837,2.59995137 L5.33886837,2.59995137 Z M5.37636117,1.37295137 C5.37438786,1.42695137 5.42668044,1.43295137 5.46515989,1.45395137 C5.45332006,1.48495137 5.410894,1.48395137 5.39116095,1.50895137 C5.36748129,1.53995137 5.410894,1.56695137 5.43260036,1.58095137 C5.47502642,1.60695137 5.45134676,1.63695137 5.44345354,1.67395137 C5.43161371,1.72595137 5.54310544,1.71195137 5.56777176,1.71095137 C5.61019782,1.70895137 5.67729019,1.71595137 5.71774294,1.69595137 C5.76115565,1.67195137 5.78384866,1.61895137 5.82923468,1.59295137 C5.86672748,1.57095137 5.92000671,1.55895137 5.96144612,1.57395137 C6.00485883,1.58895137 5.99992557,1.64495137 6.03544506,1.66895137 C6.07688447,1.69795137 6.12227048,1.70695137 6.15778997,1.66395137 C6.18048298,1.63695137 6.23080226,1.60295137 6.23277557,1.57395137 C6.23672218,1.52295137 6.25152196,1.48295137 6.30776116,1.47195137 C6.35314718,1.46295137 6.34328065,1.50695137 6.37485353,1.51495137 C6.44490586,1.53295137 6.47845205,1.31895137 6.55442429,1.38195137 C6.57218404,1.39695137 6.5771173,1.45495137 6.60770353,1.44995137 C6.63927641,1.44495137 6.64026306,1.39895137 6.67380925,1.39795137 C6.68466243,1.42895137 6.61559675,1.46695137 6.60671688,1.50095137 C6.64914294,1.46595137 6.66986264,1.47095137 6.71820861,1.46595137 C6.7310351,1.49895137 6.63631645,1.55295137 6.61165014,1.55795137 C6.5771173,1.56695137 6.5563976,1.54695137 6.52975798,1.56595137 C6.50903828,1.57995137 6.48042535,1.57895137 6.45575904,1.58095137 C6.4212262,1.58495137 6.35610713,1.63095137 6.35709379,1.66895137 C6.35709379,1.68395137 6.36893362,1.71795137 6.35610713,1.72995137 C6.3442673,1.74295137 6.31565438,1.73095137 6.31269442,1.71795137 C6.28309485,1.76195137 6.2446154,1.68495137 6.21994908,1.74695137 C6.25941518,1.75695137 6.29592133,1.79495137 6.34032069,1.80595137 C6.3837334,1.81695137 6.42714612,1.82795137 6.46957217,1.83995137 C6.54159781,1.86195137 6.64914294,1.77495137 6.70439548,1.73295137 C6.75668806,1.69395137 6.82279378,1.60595137 6.83660692,1.54295137 C6.85239336,1.47395137 6.92737895,1.39495137 6.91159251,1.32695137 C6.89777937,1.26295137 6.88791285,1.23295137 6.95993848,1.20995137 C6.99052471,1.19995137 7.06452365,1.18395137 7.07537683,1.14895137 C7.09116327,1.09695137 6.9283656,1.11095137 6.90369929,1.09895137 C6.82180713,1.06195137 6.78628764,1.02095137 6.69156899,1.05795137 C6.64223637,1.07695137 6.59389039,1.09295137 6.54258446,1.10695137 C6.51594484,1.11395137 6.48930523,1.11595137 6.47450544,1.13895137 C6.46858552,1.14795137 6.4606923,1.15495137 6.45082578,1.15995137 C6.40839972,1.17695137 6.4606923,1.09595137 6.46562556,1.09095137 C6.4794387,1.07495137 6.50213171,1.02595137 6.45773234,1.03695137 C6.39261328,1.05195137 6.34525395,1.15195137 6.27520162,1.15695137 C6.22192239,1.16095137 6.23869548,1.11395137 6.25250862,1.08695137 C6.27914824,1.03795137 6.20317599,1.03195137 6.1696298,1.03195137 C6.12227048,1.03195137 6.08675099,1.05895137 6.04136497,1.06395137 C5.99893892,1.06795137 5.94960629,1.07595137 5.90718023,1.07495137 C5.82232811,1.07195137 5.76608892,1.12195137 5.68222345,1.09395137 C5.59342472,1.06495137 5.49771943,1.13895137 5.41188066,1.14895137 C5.38326773,1.15295137 5.34182833,1.14695137 5.3299885,1.18095137 C5.32012197,1.20895137 5.3299885,1.25195137 5.35169485,1.27295137 L5.35860142,1.26695137 C5.33985502,1.28595137 5.33788172,1.31295137 5.31025545,1.32295137 C5.28361583,1.33195137 5.25697621,1.36695137 5.24316307,1.39095137 C5.2323099,1.40895137 5.20172367,1.48395137 5.2550029,1.44495137 C5.29348235,1.41595137 5.31518871,1.36195137 5.37636117,1.37295137 L5.37636117,1.37295137 Z M2.18355356,6.10795137 C2.09278153,6.04195137 1.88657115,6.02595137 1.91222411,5.87195137 C1.92801055,5.77795137 2.0247025,5.70495137 2.10264805,5.65895137 C2.20525992,5.59895137 2.31971161,5.59695137 2.43514996,5.60695137 C2.46277623,5.60995137 2.51506881,5.60495137 2.5298686,5.62695137 C2.53776182,5.63795137 2.55354826,5.64495137 2.56637474,5.64895137 C2.59696097,5.65795137 2.62853385,5.65895137 2.66010674,5.66495137 C2.70746606,5.67395137 2.74101224,5.71495137 2.78837156,5.68095137 C2.84263745,5.64295137 2.85151733,5.63495137 2.91762305,5.64295137 C2.9768222,5.64995137 3.01234169,5.60495137 3.06167432,5.60895137 C3.07746076,5.60995137 3.09127389,5.61295137 3.10311372,5.61795137 C3.10804699,5.60095137 3.11495355,5.58595137 3.12580673,5.58295137 C3.15047305,5.57595137 3.20473893,5.63595137 3.2303919,5.64095137 C3.29551097,5.65495137 3.29156436,5.60895137 3.29649762,5.56195137 C3.32905715,5.55595137 3.34484359,5.60095137 3.37444317,5.57295137 C3.37345652,5.58195137 3.37937643,5.59595137 3.37937643,5.60495137 C3.38529635,5.60895137 3.39220292,5.60895137 3.39812283,5.60395137 C3.40108279,5.59895137 3.40206944,5.59395137 3.40009614,5.58795137 C3.41588258,5.59295137 3.4237758,5.58195137 3.4257491,5.56295137 C3.43758893,5.56395137 3.45633533,5.55695137 3.46817516,5.55895137 C3.47705503,5.52495137 3.49678809,5.47995137 3.47212177,5.44895137 C3.47804169,5.44795137 3.48494825,5.44595137 3.49185482,5.44495137 C3.49185482,5.41095137 3.51454783,5.39595137 3.51553448,5.36895137 C3.48001499,5.36395137 3.44054889,5.36595137 3.40404275,5.36695137 C3.4257491,5.34695137 3.47804169,5.30295137 3.48297495,5.27595137 C3.49284148,5.22795137 3.43068237,5.19895137 3.43561563,5.14195137 C3.44153554,5.17195137 3.47508173,5.24095137 3.50665461,5.25095137 C3.57769359,5.27495137 3.55697389,5.20395137 3.56190715,5.16695137 C3.5796669,5.04995137 3.68425207,5.14695137 3.68622537,5.20795137 C3.7168116,5.13795137 3.79278385,5.21595137 3.75825101,5.27595137 C3.74147791,5.30495137 3.71878491,5.29395137 3.73950461,5.33195137 C3.7543044,5.35895137 3.77601075,5.35995137 3.80758363,5.35295137 C3.81547685,5.33695137 3.82238342,5.31895137 3.82238342,5.29995137 C3.87664931,5.28295137 3.9121688,5.34795137 3.88059592,5.38695137 C3.92104868,5.36495137 3.96248808,5.34395137 4.00590079,5.33295137 C3.98024783,5.24295137 3.95360821,5.15495137 3.9703813,5.05895137 C3.97432791,5.03795137 3.97728787,5.01395137 3.99307431,4.99795137 C4.01280736,4.97695137 3.98814105,4.98495137 3.98616774,4.97095137 C3.98024783,4.92895137 4.02464719,4.88595137 4.04142028,4.84795137 C3.99504762,4.83795137 4.03747367,4.74595137 4.0680599,4.72995137 C4.10160609,4.71295137 4.20027134,4.74095137 4.20717791,4.71395137 C4.22691096,4.72495137 4.24565736,4.74095137 4.26933702,4.74095137 C4.32360291,4.74195137 4.36010905,4.74295137 4.39760185,4.78695137 C4.41634825,4.80995137 4.44397452,4.86095137 4.47752071,4.86495137 C4.47653405,4.90295137 4.51994676,4.93095137 4.47456075,4.96295137 C4.43904126,4.98795137 4.38970863,4.98195137 4.37490884,5.02995137 C4.36504232,5.05995137 4.33642939,5.07395137 4.3798421,5.09495137 C4.3985885,5.10495137 4.42226816,5.10695137 4.44298787,5.10695137 C4.44792113,5.13595137 4.46272092,5.17495137 4.50021371,5.16995137 C4.573226,5.16095137 4.58901244,5.06895137 4.64722494,5.03795137 C4.74194358,4.98795137 4.7271438,5.20395137 4.80903596,5.14995137 C4.82876901,5.13695137 4.82876901,5.08195137 4.83863553,5.06095137 C4.85836858,5.01695137 4.88106159,4.97195137 4.90967452,4.93295137 C4.94618066,4.88295137 4.99156668,4.83095137 4.97578024,4.76595137 C4.96690036,4.72995137 4.89783469,4.71495137 4.8662618,4.68995137 C4.82876901,4.65895137 4.79226286,4.62595137 4.76956986,4.58295137 C4.75575672,4.55695137 4.7478635,4.54795137 4.76956986,4.53495137 C4.78239634,4.52795137 4.77844973,4.51395137 4.77351647,4.50395137 C4.74983681,4.45395137 4.68570439,4.36495137 4.77548977,4.33395137 C4.79522282,4.32695137 4.83666223,4.26295137 4.83962219,4.23795137 C4.84455545,4.19595137 4.78140969,4.15795137 4.81002261,4.11595137 C4.83074231,4.08495137 4.8830349,4.06495137 4.90967452,4.03395137 C4.922501,4.01895137 4.93730079,4.00595137 4.95703384,4.00195137 C4.95802049,3.98495137 4.9619671,3.96595137 4.97676689,3.95495137 C5.00044655,3.93695137 5.03793935,3.94595137 5.06556562,3.93695137 C5.11095163,3.92295137 5.13068468,3.87595137 5.16620418,3.84995137 C5.19580375,3.82795137 5.22934994,3.83595137 5.26092282,3.81995137 C5.27769591,3.81195137 5.28460248,3.79395137 5.30137557,3.78595137 C5.34281498,3.76595137 5.3901743,3.79795137 5.4089207,3.83295137 C5.45332006,3.91695137 5.5085726,4.04695137 5.63486413,4.01295137 C5.68617006,3.99895137 5.72464951,3.95695137 5.74043595,3.90895137 C5.75523574,3.86295137 5.73747599,3.82495137 5.74043595,3.77995137 C5.74438256,3.69995137 5.82232811,3.64895137 5.83120798,3.56995137 C5.77200883,3.57095137 5.80259506,3.53395137 5.78286201,3.49995137 C5.76115565,3.46195137 5.71182303,3.48995137 5.67926349,3.48395137 C5.71280968,3.40295137 5.71280968,3.37495137 5.63387748,3.33595137 C5.59934464,3.31895137 5.54211879,3.23895137 5.51547917,3.24195137 C5.53718553,3.21195137 5.58849146,3.26195137 5.6042779,3.27595137 C5.63881074,3.30895137 5.66939697,3.32395137 5.71774294,3.32795137 C5.70392981,3.30695137 5.69702324,3.26895137 5.70590311,3.24495137 C5.71478298,3.22295137 5.69307663,3.19995137 5.69504993,3.17195137 C5.75030248,3.24295137 5.7414226,3.32395137 5.77299548,3.40195137 C5.78582197,3.43495137 5.8183815,3.45695137 5.83219464,3.49095137 C5.84995438,3.53395137 5.83811455,3.53295137 5.87560735,3.55895137 C5.89830036,3.57495137 5.90619358,3.60295137 5.91014019,3.62795137 C5.91704675,3.67195137 5.9328332,3.65295137 5.95651286,3.67795137 C5.97032599,3.69295137 6.00584548,3.69495137 5.99893892,3.72595137 C5.99400565,3.74795137 5.97920586,3.76595137 5.97624591,3.78895137 C5.96736603,3.85495137 6.09661752,3.76495137 6.109444,3.75595137 C6.13707027,3.73495137 6.18245629,3.73095137 6.20416264,3.70595137 C6.22685565,3.67995137 6.22192239,3.64195137 6.24560205,3.61795137 C6.27520162,3.58695137 6.30381455,3.60795137 6.33933404,3.60195137 C6.38077345,3.59595137 6.41629294,3.56295137 6.44687917,3.53795137 C6.51199823,3.48295137 6.55343764,3.42295137 6.60770353,3.35995137 C6.58402387,3.36595137 6.50311836,3.42495137 6.4981851,3.36995137 C6.46759887,3.36995137 6.39655989,3.36495137 6.38570671,3.33095137 C6.37682684,3.30595137 6.37978679,3.27795137 6.37978679,3.25295137 C6.37880014,3.22595137 6.34624061,3.23495137 6.32453425,3.22095137 C6.28112154,3.19295137 6.25941518,3.14095137 6.21304252,3.11695137 C6.13904358,3.07795137 6.09464421,3.01495137 6.05024485,2.94795137 C6.02459188,2.90895137 5.93381985,2.82995137 5.94072642,2.78295137 C5.94467303,2.75195137 5.97032599,2.71895137 5.96835269,2.68795137 C5.96736603,2.65995137 5.94565968,2.64495137 5.94861964,2.61395137 C5.95157959,2.57795137 5.86475417,2.51495137 5.94072642,2.50795137 C5.96440608,2.50595137 5.96835269,2.47695137 5.9949923,2.46095137 C6.02459188,2.44295137 6.01768531,2.42695137 6.05024485,2.43595137 C6.10253743,2.45195137 6.13904358,2.39395137 6.17456307,2.36295137 C6.23573552,2.30895137 6.13805692,2.30795137 6.13312366,2.26695137 C6.1281904,2.22595137 6.10451074,2.19595137 6.09760417,2.14795137 C6.09365756,2.11295137 6.06109802,2.12695137 6.04235163,2.13595137 C6.01669866,2.14795137 5.99104569,2.12995137 5.96637938,2.12495137 C5.94368637,2.11995137 5.92493997,2.08195137 5.8973137,2.09395137 C5.876594,2.10395137 5.87758065,2.12895137 5.84798108,2.12595137 C5.82627472,2.12395137 5.81246159,2.10295137 5.79075523,2.09895137 C5.75720904,2.09495137 5.78680862,2.12695137 5.74931582,2.12995137 C5.72267621,2.13195137 5.63683743,2.09595137 5.63486413,2.12995137 C5.60822451,2.08395137 5.59737133,2.16195137 5.56875841,2.16995137 C5.53718553,2.17895137 5.50363934,2.17095137 5.47206646,2.18295137 C5.40300078,2.21095137 5.42569379,2.27995137 5.49179951,2.29095137 C5.54507875,2.29895137 5.47601307,2.33595137 5.49377282,2.37195137 C5.50955926,2.40395137 5.51449252,2.42595137 5.54902536,2.43895137 C5.60625121,2.45995137 5.66742366,2.47695137 5.64769061,2.55095137 C5.62203765,2.64295137 5.55790523,2.72995137 5.46811985,2.77195137 C5.38228108,2.81195137 5.35860142,2.70295137 5.29348235,2.67495137 C5.2530296,2.65795137 5.20764358,2.66395137 5.16521752,2.66895137 C5.15831095,2.67995137 5.22441667,2.70095137 5.23526985,2.71995137 C5.2550029,2.75895137 5.20073701,2.75395137 5.1967904,2.78395137 C5.19284379,2.80895137 5.16028426,2.82695137 5.17804401,2.85195137 C5.15929761,2.82895137 5.12279146,2.85995137 5.10996498,2.87395137 C5.09121858,2.89395137 5.09516519,2.90695137 5.10305841,2.93195137 C5.11884485,2.98295137 5.04188596,3.03595137 4.99649994,3.02995137 C4.95802049,3.02395137 4.92151435,3.02695137 4.8850082,3.00895137 C4.84159549,2.98795137 4.85639528,3.00095137 4.84751541,2.95195137 C4.83863553,2.90595137 4.77548977,2.88595137 4.81298257,2.82895137 C4.83962219,2.78695137 4.8267957,2.79095137 4.82186244,2.75095137 C4.81594253,2.70895137 4.83468892,2.70295137 4.86823511,2.69695137 C4.90474125,2.68995137 4.92052769,2.62495137 4.94223405,2.59395137 C4.94716731,2.58695137 4.96986032,2.52895137 4.93434083,2.54395137 C4.91460778,2.55295137 4.92940757,2.57795137 4.89882134,2.58195137 C4.87711498,2.58595137 4.85540863,2.57095137 4.83271562,2.57095137 C4.80706265,2.57095137 4.78042303,2.58395137 4.75674337,2.56795137 C4.7685832,2.55395137 4.85343532,2.48395137 4.78634295,2.46995137 C4.75970333,2.46395137 4.78140969,2.50795137 4.7458902,2.50195137 C4.73898363,2.53695137 4.69655757,2.53395137 4.67583787,2.55595137 C4.68471774,2.51895137 4.76266329,2.49095137 4.73701032,2.46095137 C4.79324952,2.41195137 4.80508935,2.40295137 4.7291171,2.37595137 C4.60973215,2.33395137 4.61861202,2.21095137 4.70050418,2.13695137 C4.77548977,2.06895137 4.89882134,1.98295137 4.97183363,2.09595137 C5.04977918,2.21695137 5.0991118,2.12895137 5.16324422,2.05095137 C5.14153786,2.04195137 5.16127091,2.03595137 5.15436434,2.00895137 C5.08332536,2.03795137 5.0201796,1.94595137 5.06852557,1.89095137 C5.09812515,1.85795137 5.14351117,1.86695137 5.18297727,1.85695137 C5.21751011,1.84795137 5.24908299,1.81395137 5.26388278,1.78195137 C5.2342832,1.78995137 5.23822981,1.77195137 5.24908299,1.75895137 C5.23132324,1.75695137 5.21159019,1.74895137 5.1967904,1.74395137 C5.15436434,1.72895137 5.1573243,1.69595137 5.11193829,1.68995137 C5.00439316,1.67395137 5.22441667,1.54995137 5.11687155,1.54995137 C5.08233871,1.54895137 5.05175248,1.49695137 5.02609952,1.50695137 C5.00833977,1.51395137 5.00340651,1.52795137 4.98170015,1.51895137 C4.96690036,1.51295137 4.94914062,1.49995137 4.93138087,1.50995137 C4.89290142,1.53395137 4.8850082,1.50495137 4.84751541,1.51595137 C4.81692918,1.52595137 4.80015608,1.55595137 4.76463659,1.54795137 C4.80015608,1.49995137 4.8435688,1.45995137 4.87514168,1.40995137 C4.89586138,1.37595137 4.92151435,1.34495137 4.95604719,1.32395137 C4.97479358,1.31295137 5.02807282,1.30195137 5.03103278,1.27595137 C5.03596604,1.23295137 5.00932642,1.23695137 4.97972685,1.25395137 C4.90276795,1.29995137 4.82284909,1.34895137 4.7478635,1.39795137 C4.70247748,1.42695137 4.66695799,1.45195137 4.6107188,1.44395137 C4.56730609,1.43695137 4.54954634,1.48495137 4.5150135,1.48095137 C4.49824041,1.41395137 4.12824571,1.65695137 4.08285969,1.67795137 C4.01083406,1.70995137 3.92992855,1.76495137 3.85296965,1.78395137 C3.82139677,1.79195137 3.75529105,1.86595137 3.75923766,1.78395137 C3.71977156,1.77895137 3.69017198,1.81895137 3.66353236,1.83895137 C3.62603957,1.86795137 3.5816402,1.88595137 3.54118745,1.91095137 C3.45436203,1.96695137 3.37246987,2.03395137 3.29156436,2.09695137 C3.21460546,2.15695137 3.13764656,2.22695137 3.05674105,2.28095137 C3.02911478,2.29995137 2.92748957,2.35195137 2.93044953,2.39095137 C3.00247516,2.40495137 3.24815165,2.09695137 3.31721732,2.17995137 C3.33497707,2.20095137 3.21263216,2.26295137 3.1928991,2.27495137 C3.17612601,2.28395137 3.15639296,2.28295137 3.13961987,2.29195137 C3.11791351,2.30495137 3.10410038,2.32695137 3.08338067,2.34095137 C3.02812813,2.37595137 2.98175546,2.42095137 2.94130271,2.47095137 C2.91268978,2.50795137 2.89197008,2.55595137 2.8603972,2.58995137 C2.86533046,2.55395137 2.85842389,2.52795137 2.85941055,2.49295137 C2.81895779,2.51895137 2.8021847,2.56295137 2.74594551,2.55095137 C2.69463957,2.53895137 2.65418682,2.59095137 2.61768068,2.61895137 C2.53282856,2.68395137 2.47560271,2.75595137 2.40456373,2.83195137 C2.36509763,2.87495137 2.32267157,2.90495137 2.29800525,2.95795137 C2.27136564,3.01495137 2.23387284,3.06595137 2.19934,3.11895137 C2.13323428,3.21595137 2.05726204,3.30495137 1.99214297,3.40195137 C1.85894488,3.60095137 1.7711328,3.82895137 1.66161437,4.04095137 C1.60537517,4.15095137 1.55110929,4.25895137 1.52841628,4.38195137 C1.50868323,4.48795137 1.50769657,4.59595137 1.50966988,4.70395137 C1.56985568,4.65695137 1.56689573,4.75495137 1.55110929,4.78395137 C1.52841628,4.82895137 1.5195364,4.87995137 1.51262984,4.92995137 C1.50276331,4.99495137 1.49092348,5.05995137 1.49092348,5.12595137 C1.49092348,5.18195137 1.47316374,5.23395137 1.47217708,5.28795137 C1.45145738,5.27195137 1.49585674,5.20395137 1.45639064,5.21395137 C1.43665759,5.21895137 1.43567094,5.24795137 1.43073768,5.26295137 C1.41495124,5.31495137 1.34489891,5.30995137 1.33404573,5.36895137 C1.32812581,5.40495137 1.3241792,5.42595137 1.30049954,5.45495137 C1.28175314,5.47695137 1.29951289,5.48695137 1.3034595,5.50895137 C1.31233937,5.56095137 1.245247,5.63295137 1.26300675,5.67495137 C1.27977984,5.71595137 1.26794001,5.76195137 1.28668641,5.80095137 C1.29655293,5.82095137 1.31924594,5.84695137 1.31036607,5.87195137 C1.26794001,5.87995137 1.3222059,5.97795137 1.32615251,6.00795137 C1.33207242,6.05695137 1.37548513,6.21095137 1.42284446,6.23295137 C1.48204361,6.32395137 1.56294912,6.45095137 1.66753428,6.49695137 C1.74153322,6.52895137 1.76817284,6.43295137 1.80961225,6.39295137 C1.86190483,6.34095137 1.92998386,6.30795137 1.99904954,6.28395137 C2.05726204,6.26295137 2.30096521,6.19195137 2.18355356,6.10795137 L2.18355356,6.10795137 Z M2.28616542,9.39295137 C2.29800525,9.37295137 2.28912538,9.32195137 2.26741903,9.30495137 C2.21512644,9.26095137 2.19440674,9.36495137 2.22795292,9.39595137 C2.24077941,9.42895137 2.27136564,9.41795137 2.28616542,9.39295137 L2.28616542,9.39295137 Z M2.50026902,6.36895137 C2.48546924,6.35595137 2.47461606,6.36395137 2.47362941,6.33695137 C2.47461606,6.31295137 2.47658936,6.26695137 2.44501648,6.29595137 C2.43613661,6.29895137 2.44797644,6.30395137 2.43514996,6.30895137 C2.42627008,6.31195137 2.41936352,6.30495137 2.4134436,6.30195137 C2.39667051,6.29495137 2.38680398,6.29395137 2.3739775,6.31195137 C2.36509763,6.32395137 2.36509763,6.33795137 2.35029784,6.34795137 L2.32464487,6.35695137 C2.315765,6.35995137 2.29011203,6.37795137 2.28912538,6.38795137 C2.28517877,6.40295137 2.30787178,6.41395137 2.32365822,6.41795137 C2.3364847,6.42695137 2.3532578,6.43495137 2.36608428,6.44395137 C2.37891076,6.45295137 2.39963047,6.46895137 2.41541691,6.47295137 C2.4509364,6.49295137 2.50618894,6.51495137 2.53381521,6.47295137 C2.54170843,6.45695137 2.54762835,6.44495137 2.53677517,6.43095137 C2.52690864,6.41595137 2.5111222,6.41195137 2.50618894,6.39995137 C2.50224233,6.38695137 2.51309551,6.37895137 2.50026902,6.36895137 L2.50026902,6.36895137 Z M7.24508107,7.12395137 C7.22633467,7.12495137 7.19278848,7.13695137 7.17798869,7.14995137 C7.14838912,7.17595137 7.21153488,7.19095137 7.23620119,7.19795137 C7.26382747,7.21395137 7.30329357,7.22195137 7.32993319,7.23795137 C7.35262619,7.25495137 7.36841263,7.27795137 7.3940656,7.28895137 C7.42563848,7.30395137 7.46905119,7.31095137 7.50358403,7.31995137 C7.51838382,7.32495137 7.54107683,7.32395137 7.56080988,7.32795137 C7.58251623,7.34095137 7.59238276,7.36095137 7.61014251,7.37495137 C7.64072873,7.40295137 7.68414145,7.40995137 7.7245942,7.40795137 C7.76307365,7.41195137 7.79168657,7.41895137 7.82621941,7.40995137 C7.86568551,7.39995137 7.89331178,7.41995137 7.92981793,7.41995137 C7.94461771,7.41995137 7.9594175,7.40795137 7.97323064,7.40895137 C7.99197704,7.40895137 7.99395034,7.41695137 8.00283021,7.43295137 C8.01861666,7.45595137 8.05906941,7.49095137 8.08768233,7.49195137 C8.10544208,7.49195137 8.11925521,7.48895137 8.134055,7.49395137 C8.15082809,7.50395137 8.15773466,7.50395137 8.16957449,7.51395137 C8.1902942,7.52295137 8.20805394,7.52895137 8.21693381,7.54495137 C8.23272026,7.57295137 8.2317336,7.60395137 8.25639992,7.62595137 C8.27317301,7.63895137 8.29093275,7.65295137 8.3086925,7.66595137 C8.32053233,7.67695137 8.31066581,7.67495137 8.32842555,7.67495137 C8.33829208,7.67695137 8.35703847,7.67695137 8.36986496,7.67295137 C8.41919758,7.66995137 8.39255797,7.59995137 8.37677153,7.57695137 C8.366905,7.55695137 8.35802513,7.54095137 8.36197174,7.52195137 C8.36493169,7.49895137 8.37578487,7.48295137 8.36098508,7.46395137 C8.35309186,7.45195137 8.34223869,7.44595137 8.33138551,7.43995137 C8.32546559,7.43195137 8.32250564,7.42395137 8.31559907,7.41195137 C8.30079928,7.39295137 8.27218636,7.38695137 8.25343996,7.36895137 C8.22186708,7.33695137 8.20509398,7.29095137 8.16464123,7.26095137 C8.14293487,7.24795137 8.12320182,7.25795137 8.09656221,7.24695137 C8.08570903,7.23995137 8.07978911,7.23295137 8.06400267,7.22795137 C8.04920288,7.22295137 8.0363764,7.22595137 8.02256327,7.22495137 C7.99395034,7.22295137 7.96928403,7.19795137 7.94165776,7.19995137 C7.91107153,7.20395137 7.90515161,7.23695137 7.88739187,7.25495137 C7.87160543,7.26795137 7.85384568,7.26795137 7.84792577,7.24695137 C7.84595246,7.21995137 7.85581899,7.20395137 7.86963212,7.18695137 C7.89133848,7.16395137 7.86963212,7.15095137 7.8410192,7.14895137 C7.80451305,7.14895137 7.79760649,7.17795137 7.7828067,7.20895137 C7.75912704,7.24195137 7.74432725,7.21895137 7.71078106,7.21395137 C7.68808806,7.21495137 7.67230162,7.22395137 7.65059526,7.21495137 C7.63579547,7.20995137 7.63283551,7.19795137 7.62198234,7.19095137 C7.60520924,7.18195137 7.59238276,7.18495137 7.58054293,7.19295137 C7.56376984,7.19695137 7.56376984,7.19695137 7.54699674,7.18795137 C7.53219696,7.18195137 7.52825034,7.16995137 7.50950395,7.16595137 C7.47990437,7.15995137 7.44931814,7.18495137 7.42465183,7.17795137 C7.41379865,7.17195137 7.40491878,7.15595137 7.39011899,7.15095137 C7.3733459,7.14095137 7.37630585,7.14995137 7.36545268,7.16195137 C7.34670628,7.17995137 7.32105331,7.18595137 7.30329357,7.17195137 C7.28060056,7.15595137 7.27862725,7.12895137 7.24508107,7.12395137 L7.24508107,7.12395137 Z M8.37183826,8.30595137 C8.3876247,8.30395137 8.39551792,8.28795137 8.40933106,8.28995137 C8.4251175,8.28695137 8.41722428,8.30295137 8.42807746,8.31295137 C8.43794398,8.32195137 8.44781051,8.32195137 8.45767703,8.32195137 C8.47543678,8.32495137 8.50996962,8.32695137 8.51687619,8.31095137 C8.52476941,8.28595137 8.48333,8.28095137 8.47247682,8.26095137 C8.4626103,8.23195137 8.4853033,8.20395137 8.49319652,8.17895137 C8.50503635,8.14495137 8.4626103,8.12995137 8.46655691,8.10295137 C8.46557025,8.07395137 8.4853033,8.06395137 8.47938339,8.03595137 C8.47445013,8.01495137 8.45669038,7.99195137 8.4438639,7.97695137 C8.43202407,7.96095137 8.40933106,7.94595137 8.41130436,7.92295137 C8.41327767,7.89895137 8.45669038,7.89995137 8.43597068,7.87095137 C8.42413085,7.84595137 8.39255797,7.85095137 8.36394504,7.84695137 C8.35407852,7.84695137 8.34421199,7.84795137 8.33434547,7.83795137 C8.32546559,7.82395137 8.3294122,7.81695137 8.3294122,7.80695137 C8.32349229,7.77995137 8.30277259,7.76995137 8.27909292,7.75895137 C8.2711997,7.75495137 8.25935987,7.74995137 8.25442661,7.73795137 C8.25048,7.72595137 8.26231983,7.72195137 8.25837322,7.71095137 C8.24554674,7.68495137 8.19818742,7.72095137 8.17845437,7.71195137 C8.16464123,7.70995137 8.16661454,7.69695137 8.15773466,7.68295137 L8.134055,7.67195137 C8.10149547,7.65695137 8.08866899,7.68395137 8.0945889,7.71095137 C8.10938869,7.77195137 8.15378805,7.81195137 8.14885479,7.87295137 C8.15181475,7.89795137 8.15576136,7.90995137 8.16464123,7.93295137 C8.17253445,7.96595137 8.18141432,7.98195137 8.16661454,8.01395137 C8.14293487,8.03195137 8.16464123,8.05395137 8.17253445,8.07695137 C8.17746771,8.10795137 8.18536093,8.13195137 8.18437428,8.16495137 C8.17845437,8.22495137 8.15970797,8.28395137 8.16464123,8.34495137 C8.16760119,8.36995137 8.16562788,8.39295137 8.17450776,8.41695137 C8.17845437,8.44795137 8.20312068,8.45895137 8.22877365,8.47595137 C8.25343996,8.49695137 8.36789165,8.56595137 8.33434547,8.48195137 C8.32447894,8.46295137 8.3086925,8.43595137 8.30375924,8.41395137 C8.29586602,8.39095137 8.32349229,8.37495137 8.32447894,8.35095137 C8.32842555,8.32395137 8.30770585,8.31495137 8.3461853,8.30795137 C8.35407852,8.30195137 8.36591835,8.30795137 8.37183826,8.30595137 L8.37183826,8.30595137 Z M7.1819353,1.09995137 C7.21252153,1.09295137 7.24310776,1.10195137 7.27172069,1.09095137 C7.28652047,1.08495137 7.33486645,1.06795137 7.33190649,1.04795137 C7.32697323,1.01095137 7.17009547,1.03495137 7.14444251,1.04595137 C7.13654929,1.06895137 7.16022895,1.08695137 7.18094865,1.09295137 C7.18094865,1.09495137 7.1819353,1.09795137 7.1819353,1.09995137 L7.1819353,1.09995137 Z M7.93573784,7.78795137 C7.92981793,7.77495137 7.93573784,7.76295137 7.93573784,7.74995137 C7.93277788,7.72895137 7.92685797,7.72295137 7.92981793,7.70095137 C7.93672449,7.68895137 7.93672449,7.66995137 7.93376454,7.65495137 C7.92784462,7.64295137 7.9179781,7.63295137 7.90909822,7.62395137 C7.90909822,7.61795137 7.90613827,7.60795137 7.8992317,7.60195137 C7.88739187,7.58995137 7.87456538,7.60795137 7.8617389,7.61395137 C7.85187238,7.62295137 7.83312598,7.62895137 7.83016602,7.63895137 C7.8202995,7.65395137 7.82621941,7.66595137 7.82621941,7.67895137 L7.82917937,7.69395137 C7.80747301,7.71595137 7.82819272,7.77395137 7.82523276,7.79595137 C7.82523276,7.82095137 7.78971327,7.89095137 7.83707259,7.86995137 C7.84989907,7.86395137 7.8597656,7.85495137 7.87160543,7.84895137 C7.88739187,7.83995137 7.90712492,7.83995137 7.92587132,7.83395137 C7.93179123,7.83395137 7.96632407,7.83095137 7.96632407,7.82495137 C7.96731072,7.81195137 7.9386978,7.80295137 7.93573784,7.78795137 L7.93573784,7.78795137 Z M7.0447906,9.05195137 C7.0842567,9.07095137 7.15332238,9.03295137 7.19081518,9.02095137 C7.2381745,9.00595137 7.31316009,8.95595137 7.36150607,8.98395137 C7.38123912,8.99495137 7.39110564,9.01795137 7.41182535,9.02695137 C7.43747831,9.03795137 7.46806454,9.02795137 7.49371751,9.02195137 C7.52035712,9.01595137 7.55094335,9.01195137 7.57560967,8.99995137 C7.59731602,8.98895137 7.61112916,8.97095137 7.62987556,8.95695137 C7.67822153,8.91995137 7.71966094,8.95495137 7.77294017,8.94695137 C7.8035264,8.94295137 7.83213933,8.92795137 7.8617389,8.91995137 C7.88344526,8.91495137 7.92192471,8.91495137 7.9386978,8.89895137 C7.9574442,8.88095137 7.94856432,8.84195137 7.94856432,8.81895137 C7.94757767,8.78795137 7.94955098,8.75595137 7.9386978,8.72695137 C7.91699144,8.66995137 7.83805924,8.60295137 7.9199514,8.55795137 C7.93573784,8.45795137 7.81931284,8.47495137 7.78576666,8.40295137 C7.7640603,8.35595137 7.75715373,8.31995137 7.69499462,8.31495137 C7.64270204,8.30995137 7.61112916,8.33795137 7.56574314,8.35595137 C7.51443721,8.37495137 7.47497111,8.35795137 7.43057174,8.33295137 C7.40393213,8.31795137 7.34769293,8.28295137 7.33683975,8.32895137 C7.32697323,8.36895137 7.36545268,8.40795137 7.3338798,8.44395137 C7.30625352,8.47595137 7.25790755,8.48995137 7.21844145,8.49895137 C7.13260268,8.51695137 7.06452365,8.58295137 7.00236454,8.63995137 L7.00927111,8.64595137 C6.9846048,8.64495137 6.94809865,8.71095137 6.947112,8.73095137 C6.95697853,8.73395137 6.9658584,8.73695137 6.97671158,8.73995137 C6.97572493,8.77395137 7.01420437,8.75095137 7.01716433,8.72695137 C7.02505755,8.72895137 7.03295077,8.73395137 7.04084399,8.73495137 C7.04775056,8.73695137 7.06255035,8.73595137 7.06847026,8.73895137 C7.08524336,8.74595137 7.08820331,8.76195137 7.10892302,8.76395137 C7.09708319,8.81595137 7.10793636,8.87095137 7.08327005,8.91995137 C7.06748361,8.94995137 6.98756476,9.02395137 7.0447906,9.05195137 L7.0447906,9.05195137 Z M7.4522781,1.35995137 C7.48187768,1.39195137 7.51838382,1.40095137 7.51147725,1.45095137 C7.54897005,1.45595137 7.57264971,1.46995137 7.59435606,1.43795137 C7.6081692,1.41795137 7.6288889,1.40195137 7.65158191,1.39395137 C7.67920818,1.38295137 7.79267322,1.38395137 7.78773996,1.43095137 C7.78478,1.45395137 7.77096687,1.47395137 7.76702026,1.49695137 C7.762087,1.52895137 7.79661983,1.50595137 7.81141962,1.51395137 C7.79464653,1.52595137 7.77392683,1.53295137 7.75320712,1.53795137 C7.762087,1.54395137 7.76800691,1.55195137 7.76899356,1.56195137 C7.7433406,1.56795137 7.73051411,1.63995137 7.6851281,1.65395137 C7.65750183,1.66295137 7.61704907,1.64395137 7.5894228,1.64095137 C7.55686327,1.63695137 7.53219696,1.62695137 7.49963742,1.62495137 C7.46806454,1.62295137 7.49371751,1.58095137 7.4542514,1.58895137 C7.44734484,1.61695137 7.46115797,1.68795137 7.46609124,1.71595137 C7.4710245,1.75095137 7.50062407,1.77095137 7.53515691,1.77695137 C7.58350289,1.78495137 7.6061959,1.80095137 7.6476353,1.82495137 C7.68019484,1.84295137 7.71670098,1.83195137 7.75222047,1.83495137 C7.77590013,1.83695137 7.79563318,1.84595137 7.81339293,1.86095137 C7.80944632,1.87195137 7.80056644,1.88995137 7.80648636,1.90195137 C7.81339293,1.91795137 7.86371221,1.89995137 7.87555204,1.89895137 C7.91107153,1.89495137 7.94461771,1.85595137 7.9781639,1.86095137 C7.99099038,1.86295137 8.05018954,1.88095137 8.04722958,1.89595137 C8.0156567,1.88295137 7.99493699,1.92195137 7.97027068,1.90095137 C7.94856432,1.88195137 7.89035183,1.89795137 7.92784462,1.92495137 C7.93080458,1.92795137 7.9406711,2.00295137 7.9406711,2.01095137 C7.93771115,2.03895137 7.88739187,2.06895137 7.89133848,2.08695137 C7.89824505,2.08795137 7.94363106,2.09095137 7.95349759,2.09995137 C7.95645755,2.08795137 7.94757767,2.08295137 7.97520394,2.07495137 C7.99592365,2.06895137 8.02058996,2.06695137 8.04130966,2.07695137 C8.04920288,2.11195137 8.02354992,2.14795137 8.07189589,2.13895137 C8.11728191,2.12995137 8.13701496,2.15995137 8.18437428,2.12895137 C8.21397386,2.11095137 8.24554674,2.11395137 8.2711997,2.13995137 C8.30573254,2.17395137 8.23568021,2.22095137 8.27613297,2.25395137 C8.29191941,2.26695137 8.30474589,2.30695137 8.32053233,2.31395137 C8.33138551,2.31895137 8.39058466,2.29795137 8.40143784,2.29295137 C8.42018424,2.32695137 8.43695733,2.27495137 8.45175712,2.27195137 C8.45767703,2.24995137 8.4853033,2.22495137 8.51194292,2.22195137 C8.55140902,2.21795137 8.55239568,2.22495137 8.5790353,2.24395137 C8.65698085,2.29795137 8.64612767,2.16595137 8.68658042,2.13195137 C8.75959271,2.07195137 8.79609885,2.01495137 8.84641813,1.93795137 C8.88588423,1.87595137 8.94113678,1.86095137 9.01118911,1.84995137 C9.06644165,1.84095137 9.15129377,1.82795137 9.17398677,1.76795137 C9.20062639,1.69795137 9.13649398,1.65995137 9.08025478,1.63895137 C9.01710902,1.61695137 8.94607004,1.59295137 8.97369631,1.51295137 C9.00625584,1.41995137 8.97764292,1.36595137 8.87897767,1.33595137 C8.67079398,1.27095137 8.48333,1.16195137 8.2711997,1.10195137 C8.08373572,1.04895137 7.89429844,1.02995137 7.70190119,1.01995137 C7.61606242,0.98995137 7.43451835,0.98695137 7.38222577,1.05995137 C7.34867958,1.10695137 7.39110564,1.14795137 7.38715903,1.19695137 C7.38222577,1.25595137 7.41083869,1.31595137 7.4522781,1.35995137 L7.4522781,1.35995137 Z M10.7269779,10.6309514 L10.7259912,10.6299514 C10.7289512,10.6349514 10.7269779,10.6439514 10.7279645,10.6509514 C10.766444,10.6509514 10.7832171,10.6859514 10.8246565,10.6729514 C10.8670825,10.6609514 10.8917488,10.6199514 10.8582027,10.5859514 C10.8286031,10.5569514 10.8029501,10.5319514 10.7595374,10.5399514 C10.7082315,10.5499514 10.7190846,10.5909514 10.7269779,10.6309514 L10.7269779,10.6309514 Z M12.0678387,9.29395137 C12.0658654,9.28495137 12.0638921,9.27695137 12.0619187,9.26795137 C12.021466,9.25595137 11.995813,9.29795137 11.9583202,9.26695137 C11.8862946,9.31595137 11.9632535,9.41295137 11.8448552,9.40695137 C11.8655749,9.43195137 11.8636016,9.45995137 11.8537351,9.48895137 C11.8389353,9.53395137 11.8270954,9.52995137 11.7965092,9.53595137 C11.7323768,9.54595137 11.7017906,9.50595137 11.6820575,9.45195137 C11.6189118,9.45395137 11.5320863,9.55195137 11.4827537,9.58295137 C11.4699272,9.58995137 11.4472342,9.61095137 11.4334211,9.61995137 C11.4225679,9.62595137 11.3959283,9.63895137 11.3821151,9.64695137 C11.348569,9.66395137 11.2765433,9.68695137 11.2725967,9.72495137 C11.2558236,9.72195137 11.2301707,9.73195137 11.2133976,9.72995137 C11.2074776,9.73795137 11.2074776,9.74695137 11.2133976,9.75595137 C11.2903565,9.76895137 11.3308092,9.74295137 11.3959283,9.71495137 C11.4640073,9.68395137 11.5370196,9.69095137 11.601152,9.66695137 C11.6317382,9.65595137 11.6327249,9.62195137 11.6830442,9.64195137 C11.7047505,9.65195137 11.7304035,9.68395137 11.7353368,9.70595137 C11.7452033,9.75595137 11.6929107,9.82995137 11.6406181,9.83295137 C11.6277916,9.80195137 11.646538,9.76995137 11.6524579,9.74495137 C11.5833923,9.72195137 11.4699272,9.81995137 11.4511808,9.87795137 C11.5222198,9.89295137 11.5518194,9.99695137 11.5133399,10.0539514 C11.5005135,10.0679514 11.4857137,10.0859514 11.4610474,10.0939514 C11.4205946,10.1059514 11.4018482,10.0689514 11.3623821,10.0979514 C11.3110762,10.1369514 11.3673154,10.2439514 11.3377158,10.3039514 C11.3150228,10.3499514 11.2765433,10.3669514 11.2439838,10.3989514 C11.2222774,10.4219514 11.209451,10.4469514 11.1798514,10.4669514 C11.1413719,10.4929514 11.0476399,10.5489514 11.0555332,10.6029514 C11.1403853,10.6319514 11.3160094,10.4839514 11.3890217,10.4349514 C11.4353944,10.4039514 11.4640073,10.3559514 11.5113666,10.3249514 C11.5646459,10.2919514 11.6346982,10.2749514 11.669231,10.2159514 C11.6889641,10.1819514 11.6731776,10.1519514 11.6850175,10.1179514 C11.6958707,10.0879514 11.7165904,10.0779514 11.7363234,10.0549514 C11.7728296,10.0109514 11.8063757,9.99695137 11.8478151,9.96095137 C11.8991211,9.91495137 11.8872812,9.84295137 11.9109609,9.78195137 C11.9316806,9.72895137 11.9721334,9.68795137 12.0007463,9.63795137 C12.0451457,9.55895137 12.1615707,9.37095137 12.112238,9.28195137 C12.1003982,9.29195137 12.0786918,9.28895137 12.0678387,9.29395137 L12.0678387,9.29395137 Z M13.0752109,6.73495137 C13.0495579,6.68695137 13.0880374,6.54895137 13.0880374,6.49195137 C13.0870507,6.38695137 13.0554778,6.30795137 13.0406781,6.20995137 C13.0317982,6.11795137 13.0189717,5.87395137 13.0525179,5.79095137 C13.0998772,5.67395137 12.8690005,5.47595137 12.856174,5.34895137 C12.8443342,5.23895137 12.7821751,5.13495137 12.6923897,5.07195137 C12.6558836,5.04495137 12.5769514,4.68195137 12.5305787,4.69895137 C12.5078857,4.70995137 12.555245,4.78995137 12.5522851,4.81495137 C12.5394586,4.90295137 12.4950592,4.81495137 12.4486865,4.83495137 C12.3628478,4.86995137 12.2720757,4.95295137 12.2612226,5.03795137 C12.2207698,5.35295137 11.9977863,5.02695137 12.0155461,5.01395137 C12.0648787,4.97595137 12.0826384,4.98795137 12.1408509,4.97995137 C12.2049834,4.95695137 12.1053315,4.91095137 12.20597,4.90095137 C12.1822904,4.83595137 12.2355696,4.81495137 12.2099166,4.76395137 C12.1714372,4.68895137 12.1438109,4.69795137 12.1822904,4.61695137 C12.1990634,4.57295137 12.0984249,4.43395137 12.0905317,4.38095137 C12.0826384,4.32895137 12.0816518,4.26095137 12.0747452,4.20295137 C12.0707986,4.16595137 12.1309844,4.13095137 12.1201312,4.10195137 C12.1181579,3.99895137 12.1408509,3.88795137 12.1043448,3.78795137 C12.0786918,3.71995137 12.0490923,3.62995137 12.0056796,3.57195137 C11.9908798,3.55195137 11.9445071,3.44895137 11.9395738,3.41995137 C11.927734,3.35595137 11.8991211,3.37995137 11.8636016,3.35495137 C11.8438685,3.32995137 11.7550698,3.24695137 11.7294168,3.23495137 C11.7057372,3.22395137 11.5340596,3.06695137 11.530113,3.05395137 C11.5153132,3.00895137 11.4186213,2.97395137 11.4294745,2.92495137 C11.4452609,2.85095137 11.1877446,2.65895137 11.115719,2.64595137 C11.0693463,2.63795137 11.2577969,2.86395137 11.2568103,2.85895137 C11.2597702,2.87195137 11.3781685,3.02295137 11.3781685,3.02295137 C11.4048082,3.03195137 11.4699272,3.21695137 11.4679539,3.24095137 C11.4610474,3.31095137 11.2804899,3.12595137 11.2666768,3.10095137 C11.1778781,2.99195137 11.0170537,2.90395137 10.9154285,2.83095137 C10.8434029,2.76395137 10.8789224,2.72595137 10.7555908,2.66895137 C10.7102048,2.64795137 10.5868732,2.54695137 10.5483938,2.54395137 C10.5020211,2.54195137 10.5553003,2.63995137 10.556287,2.65095137 C10.5631935,2.72095137 10.6391658,2.72595137 10.6845518,2.77195137 C10.7210579,2.80995137 10.7536175,2.85695137 10.7220446,2.89895137 C10.7210579,2.89895137 10.6648188,3.00295137 10.6618588,2.99395137 C10.6776452,3.03795137 10.80887,3.13495137 10.8414296,3.17095137 C10.8355096,3.16195137 11.0131071,3.39495137 11.0279069,3.27095137 C11.0338268,3.22595137 10.9835075,3.17195137 10.9904141,3.13295137 C10.9953474,3.10895137 11.1936645,3.35995137 11.2045177,3.38195137 C11.2528637,3.51495137 11.2489171,3.36195137 11.2992363,3.37795137 C11.3406757,3.39095137 11.4521675,3.52995137 11.3594221,3.53595137 C11.2183308,3.54495137 11.3850751,3.66795137 11.4245412,3.68695137 C11.5064334,3.72695137 11.5626726,3.81995137 11.6475247,3.85495137 C11.7807228,3.90895137 11.7530965,4.00495137 11.8201889,4.10295137 C11.8418952,4.13395137 11.4373677,4.10295137 11.4057948,4.12095137 C11.3525156,4.16295137 11.6090452,4.44995137 11.6100319,4.49295137 C11.6120052,4.58295137 11.6633111,4.64895137 11.6771243,4.73895137 C11.6850175,4.82195137 11.675151,4.93095137 11.7294168,4.99795137 C11.7738162,5.03895137 11.8152556,4.92995137 11.8853079,4.99495137 C11.9109609,5.00695137 11.9474671,5.03595137 11.9553603,5.05795137 C11.9790399,5.11995137 12.1132247,5.49895137 11.9524003,5.47095137 C11.8813613,5.45795137 11.9218141,5.76895137 11.9267473,5.81395137 C11.9484537,5.91195137 11.9879198,5.90395137 11.9622668,6.02795137 C11.9652268,6.13095137 11.882348,6.18295137 11.8231488,6.25695137 C11.7955226,6.29095137 11.7777628,6.33095137 11.7649363,6.37395137 C11.7323768,6.34195137 11.7165904,6.29095137 11.6712043,6.27395137 C11.6218717,6.25495137 11.5133399,6.31495137 11.4699272,6.33595137 C11.3653421,6.38895137 11.442301,6.48495137 11.4008615,6.56795137 C11.371262,6.62895137 11.2824632,6.65895137 11.2242507,6.68895137 C11.1541984,6.72495137 11.0604664,6.76295137 10.9914007,6.70495137 C10.9322016,6.65695137 10.9578546,6.55995137 10.8956954,6.51795137 C10.8256431,6.47095137 10.8187366,6.57595137 10.8029501,6.61795137 C10.7723639,6.69695137 10.6806052,6.72395137 10.7042849,6.82295137 C10.7141514,6.86395137 10.7348711,6.90095137 10.7427643,6.94195137 C10.7526308,6.99295137 10.7269779,7.03895137 10.7240179,7.08995137 C10.718098,7.17695137 10.80887,7.19695137 10.8325497,7.26795137 C10.8532694,7.33195137 10.831563,7.43095137 10.7605241,7.45495137 C10.6845518,7.48195137 10.6006863,7.41295137 10.5257007,7.40495137 C10.4507152,7.39695137 10.3550099,7.41795137 10.3411967,7.50395137 C10.3283702,7.57995137 10.4053291,7.64195137 10.3678363,7.71995137 C10.3520499,7.75295137 10.3244236,7.77895137 10.3046906,7.80895137 C10.2701577,7.85895137 10.2504247,7.91695137 10.2178652,7.96795137 C10.2563446,7.96895137 10.252398,7.94495137 10.2869308,7.95195137 C10.323437,7.95995137 10.3559965,7.92295137 10.3865827,7.91095137 C10.3925027,7.93495137 10.3895427,7.95995137 10.3925027,7.98395137 C10.4181556,7.99195137 10.4438086,7.98195137 10.4665016,7.97295137 C10.4694616,7.99395137 10.459595,8.01795137 10.4684749,8.03895137 C10.4753815,8.05695137 10.4961012,8.06295137 10.507941,8.07695137 C10.5385272,8.11395137 10.5010344,8.17495137 10.4793281,8.20695137 C10.417169,8.29895137 10.3106105,8.34995137 10.2415448,8.43595137 C10.1764257,8.51595137 10.1705058,8.61295137 10.1221599,8.69995137 C10.1053868,8.72995137 10.0886137,8.77095137 10.133013,8.78495137 C10.1428796,8.76895137 10.1576794,8.75595137 10.1783991,8.75595137 C10.2089853,8.75495137 10.1971455,8.77795137 10.2129319,8.79595137 C10.2770643,8.87795137 10.3451433,8.74295137 10.3727696,8.70395137 C10.4003959,8.66195137 10.5148476,8.59895137 10.5464205,8.66895137 C10.5710868,8.72195137 10.5424738,8.79695137 10.5178075,8.84495137 C10.5592469,8.86395137 10.5474071,8.89395137 10.5572736,8.92995137 C10.5701001,8.97995137 10.6154861,9.01195137 10.6154861,9.06695137 C10.6154861,9.13295137 10.4714349,9.26395137 10.5276741,9.31395137 C10.5977264,9.37595137 10.6806052,9.20395137 10.7082315,9.16695137 C10.7605241,9.09595137 10.879909,9.08595137 10.9095086,8.99895137 C10.9420681,8.89995137 10.9312149,8.84095137 11.0624397,8.83795137 C11.1176923,8.83695137 11.158145,8.80195137 11.2104376,8.79095137 C11.2676635,8.77995137 11.2933164,8.77395137 11.3298226,8.72995137 C11.3821151,8.66695137 11.4294745,8.74195137 11.4314478,8.79195137 C11.4334211,8.84295137 11.4107281,8.90695137 11.442301,8.95295137 C11.4807804,9.00895137 11.5232065,8.93495137 11.5626726,8.89895137 C11.558726,8.93695137 11.6090452,8.95895137 11.6386448,8.97095137 C11.6840308,8.93995137 11.7126437,8.88895137 11.7609897,8.86095137 C11.7836827,8.84795137 11.8093357,8.84295137 11.8349887,8.83895137 C11.8418952,8.87995137 11.8488018,8.92395137 11.8853079,8.94395137 C11.9376005,8.97395137 11.8734681,9.00295137 11.9425338,9.03495137 C12.0283726,9.06795137 12.0569855,9.15495137 12.0984249,9.22495137 C12.1181579,9.25695137 12.2977287,9.06195137 12.3667944,9.05495137 C12.5956978,9.02895137 12.7150827,8.72995137 12.7999348,8.55295137 C12.9222798,8.29995137 12.9775323,8.01895137 13.0091052,7.75795137 C13.0870507,7.59695137 13.1186236,7.30195137 13.0870507,7.11495137 C13.0683043,7.00095137 13.1334234,6.84295137 13.0752109,6.73495137 L13.0752109,6.73495137 Z M11.0032406,10.5319514 C11.0091605,10.5039514 11.0683596,10.3999514 11.0131071,10.3849514 C10.993374,10.3799514 10.976601,10.4099514 10.9588412,10.4149514 C10.9351615,10.4229514 10.9095086,10.4079514 10.8878022,10.4189514 C10.8680692,10.4299514 10.8493228,10.4619514 10.8374829,10.4799514 C10.8226832,10.5019514 10.8286031,10.5109514 10.8522827,10.5229514 C10.8759624,10.5359514 10.9065486,10.5419514 10.9203618,10.5679514 C10.9322016,10.5909514 10.9262817,10.6219514 10.9233217,10.6459514 C10.9233217,10.6449514 10.9272683,10.6409514 10.928255,10.6369514 C10.9322016,10.6359514 10.9391082,10.6349514 10.9430548,10.6359514 L10.9381215,10.6459514 C11.0012673,10.6559514 10.996334,10.5729514 11.0032406,10.5319514 L11.0032406,10.5319514 Z M11.7422433,9.28095137 C11.7442166,9.31095137 11.7767762,9.30795137 11.7984825,9.29995137 C11.8182156,9.29395137 11.8310421,9.27695137 11.8438685,9.26195137 C11.8616283,9.23895137 11.8724815,9.21595137 11.856695,9.18895137 C11.8409086,9.16095137 11.8310421,9.14095137 11.8231488,9.10795137 C11.8103223,9.11495137 11.7945359,9.12695137 11.7807228,9.13095137 C11.7669096,9.13595137 11.7649363,9.13195137 11.7491499,9.13095137 C11.7126437,9.12995137 11.720537,9.15795137 11.7047505,9.18095137 C11.691924,9.20095137 11.6633111,9.20895137 11.6741643,9.23495137 C11.6820575,9.25495137 11.7146171,9.27195137 11.7333635,9.28095137 L11.7382967,9.27495137 C11.7373101,9.27695137 11.7363234,9.27795137 11.7353368,9.27995137 C11.7373101,9.28095137 11.74027,9.28095137 11.7422433,9.28095137 L11.7422433,9.28095137 Z M8.18042767,11.4279514 C8.21693381,11.3629514 8.28205288,11.3219514 8.34026538,11.2769514 C8.41031771,11.2229514 8.47247682,11.1599514 8.52772936,11.0919514 C8.49516983,11.0839514 8.49319652,11.0529514 8.47247682,11.0329514 C8.44090394,11.0019514 8.39255797,11.0219514 8.3856514,10.9749514 C8.37874483,10.9329514 8.34421199,10.9239514 8.31066581,10.9069514 C8.23370691,10.8679514 8.20213403,10.7919514 8.13997492,10.7389514 C8.07189589,10.6789514 7.97915055,10.6989514 7.89627174,10.6829514 C7.82325945,10.6689514 7.74926051,10.5519514 7.67131496,10.6019514 C7.62198234,10.6329514 7.59928933,10.7119514 7.63283551,10.7609514 C7.65947513,10.7989514 7.70486115,10.8179514 7.72262089,10.8629514 C7.69598128,10.8879514 7.69006136,10.9039514 7.72262089,10.9269514 C7.76110034,10.9539514 7.83509928,10.9819514 7.81635289,11.0409514 C7.80648636,11.0729514 7.77984674,11.1039514 7.7453139,11.1099514 C7.72064759,11.1149514 7.66046178,11.1009514 7.67328827,11.1459514 C7.645662,11.0719514 7.56771645,11.1879514 7.52529039,11.1269514 C7.49075755,11.0779514 7.46905119,11.0339514 7.4147853,11.0009514 C7.34473297,10.9579514 7.44339823,10.9159514 7.4315584,10.8509514 C7.41379865,10.7559514 7.2983603,10.7819514 7.2569209,10.7119514 C7.23225458,10.6719514 7.26580077,10.6399514 7.28158721,10.6049514 C7.29737365,10.5689514 7.33979971,10.5979514 7.36249272,10.6079514 C7.43649166,10.6429514 7.54502344,10.6299514 7.60718255,10.5789514 C7.63579547,10.5549514 7.69894123,10.4439514 7.61902238,10.4439514 C7.56376984,10.4449514 7.52134378,10.4929514 7.46905119,10.4959514 C7.46115797,10.4329514 7.4315584,10.3259514 7.49865077,10.2839514 C7.55982323,10.2459514 7.68808806,10.2019514 7.63382217,10.1039514 C7.61408912,10.0699514 7.57955628,10.1259514 7.55094335,10.1009514 C7.53910352,10.0909514 7.5479834,10.0679514 7.55193001,10.0569514 C7.53318361,10.0399514 7.51542386,10.0189514 7.50555734,9.99495137 C7.46214463,9.88895137 7.59040945,9.80595137 7.53614357,9.69395137 C7.51345056,9.64695137 7.47497111,9.61895137 7.43254505,9.58995137 C7.39011899,9.55995137 7.38814568,9.52195137 7.37235924,9.47695137 C7.36446602,9.45195137 7.32302662,9.39295137 7.28750713,9.40795137 C7.2569209,9.41995137 7.24804102,9.47295137 7.22436136,9.49495137 C7.17108213,9.54695137 7.05860374,9.56695137 6.98756476,9.54995137 C6.93033891,9.53695137 6.93329887,9.51495137 6.9056726,9.47695137 C6.89679272,9.46295137 6.87705967,9.46195137 6.86225988,9.45595137 C6.83660692,9.44595137 6.83364696,9.42295137 6.82772704,9.39995137 C6.80404738,9.31295137 6.63236984,9.42095137 6.60573022,9.29895137 C6.59981031,9.27095137 6.60967683,9.22395137 6.56922408,9.21795137 C6.52383806,9.20995137 6.52186476,9.16595137 6.52186476,9.12895137 C6.52186476,9.09895137 6.52383806,9.05695137 6.49226518,9.03995137 C6.45181243,9.01795137 6.4419459,9.02795137 6.42911942,8.98195137 C6.41431963,8.92295137 6.37386688,8.98395137 6.34032069,8.97195137 C6.26928171,8.94395137 6.28210819,8.97895137 6.22488235,9.00895137 C6.12720374,9.06095137 6.11635057,8.81995137 6.08280438,8.77295137 C6.01768531,8.68295137 6.03445841,8.88395137 5.99005904,8.90895137 C5.94960629,8.93195137 5.90718023,8.87895137 5.89238044,8.84795137 C5.88350057,8.82995137 5.87856731,8.80995137 5.86771413,8.79195137 C5.85094103,8.76595137 5.82134146,8.75495137 5.80456837,8.72895137 C5.79075523,8.70595137 5.77003553,8.67895137 5.760169,8.65395137 C5.75128913,8.63195137 5.75326243,8.60395137 5.73648934,8.58595137 C5.71576964,8.56295137 5.7414226,8.52495137 5.75622239,8.49595137 C5.78187536,8.48595137 5.82035481,8.50595137 5.8391012,8.52295137 C5.88547387,8.56195137 5.9555262,8.73295137 6.03643171,8.70095137 C6.01965862,8.67895137 6.0305118,8.65195137 6.01867197,8.62795137 C6.00584548,8.60295137 5.98117917,8.58795137 5.96243277,8.56795137 C5.92099336,8.51995137 5.87560735,8.47195137 5.84798108,8.41395137 C5.82430142,8.36395137 5.81246159,8.31095137 5.76411561,8.27595137 C5.72464951,8.24695137 5.64670396,8.21895137 5.66347705,8.15695137 C5.66347705,8.15595137 5.66446371,8.15495137 5.66446371,8.15495137 C5.69702324,8.16195137 5.71971625,8.18595137 5.74339591,8.20695137 C5.77792875,8.23695137 5.82232811,8.25195137 5.86278087,8.27195137 C5.93677981,8.30795137 6.02261858,8.33295137 6.08576434,8.38795137 C6.12523044,8.42095137 6.10451074,8.49495137 6.15384336,8.53595137 C6.19034951,8.56595137 6.2446154,8.66695137 6.31170777,8.62695137 C6.33637408,8.61195137 6.34722726,8.58295137 6.37189357,8.56595137 C6.39853319,8.54695137 6.44293256,8.52995137 6.47351878,8.51595137 C6.49226518,8.50695137 6.52383806,8.50995137 6.53863785,8.49495137 C6.56231751,8.47195137 6.50607832,8.40595137 6.49325184,8.38895137 C6.44293256,8.32395137 6.39655989,8.25295137 6.32946751,8.20395137 C6.29493468,8.17895137 6.26138849,8.15195137 6.22093574,8.13495137 C6.19922938,8.12595137 6.16074993,8.12695137 6.15680332,8.09695137 C6.1676565,8.10395137 6.17357641,8.10195137 6.17554972,8.09095137 C6.17456307,8.07095137 6.14595014,8.06995137 6.13213701,8.06595137 C6.09859082,8.05695137 6.07589781,8.05695137 6.06307133,8.02895137 C6.04629824,7.99495137 5.98709908,7.99595137 5.9555262,7.98795137 C5.90816688,7.97595137 5.87067409,7.93995137 5.82528807,7.92195137 C5.77200883,7.90195137 5.73155608,7.92295137 5.67926349,7.93495137 C5.67038362,7.93695137 5.65262388,7.96795137 5.63585078,7.99395137 C5.59835799,7.98495137 5.55691858,7.98895137 5.5253457,8.01395137 C5.47798638,8.05095137 5.45036011,8.10695137 5.41286731,8.15295137 C5.39708087,8.17195137 5.37438786,8.19095137 5.35169485,8.18395137 C5.34774824,8.18195137 5.34972155,8.17695137 5.34676159,8.17495137 C5.37537451,7.96995137 5.39116095,7.76295137 5.37241456,7.80395137 C5.33492176,7.88395137 5.30729549,7.93995137 5.27868256,7.99795137 C5.23724316,7.97995137 5.18889718,7.97895137 5.17113744,8.02295137 C5.15239104,8.06995137 5.17705735,8.13095137 5.14745778,8.17195137 C5.14055121,8.18295137 5.12969803,8.18195137 5.11983151,8.18695137 C5.1178582,8.18195137 5.10799168,8.16895137 5.10897833,8.16795137 C5.10009846,8.18295137 5.0991118,8.18795137 5.09121858,8.20095137 C5.06161901,8.20195137 5.02511286,8.18995137 4.98860672,8.17795137 C4.98860672,8.17795137 4.98860672,8.17495137 4.98762007,8.17495137 C4.98663341,8.17595137 4.98663341,8.17595137 4.98564676,8.17695137 C4.94223405,8.16195137 4.89684803,8.14795137 4.85738193,8.16195137 C4.77844973,8.18995137 4.77548977,8.30295137 4.72517049,8.37195137 C4.6501849,8.47695137 4.456801,8.43195137 4.42325482,8.30695137 C4.45088109,8.27295137 4.47752071,8.23895137 4.50514698,8.20495137 C4.46272092,8.09695137 4.34925588,8.02195137 4.23480418,8.02495137 C4.20224465,8.02595137 4.16771181,8.03195137 4.13811223,8.01795137 C4.107526,8.00295137 4.09075291,7.97095137 4.06411329,7.95095137 C3.98123448,7.88895137 3.8707294,7.97095137 3.80166372,8.04795137 C3.68326541,8.06795137 3.57374698,8.13495137 3.49974804,8.23095137 C3.45238872,8.22695137 3.4050294,8.22295137 3.35865673,8.21895137 C3.386283,8.29495137 3.29452432,8.35695137 3.25308491,8.42695137 C3.20177898,8.51195137 3.2284186,8.61095137 3.27873787,8.70195137 C3.27281796,8.71595137 3.26887135,8.73095137 3.25604487,8.73695137 C3.19585906,8.76895137 3.2116455,8.78795137 3.22940525,8.85295137 C3.24519169,8.90895137 3.23927177,9.01395137 3.22644529,9.06995137 C3.21657877,9.11395137 3.17316605,9.21995137 3.11988682,9.19495137 C3.09226055,9.18095137 3.06266097,9.16995137 3.037008,9.19595137 C3.02516817,9.20695137 3.01727495,9.22095137 3.01332834,9.23595137 C2.9955686,9.23695137 2.97780885,9.23895137 2.96103576,9.24295137 C2.92748957,9.24995137 2.89197008,9.25795137 2.85941055,9.24395137 C2.82685101,9.22995137 2.7834383,9.20295137 2.74693216,9.21495137 C2.71634593,9.22495137 2.65616013,9.25195137 2.64333364,9.28395137 C2.63741373,9.29795137 2.65616013,9.33495137 2.65616013,9.35395137 C2.65517347,9.38795137 2.68181309,9.43895137 2.67095991,9.46995137 C2.6462936,9.45795137 2.60978746,9.45395137 2.59301436,9.42895137 C2.57722792,9.40795137 2.55354826,9.41295137 2.53578852,9.39095137 C2.53184191,9.42895137 2.51802877,9.48195137 2.47264275,9.49195137 C2.42923004,9.50195137 2.38680398,9.46695137 2.34240462,9.47895137 C2.22597962,9.50895137 2.41245695,9.65495137 2.43712326,9.68295137 C2.47856267,9.72995137 2.4923758,9.79195137 2.52296203,9.84495137 C2.55650822,9.90295137 2.6255739,9.92195137 2.66602665,9.97295137 C2.69957284,10.0159514 2.7064794,10.0739514 2.75482538,10.1059514 C2.80810462,10.1429514 2.85645059,10.1759514 2.87815695,10.2389514 C2.90084995,10.2169514 2.94820928,10.3209514 2.99655525,10.2379514 C3.02220822,10.1929514 3.06759423,10.1539514 3.09620716,10.2269514 C3.12087347,10.2899514 3.09620716,10.3299514 3.15047305,10.3849514 C3.19191245,10.4279514 3.18993915,10.4789514 3.11890016,10.4739514 C3.13073999,10.5059514 3.14948639,10.5379514 3.11890016,10.5669514 C3.10508703,10.5809514 3.06562093,10.6099514 3.09423385,10.6299514 C3.12679338,10.6149514 3.16132622,10.6059514 3.19388576,10.5909514 C3.22940525,10.5759514 3.26393809,10.5399514 3.30537749,10.5409514 C3.3073508,10.5539514 3.25012495,10.5919514 3.28564444,10.5949514 C3.31524402,10.5979514 3.35767008,10.5669514 3.38134974,10.5929514 C3.40798936,10.6209514 3.37444317,10.6639514 3.39022961,10.6949514 C3.40601605,10.7269514 3.45929529,10.7029514 3.48494825,10.7079514 C3.47409508,10.7359514 3.43265567,10.7309514 3.40996266,10.7419514 C3.46225525,10.8059514 3.39417622,10.8999514 3.31820398,10.9019514 C3.28169783,10.9019514 3.15244635,10.7529514 3.14652644,10.8489514 C3.14553978,10.8769514 3.15441966,10.9119514 3.16329953,10.9389514 C3.17513936,10.9739514 3.25999148,10.9589514 3.29057771,10.9719514 C3.33497707,10.9899514 3.386283,11.0329514 3.40404275,11.0779514 C3.42081584,11.1239514 3.45929529,11.1539514 3.47409508,11.1979514 C3.502708,11.2799514 3.58065355,11.2909514 3.66155906,11.3149514 C3.76910418,11.3469514 3.7168116,11.5139514 3.71089169,11.5939514 C3.70595842,11.6729514 3.81646351,11.6919514 3.86678279,11.7369514 C3.92302198,11.7859514 3.93190185,11.8809514 3.83915652,11.8889514 C3.79179719,11.8929514 3.71286499,11.8709514 3.69510524,11.9319514 C3.66945228,12.0179514 3.79969041,12.0089514 3.85691626,12.0279514 C3.88355588,12.0369514 3.99110101,12.0479514 4.00096753,12.0729514 C4.01576732,12.1119514 4.00392749,12.1649514 4.01774062,12.2059514 C4.05128681,12.3109514 4.14797876,12.3809514 4.24171075,12.4329514 C4.44298787,12.5459514 4.68175778,12.6169514 4.90276795,12.6799514 C5.02609952,12.7159514 5.15140439,12.7439514 5.27769591,12.7609514 C5.40004083,12.7769514 5.50758595,12.7669514 5.61217112,12.8349514 C5.68419676,12.8819514 5.72958277,12.8469514 5.80358171,12.8599514 C5.83515459,12.8659514 5.84896773,12.8949514 5.87264739,12.9119514 C5.89928701,12.9329514 5.92987324,12.9059514 5.95848616,12.9169514 C5.96341942,12.8979514 5.96144612,12.8799514 5.95256625,12.8619514 C6.00880544,12.8829514 6.07787112,12.9429514 6.13707027,12.8949514 C6.16666985,12.8709514 6.1864029,12.8379514 6.21698913,12.8149514 C6.25349527,12.8179514 6.28901476,12.8199514 6.3255209,12.8199514 C6.47845205,12.8199514 6.59882366,12.7499514 6.72116857,12.6679514 C6.85239336,12.5799514 7.01025776,12.5779514 7.16220225,12.5639514 C7.32302662,12.5479514 7.49371751,12.5269514 7.64072873,12.4569514 C7.76899356,12.3949514 7.8015531,12.2819514 7.83805924,12.1569514 C7.87752534,12.0209514 7.99592365,11.9659514 8.0738692,11.8559514 C8.16562788,11.7279514 8.10544208,11.5609514 8.18042767,11.4279514 L8.18042767,11.4279514 Z M2.2950453,9.62395137 C2.29011203,9.59195137 2.2782722,9.57195137 2.25360589,9.55295137 C2.25261924,9.55595137 2.25163259,9.55795137 2.25163259,9.56195137 C2.2180864,9.54495137 2.21413979,9.48095137 2.16875377,9.48595137 C2.13126098,9.42595137 2.03654233,9.45295137 2.00694276,9.50795137 C1.98720971,9.54495137 2.01088937,9.56195137 2.03259572,9.58895137 C2.06022199,9.62295137 2.05528873,9.64895137 2.06515526,9.68795137 C2.08982157,9.78895137 2.17368704,9.71995137 2.23288619,9.75895137 C2.2555792,9.77395137 2.26445907,9.81695137 2.29800525,9.80995137 C2.33549805,9.80095137 2.33352475,9.74495137 2.32365822,9.71995137 C2.30984509,9.68395137 2.29997856,9.66295137 2.2950453,9.62395137 L2.2950453,9.62395137 Z M3.08338067,10.8149514 C3.08930059,10.7979514 3.06266097,10.7789514 3.04490122,10.7799514 C3.02911478,10.7809514 3.014315,10.8029514 3.00839508,10.8149514 C2.98866203,10.8499514 3.01036839,10.8969514 3.0557544,10.8969514 C3.06660758,10.8779514 3.06266097,10.8409514 3.09127389,10.8379514 C3.08930059,10.8289514 3.08338067,10.8259514 3.07548745,10.8229514 L3.08338067,10.8149514 L3.08338067,10.8149514 Z M2.24472602,9.54595137 C2.24768598,9.54795137 2.25064593,9.54995137 2.25360589,9.55295137 C2.25656585,9.54795137 2.25952581,9.54395137 2.26149911,9.53795137 L2.24472602,9.54595137 L2.24472602,9.54595137 Z M11.4896603,10.9489514 C11.4728872,10.9649514 11.4778204,10.9829514 11.4699272,11.0019514 C11.4610474,11.0249514 11.4265145,11.0339514 11.4077681,11.0459514 C11.3781685,11.0649514 11.368302,11.1099514 11.3357425,11.1209514 C11.3219293,11.0999514 11.3012096,11.0409514 11.2725967,11.0919514 C11.2558236,11.1249514 11.2666768,11.1579514 11.2400372,11.1879514 C11.2133976,11.2159514 11.2153709,11.2499514 11.1966245,11.2809514 C11.1680115,11.3299514 11.1393986,11.3589514 11.0910527,11.3879514 C11.0525732,11.4109514 11.04468,11.4539514 11.0170537,11.4859514 C10.9874541,11.5209514 10.9420681,11.5339514 10.9016154,11.5519514 C10.8730024,11.5639514 10.8256431,11.5979514 10.7930836,11.5789514 C10.7496709,11.5519514 10.80887,11.5039514 10.8295897,11.4869514 C10.8493228,11.4709514 10.9430548,11.4139514 10.9213484,11.3819514 C10.9065486,11.3609514 10.8532694,11.3639514 10.831563,11.3659514 C10.7871637,11.3709514 10.7536175,11.4159514 10.7161247,11.4369514 C10.6736986,11.4609514 10.6371925,11.4809514 10.5908198,11.4969514 C10.5375406,11.5159514 10.533594,11.5659514 10.4911679,11.5959514 C10.4576217,11.6219514 10.414209,11.6419514 10.3707963,11.6419514 C10.3135705,11.6419514 10.3165304,11.5939514 10.2997573,11.5539514 C10.278051,11.5569514 10.2593046,11.5849514 10.2385849,11.5939514 C10.2050387,11.6079514 10.1833323,11.6239514 10.1981321,11.6609514 C10.2119452,11.6989514 10.0590141,11.7339514 10.0323745,11.7529514 C10.0264546,11.7339514 10.0560541,11.7139514 10.067894,11.7029514 C10.0205346,11.6989514 9.96725541,11.7399514 9.91890944,11.7469514 C9.87253677,11.7529514 9.81531092,11.7849514 9.80840435,11.8329514 C9.80347109,11.8709514 9.75315181,11.8699514 9.72157893,11.8829514 C9.66928635,11.9049514 9.6909927,11.9359514 9.68112618,11.9779514 C9.66139313,12.0569514 9.49662215,11.9969514 9.58048762,11.8919514 C9.61008719,11.8549514 9.65448656,11.8309514 9.68112618,11.7929514 C9.71171241,11.7489514 9.71664567,11.6939514 9.74032533,11.6469514 C9.68803274,11.6619514 9.64856664,11.6919514 9.60416728,11.7209514 C9.553848,11.7539514 9.51142194,11.7459514 9.45518275,11.7349514 C9.39006368,11.7209514 9.34467766,11.7539514 9.28449186,11.7689514 C9.24601241,11.7779514 9.16017364,11.7749514 9.15524038,11.8309514 C9.15228042,11.8669514 9.21443953,11.8739514 9.23515923,11.8949514 C9.26574546,11.9269514 9.29929165,11.9739514 9.32494461,12.0099514 C9.34566432,12.0379514 9.42262321,12.0769514 9.41768995,12.1129514 C9.40979673,12.1829514 9.32198465,12.1709514 9.27462533,12.1829514 C9.22726601,12.1949514 9.22035944,12.2379514 9.1858266,12.2639514 C9.1463605,12.2929514 9.09308127,12.2589514 9.04966855,12.2769514 C9.00526919,12.2939514 8.97369631,12.3339514 8.93521686,12.3599514 C8.87009779,12.4049514 8.82767173,12.3559514 8.76057936,12.3529514 C8.70631347,12.3509514 8.65698085,12.3759514 8.60567491,12.3869514 C8.55930224,12.3969514 8.50306305,12.4049514 8.46754356,12.4379514 C8.38959801,12.5079514 8.64020775,12.4889514 8.66388741,12.4869514 C8.65303424,12.5269514 8.64218106,12.5739514 8.60567491,12.5999514 C8.5602889,12.6329514 8.49615648,12.6249514 8.4438639,12.6369514 C8.40341114,12.6469514 8.34717195,12.6919514 8.4063711,12.7239514 C8.45965034,12.7509514 8.52772936,12.7369514 8.5810086,12.7179514 C8.64218106,12.6969514 8.6994069,12.6639514 8.76353932,12.6499514 C8.83063169,12.6349514 8.90068402,12.6419514 8.96777639,12.6299514 C9.03980203,12.6159514 9.10294779,12.5769514 9.17004016,12.5499514 C9.23417258,12.5239514 9.30126495,12.5139514 9.36934398,12.5119514 C9.35553084,12.5369514 9.28843847,12.5349514 9.2627855,12.5409514 C9.21246622,12.5509514 9.17793338,12.5949514 9.1256408,12.5919514 C9.06644165,12.5899514 9.07334822,12.6319514 9.03092216,12.6419514 C9.00329589,12.6489514 8.93817682,12.7129514 8.91745711,12.6729514 C8.90167067,12.6419514 8.87108445,12.6479514 8.86121792,12.6859514 C8.8533247,12.7139514 8.86911114,12.7239514 8.83063169,12.7249514 C8.80103212,12.7249514 8.78721898,12.7129514 8.76057936,12.7059514 C8.70730012,12.6919514 8.68362046,12.7469514 8.64612767,12.7609514 C8.59087513,12.7819514 8.53167597,12.7749514 8.47839674,12.8099514 C8.44781051,12.8299514 8.41426432,12.8359514 8.37775818,12.8469514 C8.31165246,12.8679514 8.24949335,12.8929514 8.18338763,12.9149514 C8.1320817,12.9329514 8.08077576,12.9549514 8.02552322,12.9559514 C8.00283021,12.9559514 7.91205818,12.9399514 7.89725839,12.9669514 C7.86963212,13.0169514 7.95448424,12.9979514 7.97224399,12.9879514 C8.02256327,12.9609514 8.08373572,12.9769514 8.13997492,12.9769514 C8.20904059,12.9769514 8.26626644,12.9629514 8.32842555,12.9309514 C8.34519864,12.9219514 8.45669038,12.8979514 8.4626103,12.9109514 C8.47247682,12.9169514 8.54647576,12.8899514 8.55930224,12.8869514 C8.61948805,12.8729514 8.67967385,12.8599514 8.73887301,12.8449514 C8.92140372,12.7979514 9.10097449,12.7269514 9.27857194,12.6659514 C9.6327802,12.5459514 9.95837554,12.3429514 10.2662111,12.1369514 C10.4053291,12.0439514 10.5187942,11.9219514 10.669752,11.8459514 C10.8216965,11.7699514 10.9578546,11.6689514 11.0969726,11.5739514 C11.2331306,11.4809514 11.3367291,11.3529514 11.4501942,11.2359514 C11.5646459,11.1169514 11.6613378,11.0049514 11.7116571,10.8469514 C11.6830442,10.8399514 11.6534446,10.8989514 11.6297649,10.9099514 C11.5902988,10.9289514 11.5212332,10.9189514 11.4896603,10.9489514 L11.4896603,10.9489514 Z M10.6391658,10.7879514 C10.6736986,10.7409514 10.6440991,10.6769514 10.5829266,10.7139514 C10.5602336,10.7269514 10.5631935,10.7529514 10.5454338,10.7689514 C10.5266874,10.7859514 10.5247141,10.7659514 10.5059677,10.7609514 C10.4793281,10.7549514 10.4359154,10.7909514 10.4270355,10.8149514 C10.3905294,10.8139514 10.3579698,10.8549514 10.3747429,10.8869514 C10.4230889,10.8689514 10.4526885,10.8239514 10.504981,10.8379514 C10.5464205,10.8489514 10.6125262,10.8229514 10.6391658,10.7879514 L10.6391658,10.7879514 Z" />
+</svg>
diff --git a/devtools/client/themes/images/grid.svg b/devtools/client/themes/images/grid.svg
new file mode 100644
index 000000000..108ccafee
--- /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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" stroke="#696969">
+  <path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" d="M2 4h12M2 8h12M2 12h12M4 14V2M8 14V2M12 14V2"/>
+</svg>
diff --git a/devtools/client/themes/images/import.svg b/devtools/client/themes/images/import.svg
new file mode 100644
index 000000000..2cf948e3f
--- /dev/null
+++ b/devtools/client/themes/images/import.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" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+  <path d="M7.864 1.417c-.123-.13-.305-.185-.48-.144-.173.04-.312.172-.363.343-.05.17-.007.357.116.487l4 4.243c.19.2.506.21.707.02.2-.188.21-.505.02-.706l-4-4.243z"/>
+  <path d="M7.136 1.414l-4 4.243c-.19.2-.18.518.02.707.202.19.52.18.708-.02l4-4.244c.123-.13.166-.316.115-.487-.052-.17-.19-.302-.365-.343-.174-.04-.356.014-.48.144zM1.5 8c-.276 0-.5.224-.5.5v5c0 .2.224.5.5.5h12c.276 0 .5-.3.5-.5v-5c0-.276-.224-.5-.5-.5h-3c-.28 0-.5.224-.5.5s.22.5.5.5H13v4H2V9h2.5c.27 0 .5-.224.5-.5S4.77 8 4.5 8h-3z"/>
+  <path d="M7 2v9c0 .276.224.5.5.5s.5-.224.5-.5V2c0-.276-.224-.5-.5-.5S7 1.724 7 2z"/>
+</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 000000000..c2accabde
--- /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 000000000..5ccd34c09
--- /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 000000000..a9f7b33d9
--- /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 100755
index 000000000..80ea9e89c
--- /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/item-toggle.svg b/devtools/client/themes/images/item-toggle.svg
new file mode 100644
index 000000000..fd914c5c6
--- /dev/null
+++ b/devtools/client/themes/images/item-toggle.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="#0b0b0b">
+  <circle cx="8" cy="8.5" r="1.5"/>
+  <path d="M15.498 8.28l-.001-.03v-.002-.004l-.002-.018-.004-.031c0-.002 0-.002 0 0l-.004-.035.006.082c-.037-.296-.133-.501-.28-.661-.4-.522-.915-1.042-1.562-1.604-1.36-1.182-2.74-1.975-4.178-2.309a6.544 6.544 0 0 0-2.755-.042c-.78.153-1.565.462-2.369.91C3.252 5.147 2.207 6 1.252 7.035c-.216.233-.36.398-.499.577-.338.437-.338 1 0 1.437.428.552.941 1.072 1.59 1.635 1.359 1.181 2.739 1.975 4.177 2.308.907.21 1.829.223 2.756.043.78-.153 1.564-.462 2.369-.91 1.097-.612 2.141-1.464 3.097-2.499.217-.235.36-.398.498-.578.12-.128.216-.334.248-.554 0 .01 0 .01-.008.04l.013-.079-.001.011.003-.031.001-.017v.005l.001-.02v.008l.002-.03.001-.05-.001-.044v-.004-.004zm-.954.045v.007l.001.004V8.33v.012l-.001.01v-.005-.005l.002-.015-.001.008c-.002.014-.002.014 0 0l-.007.084c.003-.057-.004-.041-.014-.031-.143.182-.27.327-.468.543-.89.963-1.856 1.752-2.86 2.311-.724.404-1.419.677-2.095.81a5.63 5.63 0 0 1-2.374-.036c-1.273-.295-2.523-1.014-3.774-2.101-.604-.525-1.075-1.001-1.457-1.496-.054-.07-.054-.107 0-.177.117-.152.244-.298.442-.512.89-.963 1.856-1.752 2.86-2.311.724-.404 1.419-.678 2.095-.81a5.631 5.631 0 0 1 2.374.036c1.272.295 2.523 1.014 3.774 2.101.603.524 1.074 1 1.457 1.496.035.041.043.057.046.076 0 .01 0 .01.008.043l-.009-.047.003.02-.002-.013v-.008.016c0-.004 0-.004 0 0v-.004z"/>
+</svg>
diff --git a/devtools/client/themes/images/magnifying-glass.png b/devtools/client/themes/images/magnifying-glass.png
new file mode 100644
index 000000000..bd09ffb4f
--- /dev/null
+++ b/devtools/client/themes/images/magnifying-glass.png
diff --git a/devtools/client/themes/images/magnifying-glass@2x.png b/devtools/client/themes/images/magnifying-glass@2x.png
new file mode 100644
index 000000000..17842853a
--- /dev/null
+++ b/devtools/client/themes/images/magnifying-glass@2x.png
diff --git a/devtools/client/themes/images/noise.png b/devtools/client/themes/images/noise.png
new file mode 100644
index 000000000..01d340aaa
--- /dev/null
+++ b/devtools/client/themes/images/noise.png
diff --git a/devtools/client/themes/images/pane-collapse.svg b/devtools/client/themes/images/pane-collapse.svg
new file mode 100644
index 000000000..4490fd546
--- /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="#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 000000000..db6c3bcb1
--- /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="#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 000000000..308570294
--- /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="#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/performance-icons.svg b/devtools/client/themes/images/performance-icons.svg
new file mode 100644
index 000000000..d0d5e881e
--- /dev/null
+++ b/devtools/client/themes/images/performance-icons.svg
@@ -0,0 +1,42 @@
+<!-- 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" fill="#0b0b0b">

+  <style>

+    g:not(:target) {

+      display: none;

+    }

+  </style>

+  <g id="overview-markers">

+    <rect x="0" y="4" width="5" height="1"/>

+    <rect x="7" y="4" width="9" height="1"/>

+    <rect x="0" y="8" width="8" height="1"/>

+    <rect x="10" y="8" width="6" height="1"/>

+    <rect x="0" y="12" width="9" height="1"/>

+    <rect x="12" y="12" width="4" height="1"/>

+  </g>

+  <g id="overview-frames">

+    <rect x="1" y="4" width="2" height="12" rx="1" ry="1"/>

+    <rect x="5" y="12" width="2" height="4" rx="1" ry="1"/>

+    <rect x="9" y="9" width="2" height="7" rx="1" ry="1"/>

+    <rect x="13" y="7" width="2" height="9" rx="1" ry="1"/>

+  </g>

+  <g id="details-waterfall">

+    <rect x="0" y="4" width="9" height="1"/>

+    <rect x="5" y="8" width="8" height="1"/>

+    <rect x="7" y="12" width="9" height="1"/>

+  </g>

+  <g id="details-call-tree">

+    <rect x="1" y="4" width="10" height="1"/>

+    <rect x="5" y="7" width="10" height="1"/>

+    <rect x="1" y="10" width="10" height="1"/>

+    <rect x="5" y="13" width="10" height="1"/>

+  </g>

+  <g id="details-flamegraph">

+    <rect x="0" y="4" width="16" height="1"/>

+    <rect x="0" y="7" width="8" height="1"/>

+    <rect x="10" y="7" width="6" height="1"/>

+    <rect x="2" y="10" width="6" height="1"/>

+    <rect x="5" y="13" width="3" height="1"/>

+  </g>

+</svg>

diff --git a/devtools/client/themes/images/play.svg b/devtools/client/themes/images/play.svg
new file mode 100644
index 000000000..d677b4bd0
--- /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="#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/power.svg b/devtools/client/themes/images/power.svg
new file mode 100644
index 000000000..6975c1036
--- /dev/null
+++ b/devtools/client/themes/images/power.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="#0b0b0b">
+  <path d="M8 14.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0-1a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"/>
+  <path d="M8.5 7.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
+</svg>
diff --git a/devtools/client/themes/images/profiler-stopwatch.svg b/devtools/client/themes/images/profiler-stopwatch.svg
new file mode 100644
index 000000000..deafdb8b4
--- /dev/null
+++ b/devtools/client/themes/images/profiler-stopwatch.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="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+  <g fill-rule="evenodd">
+    <path d="M15 9.004C14.51 12.394 11.578 15 8.035 15 4.15 15 1 11.866 1 8s3.15-7 7.036-7c1.941 0 3.7.783 4.972 2.048l-.709.709A6.027 6.027 0 0 0 8.036 2c-3.33 0-6.03 2.686-6.03 6s2.7 6 6.03 6a6.023 6.023 0 0 0 5.946-4.993l1.017-.003z"/>
+    <path d="M4.137 9H3.1a5.002 5.002 0 0 0 9.8 0h-.965a4.023 4.023 0 0 1-3.9 3 4.023 4.023 0 0 1-3.898-3z" fill-opacity=".5"/>
+    <path d="M8.036 11a2.994 2.994 0 0 0 2.987-3c0-1.657-1.338-3-2.987-3a2.994 2.994 0 0 0-2.988 3c0 1.657 1.338 3 2.988 3zm0-1c1.11 0 2.011-.895 2.011-2s-.9-2-2.011-2c-1.111 0-2.012.895-2.012 2s.9 2 2.012 2z"/>
+    <path d="M10.354 6.354l4-4a.5.5 0 0 0-.708-.708l-4 4a.5.5 0 1 0 .708.708z"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/pseudo-class.svg b/devtools/client/themes/images/pseudo-class.svg
new file mode 100644
index 000000000..8062cd31a
--- /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="#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 000000000..b04262784
--- /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" viewBox="0 0 14 14" width="14" height="14">
+  <path d="M12,7H6l2.4-2.4C7.6,4,6.6,3.8,5.5,4.1C4.3,4.5,3.3,5.5,3,6.8 C2.6,9,4.3,11,6.5,11c1,0,2-0.5,2.6-1.2l1.7,1c-1.3,1.6-3.3,2.5-5.6,2c-2-0.5-3.6-2.1-4-4.1C0.4,5.1,3.1,2,6.5,2 c1.3,0,2.4,0.4,3.3,1.2L12,1V7z"/>
+</svg>
diff --git a/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer.png b/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer.png
new file mode 100644
index 000000000..7d113f0df
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer.png
diff --git a/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer@2x.png b/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer@2x.png
new file mode 100644
index 000000000..bb3c4bde0
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsive-horizontal-resizer@2x.png
diff --git a/devtools/client/themes/images/responsivemode/responsive-se-resizer.png b/devtools/client/themes/images/responsivemode/responsive-se-resizer.png
new file mode 100644
index 000000000..35b54d62c
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsive-se-resizer.png
diff --git a/devtools/client/themes/images/responsivemode/responsive-se-resizer@2x.png b/devtools/client/themes/images/responsivemode/responsive-se-resizer@2x.png
new file mode 100644
index 000000000..9dbf4fe8e
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsive-se-resizer@2x.png
diff --git a/devtools/client/themes/images/responsivemode/responsive-vertical-resizer.png b/devtools/client/themes/images/responsivemode/responsive-vertical-resizer.png
new file mode 100644
index 000000000..3b4e78c6f
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsive-vertical-resizer.png
diff --git a/devtools/client/themes/images/responsivemode/responsive-vertical-resizer@2x.png b/devtools/client/themes/images/responsivemode/responsive-vertical-resizer@2x.png
new file mode 100644
index 000000000..cbae60621
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsive-vertical-resizer@2x.png
diff --git a/devtools/client/themes/images/responsivemode/responsiveui-home.png b/devtools/client/themes/images/responsivemode/responsiveui-home.png
new file mode 100644
index 000000000..43379d0e9
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsiveui-home.png
diff --git a/devtools/client/themes/images/responsivemode/responsiveui-rotate.png b/devtools/client/themes/images/responsivemode/responsiveui-rotate.png
new file mode 100644
index 000000000..2bacbd2d5
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsiveui-rotate.png
diff --git a/devtools/client/themes/images/responsivemode/responsiveui-rotate@2x.png b/devtools/client/themes/images/responsivemode/responsiveui-rotate@2x.png
new file mode 100644
index 000000000..eeeb82328
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsiveui-rotate@2x.png
diff --git a/devtools/client/themes/images/responsivemode/responsiveui-screenshot.png b/devtools/client/themes/images/responsivemode/responsiveui-screenshot.png
new file mode 100644
index 000000000..084220ed1
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsiveui-screenshot.png
diff --git a/devtools/client/themes/images/responsivemode/responsiveui-screenshot@2x.png b/devtools/client/themes/images/responsivemode/responsiveui-screenshot@2x.png
new file mode 100644
index 000000000..927c5cf0b
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsiveui-screenshot@2x.png
diff --git a/devtools/client/themes/images/responsivemode/responsiveui-touch.png b/devtools/client/themes/images/responsivemode/responsiveui-touch.png
new file mode 100644
index 000000000..90587034c
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsiveui-touch.png
diff --git a/devtools/client/themes/images/responsivemode/responsiveui-touch@2x.png b/devtools/client/themes/images/responsivemode/responsiveui-touch@2x.png
new file mode 100644
index 000000000..e4645039c
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/responsiveui-touch@2x.png
diff --git a/devtools/client/themes/images/rewind.svg b/devtools/client/themes/images/rewind.svg
new file mode 100644
index 000000000..13a309626
--- /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="#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/search-clear-dark.svg b/devtools/client/themes/images/search-clear-dark.svg
new file mode 100644
index 000000000..422a7ce7f
--- /dev/null
+++ b/devtools/client/themes/images/search-clear-dark.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-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" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="16" viewBox="0 0 32 16">
+  <defs>
+    <path id="glyphShape-clear" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0 z M11.9,10.5l-1.4,1.4L8,9.4l-2.4,2.4l-1.4-1.4L6.6,8L4.2,5.6l1.4-1.4L8,6.6l2.4-2.4l1.4,1.4L9.4,8L11.9,10.5z"/>
+    <style>
+      .icon-state-default { fill: #f5f7fa; fill-opacity: .6; }
+      .icon-state-pressed { fill: #7d7e80; fill-opacity: .8; }
+    </style>
+  </defs>
+  <use xlink:href="#glyphShape-clear" class="icon-state-default"/>
+  <use xlink:href="#glyphShape-clear" class="icon-state-pressed" transform="translate(16)"/>
+</svg>
diff --git a/devtools/client/themes/images/search-clear-failed.svg b/devtools/client/themes/images/search-clear-failed.svg
new file mode 100644
index 000000000..a8f9fd8ee
--- /dev/null
+++ b/devtools/client/themes/images/search-clear-failed.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-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" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="16" viewBox="0 0 32 16">
+  <defs>
+    <path id="glyphShape-clear" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0 z M11.9,10.5l-1.4,1.4L8,9.4l-2.4,2.4l-1.4-1.4L6.6,8L4.2,5.6l1.4-1.4L8,6.6l2.4-2.4l1.4,1.4L9.4,8L11.9,10.5z"/>
+    <style>
+      .icon-state-default { fill: #cc3d3d; fill-opacity: 1; }
+      .icon-state-pressed { fill: #802d2d; fill-opacity: 1; }
+    </style>
+  </defs>
+  <use xlink:href="#glyphShape-clear" class="icon-state-default"/>
+  <use xlink:href="#glyphShape-clear" class="icon-state-pressed" transform="translate(16)"/>
+</svg>
diff --git a/devtools/client/themes/images/search-clear-light.svg b/devtools/client/themes/images/search-clear-light.svg
new file mode 100644
index 000000000..066ef4439
--- /dev/null
+++ b/devtools/client/themes/images/search-clear-light.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-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" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="16" viewBox="0 0 32 16">
+  <defs>
+    <path id="glyphShape-clear" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0 z M11.9,10.5l-1.4,1.4L8,9.4l-2.4,2.4l-1.4-1.4L6.6,8L4.2,5.6l1.4-1.4L8,6.6l2.4-2.4l1.4,1.4L9.4,8L11.9,10.5z"/>
+    <style>
+      .icon-state-default { fill: #1d2126; fill-opacity: .5; }
+      .icon-state-pressed { fill: #1d2126; fill-opacity: .8; }
+    </style>
+  </defs>
+  <use xlink:href="#glyphShape-clear" class="icon-state-default"/>
+  <use xlink:href="#glyphShape-clear" class="icon-state-pressed" transform="translate(16)"/>
+</svg>
diff --git a/devtools/client/themes/images/search.svg b/devtools/client/themes/images/search.svg
new file mode 100644
index 000000000..49f8cc605
--- /dev/null
+++ b/devtools/client/themes/images/search.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="#aaa">
+  <path d="M10.716 10.032C11.516 9.077 12 7.845 12 6.5 12 3.462 9.538 1 6.5 1S1 3.462 1 6.5 3.462 12 6.5 12c1.345 0 2.577-.483 3.532-1.284l4.143 4.142c.19.19.495.19.683 0 .19-.188.19-.494 0-.683l-4.142-4.143zM6.5 11C8.985 11 11 8.985 11 6.5S8.985 2 6.5 2 2 4.015 2 6.5 4.015 11 6.5 11z" fill-rule="evenodd"/>
+</svg>
diff --git a/devtools/client/themes/images/security-state-broken.svg b/devtools/client/themes/images/security-state-broken.svg
new file mode 100644
index 000000000..5f122c3ee
--- /dev/null
+++ b/devtools/client/themes/images/security-state-broken.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-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" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#808080" d="M14.8,12.5L9.3,1.9C9,1.3,8.5,1,8,1C7.5,1,7,1.3,6.7,1.9L1.2,12.5c-0.3,0.6-0.3,1.2,0,1.7C1.5,14.7,2,15,2.6,15h10.8 c0.6,0,1.1-0.3,1.4-0.8C15.1,13.7,15.1,13.1,14.8,12.5z"/>
+  <path fill="#fff" d="M8,11c-0.8,0-1.5,0.7-1.5,1.5C6.5,13.3,7.2,14,8,14 c0.8,0,1.5-0.7,1.5-1.5C9.5,11.7,8.8,11,8,11z M8,10L8,10C8.6,10,9,9.6,9,9l0.2-4.2c0-0.7-0.5-1.2-1.2-1.2S6.8,4.1,6.8,4.8L7,9 C7,9.6,7.4,10,8,10z"/>
+</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 000000000..b7191a867
--- /dev/null
+++ b/devtools/client/themes/images/security-state-insecure.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-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" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16" height="16" viewBox="0 0 16 16">
+  <style>
+    .icon-default {
+      fill: #999;
+    }
+  </style>
+
+  <defs>
+    <rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4" />
+    <rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2" />
+    <rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1" />
+
+    <mask id="mask-clasp-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
+      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+      <line x1="2" y1="13" x2="14" y2="1.5" stroke="#000" stroke-width="2" />
+      <line x1="2" y1="15" x2="14" y2="3.5" stroke="#000" stroke-width="2" />
+      <rect x="3" y="7" width="10" height="7" rx="1" ry="1" fill="#000" />
+    </mask>
+
+    <mask id="mask-base-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-lock-base" fill="#fff" />
+      <line x1="2" y1="14.8" x2="14" y2="3.2" stroke="#000" stroke-width="1.8" />
+    </mask>
+  </defs>
+
+  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" />
+  <use xlink:href="#shape-lock-base" mask="url(#mask-base-cutout)" class="icon-default" />
+
+  <line x1="2" y1="14.1" x2="14" y2="2.5" stroke="#d92d21" stroke-width="1.8" />
+</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 000000000..5dad8903b
--- /dev/null
+++ b/devtools/client/themes/images/security-state-secure.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-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" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16" height="16" viewBox="0 0 16 16">
+  <style>
+    .icon-default {
+      fill: #4d9a26;
+    }
+  </style>
+
+  <defs>
+    <rect id="shape-lock-clasp-outer" x="4" y="2" width="8" height="10" rx="4" ry="4" />
+    <rect id="shape-lock-clasp-inner" x="6" y="4" width="4" height="6" rx="2" ry="2" />
+    <rect id="shape-lock-base" x="3" y="7" width="10" height="7" rx="1" ry="1" />
+
+    <mask id="mask-clasp-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
+      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+    </mask>
+  </defs>
+
+  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" />
+  <use xlink:href="#shape-lock-base" class="icon-default" />
+</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 000000000..d1e9dbd4b
--- /dev/null
+++ b/devtools/client/themes/images/security-state-weak.svg
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-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" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="16" height="16" viewBox="0 0 16 16">
+  <style>
+    .icon-default {
+      fill: #808080;
+    }
+  </style>
+
+  <defs>
+    <rect id="shape-lock-clasp-outer" x="2" y="1" width="8" height="10" rx="4" ry="4" />
+    <rect id="shape-lock-clasp-inner" x="4" y="3" width="4" height="6" rx="2" ry="2" />
+    <rect id="shape-lock-base" x="1" y="6" width="10" height="7" rx="1" ry="1" />
+
+    <mask id="mask-clasp-cutout">
+      <rect width="16" height="16" fill="#000" />
+      <use xlink:href="#shape-lock-clasp-outer" fill="#fff" />
+      <use xlink:href="#shape-lock-clasp-inner" fill="#000" />
+    </mask>
+  </defs>
+
+  <use xlink:href="#shape-lock-clasp-outer" mask="url(#mask-clasp-cutout)" class="icon-default" />
+  <use xlink:href="#shape-lock-base" class="icon-default" />
+  <path fill="#fff" d="M10.5,5C9.8,5,9.1,5.4,8.8,6.2l-3.5,6.8c-0.4,0.7-0.4,1.4,0,2c0.4,0.6,1,1,1.8,1H14c0.8,0,1.4-0.4,1.8-1 c0.3-0.6,0.3-1.4,0-2l-3.5-6.8C11.9,5.4,11.2,5,10.5,5L10.5,5z"/>
+  <path fill="#ffbf00" d="M14.8,13.4l-3.5-6.8C11.2,6.2,10.9,6,10.5,6c-0.3,0-0.7,0.2-0.9,0.6l-3.5,6.8c-0.2,0.4-0.2,0.8,0,1.1C6.3,14.8,6.6,15,7,15 H14c0.4,0,0.7-0.2,0.9-0.5C15.1,14.2,15,13.8,14.8,13.4z"/>
+  <path fill="#fff" d="M10,8.5C10,8.2,10.2,8,10.5,8S11,8.2,11,8.5L10.8,11h-0.6L10,8.5z" />
+  <circle fill="#fff" cx="10.5" cy="12.5" r=".75" />
+</svg>
diff --git a/devtools/client/themes/images/sort-arrows.svg b/devtools/client/themes/images/sort-arrows.svg
new file mode 100644
index 000000000..289b07530
--- /dev/null
+++ b/devtools/client/themes/images/sort-arrows.svg
@@ -0,0 +1,12 @@
+<!-- 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" fill="#edf0f1" fill-opacity="0.8">
+  <style>
+    polygon:not(:target) {
+      display: none;
+    }
+  </style>
+  <polygon points="0,4 3.5,0 7,4" id="ascending"/>
+  <polygon points="0,0 3.5,4 7,0" id="descending"/>
+</svg>
diff --git a/devtools/client/themes/images/toggle-tools.png b/devtools/client/themes/images/toggle-tools.png
new file mode 100644
index 000000000..495439391
--- /dev/null
+++ b/devtools/client/themes/images/toggle-tools.png
diff --git a/devtools/client/themes/images/toggle-tools@2x.png b/devtools/client/themes/images/toggle-tools@2x.png
new file mode 100644
index 000000000..971f41431
--- /dev/null
+++ b/devtools/client/themes/images/toggle-tools@2x.png
diff --git a/devtools/client/themes/images/tool-canvas.svg b/devtools/client/themes/images/tool-canvas.svg
new file mode 100644
index 000000000..7edebeaf0
--- /dev/null
+++ b/devtools/client/themes/images/tool-canvas.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="#0b0b0b">
+  <g fill-rule="evenodd">
+    <path d="M1 2.007C1 1.45 1.45 1 2.007 1h11.986C14.55 1 15 1.45 15 2.007v11.986C15 14.55 14.55 15 13.993 15H2.007C1.45 15 1 14.55 1 13.993V2.007zM2 2h12v12H2V2z"/>
+    <path d="M3 3h2v2H3zM11 3h2v2h-2zM7 3h2v2H7zM3 7h2v2H3zM11 7h2v2h-2zM7 7h2v2H7zM5 5h2v2H5zM9 5h2v2H9zM3 11h2v2H3zM11 11h2v2h-2zM7 11h2v2H7zM5 9h2v2H5zM9 9h2v2H9z" opacity="0.5"/>
+  </g>
+</svg>
diff --git a/devtools/client/themes/images/tool-debugger-paused.svg b/devtools/client/themes/images/tool-debugger-paused.svg
new file mode 100644
index 000000000..8ac16b26f
--- /dev/null
+++ b/devtools/client/themes/images/tool-debugger-paused.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="#5FC749">
+  <path d="M2 5v6c0 .109.039.342.144.553.15.297.374.447.856.447h9l-.78.375 4-5v1.25l-4-5L12 4H3c-.482 0-.707.15-.856.447A1.403 1.403 0 0 0 2 5zM1 5s0-2 2-2h9l4 5-4 5H3c-2 0-2-2-2-2V5z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-debugger.svg b/devtools/client/themes/images/tool-debugger.svg
new file mode 100644
index 000000000..9a8fac4d7
--- /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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+  <path d="M2 5v6c0 .109.039.342.144.553.15.297.374.447.856.447h9l-.78.375 4-5v1.25l-4-5L12 4H3c-.482 0-.707.15-.856.447A1.403 1.403 0 0 0 2 5zM1 5s0-2 2-2h9l4 5-4 5H3c-2 0-2-2-2-2V5z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-dom.svg b/devtools/client/themes/images/tool-dom.svg
new file mode 100644
index 000000000..88aecabf5
--- /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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">

+  <path d="M6.052 1.13L1.164 5.57a.5.5 0 0 0 0 .74l5 4.56a.5.5 0 0 0 .673-.74l-5-4.559v.74l4.887-4.44a.5.5 0 0 0-.672-.741zM10.948 14.87l4.888-4.44a.5.5 0 0 0 0-.74l-5-4.56a.5.5 0 1 0-.673.74l5 4.559v-.74l-4.887 4.44a.5.5 0 0 0 .672.741z"/>

+</svg>

diff --git a/devtools/client/themes/images/tool-inspector.svg b/devtools/client/themes/images/tool-inspector.svg
new file mode 100644
index 000000000..a580f71a4
--- /dev/null
+++ b/devtools/client/themes/images/tool-inspector.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="#0b0b0b">
+  <path d="M3 3.995v8.01c0-.01.005-.005.002-.005h9.996c-.001 0 .002-.003.002.005v-8.01c0 .01-.005.005-.002.005H3.002C3.003 4 3 4.003 3 3.995zm-1 0C2 3.445 2.456 3 3.002 3h9.996C13.55 3 14 3.456 14 3.995v8.01c0 .55-.456.995-1.002.995H3.002A1.005 1.005 0 0 1 2 12.005v-8.01z"/>
+  <path d="M8.5 3.5V2a.5.5 0 0 0-1 0v1.5a.5.5 0 0 0 1 0zM1 8.5h1a.5.5 0 0 0 0-1H1a.5.5 0 0 0 0 1zM14 8.5h1a.5.5 0 1 0 0-1h-1a.5.5 0 1 0 0 1zM8.5 14v-1.5a.5.5 0 1 0-1 0V14a.5.5 0 1 0 1 0z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-memory-active.svg b/devtools/client/themes/images/tool-memory-active.svg
new file mode 100644
index 000000000..81d787101
--- /dev/null
+++ b/devtools/client/themes/images/tool-memory-active.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" xmlns="http://www.w3.org/2000/svg" fill="#5FC749">
+  <path d="M4.727 8.055l-1.96-1a.5.5 0 0 0-.573.083L.655 8.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89z"/>
+  <path d="M4.727 10.055l-1.96-1a.5.5 0 0 0-.573.083L.655 10.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89zM11.727 10.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89z"/>
+  <path d="M11.727 8.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89z"/>
+  <path d="M11.727 6.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89zM4.727 6.055l-1.96-1a.5.5 0 0 0-.573.083L.655 6.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89z"/>
+  <path d="M5 3.002v9.996c0-.001.003.002-.003.002h6.006c-.006 0-.003-.003-.003-.002V3.002c0 .001-.003-.002.003-.002H4.997c.006 0 .003.003.003.002zm-1 0C4 2.45 4.453 2 4.997 2h6.006c.55 0 .997.456.997 1.002v9.996c0 .553-.453 1.002-.997 1.002H4.997C4.447 14 4 13.544 4 12.998V3.002z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-memory.svg b/devtools/client/themes/images/tool-memory.svg
new file mode 100644
index 000000000..fd9be2bbd
--- /dev/null
+++ b/devtools/client/themes/images/tool-memory.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" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+  <path d="M4.727 8.055l-1.96-1a.5.5 0 0 0-.573.083L.655 8.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89z"/>
+  <path d="M4.727 10.055l-1.96-1a.5.5 0 0 0-.573.083L.655 10.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89zM11.727 10.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89z"/>
+  <path d="M11.727 8.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89z"/>
+  <path d="M11.727 6.945l1.961-1-.572-.083 1.54 1.465a.5.5 0 1 0 .689-.725l-1.54-1.464a.5.5 0 0 0-.571-.083l-1.961 1a.5.5 0 1 0 .454.89zM4.727 6.055l-1.96-1a.5.5 0 0 0-.573.083L.655 6.602a.5.5 0 1 0 .69.725l1.539-1.465-.572.083 1.96 1a.5.5 0 1 0 .455-.89z"/>
+  <path d="M5 3.002v9.996c0-.001.003.002-.003.002h6.006c-.006 0-.003-.003-.003-.002V3.002c0 .001-.003-.002.003-.002H4.997c.006 0 .003.003.003.002zm-1 0C4 2.45 4.453 2 4.997 2h6.006c.55 0 .997.456.997 1.002v9.996c0 .553-.453 1.002-.997 1.002H4.997C4.447 14 4 13.544 4 12.998V3.002z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-network.svg b/devtools/client/themes/images/tool-network.svg
new file mode 100644
index 000000000..48d1361d8
--- /dev/null
+++ b/devtools/client/themes/images/tool-network.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="#0b0b0b">
+  <rect fill-opacity=".5" x="2" y="3" width="8" height="1" rx=".5"/>
+  <rect x="6" y="6" width="8" height="1" rx=".5"/>
+  <rect fill-opacity=".5" x="4" y="9" width="8" height="1" rx=".5"/>
+  <rect x="2" y="12" width="5" height="1" rx=".5"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-options.svg b/devtools/client/themes/images/tool-options.svg
new file mode 100644
index 000000000..e8516bdfa
--- /dev/null
+++ b/devtools/client/themes/images/tool-options.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="#0b0b0b">
+  <path d="M8.513 3.416v-.918A.502.502 0 0 0 8.012 2h-.999c-.273 0-.5.226-.5.498V4.07l-.6.262c-.274.12-.534.27-.775.449l-.527.39-.567-.328-.796-.46a.502.502 0 0 0-.682.185l-.5.864a.504.504 0 0 0 .182.683l.795.46.567.326-.073.65a4.055 4.055 0 0 0 0 .898l.073.65-.567.327-.795.459a.502.502 0 0 0-.181.683l.499.864c.137.237.446.32.682.185l.796-.46.567-.327.527.39c.24.177.5.328.775.448l.6.262v1.572c0 .272.225.498.5.498h.999c.273 0 .5-.226.5-.498V11.93l.6-.262c.274-.12.534-.27.775-.449l.527-.39.567.328.796.46a.502.502 0 0 0 .682-.185l.5-.864a.504.504 0 0 0-.182-.683l-.795-.46-.567-.326.073-.65a4.055 4.055 0 0 0 0-.898l-.073-.65.567-.327.795-.459a.502.502 0 0 0 .181-.683l-.499-.864a.504.504 0 0 0-.682-.185l-.796.46-.567.327-.527-.39c-.24-.177-.5-.328-.775-.448l-.6-.262v-.654zm1 0c.345.15.67.34.968.56l.796-.459a1.504 1.504 0 0 1 2.048.55l.5.865a1.502 1.502 0 0 1-.548 2.05l-.795.459a5.055 5.055 0 0 1 0 1.118l.795.46c.717.414.958 1.337.547 2.049l-.499.864a1.502 1.502 0 0 1-2.048.55l-.796-.458c-.299.22-.623.41-.968.56v.918c0 .827-.679 1.498-1.501 1.498h-.999c-.829 0-1.5-.675-1.5-1.498v-.918c-.345-.15-.67-.34-.97-.56l-.795.459a1.504 1.504 0 0 1-2.048-.55l-.5-.865a1.502 1.502 0 0 1 .548-2.05l.795-.459a5.055 5.055 0 0 1 0-1.118l-.795-.46A1.504 1.504 0 0 1 1.2 4.932l.499-.864a1.502 1.502 0 0 1 2.048-.55l.796.458c.299-.22.624-.41.969-.56v-.918c0-.827.678-1.498 1.5-1.498h.999c.829 0 1.5.675 1.5 1.498v.918z"/>
+    <path d="M7.5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 1a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-profiler-active.svg b/devtools/client/themes/images/tool-profiler-active.svg
new file mode 100644
index 000000000..2c77b1aad
--- /dev/null
+++ b/devtools/client/themes/images/tool-profiler-active.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="#5FC749" fill-rule="evenodd">
+  <path d="M15 9.004C14.51 12.394 11.578 15 8.035 15 4.15 15 1 11.866 1 8s3.15-7 7.036-7c1.941 0 3.7.783 4.972 2.048l-.709.709A6.027 6.027 0 0 0 8.036 2c-3.33 0-6.03 2.686-6.03 6s2.7 6 6.03 6a6.023 6.023 0 0 0 5.946-4.993l1.017-.003z"/>
+  <path d="M4.137 9H3.1a5.002 5.002 0 0 0 9.8 0h-.965a4.023 4.023 0 0 1-3.9 3 4.023 4.023 0 0 1-3.898-3z" fill-opacity=".5"/>
+  <path d="M8.036 11a2.994 2.994 0 0 0 2.987-3c0-1.657-1.338-3-2.987-3a2.994 2.994 0 0 0-2.988 3c0 1.657 1.338 3 2.988 3zm0-1c1.11 0 2.011-.895 2.011-2s-.9-2-2.011-2c-1.111 0-2.012.895-2.012 2s.9 2 2.012 2z"/>
+  <path d="M10.354 6.354l4-4a.5.5 0 0 0-.708-.708l-4 4a.5.5 0 1 0 .708.708z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-profiler.svg b/devtools/client/themes/images/tool-profiler.svg
new file mode 100644
index 000000000..92c33bb06
--- /dev/null
+++ b/devtools/client/themes/images/tool-profiler.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="#0b0b0b" fill-rule="evenodd">
+  <path d="M15 9.004C14.51 12.394 11.578 15 8.035 15 4.15 15 1 11.866 1 8s3.15-7 7.036-7c1.941 0 3.7.783 4.972 2.048l-.709.709A6.027 6.027 0 0 0 8.036 2c-3.33 0-6.03 2.686-6.03 6s2.7 6 6.03 6a6.023 6.023 0 0 0 5.946-4.993l1.017-.003z"/>
+  <path d="M4.137 9H3.1a5.002 5.002 0 0 0 9.8 0h-.965a4.023 4.023 0 0 1-3.9 3 4.023 4.023 0 0 1-3.898-3z" fill-opacity=".5"/>
+  <path d="M8.036 11a2.994 2.994 0 0 0 2.987-3c0-1.657-1.338-3-2.987-3a2.994 2.994 0 0 0-2.988 3c0 1.657 1.338 3 2.988 3zm0-1c1.11 0 2.011-.895 2.011-2s-.9-2-2.011-2c-1.111 0-2.012.895-2.012 2s.9 2 2.012 2z"/>
+  <path d="M10.354 6.354l4-4a.5.5 0 0 0-.708-.708l-4 4a.5.5 0 1 0 .708.708z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-scratchpad.svg b/devtools/client/themes/images/tool-scratchpad.svg
new file mode 100644
index 000000000..a75985cf3
--- /dev/null
+++ b/devtools/client/themes/images/tool-scratchpad.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="#0b0b0b">
+  <path d="M5 1.5a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0v-2zM8.5 3.5v-2a.5.5 0 0 0-1 0v2a.5.5 0 0 0 1 0zM12 3.5v-2a.5.5 0 1 0-1 0v2a.5.5 0 1 0 1 0zM5 7h4a.5.5 0 0 0 0-1H5a.5.5 0 0 0 0 1zM5 11h2a.5.5 0 1 0 0-1H5a.5.5 0 1 0 0 1zM6 9h5a.5.5 0 1 0 0-1H6a.5.5 0 0 0 0 1z"/>
+  <path d="M3 3.996v9.008c0-.003 0-.004.002-.004h9.996c-.001 0 .002-.003.002.004V3.996c0 .003 0 .004-.002.004H3.002C3.003 4 3 4.003 3 3.996zm-1 0C2 3.446 2.456 3 3.002 3h9.996A.998.998 0 0 1 14 3.996v9.008c0 .55-.456.996-1.002.996H3.002A.998.998 0 0 1 2 13.004V3.996z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-shadereditor.svg b/devtools/client/themes/images/tool-shadereditor.svg
new file mode 100644
index 000000000..f668e5f67
--- /dev/null
+++ b/devtools/client/themes/images/tool-shadereditor.svg
@@ -0,0 +1,12 @@
+<!-- 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="#0b0b0b">
+  <path d="M2 4v8h12V4H2zm0-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/>
+  <circle cx="1" cy="3" r="1"/>
+  <circle cx="1" cy="13" r="1"/>
+  <circle cx="15" cy="13" r="1"/>
+  <circle cx="15" cy="3" r="1"/>
+  <path d="M1.215 3.911l13 9 .411.285.57-.822-.411-.285-13-9-.411-.285-.57.822z"/>
+  <path fill-opacity=".3" d="M8 5h2v2H8zM8 8h2v2L9 8.711zM5 5.962V5h2v2h-.828l-.729-.368zM11 5h2v2h-2zM11 8h2v2h-2z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-storage.svg b/devtools/client/themes/images/tool-storage.svg
new file mode 100644
index 000000000..7b8863662
--- /dev/null
+++ b/devtools/client/themes/images/tool-storage.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="#0b0b0b">
+  <path d="M7.5 7.556c3.006 0 5.5-1.136 5.5-2.778C13 3.136 10.506 2 7.5 2S2 3.136 2 4.778C2 6.42 4.494 7.556 7.5 7.556zm0-1c-2.517 0-4.5-.903-4.5-1.778S4.983 3 7.5 3s4.5.903 4.5 1.778-1.983 1.778-4.5 1.778zM7.5 14.445c3.006 0 5.5-1.137 5.5-2.778 0-.878-.595-1.606-1.657-2.081-.244-.11-.473-.107-.778-.033-.056.014-.565.158-.765.205-.626.148-1.342.231-2.3.231-.973 0-1.683-.082-2.273-.225a18.574 18.574 0 0 1-.673-.193c-.277-.076-.479-.089-.707-.005l-.035.014C2.638 10.064 2 10.756 2 11.667c0 1.641 2.494 2.778 5.5 2.778zm0-1c-2.517 0-4.5-.904-4.5-1.778 0-.432.354-.816 1.194-1.163h-.002c-.012.005.003.006.097.032-.056-.016.474.144.702.2.669.162 1.458.253 2.509.253 1.035 0 1.828-.092 2.53-.257.228-.054.74-.2.77-.207a.756.756 0 0 1 .134-.027c.734.329 1.066.735 1.066 1.169 0 .874-1.983 1.778-4.5 1.778z"/>
+  <path d="M7.5 10.945c3.006 0 5.5-1.137 5.5-2.778 0-.873-.62-1.601-1.693-2.082-.244-.109-.472-.106-.773-.032-.051.013-.551.158-.75.206-.615.147-1.326.23-2.284.23-.973 0-1.68-.082-2.265-.225a17.077 17.077 0 0 1-.66-.19c-.27-.076-.467-.092-.692-.015l-.054.02C2.65 6.568 2 7.259 2 8.168c0 1.641 2.494 2.778 5.5 2.778zm0-1C4.983 9.945 3 9.04 3 8.167c0-.426.364-.813 1.21-1.163l-.003.001c-.011.004.005.005.099.032-.079-.022.465.143.69.198.665.163 1.452.254 2.504.254 1.036 0 1.825-.092 2.517-.258.228-.054.733-.2.758-.207a.766.766 0 0 1 .124-.026c.748.335 1.101.75 1.101 1.169 0 .874-1.983 1.778-4.5 1.778z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-styleeditor.svg b/devtools/client/themes/images/tool-styleeditor.svg
new file mode 100644
index 000000000..dbe5ddb6b
--- /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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b">
+  <path d="M5.5 2C3.565 2 2.806 3.12 3.065 4.587c.239 1.346.117 1.76-.435 2.39l-.054.06c-.252.288-.39.474-.523.74L1.94 8l.112.224c.132.265.27.45.523.739l.054.06c.552.63.674 1.044.435 2.39C2.802 12.904 3.527 14 5.5 14a.5.5 0 1 0 0-1c-1.291 0-1.614-.487-1.45-1.413.292-1.65.081-2.37-.669-3.223l-.053-.06c-.2-.229-.296-.357-.38-.528v.448c.084-.17.18-.299.38-.528l.053-.06c.75-.854.961-1.573.67-3.223C3.89 3.515 4.24 3 5.5 3a.5.5 0 1 0 0-1zM10.5 3c1.26 0 1.609.515 1.45 1.413-.292 1.65-.081 2.37.669 3.223l.053.06c.2.229.296.357.38.528v-.448c-.084.17-.18.299-.38.528l-.053.06c-.75.854-.961 1.573-.67 3.223.165.926-.158 1.413-1.449 1.413a.5.5 0 1 0 0 1c1.973 0 2.698-1.096 2.435-2.587-.239-1.346-.117-1.76.435-2.39l.054-.06c.252-.288.39-.474.523-.74L14.06 8l-.112-.224c-.132-.265-.27-.45-.523-.739l-.054-.06c-.552-.63-.674-1.044-.435-2.39C13.194 3.12 12.435 2 10.5 2a.5.5 0 0 0 0 1z"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-webaudio.svg b/devtools/client/themes/images/tool-webaudio.svg
new file mode 100644
index 000000000..8275dc200
--- /dev/null
+++ b/devtools/client/themes/images/tool-webaudio.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" stroke="#0b0b0b">
+  <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M2.7 8.6c-.1-2.9.2-4.1 1.4-4.1 1.8 0 .6 6.6 2.5 6.6s1-6.4 3-6.4.7 6.4 2.7 6.4c1.4 0 1.5-3.5 1.5-3.5"/>
+</svg>
diff --git a/devtools/client/themes/images/tool-webconsole.svg b/devtools/client/themes/images/tool-webconsole.svg
new file mode 100644
index 000000000..d6752f6c4
--- /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 width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#0b0b0b" fill-rule="evenodd">
+  <path d="M14 4V3H2v1h12zm0 1v8H2V5h12zM1 3.002C1 2.45 1.45 2 2.007 2h11.986A1.01 1.01 0 0 1 15 3.002v9.996C15 13.55 14.55 14 13.993 14H2.007A1.01 1.01 0 0 1 1 12.998V3.002z"/>
+  <path d="M4.09 7.859l2.062 2-.006-.713-2.061 2.062a.5.5 0 0 0 .707.707l2.062-2.061a.5.5 0 0 0-.006-.713l-2.061-2a.5.5 0 1 0-.697.718z"/>
+</svg>
diff --git a/devtools/client/themes/images/tracer-icon.png b/devtools/client/themes/images/tracer-icon.png
new file mode 100644
index 000000000..2b5aaf0aa
--- /dev/null
+++ b/devtools/client/themes/images/tracer-icon.png
diff --git a/devtools/client/themes/images/tracer-icon@2x.png b/devtools/client/themes/images/tracer-icon@2x.png
new file mode 100644
index 000000000..33c4c7d7f
--- /dev/null
+++ b/devtools/client/themes/images/tracer-icon@2x.png
diff --git a/devtools/client/themes/images/vview-delete.png b/devtools/client/themes/images/vview-delete.png
new file mode 100644
index 000000000..6c0ef603c
--- /dev/null
+++ b/devtools/client/themes/images/vview-delete.png
diff --git a/devtools/client/themes/images/vview-delete@2x.png b/devtools/client/themes/images/vview-delete@2x.png
new file mode 100644
index 000000000..d0718a1d6
--- /dev/null
+++ b/devtools/client/themes/images/vview-delete@2x.png
diff --git a/devtools/client/themes/images/vview-edit.png b/devtools/client/themes/images/vview-edit.png
new file mode 100644
index 000000000..b3009981f
--- /dev/null
+++ b/devtools/client/themes/images/vview-edit.png
diff --git a/devtools/client/themes/images/vview-edit@2x.png b/devtools/client/themes/images/vview-edit@2x.png
new file mode 100644
index 000000000..d0923fd0a
--- /dev/null
+++ b/devtools/client/themes/images/vview-edit@2x.png
diff --git a/devtools/client/themes/images/vview-lock.png b/devtools/client/themes/images/vview-lock.png
new file mode 100644
index 000000000..e9b257e3a
--- /dev/null
+++ b/devtools/client/themes/images/vview-lock.png
diff --git a/devtools/client/themes/images/vview-lock@2x.png b/devtools/client/themes/images/vview-lock@2x.png
new file mode 100644
index 000000000..11d86275f
--- /dev/null
+++ b/devtools/client/themes/images/vview-lock@2x.png
diff --git a/devtools/client/themes/images/vview-open-inspector.png b/devtools/client/themes/images/vview-open-inspector.png
new file mode 100644
index 000000000..877d195c9
--- /dev/null
+++ b/devtools/client/themes/images/vview-open-inspector.png
diff --git a/devtools/client/themes/images/vview-open-inspector@2x.png b/devtools/client/themes/images/vview-open-inspector@2x.png
new file mode 100644
index 000000000..207e5376f
--- /dev/null
+++ b/devtools/client/themes/images/vview-open-inspector@2x.png
diff --git a/devtools/client/themes/images/webconsole.svg b/devtools/client/themes/images/webconsole.svg
new file mode 100644
index 000000000..6c21e549e
--- /dev/null
+++ b/devtools/client/themes/images/webconsole.svg
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-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" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="60" viewBox="0 0 72 60">
+  <defs>
+    <rect id="glyphShape-colorSwatch" width="8" height="8" ry="2" rx="2"/>
+    <rect id="glyphShape-colorSwatch-border" width="10" height="10" ry="2" rx="2"/>
+    <polygon id="glyphShape-errorX" points="9.9,8.5 8.5,9.9 6,7.4 3.6,9.8 2.2,8.4 4.6,6 2.2,3.6 3.6,2.2 6,4.6 8.4,2.2 9.8,3.6 7.4,6"/>
+    <path id="glyphShape-warningTriangle" d="M9.9,8.6l-3.1-6C6.6,2.2,6.3,2,6,2C5.7,2,5.4,2.2,5.2,2.5l-3.1,6C2,8.9,2,9.3,2.1,9.6C2.3,9.8,2.6,10,2.9,10 h6.1c0.4,0,0.6-0.2,0.8-0.4C10,9.3,10,8.9,9.9,8.6z"/>
+    <path id="glyphShape-exclamationPoint" d="M6,7.7c-0.6,0-1,0.4-1,0.8C5,9,5.4,9.3,6,9.3c0.6,0,1-0.4,1-0.8 C7,8.1,6.6,7.7,6,7.7z M6,7c0.6,0,1-0.4,1-1V5c0-0.6-0.4-1-1-1S5,4.4,5,5v1C5,6.6,5.4,7,6,7z"/>
+    <circle id="glyphShape-infoCircle" cx="6" cy="6" r="4"/>
+    <path id="glyphShape-infoGlyph" d="M6,6C5.4,6,5,6.4,5,7v1c0,0.6,0.4,1,1,1s1-0.4,1-1V7C7,6.4,6.6,6,6,6z M6,5c0.6,0,1-0.4,1-1S6.6,3,6,3S5,3.4,5,4S5.4,5,6,5z"/>
+    <style>
+      .icon-colorSwatch-border {
+        fill: #fff;
+        fill-opacity: .7;
+      }
+      .icon-colorSwatch-network {
+        fill: #000;
+      }
+      .icon-colorSwatch-css {
+        fill: #00b6f0;
+      }
+      .icon-colorSwatch-js {
+        fill: #fb9500;
+      }
+      .icon-colorSwatch-logging {
+        fill: #808080;
+      }
+      .icon-colorSwatch-security {
+        fill: #ec1e0d;
+      }
+      .icon-glyphOverlay {
+        fill: #fff;
+      }
+
+      #icon-indicator-input {
+        fill: #8fa1b2;
+      }
+      #icon-indicator-output {
+        fill: #667380;
+      }
+      #light-icons:target #icon-indicator-input {
+        fill: #45494d;
+      }
+      #light-icons:target #icon-indicator-output {
+        fill: #8a9199;
+      }
+    </style>
+  </defs>
+  <g id="icon-colorSwatch-network">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-network" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-css" transform="translate(0 12)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-css" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-js" transform="translate(0 24)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-js" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-logging" transform="translate(0 36)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-logging" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-security" transform="translate(0 48)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-security" x="2" y="2"/>
+  </g>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-network" class="icon-colorSwatch-network" transform="translate(12)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-css" class="icon-colorSwatch-css" transform="translate(12 12)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-js" class="icon-colorSwatch-js" transform="translate(12 24)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-logging" class="icon-colorSwatch-logging" transform="translate(12 36)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-security" class="icon-colorSwatch-security" transform="translate(12 48)"/>
+  <g id="icon-warningTriangle-css" transform="translate(24 12)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-css"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-warningTriangle-js" transform="translate(24 24)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-js"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-warningTriangle-logging" transform="translate(24 36)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-logging"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-warningTriangle-security" transform="translate(24 48)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-security"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-infoCircle-logging" transform="translate(36 36)">
+    <use xlink:href="#glyphShape-infoCircle" class="icon-colorSwatch-logging"/>
+    <use xlink:href="#glyphShape-infoGlyph" class="icon-glyphOverlay"/>
+  </g>
+  <g id="light-icons">
+    <path id="icon-indicator-input" d="M6.5,1.2L5.4,2.3L9,6L5.3,9.7l1.1,1.1L11,6L6.5,1.2z M1.5,1.2 L0.4,2.3L4,6L0.3,9.7l1.1,1.1L6,6L1.5,1.2z" transform="translate(48 36)"/>
+    <polygon id="icon-indicator-output" points="10,5 4.3,5 6.8,2.4 5.5,1.2 1,6 5.5,10.8 6.9,9.6 4.3,7 10,7" transform="translate(60 36)"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/devtools/client/themes/inspector.css b/devtools/client/themes/inspector.css
new file mode 100644
index 000000000..28a959ab8
--- /dev/null
+++ b/devtools/client/themes/inspector.css
@@ -0,0 +1,216 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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 {
+  --eyedropper-image: url(images/command-eyedropper.svg);
+}
+
+.theme-firebug {
+  --eyedropper-image: url(images/firebug/command-eyedropper.svg);
+}
+
+:root.theme-light {
+  --breadcrumbs-border-color: #f3f3f3;
+}
+
+:root.theme-dark {
+  --breadcrumbs-border-color: #454d5d;
+}
+
+* {
+  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;
+}
+
+/* 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;
+  flex: 1 1 auto;
+}
+
+/* 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;
+}
+
+/* Use flex layout for the Inspector toolbar. For now, it's done
+   specifically for the Inspector toolbar since general rule applied
+   on .devtools-toolbar breaks breadcrumbs and also toolbars in other
+   panels (e.g. webconsole, debugger), these are not ready for HTML
+   layout yet. */
+#inspector-toolbar.devtools-toolbar {
+  display: flex;
+}
+
+#inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer {
+  flex-grow: 1;
+  display: inline-block;
+}
+
+/* Add element toolbar button */
+#inspector-element-add-button::before {
+  background-image: url("chrome://devtools/skin/images/add.svg");
+  list-style-image: url("chrome://devtools/skin/images/add.svg");
+  -moz-user-focus: normal;
+}
+
+#inspector-searchlabel {
+  overflow: hidden;
+  margin-inline-end: 2px;
+}
+
+#inspector-search {
+  flex: unset;
+}
+
+/* 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: var(--eyedropper-image);
+}
+
+#inspector-sidebar-toggle-box {
+  line-height: initial;
+}
+
+#inspector-breadcrumbs-toolbar {
+  padding: 0px;
+  border-bottom-width: 0px;
+  border-top-width: 1px;
+  border-top-color: var(--breadcrumbs-border-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;
+}
+
+#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;
+  font: message-box;
+}
+
+#inspector-sidebar-container {
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+}
+
+#inspector-sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+/* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */
+.inspector-tabpanel > * {
+  -moz-user-focus: normal;
+}
+
+/* "no results" warning message displayed in the ruleview and in the computed view */
+
+#ruleview-no-results,
+#computedview-no-results {
+  color: var(--theme-body-color-inactive);
+  text-align: center;
+  margin: 5px;
+}
+
+/* Markup Box */
+
+iframe {
+  border: 0;
+}
+
+#markup-box {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+#markup-box > iframe {
+  height: 100%;
+  width: 100%;
+}
+
diff --git a/devtools/client/themes/jit-optimizations.css b/devtools/client/themes/jit-optimizations.css
new file mode 100644
index 000000000..363810504
--- /dev/null
+++ b/devtools/client/themes/jit-optimizations.css
@@ -0,0 +1,108 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/**
+ * JIT View
+ */
+
+#jit-optimizations-view {
+  width: 350px;
+  min-width: 200px;
+  white-space: nowrap;
+  --jit-tree-row-height: 14;
+  --jit-tree-header-height: 16;
+}
+
+/* Override layout styles applied by minimal-xul.css */
+#jit-optimizations-view div {
+  display: block;
+}
+#jit-optimizations-view span {
+  display: inline-block;
+}
+
+#jit-optimizations-view > div {
+  /* For elements that need to flex to fill the available space and/or
+   * scroll on overflow, we need to use the old flexbox model, since the
+   * parent nodes are in the XUL namespace. The new flexbox model can't
+   * properly compute dimensions and will ignore `flex: ${number}` properties,
+   * since no other parent node has a flex display. */
+  display: -moz-box;
+  -moz-box-flex: 1;
+  -moz-box-orient: vertical;
+}
+
+#jit-optimizations-view .optimization-header,
+#jit-optimizations-view .tree * {
+  /* We can, however, display child nodes as flex to take advantage of
+   * horizontal/vertical inlining. */
+  display: flex;
+}
+
+#jit-optimizations-view .optimization-header {
+  height: var(--jit-tree-header-height);
+  padding: 2px 5px;
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+#jit-optimizations-view .header-title {
+  font-weight: bold;
+  padding-inline-end: 7px;
+}
+
+#jit-optimizations-view .tree {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  -moz-box-orient: vertical;
+  overflow: auto;
+  background-color: var(--theme-body-background);
+}
+
+#jit-optimizations-view .tree-node {
+  height: var(--jit-tree-row-height);
+}
+
+#jit-optimizations-view .tree-node button {
+  display: none;
+}
+
+#jit-optimizations-view .optimization-outcome.success {
+  color: var(--theme-highlight-green);
+}
+#jit-optimizations-view .optimization-outcome.failure {
+  color: var(--theme-highlight-red);
+}
+
+.theme-dark .opt-icon::before {
+  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+}
+.theme-light .opt-icon::before {
+  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+}
+
+.opt-icon::before {
+  display: inline-block;
+  content: "";
+  background-repeat: no-repeat;
+  background-size: 72px 60px;
+  /* show grey "i" bubble by default */
+  background-position: -36px -36px;
+  width: 10px;
+  height: 10px;
+  max-height: 12px;
+}
+
+.opt-icon::before {
+  margin: 1px 6px 0 0;
+}
+
+.opt-icon.warning::before {
+  background-position: -24px -24px;
+}
+
+/* Frame Component */
+.frame-link {
+  margin-inline-start: 7px;
+}
diff --git a/devtools/client/themes/layout.css b/devtools/client/themes/layout.css
new file mode 100644
index 000000000..d04d3ff4c
--- /dev/null
+++ b/devtools/client/themes/layout.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/. */
+
+#layoutview-container {
+  height: 100%;
+  width: 100%;
+}
+
+.layoutview-no-grids {
+  font-style: italic;
+  text-align: center;
+  padding: 0.5em;
+}
diff --git a/devtools/client/themes/light-theme.css b/devtools/client/themes/light-theme.css
new file mode 100644
index 000000000..7604123e8
--- /dev/null
+++ b/devtools/client/themes/light-theme.css
@@ -0,0 +1,338 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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(resource://devtools/client/themes/variables.css);
+@import url(resource://devtools/client/themes/common.css);
+@import url(toolbars.css);
+@import url(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);
+}
+
+::-moz-selection {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.theme-bg-darker {
+  background: var(--theme-selection-background-semitransparent);
+}
+
+.theme-selected,
+.CodeMirror-hint-active {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.theme-bg-contrast,
+.variable-or-property:not([overridden])[changed] {
+  background: var(--theme-contrast-background);
+}
+
+.theme-link,
+.cm-s-mozilla .cm-link,
+.CodeMirror-Tern-type {
+  color: var(--theme-highlight-blue);
+}
+
+/*
+ * 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);
+}
+
+.theme-gutter {
+  background-color: var(--theme-tab-toolbar-background);
+  color: var(--theme-content-color3);
+  border-color: var(--theme-splitter-color);
+}
+
+.theme-separator { /* grey */
+  border-color: #cddae5;
+}
+
+.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;
+}
+
+.theme-fg-color1,
+.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-color2,
+.cm-s-mozilla .cm-attribute,
+.cm-s-mozilla .cm-builtin,
+.cm-s-mozilla .cm-property,
+.variables-view-variable > .title > .name {
+  color: var(--theme-highlight-red);
+}
+
+.cm-s-mozilla .cm-def {
+  color: var(--theme-body-color);
+}
+
+.CodeMirror-Tern-completion-object:before {
+  background-color: hsl(208,56%,40%);
+}
+
+.theme-fg-color3,
+.cm-s-mozilla .cm-variable,
+.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-color4 {
+  color: var(--theme-highlight-orange);
+}
+
+.theme-fg-color5,
+.cm-s-mozilla .cm-keyword {
+  color: var(--theme-highlight-red);
+}
+
+.theme-fg-color6,
+.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%);
+}
+
+.theme-fg-color7,
+.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-fg-contrast { /* To be used for text on theme-bg-contrast */
+  color: black;
+}
+
+.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);
+}
+
+.ruleview-swatch,
+.computedview-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,
+.cm-s-mozilla .cm-variable-2,
+.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 {
+  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(176, 176, 176);
+}
+
+.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;
+}
+
+/* Highlight for evaluating current statement. */
+div.CodeMirror span.eval-text {
+  background-color: #ccd;
+}
+
+.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
+  color: var(--theme-content-color3);
+}
+
+.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
+  border-right-color: var(--theme-splitter-color);
+  background-color: var(--theme-sidebar-background);
+}
+
+.cm-s-markup-view pre {
+  line-height: 1.4em;
+  min-height: 1.4em;
+}
+
+/* XUL panel styling (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
+
+.theme-tooltip-panel .panel-arrowcontent {
+  padding: 4px;
+  background: rgba(255, 255, 255, .9);
+  border-radius: 5px;
+  box-shadow: none;
+  border: 3px solid #d9e1e8;
+}
+
+/* Overring panel arrow images to fit with our light and dark themes */
+
+.theme-tooltip-panel .panel-arrow {
+  --arrow-margin: -4px;
+}
+
+:root[platform="win"] .theme-tooltip-panel .panel-arrow {
+  --arrow-margin: -7px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="top"],
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light.png");
+  /* !important is needed to override the popup.css rules in toolkit/themes */
+  width: 39px !important;
+  height: 16px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"],
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png");
+  /* !important is needed to override the popup.css rules in toolkit/themes */
+  width: 16px !important;
+  height: 39px !important;
+}
+
+.theme-tooltip-panel .panel-arrow[side="top"] {
+  margin-bottom: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  margin-top: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"] {
+  margin-right: var(--arrow-margin);
+}
+
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  margin-left: var(--arrow-margin);
+}
+
+@media (min-resolution: 1.1dppx) {
+  .theme-tooltip-panel .panel-arrow[side="top"],
+  .theme-tooltip-panel .panel-arrow[side="bottom"] {
+    list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light@2x.png");
+  }
+
+  .theme-tooltip-panel .panel-arrow[side="left"],
+  .theme-tooltip-panel .panel-arrow[side="right"] {
+    list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light@2x.png");
+  }
+}
+
+.theme-tooltip-panel .devtools-tooltip-simple-text {
+  color: black;
+  border-bottom: 1px solid #d9e1e8;
+}
+
+.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
+  border-bottom: 0;
+}
+
+.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 000000000..4b4cfd031
--- /dev/null
+++ b/devtools/client/themes/markup.css
@@ -0,0 +1,351 @@
+/* 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-outline: var(--theme-splitter-color);
+}
+
+.theme-dark:root {
+  --markup-outline: var(--theme-highlight-pink);
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+:root {
+  -moz-control-character-visibility: visible;
+}
+
+body {
+  -moz-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;
+  min-width: 100%;
+}
+
+/* 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: -1000em;
+  padding-left: 1001em;
+}
+
+/* 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: 0;
+  width: 100%;
+  /* Offset these by 1000px to make sure they cover the full width of the view */
+  padding-left: 1000px;
+  left: -1000px;
+}
+
+.tag-line.drag-target::before {
+  border-top: 2px solid var(--theme-content-color2);
+}
+
+.tag-line.drop-target::before {
+  border-top: 2px solid var(--theme-contrast-background);
+}
+
+/* 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;
+}
+
+.tag-line {
+  min-height: 1.4em;
+  line-height: 1.4em;
+  position: relative;
+  cursor: default;
+  padding-left: 2px;
+}
+
+.tag-line[selected] + .children {
+  background-image: linear-gradient(to top, var(--markup-outline), var(--markup-outline));
+  background-repeat: no-repeat;
+  /* Shorten the outline height by 4px to account for the 2px top padding and
+   * allow for a 2px bottom padding */
+  background-size: 1.5px calc(100% - 4px);
+  /* Align the outline to under the expander arrow and provide 2px top
+   * padding */
+  background-position: -6px 2px;
+  border-left: 6px solid transparent;
+  margin-left: -6px;
+}
+
+.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;
+  height: 100%;
+  z-index: 0;
+}
+
+.expander {
+  display: inline-block;
+  margin-left: -14px;
+  vertical-align: middle;
+  /* 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;
+}
+
+/* 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;
+}
+
+.closing-bracket {
+  pointer-events: none;
+}
+
+.newattr {
+  display: inline-block;
+  width: 1em;
+  height: 1ex;
+  margin-right: -1em;
+  padding: 1px 0;
+}
+
+.attr-value .link {
+  text-decoration: underline;
+}
+
+.newattr:focus {
+  margin-right: 0;
+}
+
+.flash-out {
+  transition: background .5s;
+}
+
+.markupview-events {
+  display: none;
+  cursor: pointer;
+}
+
+.editor {
+  /* Make sure the editor still appears above the tag-state */
+  position: relative;
+  z-index: 1;
+}
+
+.editor.text {
+  display: inline-block;
+}
+
+.editor.text pre,
+.editor.comment pre {
+  font: inherit;
+}
+
+/* Whitespace only text nodes are sometimes shown in the markup-view, and when they do
+   they get a greyed-out whitespace symbol so users know what they are */
+.editor.text .whitespace {
+  padding: 0 .5em;
+}
+
+.editor.text .whitespace::before {
+  content: "";
+  display: inline-block;
+  height: 4px;
+  width: 4px;
+  border: 1px solid var(--theme-body-color-inactive);
+  border-radius: 50%;
+}
+
+.tag-line[selected] .editor.text .whitespace::before {
+  border-color: white;
+}
+
+.more-nodes {
+  padding-left: 16px;
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #CCC;
+}
+
+/* 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(--theme-highlight-lightorange);
+  border-radius: 50%;
+  width: .8em;
+  height: .8em;
+  margin-top: .3em;
+  left: 1px;
+  position: absolute;
+  z-index: 1;
+}
+
+/* Firebug Theme */
+
+.theme-firebug .theme-fg-color3 {
+  color: var(--theme-graphs-full-blue);
+}
+
+.theme-firebug .open,
+.theme-firebug .close,
+.theme-firebug .attr-name.theme-fg-color2 {
+  color: var(--theme-highlight-purple);
+}
+
+.theme-firebug .attr-value.theme-fg-color6 {
+  color: var(--theme-highlight-red);
+}
+
+.theme-firebug .markupview-events {
+  font-size: var(--theme-toolbar-font-size);
+}
+
+/* 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 .theme-fg-color1,
+.theme-selected ~ .editor .theme-fg-color2,
+.theme-selected ~ .editor .theme-fg-color3,
+.theme-selected ~ .editor .theme-fg-color4,
+.theme-selected ~ .editor .theme-fg-color5,
+.theme-selected ~ .editor .theme-fg-color6,
+.theme-selected ~ .editor .theme-fg-color7 {
+  color: var(--theme-selection-color);
+}
+
+/* Make sure even text nodes are white when selected in the Inspector panel. */
+.theme-firebug .theme-selected ~ .editor .open,
+.theme-firebug .theme-selected ~ .editor .close {
+  color: var(--theme-selection-color);
+}
+
+/* In case a node isn't displayed in the page, we fade the syntax highlighting */
+.not-displayed .open,
+.not-displayed .close {
+  opacity: .7;
+}
+
+/* Events */
+.markupview-events {
+  font-size: 8px;
+  font-weight: bold;
+  line-height: 10px;
+  border-radius: 3px;
+  padding: 0px 2px;
+  margin-inline-start: 5px;
+  -moz-user-select: none;
+}
+
+.markupview-events {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
+}
diff --git a/devtools/client/themes/memory.css b/devtools/client/themes/memory.css
new file mode 100644
index 000000000..f77609621
--- /dev/null
+++ b/devtools/client/themes/memory.css
@@ -0,0 +1,637 @@
+/* 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);
+  --cell-border-color-light: rgba(255,255,255,0.1);
+  --focus-cell-border-color: rgba(255,255,255,0.5);
+  --row-alt-background-color: rgba(86, 117, 185, 0.15);
+  --row-hover-background-color: rgba(86, 117, 185, 0.25);
+}
+
+.theme-light {
+  --cell-border-color: rgba(0,0,0,0.15);
+  --cell-border-color-light: rgba(0,0,0,0.1);
+  --focus-cell-border-color: rgba(0,0,0,0.3);
+  --row-alt-background-color: rgba(76,158,217,0.1);
+  --row-hover-background-color: rgba(76,158,217,0.2);
+}
+
+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;
+  align-items: center;
+}
+
+.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 > .toolbar-group > label.display-by > span {
+  margin-inline-end: 5px;
+}
+
+.devtools-toolbar > .toolbar-group > label.label-by > span {
+  margin-inline-end: 5px;
+}
+
+.devtools-toolbar > label {
+  margin-inline-end: 5px;
+}
+
+#select-view {
+  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 {
+  align-self: stretch;
+  margin: 2px;
+}
+
+/**
+ * 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 rgba(128,128,128,0.15);
+  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;
+  position: relative;
+  min-height: 1em;
+  min-width: 1.3em;
+}
+
+.snapshot-list-item.selected .delete::before {
+  filter: invert(1);
+}
+
+.snapshot-list-item .delete::before {
+  background-image: url("chrome://devtools/skin/images/close.svg");
+  background-position: 0.2em 0;
+}
+
+.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-body-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 > .take-snapshot {
+  padding: 5px;
+}
+
+#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 {
+  padding-inline-end: 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 {
+  /**
+   * Flex: contains an .arrow and some text, which need to be laid out
+   * horizontally, vertically aligned in the middle of the container.
+   */
+  display: flex;
+  align-items: center;
+  /**
+   * Flexing to fill out remaining vertical space.
+   * @see .header and .heap-tree-item */
+  flex: 1;
+  padding-inline-start: 5px;
+}
+
+/**
+ * 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-content-color3);
+  /* 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 {
+  width: 38px;
+  min-width: 20px;
+  overflow: hidden;
+  margin: 0;
+}
+
+.heap-tree-item-individuals > button {
+  height: 10px;
+  width: 32px;
+
+  /* Override default styles for toolbar buttons to fix entire row height. */
+  margin: 0 auto !important;
+  padding: 0;
+}
+
+/**
+ * Tree map
+ */
+
+.tree-map-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+/**
+ * Heap tree errors.
+ */
+
+.error::before {
+  content: "";
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  max-height: 12px;
+  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-size: 72px 60px;
+  background-position: -24px -24px;
+  background-repeat: no-repeat;
+  margin: 0px;
+  margin-top: 2px;
+  margin-inline-end: 5px;
+}
+
+.theme-light .error::before {
+  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+}
+
+/**
+ * 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-alt);
+}
+
+.theme-dark svg {
+  --arrow-color: var(--theme-body-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 000000000..543f4eff0
--- /dev/null
+++ b/devtools/client/themes/moz.build
@@ -0,0 +1,16 @@
+# -*- 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',
+]
+
+DevToolsModules(
+    'common.css',
+    'splitters.css',
+    'toolbars.css',
+    'variables.css',
+)
diff --git a/devtools/client/themes/netmonitor.css b/devtools/client/themes/netmonitor.css
new file mode 100644
index 000000000..fea634a0e
--- /dev/null
+++ b/devtools/client/themes/netmonitor.css
@@ -0,0 +1,975 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+#toolbar-labels {
+  overflow: hidden;
+}
+
+#react-clear-button-hook,
+#react-details-pane-toggle-hook {
+  display: flex;
+}
+
+/**
+ * Collapsed details pane needs to be truly hidden to prevent both accessibility
+ * tools and keyboard from accessing its contents.
+ */
+#details-pane.pane-collapsed {
+  visibility: hidden;
+}
+
+#details-pane-toggle[disabled] {
+  display: none;
+}
+
+#custom-pane {
+  overflow: auto;
+}
+
+#response-content-image-box {
+  overflow: auto;
+}
+
+#network-statistics-charts {
+  overflow: auto;
+}
+
+.cropped-textbox .textbox-input {
+  /* workaround for textbox not supporting the @crop attribute */
+  text-overflow: ellipsis;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #toolbar-spacer,
+  #details-pane-toggle,
+  #details-pane.pane-collapsed,
+  .requests-menu-waterfall,
+  #requests-menu-network-summary-button > .toolbarbutton-text {
+    display: none;
+  }
+}
+
+:root.theme-dark {
+  --table-splitter-color: rgba(255,255,255,0.15);
+  --table-zebra-background: rgba(255,255,255,0.05);
+
+  --timing-blocked-color: rgba(235, 83, 104, 0.8);
+  --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+  --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
+  --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
+  --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
+  --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
+
+  --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
+  --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
+}
+
+:root.theme-light {
+  --table-splitter-color: rgba(0,0,0,0.15);
+  --table-zebra-background: rgba(0,0,0,0.05);
+
+  --timing-blocked-color: rgba(235, 83, 104, 0.8);
+  --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+  --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
+  --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */
+  --timing-wait-color: rgba(95, 136, 176, 0.8); /* blue grey */
+  --timing-receive-color: rgba(44, 187, 15, 0.8); /* green */
+
+  --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
+  --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
+}
+
+:root.theme-firebug {
+  --table-splitter-color: rgba(0,0,0,0.15);
+  --table-zebra-background: rgba(0,0,0,0.05);
+
+  --timing-blocked-color:  rgba(235, 83, 104, 0.8); /* red */
+  --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
+  --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
+  --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
+  --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
+  --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
+
+  --sort-ascending-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
+  --sort-descending-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg);
+}
+
+#requests-menu-empty-notice {
+  margin: 0;
+  padding: 12px;
+  font-size: 120%;
+}
+
+#notice-perf-message {
+  margin-top: 2px;
+}
+
+#requests-menu-perf-notice-button {
+  min-width: 30px;
+  min-height: 26px;
+  margin: 0;
+  list-style-image: url(images/profiler-stopwatch.svg);
+}
+
+/* Make sure the icon is visible on Linux (to overwrite a rule
+  in xul.css that hides the icon if there is no label.
+  See also bug 1278050. */
+#requests-menu-perf-notice-button .button-icon {
+  display: block;
+}
+
+#requests-menu-perf-notice-button .button-text {
+  display: none;
+}
+
+#requests-menu-reload-notice-button {
+  min-height: 26px;
+  margin: 0;
+  background-color: var(--theme-toolbar-background);
+}
+
+/* Network requests table */
+
+#requests-menu-toolbar {
+  padding: 0;
+}
+
+.theme-firebug #requests-menu-toolbar {
+  height: 16px !important;
+}
+
+.requests-menu-subitem {
+  padding: 3px;
+}
+
+.requests-menu-header-button {
+  -moz-appearance: none;
+  background-color: transparent;
+  border-image: linear-gradient(transparent 15%,
+                                var(--theme-splitter-color) 15%,
+                                var(--theme-splitter-color) 85%,
+                                transparent 85%) 1 1;
+  border-style: solid;
+  border-width: 0;
+  border-inline-start-width: 1px;
+  min-width: 1px;
+  min-height: 24px;
+  margin: 0;
+  padding-bottom: 2px;
+  padding-inline-start: 13px;
+  padding-top: 2px;
+  text-align: center;
+  color: inherit;
+  font-weight: inherit !important;
+}
+
+.requests-menu-header:first-child .requests-menu-header-button {
+  border-width: 0;
+}
+
+.requests-menu-header-button:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.requests-menu-header-button > .button-box > .button-icon,
+#requests-menu-waterfall-image {
+  display: -moz-box;
+  height: 4px;
+  margin-inline-end: 6px;
+  -moz-box-ordinal-group: 2;
+  width: 7px;
+}
+
+.requests-menu-header-button[sorted=ascending] > .button-box > .button-icon,
+.requests-menu-header-button[sorted=ascending] #requests-menu-waterfall-image {
+  list-style-image: var(--sort-ascending-image);
+}
+
+.requests-menu-header-button[sorted=descending] > .button-box > .button-icon,
+.requests-menu-header-button[sorted=descending] #requests-menu-waterfall-image {
+  list-style-image: var(--sort-descending-image);
+}
+
+.requests-menu-header-button > .button-box > .button-text,
+#requests-menu-waterfall-label-wrapper {
+  -moz-box-flex: 1;
+}
+
+.requests-menu-header-button[sorted],
+.requests-menu-header-button[sorted]:hover {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.requests-menu-header-button[sorted],
+.requests-menu-header[active] + .requests-menu-header .requests-menu-header-button {
+  border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
+}
+
+/* Firebug theme support for Network panel header */
+
+.theme-firebug .requests-menu-header {
+  padding: 0 !important;
+  font-weight: bold;
+  background: linear-gradient(rgba(255, 255, 255, 0.05),
+                              rgba(0, 0, 0, 0.05)),
+                              #C8D2DC;
+}
+
+.theme-firebug .requests-menu-header-button {
+  min-height: 17px;
+}
+
+.theme-firebug .requests-header-menu-button[sorted] {
+  background-color: #AAC3DC;
+}
+
+.theme-firebug .requests-header-menu:hover:active {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.1),
+                                    transparent);
+}
+
+
+/* Network requests table: specific column dimensions */
+
+.requests-menu-status {
+  max-width: 6em;
+  text-align: center;
+  width: 10vw;
+}
+
+.requests-menu-method,
+.requests-menu-method-box {
+  max-width: 7em;
+  text-align: center;
+  width: 10vw;
+}
+
+.requests-menu-icon-and-file {
+  width: 22vw;
+}
+
+.requests-menu-icon {
+  background: #fff;
+  width: calc(1em + 4px);
+  height: calc(1em + 4px);
+  margin: -4px 0px;
+  margin-inline-end: 4px;
+}
+
+.requests-menu-icon {
+  outline: 1px solid var(--table-splitter-color);
+}
+
+.requests-menu-security-and-domain {
+  width: 14vw;
+}
+
+.requests-security-state-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 4px;
+}
+
+.side-menu-widget-item.selected .requests-security-state-icon {
+  filter: brightness(1.3);
+}
+
+.security-state-insecure {
+  list-style-image: url(chrome://devtools/skin/images/security-state-insecure.svg);
+}
+
+.security-state-secure {
+  list-style-image: url(chrome://devtools/skin/images/security-state-secure.svg);
+}
+
+.security-state-weak {
+  list-style-image: url(chrome://devtools/skin/images/security-state-weak.svg);
+}
+
+.security-state-broken {
+  list-style-image: url(chrome://devtools/skin/images/security-state-broken.svg);
+}
+
+.security-state-local {
+  list-style-image: url(chrome://devtools/skin/images/globe.svg);
+}
+
+.requests-menu-type,
+.requests-menu-size {
+  max-width: 6em;
+  text-align: center;
+  width: 8vw;
+}
+
+.requests-menu-cause {
+  max-width: 8em;
+  width: 8vw;
+}
+
+.requests-menu-cause-stack {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
+  font-size: 8px;
+  font-weight: bold;
+  line-height: 10px;
+  border-radius: 3px;
+  padding: 0 2px;
+  margin: 0;
+  margin-inline-end: 3px;
+  -moz-user-select: none;
+}
+
+.requests-menu-transferred {
+  max-width: 8em;
+  text-align: center;
+  width: 8vw;
+}
+
+.side-menu-widget-item.selected .requests-menu-transferred.theme-comment {
+  color: var(--theme-selection-color);
+}
+
+/* Network requests table: status codes */
+
+.requests-menu-status-code {
+  margin-inline-start: 3px !important;
+  width: 3em;
+  margin-inline-end: -3em !important;
+}
+
+.requests-menu-status-icon {
+  background: #fff;
+  height: 10px;
+  width: 10px;
+  margin-inline-start: 5px;
+  margin-inline-end: 5px;
+  border-radius: 10px;
+  transition: box-shadow 0.5s ease-in-out;
+}
+
+.side-menu-widget-item.selected .requests-menu-status-icon {
+  filter: brightness(1.3);
+}
+
+.requests-menu-status-icon:not([code]) {
+  background-color: var(--theme-content-color2);
+}
+
+.requests-menu-status-icon[code="cached"] {
+  border: 2px solid var(--theme-content-color2);
+  background-color: transparent;
+}
+
+.requests-menu-status-icon[code^="1"] {
+  background-color: var(--theme-highlight-blue);
+}
+
+.requests-menu-status-icon[code^="2"] {
+  background-color: var(--theme-highlight-green);
+}
+
+/* 3xx are triangles */
+.requests-menu-status-icon[code^="3"] {
+  background-color: transparent;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 10px solid var(--theme-highlight-lightorange);
+  border-radius: 0;
+}
+
+/* 4xx and 5xx are squares - error codes */
+.requests-menu-status-icon[code^="4"] {
+ background-color: var(--theme-highlight-red);
+  border-radius: 0; /* squares */
+}
+
+.requests-menu-status-icon[code^="5"] {
+  background-color: var(--theme-highlight-pink);
+  border-radius: 0;
+  transform: rotate(45deg);
+}
+
+/* Network requests table: waterfall header */
+
+.requests-menu-waterfall {
+  padding-inline-start: 0;
+}
+
+#requests-menu-waterfall-label:not(.requests-menu-waterfall-visible) {
+  padding-inline-start: 13px;
+}
+
+.requests-menu-timings-division {
+  width: 100px;
+  padding-top: 2px;
+  padding-inline-start: 4px;
+  font-size: 75%;
+  pointer-events: none;
+  box-sizing: border-box;
+  text-align: start;
+}
+
+.requests-menu-timings-division:first-child {
+  width: 98px; /* Substract 2px for borders */
+}
+
+.requests-menu-timings-division:not(:first-child) {
+  border-inline-start: 1px dashed;
+  margin-inline-start: -100px !important; /* Don't affect layout. */
+}
+
+.requests-menu-timings-division:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-division:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.theme-dark .requests-menu-timings-division {
+  border-inline-start-color: #5a6169 !important;
+}
+
+.theme-light .requests-menu-timings-division {
+  border-inline-start-color: #585959 !important;
+}
+
+.requests-menu-timings-division[division-scale=second],
+.requests-menu-timings-division[division-scale=minute] {
+  font-weight: 600;
+}
+
+/* Network requests table: waterfall items */
+
+.requests-menu-subitem.requests-menu-waterfall {
+  padding-inline-start: 0px;
+  padding-inline-end: 4px;
+  /* Background created on a <canvas> in js. */
+  /* @see devtools/client/netmonitor/netmonitor-view.js */
+  background-image: -moz-element(#waterfall-background);
+  background-repeat: repeat-y;
+  background-position: -1px center;
+}
+
+.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
+  background-position: right center;
+}
+
+.requests-menu-timings:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.requests-menu-timings-total {
+  padding-inline-start: 4px;
+  font-size: 85%;
+  font-weight: 600;
+}
+
+.requests-menu-timings-box {
+  height: 9px;
+}
+
+.theme-firebug .requests-menu-timings-box {
+  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
+  height: 16px;
+}
+
+.requests-menu-timings-box.blocked {
+  background-color: var(--timing-blocked-color);
+}
+
+.requests-menu-timings-box.dns {
+  background-color: var(--timing-dns-color);
+}
+
+.requests-menu-timings-box.connect {
+  background-color: var(--timing-connect-color);
+}
+
+.requests-menu-timings-box.send {
+  background-color: var(--timing-send-color);
+}
+
+.requests-menu-timings-box.wait {
+  background-color: var(--timing-wait-color);
+}
+
+.requests-menu-timings-box.receive {
+  background-color: var(--timing-receive-color);
+}
+
+/* SideMenuWidget */
+#network-table .side-menu-widget-empty-text,
+#network-table .side-menu-widget-container {
+  background-color: var(--theme-body-background);
+}
+
+#network-table .side-menu-widget-item {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
+
+.side-menu-widget-item-contents {
+  padding: 0px;
+}
+
+.side-menu-widget-item:not(.selected)[odd] {
+  background-color: var(--table-zebra-background);
+}
+
+.side-menu-widget-item:not(.selected):hover {
+  background-color: var(--theme-selection-background-semitransparent);
+}
+
+.theme-firebug .side-menu-widget-item:not(.selected):hover {
+  background: #EFEFEF;
+}
+
+.theme-firebug .requests-menu-subitem {
+  padding: 1px;
+}
+
+/* HTTP Status Column */
+.theme-firebug .requests-menu-subitem.requests-menu-status {
+  font-weight: bold;
+}
+
+/* Method Column */
+
+.theme-firebug .requests-menu-subitem.requests-menu-method-box {
+  color: rgb(128, 128, 128);
+}
+
+.side-menu-widget-item.selected .requests-menu-method {
+  color: var(--theme-selection-color);
+}
+
+/* Size Column */
+.theme-firebug .requests-menu-subitem.requests-menu-size {
+  text-align: end;
+  padding-inline-end: 4px;
+}
+
+/* Network request details */
+
+#details-pane-toggle:-moz-locale-dir(ltr)::before,
+#details-pane-toggle.pane-collapsed:-moz-locale-dir(rtl)::before {
+  background-image: var(--theme-pane-collapse-image);
+}
+
+#details-pane-toggle.pane-collapsed:-moz-locale-dir(ltr)::before,
+#details-pane-toggle:-moz-locale-dir(rtl)::before {
+  background-image: var(--theme-pane-expand-image);
+}
+
+/* Network request details tabpanels */
+
+.tabpanel-content {
+  background-color: var(--theme-sidebar-background);
+}
+
+.theme-dark .tabpanel-content {
+  color: var(--theme-selection-color);
+}
+
+#headers-tabpanel {
+  background-color: var(--theme-toolbar-background);
+}
+
+.theme-firebug .variables-view-scope:focus > .title {
+  color: var(--theme-body-color);
+}
+
+/* Summary tabpanel */
+
+.tabpanel-summary-container {
+  padding: 1px;
+}
+
+.tabpanel-summary-label {
+  padding-inline-start: 4px;
+  padding-inline-end: 3px;
+  font-weight: 600;
+}
+
+.tabpanel-summary-value {
+  color: inherit;
+  padding-inline-start: 3px;
+}
+
+.theme-dark .tabpanel-summary-value {
+  color: var(--theme-selection-color);
+}
+
+/* Headers tabpanel */
+
+#headers-summary-status,
+#headers-summary-version {
+  padding-bottom: 2px;
+}
+
+#headers-summary-size {
+  padding-top: 2px;
+}
+
+#headers-summary-resend {
+  margin-top: -10px;
+  margin-inline-end: 6px;
+}
+
+#toggle-raw-headers {
+  margin-top: -10px;
+  margin-inline-end: 6px;
+}
+
+.raw-response-textarea {
+  height: 50vh;
+}
+
+/* Response tabpanel */
+
+#response-content-info-header {
+  margin: 0;
+  padding: 3px 8px;
+  background-color: var(--theme-highlight-red);
+  color: var(--theme-selection-color);
+}
+
+#response-content-image-box {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+#response-content-image {
+  background: #fff;
+  border: 1px dashed GrayText;
+  margin-bottom: 10px;
+}
+
+/* Preview tabpanel */
+
+#preview-tabpanel {
+  background: #fff;
+}
+
+#response-preview {
+  display: -moz-box;
+  -moz-box-flex: 1;
+}
+
+/* Timings tabpanel */
+
+#timings-tabpanel .tabpanel-summary-label {
+  width: 10em;
+}
+
+#timings-tabpanel .requests-menu-timings-box {
+  transition: transform 0.2s ease-out;
+  border: none;
+  min-width: 1px;
+}
+
+#timings-tabpanel .requests-menu-timings-total {
+  transition: transform 0.2s ease-out;
+}
+
+.theme-firebug #timings-tabpanel .requests-menu-timings-total {
+  color: var(--theme-body-color);
+}
+
+/* Security tabpanel */
+.security-info-section {
+  padding-inline-start: 1em;
+}
+
+.theme-dark #security-error-message {
+  color: var(--theme-selection-color);
+}
+
+#security-tabpanel {
+  overflow: auto;
+}
+
+.security-warning-icon {
+  background-image: url(images/alerticon-warning.png);
+  background-size: 13px 12px;
+  margin-inline-start: 5px;
+  vertical-align: top;
+  width: 13px;
+  height: 12px;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .security-warning-icon {
+    background-image: url(images/alerticon-warning@2x.png);
+  }
+}
+
+/* Custom request form */
+
+#custom-pane {
+  padding: 0.6em 0.5em;
+}
+
+.custom-header {
+  font-size: 1.1em;
+}
+
+.custom-section {
+  margin-top: 0.5em;
+}
+
+#custom-method-value {
+  width: 4.5em;
+}
+
+/* Performance analysis buttons */
+
+#requests-menu-network-summary-button {
+  background: none;
+  box-shadow: none;
+  border-color: transparent;
+  list-style-image: url(images/profiler-stopwatch.svg);
+  padding-inline-end: 0;
+  cursor: pointer;
+  margin-inline-end: 1em;
+  min-width: 0;
+}
+
+/* Performance analysis view */
+
+#network-statistics-toolbar {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+#network-statistics-back-button {
+  min-width: 4em;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-top: none;
+  border-bottom: none;
+  border-inline-start: none;
+}
+
+#network-statistics-view-splitter {
+  border-color: rgba(0,0,0,0.2);
+  cursor: default;
+  pointer-events: none;
+}
+
+#network-statistics-charts {
+  min-height: 1px;
+}
+
+#network-statistics-charts {
+  background-color: var(--theme-sidebar-background);
+}
+
+#network-statistics-charts .pie-chart-container {
+  margin-inline-start: 3vw;
+  margin-inline-end: 1vw;
+}
+
+#network-statistics-charts .table-chart-container {
+  margin-inline-start: 1vw;
+  margin-inline-end: 3vw;
+}
+
+.chart-colored-blob[name=html] {
+  fill: var(--theme-highlight-bluegrey);
+  background: var(--theme-highlight-bluegrey);
+}
+
+.chart-colored-blob[name=css] {
+  fill: var(--theme-highlight-blue);
+  background: var(--theme-highlight-blue);
+}
+
+.chart-colored-blob[name=js] {
+  fill: var(--theme-highlight-lightorange);
+  background: var(--theme-highlight-lightorange);
+}
+
+.chart-colored-blob[name=xhr] {
+  fill: var(--theme-highlight-orange);
+  background: var(--theme-highlight-orange);
+}
+
+.chart-colored-blob[name=fonts] {
+  fill: var(--theme-highlight-purple);
+  background: var(--theme-highlight-purple);
+}
+
+.chart-colored-blob[name=images] {
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);
+}
+
+.chart-colored-blob[name=media] {
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
+}
+
+.chart-colored-blob[name=flash] {
+  fill: var(--theme-highlight-red);
+  background: var(--theme-highlight-red);
+}
+
+.table-chart-row-label[name=cached] {
+  display: none;
+}
+
+.table-chart-row-label[name=count] {
+  width: 3em;
+  text-align: end;
+}
+
+.table-chart-row-label[name=label] {
+  width: 7em;
+}
+
+.table-chart-row-label[name=size] {
+  width: 7em;
+}
+
+.table-chart-row-label[name=time] {
+  width: 7em;
+}
+
+/* Firebug theme support for network charts */
+
+.theme-firebug .chart-colored-blob[name=html] {
+  fill: rgba(94, 136, 176, 0.8); /* Blue-Grey highlight */
+  background: rgba(94, 136, 176, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=css] {
+  fill: rgba(70, 175, 227, 0.8); /* light blue */
+  background: rgba(70, 175, 227, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=js] {
+  fill: rgba(235, 83, 104, 0.8); /* red */
+  background: rgba(235, 83, 104, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=xhr] {
+  fill: rgba(217, 102, 41, 0.8); /* orange  */
+  background: rgba(217, 102, 41, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=fonts] {
+  fill: rgba(223, 128, 255, 0.8); /* pink */
+  background: rgba(223, 128, 255, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=images] {
+  fill: rgba(112, 191, 83, 0.8); /* pink */
+  background: rgba(112, 191, 83, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=media] {
+  fill: rgba(235, 235, 84, 0.8); /* yellow */
+  background: rgba(235, 235, 84, 0.8);
+}
+
+.theme-firebug .chart-colored-blob[name=flash] {
+  fill: rgba(84, 235, 159, 0.8); /* cyan */
+  background: rgba(84, 235, 159, 0.8);
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #requests-menu-toolbar {
+    height: 22px;
+  }
+
+  .requests-menu-header-button {
+    min-height: 22px;
+    padding-left: 8px;
+  }
+
+  #details-pane {
+    margin: 0 !important;
+    /* To prevent all the margin hacks to hide the sidebar. */
+  }
+
+  .requests-menu-status {
+    max-width: none;
+    width: 12vw;
+  }
+
+  .requests-menu-status-code {
+    width: auto;
+  }
+
+  .requests-menu-method,
+  .requests-menu-method-box {
+    max-width: none;
+    width: 14vw;
+  }
+
+  .requests-menu-icon-and-file {
+    width: 22vw;
+  }
+
+  .requests-menu-security-and-domain {
+    width: 18vw;
+  }
+
+  .requests-menu-type {
+    width: 10vw;
+  }
+
+  .requests-menu-transferred,
+  .requests-menu-size {
+    width: 12vw;
+  }
+}
+
+/* Platform overrides (copied in from the old platform specific files) */
+:root[platform="win"] .requests-menu-header-button > .button-box {
+  padding: 0;
+}
+
+:root[platform="win"] .requests-menu-timings-division {
+  padding-top: 1px;
+  font-size: 90%;
+}
+
+:root[platform="linux"] #headers-summary-resend {
+  padding: 4px;
+}
+
+:root[platform="linux"] #toggle-raw-headers {
+  padding: 4px;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  :root[platform="linux"] .requests-menu-header-button {
+    font-size: 85%;
+  }
+}
diff --git a/devtools/client/themes/performance.css b/devtools/client/themes/performance.css
new file mode 100644
index 000000000..5ed3b6352
--- /dev/null
+++ b/devtools/client/themes/performance.css
@@ -0,0 +1,794 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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);
+  --cell-border-color-light: rgba(255,255,255,0.1);
+  --focus-cell-border-color: rgba(255,255,255,0.5);
+  --row-alt-background-color: rgba(86, 117, 185, 0.15);
+  --row-hover-background-color: rgba(86, 117, 185, 0.25);
+}
+
+.theme-light {
+  --cell-border-color: rgba(0,0,0,0.15);
+  --cell-border-color-light: rgba(0,0,0,0.1);
+  --focus-cell-border-color: rgba(0,0,0,0.3);
+  --row-alt-background-color: rgba(76,158,217,0.1);
+  --row-hover-background-color: rgba(76,158,217,0.2);
+}
+
+.theme-firebug {
+  --cell-border-color: rgba(0,0,0,0.15);
+  --cell-border-color-light: rgba(0,0,0,0.1);
+  --focus-cell-border-color: rgba(0,0,0,0.3);
+  --row-alt-background-color: rgba(76,158,217,0.1);
+  --row-hover-background-color: rgba(76,158,217,0.2);
+}
+
+/*
+ * DE-XUL: Set a sidebar width because inline XUL components will cause the flex
+ * to overflow if dynamically sized.
+ */
+.performance-tool {
+  --sidebar-width: 185px;
+}
+
+/**
+ * A generic class to hide elements, replacing the `element.hidden` attribute
+ * that we use to hide elements that can later be active
+ */
+.hidden {
+  display: none;
+  width: 0px;
+  height: 0px;
+}
+
+/* Toolbar */
+
+#performance-toolbar-control-other {
+  padding-inline-end: 5px;
+}
+
+#performance-toolbar-controls-detail-views .toolbarbutton-text {
+  padding-inline-start: 4px;
+  padding-inline-end: 8px;
+}
+
+#filter-button {
+  list-style-image: url(chrome://devtools/skin/images/filter.svg);
+}
+
+#performance-filter-menupopup > menuitem .menu-iconic-left::after {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: 0 8px;
+  border-radius: 1px;
+}
+
+/* Details panel buttons */
+
+#select-waterfall-view {
+  list-style-image: url(images/performance-icons.svg#details-waterfall);
+}
+
+#select-js-calltree-view,
+#select-memory-calltree-view {
+  list-style-image: url(images/performance-icons.svg#details-call-tree);
+}
+
+#select-js-flamegraph-view,
+#select-memory-flamegraph-view {
+  list-style-image: url(images/performance-icons.svg#details-flamegraph);
+}
+
+#select-optimizations-view {
+  list-style-image: url(images/profiler-stopwatch.svg);
+}
+
+/* Recording buttons */
+
+#clear-button::before {
+  background-image: var(--clear-icon-url);
+}
+
+#main-record-button::before {
+  background-image: url(images/profiler-stopwatch.svg);
+}
+
+#import-button::before {
+  background-image: url(images/import.svg);
+}
+
+#main-record-button .button-icon, #import-button .button-icon {
+  margin: 0;
+}
+
+#main-record-button .button-text, #import-button .button-text {
+  display: none;
+}
+
+.notice-container .record-button {
+  padding: 5px !important;
+}
+
+.notice-container .record-button.checked,
+.notice-container .record-button.checked {
+  color: var(--theme-selection-color) !important;
+  background: var(--theme-selection-background) !important;
+}
+
+/* Sidebar & recording items */
+
+#recordings-pane {
+  border-inline-end: 1px solid var(--theme-splitter-color);
+  width: var(--sidebar-width);
+}
+
+#recording-controls-mount {
+  width: var(--sidebar-width);
+}
+
+#recording-controls-mount > div {
+  width: var(--sidebar-width);
+}
+
+/*
+ * DE-XUL: The height of the toolbar is not correct without tweaking the line-height.
+ */
+#recordings-pane .devtools-toolbar {
+  line-height: 0;
+}
+
+.theme-sidebar {
+  position: relative;
+}
+
+/**
+ * DE-XUL: This is probably only needed for the html:div inside of a vbox.
+ */
+#recordings-list > div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.recording-list {
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  margin: 0;
+  padding: 0;
+  background-color: var(--theme-sidebar-background);
+  border-inline-end: 1px solid var(--theme-splitter-color);
+}
+
+.recording-list-item {
+  display: flex;
+  flex-direction: column;
+  color: var(--theme-body-color);
+  border-bottom: 1px solid rgba(128,128,128,0.15);
+  padding: 8px;
+  cursor: default;
+}
+
+.recording-list-item.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.recording-list-empty {
+  padding: 8px;
+}
+
+.recording-list-item-label {
+  font-size: 110%;
+}
+
+.recording-list-item-footer {
+  padding-top: 4px;
+  font-size: 90%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.recording-list-item-save {
+  background: none;
+  border: none;
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 90%;
+  padding:0;
+}
+
+.recording-list-item-duration,
+.recording-list-item-save {
+  color: var(--theme-body-color-alt);
+}
+
+.recording-list-item.selected .recording-list-item-duration,
+.recording-list-item.selected .recording-list-item-save {
+  color: var(--theme-body-color-alt);
+  color: var(--theme-selection-color);
+}
+
+#recordings-list .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Recording notices */
+
+.notice-container {
+  font-size: 120%;
+  background-color: var(--theme-body-background);
+  color: var(--theme-body-color);
+  padding-bottom: 20vh;
+}
+
+.tool-disabled-message {
+  text-align: center;
+}
+
+.console-profile-recording-notice,
+.console-profile-stop-notice {
+  overflow: hidden;
+}
+
+.console-profile-command {
+  font-family: monospace;
+  margin: 3px 2px;
+}
+
+.realtime-disabled-message,
+.realtime-disabled-on-e10s-message {
+  display: none;
+}
+
+#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message,
+#performance-view[e10s="unsupported"] .realtime-disabled-message {
+  display: initial;
+  opacity: 0.5;
+}
+
+.buffer-status-message,
+.buffer-status-message-full {
+  display: none;
+}
+
+#details-pane-container[buffer-status="in-progress"] .buffer-status-message {
+  display: initial;
+  opacity: 0.5;
+}
+
+#details-pane-container[buffer-status="full"] .buffer-status-message {
+  display: initial;
+  color: var(--theme-highlight-red);
+  font-weight: bold;
+  opacity: 1;
+}
+
+#details-pane-container[buffer-status="full"] .buffer-status-message-full {
+  display: initial;
+}
+
+/* Profile call tree */
+
+.call-tree-cells-container {
+  overflow: auto;
+}
+
+.call-tree-cells-container[categories-hidden] .call-tree-category {
+  display: none;
+}
+
+.call-tree-header {
+  font-size: 90%;
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+}
+
+.call-tree-header[type="duration"],
+.call-tree-cell[type="duration"],
+.call-tree-header[type="self-duration"],
+.call-tree-cell[type="self-duration"] {
+  min-width: 6vw;
+  width: 6vw;
+}
+
+.call-tree-header[type="percentage"],
+.call-tree-cell[type="percentage"],
+.call-tree-header[type="self-percentage"],
+.call-tree-cell[type="self-percentage"] {
+  min-width: 5vw;
+  width: 5vw;
+}
+
+.call-tree-header[type="samples"],
+.call-tree-cell[type="samples"] {
+  min-width: 4.5vw;
+  width: 4.5vw;
+}
+
+.call-tree-header[type="count"],
+.call-tree-cell[type="count"],
+.call-tree-header[type="self-count"],
+.call-tree-cell[type="self-count"],
+.call-tree-header[type="size"],
+.call-tree-cell[type="size"],
+.call-tree-header[type="self-size"],
+.call-tree-cell[type="self-size"],
+.call-tree-header[type="count-percentage"],
+.call-tree-cell[type="count-percentage"],
+.call-tree-header[type="self-count-percentage"],
+.call-tree-cell[type="self-count-percentage"],
+.call-tree-header[type="size-percentage"],
+.call-tree-cell[type="size-percentage"],
+.call-tree-header[type="self-size-percentage"],
+.call-tree-cell[type="self-size-percentage"] {
+  min-width: 6vw;
+  width: 6vw;
+}
+
+.call-tree-header,
+.call-tree-cell {
+  -moz-box-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 1px 4px;
+  color: var(--theme-body-color);
+  border-inline-end-color: var(--cell-border-color);
+}
+
+.call-tree-header:not(:last-child),
+.call-tree-cell:not(:last-child) {
+  border-inline-end-width: 1px;
+  border-inline-end-style: solid;
+}
+
+.call-tree-header:not(:last-child) {
+  text-align: center;
+}
+
+.call-tree-cell:not(:last-child) {
+  text-align: end;
+}
+
+.call-tree-header {
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.call-tree-item .call-tree-cell,
+.call-tree-item .call-tree-cell[type=function] description {
+  -moz-user-select: text;
+  /* so that optimizations view doesn't break the lines in call tree */
+  white-space: nowrap;
+}
+
+.call-tree-item .call-tree-cell::-moz-selection,
+.call-tree-item .call-tree-cell[type=function] description::-moz-selection {
+  background-color: var(--theme-highlight-orange);
+}
+
+.call-tree-item:last-child {
+  border-bottom: 1px solid var(--cell-border-color);
+}
+
+.call-tree-item:nth-child(2n) {
+  background-color: var(--row-alt-background-color);
+}
+
+.call-tree-item:hover {
+  background-color: var(--row-hover-background-color);
+}
+
+.call-tree-item:focus {
+  background-color: var(--theme-selection-background);
+}
+
+.call-tree-item:focus description {
+  color: var(--theme-selection-color) !important;
+}
+
+.call-tree-item:focus .call-tree-cell {
+  border-inline-end-color: var(--focus-cell-border-color);
+}
+
+.call-tree-item:not([origin="content"]) .call-tree-name,
+.call-tree-item:not([origin="content"]) .call-tree-url,
+.call-tree-item:not([origin="content"]) .call-tree-line,
+.call-tree-item:not([origin="content"]) .call-tree-column {
+  /* Style chrome and non-JS nodes differently. */
+  opacity: 0.6;
+}
+
+.call-tree-name {
+  margin-inline-end: 4px !important;
+}
+
+.call-tree-url {
+  cursor: pointer;
+}
+
+.call-tree-url:hover {
+  text-decoration: underline;
+}
+
+.call-tree-url, .tree-widget-item:not(.theme-selected) .opt-url {
+  color: var(--theme-highlight-blue);
+}
+
+.call-tree-line, .tree-widget-item:not(.theme-selected) .opt-line {
+  color: var(--theme-highlight-orange);
+}
+
+.call-tree-column {
+  color: var(--theme-highlight-orange);
+  opacity: 0.6;
+}
+
+.call-tree-host {
+  margin-inline-start: 8px !important;
+  font-size: 90%;
+  color: var(--theme-content-color2);
+}
+
+.call-tree-category {
+  transform: scale(0.75);
+  transform-origin: center right;
+}
+
+/**
+ * Waterfall markers tree
+ */
+
+#waterfall-tree {
+  /* DE-XUL: convert this to display: flex once performance.xul is converted to HTML */
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
+.waterfall-markers {
+  /* DE-XUL: convert this to display: flex once performance.xul is converted to HTML */
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
+.waterfall-header {
+  display: flex;
+}
+
+.waterfall-header-ticks {
+  display: flex;
+  flex: auto;
+  align-items: center;
+  overflow: hidden;
+}
+
+.waterfall-header-name {
+  padding: 2px 4px;
+  font-size: 90%;
+}
+
+.waterfall-header-tick {
+  width: 100px;
+  font-size: 9px;
+  transform-origin: left center;
+  color: var(--theme-body-color);
+}
+
+.waterfall-header-tick:not(:first-child) {
+  margin-inline-start: -100px !important; /* Don't affect layout. */
+}
+
+.waterfall-background-ticks {
+  /* Background created on a <canvas> in js. */
+  /* @see devtools/client/performance/modules/widgets/waterfall-ticks.js */
+  background-image: -moz-element(#waterfall-background);
+  background-repeat: repeat-y;
+  background-position: -1px center;
+}
+
+/**
+ * Markers waterfall breakdown
+ */
+
+.waterfall-markers .tree {
+  /* DE-XUL: convert this to display: flex once performance.xul is converted to HTML */
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  --waterfall-tree-row-height: 15px;
+}
+
+.waterfall-markers .tree-node {
+  display: flex;
+  height: var(--waterfall-tree-row-height);
+  line-height: var(--waterfall-tree-row-height);
+}
+
+.waterfall-tree-item {
+  display: flex;
+  flex: auto;
+}
+
+.theme-light .waterfall-markers .tree-node:not([data-depth="0"]) {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0px,
+    transparent 2px,
+    rgba(0,0,0,0.025) 2px,
+    rgba(0,0,0,0.025) 4px
+  );
+}
+
+.theme-dark .waterfall-markers .tree-node:not([data-depth="0"]) {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0px,
+    transparent 2px,
+    rgba(255,255,255,0.05) 2px,
+    rgba(255,255,255,0.05) 4px
+  );
+}
+
+.theme-light .waterfall-tree-item[data-expandable] .waterfall-marker-bullet,
+.theme-light .waterfall-tree-item[data-expandable] .waterfall-marker-bar {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0px,
+    transparent 5px,
+    rgba(255,255,255,0.35) 5px,
+    rgba(255,255,255,0.35) 10px
+  );
+}
+
+.theme-dark .waterfall-tree-item[data-expandable] .waterfall-marker-bullet,
+.theme-dark .waterfall-tree-item[data-expandable] .waterfall-marker-bar {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0px,
+    transparent 5px,
+    rgba(0,0,0,0.35) 5px,
+    rgba(0,0,0,0.35) 10px
+  );
+}
+
+.waterfall-markers .tree-node[data-expanded],
+.waterfall-markers .tree-node:not([data-depth="0"]) + .tree-node[data-depth="0"] {
+  box-shadow: 0 -1px var(--cell-border-color-light);
+}
+
+.tree-node-odd .waterfall-marker {
+  background-color: var(--row-alt-background-color);
+}
+
+.waterfall-markers .tree-node:hover {
+  background-color: var(--row-hover-background-color);
+}
+
+.waterfall-markers .tree-node-last {
+  border-bottom: 1px solid var(--cell-border-color);
+}
+
+.waterfall-tree-item.focused {
+  background-color: var(--theme-selection-background);
+}
+
+/**
+ * Marker left sidebar
+ */
+
+.waterfall-sidebar {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  border-inline-end: 1px solid var(--cell-border-color);
+}
+
+.waterfall-tree-item > .waterfall-sidebar:hover,
+.waterfall-tree-item:hover > .waterfall-sidebar,
+.waterfall-tree-item.focused > .waterfall-sidebar {
+  background: transparent;
+}
+
+.waterfall-tree-item.focused > .waterfall-sidebar {
+  color: var(--theme-selection-color);
+}
+
+.waterfall-marker-bullet {
+  width: 8px;
+  height: 8px;
+  margin-inline-start: 8px;
+  margin-inline-end: 6px;
+  border-radius: 1px;
+  box-sizing: border-box;
+}
+
+.waterfall-marker-name {
+  font-size: 95%;
+  padding-bottom: 1px !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/**
+ * Marker timebar
+ */
+
+.waterfall-marker {
+  display: flex;
+  flex: auto;
+  overflow: hidden;
+}
+
+.waterfall-marker-wrap {
+  display: flex;
+  align-items: center;
+  transform-origin: left center;
+}
+
+.waterfall-marker-bar {
+  height: 9px;
+  border-radius: 1px;
+  box-sizing: border-box;
+}
+
+/**
+ * OTMT markers
+ */
+
+.waterfall-tree-item[data-otmt=true] .waterfall-marker-bullet,
+.waterfall-tree-item[data-otmt=true] .waterfall-marker-bar {
+  background-color: transparent;
+  border-width: 1px;
+  border-style: solid;
+}
+
+/**
+ * Marker details view
+ */
+
+#waterfall-details {
+  padding-inline-start: 8px;
+  padding-inline-end: 8px;
+  padding-top: 2vh;
+  overflow: auto;
+  min-width: 50px;
+}
+
+#waterfall-details > * {
+  padding-top: 3px;
+}
+
+.marker-details-bullet {
+  width: 8px;
+  height: 8px;
+  border-radius: 1px;
+}
+
+.marker-details-name-label {
+  padding-inline-end: 4px;
+}
+
+.marker-details-type {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.marker-details-duration {
+  font-weight: bold;
+}
+
+.marker-details-customcontainer .custom-button {
+  padding: 2px 5px;
+  border-width: 1px;
+}
+
+/**
+ * Marker colors
+ */
+
+menuitem.marker-color-graphs-full-red .menu-iconic-left::after,
+.marker-color-graphs-full-red {
+  background-color: var(--theme-graphs-full-red);
+  border-color: var(--theme-graphs-full-red);
+}
+menuitem.marker-color-graphs-full-blue .menu-iconic-left::after,
+.marker-color-graphs-full-blue {
+  background-color: var(--theme-graphs-full-blue);
+  border-color: var(--theme-graphs-full-blue);
+}
+
+menuitem.marker-color-graphs-green .menu-iconic-left::after,
+.marker-color-graphs-green {
+  background-color: var(--theme-graphs-green);
+  border-color: var(--theme-graphs-green);
+}
+menuitem.marker-color-graphs-blue .menu-iconic-left::after,
+.marker-color-graphs-blue {
+  background-color: var(--theme-graphs-blue);
+  border-color: var(--theme-graphs-blue);
+}
+menuitem.marker-color-graphs-bluegrey .menu-iconic-left::after,
+.marker-color-graphs-bluegrey {
+  background-color: var(--theme-graphs-bluegrey);
+  border-color: var(--theme-graphs-bluegrey);
+}
+menuitem.marker-color-graphs-purple .menu-iconic-left::after,
+.marker-color-graphs-purple {
+  background-color: var(--theme-graphs-purple);
+  border-color: var(--theme-graphs-purple);
+}
+menuitem.marker-color-graphs-yellow .menu-iconic-left::after,
+.marker-color-graphs-yellow {
+  background-color: var(--theme-graphs-yellow);
+  border-color: var(--theme-graphs-yellow);
+}
+menuitem.marker-color-graphs-orange .menu-iconic-left::after,
+.marker-color-graphs-orange {
+  background-color: var(--theme-graphs-orange);
+  border-color: var(--theme-graphs-orange);
+}
+menuitem.marker-color-graphs-red .menu-iconic-left::after,
+.marker-color-graphs-red {
+  background-color: var(--theme-graphs-red);
+  border-color: var(--theme-graphs-red);
+}
+menuitem.marker-color-graphs-grey .menu-iconic-left::after,
+.marker-color-graphs-grey{
+  background-color: var(--theme-graphs-grey);
+  border-color: var(--theme-graphs-grey);
+}
+
+/**
+ * Configurable Options
+ *
+ * Elements can be tagged with a class and visibility is controlled via a
+ * preference being applied or removed.
+ */
+
+/**
+ * devtools.performance.ui.experimental
+ */
+menuitem.experimental-option::before {
+  content: "";
+  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-repeat: no-repeat;
+  background-size: 72px 60px;
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+
+  background-position: -24px -24px;
+  margin: 2px 5px 0 0;
+  max-height: 12px;
+}
+.theme-light menuitem.experimental-option::before {
+  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+}
+
+#performance-options-menupopup:not(.experimental-enabled) .experimental-option,
+#performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
+  display: none;
+}
+
+/* for call tree */
+description.opt-icon {
+  margin: 0px 0px 0px 0px;
+}
+description.opt-icon::before {
+  margin: 1px 4px 0px 0px;
+}
diff --git a/devtools/client/themes/projecteditor/projecteditor.css b/devtools/client/themes/projecteditor/projecteditor.css
new file mode 100644
index 000000000..58de798e5
--- /dev/null
+++ b/devtools/client/themes/projecteditor/projecteditor.css
@@ -0,0 +1,184 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+.view-project-detail {
+  overflow: auto;
+}
+
+.plugin-hidden {
+  display: none;
+}
+
+.arrow {
+  -moz-appearance: treetwisty;
+  width: 20px;
+  height: 20px;
+}
+
+.arrow[open] {
+  -moz-appearance: treetwistyopen;
+}
+
+.arrow[invisible] {
+  visibility: hidden;
+}
+
+#projecteditor-menubar {
+  display: none;
+}
+
+#projecteditor-toolbar,
+#projecteditor-toolbar-bottom {
+  display: none; /* For now don't show the status bars */
+  min-height: 22px;
+  height: 22px;
+  background: rgb(237, 237, 237);
+}
+
+#sources {
+  overflow: auto;
+}
+
+.sources-tree {
+  overflow:auto;
+  overflow-x: hidden;
+  -moz-user-focus: normal;
+
+  /* Allows this to expand inside of parent xul element, while
+     still supporting child flexbox elements, including ellipses. */
+  -moz-box-flex: 1;
+  display: block;
+}
+
+.sources-tree input {
+  margin: -1px;
+  border: 1px solid gray;
+}
+
+#main-deck .sources-tree {
+  background: rgb(225, 225, 225);
+  min-width: 100px;
+}
+
+.entry {
+  color: #18191A;
+  display: flex;
+  align-items: center;
+}
+
+.entry .file-label {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.entry {
+  border: none;
+  box-shadow: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.entry:hover:not(.entry-group-title):not(.selected) {
+  background: rgba(0, 0, 0, .05);
+}
+
+.entry.selected {
+  background: rgba(56, 117, 215, 1);
+  color: #F5F7FA;
+  outline: none;
+}
+
+.entry-group-title {
+  background: rgba(56, 117, 215, 0.8);
+  color: #F5F7FA;
+  font-weight: bold;
+  font-size: 1.05em;
+  line-height: 35px;
+  padding: 0 10px;
+}
+
+.sources-tree .entry-group-title .expander {
+  display: none;
+}
+
+.entry .expander {
+  width: 16px;
+  padding: 0;
+}
+
+.tree-collapsed .children {
+  display: none;
+}
+
+/* Plugins */
+
+#projecteditor-toolbar textbox {
+  margin: 0;
+}
+
+.projecteditor-basic-display {
+  padding: 0 3px;
+}
+
+/* App Manager */
+.project-name-label {
+  font-weight: bold;
+  padding-left: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.project-flex {
+  flex: 1;
+}
+
+.project-image {
+  max-height: 25px;
+  margin-left: -10px;
+}
+
+.project-image,
+.project-status,
+.project-options {
+  flex-shrink: 0;
+}
+
+.project-status {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: solid 1px rgba(255, 255, 255, .5);
+  margin-right: 10px;
+  visibility: hidden;
+}
+
+.project-status[status=valid] {
+  background: #70bf53;
+  visibility: visible;
+}
+
+.project-status[status=warning] {
+  background: #d99b28;
+  visibility: visible;
+}
+
+.project-status[status=error] {
+  background: #ed2655;
+  visibility: visible;
+}
+
+/* Status Bar */
+.projecteditor-file-label {
+  font-weight: bold;
+  padding-left: 29px;
+  padding-right: 10px;
+  flex: 1;
+}
+
+/* Image View */
+.editor-image {
+  padding: 10px;
+}
diff --git a/devtools/client/themes/responsivedesign.inc.css b/devtools/client/themes/responsivedesign.inc.css
new file mode 100644
index 000000000..b06359ae1
--- /dev/null
+++ b/devtools/client/themes/responsivedesign.inc.css
@@ -0,0 +1,355 @@
+%if 0
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+%endif
+
+/* Responsive Mode */
+
+.browserContainer[responsivemode] {
+  background-color: #222;
+  padding: 0 20px 20px 20px;
+}
+
+.browserStack[responsivemode] {
+  box-shadow: 0 0 7px black;
+}
+
+.devtools-responsiveui-toolbar {
+  -moz-appearance: none;
+  background: transparent;
+  /* text color is textColor from dark theme, since no theme is applied to
+   * the responsive toolbar.
+   */
+  color: hsl(210,30%,85%);
+  margin: 10px 0;
+  padding: 0;
+  box-shadow: none;
+  border-bottom-width: 0;
+}
+
+.devtools-responsiveui-textinput {
+  -moz-appearance: none;
+  background: #333;
+  color: #fff;
+  border: 1px solid #111;
+  border-radius: 2px;
+  padding: 0 5px;
+  width: 200px;
+  margin: 0;
+}
+
+.devtools-responsiveui-textinput[attention] {
+  border-color: #38ace6;
+  background: rgba(56,172,230,0.4);
+}
+
+.devtools-responsiveui-menulist,
+.devtools-responsiveui-toolbarbutton {
+  -moz-appearance: none;
+  -moz-box-align: center;
+  min-width: 32px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border: 1px solid hsla(210,8%,5%,.45);
+  border-radius: 0;
+  background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+  margin: 0 3px;
+  color: inherit;
+}
+
+.devtools-responsiveui-menulist .menulist-editable-box {
+  -moz-appearance: none;
+  background-color: transparent;
+}
+
+.devtools-responsiveui-menulist html|*.menulist-editable-input {
+  -moz-appearance: none;
+  color: inherit;
+  text-align: center;
+}
+
+.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
+  background: hsla(212,7%,57%,.35);
+}
+
+.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
+  -moz-box-orient: horizontal;
+}
+
+.devtools-responsiveui-menulist:-moz-focusring,
+.devtools-responsiveui-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.7);
+  outline-offset: -4px;
+}
+
+.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
+  border-color: hsla(210,8%,5%,.6);
+  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-responsiveui-menulist[open=true],
+.devtools-responsiveui-toolbarbutton[open=true],
+.devtools-responsiveui-toolbarbutton[checked=true] {
+  border-color: hsla(210,8%,5%,.6) !important;
+  background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
+  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-responsiveui-toolbarbutton[checked=true] {
+  color: hsl(208,100%,60%);
+}
+
+.devtools-responsiveui-toolbarbutton[checked=true]:hover {
+  background-color: transparent !important;
+}
+
+.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
+  background-color: hsla(210,8%,5%,.2) !important;
+}
+
+.devtools-responsiveui-menulist > .menulist-label-box {
+  text-align: center;
+}
+
+.devtools-responsiveui-menulist > .menulist-dropmarker {
+  -moz-appearance: none;
+  display: -moz-box;
+  background-color: transparent;
+  list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  -moz-box-align: center;
+  border-width: 0;
+  min-width: 16px;
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+  -moz-appearance: none;
+  color: inherit;
+  border-width: 0;
+  border-inline-end: 1px solid hsla(210,8%,5%,.45);
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu-button] {
+  padding: 0 1px;
+  -moz-box-align: stretch;
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  -moz-box-align: center;
+  padding: 0 3px;
+}
+
+.devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
+.devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
+  margin-left: 0;
+}
+
+.devtools-responsiveui-close {
+  list-style-image: url("chrome://devtools/skin/images/close.svg");
+}
+
+.devtools-responsiveui-close > image {
+  filter: invert(1);
+}
+
+.devtools-responsiveui-rotate {
+  list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png");
+}
+
+@media (min-resolution: 1.1dppx) {
+  .devtools-responsiveui-rotate {
+    list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png");
+  }
+}
+
+.devtools-responsiveui-touch {
+  list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch.png");
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+.devtools-responsiveui-touch[checked] {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 1.1dppx) {
+  .devtools-responsiveui-touch {
+    list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch@2x.png");
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  .devtools-responsiveui-touch[checked] {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+.devtools-responsiveui-screenshot {
+  list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot.png");
+}
+
+@media (min-resolution: 1.1dppx) {
+  .devtools-responsiveui-screenshot {
+    list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot@2x.png");
+  }
+}
+
+.devtools-responsiveui-resizebarV {
+  width: 7px;
+  height: 24px;
+  cursor: ew-resize;
+  transform: translate(12px, -12px);
+  background-size: cover;
+  background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer.png");
+}
+
+.devtools-responsiveui-resizebarH {
+  width: 24px;
+  height: 7px;
+  cursor: ns-resize;
+  transform: translate(-12px, 12px);
+  background-size: cover;
+  background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer.png");
+}
+
+.devtools-responsiveui-resizehandle {
+  width: 16px;
+  height: 16px;
+  cursor: se-resize;
+  transform: translate(12px, 12px);
+  background-size: cover;
+  background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer.png");
+}
+
+/* FxOS custom mode with additional buttons and phone look'n feel */
+
+/* Hide devtools manual resizer */
+.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
+.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
+.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
+  display: none;
+}
+
+/* Gives responsive mode a phone look'n feel */
+.browserStack[responsivemode].fxos-mode {
+  padding: 60px 15px 0;
+
+  border-radius: 25px / 20px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid #FFFFFF;
+  border-bottom-width: 0;
+
+  background-color: #353535;
+
+  box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
+
+  background-image: linear-gradient(to right, #111 11%, #333 56%);
+  min-width: 320px;
+}
+
+.devtools-responsiveui-hardware-buttons {
+  -moz-appearance: none;
+  padding: 20px;
+
+  border: 1px solid #FFFFFF;
+  border-bottom-left-radius: 25px;
+  border-bottom-right-radius: 25px;
+  border-top-width: 0;
+
+  box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
+
+  background-image: linear-gradient(to right, #111 11%, #333 56%);
+}
+
+.devtools-responsiveui-home-button {
+  -moz-user-focus: ignore;
+  width: 40px;
+  height: 30px;
+  list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-home.png");
+}
+
+.devtools-responsiveui-sleep-button {
+  -moz-user-focus: ignore;
+  -moz-appearance: none;
+  /* compensate browserStack top padding */
+  margin-top: -67px;
+  margin-right: 10px;
+
+  min-width: 10px;
+  width: 50px;
+  height: 5px;
+
+  border: 1px solid #444;
+  border-top-right-radius: 12px;
+  border-top-left-radius: 12px;
+  border-bottom-color: transparent;
+
+  background-image: linear-gradient(to top, #111 11%, #333 56%);
+}
+
+.devtools-responsiveui-sleep-button:hover:active {
+  background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
+}
+
+.devtools-responsiveui-volume-buttons {
+  margin-left: -29px;
+}
+
+.devtools-responsiveui-volume-up-button,
+.devtools-responsiveui-volume-down-button {
+  -moz-user-focus: ignore;
+  -moz-appearance: none;
+  border: 1px solid red;
+  min-width: 8px;
+  height: 40px;
+
+  border: 1px solid #444;
+  border-right-color: transparent;
+
+  background-image: linear-gradient(to right, #111 11%, #333 56%);
+}
+
+.devtools-responsiveui-volume-up-button:hover:active,
+.devtools-responsiveui-volume-down-button:hover:active {
+  background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
+}
+
+.devtools-responsiveui-volume-up-button {
+  border-top-left-radius: 12px;
+}
+
+.devtools-responsiveui-volume-down-button {
+  border-bottom-left-radius: 12px;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .devtools-responsiveui-resizebarV {
+    background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer@2x.png");
+  }
+
+  .devtools-responsiveui-resizebarH {
+    background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer@2x.png");
+  }
+
+  .devtools-responsiveui-resizehandle {
+    background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer@2x.png");
+  }
+}
diff --git a/devtools/client/themes/rules.css b/devtools/client/themes/rules.css
new file mode 100644
index 000000000..9055101f5
--- /dev/null
+++ b/devtools/client/themes/rules.css
@@ -0,0 +1,561 @@
+/* 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-light {
+  --rule-highlight-background-color: #ffee99;
+}
+
+.theme-dark {
+  --rule-highlight-background-color: #594724;
+}
+
+.theme-firebug {
+  --rule-highlight-background-color: #ffee99;
+  --rule-property-name: darkgreen;
+  --rule-property-value: darkblue;
+}
+
+/* Rule View Tabpanel */
+
+.theme-firebug .ruleview {
+  font-family: monospace;
+  font-size: 11px;
+}
+
+#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 {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+}
+
+#ruleview-toolbar {
+  display: flex;
+}
+
+#ruleview-toolbar > .devtools-searchbox:first-child {
+  padding-inline-start: 0px;
+}
+
+#ruleview-command-toolbar {
+  display: flex;
+}
+
+#pseudo-class-panel {
+  display: flex;
+  height: 24px;
+  overflow: hidden;
+  transition: height 150ms ease;
+}
+
+#pseudo-class-panel[hidden] {
+  height: 0px;
+}
+
+#pseudo-class-panel > label {
+  -moz-user-select: none;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+}
+
+/* Rule View Container */
+
+#ruleview-container {
+  -moz-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-code {
+  direction: ltr;
+}
+
+.ruleview-property:not(:hover) > .ruleview-enableproperty {
+  pointer-events: none;
+}
+
+.ruleview-expandable-container[hidden] {
+  display: none;
+}
+
+.ruleview-expandable-container {
+  display: block;
+}
+
+.ruleview-namecontainer {
+  cursor: text;
+}
+
+.ruleview-propertyvaluecontainer {
+  cursor: text;
+  padding-right: 5px;
+}
+
+.ruleview-propertyvaluecontainer a {
+  cursor: pointer;
+}
+
+.ruleview-computedlist,
+.ruleview-overridden-rule-filter[hidden],
+.ruleview-warning[hidden] {
+  display: none;
+}
+
+.ruleview-computedlist[user-open],
+.ruleview-computedlist[filter-open] {
+  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;
+
+  -moz-user-select: none;
+  margin-bottom: 2px;
+}
+
+.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[unselectable],
+.ruleview-rule-source[unselectable] > .ruleview-rule-source-label {
+  cursor: default;
+}
+
+.theme-firebug .ruleview-rule-source-label {
+  font-family: var(--proportional-font-family);
+  font-weight: bold;
+  color: #0000FF;
+}
+
+.ruleview-rule-source:not([unselectable]):hover {
+  text-decoration: underline;
+}
+
+.ruleview-header {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  padding: 1px 4px;
+  -moz-user-select: none;
+  word-wrap: break-word;
+  vertical-align: middle;
+  min-height: 1.5em;
+  line-height: 1.5em;
+  margin-top: -1px;
+}
+
+.theme-firebug .theme-gutter.ruleview-header {
+  font-family: var(--proportional-font-family);
+  font-weight: bold;
+  color: inherit;
+  border: none;
+  margin: 4px 0;
+  padding: 3px 4px 2px 4px;
+  line-height: inherit;
+  min-height: 0;
+  background: var(--theme-header-background);
+}
+
+:root[platform="win"] .ruleview-header,
+:root[platform="linux"] .ruleview-header {
+  margin-top: 4px;
+}
+
+.ruleview-header.ruleview-expandable-header {
+  cursor: pointer;
+}
+
+.ruleview-rule-pseudo-element {
+  padding-left:20px;
+  border-left: solid 10px;
+}
+
+.ruleview-rule {
+  padding: 2px 4px;
+}
+
+/**
+ * Display rules that don't match the current selected element and uneditable
+ * user agent styles differently
+ */
+.ruleview-rule[unmatched=true],
+.ruleview-rule[uneditable=true] {
+  background: var(--theme-tab-toolbar-background);
+}
+
+.ruleview-rule[unmatched=true] {
+  opacity: 0.5;
+}
+
+.ruleview-rule[uneditable=true] :focus {
+  outline: none;
+}
+
+.ruleview-rule[uneditable=true] .theme-link {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.ruleview-rule[uneditable=true] .ruleview-enableproperty {
+  visibility: hidden;
+}
+
+.ruleview-rule[uneditable=true] .ruleview-swatch {
+  cursor: default;
+}
+
+.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-rule[uneditable=true] .ruleview-propertyvaluecontainer >
+.ruleview-propertyvalue {
+  border-bottom-color: transparent;
+}
+
+.theme-firebug .ruleview-namecontainer > .ruleview-propertyname,
+.theme-firebug .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
+  border-bottom: none;
+}
+
+.theme-firebug .ruleview-namecontainer > .ruleview-propertyname {
+  color: var(--rule-property-name);
+}
+
+.theme-firebug .ruleview-propertyvaluecontainer > .ruleview-propertyvalue {
+  color: var(--rule-property-value);
+}
+
+.theme-firebug .ruleview-overridden .ruleview-propertyname,
+.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
+  text-decoration: line-through;
+}
+
+.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer,
+.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-namecontainer *,
+.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer,
+.theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer *,
+.theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden),
+.theme-firebug .ruleview-overridden > * > .ruleview-computed:not(.ruleview-overridden) * {
+  color: #CCCCCC;
+}
+
+.ruleview-rule + .ruleview-rule {
+  border-top-width: 1px;
+  border-top-style: dotted;
+}
+
+.theme-firebug .ruleview-rule + .ruleview-rule {
+  border-top: none;
+}
+
+.ruleview-warning {
+  background-image: url(images/alerticon-warning.png);
+  background-size: 13px 12px;
+  margin-inline-start: 5px;
+  display: inline-block;
+  width: 13px;
+  height: 12px;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .ruleview-warning {
+    background-image: url(images/alerticon-warning@2x.png);
+  }
+}
+
+.ruleview-overridden-rule-filter {
+  background-image: url(chrome://devtools/skin/images/filter.svg#filterinput);
+  background-size: 11px 11px;
+  margin-inline-start: 5px;
+  display: inline-block;
+  width: 11px;
+  height: 11px;
+}
+
+.ruleview-ruleopen {
+  padding-inline-end: 5px;
+}
+
+.ruleview-ruleclose {
+  cursor: text;
+  padding-right: 20px;
+}
+
+.ruleview-propertylist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ruleview-rule:not(:hover) .ruleview-enableproperty {
+  visibility: hidden;
+}
+
+.ruleview-expander {
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.ruleview-rule .ruleview-expander.theme-twisty:dir(rtl) {
+  /* for preventing .theme-twisty's wrong direction in rtl; Bug 1296648 */
+  transform: none;
+}
+
+.ruleview-newproperty {
+  /* (enable checkbox width: 12px) + (expander width: 15px) */
+  margin-inline-start: 27px;
+}
+
+.ruleview-namecontainer,
+.ruleview-propertyvaluecontainer,
+.ruleview-propertyname,
+.ruleview-propertyvalue {
+  text-decoration: inherit;
+}
+
+.ruleview-computedlist {
+  list-style: none;
+  padding: 0;
+}
+
+.ruleview-computed {
+  margin-inline-start: 35px;
+}
+
+.ruleview-grid,
+.ruleview-swatch {
+  cursor: pointer;
+  border-radius: 50%;
+  width: 0.9em;
+  height: 0.9em;
+  vertical-align: middle;
+  /* align the swatch with its value */
+  margin-top: -1px;
+  margin-inline-end: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+.ruleview-grid {
+  background: url("chrome://devtools/skin/images/grid.svg");
+  background-size: 1em;
+  border-radius: 0;
+}
+
+.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-bezierswatch {
+  background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
+  background-size: 1em;
+}
+
+.ruleview-filterswatch {
+  background: url("chrome://devtools/skin/images/filter-swatch.svg");
+  background-size: 1em;
+}
+
+.ruleview-angleswatch {
+  background: url("chrome://devtools/skin/images/angle-swatch.svg");
+  background-size: 1em;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .ruleview-bezierswatch {
+    background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
+    background-size: 1em;
+  }
+}
+
+.ruleview-overridden {
+  text-decoration: line-through;
+}
+
+.theme-light .ruleview-overridden {
+  text-decoration-color: var(--theme-content-color3);
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #CCC;
+  padding: 0;
+  margin: -1px -3px -1px -1px;
+}
+
+.theme-firebug .styleinspector-propertyeditor {
+  border: 1px solid var(--theme-splitter-color);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
+}
+
+.ruleview-property {
+  border-left: 3px solid transparent;
+  clear: right;
+}
+
+.ruleview-propertycontainer  > * {
+  vertical-align: middle;
+}
+
+.ruleview-property[dirty] {
+  border-left-color: var(--theme-highlight-green);
+}
+
+.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%);
+}
+
+.ruleview-selectorcontainer {
+  word-wrap: break-word;
+  cursor: text;
+}
+
+.ruleview-selector-separator,
+.ruleview-selector-unmatched {
+  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 {
+  font-weight: bold;
+  color: var(--theme-highlight-orange);
+}
+
+.theme-firebug .ruleview-selector > .ruleview-selector-matched,
+.theme-firebug .ruleview-selector > .ruleview-selector-separator,
+.theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
+  color: inherit;
+}
+
+.ruleview-selectorhighlighter {
+  background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
+  padding-left: 16px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.ruleview-selectorhighlighter:hover {
+  filter: url(images/filters.svg#checked-icon-state);
+}
+
+.ruleview-grid.active,
+.ruleview-selectorhighlighter:active,
+.ruleview-selectorhighlighter.highlighted {
+  filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
+}
+
+#ruleview-add-rule-button::before {
+  background-image: url("chrome://devtools/skin/images/add.svg");
+  background-size: cover;
+}
+
+#pseudo-class-panel-toggle::before {
+  background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
+  background-size: cover;
+}
+
+.ruleview-overridden-rule-filter {
+  opacity: 0.8;
+}
+.ruleview-overridden-rule-filter:hover {
+  opacity: 1;
+}
+
+.theme-firebug .ruleview-overridden {
+  text-decoration: none;
+}
+
+/* Firebug theme disable/enable CSS rule. Firebug theme uses its own
+  icons to indicate when CSS rules can be disabled or enabled. */
+
+.theme-firebug .ruleview-rule .theme-checkbox {
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
+  background-position: 0 0;
+}
+
+.theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
+  filter: grayscale(1);
+}
+
+.theme-firebug .ruleview-rule .theme-checkbox[checked] {
+  background-position: 0 0;
+}
+
+.theme-firebug .ruleview-property:not(:hover) .ruleview-enableproperty {
+  visibility: hidden;
+}
diff --git a/devtools/client/themes/scratchpad.css b/devtools/client/themes/scratchpad.css
new file mode 100644
index 000000000..651d4efe9
--- /dev/null
+++ b/devtools/client/themes/scratchpad.css
@@ -0,0 +1,12 @@
+/* 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/. */
+
+#scratchpad-sidebar > tabs {
+  height: 0;
+  border: none;
+}
+
+#sp-toolbar {
+  border: none;
+}
diff --git a/devtools/client/themes/shadereditor.css b/devtools/client/themes/shadereditor.css
new file mode 100644
index 000000000..53ef94235
--- /dev/null
+++ b/devtools/client/themes/shadereditor.css
@@ -0,0 +1,109 @@
+/* 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/. */
+
+/* Reload and waiting notices */
+
+.notice-container {
+  margin-top: -50vh;
+  color: var(--theme-body-color-alt);
+}
+
+#reload-notice {
+  font-size: 120%;
+}
+
+#waiting-notice {
+  font-size: 110%;
+}
+
+/* Shaders pane */
+
+#shaders-pane {
+  min-width: 150px;
+}
+
+.program-item {
+  padding: 2px 0px;
+}
+
+.side-menu-widget-item-checkbox {
+  -moz-appearance: none;
+  opacity: 0;
+  transition: opacity .15s ease-out 0s;
+}
+
+/* Only show the checkbox when the source is hovered over, is selected, or if it
+ * is not checked. */
+.side-menu-widget-item:hover > .side-menu-widget-item-checkbox,
+.side-menu-widget-item.selected > .side-menu-widget-item-checkbox,
+.side-menu-widget-item-checkbox:not([checked]) {
+  opacity: 1;
+  transition: opacity .15s ease-out 0s;
+}
+
+.side-menu-widget-item-checkbox .checkbox-check {
+  -moz-appearance: none;
+  background-image: url(images/item-toggle.svg);
+  background-color: transparent;
+  width: 16px;
+  height: 16px;
+  border: 0;
+}
+
+.side-menu-widget-item-checkbox:not([checked]) .checkbox-check,
+.side-menu-widget-item-checkbox:not([checked]) + vbox {
+  opacity: 0.3;
+}
+
+.side-menu-widget-item:not(.selected) .checkbox-check {
+  filter: var(--icon-filter);
+}
+
+/* Make sure icon is white when the item is selected */
+.side-menu-widget-item.selected .checkbox-check {
+  filter: invert(1);
+}
+
+/* Shader source editors */
+
+.editor-label {
+  padding: 1px 12px;
+  border-top: 1px solid;
+}
+
+.editor-label {
+  background: var(--theme-toolbar-background);
+  border-color: var(--theme-splitter-color);
+  color: var(--theme-body-color-alt);
+}
+
+.editor-label[selected] {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+/* Responsive sidebar */
+
+@media (max-width: 700px) {
+  #shaders-pane {
+    max-height: 60vh;
+  }
+
+  #editors-splitter {
+    border-color: transparent;
+  }
+
+  .side-menu-widget-container {
+    box-shadow: none !important;
+  }
+
+  .side-menu-widget-item-arrow {
+    background-image: none !important;
+  }
+
+  .editor-label {
+    -moz-box-ordinal-group: 0;
+    border-bottom: 1px solid;
+  }
+}
diff --git a/devtools/client/themes/shims/common.css b/devtools/client/themes/shims/common.css
new file mode 100644
index 000000000..c8a99561f
--- /dev/null
+++ b/devtools/client/themes/shims/common.css
@@ -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/. */
+
+ /**
+  * This file only exists to support add-ons which import this style sheet at a
+  * specific path.
+  */
+
+@import url("resource://devtools/client/themes/common.css");
diff --git a/devtools/client/themes/shims/jar.mn b/devtools/client/themes/shims/jar.mn
new file mode 100644
index 000000000..e1025dce7
--- /dev/null
+++ b/devtools/client/themes/shims/jar.mn
@@ -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/.
+
+browser.jar:
+    skin/classic/browser/devtools/common.css (common.css)
diff --git a/devtools/client/themes/shims/moz.build b/devtools/client/themes/shims/moz.build
new file mode 100644
index 000000000..c44334263
--- /dev/null
+++ b/devtools/client/themes/shims/moz.build
@@ -0,0 +1,8 @@
+# -*- 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/.
+
+# Shim old theme paths used by DevTools add-ons
+JAR_MANIFESTS += ['jar.mn']
diff --git a/devtools/client/themes/splitters.css b/devtools/client/themes/splitters.css
new file mode 100644
index 000000000..ade867d52
--- /dev/null
+++ b/devtools/client/themes/splitters.css
@@ -0,0 +1,80 @@
+/* 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.xul and toolbox.xul. Therefore, rules
+   defined here can not rely on toolbox.xul variables. */
+
+/* Splitters */
+
+:root {
+  /* 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;
+
+  /* Small draggable area on inline-start to avoid overlaps on scrollbars.*/
+  --devtools-splitter-inline-start-width: 1px;
+  --devtools-splitter-inline-end-width: 4px;
+}
+
+:root[devtoolstheme="light"] {
+  /* These variables are used in browser.xul but inside the toolbox they are overridden by --theme-splitter-color */
+  --devtools-splitter-color: #dde1e4;
+}
+
+:root[devtoolstheme="dark"],
+:root[devtoolstheme="firebug"] {
+  --devtools-splitter-color: #42484f;
+}
+
+.devtools-horizontal-splitter,
+.devtools-side-splitter {
+  -moz-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;
+
+  /* Positive z-index positions the splitter on top of its siblings and makes
+     it clickable on both sides. */
+  z-index: 1;
+}
+
+.devtools-horizontal-splitter {
+  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));
+
+  cursor: n-resize;
+}
+
+.devtools-side-splitter {
+  min-width: calc(var(--devtools-splitter-inline-start-width) +
+    var(--devtools-splitter-inline-end-width) + 1px);
+
+  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: e-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 000000000..291867f3d
--- /dev/null
+++ b/devtools/client/themes/splitview.css
@@ -0,0 +1,75 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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);
+}
+
+.splitview-nav-container .devtools-throbber {
+  display: none;
+  text-align: center;
+}
+
+.loading .splitview-nav-container .devtools-throbber {
+  display: block;
+}
+
+.splitview-nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  background-color: var(--theme-sidebar-background);
+}
+
+.splitview-nav > li {
+  padding-inline-end: 8px;
+  -moz-box-align: center;
+  outline: 0;
+  vertical-align: bottom;
+  border-bottom: 1px solid rgba(128,128,128,0.15);
+}
+
+.placeholder {
+  -moz-box-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;
+}
+
+/* Toolbars */
+
+.splitview-main > .devtools-toolbar {
+  background-origin: border-box;
+  background-clip: border-box;
+}
+
+.splitview-main > toolbar,
+.loading .splitview-nav-container {
+  border-inline-end: 1px solid var(--theme-splitter-color);
+}
+
+.splitview-main > .devtools-toolbarbutton {
+  font-size: 11px;
+  padding: 0 8px;
+  width: auto;
+  min-width: 48px;
+  min-height: 0;
+}
diff --git a/devtools/client/themes/storage.css b/devtools/client/themes/storage.css
new file mode 100644
index 000000000..1e611f842
--- /dev/null
+++ b/devtools/client/themes/storage.css
@@ -0,0 +1,49 @@
+/* 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/. */
+
+/* Storage Host Tree */
+
+#storage-tree {
+  min-width: 220px;
+  max-width: 500px;
+  overflow: auto;
+}
+
+#storage-tree {
+  background: var(--theme-sidebar-background);
+}
+
+#storage-tree .tree-widget-item[type="store"]:after {
+  background-image: url(chrome://devtools/skin/images/tool-storage.svg);
+  background-size: 18px 18px;
+  background-position: -1px 0;
+}
+
+/* Columns with date should have a min width so that date is visible */
+#expires, #lastAccessed, #creationTime {
+  min-width: 150px;
+}
+
+/* Variables View Sidebar */
+
+#storage-sidebar {
+  max-width: 500px;
+  min-width: 250px;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #storage-tree,
+  #storage-sidebar {
+    max-width: 100%;
+  }
+
+  #storage-table #path {
+    display: none;
+  }
+
+  #storage-table .table-widget-cell {
+    min-width: 100px;
+  }
+}
diff --git a/devtools/client/themes/styleeditor.css b/devtools/client/themes/styleeditor.css
new file mode 100644
index 000000000..db70a340a
--- /dev/null
+++ b/devtools/client/themes/styleeditor.css
@@ -0,0 +1,445 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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 {
+  -moz-box-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: -moz-box;
+}
+
+.devtools-toolbar > spacer {
+  -moz-box-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 {
+  -moz-box-flex: 1;
+}
+
+.stylesheet-media-container {
+  overflow-y: auto;
+}
+
+.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 {
+  -moz-box-flex: 1;
+}
+
+.splitview-nav > li > hgroup.stylesheet-info {
+  -moz-box-pack: center;
+}
+
+.stylesheet-more > spacer {
+  -moz-box-flex: 1;
+}
+
+.theme-dark .stylesheet-title,
+.theme-dark .stylesheet-name {
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .stylesheet-rule-count,
+.theme-dark .stylesheet-linked-file,
+.theme-dark .stylesheet-saveButton {
+  color: var(--theme-body-color-alt);
+}
+
+.theme-light .stylesheet-title,
+.theme-light .stylesheet-name {
+  color: var(--theme-body-color-alt);
+}
+
+.theme-light .stylesheet-rule-count,
+.theme-light .stylesheet-linked-file,
+.theme-light .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 {
+  -moz-box-orient: horizontal;
+}
+
+.splitview-nav > li > hgroup {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-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);
+}
+
+.theme-light .media-rule-label {
+  border-bottom-color: #cddae5; /* Grey */
+}
+
+.theme-dark .media-rule-label {
+  border-bottom-color: #303b47; /* Grey */
+}
+
+.media-rule-label {
+  display: flex;
+  padding: 4px;
+  cursor: pointer;
+  border-bottom: 1px solid;
+}
+
+.media-responsive-mode-toggle {
+  color: var(--theme-highlight-blue);
+  text-decoration: underline;
+}
+
+.media-rule-line {
+  padding-inline-start: 4px;
+}
+
+.media-condition-unmatched {
+  opacity: 0.4;
+}
+
+.media-rule-condition {
+  flex: 1;
+  overflow: hidden;
+}
+
+.stylesheet-enabled {
+  display: -moz-box;
+  cursor: pointer;
+  padding: 8px 0;
+  margin: 0 8px;
+  background-image: url(images/item-toggle.svg);
+  background-repeat: no-repeat;
+  background-clip: content-box;
+  background-position: center;
+  background-size: 16px;
+  width: 24px;
+  height: 40px;
+  filter: var(--icon-filter);
+}
+
+.disabled > .stylesheet-enabled {
+  opacity: 0.3;
+}
+
+/* Invert the toggle icon in the active row for light theme */
+.theme-light .splitview-nav > li.splitview-active .stylesheet-enabled {
+  filter: invert(1);
+}
+
+.splitview-nav > li > .stylesheet-enabled:focus,
+.splitview-nav > li:hover > .stylesheet-enabled {
+  outline: 0;
+}
+
+.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;
+}
+
+.devtools-searchinput,
+.devtools-filterinput {
+  max-width: 25ex;
+  font-size: 11px;
+}
+
+.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-enabled {
+    padding: 0;
+    background-position: 0 0;
+    height: 24px;
+  }
+
+  .disabled > .stylesheet-enabled {
+    background-position: -24px 0;
+  }
+
+  .splitview-nav > li > hgroup.stylesheet-info {
+    -moz-box-align: baseline;
+    -moz-box-orient: horizontal;
+    -moz-box-flex: 1;
+  }
+
+  .stylesheet-sidebar {
+    width: 180px;
+  }
+
+  .stylesheet-more {
+    -moz-box-flex: 1;
+    -moz-box-pack: end;
+  }
+
+  .stylesheet-more > spacer {
+    -moz-box-flex: 0;
+  }
+}
+
+/* CSS coverage */
+.csscoverage-report {
+  background-color: var(--theme-toolbar-background);
+  -moz-box-orient: horizontal;
+}
+
+.csscoverage-report-container {
+  height: 100vh;
+  padding: 0 10px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -moz-box-flex: 1;
+}
+
+.csscoverage-report-content {
+  margin: 20px auto;
+  -moz-column-width: 300px;
+  font-size: 13px;
+  -moz-user-select: text;
+}
+
+.csscoverage-report-summary,
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+  display: inline-block;
+}
+
+.csscoverage-report-unused,
+.csscoverage-report-optimize {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (max-width: 950px) {
+  .csscoverage-report-content {
+    display: block;
+  }
+
+  .csscoverage-report-summary {
+    display: block;
+    text-align: center;
+  }
+}
+
+.csscoverage-report h1 {
+  font-size: 120%;
+}
+
+.csscoverage-report h2 {
+  font-size: 110%;
+}
+
+.csscoverage-report h1,
+.csscoverage-report h2,
+.csscoverage-report h3 {
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+.csscoverage-report code,
+.csscoverage-report textarea {
+  font-family: var(--monospace-font-family);
+  font-size: inherit;
+}
+
+.csscoverage-list:after {
+  content: ', ';
+}
+
+.csscoverage-list:last-child:after {
+  display: none;
+}
+
+.csscoverage-report textarea {
+  width: 100%;
+  height: 100px;
+}
+
+.csscoverage-report a {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.csscoverage-report > .csscoverage-toolbar {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.csscoverage-report > .csscoverage-toolbarbutton {
+  min-width: 4em;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-top: none;
+  border-bottom: none;
+  border-inline-start: none;
+}
+
+.csscoverage-report .pie-table-chart-container {
+  -moz-box-orient: vertical;
+  text-align: start;
+}
+
+.chart-colored-blob[name="Used Preload"] {
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);
+}
+
+.chart-colored-blob[name=Used] {
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
+}
+
+.chart-colored-blob[name=Unused] {
+  fill: var(--theme-highlight-lightorange);
+  background: var(--theme-highlight-lightorange);
+}
+
+/* Undo 'largest' customization */
+.theme-dark .pie-chart-slice[largest] {
+  stroke-width: 1px;
+  stroke: rgba(0,0,0,0.2);
+}
+
+.theme-light .pie-chart-slice[largest] {
+  stroke-width: 1px;
+  stroke: rgba(255,255,255,0.8);
+}
+
+.csscoverage-report .pie-chart-slice {
+  cursor: default;
+}
+
+.csscoverage-report-chart {
+  margin: 0 20px;
+}
diff --git a/devtools/client/themes/toolbars.css b/devtools/client/themes/toolbars.css
new file mode 100644
index 000000000..75a807d51
--- /dev/null
+++ b/devtools/client/themes/toolbars.css
@@ -0,0 +1,216 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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 devtools toolbar that aren't defined by the themes */
+.theme-light {
+  --toolbar-tab-hover: rgba(170, 170, 170, .2);
+  --toolbar-tab-hover-active: rgba(170, 170, 170, .4);
+  --searchbox-background-color: #ffee99;
+  --searchbox-border-color: #ffbf00;
+  --searcbox-no-match-background-color: #ffe5e5;
+  --searcbox-no-match-border-color: #e52e2e;
+  --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
+  --filter-image: url(chrome://devtools/skin/images/filter.svg);
+  --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
+  --icon-filter: none;
+  --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
+  --toolbar-button-border-color: rgba(170, 170, 170, .5);
+}
+
+.theme-dark {
+  --toolbar-tab-hover: hsla(206, 37%, 4%, .2);
+  --toolbar-tab-hover-active: hsla(206, 37%, 4%, .4);
+  --searchbox-background-color: #4d4222;
+  --searchbox-border-color: #d99f2b;
+  --searcbox-no-match-background-color: #402325;
+  --searcbox-no-match-border-color: #cc3d3d;
+  --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
+  --filter-image: url(chrome://devtools/skin/images/filter.svg);
+  --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
+  --icon-filter: invert(1);
+  --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#dark-theme-checked-icon-state);
+  --toolbar-button-border-color: rgba(0, 0, 0, .4);
+}
+
+.theme-firebug {
+  --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
+  --tool-options-image: url(chrome://devtools/skin/images/firebug/tool-options.svg);
+  --icon-filter: none;
+  --checked-icon-filter: none;
+  --toolbar-button-border-color: rgba(170, 170, 170, .5);
+}
+
+
+/* Toolbars */
+.devtools-toolbar,
+.devtools-sidebar-tabs tabs {
+  -moz-appearance: none;
+  padding: 0;
+  border-width: 0;
+  border-bottom-width: 1px;
+  border-style: solid;
+  height: 24px;
+  line-height: 24px;
+  box-sizing: border-box;
+}
+
+.devtools-toolbar {
+  padding: 0 3px;
+}
+
+.devtools-toolbar checkbox {
+  margin: 0 2px;
+  padding: 0;
+  line-height: -moz-block-height;
+}
+
+.devtools-toolbar checkbox .checkbox-check {
+  margin: 0;
+  padding: 0;
+  vertical-align: bottom;
+}
+
+.devtools-toolbar checkbox .checkbox-label-box {
+  border: none !important; /* overrides .checkbox-label-box from checkbox.css */
+}
+
+.devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
+  margin: 0 6px !important; /* overrides .checkbox-label from checkbox.css */
+  padding: 0;
+}
+
+.devtools-separator {
+  margin: 0 2px;
+  width: 2px;
+  background-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%);
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position: 0, 1px, 2px;
+}
+
+/* In-tools sidebar */
+.devtools-sidebar-tabs {
+  -moz-appearance: none;
+  margin: 0;
+  height: 100%;
+}
+
+.devtools-sidebar-tabs > tabpanels {
+  -moz-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 {
+  -moz-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 {
+  -moz-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;
+  -moz-box-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);
+}
+
+/* Invert the colors of certain light theme images for displaying
+ * inside of the dark theme.
+ */
+.devtools-tab[icon-invertable] > image,
+.devtools-toolbarbutton > image,
+.devtools-button::before,
+.scrollbutton-up > .toolbarbutton-icon,
+.scrollbutton-down > .toolbarbutton-icon,
+#black-boxed-message-button .button-icon,
+#requests-menu-perf-notice-button .button-icon,
+#canvas-debugging-empty-notice-button .button-icon,
+#toggle-breakpoints[checked] > image,
+.event-tooltip-debugger-icon {
+  filter: var(--icon-filter);
+}
+
+.hidden-labels-box:not(.visible) > label,
+.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
+  display: none;
+}
+
+.devtools-invisible-splitter {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.devtools-horizontal-splitter,
+.devtools-side-splitter {
+  background-color: var(--theme-splitter-color);
+}
diff --git a/devtools/client/themes/toolbox.css b/devtools/client/themes/toolbox.css
new file mode 100644
index 000000000..1db2bd01c
--- /dev/null
+++ b/devtools/client/themes/toolbox.css
@@ -0,0 +1,408 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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 {
+  --close-button-image: url(chrome://devtools/skin/images/close.svg);
+  --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
+  --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg);
+  --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg);
+
+  --command-paintflashing-image: url(images/command-paintflashing.svg);
+  --command-screenshot-image: url(images/command-screenshot.svg);
+  --command-responsive-image: url(images/command-responsivemode.svg);
+  --command-scratchpad-image: url(images/tool-scratchpad.svg);
+  --command-pick-image: url(images/command-pick.svg);
+  --command-frames-image: url(images/command-frames.svg);
+  --command-splitconsole-image: url(images/command-console.svg);
+  --command-noautohide-image: url(images/command-noautohide.svg);
+  --command-rulers-image: url(images/command-rulers.svg);
+  --command-measure-image: url(images/command-measure.svg);
+}
+
+.theme-firebug {
+  --close-button-image: url(chrome://devtools/skin/images/firebug/close.svg);
+  --dock-bottom-image: url(chrome://devtools/skin/images/firebug/dock-bottom.svg);
+  --dock-side-image: url(chrome://devtools/skin/images/firebug/dock-side.svg);
+  --dock-undock-image: url(chrome://devtools/skin/images/firebug/dock-undock.svg);
+
+  --command-paintflashing-image: url(images/firebug/command-paintflashing.svg);
+  --command-screenshot-image: url(images/firebug/command-screenshot.svg);
+  --command-responsive-image: url(images/firebug/command-responsivemode.svg);
+  --command-scratchpad-image: url(images/firebug/command-scratchpad.svg);
+  --command-pick-image: url(images/firebug/command-pick.svg);
+  --command-frames-image: url(images/firebug/command-frames.svg);
+  --command-splitconsole-image: url(images/firebug/command-console.svg);
+  --command-noautohide-image: url(images/firebug/command-noautohide.svg);
+  --command-rulers-image: url(images/firebug/command-rulers.svg);
+  --command-measure-image: url(images/firebug/command-measure.svg);
+}
+
+/* Toolbox tabbar */
+
+.devtools-tabbar {
+  -moz-appearance: none;
+  min-height: 24px;
+  border: 0px solid;
+  border-bottom-width: 1px;
+  padding: 0;
+  background: var(--theme-tab-toolbar-background);
+  border-bottom-color: var(--theme-splitter-color);
+}
+
+#toolbox-tabs {
+  margin: 0;
+}
+
+/* Set flex attribute to Toolbox buttons and Picker container so,
+   they don't overlapp with the tab bar */
+#toolbox-buttons {
+  display: flex;
+}
+
+#toolbox-picker-container {
+  display: flex;
+}
+
+/* Toolbox tabs */
+
+.devtools-tab {
+  -moz-appearance: none;
+  -moz-binding: url("chrome://global/content/bindings/general.xml#control-item");
+  -moz-box-align: center;
+  min-width: 32px;
+  min-height: 24px;
+  max-width: 100px;
+  margin: 0;
+  padding: 0;
+  border-style: solid;
+  border-width: 0;
+  border-inline-start-width: 1px;
+  -moz-box-align: center;
+  -moz-box-flex: 1;
+}
+
+/* Save space on the tab-strip in Firebug theme */
+.theme-firebug .devtools-tab {
+  -moz-box-flex: initial;
+}
+
+.theme-dark .devtools-tab {
+  color: var(--theme-body-color-alt);
+  border-color: #42484f;
+}
+
+.theme-light .devtools-tab {
+  color: var(--theme-body-color);
+  border-color: var(--theme-splitter-color);
+}
+
+.theme-dark .devtools-tab:hover {
+  color: #ced3d9;
+}
+
+.devtools-tab:hover {
+  background-color: var(--toolbar-tab-hover);
+}
+
+.theme-dark .devtools-tab:hover:active {
+  color: var(--theme-selection-color);
+}
+
+.devtools-tab:hover:active {
+  background-color: var(--toolbar-tab-hover-active);
+}
+
+.theme-dark .devtools-tab:not([selected])[highlighted] {
+  background-color: hsla(99, 100%, 14%, .3);
+}
+
+.theme-light .devtools-tab:not([selected])[highlighted] {
+  background-color: rgba(44, 187, 15, .2);
+}
+
+/* Display execution pointer in the Debugger tab to indicate
+   that the debugger is paused. */
+.theme-firebug #toolbox-tab-jsdebugger.devtools-tab:not([selected])[highlighted] {
+  background-color: rgba(89, 178, 234, .2);
+  background-image: url(chrome://devtools/skin/images/firebug/tool-debugger-paused.svg);
+  background-repeat: no-repeat;
+  padding-left: 13px !important;
+  background-position: 3px 6px;
+}
+
+.devtools-tab > image {
+  border: none;
+  margin: 0;
+  margin-inline-start: 4px;
+  opacity: 0.6;
+  max-height: 16px;
+  width: 16px; /* Prevents collapse during theme switching */
+}
+
+/* Support invertable icon flags and make icon white when it's on a blue background */
+.theme-light .devtools-tab[icon-invertable="light-theme"]:not([selected]) > image,
+.devtools-tab[icon-invertable="dark-theme"][selected] > image {
+  filter: invert(1);
+}
+
+/* Don't apply any filter to non-invertable command button icons */
+.command-button:not(.command-button-invertable),
+/* [icon-invertable="light-theme"] icons are white, so do not invert them for the dark theme */
+.theme-dark .devtools-tab[icon-invertable="light-theme"] > image,
+/* Since "highlighted" icons are green, we should omit the filter */
+.devtools-tab[icon-invertable][highlighted]:not([selected]) > image {
+  filter: none;
+}
+
+.devtools-tab > label {
+  white-space: nowrap;
+  margin: 0 4px;
+}
+
+.devtools-tab:hover > image {
+  opacity: 0.8;
+}
+
+.devtools-tab:active > image,
+.devtools-tab[selected] > image {
+  opacity: 1;
+}
+
+.devtools-tabbar .devtools-tab[selected],
+.devtools-tabbar .devtools-tab[selected]:hover:active {
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+#toolbox-tabs .devtools-tab[selected],
+#toolbox-tabs .devtools-tab[highlighted] {
+  border-width: 0;
+  padding-inline-start: 1px;
+}
+
+#toolbox-tabs .devtools-tab[selected]:last-child,
+#toolbox-tabs .devtools-tab[highlighted]:last-child {
+  padding-inline-end: 1px;
+}
+
+#toolbox-tabs .devtools-tab[selected] + .devtools-tab,
+#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab {
+  border-inline-start-width: 0;
+  padding-inline-start: 1px;
+}
+
+#toolbox-tabs .devtools-tab:first-child[selected] {
+  border-inline-start-width: 0;
+}
+
+#toolbox-tabs .devtools-tab:last-child {
+  border-inline-end-width: 1px;
+}
+
+.devtools-tab:not([highlighted]) > .highlighted-icon,
+.devtools-tab[selected] > .highlighted-icon,
+.devtools-tab:not([selected])[highlighted] > .default-icon {
+  visibility: collapse;
+}
+
+/* The options tab is special - it doesn't have the same parent
+   as the other tabs (toolbox-option-container vs toolbox-tabs) */
+#toolbox-option-container .devtools-tab:not([selected]) {
+  background-color: transparent;
+}
+#toolbox-option-container .devtools-tab {
+  border-color: transparent;
+  border-width: 0;
+  padding-inline-start: 1px;
+}
+#toolbox-tab-options > image {
+  margin: 0 8px;
+}
+
+/* Toolbox controls */
+
+#toolbox-controls > button,
+#toolbox-dock-buttons > button {
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
+}
+
+/* Save space in Firebug theme */
+.theme-firebug #toolbox-controls button {
+  margin-inline-start: 0 !important;
+  min-width: 12px;
+  margin: 0 1px;
+}
+
+#toolbox-close::before {
+  background-image: var(--close-button-image);
+}
+
+#toolbox-dock-bottom::before {
+  background-image: var(--dock-bottom-image);
+}
+
+#toolbox-dock-side::before {
+  background-image: var(--dock-side-image);
+}
+
+#toolbox-dock-window::before {
+  background-image: var(--dock-undock-image);
+}
+
+#toolbox-dock-bottom-minimize::before {
+  background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png");
+}
+
+#toolbox-dock-bottom-minimize.minimized::before {
+  background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png");
+}
+
+#toolbox-buttons:empty + .devtools-separator,
+.devtools-separator[invisible] {
+  visibility: hidden;
+}
+
+#toolbox-controls-separator {
+  margin: 0;
+}
+
+/* Command buttons */
+
+.command-button {
+  padding: 0;
+  margin: 0;
+  position: relative;
+}
+
+.command-button::before {
+  opacity: 0.7;
+}
+
+.command-button:hover {
+  background-color: var(--toolbar-tab-hover);
+}
+
+.theme-light .command-button:hover {
+  background-color: inherit;
+}
+
+.command-button:hover:active,
+.command-button[checked=true]:not(:hover) {
+  background-color: var(--toolbar-tab-hover-active)
+}
+
+.theme-light .command-button:hover:active,
+.theme-light .command-button[checked=true]:not(:hover) {
+  background-color: inherit;
+}
+
+.command-button:hover::before {
+  opacity: 0.85;
+}
+
+.command-button:hover:active::before,
+.command-button[checked=true]::before,
+.command-button[open=true]::before {
+  opacity: 1;
+}
+
+/* Command button images */
+
+#command-button-paintflashing::before {
+  background-image: var(--command-paintflashing-image);
+}
+
+#command-button-screenshot::before {
+  background-image: var(--command-screenshot-image);
+}
+
+#command-button-responsive::before {
+  background-image: var(--command-responsive-image);
+}
+
+#command-button-scratchpad::before {
+  background-image: var(--command-scratchpad-image);
+}
+
+#command-button-pick::before {
+  background-image: var(--command-pick-image);
+}
+
+#command-button-splitconsole::before {
+  background-image: var(--command-splitconsole-image);
+}
+
+#command-button-noautohide::before {
+  background-image: var(--command-noautohide-image);
+}
+
+#command-button-eyedropper::before {
+  background-image: var(--command-eyedropper-image);
+}
+
+#command-button-rulers::before {
+  background-image: var(--command-rulers-image);
+}
+
+#command-button-measure::before {
+  background-image: var(--command-measure-image);
+}
+
+#command-button-frames::before {
+  background-image: var(--command-frames-image);
+}
+
+#command-button-frames {
+  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  background-repeat: no-repeat;
+
+  /* Override background-size from the command-button.
+   The drop down arrow is smaller */
+  background-size: 8px 4px !important;
+  min-width: 32px;
+}
+
+#command-button-frames:-moz-locale-dir(ltr) {
+  background-position: right;
+}
+
+#command-button-frames:-moz-locale-dir(rtl) {
+  background-position: left;
+}
+
+/* Toolbox panels */
+
+.toolbox-panel {
+  display: -moz-box;
+  -moz-box-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;
+}
+
+/**
+ * Enrure 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;
+}
diff --git a/devtools/client/themes/tooltip/arrow-horizontal-dark.png b/devtools/client/themes/tooltip/arrow-horizontal-dark.png
new file mode 100644
index 000000000..751fbc3d3
--- /dev/null
+++ b/devtools/client/themes/tooltip/arrow-horizontal-dark.png
diff --git a/devtools/client/themes/tooltip/arrow-horizontal-dark@2x.png b/devtools/client/themes/tooltip/arrow-horizontal-dark@2x.png
new file mode 100644
index 000000000..e4db35e72
--- /dev/null
+++ b/devtools/client/themes/tooltip/arrow-horizontal-dark@2x.png
diff --git a/devtools/client/themes/tooltip/arrow-horizontal-light.png b/devtools/client/themes/tooltip/arrow-horizontal-light.png
new file mode 100644
index 000000000..298ced115
--- /dev/null
+++ b/devtools/client/themes/tooltip/arrow-horizontal-light.png
diff --git a/devtools/client/themes/tooltip/arrow-horizontal-light@2x.png b/devtools/client/themes/tooltip/arrow-horizontal-light@2x.png
new file mode 100644
index 000000000..7dec13406
--- /dev/null
+++ b/devtools/client/themes/tooltip/arrow-horizontal-light@2x.png
diff --git a/devtools/client/themes/tooltip/arrow-vertical-dark.png b/devtools/client/themes/tooltip/arrow-vertical-dark.png
new file mode 100644
index 000000000..dfd535433
--- /dev/null
+++ b/devtools/client/themes/tooltip/arrow-vertical-dark.png
diff --git a/devtools/client/themes/tooltip/arrow-vertical-dark@2x.png b/devtools/client/themes/tooltip/arrow-vertical-dark@2x.png
new file mode 100644
index 000000000..721bb0d88
--- /dev/null
+++ b/devtools/client/themes/tooltip/arrow-vertical-dark@2x.png
diff --git a/devtools/client/themes/tooltip/arrow-vertical-light.png b/devtools/client/themes/tooltip/arrow-vertical-light.png
new file mode 100644
index 000000000..5a57fc353
--- /dev/null
+++ b/devtools/client/themes/tooltip/arrow-vertical-light.png
diff --git a/devtools/client/themes/tooltip/arrow-vertical-light@2x.png b/devtools/client/themes/tooltip/arrow-vertical-light@2x.png
new file mode 100644
index 000000000..c2b95c45a
--- /dev/null
+++ b/devtools/client/themes/tooltip/arrow-vertical-light@2x.png
diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css
new file mode 100644
index 000000000..4cd6f3bf3
--- /dev/null
+++ b/devtools/client/themes/tooltips.css
@@ -0,0 +1,456 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/* Tooltip specific theme variables */
+
+.theme-dark {
+  --bezier-diagonal-color: #eee;
+  --bezier-grid-color: rgba(0, 0, 0, 0.2);
+}
+
+.theme-light {
+  --bezier-diagonal-color: rgba(0, 0, 0, 0.2);
+  --bezier-grid-color: rgba(0, 0, 0, 0.05);
+}
+
+/* Tooltip widget (see devtools/client/shared/widgets/tooltip/Tooltip.js) */
+
+.devtools-tooltip .panel-arrowcontent {
+  padding: 4px;
+}
+
+.devtools-tooltip .panel-arrowcontainer {
+  /* Reseting the transition used when panels are shown */
+  transition: none;
+  /* Panels slide up/down/left/right when they appear using a transform.
+  Since we want to remove the transition, we don't need to transform anymore
+  plus it can interfeer by causing mouseleave events on the underlying nodes */
+  transform: none;
+}
+
+.devtools-tooltip[clamped-dimensions] {
+  min-height: 100px;
+  max-height: 400px;
+  min-width: 100px;
+  max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions-no-min-height] {
+  min-height: 0;
+  max-height: 400px;
+  min-width: 100px;
+  max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
+  min-width: 400px;
+  max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
+  overflow: hidden;
+}
+.devtools-tooltip[wide] {
+  max-width: 600px;
+}
+
+/* Tooltip: Simple Text */
+
+.devtools-tooltip-simple-text {
+  max-width: 400px;
+  margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
+  padding: 8px 12px;
+  white-space: pre-wrap;
+}
+
+.devtools-tooltip-simple-text:first-child {
+  margin-top: -4px;
+}
+
+.devtools-tooltip-simple-text:last-child {
+  margin-bottom: -4px;
+}
+
+/* Tooltip: Variables View */
+
+.devtools-tooltip-variables-view-box {
+  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
+}
+
+.devtools-tooltip-variables-view-box .variable-or-property > .title {
+  padding-inline-end: 6px;
+}
+
+/* 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;
+}
+
+.devtools-tooltip-iframe {
+  border: none;
+  background: transparent;
+}
+
+.tooltip-container {
+  display: none;
+  position: fixed;
+  z-index: 9999;
+  display: none;
+  background: transparent;
+  pointer-events: none;
+  overflow: hidden;
+  filter: drop-shadow(0 3px 4px var(--theme-tooltip-shadow));
+}
+
+.tooltip-xul-wrapper {
+  -moz-appearance: none;
+  background: transparent;
+  overflow: visible;
+  border-style: none;
+}
+
+.tooltip-xul-wrapper .tooltip-container {
+  position: absolute;
+}
+
+.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"] {
+  margin: 0;
+}
+
+/* The arrow image is hidden because the panel is opened using openPopupAtScreen(). */
+
+/* Remove all decorations on .panel-arrowcontent is the tooltip content container. */
+.tooltip-xul-wrapper[type="arrow"] .panel-arrowcontent {
+  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: 3px solid var(--theme-tooltip-border);
+  border-radius: 5px;
+}
+
+.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, only use RTL on the tooltip content, keep LTR for positioning */
+.tooltip-container:-moz-locale-dir(rtl) {
+  direction: ltr;
+}
+
+.tooltip-panel:-moz-locale-dir(rtl) {
+  direction: rtl;
+}
+
+.tooltip-top .tooltip-arrow {
+  margin-top: -3px;
+}
+
+.tooltip-bottom .tooltip-arrow {
+  margin-bottom: -3px;
+}
+
+.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-color: var(--theme-tooltip-border);
+  border-style: solid;
+  border-width: 0px 3px 3px 0px;
+  border-radius: 3px;
+  pointer-events: all;
+}
+
+.tooltip-bottom .tooltip-arrow:before {
+  margin-top: 4px;
+  transform: rotate(225deg);
+}
+
+.tooltip-top .tooltip-arrow:before {
+  margin-top: -12px;
+  transform: rotate(45deg);
+}
+
+/* Tooltip: Events */
+
+.event-header {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.event-header:first-child {
+  border-width: 0;
+}
+
+.event-header:not(:first-child) {
+  border-width: 1px 0 0 0;
+}
+
+.devtools-tooltip-events-container {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.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: 13px;
+}
+
+.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-debugger-icon {
+  width: 16px;
+  height: 16px;
+  margin-inline-end: 4px;
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
+.event-tooltip-debugger-icon:hover {
+  opacity: 1;
+}
+
+.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: 2px;
+  margin-inline-start: 5px;
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-toolbar-background);
+}
+
+.event-tooltip-attributes {
+  margin: 0;
+  font-size: 9px;
+  padding-top: 2px;
+}
+
+/*
+ * Tooltip: JS stack traces
+ */
+
+.stack-trace-tooltip {
+  direction: ltr;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.stack-trace-tooltip > .stack-frame {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.stack-trace-tooltip > .stack-frame:first-child {
+  margin-top: 5px;
+}
+
+.stack-trace-tooltip > .stack-frame:last-child {
+  margin-bottom: 5px;
+}
+
+.stack-frame-call {
+  color: var(--theme-body-color-alt);
+  cursor: pointer;
+  display: flex;
+}
+
+.stack-frame-call:hover {
+  background-color: var(--theme-selection-background-semitransparent);
+}
+
+.stack-frame-async {
+  color: var(--theme-body-color-inactive);
+}
+
+.stack-frame-function-name {
+  color: var(--theme-highlight-blue);
+  max-width: 50%;
+  margin-inline-end: 1em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stack-frame-source-name {
+  flex: 1 1;
+  /* Makes the file name truncated (and ellipsis shown) on the left side */
+  direction: rtl;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Enforce LTR direction for the file name - fixes bug 1290056 */
+.stack-frame-source-name-inner {
+  direction: ltr;
+  unicode-bidi: embed;
+}
+
+.stack-frame-line {
+  color: var(--theme-highlight-orange);
+}
+
+/* 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;
+}
+
+#searchbox-panel-listbox .autocomplete-item > .initial-value {
+  max-width: 130px;
+  margin-left: 15px;
+}
+
+#searchbox-panel-listbox .autocomplete-item > .autocomplete-value {
+  max-width: 150px;
+}
+
+/* Tooltip: Image tooltip */
+
+.devtools-tooltip-image-broken {
+  box-sizing: border-box;
+  height: 100%;
+  text-align: center;
+  line-height: 30px;
+}
diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css
new file mode 100644
index 000000000..84f9282a6
--- /dev/null
+++ b/devtools/client/themes/variables.css
@@ -0,0 +1,203 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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/. */
+
+/* Variable declarations for light and dark devtools themes.
+ * Colors are taken from:
+ * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.
+ * Changes should be kept in sync with commandline.css and commandline.inc.css.
+ */
+
+/* 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-light {
+  --theme-body-background: white;
+  --theme-sidebar-background: white;
+  --theme-contrast-background: #e6b064;
+
+  --theme-tab-toolbar-background: #fcfcfc;
+  --theme-toolbar-background: #fcfcfc;
+  --theme-selection-background: #4c9ed9;
+  --theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15);
+  --theme-selection-color: #f5f7fa;
+  --theme-splitter-color: #dde1e4;
+  --theme-comment: #696969;
+
+  --theme-body-color: #393f4c;
+  --theme-body-color-alt: #585959;
+  --theme-body-color-inactive: #999797;
+  --theme-content-color1: #292e33;
+  --theme-content-color2: #8fa1b2;
+  --theme-content-color3: #667380;
+
+  --theme-highlight-green: #2cbb0f;
+  --theme-highlight-blue: #0088cc;
+  --theme-highlight-bluegrey: #0072ab;
+  --theme-highlight-purple: #5b5fff;
+  --theme-highlight-lightorange: #d97e00;
+  --theme-highlight-orange: #f13c00;
+  --theme-highlight-red: #ed2655;
+  --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 used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
+  --theme-graphs-green: #85d175;
+  --theme-graphs-blue: #83b7f6;
+  --theme-graphs-bluegrey: #0072ab;
+  --theme-graphs-purple: #b693eb;
+  --theme-graphs-yellow: #efc052;
+  --theme-graphs-orange: #d97e00;
+  --theme-graphs-red: #e57180;
+  --theme-graphs-grey: #cccccc;
+  --theme-graphs-full-red: #f00;
+  --theme-graphs-full-blue: #00f;
+
+  /* Images */
+  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
+  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
+
+  /* Tooltips */
+  --theme-tooltip-border: #d9e1e8;
+  --theme-tooltip-background: rgba(255, 255, 255, .9);
+  --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
+}
+
+:root.theme-dark {
+  --theme-body-background: #393f4c;
+  --theme-sidebar-background: #393f4c;
+  --theme-contrast-background: #ffb35b;
+
+  --theme-tab-toolbar-background: #272b35;
+  --theme-toolbar-background: #272b35;
+  --theme-selection-background: #5675B9;
+  --theme-selection-background-semitransparent: rgba(86, 117, 185, 0.5);
+  --theme-selection-color: #f5f7fa;
+  --theme-splitter-color: #454d5d;
+  --theme-comment: #757873;
+
+  --theme-body-color: #8fa1b2;
+  --theme-body-color-alt: #b6babf;
+  --theme-body-color-inactive: #8fa1b2;
+  --theme-content-color1: #a9bacb;
+  --theme-content-color2: #8fa1b2;
+  --theme-content-color3: #5f7387;
+
+  --theme-highlight-green: #00ff7f;
+  --theme-highlight-blue: #46afe3;
+  --theme-highlight-bluegrey: #5e88b0;
+  --theme-highlight-purple: #bcb8db;
+  --theme-highlight-lightorange: #d99b28;
+  --theme-highlight-orange: #d96629;
+  --theme-highlight-red: #eb5368;
+  --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 used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
+  --theme-graphs-green: #70bf53;
+  --theme-graphs-blue: #46afe3;
+  --theme-graphs-bluegrey: #5e88b0;
+  --theme-graphs-purple: #df80ff;
+  --theme-graphs-yellow: #d99b28;
+  --theme-graphs-orange: #d96629;
+  --theme-graphs-red: #eb5368;
+  --theme-graphs-grey: #757873;
+  --theme-graphs-full-red: #f00;
+  --theme-graphs-full-blue: #00f;
+
+  /* Images */
+  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
+  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
+
+  /* Tooltips */
+  --theme-tooltip-border: #434850;
+  --theme-tooltip-background: rgba(19, 28, 38, .9);
+  --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
+}
+
+:root.theme-firebug {
+  --theme-body-background: #fcfcfc;
+  --theme-sidebar-background: #fcfcfc;
+  --theme-contrast-background: #e6b064;
+
+  --theme-tab-toolbar-background: #d8eaf9;
+  --theme-toolbar-background: #f0f1f2;
+  --theme-selection-background: #3399ff;
+  --theme-selection-background-semitransparent: rgba(128,128,128,0.2);
+  --theme-selection-color: white;
+  --theme-splitter-color: #aabccf;
+  --theme-comment: green;
+
+  --theme-body-color: #000000;
+  --theme-body-color-alt: #585959;
+  --theme-content-color1: #292e33;
+  --theme-content-color2: #8fa1b2;
+  --theme-content-color3: #667380;
+
+  --theme-highlight-green: #2cbb0f;
+  --theme-highlight-blue: #3455db;
+  --theme-highlight-bluegrey: #0072ab;
+  --theme-highlight-purple: #887ce6;
+  --theme-highlight-lightorange: #d97e00;
+  --theme-highlight-orange: #f13c00;
+  --theme-highlight-red: #e22f6f;
+  --theme-highlight-pink: #b82ee5;
+  --theme-highlight-gray: #dde1e4;
+
+  /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
+  --theme-graphs-green: #85d175;
+  --theme-graphs-blue: #83b7f6;
+  --theme-graphs-bluegrey: #0072ab;
+  --theme-graphs-purple: #b693eb;
+  --theme-graphs-yellow: #efc052;
+  --theme-graphs-orange: #d97e00;
+  --theme-graphs-red: #e57180;
+  --theme-graphs-grey: #cccccc;
+  --theme-graphs-full-red: #f00;
+  --theme-graphs-full-blue: #00f;
+
+  /* Images */
+  --theme-pane-collapse-image: url(chrome://devtools/skin/images/firebug/pane-collapse.svg);
+  --theme-pane-expand-image: url(chrome://devtools/skin/images/firebug/pane-expand.svg);
+
+  /* Font size */
+  --theme-toolbar-font-size: 12px;
+
+  /* Header */
+  --theme-header-background: #F0F0F0 linear-gradient(to top,
+                                                     rgba(0, 0, 0, 0.1),
+                                                     transparent) repeat-x;
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/firebug/commandline-icon.svg#focus);
+}
+
+:root {
+  --theme-focus-border-color-textbox: #0675d3;
+  --theme-textbox-box-shadow: rgba(97,181,255,.75);
+
+  /* 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);
+}
diff --git a/devtools/client/themes/webaudioeditor.css b/devtools/client/themes/webaudioeditor.css
new file mode 100644
index 000000000..3ba9dad88
--- /dev/null
+++ b/devtools/client/themes/webaudioeditor.css
@@ -0,0 +1,195 @@
+/* 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/. */
+
+/* Reload and waiting notices */
+.notice-container {
+  margin-top: -50vh;
+  color: var(--theme-body-color-alt);
+}
+
+#reload-notice {
+  font-size: 120%;
+}
+
+#waiting-notice {
+  font-size: 110%;
+}
+
+/* Context Graph */
+svg {
+  overflow: hidden;
+  -moz-box-flex: 1;
+  --arrow-color: var(--theme-splitter-color);
+  --text-color: var(--theme-body-color-alt);
+}
+
+.theme-dark svg {
+  --arrow-color: var(--theme-body-color-alt);
+}
+
+/* Edges in graph */
+.edgePath path {
+  stroke-width: 1px;
+  stroke: var(--arrow-color);
+}
+svg #arrowhead {
+  /* !important is needed to override inline style */
+  fill: var(--arrow-color) !important;
+}
+
+/* AudioParam connection edges */
+g.edgePath.param-connection path {
+  stroke-dasharray: 5,5;
+  stroke: var(--arrow-colo);
+}
+
+/* Labels in AudioParam connection should have background that match
+ * the main background so there's whitespace around the label, on top of the
+ * dotted lines. */
+g.edgeLabel rect {
+  fill: var(--theme-body-background);
+}
+g.edgeLabel tspan {
+  fill: var(--text-color);
+}
+
+/* Audio Nodes */
+.nodes rect {
+  stroke-width: 1px;
+  cursor: pointer;
+  stroke: var(--theme-splitter-color);
+  fill: var(--theme-toolbar-background);
+}
+
+/**
+ * Bypassed Nodes
+ */
+
+.theme-light .nodes g.bypassed rect {
+  fill: url(chrome://devtools/skin/images/filters.svg#bypass-light);
+}
+
+.theme-dark .nodes g.bypassed rect {
+  fill: url(chrome://devtools/skin/images/filters.svg#bypass-dark);
+}
+
+.nodes g.bypassed.selected rect {
+  stroke: var(--theme-selection-background);
+}
+
+.nodes g.bypassed text {
+  opacity: 0.6;
+}
+
+/**
+ * Selected Nodes
+ */
+.nodes g.selected rect {
+  fill: var(--theme-selection-background);
+}
+
+/* Don't style bypassed nodes text differently because it'd be illegible in light-theme */
+g.selected:not(.bypassed) text {
+  fill: var(--theme-selection-color);
+}
+
+
+/* Text in nodes and edges */
+text {
+  cursor: default; /* override the "text" cursor */
+  fill: var(--text-color);
+  font-size: 1.25em;
+  /* Make sure text stays inside its container in RTL locales */
+  direction: ltr;
+}
+
+.nodes text {
+  cursor: pointer;
+}
+
+/**
+ * Inspector Styles
+ */
+
+/* hide the variables view scope title as its redundant,
+ * because there's only one scope displayed. */
+.variables-view-scope > .title {
+  display: none;
+}
+
+#web-audio-inspector-title {
+  margin: 6px;
+}
+
+.web-audio-inspector .error {
+  background-image: url(images/alerticon-warning.png);
+  background-size: 13px 12px;
+  -moz-appearance: none;
+  opacity: 0;
+  transition: opacity .5s ease-out 0s;
+}
+
+#inspector-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border: none;
+  list-style-image: var(--theme-pane-collapse-image);
+}
+
+#inspector-pane-toggle > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#inspector-pane-toggle.pane-collapsed {
+  list-style-image: var(--theme-pane-expand-image);
+}
+
+/**
+ * Automation Styles
+ */
+
+#automation-param-toolbar .automation-param-button[selected] {
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+#automation-graph {
+  overflow: hidden;
+  -moz-box-flex: 1;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .web-audio-inspector .error {
+    background-image: url(images/alerticon-warning@2x.png);
+  }
+}
+
+/**
+ * Inspector toolbar
+ */
+
+#audio-node-toolbar .bypass {
+  list-style-image: url(images/power.svg);
+}
+
+/**
+ * Responsive Styles
+ * `.devtools-responsive-container` takes care of most of
+ * the changing of host types.
+ */
+@media (max-width: 700px) {
+  /**
+   * Override the inspector toggle so it's always open
+   * in the portrait view, with the toggle button hidden.
+   */
+  #inspector-pane-toggle {
+    display: none;
+  }
+
+  #web-audio-inspector {
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+  }
+}
diff --git a/devtools/client/themes/webconsole.css b/devtools/client/themes/webconsole.css
new file mode 100644
index 000000000..c0c0177e1
--- /dev/null
+++ b/devtools/client/themes/webconsole.css
@@ -0,0 +1,793 @@
+/* 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 */
+.theme-light,
+.theme-firebug {
+  --error-color: #FF0000;
+  --error-background-color: #FFEBEB;
+  --warning-background-color: #FFFFC8;
+}
+
+/* General output styles */
+
+a {
+  -moz-user-focus: normal;
+  -moz-user-input: enabled;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
+ * assertion when loading HTML page with links in XUL iframe */
+*:visited { }
+
+.message {
+  display: flex;
+  padding: 0 7px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.message > .prefix,
+.message > .timestamp {
+  flex: none;
+  color: var(--theme-comment);
+  margin: 3px 6px 0 0;
+}
+
+.message > .indent {
+  flex: none;
+}
+
+.message > .icon {
+  flex: none;
+  margin: 3px 6px 0 0;
+  padding: 0 4px;
+  height: 1em;
+  align-self: flex-start;
+}
+
+.theme-firebug .message > .icon {
+  margin: 0;
+  margin-inline-end: 6px;
+}
+
+.theme-firebug .message[severity="error"],
+.theme-light .message.error,
+.theme-firebug .message.error {
+  color: var(--error-color);
+  background-color: var(--error-background-color);
+}
+
+.theme-firebug .message[severity="warn"],
+.theme-light .message.warn,
+.theme-firebug .message.warn {
+  background-color: var(--warning-background-color);
+}
+
+.message > .icon::before {
+  content: "";
+  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-position: 12px 12px;
+  background-repeat: no-repeat;
+  background-size: 72px 60px;
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+}
+
+.theme-light .message > .icon::before {
+  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+}
+
+.message > .message-body-wrapper {
+  flex: auto;
+  min-width: 0px;
+  margin: 3px;
+}
+
+.message-body-wrapper .table-widget-body {
+  overflow: visible;
+}
+
+/* The red bubble that shows the number of times a message is repeated */
+.message-repeats {
+  -moz-user-select: none;
+  flex: none;
+  margin: 2px 6px;
+  padding: 0 6px;
+  height: 1.25em;
+  color: white;
+  background-color: red;
+  border-radius: 40px;
+  font: message-box;
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
+.message-repeats[value="1"] {
+  display: none;
+}
+
+.message-location {
+  max-width: 40%;
+}
+
+.stack-trace {
+  /* The markup contains extra whitespace to improve formatting of clipboard text.
+     Make sure this whitespace doesn't affect the HTML rendering */
+  white-space: normal;
+}
+
+.stack-trace .frame-link-source,
+.message-location .frame-link-source {
+  /* Makes the file name truncated (and ellipsis shown) on the left side */
+  direction: rtl;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stack-trace .frame-link-source-inner,
+.message-location .frame-link-source-inner {
+  /* Enforce LTR direction for the file name - fixes bug 1290056 */
+  direction: ltr;
+  unicode-bidi: embed;
+}
+
+.stack-trace .frame-link-function-display-name {
+  max-width: 50%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.message-flex-body {
+  display: flex;
+}
+
+.message-body > * {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.message-flex-body > .message-body {
+  display: block;
+  flex: auto;
+}
+
+#output-wrapper {
+  direction: ltr;
+  overflow: auto;
+  -moz-user-select: text;
+  position: relative;
+}
+
+/* The width on #output-container is set to a hardcoded px in webconsole.js
+   since it's way faster than using 100% with -moz-box-flex (see Bug 1237368) */
+
+#output-container.hideTimestamps > .message {
+  padding-inline-start: 0;
+  margin-inline-start: 7px;
+  width: calc(100% - 7px);
+}
+
+#output-container.hideTimestamps > .message > .timestamp {
+  display: none;
+}
+
+#output-container.hideTimestamps > .message > .indent {
+  background-color: var(--theme-body-background);
+}
+
+.filtered-by-type,
+.filtered-by-string {
+  display: none;
+}
+
+.hidden-message {
+  display: block;
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+}
+
+/* WebConsole colored drops */
+
+.webconsole-filter-button {
+  -moz-user-focus: normal;
+}
+
+.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
+  content: "";
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  margin-inline-start: 5px;
+  border-width: 1px;
+  border-style: solid;
+}
+
+/* Network styles */
+.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#444444, #000000);
+  border-color: #777;
+}
+
+.message:hover {
+  background-color: var(--theme-selection-background-semitransparent) !important;
+}
+
+.theme-light .message[severity=error],
+.theme-light .message.error {
+  background-color: rgba(255, 150, 150, 0.3);
+}
+
+.theme-dark .message[severity=error],
+.theme-dark .message.error {
+  background-color: rgba(235, 83, 104, 0.17);
+}
+
+.console-string {
+  color: var(--theme-highlight-lightorange);
+}
+
+.theme-selected .console-string,
+.theme-selected .cm-number,
+.theme-selected .cm-variable,
+.theme-selected .kind-ArrayLike {
+  color: #f5f7fa !important; /* Selection Text Color */
+}
+
+.message[category=network] > .indent {
+  border-inline-end: solid var(--theme-body-color-alt) 6px;
+}
+
+.message[category=network][severity=error] > .icon::before,
+.message.network.error > .icon::before {
+  background-position: -12px 0;
+}
+
+.message[category=network] > .message-body,
+.message.network > .message-body {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.message[category=network] .method,
+.message.network .method {
+  flex: none;
+}
+
+.message[category=network]:not(.navigation-marker) .url,
+.message.network:not(.navigation-marker) .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;
+}
+
+.message[category=network] .status,
+.message.network .status {
+  flex: none;
+  margin-inline-start: 6px;
+}
+
+.message[category=network].mixed-content .url,
+.message.network.mixed-content .url {
+  color: var(--theme-highlight-red);
+}
+
+.message .learn-more-link {
+  color: var(--theme-highlight-blue);
+  margin: 0 6px;
+}
+
+.message[category=network] .xhr,
+.message.network .xhr {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
+  border-radius: 3px;
+  font-weight: bold;
+  font-size: 10px;
+  padding: 2px;
+  line-height: 10px;
+  margin-inline-start: 3px;
+  margin-inline-end: 1ex;
+}
+
+/* CSS styles */
+.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#2DC3F3, #00B6F0);
+  border-color: #1BA2CC;
+}
+
+.message[category=cssparser] > .indent,
+.message.cssparser > .indent  {
+  border-inline-end: solid #00b6f0 6px;
+}
+
+.message[category=cssparser][severity=error] > .icon::before,
+.message.cssparser.error > .icon::before {
+  background-position: -12px -12px;
+}
+
+.message[category=cssparser][severity=warn] > .icon::before,
+.message.cssparser.warn > .icon::before {
+  background-position: -24px -12px;
+}
+
+/* JS styles */
+.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#FCB142, #FB9500);
+  border-color: #E98A00;
+}
+
+.message[category=exception] > .indent,
+.message.exception > .indent {
+  border-inline-end: solid #fb9500 6px;
+}
+
+.message[category=exception][severity=error] > .icon::before,
+.message.exception.error > .icon::before {
+  background-position: -12px -24px;
+}
+
+.message[category=exception][severity=warn] > .icon::before,
+.message.exception.warn > .icon::before {
+  background-position: -24px -24px;
+}
+
+/* Web Developer styles */
+.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#B9B9B9, #AAAAAA);
+  border-color: #929292;
+}
+
+.message[category=console] > .indent,
+.message.console-api > .indent {
+  border-inline-end: solid #cbcbcb 6px;
+}
+
+.message[category=console][severity=error] > .icon::before,
+.message[category=output][severity=error] > .icon::before,
+.message[category=server][severity=error] > .icon::before {
+  background-position: -12px -36px;
+}
+
+.message[category=console][severity=warn] > .icon::before,
+.message[category=server][severity=warn] > .icon::before {
+  background-position: -24px -36px;
+}
+
+.message[category=console][severity=info] > .icon::before,
+.message[category=server][severity=info] > .icon::before {
+  background-position: -36px -36px;
+}
+
+/* Server Logging Styles */
+
+.webconsole-filter-button[category="server"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(rgb(144, 176, 144), rgb(99, 151, 99));
+  border-color: rgb(76, 143, 76);
+}
+
+.message[category=server] > .indent,
+.message.server > .indent {
+  border-inline-end: solid #90B090 6px;
+}
+
+/* Input and output styles */
+.message[category=input] > .indent,
+.message[category=output] > .indent,
+.message.command > .indent,
+.message.result > .indent {
+  border-inline-end: solid #808080 6px;
+}
+
+.message[category=input] > .icon::before,
+.message.command > .icon::before {
+  background-position: -48px -36px;
+}
+
+.message[category=output] > .icon::before,
+.message.result > .icon::before {
+  background-position: -60px -36px;
+}
+
+/* JSTerm Styles */
+.jsterm-input-container {
+  background-color: var(--theme-tab-toolbar-background);
+  border-top: 1px solid var(--theme-splitter-color);
+}
+
+.theme-light .jsterm-input-container {
+  /* For light theme use a white background for the input - it looks better
+     than off-white */
+  background-color: #fff;
+  border-top-color: #e0e0e0;
+}
+
+.theme-firebug .jsterm-input-container {
+  border-top: 1px solid #ccc;
+}
+
+.jsterm-input-node,
+.jsterm-complete-node {
+  border: none;
+  padding: 0;
+  padding-inline-start: 20px;
+  margin: 0;
+  -moz-appearance: none;
+  background-color: transparent;
+}
+
+.jsterm-input-node[focused="true"] {
+  background-image: var(--theme-command-line-image-focus);
+  box-shadow: none;
+}
+
+.jsterm-complete-node {
+  color: var(--theme-comment);
+}
+
+.jsterm-input-node {
+  /* Always allow scrolling on input - it auto expands in js by setting height,
+     but don't want it to get bigger than the window. 24px = toolbar height. */
+  max-height: calc(90vh - 24px);
+  background-image: var(--theme-command-line-image);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  background-position: 4px 50%;
+  color: var(--theme-content-color1);
+}
+
+:-moz-any(.jsterm-input-node,
+          .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
+  overflow-x: hidden;
+  /* Set padding for console input on textbox to make sure it is inlcuded in
+     scrollHeight that is used when resizing JSTerminal's input. Note: textbox
+     default style has important already */
+  padding: 4px 0 !important;
+}
+
+.inlined-variables-view .message-body {
+  display: flex;
+  flex-direction: column;
+  resize: vertical;
+  overflow: auto;
+  min-height: 200px;
+}
+.inlined-variables-view iframe {
+  display: block;
+  flex: 1;
+  margin-top: 5px;
+  margin-bottom: 15px;
+  margin-inline-end: 15px;
+  border: 1px solid var(--theme-splitter-color);
+  border-radius: 3px;
+}
+
+#webconsole-sidebar > tabs {
+  height: 0;
+  border: none;
+}
+
+/* Firebug theme has the tabs visible. */
+.theme-firebug #webconsole-sidebar > tabs {
+  height: 28px;
+}
+
+.devtools-side-splitter ~ #webconsole-sidebar[hidden] {
+  display: none;
+}
+
+/* Security styles */
+
+.message[category=security] > .indent,
+.message.security > .indent {
+  border-inline-end: solid red 6px;
+}
+
+.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#FF3030, #FF7D7D);
+  border-color: #D12C2C;
+}
+
+.message[category=security][severity=error] > .icon::before,
+.message.security.error > .icon::before {
+  background-position: -12px -48px;
+}
+
+.message[category=security][severity=warn] > .icon::before,
+.message.security.warn > .icon::before {
+  background-position: -24px -48px;
+}
+
+.navigation-marker {
+  color: #aaa;
+  background: linear-gradient(#aaa, #aaa) no-repeat left 50%;
+  background-size: 100% 2px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  font-size: 0.9em;
+}
+
+.navigation-marker .url {
+  padding-inline-end: 9px;
+  text-decoration: none;
+  background: var(--theme-body-background);
+}
+
+.theme-light .navigation-marker .url {
+  background: #fff;
+}
+
+.stacktrace {
+  display: none;
+  padding: 5px 10px;
+  margin: 5px 0 0 0;
+  overflow-y: auto;
+  border: 1px solid var(--theme-splitter-color);
+  border-radius: 3px;
+}
+
+.consoletable {
+  margin: 5px 0 0 0;
+}
+
+/* Force cells to only show one row of contents.  Getting normal ellipses
+   behavior has proven impossible so far, so this is better than letting
+   rows get out of vertical alignment when one cell has a lot of content. */
+.consoletable .table-widget-cell > span {
+  overflow: hidden;
+  display: flex;
+  height: 1.25em;
+  line-height: 1.25em;
+}
+
+.theme-light .message[severity=error] .stacktrace,
+.theme-light .message.error .stacktrace {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.theme-dark .message[severity=error] .stacktrace,
+.theme-dark .message.error .stacktrace {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.message[open] .stacktrace,
+.message.open .stacktrace {
+  display: block;
+}
+
+.message .theme-twisty {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 3px 0 0 0;
+  flex-shrink: 0;
+}
+
+/*Do not mirror the twisty because container force to ltr */
+.message .theme-twisty:dir(rtl),
+.message .theme-twisty:-moz-locale-dir(rtl) {
+  transform: none;
+}
+
+.cm-s-mozilla a[class] {
+  font-style: italic;
+  text-decoration: none;
+}
+
+.cm-s-mozilla a[class]:hover,
+.cm-s-mozilla a[class]:focus {
+  text-decoration: underline;
+}
+
+a.learn-more-link.webconsole-learn-more-link {
+    font-style: normal;
+}
+
+/* Open DOMNode in inspector button */
+.open-inspector {
+  background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
+  padding-left: 16px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.elementNode:hover .open-inspector,
+.open-inspector:hover {
+  filter: url(images/filters.svg#checked-icon-state);
+}
+
+.elementNode:hover .open-inspector:active,
+.open-inspector:active {
+  filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
+}
+
+@media (max-width: 500px) {
+  .message > .timestamp {
+    display: none;
+  }
+  .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
+    display: none;
+  }
+  .hud-console-filter-toolbar .webconsole-filter-button {
+    min-width: 40px;
+  }
+  .hud-console-filter-toolbar .webconsole-clear-console-button {
+    min-width: 25px;
+  }
+  .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
+    width: 12px;
+    height: 12px;
+    margin-inline-start: 1px;
+  }
+  .toolbarbutton-menubutton-dropmarker {
+    margin: 0px;
+  }
+}
+
+@media (max-width: 300px) {
+  .hud-console-filter-toolbar {
+    -moz-box-orient: vertical;
+  }
+  .toolbarbutton-text {
+    display: -moz-box;
+  }
+  .devtools-toolbarbutton {
+    margin-top: 3px;
+  }
+  .hud-console-filter-toolbar .hud-filter-box,
+  .hud-console-filter-toolbar .devtools-toolbarbutton {
+    margin-top: 5px;
+  }
+}
+
+/*
+ * This hardcoded width likely due to a toolkit Windows specific bug.
+ * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
+ */
+
+:root[platform="win"] .hud-filter-box {
+  width: 200px;
+}
+
+/* Firebug theme support for console.table() */
+
+.theme-firebug .consoletable .theme-body {
+  width: 100%;
+  border-top: 1px solid #D7D7D7;
+  border-bottom: 2px solid #D7D7D7;
+  border-left: 1px solid #D7D7D7;
+  border-right: 1px solid #D7D7D7;
+}
+
+
+/* NEW CONSOLE STYLES */
+
+#output-wrapper > div {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+#output-container {
+  height: 100%;
+}
+
+.webconsole-output-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  -moz-user-focus: normal;
+}
+
+.webconsole-filterbar-wrapper {
+  flex-grow: 0;
+}
+
+.webconsole-output {
+  flex: 1;
+  overflow: auto;
+}
+
+.webconsole-filterbar-primary {
+  display: flex;
+}
+
+.devtools-toolbar.webconsole-filterbar-secondary {
+  height: initial;
+}
+
+.webconsole-filterbar-primary .devtools-plaininput {
+  flex: 1 1 100%;
+}
+
+.message.startGroup .message-body,
+.message.startGroupCollapsed .message-body {
+  color: var(--theme-body-color);
+  font-weight: bold;
+}
+
+.webconsole-output-wrapper .message > .icon {
+  margin: 3px 0 0 0;
+  padding: 0 0 0 6px;
+}
+
+.message.error > .icon::before {
+  background-position: -12px -36px;
+}
+
+.message.warn > .icon::before {
+  background-position: -24px -36px;
+}
+
+.message.info > .icon::before {
+  background-position: -36px -36px;
+}
+
+.message.network .method {
+  margin-inline-end: 5px;
+}
+
+.webconsole-output-wrapper .message .indent {
+  display: inline-block;
+  border-inline-end: solid 1px var(--theme-splitter-color);
+}
+
+.message.startGroup .indent,
+.message.startGroupCollapsed .indent {
+  border-inline-end-color: transparent;
+  margin-inline-end: 5px;
+}
+
+.message.startGroup .icon,
+.message.startGroupCollapsed .icon {
+    display: none;
+}
+
+/* console.table() */
+.new-consoletable {
+  width: 100%;
+  border-collapse: collapse;
+  --consoletable-border: 1px solid var(--table-splitter-color);
+}
+
+.new-consoletable thead,
+.new-consoletable tbody {
+  background-color: var(--theme-body-background);
+}
+
+.new-consoletable th {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+  margin: 0;
+  padding: 5px 0 0;
+  font-weight: inherit;
+  border-inline-end: var(--consoletable-border);
+  border-bottom: var(--consoletable-border);
+}
+
+.new-consoletable tr:nth-of-type(even) {
+  background-color: var(--table-zebra-background);
+}
+
+.new-consoletable td {
+  padding: 3px 4px;
+  min-width: 100px;
+  -moz-user-focus: normal;
+  color: var(--theme-body-color);
+  border-inline-end: var(--consoletable-border);
+  height: 1.25em;
+  line-height: 1.25em;
+}
diff --git a/devtools/client/themes/widgets.css b/devtools/client/themes/widgets.css
new file mode 100644
index 000000000..a8c1dc734
--- /dev/null
+++ b/devtools/client/themes/widgets.css
@@ -0,0 +1,1621 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* 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 {
+  --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);
+  --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
+  --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
+}
+
+.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);
+  --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
+  --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
+}
+
+.theme-firebug {
+  --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);
+  --delete-icon: url(chrome://devtools/skin/images/firebug/close.svg);
+  --delete-icon-2x: url(chrome://devtools/skin/images/firebug/close.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 {
+  -moz-box-orient: horizontal;
+}
+
+.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 {
+    -moz-box-orient: vertical;
+  }
+
+  .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 n-resize */
+    cursor: n-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;
+  }
+}
+
+/* BreacrumbsWidget */
+
+.breadcrumbs-widget-container {
+  margin-inline-end: 3px;
+  max-height: 24px; /* Set max-height for proper sizing on linux */
+  height: 24px; /* Set height to prevent starting small waiting for content */
+}
+
+.scrollbutton-up,
+.scrollbutton-down {
+  -moz-appearance: none;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  list-style-image: none;
+  margin: 0;
+  padding: 0;
+}
+
+.scrollbutton-up > .toolbarbutton-icon,
+.scrollbutton-down > .toolbarbutton-icon {
+  -moz-appearance: none;
+  width: 7px;
+  height: 16px;
+  background-size: 14px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+  background-image: url("images/breadcrumbs-scrollbutton.png");
+  list-style-image: none;
+  margin: 0 8px;
+  padding: 0;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .scrollbutton-up > .toolbarbutton-icon,
+  .scrollbutton-down > .toolbarbutton-icon {
+    background-image: url("images/breadcrumbs-scrollbutton@2x.png");
+  }
+}
+
+.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
+.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
+  background-position: -7px center;
+}
+
+.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:-moz-locale-dir(ltr),
+.scrollbutton-down:-moz-locale-dir(rtl) {
+  border-right: solid 1px rgba(255, 255, 255, .1);
+  border-left: solid 1px transparent;
+  box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
+}
+
+.scrollbutton-down:-moz-locale-dir(ltr),
+.scrollbutton-up:-moz-locale-dir(rtl) {
+  border-right: solid 1px transparent;
+  border-left: solid 1px rgba(255, 255, 255, .1);
+  box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
+}
+
+.scrollbutton-up[disabled],
+.scrollbutton-down[disabled] {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
+.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
+
+.breadcrumbs-widget-item {
+  background-color: transparent;
+  -moz-appearance: none;
+  min-height: 24px;
+  min-width: 65px;
+  margin: 0;
+  padding: 0 8px 0 20px;
+  border: none;
+  outline: none;
+  color: hsl(210,30%,85%);
+  position: relative;
+}
+
+.breadcrumbs-widget-item > .button-box {
+  border: none;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+:root[platform="win"] .breadcrumbs-widget-item:-moz-focusring > .button-box {
+  border-width: 0;
+}
+
+.breadcrumbs-widget-item::before {
+  content: "";
+  position: absolute;
+  top: 1px;
+  offset-inline-start: 0;
+  width: 12px;
+  height: 22px;
+  background-repeat: no-repeat;
+  /* Given the 1/2 aspect ratio of the separator pseudo-element and the 45deg angle of
+     the arrow shape, we need the arrow edges to be at this position from the start of
+     the gradient line. */
+  --position: 66.5%;
+  /* The color of the thin line in the arrow-shaped separator between 2 unselected
+     crumbs. There is no theme variable for this, this used to be an image. */
+  --line-color: #ACACAC;
+  --background-color: var(--theme-body-background);
+}
+
+#debugger-toolbar .breadcrumbs-widget-item::before {
+  --background-color: var(--theme-toolbar-background);
+}
+
+.theme-dark .breadcrumbs-widget-item::before {
+  --line-color: #6E6E6E;
+}
+
+.breadcrumbs-widget-item:first-child::before {
+  /* The first crumb does not need any separator before itself */
+  content: unset;
+}
+
+.breadcrumbs-widget-item:dir(rtl)::before {
+  transform: scaleX(-1);
+}
+
+.breadcrumbs-widget-item:not([checked])::before {
+  background-color: var(--background-color);
+  background-image:
+    linear-gradient(45deg,
+                    var(--background-color) 30%,
+                    transparent),
+    linear-gradient(-45deg,
+                    transparent,
+                    var(--background-color) 70%,
+                    var(--background-color)),
+    linear-gradient(45deg,
+                    transparent var(--position),
+                    var(--line-color) var(--position),
+                    var(--line-color) calc(var(--position) + 1px),
+                    transparent 0),
+    linear-gradient(-45deg,
+                    transparent calc(100% - var(--position)),
+                    var(--line-color) calc(100% - var(--position)),
+                    var(--line-color) calc(calc(100% - var(--position)) + 1px),
+                    transparent 0);
+  background-size:
+    100% 50%,
+    100% 50%,
+    100%,
+    100%;
+  background-position:
+    left bottom,
+    left top,
+    left top,
+    left top;
+}
+
+.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item::before {
+  background-color: var(--theme-selection-background);
+  background-image:
+    linear-gradient(45deg,
+                    transparent var(--position),
+                    var(--background-color) 0),
+    linear-gradient(-45deg,
+                    var(--background-color) calc(100% - var(--position)),
+                    transparent 0);
+  background-size: unset;
+}
+
+.breadcrumbs-widget-item[checked]::before {
+  background-image:
+    linear-gradient(45deg,
+                    transparent var(--position),
+                    var(--theme-selection-background) 0),
+    linear-gradient(-45deg,
+                    var(--theme-selection-background) calc(100% - var(--position)),
+                    var(--background-color) 0);
+}
+
+.breadcrumbs-widget-item[checked] {
+  background-color: var(--theme-selection-background);
+}
+
+.breadcrumbs-widget-item:first-child {
+  background-image: none;
+}
+
+/* RTL support: move the images that were on the left to the right,
+ * and move images that were on the right to the left.
+ */
+.breadcrumbs-widget-item:dir(rtl) {
+  padding: 0 20px 0 8px;
+}
+
+.breadcrumbs-widget-item:dir(rtl),
+.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:dir(rtl) {
+  background-position: center right;
+}
+
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
+.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-selection-color);
+}
+
+.theme-dark .breadcrumbs-widget-item {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .breadcrumbs-widget-item {
+  color: var(--theme-body-color);
+}
+
+.breadcrumbs-widget-item-id {
+  color: var(--theme-body-color-alt);
+}
+
+.breadcrumbs-widget-item-classes {
+  color: var(--theme-content-color1);
+}
+
+.breadcrumbs-widget-item-pseudo-classes {
+  color: var(--theme-highlight-lightorange);
+}
+
+.theme-dark .breadcrumbs-widget-item:not([checked]):hover label {
+  color: white;
+}
+
+.theme-light .breadcrumbs-widget-item:not([checked]):hover label {
+  color: black;
+}
+
+/* Firebug theme support for breadcrumbs widget. */
+
+.theme-firebug .breadcrumbs-widget-item {
+  margin-inline-start: 10px;
+  margin-inline-end: 1px;
+  background-image: none;
+  border: 1px solid transparent;
+  color: #141414;
+  border-radius: 2px;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+  font-size: var(--theme-toolbar-font-size);
+}
+
+.theme-firebug .breadcrumbs-widget-item:hover {
+  border-color: rgba(0, 0, 0, 0.2);
+  background: transparent linear-gradient(
+              rgba(255, 255, 255, 0.4),
+              rgba(255, 255, 255, 0.2)) no-repeat;
+  box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6) inset,
+              0 0 1px rgba(255, 255, 255, 0.6) inset,
+              0 0 2px rgba(0, 0, 0, 0.05);
+}
+
+.theme-firebug .breadcrumbs-widget-item > .button-box {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.theme-firebug .breadcrumbs-widget-item:first-child {
+  margin: 0;
+}
+
+.theme-firebug .breadcrumbs-widget-item:not(:first-child)::before {
+  content: url(chrome://devtools/skin/images/firebug/breadcrumbs-divider.svg);
+  background: none;
+  position: relative;
+  left: -3px;
+  margin: 0 0 0 -5px;
+  padding: 0;
+  width: 5px;
+}
+
+/* Breadcrumbs Separators (reset selection styles) */
+.theme-firebug .breadcrumbs-widget-item[checked],
+.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
+.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
+.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
+.theme-firebug .breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
+  background: none;
+  font-weight: bold;
+  color: inherit;
+}
+
+/* The first rule is there only to make sure the default rule from
+widgets.css is overwritten. */
+.theme-firebug .breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
+  background: none;
+}
+
+.theme-firebug .breadcrumbs-widget-item .breadcrumbs-widget-item-tag {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+/* Breadcrumbs Scrolling Buttons */
+
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-up,
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-down {
+  padding: 0;
+  box-shadow: none;
+}
+
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:hover,
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:hover {
+  border: 1px transparent solid !important;
+  box-shadow: none !important;
+}
+
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:active,
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:active {
+  background: none !important;
+}
+
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-up > .toolbarbutton-icon {
+  background-image: url(chrome://global/skin/arrow/arrow-lft-sharp.gif);
+}
+
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-down > .toolbarbutton-icon {
+  background-image: url(chrome://global/skin/arrow/arrow-lft-sharp.gif);
+}
+
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
+.theme-firebug .breadcrumbs-widget-container .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
+  background-position: 0 center;
+}
+
+/* SimpleListWidget */
+
+.simple-list-widget-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.simple-list-widget-item.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .simple-list-widget-item:not(.selected):hover {
+  background-color: rgba(255,255,255,.05);
+}
+
+.theme-light .simple-list-widget-item:not(.selected):hover {
+  background-color: rgba(0,0,0,.05);
+}
+
+.simple-list-widget-empty-text,
+.simple-list-widget-perma-text {
+  padding: 4px 8px;
+}
+
+.simple-list-widget-empty-text,
+.simple-list-widget-perma-text {
+  color: var(--theme-body-color-alt);
+}
+
+/* FastListWidget */
+
+.fast-list-widget-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.fast-list-widget-empty-text {
+  padding: 4px 8px;
+}
+
+.fast-list-widget-empty-text {
+  color: var(--theme-body-color-alt);
+}
+
+/* SideMenuWidget */
+
+.side-menu-widget-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+/* SideMenuWidget container */
+
+.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
+  /* To compensate for the arrow image's dark margin. */
+  margin-inline-end: -1px;
+}
+
+/* SideMenuWidget groups */
+
+.side-menu-widget-group-title {
+  padding: 4px;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(128,128,128,0.15);
+}
+
+.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-contents {
+  padding-inline-start: 20px;
+}
+
+/* SideMenuWidget items */
+
+.side-menu-widget-item {
+  border-bottom: 1px solid rgba(128,128,128,0.15);
+  background-clip: padding-box;
+}
+
+.side-menu-widget-item.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.side-menu-widget-item-arrow {
+  margin-inline-start: -7px;
+  width: 7px; /* The image's width is 7 pixels */
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
+  background-image: var(--sidemenu-selected-arrow);
+  background-size: auto;
+  background-repeat: no-repeat;
+  background-position: center right;
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+  background-image: var(--sidemenu-selected-arrow-rtl);
+  background-position: center left;
+}
+
+/* SideMenuWidget items contents */
+
+.side-menu-widget-item-contents {
+  padding: 4px;
+  /* To avoid having content overlapping the arrow image. */
+  padding-inline-end: 8px;
+}
+
+.side-menu-widget-item-other {
+  /* To avoid having content overlapping the arrow image. */
+  padding-inline-end: 8px;
+  /* To compensate for the .side-menu-widget-item-contents padding. */
+  margin-inline-start: -4px;
+  margin-inline-end: -8px;
+}
+
+.side-menu-widget-group-title + .side-menu-widget-group-list .side-menu-widget-item-other {
+  /* To compensate for the .side-menu-widget-item-contents padding. */
+  margin-inline-start: -20px;
+}
+
+.side-menu-widget-item.selected .side-menu-widget-item-other:not(.selected) {
+  background-color: var(--theme-sidebar-background);
+  box-shadow: inset 2px 0 0 var(--theme-selection-background);
+  color: var(--theme-body-color);
+}
+
+.side-menu-widget-item.selected .side-menu-widget-item-other.selected {
+  background-color: var(--theme-selection-background);
+}
+
+.side-menu-widget-item-other:first-of-type {
+  margin-top: 4px;
+}
+
+.side-menu-widget-item-other:last-of-type {
+  margin-bottom: -4px;
+}
+
+/* SideMenuWidget checkboxes */
+
+.side-menu-widget-group-checkbox {
+  margin: 0;
+  margin-inline-end: 4px;
+}
+
+.side-menu-widget-item-checkbox {
+  margin: 0;
+  margin-inline-start: 4px;
+}
+
+/* SideMenuWidget misc */
+
+.side-menu-widget-empty-text {
+  padding: 4px 8px;
+  background-color: var(--theme-sidebar-background);
+}
+
+/* VariablesView */
+
+.variables-view-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.variables-view-empty-notice {
+  padding: 2px;
+}
+
+.variables-view-empty-notice {
+  color: var(--theme-body-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;
+}
+
+/* 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 rgba(128, 128, 128, .15);
+}
+
+.theme-firebug .variables-view-variable {
+  border-bottom: 1px solid transparent;
+}
+
+.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;
+}
+
+.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]):not([pseudo-item]) > .title > .name {
+  opacity: 0.6;
+}
+
+.variable-or-property-non-writable-icon {
+  background: url("chrome://devtools/skin/images/vview-lock.png") no-repeat;
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+}
+
+@media (min-resolution: 1.1dppx) {
+  .variable-or-property-non-writable-icon {
+    background-image: url("chrome://devtools/skin/images/vview-lock@2x.png");
+  }
+}
+
+.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 {
+  -moz-box-flex: 1;
+}
+
+.variables-view-container[aligned-values] .title > .value {
+  -moz-box-flex: 0;
+  width: 70vw;
+}
+
+.variables-view-container[aligned-values] .title > .element-value-input {
+  width: calc(70vw - 10px);
+}
+
+/* Actions first */
+
+.variables-view-open-inspector {
+  -moz-box-ordinal-group: 1;
+}
+
+.variables-view-edit,
+.variables-view-add-property {
+  -moz-box-ordinal-group: 2;
+}
+
+.variable-or-property-frozen-label,
+.variable-or-property-sealed-label,
+.variable-or-property-non-extensible-label,
+.variable-or-property-non-writable-icon {
+  -moz-box-ordinal-group: 3;
+}
+
+.variables-view-delete {
+  -moz-box-ordinal-group: 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 {
+  -moz-box-ordinal-group: 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;
+  cursor: pointer;
+}
+
+.variables-view-delete:hover,
+.variables-view-edit:hover,
+.variables-view-open-inspector:hover {
+  filter: url(images/filters.svg#checked-icon-state);
+}
+
+.variables-view-delete:active,
+.variables-view-edit:active,
+.variables-view-open-inspector:active {
+  filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
+}
+
+.variable-or-property:focus > .title > .variables-view-delete,
+.variable-or-property:focus > .title > .variables-view-edit,
+.variable-or-property:focus > .title > .variables-view-open-inspector {
+  filter: none;
+}
+
+.variables-view-delete {
+  background-image: var(--delete-icon);
+}
+
+@media (min-resolution: 1.1dppx) {
+  .variables-view-delete {
+    background-image: var(--delete-icon-2x);
+  }
+}
+
+.variables-view-edit {
+  background-image: url("chrome://devtools/skin/images/vview-edit.png");
+}
+
+@media (min-resolution: 1.1dppx) {
+  .variables-view-edit {
+    background-image: url("chrome://devtools/skin/images/vview-edit@2x.png");
+  }
+}
+
+.variables-view-open-inspector {
+  background-image: url("chrome://devtools/skin/images/vview-open-inspector.png");
+}
+
+@media (min-resolution: 1.1dppx) {
+  .variables-view-open-inspector {
+    background-image: url("chrome://devtools/skin/images/vview-open-inspector@2x.png");
+  }
+}
+
+/* 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;
+}
+
+/* Canvas graphs */
+
+.graph-widget-container {
+  position: relative;
+}
+
+.graph-widget-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.graph-widget-canvas[input=hovering-background] {
+  cursor: text;
+}
+
+.graph-widget-canvas[input=hovering-region] {
+  cursor: pointer;
+}
+
+.graph-widget-canvas[input=hovering-selection-start-boundary],
+.graph-widget-canvas[input=hovering-selection-end-boundary],
+.graph-widget-canvas[input=adjusting-selection-boundary] {
+  cursor: col-resize;
+}
+
+.graph-widget-canvas[input=adjusting-view-area] {
+  cursor: grabbing;
+}
+
+.graph-widget-canvas[input=hovering-selection-contents] {
+  cursor: grab;
+}
+
+.graph-widget-canvas[input=dragging-selection-contents] {
+  cursor: grabbing;
+}
+
+/* Line graph widget */
+
+.line-graph-widget-gutter {
+  position: absolute;
+  width: 10px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  border-inline-end: 1px solid;
+}
+
+.theme-light .line-graph-widget-gutter {
+  background: rgba(255,255,255,0.75);
+  border-inline-end-color: rgba(255,255,255,0.25);
+}
+
+.theme-dark .line-graph-widget-gutter {
+  background: rgba(0,0,0,0.5);
+  border-inline-end-color: rgba(0,0,0,0.25);
+}
+
+.line-graph-widget-gutter-line {
+  position: absolute;
+  width: 100%;
+  border-top: 1px solid;
+}
+
+.line-graph-widget-gutter-line[type=maximum] {
+  border-color: #2cbb0f;
+}
+
+.line-graph-widget-gutter-line[type=minimum] {
+  border-color: #ed2655;
+}
+
+.line-graph-widget-gutter-line[type=average] {
+  border-color: #d97e00;
+}
+
+.line-graph-widget-tooltip {
+  position: absolute;
+  border-radius: 2px;
+  line-height: 15px;
+  padding-inline-start: 6px;
+  padding-inline-end: 6px;
+  transform: translateY(-50%);
+  font-size: 0.8rem !important;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.theme-light .line-graph-widget-tooltip {
+  background: rgba(255,255,255,0.75);
+}
+
+.theme-dark .line-graph-widget-tooltip {
+  background: rgba(0,0,0,0.5);
+}
+
+.line-graph-widget-tooltip[with-arrows=true]::before {
+  content: "";
+  position: absolute;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  top: calc(50% - 3px);
+}
+
+.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
+  border-inline-end: 3px solid;
+  left: -3px;
+}
+
+.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
+  border-inline-start: 3px solid;
+  right: -3px;
+}
+
+.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
+  border-inline-end-color: rgba(255,255,255,0.75);
+}
+
+.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
+  border-inline-end-color: rgba(0,0,0,0.5);
+}
+
+.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
+  border-inline-start-color: rgba(255,255,255,0.75);
+}
+
+.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
+  border-inline-start-color: rgba(0,0,0,0.5);
+}
+
+.line-graph-widget-tooltip[type=maximum] {
+  left: 14px;
+}
+
+.line-graph-widget-tooltip[type=minimum] {
+  left: 14px;
+}
+
+.line-graph-widget-tooltip[type=average] {
+  right: 4px;
+}
+
+.line-graph-widget-tooltip > [text=info] {
+  color: var(--theme-content-color1);
+}
+
+.line-graph-widget-tooltip > [text=value] {
+  margin-inline-start: 3px;
+}
+
+.line-graph-widget-tooltip > [text=metric] {
+  margin-inline-start: 1px;
+  color: var(--theme-content-color3);
+}
+
+.theme-light .line-graph-widget-tooltip > [text=value],
+.theme-light .line-graph-widget-tooltip > [text=metric] {
+  text-shadow: 1px  0px rgba(255,255,255,0.5),
+              -1px  0px rgba(255,255,255,0.5),
+               0px -1px rgba(255,255,255,0.5),
+               0px  1px rgba(255,255,255,0.5);
+}
+
+.theme-dark .line-graph-widget-tooltip > [text=value],
+.theme-dark .line-graph-widget-tooltip > [text=metric] {
+  text-shadow: 1px  0px rgba(0,0,0,0.5),
+              -1px  0px rgba(0,0,0,0.5),
+               0px -1px rgba(0,0,0,0.5),
+               0px  1px rgba(0,0,0,0.5);
+}
+
+.line-graph-widget-tooltip[type=maximum] > [text=value] {
+  color: var(--theme-highlight-green);
+}
+
+.line-graph-widget-tooltip[type=minimum] > [text=value] {
+  color: var(--theme-highlight-red);
+}
+
+.line-graph-widget-tooltip[type=average] > [text=value] {
+  color: var(--theme-highlight-orange);
+}
+
+/* Bar graph widget */
+
+.bar-graph-widget-legend {
+  position: absolute;
+  top: 4px;
+  left: 8px;
+  color: #292e33;
+  font-size: 80%;
+  pointer-events: none;
+}
+
+.bar-graph-widget-legend-item {
+  float: left;
+  margin-inline-end: 8px;
+}
+
+.bar-graph-widget-legend-item > [view="color"],
+.bar-graph-widget-legend-item > [view="label"] {
+  vertical-align: middle;
+}
+
+.bar-graph-widget-legend-item > [view="color"] {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border: 1px solid #fff;
+  border-radius: 1px;
+  margin-inline-end: 4px;
+  pointer-events: all;
+  cursor: pointer;
+}
+
+.bar-graph-widget-legend-item > [view="label"] {
+  text-shadow: 1px  0px rgba(255,255,255,0.8),
+              -1px  0px rgba(255,255,255,0.8),
+               0px -1px rgba(255,255,255,0.8),
+               0px  1px rgba(255,255,255,0.8);
+}
+
+/* Charts */
+
+.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-body-color-alt);
+}
+
+.chart-colored-blob {
+  fill: var(--theme-content-color2);
+  background: var(--theme-content-color2);
+}
+
+/* Charts: 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):not([focused]),
+.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
+  transform: none !important;
+}
+
+/* Charts: 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-body-color-alt); /* Grey foreground text */
+}
+
+.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);
+}
+
+/* Table Widget */
+
+/* Table body */
+
+.table-widget-body > .devtools-side-splitter {
+  background-color: transparent;
+}
+
+.table-widget-body {
+  overflow: auto;
+}
+
+.table-widget-body,
+.table-widget-empty-text {
+  background-color: var(--theme-body-background);
+}
+
+/* Column Headers */
+
+.table-widget-column-header,
+.table-widget-cell {
+  border-inline-end: 1px solid var(--table-splitter-color) !important;
+}
+
+/* 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 0 0 !important;
+  color: inherit;
+  text-align: center;
+  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-arrows.svg#ascending");
+}
+
+.table-widget-column-header[sorted=descending] {
+  background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
+}
+
+.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;
+}
+
+/* Firebug theme support for table widget */
+
+.theme-firebug .devtools-toolbar.table-widget-column-header {
+  font-family: var(--proportional-font-family);
+  color: var(--theme-body-color);
+
+  /* Make sure to override the default Firebug devtools-toolbar height */
+  height: 19px !important;
+
+  /* Make sure to override the dafault .table-widget-column-header font-weight and background */
+  font-weight: bold !important;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.05));
+  background-color: #C8D2DC !important;
+
+  /* Vertically center header label */
+  padding-top: 2px !important;
+}
+
+.theme-firebug .devtools-toolbar.table-widget-column-header[sorted] {
+  background-color: #AAC3DC !important;
+}
+
+.theme-firebug .devtools-toolbar.table-widget-column-header:hover:active {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.1),
+                                    transparent);
+}
+
+.theme-firebug .devtools-toolbar.table-widget-column-header[sorted=descending]:not(:active) {
+  background-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg);
+}
+
+.theme-firebug .devtools-toolbar.table-widget-column-header[sorted=ascending]:not(:active) {
+  background-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
+}
+
+/* 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;
+  text-align: center;
+  font-size: large;
+  margin-top: -20px !important;
+}
+
+.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%;
+  height: 100%;
+  list-style: none;
+  overflow: hidden;
+  margin-inline-end: 40px;
+}
+
+.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: 2px 0px 4px;
+  /* 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: 17px !important;
+  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: 14px;
+  height: 14px;
+  float: left;
+  margin: 3px 2px -3px;
+  background-repeat: no-repeat;
+  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-size: 56px 28px;
+  cursor: pointer;
+  background-position: -28px -14px;
+}
+
+.tree-widget-item:-moz-locale-dir(rtl)::before {
+  float: right;
+  transform: scaleX(-1);
+}
+
+.theme-light .tree-widget-item:not(.theme-selected)::before {
+  background-position: 0 -14px;
+}
+
+.tree-widget-item[empty]::before {
+  background: transparent;
+}
+
+.tree-widget-item[expanded]::before {
+  background-position: -42px -14px;
+}
+
+.theme-light .tree-widget-item:not(.theme-selected)[expanded]:before {
+  background-position: -14px -14px;
+}
+
+.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;
+  }
+}
+
+@media (min-resolution: 1.1dppx) {
+  .tree-widget-item:before {
+    background-image: url("chrome://devtools/skin/images/controls@2x.png");
+  }
+}
+
+/* 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: left;
+  width: 16px;
+  height: 17px;
+  margin-inline-end: 4px;
+  background-repeat: no-repeat;
+  background-size: 20px auto;
+  background-position: 0 0;
+  background-size: auto 20px;
+  opacity: 0.75;
+}
+
+.tree-widget-item.theme-selected[type]::after {
+  opacity: 1;
+}
+
+.tree-widget-item:-moz-locale-dir(rtl)::after {
+  float: right;
+}
+
+.theme-light .tree-widget-item.theme-selected[type]::after,
+.theme-dark .tree-widget-item[type]::after {
+  filter: invert(1);
+}
+
+.tree-widget-item[type="dir"]::after {
+  background-image: url(chrome://devtools/skin/images/filetypes/dir-close.svg);
+  background-position: 2px 0;
+  background-size: auto 16px;
+  width: 20px;
+}
+
+.tree-widget-item[type="dir"][expanded]:not([empty])::after {
+  background-image: url(chrome://devtools/skin/images/filetypes/dir-open.svg);
+}
+
+.tree-widget-item[type="url"]::after {
+  background-image: url(chrome://devtools/skin/images/filetypes/globe.svg);
+  background-size: auto 18px;
+  width: 18px;
+}