update to 41.0b2

61 files changed, 1441 insertions, 1216 deletions

diff --git a/arc-firefox-theme/chrome/browser/devtools/add.svg b/arc-firefox-theme/chrome/browser/devtools/add.svg
index af162e3..b8b93de 100644
--- a/arc-firefox-theme/chrome/browser/devtools/add.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/add.svg
@@ -1,3 +1,9 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g fill="#babec3">
+    <rect x="3" y="7" width="10" height="2" />
+    <rect x="7" y="3" width="2" height="10" />
+  </g>
+</svg>
\ No newline at end of file
diff --git a/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg b/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg
new file mode 100644
index 0000000..ee84427
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/animation-fast-track.svg
@@ -0,0 +1,9 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12">
+  <g transform="matrix(1.0251088,0,0,0.85613344,-3.1546734,-888.94343)">
+    <path d="m 5.1284819,1038.3667 6.4950901,0 -2.7147491,4.6651 2.9438561,0 -8.1148915,9.3081 1.6126718,-6.8973 -2.2701022,0 z" style="fill:#4cb0e1;"/>
+  </g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
index 6cc0bdb..40efab7 100644
--- a/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
+++ b/arc-firefox-theme/chrome/browser/devtools/animationinspector.css
@@ -1,3 +1,17 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Animation-inspector specific theme variables */
+
+.theme-dark {
+  --even-animation-timeline-background-color: rgba(255,255,255,0.03);
+}
+
+.theme-light {
+  --even-animation-timeline-background-color: rgba(128,128,128,0.03);
+}
+
 html {
   height: 100%;
 }
@@ -32,6 +46,13 @@ body {
   min-height: 20px;
 }
 
+/* The main animations container */
+
+#players {
+  height: calc(100% - 20px);
+  overflow: auto;
+}
+
 /* The error message, shown when an invalid/unanimated element is selected */
 
 #error-message {
@@ -44,12 +65,6 @@ body {
   display: none;
 }
 
-/* The animation players container */
-
-#players {
-  flex: 1;
-  overflow: auto;
-}
 
 /* Element picker and toggle-all buttons */
 
@@ -99,6 +114,156 @@ body {
   }
 }
 
+/* Animation timeline component */
+
+.animation-timeline {
+  height: 100%;
+  overflow: hidden;
+  /* The timeline gets its background-image from a canvas element created in
+     /browser/devtools/animationinspector/utils.js drawGraphElementBackground
+     thanks to document.mozSetImageElement("time-graduations", canvas)
+     This is done so that the background can be built dynamically from script */
+  background-image: -moz-element(#time-graduations);
+  background-repeat: repeat-y;
+  /* The animations are drawn 150px from the left edge so that animated nodes
+     can be displayed in a sidebar */
+  background-position: 150px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.animation-timeline .time-header {
+  margin-left: 150px;
+  height: 20px;
+  overflow: hidden;
+  position: relative;
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.animation-timeline .time-header .time-tick {
+  position: absolute;
+  top: 3px;
+}
+
+.animation-timeline .animations {
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+/* Animation block widgets */
+
+.animation-timeline .animation {
+  margin: 4px 0;
+  height: 20px;
+  position: relative;
+}
+
+.animation-timeline .animation:nth-child(2n) {
+  background-color: var(--even-animation-timeline-background-color);
+}
+
+.animation-timeline .animation .target {
+  width: 150px;
+  overflow: hidden;
+  height: 100%;
+}
+
+.animation-timeline .animation-target {
+  background-color: transparent;
+}
+
+.animation-timeline .animation .time-block {
+  position: absolute;
+  top: 0;
+  left: 150px;
+  right: 0;
+  height: 100%;
+}
+
+/* Animation iterations */
+
+.animation-timeline .animation .iterations {
+  position: relative;
+  height: 100%;
+  border: 1px solid var(--theme-highlight-lightorange);
+  box-sizing: border-box;
+  background: var(--theme-contrast-background);
+  /* Iterations are displayed with a repeating linear-gradient which size is
+     dynamically changed from JS */
+  background-image:
+    linear-gradient(to right,
+                    var(--theme-highlight-lightorange) 0,
+                    var(--theme-highlight-lightorange) 1px,
+                    transparent 1px,
+                    transparent 2px);
+  background-repeat: repeat-x;
+  background-position: -1px 0;
+}
+
+.animation-timeline .animation .iterations.infinite {
+  border-right-width: 0;
+}
+
+.animation-timeline .animation .iterations.infinite::before,
+.animation-timeline .animation .iterations.infinite::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0;
+  height: 0;
+  border-right: 4px solid var(--theme-body-background);
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+}
+
+.animation-timeline .animation .iterations.infinite::after {
+  bottom: 0;
+  top: unset;
+}
+
+.animation-timeline .animation .animation-title {
+  height: 1.5em;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.animation-timeline .animation .delay {
+  position: absolute;
+  top: 0;
+  height: 100%;
+  background-image: linear-gradient(to bottom,
+                                    transparent,
+                                    transparent 9px,
+                                    var(--theme-highlight-lightorange) 9px,
+                                    var(--theme-highlight-lightorange) 11px,
+                                    transparent 11px,
+                                    transparent);
+}
+
+.animation-timeline .animation .delay::before {
+  position: absolute;
+  content: "";
+  left: 0;
+  width: 2px;
+  height: 8px;
+  top: 50%;
+  margin-top: -4px;
+  background: var(--theme-highlight-lightorange);
+}
+
+.animation-timeline .animation .name {
+  position: absolute;
+  z-index: 1;
+  padding: 2px;
+  white-space: nowrap;
+}
+
 /* Animation target node gutter, contains a preview of the dom node */
 
 .animation-target {
@@ -147,6 +312,17 @@ body {
   margin: 0 .5em;
 }
 
+.animation-title .meta-data .compositor-icon {
+    display: none;
+    background-image: url("animation-fast-track.svg");
+    background-repeat: no-repeat;
+    padding-left: 12px;
+    /* Make sure the icon is positioned above the timeline range input so that
+       its tooltip appears on hover */
+    z-index: 1;
+    position: relative;
+}
+
 /* Timeline wiget */
 
 .timeline {
@@ -253,4 +429,4 @@ body {
   width: 50px;
   border-left: 1px solid var(--theme-splitter-color);
   background: var(--theme-toolbar-background);
-}
+}
\ No newline at end of file
diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg
index f1b5594..4a8e12a 100644
--- a/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/add.svg
@@ -1,12 +1,7 @@
 <?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 xmlns="http://www.w3.org/2000/svg" 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/error.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg
index 21261cd..7876e46 100644
--- a/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/error.svg
@@ -1,13 +1,7 @@
 <?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 xmlns="http://www.w3.org/2000/svg" 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/index-icons.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg
index b0a414d..3fea1e4 100644
--- a/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/index-icons.svg
@@ -1,80 +1,18 @@
 <?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>

+<!-- This Source Code Form is subject to the terms of the Mozilla Public

+   - License, v. 2.0. If a copy of the MPL was not distributed with this

+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

+<svg xmlns="http://www.w3.org/2000/svg" width="160px" height="240px" viewBox="0 0 160 240">

+  <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"/>

+  <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"/>

+  <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"/>

+  <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"/>

+  <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"/>

+  <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"/>

+  <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"/>

+  <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"/>

+  <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"/>

 </svg>

diff --git a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg
index 10e8d2b..d21764e 100644
--- a/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/plus.svg
@@ -1,12 +1,7 @@
 <?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 xmlns="http://www.w3.org/2000/svg" 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/remove.svg b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg
index 3d36871..9b98e8f 100644
--- a/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/remove.svg
@@ -1,10 +1,7 @@
 <?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 xmlns="http://www.w3.org/2000/svg" width="64px" height="64px" viewBox="0 0 64 64">
+  <path fill="#ff6b00" 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"/>
 </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
index 95c42a4..a0cca5c 100644
--- a/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/rocket.svg
@@ -1,30 +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="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
   <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>
+    <path fill="#fff" 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="#fff" 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"/>
+    <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>
 </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
index 89e7c6f..d26e2e6 100644
--- a/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/app-manager/warning.svg
@@ -1,13 +1,7 @@
 <?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 xmlns="http://www.w3.org/2000/svg" width="64px" height="64px" viewBox="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/common.css b/arc-firefox-theme/chrome/browser/devtools/common.css
index 9cbb98d..0a655c7 100644
--- a/arc-firefox-theme/chrome/browser/devtools/common.css
+++ b/arc-firefox-theme/chrome/browser/devtools/common.css
@@ -9,6 +9,11 @@
   font-size: 80%;
 }
 
+/* Bottom-docked toolbox minimize transition */
+.devtools-toolbox-bottom-iframe {
+  transition: margin-bottom .1s;
+}
+
 /* Splitters */
 .devtools-horizontal-splitter {
   -moz-appearance: none;
@@ -35,6 +40,11 @@
   cursor: e-resize;
 }
 
+.devtools-horizontal-splitter.disabled,
+.devtools-side-splitter.disabled {
+  pointer-events: none;
+}
+
 .devtools-toolbox-side-iframe {
   min-width: 465px;
 }
diff --git a/arc-firefox-theme/chrome/browser/devtools/computedview.css b/arc-firefox-theme/chrome/browser/devtools/computedview.css
index b920d7b..f8b0d62 100644
--- a/arc-firefox-theme/chrome/browser/devtools/computedview.css
+++ b/arc-firefox-theme/chrome/browser/devtools/computedview.css
@@ -153,7 +153,7 @@ body {
 
 #root .devtools-toolbar {
   width: 100%;
-  display: -moz-box;
+  display: flex;
 }
 
 .link {
@@ -183,9 +183,9 @@ body {
 
 .computedview-colorswatch {
   border-radius: 50%;
-  width: 1em;
-  height: 1em;
-  vertical-align: text-top;
+  width: 0.9em;
+  height: 0.9em;
+  vertical-align: middle;
   -moz-margin-end: 5px;
   display: inline-block;
   position: relative;
diff --git a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css
index 4068fb0..bfc0fa1 100644
--- a/arc-firefox-theme/chrome/browser/devtools/dark-theme.css
+++ b/arc-firefox-theme/chrome/browser/devtools/dark-theme.css
@@ -669,6 +669,7 @@ div.CodeMirror span.eval-text {
 .devtools-button {
   border: 0 solid var(--theme-splitter-color);
   background: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
   margin: 0;
   padding: 0;
   min-width: 32px;
@@ -719,6 +720,11 @@ div.CodeMirror span.eval-text {
   background-repeat: no-repeat;
 }
 
+.devtools-button[disabled]::before,
+.devtools-button:disabled::before {
+  opacity: 0.5;
+}
+
 @media (min-resolution: 1.25dppx) {
   .devtools-button::before {
     background-size: 32px;
@@ -767,8 +773,8 @@ div.CodeMirror span.eval-text {
 
 /* Searchbox is a div container element for a search input element */
 .devtools-searchbox {
-  display: -moz-box;
-  -moz-box-flex: 1;
+  display: flex;
+  flex: 1;
   position: relative;
 }
 
@@ -1056,6 +1062,20 @@ div.CodeMirror span.eval-text {
   background-image: url("chrome://browser/skin/devtools/undock@2x.png");
 }
 
+#toolbox-dock-bottom-minimize {
+  /* Bug 1177463 - The minimize button is currently hidden until we agree on
+     the UI for it, and until bug 1173849 is fixed too. */
+  display: none;
+}
+
+#toolbox-dock-bottom-minimize > image {
+  background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png");
+}
+
+#toolbox-dock-bottom-minimize.minimized > image {
+  background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png");
+}
+
 #toolbox-dock-window,
 #toolbox-dock-bottom,
 #toolbox-dock-side {
diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png
new file mode 100644
index 0000000..feb4d78
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-maximize@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png
new file mode 100644
index 0000000..a82983c
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/dock-bottom-minimize@2x.png
diff --git a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg
index 09b65c7..7592790 100644
--- a/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/dropmarker.svg
@@ -1,3 +1,6 @@
-<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
+<!-- This Source Code Form is subject to the terms of the Mozilla Public

+   - License, v. 2.0. If a copy of the MPL was not distributed with this

+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

+<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4" viewBox="0 0 8 4">

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

+</svg>

diff --git a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg
index e8ff440..fa893f4 100644
--- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-close.svg
@@ -1,4 +1,7 @@
 <?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">

+<!-- This Source Code Form is subject to the terms of the Mozilla Public

+   - License, v. 2.0. If a copy of the MPL was not distributed with this

+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#000" 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
index fd8209d..1faebe4 100644
--- a/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/filetype-dir-open.svg
@@ -1,4 +1,7 @@
 <?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">

+<!-- This Source Code Form is subject to the terms of the Mozilla Public

+   - License, v. 2.0. If a copy of the MPL was not distributed with this

+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="#000" 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
index 809e098..bf1fe2d 100644
--- a/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/filetype-globe.svg
@@ -1,3 +1,6 @@
-<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"/>

+<!-- This Source Code Form is subject to the terms of the Mozilla Public

+   - License, v. 2.0. If a copy of the MPL was not distributed with this

+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

+<svg xmlns="http://www.w3.org/2000/svg" width="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
index 95be627..01d3625 100644
--- a/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/filetype-store.svg
@@ -1,7 +1,8 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16">
+  <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"/>
 </svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg
index 37dcab4..1f63b4f 100644
--- a/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/filter-swatch.svg
@@ -2,16 +2,11 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" 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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12px" height="12px">
+  <mask id="mask">
+    <rect width="100%" height="100%" fill="#fff"/>
+    <polygon points="12,0 0,0 0,12"/>
+  </mask>
+  <circle cx="6" cy="6" r="6" fill="#fff"/>
+  <circle cx="6" cy="6" r="6" mask="url(#mask)" fill="#aeb0b1"/>
 </svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/filters.svg b/arc-firefox-theme/chrome/browser/devtools/filters.svg
index 916028b..1f51d32 100644
--- a/arc-firefox-theme/chrome/browser/devtools/filters.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/filters.svg
@@ -1,3 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
 <svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter id="invert" x="0%" y="0%" width="100%" height="100%" >
   <feComponentTransfer>
diff --git a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css
index ff70d64..934a38e 100644
--- a/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css
+++ b/arc-firefox-theme/chrome/browser/devtools/floating-scrollbars.css
@@ -9,8 +9,10 @@ scrollbar {
   padding: 2px;
 }
 
+/* Scrollbar code will reset the margin to the correct side depending on
+   where layout actually puts the scrollbar */
 scrollbar[orient="vertical"] {
-  -moz-margin-start: -10px;
+  margin-left: -10px;
   min-width: 10px;
   max-width: 10px;
 }
diff --git a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css
index 30424df..2c4a365 100644
--- a/arc-firefox-theme/chrome/browser/devtools/font-inspector.css
+++ b/arc-firefox-theme/chrome/browser/devtools/font-inspector.css
@@ -3,6 +3,9 @@
 }
 
 body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   margin: 0;
   padding-bottom: 20px;
 }
diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg
index 7bd7028..c2accab 100644
--- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-ltr.svg
@@ -1,4 +1,7 @@
-<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"/>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12">
+  <path fill="#181d20" d="M7,11.6 7,.4 1.5,6z"/>
+  <path fill="#000" d="M7,0 6,0 0,6 6,12 7,12 7,11.6 1.5,6 7,.4z"/>
 </svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg
index 9315d9e..18d3702 100644
--- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-dark-rtl.svg
@@ -1,4 +1,7 @@
-<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
+<!-- This Source Code Form is subject to the terms of the Mozilla Public

+   - License, v. 2.0. If a copy of the MPL was not distributed with this

+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12">

+  <path fill="#181d20" d="M0,11.6 0,.4 5.5,6z"/>

+  <path fill="#000" d="M1,0 0,0 0,.4 5.5,6 0,11.6 0,12 1,12 7,6z"/>

+</svg>

diff --git a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg
index 93913c9..bca667a 100644
--- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-ltr.svg
@@ -1,4 +1,7 @@
-<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"/>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12">
+  <path fill="#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
index e580b88..e83fa63 100755
--- a/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/itemArrow-rtl.svg
@@ -1,4 +1,7 @@
-<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"/>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12">
+  <path fill="#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/layoutview.css b/arc-firefox-theme/chrome/browser/devtools/layoutview.css
index 8027a4c..642e89c 100644
--- a/arc-firefox-theme/chrome/browser/devtools/layoutview.css
+++ b/arc-firefox-theme/chrome/browser/devtools/layoutview.css
@@ -1,16 +1,67 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/ */
 
 .theme-sidebar {
   box-sizing: border-box;
 }
 
+body {
+  /* The view will grow bigger as the window gets resized, until 400px */
+  max-width: 400px;
+  margin: 0px auto;
+  padding: 0;
+  /* "Contain" the absolutely positioned #main element */
+  position: relative;
+}
+
+/* Header: contains the position and size of the element */
+
+#header {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 4px 14px;
+  display: -moz-box;
+  vertical-align: top;
+}
+
+#header:-moz-dir(rtl) {
+  -moz-box-direction: reverse;
+}
+
+#header > span {
+  display: -moz-box;
+}
+
+#element-size {
+  -moz-box-flex: 1;
+}
+
+#element-size:-moz-dir(rtl) {
+  -moz-box-pack: end;
+}
+
+@media (max-height: 228px) {
+  #header {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-top: 10px;
+    margin-bottom: 8px;
+  }
+}
+
+/* Main: contains the box-model regions */
+
 #main {
+  position: absolute;
+  box-sizing: border-box;
+  /* The regions are semi-transparent, so the white background is partly
+     visible */
   background-color: white;
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted;
   color: var(--theme-selection-color);
+  /* Make sure there is some space between the window's edges and the regions */
+  margin: 0 14px 10px 14px;
+  width: calc(100% - 2 * 14px);
 }
 
 .margin,
@@ -18,43 +69,271 @@
   color: var(--theme-highlight-blue);
 }
 
+/* Regions are 3 nested elements with wide borders and outlines */
+
 #content {
-  background-color: #87ceeb;
-  border-color: hsl(210,100%,85%);
-  border-style: dotted;
+  height: 25px;
 }
 
-#padding,
-#margins {
+#margins,
+#borders,
+#padding {
   border-color: hsla(210,100%,85%,0.2);
+  border-width: 25px;
+  border-style: solid;
   outline: dotted 1px hsl(210,100%,85%);
 }
 
-#padding {
-  background-color: #6a5acd;
+#margins {
+  /* This opacity applies to all of the regions, since they are nested */
+  opacity: .8;
 }
 
-#borders {
-  background-color: #444444;
-  border-style: dotted;
-  border-color: hsl(210,100%,85%);
+/* Respond to window size change by changing the size of the regions */
+
+@media (max-height: 228px) {
+  #content {
+    height: 18px;
+  }
+
+  #margins,
+  #borders,
+  #padding {
+    border-width: 18px;
+  }
 }
 
+/* Regions colors */
+
 #margins {
-  background-color: #edff64;
-  /* This opacity applies to all of the regions, since they are nested. */
-  opacity: .8;
+  border-color: #edff64;
+}
+
+#borders {
+  border-color: #444444;
+}
+
+#padding {
+  border-color: #6a5acd;
+}
+
+#content {
+  background-color: #87ceeb;
+}
+
+/* Editable region sizes are contained in absolutely positioned <p> */
+
+#main > p {
+  position: absolute;
+  pointer-events: none;
 }
 
+#main > p {
+  margin: 0;
+  text-align: center;
+}
+
+#main > p > span {
+  vertical-align: middle;
+  pointer-events: auto;
+}
+
+/* Coordinates for the region sizes */
+
+.top,
+.bottom {
+  width: calc(100% - 2px);
+  text-align: center;
+}
+
+.padding.top {
+  top: 55px;
+}
+
+.padding.bottom {
+  bottom: 57px;
+}
+
+.border.top {
+  top: 30px;
+}
+
+.border.bottom {
+  bottom: 31px;
+}
+
+.margin.top {
+  top: 5px;
+}
+
+.margin.bottom {
+  bottom: 6px;
+}
+
+.size,
+.margin.left,
+.margin.right,
+.border.left,
+.border.right,
+.padding.left,
+.padding.right {
+  top: 22px;
+  line-height: 132px;
+}
+
+.size {
+  width: calc(100% - 2px);
+}
+
+.margin.right,
+.margin.left,
+.border.left,
+.border.right,
+.padding.right,
+.padding.left {
+  width: 25px;
+}
+
+.padding.left {
+  left: 52px;
+}
+
+.padding.right {
+  right: 51px;
+}
+
+.border.left {
+  left: 26px;
+}
+
+.border.right {
+  right: 26px;
+}
+
+.margin.right {
+  right: 0;
+}
+
+.margin.left {
+  left: 0;
+}
+
+.rotate.left:not(.editing) {
+  transform: rotate(-90deg);
+}
+
+.rotate.right:not(.editing) {
+  transform: rotate(90deg);
+}
+
+/* Coordinates should be different when the window is small, because we make
+   the regions smaller then */
+
+@media (max-height: 228px) {
+  .padding.top {
+    top: 37px;
+  }
+
+  .padding.bottom {
+    bottom: 38px;
+  }
+
+  .border.top {
+    top: 19px;
+  }
+
+  .border.bottom {
+    bottom: 20px;
+  }
+
+  .margin.top {
+    top: 1px;
+  }
+
+  .margin.bottom {
+    bottom: 2px;
+  }
+
+  .size,
+  .margin.left,
+  .margin.right,
+  .border.left,
+  .border.right,
+  .padding.left,
+  .padding.right {
+    line-height: 80px;
+  }
+
+  .margin.right,
+  .margin.left,
+  .border.left,
+  .border.right,
+  .padding.right,
+  .padding.left {
+    width: 21px;
+  }
+
+  .padding.left {
+    left: 35px;
+  }
+
+  .padding.right {
+    right: 35px;
+  }
+
+  .border.left {
+    left: 16px;
+  }
+
+  .border.right {
+    right: 17px;
+  }
+}
+
+/* Legend, displayed inside regions */
+
+.legend {
+  position: absolute;
+  margin: 5px 6px;
+  z-index: 1;
+}
+
+.legend[data-box="margin"] {
+  color: var(--theme-highlight-blue);
+}
+
+@media (max-height: 228px) {
+  .legend {
+    margin: 2px 6px;
+  }
+}
+
+/* Editable fields */
+
 .editable {
   border: 1px dashed transparent;
+  -moz-user-select: text;
 }
 
 .editable:hover {
-  border-bottom-color: hsl(0,0%,50%);
+  border-bottom-color: hsl(0, 0%, 50%);
 }
 
 .styleinspector-propertyeditor {
-  border: 1px solid #CCC;
+  border: 1px solid #ccc;
   padding: 0;
 }
+
+/* Make sure the content size doesn't appear as editable like the other sizes */
+
+.size > span {
+  cursor: default;
+}
+
+/* Hide all values when the view is inactive */
+
+body.inactive > #header > #element-position,
+body.inactive > #header > #element-size,
+body.inactive > #main > p {
+   visibility: hidden;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/light-theme.css b/arc-firefox-theme/chrome/browser/devtools/light-theme.css
index ac6a511..ea8b1fe 100644
--- a/arc-firefox-theme/chrome/browser/devtools/light-theme.css
+++ b/arc-firefox-theme/chrome/browser/devtools/light-theme.css
@@ -667,6 +667,7 @@ div.CodeMirror span.eval-text {
 .devtools-button {
   border: 0 solid var(--theme-splitter-color);
   background: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
   margin: 0;
   padding: 0;
   min-width: 32px;
@@ -717,6 +718,11 @@ div.CodeMirror span.eval-text {
   background-repeat: no-repeat;
 }
 
+.devtools-button[disabled]::before,
+.devtools-button:disabled::before {
+  opacity: 0.5;
+}
+
 @media (min-resolution: 1.25dppx) {
   .devtools-button::before {
     background-size: 32px;
@@ -765,8 +771,8 @@ div.CodeMirror span.eval-text {
 
 /* Searchbox is a div container element for a search input element */
 .devtools-searchbox {
-  display: -moz-box;
-  -moz-box-flex: 1;
+  display: flex;
+  flex: 1;
   position: relative;
 }
 
@@ -1054,6 +1060,20 @@ div.CodeMirror span.eval-text {
   background-image: url("chrome://browser/skin/devtools/undock@2x.png");
 }
 
+#toolbox-dock-bottom-minimize {
+  /* Bug 1177463 - The minimize button is currently hidden until we agree on
+     the UI for it, and until bug 1173849 is fixed too. */
+  display: none;
+}
+
+#toolbox-dock-bottom-minimize > image {
+  background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png");
+}
+
+#toolbox-dock-bottom-minimize.minimized > image {
+  background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png");
+}
+
 #toolbox-dock-window,
 #toolbox-dock-bottom,
 #toolbox-dock-side {
diff --git a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css
index 96ba494..92f2efc 100644
--- a/arc-firefox-theme/chrome/browser/devtools/netmonitor.css
+++ b/arc-firefox-theme/chrome/browser/devtools/netmonitor.css
@@ -7,6 +7,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+:root.theme-dark {
+  --table-splitter-color: rgba(255,255,255,0.15);
+  --table-zebra-background: rgba(255,255,255,0.05);
+}
+:root.theme-light {
+  --table-splitter-color: rgba(0,0,0,0.15);
+  --table-zebra-background: rgba(0,0,0,0.05);
+}
+
 #requests-menu-empty-notice {
   margin: 0;
   padding: 12px;
@@ -33,7 +42,6 @@
   margin: 0;
 }
 
-
 /* Network requests table */
 
 #requests-menu-toolbar {
@@ -49,26 +57,9 @@
   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:not(:last-child),
+.requests-menu-subitem:not(:last-child) {
+  -moz-border-end: 1px solid var(--table-splitter-color);
 }
 
 .requests-menu-header-button {
@@ -138,12 +129,8 @@
   -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-icon {
+  outline: 1px solid var(--table-splitter-color);
 }
 
 .requests-menu-file {
@@ -164,10 +151,6 @@
   -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);
 }
@@ -219,80 +202,42 @@ label.requests-menu-status-code {
   -moz-margin-end: -3em !important;
 }
 
-.theme-dark box.requests-menu-status:not([code]) {
-  background-color: rgba(95, 115, 135, 1); /* dark grey */
+box.requests-menu-status:not([code]) {
+  background-color: var(--theme-content-color2);
 }
 
-.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 */
+box.requests-menu-status[code="cached"] {
+  border: 2px solid var(--theme-content-color2);
   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 */
+box.requests-menu-status[code^="1"] {
+  background-color: var(---theme-highlight-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 */
+box.requests-menu-status[code^="2"] {
+  background-color: var(--theme-highlight-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"] {
+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-bottom: 10px solid var(--theme-highlight-lightorange);
   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 */
+box.requests-menu-status[code^="4"] {
+  background-color: var(--theme-highlight-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! */
+box.requests-menu-status[code^="5"] {
+  background-color: var(--theme-highlight-pink);
   border-radius: 0;
   transform: rotate(45deg);
 }
@@ -433,17 +378,26 @@ label.requests-menu-status-code {
 }
 
 /* SideMenuWidget */
+#network-table .side-menu-widget-empty-text,
+#network-table .side-menu-widget-container {
+  background-color: var(--theme-body-background);
+}
+
+#network-table .side-menu-widget-item {
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+}
 
 .side-menu-widget-item-contents {
   padding: 0px;
 }
 
-.theme-dark .side-menu-widget-item:not(.selected)[odd] {
-  background: rgba(255,255,255,0.05);
+.side-menu-widget-item:not(.selected)[odd] {
+  background-color: var(--table-zebra-background);
 }
 
-.theme-light .side-menu-widget-item:not(.selected)[odd] {
-  background: rgba(128,128,128,0.05);
+.side-menu-widget-item:not(.selected):hover {
+  background-color: var(--theme-selection-background-semitransparent);
 }
 
 /* Network request details */
@@ -486,11 +440,18 @@ label.requests-menu-status-code {
 
 /* Network request details tabpanels */
 
+.tabpanel-content {
+  background-color: var(--theme-sidebar-background);
+}
+
 .theme-dark .tabpanel-content {
-  background-color: var(--theme-toolbar-background);
   color: var(--theme-selection-color);
 }
 
+#headers-tabpanel {
+  background-color: var(--theme-toolbar-background);
+}
+
 /* Summary tabpanel */
 
 .tabpanel-summary-container {
@@ -628,16 +589,9 @@ label.requests-menu-status-code {
 
 /* 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;
+#requests-menu-footer {
   background-color: var(--theme-toolbar-background);
+  border-top: 1px solid var(--table-splitter-color);
 }
 
 .requests-menu-footer-button,
@@ -664,14 +618,12 @@ label.requests-menu-status-code {
 
 .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);
+  -moz-border-start: 1px solid var(--table-splitter-color);
 }
 
 .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);
+  -moz-border-start: 1px solid var(--table-splitter-color);
 }
 
 .requests-menu-footer-button {
@@ -683,22 +635,13 @@ label.requests-menu-status-code {
   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 */
+.requests-menu-footer-button:hover:active {
+  background-color: var(--theme-selection-background-semitransparent);
 }
 
-.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-button:not(:active)[checked] {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 .requests-menu-footer-label {
@@ -778,7 +721,7 @@ label.requests-menu-status-code {
 }
 
 #network-statistics-charts {
-  background-color: var(--theme-toolbar-background);
+  background-color: var(--theme-sidebar-background);
 }
 
 #network-statistics-charts .pie-chart-container {
diff --git a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg
index 3004e04..a115938 100644
--- a/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/performance-icons.svg
@@ -1,42 +1,45 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public

+   - License, v. 2.0. If a copy of the MPL was not distributed with this

+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

 <svg xmlns="http://www.w3.org/2000/svg" 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>

+  <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
index 50c375c..1187fd8 100644
--- a/arc-firefox-theme/chrome/browser/devtools/performance.css
+++ b/arc-firefox-theme/chrome/browser/devtools/performance.css
@@ -10,6 +10,7 @@
 /* CSS Variables specific to this panel that aren't defined by the themes */
 .theme-dark {
   --cell-border-color: rgba(255,255,255,0.15);
+  --cell-border-color-light: rgba(255,255,255,0.1);
   --focus-cell-border-color: rgba(255,255,255,0.5);
   --row-alt-background-color: rgba(29,79,115,0.15);
   --row-hover-background-color: rgba(29,79,115,0.25);
@@ -17,6 +18,7 @@
 
 .theme-light {
   --cell-border-color: rgba(0,0,0,0.15);
+  --cell-border-color-light: rgba(0,0,0,0.1);
   --focus-cell-border-color: rgba(0,0,0,0.3);
   --row-alt-background-color: rgba(76,158,217,0.1);
   --row-hover-background-color: rgba(76,158,217,0.2);
@@ -24,19 +26,10 @@
 
 /* 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;
@@ -64,128 +57,142 @@
   border-radius: 1px;
 }
 
-/* Recording Notice */
+/* Details panel buttons */
 
-#performance-view .notice-container {
-  font-size: 120%;
-  background-color: var(--theme-toolbar-background);
-  color: var(--theme-body-color);
-  padding-bottom: 20vh;
+#select-waterfall-view {
+  list-style-image: url(performance-icons.svg#details-waterfall);
 }
 
-#performance-view .notice-container button {
-  min-width: 30px;
-  min-height: 28px;
-  margin: 0;
+#select-js-calltree-view,
+#select-memory-calltree-view {
+  list-style-image: url(performance-icons.svg#details-call-tree);
 }
 
-#performance-view .notice-container vbox {
-  text-align: center;
+#select-js-flamegraph-view,
+#select-memory-flamegraph-view {
+  list-style-image: url(performance-icons.svg#details-flamegraph);
 }
 
-.console-profile-command {
-  font-family: monospace;
-  margin: 3px 2px;
+#select-optimizations-view {
+  list-style-image: url(profiler-stopwatch.svg);
 }
 
-#performance-view .realtime-message {
-  opacity: 0.5;
-  display: block;
+/* Recording buttons */
+
+#main-record-button {
+  list-style-image: url(profiler-stopwatch.svg);
 }
 
-#performance-view toolbarbutton.record-button {
-  padding: 5px;
+#main-record-button[checked] {
+  list-style-image: url(profiler-stopwatch-checked.svg);
 }
 
-#performance-view toolbarbutton.record-button[checked],
-#performance-view toolbarbutton.record-button[checked] {
-  color: var(--theme-selection-color);
-  background: var(--theme-selection-background);
+#main-record-button .button-icon {
+  margin: 0;
 }
 
-#performance-view .realtime-disabled-message,
-#performance-view .realtime-disabled-on-e10s-message {
+#main-record-button .button-text {
   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;
+.notice-container .record-button {
+  padding: 5px !important;
+}
 
+.notice-container .record-button[checked],
+.notice-container .record-button[checked] {
+  color: var(--theme-selection-color) !important;
+  background: var(--theme-selection-background) !important;
 }
-#performance-view[e10s="unsupported"] .realtime-disabled-message {
-  display: block;
+
+.record-button[locked] {
+  pointer-events: none;
   opacity: 0.5;
 }
 
-#details-pane-container .buffer-status-message,
-#details-pane-container .buffer-status-message-full {
-  display: none;
-}
+/* Sidebar & recording items */
 
-#details-pane-container[buffer-status="in-progress"] .buffer-status-message {
-  display: block;
-  opacity: 0.5;
+.recording-item {
+  padding: 4px;
 }
 
-#details-pane-container[buffer-status="full"] .buffer-status-message {
-  display: block;
-  color: var(--theme-highlight-red);
-  font-weight: bold;
-  opacity: 1;
+.recording-item-title {
+  font-size: 110%;
 }
 
-#details-pane-container[buffer-status="full"] .buffer-status-message-full {
-  display: block;
+.recording-item-footer {
+  padding-top: 4px;
+  font-size: 90%;
 }
 
-/* Overview Panel */
+.recording-item-save {
+  text-decoration: underline;
+  cursor: pointer;
+}
 
-#main-record-button {
-  list-style-image: url(profiler-stopwatch.svg);
+.recording-item-duration,
+.recording-item-save {
+  color: var(--theme-body-color-alt);
 }
 
-#main-record-button[checked] {
-  list-style-image: url(profiler-stopwatch-checked.svg);
+#recordings-list .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
 }
 
-#main-record-button[locked] {
-  pointer-events: none;
+/* Recording notices */
+
+.notice-container {
+  font-size: 120%;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
+  padding-bottom: 20vh;
 }
 
-#main-record-button .button-icon {
-  margin: 0;
+.console-profile-command {
+  font-family: monospace;
+  margin: 3px 2px;
 }
 
-#main-record-button .button-text {
+.realtime-disabled-message,
+.realtime-disabled-on-e10s-message {
   display: none;
 }
 
-/* Details Panel */
+#performance-view[e10s="disabled"] .realtime-disabled-on-e10s-message {
+  display: initial;
+  opacity: 0.5;
 
-#select-waterfall-view {
-  list-style-image: url(performance-icons.svg#details-waterfall);
+}
+#performance-view[e10s="unsupported"] .realtime-disabled-message {
+  display: initial;
+  opacity: 0.5;
 }
 
-#select-js-calltree-view,
-#select-memory-calltree-view {
-  list-style-image: url(performance-icons.svg#details-call-tree);
+.buffer-status-message,
+.buffer-status-message-full {
+  display: none;
 }
 
-#select-js-flamegraph-view,
-#select-memory-flamegraph-view {
-  list-style-image: url(performance-icons.svg#details-flamegraph);
+#details-pane-container[buffer-status="in-progress"] .buffer-status-message {
+  display: initial;
+  opacity: 0.5;
+}
+
+#details-pane-container[buffer-status="full"] .buffer-status-message {
+  display: initial;
+  color: var(--theme-highlight-red);
+  font-weight: bold;
+  opacity: 1;
+}
+
+#details-pane-container[buffer-status="full"] .buffer-status-message-full {
+  display: initial;
 }
 
 /* Profile call tree */
 
 .call-tree-cells-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
   overflow: auto;
 }
 
@@ -257,7 +264,7 @@
   background-color: var(--theme-tab-toolbar-background);
 }
 
-.call-tree-item:last-child:not(:focus) {
+.call-tree-item:last-child {
   border-bottom: 1px solid var(--cell-border-color);
 }
 
@@ -273,7 +280,7 @@
   background-color: var(--theme-selection-background);
 }
 
-.call-tree-item:focus label {
+.call-tree-item:focus description {
   color: var(--theme-selection-color) !important;
 }
 
@@ -320,119 +327,131 @@
   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;
+.call-tree-category {
+  transform: scale(0.75);
+  transform-origin: center right;
 }
 
-.theme-dark .call-tree-zoom {
-  background-image: url(magnifying-glass.png);
-}
+/**
+ * Waterfall ticks header
+ */
 
-.theme-light .call-tree-zoom {
-  background-image: url(magnifying-glass-light.png);
+.waterfall-header-ticks {
+  overflow: hidden;
 }
 
-@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);
-  }
+.waterfall-header-name {
+  padding: 2px 4px;
+  font-size: 90%;
 }
 
-.call-tree-item:hover .call-tree-zoom {
-  transition: opacity 0.3s ease-in;
-  opacity: 1;
+.waterfall-header-tick {
+  width: 100px;
+  font-size: 9px;
+  transform-origin: left center;
+  color: var(--theme-body-color);
 }
 
-.call-tree-item:hover .call-tree-zoom:hover {
-  opacity: 0;
+.waterfall-header-tick:not(:first-child) {
+  -moz-margin-start: -100px !important; /* Don't affect layout. */
 }
 
-.call-tree-category {
-  transform: scale(0.75);
-  transform-origin: center right;
+.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;
 }
 
 /**
- * Details Waterfall Styles
+ * Markers waterfall breakdown
  */
 
-.waterfall-list-contents {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
+#waterfall-breakdown {
   overflow-x: hidden;
   overflow-y: auto;
 }
 
-.waterfall-header-contents {
-  overflow-x: hidden;
+.theme-light .waterfall-tree-item:not([level="0"]) {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0px,
+    transparent 2px,
+    rgba(0,0,0,0.025) 2px,
+    rgba(0,0,0,0.025) 4px
+  );
 }
 
-.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;
+.theme-dark .waterfall-tree-item:not([level="0"]) {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0px,
+    transparent 2px,
+    rgba(255,255,255,0.05) 2px,
+    rgba(255,255,255,0.05) 4px
+  );
 }
 
-.waterfall-marker-container[is-spacer] {
-  pointer-events: none;
+.theme-light .waterfall-tree-item[expandable] .waterfall-marker-bullet,
+.theme-light .waterfall-tree-item[expandable] .waterfall-marker-bar {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0px,
+    transparent 5px,
+    rgba(255,255,255,0.35) 5px,
+    rgba(255,255,255,0.35) 10px
+  );
 }
 
-.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
-  background-color: rgba(255,255,255,0.03);
+.theme-dark .waterfall-tree-item[expandable] .waterfall-marker-bullet,
+.theme-dark .waterfall-tree-item[expandable] .waterfall-marker-bar {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0px,
+    transparent 5px,
+    rgba(0,0,0,0.35) 5px,
+    rgba(0,0,0,0.35) 10px
+  );
 }
 
-.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
-  background-color: rgba(128,128,128,0.03);
+.waterfall-tree-item[expanded],
+.waterfall-tree-item:not([level="0"]) + .waterfall-tree-item[level="0"] {
+  box-shadow: 0 -1px var(--cell-border-color-light);
 }
 
-.theme-dark .waterfall-marker-container:hover {
-  background-color: rgba(255,255,255,0.1) !important;
+.waterfall-tree-item:nth-child(2n) > .waterfall-marker {
+  background-color: var(--row-alt-background-color);
 }
 
-.theme-light .waterfall-marker-container:hover {
-  background-color: rgba(128,128,128,0.1) !important;
+.waterfall-tree-item:hover {
+  background-color: var(--row-hover-background-color);
 }
 
-.waterfall-marker-item {
-  overflow: hidden;
+.waterfall-tree-item:last-child {
+  border-bottom: 1px solid var(--cell-border-color);
 }
 
-.waterfall-sidebar {
-  -moz-border-end: 1px solid var(--theme-splitter-color);
+.waterfall-tree-item:focus {
+  background-color: var(--theme-selection-background);
 }
 
-.waterfall-marker-container:hover > .waterfall-sidebar {
-  background-color: transparent;
+.waterfall-tree-item:focus description {
+  color: var(--theme-selection-color) !important;
 }
 
-.waterfall-header-name {
-  padding: 2px 4px;
-  font-size: 90%;
-}
+/**
+ * Marker left sidebar
+ */
 
-.waterfall-header-tick {
-  width: 100px;
-  font-size: 9px;
-  transform-origin: left center;
-  color: var(--theme-body-color);
+.waterfall-sidebar {
+  -moz-border-end: 1px solid var(--cell-border-color);
 }
 
-.waterfall-header-tick:not(:first-child) {
-  -moz-margin-start: -100px !important; /* Don't affect layout. */
+.waterfall-tree-item > .waterfall-sidebar:hover,
+.waterfall-tree-item:hover > .waterfall-sidebar,
+.waterfall-tree-item:focus > .waterfall-sidebar {
+  background: transparent;
 }
 
 .waterfall-marker-bullet {
@@ -448,18 +467,30 @@
   padding-bottom: 1px !important;
 }
 
+/**
+ * Marker timebar
+ */
+
+.waterfall-marker {
+  overflow: hidden;
+}
+
 .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-marker > .theme-twisty {
+  /* Don't affect layout. */
+  width: 14px;
+  -moz-margin-end: -14px;
 }
 
+/**
+ * Marker details view
+ */
+
 #waterfall-details {
   -moz-padding-start: 8px;
   -moz-padding-end: 8px;
@@ -468,12 +499,33 @@
   min-width: 50px;
 }
 
+#waterfall-details > * {
+  padding-top: 3px;
+}
+
 .marker-details-bullet {
   width: 8px;
   height: 8px;
   border-radius: 1px;
 }
 
+.marker-details-labelname {
+  -moz-padding-end: 4px;
+}
+
+.marker-details-type {
+  font-size: 1.2em;
+  font-weight: bold;
+}
+
+.marker-details-duration {
+  font-weight: bold;
+}
+
+/**
+ * Marker colors
+ */
+
 menuitem.marker-color-graphs-purple:before,
 .marker-color-graphs-purple {
   background-color: var(--theme-graphs-purple);
@@ -499,53 +551,6 @@ menuitem.marker-color-graphs-blue:before,
   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
  */
@@ -640,33 +645,59 @@ menuitem.marker-color-graphs-blue:before,
   cursor: pointer;
 }
 
-#jit-optimizations-view .opt-icon::before {
+.opt-icon::before {
   content: "";
-  background-image: url(chrome://browser/skin/devtools/webconsole.png);
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg);
   background-repeat: no-repeat;
-  background-size: 48px 40px;
-  margin: 5px 6px 0 0;
-  width: 8px;
-  height: 8px;
-  max-height: 8px;
+  background-size: 72px 60px;
+  /* show grey "i" bubble by default */
+  background-position: -36px -36px;
+  width: 12px;
+  height: 12px;
   display: inline-block;
+
+  max-height: 12px;
+}
+
+#jit-optimizations-view .opt-icon::before {
+  margin: 5px 6px 0 0;
+}
+description.opt-icon {
+  margin: 0px 0px 0px 0px;
+}
+description.opt-icon::before {
+  margin: 1px 4px 0px 0px;
+}
+.theme-light .opt-icon::before {
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons);
+}
+.opt-icon[severity=warning]::before {
+  background-position: -24px -24px;
+}
+.opt-icon[type=linkable]::before {
+  cursor: pointer;
 }
 
-#jit-optimizations-view .opt-icon[severity=warning]::before {
-  background-position: -16px -16px;
+ul.frames-list {
+  list-style-type: none;
+  padding: 0px;
+  margin: 0px;
 }
 
-@media (min-resolution: 1.25dppx) {
-  #jit-optimizations-view .opt-icon::before {
-    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
-  }
+ul.frames-list li {
+  cursor: pointer;
+}
+
+ul.frames-list li.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
 }
 
 /**
  * Configurable Options
  *
- * Elements can be tagged with a class and visibility is controlled via a preference being
- * applied or removed.
+ * Elements can be tagged with a class and visibility is controlled via a
+ * preference being applied or removed.
  */
 
 /**
@@ -674,21 +705,21 @@ menuitem.marker-color-graphs-blue:before,
  */
 menuitem.experimental-option::before {
   content: "";
-  background-image: url(chrome://browser/skin/devtools/webconsole.png);
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg);
   background-repeat: no-repeat;
-  background-size: 48px 40px;
-  margin: 2px 5px 0 0;
-  width: 8px;
-  height: 8px;
-  max-height: 8px;
+  background-size: 72px 60px;
+  width: 12px;
+  height: 12px;
   display: inline-block;
-  background-position: -16px -16px;
+
+  background-position: -24px -24px;
+  margin: 2px 5px 0 0;
+  max-height: 12px;
 }
-@media (min-resolution: 1.25dppx) {
-  menuitem.experimental-option::before {
-    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
-  }
+.theme-light menuitem.experimental-option::before {
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons);
 }
+
 #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
index f675e30..d3a3284 100644
--- a/arc-firefox-theme/chrome/browser/devtools/power.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/power.svg
@@ -10,5 +10,5 @@ The above copyright notice and this permission notice shall be included in all c
 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"/>
+  <path stroke="#babec3" stroke-width="0" fill="#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"/>
 </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
index f682354..abe68dc 100644
--- a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch-checked.svg
@@ -1,14 +1,17 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="#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
index e9fe8f9..690fc7d 100644
--- a/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/profiler-stopwatch.svg
@@ -1,14 +1,17 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="#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
deleted file mode 100644
index 8f127cd..0000000
--- a/arc-firefox-theme/chrome/browser/devtools/profiler.css
+++ /dev/null
@@ -1,400 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-/* 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/pseudo-class.svg b/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg
new file mode 100644
index 0000000..830d5fa
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/pseudo-class.svg
@@ -0,0 +1,29 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <style>
+      use[id^="pseudo-class"]:not(:target) {
+        display: none;
+      }
+    </style>
+    <rect id="class-block-maskBG" width="8" height="8" fill="#fff"/>
+    <rect id="class-block" width="8" height="8" rx="1" ry="1"/>
+    <mask id="mask-block-solid">
+      <use xlink:href="#class-block-maskBG"/>
+      <use xlink:href="#class-block" transform="translate(3 3)" fill="#000"/>
+    </mask>
+    <g id="pseudo-class-shape">
+      <rect x=".5" y=".5" width="7" height="7" rx="1" ry="1" mask="url(#mask-block-solid)" fill="none" stroke="currentColor" stroke-width="1"/>
+      <use xlink:href="#class-block" mask="url(#mask-block-solid)" fill="currentColor" fill-opacity=".4"/>
+      <use xlink:href="#class-block" mask="url(#mask-block-solid)" fill="currentColor" transform="translate(4 4)"/>
+      <g transform="translate(8 8)" fill="currentColor">
+        <path d="M2.5,0C2.2,0,2,0.2,2,0.5C2,0.8,2.2,1,2.5,1C2.8,1,3,0.8,3,0.5 C3,0.2,2.8,0,2.5,0z M4.5,0C4.2,0,4,0.2,4,0.5C4,0.8,4.2,1,4.5,1C4.8,1,5,0.8,5,0.5C5,0.2,4.8,0,4.5,0z M0.5,6C0.8,6,1,5.8,1,5.5 C1,5.2,0.8,5,0.5,5C0.2,5,0,5.2,0,5.5C0,5.8,0.2,6,0.5,6z M0.5,4C0.8,4,1,3.8,1,3.5C1,3.2,0.8,3,0.5,3C0.2,3,0,3.2,0,3.5 C0,3.8,0.2,4,0.5,4z M7.5,2C7.2,2,7,2.2,7,2.5C7,2.8,7.2,3,7.5,3C7.8,3,8,2.8,8,2.5C8,2.2,7.8,2,7.5,2z M7.5,4C7.2,4,7,4.2,7,4.5 C7,4.8,7.2,5,7.5,5C7.8,5,8,4.8,8,4.5C8,4.2,7.8,4,7.5,4z M5.5,7C5.2,7,5,7.2,5,7.5C5,7.8,5.2,8,5.5,8C5.8,8,6,7.8,6,7.5 C6,7.2,5.8,7,5.5,7z M3.5,7C3.2,7,3,7.2,3,7.5C3,7.8,3.2,8,3.5,8C3.8,8,4,7.8,4,7.5C4,7.2,3.8,7,3.5,7z M0.5,2C0.8,2,1,1.8,1,1.5v-1 C1,0.2,0.8,0,0.5,0C0.2,0,0,0.2,0,0.5v1C0,1.8,0.2,2,0.5,2z M8,0.5C8,0.2,7.8,0,7.5,0h-1C6.2,0,6,0.2,6,0.5C6,0.8,6.2,1,6.5,1h1 C7.8,1,8,0.8,8,0.5z M7.5,6C7.2,6,7,6.2,7,6.5v1C7,7.8,7.2,8,7.5,8C7.8,8,8,7.8,8,7.5v-1C8,6.2,7.8,6,7.5,6z M1.5,7h-1 C0.2,7,0,7.2,0,7.5C0,7.8,0.2,8,0.5,8h1C1.8,8,2,7.8,2,7.5C2,7.2,1.8,7,1.5,7z"/>
+        <use xlink:href="#class-block" fill-opacity=".2"/>
+      </g>
+    </g>
+  </defs>
+  <use xlink:href="#pseudo-class-shape" id="pseudo-class" color="#babec3"/>
+  <use xlink:href="#pseudo-class-shape" id="pseudo-class-checked" color="#3089C9"/>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/ruleview.css b/arc-firefox-theme/chrome/browser/devtools/ruleview.css
index 8c2e3d1..c38224c 100644
--- a/arc-firefox-theme/chrome/browser/devtools/ruleview.css
+++ b/arc-firefox-theme/chrome/browser/devtools/ruleview.css
@@ -16,15 +16,15 @@
 }
 
 .ruleview-rule-source {
-  -moz-padding-start: 5px;
   text-align: end;
   float: right;
   -moz-user-select: none;
+  margin-bottom: 2px;
 }
 
-.ruleview-rule-source,
 .ruleview-rule-source > label {
   cursor: pointer;
+  margin: 0;
 }
 
 .ruleview-rule-source[unselectable],
@@ -57,7 +57,11 @@
   padding: 2px 4px;
 }
 
-/* User agent styles are not editable, display them differently */
+/**
+ * Display rules that don't match the current selected element and uneditable
+ * user agent styles differently
+ */
+.ruleview-rule[unmatched=true],
 .ruleview-rule[uneditable=true] {
   background: var(--theme-tab-toolbar-background);
 }
@@ -158,9 +162,9 @@
 .ruleview-swatch {
   cursor: pointer;
   border-radius: 50%;
-  width: 1em;
-  height: 1em;
-  vertical-align: text-top;
+  width: 0.9em;
+  height: 0.9em;
+  vertical-align: middle;
   -moz-margin-end: 5px;
   display: inline-block;
   position: relative;
@@ -262,3 +266,39 @@
 .ruleview-selectorhighlighter.highlighted {
   background-position: -16px 0;
 }
+
+#ruleview-add-rule-button::before {
+  background-image: url("chrome://browser/skin/devtools/add.svg");
+  background-size: cover;
+}
+
+#pseudo-class-panel-toggle::before {
+  background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
+  background-size: cover;
+}
+#pseudo-class-panel-toggle[checked]::before {
+  background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
+  filter: none !important;
+}
+
+/**
+ * These buttons are using opacity instead of background color to indicate
+ * the state
+ */
+#ruleview-add-rule-button,
+#pseudo-class-panel-toggle {
+  opacity: 0.8;
+}
+
+#ruleview-add-rule-button:not([disabled]):hover,
+#pseudo-class-panel-toggle:hover,
+#pseudo-class-panel-toggle[checked] {
+  opacity: 1;
+}
+
+#ruleview-add-rule-button,
+#pseudo-class-panel-toggle,
+#pseudo-class-panel-toggle:hover,
+#pseudo-class-panel-toggle[checked]::before {
+  background-color: transparent !important;
+}
diff --git a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg
index 77779e8..422a7ce 100644
--- a/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-dark.svg
@@ -2,20 +2,14 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     x="0"
-     y="0"
-     width="32"
-     height="16"
-     viewBox="0 0 32 16">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="16" viewBox="0 0 32 16">
   <defs>
     <path id="glyphShape-clear" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0 z M11.9,10.5l-1.4,1.4L8,9.4l-2.4,2.4l-1.4-1.4L6.6,8L4.2,5.6l1.4-1.4L8,6.6l2.4-2.4l1.4,1.4L9.4,8L11.9,10.5z"/>
-    <style type="text/css">
+    <style>
       .icon-state-default { fill: #f5f7fa; fill-opacity: .6; }
       .icon-state-pressed { fill: #7d7e80; fill-opacity: .8; }
     </style>
   </defs>
-  <use xlink:href="#glyphShape-clear" class="icon-state-default" />
-  <use xlink:href="#glyphShape-clear" class="icon-state-pressed" transform="translate(16)" />
+  <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
index fc65d21..a8f9fd8 100644
--- a/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-failed.svg
@@ -2,20 +2,14 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     x="0"
-     y="0"
-     width="32"
-     height="16"
-     viewBox="0 0 32 16">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="16" viewBox="0 0 32 16">
   <defs>
     <path id="glyphShape-clear" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0 z M11.9,10.5l-1.4,1.4L8,9.4l-2.4,2.4l-1.4-1.4L6.6,8L4.2,5.6l1.4-1.4L8,6.6l2.4-2.4l1.4,1.4L9.4,8L11.9,10.5z"/>
-    <style type="text/css">
+    <style>
       .icon-state-default { fill: #cc3d3d; fill-opacity: 1; }
       .icon-state-pressed { fill: #802d2d; fill-opacity: 1; }
     </style>
   </defs>
-  <use xlink:href="#glyphShape-clear" class="icon-state-default" />
-  <use xlink:href="#glyphShape-clear" class="icon-state-pressed" transform="translate(16)" />
+  <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
index 205b744..066ef44 100644
--- a/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/search-clear-light.svg
@@ -2,20 +2,14 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     x="0"
-     y="0"
-     width="32"
-     height="16"
-     viewBox="0 0 32 16">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="16" viewBox="0 0 32 16">
   <defs>
     <path id="glyphShape-clear" d="M8,0C3.6,0,0,3.6,0,8c0,4.4,3.6,8,8,8s8-3.6,8-8C16,3.6,12.4,0,8,0 z M11.9,10.5l-1.4,1.4L8,9.4l-2.4,2.4l-1.4-1.4L6.6,8L4.2,5.6l1.4-1.4L8,6.6l2.4-2.4l1.4,1.4L9.4,8L11.9,10.5z"/>
-    <style type="text/css">
+    <style>
       .icon-state-default { fill: #1d2126; fill-opacity: .5; }
       .icon-state-pressed { fill: #1d2126; fill-opacity: .8; }
     </style>
   </defs>
-  <use xlink:href="#glyphShape-clear" class="icon-state-default" />
-  <use xlink:href="#glyphShape-clear" class="icon-state-pressed" transform="translate(16)" />
+  <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/timeline-filter.svg b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg
index e050d20..1919e2c 100644
--- a/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/timeline-filter.svg
@@ -2,36 +2,25 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <style>
+    use:not(:target) {
+      display: none;
+    }
+    use {
+      fill: #babec3;
+    }
+    use[id$="-disabled"] {
+      fill-opacity: 0.5;
+    }
+    use[id$="-open"] {
+      fill: #3bace5;
+    }
+  </style>
+  <defs>
+    <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/tool-debugger-paused.svg b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg
index ae294f6..998f21b 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger-paused.svg
@@ -1,3 +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">
-<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"/>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <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
index 128e6e8..655d482 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-debugger.svg
@@ -1,7 +1,10 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <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
index 5a8cbb8..45ec67f 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-inspector.svg
@@ -1,9 +1,12 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="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
index bec394d..8e232d6 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-network.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-network.svg
@@ -1,36 +1,39 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="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=".05" 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
index 62a6d75..2885ef9 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-options.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-options.svg
@@ -1,3 +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">
-<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"/>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <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
index eff1673..0882cca 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler-active.svg
@@ -1,14 +1,17 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="#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
index d8e1bdd..8441af3 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-profiler.svg
@@ -1,14 +1,17 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="#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
index ad2133a..c1e8e08 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-scratchpad.svg
@@ -1,6 +1,9 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <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-shadereditor.svg b/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg
new file mode 100644
index 0000000..e4e239a
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-shadereditor.svg
@@ -0,0 +1,26 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <rect x="2" y="2" width="12" height="12" fill="#edf0f1" fill-opacity=".1"/>
+  <polygon points="2,2 14,14 2,14" fill="#edf0f1" fill-opacity=".35"/>
+  <rect x="2.5" y="2.5" width="11" height="11" fill="none" stroke="#edf0f1" stroke-width="1"/>
+  <g fill="#edf0f1" fill-opacity=".65">
+    <polygon points="3,3 5,3 5,5"/>
+    <rect x="11" y="3" width="2" height="2"/>
+    <rect x="7" y="3" width="2" height="2"/>
+    <polygon points="5,5 7,5 7,7"/>
+    <rect x="9" y="5" width="2" height="2"/>
+    <polygon points="7,7 9,7 9,9"/>
+    <rect x="11" y="7" width="2" height="2"/>
+    <polygon points="9,9 11,9 11,11"/>
+    <polygon points="11,11 13,11 13,13"/>
+  </g>
+  <line x1="3" y1="3" x2="13" y2="13" stroke="#edf0f1" stroke-width="1"/>
+  <g fill="#edf0f1">
+    <circle cx="2" cy="2" r="1"/>
+    <circle cx="14" cy="2" r="1"/>
+    <circle cx="2" cy="14" r="1"/>
+    <circle cx="14" cy="14" r="1"/>
+  </g>
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg
index 7f5013b..8c2c291 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-storage.svg
@@ -1,7 +1,10 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="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
index ac1f5c7..e123f45 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-styleeditor.svg
@@ -1,6 +1,9 @@
-<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>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="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
index 59d9d90..cd317de 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-webaudio.svg
@@ -1,3 +1,6 @@
-<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">
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="-6.167 -16.135 100 100">
   <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
+</svg>
diff --git a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg
index 0739e82..f62307d 100644
--- a/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg
+++ b/arc-firefox-theme/chrome/browser/devtools/tool-webconsole.svg
@@ -1,3 +1,6 @@
-<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"/>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#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/webconsole.css b/arc-firefox-theme/chrome/browser/devtools/webconsole.css
index 7b89259..d875c23 100644
--- a/arc-firefox-theme/chrome/browser/devtools/webconsole.css
+++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.css
@@ -27,10 +27,11 @@ a {
   box-sizing: border-box;
 }
 
+.message > .prefix,
 .message > .timestamp {
   flex: none;
   color: GrayText;
-  margin: 4px 6px 0 0;
+  margin: 3px 6px 0 0;
 }
 
 .message > .indent {
@@ -47,19 +48,17 @@ a {
 
 .message > .icon::before {
   content: "";
-  background-image: url(chrome://browser/skin/devtools/webconsole.png);
-  background-position: 8px 8px;
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg);
+  background-position: 12px 12px;
   background-repeat: no-repeat;
-  background-size: 48px 40px;
-  width: 8px;
-  height: 8px;
+  background-size: 72px 60px;
+  width: 12px;
+  height: 12px;
   display: inline-block;
 }
 
-@media (min-resolution: 1.25dppx) {
-  .message > .icon::before {
-    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
-  }
+.theme-light .message > .icon::before {
+  background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons);
 }
 
 .message > .message-body-wrapper {
@@ -231,7 +230,7 @@ a {
 }
 
 .message[category=network][severity=error] > .icon::before {
-  background-position: -8px 0;
+  background-position: -12px 0;
 }
 
 .message[category=network] > .message-body {
@@ -288,11 +287,11 @@ a {
 }
 
 .message[category=cssparser][severity=error] > .icon::before {
-  background-position: -8px -8px;
+  background-position: -12px -12px;
 }
 
 .message[category=cssparser][severity=warn] > .icon::before {
-  background-position: -16px -8px;
+  background-position: -24px -12px;
 }
 
 /* JS styles */
@@ -306,11 +305,11 @@ a {
 }
 
 .message[category=exception][severity=error] > .icon::before {
-  background-position: -8px -16px;
+  background-position: -12px -24px;
 }
 
 .message[category=exception][severity=warn] > .icon::before {
-  background-position: -16px -16px;
+  background-position: -24px -24px;
 }
 
 /* Web Developer styles */
@@ -325,15 +324,15 @@ a {
 
 .message[category=console][severity=error] > .icon::before,
 .message[category=output][severity=error] > .icon::before {
-  background-position: -8px -24px;
+  background-position: -12px -36px;
 }
 
 .message[category=console][severity=warn] > .icon::before {
-  background-position: -16px -24px;
+  background-position: -24px -36px;
 }
 
 .message[category=console][severity=info] > .icon::before {
-  background-position: -24px -24px;
+  background-position: -36px -36px;
 }
 
 /* Input and output styles */
@@ -343,11 +342,11 @@ a {
 }
 
 .message[category=input] > .icon::before {
-  background-position: -32px -24px;
+  background-position: -48px -36px;
 }
 
 .message[category=output] > .icon::before {
-  background-position: -40px -24px;
+  background-position: -60px -36px;
 }
 
 /* JSTerm Styles */
@@ -414,11 +413,11 @@ a {
 }
 
 .message[category=security][severity=error] > .icon::before {
-  background-position: -8px -32px;
+  background-position: -12px -48px;
 }
 
 .message[category=security][severity=warn] > .icon::before {
-  background-position: -16px -32px;
+  background-position: -24px -48px;
 }
 
 .navigation-marker {
diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.png b/arc-firefox-theme/chrome/browser/devtools/webconsole.png
deleted file mode 100644
index 8aee790..0000000
--- a/arc-firefox-theme/chrome/browser/devtools/webconsole.png
+++ /dev/null
diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole.svg b/arc-firefox-theme/chrome/browser/devtools/webconsole.svg
new file mode 100644
index 0000000..6c21e54
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/devtools/webconsole.svg
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="60" viewBox="0 0 72 60">
+  <defs>
+    <rect id="glyphShape-colorSwatch" width="8" height="8" ry="2" rx="2"/>
+    <rect id="glyphShape-colorSwatch-border" width="10" height="10" ry="2" rx="2"/>
+    <polygon id="glyphShape-errorX" points="9.9,8.5 8.5,9.9 6,7.4 3.6,9.8 2.2,8.4 4.6,6 2.2,3.6 3.6,2.2 6,4.6 8.4,2.2 9.8,3.6 7.4,6"/>
+    <path id="glyphShape-warningTriangle" d="M9.9,8.6l-3.1-6C6.6,2.2,6.3,2,6,2C5.7,2,5.4,2.2,5.2,2.5l-3.1,6C2,8.9,2,9.3,2.1,9.6C2.3,9.8,2.6,10,2.9,10 h6.1c0.4,0,0.6-0.2,0.8-0.4C10,9.3,10,8.9,9.9,8.6z"/>
+    <path id="glyphShape-exclamationPoint" d="M6,7.7c-0.6,0-1,0.4-1,0.8C5,9,5.4,9.3,6,9.3c0.6,0,1-0.4,1-0.8 C7,8.1,6.6,7.7,6,7.7z M6,7c0.6,0,1-0.4,1-1V5c0-0.6-0.4-1-1-1S5,4.4,5,5v1C5,6.6,5.4,7,6,7z"/>
+    <circle id="glyphShape-infoCircle" cx="6" cy="6" r="4"/>
+    <path id="glyphShape-infoGlyph" d="M6,6C5.4,6,5,6.4,5,7v1c0,0.6,0.4,1,1,1s1-0.4,1-1V7C7,6.4,6.6,6,6,6z M6,5c0.6,0,1-0.4,1-1S6.6,3,6,3S5,3.4,5,4S5.4,5,6,5z"/>
+    <style>
+      .icon-colorSwatch-border {
+        fill: #fff;
+        fill-opacity: .7;
+      }
+      .icon-colorSwatch-network {
+        fill: #000;
+      }
+      .icon-colorSwatch-css {
+        fill: #00b6f0;
+      }
+      .icon-colorSwatch-js {
+        fill: #fb9500;
+      }
+      .icon-colorSwatch-logging {
+        fill: #808080;
+      }
+      .icon-colorSwatch-security {
+        fill: #ec1e0d;
+      }
+      .icon-glyphOverlay {
+        fill: #fff;
+      }
+
+      #icon-indicator-input {
+        fill: #8fa1b2;
+      }
+      #icon-indicator-output {
+        fill: #667380;
+      }
+      #light-icons:target #icon-indicator-input {
+        fill: #45494d;
+      }
+      #light-icons:target #icon-indicator-output {
+        fill: #8a9199;
+      }
+    </style>
+  </defs>
+  <g id="icon-colorSwatch-network">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-network" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-css" transform="translate(0 12)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-css" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-js" transform="translate(0 24)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-js" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-logging" transform="translate(0 36)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-logging" x="2" y="2"/>
+  </g>
+  <g id="icon-colorSwatch-security" transform="translate(0 48)">
+    <use xlink:href="#glyphShape-colorSwatch-border" class="icon-colorSwatch-border" x="1" y="1"/>
+    <use xlink:href="#glyphShape-colorSwatch" class="icon-colorSwatch-security" x="2" y="2"/>
+  </g>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-network" class="icon-colorSwatch-network" transform="translate(12)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-css" class="icon-colorSwatch-css" transform="translate(12 12)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-js" class="icon-colorSwatch-js" transform="translate(12 24)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-logging" class="icon-colorSwatch-logging" transform="translate(12 36)"/>
+  <use xlink:href="#glyphShape-errorX" id="icon-errorX-security" class="icon-colorSwatch-security" transform="translate(12 48)"/>
+  <g id="icon-warningTriangle-css" transform="translate(24 12)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-css"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-warningTriangle-js" transform="translate(24 24)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-js"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-warningTriangle-logging" transform="translate(24 36)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-logging"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-warningTriangle-security" transform="translate(24 48)">
+    <use xlink:href="#glyphShape-warningTriangle" class="icon-colorSwatch-security"/>
+    <use xlink:href="#glyphShape-exclamationPoint" class="icon-glyphOverlay"/>
+  </g>
+  <g id="icon-infoCircle-logging" transform="translate(36 36)">
+    <use xlink:href="#glyphShape-infoCircle" class="icon-colorSwatch-logging"/>
+    <use xlink:href="#glyphShape-infoGlyph" class="icon-glyphOverlay"/>
+  </g>
+  <g id="light-icons">
+    <path id="icon-indicator-input" d="M6.5,1.2L5.4,2.3L9,6L5.3,9.7l1.1,1.1L11,6L6.5,1.2z M1.5,1.2 L0.4,2.3L4,6L0.3,9.7l1.1,1.1L6,6L1.5,1.2z" transform="translate(48 36)"/>
+    <polygon id="icon-indicator-output" points="10,5 4.3,5 6.8,2.4 5.5,1.2 1,6 5.5,10.8 6.9,9.6 4.3,7 10,7" transform="translate(60 36)"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png b/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png
deleted file mode 100644
index 2d5e97f..0000000
--- a/arc-firefox-theme/chrome/browser/devtools/webconsole@2x.png
+++ /dev/null
diff --git a/arc-firefox-theme/chrome/browser/devtools/widgets.css b/arc-firefox-theme/chrome/browser/devtools/widgets.css
index 0ef2f9f..17a96ad 100644
--- a/arc-firefox-theme/chrome/browser/devtools/widgets.css
+++ b/arc-firefox-theme/chrome/browser/devtools/widgets.css
@@ -1018,10 +1018,6 @@
 
 /* Bar graph widget */
 
-.bar-graph-widget-canvas {
-  background: #f7f7f7;
-}
-
 .bar-graph-widget-legend {
   position: absolute;
   top: 4px;