add firefox theme40.20150819

187 files changed, 12998 insertions, 0 deletions

diff --git a/arc-firefox-theme/chrome/browser/devtools/add.svg b/arc-firefox-theme/chrome/browser/devtools/add.svg
new file mode 100644
index 0000000..af162e3
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/add.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <polygon fill="#EEF0F2" points="4,7 8,7 8,3 10,3 10,7 14,7 14,9 10,9 10,13 8,13 8,9 4,9 4,7"></polygon>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/alerticon-warning.png b/arc-firefox-theme/chrome/browser/devtools/alerticon-warning.png
new file mode 100644
index 0000000..5c5d0ae
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/alerticon-warning.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/alerticon-warning@2x.png b/arc-firefox-theme/chrome/browser/devtools/alerticon-warning@2x.png
new file mode 100644
index 0000000..dc3a3b1
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/alerticon-warning@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
new file mode 100644
index 0000000..6cc0bdb
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
@@ -0,0 +1,256 @@
+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 */
+
+#toolbar {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  height: 20px;
+}
+
+#toolbar .label {
+  padding: 1px 4px;
+}
+
+#toggle-all {
+  border-width: 0 0 0 1px;
+  min-height: 20px;
+}
+
+/* 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;
+}
+
+/* The animation players container */
+
+#players {
+  flex: 1;
+  overflow: auto;
+}
+
+/* Element picker and toggle-all buttons */
+
+#element-picker,
+#toggle-all {
+  position: relative;
+}
+
+#element-picker::before,
+#toggle-all::before {
+  content: "";
+  display: block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -8px 0 0 -8px;
+  background-image: url("chrome://browser/skin/devtools/command-pick.png");
+}
+
+#toggle-all::before {
+  background-image: url("debugger-pause.png");
+}
+
+#element-picker[checked]::before {
+  background-position: -48px 0;
+  filter: none; /* Icon is blue when checked, don't invert for light theme */
+}
+
+#toggle-all.paused::before {
+  background-image: url("debugger-play.png");
+}
+
+@media (min-resolution: 1.25dppx) {
+  #element-picker::before {
+    background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
+    background-size: 64px;
+  }
+
+  #toggle-all::before {
+    background-image: url("debugger-pause@2x.png");
+  }
+
+  #toggle-all.paused::before {
+    background-image: url("debugger-play@2x.png");
+  }
+}
+
+/* Animation target node gutter, contains a preview of the dom node */
+
+.animation-target {
+  background-color: var(--theme-toolbar-background);
+  padding: 1px 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.animation-target .attribute-name {
+  padding-left: 4px;
+}
+
+.animation-target .node-selector {
+  background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
+  padding-left: 16px;
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.animation-target .node-selector:hover {
+  background-position: -32px 0;
+}
+
+.animation-target .node-selector:active {
+  background-position: -16px 0;
+}
+
+/* Animation title gutter, contains the name, duration, iteration */
+
+.animation-title {
+  background-color: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 1px 4px;
+  word-wrap: break-word;
+  overflow: auto;
+}
+
+.animation-title .meta-data {
+  float: right;
+}
+
+.animation-title strong {
+  margin: 0 .5em;
+}
+
+/* Timeline wiget */
+
+.timeline {
+  height: 20px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.timeline .playback-controls {
+  display: flex;
+  flex-direction: row;
+}
+
+/* Playback control buttons */
+
+.timeline .playback-controls button {
+  flex-grow: 1;
+  border-width: 0 1px 0 0;
+}
+
+.timeline .toggle::before {
+  background-image: url(debugger-pause.png);
+}
+
+.paused .timeline .toggle::before,
+.finished .timeline .toggle::before {
+  background-image: url(debugger-play.png);
+}
+
+.timeline .ff::before {
+  background-image: url(fast-forward.png);
+}
+
+.timeline .rw::before {
+  background-image: url(rewind.png);
+}
+
+@media (min-resolution: 1.25dppx) {
+  .timeline .toggle::before {
+    background-image: url(debugger-pause@2x.png);
+  }
+
+  .paused .timeline .toggle::before,
+  .finished .timeline .toggle::before {
+    background-image: url(debugger-play@2x.png);
+  }
+
+  .timeline .ff::before {
+    background-image: url(fast-forward@2x.png);
+  }
+
+  .timeline .rw::before {
+    background-image: url(rewind@2x.png);
+  }
+}
+
+.timeline .rate {
+  -moz-appearance: none;
+  text-align: center;
+  color: var(--theme-body-color);
+  border-right: 1px solid var(--theme-splitter-color);
+}
+
+/* Slider (input type range) container */
+
+.timeline .sliders-container {
+  flex-grow: 1;
+  height: 100%;
+  position: relative;
+  border-width: 1px 0;
+}
+
+.timeline .sliders-container .current-time {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.timeline .sliders-container .current-time::-moz-range-thumb {
+  height: 100%;
+  width: 4px;
+  border-radius: 0;
+  border: none;
+  background: var(--theme-highlight-blue);
+}
+
+.timeline .sliders-container .current-time::-moz-range-track {
+  width: 100%;
+  height: 50px;
+  background: transparent;
+}
+
+/* Current time label */
+
+.timeline .time-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  border-left: 1px solid var(--theme-splitter-color);
+  background: var(--theme-toolbar-background);
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg
new file mode 100644
index 0000000..f1b5594
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.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" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
+  <path fill="#00B2F7" d="M32.336,3.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5
+    S48.076,3.894,32.336,3.894z M44.86,36.966h-7.823v7.62c0,2.582-2.12,4.702-4.702,4.702c-2.584,0-4.704-2.12-4.704-4.702v-7.62
+    h-7.817c-2.52,0-4.572-2.056-4.572-4.572s2.053-4.572,4.572-4.572h7.817v-7.62c0-2.582,2.12-4.702,4.704-4.702
+    c2.582,0,4.702,2.12,4.702,4.702v7.62h7.823c2.514,0,4.57,2.056,4.57,4.572S47.374,36.966,44.86,36.966z"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css
new file mode 100644
index 0000000..dc51832
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/connection-footer.css
@@ -0,0 +1,224 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/************** LAYOUT **************/
+
+#connection-footer {
+  display: flex;
+  flex-direction: column;
+  height: 50px;
+}
+
+#banners-and-logs {
+  display: flex;
+  flex-grow: 1;
+  max-height: 100%;
+}
+
+#logs {
+  display: flex;
+  width: 40%;
+  padding: 0;
+  width: 100%;
+}
+
+.banner {
+  display: none;
+  width: 60%;
+}
+
+#connection-footer[status="connected"]     #banner-connected,
+#connection-footer[status="connecting"]    #banner-connecting,
+#connection-footer[status="disconnected"]  #banner-disconnected,
+#connection-footer[status="disconnecting"] #banner-disconnecting {
+  display: flex;
+}
+
+body.show-simulators .banner,
+body.edit-connection .banner {
+  display: none !important;
+}
+
+body.show-simulators #banner-simulators,
+body.edit-connection #banner-editing {
+  display: flex !important;
+}
+
+#banner-logs {
+  width: 40%;
+  display: flex;
+}
+
+#logs > pre {
+  overflow: auto;
+  white-space: pre-line;
+}
+
+#status.banner-box {
+  width: 100% !important;
+}
+
+.banner-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+
+#banner-connected > .banner-box {
+  align-items: flex-start;
+}
+
+#start-simulator-box {
+  display: inline;
+}
+
+/************** PIXELS **************/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: 0.9rem;
+}
+
+body {
+  color: #333;
+  background-color: white;
+  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
+}
+
+button {
+  background: linear-gradient(to bottom, #49535C, #394148);
+  box-shadow: 0px 1px 1px #3C444D, inset 0 1px 0px rgba(255,255,255,0.1);
+  color: #9FA6AD;
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
+  border: 1px solid #111;
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 3px 10px;
+}
+
+button.left {
+  margin-right: 0px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+button.right {
+  margin-left: -6px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+button.action-primary {
+  background: linear-gradient(to bottom, #276DA3, #1E5580);
+  color: #EEE;
+}
+
+button.action-cancel {
+  background: linear-gradient(to bottom, #B32B02, #942300);
+  color: #EEE;
+}
+
+#banners-and-logs {
+  border-top: #111 solid;
+  border-width: 1px 0;
+  background: linear-gradient(to bottom, #323A42, #29313A);
+  color: #A8BABF;
+  box-shadow: inset 0 0 1px #424A51;
+}
+
+#status {
+  background: linear-gradient(to bottom, #454F59, #404952);
+  box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973;
+}
+
+#logs > pre {
+  border: 1px solid #111;
+  box-shadow: 0px 1px 1px #49525A, inset 0 0 5px rgba(0,0,0,0.3);
+  font-size: 10px;
+  background: #22272D;
+  padding: 5px;
+  height: 100%;
+  padding-left: 20px;
+  position: relative;
+}
+
+#logs > pre span{
+  text-shadow: 0 1px 2px #000;
+  color: #3195FB;
+  position: fixed;
+  right: calc(30% - 15px);
+  bottom: -1px;
+}
+
+#logs > pre b {
+  font-size: 10px;
+  color: #70C4FF;
+}
+
+.banner-box {
+  box-shadow: inset 0 0 1px #667480, inset 0 1px 0 #5E6973;
+  border-right: 1px solid #111;
+  background-position: center right;
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  padding: 10px 20px;
+  position: relative;
+}
+
+.connected-status {
+  color: #B3BFC9;
+  text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
+  padding-bottom: 10px;
+}
+
+.connected-status {
+  font-size: 150%;
+  top: 10%;
+  padding-right: 3px;
+  position: relative;
+}
+
+.connected-indicator {
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0px 1px rgba(255,255,255,0.3);
+  height: 100%;
+  flex: 0 0 10px;
+}
+
+#banner-connected .connected-indicator,
+#banner-connecting .connected-indicator {
+  background: linear-gradient(to bottom, #69B8FF, #339FFF );
+}
+
+#banner-simulators .connected-indicator,
+#banner-disconnected .connected-indicator,
+#banner-editing .connected-indicator,
+#banner-disconnecting .connected-indicator {
+  background: linear-gradient(to bottom, #375A87, #1C4375 );
+}
+
+#banner-simulators .banner-content > * {
+  display: inline-block;
+}
+
+#banner-simulators[simulator-count="0"] .found-simulator,
+#banner-simulators:not([simulator-count="0"]) .no-simulator {
+  display: none;
+}
+
+#connection-no-device,
+[device-count="0"] > #connection-found-device,
+#connection-manual,
+#connection-assisted {
+  display: none;
+}
+
+#connection-found-device,
+[device-count="0"] > #connection-no-device,
+[adb-available="true"] > #connection-assisted,
+[adb-available="false"] > #connection-manual {
+  display: inline;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png b/arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png
new file mode 100644
index 0000000..f186d9c
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/default-app-icon.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/device.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/device.css
new file mode 100644
index 0000000..fc6efd9
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/device.css
@@ -0,0 +1,410 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/*****************      GENERAL      *****************/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  font-size: 0.9rem;
+  color: #333;
+  background-color:  rgb(225, 225, 225);
+  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
+  display: flex;
+  flex-direction: column;
+}
+
+template {
+  display: none;
+}
+
+h1 {
+  font-size: 20px;
+}
+
+#content {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden;
+}
+
+#detail {
+  background-image: url('noise.png');
+  display: flex;
+  flex-grow: 1;
+  z-index: 1;
+  overflow: hidden;
+}
+
+#meta {
+  background-size: 100%;
+  padding-top: 50px;
+}
+
+#connection-footer {
+  border-width: 0;
+  height: 50px;
+  min-height: 50px;
+}
+
+
+#root-actor-debug {
+  background: white;
+}
+
+/*****************     APP BUTTONS      *****************/
+
+
+
+.app-buttons {
+  display: block;
+  margin-left: 20px;
+  color: #BBB;
+}
+
+button {
+  margin: 0;
+  font-size: 11px;
+  border: 1px solid #CCC;
+  padding: 5px 15px;
+  cursor: pointer;
+  background: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+  border-radius: 3px;
+  border-width: 1px;
+}
+
+.app-buttons > button {
+  display: none;
+}
+
+.app-buttons > button[disabled] {
+  background-color: transparent;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.app[running="false"] > .app-buttons > .button-start,
+.app[running="true"] > .app-buttons > .button-stop,
+.app[running="true"] > .app-buttons > .button-debug {
+  display: inline-block;
+}
+
+.button-debug {
+  color: #3498DB;
+}
+
+.button-debug:hover {
+  background-color: #3498DB;
+  color: #FFF;
+}
+
+.button-debug[disabled] {
+  color: #3498DB;
+}
+
+.button-start {
+  color: #18BC9C
+}
+
+.button-start:hover {
+  background-color: #18BC9C;
+  color: #FFF;
+}
+
+.button-start[disabled] {
+  color: #18BC9C
+}
+
+.button-stop {
+  color: #E74C3C;
+}
+
+.button-stop:hover {
+  background-color: #E74C3C;
+  color: #FFF;
+}
+
+.button-stop[disabled] {
+  color: #E74C3C;
+}
+
+
+
+/*****************     PERMISSIONS     *****************/
+
+
+
+
+.permission-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.permission-table-body {
+  overflow: auto;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}
+
+.permission-table-header,
+.permission-table-footer {
+  display: flex;
+  background: #FFF;
+  border-top: 1px solid #CCC;
+  z-index: 2;
+  flex-shrink: 0;
+}
+
+.permission-table-header > div,
+.permission-table-footer > div {
+  z-index: 2;
+  flex-grow: 1;
+  background: linear-gradient(to bottom, #49535C, #394148);
+  box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), inset 0 1px 0px rgba(255,255,255,0.1);
+  color: #9FA6AD;
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
+  border: 0;
+  margin: auto 0;
+  padding: 5px;
+  text-align: center;
+  background: transparent;
+  box-shadow: none;
+  text-shadow: none;
+}
+
+.permission-table-header > div {
+  flex-basis: 20%;
+}
+
+.permission-table-header > div:first-child {
+  text-align: start;
+  padding-left: 10px;
+  flex-basis: 30%;
+}
+
+.permission-table-header {
+  border: 0;
+  border-bottom: 1px solid #CCC;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+}
+
+.permission-table-footer {
+  box-shadow: 0 -1px 4px rgba(0,0,0,0.3);
+}
+
+.permission {
+  display: flex;
+  flex-grow: 1;
+}
+
+.permission:nth-child(odd) {
+  background: #E4E4E4;
+}
+
+.permission:hover {
+  background: #EEE;
+}
+
+.permission > div {
+  flex-grow: 1;
+  flex-basis: 20%;
+  text-align: center;
+  padding: 3px;
+  border-right: 1px solid #CCC;
+  border-bottom: 1px solid #CCC;
+}
+
+.permission > div:first-child {
+  text-align: start;
+  padding: 3px 10px;
+  flex-basis: 30%;
+  font-weight: bold;
+}
+
+.permission > div[permission="1"]:before, .allow-label:after {
+  color: #98CF39;
+  content: '   \2713';
+}
+
+.permission > div[permission="2"]:before, .deny-label:after {
+  color: #CC4908;
+  content: '   \2715';
+}
+
+.permission > div[permission="3"]:before, .prompt-label:after {
+  color: #009EED;
+  content: '   !';
+}
+
+
+
+
+/*****************     SIDEBAR      *****************/
+
+
+
+
+#sidebar {
+  background: #EEE;
+  position: relative;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 350px;
+  overflow: hidden;
+  z-index: 100;
+}
+
+.sidebar-item {
+  background-color: #F6F6F6;
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
+  color: #666;
+  line-height: 120%;
+  cursor: pointer;
+  display: flex;
+  padding: 15px 10px;
+  display: block;
+  text-align: start;
+  flex-grow: 1;
+}
+
+.sidebar-item > * {
+  flex-shrink: 0;
+}
+
+.sidebar-item:hover {
+  background-color: #EEE;
+}
+
+.sidebar-item.selected {
+  background-color: #46AFE3;
+  color: #FFF;
+}
+
+.help {
+  float: right;
+  padding: 0 5px;
+}
+
+/*****************     HEADER      *****************/
+
+header {
+  padding-top: 140px;
+  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
+  color: #FFF;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+  padding: 10px;
+}
+
+
+
+/*****************      APPS & BROWSER TABS      *****************/
+
+
+
+
+.apps, .browser-tabs {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.browser-tabs.hidden {
+  display: none;
+}
+
+.app, .browser-tab {
+  display: flex;
+  align-items: center;
+  order: 1;
+}
+
+.app-name, .browser-tab-details {
+  flex-grow: 1;
+  font-weight: bold;
+}
+
+.app, .browser-tab {
+  padding: 10px 20px;
+  border-bottom: 1px solid #CCC;
+}
+
+.app:hover, .browser-tab:hover {
+  background-color: #EFEFEF;
+}
+
+.app-icon {
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+}
+
+.browser-tab-url-subheading {
+  font-size: 10px;
+}
+
+
+
+/*****************      NOT CONNECTED      *****************/
+
+
+
+body:not(.notconnected) > #notConnectedMessage,
+body.notconnected > #content {
+  display: none;
+}
+
+#notConnectedMessage {
+  flex-grow: 1;
+  flex-direction: column;
+  margin: 50px auto;
+}
+
+#notConnectedMessage > span {
+  padding: 20px;
+  border: 1px solid #CCC;
+  border-radius: 5px;
+}
+
+#notConnectedMessage > span:before {
+  content: '';
+  background: url('error.svg') no-repeat;
+  background-size: 18px;
+  height: 24px;
+  width: 24px;
+  position: relative;
+  top: 10px;
+  display: inline-block;
+}
+
+
+
+/*****************      TABS       *****************/
+
+#tabs {
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.tabpanel:not(.selected) {
+  display: none;
+}
+
+#tabs-headers {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg
new file mode 100644
index 0000000..21261cd
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg
@@ -0,0 +1,13 @@
+<?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" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
+  <path fill="#E25026" d="M32,4.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5S47.74,4.894,32,4.894
+    z M46.903,48.674c-1.817,1.817-4.691,1.76-6.449,0.002l-8.327-8.327l-8.151,8.151c-1.877,1.877-4.87,1.814-6.685,0
+    c-1.877-1.877-1.879-4.811-0.002-6.687l8.151-8.151l-8.327-8.327c-1.76-1.76-1.817-4.634,0-6.451c1.76-1.76,4.691-1.76,6.451,0
+    l8.327,8.327l8.151-8.151c1.877-1.877,4.811-1.874,6.687,0.002c1.814,1.814,1.877,4.808,0,6.685l-8.151,8.151l8.327,8.327
+    C48.662,43.982,48.662,46.914,46.903,48.674z"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/help.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/help.css
new file mode 100644
index 0000000..087819e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/help.css
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html, body {
+  margin: 0;
+  height: 100%;
+}
+
+body {
+  color: #555;
+  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
+  overflow: hidden;
+  max-width: 600px;
+  margin: auto;
+  padding: 20px 0;
+  background-color: #FFF;
+}
+
+button {
+  border: 1px solid #CCC;
+  padding: 5px 15px;
+  cursor: pointer;
+  background: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+  color: #3498DB;
+}
+
+button:hover {
+  background-color: #3498DB;
+  color: #FFF;
+}
+
+a, a:visited {
+  color: rgb(39,109,163);
+}
+
+#close-button {
+  float: right;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg
new file mode 100644
index 0000000..b0a414d
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="160px" height="240px" viewBox="0 0 160 240" enable-background="new 0 0 160 240" xml:space="preserve">

+<rect y="40" display="none" fill="#22272D" width="84" height="160"/>

+<rect x="80.75" y="40" display="none" fill="#194866" width="84" height="160"/>

+<path fill="#414042" d="M40,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L28,39.181v12l3.204,0l4.467-4.466

+	c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.466,4.466l3.204,0v-12l-4.597-4.596

+	C46.042,27.895,42.044,21.149,40,21.149z M40.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244

+	c-0.987,0-1.933,0.099-2.815,0.271C38.03,30.199,39.289,28.185,40.005,28.185z"/>

+<path fill="#414042" d="M41.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553

+	c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627

+	s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C41.337,49.929,41.436,50.434,41.436,50.98z"/>

+<g>

+	<g>

+		<path fill="#B2B5B9" d="M40,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L28,39.181v12l3.204,0l4.467-4.466

+			c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.466,4.466l3.204,0v-12l-4.597-4.596

+			C46.042,27.895,42.044,21.149,40,21.149z M40.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244

+			c-0.987,0-1.933,0.099-2.815,0.271C38.03,30.199,39.289,28.185,40.005,28.185z"/>

+		<path fill="#B2B5B9" d="M41.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553

+			c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627

+			s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C41.337,49.929,41.436,50.434,41.436,50.98z"/>

+	</g>

+</g>

+<g>

+	<path fill="#DCE8F3" d="M120,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L108,39.181v12l3.204,0l4.467-4.466

+		c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.467,4.466l3.204,0v-12l-4.597-4.596

+		C126.042,27.895,122.044,21.149,120,21.149z M120.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244

+		c-0.987,0-1.933,0.099-2.815,0.271C118.03,30.199,119.289,28.185,120.005,28.185z"/>

+	<path fill="#DCE8F3" d="M121.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553

+		c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627

+		s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C121.337,49.929,121.436,50.434,121.436,50.98z"/>

+</g>

+<g>

+	<g>

+		<path fill="#B2B5B9" d="M52.5,136.017c0,2.279-1.888,4.167-4.167,4.167H31.667c-2.279,0-4.167-1.888-4.167-4.167v-33.333

+			c0-2.279,1.888-4.167,4.167-4.167h16.667c2.279,0,4.167,1.888,4.167,4.167V136.017z M49.375,107.892

+			c0-0.554-0.488-1.042-1.042-1.042H31.667c-0.553,0-1.042,0.488-1.042,1.042v22.917c0,0.554,0.488,1.042,1.042,1.042h16.667

+			c0.553,0,1.042-0.488,1.042-1.042V107.892z M42.604,102.684h-5.208c-0.293,0-0.521,0.228-0.521,0.521

+			c0,0.293,0.228,0.521,0.521,0.521h5.208c0.293,0,0.521-0.228,0.521-0.521C43.125,102.912,42.897,102.684,42.604,102.684z

+			 M40,133.413c-1.432,0-2.604,1.171-2.604,2.604c0,1.433,1.172,2.604,2.604,2.604s2.604-1.171,2.604-2.604

+			C42.604,134.585,41.432,133.413,40,133.413z"/>

+	</g>

+</g>

+<g>

+	<path fill="#DCE8F3" d="M132.5,136.017c0,2.279-1.888,4.167-4.167,4.167h-16.667c-2.279,0-4.167-1.888-4.167-4.167v-33.333

+		c0-2.279,1.888-4.167,4.167-4.167h16.667c2.279,0,4.167,1.888,4.167,4.167V136.017z M129.375,107.892

+		c0-0.554-0.488-1.042-1.042-1.042h-16.667c-0.553,0-1.042,0.488-1.042,1.042v22.917c0,0.554,0.488,1.042,1.042,1.042h16.667

+		c0.553,0,1.042-0.488,1.042-1.042V107.892z M122.604,102.684h-5.208c-0.293,0-0.521,0.228-0.521,0.521

+		c0,0.293,0.228,0.521,0.521,0.521h5.208c0.293,0,0.521-0.228,0.521-0.521C123.125,102.912,122.897,102.684,122.604,102.684z

+		 M120,133.413c-1.432,0-2.604,1.171-2.604,2.604c0,1.433,1.172,2.604,2.604,2.604s2.604-1.171,2.604-2.604

+		C122.604,134.585,121.432,133.413,120,133.413z"/>

+</g>

+<g>

+	<path fill="#B2B5B9" d="M40,185.388c8.121,0,14.729,6.607,14.729,14.729S48.121,214.845,40,214.845s-14.729-6.607-14.729-14.729

+		S31.879,185.388,40,185.388 M40,182.75c-9.591,0-17.367,7.775-17.367,17.367c0,9.591,7.775,17.367,17.367,17.367

+		s17.367-7.775,17.367-17.367C57.367,190.525,49.591,182.75,40,182.75L40,182.75z"/>

+	<g>

+		<path fill="#B2B5B9" d="M39.565,204.504c-0.688,0-1.196-0.508-1.286-1.195l-0.299-2.57c-0.12-0.808,0.359-1.405,1.166-1.495

+			c2.81-0.269,4.364-1.345,4.364-3.229v-0.06c0-1.674-1.285-2.84-3.438-2.84c-1.584,0-2.87,0.568-4.065,1.645

+			c-0.299,0.239-0.688,0.418-1.106,0.418c-0.926,0-1.674-0.747-1.674-1.644c0-0.448,0.18-0.927,0.598-1.285

+			c1.584-1.495,3.587-2.481,6.337-2.481c4.185,0,7.024,2.331,7.024,6.068v0.06c0,3.767-2.72,5.47-6.038,6.038l-0.12,1.375

+			c-0.12,0.657-0.598,1.195-1.285,1.195H39.565z M39.565,206.687c1.226,0,2.122,0.896,2.122,2.062v0.299

+			c0,1.166-0.896,2.062-2.122,2.062s-2.123-0.896-2.123-2.062v-0.299C37.442,207.583,38.339,206.687,39.565,206.687z"/>

+	</g>

+</g>

+<g>

+	<path fill="#DCE8F3" d="M120,185.388c8.121,0,14.729,6.607,14.729,14.729s-6.607,14.729-14.729,14.729s-14.729-6.607-14.729-14.729

+		S111.879,185.388,120,185.388 M120,182.75c-9.591,0-17.367,7.775-17.367,17.367c0,9.591,7.775,17.367,17.367,17.367

+		s17.367-7.775,17.367-17.367C137.367,190.525,129.591,182.75,120,182.75L120,182.75z"/>

+	<g>

+		<path fill="#DCE8F3" d="M119.564,204.504c-0.688,0-1.195-0.508-1.285-1.195l-0.299-2.57c-0.12-0.808,0.358-1.405,1.166-1.495

+			c2.81-0.269,4.363-1.345,4.363-3.229v-0.06c0-1.674-1.285-2.84-3.438-2.84c-1.584,0-2.869,0.568-4.064,1.645

+			c-0.3,0.239-0.688,0.418-1.106,0.418c-0.927,0-1.674-0.747-1.674-1.644c0-0.448,0.18-0.927,0.598-1.285

+			c1.584-1.495,3.587-2.481,6.337-2.481c4.186,0,7.024,2.331,7.024,6.068v0.06c0,3.767-2.72,5.47-6.038,6.038l-0.119,1.375

+			c-0.12,0.657-0.598,1.195-1.285,1.195H119.564z M119.564,206.687c1.226,0,2.122,0.896,2.122,2.062v0.299

+			c0,1.166-0.896,2.062-2.122,2.062s-2.122-0.896-2.122-2.062v-0.299C117.442,207.583,118.339,206.687,119.564,206.687z"/>

+	</g>

+</g>

+</svg>

diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/index.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/index.css
new file mode 100644
index 0000000..cb3f876
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/index.css
@@ -0,0 +1,103 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
+}
+
+#tabs {
+  box-shadow: inset -4px 0 0 rgba(0,0,0,0.3);
+  background: #252C33;
+}
+
+#toolbox-tabs {
+  overflow-y: auto;
+}
+
+.button {
+  width: 80px;
+  height: 85px;
+  padding-bottom: 5px;
+  -moz-appearance: none;
+  border: none;
+  border-bottom: 1px solid #121214;
+  background-color: transparent;
+  color: #B5B8BB;
+  cursor: pointer;
+  text-align: center;
+  -moz-box-align: end;
+  font-size: 10px;
+  text-shadow: 0 1px 0 #333;
+  color: #9FA6AD;
+}
+
+.button:first-child {
+  border-top: none;
+}
+
+.button[selected] {
+  box-shadow: inset -4px 0 0 rgba(0,0,0,0.3), inset 2px 0 0 #DEFFFF, inset 3px 0 0 #8DC7E8, inset 4px 0 1px #1D6496;
+  color: #DCE8F3;
+  background-color: #1A4766;
+  border-color: #191B1E;
+}
+
+.button::-moz-focus-inner {
+  border-width: 0;
+}
+
+.panel {
+  border-width: 0;
+}
+
+.panel:not([selected="true"]) {
+  display: none;
+}
+
+.button.toolbox {
+  background-repeat: no-repeat;
+  background-position: center 15px;
+  background-size: 40px 40px;
+}
+
+.projects-button {
+  background: url('chrome://browser/skin/devtools/app-manager/index-icons.svg') no-repeat;
+  background-position: left -5px;
+}
+
+.projects-button[selected] {
+  background-position: right -5px;
+}
+
+.device-button {
+  background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg');
+  background-position: left -85px, top left;
+  background-repeat: no-repeat, no-repeat;
+  background-size: 160px 240px, 2px 80px;
+}
+
+.device-button[selected] {
+  background-position: right -85px, top left;
+}
+
+.help-button {
+  border-bottom: 0;
+  background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg');
+  background-position: left -165px, top left;
+  background-repeat: no-repeat, no-repeat;
+  background-size: 160px 240px, 2px 80px;
+}
+
+.help-button[selected] {
+  background-position: right -165px, top left;
+}
+
+#connection-footer {
+  border-width: 0;
+  height: 50px;
+  min-height: 50px;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png b/arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png
new file mode 100644
index 0000000..b3c42ac
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/noise.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg
new file mode 100644
index 0000000..10e8d2b
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.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" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
+  <path fill="#ABABAB" d="M32.336,3.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5
+    S48.076,3.894,32.336,3.894z M44.86,36.966h-7.823v7.62c0,2.582-2.12,4.702-4.702,4.702c-2.584,0-4.704-2.12-4.704-4.702v-7.62
+    h-7.817c-2.52,0-4.572-2.056-4.572-4.572s2.053-4.572,4.572-4.572h7.817v-7.62c0-2.582,2.12-4.702,4.704-4.702
+    c2.582,0,4.702,2.12,4.702,4.702v7.62h7.823c2.514,0,4.57,2.056,4.57,4.572S47.374,36.966,44.86,36.966z"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css b/arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css
new file mode 100644
index 0000000..98b2289
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/projects.css
@@ -0,0 +1,556 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: 0.9rem;
+}
+
+html, body {
+  height: 100%;
+}
+
+template {
+  display: none;
+}
+
+body {
+  display: flex;
+  color: #333;
+  background-color: white;
+  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
+  overflow: hidden;
+}
+
+body:not(.connected) button.device-action {
+  display: none;
+}
+
+strong {
+  color: #111;
+}
+
+
+/********* SIDEBAR ***********/
+
+
+
+#sidebar {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 350px;
+  overflow: hidden;
+  z-index: 100;
+  background-color: #E9EAEB;
+  position: relative;
+  box-shadow: 3px 0 1.5px rgba(0,0,0,0.08);
+}
+
+#project-list {
+  height: 100%;
+  overflow: auto;
+}
+
+#project-list:not([projects-count="0"]) > #no-project {
+  display: none;
+}
+
+#no-project {
+  padding: 100px 20px 0;
+  font-weight: bold;
+  color: #BBB;
+  font-size: 22px;
+}
+
+
+/********* PROJECT MENU ***********/
+
+
+.project-item {
+  padding: 10px 0;
+  background-color: #F0F1F2;
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
+  color: #666;
+  line-height: 120%;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+}
+
+.project-item:hover {
+  background-color: #EEE;
+}
+
+.project-item > * {
+  flex-shrink: 0;
+}
+
+.project-item.selected {
+  background-color: #46AFE3;
+}
+
+.project-item.selected strong {
+  color: #FFF;
+}
+
+.project-item.selected p,
+.project-item.selected span {
+  color: #C1DCF0;
+}
+
+.button-remove {
+  background-image: url('remove.svg');
+  background-size: 20px;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  visibility: hidden;
+  opacity: 0.5;
+}
+
+.project-item:hover .button-remove {
+  visibility: visible;
+}
+
+.project-item-status {
+  width: 6px;
+  margin: -10px 0;
+  border-right: 1px solid rgba(0,0,0,0.1);
+  box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2);
+}
+
+.project-item-status[status="valid"] {
+  background-color: #70BF53;
+}
+
+.project-item-status[status~="warning"] {
+  background-color: #F2B33F;
+}
+
+.project-item-status[status~="error"] {
+  background-color: #ED4C62;
+}
+
+.project-item-icon {
+  width: 32px;
+  height: 32px;
+  margin: 0 10px;
+}
+
+.project-item-meta {
+  flex-grow: 1;
+  flex-shrink: 1 !important;
+}
+
+.project-item-type {
+  font-size: 10px;
+  line-height: 20px;
+  float: right;
+  padding-right: 10px;
+  color: #7597B9;
+  text-transform: uppercase;
+}
+
+.project-item-description {
+  color: #888;
+  font-size: 90%;
+}
+
+/********* ADD PROJECT ***********/
+
+#new-packaged-project {
+  box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
+  background-position: calc(100% - 10px) 10px;
+}
+
+#new-packaged-project,
+#new-hosted-project {
+  background-color: #EEE;
+  border: none;
+  border-top: 1px solid #DDD;
+  padding: 10px;
+  font-weight: bold;
+}
+
+#new-packaged-project:hover,
+#new-hosted-project:hover {
+  background-color: #DDD;
+}
+
+#new-hosted-project-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+#new-packaged-project,
+#new-hosted-project-click {
+  background-image: url('plus.svg');
+  background-size: 20px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+#new-hosted-project-click {
+  background-position: top right;
+  width: 20px;
+  height: 20px;
+  margin-left: 5px;
+}
+
+#url-input {
+  flex-grow: 1;
+  width: 90%;
+  box-shadow: none;
+  border-radius: 3px;
+  border: 1px solid #DDD;
+  padding: 4px;
+  margin-top: 4px;
+}
+
+
+/********* LENSE ***********/
+
+
+#lense {
+  height: 100%;
+  flex-grow: 1;
+  display: flex;
+  z-index: 1;
+  overflow: hidden;
+  background-color: rgb(225, 225, 225);
+  background-image: url('rocket.svg'), url('noise.png');
+  background-repeat: no-repeat, repeat;
+  background-size: 35%, auto;
+  background-position: center center, top left;
+}
+
+#lense > div {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}
+
+
+/********* PROJECT ***********/
+
+
+.project-details {
+  background-color: rgb(225, 225, 225);
+  padding: 10px;
+  line-height: 160%;
+  display: flex;
+  flex-direction: column;
+}
+
+.project-metadata {
+  flex-grow: 1;
+}
+
+.project-status {
+  display: flex;
+}
+
+.project-title {
+  flex-direction: row;
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #CCC;
+  margin-bottom: 10px;
+}
+
+.project-title > h1 {
+  flex-grow: 1;
+  font-size: 24px;
+}
+
+.project-location {
+  color: gray;
+  font-size: 10px;
+  cursor: pointer;
+  font-family: monospace;
+}
+
+.project-location:hover {
+  text-decoration: underline;
+}
+
+.project-header {
+  display: flex;
+  border-bottom: 1px solid #CCC;
+  margin: 10px 20px 10px 20px;
+  padding-bottom: 10px;
+}
+
+.project-icon {
+  flex-shrink: 0;
+  width: 64px;
+  height: 64px;
+  margin-right: 10px;
+}
+
+.project-location {
+  font-size: 11px;
+  color: #999;
+}
+
+.project-description {
+  font-style: italic;
+  color: #333;
+}
+
+.project-status > p {
+  text-transform: uppercase;
+  font-size: 10px;
+  padding: 2px 10px;
+  border-radius: 2px;
+  margin-top: 6px;
+  line-height: 10px;
+}
+
+.project-validation {
+  color: #FFF;
+  display: none;
+  margin-left: 10px;
+}
+
+.project-validation.valid {
+  background-color: #70BF53;
+}
+
+.project-validation.warning {
+  background-color: #F2B33F;
+}
+
+.project-validation.error {
+  background-color: #ED4C62;
+}
+
+[status="valid"] > .project-validation.valid,
+[status~="warning"] > .project-validation.warning,
+[status~="error"] > .project-validation.error {
+  display: inline;
+}
+
+.project-type {
+  display: none;
+  margin-left: 10px;
+}
+[type="hosted"] > .project-type.hosted,
+[type="packaged"] > .project-type.packaged {
+  display: inline;
+}
+
+/********* PROJECT BUTTONS ***********/
+
+
+
+.project-buttons {
+  display: flex;
+  margin-left: 20px;
+  color: #BBB;
+}
+
+.project-buttons > button {
+  margin: 0;
+  font-size: 11px;
+  border: 1px solid #CCC;
+  border-left-width: 0;
+  padding: 5px 15px;
+  cursor: pointer;
+  background: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+}
+
+.project-buttons > button[disabled] {
+  background-color: transparent;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.project-buttons > button:first-child {
+  border-left-width: 1px;
+}
+
+.project-button-debug {
+  color: #3498DB;
+}
+
+.project-button-debug:hover {
+  background-color: #3498DB;
+  color: #FFF;
+}
+
+.project-button-debug[disabled] {
+  color: #3498DB;
+}
+
+.project-button-update {
+  color: #777;
+}
+
+.project-button-update:hover {
+  background-color: #777;
+  color: #FFF;
+}
+
+.project-button-update[disabled] {
+  color: #777;
+}
+
+
+
+/********* ERRORS AND WARNINGS ***********/
+
+.project-warnings,
+.project-errors,
+.project-item-warnings,
+.project-item-errors {
+  display: none;
+}
+
+[status~="warning"] .project-item-warnings,
+[status~="error"] .project-item-errors {
+  display: inline-block;
+}
+
+[status~="warning"] > .project-warnings,
+[status~="error"] > .project-errors {
+  display: block;
+}
+
+.project-warnings,
+.project-errors {
+  margin: 20px 20px 0;
+  padding: 10px 10px;
+  font-family: monospace;
+}
+
+.project-warnings {
+  border-left: 3px solid #ECB51E;
+  background-color: rgba(236, 181, 20, 0.1);
+}
+
+.project-errors {
+  border-left: 3px solid #ED4C62;
+  background-color: rgba(237,76,98,0.1);
+}
+
+.project-item-warnings {
+  background-image: url('warning.svg');
+}
+
+.project-item-errors {
+  background-image: url('error.svg');
+  color: rgb(227, 79, 34);
+}
+
+.project-item-warnings,
+.project-item-errors {
+  background-repeat: no-repeat;
+  background-size: 12px;
+  background-position: left center;
+  margin-top: 6px;
+}
+
+.project-item-warnings > span,
+.project-item-errors > span {
+  font-size: 11px;
+  padding-left: 16px;
+  font-weight: bold;
+}
+
+
+/********* MANIFEST EDITOR ***********/
+
+.manifest-editor {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  background-color: #E1E1E1;
+}
+
+.manifest-header {
+  display: flex;
+  flex-direction: row;
+}
+
+.manifest-header > h2 {
+  font-size: 18px;
+  margin: 1em 15px 1em 30px;
+  display: none;
+}
+
+.manifest-header > button {
+  margin: 18px 0;
+  font-size: 11px;
+  border: 1px solid #CCC;
+  border-right-width: 0;
+  padding: 2px;
+  cursor: pointer;
+  background: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+  display: none;
+}
+
+.manifest-header > button[disabled] {
+  background-color: transparent;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.manifest-header > button:last-child {
+  border-right-width: 1px;
+}
+
+[type="packaged"] > .editable {
+  display: block;
+}
+
+[type="hosted"] > .viewable {
+  display: block;
+}
+
+.manifest-button-save {
+  color: #777;
+}
+
+.manifest-button-save:hover {
+  background-color: #777;
+  color: #FFF;
+}
+
+.manifest-button-save[disabled] {
+  color: #777;
+}
+
+.variables-view {
+  flex-grow: 1;
+  border: 0;
+  border-top: 5px solid #C9C9C9;
+}
+
+/* Bug 925921: Remove when the manifest editor is always on */
+
+.manifest-editor {
+  display: none;
+}
+
+.project-details {
+  flex-grow: 1;
+}
+
+#lense[manifest-editable] .manifest-editor {
+  display: flex;
+}
+
+#lense[manifest-editable] .project-details {
+  flex-grow: 0;
+}
+
+/* End blocks to remove */
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg
new file mode 100644
index 0000000..3d36871
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. 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" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
+<path d="m 12.183457,12.241457 c -11.129861,11.12986 -11.129861,29.175226 0,40.305086 11.12986,11.129861 29.175226,11.129861 40.305086,0 11.129861,-11.12986 11.129861,-29.175226 0,-40.305086 -11.12986,-11.129861 -29.175226,-11.129861 -40.305086,0 z m 32.241241,14.52963 -5.531697,5.531696 5.388154,5.388154 c 1.82575,1.82575 1.82575,4.823882 0,6.649632 -1.827164,1.827164 -4.825297,1.827164 -6.651047,0.0014 l -5.388153,-5.388153 -5.527454,5.527453 c -1.781909,1.781909 -4.686704,1.779081 -6.465784,0 -1.779081,-1.77908 -1.781202,-4.684582 0,-6.465784 l 5.527453,-5.527454 -5.388153,-5.388153 c -1.82575,-1.82575 -1.82575,-4.823883 0.0014,-6.651047 1.82575,-1.82575 4.823882,-1.82575 6.649632,0 l 5.388154,5.388154 5.531696,-5.531697 c 1.777667,-1.777666 4.68529,-1.777666 6.46437,0.0014 1.779081,1.77908 1.779081,4.686703 0.0014,6.46437 z"
+   style="fill:#FF6B00" />
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg
new file mode 100644
index 0000000..95c42a4
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg
@@ -0,0 +1,30 @@
+<?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" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+  <g opacity="0.1">
+    <g>
+      <path fill="#FFFFFF" d="M12,2.3c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464
+        c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535
+        C15.333,6.021,13.127,2.3,12,2.3z M12.003,6.181c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135
+        c-0.545,0-1.066,0.054-1.553,0.15C10.914,7.292,11.608,6.181,12.003,6.181z"/>
+      <path fill="#FFFFFF" d="M12.792,18.755c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408
+        c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104
+        s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,18.175,12.792,18.453,12.792,18.755z"/>
+    </g>
+    <g>
+      <g>
+        <path fill="#414042" d="M12,2c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464
+          c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535
+          C15.333,5.721,13.127,2,12,2z M12.003,5.881c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135
+          c-0.545,0-1.066,0.054-1.553,0.15C10.914,6.992,11.608,5.881,12.003,5.881z"/>
+        <path fill="#414042" d="M12.792,18.455c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408
+          c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104
+          s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,17.875,12.792,18.153,12.792,18.455z"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg
new file mode 100644
index 0000000..89e7c6f
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg
@@ -0,0 +1,13 @@
+<?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" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
+  <path fill="#ECB51F" d="M61.689,51.121L36.437,7.384c-2.441-4.227-6.434-4.227-8.875,0L2.311,51.121
+    c-2.441,4.227-0.444,7.686,4.437,7.686h50.504C62.133,58.807,64.13,55.349,61.689,51.121z M35.968,47.68
+    c0,2.191-1.688,3.877-3.968,3.877s-3.968-1.686-3.968-3.877v-0.093c0-2.187,1.688-3.873,3.968-3.873s3.968,1.686,3.968,3.873V47.68z
+    M36.059,21.548l-1.961,17.146c-0.137,1.233-0.958,2.009-2.098,2.009s-1.961-0.776-2.098-2.009l-1.961-17.146
+    c-0.137-1.322,0.592-2.325,1.825-2.325h4.469C35.466,19.223,36.196,20.226,36.059,21.548z"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/arrow-e.png b/arc-firefox-theme/chrome/browser/devtools/arrow-e.png
new file mode 100644
index 0000000..cfa950a
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/arrow-e.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/arrow-e@2x.png b/arc-firefox-theme/chrome/browser/devtools/arrow-e@2x.png
new file mode 100644
index 0000000..c628ca0
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/arrow-e@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-divider@2x.png b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-divider@2x.png
new file mode 100644
index 0000000..9ce5dd7
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-divider@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton.png b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton.png
new file mode 100644
index 0000000..5f28c8b
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton@2x.png b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton@2x.png
new file mode 100644
index 0000000..22c3c86
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/breadcrumbs-scrollbutton@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css
new file mode 100644
index 0000000..69e847c
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/canvasdebugger.css
@@ -0,0 +1,451 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);
+}
+
+#empty-notice > button {
+  min-width: 30px;
+  min-height: 28px;
+  margin: 0;
+  list-style-image: url(profiler-stopwatch.svg);
+}
+
+#empty-notice > button .button-text {
+  display: none;
+}
+
+#waiting-notice {
+  font-size: 110%;
+}
+
+/* Snapshots pane */
+
+#snapshots-pane > tabs {
+  -moz-border-end: 1px solid;
+}
+
+#snapshots-pane .devtools-toolbar {
+  -moz-border-end: 1px solid;
+}
+
+.theme-dark #snapshots-pane > tabs,
+.theme-dark #snapshots-pane .devtools-toolbar {
+  -moz-border-end-color: black; /* Match the splitter color. */
+}
+
+.theme-light #snapshots-pane > tabs,
+.theme-light #snapshots-pane .devtools-toolbar {
+  -moz-border-end-color: #aaa; /* Match the splitter color. */
+}
+
+#record-snapshot {
+  list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg");
+}
+
+#record-snapshot[checked] {
+  list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg");
+}
+
+/* Snapshots items */
+
+.snapshot-item-thumbnail {
+  image-rendering: -moz-crisp-edges;
+  background-image: 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));
+  background-size: 12px 12px, 12px 12px;
+  background-position: 0px 0px, 6px 6px;
+  background-repeat: repeat, repeat;
+}
+
+.snapshot-item-thumbnail[flipped=true] {
+  transform: scaleY(-1);
+}
+
+.theme-dark .snapshot-item-thumbnail {
+  background-color: #000;
+}
+
+.theme-light .snapshot-item-thumbnail {
+  background-color: #fff;
+}
+
+.snapshot-item-details {
+  -moz-padding-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 */
+
+#debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#resume {
+  list-style-image: url(debugger-play.png);
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+#step-over {
+  list-style-image: url(debugger-step-over.png);
+}
+
+#step-in {
+  list-style-image: url(debugger-step-in.png);
+}
+
+#step-out {
+  list-style-image: url(debugger-step-out.png);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #resume {
+    list-style-image: url(debugger-play@2x.png);
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+
+  #step-over {
+    list-style-image: url(debugger-step-over@2x.png);
+  }
+
+  #step-in {
+    list-style-image: url(debugger-step-in@2x.png);
+  }
+
+  #step-out {
+    list-style-image: url(debugger-step-out@2x.png);
+  }
+}
+
+#debugging-controls > toolbarbutton {
+  transition: opacity 0.15s ease-in-out;
+}
+
+#debugging-controls > toolbarbutton[disabled=true] {
+  opacity: 0.5;
+}
+
+#calls-slider {
+  -moz-padding-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 .side-menu-widget-item {
+  padding: 0;
+}
+
+/* Calls list items */
+
+.theme-dark #calls-list .side-menu-widget-item {
+  border-color: #111;
+  border-bottom-color: transparent;
+}
+
+.theme-light #calls-list .side-menu-widget-item {
+  border-color: #eee;
+  border-bottom-color: transparent;
+}
+
+.theme-dark .call-item-view:hover {
+  background-color: rgba(255,255,255,.025);
+}
+
+.theme-light .call-item-view:hover {
+  background-color: rgba(0,0,0,.025);
+}
+
+.theme-dark .call-item-view[draw-call] {
+  background-color: rgba(112,191,83,0.15);
+}
+
+.theme-light .call-item-view[draw-call] {
+  background-color: rgba(44,187,15,0.1);
+}
+
+.theme-dark .call-item-view[interesting-call] {
+  background-color: rgba(223,128,255,0.15);
+}
+
+.theme-light .call-item-view[interesting-call] {
+  background-color: rgba(184,46,229,0.1);
+}
+
+.call-item-gutter {
+  width: calc(3em + 22px);
+  -moz-padding-start: 22px;
+  -moz-padding-end: 4px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  -moz-border-end: 1px solid;
+  -moz-margin-end: 6px;
+}
+
+.selected .call-item-gutter {
+  background-image: url("editor-debug-location.png");
+  background-repeat: no-repeat;
+  background-position: 6px center;
+  background-size: 12px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .selected .call-item-gutter {
+    background-image: url("editor-debug-location@2x.png");
+  }
+}
+
+.call-item-gutter {
+  background-color: var(--theme-sidebar-background);
+  color: var(--theme-content-color3);
+  border-color: var(--theme-splitter-color);
+}
+
+.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 {
+  -moz-padding-start: 2px;
+  -moz-padding-end: 6px;
+  text-align: end;
+  cursor: pointer;
+  color: var(--theme-highlight-bluegrey);
+}
+
+.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;
+}
+
+.theme-dark .call-item-location {
+  border-color: #111;
+}
+
+.theme-light .call-item-location {
+  border-color: #eee;
+}
+
+.call-item-stack {
+  -moz-padding-start: calc(3em + 22px);
+  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 {
+  -moz-padding-start: 2px;
+  -moz-padding-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-image: 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));
+  background-size: 30px 30px, 30px 30px;
+  background-position: 0px 0px, 15px 15px;
+  background-repeat: repeat, repeat;
+}
+
+.theme-dark #screenshot-container {
+  background-color: #000;
+}
+
+.theme-light #screenshot-container {
+  background-color: #fff;
+}
+
+@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 {
+  overflow: hidden;
+}
+
+.theme-dark #snapshot-filmstrip {
+  border-top: 1px solid #000;
+  color: var(--theme-selection-color);
+}
+
+.theme-light #snapshot-filmstrip {
+  border-top: 1px solid #aaa;
+  color: var(--theme-body-color-alt);
+}
+
+.filmstrip-thumbnail {
+  image-rendering: -moz-crisp-edges;
+  background-image: 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));
+  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;
+  transition: opacity 0.1s ease-in-out;
+}
+
+.filmstrip-thumbnail[flipped=true] {
+  transform: scaleY(-1);
+}
+
+.theme-dark .filmstrip-thumbnail {
+  background-color: #000;
+}
+
+.theme-light .filmstrip-thumbnail {
+  background-color: #fff;
+}
+
+.filmstrip-thumbnail {
+  -moz-border-end: 1px solid var(--theme-splitter-color)
+}
+
+#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/arc-firefox-theme/chrome/browser/devtools/close.png b/arc-firefox-theme/chrome/browser/devtools/close.png
new file mode 100644
index 0000000..b539412
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/close.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/close@2x.png b/arc-firefox-theme/chrome/browser/devtools/close@2x.png
new file mode 100644
index 0000000..79ef6ce
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/close@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-console.png b/arc-firefox-theme/chrome/browser/devtools/command-console.png
new file mode 100644
index 0000000..5c3740e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-console.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-console@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-console@2x.png
new file mode 100644
index 0000000..00bdc35
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-console@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-eyedropper.png b/arc-firefox-theme/chrome/browser/devtools/command-eyedropper.png
new file mode 100644
index 0000000..a96b8eb
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-eyedropper.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-eyedropper@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-eyedropper@2x.png
new file mode 100644
index 0000000..edfe4c1
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-eyedropper@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-frames.png b/arc-firefox-theme/chrome/browser/devtools/command-frames.png
new file mode 100755
index 0000000..5c37ccb
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-frames.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-frames@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-frames@2x.png
new file mode 100755
index 0000000..84b37d3
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-frames@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-paintflashing.png b/arc-firefox-theme/chrome/browser/devtools/command-paintflashing.png
new file mode 100644
index 0000000..244fb3c
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-paintflashing.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-paintflashing@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-paintflashing@2x.png
new file mode 100644
index 0000000..77435bf
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-paintflashing@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-pick.png b/arc-firefox-theme/chrome/browser/devtools/command-pick.png
new file mode 100644
index 0000000..37ce97c
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-pick.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-pick@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-pick@2x.png
new file mode 100644
index 0000000..88d739e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-pick@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-responsivemode.png b/arc-firefox-theme/chrome/browser/devtools/command-responsivemode.png
new file mode 100644
index 0000000..2cad915
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-responsivemode.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-responsivemode@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-responsivemode@2x.png
new file mode 100644
index 0000000..6fce404
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-responsivemode@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-rulers.png b/arc-firefox-theme/chrome/browser/devtools/command-rulers.png
new file mode 100644
index 0000000..ae7c705
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-rulers.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png
new file mode 100644
index 0000000..8378959
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-rulers@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-scratchpad.png b/arc-firefox-theme/chrome/browser/devtools/command-scratchpad.png
new file mode 100644
index 0000000..f9470b4
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-scratchpad.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-scratchpad@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-scratchpad@2x.png
new file mode 100644
index 0000000..ea5630f
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-scratchpad@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-screenshot.png b/arc-firefox-theme/chrome/browser/devtools/command-screenshot.png
new file mode 100644
index 0000000..f6da8e9
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-screenshot.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-screenshot@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-screenshot@2x.png
new file mode 100644
index 0000000..b7cdced
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-screenshot@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-tilt.png b/arc-firefox-theme/chrome/browser/devtools/command-tilt.png
new file mode 100644
index 0000000..6909b0a
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-tilt.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/command-tilt@2x.png b/arc-firefox-theme/chrome/browser/devtools/command-tilt@2x.png
new file mode 100644
index 0000000..2c35d19
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/command-tilt@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/commandline-icon.png b/arc-firefox-theme/chrome/browser/devtools/commandline-icon.png
new file mode 100644
index 0000000..e51f67f
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/commandline-icon.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/commandline-icon@2x.png b/arc-firefox-theme/chrome/browser/devtools/commandline-icon@2x.png
new file mode 100644
index 0000000..407fdae
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/commandline-icon@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/commandline.css b/arc-firefox-theme/chrome/browser/devtools/commandline.css
new file mode 100644
index 0000000..7666eed
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/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: #ebeced; /* --theme-tab-toolbar-background */
+  --gcli-input-focused-background: #f7f7f7; /* --theme-sidebar-background */
+  --gcli-input-color: #18191a; /* --theme-body-color */
+  --gcli-border-color: #aaaaaa; /* --theme-splitter-color */
+}
+
+:root[devtoolstheme="dark"] {
+  --gcli-background-color: #343c45; /* --theme-toolbar-background */
+  --gcli-input-focused-background: #252c33; /* --theme-tab-toolbar-background */
+  --gcli-input-color: #b6babf; /* --theme-body-color-alt */
+  --gcli-border-color: black; /* --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);
+  -moz-padding-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 {
+  -moz-padding-start: 8px;
+}
+
+.gcli-menu-desc {
+  -moz-padding-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;
+  -moz-padding-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/arc-firefox-theme/chrome/browser/devtools/common.css b/arc-firefox-theme/chrome/browser/devtools/common.css
new file mode 100644
index 0000000..9cbb98d
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/common.css
@@ -0,0 +1,264 @@
+
+:root {
+  font: message-box;
+  --monospace-font-family: monospace;
+}
+
+.devtools-monospace {
+  font-family: var(--monospace-font-family);
+  font-size: 80%;
+}
+
+/* Splitters */
+.devtools-horizontal-splitter {
+  -moz-appearance: none;
+  background-image: none;
+  background-color: transparent;
+  border: 0;
+  border-bottom: 1px solid rgba(118, 121, 125, .5);
+  min-height: 3px;
+  height: 3px;
+  margin-top: -3px;
+  position: relative;
+}
+
+.devtools-side-splitter {
+  -moz-appearance: none;
+  background-image: none;
+  background-color: transparent;
+  border: 0;
+  -moz-border-end: 1px solid rgba(118, 121, 125, .5);
+  min-width: 3px;
+  width: 3px;
+  -moz-margin-start: -3px;
+  position: relative;
+  cursor: e-resize;
+}
+
+.devtools-toolbox-side-iframe {
+  min-width: 465px;
+}
+
+/* Autocomplete Popup */
+/* Dark and light theme */
+
+.devtools-autocomplete-popup {
+  -moz-appearance: none !important;
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
+  background-color: transparent;
+  border-radius: 3px;
+  overflow-x: hidden;
+  max-height: 32rem;
+}
+
+.devtools-autocomplete-listbox {
+  -moz-appearance: none !important;
+  background-color: transparent;
+  border-width: 0px !important;
+}
+
+.devtools-autocomplete-listbox > richlistitem,
+.devtools-autocomplete-listbox > richlistitem[selected] {
+  width: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+}
+
+.devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
+.devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
+  background-color: rgba(0,0,0,0.5);
+}
+
+.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
+.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
+  color: hsl(208,100%,60%);
+}
+
+.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
+  color: #eee;
+}
+
+.devtools-autocomplete-listbox.dark-theme > richlistitem > label {
+  color: #ccc;
+}
+
+.devtools-autocomplete-listbox > richlistitem > .initial-value,
+.devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
+  margin: 0;
+  padding: 1px 0;
+}
+
+.devtools-autocomplete-listbox > richlistitem > .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;
+}
+
+.devtools-autocomplete-listbox.light-theme > richlistitem[selected],
+.devtools-autocomplete-listbox.light-theme > richlistitem:hover {
+  background-color: rgba(128,128,128,0.3);
+}
+
+.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
+.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
+  color: #222;
+}
+
+.devtools-autocomplete-listbox.light-theme > richlistitem > label {
+  color: #666;
+}
+
+/* Tooltip widget (see browser/devtools/shared/widgets/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: Alert Icon */
+
+.devtools-tooltip-alert-icon {
+  width: 32px;
+  height: 32px;
+  margin: 6px;
+  -moz-margin-end: 20px;
+}
+
+.devtools-tooltip-alert-icon {
+  list-style-image: url("chrome://global/skin/icons/warning-32.png");
+}
+
+/* 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 {
+  -moz-padding-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;
+}
+
+/* Eyedropper Widget */
+
+.devtools-eyedropper-panel {
+  pointer-events: none;
+  -moz-appearance: none;
+  width: 156px;
+  height: 120px;
+  background-color: transparent;
+  border: 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;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css
new file mode 100644
index 0000000..b920d7b
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/computedview.css
@@ -0,0 +1,208 @@
+/* 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/. */
+
+/* From content */
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display : flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+#propertyContainer {
+  -moz-user-select: text;
+  overflow: auto;
+  min-height: 0;
+  flex: 1;
+}
+
+.row-striped {
+  background: var(--theme-body-background);
+}
+
+.property-view-hidden,
+.property-content-hidden {
+  display: none;
+}
+
+.property-view {
+  clear: both;
+  padding: 2px 0 2px 17px;
+}
+
+.property-view > * {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.property-name {
+  /* -12px is so the expander triangle isn't pushed up above the property */
+  width: calc(100% - 12px);
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  outline: 0;
+}
+
+.property-value, .other-property-value {
+  background-image: url(arrow-e.png);
+  background-repeat: no-repeat;
+  background-size: 5px 8px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .property-value, .other-property-value {
+    background-image: url(arrow-e@2x.png);
+  }
+}
+
+.property-value {
+  width: 100%;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background-position: 2px center;
+  padding-left: 10px;
+  outline: 0;
+}
+
+.other-property-value {
+  background-position: left center;
+  padding-left: 8px;
+}
+
+@media (min-width: 400px) {
+  .property-name {
+    width: 200px;
+  }
+  .property-value {
+    /* -212px is accounting for the 200px property-name and the 12px triangle */
+    width: calc(100% - 212px);
+  }
+}
+
+.property-content {
+  padding-left: 17px;
+}
+
+/* From skin */
+.expander {
+  visibility: hidden;
+  margin-left: -12px!important;
+}
+
+.expandable {
+  visibility: visible;
+}
+
+.match {
+  visibility: hidden;
+}
+
+.matchedselectors > p {
+  clear: both;
+  margin: 0 2px 0 0;
+  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;
+}
+
+/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
+.rule-text {
+  direction: ltr;
+}
+
+.matched {
+  text-decoration: line-through;
+}
+
+.parentmatch {
+  opacity: 0.5;
+}
+
+#noResults {
+  font-size: 110%;
+  margin: 5px;
+  text-align: center;
+}
+
+.onlyuserstyles {
+  cursor: pointer;
+}
+
+.legendKey {
+  margin: 0 5px;
+}
+
+#root .devtools-toolbar {
+  width: 100%;
+  display: -moz-box;
+}
+
+.link {
+  padding: 0 3px;
+  cursor: pointer;
+  float: right;
+}
+
+/* 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: 1em;
+  height: 1em;
+  vertical-align: text-top;
+  -moz-margin-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/arc-firefox-theme/chrome/browser/devtools/controls.png b/arc-firefox-theme/chrome/browser/devtools/controls.png
new file mode 100644
index 0000000..569c266
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/controls.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/controls@2x.png b/arc-firefox-theme/chrome/browser/devtools/controls@2x.png
new file mode 100644
index 0000000..fb06251
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/controls@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch.png b/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch.png
new file mode 100644
index 0000000..2dcb58a
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch@2x.png b/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch@2x.png
new file mode 100644
index 0000000..64dbef8
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/cubic-bezier-swatch@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css
new file mode 100644
index 0000000..4068fb0
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css
@@ -0,0 +1,1458 @@
+/* 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/. */
+
+/* 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.
+ */
+:root {
+  --theme-body-background: #14171a;
+  --theme-sidebar-background: #181d20;
+  --theme-contrast-background: #b28025;
+
+  --theme-tab-toolbar-background: #252c33;
+  --theme-toolbar-background: #343c45;
+  --theme-selection-background: #1d4f73;
+  --theme-selection-background-semitransparent: rgba(29, 79, 115, .5);
+  --theme-selection-color: #f5f7fa;
+  --theme-splitter-color: black;
+  --theme-comment: #757873;
+
+  --theme-body-color: #8fa1b2;
+  --theme-body-color-alt: #b6babf;
+  --theme-content-color1: #a9bacb;
+  --theme-content-color2: #8fa1b2;
+  --theme-content-color3: #5f7387;
+
+  --theme-highlight-green: #70bf53;
+  --theme-highlight-blue: #46afe3;
+  --theme-highlight-bluegrey: #5e88b0;
+  --theme-highlight-purple: #6b7abb;
+  --theme-highlight-lightorange: #d99b28;
+  --theme-highlight-orange: #d96629;
+  --theme-highlight-red: #eb5368;
+  --theme-highlight-pink: #df80ff;
+
+  /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
+  --theme-graphs-green: #70bf53;
+  --theme-graphs-blue: #46afe3;
+  --theme-graphs-purple: #df80ff;
+  --theme-graphs-yellow: #d99b28;
+  --theme-graphs-red: #eb5368;
+  --theme-graphs-grey: #757873;
+}
+
+.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 {
+  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,
+.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: #0f171f;
+  color: var(--theme-content-color3);
+  border-color: #303b47;
+}
+
+.theme-separator { /* grey */
+  border-color: #303b47;
+}
+
+.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-green);
+}
+
+.CodeMirror-Tern-completion-number:before {
+  background-color: #5c9966;
+}
+
+.theme-fg-color2,
+.cm-s-mozilla .cm-attribute,
+.cm-s-mozilla .cm-variable,
+.cm-s-mozilla .cm-def,
+.cm-s-mozilla .cm-property,
+.cm-s-mozilla .cm-qualifier,
+.variables-view-variable > .title > .name {
+  color: var(--theme-highlight-blue);
+}
+
+.CodeMirror-Tern-completion-object:before {
+  background-color: #3689b2;
+}
+
+.cm-s-mozilla .cm-unused-line {
+  text-decoration: line-through;
+  text-decoration-color: #5f88b0;
+}
+
+.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-pink);
+}
+
+.CodeMirror-Tern-completion-array:before {
+  background-color: var(--theme-highlight-bluegrey);
+}
+
+.theme-fg-color4 {
+  color: var(--theme-highlight-purple);
+}
+
+.theme-fg-color5,
+.cm-s-mozilla .cm-keyword {
+  color: var(--theme-highlight-lightorange);
+}
+
+.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-orange);
+}
+
+.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,
+.CodeMirror-dialog { /* General toolbar styling */
+  color: var(--theme-body-color-alt);
+  background-color: var(--theme-toolbar-background);
+  border-color: hsla(210,8%,5%,.6);
+}
+
+.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 { /* Inherit platform specific font sizing and styles */
+  font-family: inherit;
+  font-size: inherit;
+  background: transparent;
+}
+
+.CodeMirror 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);
+}
+
+/* Highlight for a line that represents a stack frame's location. */
+div.CodeMirror div.debug-line {
+  background: rgba(0,128,255,0.1);
+  box-shadow:
+    0 1px 0 0 rgba(0,128,255,0.4),
+    0 -1px 0 0 rgba(0,128,255,0.4);
+}
+
+/* Generic highlighted text */
+div.CodeMirror span.marked-text {
+  background: rgba(255,255,0,0.2);
+  border: 1px dashed rgba(192,192,0,0.6);
+  -moz-margin-start: -1px;
+  -moz-margin-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;
+}
+
+/* Twisty and checkbox controls */
+.theme-twisty, .theme-checkbox {
+  width: 14px;
+  height: 14px;
+  background-repeat: no-repeat;
+  background-image: url("chrome://browser/skin/devtools/controls.png");
+  background-size: 56px 28px;
+}
+
+.theme-twisty {
+  cursor: pointer;
+  background-position: -28px -14px;
+}
+
+.theme-twisty:-moz-focusring {
+  outline-style: none;
+}
+
+.theme-twisty[open] {
+  background-position: -42px -14px;
+}
+
+.theme-twisty[invisible] {
+  visibility: hidden;
+}
+
+.theme-checkbox {
+  display: inline-block;
+  border: 0;
+  padding: 0;
+  outline: none;
+  background-position: -28px 0;
+}
+
+.theme-checkbox[checked] {
+  background-position: -42px 0;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .theme-twisty, .theme-checkbox {
+    background-image: url("chrome://browser/skin/devtools/controls@2x.png");
+  }
+}
+
+/* XUL panel styling (see browser/devtools/shared/widgets/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[side="top"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
+  margin-bottom: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
+  margin-top: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
+  margin-right: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
+  margin-left: -4px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .theme-tooltip-panel .panel-arrow[side="top"],
+  .theme-tooltip-panel .panel-arrow[side="bottom"] {
+    list-style-image: url("chrome://browser/skin/devtools/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://browser/skin/devtools/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 {
+  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);
+}
+
+
+
+/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
+.theme-light {
+  --searchbox-background-color: #ffee99;
+  --searchbox-border-color: #ffbf00;
+  --searcbox-no-match-background-color: #ffe5e5;
+  --searcbox-no-match-border-color: #e52e2e;
+}
+
+.theme-dark {
+  --searchbox-background-color: #4d4222;
+  --searchbox-border-color: #d99f2b;
+  --searcbox-no-match-background-color: #402325;
+  --searcbox-no-match-border-color: #cc3d3d;
+}
+
+/* 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;
+}
+
+/* Toolbar buttons */
+.devtools-menulist,
+.devtools-toolbarbutton {
+  -moz-appearance: none;
+  -moz-box-align: center;
+  background: transparent;
+  min-width: 78px;
+  min-height: 18px;
+  padding: 1px;
+  text-shadow: none;
+  border: none;
+  border-radius: 0;
+  margin: 2px 3px;
+  color: inherit;
+  transition: background 0.05s ease-in-out;
+  color: var(--theme-content-color1);
+  background-color: var(--theme-toolbar-background);
+}
+
+.devtools-menulist:-moz-focusring,
+.devtools-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.7);
+  outline-offset: -4px;
+}
+
+.devtools-toolbarbutton[standalone] {
+  -moz-margin-end: 5px;
+  border-width: 1px;
+  border-style: solid;
+}
+.devtools-toolbarbutton[label][standalone] {
+  min-height: 2em;
+}
+
+.devtools-toolbarbutton:not([label]),
+.devtools-toolbarbutton[text-as-image] {
+  min-width: 32px;
+}
+
+#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
+  -moz-padding-start: 5px;
+  -moz-padding-end: 5px;
+  min-width: inherit;
+}
+
+/* Command buttons with menupopups should be styled slightly differently -
+   no background color and a bit more narrow */
+#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) {
+  background: transparent;
+}
+#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
+  padding: 0 2px;
+}
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-toolbar .devtools-toolbarbutton {
+  border-width: 0;
+}
+
+.devtools-toolbarbutton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+.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 {
+  -moz-margin-end: 4px;
+}
+
+.devtools-menulist > .menulist-dropmarker {
+  -moz-appearance: none;
+  display: -moz-box;
+  list-style-image: url("chrome://browser/skin/devtools/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://browser/skin/devtools/dropmarker.svg");
+  -moz-box-align: center;
+  padding: 0 3px;
+}
+
+.theme-dark .devtools-menulist,
+.theme-dark .devtools-toolbarbutton {
+  border-color: rgba(0, 0, 0, .4); /* Splitters */
+}
+.theme-light .devtools-menulist,
+.theme-light .devtools-toolbarbutton {
+  border-color: rgba(170, 170, 170, .5); /* Splitters */
+}
+
+/* Text-only buttons */
+.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
+.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
+  background-color: rgba(170, 170, 170, .2); /* Splitter */
+}
+.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
+.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
+  background-color: rgba(0, 0, 0, .2); /* Splitter */
+}
+
+/* Button States */
+.theme-dark .devtools-toolbarbutton:not([disabled]):hover,
+.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
+.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
+  background: rgba(0, 0, 0, .3); /* Splitters */
+}
+.theme-light .devtools-toolbarbutton:not([disabled]):hover,
+.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
+.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
+  background: rgba(170, 170, 170, .3); /* Splitters */
+}
+
+.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active,
+.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
+.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+  background: rgba(0, 0, 0, .4); /* Splitters */
+}
+.theme-light .devtools-toolbarbutton:not([disabled]):hover:active,
+.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
+.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+  background: rgba(170, 170, 170, .4); /* Splitters */
+}
+
+/* Menu type buttons and checked states */
+.theme-dark .devtools-toolbarbutton[checked=true],
+.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
+  background: rgba(29, 79, 115, .7); /* Select highlight blue */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-toolbarbutton[checked=true],
+.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
+  background: rgba(76, 158, 217, .2); /* Select highlight blue */
+}
+
+.theme-dark .devtools-menulist[open=true],
+.theme-dark .devtools-toolbarbutton[open=true],
+.theme-dark .devtools-toolbarbutton[open=true]:hover,
+.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
+.theme-dark .devtools-toolbarbutton[checked=true]:hover {
+  background: rgba(29, 79, 115, .8); /* Select highlight blue */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-menulist[open=true],
+.theme-light .devtools-toolbarbutton[open=true],
+.theme-light .devtools-toolbarbutton[open=true]:hover,
+.theme-light .devtools-toolbarbutton[open=true]:hover:active,
+.theme-light .devtools-toolbarbutton[checked=true]:hover {
+  background: rgba(76, 158, 217, .4); /* Select highlight blue */
+}
+
+.devtools-option-toolbarbutton {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/devtools/tool-options.svg");
+  background: none;
+  opacity: .8;
+  border: none;
+}
+
+.devtools-option-toolbarbutton[open=true] {
+  opacity: 1;
+}
+
+/* Toolbar button groups */
+.devtools-toolbarbutton-group > .devtools-toolbarbutton {
+  margin-left: 1px;
+  margin-right: 1px;
+  outline-offset: -3px;
+  box-shadow: none;
+}
+
+.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
+  -moz-margin-end: 0;
+}
+
+.devtools-toolbarbutton-group + .devtools-toolbarbutton {
+  -moz-margin-start: 3px;
+}
+
+.devtools-separator + .devtools-toolbarbutton {
+  -moz-margin-start: 1px;
+}
+
+/* HTML buttons, similar to toolbar buttons, but work in HTML documents */
+
+.devtools-button {
+  border: 0 solid var(--theme-splitter-color);
+  background: var(--theme-toolbar-background);
+  margin: 0;
+  padding: 0;
+  min-width: 32px;
+  min-height: 18px;
+  /* The icon is absolutely positioned in the button using ::before */
+  position: relative;
+}
+
+.devtools-button[standalone] {
+  min-height: 32px;
+  border-width: 1px;
+}
+
+/* Button States */
+.theme-dark .devtools-button:not([disabled]):hover {
+  background: rgba(0, 0, 0, .3); /* Splitters */
+}
+.theme-light .devtools-button:not([disabled]):hover {
+  background: rgba(170, 170, 170, .3); /* Splitters */
+}
+
+.theme-dark .devtools-button:not([disabled]):hover:active {
+  background: rgba(0, 0, 0, .4); /* Splitters */
+}
+.theme-light .devtools-button:not([disabled]):hover:active {
+  background: rgba(170, 170, 170, .4); /* Splitters */
+}
+
+/* Menu type buttons and checked states */
+.theme-dark .devtools-button[checked] {
+  background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-button[checked] {
+  background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */
+}
+
+.devtools-button::before {
+  content: "";
+  display: block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -8px 0 0 -8px;
+  background-repeat: no-repeat;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .devtools-button::before {
+    background-size: 32px;
+  }
+}
+
+/* Text input */
+
+.devtools-textinput,
+.devtools-searchinput {
+  -moz-appearance: none;
+  margin: 0 3px;
+  border: 1px solid;
+  border-radius: 2px;
+  padding: 4px 6px;
+  border-color: var(--theme-splitter-color);
+}
+
+.devtools-searchinput {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  padding: 0;
+  -moz-padding-start: 22px;
+  -moz-padding-end: 4px;
+  background-position: 8px center;
+  background-size: 11px 11px;
+  background-repeat: no-repeat;
+  font-size: inherit;
+}
+
+.theme-dark .devtools-searchinput {
+  background-image: url(magnifying-glass.png);
+}
+
+.theme-light .devtools-searchinput {
+  background-image: url(magnifying-glass-light.png);
+}
+
+.devtools-searchinput:-moz-locale-dir(rtl) {
+  background-position: calc(100% - 8px) center;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
+  visibility: hidden;
+}
+
+/* Searchbox is a div container element for a search input element */
+.devtools-searchbox {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  position: relative;
+}
+
+.devtools-rule-searchbox {
+  -moz-box-flex: 1;
+  padding-right: 23px;
+  width: 100%;
+  font: inherit;
+}
+
+.devtools-rule-searchbox[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-no-search-result {
+  border-color: var(--theme-highlight-red) !important;
+}
+
+.devtools-searchinput-clear {
+  position: absolute;
+  top: 3.5px;
+  right: 7px;
+  padding: 0;
+  border: 0;
+  width: 16px;
+  height: 16px;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-color: transparent;
+}
+
+.theme-dark .devtools-searchinput-clear {
+  background-image: url("chrome://browser/skin/devtools/search-clear-dark.svg");
+}
+
+.theme-light .devtools-searchinput-clear {
+  background-image: url("chrome://browser/skin/devtools/search-clear-light.svg");
+}
+
+.devtools-style-searchbox-no-match + .devtools-searchinput-clear {
+  background-image: url("chrome://browser/skin/devtools/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 {
+  list-style-image: url("chrome://browser/skin/devtools/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 {
+  list-style-image: url("chrome://browser/skin/devtools/search-clear-light.svg");
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+@media (min-resolution: 1.25dppx) {
+  .theme-dark .devtools-searchinput {
+    background-image: url(magnifying-glass@2x.png);
+  }
+
+  .theme-light .devtools-searchinput {
+    background-image: url(magnifying-glass-light@2x.png);
+  }
+}
+
+/* Close button */
+
+.devtools-closebutton {
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
+  opacity: 0.8;
+}
+
+.devtools-closebutton > image {
+  width: 16px;
+  height: 16px;
+  -moz-appearance: none;
+  background-size: 16px 16px;
+  background-image: url("chrome://browser/skin/devtools/close@2x.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.devtools-closebutton > .toolbarbutton-icon {
+  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
+     use evil CSS to give the impression of smaller content */
+  margin: -4px;
+}
+
+.devtools-closebutton > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-closebutton:hover {
+  opacity: 1;
+}
+
+/* In-tools sidebar */
+.devtools-sidebar-tabs {
+  -moz-appearance: none;
+  margin: 0;
+}
+
+.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;
+  -moz-border-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;
+  -moz-border-start-width: 1px;
+  border-style: solid;
+  border-radius: 0;
+  position: static;
+  text-shadow: none;
+}
+
+.devtools-sidebar-tabs tabs > tab:first-child {
+  -moz-border-start-width: 0;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab {
+  border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab:hover {
+  background: hsla(206,37%,4%,.2);
+  border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active {
+  background: hsla(206,37%,4%,.4);
+  border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab {
+  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
+  background: hsla(206,37%,4%,.2);
+  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
+  background: hsla(206,37%,4%,.4);
+  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected],
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
+  color: var(--theme-selection-color);
+  background: #1d4f73;
+  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab {
+  border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab:hover {
+  background: #ddd;
+  border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab:hover:active {
+  background: #ddd;
+  border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab {
+  border-image: linear-gradient(#aaa, #aaa);
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
+  background: #ddd;
+  border-image: linear-gradient(#aaa, #aaa);
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab[selected],
+.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
+  color: var(--theme-selection-color);
+  background: #4c9ed9;
+  border-image: linear-gradient(#aaa, #aaa);
+}
+
+/* Toolbox - moved from toolbox.css.
+ * Rules that apply to the global toolbox like command buttons,
+ * devtools tabs, docking buttons, etc. */
+
+#toolbox-controls > toolbarbutton,
+#toolbox-dock-buttons > toolbarbutton {
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
+}
+
+#toolbox-controls > toolbarbutton > .toolbarbutton-text,
+#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text,
+.command-button > .toolbarbutton-text {
+  display: none;
+}
+
+#toolbox-dock-buttons > toolbarbutton > image {
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  background-size: 16px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+}
+
+#toolbox-dock-bottom > image {
+  background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png");
+}
+
+#toolbox-dock-side  > image {
+  background-image: url("chrome://browser/skin/devtools/dock-side@2x.png");
+}
+
+#toolbox-dock-window > image {
+  background-image: url("chrome://browser/skin/devtools/undock@2x.png");
+}
+
+#toolbox-dock-window,
+#toolbox-dock-bottom,
+#toolbox-dock-side {
+  opacity: 0.8;
+}
+
+#toolbox-dock-window:hover,
+#toolbox-dock-bottom:hover,
+#toolbox-dock-side:hover {
+  opacity: 1;
+}
+
+.devtools-separator {
+  margin: 0 2px;
+  width: 2px;
+  background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent),
+                    linear-gradient(transparent, hsla(206,37%,4%,.6), transparent),
+                    linear-gradient(transparent, hsla(204,45%,98%,.1), transparent);
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position: 0, 1px, 2px;
+}
+
+#toolbox-buttons:empty + .devtools-separator,
+.devtools-separator[invisible] {
+  visibility: hidden;
+}
+
+#toolbox-controls-separator {
+  margin: 0;
+}
+
+/* Command buttons */
+
+.command-button {
+  -moz-appearance: none;
+  border: none;
+  padding: 0 8px;
+  margin: 0;
+  width: 32px;
+  position: relative;
+}
+
+.command-button:hover {
+  background-color: hsla(206,37%,4%,.2);
+}
+.command-button:hover:active, .command-button[checked=true]:not(:hover) {
+  background-color: hsla(206,37%,4%,.4);
+}
+
+.command-button > image {
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  background-size: 64px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+}
+.command-button:hover > image {
+  background-position: -16px center;
+}
+.command-button:hover:active > image {
+  background-position: -32px center;
+}
+.command-button[checked=true] > image {
+  background-position: -48px center;
+}
+.command-button[open=true] > image {
+  background-position: 0 center;
+}
+
+#command-button-paintflashing > image {
+  background-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
+}
+
+#command-button-screenshot > image {
+  background-image: url("chrome://browser/skin/devtools/command-screenshot.png");
+}
+
+#command-button-responsive > image {
+  background-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
+}
+
+#command-button-tilt > image {
+  background-image: url("chrome://browser/skin/devtools/command-tilt.png");
+}
+
+#command-button-scratchpad > image {
+  background-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
+  background-size: 48px 16px;
+}
+
+#command-button-pick > image {
+  background-image: url("chrome://browser/skin/devtools/command-pick.png");
+}
+
+#command-button-frames > image {
+  background-image: url("chrome://browser/skin/devtools/command-frames.png");
+}
+
+#command-button-splitconsole > image {
+  background-image: url("chrome://browser/skin/devtools/command-console.png");
+}
+
+#command-button-eyedropper > image {
+  background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
+}
+
+#command-button-rulers > image {
+  background-image: url("chrome://browser/skin/devtools/command-rulers.png");
+}
+
+@media (min-resolution: 1.25dppx) {
+  #command-button-paintflashing > image {
+    background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
+  }
+
+  #command-button-screenshot > image {
+    background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png");
+  }
+
+  #command-button-responsive > image {
+    background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png");
+  }
+
+  #command-button-tilt > image {
+    background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png");
+  }
+
+  #command-button-scratchpad > image {
+    background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png");
+  }
+
+  #command-button-pick > image {
+    background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
+  }
+
+  #command-button-frames > image {
+    background-image: url("chrome://browser/skin/devtools/command-frames@2x.png");
+  }
+
+  #command-button-splitconsole > image {
+    background-image: url("chrome://browser/skin/devtools/command-console@2x.png");
+  }
+
+  #command-button-eyedropper > image {
+    background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
+  }
+
+  #command-button-rulers > image {
+    background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png");
+  }
+}
+
+/* Tabs */
+
+.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);
+}
+
+.theme-light .devtools-tabbar {
+  box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset;
+}
+
+.theme-dark .devtools-tabbar {
+  box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset;
+}
+
+#toolbox-tabs {
+  margin: 0;
+}
+
+.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: 110px;
+  margin: 0;
+  padding: 0;
+  border-style: solid;
+  border-width: 0;
+  -moz-border-start-width: 1px;
+  -moz-box-align: center;
+}
+
+.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 {
+  background-color: hsla(206,37%,4%,.2);
+  color: #ced3d9;
+}
+
+.theme-light .devtools-tab:hover {
+  background-color: rgba(170,170,170,.2);
+}
+
+.theme-dark .devtools-tab:hover:active {
+  background-color: hsla(206,37%,4%,.4);
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-tab:hover:active {
+  background-color: rgba(170,170,170,.4);
+}
+
+.devtools-tab:not([selected])[highlighted] {
+  box-shadow: 0 2px 0 var(--theme-highlight-green) inset;
+}
+
+.theme-dark .devtools-tab:not([selected])[highlighted] {
+  background-color: hsla(99,100%,14%,.2);
+}
+
+.theme-light .devtools-tab:not([selected])[highlighted] {
+  background-color: rgba(44, 187, 15, .2);
+}
+
+.devtools-tab > image {
+  border: none;
+  -moz-margin-end: 0;
+  -moz-margin-start: 4px;
+  opacity: 0.6;
+  max-height: 16px;
+  width: 16px; /* Prevents collapse during theme switching */
+}
+
+.devtools-tab > label {
+  white-space: nowrap;
+}
+
+.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);
+}
+
+.theme-dark .devtools-tabbar .devtools-tab[selected] {
+  box-shadow: 0 2px 0 #d7f1ff inset,
+              0 8px 3px -5px #2b82bf inset,
+              0 -2px 0 rgba(0,0,0,.2) inset;
+}
+
+.theme-light .devtools-tabbar .devtools-tab[selected] {
+  box-shadow: 0 2px 0 #d7f1ff inset,
+              0 8px 3px -5px #2b82bf inset,
+              0 -2px 0 rgba(0,0,0,.06) inset;
+}
+
+#toolbox-tabs .devtools-tab[selected],
+#toolbox-tabs .devtools-tab[highlighted] {
+  border-width: 0;
+  -moz-padding-start: 1px;
+}
+
+#toolbox-tabs .devtools-tab[selected]:last-child,
+#toolbox-tabs .devtools-tab[highlighted]:last-child {
+  -moz-padding-end: 1px;
+}
+
+#toolbox-tabs .devtools-tab[selected] + .devtools-tab,
+#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab {
+  -moz-border-start-width: 0;
+  -moz-padding-start: 1px;
+}
+
+#toolbox-tabs .devtools-tab:first-child[selected] {
+  -moz-border-start-width: 0;
+}
+
+#toolbox-tabs .devtools-tab:last-child {
+  -moz-border-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;
+  -moz-padding-start: 1px;
+}
+#toolbox-tab-options > image {
+  margin: 0 8px;
+}
+
+/* Invert the colors of certain dark theme images for displaying
+ * inside of the light theme.
+ */
+.theme-light .devtools-tab[icon-invertable] > image,
+.theme-light #toolbox-dock-buttons > toolbarbutton > image,
+.theme-light .command-button-invertable > image,
+.theme-light .command-button-invertable:active > image,
+.theme-light .devtools-closebutton > image,
+.theme-light .devtools-toolbarbutton > image,
+.theme-light .devtools-option-toolbarbutton > image,
+.theme-light #breadcrumb-separator-normal,
+.theme-light .scrollbutton-up > .toolbarbutton-icon,
+.theme-light .scrollbutton-down > .toolbarbutton-icon,
+.theme-light #black-boxed-message-button .button-icon,
+.theme-light .notice-container button .button-icon,
+.theme-light #requests-menu-perf-notice-button .button-icon,
+.theme-light #requests-menu-network-summary-button .button-icon,
+.theme-light .event-tooltip-debugger-icon,
+.theme-light .devtools-button::before {
+  filter: url(filters.svg#invert);
+}
+
+/* Since selected backgrounds are blue, we want to use the normal
+ * (light) icons. */
+.theme-light .command-button-invertable[checked=true]:not(:active) > image,
+.theme-light .devtools-tab[icon-invertable][selected] > image,
+.theme-light .devtools-tab[icon-invertable][highlighted] > image,
+.theme-light #record-snapshot[checked] > image,
+.theme-light #profiler-start[checked] > image,
+.theme-light .notice-container button[checked] .button-icon {
+  filter: none !important;
+}
+
+.theme-light .command-button:hover {
+  background-color: inherit;
+}
+
+.theme-light .command-button:hover:active,
+.theme-light .command-button[checked=true]:not(:hover) {
+  background-color: inherit;
+}
+
+.hidden-labels-box:not(.visible) > label,
+.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
+  display: none;
+}
+
+.devtools-invisible-splitter {
+  border-color: transparent;
+}
+
+.devtools-horizontal-splitter {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.devtools-side-splitter {
+  -moz-border-end: 1px solid var(--theme-splitter-color);
+  border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */
+}
+
+/* Throbbers */
+.devtools-throbber::before {
+  content: "";
+  display: inline-block;
+  vertical-align: bottom;
+  -moz-margin-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/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox.png b/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox.png
new file mode 100644
index 0000000..c64f4bb
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox@2x.png
new file mode 100644
index 0000000..2dd33d2
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-blackbox@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-collapse.png b/arc-firefox-theme/chrome/browser/devtools/debugger-collapse.png
new file mode 100644
index 0000000..9573fc7
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-collapse.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-collapse@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-collapse@2x.png
new file mode 100644
index 0000000..12f7223
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-collapse@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-expand.png b/arc-firefox-theme/chrome/browser/devtools/debugger-expand.png
new file mode 100644
index 0000000..f317997
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-expand.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-expand@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-expand@2x.png
new file mode 100644
index 0000000..091601f
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-expand@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-pause.png b/arc-firefox-theme/chrome/browser/devtools/debugger-pause.png
new file mode 100644
index 0000000..8288bdf
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-pause.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-pause@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-pause@2x.png
new file mode 100644
index 0000000..53ed141
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-pause@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-play.png b/arc-firefox-theme/chrome/browser/devtools/debugger-play.png
new file mode 100644
index 0000000..9189a0a
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-play.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-play@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-play@2x.png
new file mode 100644
index 0000000..5fe68e1
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-play@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint.png b/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint.png
new file mode 100644
index 0000000..fb59dcc
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint@2x.png
new file mode 100644
index 0000000..e3791bf
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-prettyprint@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-in.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-in.png
new file mode 100644
index 0000000..b16b706
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-step-in.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-in@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-in@2x.png
new file mode 100644
index 0000000..c0b4500
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-step-in@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-out.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-out.png
new file mode 100644
index 0000000..859c727
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-step-out.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-out@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-out@2x.png
new file mode 100644
index 0000000..1c19679
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-step-out@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-over.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-over.png
new file mode 100644
index 0000000..ec28fc0
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-step-over.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-step-over@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-step-over@2x.png
new file mode 100644
index 0000000..452f0d4
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-step-over@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints.png b/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints.png
new file mode 100644
index 0000000..c4b7dcb
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints@2x.png b/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints@2x.png
new file mode 100644
index 0000000..b8bbadd
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger-toggleBreakpoints@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/debugger.css b/arc-firefox-theme/chrome/browser/devtools/debugger.css
new file mode 100644
index 0000000..c313820
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/debugger.css
@@ -0,0 +1,672 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* 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 {
+  -moz-border-end: 1px solid;
+}
+
+#sources-pane .devtools-toolbar {
+  border: none; /* Remove the devtools-toolbar bottom border. */
+  -moz-border-end: 1px solid;
+}
+
+#sources-pane > tabs,
+#sources-pane .devtools-toolbar {
+  -moz-border-end-color: var(--theme-splitter-color);
+}
+
+/* Sources and breakpoints list */
+
+.dbg-source-item {
+  padding: 2px 0px;
+}
+
+.dbg-breakpoint-line {
+  font-weight: 600;
+}
+
+.dbg-breakpoint-text {
+  -moz-padding-start: 6px;
+  font-style: italic;
+  font-size: 90%;
+}
+
+.dbg-breakpoint-checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+}
+
+.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;
+  -moz-padding-start: 0;
+}
+
+/* Sources toolbar */
+
+#sources-toolbar > .devtools-toolbarbutton,
+#sources-controls > .devtools-toolbarbutton {
+  min-width: 32px;
+}
+
+#black-box {
+  list-style-image: url(debugger-blackbox.png);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #black-box {
+    list-style-image: url(debugger-blackbox@2x.png);
+  }
+}
+
+#pretty-print {
+  list-style-image: url(debugger-prettyprint.png);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #pretty-print {
+    list-style-image: url(debugger-prettyprint@2x.png);
+  }
+}
+
+#toggle-breakpoints {
+  list-style-image: url(debugger-toggleBreakpoints.png);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #toggle-breakpoints {
+    list-style-image: url(debugger-toggleBreakpoints@2x.png);
+  }
+}
+
+#sources-toolbar .devtools-toolbarbutton:not([label]) {
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #sources-toolbar .devtools-toolbarbutton:not([label]) {
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+#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(debugger-blackbox.png);
+  background-position: 0 0;
+  background-size: 32px 16px;
+  background-repeat: no-repeat;
+  -moz-margin-end: 5px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  #black-boxed-message-button > .button-box > .button-icon {
+    background-image: url(debugger-blackbox@2x.png);
+  }
+}
+
+/* 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 {
+  -moz-padding-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(tracer-icon.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#trace[checked] {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #trace {
+    list-style-image: url(tracer-icon@2x.png);
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #trace[checked] {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+#clear-tracer {
+  /* Make this button as narrow as the text inside it. */
+  min-width: 1px;
+}
+
+.trace-name {
+  -moz-padding-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(29,79,115,.4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-dark .selected > .trace-item {
+  background-color: rgba(29,79,115,.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: url(commandline-icon.png);
+  background-position: -16px 0;
+  background-repeat: no-repeat;
+  background-size: 32px 16px;
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .dbg-expression-arrow {
+    background-image: url(commandline-icon@2x.png);
+  }
+}
+
+.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;
+  -moz-margin-start: 1px;
+}
+
+#filter-label {
+  -moz-margin-start: 2px;
+}
+
+#searchbox-panel-operators {
+  margin-top: 5px;
+  margin-bottom: 8px;
+  -moz-margin-start: 2px;
+}
+
+.searchbox-panel-operator-button {
+  min-width: 26px;
+  margin-top: 0;
+  margin-bottom: 0;
+  -moz-margin-start: 2px;
+  -moz-margin-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 {
+  -moz-padding-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 {
+  -moz-padding-start: 6px;
+}
+
+.dbg-results-header-location {
+  font-weight: 600;
+}
+
+.dbg-results-header-match-count {
+  -moz-padding-start: 6px;
+}
+
+.dbg-results-line-number {
+  min-width: 3em;
+  -moz-border-end: 1px solid rgba(128,128,128,0.2);
+  -moz-padding-end: 4px;
+  text-align: end;
+}
+
+.dbg-results-line-contents {
+  -moz-padding-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(29,79,115,.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 */
+
+#debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
+#sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#resume {
+  list-style-image: url(debugger-pause.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#resume[checked] {
+  list-style-image: url(debugger-play.png);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #resume {
+    list-style-image: url(debugger-pause@2x.png);
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #resume[checked] {
+    list-style-image: url(debugger-play@2x.png);
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+#resume ~ toolbarbutton {
+  transition: opacity 0.15s ease-in-out;
+}
+
+#resume:not([checked]) ~ toolbarbutton {
+  opacity: 0.5;
+}
+
+#step-over {
+  list-style-image: url(debugger-step-over.png);
+}
+
+#step-in {
+  list-style-image: url(debugger-step-in.png);
+}
+
+#step-out {
+  list-style-image: url(debugger-step-out.png);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #step-over {
+    list-style-image: url(debugger-step-over@2x.png);
+  }
+
+  #step-in {
+    list-style-image: url(debugger-step-in@2x.png);
+  }
+
+  #step-out {
+    list-style-image: url(debugger-step-out@2x.png);
+  }
+}
+
+#instruments-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border: none;
+  list-style-image: url(debugger-collapse.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#instruments-pane-toggle[pane-collapsed] {
+  list-style-image: url(debugger-expand.png);
+}
+
+#instruments-pane-toggle:hover {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #instruments-pane-toggle {
+    list-style-image: url(debugger-collapse@2x.png);
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #instruments-pane-toggle[pane-collapsed] {
+    list-style-image: url(debugger-expand@2x.png);
+  }
+
+  #instruments-pane-toggle:hover {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+/* Horizontal vs. vertical layout */
+
+#vertical-layout-panes-container {
+  min-height: 35vh;
+  max-height: 80vh;
+}
+
+#body[layout=vertical] #sources-pane > tabs {
+  -moz-border-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 {
+  -moz-margin-end: 0;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-bottom@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-bottom@2x.png
new file mode 100644
index 0000000..d5df16f
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/dock-bottom@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-side@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-side@2x.png
new file mode 100644
index 0000000..17de7f1
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/dock-side@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg
new file mode 100644
index 0000000..09b65c7
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="4" viewBox="0 0 8 4" enable-background="new 0 0 8 4">

+  <polygon points="0,0 4,4 8,0" fill="#B6BABF" />

+</svg>
\ No newline at end of file
diff --git a/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint.png b/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint.png
new file mode 100644
index 0000000..401f26b
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/editor-breakpoint.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/editor-debug-location.png b/arc-firefox-theme/chrome/browser/devtools/editor-debug-location.png
new file mode 100644
index 0000000..d590573
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/editor-debug-location.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/editor-debug-location@2x.png b/arc-firefox-theme/chrome/browser/devtools/editor-debug-location@2x.png
new file mode 100644
index 0000000..b1dd7ee
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/editor-debug-location@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/editor-error.png b/arc-firefox-theme/chrome/browser/devtools/editor-error.png
new file mode 100644
index 0000000..39ef81e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/editor-error.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/eyedropper.css b/arc-firefox-theme/chrome/browser/devtools/eyedropper.css
new file mode 100644
index 0000000..cf22caf
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/eyedropper.css
@@ -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/. */
+
+#canvas {
+  image-rendering: -moz-crisp-edges;
+  cursor: none;
+  border: 3px solid #E0E0E0;
+  border-radius: 50%;
+}
+
+#canvas-overflow {
+  overflow: hidden;
+  width: 96px;
+  height: 96px;
+}
+
+#color-preview {
+  width: 16px;
+  height: 16px;
+  box-shadow: 0px 0px 0px black;
+  border: solid 1px #fff;
+  margin: 3px;
+}
+
+#color-value-box {
+  background-color: #E0E0E0;
+  border-radius: 1px;
+  width: 150px;
+}
+
+#color-value {
+  padding: 0.3em;
+  text-shadow: 1px 1px 1px #fff;
+}
+
+#color-value.highlight {
+  font-family: inherit;
+}
+
+window {
+  /* inexplicably, otherwise background shows up on Linux */
+  border: 1px solid transparent;
+  background-color: transparent;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/fast-forward.png b/arc-firefox-theme/chrome/browser/devtools/fast-forward.png
new file mode 100644
index 0000000..f2c6c52
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/fast-forward.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png b/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png
new file mode 100644
index 0000000..4c3cf88
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/fast-forward@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg
new file mode 100644
index 0000000..e8ff440
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>

+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" width="16" height="16">

+  <path d="M 0.00,160.00 L 512.00,160.00 L 480.00,480.00 L 32.00,480.00 L 0.00,160.00 Z M 464.00,96.00 L 480.00,128.00 L 32.00,128.00 L 64.00,64.00 L 240.00,64.00 L 256.00,96.00 L 464.00,96.00 Z"/>

+</svg>

diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg
new file mode 100644
index 0000000..fd8209d
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>

+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" width="16" height="16">

+  <path d="M 416.00,480.00L 512.00,224.00L 96.00,224.00L0.00,480.00 zM 64.00,192.00 L 0.00,480.00 L 0.00,64.00 L 144.00,64.00 L 208.00,128.00 L 416.00,128.00 L 416.00,192.00 Z"/>

+</svg>

diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg
new file mode 100644
index 0000000..809e098
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="20" viewBox="0 0 878 1024">

+	<path d="M438.857 73.143q119.429 0 220.286 58.857t159.714 159.714 58.857 220.286-58.857 220.286-159.714 159.714-220.286 58.857-220.286-58.857-159.714-159.714-58.857-220.286 58.857-220.286 159.714-159.714 220.286-58.857zM595.429 370.857q-1.143 0.571-5.429 5.429t-7.714 5.429q1.143 0 2.571-2.857t2.857-6.286 2-4q3.429-4 12.571-8.571 8-3.429 29.714-6.857 19.429-4.571 29.143 6.286-1.143-1.143 5.429-7.429t8.286-6.857q1.714-1.143 8.571-2.571t8.571-4.286l1.143-12.571q-6.857 0.571-10-4t-3.714-12q0 1.143-3.429 4.571 0-4-2.571-4.571t-6.571 0.571-5.143 0.571q-5.714-1.714-8.571-4.286t-4.571-9.429-2.286-8.571q-1.143-2.857-5.429-6t-5.429-6q-0.571-1.143-1.429-3.143t-1.714-3.714-2.286-3.143-3.143-1.429-4 2.857-4.286 5.714-2.571 2.857q-1.714-1.143-3.429-0.857t-2.571 0.571-2.571 1.714-2.857 2q-1.714 1.143-4.857 1.714t-4.857 1.143q8.571-2.857-0.571-6.286-5.714-2.286-9.143-1.714 5.143-2.286 4.286-6.857t-4.857-8h2.857q-0.571-2.286-4.857-4.857t-10-4.857-7.429-3.429q-4.571-2.857-19.429-5.429t-18.857-0.286q-2.857 3.429-2.571 6t2.286 8 2 7.143q0.571 3.429-3.143 7.429t-3.714 6.857q0 4 8 8.857t5.714 12.286q-1.714 4.571-9.143 9.143t-9.143 6.857q-2.857 4.571-0.857 10.571t6 9.429q1.143 1.143 0.857 2.286t-2 2.571-3.143 2.286-3.714 2l-1.714 1.143q-6.286 2.857-11.714-3.429t-7.714-14.857q-4-14.286-9.143-17.143-13.143-4.571-16.571 0.571-2.857-7.429-23.429-14.857-14.286-5.143-33.143-2.286 3.429-0.571 0-8.571-4-8.571-10.857-6.857 1.714-3.429 2.286-10t0.571-7.714q1.714-7.429 6.857-13.143 0.571-0.571 4-4.857t5.429-7.714 0.286-3.429q20 2.286 28.571-6.286 2.857-2.857 6.571-9.714t6-9.714q5.143-3.429 8-3.143t8.286 3.143 8.286 2.857q8 0.571 8.857-6.286t-4.286-11.429q6.857 0.571 1.714-9.714-2.857-4-4.571-5.143-6.857-2.286-15.429 2.857-4.571 2.286 1.143 4.571-0.571-0.571-5.429 6t-9.429 10-9.143-2.857q-0.571-0.571-3.143-7.714t-5.429-7.714q-4.571 0-9.143 8.571 1.714-4.571-6.286-8.571t-13.714-4.571q10.857-6.857-4.571-15.429-4-2.286-11.714-2.857t-11.143 2.286q-2.857 4-3.143 6.571t2.857 4.571 6 3.143 6.571 2.286 4.857 1.714q8 5.714 4.571 8-1.143 0.571-4.857 2t-6.571 2.571-3.429 2.286q-1.714 2.286 0 8t-1.143 8q-2.857-2.857-5.143-10t-4-9.429q4 5.143-14.286 3.429l-5.714-0.571q-2.286 0-9.143 1.143t-11.714 0.571-7.714-4.571q-2.286-4.571 0-11.429 0.571-2.286 2.286-1.143-2.286-1.714-6.286-5.429t-5.714-4.857q-26.286 8.571-53.714 23.429 3.429 0.571 6.857-0.571 2.857-1.143 7.429-3.714t5.714-3.143q19.429-8 24-4l2.857-2.857q8 9.143 11.429 14.286-4-2.286-17.143-0.571-11.429 3.429-12.571 6.857 4 6.857 2.857 10.286-2.286-1.714-6.571-5.714t-8.286-6.286-8.571-2.857q-9.143 0-12.571 0.571-83.429 45.714-134.286 126.857 4 4 6.857 4.571 2.286 0.571 2.857 5.143t1.429 6.286 6.571-1.714q5.143 4.571 1.714 10.857 0.571-0.571 25.143 15.429 10.857 9.714 12 12 1.714 6.286-5.714 10.286-0.571-1.143-5.143-5.143t-5.143-2.286q-1.714 2.857 0.286 10.571t6 7.143q-4 0-5.429 9.143t-1.429 20.286-0.571 13.429l1.143 0.571q-1.714 6.857 3.143 19.714t12.286 11.143q-7.429 1.714 11.429 24.571 3.429 4.571 4.571 5.143 1.714 1.143 6.857 4.286t8.571 5.714 5.714 6q2.286 2.857 5.714 12.857t8 13.429q-1.143 3.429 5.429 11.429t6 13.143q-0.571 0-1.429 0.571t-1.429 0.571q1.714 4 8.857 8t8.857 7.429q0.571 1.714 1.143 5.714t1.714 6.286 4.571 1.143q1.143-11.429-13.714-35.429-8.571-14.286-9.714-16.571-1.714-2.857-3.143-8.857t-2.571-8.286q1.143 0 3.429 0.857t4.857 2 4.286 2.286 1.143 1.714q-1.714 4 1.143 10t6.857 10.571 9.714 10.857 6.857 7.429q3.429 3.429 8 11.143t0 7.714q5.143 0 11.429 5.714t9.714 11.429q2.857 4.571 4.571 14.857t2.857 13.714q1.143 4 4.857 7.714t7.143 5.429l9.143 4.571t7.429 4q2.857 1.143 10.571 6t12.286 6.571q5.714 2.286 9.143 2.286t8.286-1.429 7.714-2q8.571-1.143 16.571 8.571t12 12q20.571 10.857 31.429 6.286-1.143 0.571 0.286 4.286t4.571 8.857 5.143 8.286 3.143 4.857q2.857 3.429 10.286 8.571t10.286 8.571q3.429-2.286 4-5.143-1.714 4.571 4 11.429t10.286 5.714q8-1.714 8-18.286-17.714 8.571-28-10.286 0-0.571-1.429-3.143t-2.286-4.857-1.429-4.857 0-4.286 2.857-1.714q5.143 0 5.714-2t-1.143-7.143-2.286-7.429q-0.571-4.571-6.286-11.429t-6.857-8.571q-2.857 5.143-9.143 4.571t-9.143-5.143q0 0.571-0.857 3.143t-0.857 3.714q-7.429 0-8.571-0.571 0.571-1.714 1.429-10t2-12.857q0.571-2.286 3.143-6.857t4.286-8.286 2.286-7.143-2.571-5.429-10-1.429q-10.857 0.571-14.857 11.429-0.571 1.714-1.714 6t-2.857 6.571-5.143 4q-4 1.714-13.714 1.143t-13.714-2.857q-7.429-4.571-12.857-16.571t-5.429-21.143q0-5.714 1.429-15.143t1.714-14.286-3.143-14q1.714-1.143 5.143-5.429t5.714-6q1.143-0.571 2.571-0.857t2.571 0 2.286-0.857 1.714-3.429q-0.571-0.571-2.286-1.714-1.714-1.714-2.286-1.714 4 1.714 16.286-0.857t15.714 0.857q8.571 6.286 12.571-1.143 0-0.571-1.429-5.429t-0.286-7.714q2.857 15.429 16.571 5.143 1.714 1.714 8.857 2.857t10 2.857q1.714 1.143 4 3.143t3.143 2.571 2.857-0.286 4.857-3.714q5.714 8 6.857 13.714 6.286 22.857 10.857 25.143 4 1.714 6.286 1.143t2.571-5.429 0-8-0.857-7.143l-0.571-4.571v-10.286l-0.571-4.571q-8.571-1.714-10.571-6.857t0.857-10.571 8.571-10.571q0.571-0.571 4.571-2t8.857-3.714 7.143-4.571q12-10.857 8.571-20 4 0 6.286-5.143-0.571 0-2.857-1.714t-4.286-2.857-2.571-1.143q5.143-2.857 1.143-9.143 2.857-1.714 4.286-6.286t4.286-5.714q5.143 6.857 12 1.143 4-4.571 0.571-9.143 2.857-4 11.714-6t10.571-5.429q4 1.143 4.571-1.143t0.571-6.857 1.714-6.857q2.286-2.857 8.571-5.143t7.429-2.857l9.714-6.286q1.714-2.286 0-2.286 10.286 1.143 17.714-6.286 5.714-6.286-3.429-11.429 1.714-3.429-1.714-5.429t-8.571-3.143q1.714-0.571 6.571-0.286t6-0.857q8.571-5.714-4-9.143-9.714-2.857-24.571 6.857zM502.286 872q117.714-20.571 200.571-108-1.714-1.714-7.143-2.571t-7.143-2q-10.286-4-13.714-4.571 0.571-4-1.429-7.429t-4.571-5.143-7.143-4.571-6.286-4q-1.143-1.143-4-3.429t-4-3.143-4.286-2.571-4.857-1.143-5.714 0.571l-1.714 0.571q-1.714 0.571-3.143 1.429t-3.143 1.714-2.286 1.714 0 1.429q-12-9.714-20.571-12.571-2.857-0.571-6.286-3.143t-6-4-5.714-0.857-6.571 4q-2.857 2.857-3.429 8.571t-1.143 7.429q-4-2.857 0-10t1.143-10.571q-1.714-3.429-6-2.571t-6.857 2.571-6.571 4.857-5.143 3.714-4.857 3.143-4.857 4.286q-1.714 2.286-3.429 6.857t-2.857 6.286q-1.143-2.286-6.571-3.714t-5.429-3.143q1.143 5.714 2.286 20t2.857 21.714q4 17.714-6.857 27.429-15.429 14.286-16.571 22.857-2.286 12.571 6.857 14.857 0 4-4.571 11.714t-4 12.286q0 3.429 1.143 9.143z"/>

+</svg>

diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg
new file mode 100644
index 0000000..95be627
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg
@@ -0,0 +1,7 @@
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g>
+<path d="m1.3,12.5v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6,0-6.6-2.7-6.6-2.7z"/>
+<path d="m14.7,3.4c0-1.4-3-2.5-6.7-2.5s-6.7,1.1-6.7,2.5c0,.2 0,.3 .1,.5-.1-.3-.1-.4-.1-.4v1.5c0,0 0,2.7 6.7,2.7 6.7,0 6.8-2.7 6.8-2.7v-1.6c0,.1 0,.2-.1,.5-0-.2-0-.3-0-.5z"/>
+<path d="m1.3,8.7v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6-0-6.6-2.7-6.6-2.7z"/>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg
new file mode 100644
index 0000000..37dcab4
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/filter-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" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12" width="12px" height="12px">
+  <defs>
+    <mask id="mask">
+      <rect width="100%" height="100%" fill="white"/>
+      <polygon points="12,0 0,0 0,12"/>
+    </mask>
+  </defs>
+
+  <g id="addpage-shape">
+    <circle cx="6" cy="6" r="6" fill="white"/>
+    <circle cx="6" cy="6" r="6" mask="url(#mask)" fill="#AEB0B1" />
+  </g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/filters.svg b/arc-firefox-theme/chrome/browser/devtools/filters.svg
new file mode 100644
index 0000000..916028b
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/filters.svg
@@ -0,0 +1,27 @@
+<svg height="0" xmlns="http://www.w3.org/2000/svg">
+<filter id="invert" x="0%" y="0%" width="100%" height="100%" >
+  <feComponentTransfer>
+    <feFuncR type="table" tableValues=".1 0"/>
+    <feFuncG type="table" tableValues=".1 0"/>
+    <feFuncB type="table" tableValues=".1 0"/>
+  </feComponentTransfer>
+</filter>
+<filter id="invert-white" x="0%" y="0%" width="100%" height="100%" >
+  <feComponentTransfer>
+    <feFuncR type="table" tableValues=".6 0"/>
+    <feFuncG type="table" tableValues=".6 0"/>
+    <feFuncB type="table" tableValues=".6 0"/>
+  </feComponentTransfer>
+ </filter>
+
+  <!-- Web Audio Gradients -->
+  <linearGradient id="bypass-light" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat">
+    <stop offset="0%" stop-color="#f0f1f2"/> <!-- theme-toolbar-background -->
+    <stop offset="50%" stop-color="#fff"/>
+  </linearGradient>
+
+  <linearGradient id="bypass-dark" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat">
+    <stop offset="0%" stop-color="#343c45"/> <!-- theme-toolbar-background -->
+    <stop offset="50%" stop-color="transparent"/>
+  </linearGradient>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css
new file mode 100644
index 0000000..7e38611
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars-light.css
@@ -0,0 +1,10 @@
+/* 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("floating-scrollbars.css");
+
+scrollbar thumb {
+  background-color: rgba(170,170,170,0.2) !important;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css
new file mode 100644
index 0000000..ff70d64
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css
@@ -0,0 +1,33 @@
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+
+scrollbar {
+  -moz-appearance: none !important;
+  position: relative;
+  background-color: transparent;
+  background-image: none;
+  z-index: 2147483647;
+  padding: 2px;
+}
+
+scrollbar[orient="vertical"] {
+  -moz-margin-start: -10px;
+  min-width: 10px;
+  max-width: 10px;
+}
+
+scrollbar[orient="horizontal"] {
+  margin-top: -10px;
+  min-height: 10px;
+  max-height: 10px;
+}
+
+scrollbar thumb {
+  -moz-appearance: none !important;
+  border-width: 0px !important;
+  background-color: rgba(170,170,170,0.2) !important;
+  border-radius: 3px !important;
+}
+
+scrollbar scrollbarbutton, scrollbar gripper {
+  display: none;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css
new file mode 100644
index 0000000..30424df
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css
@@ -0,0 +1,77 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding-bottom: 20px;
+}
+
+#all-fonts {
+  padding: 0;
+  margin: 0;
+}
+
+#showall {
+  border-radius: 0;
+  border: 1px solid black;
+  margin: 3px;
+  cursor: pointer;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+
+.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/arc-firefox-theme/chrome/browser/devtools/inspector.css b/arc-firefox-theme/chrome/browser/devtools/inspector.css
new file mode 100644
index 0000000..cab78e7
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/inspector.css
@@ -0,0 +1,155 @@
+/* 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/. */
+
+
+#inspector-searchbox {
+  transition-property: max-width, -moz-padding-end, -moz-padding-start;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+
+#inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box {
+  overflow: hidden;
+}
+
+#inspector-searchbox:not([focused]):not([filled]) {
+  max-width: 20px !important;
+  -moz-padding-end: 5px;
+  -moz-padding-start: 22px;
+  background-position: 8px center, top left, top left;
+}
+
+#inspector-searchbox[focused],
+#inspector-searchbox[filled] {
+  max-width: 200px !important;
+}
+
+/* Expand/collapse panel toolbar button */
+
+#inspector-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border: none;
+  list-style-image: url(debugger-collapse.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#inspector-pane-toggle > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#inspector-pane-toggle[pane-collapsed] {
+  list-style-image: url(debugger-expand.png);
+}
+
+#inspector-pane-toggle:active {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #inspector-pane-toggle {
+    list-style-image: url(debugger-collapse@2x.png);
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #inspector-pane-toggle[pane-collapsed] {
+    list-style-image: url(debugger-expand@2x.png);
+  }
+
+  #inspector-pane-toggle:active {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+/* Tooltip: Events */
+
+#devtools-tooltip-events-container {
+  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
+  max-width: 590px;
+  overflow-y: auto;
+}
+
+.event-header {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.event-tooltip-event-type,
+.event-tooltip-filename,
+.event-tooltip-attributes {
+  -moz-margin-start: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.event-tooltip-event-type {
+  font-weight: bold;
+  font-size: 13px;
+}
+
+.event-tooltip-filename {
+  -moz-margin-end: 0;
+  font-size: 100%;
+  flex-shrink: 1;
+}
+
+.event-tooltip-debugger-icon {
+  width: 16px;
+  height: 16px;
+  -moz-margin-end: 4px;
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
+.event-tooltip-debugger-icon:hover {
+  opacity: 1;
+}
+
+.event-tooltip-content-box {
+  display: none;
+  overflow: auto;
+  -moz-margin-end: 0;
+}
+
+.event-tooltip-content-box[open] {
+  display: block;
+}
+
+.event-tooltip-source-container {
+  margin-top: 5px;
+  margin-bottom: 10px;
+  -moz-margin-start: 5px;
+  -moz-margin-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;
+  border-radius: 3px;
+  padding: 2px;
+  -moz-margin-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;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg
new file mode 100644
index 0000000..7bd7028
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg
@@ -0,0 +1,4 @@
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 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/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg
new file mode 100644
index 0000000..9315d9e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg
@@ -0,0 +1,4 @@
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 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>
\ No newline at end of file
diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg
new file mode 100644
index 0000000..93913c9
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg
@@ -0,0 +1,4 @@
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 7 12">
+<path fill="#f7f7f7" d="M7,11.6 7,.4 1.5,6z"/>
+<path fill="#ababab" d="M7,0 6,0 0,6 6,12 7,12 7,11.6 1.5,6 7,.4z"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg
new file mode 100755
index 0000000..e580b88
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg
@@ -0,0 +1,4 @@
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 7 12">
+<path fill="#f7f7f7" d="M0,11.6 0,.4 5.5,6z"/>
+<path fill="#ababab" d="M1,0 0,0 0,.4 5.5,6 0,11.6 0,12 1,12 7,6z"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/itemToggle.png b/arc-firefox-theme/chrome/browser/devtools/itemToggle.png
new file mode 100644
index 0000000..dc30c22
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/itemToggle.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/itemToggle@2x.png b/arc-firefox-theme/chrome/browser/devtools/itemToggle@2x.png
new file mode 100644
index 0000000..9042128
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/itemToggle@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/layoutview.css b/arc-firefox-theme/chrome/browser/devtools/layoutview.css
new file mode 100644
index 0000000..8027a4c
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/layoutview.css
@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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-sidebar {
+  box-sizing: border-box;
+}
+
+#main {
+  background-color: white;
+  border-color: hsla(210,100%,85%,0.7);
+  border-style: dotted;
+  color: var(--theme-selection-color);
+}
+
+.margin,
+.size {
+  color: var(--theme-highlight-blue);
+}
+
+#content {
+  background-color: #87ceeb;
+  border-color: hsl(210,100%,85%);
+  border-style: dotted;
+}
+
+#padding,
+#margins {
+  border-color: hsla(210,100%,85%,0.2);
+  outline: dotted 1px hsl(210,100%,85%);
+}
+
+#padding {
+  background-color: #6a5acd;
+}
+
+#borders {
+  background-color: #444444;
+  border-style: dotted;
+  border-color: hsl(210,100%,85%);
+}
+
+#margins {
+  background-color: #edff64;
+  /* This opacity applies to all of the regions, since they are nested. */
+  opacity: .8;
+}
+
+.editable {
+  border: 1px dashed transparent;
+}
+
+.editable:hover {
+  border-bottom-color: hsl(0,0%,50%);
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #CCC;
+  padding: 0;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/light-theme.css b/arc-firefox-theme/chrome/browser/devtools/light-theme.css
new file mode 100644
index 0000000..ac6a511
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css
@@ -0,0 +1,1456 @@
+/* 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/. */
+
+/* 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.
+ */
+:root {
+  --theme-body-background: #fcfcfc;
+  --theme-sidebar-background: #f7f7f7;
+  --theme-contrast-background: #e6b064;
+
+  --theme-tab-toolbar-background: #ebeced;
+  --theme-toolbar-background: #f0f1f2;
+  --theme-selection-background: #4c9ed9;
+  --theme-selection-background-semitransparent: rgba(76, 158, 217, .23);
+  --theme-selection-color: #f5f7fa;
+  --theme-splitter-color: #aaaaaa;
+  --theme-comment: #757873;
+
+  --theme-body-color: #18191a;
+  --theme-body-color-alt: #585959;
+  --theme-content-color1: #292e33;
+  --theme-content-color2: #8fa1b2;
+  --theme-content-color3: #667380;
+
+  --theme-highlight-green: #2cbb0f;
+  --theme-highlight-blue: #0088cc;
+  --theme-highlight-bluegrey: #5f88b0;
+  --theme-highlight-purple: #5b5fff;
+  --theme-highlight-lightorange: #d97e00;
+  --theme-highlight-orange: #f13c00;
+  --theme-highlight-red: #ed2655;
+  --theme-highlight-pink: #b82ee5;
+
+  /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
+  --theme-graphs-green: #85d175;
+  --theme-graphs-blue: #83b7f6;
+  --theme-graphs-purple: #b693eb;
+  --theme-graphs-yellow: #efc052;
+  --theme-graphs-red: #e57180;
+  --theme-graphs-grey: #cccccc;
+}
+
+.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: hsl(0,0%,90%);
+  color: var(--theme-content-color3);
+  border-color: hsl(0,0%,65%);
+}
+
+.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-green);
+}
+
+.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-def,
+.cm-s-mozilla .cm-property,
+.cm-s-mozilla .cm-qualifier,
+.variables-view-variable > .title > .name {
+  color: var(--theme-highlight-blue);
+}
+
+.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,
+.variables-view-property > .title > .name {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.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-lightorange);
+}
+
+.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-orange);
+}
+
+.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,
+.CodeMirror-dialog { /* General toolbar styling */
+  color: var(--theme-body-color-alt);
+  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 { /* Inherit platform specific font sizing and styles */
+  font-family: inherit;
+  font-size: inherit;
+  background: transparent;
+}
+
+.CodeMirror 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);
+}
+
+/* Highlight for a line that represents a stack frame's location. */
+div.CodeMirror div.debug-line {
+  background: rgba(0,128,255,0.1);
+  box-shadow:
+    0 1px 0 0 rgba(0,128,255,0.4),
+    0 -1px 0 0 rgba(0,128,255,0.4);
+}
+
+/* Generic highlighted text */
+div.CodeMirror span.marked-text {
+  background: rgba(255,255,0,0.2);
+  border: 1px dashed rgba(192,192,0,0.6);
+  -moz-margin-start: -1px;
+  -moz-margin-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;
+}
+
+/* Twisty and checkbox controls */
+
+.theme-twisty, .theme-checkbox {
+  width: 14px;
+  height: 14px;
+  background-repeat: no-repeat;
+  background-image: url("chrome://browser/skin/devtools/controls.png");
+  background-size: 56px 28px;
+}
+
+.theme-twisty {
+  cursor: pointer;
+  background-position: 0 -14px;
+}
+
+.theme-twisty:-moz-focusring {
+  outline-style: none;
+}
+
+.theme-twisty[open] {
+  background-position: -14px -14px;
+}
+
+.theme-twisty[invisible] {
+  visibility: hidden;
+}
+
+/* Use white twisty when next to a selected item in markup view */
+.theme-selected ~ .theme-twisty {
+  background-position: -28px -14px;
+}
+
+.theme-selected ~ .theme-twisty[open] {
+  background-position: -42px -14px;
+}
+
+.theme-checkbox {
+  display: inline-block;
+  border: 0;
+  padding: 0;
+  outline: none;
+  background-position: 0 0;
+}
+
+.theme-checkbox[checked] {
+  background-position: -14px 0;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .theme-twisty, .theme-checkbox {
+    background-image: url("chrome://browser/skin/devtools/controls@2x.png");
+  }
+}
+
+/* XUL panel styling (see browser/devtools/shared/widgets/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[side="top"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png");
+  margin-bottom: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png");
+  margin-top: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png");
+  margin-right: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png");
+  margin-left: -4px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .theme-tooltip-panel .panel-arrow[side="top"],
+  .theme-tooltip-panel .panel-arrow[side="bottom"] {
+    list-style-image: url("chrome://browser/skin/devtools/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://browser/skin/devtools/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);
+}
+
+
+
+/* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
+.theme-light {
+  --searchbox-background-color: #ffee99;
+  --searchbox-border-color: #ffbf00;
+  --searcbox-no-match-background-color: #ffe5e5;
+  --searcbox-no-match-border-color: #e52e2e;
+}
+
+.theme-dark {
+  --searchbox-background-color: #4d4222;
+  --searchbox-border-color: #d99f2b;
+  --searcbox-no-match-background-color: #402325;
+  --searcbox-no-match-border-color: #cc3d3d;
+}
+
+/* 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;
+}
+
+/* Toolbar buttons */
+.devtools-menulist,
+.devtools-toolbarbutton {
+  -moz-appearance: none;
+  -moz-box-align: center;
+  background: transparent;
+  min-width: 78px;
+  min-height: 18px;
+  padding: 1px;
+  text-shadow: none;
+  border: none;
+  border-radius: 0;
+  margin: 2px 3px;
+  color: inherit;
+  transition: background 0.05s ease-in-out;
+  color: var(--theme-content-color1);
+  background-color: var(--theme-toolbar-background);
+}
+
+.devtools-menulist:-moz-focusring,
+.devtools-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.7);
+  outline-offset: -4px;
+}
+
+.devtools-toolbarbutton[standalone] {
+  -moz-margin-end: 5px;
+  border-width: 1px;
+  border-style: solid;
+}
+.devtools-toolbarbutton[label][standalone] {
+  min-height: 2em;
+}
+
+.devtools-toolbarbutton:not([label]),
+.devtools-toolbarbutton[text-as-image] {
+  min-width: 32px;
+}
+
+#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
+  -moz-padding-start: 5px;
+  -moz-padding-end: 5px;
+  min-width: inherit;
+}
+
+/* Command buttons with menupopups should be styled slightly differently -
+   no background color and a bit more narrow */
+#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) {
+  background: transparent;
+}
+#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
+  padding: 0 2px;
+}
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-toolbar .devtools-toolbarbutton {
+  border-width: 0;
+}
+
+.devtools-toolbarbutton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+.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 {
+  -moz-margin-end: 4px;
+}
+
+.devtools-menulist > .menulist-dropmarker {
+  -moz-appearance: none;
+  display: -moz-box;
+  list-style-image: url("chrome://browser/skin/devtools/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://browser/skin/devtools/dropmarker.svg");
+  -moz-box-align: center;
+  padding: 0 3px;
+}
+
+.theme-dark .devtools-menulist,
+.theme-dark .devtools-toolbarbutton {
+  border-color: rgba(0, 0, 0, .4); /* Splitters */
+}
+.theme-light .devtools-menulist,
+.theme-light .devtools-toolbarbutton {
+  border-color: rgba(170, 170, 170, .5); /* Splitters */
+}
+
+/* Text-only buttons */
+.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
+.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
+  background-color: rgba(170, 170, 170, .2); /* Splitter */
+}
+.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
+.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
+  background-color: rgba(0, 0, 0, .2); /* Splitter */
+}
+
+/* Button States */
+.theme-dark .devtools-toolbarbutton:not([disabled]):hover,
+.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
+.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
+  background: rgba(0, 0, 0, .3); /* Splitters */
+}
+.theme-light .devtools-toolbarbutton:not([disabled]):hover,
+.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
+.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
+  background: rgba(170, 170, 170, .3); /* Splitters */
+}
+
+.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active,
+.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
+.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+  background: rgba(0, 0, 0, .4); /* Splitters */
+}
+.theme-light .devtools-toolbarbutton:not([disabled]):hover:active,
+.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
+.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+  background: rgba(170, 170, 170, .4); /* Splitters */
+}
+
+/* Menu type buttons and checked states */
+.theme-dark .devtools-toolbarbutton[checked=true],
+.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
+  background: rgba(29, 79, 115, .7); /* Select highlight blue */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-toolbarbutton[checked=true],
+.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
+  background: rgba(76, 158, 217, .2); /* Select highlight blue */
+}
+
+.theme-dark .devtools-menulist[open=true],
+.theme-dark .devtools-toolbarbutton[open=true],
+.theme-dark .devtools-toolbarbutton[open=true]:hover,
+.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
+.theme-dark .devtools-toolbarbutton[checked=true]:hover {
+  background: rgba(29, 79, 115, .8); /* Select highlight blue */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-menulist[open=true],
+.theme-light .devtools-toolbarbutton[open=true],
+.theme-light .devtools-toolbarbutton[open=true]:hover,
+.theme-light .devtools-toolbarbutton[open=true]:hover:active,
+.theme-light .devtools-toolbarbutton[checked=true]:hover {
+  background: rgba(76, 158, 217, .4); /* Select highlight blue */
+}
+
+.devtools-option-toolbarbutton {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/devtools/tool-options.svg");
+  background: none;
+  opacity: .8;
+  border: none;
+}
+
+.devtools-option-toolbarbutton[open=true] {
+  opacity: 1;
+}
+
+/* Toolbar button groups */
+.devtools-toolbarbutton-group > .devtools-toolbarbutton {
+  margin-left: 1px;
+  margin-right: 1px;
+  outline-offset: -3px;
+  box-shadow: none;
+}
+
+.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
+  -moz-margin-end: 0;
+}
+
+.devtools-toolbarbutton-group + .devtools-toolbarbutton {
+  -moz-margin-start: 3px;
+}
+
+.devtools-separator + .devtools-toolbarbutton {
+  -moz-margin-start: 1px;
+}
+
+/* HTML buttons, similar to toolbar buttons, but work in HTML documents */
+
+.devtools-button {
+  border: 0 solid var(--theme-splitter-color);
+  background: var(--theme-toolbar-background);
+  margin: 0;
+  padding: 0;
+  min-width: 32px;
+  min-height: 18px;
+  /* The icon is absolutely positioned in the button using ::before */
+  position: relative;
+}
+
+.devtools-button[standalone] {
+  min-height: 32px;
+  border-width: 1px;
+}
+
+/* Button States */
+.theme-dark .devtools-button:not([disabled]):hover {
+  background: rgba(0, 0, 0, .3); /* Splitters */
+}
+.theme-light .devtools-button:not([disabled]):hover {
+  background: rgba(170, 170, 170, .3); /* Splitters */
+}
+
+.theme-dark .devtools-button:not([disabled]):hover:active {
+  background: rgba(0, 0, 0, .4); /* Splitters */
+}
+.theme-light .devtools-button:not([disabled]):hover:active {
+  background: rgba(170, 170, 170, .4); /* Splitters */
+}
+
+/* Menu type buttons and checked states */
+.theme-dark .devtools-button[checked] {
+  background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-button[checked] {
+  background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */
+}
+
+.devtools-button::before {
+  content: "";
+  display: block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -8px 0 0 -8px;
+  background-repeat: no-repeat;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .devtools-button::before {
+    background-size: 32px;
+  }
+}
+
+/* Text input */
+
+.devtools-textinput,
+.devtools-searchinput {
+  -moz-appearance: none;
+  margin: 0 3px;
+  border: 1px solid;
+  border-radius: 2px;
+  padding: 4px 6px;
+  border-color: var(--theme-splitter-color);
+}
+
+.devtools-searchinput {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  padding: 0;
+  -moz-padding-start: 22px;
+  -moz-padding-end: 4px;
+  background-position: 8px center;
+  background-size: 11px 11px;
+  background-repeat: no-repeat;
+  font-size: inherit;
+}
+
+.theme-dark .devtools-searchinput {
+  background-image: url(magnifying-glass.png);
+}
+
+.theme-light .devtools-searchinput {
+  background-image: url(magnifying-glass-light.png);
+}
+
+.devtools-searchinput:-moz-locale-dir(rtl) {
+  background-position: calc(100% - 8px) center;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
+  visibility: hidden;
+}
+
+/* Searchbox is a div container element for a search input element */
+.devtools-searchbox {
+  display: -moz-box;
+  -moz-box-flex: 1;
+  position: relative;
+}
+
+.devtools-rule-searchbox {
+  -moz-box-flex: 1;
+  padding-right: 23px;
+  width: 100%;
+  font: inherit;
+}
+
+.devtools-rule-searchbox[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-no-search-result {
+  border-color: var(--theme-highlight-red) !important;
+}
+
+.devtools-searchinput-clear {
+  position: absolute;
+  top: 3.5px;
+  right: 7px;
+  padding: 0;
+  border: 0;
+  width: 16px;
+  height: 16px;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-color: transparent;
+}
+
+.theme-dark .devtools-searchinput-clear {
+  background-image: url("chrome://browser/skin/devtools/search-clear-dark.svg");
+}
+
+.theme-light .devtools-searchinput-clear {
+  background-image: url("chrome://browser/skin/devtools/search-clear-light.svg");
+}
+
+.devtools-style-searchbox-no-match + .devtools-searchinput-clear {
+  background-image: url("chrome://browser/skin/devtools/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 {
+  list-style-image: url("chrome://browser/skin/devtools/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 {
+  list-style-image: url("chrome://browser/skin/devtools/search-clear-light.svg");
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
+  -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+@media (min-resolution: 1.25dppx) {
+  .theme-dark .devtools-searchinput {
+    background-image: url(magnifying-glass@2x.png);
+  }
+
+  .theme-light .devtools-searchinput {
+    background-image: url(magnifying-glass-light@2x.png);
+  }
+}
+
+/* Close button */
+
+.devtools-closebutton {
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
+  opacity: 0.8;
+}
+
+.devtools-closebutton > image {
+  width: 16px;
+  height: 16px;
+  -moz-appearance: none;
+  background-size: 16px 16px;
+  background-image: url("chrome://browser/skin/devtools/close@2x.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.devtools-closebutton > .toolbarbutton-icon {
+  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
+     use evil CSS to give the impression of smaller content */
+  margin: -4px;
+}
+
+.devtools-closebutton > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-closebutton:hover {
+  opacity: 1;
+}
+
+/* In-tools sidebar */
+.devtools-sidebar-tabs {
+  -moz-appearance: none;
+  margin: 0;
+}
+
+.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;
+  -moz-border-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;
+  -moz-border-start-width: 1px;
+  border-style: solid;
+  border-radius: 0;
+  position: static;
+  text-shadow: none;
+}
+
+.devtools-sidebar-tabs tabs > tab:first-child {
+  -moz-border-start-width: 0;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab {
+  border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab:hover {
+  background: hsla(206,37%,4%,.2);
+  border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active {
+  background: hsla(206,37%,4%,.4);
+  border-image: linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab {
+  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
+  background: hsla(206,37%,4%,.2);
+  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
+  background: hsla(206,37%,4%,.4);
+  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected],
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
+  color: var(--theme-selection-color);
+  background: #1d4f73;
+  border-image: linear-gradient(#2d5b7d, #2d5b7d) 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab {
+  border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab:hover {
+  background: #ddd;
+  border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab:hover:active {
+  background: #ddd;
+  border-image: linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%) 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab {
+  border-image: linear-gradient(#aaa, #aaa);
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
+  background: #ddd;
+  border-image: linear-gradient(#aaa, #aaa);
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab[selected],
+.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
+  color: var(--theme-selection-color);
+  background: #4c9ed9;
+  border-image: linear-gradient(#aaa, #aaa);
+}
+
+/* Toolbox - moved from toolbox.css.
+ * Rules that apply to the global toolbox like command buttons,
+ * devtools tabs, docking buttons, etc. */
+
+#toolbox-controls > toolbarbutton,
+#toolbox-dock-buttons > toolbarbutton {
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
+}
+
+#toolbox-controls > toolbarbutton > .toolbarbutton-text,
+#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text,
+.command-button > .toolbarbutton-text {
+  display: none;
+}
+
+#toolbox-dock-buttons > toolbarbutton > image {
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  background-size: 16px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+}
+
+#toolbox-dock-bottom > image {
+  background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png");
+}
+
+#toolbox-dock-side  > image {
+  background-image: url("chrome://browser/skin/devtools/dock-side@2x.png");
+}
+
+#toolbox-dock-window > image {
+  background-image: url("chrome://browser/skin/devtools/undock@2x.png");
+}
+
+#toolbox-dock-window,
+#toolbox-dock-bottom,
+#toolbox-dock-side {
+  opacity: 0.8;
+}
+
+#toolbox-dock-window:hover,
+#toolbox-dock-bottom:hover,
+#toolbox-dock-side:hover {
+  opacity: 1;
+}
+
+.devtools-separator {
+  margin: 0 2px;
+  width: 2px;
+  background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent),
+                    linear-gradient(transparent, hsla(206,37%,4%,.6), transparent),
+                    linear-gradient(transparent, hsla(204,45%,98%,.1), transparent);
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position: 0, 1px, 2px;
+}
+
+#toolbox-buttons:empty + .devtools-separator,
+.devtools-separator[invisible] {
+  visibility: hidden;
+}
+
+#toolbox-controls-separator {
+  margin: 0;
+}
+
+/* Command buttons */
+
+.command-button {
+  -moz-appearance: none;
+  border: none;
+  padding: 0 8px;
+  margin: 0;
+  width: 32px;
+  position: relative;
+}
+
+.command-button:hover {
+  background-color: hsla(206,37%,4%,.2);
+}
+.command-button:hover:active, .command-button[checked=true]:not(:hover) {
+  background-color: hsla(206,37%,4%,.4);
+}
+
+.command-button > image {
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  background-size: 64px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+}
+.command-button:hover > image {
+  background-position: -16px center;
+}
+.command-button:hover:active > image {
+  background-position: -32px center;
+}
+.command-button[checked=true] > image {
+  background-position: -48px center;
+}
+.command-button[open=true] > image {
+  background-position: 0 center;
+}
+
+#command-button-paintflashing > image {
+  background-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
+}
+
+#command-button-screenshot > image {
+  background-image: url("chrome://browser/skin/devtools/command-screenshot.png");
+}
+
+#command-button-responsive > image {
+  background-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
+}
+
+#command-button-tilt > image {
+  background-image: url("chrome://browser/skin/devtools/command-tilt.png");
+}
+
+#command-button-scratchpad > image {
+  background-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
+  background-size: 48px 16px;
+}
+
+#command-button-pick > image {
+  background-image: url("chrome://browser/skin/devtools/command-pick.png");
+}
+
+#command-button-frames > image {
+  background-image: url("chrome://browser/skin/devtools/command-frames.png");
+}
+
+#command-button-splitconsole > image {
+  background-image: url("chrome://browser/skin/devtools/command-console.png");
+}
+
+#command-button-eyedropper > image {
+  background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
+}
+
+#command-button-rulers > image {
+  background-image: url("chrome://browser/skin/devtools/command-rulers.png");
+}
+
+@media (min-resolution: 1.25dppx) {
+  #command-button-paintflashing > image {
+    background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
+  }
+
+  #command-button-screenshot > image {
+    background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png");
+  }
+
+  #command-button-responsive > image {
+    background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png");
+  }
+
+  #command-button-tilt > image {
+    background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png");
+  }
+
+  #command-button-scratchpad > image {
+    background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png");
+  }
+
+  #command-button-pick > image {
+    background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
+  }
+
+  #command-button-frames > image {
+    background-image: url("chrome://browser/skin/devtools/command-frames@2x.png");
+  }
+
+  #command-button-splitconsole > image {
+    background-image: url("chrome://browser/skin/devtools/command-console@2x.png");
+  }
+
+  #command-button-eyedropper > image {
+    background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
+  }
+
+  #command-button-rulers > image {
+    background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png");
+  }
+}
+
+/* Tabs */
+
+.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);
+}
+
+.theme-light .devtools-tabbar {
+  box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset;
+}
+
+.theme-dark .devtools-tabbar {
+  box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset;
+}
+
+#toolbox-tabs {
+  margin: 0;
+}
+
+.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: 110px;
+  margin: 0;
+  padding: 0;
+  border-style: solid;
+  border-width: 0;
+  -moz-border-start-width: 1px;
+  -moz-box-align: center;
+}
+
+.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 {
+  background-color: hsla(206,37%,4%,.2);
+  color: #ced3d9;
+}
+
+.theme-light .devtools-tab:hover {
+  background-color: rgba(170,170,170,.2);
+}
+
+.theme-dark .devtools-tab:hover:active {
+  background-color: hsla(206,37%,4%,.4);
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-tab:hover:active {
+  background-color: rgba(170,170,170,.4);
+}
+
+.devtools-tab:not([selected])[highlighted] {
+  box-shadow: 0 2px 0 var(--theme-highlight-green) inset;
+}
+
+.theme-dark .devtools-tab:not([selected])[highlighted] {
+  background-color: hsla(99,100%,14%,.2);
+}
+
+.theme-light .devtools-tab:not([selected])[highlighted] {
+  background-color: rgba(44, 187, 15, .2);
+}
+
+.devtools-tab > image {
+  border: none;
+  -moz-margin-end: 0;
+  -moz-margin-start: 4px;
+  opacity: 0.6;
+  max-height: 16px;
+  width: 16px; /* Prevents collapse during theme switching */
+}
+
+.devtools-tab > label {
+  white-space: nowrap;
+}
+
+.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);
+}
+
+.theme-dark .devtools-tabbar .devtools-tab[selected] {
+  box-shadow: 0 2px 0 #d7f1ff inset,
+              0 8px 3px -5px #2b82bf inset,
+              0 -2px 0 rgba(0,0,0,.2) inset;
+}
+
+.theme-light .devtools-tabbar .devtools-tab[selected] {
+  box-shadow: 0 2px 0 #d7f1ff inset,
+              0 8px 3px -5px #2b82bf inset,
+              0 -2px 0 rgba(0,0,0,.06) inset;
+}
+
+#toolbox-tabs .devtools-tab[selected],
+#toolbox-tabs .devtools-tab[highlighted] {
+  border-width: 0;
+  -moz-padding-start: 1px;
+}
+
+#toolbox-tabs .devtools-tab[selected]:last-child,
+#toolbox-tabs .devtools-tab[highlighted]:last-child {
+  -moz-padding-end: 1px;
+}
+
+#toolbox-tabs .devtools-tab[selected] + .devtools-tab,
+#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab {
+  -moz-border-start-width: 0;
+  -moz-padding-start: 1px;
+}
+
+#toolbox-tabs .devtools-tab:first-child[selected] {
+  -moz-border-start-width: 0;
+}
+
+#toolbox-tabs .devtools-tab:last-child {
+  -moz-border-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;
+  -moz-padding-start: 1px;
+}
+#toolbox-tab-options > image {
+  margin: 0 8px;
+}
+
+/* Invert the colors of certain dark theme images for displaying
+ * inside of the light theme.
+ */
+.theme-light .devtools-tab[icon-invertable] > image,
+.theme-light #toolbox-dock-buttons > toolbarbutton > image,
+.theme-light .command-button-invertable > image,
+.theme-light .command-button-invertable:active > image,
+.theme-light .devtools-closebutton > image,
+.theme-light .devtools-toolbarbutton > image,
+.theme-light .devtools-option-toolbarbutton > image,
+.theme-light #breadcrumb-separator-normal,
+.theme-light .scrollbutton-up > .toolbarbutton-icon,
+.theme-light .scrollbutton-down > .toolbarbutton-icon,
+.theme-light #black-boxed-message-button .button-icon,
+.theme-light .notice-container button .button-icon,
+.theme-light #requests-menu-perf-notice-button .button-icon,
+.theme-light #requests-menu-network-summary-button .button-icon,
+.theme-light .event-tooltip-debugger-icon,
+.theme-light .devtools-button::before {
+  filter: url(filters.svg#invert);
+}
+
+/* Since selected backgrounds are blue, we want to use the normal
+ * (light) icons. */
+.theme-light .command-button-invertable[checked=true]:not(:active) > image,
+.theme-light .devtools-tab[icon-invertable][selected] > image,
+.theme-light .devtools-tab[icon-invertable][highlighted] > image,
+.theme-light #record-snapshot[checked] > image,
+.theme-light #profiler-start[checked] > image,
+.theme-light .notice-container button[checked] .button-icon {
+  filter: none !important;
+}
+
+.theme-light .command-button:hover {
+  background-color: inherit;
+}
+
+.theme-light .command-button:hover:active,
+.theme-light .command-button[checked=true]:not(:hover) {
+  background-color: inherit;
+}
+
+.hidden-labels-box:not(.visible) > label,
+.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
+  display: none;
+}
+
+.devtools-invisible-splitter {
+  border-color: transparent;
+}
+
+.devtools-horizontal-splitter {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.devtools-side-splitter {
+  -moz-border-end: 1px solid var(--theme-splitter-color);
+  border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */
+}
+
+/* Throbbers */
+.devtools-throbber::before {
+  content: "";
+  display: inline-block;
+  vertical-align: bottom;
+  -moz-margin-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/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light.png b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light.png
new file mode 100644
index 0000000..e8c1841
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light@2x.png b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light@2x.png
new file mode 100644
index 0000000..d784870
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass-light@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/magnifying-glass.png b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass.png
new file mode 100644
index 0000000..bd09ffb
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/magnifying-glass@2x.png b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass@2x.png
new file mode 100644
index 0000000..1784285
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/magnifying-glass@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/markup-view.css b/arc-firefox-theme/chrome/browser/devtools/markup-view.css
new file mode 100644
index 0000000..e1912d8
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/markup-view.css
@@ -0,0 +1,100 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.more-nodes {
+  padding-left: 16px;
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #CCC;
+}
+
+
+/* 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);
+}
+
+/* In case a node isn't displayed in the page, we fade the syntax highlighting */
+.not-displayed .open,
+.not-displayed .close {
+  opacity: .7;
+}
+
+.tag-line {
+  padding-left: 2px;
+}
+
+/* Preview */
+
+#previewbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 90px;
+  background: black;
+  border-left: 1px solid;
+  border-bottom: 1px solid;
+  overflow: hidden;
+}
+
+#previewbar {
+  background: var(--theme-tab-toolbar-background);
+  border-color: var(--theme-splitter-color);
+}
+
+#preview {
+  position: absolute;
+  top: 0;
+  right: 5px;
+  width: 80px;
+  height: 100%;
+  background-image: -moz-element(#root);
+  background-repeat: no-repeat;
+}
+
+#previewbar.hide,
+#previewbar.disabled {
+  display: none;
+}
+
+#viewbox {
+  position: absolute;
+  top: 0;
+  right: 5px;
+  width: 80px;
+  border: 1px dashed #888;
+  background: rgba(205,205,255,0.2);
+  outline: 1px solid transparent;
+}
+
+/* Events */
+.markupview-events {
+  font-size: 8px;
+  font-weight: bold;
+  line-height: 10px;
+  border-radius: 3px;
+  padding: 0px 2px;
+  -moz-margin-start: 5px;
+  -moz-user-select: none;
+}
+
+.markupview-events {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css
new file mode 100644
index 0000000..96ba494
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css
@@ -0,0 +1,920 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* 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/. */
+
+#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(profiler-stopwatch.svg);
+}
+
+#requests-menu-perf-notice-button .button-text {
+  display: none;
+}
+
+#requests-menu-reload-notice-button {
+  min-height: 26px;
+  margin: 0;
+}
+
+
+/* Network requests table */
+
+#requests-menu-toolbar {
+  padding: 0;
+}
+
+.requests-menu-header:first-child,
+.requests-menu-subitem:first-child {
+  -moz-padding-start: 6px;
+}
+
+.requests-menu-subitem {
+  padding: 3px;
+}
+
+.theme-dark .requests-menu-header:not(:last-child),
+.theme-dark .requests-menu-subitem:not(:last-child) {
+  -moz-border-end: 1px solid rgba(0,0,0,0.2);
+  box-shadow: 1px 0 0 rgba(128,128,128,0.15);
+}
+
+.theme-dark .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
+.theme-dark .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
+  box-shadow: -1px 0 0 rgba(128,128,128,0.15);
+}
+
+.theme-light .requests-menu-header:not(:last-child),
+.theme-light .requests-menu-subitem:not(:last-child) {
+  -moz-border-end: 1px solid rgba(128,128,128,0.25);
+  box-shadow: 1px 0 0 transparent;
+}
+
+.theme-light .requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
+.theme-light .requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
+  box-shadow: -1px 0 0 transparent;
+}
+
+.requests-menu-header-button {
+  -moz-appearance: none;
+  background: none;
+  min-width: 1px;
+  min-height: 24px;
+  margin: 0;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-weight: inherit !important;
+  transition: background-color 0.1s ease-in-out;
+}
+
+.requests-menu-header-button:hover {
+  background: rgba(0,0,0,0.10);
+}
+
+.requests-menu-header-button:hover:active {
+  background: rgba(0,0,0,0.25);
+}
+
+.requests-menu-header-button:not(:active)[sorted] {
+  background: rgba(0,0,0,0.15);
+}
+
+.requests-menu-header-button:not(:active)[sorted=ascending] {
+  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+}
+
+.requests-menu-header-button:not(:active)[sorted=descending] {
+  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+
+/* Network requests table: specific column dimensions */
+
+.requests-menu-status-and-method {
+  width: 12em;
+}
+
+.requests-menu-status {
+  width: 20px;
+  height: 10px;
+}
+
+.requests-menu-method {
+  text-align: center;
+  font-weight: 600;
+}
+
+.requests-menu-icon-and-file {
+  width: 20vw;
+  min-width: 4em;
+}
+
+.requests-menu-icon {
+  background: #fff;
+  width: calc(1em + 4px);
+  height: calc(1em + 4px);
+  margin: -4px 0px;
+  -moz-margin-end: 4px;
+}
+
+.theme-dark .requests-menu-icon {
+  outline: 1px solid rgba(0,0,0,0.2);
+}
+
+.theme-light .requests-menu-icon {
+  outline: 1px solid rgba(128,128,128,0.25);
+}
+
+.requests-menu-file {
+  text-align: start;
+}
+
+.requests-menu-security-and-domain {
+  width: 14vw;
+  min-width: 10em;
+}
+
+.requests-security-state-icon {
+  -moz-margin-end: 4px;
+  -moz-image-region:rect(0px, 16px, 16px, 0px);
+}
+
+.requests-security-state-icon:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+.requests-security-state-icon:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+.security-state-insecure {
+  list-style-image: url(chrome://browser/skin/identity-icons-generic.png);
+}
+
+.security-state-secure {
+  cursor: pointer;
+  list-style-image: url(chrome://browser/skin/identity-icons-https.png);
+}
+
+.security-state-weak {
+  cursor: pointer;
+  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png);
+}
+
+.security-state-broken {
+  cursor: pointer;
+  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png);
+}
+
+.requests-menu-type {
+  text-align: center;
+  width: 4em;
+}
+
+.requests-menu-size {
+  text-align: center;
+  width: 8em;
+}
+
+.requests-menu-transferred {
+  text-align: center;
+  width: 8em;
+}
+
+/* Network requests table: status codes */
+
+box.requests-menu-status {
+  background: #fff;
+  width: 10px;
+  -moz-margin-start: 5px;
+  -moz-margin-end: 5px;
+  border-radius: 10px;
+  transition: box-shadow 0.5s ease-in-out;
+}
+
+label.requests-menu-status-code {
+  -moz-margin-start: 3px !important;
+  width: 3em;
+  -moz-margin-end: -3em !important;
+}
+
+.theme-dark box.requests-menu-status:not([code]) {
+  background-color: rgba(95, 115, 135, 1); /* dark grey */
+}
+
+.theme-light box.requests-menu-status:not([code]) {
+  background-color: rgba(143, 161, 178, 1); /* grey */
+}
+
+.theme-dark box.requests-menu-status[code="cached"] {
+  border: 2px solid rgba(95, 115, 135, 1); /* dark grey */
+  background-color: transparent;  
+}
+
+.theme-light box.requests-menu-status[code="cached"] {
+  border: 2px solid rgba(143, 161, 178, 1); /* grey */
+  background-color: transparent;
+}
+
+.theme-dark box.requests-menu-status[code^="1"] {
+  background-color: rgba(70, 175, 227, 1); /* light blue */
+}
+
+.theme-light box.requests-menu-status[code^="1"] {
+  background-color: rgba(0, 136, 204, 1); /* light blue */
+}
+
+.theme-dark box.requests-menu-status[code^="2"] {
+  background-color: rgba(112, 191, 83, 1); /* green */
+}
+
+.theme-light box.requests-menu-status[code^="2"] {
+  background-color: rgba(44, 187, 15, 1); /* green */
+}
+
+/* 3xx are triangles */
+.theme-dark box.requests-menu-status[code^="3"] {
+  background-color: transparent;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */
+  border-radius: 0;
+}
+
+.theme-light box.requests-menu-status[code^="3"] {
+  background-color: transparent;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */
+  border-radius: 0;
+}
+
+/* 4xx and 5xx are squares - error codes */
+.theme-dark box.requests-menu-status[code^="4"] {
+  background-color: rgba(235, 83, 104, 1); /* red */
+  border-radius: 0; /* squares */
+}
+
+.theme-light box.requests-menu-status[code^="4"] {
+  background-color: rgba(237, 38, 85, 1); /* red */
+  border-radius: 0; /* squares */
+}
+
+.theme-dark box.requests-menu-status[code^="5"] {
+  background-color: rgba(223, 128, 255, 1); /* pink? */
+  border-radius: 0;
+  transform: rotate(45deg);
+}
+
+.theme-light box.requests-menu-status[code^="5"] {
+  background-color: rgba(184, 46, 229, 1); /* pink! */
+  border-radius: 0;
+  transform: rotate(45deg);
+}
+
+/* Network requests table: waterfall header */
+
+#requests-menu-waterfall-label {
+  -moz-padding-start: 8px;
+  -moz-padding-end: 8px;
+}
+
+.requests-menu-timings-division {
+  width: 100px;
+  padding-top: 2px;
+  -moz-padding-start: 4px;
+  font-size: 75%;
+  pointer-events: none;
+}
+
+.requests-menu-timings-division:not(:first-child) {
+  -moz-border-start: 1px dotted;
+  -moz-margin-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[division-scale=millisecond] {
+  -moz-border-start-color: var(--theme-selection-color) !important;
+}
+
+.theme-light .requests-menu-timings-division[division-scale=millisecond] {
+  -moz-border-start-color: var(--theme-body-color-alt) !important;
+}
+
+.theme-dark .requests-menu-timings-division[division-scale=second] {
+  -moz-border-start-color: var(--theme-selection-color) !important;
+  font-weight: 600;
+}
+
+.theme-light .requests-menu-timings-division[division-scale=second] {
+  -moz-border-start-color: var(--theme-body-color-alt) !important;
+  font-weight: 600;
+}
+
+.theme-dark .requests-menu-timings-division[division-scale=minute] {
+  -moz-border-start-color: var(--theme-selection-color) !important;
+  font-weight: 600;
+}
+
+.theme-light .requests-menu-timings-division[division-scale=minute] {
+  -moz-border-start-color: var(--theme-body-color-alt) !important;
+  font-weight: 600;
+}
+
+/* Network requests table: waterfall items */
+
+.requests-menu-subitem.requests-menu-waterfall {
+  -moz-padding-start: 0px;
+  -moz-padding-end: 4px;
+  /* Background created on a <canvas> in js. */
+  /* @see browser/devtools/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 {
+  -moz-padding-start: 4px;
+  font-size: 85%;
+  font-weight: 600;
+}
+
+.requests-menu-timings-box {
+  height: 9px;
+}
+
+.requests-menu-timings-box.blocked {
+  background-color: rgba(235, 83, 104, 0.8); /* red */
+}
+
+.requests-menu-timings-box.dns {
+  background-color: rgba(223, 128, 255, 0.8); /* pink */
+}
+
+.requests-menu-timings-box.connect {
+  background-color: rgba(217, 102, 41, 0.8); /* orange */
+}
+
+/* Use custom colors for dark and light theme on remaining timing types. */
+.theme-dark .requests-menu-timings-box.send {
+  background-color: rgba(70, 175, 227, 0.8); /* light blue */
+}
+
+.theme-light .requests-menu-timings-box.send {
+  background-color: rgba(0, 136, 204, 0.8); /* blue */
+}
+
+.theme-dark .requests-menu-timings-box.wait {
+  background-color: rgba(94, 136, 176, 0.8); /* blue grey */
+}
+
+.theme-light .requests-menu-timings-box.wait {
+  background-color: rgba(95, 136, 176, 0.8); /* blue grey */
+}
+
+.theme-dark .requests-menu-timings-box.receive {
+  background-color: rgba(112, 191, 83, 0.8); /* green */
+}
+
+.theme-light .requests-menu-timings-box.receive {
+  background-color: rgba(44, 187, 15, 0.8); /* green */
+}
+
+/* SideMenuWidget */
+
+.side-menu-widget-item-contents {
+  padding: 0px;
+}
+
+.theme-dark .side-menu-widget-item:not(.selected)[odd] {
+  background: rgba(255,255,255,0.05);
+}
+
+.theme-light .side-menu-widget-item:not(.selected)[odd] {
+  background: rgba(128,128,128,0.05);
+}
+
+/* Network request details */
+
+#details-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border-color: transparent;
+  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#details-pane-toggle > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#details-pane-toggle[pane-collapsed] {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
+}
+
+#details-pane-toggle:active {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 1.25dppx) {
+  #details-pane-toggle {
+    list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png");
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #details-pane-toggle[pane-collapsed] {
+    list-style-image: url("chrome://browser/skin/devtools/debugger-expand@2x.png");
+  }
+
+  #details-pane-toggle:active {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+/* Network request details tabpanels */
+
+.theme-dark .tabpanel-content {
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-selection-color);
+}
+
+/* Summary tabpanel */
+
+.tabpanel-summary-container {
+  padding: 1px;
+}
+
+.tabpanel-summary-label {
+  -moz-padding-start: 4px;
+  -moz-padding-end: 3px;
+  font-weight: 600;
+}
+
+.tabpanel-summary-value {
+  color: inherit;
+  -moz-padding-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;
+  -moz-margin-end: 6px;
+}
+
+#toggle-raw-headers {
+  margin-top: -10px;
+  -moz-margin-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;
+}
+
+/* Security tabpanel */
+.security-info-section {
+  -moz-padding-start: 1em;
+}
+
+#security-tabpanel {
+  overflow: auto;
+}
+
+.security-warning-icon {
+  background-image: url(alerticon-warning.png);
+  background-size: 13px 12px;
+  -moz-margin-start: 5px;
+  vertical-align: top;
+  width: 13px;
+  height: 12px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .security-warning-icon {
+    background-image: url(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;
+}
+
+/* Footer */
+
+.theme-dark #requests-menu-footer {
+  border-top: 1px solid rgba(0,0,0,0.2);
+  box-shadow: 0 1px 0 rgba(128,128,128,0.15) inset;
+  background-color: var(--theme-toolbar-background);
+}
+
+.theme-light #requests-menu-footer {
+  border-top: 1px solid rgba(128,128,128,0.25);
+  box-shadow: 0 1px 0 transparent inset;
+  background-color: var(--theme-toolbar-background);
+}
+
+.requests-menu-footer-button,
+.requests-menu-footer-label {
+  min-width: 1em;
+  margin: 0;
+  border: none;
+  padding: 2px 1vw;
+}
+
+.theme-dark .requests-menu-footer-button,
+.theme-dark .requests-menu-footer-label {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .requests-menu-footer-button,
+.theme-light .requests-menu-footer-label {
+  color: var(--theme-body-color);
+}
+
+.requests-menu-footer-spacer {
+  min-width: 2px;
+}
+
+.theme-dark .requests-menu-footer-spacer:not(:first-child),
+.theme-dark .requests-menu-footer-button:not(:first-child) {
+  -moz-border-start: 1px solid rgba(128,128,128,0.15);
+  box-shadow: -1px 0 0 rgba(0,0,0,0.2);
+}
+
+.theme-light .requests-menu-footer-spacer:not(:first-child),
+.theme-light .requests-menu-footer-button:not(:first-child) {
+  -moz-border-start: 1px solid transparent;
+  box-shadow: -1px 0 0 rgba(128,128,128,0.25);
+}
+
+.requests-menu-footer-button {
+  -moz-appearance: none;
+  background: rgba(0,0,0,0.025);
+}
+
+.requests-menu-footer-button:hover {
+  background: rgba(0,0,0,0.10);
+}
+
+.theme-dark .requests-menu-footer-button:hover:active {
+  background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */
+}
+
+.theme-light .requests-menu-footer-button:hover:active {
+  background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */
+}
+
+.theme-dark .requests-menu-footer-button:not(:active)[checked] {
+  background-color: rgba(29,79,115,1); /* Select Highlight Blue */
+  color: rgba(245,247,250,1); /* Light foreground text */
+}
+
+.theme-light .requests-menu-footer-button:not(:active)[checked] {
+  background-color: rgba(76,158,217,1); /* Select Highlight Blue */
+  color: rgba(245,247,250,1); /* Light foreground text */
+}
+
+.requests-menu-footer-label {
+  padding-top: 3px;
+  font-weight: 600;
+}
+
+#requests-menu-filter-freetext-text {
+  transition-property: max-width, -moz-padding-end, -moz-padding-start;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+
+#requests-menu-filter-freetext-text:not([focused]):not([filled]) > .textbox-input-box {
+  overflow: hidden;
+}
+
+#requests-menu-filter-freetext-text:not([focused]):not([filled]) {
+  max-width: 20px !important;
+  -moz-padding-end: 5px;
+  -moz-padding-start: 22px;
+  background-position: 8px center, top left, top left;
+}
+
+#requests-menu-filter-freetext-text[focused],
+#requests-menu-filter-freetext-text[filled] {
+  max-width: 200px !important;
+}
+
+/* Performance analysis buttons */
+
+#requests-menu-network-summary-button {
+  background: none;
+  box-shadow: none;
+  border-color: transparent;
+  list-style-image: url(profiler-stopwatch.svg);
+  -moz-padding-end: 0;
+  cursor: pointer;
+}
+
+#requests-menu-network-summary-label {
+  -moz-padding-start: 0;
+  cursor: pointer;
+}
+
+#requests-menu-network-summary-label:hover {
+  text-decoration: underline;
+}
+
+/* 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;
+  -moz-border-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-toolbar-background);
+}
+
+#network-statistics-charts .pie-chart-container {
+  -moz-margin-start: 3vw;
+  -moz-margin-end: 1vw;
+}
+
+#network-statistics-charts .table-chart-container {
+  -moz-margin-start: 1vw;
+  -moz-margin-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;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #requests-menu-toolbar {
+    height: 22px;
+  }
+
+  .requests-menu-header-button {
+    min-height: 20px;
+  }
+
+  #details-pane {
+    margin: 0 !important;
+    /* To prevent all the margin hacks to hide the sidebar. */
+  }
+
+  .requests-menu-status-and-method {
+    width: 16vw;
+  }
+
+  .requests-menu-icon-and-file {
+    width: 30vw;
+  }
+
+  .requests-menu-security-and-domain {
+    width: 30vw;
+  }
+
+  .requests-menu-type {
+    width: 8vw;
+  }
+
+  .requests-menu-size {
+    width: 16vw;
+    border-width: 0 !important;
+    box-shadow: none !important;
+    /* The "Timeline" header is not visible anymore, and thus the
+       right border and box-shadow of "Size" column should be hidden. */
+  }
+}
+
+#headers-summary-resend {
+  padding: 4px;
+}
+
+#toggle-raw-headers {
+  padding: 4px;
+}
+
+.requests-menu-status-and-method {
+  width: 9em;
+}
+
+.requests-menu-security-and-domain {
+  width: 16vw;
+}
+
+.requests-menu-size {
+  width: 6em;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  .requests-menu-header-button {
+    font-size: 85%;
+  }
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/newtab-inverted.png b/arc-firefox-theme/chrome/browser/devtools/newtab-inverted.png
new file mode 100644
index 0000000..2d29c2c
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/newtab-inverted.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/newtab-inverted@2x.png b/arc-firefox-theme/chrome/browser/devtools/newtab-inverted@2x.png
new file mode 100644
index 0000000..6feba0e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/newtab-inverted@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/newtab.png b/arc-firefox-theme/chrome/browser/devtools/newtab.png
new file mode 100644
index 0000000..32e42b0
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/newtab.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/newtab@2x.png b/arc-firefox-theme/chrome/browser/devtools/newtab@2x.png
new file mode 100644
index 0000000..ffde5f0
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/newtab@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/noise.png b/arc-firefox-theme/chrome/browser/devtools/noise.png
new file mode 100644
index 0000000..01d340a
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/noise.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg
new file mode 100644
index 0000000..3004e04
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px">

+<style>

+  g {

+    fill: #babec3;

+  }

+  g:not(:target) {

+    display: none;

+  }

+</style>

+<g id="overview-markers">

+  <rect x="0px" y="3px" width="5px" height="2.5px" rx="1" ry="1"/>

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

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

+  <rect x="10px" y="7px" width="6px" height="2.5px" rx="1" ry="1"/>

+  <rect x="4px" y="11px" width="5px" height="2.5px" rx="1" ry="1"/>

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

+</g>

+<g id="overview-frames">

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

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

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

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

+</g>

+<g id="details-waterfall">

+  <rect x="0px" y="3px" width="9px" height="2.5px" rx="1" ry="1"/>

+  <rect x="5px" y="7px" width="8px" height="2.5px" rx="1" ry="1"/>

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

+</g>

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

+  <rect x="0px" y="3px" width="16px" height="2px" rx="1" ry="1"/>

+  <rect x="0px" y="6px" width="8px" height="2px" rx="1" ry="1"/>

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

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

+</g>

+<g id="details-flamegraph">

+  <rect x="0px" y="3px" width="16px" height="2px" rx="1" ry="1"/>

+  <rect x="0px" y="6px" width="8px" height="2px" rx="1" ry="1"/>

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

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

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

+</g>

+</svg>

diff --git a/arc-firefox-theme/chrome/browser/devtools/performance.css b/arc-firefox-theme/chrome/browser/devtools/performance.css
new file mode 100644
index 0000000..50c375c
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/performance.css
@@ -0,0 +1,695 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* 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);
+  --focus-cell-border-color: rgba(255,255,255,0.5);
+  --row-alt-background-color: rgba(29,79,115,0.15);
+  --row-hover-background-color: rgba(29,79,115,0.25);
+}
+
+.theme-light {
+  --cell-border-color: rgba(0,0,0,0.15);
+  --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);
+}
+
+/* Toolbar */
+
+#performance-toolbar > tabs,
+#performance-toolbar {
+  -moz-border-end-color: var(--theme-splitter-color);
+}
+
+#performance-toolbar-control-other {
+  -moz-padding-end: 5px;
+}
+
+#performance-toolbar-controls-detail-views > toolbarbutton {
+  min-width: 0;
+}
+
+#performance-toolbar-controls-detail-views .toolbarbutton-text {
+  -moz-padding-start: 4px;
+  -moz-padding-end: 8px;
+}
+
+#filter-button {
+  list-style-image: url(timeline-filter.svg#filter);
+  min-width: 24px;
+}
+
+#filter-button[disabled] {
+  list-style-image: url(timeline-filter.svg#filter-disabled);
+}
+
+#filter-button[open] {
+  list-style-image: url(timeline-filter.svg#filter-open);
+}
+
+#performance-filter-menupopup > menuitem:before {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: 0 8px;
+  border-radius: 1px;
+}
+
+/* Recording Notice */
+
+#performance-view .notice-container {
+  font-size: 120%;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
+  padding-bottom: 20vh;
+}
+
+#performance-view .notice-container button {
+  min-width: 30px;
+  min-height: 28px;
+  margin: 0;
+}
+
+#performance-view .notice-container vbox {
+  text-align: center;
+}
+
+.console-profile-command {
+  font-family: monospace;
+  margin: 3px 2px;
+}
+
+#performance-view .realtime-message {
+  opacity: 0.5;
+  display: block;
+}
+
+#performance-view toolbarbutton.record-button {
+  padding: 5px;
+}
+
+#performance-view toolbarbutton.record-button[checked],
+#performance-view toolbarbutton.record-button[checked] {
+  color: var(--theme-selection-color);
+  background: var(--theme-selection-background);
+}
+
+#performance-view .realtime-disabled-message,
+#performance-view .realtime-disabled-on-e10s-message {
+  display: none;
+  /* This label does not want to wrap naturally (based on some combination of
+     it's parents and flex).  Quick and dirty way to force it to wrap -> don't
+     let it get bigger than half the screen size */
+  max-width: 60vw;
+}
+
+#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message {
+  display: block;
+  opacity: 0.5;
+
+}
+#performance-view[e10s="unsupported"] .realtime-disabled-message {
+  display: block;
+  opacity: 0.5;
+}
+
+#details-pane-container .buffer-status-message,
+#details-pane-container .buffer-status-message-full {
+  display: none;
+}
+
+#details-pane-container[buffer-status="in-progress"] .buffer-status-message {
+  display: block;
+  opacity: 0.5;
+}
+
+#details-pane-container[buffer-status="full"] .buffer-status-message {
+  display: block;
+  color: var(--theme-highlight-red);
+  font-weight: bold;
+  opacity: 1;
+}
+
+#details-pane-container[buffer-status="full"] .buffer-status-message-full {
+  display: block;
+}
+
+/* Overview Panel */
+
+#main-record-button {
+  list-style-image: url(profiler-stopwatch.svg);
+}
+
+#main-record-button[checked] {
+  list-style-image: url(profiler-stopwatch-checked.svg);
+}
+
+#main-record-button[locked] {
+  pointer-events: none;
+}
+
+#main-record-button .button-icon {
+  margin: 0;
+}
+
+#main-record-button .button-text {
+  display: none;
+}
+
+/* Details Panel */
+
+#select-waterfall-view {
+  list-style-image: url(performance-icons.svg#details-waterfall);
+}
+
+#select-js-calltree-view,
+#select-memory-calltree-view {
+  list-style-image: url(performance-icons.svg#details-call-tree);
+}
+
+#select-js-flamegraph-view,
+#select-memory-flamegraph-view {
+  list-style-image: url(performance-icons.svg#details-flamegraph);
+}
+
+/* Profile call tree */
+
+.call-tree-cells-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+  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"] {
+  width: 6vw;
+}
+
+.call-tree-header[type="percentage"],
+.call-tree-cell[type="percentage"],
+.call-tree-header[type="self-percentage"],
+.call-tree-cell[type="self-percentage"] {
+  width: 5vw;
+}
+
+.call-tree-header[type="samples"],
+.call-tree-cell[type="samples"] {
+  width: 4.5vw;
+}
+
+.call-tree-header[type="allocations"],
+.call-tree-cell[type="allocations"],
+.call-tree-header[type="self-allocations"],
+.call-tree-cell[type="self-allocations"] {
+  width: 9vw;
+}
+
+.call-tree-header[type="function"],
+.call-tree-cell[type="function"] {
+  -moz-box-flex: 1;
+}
+
+.call-tree-header,
+.call-tree-cell {
+  -moz-box-align: center;
+  overflow: hidden;
+  padding: 1px 4px;
+  color: var(--theme-body-color);
+  -moz-border-end-color: var(--cell-border-color);
+}
+
+.call-tree-header:not(:last-child),
+.call-tree-cell:not(:last-child) {
+  -moz-border-end-width: 1px;
+  -moz-border-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:last-child:not(:focus) {
+  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 label {
+  color: var(--theme-selection-color) !important;
+}
+
+.call-tree-item:focus .call-tree-cell {
+  -moz-border-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 {
+  -moz-margin-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 {
+  -moz-margin-start: 8px !important;
+  font-size: 90%;
+  color: var(--theme-content-color2);
+}
+
+.call-tree-zoom {
+  -moz-appearance: none;
+  background-color: transparent;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 11px;
+  min-width: 11px;
+  -moz-margin-start: 8px !important;
+  cursor: zoom-in;
+  opacity: 0;
+}
+
+.theme-dark .call-tree-zoom {
+  background-image: url(magnifying-glass.png);
+}
+
+.theme-light .call-tree-zoom {
+  background-image: url(magnifying-glass-light.png);
+}
+
+@media (min-resolution: 1.25dppx) {
+  .theme-dark .call-tree-zoom {
+    background-image: url(magnifying-glass@2x.png);
+  }
+
+  .theme-light .call-tree-zoom {
+    background-image: url(magnifying-glass-light@2x.png);
+  }
+}
+
+.call-tree-item:hover .call-tree-zoom {
+  transition: opacity 0.3s ease-in;
+  opacity: 1;
+}
+
+.call-tree-item:hover .call-tree-zoom:hover {
+  opacity: 0;
+}
+
+.call-tree-category {
+  transform: scale(0.75);
+  transform-origin: center right;
+}
+
+/**
+ * Details Waterfall Styles
+ */
+
+.waterfall-list-contents {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.waterfall-header-contents {
+  overflow-x: hidden;
+}
+
+.waterfall-background-ticks {
+  /* Background created on a <canvas> in js. */
+  /* @see browser/devtools/timeline/widgets/waterfall.js */
+  background-image: -moz-element(#waterfall-background);
+  background-repeat: repeat-y;
+  background-position: -1px center;
+}
+
+.waterfall-marker-container[is-spacer] {
+  pointer-events: none;
+}
+
+.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
+  background-color: rgba(255,255,255,0.03);
+}
+
+.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
+  background-color: rgba(128,128,128,0.03);
+}
+
+.theme-dark .waterfall-marker-container:hover {
+  background-color: rgba(255,255,255,0.1) !important;
+}
+
+.theme-light .waterfall-marker-container:hover {
+  background-color: rgba(128,128,128,0.1) !important;
+}
+
+.waterfall-marker-item {
+  overflow: hidden;
+}
+
+.waterfall-sidebar {
+  -moz-border-end: 1px solid var(--theme-splitter-color);
+}
+
+.waterfall-marker-container:hover > .waterfall-sidebar {
+  background-color: transparent;
+}
+
+.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) {
+  -moz-margin-start: -100px !important; /* Don't affect layout. */
+}
+
+.waterfall-marker-bullet {
+  width: 8px;
+  height: 8px;
+  -moz-margin-start: 8px;
+  -moz-margin-end: 6px;
+  border-radius: 1px;
+}
+
+.waterfall-marker-name {
+  font-size: 95%;
+  padding-bottom: 1px !important;
+}
+
+.waterfall-marker-bar {
+  height: 9px;
+  transform-origin: left center;
+  border-radius: 1px;
+}
+
+.waterfall-marker-container.selected > .waterfall-sidebar,
+.waterfall-marker-container.selected > .waterfall-marker-item {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+#waterfall-details {
+  -moz-padding-start: 8px;
+  -moz-padding-end: 8px;
+  padding-top: 2vh;
+  overflow: auto;
+  min-width: 50px;
+}
+
+.marker-details-bullet {
+  width: 8px;
+  height: 8px;
+  border-radius: 1px;
+}
+
+menuitem.marker-color-graphs-purple:before,
+.marker-color-graphs-purple {
+  background-color: var(--theme-graphs-purple);
+}
+menuitem.marker-color-graphs-grey:before,
+.marker-color-graphs-grey{
+  background-color: var(--theme-graphs-grey);
+}
+menuitem.marker-color-graphs-green:before,
+.marker-color-graphs-green {
+  background-color: var(--theme-graphs-green);
+}
+menuitem.marker-color-graphs-yellow:before,
+.marker-color-graphs-yellow {
+  background-color: var(--theme-graphs-yellow);
+}
+menuitem.marker-color-graphs-red:before,
+.marker-color-graphs-red {
+  background-color: var(--theme-graphs-red);
+}
+menuitem.marker-color-graphs-blue:before,
+.marker-color-graphs-blue {
+  background-color: var(--theme-graphs-blue);
+}
+
+#waterfall-details > * {
+  padding-top: 3px;
+}
+
+.marker-details-labelname {
+  -moz-padding-end: 4px;
+}
+
+.marker-details-type {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.marker-details-duration {
+  font-weight: bold;
+}
+
+/* Recording items */
+
+.recording-item {
+  padding: 4px;
+}
+
+.recording-item-title {
+  font-size: 110%;
+}
+
+.recording-item-footer {
+  padding-top: 4px;
+  font-size: 90%;
+}
+
+.recording-item-save {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.recording-item-duration,
+.recording-item-save {
+  color: var(--theme-body-color-alt);
+}
+
+#recordings-list .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/**
+ * JIT View
+ */
+
+#jit-optimizations-view {
+  width: 350px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-width: 200px;
+}
+
+/* override default styles for tree widget */
+#jit-optimizations-view .tree-widget-empty-text {
+  font-size: inherit;
+  padding: 0px;
+  margin: 8px;
+}
+
+#jit-optimizations-view:not(.empty) .tree-widget-empty-text {
+  display: none;
+}
+
+#jit-optimizations-toolbar {
+  height: 18px;
+  min-height: 0px; /* override .devtools-toolbar min-height */
+}
+
+.jit-optimizations-title {
+  margin: 0px 4px;
+  font-weight: 600;
+}
+
+#jit-optimizations-raw-view {
+  font-size: 90%;
+}
+
+/* override default .tree-widget-item line-height */
+#jit-optimizations-raw-view .tree-widget-item {
+  line-height: 20px !important;
+  display: block;
+  overflow: hidden;
+}
+
+#jit-optimizations-raw-view .tree-widget-item[level="1"] {
+  font-weight: 600;
+}
+
+#jit-optimizations-view .opt-outcome::before {
+  content: "→";
+  margin: 4px 0px;
+  color: var(--theme-body-color);
+}
+#jit-optimizations-view .theme-selected .opt-outcome::before {
+  color: var(--theme-selection-color);
+}
+
+#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=success] {
+  color: var(--theme-highlight-green);
+}
+#jit-optimizations-view .tree-widget-item:not(.theme-selected) .opt-outcome[outcome=failure] {
+  color: var(--theme-highlight-red);
+}
+#jit-optimizations-view .tree-widget-container {
+  -moz-margin-end: 0px;
+}
+#jit-optimizations-view .tree-widget-container > li,
+#jit-optimizations-view .tree-widget-children > li {
+  overflow: hidden;
+}
+
+.opt-line::before {
+  content: ":";
+  color: var(--theme-highlight-orange);
+}
+.theme-selected .opt-line::before {
+  color: var(--theme-selection-color);
+}
+.opt-line.header-line::before {
+  color: var(--theme-body-color);
+}
+#jit-optimizations-view.empty .opt-line.header-line::before {
+  display: none;
+}
+
+.opt-url {
+  -moz-margin-start: 4px !important;
+}
+.opt-url:hover {
+  text-decoration: underline;
+}
+.opt-url.debugger-link {
+  cursor: pointer;
+}
+
+#jit-optimizations-view .opt-icon::before {
+  content: "";
+  background-image: url(chrome://browser/skin/devtools/webconsole.png);
+  background-repeat: no-repeat;
+  background-size: 48px 40px;
+  margin: 5px 6px 0 0;
+  width: 8px;
+  height: 8px;
+  max-height: 8px;
+  display: inline-block;
+}
+
+#jit-optimizations-view .opt-icon[severity=warning]::before {
+  background-position: -16px -16px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  #jit-optimizations-view .opt-icon::before {
+    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
+  }
+}
+
+/**
+ * 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://browser/skin/devtools/webconsole.png);
+  background-repeat: no-repeat;
+  background-size: 48px 40px;
+  margin: 2px 5px 0 0;
+  width: 8px;
+  height: 8px;
+  max-height: 8px;
+  display: inline-block;
+  background-position: -16px -16px;
+}
+@media (min-resolution: 1.25dppx) {
+  menuitem.experimental-option::before {
+    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
+  }
+}
+#performance-options-menupopup:not(.experimental-enabled) .experimental-option,
+#performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
+  display: none;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/power.svg b/arc-firefox-theme/chrome/browser/devtools/power.svg
new file mode 100644
index 0000000..f675e30
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/power.svg
@@ -0,0 +1,14 @@
+<!--
+Logo from raphaeljs.com, MIT License
+
+Copyright © 2008 Dmitry Baranovskiy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+-->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="#babec3" d="m10.89891,2.50043c-0.49827,-0.24134 -1.09841,-0.03411 -1.34129,0.46514c-0.24185,0.49928 -0.03311,1.09942 0.46517,1.34128c1.56306,0.76071 2.64193,2.36094 2.64092,4.21555c-0.00501,2.58626 -2.09749,4.6787 -4.68322,4.68321c-2.58623,-0.005 -4.67869,-2.09746 -4.68371,-4.68321c-0.001,-1.85561 1.07834,-3.45731 2.64294,-4.21654c0.49928,-0.24185 0.7065,-0.84201 0.46514,-1.34129c-0.24185,-0.49825 -0.84098,-0.70697 -1.34029,-0.46513c-2.23396,1.08135 -3.77446,3.37351 -3.77545,6.02296c0.00099,3.69518 2.99518,6.68989 6.69138,6.69088c3.6957,-0.00099 6.69037,-2.9957 6.69089,-6.69088c-0.00102,-2.64846 -1.53948,-4.9391 -3.77247,-6.02197zm-2.91842,4.9346c0.55398,0 1.00309,-0.44861 1.00309,-1.00357l0,-4.68373c0,-0.55446 -0.44911,-1.00309 -1.00309,-1.00309c-0.555,0 -1.00358,0.44911 -1.00358,1.00309l0,4.68321c0,0.55499 0.44858,1.00409 1.00358,1.00409z" stroke-width="0" fill="#babec3"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg
new file mode 100644
index 0000000..f682354
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#3BACE5" fill-rule="evenodd">
+<path d="m8,1c-3.9,0-7,3.1-7,7s3.1,7 7,7c3.9,0 7-3.1 7-7s-3.1-7-7-7zm-.1,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5s5,2.2 5,5c0,2.8-2.2,5-5,5z"/>
+<path d="m8,6.9c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/>
+<path d="m11.3,4.6l-3.9,2.5 1.5,1.4 2.4-3.9z"/>
+<path opacity=".4" d="m4.6,10c.7,1.2 2,2 3.4,2 1.5,0 2.7-.8 3.4-2h-6.8z"/>
+<g opacity=".3">
+<path d="m7.1,5.1l-.6-1.3-.9,.4 .7,1.3c.2-.1 .5-.3 .8-.4z"/>
+<path d="m9.8,5.6l.7-1.4-.9-.4-.7,1.3c.3,.2 .6,.3 .9,.5z"/>
+<path d="m10.8,7c.1,.3 .2,.7 .2,1h2v-1h-2.2z"/>
+<path d="m5,8c0-.3 .1-.7 .2-1h-2.2l-.1,1h2.1z"/>
+</g>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg
new file mode 100644
index 0000000..e9fe8f9
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#babec3" fill-rule="evenodd">
+<path d="m8,1c-3.9,0-7,3.1-7,7s3.1,7 7,7c3.9,0 7-3.1 7-7s-3.1-7-7-7zm-.1,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5s5,2.2 5,5c0,2.8-2.2,5-5,5z"/>
+<path d="m8,6.9c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/>
+<path d="m11.3,4.6l-3.9,2.5 1.5,1.4 2.4-3.9z"/>
+<path opacity=".4" d="m4.6,10c.7,1.2 2,2 3.4,2 1.5,0 2.7-.8 3.4-2h-6.8z"/>
+<g opacity=".3">
+<path d="m7.1,5.1l-.6-1.3-.9,.4 .7,1.3c.2-.1 .5-.3 .8-.4z"/>
+<path d="m9.8,5.6l.7-1.4-.9-.4-.7,1.3c.3,.2 .6,.3 .9,.5z"/>
+<path d="m10.8,7c.1,.3 .2,.7 .2,1h2v-1h-2.2z"/>
+<path d="m5,8c0-.3 .1-.7 .2-1h-2.2l-.1,1h2.1z"/>
+</g>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/profiler.css b/arc-firefox-theme/chrome/browser/devtools/profiler.css
new file mode 100644
index 0000000..8f127cd
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/profiler.css
@@ -0,0 +1,400 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* 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);
+  --focus-cell-border-color: rgba(0,0,0,0.3);
+  --row-alt-background-color: rgba(29,79,115,0.15);
+  --row-hover-background-color: rgba(29,79,115,0.25);
+  --tab-hover-background-color: rgba(0,0,0,0.3);
+}
+
+.theme-light {
+  --cell-border-color: rgba(0,0,0,0.15);
+  --focus-cell-border-color: rgba(255,255,255,0.5);
+  --row-alt-background-color: rgba(76,158,217,0.1);
+  --row-hover-background-color: rgba(76,158,217,0.2);
+  --tab-hover-background-color: rgba(255,255,255,0.8);
+}
+
+/* Reload and waiting notices */
+
+.notice-container {
+  margin-top: -50vh;
+  font-size: 120%;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);
+}
+
+#empty-notice button,
+#recording-notice button {
+  min-width: 30px;
+  min-height: 28px;
+  margin: 0;
+  list-style-image: url(profiler-stopwatch.svg);
+}
+
+#empty-notice button[checked],
+#recording-notice button[checked] {
+  list-style-image: url(profiler-stopwatch-checked.svg);
+}
+
+#empty-notice button .button-text,
+#recording-notice button .button-text {
+  display: none;
+}
+
+.theme-dark #loading-notice {
+  font-size: 250%;
+  color: rgba(255,255,255,0.2);
+}
+
+.theme-light #loading-notice {
+  font-size: 250%;
+  color: rgba(0,0,0,0.2);
+}
+
+/* Recordings pane */
+
+#recordings-pane > tabs,
+#recordings-pane .devtools-toolbar {
+  -moz-border-end-width: 1px;
+}
+
+#recordings-pane > tabs,
+#recordings-pane .devtools-toolbar {
+  -moz-border-end-color: var(--theme-splitter-color);
+}
+
+#record-button {
+  list-style-image: url(profiler-stopwatch.svg);
+}
+
+#record-button[checked] {
+  list-style-image: url(profiler-stopwatch-checked.svg);
+}
+
+#record-button[locked] {
+  pointer-events: none;
+}
+
+/* Recording items */
+
+.recording-item {
+  padding: 4px;
+}
+
+.recording-item-title {
+  font-size: 110%;
+}
+
+.recording-item-footer {
+  padding-top: 4px;
+  font-size: 90%;
+}
+
+.recording-item-save {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.recording-item-duration,
+.recording-item-save {
+  color: var(--theme-body-color-alt);
+}
+
+#recordings-list .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Profile pane */
+
+#profile-content tabs {
+  -moz-box-align: stretch;
+  height: 24px;
+  font: inherit;
+}
+
+#profile-content tab {
+  -moz-box-flex: 0;
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  text-shadow: none;
+  transition-duration: 0.25s;
+  transition-timing-function: ease-in-out;
+  transition-property: opacity, transform;
+}
+
+#profile-content tab {
+  color: var(--theme-body-color);
+}
+
+#profile-content tab:not([selected]) {
+  cursor: pointer;
+}
+
+#profile-content tab[covered] {
+  opacity: 0;
+  transform: translateY(100%);
+}
+
+#profile-content tab {
+  -moz-appearance: none;
+  -moz-border-end: 1px solid var(--theme-splitter-color);
+}
+
+#profile-content tab:hover {
+  background-color: var(--tab-hover-background-color);
+}
+
+#profile-content tab[selected] {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+#profile-content tabpanel {
+  -moz-box-orient: vertical;
+  transform: translateZ(1px); /* Make sure the tabpanel appears above the tab */
+}
+
+#profile-newtab-button {
+  -moz-appearance: none;
+  background-color: transparent;
+  background-position: 4px 2px;
+  background-size: 54px 20px;
+  min-width: 26px;
+  margin: 0;
+  border: none;
+  cursor: pointer;
+}
+
+.theme-dark #profile-newtab-button {
+  background-color: rgba(112,191,83,0.2);
+}
+
+.theme-light #profile-newtab-button {
+  background-color: rgba(44,187,15,0.2);
+}
+
+.theme-dark #profile-newtab-button {
+  background-image: url(newtab-inverted.png);
+}
+
+.theme-light #profile-newtab-button {
+  background-image: url(newtab.png);
+}
+
+@media (min-resolution: 1.25dppx) {
+  .theme-dark #profile-newtab-button {
+    background-image: url(newtab-inverted@2x.png);
+  }
+
+  .theme-light #profile-newtab-button {
+    background-image: url(newtab@2x.png);
+  }
+}
+
+#profile-newtab-button:hover {
+  background-position: 40px 2px;
+}
+
+#profile-newtab-button:hover:active {
+  background-position: 22px 2px;
+}
+
+/* Profile call tree */
+
+.call-tree-headers-container {
+  border-top: 1px solid var(--theme-splitter-color);
+}
+
+.call-tree-cells-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+  overflow: auto;
+}
+
+.call-tree-cells-container[categories-hidden] .call-tree-category {
+  display: none;
+}
+
+.call-tree-header[type="duration"],
+.call-tree-cell[type="duration"],
+.call-tree-header[type="self-duration"],
+.call-tree-cell[type="self-duration"] {
+  width: 9em;
+}
+
+.call-tree-header[type="percentage"],
+.call-tree-cell[type="percentage"],
+.call-tree-header[type="self-percentage"],
+.call-tree-cell[type="self-percentage"] {
+  width: 6em;
+}
+
+.call-tree-header[type="samples"],
+.call-tree-cell[type="samples"] {
+  width: 5em;
+}
+
+.call-tree-header[type="function"],
+.call-tree-cell[type="function"] {
+  -moz-box-flex: 1;
+}
+
+.call-tree-header,
+.call-tree-cell {
+  -moz-box-align: center;
+  overflow: hidden;
+  padding: 1px 4px;
+  color: var(--theme-body-color);
+}
+
+.call-tree-header:not(:last-child),
+.call-tree-cell:not(:last-child) {
+  -moz-border-end-width: 1px;
+  -moz-border-end-style: solid;
+}
+
+.call-tree-header,
+.call-tree-cell {
+  -moz-border-end-color: var(--cell-border-color);
+}
+
+.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:last-child:not(:focus) {
+  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 label {
+  color: var(--theme-selection-color) !important;
+}
+
+.call-tree-item:focus .call-tree-cell {
+  -moz-border-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-url {
+  -moz-margin-start: 4px !important;
+  cursor: pointer;
+}
+
+.call-tree-url:hover {
+  text-decoration: underline;
+}
+
+.call-tree-url {
+  color: var(--theme-highlight-blue);
+}
+
+.call-tree-line {
+  color: var(--theme-highlight-orange);
+}
+
+.call-tree-column {
+  color: var(--theme-highlight-orange);
+  opacity: 0.6;
+}
+
+.call-tree-host {
+  -moz-margin-start: 8px !important;
+  font-size: 90%;
+  color: var(--theme-content-color2);
+}
+
+.call-tree-name[value=""],
+.call-tree-url[value=""],
+.call-tree-line[value=""],
+.call-tree-column[value=""],
+.call-tree-host[value=""] {
+  display: none;
+}
+
+.call-tree-zoom {
+  -moz-appearance: none;
+  background-color: transparent;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 11px;
+  min-width: 11px;
+  -moz-margin-start: 8px !important;
+  cursor: zoom-in;
+  opacity: 0;
+}
+
+.theme-dark .call-tree-zoom {
+  background-image: url(magnifying-glass.png);
+}
+
+.theme-light .call-tree-zoom {
+  background-image: url(magnifying-glass-light.png);
+}
+
+@media (min-resolution: 1.25dppx) {
+  .theme-dark .call-tree-zoom {
+    background-image: url(magnifying-glass@2x.png);
+  }
+
+  .theme-light .call-tree-zoom {
+    background-image: url(magnifying-glass-light@2x.png);
+  }
+}
+
+.call-tree-item:hover .call-tree-zoom {
+  transition: opacity 0.3s ease-in;
+  opacity: 1;
+}
+
+.call-tree-item:hover .call-tree-zoom:hover {
+  opacity: 0;
+}
+
+.call-tree-category {
+  transform: scale(0.75);
+  transform-origin: center right;
+}
+
+#profile-content tab label {
+  margin-bottom: 4px;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/projecteditor/projecteditor.css b/arc-firefox-theme/chrome/browser/devtools/projecteditor/projecteditor.css
new file mode 100644
index 0000000..9ea540e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/projecteditor/projecteditor.css
@@ -0,0 +1,188 @@
+/* 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 {
+  color: #18191a;
+}
+
+.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: 2px;
+  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/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer.png b/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer.png
new file mode 100644
index 0000000..7d113f0
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer@2x.png
new file mode 100644
index 0000000..bb3c4bd
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsive-horizontal-resizer@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer.png b/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer.png
new file mode 100644
index 0000000..35b54d6
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer@2x.png
new file mode 100644
index 0000000..9dbf4fe
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsive-se-resizer@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer.png b/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer.png
new file mode 100644
index 0000000..3b4e78c
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer@2x.png
new file mode 100644
index 0000000..cbae606
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsive-vertical-resizer@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-home.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-home.png
new file mode 100644
index 0000000..43379d0
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsiveui-home.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate.png
new file mode 100644
index 0000000..2bacbd2
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate@2x.png
new file mode 100644
index 0000000..eeeb823
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsiveui-rotate@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot.png
new file mode 100644
index 0000000..084220e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot@2x.png
new file mode 100644
index 0000000..927c5cf
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsiveui-screenshot@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch.png
new file mode 100644
index 0000000..9058703
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch@2x.png b/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch@2x.png
new file mode 100644
index 0000000..e464503
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/responsiveui-touch@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/rewind.png b/arc-firefox-theme/chrome/browser/devtools/rewind.png
new file mode 100644
index 0000000..098e256
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/rewind.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png b/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png
new file mode 100644
index 0000000..eaac45d
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/rewind@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css
new file mode 100644
index 0000000..8c2e3d1
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css
@@ -0,0 +1,264 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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;
+}
+
+.ruleview {
+  height: 100%;
+}
+
+.ruleview-rule-source {
+  -moz-padding-start: 5px;
+  text-align: end;
+  float: right;
+  -moz-user-select: none;
+}
+
+.ruleview-rule-source,
+.ruleview-rule-source > label {
+  cursor: pointer;
+}
+
+.ruleview-rule-source[unselectable],
+.ruleview-rule-source[unselectable] > label {
+  cursor: default;
+}
+
+.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;
+  margin-top: 4px;
+}
+
+.ruleview-rule-pseudo-element {
+  padding-left:20px;
+  border-left: solid 10px;
+}
+
+.ruleview-rule,
+#noResults {
+  padding: 2px 4px;
+}
+
+/* User agent styles are not editable, display them differently */
+.ruleview-rule[uneditable=true] {
+  background: var(--theme-tab-toolbar-background);
+}
+
+.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;
+}
+
+#noResults {
+  font: message-box;
+  color: GrayText;
+}
+
+.ruleview-rule + .ruleview-rule {
+  border-top-width: 1px;
+  border-top-style: dotted;
+}
+
+.ruleview-warning {
+  background-image: url(alerticon-warning.png);
+  background-size: 13px 12px;
+  -moz-margin-start: 5px;
+  display: inline-block;
+  vertical-align: top;
+  width: 13px;
+  height: 12px;
+}
+
+
+@media (min-resolution: 1.25dppx) {
+  .ruleview-warning {
+    background-image: url(alerticon-warning@2x.png);
+  }
+}
+
+.ruleview-ruleopen {
+  -moz-padding-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 {
+  display: inline-block;
+}
+
+.ruleview-newproperty {
+  /* (enable checkbox width: 12px) + (expander width: 15px) */
+  -moz-margin-start: 27px;
+}
+
+.ruleview-namecontainer,
+.ruleview-propertyvaluecontainer,
+.ruleview-propertyname,
+.ruleview-propertyvalue {
+  text-decoration: inherit;
+}
+
+.ruleview-computedlist {
+  list-style: none;
+  padding: 0;
+}
+
+.ruleview-computed {
+  -moz-margin-start: 35px;
+}
+
+.ruleview-swatch {
+  cursor: pointer;
+  border-radius: 50%;
+  width: 1em;
+  height: 1em;
+  vertical-align: text-top;
+  -moz-margin-end: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+.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://browser/skin/devtools/cubic-bezier-swatch.png");
+  background-size: 1em;
+}
+
+.ruleview-filterswatch {
+  background: url("chrome://browser/skin/devtools/filter-swatch.svg");
+  background-size: 1em;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .ruleview-bezierswatch {
+    background: url("chrome://browser/skin/devtools/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;
+}
+
+.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-selector {
+  word-wrap: break-word;
+}
+
+.ruleview-selector-separator, .ruleview-selector-unmatched {
+  color: #888;
+}
+
+.ruleview-selectorhighlighter {
+  background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
+  padding-left: 16px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.ruleview-selectorhighlighter:hover {
+  background-position: -32px 0;
+}
+
+.ruleview-selectorhighlighter:active,
+.ruleview-selectorhighlighter.highlighted {
+  background-position: -16px 0;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/scratchpad.css b/arc-firefox-theme/chrome/browser/devtools/scratchpad.css
new file mode 100644
index 0000000..96d6f70
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/scratchpad.css
@@ -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/. */
+
+
+#scratchpad-sidebar > tabs {
+  height: 0;
+  border: none;
+}
+
+#sp-toolbar {
+  border: none;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg
new file mode 100644
index 0000000..77779e8
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg
@@ -0,0 +1,21 @@
+<?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"
+     x="0"
+     y="0"
+     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 type="text/css">
+      .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/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg
new file mode 100644
index 0000000..fc65d21
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg
@@ -0,0 +1,21 @@
+<?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"
+     x="0"
+     y="0"
+     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 type="text/css">
+      .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/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg
new file mode 100644
index 0000000..205b744
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg
@@ -0,0 +1,21 @@
+<?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"
+     x="0"
+     y="0"
+     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 type="text/css">
+      .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/arc-firefox-theme/chrome/browser/devtools/shadereditor.css b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css
new file mode 100644
index 0000000..c63a4c6
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/shadereditor.css
@@ -0,0 +1,123 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);
+}
+
+#reload-notice {
+  font-size: 120%;
+}
+
+#waiting-notice {
+  font-size: 110%;
+}
+
+/* Shaders pane */
+
+#shaders-pane {
+  min-width: 150px;
+}
+
+#shaders-pane + .devtools-side-splitter {
+  border-color: transparent;
+}
+
+.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(itemToggle.png);
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-clip: content-box;
+  background-size: 32px 16px;
+  background-position: -16px 0;
+  width: 16px;
+  height: 16px;
+  border: 0;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .side-menu-widget-item-checkbox .checkbox-check {
+    background-image: url(itemToggle@2x.png);
+  }
+}
+
+.side-menu-widget-item-checkbox[checked] .checkbox-check {
+  background-position: 0 0;
+}
+
+/* Invert all toggle icons but the one in the active row for light theme */
+.theme-light .side-menu-widget-item:not(.selected) .checkbox-check {
+  filter: url(filters.svg#invert);
+}
+
+/* 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/arc-firefox-theme/chrome/browser/devtools/splitview.css b/arc-firefox-theme/chrome/browser/devtools/splitview.css
new file mode 100644
index 0000000..9710c38
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/splitview.css
@@ -0,0 +1,152 @@
+/* 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/. */
+
+
+.splitview-nav-container .devtools-throbber {
+  display: none;
+  text-align: center;
+}
+
+.loading .splitview-nav-container .devtools-throbber {
+  display: block;
+}
+
+.theme-dark .splitview-nav-container {
+  background-color: var(--theme-toolbar-background);
+}
+
+.splitview-nav {
+  -moz-appearance: none;
+  list-style-image: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.theme-dark .splitview-nav {
+  box-shadow: inset -1px 0 0 #000;
+}
+
+.theme-dark .splitview-nav:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 #000;
+}
+
+.theme-light .splitview-nav {
+  box-shadow: inset -1px 0 0 #aaa;
+}
+
+.theme-light .splitview-nav:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 #aaa;
+}
+
+.splitview-nav > li {
+  /* To compensate for the top and bottom borders */
+  margin-top: -1px;
+  margin-bottom: -1px;
+  -moz-padding-end: 8px;
+  -moz-box-align: center;
+  outline: 0;
+  vertical-align: bottom;
+}
+
+.theme-dark .splitview-nav > li {
+  border-top: 1px solid rgba(0,0,0,0.2);
+  border-bottom: 1px solid rgba(128,128,128,0.15);
+}
+
+.theme-dark .splitview-nav > li:last-of-type {
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
+}
+
+.theme-light  .splitview-nav > li {
+  border-top: 1px solid rgba(128,128,128,0.15);
+  border-bottom: 1px solid transparent;
+}
+
+.theme-light .splitview-nav > li:last-of-type {
+  box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15);
+}
+
+.placeholder {
+  -moz-box-flex: 1;
+  text-align: center;
+}
+
+.splitview-nav > li.splitview-active {
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: center right, center right, top left;
+  background-size: auto, 1px, auto;
+}
+
+.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: center left, center left, top right;
+}
+
+.theme-dark .splitview-nav > li.splitview-active {
+  background-image: url(itemArrow-dark-ltr.svg),
+                    linear-gradient(#000, #000),
+                    linear-gradient(#1d4f73, #1d4f73);
+}
+
+.theme-dark .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-dark-rtl.svg),
+                    linear-gradient(#000, #000),
+                    linear-gradient(#1d4f73, #1d4f73);
+}
+
+.theme-light .splitview-nav > li.splitview-active {
+  background-image: url(itemArrow-ltr.svg),
+                    linear-gradient(#aaa, #aaa),
+                    linear-gradient(#4c9ed9, #4c9ed9);
+}
+
+.theme-light .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-rtl.svg),
+                    linear-gradient(#aaa, #aaa),
+                    linear-gradient(#4c9ed9, #4c9ed9);
+}
+
+/* Toolbars */
+
+.splitview-main > .devtools-toolbar {
+  background-origin: border-box;
+  background-clip: border-box;
+}
+
+.theme-dark .splitview-main > toolbar,
+.theme-dark .loading .splitview-nav-container {
+  -moz-border-end: 1px solid #000;
+}
+
+.theme-light .splitview-main > toolbar,
+.theme-light .loading .splitview-nav-container {
+  -moz-border-end: 1px solid #aaa;
+}
+
+.splitview-main > .devtools-toolbarbutton {
+  font-size: 11px;
+  padding: 0 8px;
+  width: auto;
+  min-width: 48px;
+  min-height: 0;
+}
+
+
+/* Resizers */
+
+.splitview-portrait-resizer {
+  -moz-appearance: none;
+  background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px),
+              linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%));
+  height: 12px;
+  background-size: 10px 2px, 100% 12px;
+  background-clip: content-box, border-box;
+  background-repeat: repeat-y, no-repeat;
+  background-position: center center;
+  padding: 2px 0;
+  border-top: 1px solid hsla(210,8%,5%,.5);
+  border-bottom: 1px solid hsla(210,8%,5%,.5);
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/storage.css b/arc-firefox-theme/chrome/browser/devtools/storage.css
new file mode 100644
index 0000000..5f6d78e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/storage.css
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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;
+}
+
+.theme-dark #storage-tree {
+  background: #343c45; /* Toolbars */
+}
+
+#storage-tree .tree-widget-item[type="store"]:after {
+  background-image: url(chrome://browser/skin/devtools/filetype-store.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 {
+    max-width: 100%;
+  }
+
+  #storage-table #path {
+    display: none;
+  }
+
+  #storage-table .table-widget-cell {
+    min-width: 100px;
+  }
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/styleeditor.css b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css
new file mode 100644
index 0000000..a4a300f
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/styleeditor.css
@@ -0,0 +1,305 @@
+/* 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/. */
+
+.stylesheet-title,
+.stylesheet-name {
+  text-decoration: none;
+}
+
+.stylesheet-name {
+  font-size: 13px;
+}
+
+.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 {
+  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.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;
+}
+
+.theme-light .stylesheet-sidebar {
+  border-color: #aaa; /* Splitters */
+}
+
+.theme-dark .stylesheet-sidebar {
+  border-color: #000;  /* Splitters */
+}
+
+.theme-light .media-rule-label {
+  border-bottom-color: #cddae5; /* Grey */
+}
+
+.theme-dark .media-rule-label {
+  border-bottom-color: #303b47; /* Grey */
+}
+
+.media-rule-label {
+  padding: 4px;
+  cursor: pointer;
+  border-bottom: 1px solid;
+}
+
+.media-rule-line {
+  -moz-padding-start: 4px;
+}
+
+.theme-light .media-condition-unmatched {
+  color: grey;
+}
+
+.theme-dark .media-condition-unmatched {
+  color: #606C75;
+}
+
+.stylesheet-enabled {
+  padding: 8px 0;
+  margin: 0 8px;
+  background-image: url(itemToggle.png);
+  background-repeat: no-repeat;
+  background-clip: content-box;
+  background-position: 0 8px;
+  background-size: 48px 24px;
+  width: 24px;
+  height: 40px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .stylesheet-enabled {
+    background-image: url(itemToggle@2x.png);
+  }
+}
+
+.disabled > .stylesheet-enabled {
+  background-position: -24px 8px;
+}
+
+/* Invert all toggle icons but the one in the active row for light theme */
+.theme-light .splitview-nav > li:not(.splitview-active) .stylesheet-enabled {
+  filter: url(filters.svg#invert);
+}
+
+.splitview-nav > li > .stylesheet-enabled:focus,
+.splitview-nav > li:hover > .stylesheet-enabled {
+  outline: 0;
+}
+
+.stylesheet-linked-file:not(:empty){
+  -moz-margin-end: 0.4em;
+}
+
+.stylesheet-linked-file:not(:empty):before {
+  -moz-margin-start: 0.4em;
+}
+
+li.linked-file-error .stylesheet-linked-file:after {
+  font-size: 110%;
+}
+
+.stylesheet-more > h3 {
+  font-size: 11px;
+  -moz-margin-end: 2px;
+}
+
+.devtools-searchinput {
+  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) {
+  .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;
+  }
+
+  .stylesheet-sidebar {
+    width: 180px;
+  }
+}
+
+.csscoverage-report {
+  background-color: var(--theme-toolbar-background);
+}
+
+.csscoverage-report-container {
+  height: 100vh;
+  padding: 0 30px;
+}
+
+.csscoverage-report-content {
+  margin: 20px auto;
+  -moz-column-width: 300px;
+  font-size: 13px;
+}
+
+.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-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;
+  -moz-border-start: none;
+}
+
+.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 50px;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg
new file mode 100644
index 0000000..e050d20
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0px" y="0px"
+     width="16" height="16"
+     viewBox="0 0 16 16"
+     enable-background="new 0 0 16 16"
+     xml:space="preserve">
+<style>
+use:not(:target) {
+  display: none;
+}
+
+use {
+  fill: #babec3;
+}
+
+use[id$="-disabled"] {
+  fill-opacity: 0.5;
+}
+
+use[id$="-open"] {
+  fill: #3BACE5;
+}
+
+</style>
+<defs style="display:none">
+  <path id="filter-shape"
+         d="M 2,2 v 3 l 5,4 v 6 h 2 v -6 l 5,-4 v -3 L 14,2 z"/>
+</defs>
+<use id="filter"              xlink:href="#filter-shape"/>
+<use id="filter-disabled"     xlink:href="#filter-shape"/>
+<use id="filter-open"         xlink:href="#filter-shape"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/toggle-tools.png b/arc-firefox-theme/chrome/browser/devtools/toggle-tools.png
new file mode 100644
index 0000000..4954393
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/toggle-tools.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/toggle-tools@2x.png b/arc-firefox-theme/chrome/browser/devtools/toggle-tools@2x.png
new file mode 100644
index 0000000..971f414
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/toggle-tools@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg
new file mode 100644
index 0000000..ae294f6
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<path fill="#71c054" fill-rule="evenodd" d="m8,1c-3.9,0-7,3.1-7,7 0,3.9 3.1,7 7,7 3.9,0 7-3.1 7-7 0-3.9-3.1-7-7-7zm2,11h-1-5c-.6,0-1-.4-1-1v-6c0-.6 .4-1 1-1h5 1l4,4-4,4z"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg
new file mode 100644
index 0000000..128e6e8
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#edf0f1" fill-rule="evenodd">
+<path d="m8,1c-3.9,0-7,3.1-7,7 0,3.9 3.1,7 7,7 3.9,0 7-3.1 7-7 0-3.9-3.1-7-7-7zm0,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5 2.8,0 5,2.2 5,5 0,2.8-2.2,5-5,5z"/>
+<path d="m6,5c.6,0 1,.4 1,1v4c0,.6-.4,1-1,1-.6,0-1-.4-1-1v-4c0-.6 .4-1 1-1z"/>
+<path d="m10,5c.6,0 1,.4 1,1v4c0,.6-.4,1-1,1-.6,0-1-.4-1-1v-4c0-.6 .4-1 1-1z"/>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg
new file mode 100644
index 0000000..5a8cbb8
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg
@@ -0,0 +1,9 @@
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<path fill="#eef0f2" fill-rule="evenodd" d="M2,4v9h11V4H2z M11,11H4V6h7V11z"/>
+<g opacity=".8">
+<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M0,8h2v1H0V8z"/>
+<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M13,8h2v1h-2V8z"/>
+<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M7,2h1v2H7V2z"/>
+<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M7,13h1v2H7V13z"/>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg
new file mode 100644
index 0000000..bec394d
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg
@@ -0,0 +1,36 @@
+<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 17 16">
+<g fill="#edf0f1" fill-rule="evenodd">
+<path opacity=".1" d="M2.1,0h12.8C16,0,17,1,17,2.1v10.6c0,1.2-1,2.1-2.1,2.1H2.1c-1.2,0-2.1-1-2.1-2.1V2.1C0,1,1,0,2.1,0z"/>
+<path d="m2.1,2.1h9.6c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-9.6c-.6,0-1.1-.5-1.1-1.1 .1-.6 .5-1.1 1.1-1.1z"/>
+</g>
+<g opacity=".7">
+<g opacity=".75">
+<path fill="#edf0f1" fill-rule="evenodd" d="m7.4,5.3h7.4c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-7.4c-.5-.1-1-.5-1-1.1 0-.6 .5-1.1 1-1.1z"/>
+</g>
+<g opacity=".85">
+<path fill="#edf0f1" d="m14.9,5.7c.4,0 .7,.3 .7,.7s-.4,.6-.7,.6h-7.5c-.3,0-.6-.3-.6-.6s.3-.7 .7-.7h7.4m0-.4h-7.5c-.6,0-1.1,.5-1.1,1.1 0,.6 .5,1.1 1.1,1.1h7.4c.6,0 1.1-.5 1.1-1.1 0-.6-.4-1.1-1-1.1z"/>
+</g>
+</g>
+<g opacity=".75">
+<path fill="#edf0f1" fill-rule="evenodd" d="m5.3,8.5h3.2c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-3.2c-.6,0-1.1-.5-1.1-1.1 .1-.6 .5-1.1 1.1-1.1z"/>
+</g>
+<g opacity=".85">
+<path fill="#edf0f1" d="m8.5,8.9c.4,0 .7,.3 .7,.7 0,.4-.3,.7-.7,.7h-3.2c-.4,0-.7-.3-.7-.7 0-.4 .3-.7 .7-.7h3.2m0-.4h-3.2c-.6,0-1.1,.5-1.1,1.1 0,.6 .5,1.1 1.1,1.1h3.2c.6,0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1z"/>
+</g>
+<g opacity=".7">
+<g opacity=".75">
+<path fill="#edf0f1" fill-rule="evenodd" d="m4.3,11.7h2.1c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-2.1c-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/>
+</g>
+<g opacity=".85">
+<path fill="#edf0f1" d="m6.4,12.1c.4,0 .7,.3 .7,.7 0,.4-.3,.7-.7,.7h-2.1c-.4,0-.7-.3-.7-.7 0-.4 .3-.7 .7-.7h2.1m0-.4h-2.1c-.6,0-1.1,.5-1.1,1.1 0,.6 .5,1.1 1.1,1.1h2.1c.6,0 1.1-.5 1.1-1.1-.1-.6-.5-1.1-1.1-1.1z"/>
+</g>
+</g>
+<g opacity="5.000000e-02" fill="#edf0f1" fill-rule="evenodd">
+<path d="m7.4,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/>
+<path d="m4.2,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/>
+<path d="m1,14.6c0-.1 0-.1 0-.2v-13.9c0-.1 0-.1 0-.2-.6,.4-1,1-1,1.8v10.6c0,.8 .4,1.5 1,1.9z"/>
+<path d="m16,.3c0,.1 0,.1 0,.2v13.8c0,.1 0,.1 0,.2 .6-.4 1-1 1-1.8v-10.6c0-.7-.4-1.4-1-1.8z"/>
+<path d="m13.8,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/>
+<path d="m10.6,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg
new file mode 100644
index 0000000..62a6d75
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<path fill="#edf0f1" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg
new file mode 100644
index 0000000..eff1673
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#71c054" fill-rule="evenodd">
+<path d="m8,1c-3.9,0-7,3.1-7,7s3.1,7 7,7c3.9,0 7-3.1 7-7s-3.1-7-7-7zm-.1,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5s5,2.2 5,5c0,2.8-2.2,5-5,5z"/>
+<path d="m8,6.9c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/>
+<path d="m11.3,4.6l-3.9,2.5 1.5,1.4 2.4-3.9z"/>
+<path opacity=".4" d="m4.6,10c.7,1.2 2,2 3.4,2 1.5,0 2.7-.8 3.4-2h-6.8z"/>
+<g opacity=".3">
+<path d="m7.1,5.1l-.6-1.3-.9,.4 .7,1.3c.2-.1 .5-.3 .8-.4z"/>
+<path d="m9.8,5.6l.7-1.4-.9-.4-.7,1.3c.3,.2 .6,.3 .9,.5z"/>
+<path d="m10.8,7c.1,.3 .2,.7 .2,1h2v-1h-2.2z"/>
+<path d="m5,8c0-.3 .1-.7 .2-1h-2.2l-.1,1h2.1z"/>
+</g>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg
new file mode 100644
index 0000000..d8e1bdd
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#edf0f1" fill-rule="evenodd">
+<path d="m8,1c-3.9,0-7,3.1-7,7s3.1,7 7,7c3.9,0 7-3.1 7-7s-3.1-7-7-7zm-.1,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5s5,2.2 5,5c0,2.8-2.2,5-5,5z"/>
+<path d="m8,6.9c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/>
+<path d="m11.3,4.6l-3.9,2.5 1.5,1.4 2.4-3.9z"/>
+<path opacity=".4" d="m4.6,10c.7,1.2 2,2 3.4,2 1.5,0 2.7-.8 3.4-2h-6.8z"/>
+<g opacity=".3">
+<path d="m7.1,5.1l-.6-1.3-.9,.4 .7,1.3c.2-.1 .5-.3 .8-.4z"/>
+<path d="m9.8,5.6l.7-1.4-.9-.4-.7,1.3c.3,.2 .6,.3 .9,.5z"/>
+<path d="m10.8,7c.1,.3 .2,.7 .2,1h2v-1h-2.2z"/>
+<path d="m5,8c0-.3 .1-.7 .2-1h-2.2l-.1,1h2.1z"/>
+</g>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg
new file mode 100644
index 0000000..ad2133a
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg
@@ -0,0 +1,6 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#edf0f1" fill-rule="evenodd">
+<path opacity=".3" d="m1.1,6.3c0-.3 .3-.6 .6-.6h4.6c.3,0 .6,.3 .6,.6s-.3,.6-.6,.6h-4.6c-.3,0-.6-.3-.6-.6zm12,1.7h-10.2c-.4,0-.6,.3-.6,.6 0,.3 .3,.6 .6,.6h10.3c.3,0 .6-.3 .6-.6-.1-.3-.3-.6-.7-.6zm-5.7,3.4c.3,0 .6-.3 .6-.6 0-.3-.3-.6-.6-.6h-4.5c-.3,0-.6,.3-.6,.6 0,.3 .3,.6 .6,.6h4.5zm2.3,1.2h-8c-.3,0-.6,.3-.6,.6 0,.3 .3,.6 .6,.6h8c.3,0 .6-.3 .6-.6 0-.4-.3-.6-.6-.6z"/>
+<path d="m14.3,2.3h-.6v1.1c0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.1-.1-.1-.1-.2-.2-.2-.1-.3-.1-.4-.1-.3,0-.6,.3-.6,.6v1.7h-1.1v1.1c0,.6-.5,1.1-1.1,1.1-.7,.1-1.2-.4-1.2-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.1-.1-.2-.2-.3-.2-.1-.1-.1-.1-.2-.1-.3,0-.6,.3-.6,.6v1.7h-1.1v1.1c0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.3-.1-.3-.2-.4-.2-.1-.1-.2-.1-.3-.1-.3,0-.5,.3-.5,.6v1.7h-1.2v1.1c0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.2-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1-.3,0-.6,.3-.6,.6v1.7h-.5c-.3,0-.6,.2-.6,.6v12.6c0,.2 .3,.5 .6,.5h13.7c.3,0 .6-.3 .6-.6v-12.5c0-.4-.3-.6-.6-.6zm-12.6,3.4h4.6c.3,0 .6,.3 .6,.6s-.3,.6-.6,.6h-4.6c-.3,0-.6-.3-.6-.6s.3-.6 .6-.6zm8,8h-8c-.3,0-.6-.3-.6-.6 0-.3 .3-.6 .6-.6h8c.3,0 .6,.3 .6,.6 0,.4-.3,.6-.6,.6zm-7.4-2.8c0-.3 .3-.6 .6-.6h4.6c.3,0 .6,.3 .6,.6 0,.3-.3,.6-.6,.6h-4.6c-.4-.1-.6-.3-.6-.6zm10.8-1.8h-10.2c-.3,0-.6-.3-.6-.6 0-.2 .2-.5 .6-.5h10.3c.3,0 .6,.3 .6,.6-.1,.3-.3,.5-.7,.5z"/>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg
new file mode 100644
index 0000000..7f5013b
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg
@@ -0,0 +1,7 @@
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#edf0f1">
+<path d="m1.3,12.5v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6,0-6.6-2.7-6.6-2.7z"/>
+<path d="m14.7,3.4c0-1.4-3-2.5-6.7-2.5s-6.7,1.1-6.7,2.5c0,.2 0,.3 .1,.5-.1-.3-.1-.4-.1-.4v1.5c0,0 0,2.7 6.7,2.7 6.7,0 6.8-2.7 6.8-2.7v-1.6c0,.1 0,.2-.1,.5-0-.2-0-.3-0-.5z"/>
+<path d="m1.3,8.7v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6-0-6.6-2.7-6.6-2.7z"/>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg
new file mode 100644
index 0000000..ac1f5c7
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 17 16">
+<g fill="#edf0f1" fill-rule="evenodd">
+<path d="m10,11.1 0,2.3-7.8,0 0-11.2 5.6-0 1.1,1.1 1.7-1.6-1.7-1.7-8.9,0 0,15.6 12.2,0 0-6.7z"/>
+<path d="M6.7,7.8L14.5,0l2.2,2.2L8.9,10l-3.3,1.1L6.7,7.8z"/>
+</g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg
new file mode 100644
index 0000000..59d9d90
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="-6.167 -16.135 100 100" enable-background="new -6.167 -16.135 100 100" xml:space="preserve">
+  <path fill="none" stroke="#edf0f1" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" d="M86.666,33.864  c-0.797,5.297-3.467,32.799-10.518,32.866c-7.086,0.066-9.973-27.596-10.9-32.866C64.322,28.597,61.436,0.933,54.35,1  c-7.105,0.068-9.644,27.561-10.517,32.864c-0.874,5.305-3.412,32.799-10.517,32.866c-7.087,0.066-9.974-27.596-10.899-32.866  C21.49,28.597,18.604,0.933,11.517,1C4.466,1.067,1.796,28.569,1,33.864"/>
+</svg>
\ No newline at end of file
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg
new file mode 100644
index 0000000..0739e82
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<path fill="#edf0f1" fill-rule="evenodd" d="M2,2h5.4l6.5,6.5L7.4,15H2l6.5-6.5L2,2z"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark.png
new file mode 100644
index 0000000..751fbc3
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark@2x.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark@2x.png
new file mode 100644
index 0000000..e4db35e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-dark@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light.png
new file mode 100644
index 0000000..298ced1
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light@2x.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light@2x.png
new file mode 100644
index 0000000..7dec134
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-horizontal-light@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark.png
new file mode 100644
index 0000000..dfd5354
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark@2x.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark@2x.png
new file mode 100644
index 0000000..721bb0d
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-dark@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light.png
new file mode 100644
index 0000000..5a57fc3
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light@2x.png b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light@2x.png
new file mode 100644
index 0000000..c2b95c4
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tooltip/arrow-vertical-light@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/tracer-icon.png b/arc-firefox-theme/chrome/browser/devtools/tracer-icon.png
new file mode 100644
index 0000000..8229dd7
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tracer-icon.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/tracer-icon@2x.png b/arc-firefox-theme/chrome/browser/devtools/tracer-icon@2x.png
new file mode 100644
index 0000000..de0ded4
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tracer-icon@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/undock@2x.png b/arc-firefox-theme/chrome/browser/devtools/undock@2x.png
new file mode 100644
index 0000000..137d6df
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/undock@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-delete.png b/arc-firefox-theme/chrome/browser/devtools/vview-delete.png
new file mode 100644
index 0000000..db4b062
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/vview-delete.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-delete@2x.png b/arc-firefox-theme/chrome/browser/devtools/vview-delete@2x.png
new file mode 100644
index 0000000..ae6fbb2
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/vview-delete@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-edit.png b/arc-firefox-theme/chrome/browser/devtools/vview-edit.png
new file mode 100644
index 0000000..f575032
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/vview-edit.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-edit@2x.png b/arc-firefox-theme/chrome/browser/devtools/vview-edit@2x.png
new file mode 100644
index 0000000..a34c8ed
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/vview-edit@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-lock.png b/arc-firefox-theme/chrome/browser/devtools/vview-lock.png
new file mode 100644
index 0000000..b68cc5e
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/vview-lock.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-lock@2x.png b/arc-firefox-theme/chrome/browser/devtools/vview-lock@2x.png
new file mode 100644
index 0000000..5d7640b
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/vview-lock@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector.png b/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector.png
new file mode 100644
index 0000000..ee1d7a5
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector@2x.png b/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector@2x.png
new file mode 100644
index 0000000..2b09f01
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/vview-open-inspector@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css
new file mode 100644
index 0000000..11439a6
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/webaudioeditor.css
@@ -0,0 +1,257 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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;
+  background-color: var(--theme-toolbar-background);
+  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;
+}
+
+/* Edges in graph */
+.edgePath path {
+  stroke-width: 1px;
+  fill: none;
+}
+
+.theme-dark .edgePath path {
+  stroke: #b6babf; /* Grey foreground text */
+}
+.theme-light .edgePath path {
+  stroke: #aaaaaa; /* Splitters */
+}
+
+/* AudioParam connection edges */
+g.edgePath.param-connection {
+  stroke-dasharray: 5,5;
+}
+
+.theme-dark .edgePath.param-connection path {
+  stroke: #b6babf; /* Grey foreground text */
+}
+.theme-light .edgePath.param-connection path {
+  stroke: #aaaaaa; /* Splitters */
+}
+
+/* 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. */
+.theme-dark g.edgeLabel rect {
+  fill: #14171a;
+}
+.theme-light g.edgeLabel rect {
+  fill: #fcfcfc; /* Background - Editor */
+}
+.theme-dark g.edgeLabel tspan {
+  fill: var(--theme-body-color-alt);
+}
+.theme-light g.edgeLabel tspan {
+  fill: #585959; /* Grey foreground text */
+}
+
+/* Audio Nodes */
+.nodes rect {
+  stroke-width: 1px;
+  cursor: pointer;
+}
+
+.nodes rect {
+  stroke: var(--theme-tab-toolbar-background);
+}
+.theme-light rect {
+  fill: var(--theme-tab-toolbar-background);
+}
+.theme-dark rect {
+  fill: var(--theme-toolbar-background);
+}
+
+/**
+ * Bypassed Nodes
+ */
+
+.theme-light .nodes g.bypassed rect {
+  fill: url(chrome://browser/skin/devtools/filters.svg#bypass-light);
+}
+.theme-dark .nodes g.bypassed rect {
+  fill: url(chrome://browser/skin/devtools/filters.svg#bypass-dark);
+}
+.nodes g.bypassed.selected rect {
+  stroke: var(--theme-selection-background);
+}
+
+/*
+.nodes g.bypassed text {
+  opacity: 0.8;
+}
+*/
+
+/**
+ * Selected Nodes
+ */
+.nodes g.selected rect {
+  fill: var(--theme-selection-background);
+}
+
+/* Don't style bypassed nodes text different because it'd be illegible in light-theme */
+.theme-light g.selected:not(.bypassed) text {
+  fill: var(--theme-toolbar-background);
+}
+
+
+/* Text in nodes and edges */
+text {
+  cursor: default; /* override the "text" cursor */
+  font-weight: 300;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
+  font-size: 14px;
+}
+
+text {
+  fill: var(--theme-body-color-alt);
+}
+
+
+.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(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: url(debugger-collapse.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#inspector-pane-toggle > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#inspector-pane-toggle[pane-collapsed] {
+  list-style-image: url(debugger-expand.png);
+}
+
+#inspector-pane-toggle:active {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+/**
+ * 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.25dppx) {
+  #inspector-pane-toggle {
+    list-style-image: url(debugger-collapse@2x.png);
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #inspector-pane-toggle[pane-collapsed] {
+    list-style-image: url(debugger-expand@2x.png);
+  }
+
+  #inspector-pane-toggle:active {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+
+  .web-audio-inspector .error {
+    background-image: url(alerticon-warning@2x.png);
+  }
+}
+
+/**
+ * Inspector toolbar
+ */
+
+#audio-node-toolbar .bypass {
+  list-style-image: url(power.svg);
+}
+
+#audio-node-toolbar toolbarbutton[disabled] {
+  opacity: 0.5;
+  background-color: transparent;
+}
+
+.theme-dark #audio-node-toolbar toolbarbutton[checked] {
+  background-color: #1d4f73; /* Select Highlight Blue */
+}
+.theme-light #audio-node-toolbar toolbarbutton[checked] {
+  background-color: #4c9ed9; /* Select Highlight Blue */
+}
+
+/* don't invert checked buttons so we can have white icons on light theme */
+#audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon {
+  filter: none;
+}
+
+
+/**
+ * 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/arc-firefox-theme/chrome/browser/devtools/webconsole.css b/arc-firefox-theme/chrome/browser/devtools/webconsole.css
new file mode 100644
index 0000000..7b89259
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.css
@@ -0,0 +1,592 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.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 Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* 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;
+  flex: none;
+  padding: 0 7px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.message > .timestamp {
+  flex: none;
+  color: GrayText;
+  margin: 4px 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;
+}
+
+.message > .icon::before {
+  content: "";
+  background-image: url(chrome://browser/skin/devtools/webconsole.png);
+  background-position: 8px 8px;
+  background-repeat: no-repeat;
+  background-size: 48px 40px;
+  width: 8px;
+  height: 8px;
+  display: inline-block;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .message > .icon::before {
+    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
+  }
+}
+
+.message > .message-body-wrapper {
+  flex: 1 1 100%;
+  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 {
+  display: flex;
+  flex: none;
+  align-self: flex-start;
+  justify-content: flex-end;
+  width: 10em;
+  margin-top: 3px;
+  color: -moz-nativehyperlinktext;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.message-location:hover,
+.message-location:focus {
+  text-decoration: underline;
+}
+
+.message-location > .filename {
+  text-overflow: ellipsis;
+  text-align: end;
+  overflow: hidden;
+}
+
+.message-location > .line-number {
+  flex: none;
+}
+
+.message-flex-body {
+  display: flex;
+}
+
+.message-body > * {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.message-flex-body > .message-body {
+  display: block;
+  flex: 1 1 auto;
+  vertical-align: middle;
+}
+
+.message-flex-body > .message-location {
+  margin-top: 0;
+}
+
+.jsterm-input-container {
+  border-top-width: 1px;
+  border-top-style: solid;
+}
+
+#output-wrapper {
+  direction: ltr;
+  overflow: auto;
+}
+
+#output-container {
+  -moz-user-select: text;
+  -moz-box-flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+#output-container.hideTimestamps > .message {
+  -moz-padding-start: 0;
+  -moz-margin-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-left: 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] {
+  background-color: rgba(255, 150, 150, 0.3);
+}
+
+.theme-dark .message[severity=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 {
+  -moz-border-end: solid #000 6px;
+}
+
+.message[category=network][severity=error] > .icon::before {
+  background-position: -8px 0;
+}
+
+.message[category=network] > .message-body {
+  display: flex;
+}
+
+.message[category=network] .method {
+  flex: none;
+}
+
+.message[category=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 {
+  flex: none;
+  -moz-margin-start: 6px;
+}
+
+.message[category=network].mixed-content .url {
+  color: #FF0000;
+}
+
+.message .learn-more-link {
+  color: -moz-nativehyperlinktext;
+  margin: 0 6px;
+}
+
+.message[category=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;
+  -moz-margin-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 {
+  -moz-border-end: solid #00b6f0 6px;
+}
+
+.message[category=cssparser][severity=error] > .icon::before {
+  background-position: -8px -8px;
+}
+
+.message[category=cssparser][severity=warn] > .icon::before {
+  background-position: -16px -8px;
+}
+
+/* JS styles */
+.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#FCB142, #FB9500);
+  border-color: #E98A00;
+}
+
+.message[category=exception] > .indent {
+  -moz-border-end: solid #fb9500 6px;
+}
+
+.message[category=exception][severity=error] > .icon::before {
+  background-position: -8px -16px;
+}
+
+.message[category=exception][severity=warn] > .icon::before {
+  background-position: -16px -16px;
+}
+
+/* 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 {
+  -moz-border-end: solid #cbcbcb 6px;
+}
+
+.message[category=console][severity=error] > .icon::before,
+.message[category=output][severity=error] > .icon::before {
+  background-position: -8px -24px;
+}
+
+.message[category=console][severity=warn] > .icon::before {
+  background-position: -16px -24px;
+}
+
+.message[category=console][severity=info] > .icon::before {
+  background-position: -24px -24px;
+}
+
+/* Input and output styles */
+.message[category=input] > .indent,
+.message[category=output] > .indent {
+  -moz-border-end: solid #808080 6px;
+}
+
+.message[category=input] > .icon::before {
+  background-position: -32px -24px;
+}
+
+.message[category=output] > .icon::before {
+  background-position: -40px -24px;
+}
+
+/* JSTerm Styles */
+.jsterm-input-node,
+.jsterm-complete-node {
+  border: none;
+  padding: 0 0 0 16px;
+  -moz-appearance: none;
+  background-color: transparent;
+}
+
+.jsterm-input-node {
+  background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .jsterm-input-node {
+    background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32);
+  }
+}
+
+:-moz-any(.jsterm-input-node,
+          .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
+  overflow-x: hidden;
+}
+
+.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;
+  -moz-margin-end: 15px;
+  border: 1px solid rgba(128, 128, 128, .5);
+  border-radius: 3px;
+}
+
+#webconsole-sidebar > tabs {
+  height: 0;
+  border: none;
+}
+
+.devtools-side-splitter ~ #webconsole-sidebar[hidden] {
+  display: none;
+}
+
+/* Security styles */
+
+.message[category=security] > .indent {
+  -moz-border-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 {
+  background-position: -8px -32px;
+}
+
+.message[category=security][severity=warn] > .icon::before {
+  background-position: -16px -32px;
+}
+
+.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 {
+  -moz-padding-end: 9px;
+  text-decoration: none;
+}
+
+.stacktrace {
+  display: none;
+  list-style: none;
+  padding: 0 1em 0 1.5em;
+  margin: 5px 0 0 0;
+  max-height: 10em;
+  overflow-y: auto;
+  border: 1px solid rgb(200,200,200);
+  border-radius: 3px;
+}
+
+.consoletable {
+  margin: 5px 0 0 0;
+}
+
+.theme-light .message[severity=error] .stacktrace {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.theme-dark .message[severity=error] .stacktrace {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.message[open] .stacktrace {
+  display: block;
+}
+
+.message .theme-twisty {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 3px 0 0;
+}
+
+.stacktrace li {
+  display: flex;
+  margin: 0;
+}
+
+.stacktrace .function {
+  display: block;
+  flex: 1 1 auto;
+}
+
+.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;
+}
+
+/* Open DOMNode in inspector button */
+.open-inspector {
+  background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
+  padding-left: 16px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.elementNode:hover .open-inspector,
+.open-inspector:hover {
+  background-position: -32px 0;
+}
+
+.open-inspector:active {
+  background-position: -16px 0;
+}
+
+.jsterm-input-container {
+  background-color: var(--theme-tab-toolbar-background);
+  border-color: var(--theme-body-background);
+}
+
+.jsterm-input-node {
+  color: var(--theme-content-color1);
+}
+
+.jsterm-complete-node {
+  color: var(--theme-comment);
+}
+
+.navigation-marker .url {
+  background: var(--theme-body-background);
+}
+
+.theme-dark .inlined-variables-view iframe {
+  border-color: #333;
+}
+
+.theme-dark .stacktrace {
+  border-color: #333;
+}
+
+.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-color: ThreeDShadow;
+}
+.theme-light .navigation-marker .url {
+  background: #fff;
+}
+
+.theme-light .inlined-variables-view iframe {
+  border-color: #ccc;
+}
+
+.theme-light .stacktrace {
+  border-color: #ccc;
+}
+
+@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-left: 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;
+  }
+}
+
+.jsterm-input-node {
+  width: 98%;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.png b/arc-firefox-theme/chrome/browser/devtools/webconsole.png
new file mode 100644
index 0000000..8aee790
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png b/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png
new file mode 100644
index 0000000..2d5e97f
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css b/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css
new file mode 100644
index 0000000..3803fe3
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/webconsole_networkpanel.css
@@ -0,0 +1,99 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+body {
+  font-family: sans-serif;
+  font-size: 11px;
+  background: #EEE;
+  color: #000;
+}
+
+#header {
+  padding: 5px;
+  overflow-x:auto;
+  display: block;
+}
+
+h1 {
+  font-size: 13px;
+  line-height: 15px;
+  padding: 3px 10px;
+  vertical-align: bottom;
+  margin: 0px;
+  background: linear-gradient(#BBB, #999);
+  border-radius: 2px;
+  text-shadow: #FFF 0px 1px 0px;
+}
+
+h1 .info {
+  font-size: 11px;
+  line-height: 15px;
+  vertical-align: bottom;
+  float: right;
+  color: #333;
+  padding-right: 3px;
+}
+
+.property-table {
+  padding: 2px 5px;
+  background: linear-gradient(#FFF, #F8F8F8);
+  color: #333;
+  width: 100%;
+  max-height: 330px;
+  overflow: auto;
+  display: block;
+}
+
+.property-name {
+  font-size: 11px;
+  font-weight: bold;
+  color: #000;
+  white-space: nowrap;
+  text-align: end;
+  vertical-align: top;
+  width: 10%;
+}
+
+.property-value {
+  padding-right: 5px;
+  font-size: 11px;
+  word-wrap: break-word;
+  width: 90%;
+}
+
+div.group {
+  margin-top: 10px;
+}
+
+div.group,
+#header {
+  background: #FFF;
+  border-color: #E1E1E1;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.2);
+  border-radius: 4px 4px 4px 4px;
+}
+
+img#responseImageNode {
+  box-shadow: rgba(0,0,0,0.2) 0px 3px 3.5px;
+  max-width: 100%;
+}
+
+#responseImageNodeDiv {
+  padding: 5px;
+}
+
+#responseBodyFetchLink, #requestBodyFetchLink {
+  padding: 5px;
+  margin: 0;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 1.1em;
+  text-decoration: underline;
+}
+
+.longStringEllipsis {
+  margin-left: 0.6em;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css
new file mode 100644
index 0000000..0ef2f9f
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css
@@ -0,0 +1,1643 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* 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/. */
+
+
+/* Generic pane helpers */
+
+.generic-toggled-side-pane {
+  -moz-margin-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-side-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 (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: 3px;
+    height: 3px;
+    margin-top: -3px;
+
+    /* Reset the vertical splitter styles */
+    border-width: 0;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    -moz-margin-start: 0;
+    width: auto;
+    min-width: 0;
+
+    /* In some edge case the cursor is not changed to n-resize */
+    cursor: n-resize;
+  }
+
+  .devtools-responsive-container > .devtools-sidebar-tabs {
+    min-height: 35vh;
+    max-height: 75vh;
+  }
+}
+
+/* BreacrumbsWidget */
+
+.breadcrumbs-widget-container {
+  -moz-margin-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("breadcrumbs-scrollbutton.png");
+  list-style-image: none;
+  margin: 0 8px;
+  padding: 0;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .scrollbutton-up > .toolbarbutton-icon,
+  .scrollbutton-down > .toolbarbutton-icon {
+    background-image: url("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);
+}
+
+/* The breadcrumb separator elements are used as background images with
+ * -moz-element, so we position them offscreen since we don't care about
+ * seeing the original elements.
+ */
+.breadcrumb-separator-container {
+  position: fixed;
+  top: -1000px;
+  left: -1000px;
+}
+
+#breadcrumb-separator-before,
+#breadcrumb-separator-after,
+#breadcrumb-separator-normal {
+  width: 12px;
+  height: 24px;
+  overflow: hidden;
+}
+
+#breadcrumb-separator-before,
+#breadcrumb-separator-after:after {
+  background: var(--theme-selection-background);
+}
+
+#breadcrumb-separator-after,
+#breadcrumb-separator-before:after {
+  background: var(--theme-toolbar-background);
+}
+
+/* This chevron arrow cannot be replicated easily in CSS, so we are using
+ * a background image for it (still keeping it in a separate element so
+ * we can handle RTL support with a CSS transform).
+ */
+#breadcrumb-separator-normal {
+  background: url(breadcrumbs-divider@2x.png) no-repeat center right;
+  background-size: 12px 24px;
+}
+
+/* Fake a triangle by rotating a rectangle inside the elements */
+#breadcrumb-separator-before:after,
+#breadcrumb-separator-after:after {
+  content: "";
+  display: block;
+  width: 25px;
+  height: 24px;
+  transform: translateX(-18px) rotate(45deg);
+  -moz-box-sizing: border-box;
+}
+
+.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%);
+}
+
+.breadcrumbs-widget-item > .button-box {
+  border: none;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.breadcrumbs-widget-item:not([checked]) {
+  background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
+}
+
+.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
+  background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
+}
+
+.breadcrumbs-widget-item[checked] {
+  background: -moz-element(#breadcrumb-separator-before) no-repeat 0 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:-moz-locale-dir(rtl) {
+  padding: 0 20px 0 8px;
+}
+
+.breadcrumbs-widget-item:-moz-locale-dir(rtl),
+.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
+  background-position: center right;
+}
+
+#breadcrumb-separator-before:-moz-locale-dir(rtl),
+#breadcrumb-separator-after:-moz-locale-dir(rtl),
+#breadcrumb-separator-normal:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#breadcrumb-separator-before:-moz-locale-dir(rtl):after,
+#breadcrumb-separator-after:-moz-locale-dir(rtl):after {
+  transform: translateX(-5px) rotate(45deg);
+}
+
+.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;
+}
+
+/* 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 */
+
+.theme-dark .side-menu-widget-container:-moz-locale-dir(ltr),
+.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
+  box-shadow: inset -1px 0 0 #000;
+}
+
+.theme-dark .side-menu-widget-container:-moz-locale-dir(rtl),
+.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 #000;
+}
+
+.side-menu-widget-container:-moz-locale-dir(ltr),
+.side-menu-widget-empty-text:-moz-locale-dir(ltr) {
+  box-shadow: inset -1px 0 0 #aaa;
+}
+
+.side-menu-widget-container:-moz-locale-dir(rtl),
+.side-menu-widget-empty-text:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 #aaa;
+}
+
+.side-menu-widget-group {
+  /* To allow visibility of the dark margin shadow. */
+  -moz-margin-end: 1px;
+}
+
+.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
+  /* To compensate for the arrow image's dark margin. */
+  -moz-margin-end: -1px;
+}
+
+/* SideMenuWidget groups */
+
+.side-menu-widget-group-title {
+  padding: 4px;
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.theme-dark .side-menu-widget-group-title {
+  color: var(--theme-content-color1);
+}
+
+.theme-light .side-menu-widget-group-title {
+  color: var(--theme-content-color3);
+}
+
+/* SideMenuWidget items */
+
+.side-menu-widget-item {
+  /* To compensate for the top and bottom borders */
+  margin-top: -1px;
+  margin-bottom: -1px;
+  background-clip: padding-box;
+}
+
+.theme-dark .side-menu-widget-item {
+  border-top: 1px solid rgba(0,0,0,0.2);
+  border-bottom: 1px solid rgba(128,128,128,0.15);
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .side-menu-widget-item:last-of-type {
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
+}
+
+.theme-light .side-menu-widget-item {
+  border-top: 1px solid rgba(128,128,128,0.15);
+  border-bottom: 1px solid transparent;
+  color: var(--theme-body-color);
+}
+
+.theme-light .side-menu-widget-item:last-of-type {
+  box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15);
+}
+
+.side-menu-widget-item.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.side-menu-widget-item-arrow {
+  -moz-margin-start: -7px;
+  width: 7px; /* The image's width is 7 pixels */
+  /* Cover the border of the side-menu-widget-item */
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
+  background-size: auto, 1px 100%;
+  background-repeat: no-repeat;
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
+  background-position: center right, top right;
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+  background-position: center left, top left;
+}
+
+.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
+  background-image: url(itemArrow-dark-ltr.svg), linear-gradient(to right, #000, #000);
+}
+
+.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-dark-rtl.svg), linear-gradient(to right, #000, #000);
+}
+
+.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
+  background-image: url(itemArrow-ltr.svg), linear-gradient(to right, #aaa, #aaa);
+}
+
+.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-rtl.svg), linear-gradient(to right, #aaa, #aaa);
+}
+
+/* SideMenuWidget items contents */
+
+.side-menu-widget-item-contents {
+  padding: 4px;
+  /* To avoid having content overlapping the arrow image. */
+  -moz-padding-end: 8px;
+}
+
+.side-menu-widget-item-other {
+  /* To avoid having content overlapping the arrow image. */
+  -moz-padding-end: 8px;
+  /* To compensate for the .side-menu-widget-item-contents padding. */
+  -moz-margin-start: -4px;
+  -moz-margin-end: -8px;
+}
+
+.side-menu-widget-item-other:first-of-type {
+  margin-top: 4px;
+}
+
+.side-menu-widget-item-other:last-of-type {
+  margin-bottom: -4px;
+}
+
+.theme-dark .side-menu-widget-item-other {
+  background-color: rgba(0,0,0,.1);
+}
+
+.theme-light .side-menu-widget-item-other {
+  background-color: rgba(128,128,128,.1);
+}
+
+.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other {
+  background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other {
+  background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */
+  color: var(--theme-body-color);
+}
+
+.side-menu-widget-item.selected .side-menu-widget-item-other.selected {
+  background-color: transparent;
+  color: var(--theme-selection-color);
+}
+
+/* SideMenuWidget checkboxes */
+
+.side-menu-widget-group-checkbox {
+  margin: 0;
+  -moz-margin-end: 4px;
+}
+
+.side-menu-widget-item-checkbox {
+  margin: 0;
+  -moz-margin-start: 4px;
+}
+
+/* SideMenuWidget misc */
+
+.theme-dark .side-menu-widget-container,
+.theme-dark .side-menu-widget-empty-text {
+  background-color: var(--theme-toolbar-background);
+}
+
+.side-menu-widget-empty-text {
+  padding: 4px 8px;
+}
+
+/* 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;
+}
+
+/* Generic variables traits */
+
+.variables-view-variable:not(:last-child) {
+  border-bottom: 1px solid rgba(128, 128, 128, .15);
+}
+
+.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 {
+  -moz-margin-start: 5px;
+}
+
+.variable-or-property:not([untitled]) > .variables-view-element-details {
+  -moz-margin-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://browser/skin/devtools/vview-lock.png") no-repeat;
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .variable-or-property-non-writable-icon {
+    background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
+  }
+}
+
+.variable-or-property-frozen-label,
+.variable-or-property-sealed-label,
+.variable-or-property-non-extensible-label {
+  height: 16px;
+  -moz-padding-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 {
+  -moz-padding-start: 4px;
+  -moz-border-start: 1px dotted #000;
+}
+
+.variable-or-property[safe-getter] > tooltip > label.WebIDL {
+  -moz-padding-start: 4px;
+  -moz-border-start: 1px dotted #000;
+  color: #080;
+}
+
+/* Variables and properties editing */
+
+.variables-view-delete {
+  background: url("chrome://browser/skin/devtools/vview-delete.png");
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .variables-view-delete {
+    background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
+  }
+}
+
+.variables-view-delete:hover {
+  background-position: 16px;
+}
+
+.variables-view-delete:active {
+  background-position: 32px;
+}
+
+.variable-or-property:focus > .title > .variables-view-delete {
+  background-position: 0px;
+}
+
+.variables-view-edit {
+  background: url("chrome://browser/skin/devtools/vview-edit.png");
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .variables-view-edit {
+    background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
+  }
+}
+
+.variables-view-edit:hover {
+  background-position: 16px;
+}
+
+.variables-view-edit:active {
+  background-position: 32px;
+}
+
+.variable-or-property:focus > .title > .variables-view-edit {
+  background-position: 0px;
+}
+
+.variables-view-open-inspector {
+  background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+@media (min-resolution: 1.25dppx) {
+  .variables-view-open-inspector {
+    background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png");
+  }
+}
+
+.variables-view-open-inspector:hover {
+  background-position: 16px;
+}
+
+.variables-view-open-inspector:active {
+  background-position: 32px;
+}
+
+.variable-or-property:focus > .title > .variables-view-open-inspector {
+  background-position: 0px;
+}
+
+/* Variables and properties input boxes */
+
+.variable-or-property > .title > .separator + .element-value-input {
+  -moz-margin-start: -2px !important;
+  -moz-margin-end: 2px !important;
+}
+
+.variable-or-property > .title > .separator[hidden=true] + .element-value-input {
+  -moz-margin-start: 4px !important;
+  -moz-margin-end: 2px !important;
+}
+
+.element-name-input {
+  -moz-margin-start: -2px !important;
+  -moz-margin-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;
+  -moz-border-end: 1px solid;
+}
+
+.theme-light .line-graph-widget-gutter {
+  background: rgba(255,255,255,0.75);
+  -moz-border-end-color: rgba(255,255,255,0.25);
+}
+
+.theme-dark .line-graph-widget-gutter {
+  background: rgba(0,0,0,0.5);
+  -moz-border-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;
+  -moz-padding-start: 6px;
+  -moz-padding-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 {
+  -moz-border-end: 3px solid;
+  left: -3px;
+}
+
+.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
+  -moz-border-start: 3px solid;
+  right: -3px;
+}
+
+.theme-light .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
+  -moz-border-end-color: rgba(255,255,255,0.75);
+}
+
+.theme-dark .line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
+  -moz-border-end-color: rgba(0,0,0,0.5);
+}
+
+.theme-light .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
+  -moz-border-start-color: rgba(255,255,255,0.75);
+}
+
+.theme-dark .line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
+  -moz-border-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] {
+  -moz-margin-start: 3px;
+}
+
+.line-graph-widget-tooltip > [text=metric] {
+  -moz-margin-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-canvas {
+  background: #f7f7f7;
+}
+
+.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;
+  -moz-margin-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;
+  -moz-margin-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;
+  -moz-margin-end: 10px;
+}
+
+.table-chart-row-label {
+  width: 8em;
+  -moz-padding-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 {
+  border: none;
+}
+
+.table-widget-body {
+  overflow: auto;
+}
+
+.theme-light .table-widget-body {
+  background: var(--theme-sidebar-background);
+}
+
+.theme-dark .table-widget-body,
+.theme-dark .table-widget-empty-text {
+  background-color: var(--theme-toolbar-background);
+}
+
+.theme-dark .table-widget-body:-moz-locale-dir(ltr) {
+  box-shadow: inset -1px 0 0 #000;
+}
+
+.theme-dark .table-widget-body:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 #000;
+}
+
+.table-widget-body:-moz-locale-dir(ltr) {
+  box-shadow: inset -1px 0 0 #aaa;
+}
+
+.table-widget-body:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 #aaa;
+}
+
+/* Column Headers */
+
+.theme-dark .table-widget-column-header,
+.theme-dark .table-widget-cell {
+  -moz-border-end: 1px solid rgba(0,0,0,0.2);
+  box-shadow: inset 1px 0 0 rgba(128,128,128,0.15);
+}
+
+.theme-light .table-widget-column-header,
+.theme-light .table-widget-cell {
+  -moz-border-end: 1px solid rgba(128,128,128,0.25);
+  box-shadow: inset 1px 0 0 transparent;
+}
+
+/* Table widget column header colors are taken from netmonitor.inc.css to match
+   the look of both the tables. This needs to be updated along with netmonitor
+   header colors in bug 951714 */
+
+.table-widget-column-header {
+  background: rgba(0,0,0,0);
+  position: sticky;
+  top: 0;
+  min-height: 32px;
+  width: 100%;
+  border: none;
+  padding: 8px 0 0 !important;
+  color: inherit;
+  text-align: center;
+  font-weight: inherit !important;
+  transition: background-color 0.1s ease-in-out;
+}
+
+.table-widget-column-header:hover {
+  background: rgba(0,0,0,0.10);
+}
+
+.table-widget-column-header:hover:active {
+  background: rgba(0,0,0,0.25);
+}
+
+.table-widget-column-header:not(:active)[sorted] {
+  background: rgba(0,0,0,0.15);
+}
+
+.table-widget-column-header:not(:active)[sorted=ascending] {
+  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+}
+
+.table-widget-column-header:not(:active)[sorted=descending] {
+  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+
+/* Cells */
+
+.table-widget-cell {
+  width: 100%;
+  margin: -1px 0 !important;
+  padding: 3px 4px;
+  background-clip: padding-box;
+  min-width: 100px;
+  -moz-user-focus: normal;
+}
+
+.theme-dark .table-widget-cell {
+  border-top: 1px solid rgba(0,0,0,0.2);
+  border-bottom: 1px solid rgba(128,128,128,0.15);
+  color: var(--theme-selection-color);
+}
+
+.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
+.theme-dark .table-widget-cell:not(.theme-selected)[odd] {
+  background: rgba(255,255,255,0.05);
+}
+
+.theme-dark .table-widget-cell:last-of-type {
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.2);
+}
+
+.theme-light .table-widget-cell {
+  border-top: 1px solid rgba(128,128,128,0.15);
+  border-bottom: 1px solid transparent;
+}
+
+.theme-light .table-widget-cell:not(.theme-selected) {
+  color: var(--theme-body-color);
+}
+
+.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
+.theme-light .table-widget-cell:not(.theme-selected)[odd] {
+  background: rgba(128,128,128,0.05);
+}
+
+.theme-light .table-widget-cell:last-of-type {
+  box-shadow: inset 0 -1px 0 rgba(128,128,128,0.15);
+}
+
+.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;
+}
+
+.theme-light .table-widget-empty-text {
+  background: #F7F7F7; /* Background-Sidebar */
+}
+
+.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;
+  -moz-margin-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: 800;
+}
+
+/* Twisties */
+.tree-widget-item:before {
+  content: "";
+  width: 14px;
+  height: 14px;
+  float: left;
+  margin: 3px 2px -3px;
+  background-repeat: no-repeat;
+  background-image: url("chrome://browser/skin/devtools/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: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[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.25dppx) {
+  .tree-widget-item:before {
+    background-image: url("chrome://browser/skin/devtools/controls@2x.png");
+  }
+}
+
+/* Indentation of child items in the tree */
+
+/* For level > 6 */
+.tree-widget-item[level] + ul > li > .tree-widget-item {
+  -moz-padding-start: 98px;
+}
+
+/* First level */
+.tree-widget-item[level="1"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 14px;
+}
+
+/* Second level */
+.tree-widget-item[level="2"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 28px;
+}
+
+/* Third level */
+.tree-widget-item[level="3"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 42px;
+}
+
+/* Fourth level */
+.tree-widget-item[level="4"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 56px;
+}
+
+/* Fifth level */
+.tree-widget-item[level="5"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 70px;
+}
+
+/* Sixth level */
+.tree-widget-item[level="6"] + ul > li > .tree-widget-item {
+  -moz-padding-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;
+  -moz-margin-end: 4px;
+  background-repeat: no-repeat;
+  background-size: 20px auto;
+  filter: url('filters.svg#invert');
+  background-position: 0 0;
+  background-size: auto 20px;
+}
+
+.tree-widget-item:-moz-locale-dir(rtl):after {
+  float: right;
+}
+
+.theme-dark .tree-widget-item[type]:after {
+  filter: url('filters.svg#invert-white');
+}
+
+.tree-widget-item[type="dir"]:after {
+  background-image: url(chrome://browser/skin/devtools/filetype-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://browser/skin/devtools/filetype-dir-open.svg);
+}
+
+.tree-widget-item[type="url"]:after {
+  background-image: url(chrome://browser/skin/devtools/filetype-globe.svg);
+  background-size: auto 18px;
+  width: 18px;
+}
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Manifest Editor overrides */
+
+.variables-view-container.manifest-editor {
+  background-color: #F5F5F5;
+  padding: 20px 2px;
+}
+
+.manifest-editor .variable-or-property:focus > .title {
+  background-color: #EDEDED;
+  color: #000;
+  border-radius: 4px;
+}
+
+.manifest-editor .variables-view-property > .title > .name {
+  color: #27406A;
+}
+
+.manifest-editor .variable-or-property > .title > label,
+.manifest-editor textbox  {
+  font-family: monospace;
+}
+
+.manifest-editor .variable-or-property > .title > .token-string {
+  color: #54BC6A;
+  font-weight: bold;
+}
+
+.manifest-editor .variable-or-property > .title > .token-boolean,
+.manifest-editor .variable-or-property > .title > .token-number {
+  color: #009BD4;
+  font-weight: bold;
+}
+
+.manifest-editor .variable-or-property > .title > .token-undefined {
+  color: #bbb;
+}
+
+.manifest-editor .variable-or-property > .title > .token-null {
+  color: #999;
+}
+
+.manifest-editor .variable-or-property > .title > .token-other {
+  color: #333;
+}
+
+.manifest-editor .variables-view-variable {
+  border-bottom: none;
+}
+
+.manifest-editor .variables-view-delete,
+.manifest-editor .variables-view-delete:hover,
+.manifest-editor .variables-view-delete:active,
+.manifest-editor .variable-or-property:focus .variables-view-delete,
+.manifest-editor .variables-view-add-property,
+.manifest-editor .variables-view-add-property:hover,
+.manifest-editor .variables-view-add-property:active,
+.manifest-editor .variable-or-property:focus .variables-view-add-property {
+  list-style-image: none;
+  -moz-image-region: initial;
+}
+
+.manifest-editor .variables-view-delete::before,
+.manifest-editor .variables-view-add-property::before {
+  width: 11px;
+  height: 11px;
+  content: "";
+  display: inline-block;
+  background-size: 11px auto;
+}
+
+.manifest-editor .variables-view-delete::before {
+  background-image: url("app-manager/remove.svg");
+}
+
+.manifest-editor .variables-view-add-property::before {
+  background-image: url("app-manager/add.svg");
+  -moz-margin-end: 2px;
+}
+
+.side-menu-widget-group-checkbox .checkbox-spacer-box,
+.side-menu-widget-item-checkbox .checkbox-spacer-box {
+  margin: 0;
+  border: none;
+}