Base import of Tycho code (warning: huge commit)

author: Pale Moon <git-repo@palemoon.org> 2016-09-01 13:39:08 +0200
committer: Pale Moon <git-repo@palemoon.org> 2016-09-01 13:39:08 +0200
commit: 3d8ce1a11a7347cc94a937719c4bc8df46fb8d14 (patch)
tree: 8c26ca375a6312751c00a27e1653fb6f189f0463 /browser/themes
parent: e449bdb1ec3a82f204bffdd9c3c54069d086eee3 (diff)
download: palemoon-gre-3d8ce1a11a7347cc94a937719c4bc8df46fb8d14.tar.gz
563 files changed, 12958 insertions, 11915 deletions
diff --git a/browser/themes/linux/Makefile.in b/browser/themes/linux/Makefile.in
index 353289fb2..3b81bbf31 100644
--- a/browser/themes/linux/Makefile.in
+++ b/browser/themes/linux/Makefile.in
@@ -2,15 +2,7 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-DEPTH		= @DEPTH@
-topsrcdir	= @top_srcdir@
-srcdir		= @srcdir@
-VPATH		= @srcdir@
-
-include $(DEPTH)/config/autoconf.mk
-
 ICON_FILES := icon.png
 ICON_DEST = $(FINAL_TARGET)/extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}
 INSTALL_TARGETS += ICON
 
-include $(topsrcdir)/config/rules.mk
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
index 8fd26344a..79437b819 100644
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1203,6 +1203,7 @@ toolbar[iconsize="small"] #webrtc-status-button {
 .popup-notification-icon[popupid="addon-progress"],
 .popup-notification-icon[popupid="addon-install-cancelled"],
 .popup-notification-icon[popupid="addon-install-blocked"],
+.popup-notification-icon[popupid="addon-install-origin-blocked"],
 .popup-notification-icon[popupid="addon-install-failed"],
 .popup-notification-icon[popupid="addon-install-complete"] {
   list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png);
@@ -2119,7 +2120,6 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
 
 %ifdef MOZ_DEVTOOLS
 %include ../shared/devtools/responsivedesign.inc.css
-%include ../shared/devtools/highlighter.inc.css
 %include ../shared/devtools/commandline.inc.css
 %endif
 %include ../shared/plugin-doorhanger.inc.css
diff --git a/browser/themes/linux/communicator/moz.build b/browser/themes/linux/communicator/moz.build
index 895d11993..c97072bba 100644
--- a/browser/themes/linux/communicator/moz.build
+++ b/browser/themes/linux/communicator/moz.build
@@ -4,3 +4,4 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+JAR_MANIFESTS += ['jar.mn']
+\ No newline at end of file
diff --git a/browser/themes/linux/devtools/arrow-e.png b/browser/themes/linux/devtools/arrow-e.png
deleted file mode 100644
index 09691bc5e..000000000
--- a/browser/themes/linux/devtools/arrow-e.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/background-noise-toolbar.png b/browser/themes/linux/devtools/background-noise-toolbar.png
deleted file mode 100644
index d09ba9daf..000000000
--- a/browser/themes/linux/devtools/background-noise-toolbar.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs-scrollbutton.png b/browser/themes/linux/devtools/breadcrumbs-scrollbutton.png
deleted file mode 100644
index 722438060..000000000
--- a/browser/themes/linux/devtools/breadcrumbs-scrollbutton.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-end-pressed.png b/browser/themes/linux/devtools/breadcrumbs/ltr-end-pressed.png
deleted file mode 100644
index 1b0fcf986..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-end-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-end-selected-pressed.png b/browser/themes/linux/devtools/breadcrumbs/ltr-end-selected-pressed.png
deleted file mode 100644
index c7c2f39ab..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-end-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-end-selected.png b/browser/themes/linux/devtools/breadcrumbs/ltr-end-selected.png
deleted file mode 100644
index c7c2f39ab..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-end-selected.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-end.png b/browser/themes/linux/devtools/breadcrumbs/ltr-end.png
deleted file mode 100644
index 2a65f402a..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-end.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-middle-pressed.png b/browser/themes/linux/devtools/breadcrumbs/ltr-middle-pressed.png
deleted file mode 100644
index 1d2611dda..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-middle-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-middle-selected-pressed.png b/browser/themes/linux/devtools/breadcrumbs/ltr-middle-selected-pressed.png
deleted file mode 100644
index d2b7f8dae..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-middle-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-middle-selected.png b/browser/themes/linux/devtools/breadcrumbs/ltr-middle-selected.png
deleted file mode 100644
index 2311685f8..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-middle-selected.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-middle.png b/browser/themes/linux/devtools/breadcrumbs/ltr-middle.png
deleted file mode 100644
index a99e9fabe..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-middle.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-start-pressed.png b/browser/themes/linux/devtools/breadcrumbs/ltr-start-pressed.png
deleted file mode 100644
index 30c2c2946..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-start-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-start-selected-pressed.png b/browser/themes/linux/devtools/breadcrumbs/ltr-start-selected-pressed.png
deleted file mode 100644
index a5bc6124e..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-start-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-start-selected.png b/browser/themes/linux/devtools/breadcrumbs/ltr-start-selected.png
deleted file mode 100644
index a08fb902d..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-start-selected.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/ltr-start.png b/browser/themes/linux/devtools/breadcrumbs/ltr-start.png
deleted file mode 100644
index b8a43b58c..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/ltr-start.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-end-pressed.png b/browser/themes/linux/devtools/breadcrumbs/rtl-end-pressed.png
deleted file mode 100644
index 4c57d76f1..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-end-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-end-selected-pressed.png b/browser/themes/linux/devtools/breadcrumbs/rtl-end-selected-pressed.png
deleted file mode 100644
index cd2f0a5e8..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-end-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-end-selected.png b/browser/themes/linux/devtools/breadcrumbs/rtl-end-selected.png
deleted file mode 100644
index cd2f0a5e8..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-end-selected.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-end.png b/browser/themes/linux/devtools/breadcrumbs/rtl-end.png
deleted file mode 100644
index ea9bc3255..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-end.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-middle-pressed.png b/browser/themes/linux/devtools/breadcrumbs/rtl-middle-pressed.png
deleted file mode 100644
index d6a8a4385..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-middle-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-middle-selected-pressed.png b/browser/themes/linux/devtools/breadcrumbs/rtl-middle-selected-pressed.png
deleted file mode 100644
index 61bbcb134..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-middle-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-middle-selected.png b/browser/themes/linux/devtools/breadcrumbs/rtl-middle-selected.png
deleted file mode 100644
index 066c34528..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-middle-selected.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-middle.png b/browser/themes/linux/devtools/breadcrumbs/rtl-middle.png
deleted file mode 100644
index cb87d62b2..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-middle.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-start-pressed.png b/browser/themes/linux/devtools/breadcrumbs/rtl-start-pressed.png
deleted file mode 100644
index 155f6380b..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-start-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-start-selected-pressed.png b/browser/themes/linux/devtools/breadcrumbs/rtl-start-selected-pressed.png
deleted file mode 100644
index dab115328..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-start-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-start-selected.png b/browser/themes/linux/devtools/breadcrumbs/rtl-start-selected.png
deleted file mode 100644
index a520e8088..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-start-selected.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/breadcrumbs/rtl-start.png b/browser/themes/linux/devtools/breadcrumbs/rtl-start.png
deleted file mode 100644
index 86912e066..000000000
--- a/browser/themes/linux/devtools/breadcrumbs/rtl-start.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/canvasdebugger.css b/browser/themes/linux/devtools/canvasdebugger.css
new file mode 100644
index 000000000..504c3fb9b
--- /dev/null
+++ b/browser/themes/linux/devtools/canvasdebugger.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/devtools/canvasdebugger.inc.css
diff --git a/browser/themes/linux/devtools/checkbox-dark.png b/browser/themes/linux/devtools/checkbox-dark.png
deleted file mode 100644
index e937b600b..000000000
--- a/browser/themes/linux/devtools/checkbox-dark.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/checkbox-light.png b/browser/themes/linux/devtools/checkbox-light.png
deleted file mode 100644
index 00d6d450c..000000000
--- a/browser/themes/linux/devtools/checkbox-light.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/command-paintflashing.png b/browser/themes/linux/devtools/command-paintflashing.png
deleted file mode 100644
index b785131a2..000000000
--- a/browser/themes/linux/devtools/command-paintflashing.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/command-responsivemode.png b/browser/themes/linux/devtools/command-responsivemode.png
deleted file mode 100644
index cbfa59904..000000000
--- a/browser/themes/linux/devtools/command-responsivemode.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/command-scratchpad.png b/browser/themes/linux/devtools/command-scratchpad.png
deleted file mode 100644
index 5131ca5cb..000000000
--- a/browser/themes/linux/devtools/command-scratchpad.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/command-tilt.png b/browser/themes/linux/devtools/command-tilt.png
deleted file mode 100644
index f816bba59..000000000
--- a/browser/themes/linux/devtools/command-tilt.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/commandline-icon.png b/browser/themes/linux/devtools/commandline-icon.png
deleted file mode 100644
index e120a3926..000000000
--- a/browser/themes/linux/devtools/commandline-icon.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/commandline.css b/browser/themes/linux/devtools/commandline.css
index 7eee7eb5c..06d7512ae 100644
--- a/browser/themes/linux/devtools/commandline.css
+++ b/browser/themes/linux/devtools/commandline.css
@@ -120,12 +120,13 @@
   color: hsl(210,30%,75%);
 }
 
-.gcli-menu-option:hover {
+.gcli-menu-name:hover,
+.gcli-menu-desc:hover {
   background-color: hsla(0,0%,0%,.3);
 }
 
 .gcli-menu-highlight,
-.gcli-menu-highlight.gcli-menu-option:hover {
+.gcli-menu-highlight:hover {
   background-color: hsla(0,100%,100%,.1);
 }
 
@@ -135,7 +136,7 @@
 
 .gcli-menu-more {
   font-size: 80%;
-  text-align: right;
+  text-align: end;
   -moz-padding-end: 8px;
 }
 
diff --git a/browser/themes/linux/devtools/common.css b/browser/themes/linux/devtools/common.css
deleted file mode 100644
index 86771c1a8..000000000
--- a/browser/themes/linux/devtools/common.css
+++ /dev/null
@@ -1,356 +0,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/. */
-
-/* Font for code */
-
-:root {
-  font: message-box;
-}
-
-.devtools-monospace {
-  font-family: monospace;
-  font-size: 85%;
-}
-
-/* Toolbar and Toolbar items */
-
-.devtools-toolbar {
-  -moz-appearance: none;
-  padding: 4px 3px;
-  color: hsl(210,30%,85%);
-  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
-  border-bottom: 1px solid #060a0d;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
-}
-
-.devtools-menulist,
-.devtools-toolbarbutton {
-  -moz-appearance: none;
-  -moz-box-align: center;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: 3px;
-  background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
-  margin: 0 3px;
-  color: inherit;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
-  -moz-box-orient: horizontal;
-}
-
-.devtools-menulist:-moz-focusring,
-.devtools-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.7);
-  outline-offset: -4px;
-}
-
-.devtools-toolbarbutton:not([label]) {
-  min-width: 32px;
-}
-
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
-}
-
-.devtools-toolbarbutton:not([checked=true]):hover:active {
-  border-color: hsla(210,8%,5%,.6);
-  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-menulist[open=true],
-.devtools-toolbarbutton[open=true],
-.devtools-toolbarbutton[checked=true] {
-  border-color: hsla(210,8%,5%,.6) !important;
-  background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
-  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[checked=true] {
-  color: hsl(208,100%,60%) !important;
-}
-
-.devtools-toolbarbutton[checked=true]:hover {
-  background-color: transparent !important;
-}
-
-.devtools-toolbarbutton[checked=true]:hover:active {
-  background-color: hsla(210,8%,5%,.2) !important;
-}
-
-.devtools-option-toolbarbutton {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-  background: none;
-  border: none;
-}
-
-.devtools-option-toolbarbutton[open=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-.devtools-menulist > .menulist-label-box {
-  text-align: center;
-}
-
-.devtools-menulist > .menulist-dropmarker {
-  -moz-appearance: none;
-  display: -moz-box;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  -moz-box-align: center;
-  min-width: 16px;
-}
-
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
-  color: inherit;
-  border-width: 0;
-  -moz-border-end: 1px solid hsla(210,8%,5%,.45);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[type=menu-button] {
-  padding: 0 1px;
-  -moz-box-align: stretch;
-}
-
-.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-  -moz-appearance: none !important;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  -moz-box-align: center;
-  padding: 0 3px;
-}
-
-/* Text input */
-
-.devtools-textinput,
-.devtools-searchinput {
-  -moz-appearance: none;
-  margin: 0 3px;
-  min-height: 22px;
-  border: 1px solid hsla(210,8%,5%,.6);
-  border-radius: 2px;
-  background-color: transparent;
-  background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
-  padding: 3px;
-  box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
-              0 0 0 1px hsla(210,16%,76%,.1) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-  color: inherit;
-}
-
-.devtools-searchinput {
-  padding-top: 0;
-  padding-bottom: 0;
-  -moz-padding-start: 18px;
-  -moz-padding-end: 12px;
-  background-image: url(magnifying-glass.png), linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
-  background-position: 4px center, top left, top left;
-  background-repeat: no-repeat;
-  font-size: inherit;
-}
-
-.devtools-searchinput:-moz-locale-dir(rtl) {
-  background-position: calc(100% - 4px) center, top left, top left;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
-  display: none;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
-  color: hsl(208,10%,66%);
-  opacity: 1.0;
-}
-
-.devtools-no-search-result {
-  box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35);
-  border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;
-  background-image: url(magnifying-glass.png), linear-gradient(hsla(1,16%,76%,.45), hsla(1,16%,76%,.75));
-}
-
-/* Close button */
-
-.devtools-closebutton {
-  list-style-image: url("chrome://browser/skin/devtools/close.png");
-  -moz-appearance: none;
-  border: none;
-  margin: 0 4px;
-  min-width: 16px;
-  width: 16px;
-  opacity: 0.6;
-}
-
-.devtools-closebutton > .toolbarbutton-icon {
-  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
-     use evil CSS to give the impression of smaller content */
-  margin: -4px;
-}
-
-.devtools-closebutton > .toolbarbutton-text {
-  display: none;
-}
-
-.devtools-closebutton:hover {
-  opacity: 0.8;
-}
-
-.devtools-closebutton:hover:active {
-  opacity: 1;
-}
-
-/* Splitters */
-
-.devtools-horizontal-splitter {
-  -moz-appearance: none;
-  border-top: 1px solid black;
-  border-bottom-width: 0;
-  min-height: 3px;
-  height: 3px;
-  margin-bottom: -3px;
-  position: relative;
-}
-
-.devtools-side-splitter {
-  -moz-appearance: none;
-  border: 0;
-  -moz-border-start: 1px solid black;
-  min-width: 0;
-  width: 3px;
-  background-color: transparent;
-  -moz-margin-end: -3px;
-  position: relative;
-  cursor: e-resize;
-}
-
-/* In-tools sidebar */
-
-.devtools-toolbox-side-iframe {
-  min-width: 465px;
-}
-
-.devtools-sidebar-tabs {
-  -moz-appearance: none;
-  margin: 0;
-}
-
-.devtools-sidebar-tabs > tabpanels {
-  -moz-appearance: none;
-  padding: 0;
-  border: 0;
-}
-
-.devtools-sidebar-tabs > tabs {
-  -moz-appearance: none;
-  position: static;
-  color: hsl(210,30%,85%);
-  margin-bottom: 0;
-  padding: 0;
-  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
-  border-width: 0 0 1px 0;
-  border-color: hsla(210,8%,5%,.6);
-  border-style: solid;
-  overflow: hidden;
-}
-
-.devtools-sidebar-tabs > tabs > .tabs-right,
-.devtools-sidebar-tabs > tabs > .tabs-left {
-  display: none;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  -moz-appearance: none;
-  /* We want to match the height of a toolbar with a toolbarbutton
-   * First, we need to replicated the padding of toolbar (4px),
-   * then, the padding of the button itself from toolbarbutton.css (3px),
-   * Also, we need to take the border of the buttons into accout (1px).
-   * Padding-bottom is one pixel shorter because we need to include the
-   * black border.
-   */
-  padding: 8px 3px 7px;
-  -moz-padding-start: 6px;
-  margin: 0;
-  min-width: 78px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  text-align: center;
-  color: inherit;
-  -moz-box-flex: 1;
-  border-width: 0;
-  background: transparent;
-  border-radius: 0;
-  position: static;
-  -moz-margin-start: -1px;
-}
-
-.devtools-sidebar-tabs > tabs > tab:first-of-type {
-  -moz-margin-start: -3px;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-size: 100% 100%, 1px 100%, 1px 100%, 1px 100%;
-  background-repeat: no-repeat;
-  background-position: 2px, 0, 1px, 2px;
-}
-
-.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
-  background-position: calc(100% - 3px), 100%, calc(100% - 1px), calc(100% - 2px);
-}
-
-%filter substitution
-%define smallSeparator linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0))
-%define solidSeparator linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1))
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-image: linear-gradient(transparent, transparent), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
-  background-image: linear-gradient(transparent, transparent), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] {
-  color: #f5f7fa;
-  background-image: linear-gradient(#2f607b, #294d68), @solidSeparator@;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.1) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
-  background-image: linear-gradient(#274f64, #224056), @solidSeparator@;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
-  background-image: linear-gradient(#1f3e4f, #1b3243), @solidSeparator@;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-%include ../../shared/devtools/common.inc.css
diff --git a/browser/themes/linux/devtools/computedview.css b/browser/themes/linux/devtools/computedview.css
deleted file mode 100644
index 299c606ec..000000000
--- a/browser/themes/linux/devtools/computedview.css
+++ /dev/null
@@ -1,151 +0,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/. */
-
-* {
-  box-sizing: border-box;
-}
-
-:root {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  display : flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-#propertyContainer {
-  -moz-user-select: text;
-  overflow: auto;
-  min-height: 0;
-  flex: 1;
-}
-
-.property-view-hidden,
-.property-content-hidden {
-  display: none;
-}
-
-.property-view {
-  clear: both;
-  padding: 2px 0 2px 17px;
-}
-
-.property-view > * {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.property-name {
-  width: 50%;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.property-value {
-  width: 50%;
-  max-width: 100%;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-image: url(arrow-e.png);
-  background-repeat: no-repeat;
-  background-size: 5px 8px;
-  background-position: 2px center;
-  padding-left: 10px;
-}
-
-.other-property-value {
-  background-image: url(arrow-e.png);
-  background-repeat: no-repeat;
-  background-size: 5px 8px;
-  background-position: left center;
-  padding-left: 8px;
-}
-
-@media (min-width: 400px) {
-  .property-name {
-    width: 200px;
-  }
-  .property-value {
-    width: auto;
-  }
-}
-
-.property-content {
-  padding-left: 17px;
-}
-
-/* From skin */
-.expander {
-  visibility: hidden;
-  margin-left: -12px!important;
-}
-
-.expander[open] {
-  margin-left: -17px!important;
-}
-
-.expandable {
-  visibility: visible;
-}
-
-.match {
-  visibility: hidden;
-}
-
-.matchedselectors > p {
-  clear: both;
-  margin: 0 2px 0 0;
-  padding: 2px;
-  overflow-x: hidden;
-  border-style: dotted;
-  border-color: rgba(128,128,128,0.4);
-  border-width: 1px 1px 0 1px;
-}
-
-.matchedselectors > p:last-of-type {
-  border-bottom-width: 1px;
-}
-
-/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
-.rule-text {
-  direction: ltr;
-}
-
-.matched {
-  text-decoration: line-through;
-}
-
-.parentmatch {
-  opacity: 0.5;
-}
-
-#noResults {
-  font-size: 110%;
-  margin: 5px;
-  text-align: center;
-}
-
-.onlyuserstyles {
-  cursor: pointer;
-}
-
-.legendKey {
-  margin: 0 5px;
-}
-
-.devtools-toolbar {
-  width: 100%;
-}
-
-.link {
-  padding: 0 3px;
-  cursor: pointer;
-  float: right;
-}
diff --git a/browser/themes/linux/devtools/dark-theme.css b/browser/themes/linux/devtools/dark-theme.css
deleted file mode 100644
index 97189572d..000000000
--- a/browser/themes/linux/devtools/dark-theme.css
+++ /dev/null
@@ -1,104 +0,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/. */
-
-/* According to:
- * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
- */
-.theme-body {
-  background: #131c26;
-  color: #8fa1b2
-}
-
-.theme-twisty {
-  cursor: pointer;
-  margin-right: 5px;
-}
-
-.theme-twisty:-moz-focusring {
-  outline-style: none;
-}
-
-.theme-twisty:not([open]) {
-  width: 0;
-  height: 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid rgba(255,255,255,0.5);
-  margin-left: 5px;
-}
-
-.theme-twisty[open] {
-  width: 10px;
-  height: 10px;
-  background-image: linear-gradient(to bottom right, transparent 68%,  rgba(255,255,255,0.5) 68%);
-}
-
-.theme-checkbox {
-  display: inline-block;
-  border: 0;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  outline: none;
-  background: url("chrome://browser/skin/devtools/checkbox-dark.png") no-repeat;
-}
-
-.theme-checkbox[checked] {
-  background: url("chrome://browser/skin/devtools/checkbox-dark.png") 14px 0;
-}
-
-.theme-selected {
-  background: #26384E;
-}
-
-.theme-bg-darker {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.theme-link { /* blue */
-  color: #3689b2;
-}
-
-.theme-comment { /* grey */
-  color: #5c6773;
-}
-
-.theme-gutter {
-  background-color: #0f171f;
-  color: #667380;
-  border-color: #303b47;
-}
-
-.theme-separator { /* grey */
-  border-color: #303b47;
-}
-
-.theme-fg-color1 { /* green */
-  color: #5c9966;
-}
-
-.theme-fg-color2 { /* blue */
-  color: #3689b2;
-}
-
-.theme-fg-color3 { /* pink/lavender */
-  color: #a673bf;
-}
-
-.theme-fg-color4 { /* purple/violet */
-  color: #6270b2;
-}
-
-.theme-fg-color5 { /* Yellow */
-  color: #a18650;
-}
-
-.theme-fg-color6 { /* Orange */
-  color: #b26b47;
-}
-
-.theme-fg-color7 { /* Red */
-  color: #bf5656;
-}
diff --git a/browser/themes/linux/devtools/debugger-collapse.png b/browser/themes/linux/devtools/debugger-collapse.png
deleted file mode 100644
index cde5299b7..000000000
--- a/browser/themes/linux/devtools/debugger-collapse.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/debugger-expand.png b/browser/themes/linux/devtools/debugger-expand.png
deleted file mode 100644
index ee8012ff3..000000000
--- a/browser/themes/linux/devtools/debugger-expand.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/debugger-pause.png b/browser/themes/linux/devtools/debugger-pause.png
deleted file mode 100644
index 7f908bf8b..000000000
--- a/browser/themes/linux/devtools/debugger-pause.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/debugger-play.png b/browser/themes/linux/devtools/debugger-play.png
deleted file mode 100644
index 91719826a..000000000
--- a/browser/themes/linux/devtools/debugger-play.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/debugger-step-in.png b/browser/themes/linux/devtools/debugger-step-in.png
deleted file mode 100644
index c80ee72a2..000000000
--- a/browser/themes/linux/devtools/debugger-step-in.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/debugger-step-out.png b/browser/themes/linux/devtools/debugger-step-out.png
deleted file mode 100644
index 1a7145a98..000000000
--- a/browser/themes/linux/devtools/debugger-step-out.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/debugger-step-over.png b/browser/themes/linux/devtools/debugger-step-over.png
deleted file mode 100644
index 7c9b82ad4..000000000
--- a/browser/themes/linux/devtools/debugger-step-over.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/debugger.css b/browser/themes/linux/devtools/debugger.css
index 2887d3913..7b0bd5fc4 100644
--- a/browser/themes/linux/devtools/debugger.css
+++ b/browser/themes/linux/devtools/debugger.css
@@ -1,316 +1,5 @@
-/* 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/. */
 
-#body {
-  background: #fff;
-}
-
-/* Sources and breakpoints pane */
-
-#sources-pane {
-  min-width: 50px;
-}
-
-#sources-pane + .devtools-side-splitter {
-  -moz-border-start-color: transparent;
-}
-
-/* ListWidget items */
-
-.list-widget-item {
-  padding: 2px;
-}
-
-.list-widget-item:not(.selected):not(.empty):hover {
-  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;
-}
-
-.list-widget-item.selected.light {
-  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
-  color: #000;
-}
-
-.list-widget-item.selected {
-  background: Highlight;
-  color: HighlightText;
-}
-
-.list-widget-item.empty {
-  color: GrayText;
-  padding: 2px;
-}
-
-/* Stack frames view */
-
-.dbg-stackframe-details {
-  -moz-padding-start: 4px;
-}
-
-.dbg-stackframe-menuitem[checked] {
-  margin-top: 3px;
-  margin-bottom: 3px;
-  outline: 1px solid #eee;
-  font-weight: 600;
-}
-
-.dbg-stackframe-menuitem-details {
-  -moz-padding-start: 16px;
-}
-
-/* Sources and breakpoints view */
-
-.dbg-breakpoint {
-  font-family: monospace;
-}
-
-.dbg-breakpoint-line {
-  font-weight: 600;
-}
-
-.dbg-breakpoint-text {
-  -moz-margin-start: 10px !important;
-  font-style: italic;
-}
-
-/* Watch expressions view */
-
-#expressions {
-  min-height: 10px;
-  max-height: 125px;
-}
-
-.dbg-expression {
-  height: 20px;
-}
-
-.dbg-expression-arrow {
-  width: 16px;
-  height: auto;
-  background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
-}
-
-.dbg-expression-input {
-  -moz-padding-start: 2px !important;
-  font-family: Menlo, Monaco, monospace;
-}
-
-/* Searchbox and the search operations help panel */
-
-.devtools-searchinput {
-  min-width: 220px;
-  -moz-margin-start: 1px;
-}
-
-#searchbox-panel-description {
-  margin-top: 0;
-  margin-bottom: 8px;
-  -moz-margin-start: 2px;
-}
-
-.searchbox-panel-operator-button {
-  min-width: 26px;
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 2px;
-  -moz-margin-end: 6px;
-  text-align: center;
-  font-family: Menlo, Monaco, monospace;
-}
-
-.searchbox-panel-operator-label {
-  padding-bottom: 2px;
-}
-
-/* Searchbox results panel */
-
-.results-panel {
-  padding: 4px;
-  opacity: 0.9;
-}
-
-.results-panel-item {
-  background: #f4f4f4;
-  border: 1px solid #ddd;
-  border-top-color: #fff;
-  padding: 5px;
-  cursor: pointer;
-}
-
-.results-panel-item:first-of-type {
-  border-top-color: #ddd;
-  border-radius: 4px 4px 0 0;
-}
-
-.results-panel-item:last-of-type {
-  border-radius: 0 0 4px 4px;
-}
-
-.results-panel-item:only-of-type {
-  border-radius: 4px;
-}
-
-.results-panel-item:not(.selected):not(:hover) {
-  text-shadow: 0 1px #fff;
-}
-
-.results-panel-item-pre {
-  -moz-margin-end: 5px !important;
-  color: #444;
-  cursor: inherit;
-}
-
-.results-panel-item-name {
-  color: #111;
-  font-weight: 600;
-  cursor: inherit;
-}
-
-.results-panel-item-details {
-  color: #7f7f7f;
-  cursor: inherit;
-}
-
-/* Sources search view */
-
-#globalsearch {
-  min-height: 10px;
-  box-shadow: inset 0 -4px 8px #eee;
-  background: url(background-noise-toolbar.png);
-}
-
-#globalsearch > vbox:not(:empty) {
-  min-height: 10px;
-  max-height: 125px;
-}
-
-#globalsearch + .devtools-horizontal-splitter {
-  -moz-border-top-colors: #bfbfbf;
-}
-
-.dbg-source-results {
-  padding: 0;
-  background: none !important;
-}
-
-.dbg-results-header {
-  -moz-padding-start: 6px;
-}
-
-.dbg-results-header-location {
-  font-weight: 600;
-}
-
-.dbg-results-header-match-count {
-  -moz-padding-start: 6px;
-  color: GrayText;
-}
-
-.dbg-results-line-number {
-  background: #e2e2e2;
-  min-width: 40px;
-  -moz-border-end: 1px solid #b4c4d3;
-  -moz-padding-end: 4px;
-  padding-top: 2px;
-  text-align: end;
-  font-family: monospace;
-  color: #8c8c8c;
-}
-
-.dbg-results-line-contents {
-  -moz-padding-start: 4px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  font-family: monospace;
-}
-
-.dbg-results-line-contents-string {
-  padding: 1px;
-}
-
-.dbg-results-line-contents-string[match=true] {
-  background: rgba(255,255,0,0.5);
-  padding: 0;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.dbg-results-line-contents-string[match=true][focusing] {
-  transition: transform 0.3s ease-in-out;
-}
-
-.dbg-results-line-contents-string[match=true][focused] {
-  transition-duration: 0.1s;
-  transform: scale(1.75, 1.75);
-}
-
-/* Toolbar Controls */
-
-#resumption-panel-desc {
-  width: 200px;
-}
-
-#resumption-order-panel {
-  -moz-margin-start: -8px;
-}
-
-#resume {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#resume[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#step-over {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
-}
-
-#step-in {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
-}
-
-#step-out {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
-}
-
-#debugger-controls > toolbarbutton {
-  margin: 0;
-  box-shadow: none;
-  border-radius: 0;
-  border-width: 0;
-  -moz-border-end-width: 1px;
-  outline-offset: -3px;
-}
-
-#debugger-controls > toolbarbutton:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-#debugger-controls {
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset,
-              0 0 0 1px hsla(210,16%,76%,.15) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: 3px;
-  margin: 0 3px;
-}
-
-#instruments-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border: none;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#instruments-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#instruments-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
+%include ../../shared/devtools/debugger.inc.css
diff --git a/browser/themes/linux/devtools/dock-bottom.png b/browser/themes/linux/devtools/dock-bottom.png
deleted file mode 100644
index 8fa9c932b..000000000
--- a/browser/themes/linux/devtools/dock-bottom.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/dock-side.png b/browser/themes/linux/devtools/dock-side.png
deleted file mode 100644
index 1c1235513..000000000
--- a/browser/themes/linux/devtools/dock-side.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/dropmarker.png b/browser/themes/linux/devtools/dropmarker.png
deleted file mode 100644
index 7e91860fb..000000000
--- a/browser/themes/linux/devtools/dropmarker.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/font-inspector.css b/browser/themes/linux/devtools/font-inspector.css
deleted file mode 100644
index dff3abb30..000000000
--- a/browser/themes/linux/devtools/font-inspector.css
+++ /dev/null
@@ -1,80 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding-bottom: 20px;
-}
-
-#all-fonts {
-  padding: 0 5px;
-  margin: 0;
-}
-
-#showall {
-  border-radius: 0;
-  border: 1px solid black;
-  margin: 3px;
-  cursor: pointer;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-}
-
-.font {
-  padding: 10px 5px;
-  font-size: 0;
-}
-
-.theme-dark .font {
-  border-bottom: 1px solid #444;
-}
-
-.theme-light .font {
-  border-bottom: 1px solid #DDD;
-}
-
-.font:last-of-type {
-  border-bottom: 0;
-}
-
-.theme-light .font:nth-child(even) {
-  background: #F4F4F4;
-}
-
-.font-preview {
-  height: 60px;
-  width: 100%;
-  border: 0;
-  display: block;
-}
-
-.font-info {
-  font-size: 1rem;
-  display: block;
-}
-
-.font-name {
-  display: inline;
-}
-
-.font-css-code {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 5px;
-}
-
-.theme-light .font-css-code,
-.theme-light .font-url {
-  border: 1px solid #CCC;
-  background: white;
-}
-
-.theme-dark .font-css-code,
-.theme-dark .font-url {
-  border: 1px solid #333;
-  background: black;
-  color: white;
-}
diff --git a/browser/themes/linux/devtools/inspect-button.png b/browser/themes/linux/devtools/inspect-button.png
deleted file mode 100644
index ebfd9586d..000000000
--- a/browser/themes/linux/devtools/inspect-button.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/inspector.css b/browser/themes/linux/devtools/inspector.css
deleted file mode 100644
index caad427ad..000000000
--- a/browser/themes/linux/devtools/inspector.css
+++ /dev/null
@@ -1,35 +0,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/. */
-
-#inspector-inspect-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#inspector-inspect-toolbutton[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#inspector-searchbox {
-  transition-property: max-width, -moz-padding-end, -moz-padding-start;
-  transition-duration: 250ms;
-  transition-timing-function: ease;
-}
-
-#inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box {
-  overflow: hidden;
-}
-
-#inspector-searchbox:not([focused]):not([filled]) {
-  max-width: 20px !important;
-  -moz-padding-end: 5px;
-  -moz-padding-start: 22px;
-  background-position: 8px center, top left, top left;
-}
-
-#inspector-searchbox[focused],
-#inspector-searchbox[filled] {
-  max-width: 200px !important;
-}
diff --git a/browser/themes/linux/devtools/itemArrow-rtl.png b/browser/themes/linux/devtools/itemArrow-rtl.png
deleted file mode 100644
index 0f8f4b1b0..000000000
--- a/browser/themes/linux/devtools/itemArrow-rtl.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/itemToggle.png b/browser/themes/linux/devtools/itemToggle.png
deleted file mode 100644
index cf70394e6..000000000
--- a/browser/themes/linux/devtools/itemToggle.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/layout-background-grid.png b/browser/themes/linux/devtools/layout-background-grid.png
deleted file mode 100644
index 87b0b855d..000000000
--- a/browser/themes/linux/devtools/layout-background-grid.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/layoutview.css b/browser/themes/linux/devtools/layoutview.css
deleted file mode 100644
index 14e10dfd3..000000000
--- a/browser/themes/linux/devtools/layoutview.css
+++ /dev/null
@@ -1,46 +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/. */
-
-.theme-dark .theme-body {
-  background-image: url(layout-background-grid.png);
-}
-
-.theme-light .theme-body {
-  background-image: url(layout-background-grid.png), radial-gradient(circle at 50% 70%, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
-}
-
-.theme-body {
-  color: hsl(210,100%,85%);
-  box-sizing: border-box;
-}
-
-#main {
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted;
-}
-
-#main > .border {
-  color: hsl(210,53%,45%);
-}
-
-.border > span {
-  background-color: hsl(210,100%,85%);
-  border-radius: 2px;
-  padding: 0 4px;
-}
-
-#content {
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted 
-}
-
-#padding {
-  border-color: hsla(210,100%,85%,0.2);
-  border-style: solid;
-}
-
-#borders {
-  border-style: solid;
-  border-color: hsl(210,100%,85%);
-}
diff --git a/browser/themes/linux/devtools/light-theme.css b/browser/themes/linux/devtools/light-theme.css
deleted file mode 100644
index a867df614..000000000
--- a/browser/themes/linux/devtools/light-theme.css
+++ /dev/null
@@ -1,104 +0,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/. */
-
-/* According to:
- * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
- */
-.theme-body {
-  background: white;
-  color: black;
-}
-
-.theme-twisty {
-  cursor: pointer;
-  margin-right: 5px;
-}
-
-.theme-twisty:-moz-focusring {
-  outline-style: none;
-}
-
-.theme-twisty:not([open]) {
-  width: 0;
-  height: 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid rgba(0,0,0,0.5);
-  margin-left: 5px;
-}
-
-.theme-twisty[open] {
-  width: 10px;
-  height: 10px;
-  background-image: linear-gradient(to bottom right, transparent 68%,  rgba(0,0,0,0.5) 68%);
-}
-
-.theme-checkbox {
-  display: inline-block;
-  border: 0;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  outline: none;
-  background: url("chrome://browser/skin/devtools/checkbox-light.png") no-repeat;
-}
-
-.theme-checkbox[checked] {
-  background: url("chrome://browser/skin/devtools/checkbox-light.png") 14px 0;
-}
-
-.theme-selected {
-  background-color: hsl(0,0%,90%);
-}
-
-.theme-bg-darker {
-  background: #F9F9F9;
-}
-
-.theme-link { /* blue */
-  color: hsl(208,56%,40%);
-}
-
-.theme-comment { /* grey */
-  color: hsl(90,2%,46%);
-}
-
-.theme-gutter {
-  background-color: hsl(0,0%,90%);
-  color: #667380;
-  border-color: hsl(0,0%,65%);
-}
-
-.theme-separator { /* grey */
-  border-color: #cddae5;
-}
-
-.theme-fg-color1 { /* green */
-  color: hsl(72,100%,27%);
-}
-
-.theme-fg-color2 { /* blue */
-  color: hsl(208,56%,40%);
-}
-
-.theme-fg-color3 { /* dark blue */
-  color: hsl(208,81%,21%)
-}
-
-.theme-fg-color4 { /* Orange */
-  color: hsl(24,85%,39%);
-}
-
-.theme-fg-color5 { /* Yellow */
-  color: #a18650;
-}
-
-.theme-fg-color6 { /* Orange */
-  color: hsl(24,85%,39%);
-}
-
-.theme-fg-color7 { /* Red */
-  color: #bf5656;
-}
diff --git a/browser/themes/linux/devtools/magnifying-glass.png b/browser/themes/linux/devtools/magnifying-glass.png
deleted file mode 100644
index 673c32810..000000000
--- a/browser/themes/linux/devtools/magnifying-glass.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/markup-view.css b/browser/themes/linux/devtools/markup-view.css
deleted file mode 100644
index 4651a4314..000000000
--- a/browser/themes/linux/devtools/markup-view.css
+++ /dev/null
@@ -1,44 +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/. */
-
-* {
-  padding: 0;
-  margin: 0;
-}
-
-.newattr {
-  cursor: pointer;
-}
-
-.selected {
-  background-color: hsl(0,0%,90%);
-}
-
-/* Give some padding to focusable elements to match the editor input
- * that will replace them. */
-span[tabindex] {
-  display: inline-block;
-  padding: 1px 0;
-}
-
-li.container {
-  position: relative;
-  padding: 2px 0 0 2px;
-}
-
-.codebox {
-  padding-left: 14px;
-}
-
-.expander {
-  position: absolute;
-}
-
-.more-nodes {
-  padding-left: 16px;
-}
-
-.styleinspector-propertyeditor {
-  border: 1px solid #CCC;
-}
diff --git a/browser/themes/linux/devtools/netmonitor.css b/browser/themes/linux/devtools/netmonitor.css
index a93106ca3..c3febee3e 100644
--- a/browser/themes/linux/devtools/netmonitor.css
+++ b/browser/themes/linux/devtools/netmonitor.css
@@ -1,532 +1,32 @@
-/* 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/. */
 
-#body {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-}
-
-/* Network requests table */
-
-#requests-menu-empty-notice {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  font-size: 110%;
-  color: #fff;
-}
-
-#requests-menu-toolbar {
-  height: 32px;
-  padding: 0;
-}
+%include ../../shared/devtools/netmonitor.inc.css
 
-.requests-menu-header:first-child {
-  -moz-padding-start: 4px;
-}
-
-.requests-menu-subitem {
+#headers-summary-resend {
   padding: 4px;
 }
 
-.requests-menu-header:not(:last-child):-moz-locale-dir(ltr),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header-button {
-  -moz-appearance: none;
-  background: none;
-  min-width: 20px;
-  min-height: 31px; /* Remaining 1px comes from border of the toolbar. */
-  margin: 0;
-  border: none;
-  padding: 0;
-  color: inherit;
-  font-weight: inherit !important;
-  transition: background-color 0.1s ease-in-out;
-}
-
-.requests-menu-header-button:hover {
-  background: rgba(0,0,0,0.10);
-}
-
-.requests-menu-header-button:hover:active {
-  background: rgba(0,0,0,0.25);
-}
-
-.requests-menu-header-button:not(:active)[sorted] {
-  background: rgba(0,0,0,0.15);
-}
-
-.requests-menu-header-button:not(:active)[sorted=ascending] {
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-header-button:not(:active)[sorted=descending] {
-  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom;
+#toggle-raw-headers {
+  padding: 4px;
 }
 
-/* Network requests table: specific column dimensions */
-
 .requests-menu-status-and-method {
-  width: 7em;
-}
-
-.requests-menu-status {
-  width: 10px;
-  height: 10px;
-}
-
-.requests-menu-method {
-  text-align: center;
-  font-weight: 600;
-}
-
-.requests-menu-file {
-  width: 20vw;
-  min-width: 4em;
+  width: 9em;
 }
 
-.requests-menu-domain {
+.requests-menu-security-and-domain {
   width: 16vw;
-  min-width: 10em;
-}
-
-.requests-menu-type {
-  text-align: center;
-  width: 4em;
 }
 
 .requests-menu-size {
-  text-align: center;
   width: 6em;
 }
 
-/* Network requests table: status codes */
-
-box.requests-menu-status {
-  background: #fff;
-  -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
-  border-radius: 20px;
-  box-shadow:
-    0 0 0 1px rgba(255,255,255,0.4) inset,
-    0 -6px 4px 0 rgba(32,32,32,1.0) inset,
-    0 0 8px 0 rgba(32,0,0,0.4);
-  transition: box-shadow 0.5s ease-in-out;
-}
-
-box.requests-menu-status[code^="1"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,0,64,1.0) inset,
-    0 0 8px 0 rgba(0,0,128,1.0);
-}
-
-box.requests-menu-status[code^="2"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,64,0,1.0) inset,
-    0 0 8px 0 rgba(0,128,0,1.0);
-}
-
-box.requests-menu-status[code^="3"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,32,0,1.0) inset,
-    0 0 8px 0 rgba(128,128,0,1.0);
-}
-
-box.requests-menu-status[code^="4"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,0,1.0) inset,
-    0 0 8px 0 rgba(128,0,0,1.0);
-}
-
-box.requests-menu-status[code^="5"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,64,1.0) inset,
-    0 0 8px 0 rgba(128,0,128,1.0);
-}
-
-/* Network requests table: waterfall header */
-
-#requests-menu-waterfall-label {
-  -moz-padding-start: 8px;
-  -moz-padding-end: 8px;
-}
-
-.requests-menu-timings-division {
-  width: 100px;
-  padding-top: 2px;
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #999;
-  font-size: 75%;
-  pointer-events: none;
-}
-
-.requests-menu-timings-division:not(:first-child) {
-  -moz-margin-start: -100px !important; /* Don't affect layout. */
-}
-
-.requests-menu-timings-division:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-division:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-/* Network requests table: waterfall items */
-
-.requests-menu-subitem.requests-menu-waterfall {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 4px;
-  background-repeat: repeat-y; /* Background created on a <canvas> in js. */
-  margin-top: -1px; /* Compensate borders. */
-  margin-bottom: -1px;
-}
-
-.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
-  background-position: right center;
-}
-
-.requests-menu-timings:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total {
-  -moz-padding-start: 8px;
-  font-size: 85%;
-  font-weight: 600;
-}
-
-.requests-menu-timings-cap {
-  width: 4px;
-  height: 10px;
-  border: 1px solid #fff;
-}
-
-.requests-menu-timings-cap.start {
-  -moz-border-end: none;
-}
-
-.requests-menu-timings-cap.end {
-  -moz-border-start: none;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-box {
-  height: 10px;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-}
-
-.requests-menu-timings-box.blocked,
-.requests-menu-timings-cap.blocked {
-  background-color: rgba(255,32,32,0.8);
-  box-shadow: 0 0 8px 0 rgba(128,32,32,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.dns,
-.requests-menu-timings-cap.dns {
-  background-color: rgba(255,128,255,0.6);
-  box-shadow: 0 0 8px 0 rgba(128,128,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.connect,
-.requests-menu-timings-cap.connect {
-  background-color: rgba(255,128,16,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,128,16,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.send,
-.requests-menu-timings-cap.send {
-  background-color: rgba(255,255,128,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,255,128,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.wait,
-.requests-menu-timings-cap.wait {
-  background-color: rgba(255,255,255,0.2);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,0.4),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.receive,
-.requests-menu-timings-cap.receive {
-  background-color: rgba(255,255,255,1.0);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-item[odd] {
-  background: rgba(255,255,255,0.05);
-}
-
-.side-menu-widget-item-contents {
-  padding: 0;
-}
-
-/* Network request details */
-
-#details-pane {
-  background: hsl(208,11%,27%);
-  max-width: 500px;
-}
-
-#details-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border-color: transparent;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#details-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#details-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-/* Network request details tabpanels */
-
-.tabpanel-content {
-  background: url(background-noise-toolbar.png), #3e4750;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset;
-  color: #fff;
-}
-
-.tabpanel-summary-container {
-  padding: 1px;
-}
-
-.tabpanel-summary-label {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 3px;
-  font-weight: 600;
-  text-shadow: 0 1px 0 #000;
-  color: hsl(210,30%,85%);
-}
-
-.tabpanel-summary-value {
-  -moz-padding-start: 3px;
-  font-family: Menlo, Monaco, monospace;
-}
-
-.variable-or-property:not(:focus) > .title > .token-string {
-  color: #10c !important;
-}
-
-/* Headers tabpanel */
-
-#headers-summary-status,
-#headers-summary-version {
-  padding-bottom: 2px;
-}
-
-#headers-summary-size {
-  padding-top: 2px;
-}
-
-/* Response tabpanel */
-
-#response-content-info-header {
-  background:
-    url(background-noise-toolbar.png),
-    linear-gradient(hsl(0,61%,40%), hsl(0,61%,31%)) repeat-x top left;
-  box-shadow:
-    inset 0 1px 0 hsla(210,40%,83%,.15),
-    inset 0 -1px 0 hsla(210,40%,83%,.05);
-  margin: 0;
-  padding: 5px 8px;
-}
-
-#response-content-image-box {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-#response-content-image {
-  background: #fff;
-  border: 1px dashed GrayText;
-  margin-bottom: 10px;
-}
-
-/* Timings tabpanel */
-
-#timings-tabpanel .tabpanel-summary-label {
-  width: 10em;
-}
-
-#timings-tabpanel .requests-menu-timings-box {
-  transition: transform 0.2s ease-out;
-  min-width: 1px;
-}
-
-#timings-tabpanel .requests-menu-timings-total {
-  transition: transform 0.2s ease-out;
-}
-
-/* Footer */
-
-#requests-menu-footer {
-  box-shadow: inset 0 1px 16px hsla(210,8%,5%,.3);
-}
-
-.requests-menu-footer-button,
-.requests-menu-footer-label {
-  min-width: 1em;
-  margin: 0;
-  border: none;
-  padding: 2px 1.5vw;
-  color: #fff;
-}
-
-.requests-menu-footer-spacer {
-  min-width: 2px;
-}
-
-.requests-menu-footer-spacer,
-.requests-menu-footer-button {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-footer-button {
-  -moz-appearance: none;
-  background: rgba(0,0,0,0.025);
-}
-
-.requests-menu-footer-button:hover {
-  background: rgba(0,0,0,0.20);
-}
-
-.requests-menu-footer-button:hover:active {
-  background: rgba(0,0,0,0.35);
-}
-
-.requests-menu-footer-button:not(:active)[checked] {
-  background-color: rgba(0,0,0,0.25);
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-footer-label {
-  font-weight: 600;
-}
-
 /* Responsive sidebar */
 @media (max-width: 700px) {
-  #requests-menu-toolbar {
-    height: 26px;
-  }
-
   .requests-menu-header-button {
-    min-height: 25px; /* Remaining 1px comes from border of the toolbar. */
     font-size: 85%;
   }
-
-  .requests-menu-footer-button,
-  .requests-menu-footer-label {
-    padding: 2px 2vw;
-  }
-
-  #details-pane {
-    max-width: none;
-    margin: 0 !important;
-    /* To prevent all the margin hacks to hide the sidebar. */
-  }
-
-  .requests-menu-status-and-method {
-    width: 16vw;
-  }
-
-  .requests-menu-file,
-  .requests-menu-domain {
-    width: 30vw;
-  }
-
-  .requests-menu-type {
-    width: 8vw;
-  }
-
-  .requests-menu-size {
-    width: 16vw;
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Timeline" header is not visible anymore, and thus the
-       right border and box-shadow of "Size" column should be hidden. */
-  }
-}
-
-@media (min-width: 701px) {
-  #network-table[type-overflows] .requests-menu-domain {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Type" header is not visible anymore, and thus the
-       right border and box-shadow of "Domain" column should be hidden. */
-  }
-
-  #network-table[domain-overflows] .requests-menu-file {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Domain" header is not visible anymore, and thus the
-       right border and box-shadow of "File" column should be hidden. */
-  }
 }
diff --git a/browser/themes/linux/devtools/option-icon.png b/browser/themes/linux/devtools/option-icon.png
deleted file mode 100644
index 9fd78175d..000000000
--- a/browser/themes/linux/devtools/option-icon.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/orion-breakpoint.png b/browser/themes/linux/devtools/orion-breakpoint.png
deleted file mode 100644
index ddd344eee..000000000
--- a/browser/themes/linux/devtools/orion-breakpoint.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/orion-container.css b/browser/themes/linux/devtools/orion-container.css
deleted file mode 100644
index cf3568a94..000000000
--- a/browser/themes/linux/devtools/orion-container.css
+++ /dev/null
@@ -1,39 +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/. */
-
-.viewTooltip {
-  display: none; /* TODO: add tooltips support, see bug 721752 */
-  font-family: monospace;
-  font-size: 13px;
-  background-color: InfoBackground;
-  color: InfoText;
-  padding: 2px;
-  border-radius: 4px;
-  border: 1px solid black;
-  z-index: 100;
-  position: fixed;
-  overflow: hidden;
-  white-space: pre;
-}
-
-.viewTooltip em {
-  font-style: normal;
-  font-weight: bold;
-}
-
-.annotationHTML {
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-  vertical-align: middle;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.annotationHTML.task {
-  background-image: url("chrome://browser/skin/devtools/orion-task.png");
-}
-.annotationHTML.breakpoint {
-  background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png");
-}
diff --git a/browser/themes/linux/devtools/orion-debug-location.png b/browser/themes/linux/devtools/orion-debug-location.png
deleted file mode 100644
index a00649b77..000000000
--- a/browser/themes/linux/devtools/orion-debug-location.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/orion-task.png b/browser/themes/linux/devtools/orion-task.png
deleted file mode 100644
index 42dbc00b6..000000000
--- a/browser/themes/linux/devtools/orion-task.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/orion.css b/browser/themes/linux/devtools/orion.css
deleted file mode 100644
index f51ecceeb..000000000
--- a/browser/themes/linux/devtools/orion.css
+++ /dev/null
@@ -1,199 +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/. */
-
-.viewContainer {
-  background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
-  font-family: monospace;
-  font-size: inherit; /* inherit browser's default monospace font size */
-}
-
-.view {
-  color: black; /* Default text color */
-  background: white; /* Background of the editor */
-  padding-left: 4px;
-}
-
-.readonly > .view {
-  background: #fdfefd; /* super light green */
-}
-
-.ruler {
-  background: hsl(0,0%,89%);
-  color: hsl(0,0%,55%);
-}
-.ruler.annotations {
-  width: 16px;
-  padding-left: 4px;
-}
-.ruler.lines {
-  border-right: 1px solid #b4c4d3;
-  min-width: 1.4em;
-  padding-left: 4px;
-  padding-right: 4px;
-  text-align: end;
-}
-
-.ruler.linesWithAnnotations {
-  min-width: 0;
-  padding-left: 0;
-}
-
-.ruler.overview {
-  border-left: 1px solid #b4c4d3;
-  width: 14px;
-  text-align: start;
-}
-
-/* Styles for the annotation ruler (first line) */
-.annotationHTML {
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-  vertical-align: middle;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.annotation.task .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-task.png");
-}
-.annotation.breakpoint .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png");
-}
-.annotation.debugLocation .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png");
-}
-.annotation.breakpoint.debugLocation .annotationHTML,
-.annotation.task.debugLocation .annotationHTML {
-  background-position: center, center;
-  background-repeat: no-repeat, no-repeat;
-  background-size: 75%, 100%;
-}
-.annotation.breakpoint.debugLocation .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"),
-                    url("chrome://browser/skin/devtools/orion-breakpoint.png");
-}
-
-.annotation.task.debugLocation .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"),
-                    url("chrome://browser/skin/devtools/orion-task.png");
-}
-
-/* Styles for the overview ruler  */
-.annotationOverview {
-  cursor: pointer;
-  border-radius: 2px;
-  left: 2px;
-  width: 8px;
-}
-.annotationOverview.task {
-  background-color: lightgreen;
-  border: 1px solid green;
-}
-.annotationOverview.breakpoint {
-  background-color: lightblue;
-  border: 1px solid blue;
-}
-.annotationOverview.debugLocation {
-  background-color: white;
-  border: 1px solid green;
-}
-.annotationOverview.currentBracket {
-  background-color: lightgray;
-  border: 1px solid red;
-}
-.annotationOverview.matchingBracket {
-  background-color: lightgray;
-  border: 1px solid red;
-}
-
-/* Styles for text range */
-.annotationRange {
-  background-repeat: repeat-x;
-  background-position: left bottom;
-}
-.annotationRange.task {
-  outline: 1px dashed rgba(0, 255, 0, 0.5);
-}
-.annotationRange.matchingBracket {
-  outline: 1px solid grey;
-}
-
-.token_singleline_comment,
-.token_multiline_comment,
-.token_doc_comment  {
-  color: hsl(90,2%,50%); /* grey */
-}
-
-.token_doc_html_markup {
-  color: #dd0058; /* purple */
-}
-
-.token_doc_tag {
-  color: #dd0058; /* purple */
-}
-
-.token_task_tag { /* "TODO" */
-  color: black;
-  background: yellow;
-}
-
-.token_string {
-  color: hsl(72,100%,27%); /* green */
-  font-style: italic;
-}
-
-.token_keyword {
-  color: hsl(276,44%,45%); /* purple */
-}
-
-.token_space {
-  /* images/white_space.png */
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAABnRSTlMA/wAAAACkwsAdAAAAIUlEQVR4nGP4z8CAC+GUIEXuABhgkTuABEiRw2cmae4EAH05X7xDolNRAAAAAElFTkSuQmCC");
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.token_tab {
-  /* images/white_tab.png */
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAIAAACJ2loDAAAABnRSTlMA/wD/AP83WBt9AAAAMklEQVR4nGP4TwRgoK6i52c3bz5w6zMSA6tJn28d2Lx589nnCAYu63AaSLxJRLoJPwAAeNk0aG4opfMAAAAASUVORK5CYII=");
-  background-repeat: no-repeat;
-  background-position: left center;
-}
-
-.line_caret,
-.annotationLine.currentLine { /* Current line */
-  background: hsl(208, 93%, 94%);
-}
-
-.readonly .line_caret,
-.readonly .annotationLine.currentLine {
-  background: hsl(208, 80%, 90%);
-}
-
-/* Styling for html syntax highlighting */
-.entity-name-tag {
-  color: hsl(208,48%,40%); /* blue */
-}
-
-.entity-other-attribute-name {
-  color: hsl(208,48%,40%); /* blue */
-}
-
-.punctuation-definition-comment {
-  color: hsl(90,2%,50%); /* grey */
-}
-
-.comment {
-  color: hsl(90,2%,50%); /* grey */
-}
-
-.string-quoted {
-  color: hsl(24,85%,39%); /* orange */
-}
-
-.invalid {
-  color: red;
-  font-weight: bold;
-}
diff --git a/browser/themes/linux/devtools/performance.css b/browser/themes/linux/devtools/performance.css
new file mode 100644
index 000000000..9fbdab02d
--- /dev/null
+++ b/browser/themes/linux/devtools/performance.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/devtools/performance.inc.css
diff --git a/browser/themes/linux/devtools/profiler.css b/browser/themes/linux/devtools/profiler.css
index 152678396..efaa394ef 100644
--- a/browser/themes/linux/devtools/profiler.css
+++ b/browser/themes/linux/devtools/profiler.css
@@ -2,4 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-%include ../../shared/devtools/profiler.inc.css
-\ No newline at end of file
+%include ../../shared/devtools/profiler.inc.css
+
+#profile-content tab label {
+  margin-bottom: 4px;
+}
diff --git a/browser/themes/linux/devtools/responsive-background.png b/browser/themes/linux/devtools/responsive-background.png
deleted file mode 100644
index 271dd5ebc..000000000
--- a/browser/themes/linux/devtools/responsive-background.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/responsive-se-resizer.png b/browser/themes/linux/devtools/responsive-se-resizer.png
deleted file mode 100644
index bdc03ee24..000000000
--- a/browser/themes/linux/devtools/responsive-se-resizer.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/responsive-vertical-resizer.png b/browser/themes/linux/devtools/responsive-vertical-resizer.png
deleted file mode 100644
index 1bb622dd3..000000000
--- a/browser/themes/linux/devtools/responsive-vertical-resizer.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/ruleview.css b/browser/themes/linux/devtools/ruleview.css
deleted file mode 100644
index b0ddd80e6..000000000
--- a/browser/themes/linux/devtools/ruleview.css
+++ /dev/null
@@ -1,131 +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/. */
-
-.ruleview {
-  height: 100%;
-}
-
-.ruleview-rule-source {
-  -moz-padding-start: 5px;
-  cursor: pointer;
-  text-align: right;
-  float: right;
-  -moz-user-select: none;
-}
-
-.ruleview-rule-inheritance {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-top-style: solid;
-  border-bottom-style: solid;
-  padding: 1px 4px;
-  margin-top: 4px;
-  -moz-user-select: none;
-}
-
-.ruleview-rule-source:hover {
-  text-decoration: underline;
-}
-
-.ruleview-rule,
-#noResults {
-  padding: 2px 4px;
-}
-
-#noResults {
-  font: message-box;
-  color: GrayText;
-}
-
-.ruleview-rule + .ruleview-rule {
-  border-top-width: 1px;
-  border-top-style: dotted;
-}
-
-.ruleview-warning {
-  background: url("chrome://browser/skin/devtools/alerticon-warning.png");
-  -moz-margin-start: 5px;
-  vertical-align: middle;
-  width: 13px;
-  height: 12px;
-}
-
-.ruleview-ruleopen {
-  -moz-padding-end: 5px;
-}
-
-.ruleview-ruleclose {
-  cursor: text;
-  padding-right: 20px;
-}
-
-.ruleview-propertylist {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.ruleview-rule:not(:hover) .ruleview-enableproperty {
-  visibility: hidden;
-}
-
-.ruleview-expander {
-  display: inline-block;
-}
-
-.ruleview-newproperty {
-  /* (enable checkbox width: 12px) + (expander width: 15px) */
-  -moz-margin-start: 27px;
-}
-
-.ruleview-namecontainer,
-.ruleview-propertycontainer,
-.ruleview-propertyname,
-.ruleview-propertyvalue {
-  text-decoration: inherit;
-}
-
-.ruleview-computedlist {
-  list-style: none;
-  padding: 0;
-}
-
-.ruleview-computed {
-  -moz-margin-start: 35px;
-}
-
-.ruleview-overridden {
-  text-decoration: line-through;
-}
-
-.styleinspector-propertyeditor {
-  border: 1px solid #CCC;
-  padding: 0;
-}
-
-.ruleview-property {
-  border-left: 2px solid transparent;
-}
-
-.ruleview-property  > * {
-  vertical-align: middle;
-}
-
-.ruleview-property[dirty] {
-  border-left-color: #68E268;
-}
-
-.ruleview-namecontainer > .ruleview-propertyname,
-.ruleview-propertycontainer > .ruleview-propertyvalue {
-  border-bottom: 1px dashed transparent;
-}
-
-.ruleview-namecontainer:hover > .ruleview-propertyname,
-.ruleview-propertycontainer:hover > .ruleview-propertyvalue {
-  border-bottom-color: hsl(0,0%,50%);
-}
-
-.ruleview-selector-separator, .ruleview-selector-unmatched {
-  color: #888;
-}
diff --git a/browser/themes/linux/devtools/scratchpad.css b/browser/themes/linux/devtools/scratchpad.css
index 86b4b167b..a6207e37d 100644
--- a/browser/themes/linux/devtools/scratchpad.css
+++ b/browser/themes/linux/devtools/scratchpad.css
@@ -1,5 +1,5 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 %include ../../shared/devtools/scratchpad.inc.css
 \ No newline at end of file
diff --git a/browser/themes/linux/devtools/shadereditor.css b/browser/themes/linux/devtools/shadereditor.css
new file mode 100644
index 000000000..34817e245
--- /dev/null
+++ b/browser/themes/linux/devtools/shadereditor.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/devtools/shadereditor.inc.css
diff --git a/browser/themes/linux/devtools/splitview.css b/browser/themes/linux/devtools/splitview.css
deleted file mode 100644
index a24d099ee..000000000
--- a/browser/themes/linux/devtools/splitview.css
+++ /dev/null
@@ -1,114 +0,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/. */
-
-.splitview-nav-container {
-  background-color: hsl(208,11%,27%);
-  color: white;
-}
-
-.loading .splitview-nav-container {
-  background-image: url(chrome://global/skin/icons/loading_16.png);
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.splitview-nav {
-  -moz-appearance: none;
-  margin: 0;
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-.splitview-nav > li {
-  color: white;
-  background-clip: padding-box;
-  border-bottom: 1px solid hsla(210,16%,76%,.1);
-  box-shadow: inset 0 -1px 0 hsla(210,8%,5%,.25);
-  -moz-padding-end: 8px;
-  -moz-box-align: center;
-}
-
-.splitview-nav {
-  list-style-image: none;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.splitview-nav > li {
-  outline: 0;
-  vertical-align: bottom;
-}
-
-.placeholder {
-  -moz-box-flex: 1;
-  text-align: center;
-}
-
-.splitview-nav > li.splitview-active {
-  background-image: url(itemArrow-ltr.png),
-                    linear-gradient(to right, black, black),
-                    linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%));
-  background-repeat: no-repeat, no-repeat, repeat-x;
-  background-position: center right, top right, top left;
-  background-size: auto, 1px 100%, auto;
-  border-bottom: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
-              inset 0 -1px 0 hsla(210,40%,83%,.05);
-}
-
-.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
-  background-image: url(itemArrow-rtl.png),
-                    linear-gradient(to right, black, black),
-                    linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%));
-  background-repeat: no-repeat, no-repeat, repeat-x;
-  background-position: center left, top left, top right;
-}
-
-/* Toolbars */
-
-.devtools-toolbar {
-  height: 26px;
-  background-origin: border-box;
-  background-clip: border-box;
-  border-bottom: 1px solid hsla(210,8%,5%,.65);
-  padding: 3px;
-}
-
-.splitview-main > toolbar:-moz-locale-dir(ltr) {
-  border-right: 1px solid hsla(210,8%,5%,.5);
-}
-
-.splitview-main > toolbar:-moz-locale-dir(rtl) {
-  border-left: 1px solid hsla(210,8%,5%,.5);
-}
-
-.devtools-toolbarbutton {
-  font-size: 11px;
-  padding: 0 8px;
-  width: auto;
-  min-width: 48px;
-  min-height: 0;
-}
-
-
-/* Resizers */
-
-.splitview-landscape-splitter {
-  -moz-border-start-color: transparent;
-}
-
-.splitview-portrait-resizer {
-  -moz-appearance: none;
-  background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px),
-              linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%));
-  height: 12px;
-  background-size: 10px 2px, 100% 12px;
-  background-clip: content-box, border-box;
-  background-repeat: repeat-y, no-repeat;
-  background-position: center center;
-  padding: 2px 0;
-  border-top: 1px solid hsla(210,8%,5%,.5);
-  border-bottom: 1px solid hsla(210,8%,5%,.5);
-}
diff --git a/browser/themes/linux/devtools/styleeditor.css b/browser/themes/linux/devtools/styleeditor.css
deleted file mode 100644
index 4df8ea8e6..000000000
--- a/browser/themes/linux/devtools/styleeditor.css
+++ /dev/null
@@ -1,131 +0,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/. */
-
-#style-editor-chrome {
-  background-color: hsl(208,11%,27%);
-}
-
-.stylesheet-title,
-.stylesheet-name {
-  text-decoration: none;
-  color: hsl(207,17%,88%);
-}
-
-.stylesheet-name {
-  font-size: 13px;
-}
-
-.stylesheet-rule-count,
-.stylesheet-saveButton {
-  color: hsl(211,12%,60%);
-}
-
-.stylesheet-saveButton {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.splitview-active .stylesheet-title,
-.splitview-active .stylesheet-name {
-  color: hsl(0,0%,100%);
-}
-
-.splitview-active .stylesheet-rule-count,
-.splitview-active .stylesheet-saveButton {
-  color: hsl(200,66%,70%);
-}
-
-.splitview-nav:focus {
-  outline: 0; /* focus ring is on the stylesheet name */
-}
-
-.splitview-nav > li.unsaved > hgroup .stylesheet-name {
-  font-style: italic;
-}
-
-.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
-.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
-  font-style: italic;
-}
-
-.splitview-nav.empty > p {
-  padding: 0 10px;
-}
-
-.stylesheet-enabled {
-  padding: 8px 0;
-  margin: 0 8px;
-  background-image: url(itemToggle.png);
-  background-repeat: no-repeat;
-  background-clip: content-box;
-  background-position: 0 8px;
-  width: 24px;
-  height: 40px;
-}
-
-.disabled > .stylesheet-enabled {
-  background-position: -24px 8px;
-}
-
-.splitview-nav > li > .stylesheet-enabled:focus,
-.splitview-nav > li:hover > .stylesheet-enabled {
-  outline: 0;
-}
-
-.stylesheet-error-message {
-  color: red;
-}
-
-.stylesheet-more > h3 {
-  font-size: 11px;
-  -moz-margin-end: 2px;
-}
-
-.devtools-searchinput {
-  max-width: 25ex;
-  font-size: 11px;
-}
-
-.placeholder {
-  color: white;
-}
-
-.placeholder a {
-  text-decoration: underline;
-}
-
-h1,
-h2,
-h3 {
-  font-size: inherit;
-  font-weight: normal;
-  margin: 0;
-  padding: 0;
-}
-
-/* portrait mode */
-@media (max-width: 550px) {
-  .splitview-nav {
-    box-shadow: none;
-  }
-
-  .splitview-nav > li.splitview-active {
-    background-size: 0 0, 0 0, auto;
-  }
-
-  .stylesheet-enabled {
-    padding: 0;
-    background-position: 0 0;
-    height: 24px;
-  }
-
-  .disabled > .stylesheet-enabled {
-    background-position: -24px 0;
-  }
-
-  .splitview-nav > li > hgroup.stylesheet-info {
-    -moz-box-align: baseline;
-  }
-}
diff --git a/browser/themes/linux/devtools/timeline.css b/browser/themes/linux/devtools/timeline.css
new file mode 100644
index 000000000..d22fe6d7a
--- /dev/null
+++ b/browser/themes/linux/devtools/timeline.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/devtools/timeline.inc.css
diff --git a/browser/themes/linux/devtools/toggle-tools.png b/browser/themes/linux/devtools/toggle-tools.png
deleted file mode 100644
index 8a40d0d11..000000000
--- a/browser/themes/linux/devtools/toggle-tools.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/tool-debugger-paused.png b/browser/themes/linux/devtools/tool-debugger-paused.png
deleted file mode 100644
index 4c968f542..000000000
--- a/browser/themes/linux/devtools/tool-debugger-paused.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/tool-debugger.png b/browser/themes/linux/devtools/tool-debugger.png
deleted file mode 100644
index af4dbc0e0..000000000
--- a/browser/themes/linux/devtools/tool-debugger.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/tool-inspector.png b/browser/themes/linux/devtools/tool-inspector.png
deleted file mode 100644
index 8c1e7f308..000000000
--- a/browser/themes/linux/devtools/tool-inspector.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/tool-network.png b/browser/themes/linux/devtools/tool-network.png
deleted file mode 100644
index 01f23203f..000000000
--- a/browser/themes/linux/devtools/tool-network.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/tool-options.png b/browser/themes/linux/devtools/tool-options.png
deleted file mode 100644
index 7079a1752..000000000
--- a/browser/themes/linux/devtools/tool-options.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/tool-profiler.png b/browser/themes/linux/devtools/tool-profiler.png
deleted file mode 100644
index 8f30f12a9..000000000
--- a/browser/themes/linux/devtools/tool-profiler.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/tool-styleeditor.png b/browser/themes/linux/devtools/tool-styleeditor.png
deleted file mode 100644
index 83765d9f6..000000000
--- a/browser/themes/linux/devtools/tool-styleeditor.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/tool-webconsole.png b/browser/themes/linux/devtools/tool-webconsole.png
deleted file mode 100644
index 86633249a..000000000
--- a/browser/themes/linux/devtools/tool-webconsole.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/toolbox.css b/browser/themes/linux/devtools/toolbox.css
deleted file mode 100644
index 535998ff9..000000000
--- a/browser/themes/linux/devtools/toolbox.css
+++ /dev/null
@@ -1,287 +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/. */
-
-#toolbox-controls {
-  margin: 0 4px;
-}
-
-#toolbox-controls > toolbarbutton,
-#toolbox-dock-buttons > toolbarbutton {
-  -moz-appearance: none;
-  margin: 0 4px;
-  min-width: 16px;
-  width: 16px;
-}
-
-#toolbox-dock-bottom {
-  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
-}
-
-#toolbox-dock-side {
-  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
-}
-
-#toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/undock.png");
-}
-
-#toolbox-dock-window,
-#toolbox-dock-bottom,
-#toolbox-dock-side {
-  opacity: 0.6;
-}
-
-#toolbox-dock-window:hover,
-#toolbox-dock-bottom:hover,
-#toolbox-dock-side:hover {
-  opacity: 1;
-}
-
-#toolbox-controls-separator {
-  width: 3px;
-  background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)),
-                    linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)),
-                    linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0));
-  background-size: 1px 100%;
-  background-repeat: no-repeat;
-  background-position: 0, 1px, 2px;
-  -moz-margin-start: 8px;
-}
-
-/* Command buttons */
-
-.command-button {
-  -moz-appearance: none;
-  padding: 0 8px;
-  margin: 0;
-  width: 16px;
-}
-
-.command-button:hover {
-  background-color: hsla(206,37%,4%,.2);
-}
-.command-button:hover:active, .command-button[checked=true]:not(:hover) {
-  background-color: hsla(206,37%,4%,.4);
-}
-
-#command-button-paintflashing {
-  list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-paintflashing:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-paintflashing:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-paintflashing[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-responsive {
-  list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-responsive:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-responsive:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-responsive[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-tilt {
-  list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-tilt:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-tilt:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-#command-button-tilt[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-scratchpad {
-  list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-
-#command-button-scratchpad:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-scratchpad:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-/* Tabs */
-
-.devtools-tabbar {
-  -moz-appearance: none;
-  background-image: url("background-noise-toolbar.png"),
-                    linear-gradient(#303840, #2d3640);
-  border-color: #060a0d;
-  border-style: solid;
-  border-width: 1px 0;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
-              0 -1px 0 hsla(206,37%,4%,.1) inset;
-  min-height: 32px;
-  padding: 0;
-}
-
-#toolbox-tabs {
-  margin: 0;
-}
-
-.devtools-tab {
-  -moz-appearance: none;
-  min-width: 32px;
-  min-height: 32px;
-  max-width: 127px;
-  color: #b6babf;
-  margin: 0;
-  padding: 0;
-  background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1));
-  background-size: 1px 100%;
-  background-repeat: no-repeat;
-  background-position: left, right;
-  border-right: 1px solid hsla(206,37%,4%,.45);
-  -moz-box-align: center;
-}
-
-.devtools-tab > image {
-  border: none;
-  -moz-margin-end: 0;
-  -moz-margin-start: 4px;
-  opacity: 0.6;
-  max-height: 16px;
-}
-
-#toolbox-tab-options > image {
-  margin: 0 8px;
-}
-
-.devtools-tab > label {
-  white-space: nowrap;
-}
-
-.devtools-tab:hover > image {
-  opacity: 0.8;
-}
-
-.devtools-tab:active > image,
-.devtools-tab[selected=true] > label {
-  opacity: 1;
-}
-
-.devtools-tab:hover {
-  background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2));
-  background-size: 1px 100%,
-                   1px 100%,
-                   100%;
-  background-repeat: no-repeat,
-                     no-repeat,
-                     repeat-x;
-  background-position: left, right;
-  color: #ced3d9;
-}
-.devtools-tab:hover:active {
-  background-color: hsla(206,37%,4%,.2);
-  color: #f5f7fa;
-}
-
-.devtools-tab[selected=true] {
-  color: #f5f7fa;
-  background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
-                    radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)),
-                    linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3));
-  background-size: 100% 1px,
-                   100% 5px,
-                   1px 100%,
-                   1px 100%,
-                   100%;
-  background-repeat: no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     repeat-x;
-  background-position: top right, top left, left, right;
-  box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
-}
-
-.devtools-tab:not([selected=true]).highlighted {
-  color: #f5f7fa;
-  background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
-                    radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
-  background-size: 100% 1px,
-                   100% 5px,
-                   1px 100%,
-                   1px 100%,
-                   100%;
-  background-repeat: no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     repeat-x;
-  background-position: top right, top left, left, right;
-}
-
-.devtools-tab:not(.highlighted) > .highlighted-icon,
-.devtools-tab[selected=true] > .highlighted-icon,
-.devtools-tab:not([selected=true]).highlighted > .default-icon {
-  visibility: collapse;
-}
-
-#options-panel {
-  background-image: url("chrome://browser/skin/newtab/noise.png");
-}
-
-.options-vertical-pane {
-  margin: 15px;
-  width: calc(50% - 30px);
-  min-width: 400px;
-  -moz-padding-start: 5px;
-}
-
-.options-vertical-pane > label {
-  padding: 5px 0;
-  font-size: 1.4rem;
-}
-
-.options-groupbox {
-  -moz-margin-start: 15px;
-  padding: 4px;
-}
-
-.options-groupbox > * {
-  padding: 2px;
-}
-
-.options-citation-label {
-  font-size: 1rem !important;
-  /* !important is required otherwise font-size will still be 1.4rem */
-  font-style: italic;
-  padding: 4px 0 0; /* To align it with the checkbox */
-  color: #444;
-}
-
-.options-citation-label + label {
-  padding: 3px 0 0 !important; /* To align it with the checkbox */
-  font-style: italic;
-}
diff --git a/browser/themes/linux/devtools/undock.png b/browser/themes/linux/devtools/undock.png
deleted file mode 100644
index 4e62b2cee..000000000
--- a/browser/themes/linux/devtools/undock.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/vview-delete.png b/browser/themes/linux/devtools/vview-delete.png
deleted file mode 100644
index 0945af275..000000000
--- a/browser/themes/linux/devtools/vview-delete.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/vview-edit.png b/browser/themes/linux/devtools/vview-edit.png
deleted file mode 100644
index af42a28df..000000000
--- a/browser/themes/linux/devtools/vview-edit.png
+++ /dev/null
diff --git a/browser/themes/linux/devtools/webaudioeditor.css b/browser/themes/linux/devtools/webaudioeditor.css
new file mode 100644
index 000000000..079602f4d
--- /dev/null
+++ b/browser/themes/linux/devtools/webaudioeditor.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/devtools/webaudioeditor.inc.css
diff --git a/browser/themes/linux/devtools/webconsole.css b/browser/themes/linux/devtools/webconsole.css
index 87a3e1770..f7557db41 100644
--- a/browser/themes/linux/devtools/webconsole.css
+++ b/browser/themes/linux/devtools/webconsole.css
@@ -4,20 +4,6 @@
 
 %include ../../shared/devtools/webconsole.inc.css
 
-.webconsole-timestamp,
-.webconsole-msg-body {
-  font-family: "DejaVu Sans Mono", monospace;
-}
-
-.jsterm-input-node,
-.jsterm-complete-node {
-  font: 0.9em "DejaVu Sans Mono", monospace;
-}
-
-.hud-output-node {
-  font-size: 0.9em;
-}
-
 .jsterm-input-node {
   width: 98%;
 }
diff --git a/browser/themes/linux/devtools/webconsole_networkpanel.css b/browser/themes/linux/devtools/webconsole_networkpanel.css
index 10d3e49a4..3803fe3ef 100644
--- a/browser/themes/linux/devtools/webconsole_networkpanel.css
+++ b/browser/themes/linux/devtools/webconsole_networkpanel.css
@@ -50,7 +50,7 @@ h1 .info {
   font-weight: bold;
   color: #000;
   white-space: nowrap;
-  text-align: right;
+  text-align: end;
   vertical-align: top;
   width: 10%;
 }
diff --git a/browser/themes/linux/devtools/widgets.css b/browser/themes/linux/devtools/widgets.css
index 06f79b5ac..39c357dfe 100644
--- a/browser/themes/linux/devtools/widgets.css
+++ b/browser/themes/linux/devtools/widgets.css
@@ -1,652 +1,11 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* Generic pane helpers */
+%include ../../shared/devtools/widgets.inc.css
 
-.generic-toggled-side-pane {
-  min-width: 50px;
-  -moz-margin-start: 0px !important;
-  /* Unfortunately, transitions don't work properly with locale-aware properties,
-     so both the left and right margins are set via js, while the start margin
-     is always overridden here. */
-}
-
-.generic-toggled-side-pane[animated] {
-  transition: margin 0.25s ease-in-out;
-}
-
-/* BreacrumbsWidget */
-
-.breadcrumbs-widget-container {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     breadcrumbs-widget-items, to match toolbar-buttons style.
-     This negative margin compensates the extra row of pixels created
-     by the shadow.*/
-  margin-bottom: -1px;
-}
-
-/* Preloading hack, LTR */
-
-.breadcrumbs-widget-container:-moz-locale-dir(ltr)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/ltr-start.png),
-    url(breadcrumbs/ltr-start-selected.png),
-    url(breadcrumbs/ltr-start-pressed.png),
-    url(breadcrumbs/ltr-start-selected-pressed.png),
-    url(breadcrumbs/ltr-middle.png),
-    url(breadcrumbs/ltr-middle-selected.png),
-    url(breadcrumbs/ltr-middle-pressed.png),
-    url(breadcrumbs/ltr-middle-selected-pressed.png),
-    url(breadcrumbs/ltr-end.png),
-    url(breadcrumbs/ltr-end-selected.png),
-    url(breadcrumbs/ltr-end-pressed.png),
-    url(breadcrumbs/ltr-end-selected-pressed.png);
-}
-
-/* Preloading hack, RTL */
-
-.breadcrumbs-widget-container:-moz-locale-dir(rtl)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/rtl-start.png),
-    url(breadcrumbs/rtl-start-selected.png),
-    url(breadcrumbs/rtl-start-pressed.png),
-    url(breadcrumbs/rtl-start-selected-pressed.png),
-    url(breadcrumbs/rtl-middle.png),
-    url(breadcrumbs/rtl-middle-selected.png),
-    url(breadcrumbs/rtl-middle-pressed.png),
-    url(breadcrumbs/rtl-middle-selected-pressed.png),
-    url(breadcrumbs/rtl-end.png),
-    url(breadcrumbs/rtl-end-selected.png),
-    url(breadcrumbs/rtl-end-pressed.png),
-    url(breadcrumbs/rtl-end-selected-pressed.png);
-}
-
-.scrollbutton-up,
-.scrollbutton-down {
-  -moz-appearance: none;
-  background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset,
-              0 0 0 1px hsla(210,16%,76%,.15) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-  border: 1px solid hsla(210,8%,5%,.45);
-  margin: 0 0 1px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover,
-.scrollbutton-down:not([disabled]):active:hover {
-  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset,
-              0 1px 3px hsla(210,8%,5%,.25) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-  border-color: hsla(210,8%,5%,.6);
-}
-
-.scrollbutton-up > .toolbarbutton-icon,
-.scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px,7px,16px,0px);
-  margin: 0 5px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px,14px,16px,7px);
-}
-
-.scrollbutton-up[disabled] > .toolbarbutton-icon,
-.scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.breadcrumbs-widget-item {
-  background-color: transparent;
-  -moz-appearance: none;
-  overflow: hidden;
-  min-width: 85px;
-  max-width: 250px;
-  min-height: 25px;
-  border-style: solid;
-  border-width: 1px 13px 2px 13px;
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-  outline: none;
-  color: hsl(210,30%,85%);
-}
-
-.breadcrumbs-widget-item:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag {
-  color: hsl(208,100%,60%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
-  color: hsl(205,100%,70%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,70%);
-}
-
-.breadcrumbs-widget-item-id,
-.breadcrumbs-widget-item-classes {
-  color: #8d99a6;
-}
-
-.breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,85%);
-}
-
-/* Breadcrumbs LTR */
-
-.breadcrumbs-widget-item:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-left-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-right-width: 0;
-}
-
-/* Breadcrumbs RTL */
-
-.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-right-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-container {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  color: #fff;
-}
-
-.side-menu-widget-container[with-arrow=true]:-moz-locale-dir(ltr),
-.side-menu-widget-group[with-arrow=true]:-moz-locale-dir(ltr),
-.side-menu-widget-item[with-arrow=true]:-moz-locale-dir(ltr) {
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-.side-menu-widget-container[with-arrow=true]:-moz-locale-dir(rtl),
-.side-menu-widget-group[with-arrow=true]:-moz-locale-dir(rtl),
-.side-menu-widget-item[with-arrow=true]:-moz-locale-dir(rtl) {
-  box-shadow: inset 1px 0 0 #222426;
-}
-
-.side-menu-widget-group-title {
-  background-image: linear-gradient(#1f3e4f, #1b3243);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 -2px 0 hsla(206,37%,4%,.05) inset,
-              0 -1px 1px hsla(206,37%,4%,.1) inset;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  padding: 4px;
-  color: #f5f7fa;
-  transition-property: color, text-shadow;
-  transition-duration: 0.3s;
-}
-
-.side-menu-widget-group:hover > .side-menu-widget-group-title {
-  text-shadow: 0 0 1px #cfcfcf;
-  color: #fff;
-}
-
-.side-menu-widget-item {
-  border-top: 1px solid hsla(210,16%,76%,.1);
-  border-bottom: 1px solid hsla(210,8%,5%,.25);
-  cursor: pointer;
-}
-
-.side-menu-widget-item:last-of-type {
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-.side-menu-widget-item.selected {
-  background: linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)) repeat-x top left !important;
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
-              inset 0 -1px 0 hsla(210,40%,83%,.05);
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
-  background-size: auto, 1px 100%;
-  background-repeat: no-repeat;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
-  background-image: url(itemArrow-ltr.png), linear-gradient(to right, black, black);
-  background-position: center right, top right;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
-  background-image: url(itemArrow-rtl.png), linear-gradient(to right, black, black);
-  background-position: center left, top left;
-}
-
-.side-menu-widget-item-arrow {
-  -moz-margin-start: -8px;
-  width: 8px;
-}
-
-.side-menu-widget-item-contents {
-  padding: 4px;
-}
-
-.side-menu-widget-item label {
-  cursor: inherit;
-}
-
-.side-menu-widget-item-other {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.65);
-  margin: 0 -4px;
-  -moz-padding-start: 5px;
-}
-
-.side-menu-widget-item-other.selected {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.15);
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.07),
-              inset 0 -1px 0 hsla(210,40%,83%,.07);
-}
-
-.side-menu-widget-item.selected .side-menu-widget-item-other:first-of-type {
-  border-top: 1px dotted #333;
-  margin-top: 3px;
-}
-
-.side-menu-widget-item-other:first-of-type {
-  margin-top: 4px;
-}
-
-.side-menu-widget-item-other:last-of-type {
-  margin-bottom: -4px;
-}
-
-.side-menu-widget-item-other > label {
-  color: #f5f7fa;
-  text-shadow: 0 1px 1px #111;
-}
-
-.side-menu-widget-empty-notice-container {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  color: #fff;
-  font-weight: 600;
-}
-
-/* VariablesView */
-
-.variables-view-container {
-  background: #fff;
-}
-
-.variables-view-empty-notice {
-  color: GrayText;
-  padding: 2px;
-}
-
-.variables-view-scope > .title {
-  color: #fff;
-}
-
-.variables-view-scope:focus > .title {
-  background: Highlight;
-  color: HighlightText;
-}
-
-.variables-view-scope > .variables-view-element-details:not(:empty) {
-  margin-top: 1px;
-  -moz-margin-start: 2px;
-  -moz-margin-end: 1px;
-}
-
-.variables-view-scope > .variables-view-element-details.enum:not(:empty) {
-  border-bottom: 1px solid #ddd;
-}
-
-/* Generic traits applied to both variables and properties */
-
-.variable-or-property {
-  transition: background 1s ease-in-out;
-  color: #000;
-}
-
-.variable-or-property[changed] {
-  background: rgba(255,255,0,0.65);
-  transition-duration: 0.4s;
-}
-
-.variable-or-property > .title > .value {
-  -moz-padding-start: 6px;
-  -moz-padding-end: 4px;
-}
-
-.variable-or-property:focus > .title {
-  background: Highlight;
-  color: HighlightText;
-  border-radius: 4px;
-}
-
-.variable-or-property[editable] > .title > .value {
-  cursor: text;
-}
-
-.variable-or-property:not([non-header]) > .variables-view-element-details {
-  -moz-margin-start: 10px;
-}
-
-/* Custom variables and properties traits */
-
-.variables-view-variable {
-  -moz-margin-start: 1px;
-  -moz-margin-end: 1px;
-  border-bottom: 1px solid #eee;
-}
-
-.variables-view-variable > .title > .name {
-  font-weight: 600;
-}
-
-.variables-view-variable:not(:focus) > .title > .name {
-  color: #048;
-}
-
-.variables-view-property:not(:focus) > .title > .name {
-  color: #881090;
-}
-
-/* Token value colors */
-
-.variable-or-property:not(:focus) > .title > .token-undefined {
-  color: #bbb;
-}
-
-.variable-or-property:not(:focus) > .title > .token-null {
-  color: #999;
-}
-
-.variable-or-property:not(:focus) > .title > .token-boolean {
-  color: #10c;
-}
-
-.variable-or-property:not(:focus) > .title > .token-number {
-  color: #c00;
-}
-
-.variable-or-property:not(:focus) > .title > .token-string {
-  color: #282;
-}
-
-.variable-or-property:not(:focus) > .title > .token-other {
-  color: #333;
-}
-
-/* Custom configurable/enumerable/writable or frozen/sealed/extensible
- * variables and properties */
-
-.variable-or-property[non-enumerable]:not([self]):not([exception]):not([return]) > .title > .name {
-  opacity: 0.5;
-}
-
-.variable-or-property[non-configurable] > .title > .name {
-  border-bottom: 1px dashed #99f;
-}
-
-.variable-or-property[non-writable] > .title > .name {
-  border-bottom: 1px dashed #f99;
-}
-
-.variable-or-property-non-writable-icon {
-  background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
-  width: 16px;
-  height: 16px;
-  opacity: 0.5;
-}
-
-@media (min-resolution: 2dppx) {
-  .variable-or-property-non-writable-icon {
-    background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
-    background-size: 32px;
-  }
-}
-
-.variable-or-property-frozen-label,
-.variable-or-property-sealed-label,
-.variable-or-property-non-extensible-label {
-  -moz-padding-end: 4px;
-}
-
-.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
-  color: #666;
-}
-
-/* Special variables and properties */
-
-.variable-or-property[safe-getter] > .title > .name {
-  border-bottom: 1px dashed #8b0;
-}
-
-.variable-or-property[exception]:not(:focus) > .title > .name {
-  color: #a00;
-  text-shadow: 0 0 8px #fcc;
-}
-
-.variable-or-property[return]:not(:focus) > .title > .name {
-  color: #0a0;
-  text-shadow: 0 0 8px #cfc;
-}
-
-/* Variables and properties tooltips */
-
-.variable-or-property > tooltip > label {
-  margin: 0 2px 0 2px;
-}
-
-.variable-or-property[non-enumerable] > tooltip > label[value=enumerable],
-.variable-or-property[non-configurable] > tooltip > label[value=configurable],
-.variable-or-property[non-writable] > tooltip > label[value=writable],
-.variable-or-property[non-extensible] > tooltip > label[value=extensible] {
-  color: #800;
-  text-decoration: line-through;
-}
-
-.variable-or-property[safe-getter] > tooltip > label[value=WebIDL] {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #000;
-  color: #080;
-}
-
-/* Variables and properties editing */
-
-.variables-view-delete {
-  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
-  -moz-image-region: rect(0,16px,16px,0);
-}
-
-.variables-view-delete:hover {
-  -moz-image-region: rect(0,32px,16px,16px);
-}
-
-.variables-view-delete:active {
-  -moz-image-region: rect(0,48px,16px,32px);
-}
-
-*:not(:hover) .variables-view-delete {
-  display: none;
-}
-
-.variables-view-delete > .toolbarbutton-text {
-  display: none;
-}
-
-.variables-view-edit {
-  background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
-  width: 20px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.variables-view-throbber {
-  background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
-  width: 16px;
-  height: 16px;
-}
-
-.element-value-input {
-  -moz-margin-start: 4px !important;
-  -moz-margin-end: 2px !important;
-}
-
-.element-name-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
-  color: #048;
-  font-weight: 600;
-}
-
-.element-value-input,
-.element-name-input {
-  border: 1px solid #999 !important;
-  box-shadow: 1px 2px 4px #aaa;
-}
-
-/* Variables and properties searching */
-
-.variables-view-searchinput {
-  min-height: 24px;
-}
-
-.variable-or-property[non-match] {
-  border: none;
+.side-menu-widget-group-checkbox .checkbox-spacer-box,
+.side-menu-widget-item-checkbox .checkbox-spacer-box {
   margin: 0;
-}
-
-/* Expand/collapse arrow */
-
-.arrow {
-  -moz-appearance: treetwisty;
-  height: 20px;
-  margin-top: 1px;
-  -moz-margin-start: 10px;
-  -moz-margin-end: 5px;
-}
-
-.arrow[open] {
-  -moz-appearance: treetwistyopen;
-}
-
-.arrow[invisible] {
-  visibility: hidden;
+  border: none;
 }
diff --git a/browser/themes/linux/jar.mn b/browser/themes/linux/jar.mn
index b4e385633..e390435d9 100644
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -109,102 +109,175 @@ browser.jar:
   skin/classic/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
 #ifdef MOZ_DEVTOOLS
-* skin/classic/browser/devtools/common.css            (devtools/common.css)
-  skin/classic/browser/devtools/dark-theme.css        (devtools/dark-theme.css)
-  skin/classic/browser/devtools/light-theme.css       (devtools/light-theme.css)
-  skin/classic/browser/devtools/widgets.css           (devtools/widgets.css)
-  skin/classic/browser/devtools/commandline-icon.png  (devtools/commandline-icon.png)
-  skin/classic/browser/devtools/command-paintflashing.png  (devtools/command-paintflashing.png)
-  skin/classic/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
-  skin/classic/browser/devtools/command-scratchpad.png (devtools/command-scratchpad.png)
-  skin/classic/browser/devtools/command-tilt.png      (devtools/command-tilt.png)
-  skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
-  skin/classic/browser/devtools/ruleview.css          (devtools/ruleview.css)
+* skin/classic/browser/devtools/common.css            (../shared/devtools/common.css)
+* skin/classic/browser/devtools/dark-theme.css        (../shared/devtools/dark-theme.css)
+* skin/classic/browser/devtools/light-theme.css       (../shared/devtools/light-theme.css)
+  skin/classic/browser/devtools/filters.svg           (../shared/devtools/filters.svg)
+  skin/classic/browser/devtools/controls.png          (../shared/devtools/images/controls.png)
+  skin/classic/browser/devtools/controls@2x.png       (../shared/devtools/images/controls@2x.png)
+  skin/classic/browser/devtools/performance-icons.svg  (../shared/devtools/images/performance-icons.svg)
+  skin/classic/browser/devtools/newtab.png             (../shared/devtools/images/newtab.png)
+  skin/classic/browser/devtools/newtab@2x.png          (../shared/devtools/images/newtab@2x.png)
+  skin/classic/browser/devtools/newtab-inverted.png    (../shared/devtools/images/newtab-inverted.png)
+  skin/classic/browser/devtools/newtab-inverted@2x.png (../shared/devtools/images/newtab-inverted@2x.png)
+* skin/classic/browser/devtools/widgets.css           (devtools/widgets.css)
+  skin/classic/browser/devtools/power.svg                     (../shared/devtools/images/power.svg)
+  skin/classic/browser/devtools/filetype-dir-close.svg        (../shared/devtools/images/filetypes/dir-close.svg)
+  skin/classic/browser/devtools/filetype-dir-open.svg         (../shared/devtools/images/filetypes/dir-open.svg)
+  skin/classic/browser/devtools/filetype-globe.svg            (../shared/devtools/images/filetypes/globe.svg)
+  skin/classic/browser/devtools/filetype-store.svg            (../shared/devtools/images/filetypes/store.svg)
+  skin/classic/browser/devtools/commandline-icon.png          (../shared/devtools/images/commandline-icon.png)
+  skin/classic/browser/devtools/commandline-icon@2x.png       (../shared/devtools/images/commandline-icon@2x.png)
+  skin/classic/browser/devtools/command-paintflashing.png     (../shared/devtools/images/command-paintflashing.png)
+  skin/classic/browser/devtools/command-paintflashing@2x.png  (../shared/devtools/images/command-paintflashing@2x.png)
+  skin/classic/browser/devtools/command-screenshot.png        (../shared/devtools/images/command-screenshot.png)
+  skin/classic/browser/devtools/command-screenshot@2x.png     (../shared/devtools/images/command-screenshot@2x.png)
+  skin/classic/browser/devtools/command-responsivemode.png    (../shared/devtools/images/command-responsivemode.png)
+  skin/classic/browser/devtools/command-responsivemode@2x.png (../shared/devtools/images/command-responsivemode@2x.png)
+  skin/classic/browser/devtools/command-scratchpad.png        (../shared/devtools/images/command-scratchpad.png)
+  skin/classic/browser/devtools/command-scratchpad@2x.png     (../shared/devtools/images/command-scratchpad@2x.png)
+  skin/classic/browser/devtools/command-tilt.png              (../shared/devtools/images/command-tilt.png)
+  skin/classic/browser/devtools/command-tilt@2x.png           (../shared/devtools/images/command-tilt@2x.png)
+  skin/classic/browser/devtools/command-pick.png              (../shared/devtools/images/command-pick.png)
+  skin/classic/browser/devtools/command-pick@2x.png           (../shared/devtools/images/command-pick@2x.png)
+  skin/classic/browser/devtools/command-frames.png            (../shared/devtools/images/command-frames.png)
+  skin/classic/browser/devtools/command-frames@2x.png         (../shared/devtools/images/command-frames@2x.png)
+  skin/classic/browser/devtools/command-console.png           (../shared/devtools/images/command-console.png)
+  skin/classic/browser/devtools/command-console@2x.png        (../shared/devtools/images/command-console@2x.png)
+  skin/classic/browser/devtools/command-eyedropper.png        (../shared/devtools/images/command-eyedropper.png)
+  skin/classic/browser/devtools/command-eyedropper@2x.png     (../shared/devtools/images/command-eyedropper@2x.png)
+  skin/classic/browser/devtools/alerticon-warning.png (../shared/devtools/images/alerticon-warning.png)
+  skin/classic/browser/devtools/alerticon-warning@2x.png      (../shared/devtools/images/alerticon-warning@2x.png)
+* skin/classic/browser/devtools/ruleview.css          (../shared/devtools/ruleview.css)
 * skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
   skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
-  skin/classic/browser/devtools/webconsole.png                  (devtools/webconsole.png)
-  skin/classic/browser/devtools/checkbox-dark.png     (devtools/checkbox-dark.png)
-  skin/classic/browser/devtools/checkbox-light.png    (devtools/checkbox-light.png)
+  skin/classic/browser/devtools/webconsole.png                  (../shared/devtools/images/webconsole.png)
+  skin/classic/browser/devtools/webconsole@2x.png               (../shared/devtools/images/webconsole@2x.png)
   skin/classic/browser/devtools/commandline.css              (devtools/commandline.css)
-  skin/classic/browser/devtools/markup-view.css      (devtools/markup-view.css)
-  skin/classic/browser/devtools/orion.css             (devtools/orion.css)
-  skin/classic/browser/devtools/orion-container.css   (devtools/orion-container.css)
-  skin/classic/browser/devtools/orion-task.png        (devtools/orion-task.png)
-  skin/classic/browser/devtools/orion-breakpoint.png  (devtools/orion-breakpoint.png)
-  skin/classic/browser/devtools/orion-debug-location.png (devtools/orion-debug-location.png)
-  skin/classic/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png     (devtools/breadcrumbs/ltr-end-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end-selected.png             (devtools/breadcrumbs/ltr-end-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-end.png                      (devtools/breadcrumbs/ltr-end.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle-pressed.png           (devtools/breadcrumbs/ltr-middle-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected-pressed.png  (devtools/breadcrumbs/ltr-middle-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected.png          (devtools/breadcrumbs/ltr-middle-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-middle.png                   (devtools/breadcrumbs/ltr-middle.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start-pressed.png            (devtools/breadcrumbs/ltr-start-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start-selected-pressed.png   (devtools/breadcrumbs/ltr-start-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start.png                    (devtools/breadcrumbs/ltr-start.png)
-  skin/classic/browser/devtools/breadcrumbs/ltr-start-selected.png           (devtools/breadcrumbs/ltr-start-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end-pressed.png              (devtools/breadcrumbs/rtl-end-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end-selected-pressed.png     (devtools/breadcrumbs/rtl-end-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end-selected.png             (devtools/breadcrumbs/rtl-end-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-end.png                      (devtools/breadcrumbs/rtl-end.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle-pressed.png           (devtools/breadcrumbs/rtl-middle-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected-pressed.png  (devtools/breadcrumbs/rtl-middle-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected.png          (devtools/breadcrumbs/rtl-middle-selected.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
-  skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-  skin/classic/browser/devtools/splitview.css         (devtools/splitview.css)
-  skin/classic/browser/devtools/styleeditor.css       (devtools/styleeditor.css)
-  skin/classic/browser/devtools/debugger.css          (devtools/debugger.css)
+  skin/classic/browser/devtools/markup-view.css       (../shared/devtools/markup-view.css)
+  skin/classic/browser/devtools/editor-error.png       (../shared/devtools/images/editor-error.png)
+  skin/classic/browser/devtools/editor-breakpoint.png  (../shared/devtools/images/editor-breakpoint.png)
+  skin/classic/browser/devtools/editor-debug-location.png (../shared/devtools/images/editor-debug-location.png)
+  skin/classic/browser/devtools/editor-debug-location@2x.png (../shared/devtools/images/editor-debug-location@2x.png)
+  skin/classic/browser/devtools/breadcrumbs-divider@2x.png      (../shared/devtools/images/breadcrumbs-divider@2x.png)
+  skin/classic/browser/devtools/breadcrumbs-scrollbutton.png    (../shared/devtools/images/breadcrumbs-scrollbutton.png)
+  skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)
+  skin/classic/browser/devtools/animationinspector.css          (../shared/devtools/animationinspector.css)
+* skin/classic/browser/devtools/canvasdebugger.css    (devtools/canvasdebugger.css)
+* skin/classic/browser/devtools/debugger.css          (devtools/debugger.css)
+  skin/classic/browser/devtools/eyedropper.css        (../shared/devtools/eyedropper.css)
+* skin/classic/browser/devtools/netmonitor.css        (devtools/netmonitor.css)
 * skin/classic/browser/devtools/profiler.css          (devtools/profiler.css)
-  skin/classic/browser/devtools/netmonitor.css        (devtools/netmonitor.css)
+* skin/classic/browser/devtools/performance.css       (devtools/performance.css)
+* skin/classic/browser/devtools/timeline.css          (devtools/timeline.css)
+  skin/classic/browser/devtools/timeline-filter.svg   (../shared/devtools/images/timeline-filter.svg)
 * skin/classic/browser/devtools/scratchpad.css        (devtools/scratchpad.css)
-  skin/classic/browser/devtools/magnifying-glass.png  (devtools/magnifying-glass.png)
-  skin/classic/browser/devtools/option-icon.png       (devtools/option-icon.png)
-  skin/classic/browser/devtools/itemToggle.png        (devtools/itemToggle.png)
-  skin/classic/browser/devtools/itemArrow-rtl.png     (devtools/itemArrow-rtl.png)
-  skin/classic/browser/devtools/itemArrow-ltr.png     (devtools/itemArrow-ltr.png)
-  skin/classic/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
-  skin/classic/browser/devtools/inspect-button.png    (devtools/inspect-button.png)
-  skin/classic/browser/devtools/dropmarker.png        (devtools/dropmarker.png)
-  skin/classic/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
-  skin/classic/browser/devtools/layoutview.css        (devtools/layoutview.css)
-  skin/classic/browser/devtools/debugger-collapse.png  (devtools/debugger-collapse.png)
-  skin/classic/browser/devtools/debugger-expand.png    (devtools/debugger-expand.png)
-  skin/classic/browser/devtools/debugger-pause.png     (devtools/debugger-pause.png)
-  skin/classic/browser/devtools/debugger-play.png      (devtools/debugger-play.png)
-  skin/classic/browser/devtools/debugger-step-in.png   (devtools/debugger-step-in.png)
-  skin/classic/browser/devtools/debugger-step-out.png  (devtools/debugger-step-out.png)
-  skin/classic/browser/devtools/debugger-step-over.png (devtools/debugger-step-over.png)
-  skin/classic/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
-  skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
-  skin/classic/browser/devtools/responsive-background.png (devtools/responsive-background.png)
-  skin/classic/browser/devtools/toggle-tools.png          (devtools/toggle-tools.png)
-  skin/classic/browser/devtools/dock-bottom.png           (devtools/dock-bottom.png)
-  skin/classic/browser/devtools/dock-side.png             (devtools/dock-side.png)
+* skin/classic/browser/devtools/shadereditor.css      (devtools/shadereditor.css)
+* skin/classic/browser/devtools/splitview.css         (../shared/devtools/splitview.css)
+  skin/classic/browser/devtools/styleeditor.css       (../shared/devtools/styleeditor.css)
+  skin/classic/browser/devtools/storage.css           (../shared/devtools/storage.css)
+* skin/classic/browser/devtools/webaudioeditor.css    (devtools/webaudioeditor.css)
+  skin/classic/browser/devtools/magnifying-glass.png        (../shared/devtools/images/magnifying-glass.png)
+  skin/classic/browser/devtools/magnifying-glass@2x.png     (../shared/devtools/images/magnifying-glass@2x.png)
+  skin/classic/browser/devtools/magnifying-glass-light.png  (../shared/devtools/images/magnifying-glass-light.png)
+  skin/classic/browser/devtools/magnifying-glass-light@2x.png (../shared/devtools/images/magnifying-glass-light@2x.png)
+  skin/classic/browser/devtools/itemToggle.png         (../shared/devtools/images/itemToggle.png)
+  skin/classic/browser/devtools/itemToggle@2x.png      (../shared/devtools/images/itemToggle@2x.png)
+  skin/classic/browser/devtools/itemArrow-dark-rtl.svg (../shared/devtools/images/itemArrow-dark-rtl.svg)
+  skin/classic/browser/devtools/itemArrow-dark-ltr.svg (../shared/devtools/images/itemArrow-dark-ltr.svg)
+  skin/classic/browser/devtools/itemArrow-rtl.svg      (../shared/devtools/images/itemArrow-rtl.svg)
+  skin/classic/browser/devtools/itemArrow-ltr.svg      (../shared/devtools/images/itemArrow-ltr.svg)
+  skin/classic/browser/devtools/noise.png             (../shared/devtools/images/noise.png)
+  skin/classic/browser/devtools/dropmarker.svg        (../shared/devtools/images/dropmarker.svg)
+  skin/classic/browser/devtools/layoutview.css         (../shared/devtools/layoutview.css)
+  skin/classic/browser/devtools/debugger-collapse.png  (../shared/devtools/images/debugger-collapse.png)
+  skin/classic/browser/devtools/debugger-collapse@2x.png  (../shared/devtools/images/debugger-collapse@2x.png)
+  skin/classic/browser/devtools/debugger-expand.png    (../shared/devtools/images/debugger-expand.png)
+  skin/classic/browser/devtools/debugger-expand@2x.png    (../shared/devtools/images/debugger-expand@2x.png)
+  skin/classic/browser/devtools/debugger-pause.png     (../shared/devtools/images/debugger-pause.png)
+  skin/classic/browser/devtools/debugger-pause@2x.png     (../shared/devtools/images/debugger-pause@2x.png)
+  skin/classic/browser/devtools/debugger-play.png      (../shared/devtools/images/debugger-play.png)
+  skin/classic/browser/devtools/debugger-play@2x.png      (../shared/devtools/images/debugger-play@2x.png)
+  skin/classic/browser/devtools/debugger-step-in.png   (../shared/devtools/images/debugger-step-in.png)
+  skin/classic/browser/devtools/debugger-step-in@2x.png   (../shared/devtools/images/debugger-step-in@2x.png)
+  skin/classic/browser/devtools/debugger-step-out.png  (../shared/devtools/images/debugger-step-out.png)
+  skin/classic/browser/devtools/debugger-step-out@2x.png  (../shared/devtools/images/debugger-step-out@2x.png)
+  skin/classic/browser/devtools/debugger-step-over.png (../shared/devtools/images/debugger-step-over.png)
+  skin/classic/browser/devtools/debugger-step-over@2x.png (../shared/devtools/images/debugger-step-over@2x.png)
+  skin/classic/browser/devtools/debugger-blackbox.png  (../shared/devtools/images/debugger-blackbox.png)
+  skin/classic/browser/devtools/debugger-blackbox@2x.png  (../shared/devtools/images/debugger-blackbox@2x.png)
+  skin/classic/browser/devtools/debugger-prettyprint.png  (../shared/devtools/images/debugger-prettyprint.png)
+  skin/classic/browser/devtools/debugger-prettyprint@2x.png (../shared/devtools/images/debugger-prettyprint@2x.png)
+  skin/classic/browser/devtools/debugger-toggleBreakpoints.png (../shared/devtools/images/debugger-toggleBreakpoints.png)
+  skin/classic/browser/devtools/debugger-toggleBreakpoints@2x.png (../shared/devtools/images/debugger-toggleBreakpoints@2x.png)
+  skin/classic/browser/devtools/tracer-icon.png        (../shared/devtools/images/tracer-icon.png)
+  skin/classic/browser/devtools/tracer-icon@2x.png     (../shared/devtools/images/tracer-icon@2x.png)
+  skin/classic/browser/devtools/responsive-se-resizer.png          (../shared/devtools/images/responsivemode/responsive-se-resizer.png)
+  skin/classic/browser/devtools/responsive-se-resizer@2x.png       (../shared/devtools/images/responsivemode/responsive-se-resizer@2x.png)
+  skin/classic/browser/devtools/responsive-vertical-resizer.png    (../shared/devtools/images/responsivemode/responsive-vertical-resizer.png)
+  skin/classic/browser/devtools/responsive-vertical-resizer@2x.png (../shared/devtools/images/responsivemode/responsive-vertical-resizer@2x.png)
+  skin/classic/browser/devtools/responsive-horizontal-resizer.png  (../shared/devtools/images/responsivemode/responsive-horizontal-resizer.png)
+  skin/classic/browser/devtools/responsive-horizontal-resizer@2x.png  (../shared/devtools/images/responsivemode/responsive-horizontal-resizer@2x.png)
+  skin/classic/browser/devtools/responsiveui-rotate.png          (../shared/devtools/images/responsivemode/responsiveui-rotate.png)
+  skin/classic/browser/devtools/responsiveui-rotate@2x.png       (../shared/devtools/images/responsivemode/responsiveui-rotate@2x.png)
+  skin/classic/browser/devtools/responsiveui-touch.png           (../shared/devtools/images/responsivemode/responsiveui-touch.png)
+  skin/classic/browser/devtools/responsiveui-touch@2x.png        (../shared/devtools/images/responsivemode/responsiveui-touch@2x.png)
+  skin/classic/browser/devtools/responsiveui-screenshot.png      (../shared/devtools/images/responsivemode/responsiveui-screenshot.png)
+  skin/classic/browser/devtools/responsiveui-screenshot@2x.png   (../shared/devtools/images/responsivemode/responsiveui-screenshot@2x.png)
+  skin/classic/browser/devtools/toggle-tools.png          (../shared/devtools/images/toggle-tools.png)
+  skin/classic/browser/devtools/toggle-tools@2x.png       (../shared/devtools/images/toggle-tools@2x.png)
+  skin/classic/browser/devtools/dock-bottom@2x.png        (../shared/devtools/images/dock-bottom@2x.png)
+  skin/classic/browser/devtools/dock-side@2x.png          (../shared/devtools/images/dock-side@2x.png)
   skin/classic/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
   skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
-  skin/classic/browser/devtools/inspector.css             (devtools/inspector.css)
-  skin/classic/browser/devtools/toolbox.css               (devtools/toolbox.css)
-  skin/classic/browser/devtools/tool-options.png          (devtools/tool-options.png)
-  skin/classic/browser/devtools/tool-webconsole.png       (devtools/tool-webconsole.png)
-  skin/classic/browser/devtools/tool-debugger.png         (devtools/tool-debugger.png)
-  skin/classic/browser/devtools/tool-debugger-paused.png  (devtools/tool-debugger-paused.png)
-  skin/classic/browser/devtools/tool-inspector.png        (devtools/tool-inspector.png)
-  skin/classic/browser/devtools/tool-styleeditor.png      (devtools/tool-styleeditor.png)
-  skin/classic/browser/devtools/tool-profiler.png         (devtools/tool-profiler.png)
-  skin/classic/browser/devtools/tool-network.png          (devtools/tool-network.png)
-  skin/classic/browser/devtools/close.png                 (devtools/close.png)
-  skin/classic/browser/devtools/vview-delete.png          (devtools/vview-delete.png)
-  skin/classic/browser/devtools/vview-edit.png            (devtools/vview-edit.png)
-  skin/classic/browser/devtools/undock.png                (devtools/undock.png)
-  skin/classic/browser/devtools/font-inspector.css        (devtools/font-inspector.css)
-  skin/classic/browser/devtools/computedview.css          (devtools/computedview.css)
-  skin/classic/browser/devtools/arrow-e.png               (devtools/arrow-e.png)
+* skin/classic/browser/devtools/inspector.css               (../shared/devtools/inspector.css)
+  skin/classic/browser/devtools/profiler-stopwatch.svg      (../shared/devtools/images/profiler-stopwatch.svg)
+  skin/classic/browser/devtools/profiler-stopwatch-checked.svg      (../shared/devtools/images/profiler-stopwatch-checked.svg)
+  skin/classic/browser/devtools/tool-options.svg            (../shared/devtools/images/tool-options.svg)
+  skin/classic/browser/devtools/tool-webconsole.svg         (../shared/devtools/images/tool-webconsole.svg)
+  skin/classic/browser/devtools/tool-debugger.svg           (../shared/devtools/images/tool-debugger.svg)
+  skin/classic/browser/devtools/tool-debugger-paused.svg    (../shared/devtools/images/tool-debugger-paused.svg)
+  skin/classic/browser/devtools/tool-inspector.svg          (../shared/devtools/images/tool-inspector.svg)
+  skin/classic/browser/devtools/tool-inspector.svg          (../shared/devtools/images/tool-inspector.svg)
+  skin/classic/browser/devtools/tool-styleeditor.svg        (../shared/devtools/images/tool-styleeditor.svg)
+  skin/classic/browser/devtools/tool-storage.svg            (../shared/devtools/images/tool-storage.svg)
+  skin/classic/browser/devtools/tool-profiler.svg           (../shared/devtools/images/tool-profiler.svg)
+  skin/classic/browser/devtools/tool-network.svg            (../shared/devtools/images/tool-network.svg)
+  skin/classic/browser/devtools/tool-scratchpad.svg         (../shared/devtools/images/tool-scratchpad.svg)
+  skin/classic/browser/devtools/tool-webaudio.svg           (../shared/devtools/images/tool-webaudio.svg)
+  skin/classic/browser/devtools/close.png                   (../shared/devtools/images/close.png)
+  skin/classic/browser/devtools/close@2x.png                (../shared/devtools/images/close@2x.png)
+  skin/classic/browser/devtools/vview-delete.png            (../shared/devtools/images/vview-delete.png)
+  skin/classic/browser/devtools/vview-delete@2x.png         (../shared/devtools/images/vview-delete@2x.png)
+  skin/classic/browser/devtools/vview-edit.png              (../shared/devtools/images/vview-edit.png)
+  skin/classic/browser/devtools/vview-edit@2x.png           (../shared/devtools/images/vview-edit@2x.png)
+  skin/classic/browser/devtools/vview-lock.png              (../shared/devtools/images/vview-lock.png)
+  skin/classic/browser/devtools/vview-lock@2x.png           (../shared/devtools/images/vview-lock@2x.png)
+  skin/classic/browser/devtools/vview-open-inspector.png    (../shared/devtools/images/vview-open-inspector.png)
+  skin/classic/browser/devtools/vview-open-inspector@2x.png (../shared/devtools/images/vview-open-inspector@2x.png)
+  skin/classic/browser/devtools/cubic-bezier-swatch.png     (../shared/devtools/images/cubic-bezier-swatch.png)
+  skin/classic/browser/devtools/cubic-bezier-swatch@2x.png  (../shared/devtools/images/cubic-bezier-swatch@2x.png)
+  skin/classic/browser/devtools/undock@2x.png               (../shared/devtools/images/undock@2x.png)
+  skin/classic/browser/devtools/font-inspector.css          (../shared/devtools/font-inspector.css)
+  skin/classic/browser/devtools/computedview.css            (../shared/devtools/computedview.css)
+  skin/classic/browser/devtools/arrow-e.png                 (../shared/devtools/images/arrow-e.png)
+  skin/classic/browser/devtools/arrow-e@2x.png              (../shared/devtools/images/arrow-e@2x.png)
+  skin/classic/browser/devtools/responsiveui-home.png       (../shared/devtools/responsiveui-home.png)
+  skin/classic/browser/devtools/projecteditor/projecteditor.css         (../shared/devtools/projecteditor/projecteditor.css)
+  skin/classic/browser/devtools/app-manager/connection-footer.css     (../shared/devtools/app-manager/connection-footer.css)
+  skin/classic/browser/devtools/app-manager/index.css                 (../shared/devtools/app-manager/index.css)
+  skin/classic/browser/devtools/app-manager/device.css                (../shared/devtools/app-manager/device.css)
+  skin/classic/browser/devtools/app-manager/projects.css              (../shared/devtools/app-manager/projects.css)
+  skin/classic/browser/devtools/app-manager/help.css                  (../shared/devtools/app-manager/help.css)
+  skin/classic/browser/devtools/app-manager/warning.svg               (../shared/devtools/app-manager/images/warning.svg)
+  skin/classic/browser/devtools/app-manager/error.svg                 (../shared/devtools/app-manager/images/error.svg)
+  skin/classic/browser/devtools/app-manager/plus.svg                  (../shared/devtools/app-manager/images/plus.svg)
+  skin/classic/browser/devtools/app-manager/remove.svg                (../shared/devtools/app-manager/images/remove.svg)
+  skin/classic/browser/devtools/app-manager/add.svg                   (../shared/devtools/app-manager/images/add.svg)
+  skin/classic/browser/devtools/app-manager/index-icons.svg           (../shared/devtools/app-manager/images/index-icons.svg)
+  skin/classic/browser/devtools/app-manager/rocket.svg                (../shared/devtools/app-manager/images/rocket.svg)
+  skin/classic/browser/devtools/app-manager/noise.png                 (../shared/devtools/app-manager/images/noise.png)
+  skin/classic/browser/devtools/app-manager/default-app-icon.png      (../shared/devtools/app-manager/images/default-app-icon.png)
 #endif
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
diff --git a/browser/themes/linux/moz.build b/browser/themes/linux/moz.build
index 4c7366cd5..6a7af20ad 100644
--- a/browser/themes/linux/moz.build
+++ b/browser/themes/linux/moz.build
@@ -6,3 +6,4 @@
 
 DIRS += ['communicator']
 
+JAR_MANIFESTS += ['jar.mn']
+\ No newline at end of file
diff --git a/browser/themes/osx/Makefile.in b/browser/themes/osx/Makefile.in
index 353289fb2..173ca6843 100644
--- a/browser/themes/osx/Makefile.in
+++ b/browser/themes/osx/Makefile.in
@@ -2,15 +2,6 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-DEPTH		= @DEPTH@
-topsrcdir	= @top_srcdir@
-srcdir		= @srcdir@
-VPATH		= @srcdir@
-
-include $(DEPTH)/config/autoconf.mk
-
 ICON_FILES := icon.png
 ICON_DEST = $(FINAL_TARGET)/extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}
 INSTALL_TARGETS += ICON
-
-include $(topsrcdir)/config/rules.mk
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index eaa5f34f5..1ab3a3ad3 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -1773,6 +1773,7 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 .popup-notification-icon[popupid="addon-progress"],
 .popup-notification-icon[popupid="addon-install-cancelled"],
 .popup-notification-icon[popupid="addon-install-blocked"],
+.popup-notification-icon[popupid="addon-install-origin-blocked"],
 .popup-notification-icon[popupid="addon-install-failed"],
 .popup-notification-icon[popupid="addon-install-complete"] {
     list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png);
@@ -2262,7 +2263,6 @@ toolbar[brighttext] #addonbar-closebutton {
 
 %ifdef MOZ_DEVTOOLS
 %include ../shared/devtools/responsivedesign.inc.css
-%include ../shared/devtools/highlighter.inc.css
 %include ../shared/devtools/commandline.inc.css
 %endif
 %include ../shared/plugin-doorhanger.inc.css
diff --git a/browser/themes/osx/communicator/moz.build b/browser/themes/osx/communicator/moz.build
index 895d11993..c97072bba 100644
--- a/browser/themes/osx/communicator/moz.build
+++ b/browser/themes/osx/communicator/moz.build
@@ -4,3 +4,4 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+JAR_MANIFESTS += ['jar.mn']
+\ No newline at end of file
diff --git a/browser/themes/osx/devtools/alerticon-warning.png b/browser/themes/osx/devtools/alerticon-warning.png
deleted file mode 100644
index 5c5d0aec5..000000000
--- a/browser/themes/osx/devtools/alerticon-warning.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/arrow-e.png b/browser/themes/osx/devtools/arrow-e.png
deleted file mode 100644
index 09691bc5e..000000000
--- a/browser/themes/osx/devtools/arrow-e.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/background-noise-toolbar.png b/browser/themes/osx/devtools/background-noise-toolbar.png
deleted file mode 100644
index d09ba9daf..000000000
--- a/browser/themes/osx/devtools/background-noise-toolbar.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs-scrollbutton.png b/browser/themes/osx/devtools/breadcrumbs-scrollbutton.png
deleted file mode 100644
index 722438060..000000000
--- a/browser/themes/osx/devtools/breadcrumbs-scrollbutton.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-end-pressed.png b/browser/themes/osx/devtools/breadcrumbs/ltr-end-pressed.png
deleted file mode 100644
index 80c1f3a26..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-end-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-end-selected-pressed.png b/browser/themes/osx/devtools/breadcrumbs/ltr-end-selected-pressed.png
deleted file mode 100644
index 87808778c..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-end-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-end-selected.png b/browser/themes/osx/devtools/breadcrumbs/ltr-end-selected.png
deleted file mode 100644
index dbb728411..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-end-selected.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-end.png b/browser/themes/osx/devtools/breadcrumbs/ltr-end.png
deleted file mode 100644
index ee96024f1..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-end.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-middle-pressed.png b/browser/themes/osx/devtools/breadcrumbs/ltr-middle-pressed.png
deleted file mode 100644
index 57abb3ffb..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-middle-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-middle-selected-pressed.png b/browser/themes/osx/devtools/breadcrumbs/ltr-middle-selected-pressed.png
deleted file mode 100644
index 3898ba3ac..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-middle-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-middle-selected.png b/browser/themes/osx/devtools/breadcrumbs/ltr-middle-selected.png
deleted file mode 100644
index c0d13e3ef..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-middle-selected.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-middle.png b/browser/themes/osx/devtools/breadcrumbs/ltr-middle.png
deleted file mode 100644
index eb65fffd5..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-middle.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-start-pressed.png b/browser/themes/osx/devtools/breadcrumbs/ltr-start-pressed.png
deleted file mode 100644
index c1a946525..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-start-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-start-selected-pressed.png b/browser/themes/osx/devtools/breadcrumbs/ltr-start-selected-pressed.png
deleted file mode 100644
index 77d63d1b1..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-start-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-start-selected.png b/browser/themes/osx/devtools/breadcrumbs/ltr-start-selected.png
deleted file mode 100644
index 6529b71ab..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-start-selected.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/ltr-start.png b/browser/themes/osx/devtools/breadcrumbs/ltr-start.png
deleted file mode 100644
index a4ca85860..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/ltr-start.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-end-pressed.png b/browser/themes/osx/devtools/breadcrumbs/rtl-end-pressed.png
deleted file mode 100644
index 1077cfb7b..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-end-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-end-selected-pressed.png b/browser/themes/osx/devtools/breadcrumbs/rtl-end-selected-pressed.png
deleted file mode 100644
index ab1040ba8..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-end-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-end-selected.png b/browser/themes/osx/devtools/breadcrumbs/rtl-end-selected.png
deleted file mode 100644
index 8b0905d0f..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-end-selected.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-end.png b/browser/themes/osx/devtools/breadcrumbs/rtl-end.png
deleted file mode 100644
index 88cc61b0b..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-end.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-middle-pressed.png b/browser/themes/osx/devtools/breadcrumbs/rtl-middle-pressed.png
deleted file mode 100644
index f4a3a5bee..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-middle-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-middle-selected-pressed.png b/browser/themes/osx/devtools/breadcrumbs/rtl-middle-selected-pressed.png
deleted file mode 100644
index d66acb42e..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-middle-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-middle-selected.png b/browser/themes/osx/devtools/breadcrumbs/rtl-middle-selected.png
deleted file mode 100644
index 9b77579e9..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-middle-selected.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-middle.png b/browser/themes/osx/devtools/breadcrumbs/rtl-middle.png
deleted file mode 100644
index 63b620154..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-middle.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-start-pressed.png b/browser/themes/osx/devtools/breadcrumbs/rtl-start-pressed.png
deleted file mode 100644
index bfff8e95d..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-start-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-start-selected-pressed.png b/browser/themes/osx/devtools/breadcrumbs/rtl-start-selected-pressed.png
deleted file mode 100644
index 2ce094819..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-start-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-start-selected.png b/browser/themes/osx/devtools/breadcrumbs/rtl-start-selected.png
deleted file mode 100644
index e7c848ac3..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-start-selected.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/breadcrumbs/rtl-start.png b/browser/themes/osx/devtools/breadcrumbs/rtl-start.png
deleted file mode 100644
index b8f67974c..000000000
--- a/browser/themes/osx/devtools/breadcrumbs/rtl-start.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/canvasdebugger.css b/browser/themes/osx/devtools/canvasdebugger.css
new file mode 100644
index 000000000..0f393d1b0
--- /dev/null
+++ b/browser/themes/osx/devtools/canvasdebugger.css
@@ -0,0 +1,6 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../shared.inc
+%include ../../shared/devtools/canvasdebugger.inc.css
diff --git a/browser/themes/osx/devtools/checkbox-dark.png b/browser/themes/osx/devtools/checkbox-dark.png
deleted file mode 100644
index e937b600b..000000000
--- a/browser/themes/osx/devtools/checkbox-dark.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/checkbox-light.png b/browser/themes/osx/devtools/checkbox-light.png
deleted file mode 100644
index 00d6d450c..000000000
--- a/browser/themes/osx/devtools/checkbox-light.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/close.png b/browser/themes/osx/devtools/close.png
deleted file mode 100644
index b53941253..000000000
--- a/browser/themes/osx/devtools/close.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/command-paintflashing.png b/browser/themes/osx/devtools/command-paintflashing.png
deleted file mode 100644
index b785131a2..000000000
--- a/browser/themes/osx/devtools/command-paintflashing.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/command-responsivemode.png b/browser/themes/osx/devtools/command-responsivemode.png
deleted file mode 100644
index cbfa59904..000000000
--- a/browser/themes/osx/devtools/command-responsivemode.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/command-scratchpad.png b/browser/themes/osx/devtools/command-scratchpad.png
deleted file mode 100644
index 5131ca5cb..000000000
--- a/browser/themes/osx/devtools/command-scratchpad.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/command-tilt.png b/browser/themes/osx/devtools/command-tilt.png
deleted file mode 100644
index f816bba59..000000000
--- a/browser/themes/osx/devtools/command-tilt.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/commandline-icon.png b/browser/themes/osx/devtools/commandline-icon.png
deleted file mode 100644
index e120a3926..000000000
--- a/browser/themes/osx/devtools/commandline-icon.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/commandline.css b/browser/themes/osx/devtools/commandline.css
index 7eee7eb5c..06d7512ae 100644
--- a/browser/themes/osx/devtools/commandline.css
+++ b/browser/themes/osx/devtools/commandline.css
@@ -120,12 +120,13 @@
   color: hsl(210,30%,75%);
 }
 
-.gcli-menu-option:hover {
+.gcli-menu-name:hover,
+.gcli-menu-desc:hover {
   background-color: hsla(0,0%,0%,.3);
 }
 
 .gcli-menu-highlight,
-.gcli-menu-highlight.gcli-menu-option:hover {
+.gcli-menu-highlight:hover {
   background-color: hsla(0,100%,100%,.1);
 }
 
@@ -135,7 +136,7 @@
 
 .gcli-menu-more {
   font-size: 80%;
-  text-align: right;
+  text-align: end;
   -moz-padding-end: 8px;
 }
 
diff --git a/browser/themes/osx/devtools/commandline.png b/browser/themes/osx/devtools/commandline.png
deleted file mode 100644
index 6726f2820..000000000
--- a/browser/themes/osx/devtools/commandline.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/common.css b/browser/themes/osx/devtools/common.css
deleted file mode 100644
index 2e13f4eae..000000000
--- a/browser/themes/osx/devtools/common.css
+++ /dev/null
@@ -1,369 +0,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/. */
-
-/* Font for code */
-
-:root {
-  font: message-box;
-}
-
-.devtools-monospace {
-  font-family: monospace;
-}
-
-/* Toolbar and Toolbar items */
-
-.devtools-toolbar {
-  -moz-appearance: none;
-  padding: 4px 3px;
-  color: hsl(210,30%,85%);
-  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
-  border-bottom: 1px solid #060a0d;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
-}
-
-.devtools-menulist,
-.devtools-toolbarbutton {
-  -moz-appearance: none;
-  -moz-box-align: center;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border: 1px solid hsla(211,68%,6%,.5);
-  border-radius: 3px;
-  background: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-  margin: 0;
-  -moz-margin-end: 3px;
-  color: inherit;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
-  -moz-box-orient: horizontal;
-}
-
-.devtools-menulist:-moz-focusring,
-.devtools-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.7);
-  outline-offset: -4px;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-icon {
-  margin: 0;
-}
-
-.devtools-toolbarbutton:not([label]) {
-  min-width: 32px;
-}
-
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
-}
-
-.devtools-toolbarbutton:not([checked=true]):hover:active {
-  background-color: hsla(210,18%,9%,.1);
-  background-image: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
-  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-.devtools-menulist[open=true],
-.devtools-toolbarbutton[open=true],
-.devtools-toolbarbutton[checked=true] {
-  border-color: hsla(211,68%,6%,.6);
-  background: linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
-  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-.devtools-toolbarbutton[checked=true] {
-  color: hsl(200,100%,60%) !important;
-}
-
-.devtools-toolbarbutton[checked=true]:hover:active {
-  background-color: hsla(211,68%,6%,.2);
-}
-
-.devtools-option-toolbarbutton {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-  background: none;
-  border: none;
-}
-
-.devtools-option-toolbarbutton[open=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-.devtools-menulist > .menulist-label-box {
-  text-align: center;
-}
-
-.devtools-menulist > .menulist-dropmarker {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  border-width: 0;
-  background-color: transparent;
-}
-
-.devtools-menulist:focus:not([open="true"]):not(.menulist-compact) > .menulist-label-box {
-  color: hsl(210,30%,85%) !important;
-  background-color: transparent;
-}
-
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
-  color: inherit;
-  border-width: 0;
-  -moz-border-end: 1px solid hsla(210,8%,5%,.45);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[type=menu-button] {
-  padding: 0 1px;
-  -moz-box-align: stretch;
-}
-
-.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-  -moz-appearance: none !important;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  -moz-box-align: center;
-}
-
-/* Text input */
-
-.devtools-textinput,
-.devtools-searchinput {
-  -moz-appearance: none;
-  margin: 0 3px;
-  min-height: 22px;
-  border: 1px solid hsla(211,68%,6%,.6);
-  box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1);
-  border-radius: 2px;
-  background-color: transparent;
-  background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
-  padding: 3px;
-  transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
-  transition-timing-function: ease;
-  color: inherit;
-}
-
-.devtools-searchinput {
-  background-image: url(magnifying-glass.png), linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
-  background-repeat: no-repeat;
-  background-position: 4px center, top left, top left;
-  padding-top: 0;
-  padding-bottom: 0;
-  -moz-padding-start: 18px;
-  -moz-padding-end: 12px;
-  font-size: inherit;
-}
-
-.devtools-searchinput[focused] {
-  border-color: hsl(200,70%,40%) hsl(200,75%,37%) hsl(200,80%,35%);
-  background-origin: padding-box;
-  background-clip: padding-box;
-  box-shadow: inset 0 0 0 1px hsla(211,68%,6%,.1);
-}
-
-.devtools-searchinput:-moz-locale-dir(rtl) {
-  background-position: calc(100% - 4px) center, top left, top left;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
-  display: none;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
-  opacity: 1.0;
-  color: hsl(208,10%,66%);
-}
-
-.devtools-no-search-result {
-  box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35);
-  border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;
-  background-image: url(magnifying-glass.png), linear-gradient(hsla(1,16%,76%,.45), hsla(1,16%,76%,.75));
-}
-
-/* Close button */
-
-.devtools-closebutton {
-  list-style-image: url("chrome://browser/skin/devtools/close.png");
-  -moz-appearance: none;
-  border: none;
-  margin: 0 4px;
-  min-width: 16px;
-  width: 16px;
-  opacity: 0.6;
-}
-
-.devtools-closebutton > .toolbarbutton-text {
-  display: none;
-}
-
-.devtools-closebutton:hover {
-  opacity: 0.8;
-}
-
-.devtools-closebutton:hover:active {
-  opacity: 1;
-}
-
-/* Splitters */
-
-.devtools-horizontal-splitter {
-  -moz-appearance: none;
-  border-width: 1px 0 0 0;
-  -moz-border-top-colors: black;
-  background-color: transparent;
-  min-height: 3px;
-  height: 3px;
-  margin-bottom: -3px;
-  position: relative;
-}
-
-.devtools-side-splitter {
-  border: 0;
-  -moz-border-start: 1px solid #242b33;
-  min-width: 0;
-  width: 3px;
-  background-color: transparent;
-  -moz-margin-end: -3px;
-  position: relative;
-  cursor: e-resize;
-}
-
-/* In-tools sidebar */
-
-.devtools-toolbox-side-iframe {
-  min-width: 465px;
-}
-
-.devtools-sidebar-tabs {
-  -moz-appearance: none;
-  margin: 0;
-}
-
-.devtools-sidebar-tabs > tabpanels {
-  -moz-appearance: none;
-  padding: 0;
-  border: 0;
-}
-
-.devtools-sidebar-tabs > tabs {
-  -moz-appearance: none;
-  position: static;
-  color: hsl(210,30%,85%);
-  margin-bottom: 0;
-  padding: 0;
-  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
-  border-width: 0 0 1px 0;
-  border-color: hsla(210,8%,5%,.6);
-  border-style: solid;
-  overflow: hidden;
-}
-
-.devtools-sidebar-tabs > tabs > .tabs-right,
-.devtools-sidebar-tabs > tabs > .tabs-left {
-  display: none;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  -moz-appearance: none;
-  /* We want to match the height of a toolbar with a toolbarbutton
-   * First, we need to replicated the padding of toolbar (4px),
-   * then, the padding of the button itself from toolbarbutton.css (3px),
-   * Also, we need to take the border of the buttons into accout (1px).
-   * Padding-bottom is one pixel shorter because we need to include the
-   * black border.
-   */
-  padding: 8px 3px 7px;
-  -moz-padding-start: 6px;
-  margin: 0;
-  min-width: 78px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  text-align: center;
-  color: inherit;
-  -moz-box-flex: 1;
-  border-width: 0;
-  background: transparent;
-  border-radius: 0;
-  position: static;
-  -moz-margin-start: -1px;
-}
-
-.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
-  position: static;
-}
-
-.devtools-sidebar-tabs > tabs > tab:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-.devtools-sidebar-tabs > tabs > tab:first-of-type {
-  -moz-margin-start: -3px;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-size: 100% 100%, 1px 100%, 1px 100%, 1px 100%;
-  background-repeat: no-repeat;
-  background-position: 2px, 0, 1px, 2px;
-}
-
-.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
-  background-position: calc(100% - 3px), 100%, calc(100% - 1px), calc(100% - 2px);
-}
-
-%filter substitution
-%define smallSeparator linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0))
-%define solidSeparator linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1))
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-image: linear-gradient(transparent, transparent), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
-  background-image: linear-gradient(transparent, transparent), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] {
-  color: #f5f7fa;
-  background-image: linear-gradient(#2f607b, #294d68), @solidSeparator@;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.1) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
-  background-image: linear-gradient(#274f64, #224056), @solidSeparator@;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
-  background-image: linear-gradient(#1f3e4f, #1b3243), @solidSeparator@;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-%include ../../shared/devtools/common.inc.css
diff --git a/browser/themes/osx/devtools/dark-theme.css b/browser/themes/osx/devtools/dark-theme.css
deleted file mode 100644
index 97189572d..000000000
--- a/browser/themes/osx/devtools/dark-theme.css
+++ /dev/null
@@ -1,104 +0,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/. */
-
-/* According to:
- * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
- */
-.theme-body {
-  background: #131c26;
-  color: #8fa1b2
-}
-
-.theme-twisty {
-  cursor: pointer;
-  margin-right: 5px;
-}
-
-.theme-twisty:-moz-focusring {
-  outline-style: none;
-}
-
-.theme-twisty:not([open]) {
-  width: 0;
-  height: 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid rgba(255,255,255,0.5);
-  margin-left: 5px;
-}
-
-.theme-twisty[open] {
-  width: 10px;
-  height: 10px;
-  background-image: linear-gradient(to bottom right, transparent 68%,  rgba(255,255,255,0.5) 68%);
-}
-
-.theme-checkbox {
-  display: inline-block;
-  border: 0;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  outline: none;
-  background: url("chrome://browser/skin/devtools/checkbox-dark.png") no-repeat;
-}
-
-.theme-checkbox[checked] {
-  background: url("chrome://browser/skin/devtools/checkbox-dark.png") 14px 0;
-}
-
-.theme-selected {
-  background: #26384E;
-}
-
-.theme-bg-darker {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.theme-link { /* blue */
-  color: #3689b2;
-}
-
-.theme-comment { /* grey */
-  color: #5c6773;
-}
-
-.theme-gutter {
-  background-color: #0f171f;
-  color: #667380;
-  border-color: #303b47;
-}
-
-.theme-separator { /* grey */
-  border-color: #303b47;
-}
-
-.theme-fg-color1 { /* green */
-  color: #5c9966;
-}
-
-.theme-fg-color2 { /* blue */
-  color: #3689b2;
-}
-
-.theme-fg-color3 { /* pink/lavender */
-  color: #a673bf;
-}
-
-.theme-fg-color4 { /* purple/violet */
-  color: #6270b2;
-}
-
-.theme-fg-color5 { /* Yellow */
-  color: #a18650;
-}
-
-.theme-fg-color6 { /* Orange */
-  color: #b26b47;
-}
-
-.theme-fg-color7 { /* Red */
-  color: #bf5656;
-}
diff --git a/browser/themes/osx/devtools/debugger-collapse.png b/browser/themes/osx/devtools/debugger-collapse.png
deleted file mode 100644
index 242e19c56..000000000
--- a/browser/themes/osx/devtools/debugger-collapse.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/debugger-expand.png b/browser/themes/osx/devtools/debugger-expand.png
deleted file mode 100644
index af453e316..000000000
--- a/browser/themes/osx/devtools/debugger-expand.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/debugger-pause.png b/browser/themes/osx/devtools/debugger-pause.png
deleted file mode 100644
index 7f908bf8b..000000000
--- a/browser/themes/osx/devtools/debugger-pause.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/debugger-play.png b/browser/themes/osx/devtools/debugger-play.png
deleted file mode 100644
index 91719826a..000000000
--- a/browser/themes/osx/devtools/debugger-play.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/debugger-step-in.png b/browser/themes/osx/devtools/debugger-step-in.png
deleted file mode 100644
index c80ee72a2..000000000
--- a/browser/themes/osx/devtools/debugger-step-in.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/debugger-step-out.png b/browser/themes/osx/devtools/debugger-step-out.png
deleted file mode 100644
index 1a7145a98..000000000
--- a/browser/themes/osx/devtools/debugger-step-out.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/debugger-step-over.png b/browser/themes/osx/devtools/debugger-step-over.png
deleted file mode 100644
index 7c9b82ad4..000000000
--- a/browser/themes/osx/devtools/debugger-step-over.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/debugger.css b/browser/themes/osx/devtools/debugger.css
index 9eeaf2eba..50b7b9434 100644
--- a/browser/themes/osx/devtools/debugger.css
+++ b/browser/themes/osx/devtools/debugger.css
@@ -1,321 +1,6 @@
-/* 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/. */
 
-#body {
-  background: #fff;
-}
-
-/* Sources and breakpoints pane */
-
-#sources-pane {
-  min-width: 50px;
-}
-
-#sources-pane + .devtools-side-splitter {
-  -moz-border-start-color: transparent;
-}
-
-/* ListWidget items */
-
-.list-widget-item {
-  padding: 2px;
-}
-
-.list-widget-item:not(.selected):not(.empty):hover {
-  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;
-}
-
-.list-widget-item.selected.light {
-  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
-  color: #000;
-}
-
-.list-widget-item.selected {
-  background: Highlight;
-  color: HighlightText;
-}
-
-.list-widget-item.empty {
-  color: GrayText;
-  padding: 2px;
-}
-
-/* Stack frames view */
-
-.dbg-stackframe-details {
-  -moz-padding-start: 4px;
-}
-
-.dbg-stackframe-menuitem[checked] {
-  margin-top: 3px;
-  margin-bottom: 3px;
-  outline: 1px solid #eee;
-  font-weight: 600;
-}
-
-.dbg-stackframe-menuitem-details {
-  -moz-padding-start: 16px;
-}
-
-/* Sources and breakpoints view */
-
-.dbg-breakpoint {
-  font-family: monospace;
-}
-
-.dbg-breakpoint-line {
-  font-weight: 600;
-}
-
-.dbg-breakpoint-text {
-  -moz-margin-start: 10px !important;
-  font-style: italic;
-}
-
-/* Watch expressions view */
-
-#expressions {
-  min-height: 10px;
-  max-height: 125px;
-}
-
-.dbg-expression {
-  height: 20px;
-}
-
-.dbg-expression-arrow {
-  width: 16px;
-  height: auto;
-  background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
-}
-
-.dbg-expression-input {
-  -moz-padding-start: 2px !important;
-  font-family: Menlo, Monaco, monospace;
-}
-
-/* Searchbox and the search operations help panel */
-
-.devtools-searchinput {
-  min-width: 220px;
-  -moz-margin-start: 1px;
-}
-
-#searchbox-panel-description {
-  margin-top: 0;
-  margin-bottom: 8px;
-  -moz-margin-start: 2px;
-}
-
-.searchbox-panel-operator-button {
-  min-width: 26px;
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 2px;
-  -moz-margin-end: 6px;
-  text-align: center;
-  font-family: Menlo, Monaco, monospace;
-}
-
-.searchbox-panel-operator-label {
-  padding-bottom: 2px;
-}
-
-/* Searchbox results panel */
-
-.results-panel {
-  padding: 4px;
-  opacity: 0.9;
-}
-
-.results-panel-item {
-  background: #f4f4f4;
-  border: 1px solid #ddd;
-  border-top-color: #fff;
-  padding: 5px;
-  cursor: pointer;
-}
-
-.results-panel-item:first-of-type {
-  border-top-color: #ddd;
-  border-radius: 4px 4px 0 0;
-}
-
-.results-panel-item:last-of-type {
-  border-radius: 0 0 4px 4px;
-}
-
-.results-panel-item:only-of-type {
-  border-radius: 4px;
-}
-
-.results-panel-item:not(.selected):not(:hover) {
-  text-shadow: 0 1px #fff;
-}
-
-.results-panel-item-pre {
-  -moz-margin-end: 5px !important;
-  color: #444;
-  cursor: inherit;
-}
-
-.results-panel-item-name {
-  color: #111;
-  font-weight: 600;
-  cursor: inherit;
-}
-
-.results-panel-item-details {
-  color: #7f7f7f;
-  cursor: inherit;
-}
-
-/* Sources search view */
-
-#globalsearch {
-  min-height: 10px;
-  box-shadow: inset 0 -4px 8px #eee;
-  background: url(background-noise-toolbar.png);
-}
-
-#globalsearch > vbox:not(:empty) {
-  min-height: 10px;
-  max-height: 125px;
-}
-
-#globalsearch + .devtools-horizontal-splitter {
-  -moz-border-top-colors: #bfbfbf;
-}
-
-.dbg-source-results {
-  padding: 0;
-  background: none !important;
-}
-
-.dbg-results-header {
-  -moz-padding-start: 6px;
-}
-
-.dbg-results-header-location {
-  font-weight: 600;
-}
-
-.dbg-results-header-match-count {
-  -moz-padding-start: 6px;
-  color: GrayText;
-}
-
-.dbg-results-line-number {
-  background: #e2e2e2;
-  min-width: 40px;
-  -moz-border-end: 1px solid #b4c4d3;
-  -moz-padding-end: 4px;
-  padding-top: 2px;
-  text-align: end;
-  font-family: monospace;
-  color: #8c8c8c;
-}
-
-.dbg-results-line-contents {
-  -moz-padding-start: 4px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  font-family: monospace;
-}
-
-.dbg-results-line-contents-string {
-  padding: 1px;
-}
-
-.dbg-results-line-contents-string[match=true] {
-  background: rgba(255,255,0,0.5);
-  padding: 0;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.dbg-results-line-contents-string[match=true][focusing] {
-  transition: transform 0.3s ease-in-out;
-}
-
-.dbg-results-line-contents-string[match=true][focused] {
-  transition-duration: 0.1s;
-  transform: scale(1.75, 1.75);
-}
-
-/* Toolbar Controls */
-
-#resumption-panel-desc {
-  width: 200px;
-}
-
-#resumption-order-panel {
-  -moz-margin-start: -8px;
-}
-
-#resume {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#resume[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#step-over {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
-}
-
-#step-in {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
-}
-
-#step-out {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
-}
-
-#debugger-controls > toolbarbutton {
-  margin: 0;
-  box-shadow: none;
-  border-radius: 0;
-  border-width: 0;
-  -moz-border-end-width: 1px;
-  outline-offset: -3px;
-}
-
-#debugger-controls > toolbarbutton:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-#debugger-controls {
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset,
-              0 0 0 1px hsla(209,29%,72%,.1) inset,
-              0 0 0 1px hsla(209,29%,72%,.1),
-              0 1px 0 hsla(210,16%,76%,.1);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: 3px;
-  margin: 0 3px;
-}
-
-#instruments-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border: none;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#instruments-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#instruments-pane-toggle:hover {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#instruments-pane-toggle:hover:active {
-  -moz-image-region: rect(0px,48px,16px,32px);
-}
+%include ../shared.inc
+%include ../../shared/devtools/debugger.inc.css
diff --git a/browser/themes/osx/devtools/dock-bottom.png b/browser/themes/osx/devtools/dock-bottom.png
deleted file mode 100644
index 8fa9c932b..000000000
--- a/browser/themes/osx/devtools/dock-bottom.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/dock-side.png b/browser/themes/osx/devtools/dock-side.png
deleted file mode 100644
index 1c1235513..000000000
--- a/browser/themes/osx/devtools/dock-side.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/dropmarker.png b/browser/themes/osx/devtools/dropmarker.png
deleted file mode 100644
index 7e91860fb..000000000
--- a/browser/themes/osx/devtools/dropmarker.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/floating-scrollbars.css b/browser/themes/osx/devtools/floating-scrollbars.css
index ff70d646f..3cd2fda2f 100644
--- a/browser/themes/osx/devtools/floating-scrollbars.css
+++ b/browser/themes/osx/devtools/floating-scrollbars.css
@@ -1,33 +1,33 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 scrollbar {
-  -moz-appearance: none !important;
+  -moz-appearance: none;
   position: relative;
   background-color: transparent;
   background-image: none;
+  border: 0px solid transparent;
   z-index: 2147483647;
   padding: 2px;
 }
 
 scrollbar[orient="vertical"] {
-  -moz-margin-start: -10px;
-  min-width: 10px;
-  max-width: 10px;
+  -moz-margin-start: -8px;
+  min-width: 8px;
+  max-width: 8px;
 }
 
 scrollbar[orient="horizontal"] {
-  margin-top: -10px;
-  min-height: 10px;
-  max-height: 10px;
+  margin-top: -8px;
+  min-height: 8px;
+  max-height: 8px;
 }
 
-scrollbar thumb {
+slider {
   -moz-appearance: none !important;
-  border-width: 0px !important;
-  background-color: rgba(170,170,170,0.2) !important;
-  border-radius: 3px !important;
 }
 
-scrollbar scrollbarbutton, scrollbar gripper {
-  display: none;
+thumb {
+  -moz-appearance: none !important;
+  background-color: rgba(0,0,0,0.2);
+  border-radius: 3px;
 }
diff --git a/browser/themes/osx/devtools/font-inspector.css b/browser/themes/osx/devtools/font-inspector.css
deleted file mode 100644
index dff3abb30..000000000
--- a/browser/themes/osx/devtools/font-inspector.css
+++ /dev/null
@@ -1,80 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding-bottom: 20px;
-}
-
-#all-fonts {
-  padding: 0 5px;
-  margin: 0;
-}
-
-#showall {
-  border-radius: 0;
-  border: 1px solid black;
-  margin: 3px;
-  cursor: pointer;
-  position: fixed;
-  bottom: 0;
-  right: 0;
-}
-
-.font {
-  padding: 10px 5px;
-  font-size: 0;
-}
-
-.theme-dark .font {
-  border-bottom: 1px solid #444;
-}
-
-.theme-light .font {
-  border-bottom: 1px solid #DDD;
-}
-
-.font:last-of-type {
-  border-bottom: 0;
-}
-
-.theme-light .font:nth-child(even) {
-  background: #F4F4F4;
-}
-
-.font-preview {
-  height: 60px;
-  width: 100%;
-  border: 0;
-  display: block;
-}
-
-.font-info {
-  font-size: 1rem;
-  display: block;
-}
-
-.font-name {
-  display: inline;
-}
-
-.font-css-code {
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 5px;
-}
-
-.theme-light .font-css-code,
-.theme-light .font-url {
-  border: 1px solid #CCC;
-  background: white;
-}
-
-.theme-dark .font-css-code,
-.theme-dark .font-url {
-  border: 1px solid #333;
-  background: black;
-  color: white;
-}
diff --git a/browser/themes/osx/devtools/inspect-button.png b/browser/themes/osx/devtools/inspect-button.png
deleted file mode 100644
index ebfd9586d..000000000
--- a/browser/themes/osx/devtools/inspect-button.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/inspector.css b/browser/themes/osx/devtools/inspector.css
deleted file mode 100644
index 62e70b798..000000000
--- a/browser/themes/osx/devtools/inspector.css
+++ /dev/null
@@ -1,35 +0,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/. */
-
-#inspector-inspect-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#inspector-inspect-toolbutton[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#inspector-searchbox {
-  transition-property: max-width, -moz-padding-end, -moz-padding-start;
-  transition-duration: 250ms;
-  transition-timing-function: ease;
-}
-
-#inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box {
-  overflow: hidden;
-}
-
-#inspector-searchbox:not([focused]):not([filled]) {
-  max-width: 20px !important;
-  -moz-padding-end: 6px;
-  -moz-padding-start: 22px;
-  background-position: 8px center, top left, top left;
-}
-
-#inspector-searchbox[focused],
-#inspector-searchbox[filled] {
-  max-width: 200px !important;
-}
diff --git a/browser/themes/osx/devtools/itemArrow-ltr.png b/browser/themes/osx/devtools/itemArrow-ltr.png
deleted file mode 100644
index 6cc3e984b..000000000
--- a/browser/themes/osx/devtools/itemArrow-ltr.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/itemArrow-rtl.png b/browser/themes/osx/devtools/itemArrow-rtl.png
deleted file mode 100644
index 0f8f4b1b0..000000000
--- a/browser/themes/osx/devtools/itemArrow-rtl.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/itemToggle.png b/browser/themes/osx/devtools/itemToggle.png
deleted file mode 100644
index cf70394e6..000000000
--- a/browser/themes/osx/devtools/itemToggle.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/layout-background-grid.png b/browser/themes/osx/devtools/layout-background-grid.png
deleted file mode 100644
index 87b0b855d..000000000
--- a/browser/themes/osx/devtools/layout-background-grid.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/layoutview.css b/browser/themes/osx/devtools/layoutview.css
deleted file mode 100644
index 14e10dfd3..000000000
--- a/browser/themes/osx/devtools/layoutview.css
+++ /dev/null
@@ -1,46 +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/. */
-
-.theme-dark .theme-body {
-  background-image: url(layout-background-grid.png);
-}
-
-.theme-light .theme-body {
-  background-image: url(layout-background-grid.png), radial-gradient(circle at 50% 70%, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
-}
-
-.theme-body {
-  color: hsl(210,100%,85%);
-  box-sizing: border-box;
-}
-
-#main {
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted;
-}
-
-#main > .border {
-  color: hsl(210,53%,45%);
-}
-
-.border > span {
-  background-color: hsl(210,100%,85%);
-  border-radius: 2px;
-  padding: 0 4px;
-}
-
-#content {
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted 
-}
-
-#padding {
-  border-color: hsla(210,100%,85%,0.2);
-  border-style: solid;
-}
-
-#borders {
-  border-style: solid;
-  border-color: hsl(210,100%,85%);
-}
diff --git a/browser/themes/osx/devtools/light-theme.css b/browser/themes/osx/devtools/light-theme.css
deleted file mode 100644
index a867df614..000000000
--- a/browser/themes/osx/devtools/light-theme.css
+++ /dev/null
@@ -1,104 +0,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/. */
-
-/* According to:
- * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
- */
-.theme-body {
-  background: white;
-  color: black;
-}
-
-.theme-twisty {
-  cursor: pointer;
-  margin-right: 5px;
-}
-
-.theme-twisty:-moz-focusring {
-  outline-style: none;
-}
-
-.theme-twisty:not([open]) {
-  width: 0;
-  height: 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid rgba(0,0,0,0.5);
-  margin-left: 5px;
-}
-
-.theme-twisty[open] {
-  width: 10px;
-  height: 10px;
-  background-image: linear-gradient(to bottom right, transparent 68%,  rgba(0,0,0,0.5) 68%);
-}
-
-.theme-checkbox {
-  display: inline-block;
-  border: 0;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  outline: none;
-  background: url("chrome://browser/skin/devtools/checkbox-light.png") no-repeat;
-}
-
-.theme-checkbox[checked] {
-  background: url("chrome://browser/skin/devtools/checkbox-light.png") 14px 0;
-}
-
-.theme-selected {
-  background-color: hsl(0,0%,90%);
-}
-
-.theme-bg-darker {
-  background: #F9F9F9;
-}
-
-.theme-link { /* blue */
-  color: hsl(208,56%,40%);
-}
-
-.theme-comment { /* grey */
-  color: hsl(90,2%,46%);
-}
-
-.theme-gutter {
-  background-color: hsl(0,0%,90%);
-  color: #667380;
-  border-color: hsl(0,0%,65%);
-}
-
-.theme-separator { /* grey */
-  border-color: #cddae5;
-}
-
-.theme-fg-color1 { /* green */
-  color: hsl(72,100%,27%);
-}
-
-.theme-fg-color2 { /* blue */
-  color: hsl(208,56%,40%);
-}
-
-.theme-fg-color3 { /* dark blue */
-  color: hsl(208,81%,21%)
-}
-
-.theme-fg-color4 { /* Orange */
-  color: hsl(24,85%,39%);
-}
-
-.theme-fg-color5 { /* Yellow */
-  color: #a18650;
-}
-
-.theme-fg-color6 { /* Orange */
-  color: hsl(24,85%,39%);
-}
-
-.theme-fg-color7 { /* Red */
-  color: #bf5656;
-}
diff --git a/browser/themes/osx/devtools/magnifying-glass.png b/browser/themes/osx/devtools/magnifying-glass.png
deleted file mode 100644
index 236d93d49..000000000
--- a/browser/themes/osx/devtools/magnifying-glass.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/markup-view.css b/browser/themes/osx/devtools/markup-view.css
deleted file mode 100644
index 4651a4314..000000000
--- a/browser/themes/osx/devtools/markup-view.css
+++ /dev/null
@@ -1,44 +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/. */
-
-* {
-  padding: 0;
-  margin: 0;
-}
-
-.newattr {
-  cursor: pointer;
-}
-
-.selected {
-  background-color: hsl(0,0%,90%);
-}
-
-/* Give some padding to focusable elements to match the editor input
- * that will replace them. */
-span[tabindex] {
-  display: inline-block;
-  padding: 1px 0;
-}
-
-li.container {
-  position: relative;
-  padding: 2px 0 0 2px;
-}
-
-.codebox {
-  padding-left: 14px;
-}
-
-.expander {
-  position: absolute;
-}
-
-.more-nodes {
-  padding-left: 16px;
-}
-
-.styleinspector-propertyeditor {
-  border: 1px solid #CCC;
-}
diff --git a/browser/themes/osx/devtools/netmonitor.css b/browser/themes/osx/devtools/netmonitor.css
index ee72aa607..f596d530b 100644
--- a/browser/themes/osx/devtools/netmonitor.css
+++ b/browser/themes/osx/devtools/netmonitor.css
@@ -1,531 +1,6 @@
-/* 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/. */
 
-#body {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-}
-
-/* Network requests table */
-
-#requests-menu-empty-notice {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  font-size: 110%;
-  color: #fff;
-}
-
-#requests-menu-toolbar {
-  height: 33px;
-  padding: 0;
-}
-
-.requests-menu-header:first-child {
-  -moz-padding-start: 4px;
-}
-
-.requests-menu-subitem {
-  padding: 4px;
-}
-
-.requests-menu-header:not(:last-child):-moz-locale-dir(ltr),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header-button {
-  -moz-appearance: none;
-  background: none;
-  min-width: 20px;
-  min-height: 32px; /* Remaining 1px comes from border of the toolbar. */
-  margin: 0;
-  border: none;
-  padding: 0;
-  color: inherit;
-  font-weight: inherit !important;
-  transition: background-color 0.1s ease-in-out;
-}
-
-.requests-menu-header-button:hover {
-  background: rgba(0,0,0,0.10);
-}
-
-.requests-menu-header-button:hover:active {
-  background: rgba(0,0,0,0.25);
-}
-
-.requests-menu-header-button:not(:active)[sorted] {
-  background: rgba(0,0,0,0.15);
-}
-
-.requests-menu-header-button:not(:active)[sorted=ascending] {
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-header-button:not(:active)[sorted=descending] {
-  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom;
-}
-
-/* Network requests table: specific column dimensions */
-
-.requests-menu-status-and-method {
-  width: 8em;
-}
-
-.requests-menu-status {
-  width: 10px;
-  height: 10px;
-}
-
-.requests-menu-method {
-  text-align: center;
-  font-weight: 600;
-}
-
-.requests-menu-file {
-  width: 20vw;
-  min-width: 4em;
-}
-
-.requests-menu-domain {
-  width: 14vw;
-  min-width: 10em;
-}
-
-.requests-menu-type {
-  text-align: center;
-  width: 4em;
-}
-
-.requests-menu-size {
-  text-align: center;
-  width: 8em;
-}
-
-/* Network requests table: status codes */
-
-box.requests-menu-status {
-  background: #fff;
-  -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
-  border-radius: 20px;
-  box-shadow:
-    0 0 0 1px rgba(255,255,255,0.4) inset,
-    0 -6px 4px 0 rgba(32,32,32,1.0) inset,
-    0 0 8px 0 rgba(32,0,0,0.4);
-  transition: box-shadow 0.5s ease-in-out;
-}
-
-box.requests-menu-status[code^="1"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,0,64,1.0) inset,
-    0 0 8px 0 rgba(0,0,128,1.0);
-}
-
-box.requests-menu-status[code^="2"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,64,0,1.0) inset,
-    0 0 8px 0 rgba(0,128,0,1.0);
-}
-
-box.requests-menu-status[code^="3"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,32,0,1.0) inset,
-    0 0 8px 0 rgba(128,128,0,1.0);
-}
-
-box.requests-menu-status[code^="4"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,0,1.0) inset,
-    0 0 8px 0 rgba(128,0,0,1.0);
-}
-
-box.requests-menu-status[code^="5"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,64,1.0) inset,
-    0 0 8px 0 rgba(128,0,128,1.0);
-}
-
-/* Network requests table: waterfall header */
-
-#requests-menu-waterfall-label {
-  -moz-padding-start: 8px;
-  -moz-padding-end: 8px;
-}
-
-.requests-menu-timings-division {
-  width: 100px;
-  padding-top: 1px;
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #999;
-  font-size: 90%;
-  pointer-events: none;
-}
-
-.requests-menu-timings-division:not(:first-child) {
-  -moz-margin-start: -100px !important; /* Don't affect layout. */
-}
-
-.requests-menu-timings-division:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-division:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-/* Network requests table: waterfall items */
-
-.requests-menu-subitem.requests-menu-waterfall {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 4px;
-  background-repeat: repeat-y; /* Background created on a <canvas> in js. */
-  margin-top: -1px; /* Compensate borders. */
-  margin-bottom: -1px;
-}
-
-.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
-  background-position: right center;
-}
-
-.requests-menu-timings:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total {
-  -moz-padding-start: 8px;
-  font-size: 85%;
-  font-weight: 600;
-}
-
-.requests-menu-timings-cap {
-  width: 4px;
-  height: 10px;
-  border: 1px solid #fff;
-}
-
-.requests-menu-timings-cap.start {
-  -moz-border-end: none;
-}
-
-.requests-menu-timings-cap.end {
-  -moz-border-start: none;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-box {
-  height: 10px;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-}
-
-.requests-menu-timings-box.blocked,
-.requests-menu-timings-cap.blocked {
-  background-color: rgba(255,32,32,0.8);
-  box-shadow: 0 0 8px 0 rgba(128,32,32,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.dns,
-.requests-menu-timings-cap.dns {
-  background-color: rgba(255,128,255,0.6);
-  box-shadow: 0 0 8px 0 rgba(128,128,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.connect,
-.requests-menu-timings-cap.connect {
-  background-color: rgba(255,128,16,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,128,16,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.send,
-.requests-menu-timings-cap.send {
-  background-color: rgba(255,255,128,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,255,128,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.wait,
-.requests-menu-timings-cap.wait {
-  background-color: rgba(255,255,255,0.2);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,0.4),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.receive,
-.requests-menu-timings-cap.receive {
-  background-color: rgba(255,255,255,1.0);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-item[odd] {
-  background: rgba(255,255,255,0.05);
-}
-
-.side-menu-widget-item-contents {
-  padding: 0;
-}
-
-/* Network request details */
-
-#details-pane {
-  background: hsl(208,11%,27%);
-  max-width: 500px;
-}
-
-#details-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border-color: transparent;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#details-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#details-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-/* Network request details tabpanels */
-
-.tabpanel-content {
-  background: url(background-noise-toolbar.png), #3e4750;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset;
-  color: #fff;
-}
-
-.tabpanel-summary-container {
-  padding: 1px;
-}
-
-.tabpanel-summary-label {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 3px;
-  font-weight: 600;
-  text-shadow: 0 1px 0 #000;
-  color: hsl(210,30%,85%);
-}
-
-.tabpanel-summary-value {
-  -moz-padding-start: 3px;
-  font-family: Menlo, Monaco, monospace;
-}
-
-.variable-or-property:not(:focus) > .title > .token-string {
-  color: #10c !important;
-}
-
-/* Headers tabpanel */
-
-#headers-summary-status,
-#headers-summary-version {
-  padding-bottom: 2px;
-}
-
-#headers-summary-size {
-  padding-top: 2px;
-}
-
-/* Response tabpanel */
-
-#response-content-info-header {
-  background:
-    url(background-noise-toolbar.png),
-    linear-gradient(hsl(0,61%,40%), hsl(0,61%,31%)) repeat-x top left;
-  box-shadow:
-    inset 0 1px 0 hsla(210,40%,83%,.15),
-    inset 0 -1px 0 hsla(210,40%,83%,.05);
-  margin: 0;
-  padding: 5px 8px;
-}
-
-#response-content-image-box {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-#response-content-image {
-  background: #fff;
-  border: 1px dashed GrayText;
-  margin-bottom: 10px;
-}
-
-/* Timings tabpanel */
-
-#timings-tabpanel .tabpanel-summary-label {
-  width: 10em;
-}
-
-#timings-tabpanel .requests-menu-timings-box {
-  transition: transform 0.2s ease-out;
-  min-width: 1px;
-}
-
-#timings-tabpanel .requests-menu-timings-total {
-  transition: transform 0.2s ease-out;
-}
-
-/* Footer */
-
-#requests-menu-footer {
-  box-shadow: inset 0 1px 16px hsla(210,8%,5%,.3);
-}
-
-.requests-menu-footer-button,
-.requests-menu-footer-label {
-  min-width: 1em;
-  margin: 0;
-  border: none;
-  padding: 0px 1.5vw;
-  color: #fff;
-}
-
-.requests-menu-footer-spacer {
-  min-width: 2px;
-}
-
-.requests-menu-footer-spacer,
-.requests-menu-footer-button {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-footer-button {
-  -moz-appearance: none;
-  background: rgba(0,0,0,0.025);
-}
-
-.requests-menu-footer-button:hover {
-  background: rgba(0,0,0,0.20);
-}
-
-.requests-menu-footer-button:hover:active {
-  background: rgba(0,0,0,0.35);
-}
-
-.requests-menu-footer-button:not(:active)[checked] {
-  background-color: rgba(0,0,0,0.25);
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-footer-label {
-  font-weight: 600;
-}
-
-/* Responsive sidebar */
-@media (max-width: 700px) {
-  #requests-menu-toolbar {
-    height: 24px;
-  }
-
-  .requests-menu-header-button {
-    min-height: 23px; /* Remaining 1px comes from border of the toolbar. */
-  }
-
-  .requests-menu-footer-button,
-  .requests-menu-footer-label {
-    padding: 0px 2vw;
-  }
-
-  #details-pane {
-    max-width: none;
-    margin: 0 !important;
-    /* To prevent all the margin hacks to hide the sidebar. */
-  }
-
-  .requests-menu-status-and-method {
-    width: 16vw;
-  }
-
-  .requests-menu-file,
-  .requests-menu-domain {
-    width: 30vw;
-  }
-
-  .requests-menu-type {
-    width: 8vw;
-  }
-
-  .requests-menu-size {
-    width: 16vw;
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Timeline" header is not visible anymore, and thus the
-       right border and box-shadow of "Size" column should be hidden. */
-  }
-}
-
-@media (min-width: 701px) {
-  #network-table[type-overflows] .requests-menu-domain {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Type" header is not visible anymore, and thus the
-       right border and box-shadow of "Domain" column should be hidden. */
-  }
-
-  #network-table[domain-overflows] .requests-menu-file {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Domain" header is not visible anymore, and thus the
-       right border and box-shadow of "File" column should be hidden. */
-  }
-}
+%include ../shared.inc
+%include ../../shared/devtools/netmonitor.inc.css
diff --git a/browser/themes/osx/devtools/option-icon.png b/browser/themes/osx/devtools/option-icon.png
deleted file mode 100644
index 9fd78175d..000000000
--- a/browser/themes/osx/devtools/option-icon.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/orion-breakpoint.png b/browser/themes/osx/devtools/orion-breakpoint.png
deleted file mode 100644
index ddd344eee..000000000
--- a/browser/themes/osx/devtools/orion-breakpoint.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/orion-container.css b/browser/themes/osx/devtools/orion-container.css
deleted file mode 100644
index cf3568a94..000000000
--- a/browser/themes/osx/devtools/orion-container.css
+++ /dev/null
@@ -1,39 +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/. */
-
-.viewTooltip {
-  display: none; /* TODO: add tooltips support, see bug 721752 */
-  font-family: monospace;
-  font-size: 13px;
-  background-color: InfoBackground;
-  color: InfoText;
-  padding: 2px;
-  border-radius: 4px;
-  border: 1px solid black;
-  z-index: 100;
-  position: fixed;
-  overflow: hidden;
-  white-space: pre;
-}
-
-.viewTooltip em {
-  font-style: normal;
-  font-weight: bold;
-}
-
-.annotationHTML {
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-  vertical-align: middle;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.annotationHTML.task {
-  background-image: url("chrome://browser/skin/devtools/orion-task.png");
-}
-.annotationHTML.breakpoint {
-  background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png");
-}
diff --git a/browser/themes/osx/devtools/orion-debug-location.png b/browser/themes/osx/devtools/orion-debug-location.png
deleted file mode 100644
index a00649b77..000000000
--- a/browser/themes/osx/devtools/orion-debug-location.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/orion-task.png b/browser/themes/osx/devtools/orion-task.png
deleted file mode 100644
index 42dbc00b6..000000000
--- a/browser/themes/osx/devtools/orion-task.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/orion.css b/browser/themes/osx/devtools/orion.css
deleted file mode 100644
index f51ecceeb..000000000
--- a/browser/themes/osx/devtools/orion.css
+++ /dev/null
@@ -1,199 +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/. */
-
-.viewContainer {
-  background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
-  font-family: monospace;
-  font-size: inherit; /* inherit browser's default monospace font size */
-}
-
-.view {
-  color: black; /* Default text color */
-  background: white; /* Background of the editor */
-  padding-left: 4px;
-}
-
-.readonly > .view {
-  background: #fdfefd; /* super light green */
-}
-
-.ruler {
-  background: hsl(0,0%,89%);
-  color: hsl(0,0%,55%);
-}
-.ruler.annotations {
-  width: 16px;
-  padding-left: 4px;
-}
-.ruler.lines {
-  border-right: 1px solid #b4c4d3;
-  min-width: 1.4em;
-  padding-left: 4px;
-  padding-right: 4px;
-  text-align: end;
-}
-
-.ruler.linesWithAnnotations {
-  min-width: 0;
-  padding-left: 0;
-}
-
-.ruler.overview {
-  border-left: 1px solid #b4c4d3;
-  width: 14px;
-  text-align: start;
-}
-
-/* Styles for the annotation ruler (first line) */
-.annotationHTML {
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-  vertical-align: middle;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.annotation.task .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-task.png");
-}
-.annotation.breakpoint .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png");
-}
-.annotation.debugLocation .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png");
-}
-.annotation.breakpoint.debugLocation .annotationHTML,
-.annotation.task.debugLocation .annotationHTML {
-  background-position: center, center;
-  background-repeat: no-repeat, no-repeat;
-  background-size: 75%, 100%;
-}
-.annotation.breakpoint.debugLocation .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"),
-                    url("chrome://browser/skin/devtools/orion-breakpoint.png");
-}
-
-.annotation.task.debugLocation .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"),
-                    url("chrome://browser/skin/devtools/orion-task.png");
-}
-
-/* Styles for the overview ruler  */
-.annotationOverview {
-  cursor: pointer;
-  border-radius: 2px;
-  left: 2px;
-  width: 8px;
-}
-.annotationOverview.task {
-  background-color: lightgreen;
-  border: 1px solid green;
-}
-.annotationOverview.breakpoint {
-  background-color: lightblue;
-  border: 1px solid blue;
-}
-.annotationOverview.debugLocation {
-  background-color: white;
-  border: 1px solid green;
-}
-.annotationOverview.currentBracket {
-  background-color: lightgray;
-  border: 1px solid red;
-}
-.annotationOverview.matchingBracket {
-  background-color: lightgray;
-  border: 1px solid red;
-}
-
-/* Styles for text range */
-.annotationRange {
-  background-repeat: repeat-x;
-  background-position: left bottom;
-}
-.annotationRange.task {
-  outline: 1px dashed rgba(0, 255, 0, 0.5);
-}
-.annotationRange.matchingBracket {
-  outline: 1px solid grey;
-}
-
-.token_singleline_comment,
-.token_multiline_comment,
-.token_doc_comment  {
-  color: hsl(90,2%,50%); /* grey */
-}
-
-.token_doc_html_markup {
-  color: #dd0058; /* purple */
-}
-
-.token_doc_tag {
-  color: #dd0058; /* purple */
-}
-
-.token_task_tag { /* "TODO" */
-  color: black;
-  background: yellow;
-}
-
-.token_string {
-  color: hsl(72,100%,27%); /* green */
-  font-style: italic;
-}
-
-.token_keyword {
-  color: hsl(276,44%,45%); /* purple */
-}
-
-.token_space {
-  /* images/white_space.png */
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAABnRSTlMA/wAAAACkwsAdAAAAIUlEQVR4nGP4z8CAC+GUIEXuABhgkTuABEiRw2cmae4EAH05X7xDolNRAAAAAElFTkSuQmCC");
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.token_tab {
-  /* images/white_tab.png */
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAIAAACJ2loDAAAABnRSTlMA/wD/AP83WBt9AAAAMklEQVR4nGP4TwRgoK6i52c3bz5w6zMSA6tJn28d2Lx589nnCAYu63AaSLxJRLoJPwAAeNk0aG4opfMAAAAASUVORK5CYII=");
-  background-repeat: no-repeat;
-  background-position: left center;
-}
-
-.line_caret,
-.annotationLine.currentLine { /* Current line */
-  background: hsl(208, 93%, 94%);
-}
-
-.readonly .line_caret,
-.readonly .annotationLine.currentLine {
-  background: hsl(208, 80%, 90%);
-}
-
-/* Styling for html syntax highlighting */
-.entity-name-tag {
-  color: hsl(208,48%,40%); /* blue */
-}
-
-.entity-other-attribute-name {
-  color: hsl(208,48%,40%); /* blue */
-}
-
-.punctuation-definition-comment {
-  color: hsl(90,2%,50%); /* grey */
-}
-
-.comment {
-  color: hsl(90,2%,50%); /* grey */
-}
-
-.string-quoted {
-  color: hsl(24,85%,39%); /* orange */
-}
-
-.invalid {
-  color: red;
-  font-weight: bold;
-}
diff --git a/browser/themes/osx/devtools/performance.css b/browser/themes/osx/devtools/performance.css
new file mode 100644
index 000000000..8aefc9e66
--- /dev/null
+++ b/browser/themes/osx/devtools/performance.css
@@ -0,0 +1,6 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../shared.inc
+%include ../../shared/devtools/performance.inc.css
diff --git a/browser/themes/osx/devtools/profiler.css b/browser/themes/osx/devtools/profiler.css
index 152678396..dafc83c5b 100644
--- a/browser/themes/osx/devtools/profiler.css
+++ b/browser/themes/osx/devtools/profiler.css
@@ -2,4 +2,5 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-%include ../../shared/devtools/profiler.inc.css
-\ No newline at end of file
+%include ../shared.inc
+%include ../../shared/devtools/profiler.inc.css
diff --git a/browser/themes/osx/devtools/responsive-background.png b/browser/themes/osx/devtools/responsive-background.png
deleted file mode 100644
index 271dd5ebc..000000000
--- a/browser/themes/osx/devtools/responsive-background.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/responsive-se-resizer.png b/browser/themes/osx/devtools/responsive-se-resizer.png
deleted file mode 100644
index bdc03ee24..000000000
--- a/browser/themes/osx/devtools/responsive-se-resizer.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/responsive-vertical-resizer.png b/browser/themes/osx/devtools/responsive-vertical-resizer.png
deleted file mode 100644
index 1bb622dd3..000000000
--- a/browser/themes/osx/devtools/responsive-vertical-resizer.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/ruleview.css b/browser/themes/osx/devtools/ruleview.css
deleted file mode 100644
index b0ddd80e6..000000000
--- a/browser/themes/osx/devtools/ruleview.css
+++ /dev/null
@@ -1,131 +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/. */
-
-.ruleview {
-  height: 100%;
-}
-
-.ruleview-rule-source {
-  -moz-padding-start: 5px;
-  cursor: pointer;
-  text-align: right;
-  float: right;
-  -moz-user-select: none;
-}
-
-.ruleview-rule-inheritance {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-top-style: solid;
-  border-bottom-style: solid;
-  padding: 1px 4px;
-  margin-top: 4px;
-  -moz-user-select: none;
-}
-
-.ruleview-rule-source:hover {
-  text-decoration: underline;
-}
-
-.ruleview-rule,
-#noResults {
-  padding: 2px 4px;
-}
-
-#noResults {
-  font: message-box;
-  color: GrayText;
-}
-
-.ruleview-rule + .ruleview-rule {
-  border-top-width: 1px;
-  border-top-style: dotted;
-}
-
-.ruleview-warning {
-  background: url("chrome://browser/skin/devtools/alerticon-warning.png");
-  -moz-margin-start: 5px;
-  vertical-align: middle;
-  width: 13px;
-  height: 12px;
-}
-
-.ruleview-ruleopen {
-  -moz-padding-end: 5px;
-}
-
-.ruleview-ruleclose {
-  cursor: text;
-  padding-right: 20px;
-}
-
-.ruleview-propertylist {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.ruleview-rule:not(:hover) .ruleview-enableproperty {
-  visibility: hidden;
-}
-
-.ruleview-expander {
-  display: inline-block;
-}
-
-.ruleview-newproperty {
-  /* (enable checkbox width: 12px) + (expander width: 15px) */
-  -moz-margin-start: 27px;
-}
-
-.ruleview-namecontainer,
-.ruleview-propertycontainer,
-.ruleview-propertyname,
-.ruleview-propertyvalue {
-  text-decoration: inherit;
-}
-
-.ruleview-computedlist {
-  list-style: none;
-  padding: 0;
-}
-
-.ruleview-computed {
-  -moz-margin-start: 35px;
-}
-
-.ruleview-overridden {
-  text-decoration: line-through;
-}
-
-.styleinspector-propertyeditor {
-  border: 1px solid #CCC;
-  padding: 0;
-}
-
-.ruleview-property {
-  border-left: 2px solid transparent;
-}
-
-.ruleview-property  > * {
-  vertical-align: middle;
-}
-
-.ruleview-property[dirty] {
-  border-left-color: #68E268;
-}
-
-.ruleview-namecontainer > .ruleview-propertyname,
-.ruleview-propertycontainer > .ruleview-propertyvalue {
-  border-bottom: 1px dashed transparent;
-}
-
-.ruleview-namecontainer:hover > .ruleview-propertyname,
-.ruleview-propertycontainer:hover > .ruleview-propertyvalue {
-  border-bottom-color: hsl(0,0%,50%);
-}
-
-.ruleview-selector-separator, .ruleview-selector-unmatched {
-  color: #888;
-}
diff --git a/browser/themes/osx/devtools/scratchpad.css b/browser/themes/osx/devtools/scratchpad.css
index 86b4b167b..a6207e37d 100644
--- a/browser/themes/osx/devtools/scratchpad.css
+++ b/browser/themes/osx/devtools/scratchpad.css
@@ -1,5 +1,5 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 %include ../../shared/devtools/scratchpad.inc.css
 \ No newline at end of file
diff --git a/browser/themes/osx/devtools/shadereditor.css b/browser/themes/osx/devtools/shadereditor.css
new file mode 100644
index 000000000..9fb10e31e
--- /dev/null
+++ b/browser/themes/osx/devtools/shadereditor.css
@@ -0,0 +1,6 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../shared.inc
+%include ../../shared/devtools/shadereditor.inc.css
diff --git a/browser/themes/osx/devtools/splitview.css b/browser/themes/osx/devtools/splitview.css
deleted file mode 100644
index 549f4cdaa..000000000
--- a/browser/themes/osx/devtools/splitview.css
+++ /dev/null
@@ -1,115 +0,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/. */
-
-.splitview-nav-container {
-  background-color: hsl(211,21%,26%);
-  color: white;
-}
-
-.loading .splitview-nav-container {
-  background-image: url(chrome://global/skin/icons/loading_16.png);
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.splitview-nav {
-  -moz-appearance: none;
-  margin: 0;
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-.splitview-nav > li {
-  color: white;
-  background-clip: padding-box;
-  border-bottom: 1px solid hsla(210,40%,83%,.1);
-  box-shadow: inset 0 -1px 0 hsla(211,68%,6%,.3);
-  -moz-padding-end: 8px;
-  -moz-box-align: center;
-}
-
-.splitview-nav {
-  list-style-image: none;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.splitview-nav > li {
-  outline: 0;
-  vertical-align: bottom;
-}
-
-.placeholder {
-  -moz-box-flex: 1;
-  text-align: center;
-}
-
-.splitview-nav > li.splitview-active {
-  background-image: url(itemArrow-ltr.png),
-                    linear-gradient(to right, black, black),
-                    linear-gradient(hsl(200,100%,33%), hsl(200,100%,25%));
-  background-repeat: no-repeat, no-repeat, repeat-x;
-  background-position: center right, top right, top left;
-  background-size: auto, 1px 100%, auto;
-  border-bottom: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
-              inset 0 -1px 0 hsla(210,40%,83%,.05);
-}
-
-.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
-  background-image: url(itemArrow-rtl.png),
-                    linear-gradient(to right, black, black),
-                    linear-gradient(hsl(200,100%,33%), hsl(200,100%,25%));
-  background-repeat: no-repeat, no-repeat, repeat-x;
-  background-position: center left, top left, top right;
-}
-
-/* Toolbars */
-
-.devtools-toolbar {
-  height: 26px;
-  background-origin: border-box;
-  background-clip: border-box;
-  border-top-width: 0;
-  border-bottom: 1px solid hsla(210,8%,5%,.65);
-  padding: 3px;
-}
-
-.splitview-main > toolbar:-moz-locale-dir(ltr) {
-  border-right: 1px solid hsla(210,8%,5%,.5);
-}
-
-.splitview-main > toolbar:-moz-locale-dir(rtl) {
-  border-left: 1px solid hsla(210,8%,5%,.5);
-}
-
-.devtools-toolbarbutton {
-  font-size: 11px;
-  padding: 0 8px;
-  width: auto;
-  min-width: 48px;
-  min-height: 0;
-}
-
-
-/* Resizers */
-
-.splitview-landscape-splitter {
-  -moz-border-start-color: transparent;
-}
-
-.splitview-portrait-resizer {
-  -moz-appearance: none;
-  background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px),
-              linear-gradient(hsl(209,18%,34%), hsl(210,24%,16%));
-  height: 12px;
-  background-size: 10px 2px, 100% 12px;
-  background-clip: content-box, border-box;
-  background-repeat: repeat-y, no-repeat;
-  background-position: center center;
-  padding: 2px 0;
-  border-top: 1px solid hsla(210,8%,5%,.5);
-  border-bottom: 1px solid hsla(210,8%,5%,.5);
-}
diff --git a/browser/themes/osx/devtools/styleeditor.css b/browser/themes/osx/devtools/styleeditor.css
deleted file mode 100644
index 8b10c25f9..000000000
--- a/browser/themes/osx/devtools/styleeditor.css
+++ /dev/null
@@ -1,131 +0,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/. */
-
-#style-editor-chrome {
-  background-color: hsl(211,21%,26%);
-}
-
-.stylesheet-title,
-.stylesheet-name {
-  text-decoration: none;
-  color: hsl(210,30%,85%);
-}
-
-.stylesheet-name {
-  font-size: 13px;
-}
-
-.stylesheet-rule-count,
-.stylesheet-saveButton {
-  color: hsl(210,16%,53%);
-}
-
-.stylesheet-saveButton {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.splitview-active .stylesheet-title,
-.splitview-active .stylesheet-name {
-  color: hsl(0,0%,100%);
-}
-
-.splitview-active .stylesheet-rule-count,
-.splitview-active .stylesheet-saveButton {
-  color: hsl(205,50%,70%);
-}
-
-.splitview-nav:focus {
-  outline: 0; /* focus ring is on the stylesheet name */
-}
-
-.splitview-nav > li.unsaved > hgroup .stylesheet-name {
-  font-style: italic;
-}
-
-.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
-.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
-  font-style: italic;
-}
-
-.splitview-nav.empty > p {
-  padding: 0 10px;
-}
-
-.stylesheet-enabled {
-  padding: 8px 0;
-  margin: 0 8px;
-  background-image: url(itemToggle.png);
-  background-repeat: no-repeat;
-  background-clip: content-box;
-  background-position: 0 8px;
-  width: 24px;
-  height: 40px;
-}
-
-.disabled > .stylesheet-enabled {
-  background-position: -24px 8px;
-}
-
-.splitview-nav > li > .stylesheet-enabled:focus,
-.splitview-nav > li:hover > .stylesheet-enabled {
-  outline: 0;
-}
-
-.stylesheet-error-message {
-  color: red;
-}
-
-.stylesheet-more > h3 {
-  font-size: 11px;
-  -moz-margin-end: 2px;
-}
-
-.devtools-searchinput {
-  max-width: 25ex;
-  font-size: 11px;
-}
-
-.placeholder {
-  color: white;
-}
-
-.placeholder a {
-  text-decoration: underline;
-}
-
-h1,
-h2,
-h3 {
-  font-size: inherit;
-  font-weight: normal;
-  margin: 0;
-  padding: 0;
-}
-
-/* portrait mode */
-@media (max-width: 550px) {
-  .splitview-nav {
-    box-shadow: none;
-  }
-
-  .splitview-nav > li.splitview-active {
-    background-size: 0 0, 0 0, auto;
-  }
-
-  .stylesheet-enabled {
-    padding: 0;
-    background-position: 0 0;
-    height: 24px;
-  }
-
-  .disabled > .stylesheet-enabled {
-    background-position: -24px 0;
-  }
-
-  .splitview-nav > li > hgroup.stylesheet-info {
-    -moz-box-align: baseline;
-  }
-}
diff --git a/browser/themes/osx/devtools/timeline.css b/browser/themes/osx/devtools/timeline.css
new file mode 100644
index 000000000..435492111
--- /dev/null
+++ b/browser/themes/osx/devtools/timeline.css
@@ -0,0 +1,6 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../shared.inc
+%include ../../shared/devtools/timeline.inc.css
diff --git a/browser/themes/osx/devtools/toggle-tools.png b/browser/themes/osx/devtools/toggle-tools.png
deleted file mode 100644
index 8a40d0d11..000000000
--- a/browser/themes/osx/devtools/toggle-tools.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/tool-debugger-paused.png b/browser/themes/osx/devtools/tool-debugger-paused.png
deleted file mode 100644
index 4c968f542..000000000
--- a/browser/themes/osx/devtools/tool-debugger-paused.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/tool-debugger.png b/browser/themes/osx/devtools/tool-debugger.png
deleted file mode 100644
index af4dbc0e0..000000000
--- a/browser/themes/osx/devtools/tool-debugger.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/tool-inspector.png b/browser/themes/osx/devtools/tool-inspector.png
deleted file mode 100644
index 8c1e7f308..000000000
--- a/browser/themes/osx/devtools/tool-inspector.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/tool-network.png b/browser/themes/osx/devtools/tool-network.png
deleted file mode 100644
index 01f23203f..000000000
--- a/browser/themes/osx/devtools/tool-network.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/tool-options.png b/browser/themes/osx/devtools/tool-options.png
deleted file mode 100644
index 7079a1752..000000000
--- a/browser/themes/osx/devtools/tool-options.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/tool-profiler.png b/browser/themes/osx/devtools/tool-profiler.png
deleted file mode 100644
index 8f30f12a9..000000000
--- a/browser/themes/osx/devtools/tool-profiler.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/tool-styleeditor.png b/browser/themes/osx/devtools/tool-styleeditor.png
deleted file mode 100644
index 83765d9f6..000000000
--- a/browser/themes/osx/devtools/tool-styleeditor.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/tool-webconsole.png b/browser/themes/osx/devtools/tool-webconsole.png
deleted file mode 100644
index 86633249a..000000000
--- a/browser/themes/osx/devtools/tool-webconsole.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/toolbox.css b/browser/themes/osx/devtools/toolbox.css
deleted file mode 100644
index ef71b811a..000000000
--- a/browser/themes/osx/devtools/toolbox.css
+++ /dev/null
@@ -1,282 +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/. */
-
-#toolbox-controls {
-  margin: 0 4px;
-}
-
-#toolbox-controls > toolbarbutton,
-#toolbox-dock-buttons > toolbarbutton {
-  -moz-appearance: none;
-  border: none;
-  margin: 0 4px;
-  min-width: 16px;
-  width: 16px;
-}
-
-#toolbox-dock-bottom {
-  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
-}
-
-#toolbox-dock-side {
-  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
-}
-
-#toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/undock.png");
-}
-
-#toolbox-dock-window,
-#toolbox-dock-bottom,
-#toolbox-dock-side {
-  opacity: 0.6;
-}
-
-#toolbox-dock-window:hover,
-#toolbox-dock-bottom:hover,
-#toolbox-dock-side:hover {
-  opacity: 1;
-}
-
-#toolbox-controls-separator {
-  width: 3px;
-  background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)),
-                    linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)),
-                    linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0));
-  background-size: 1px 100%;
-  background-repeat: no-repeat;
-  background-position: 0, 1px, 2px;
-  -moz-margin-start: 8px;
-}
-
-
-/* Command buttons */
-
-.command-button {
-  -moz-appearance: none;
-  border: none;
-  margin: 0;
-  padding: 0 8px;
-  width: 16px;
-}
-
-.command-button:hover {
-  background-color: hsla(206,37%,4%,.2);
-}
-.command-button:hover:active, .command-button[checked=true]:not(:hover) {
-  background-color: hsla(206,37%,4%,.4);
-}
-
-#command-button-paintflashing {
-  list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-paintflashing:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-paintflashing:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-paintflashing[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-responsive {
-  list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-responsive:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-responsive:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-responsive[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-tilt {
-  list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-tilt:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-tilt:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-#command-button-tilt[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-scratchpad {
-  list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-
-#command-button-scratchpad:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-scratchpad:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-/* Tabs */
-
-.devtools-tabbar {
-  -moz-appearance: none;
-  background-image: url("background-noise-toolbar.png"),
-                    linear-gradient(#303840, #2d3640);
-  border-bottom: 1px solid #060a0d;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
-              0 -1px 0 hsla(206,37%,4%,.1) inset;
-  min-height: 32px;
-  padding: 0;
-}
-
-#toolbox-tabs {
-  margin: 0;
-}
-
-.devtools-tab {
-  -moz-appearance: none;
-  min-width: 32px;
-  min-height: 32px;
-  max-width: 110px;
-  color: #b6babf;
-  margin: 0;
-  padding: 0;
-  background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1));
-  background-size: 1px 100%;
-  background-repeat: no-repeat;
-  background-position: left, right;
-  border-top: 1px solid #060a0d;
-  border-right: 1px solid hsla(206,37%,4%,.45);
-}
-
-.devtools-tab > image {
-  -moz-margin-end: 0;
-  -moz-margin-start: 4px;
-  opacity: 0.6;
-}
-
-#toolbox-tab-options > image {
-  margin: 0 8px;
-}
-
-.devtools-tab:hover > image {
-  opacity: 0.8;
-}
-
-.devtools-tab:active > image,
-.devtools-tab[selected=true] > image {
-  opacity: 1;
-}
-
-.devtools-tab:hover {
-  background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2));
-  background-size: 1px 100%,
-                   1px 100%,
-                   100%;
-  background-repeat: no-repeat,
-                     no-repeat,
-                     repeat-x;
-  background-position: left, right;
-  color: #ced3d9;
-}
-.devtools-tab:hover:active {
-  background-color: hsla(206,37%,4%,.2);
-  color: #f5f7fa;
-}
-
-.devtools-tab[selected=true] {
-  color: #f5f7fa;
-  background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
-                    radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)),
-                    linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3));
-  background-size: 100% 1px,
-                   100% 5px,
-                   1px 100%,
-                   1px 100%,
-                   100%;
-  background-repeat: no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     repeat-x;
-  background-position: top right, top left, left, right;
-  box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
-}
-
-.devtools-tab:not([selected=true]).highlighted {
-  color: #f5f7fa;
-  background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
-                    radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
-  background-size: 100% 1px,
-                   100% 5px,
-                   1px 100%,
-                   1px 100%,
-                   100%;
-  background-repeat: no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     repeat-x;
-  background-position: top right, top left, left, right;
-}
-
-.devtools-tab:not(.highlighted) > .highlighted-icon,
-.devtools-tab[selected=true] > .highlighted-icon,
-.devtools-tab:not([selected=true]).highlighted > .default-icon {
-  visibility: collapse;
-}
-
-#options-panel {
-  background-image: url("chrome://browser/skin/newtab/noise.png");
-}
-
-.options-vertical-pane {
-  margin: 15px;
-  width: calc(50% - 30px);
-  min-width: 400px;
-  -moz-padding-start: 5px;
-}
-
-.options-vertical-pane > label {
-  padding: 5px 0;
-  font-size: 1.4rem;
-}
-
-.options-groupbox {
-  -moz-margin-start: 15px;
-  padding: 4px;
-}
-
-.options-groupbox > * {
-  padding: 2px;
-}
-
-.options-citation-label {
-  font-size: 1rem !important;
-  /* !important is required otherwise font-size will still be 1.4rem */
-  font-style: italic;
-  padding: 4px 0 0; /* To align it with the checkbox */
-  color: #444;
-}
-
-.options-citation-label + label {
-  padding: 3px 0 0 !important; /* To align it with the checkbox */
-  font-style: italic;
-}
diff --git a/browser/themes/osx/devtools/undock.png b/browser/themes/osx/devtools/undock.png
deleted file mode 100644
index 4e62b2cee..000000000
--- a/browser/themes/osx/devtools/undock.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/vview-delete.png b/browser/themes/osx/devtools/vview-delete.png
deleted file mode 100644
index 9604653c0..000000000
--- a/browser/themes/osx/devtools/vview-delete.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/vview-edit.png b/browser/themes/osx/devtools/vview-edit.png
deleted file mode 100644
index af42a28df..000000000
--- a/browser/themes/osx/devtools/vview-edit.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/webaudioeditor.css b/browser/themes/osx/devtools/webaudioeditor.css
new file mode 100644
index 000000000..c5a87db91
--- /dev/null
+++ b/browser/themes/osx/devtools/webaudioeditor.css
@@ -0,0 +1,6 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../shared.inc
+%include ../../shared/devtools/webaudioeditor.inc.css
diff --git a/browser/themes/osx/devtools/webconsole.css b/browser/themes/osx/devtools/webconsole.css
index 3daf77ca7..70565db1f 100644
--- a/browser/themes/osx/devtools/webconsole.css
+++ b/browser/themes/osx/devtools/webconsole.css
@@ -2,20 +2,5 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-%include ../../shared/devtools/webconsole.inc.css
-
-.webconsole-timestamp,
-.webconsole-msg-body,
-.jsterm-input-node,
-.jsterm-complete-node {
-  font-family: Consolas, Lucida Console, monospace;
-}
-
-/*
- * This hardcoded width likely due to a toolkit Windows specific bug.
- * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
- */
-
-.hud-filter-box {
-  width: 200px;
-}
+%include ../shared.inc
+%include ../../shared/devtools/webconsole.inc.css
+\ No newline at end of file
diff --git a/browser/themes/osx/devtools/webconsole.png b/browser/themes/osx/devtools/webconsole.png
deleted file mode 100644
index 8aee79015..000000000
--- a/browser/themes/osx/devtools/webconsole.png
+++ /dev/null
diff --git a/browser/themes/osx/devtools/webconsole_networkpanel.css b/browser/themes/osx/devtools/webconsole_networkpanel.css
index d66232fe9..ec23925f8 100644
--- a/browser/themes/osx/devtools/webconsole_networkpanel.css
+++ b/browser/themes/osx/devtools/webconsole_networkpanel.css
@@ -11,7 +11,7 @@ body {
 
 #header {
   padding: 5px;
-  overflow-x: auto;
+  overflow-x:auto;
   display: block;
 }
 
@@ -45,18 +45,18 @@ h1 .info {
   display: block;
 }
 
-.property-table-header {
+.property-name {
   font-size: 11px;
   font-weight: bold;
   padding-right: 4px;
   color: #000;
   white-space: nowrap;
-  text-align: right;
+  text-align: end;
   vertical-align: top;
   width: 10%;
 }
 
-.property-table-value {
+.property-value {
   padding-right: 5px;
   font-size: 11px;
   word-wrap: break-word;
diff --git a/browser/themes/osx/devtools/widgets.css b/browser/themes/osx/devtools/widgets.css
index 0422b68d1..f83b4cdcb 100644
--- a/browser/themes/osx/devtools/widgets.css
+++ b/browser/themes/osx/devtools/widgets.css
@@ -1,655 +1,6 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* Generic pane helpers */
-
-.generic-toggled-side-pane {
-  min-width: 50px;
-  -moz-margin-start: 0px !important;
-  /* Unfortunately, transitions don't work properly with locale-aware properties,
-     so both the left and right margins are set via js, while the start margin
-     is always overridden here. */
-}
-
-.generic-toggled-side-pane[animated] {
-  transition: margin 0.25s ease-in-out;
-}
-
-/* BreacrumbsWidget */
-
-.breadcrumbs-widget-container {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     breadcrumbs-widget-items, to match toolbar-buttons style.
-     This negative margin compensates the extra row of pixels created
-     by the shadow.*/
-  margin: -1px 0;
-}
-
-/* Preloading hack, LTR */
-
-.breadcrumbs-widget-container:-moz-locale-dir(ltr)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/ltr-start.png),
-    url(breadcrumbs/ltr-start-selected.png),
-    url(breadcrumbs/ltr-start-pressed.png),
-    url(breadcrumbs/ltr-start-selected-pressed.png),
-    url(breadcrumbs/ltr-middle.png),
-    url(breadcrumbs/ltr-middle-selected.png),
-    url(breadcrumbs/ltr-middle-pressed.png),
-    url(breadcrumbs/ltr-middle-selected-pressed.png),
-    url(breadcrumbs/ltr-end.png),
-    url(breadcrumbs/ltr-end-selected.png),
-    url(breadcrumbs/ltr-end-pressed.png),
-    url(breadcrumbs/ltr-end-selected-pressed.png);
-}
-
-/* Preloading hack, RTL */
-
-.breadcrumbs-widget-container:-moz-locale-dir(rtl)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/rtl-start.png),
-    url(breadcrumbs/rtl-start-selected.png),
-    url(breadcrumbs/rtl-start-pressed.png),
-    url(breadcrumbs/rtl-start-selected-pressed.png),
-    url(breadcrumbs/rtl-middle.png),
-    url(breadcrumbs/rtl-middle-selected.png),
-    url(breadcrumbs/rtl-middle-pressed.png),
-    url(breadcrumbs/rtl-middle-selected-pressed.png),
-    url(breadcrumbs/rtl-end.png),
-    url(breadcrumbs/rtl-end-selected.png),
-    url(breadcrumbs/rtl-end-pressed.png),
-    url(breadcrumbs/rtl-end-selected-pressed.png);
-}
-
-.scrollbutton-up,
-.scrollbutton-down {
-  -moz-appearance: none;
-  background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset,
-              0 0 0 1px hsla(210,16%,76%,.15) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-  border: 1px solid hsla(210,8%,5%,.45);
-  margin: 1px 0 1px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover,
-.scrollbutton-down:not([disabled]):active:hover {
-  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset,
-              0 1px 3px hsla(210,8%,5%,.25) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-  border-color: hsla(210,8%,5%,.6);
-}
-
-.scrollbutton-up > .toolbarbutton-icon,
-.scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px,7px,16px,0px);
-  margin: 0 5px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px,14px,16px,7px);
-}
-
-.scrollbutton-up[disabled] > .toolbarbutton-icon,
-.scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.breadcrumbs-widget-item {
-  background-color: transparent;
-  -moz-appearance: none;
-  overflow: hidden;
-  min-width: 85px;
-  max-width: 250px;
-  min-height: 25px;
-  border-style: solid;
-  border-width: 2px 13px;
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-  outline: none;
-  color: hsl(210,30%,85%);
-}
-
-.breadcrumbs-widget-item:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
-
-.breadcrumbs-widget-item:-moz-focusring > .button-box {
-  border-width: 0;
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag {
-  color: hsl(208,100%,60%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
-  color: hsl(205,100%,70%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,70%);
-}
-
-.breadcrumbs-widget-item-id,
-.breadcrumbs-widget-item-classes {
-  color: #8d99a6;
-}
-
-.breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,85%);
-}
-
-/* Breadcrumbs LTR */
-
-.breadcrumbs-widget-item:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-left-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-right-width: 0;
-}
-
-/* Breadcrumbs RTL */
-
-.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-right-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-container {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  color: #fff;
-}
-
-.side-menu-widget-container[with-arrow=true]:-moz-locale-dir(ltr),
-.side-menu-widget-group[with-arrow=true]:-moz-locale-dir(ltr),
-.side-menu-widget-item[with-arrow=true]:-moz-locale-dir(ltr) {
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-.side-menu-widget-container[with-arrow=true]:-moz-locale-dir(rtl),
-.side-menu-widget-group[with-arrow=true]:-moz-locale-dir(rtl),
-.side-menu-widget-item[with-arrow=true]:-moz-locale-dir(rtl) {
-  box-shadow: inset 1px 0 0 #222426;
-}
-
-.side-menu-widget-group-title {
-  background-image: linear-gradient(#1f3e4f, #1b3243);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 -2px 0 hsla(206,37%,4%,.05) inset,
-              0 -1px 1px hsla(206,37%,4%,.1) inset;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  padding: 4px;
-  color: #f5f7fa;
-  transition-property: color, text-shadow;
-  transition-duration: 0.3s;
-}
-
-.side-menu-widget-group:hover > .side-menu-widget-group-title {
-  text-shadow: 0 0 1px #cfcfcf;
-  color: #fff;
-}
-
-.side-menu-widget-item {
-  border-top: 1px solid hsla(210,16%,76%,.1);
-  border-bottom: 1px solid hsla(210,8%,5%,.25);
-  cursor: pointer;
-}
-
-.side-menu-widget-item:last-of-type {
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-.side-menu-widget-item.selected {
-  background: linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)) repeat-x top left !important;
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
-              inset 0 -1px 0 hsla(210,40%,83%,.05);
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
-  background-size: auto, 1px 100%;
-  background-repeat: no-repeat;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
-  background-image: url(itemArrow-ltr.png), linear-gradient(to right, black, black);
-  background-position: center right, top right;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
-  background-image: url(itemArrow-rtl.png), linear-gradient(to right, black, black);
-  background-position: center left, top left;
-}
-
-.side-menu-widget-item-arrow {
-  -moz-margin-start: -8px;
-  width: 8px;
-}
-
-.side-menu-widget-item-contents {
-  padding: 4px;
-}
-
-.side-menu-widget-item label {
-  cursor: inherit;
-}
-
-.side-menu-widget-item-other {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.65);
-  margin: 0 -4px;
-  -moz-padding-start: 5px;
-}
-
-.side-menu-widget-item-other.selected {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.15);
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.07),
-              inset 0 -1px 0 hsla(210,40%,83%,.07);
-}
-
-.side-menu-widget-item.selected .side-menu-widget-item-other:first-of-type {
-  border-top: 1px dotted #333;
-  margin-top: 3px;
-}
-
-.side-menu-widget-item-other:first-of-type {
-  margin-top: 4px;
-}
-
-.side-menu-widget-item-other:last-of-type {
-  margin-bottom: -4px;
-}
-
-.side-menu-widget-item-other > label {
-  color: #f5f7fa;
-}
-
-.side-menu-widget-empty-notice-container {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  color: #fff;
-  font-weight: 600;
-}
-
-/* VariablesView */
-
-.variables-view-container {
-  background: #fff;
-}
-
-.variables-view-empty-notice {
-  color: GrayText;
-  padding: 2px;
-}
-
-.variables-view-scope > .title {
-  color: #fff;
-}
-
-.variables-view-scope:focus > .title {
-  background: Highlight;
-  color: HighlightText;
-}
-
-.variables-view-scope > .variables-view-element-details:not(:empty) {
-  margin-top: 1px;
-  -moz-margin-start: 2px;
-  -moz-margin-end: 1px;
-}
-
-.variables-view-scope > .variables-view-element-details.enum:not(:empty) {
-  border-bottom: 1px solid #ddd;
-}
-
-/* Generic traits applied to both variables and properties */
-
-.variable-or-property {
-  transition: background 1s ease-in-out;
-  color: #000;
-}
-
-.variable-or-property[changed] {
-  background: rgba(255,255,0,0.65);
-  transition-duration: 0.4s;
-}
-
-.variable-or-property > .title > .value {
-  -moz-padding-start: 6px;
-  -moz-padding-end: 4px;
-}
-
-.variable-or-property:focus > .title {
-  background: Highlight;
-  color: HighlightText;
-  border-radius: 4px;
-}
-
-.variable-or-property[editable] > .title > .value {
-  cursor: text;
-}
-
-.variable-or-property:not([non-header]) > .variables-view-element-details {
-  -moz-margin-start: 10px;
-}
-
-/* Custom variables and properties traits */
-
-.variables-view-variable {
-  -moz-margin-start: 1px;
-  -moz-margin-end: 1px;
-  border-bottom: 1px solid #eee;
-}
-
-.variables-view-variable > .title > .name {
-  font-weight: 600;
-}
-
-.variables-view-variable:not(:focus) > .title > .name {
-  color: #048;
-}
-
-.variables-view-property:not(:focus) > .title > .name {
-  color: #881090;
-}
-
-/* Token value colors */
-
-.variable-or-property:not(:focus) > .title > .token-undefined {
-  color: #bbb;
-}
-
-.variable-or-property:not(:focus) > .title > .token-null {
-  color: #999;
-}
-
-.variable-or-property:not(:focus) > .title > .token-boolean {
-  color: #10c;
-}
-
-.variable-or-property:not(:focus) > .title > .token-number {
-  color: #c00;
-}
-
-.variable-or-property:not(:focus) > .title > .token-string {
-  color: #282;
-}
-
-.variable-or-property:not(:focus) > .title > .token-other {
-  color: #333;
-}
-
-/* Custom configurable/enumerable/writable or frozen/sealed/extensible
- * variables and properties */
-
-.variable-or-property[non-enumerable]:not([self]):not([exception]):not([return]) > .title > .name {
-  opacity: 0.5;
-}
-
-.variable-or-property[non-configurable] > .title > .name {
-  border-bottom: 1px dashed #99f;
-}
-
-.variable-or-property[non-writable] > .title > .name {
-  border-bottom: 1px dashed #f99;
-}
-
-.variable-or-property-non-writable-icon {
-  background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
-  width: 16px;
-  height: 16px;
-  opacity: 0.5;
-}
-
-@media (min-resolution: 2dppx) {
-  .variable-or-property-non-writable-icon {
-    background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
-    background-size: 32px;
-  }
-}
-
-.variable-or-property-frozen-label,
-.variable-or-property-sealed-label,
-.variable-or-property-non-extensible-label {
-  -moz-padding-end: 4px;
-}
-
-.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
-  color: #666;
-}
-
-/* Special variables and properties */
-
-.variable-or-property[safe-getter] > .title > .name {
-  border-bottom: 1px dashed #8b0;
-}
-
-.variable-or-property[exception]:not(:focus) > .title > .name {
-  color: #a00;
-  text-shadow: 0 0 8px #fcc;
-}
-
-.variable-or-property[return]:not(:focus) > .title > .name {
-  color: #0a0;
-  text-shadow: 0 0 8px #cfc;
-}
-
-/* Variables and properties tooltips */
-
-.variable-or-property > tooltip > label {
-  margin: 0 2px 0 2px;
-}
-
-.variable-or-property[non-enumerable] > tooltip > label[value=enumerable],
-.variable-or-property[non-configurable] > tooltip > label[value=configurable],
-.variable-or-property[non-writable] > tooltip > label[value=writable],
-.variable-or-property[non-extensible] > tooltip > label[value=extensible] {
-  color: #800;
-  text-decoration: line-through;
-}
-
-.variable-or-property[safe-getter] > tooltip > label[value=WebIDL] {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #000;
-  color: #080;
-}
-
-/* Variables and properties editing */
-
-.variables-view-delete {
-  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
-  -moz-image-region: rect(0,16px,16px,0);
-}
-
-.variables-view-delete:hover {
-  -moz-image-region: rect(0,32px,16px,16px);
-}
-
-.variables-view-delete:active {
-  -moz-image-region: rect(0,48px,16px,32px);
-}
-
-*:not(:hover) .variables-view-delete {
-  display: none;
-}
-
-.variables-view-delete > .toolbarbutton-text {
-  display: none;
-}
-
-.variables-view-edit {
-  background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
-  width: 20px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.variables-view-throbber {
-  background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
-  width: 16px;
-  height: 16px;
-}
-
-.element-value-input {
-  -moz-margin-start: 4px !important;
-  -moz-margin-end: 2px !important;
-}
-
-.element-name-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
-  color: #048;
-  font-weight: 600;
-}
-
-.element-value-input,
-.element-name-input {
-  border: 1px solid #999 !important;
-  box-shadow: 1px 2px 4px #aaa;
-}
-
-/* Variables and properties searching */
-
-.variables-view-searchinput {
-  min-height: 24px;
-}
-
-.variable-or-property[non-match] {
-  border: none;
-  margin: 0;
-}
-
-/* Expand/collapse arrow */
-
-.arrow {
-  background: url("chrome://global/skin/tree/twisty-clsd.png") center center no-repeat;
-  width: 9px;
-  height: 20px;
-  -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
-}
-
-.arrow[open] {
-  background-image: url("chrome://global/skin/tree/twisty-open.png");
-}
-
-.arrow[invisible] {
-  visibility: hidden;
-}
+%include ../shared.inc
+%include ../../shared/devtools/widgets.inc.css
diff --git a/browser/themes/osx/jar.mn b/browser/themes/osx/jar.mn
index 865ad5989..b04a0b676 100644
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -137,102 +137,176 @@ browser.jar:
         skin/classic/browser/tabbrowser/tab-overflow-border.png      (tabbrowser/tab-overflow-border.png)
         skin/classic/browser/tabbrowser/tabDragIndicator.png         (tabbrowser/tabDragIndicator.png)
 #ifdef MOZ_DEVTOOLS
-*       skin/classic/browser/devtools/common.css                    (devtools/common.css)
-        skin/classic/browser/devtools/dark-theme.css                (devtools/dark-theme.css)
-        skin/classic/browser/devtools/light-theme.css               (devtools/light-theme.css)
-        skin/classic/browser/devtools/widgets.css                   (devtools/widgets.css)
-        skin/classic/browser/devtools/commandline-icon.png          (devtools/commandline-icon.png)
-        skin/classic/browser/devtools/alerticon-warning.png         (devtools/alerticon-warning.png)
-        skin/classic/browser/devtools/ruleview.css                  (devtools/ruleview.css)
-        skin/classic/browser/devtools/commandline.css               (devtools/commandline.css)
-        skin/classic/browser/devtools/command-paintflashing.png     (devtools/command-paintflashing.png)
-        skin/classic/browser/devtools/command-responsivemode.png    (devtools/command-responsivemode.png)
-        skin/classic/browser/devtools/command-scratchpad.png        (devtools/command-scratchpad.png)
-        skin/classic/browser/devtools/command-tilt.png              (devtools/command-tilt.png)
-        skin/classic/browser/devtools/checkbox-dark.png             (devtools/checkbox-dark.png)
-        skin/classic/browser/devtools/checkbox-light.png            (devtools/checkbox-light.png)
-        skin/classic/browser/devtools/markup-view.css               (devtools/markup-view.css)
-        skin/classic/browser/devtools/orion.css                     (devtools/orion.css)
-        skin/classic/browser/devtools/orion-container.css           (devtools/orion-container.css)
-        skin/classic/browser/devtools/orion-task.png                (devtools/orion-task.png)
-        skin/classic/browser/devtools/orion-breakpoint.png          (devtools/orion-breakpoint.png)
-        skin/classic/browser/devtools/orion-debug-location.png      (devtools/orion-debug-location.png)
-*       skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
-        skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
-        skin/classic/browser/devtools/webconsole.png                  (devtools/webconsole.png)
-        skin/classic/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png     (devtools/breadcrumbs/ltr-end-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end-selected.png             (devtools/breadcrumbs/ltr-end-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end.png                      (devtools/breadcrumbs/ltr-end.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle-pressed.png           (devtools/breadcrumbs/ltr-middle-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected-pressed.png  (devtools/breadcrumbs/ltr-middle-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected.png          (devtools/breadcrumbs/ltr-middle-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle.png                   (devtools/breadcrumbs/ltr-middle.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start-pressed.png            (devtools/breadcrumbs/ltr-start-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start-selected-pressed.png   (devtools/breadcrumbs/ltr-start-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start.png                    (devtools/breadcrumbs/ltr-start.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start-selected.png           (devtools/breadcrumbs/ltr-start-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end-pressed.png              (devtools/breadcrumbs/rtl-end-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end-selected-pressed.png     (devtools/breadcrumbs/rtl-end-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end-selected.png             (devtools/breadcrumbs/rtl-end-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end.png                      (devtools/breadcrumbs/rtl-end.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle-pressed.png           (devtools/breadcrumbs/rtl-middle-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected-pressed.png  (devtools/breadcrumbs/rtl-middle-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected.png          (devtools/breadcrumbs/rtl-middle-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-        skin/classic/browser/devtools/splitview.css                 (devtools/splitview.css)
-        skin/classic/browser/devtools/styleeditor.css               (devtools/styleeditor.css)
-        skin/classic/browser/devtools/debugger.css                  (devtools/debugger.css)
-*       skin/classic/browser/devtools/profiler.css                  (devtools/profiler.css)
-        skin/classic/browser/devtools/netmonitor.css                (devtools/netmonitor.css)
-*       skin/classic/browser/devtools/scratchpad.css                (devtools/scratchpad.css)
-        skin/classic/browser/devtools/magnifying-glass.png          (devtools/magnifying-glass.png)
-        skin/classic/browser/devtools/option-icon.png               (devtools/option-icon.png)
-        skin/classic/browser/devtools/itemToggle.png                (devtools/itemToggle.png)
-        skin/classic/browser/devtools/itemArrow-rtl.png             (devtools/itemArrow-rtl.png)
-        skin/classic/browser/devtools/itemArrow-ltr.png             (devtools/itemArrow-ltr.png)
-        skin/classic/browser/devtools/background-noise-toolbar.png  (devtools/background-noise-toolbar.png)
-        skin/classic/browser/devtools/inspect-button.png            (devtools/inspect-button.png)
-        skin/classic/browser/devtools/dropmarker.png                (devtools/dropmarker.png)
-        skin/classic/browser/devtools/layout-background-grid.png    (devtools/layout-background-grid.png)
-        skin/classic/browser/devtools/layoutview.css                (devtools/layoutview.css)
-        skin/classic/browser/devtools/debugger-collapse.png         (devtools/debugger-collapse.png)
-        skin/classic/browser/devtools/debugger-expand.png           (devtools/debugger-expand.png)
-        skin/classic/browser/devtools/debugger-pause.png            (devtools/debugger-pause.png)
-        skin/classic/browser/devtools/debugger-play.png             (devtools/debugger-play.png)
-        skin/classic/browser/devtools/debugger-step-in.png          (devtools/debugger-step-in.png)
-        skin/classic/browser/devtools/debugger-step-out.png         (devtools/debugger-step-out.png)
-        skin/classic/browser/devtools/debugger-step-over.png        (devtools/debugger-step-over.png)
-        skin/classic/browser/devtools/responsive-se-resizer.png     (devtools/responsive-se-resizer.png)
-        skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
-        skin/classic/browser/devtools/responsive-background.png     (devtools/responsive-background.png)
-        skin/classic/browser/devtools/toggle-tools.png              (devtools/toggle-tools.png)
-        skin/classic/browser/devtools/dock-bottom.png               (devtools/dock-bottom.png)
-        skin/classic/browser/devtools/dock-side.png                 (devtools/dock-side.png)
-        skin/classic/browser/devtools/floating-scrollbars.css       (devtools/floating-scrollbars.css)
-        skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
-        skin/classic/browser/devtools/inspector.css                 (devtools/inspector.css)
-        skin/classic/browser/devtools/toolbox.css                   (devtools/toolbox.css)
-        skin/classic/browser/devtools/tool-options.png              (devtools/tool-options.png)
-        skin/classic/browser/devtools/tool-webconsole.png           (devtools/tool-webconsole.png)
-        skin/classic/browser/devtools/tool-debugger.png             (devtools/tool-debugger.png)
-        skin/classic/browser/devtools/tool-debugger-paused.png      (devtools/tool-debugger-paused.png)
-        skin/classic/browser/devtools/tool-inspector.png            (devtools/tool-inspector.png)
-        skin/classic/browser/devtools/tool-styleeditor.png          (devtools/tool-styleeditor.png)
-        skin/classic/browser/devtools/tool-profiler.png             (devtools/tool-profiler.png)
-        skin/classic/browser/devtools/tool-network.png              (devtools/tool-network.png)
-        skin/classic/browser/devtools/close.png                     (devtools/close.png)
-        skin/classic/browser/devtools/vview-delete.png              (devtools/vview-delete.png)
-        skin/classic/browser/devtools/vview-edit.png                (devtools/vview-edit.png)
-        skin/classic/browser/devtools/undock.png                    (devtools/undock.png)
-        skin/classic/browser/devtools/font-inspector.css            (devtools/font-inspector.css)
-        skin/classic/browser/devtools/computedview.css              (devtools/computedview.css)
-        skin/classic/browser/devtools/arrow-e.png                   (devtools/arrow-e.png)
+* skin/classic/browser/devtools/common.css                  (../shared/devtools/common.css)
+* skin/classic/browser/devtools/dark-theme.css              (../shared/devtools/dark-theme.css)
+* skin/classic/browser/devtools/light-theme.css             (../shared/devtools/light-theme.css)
+  skin/classic/browser/devtools/filters.svg                 (../shared/devtools/filters.svg)
+  skin/classic/browser/devtools/controls.png                (../shared/devtools/images/controls.png)
+  skin/classic/browser/devtools/controls@2x.png             (../shared/devtools/images/controls@2x.png)
+  skin/classic/browser/devtools/performance-icons.svg       (../shared/devtools/images/performance-icons.svg)
+  skin/classic/browser/devtools/newtab.png                  (../shared/devtools/images/newtab.png)
+  skin/classic/browser/devtools/newtab@2x.png               (../shared/devtools/images/newtab@2x.png)
+  skin/classic/browser/devtools/newtab-inverted.png         (../shared/devtools/images/newtab-inverted.png)
+  skin/classic/browser/devtools/newtab-inverted@2x.png      (../shared/devtools/images/newtab-inverted@2x.png)
+* skin/classic/browser/devtools/widgets.css                 (devtools/widgets.css)
+  skin/classic/browser/devtools/power.svg                   (../shared/devtools/images/power.svg)
+  skin/classic/browser/devtools/filetype-dir-close.svg      (../shared/devtools/images/filetypes/dir-close.svg)
+  skin/classic/browser/devtools/filetype-dir-open.svg       (../shared/devtools/images/filetypes/dir-open.svg)
+  skin/classic/browser/devtools/filetype-globe.svg          (../shared/devtools/images/filetypes/globe.svg)
+  skin/classic/browser/devtools/filetype-store.svg          (../shared/devtools/images/filetypes/store.svg)
+  skin/classic/browser/devtools/commandline-icon.png        (../shared/devtools/images/commandline-icon.png)
+  skin/classic/browser/devtools/commandline-icon@2x.png     (../shared/devtools/images/commandline-icon@2x.png)
+  skin/classic/browser/devtools/command-paintflashing.png     (../shared/devtools/images/command-paintflashing.png)
+  skin/classic/browser/devtools/command-paintflashing@2x.png  (../shared/devtools/images/command-paintflashing@2x.png)
+  skin/classic/browser/devtools/command-screenshot.png        (../shared/devtools/images/command-screenshot.png)
+  skin/classic/browser/devtools/command-screenshot@2x.png     (../shared/devtools/images/command-screenshot@2x.png)
+  skin/classic/browser/devtools/command-responsivemode.png    (../shared/devtools/images/command-responsivemode.png)
+  skin/classic/browser/devtools/command-responsivemode@2x.png (../shared/devtools/images/command-responsivemode@2x.png)
+  skin/classic/browser/devtools/command-scratchpad.png        (../shared/devtools/images/command-scratchpad.png)
+  skin/classic/browser/devtools/command-scratchpad@2x.png     (../shared/devtools/images/command-scratchpad@2x.png)
+  skin/classic/browser/devtools/command-tilt.png              (../shared/devtools/images/command-tilt.png)
+  skin/classic/browser/devtools/command-tilt@2x.png           (../shared/devtools/images/command-tilt@2x.png)
+  skin/classic/browser/devtools/command-pick.png              (../shared/devtools/images/command-pick.png)
+  skin/classic/browser/devtools/command-pick@2x.png           (../shared/devtools/images/command-pick@2x.png)
+  skin/classic/browser/devtools/command-frames.png            (../shared/devtools/images/command-frames.png)
+  skin/classic/browser/devtools/command-frames@2x.png         (../shared/devtools/images/command-frames@2x.png)
+  skin/classic/browser/devtools/command-console.png           (../shared/devtools/images/command-console.png)
+  skin/classic/browser/devtools/command-console@2x.png        (../shared/devtools/images/command-console@2x.png)
+  skin/classic/browser/devtools/command-eyedropper.png        (../shared/devtools/images/command-eyedropper.png)
+  skin/classic/browser/devtools/command-eyedropper@2x.png     (../shared/devtools/images/command-eyedropper@2x.png)
+  skin/classic/browser/devtools/alerticon-warning.png         (../shared/devtools/images/alerticon-warning.png)
+  skin/classic/browser/devtools/alerticon-warning@2x.png      (../shared/devtools/images/alerticon-warning@2x.png)
+* skin/classic/browser/devtools/ruleview.css                (../shared/devtools/ruleview.css)
+  skin/classic/browser/devtools/commandline.css             (devtools/commandline.css)
+  skin/classic/browser/devtools/markup-view.css             (../shared/devtools/markup-view.css)
+  skin/classic/browser/devtools/editor-error.png             (../shared/devtools/images/editor-error.png)
+  skin/classic/browser/devtools/editor-breakpoint.png        (../shared/devtools/images/editor-breakpoint.png)
+  skin/classic/browser/devtools/editor-breakpoint@2x.png        (../shared/devtools/images/editor-breakpoint@2x.png)
+  skin/classic/browser/devtools/editor-debug-location.png    (../shared/devtools/images/editor-debug-location.png)
+  skin/classic/browser/devtools/editor-debug-location@2x.png    (../shared/devtools/images/editor-debug-location@2x.png)
+* skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
+  skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
+  skin/classic/browser/devtools/webconsole.png                  (../shared/devtools/images/webconsole.png)
+  skin/classic/browser/devtools/webconsole@2x.png               (../shared/devtools/images/webconsole@2x.png)
+  skin/classic/browser/devtools/breadcrumbs-divider@2x.png      (../shared/devtools/images/breadcrumbs-divider@2x.png)
+  skin/classic/browser/devtools/breadcrumbs-scrollbutton.png    (../shared/devtools/images/breadcrumbs-scrollbutton.png)
+  skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)
+  skin/classic/browser/devtools/animationinspector.css          (../shared/devtools/animationinspector.css)
+* skin/classic/browser/devtools/canvasdebugger.css          (devtools/canvasdebugger.css)
+* skin/classic/browser/devtools/debugger.css                (devtools/debugger.css)
+  skin/classic/browser/devtools/eyedropper.css              (../shared/devtools/eyedropper.css)
+* skin/classic/browser/devtools/netmonitor.css              (devtools/netmonitor.css)
+* skin/classic/browser/devtools/profiler.css                (devtools/profiler.css)
+* skin/classic/browser/devtools/performance.css             (devtools/performance.css)
+* skin/classic/browser/devtools/timeline.css                (devtools/timeline.css)
+  skin/classic/browser/devtools/timeline-filter.svg         (../shared/devtools/images/timeline-filter.svg)
+* skin/classic/browser/devtools/scratchpad.css              (devtools/scratchpad.css)
+* skin/classic/browser/devtools/shadereditor.css            (devtools/shadereditor.css)
+* skin/classic/browser/devtools/splitview.css               (../shared/devtools/splitview.css)
+  skin/classic/browser/devtools/styleeditor.css             (../shared/devtools/styleeditor.css)
+  skin/classic/browser/devtools/storage.css                 (../shared/devtools/storage.css)
+* skin/classic/browser/devtools/webaudioeditor.css          (devtools/webaudioeditor.css)
+  skin/classic/browser/devtools/magnifying-glass.png        (../shared/devtools/images/magnifying-glass.png)
+  skin/classic/browser/devtools/magnifying-glass@2x.png     (../shared/devtools/images/magnifying-glass@2x.png)
+  skin/classic/browser/devtools/magnifying-glass-light.png  (../shared/devtools/images/magnifying-glass-light.png)
+  skin/classic/browser/devtools/magnifying-glass-light@2x.png (../shared/devtools/images/magnifying-glass-light@2x.png)
+  skin/classic/browser/devtools/itemToggle.png              (../shared/devtools/images/itemToggle.png)
+  skin/classic/browser/devtools/itemToggle@2x.png           (../shared/devtools/images/itemToggle@2x.png)
+  skin/classic/browser/devtools/itemArrow-dark-rtl.svg      (../shared/devtools/images/itemArrow-dark-rtl.svg)
+  skin/classic/browser/devtools/itemArrow-dark-ltr.svg      (../shared/devtools/images/itemArrow-dark-ltr.svg)
+  skin/classic/browser/devtools/itemArrow-rtl.svg           (../shared/devtools/images/itemArrow-rtl.svg)
+  skin/classic/browser/devtools/itemArrow-ltr.svg           (../shared/devtools/images/itemArrow-ltr.svg)
+  skin/classic/browser/devtools/noise.png                   (../shared/devtools/images/noise.png)
+  skin/classic/browser/devtools/dropmarker.svg              (../shared/devtools/images/dropmarker.svg)
+  skin/classic/browser/devtools/layoutview.css              (../shared/devtools/layoutview.css)
+  skin/classic/browser/devtools/debugger-collapse.png       (../shared/devtools/images/debugger-collapse.png)
+  skin/classic/browser/devtools/debugger-collapse@2x.png    (../shared/devtools/images/debugger-collapse@2x.png)
+  skin/classic/browser/devtools/debugger-expand.png         (../shared/devtools/images/debugger-expand.png)
+  skin/classic/browser/devtools/debugger-expand@2x.png      (../shared/devtools/images/debugger-expand@2x.png)
+  skin/classic/browser/devtools/debugger-pause.png          (../shared/devtools/images/debugger-pause.png)
+  skin/classic/browser/devtools/debugger-pause@2x.png       (../shared/devtools/images/debugger-pause@2x.png)
+  skin/classic/browser/devtools/debugger-play.png           (../shared/devtools/images/debugger-play.png)
+  skin/classic/browser/devtools/debugger-play@2x.png        (../shared/devtools/images/debugger-play@2x.png)
+  skin/classic/browser/devtools/debugger-step-in.png        (../shared/devtools/images/debugger-step-in.png)
+  skin/classic/browser/devtools/debugger-step-in@2x.png     (../shared/devtools/images/debugger-step-in@2x.png)
+  skin/classic/browser/devtools/debugger-step-out.png       (../shared/devtools/images/debugger-step-out.png)
+  skin/classic/browser/devtools/debugger-step-out@2x.png    (../shared/devtools/images/debugger-step-out@2x.png)
+  skin/classic/browser/devtools/debugger-step-over.png      (../shared/devtools/images/debugger-step-over.png)
+  skin/classic/browser/devtools/debugger-step-over@2x.png   (../shared/devtools/images/debugger-step-over@2x.png)
+  skin/classic/browser/devtools/debugger-blackbox.png       (../shared/devtools/images/debugger-blackbox.png)
+  skin/classic/browser/devtools/debugger-blackbox@2x.png    (../shared/devtools/images/debugger-blackbox@2x.png)
+  skin/classic/browser/devtools/debugger-prettyprint.png    (../shared/devtools/images/debugger-prettyprint.png)
+  skin/classic/browser/devtools/debugger-prettyprint@2x.png (../shared/devtools/images/debugger-prettyprint@2x.png)
+  skin/classic/browser/devtools/debugger-toggleBreakpoints.png (../shared/devtools/images/debugger-toggleBreakpoints.png)
+  skin/classic/browser/devtools/debugger-toggleBreakpoints@2x.png (../shared/devtools/images/debugger-toggleBreakpoints@2x.png)
+  skin/classic/browser/devtools/tracer-icon.png             (../shared/devtools/images/tracer-icon.png)
+  skin/classic/browser/devtools/tracer-icon@2x.png          (../shared/devtools/images/tracer-icon@2x.png)
+  skin/classic/browser/devtools/floating-scrollbars.css     (devtools/floating-scrollbars.css)
+  skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
+  skin/classic/browser/devtools/responsive-se-resizer.png          (../shared/devtools/images/responsivemode/responsive-se-resizer.png)
+  skin/classic/browser/devtools/responsive-se-resizer@2x.png       (../shared/devtools/images/responsivemode/responsive-se-resizer@2x.png)
+  skin/classic/browser/devtools/responsive-vertical-resizer.png    (../shared/devtools/images/responsivemode/responsive-vertical-resizer.png)
+  skin/classic/browser/devtools/responsive-vertical-resizer@2x.png (../shared/devtools/images/responsivemode/responsive-vertical-resizer@2x.png)
+  skin/classic/browser/devtools/responsive-horizontal-resizer.png  (../shared/devtools/images/responsivemode/responsive-horizontal-resizer.png)
+  skin/classic/browser/devtools/responsive-horizontal-resizer@2x.png  (../shared/devtools/images/responsivemode/responsive-horizontal-resizer@2x.png)
+  skin/classic/browser/devtools/responsiveui-rotate.png          (../shared/devtools/images/responsivemode/responsiveui-rotate.png)
+  skin/classic/browser/devtools/responsiveui-rotate@2x.png       (../shared/devtools/images/responsivemode/responsiveui-rotate@2x.png)
+  skin/classic/browser/devtools/responsiveui-touch.png           (../shared/devtools/images/responsivemode/responsiveui-touch.png)
+  skin/classic/browser/devtools/responsiveui-touch@2x.png        (../shared/devtools/images/responsivemode/responsiveui-touch@2x.png)
+  skin/classic/browser/devtools/responsiveui-screenshot.png      (../shared/devtools/images/responsivemode/responsiveui-screenshot.png)
+  skin/classic/browser/devtools/responsiveui-screenshot@2x.png   (../shared/devtools/images/responsivemode/responsiveui-screenshot@2x.png)
+  skin/classic/browser/devtools/toggle-tools.png            (../shared/devtools/images/toggle-tools.png)
+  skin/classic/browser/devtools/toggle-tools@2x.png         (../shared/devtools/images/toggle-tools@2x.png)
+  skin/classic/browser/devtools/dock-bottom@2x.png          (../shared/devtools/images/dock-bottom@2x.png)
+  skin/classic/browser/devtools/dock-side@2x.png          (../shared/devtools/images/dock-side@2x.png)
+* skin/classic/browser/devtools/inspector.css               (../shared/devtools/inspector.css)
+  skin/classic/browser/devtools/profiler-stopwatch.svg      (../shared/devtools/images/profiler-stopwatch.svg)
+  skin/classic/browser/devtools/profiler-stopwatch-checked.svg      (../shared/devtools/images/profiler-stopwatch-checked.svg)
+  skin/classic/browser/devtools/tool-options.svg            (../shared/devtools/images/tool-options.svg)
+  skin/classic/browser/devtools/tool-webconsole.svg         (../shared/devtools/images/tool-webconsole.svg)
+  skin/classic/browser/devtools/tool-debugger.svg           (../shared/devtools/images/tool-debugger.svg)
+  skin/classic/browser/devtools/tool-debugger-paused.svg    (../shared/devtools/images/tool-debugger-paused.svg)
+  skin/classic/browser/devtools/tool-inspector.svg          (../shared/devtools/images/tool-inspector.svg)
+  skin/classic/browser/devtools/tool-inspector.svg          (../shared/devtools/images/tool-inspector.svg)
+  skin/classic/browser/devtools/tool-styleeditor.svg        (../shared/devtools/images/tool-styleeditor.svg)
+  skin/classic/browser/devtools/tool-storage.svg            (../shared/devtools/images/tool-storage.svg)
+  skin/classic/browser/devtools/tool-profiler.svg           (../shared/devtools/images/tool-profiler.svg)
+  skin/classic/browser/devtools/tool-network.svg            (../shared/devtools/images/tool-network.svg)
+  skin/classic/browser/devtools/tool-scratchpad.svg         (../shared/devtools/images/tool-scratchpad.svg)
+  skin/classic/browser/devtools/tool-webaudio.svg           (../shared/devtools/images/tool-webaudio.svg)
+  skin/classic/browser/devtools/close.png                   (../shared/devtools/images/close.png)
+  skin/classic/browser/devtools/close@2x.png                (../shared/devtools/images/close@2x.png)
+  skin/classic/browser/devtools/vview-delete.png            (../shared/devtools/images/vview-delete.png)
+  skin/classic/browser/devtools/vview-delete@2x.png         (../shared/devtools/images/vview-delete@2x.png)
+  skin/classic/browser/devtools/vview-edit.png              (../shared/devtools/images/vview-edit.png)
+  skin/classic/browser/devtools/vview-edit@2x.png           (../shared/devtools/images/vview-edit@2x.png)
+  skin/classic/browser/devtools/vview-lock.png              (../shared/devtools/images/vview-lock.png)
+  skin/classic/browser/devtools/vview-lock@2x.png           (../shared/devtools/images/vview-lock@2x.png)
+  skin/classic/browser/devtools/vview-open-inspector.png    (../shared/devtools/images/vview-open-inspector.png)
+  skin/classic/browser/devtools/vview-open-inspector@2x.png (../shared/devtools/images/vview-open-inspector@2x.png)
+  skin/classic/browser/devtools/cubic-bezier-swatch.png     (../shared/devtools/images/cubic-bezier-swatch.png)
+  skin/classic/browser/devtools/cubic-bezier-swatch@2x.png  (../shared/devtools/images/cubic-bezier-swatch@2x.png)
+  skin/classic/browser/devtools/undock@2x.png               (../shared/devtools/images/undock@2x.png)
+  skin/classic/browser/devtools/font-inspector.css          (../shared/devtools/font-inspector.css)
+  skin/classic/browser/devtools/computedview.css            (../shared/devtools/computedview.css)
+  skin/classic/browser/devtools/arrow-e.png                 (../shared/devtools/images/arrow-e.png)
+  skin/classic/browser/devtools/arrow-e@2x.png              (../shared/devtools/images/arrow-e@2x.png)
+  skin/classic/browser/devtools/responsiveui-home.png       (../shared/devtools/responsiveui-home.png)
+  skin/classic/browser/devtools/projecteditor/projecteditor.css         (../shared/devtools/projecteditor/projecteditor.css)
+  skin/classic/browser/devtools/app-manager/connection-footer.css     (../shared/devtools/app-manager/connection-footer.css)
+  skin/classic/browser/devtools/app-manager/index.css                 (../shared/devtools/app-manager/index.css)
+  skin/classic/browser/devtools/app-manager/device.css                (../shared/devtools/app-manager/device.css)
+  skin/classic/browser/devtools/app-manager/projects.css              (../shared/devtools/app-manager/projects.css)
+  skin/classic/browser/devtools/app-manager/help.css                  (../shared/devtools/app-manager/help.css)
+  skin/classic/browser/devtools/app-manager/warning.svg               (../shared/devtools/app-manager/images/warning.svg)
+  skin/classic/browser/devtools/app-manager/error.svg                 (../shared/devtools/app-manager/images/error.svg)
+  skin/classic/browser/devtools/app-manager/plus.svg                  (../shared/devtools/app-manager/images/plus.svg)
+  skin/classic/browser/devtools/app-manager/remove.svg                (../shared/devtools/app-manager/images/remove.svg)
+  skin/classic/browser/devtools/app-manager/add.svg                   (../shared/devtools/app-manager/images/add.svg)
+  skin/classic/browser/devtools/app-manager/index-icons.svg           (../shared/devtools/app-manager/images/index-icons.svg)
+  skin/classic/browser/devtools/app-manager/rocket.svg                (../shared/devtools/app-manager/images/rocket.svg)
+  skin/classic/browser/devtools/app-manager/noise.png                 (../shared/devtools/app-manager/images/noise.png)
+  skin/classic/browser/devtools/app-manager/default-app-icon.png      (../shared/devtools/app-manager/images/default-app-icon.png)
 #endif
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
@@ -248,3 +322,13 @@ browser.jar:
         skin/classic/browser/syncQuota.css
         skin/classic/browser/syncProgress.css
 #endif
+#ifdef MOZ_DEVTOOLS
+  skin/classic/browser/devtools/tooltip/arrow-horizontal-dark.png   (../shared/devtools/tooltip/arrow-horizontal-dark.png)
+  skin/classic/browser/devtools/tooltip/arrow-horizontal-dark@2x.png   (../shared/devtools/tooltip/arrow-horizontal-dark@2x.png)
+  skin/classic/browser/devtools/tooltip/arrow-vertical-dark.png   (../shared/devtools/tooltip/arrow-vertical-dark.png)
+  skin/classic/browser/devtools/tooltip/arrow-vertical-dark@2x.png   (../shared/devtools/tooltip/arrow-vertical-dark@2x.png)
+  skin/classic/browser/devtools/tooltip/arrow-horizontal-light.png   (../shared/devtools/tooltip/arrow-horizontal-light.png)
+  skin/classic/browser/devtools/tooltip/arrow-horizontal-light@2x.png   (../shared/devtools/tooltip/arrow-horizontal-light@2x.png)
+  skin/classic/browser/devtools/tooltip/arrow-vertical-light.png   (../shared/devtools/tooltip/arrow-vertical-light.png)
+  skin/classic/browser/devtools/tooltip/arrow-vertical-light@2x.png   (../shared/devtools/tooltip/arrow-vertical-light@2x.png)
+#endif
diff --git a/browser/themes/osx/moz.build b/browser/themes/osx/moz.build
index 4c7366cd5..6a7af20ad 100644
--- a/browser/themes/osx/moz.build
+++ b/browser/themes/osx/moz.build
@@ -6,3 +6,4 @@
 
 DIRS += ['communicator']
 
+JAR_MANIFESTS += ['jar.mn']
+\ No newline at end of file
diff --git a/browser/themes/shared/devtools/animationinspector.css b/browser/themes/shared/devtools/animationinspector.css
new file mode 100644
index 000000000..c632d9129
--- /dev/null
+++ b/browser/themes/shared/devtools/animationinspector.css
@@ -0,0 +1,213 @@
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  display : flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  color: var(--theme-content-color3);
+}
+
+/* The top toolbar, containing the toggle-all button */
+
+#toolbar {
+  border-bottom: 1px solid var(--theme-splitter-color);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  height: 20px;
+}
+
+#toolbar .label {
+  padding: 1px 4px;
+}
+
+#toggle-all {
+  border-width: 0px 1px;
+  min-height: 20px;
+}
+
+/* The error message, shown when an invalid/unanimated element is selected */
+
+#error-message {
+  padding-top: 10%;
+  text-align: center;
+  flex: 1;
+  overflow: auto;
+
+  /* The error message is hidden by default */
+  display: none;
+}
+
+/* The animation players container */
+
+#players {
+  flex: 1;
+  overflow: auto;
+}
+
+/* Element picker and toggle-all buttons */
+
+#element-picker,
+#toggle-all {
+  position: relative;
+}
+
+#element-picker::before,
+#toggle-all::before {
+  content: "";
+  display: block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -8px 0 0 -8px;
+  background-image: url("chrome://browser/skin/devtools/command-pick.png");
+}
+
+#toggle-all::before {
+  background-image: url("debugger-pause.png");
+}
+
+#element-picker[checked]::before {
+  background-position: -48px 0;
+  filter: none; /* Icon is blue when checked, don't invert for light theme */
+}
+
+#toggle-all.paused::before {
+  background-image: url("debugger-play.png");
+}
+
+@media (min-resolution: 2dppx) {
+  #element-picker::before {
+    background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
+    background-size: 64px;
+  }
+
+  #toggle-all::before {
+    background-image: url("debugger-pause@2x.png");
+  }
+
+  #toggle-all.paused::before {
+    background-image: url("debugger-play@2x.png");
+  }
+}
+
+/* Disabled playerWidget when the animation has ended */
+
+.finished {
+  pointer-events: none;
+  opacity: .5;
+}
+
+/* Animation title gutter, contains the name, duration, iteration */
+
+.animation-title {
+  background-color: var(--theme-toolbar-background);
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 1px 4px;
+  word-wrap: break-word;
+  overflow: auto;
+}
+
+.animation-title .meta-data {
+  float: right;
+}
+
+.animation-title strong {
+  margin: 0 .5em;
+}
+
+/* Timeline wiget */
+
+.timeline {
+  height: 20px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.timeline .playback-controls {
+  width: 50px;
+  display: flex;
+  flex-direction: row;
+}
+
+/* Playback control buttons */
+
+.timeline .playback-controls button {
+  flex-grow: 1;
+  border-width: 0 1px 0 0;
+}
+
+/* Play/pause button */
+
+.timeline .toggle::before {
+  background-image: url(debugger-pause.png);
+}
+
+.paused .timeline .toggle::before,
+.finished .timeline .toggle::before {
+  background-image: url(debugger-play.png);
+}
+
+@media (min-resolution: 2dppx) {
+  .timeline .toggle::before {
+    background-image: url(debugger-pause@2x.png);
+  }
+
+  .paused .timeline .toggle::before,
+  .finished .timeline .toggle::before {
+    background-image: url(debugger-play@2x.png);
+  }
+}
+
+/* Slider (input type range) container */
+
+.timeline .sliders-container {
+  flex-grow: 1;
+  height: 100%;
+  position: relative;
+  border-width: 1px 0;
+}
+
+.timeline .sliders-container .current-time {
+  position: absolute;
+  padding: 0;
+  margin: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.timeline .sliders-container .current-time::-moz-range-thumb {
+  height: 100%;
+  width: 4px;
+  border-radius: 0;
+  border: none;
+  background: var(--theme-highlight-blue);
+}
+
+.timeline .sliders-container .current-time::-moz-range-track {
+  width: 100%;
+  height: 50px;
+  background: transparent;
+}
+
+/* Current time label */
+
+.timeline .time-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  border-left: 1px solid var(--theme-splitter-color);
+  background: var(--theme-toolbar-background);
+}
diff --git a/browser/themes/shared/devtools/app-manager/connection-footer.css b/browser/themes/shared/devtools/app-manager/connection-footer.css
new file mode 100644
index 000000000..dc5183286
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/connection-footer.css
@@ -0,0 +1,224 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/************** LAYOUT **************/
+
+#connection-footer {
+  display: flex;
+  flex-direction: column;
+  height: 50px;
+}
+
+#banners-and-logs {
+  display: flex;
+  flex-grow: 1;
+  max-height: 100%;
+}
+
+#logs {
+  display: flex;
+  width: 40%;
+  padding: 0;
+  width: 100%;
+}
+
+.banner {
+  display: none;
+  width: 60%;
+}
+
+#connection-footer[status="connected"]     #banner-connected,
+#connection-footer[status="connecting"]    #banner-connecting,
+#connection-footer[status="disconnected"]  #banner-disconnected,
+#connection-footer[status="disconnecting"] #banner-disconnecting {
+  display: flex;
+}
+
+body.show-simulators .banner,
+body.edit-connection .banner {
+  display: none !important;
+}
+
+body.show-simulators #banner-simulators,
+body.edit-connection #banner-editing {
+  display: flex !important;
+}
+
+#banner-logs {
+  width: 40%;
+  display: flex;
+}
+
+#logs > pre {
+  overflow: auto;
+  white-space: pre-line;
+}
+
+#status.banner-box {
+  width: 100% !important;
+}
+
+.banner-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+}
+
+#banner-connected > .banner-box {
+  align-items: flex-start;
+}
+
+#start-simulator-box {
+  display: inline;
+}
+
+/************** PIXELS **************/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: 0.9rem;
+}
+
+body {
+  color: #333;
+  background-color: white;
+  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
+}
+
+button {
+  background: linear-gradient(to bottom, #49535C, #394148);
+  box-shadow: 0px 1px 1px #3C444D, inset 0 1px 0px rgba(255,255,255,0.1);
+  color: #9FA6AD;
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
+  border: 1px solid #111;
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 3px 10px;
+}
+
+button.left {
+  margin-right: 0px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+button.right {
+  margin-left: -6px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+button.action-primary {
+  background: linear-gradient(to bottom, #276DA3, #1E5580);
+  color: #EEE;
+}
+
+button.action-cancel {
+  background: linear-gradient(to bottom, #B32B02, #942300);
+  color: #EEE;
+}
+
+#banners-and-logs {
+  border-top: #111 solid;
+  border-width: 1px 0;
+  background: linear-gradient(to bottom, #323A42, #29313A);
+  color: #A8BABF;
+  box-shadow: inset 0 0 1px #424A51;
+}
+
+#status {
+  background: linear-gradient(to bottom, #454F59, #404952);
+  box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973;
+}
+
+#logs > pre {
+  border: 1px solid #111;
+  box-shadow: 0px 1px 1px #49525A, inset 0 0 5px rgba(0,0,0,0.3);
+  font-size: 10px;
+  background: #22272D;
+  padding: 5px;
+  height: 100%;
+  padding-left: 20px;
+  position: relative;
+}
+
+#logs > pre span{
+  text-shadow: 0 1px 2px #000;
+  color: #3195FB;
+  position: fixed;
+  right: calc(30% - 15px);
+  bottom: -1px;
+}
+
+#logs > pre b {
+  font-size: 10px;
+  color: #70C4FF;
+}
+
+.banner-box {
+  box-shadow: inset 0 0 1px #667480, inset 0 1px 0 #5E6973;
+  border-right: 1px solid #111;
+  background-position: center right;
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  padding: 10px 20px;
+  position: relative;
+}
+
+.connected-status {
+  color: #B3BFC9;
+  text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
+  padding-bottom: 10px;
+}
+
+.connected-status {
+  font-size: 150%;
+  top: 10%;
+  padding-right: 3px;
+  position: relative;
+}
+
+.connected-indicator {
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0px 1px rgba(255,255,255,0.3);
+  height: 100%;
+  flex: 0 0 10px;
+}
+
+#banner-connected .connected-indicator,
+#banner-connecting .connected-indicator {
+  background: linear-gradient(to bottom, #69B8FF, #339FFF );
+}
+
+#banner-simulators .connected-indicator,
+#banner-disconnected .connected-indicator,
+#banner-editing .connected-indicator,
+#banner-disconnecting .connected-indicator {
+  background: linear-gradient(to bottom, #375A87, #1C4375 );
+}
+
+#banner-simulators .banner-content > * {
+  display: inline-block;
+}
+
+#banner-simulators[simulator-count="0"] .found-simulator,
+#banner-simulators:not([simulator-count="0"]) .no-simulator {
+  display: none;
+}
+
+#connection-no-device,
+[device-count="0"] > #connection-found-device,
+#connection-manual,
+#connection-assisted {
+  display: none;
+}
+
+#connection-found-device,
+[device-count="0"] > #connection-no-device,
+[adb-available="true"] > #connection-assisted,
+[adb-available="false"] > #connection-manual {
+  display: inline;
+}
diff --git a/browser/themes/shared/devtools/app-manager/device.css b/browser/themes/shared/devtools/app-manager/device.css
new file mode 100644
index 000000000..fc6efd9cd
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/device.css
@@ -0,0 +1,410 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/*****************      GENERAL      *****************/
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  font-size: 0.9rem;
+  color: #333;
+  background-color:  rgb(225, 225, 225);
+  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
+  display: flex;
+  flex-direction: column;
+}
+
+template {
+  display: none;
+}
+
+h1 {
+  font-size: 20px;
+}
+
+#content {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  overflow: hidden;
+}
+
+#detail {
+  background-image: url('noise.png');
+  display: flex;
+  flex-grow: 1;
+  z-index: 1;
+  overflow: hidden;
+}
+
+#meta {
+  background-size: 100%;
+  padding-top: 50px;
+}
+
+#connection-footer {
+  border-width: 0;
+  height: 50px;
+  min-height: 50px;
+}
+
+
+#root-actor-debug {
+  background: white;
+}
+
+/*****************     APP BUTTONS      *****************/
+
+
+
+.app-buttons {
+  display: block;
+  margin-left: 20px;
+  color: #BBB;
+}
+
+button {
+  margin: 0;
+  font-size: 11px;
+  border: 1px solid #CCC;
+  padding: 5px 15px;
+  cursor: pointer;
+  background: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+  border-radius: 3px;
+  border-width: 1px;
+}
+
+.app-buttons > button {
+  display: none;
+}
+
+.app-buttons > button[disabled] {
+  background-color: transparent;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.app[running="false"] > .app-buttons > .button-start,
+.app[running="true"] > .app-buttons > .button-stop,
+.app[running="true"] > .app-buttons > .button-debug {
+  display: inline-block;
+}
+
+.button-debug {
+  color: #3498DB;
+}
+
+.button-debug:hover {
+  background-color: #3498DB;
+  color: #FFF;
+}
+
+.button-debug[disabled] {
+  color: #3498DB;
+}
+
+.button-start {
+  color: #18BC9C
+}
+
+.button-start:hover {
+  background-color: #18BC9C;
+  color: #FFF;
+}
+
+.button-start[disabled] {
+  color: #18BC9C
+}
+
+.button-stop {
+  color: #E74C3C;
+}
+
+.button-stop:hover {
+  background-color: #E74C3C;
+  color: #FFF;
+}
+
+.button-stop[disabled] {
+  color: #E74C3C;
+}
+
+
+
+/*****************     PERMISSIONS     *****************/
+
+
+
+
+.permission-table {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.permission-table-body {
+  overflow: auto;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}
+
+.permission-table-header,
+.permission-table-footer {
+  display: flex;
+  background: #FFF;
+  border-top: 1px solid #CCC;
+  z-index: 2;
+  flex-shrink: 0;
+}
+
+.permission-table-header > div,
+.permission-table-footer > div {
+  z-index: 2;
+  flex-grow: 1;
+  background: linear-gradient(to bottom, #49535C, #394148);
+  box-shadow: 0px 1px 3px rgba(12, 20, 30, 0.5), inset 0 1px 0px rgba(255,255,255,0.1);
+  color: #9FA6AD;
+  text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
+  border: 0;
+  margin: auto 0;
+  padding: 5px;
+  text-align: center;
+  background: transparent;
+  box-shadow: none;
+  text-shadow: none;
+}
+
+.permission-table-header > div {
+  flex-basis: 20%;
+}
+
+.permission-table-header > div:first-child {
+  text-align: start;
+  padding-left: 10px;
+  flex-basis: 30%;
+}
+
+.permission-table-header {
+  border: 0;
+  border-bottom: 1px solid #CCC;
+  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+}
+
+.permission-table-footer {
+  box-shadow: 0 -1px 4px rgba(0,0,0,0.3);
+}
+
+.permission {
+  display: flex;
+  flex-grow: 1;
+}
+
+.permission:nth-child(odd) {
+  background: #E4E4E4;
+}
+
+.permission:hover {
+  background: #EEE;
+}
+
+.permission > div {
+  flex-grow: 1;
+  flex-basis: 20%;
+  text-align: center;
+  padding: 3px;
+  border-right: 1px solid #CCC;
+  border-bottom: 1px solid #CCC;
+}
+
+.permission > div:first-child {
+  text-align: start;
+  padding: 3px 10px;
+  flex-basis: 30%;
+  font-weight: bold;
+}
+
+.permission > div[permission="1"]:before, .allow-label:after {
+  color: #98CF39;
+  content: '   \2713';
+}
+
+.permission > div[permission="2"]:before, .deny-label:after {
+  color: #CC4908;
+  content: '   \2715';
+}
+
+.permission > div[permission="3"]:before, .prompt-label:after {
+  color: #009EED;
+  content: '   !';
+}
+
+
+
+
+/*****************     SIDEBAR      *****************/
+
+
+
+
+#sidebar {
+  background: #EEE;
+  position: relative;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 350px;
+  overflow: hidden;
+  z-index: 100;
+}
+
+.sidebar-item {
+  background-color: #F6F6F6;
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
+  color: #666;
+  line-height: 120%;
+  cursor: pointer;
+  display: flex;
+  padding: 15px 10px;
+  display: block;
+  text-align: start;
+  flex-grow: 1;
+}
+
+.sidebar-item > * {
+  flex-shrink: 0;
+}
+
+.sidebar-item:hover {
+  background-color: #EEE;
+}
+
+.sidebar-item.selected {
+  background-color: #46AFE3;
+  color: #FFF;
+}
+
+.help {
+  float: right;
+  padding: 0 5px;
+}
+
+/*****************     HEADER      *****************/
+
+header {
+  padding-top: 140px;
+  background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
+  color: #FFF;
+  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+  padding: 10px;
+}
+
+
+
+/*****************      APPS & BROWSER TABS      *****************/
+
+
+
+
+.apps, .browser-tabs {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.browser-tabs.hidden {
+  display: none;
+}
+
+.app, .browser-tab {
+  display: flex;
+  align-items: center;
+  order: 1;
+}
+
+.app-name, .browser-tab-details {
+  flex-grow: 1;
+  font-weight: bold;
+}
+
+.app, .browser-tab {
+  padding: 10px 20px;
+  border-bottom: 1px solid #CCC;
+}
+
+.app:hover, .browser-tab:hover {
+  background-color: #EFEFEF;
+}
+
+.app-icon {
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+}
+
+.browser-tab-url-subheading {
+  font-size: 10px;
+}
+
+
+
+/*****************      NOT CONNECTED      *****************/
+
+
+
+body:not(.notconnected) > #notConnectedMessage,
+body.notconnected > #content {
+  display: none;
+}
+
+#notConnectedMessage {
+  flex-grow: 1;
+  flex-direction: column;
+  margin: 50px auto;
+}
+
+#notConnectedMessage > span {
+  padding: 20px;
+  border: 1px solid #CCC;
+  border-radius: 5px;
+}
+
+#notConnectedMessage > span:before {
+  content: '';
+  background: url('error.svg') no-repeat;
+  background-size: 18px;
+  height: 24px;
+  width: 24px;
+  position: relative;
+  top: 10px;
+  display: inline-block;
+}
+
+
+
+/*****************      TABS       *****************/
+
+#tabs {
+  flex-grow: 1;
+  overflow: auto;
+}
+
+.tabpanel:not(.selected) {
+  display: none;
+}
+
+#tabs-headers {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/browser/themes/shared/devtools/app-manager/help.css b/browser/themes/shared/devtools/app-manager/help.css
new file mode 100644
index 000000000..087819eb7
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/help.css
@@ -0,0 +1,40 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+html, body {
+  margin: 0;
+  height: 100%;
+}
+
+body {
+  color: #555;
+  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
+  overflow: hidden;
+  max-width: 600px;
+  margin: auto;
+  padding: 20px 0;
+  background-color: #FFF;
+}
+
+button {
+  border: 1px solid #CCC;
+  padding: 5px 15px;
+  cursor: pointer;
+  background: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+  color: #3498DB;
+}
+
+button:hover {
+  background-color: #3498DB;
+  color: #FFF;
+}
+
+a, a:visited {
+  color: rgb(39,109,163);
+}
+
+#close-button {
+  float: right;
+}
diff --git a/browser/themes/shared/devtools/app-manager/images/add.svg b/browser/themes/shared/devtools/app-manager/images/add.svg
new file mode 100644
index 000000000..f1b559440
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/images/add.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
+  <path fill="#00B2F7" d="M32.336,3.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5
+    S48.076,3.894,32.336,3.894z M44.86,36.966h-7.823v7.62c0,2.582-2.12,4.702-4.702,4.702c-2.584,0-4.704-2.12-4.704-4.702v-7.62
+    h-7.817c-2.52,0-4.572-2.056-4.572-4.572s2.053-4.572,4.572-4.572h7.817v-7.62c0-2.582,2.12-4.702,4.704-4.702
+    c2.582,0,4.702,2.12,4.702,4.702v7.62h7.823c2.514,0,4.57,2.056,4.57,4.572S47.374,36.966,44.86,36.966z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/app-manager/images/default-app-icon.png b/browser/themes/shared/devtools/app-manager/images/default-app-icon.png
new file mode 100644
index 000000000..f186d9c62
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/images/default-app-icon.png
diff --git a/browser/themes/shared/devtools/app-manager/images/error.svg b/browser/themes/shared/devtools/app-manager/images/error.svg
new file mode 100644
index 000000000..21261cd00
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/images/error.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
+  <path fill="#E25026" d="M32,4.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5S47.74,4.894,32,4.894
+    z M46.903,48.674c-1.817,1.817-4.691,1.76-6.449,0.002l-8.327-8.327l-8.151,8.151c-1.877,1.877-4.87,1.814-6.685,0
+    c-1.877-1.877-1.879-4.811-0.002-6.687l8.151-8.151l-8.327-8.327c-1.76-1.76-1.817-4.634,0-6.451c1.76-1.76,4.691-1.76,6.451,0
+    l8.327,8.327l8.151-8.151c1.877-1.877,4.811-1.874,6.687,0.002c1.814,1.814,1.877,4.808,0,6.685l-8.151,8.151l8.327,8.327
+    C48.662,43.982,48.662,46.914,46.903,48.674z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/app-manager/images/index-icons.svg b/browser/themes/shared/devtools/app-manager/images/index-icons.svg
new file mode 100644
index 000000000..b0a414de0
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/images/index-icons.svg
@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="160px" height="240px" viewBox="0 0 160 240" enable-background="new 0 0 160 240" xml:space="preserve">
+<rect y="40" display="none" fill="#22272D" width="84" height="160"/>
+<rect x="80.75" y="40" display="none" fill="#194866" width="84" height="160"/>
+<path fill="#414042" d="M40,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L28,39.181v12l3.204,0l4.467-4.466
+	c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.466,4.466l3.204,0v-12l-4.597-4.596
+	C46.042,27.895,42.044,21.149,40,21.149z M40.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244
+	c-0.987,0-1.933,0.099-2.815,0.271C38.03,30.199,39.289,28.185,40.005,28.185z"/>
+<path fill="#414042" d="M41.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553
+	c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627
+	s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C41.337,49.929,41.436,50.434,41.436,50.98z"/>
+<g>
+	<g>
+		<path fill="#B2B5B9" d="M40,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L28,39.181v12l3.204,0l4.467-4.466
+			c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.466,4.466l3.204,0v-12l-4.597-4.596
+			C46.042,27.895,42.044,21.149,40,21.149z M40.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244
+			c-0.987,0-1.933,0.099-2.815,0.271C38.03,30.199,39.289,28.185,40.005,28.185z"/>
+		<path fill="#B2B5B9" d="M41.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553
+			c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627
+			s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C41.337,49.929,41.436,50.434,41.436,50.98z"/>
+	</g>
+</g>
+<g>
+	<path fill="#DCE8F3" d="M120,21.149c-2.044,0.001-6.042,6.745-7.404,13.436L108,39.181v12l3.204,0l4.467-4.466
+		c0.457,0.478,0.96,0.88,1.5,1.199h5.652c0.543-0.318,1.05-0.719,1.507-1.199l4.467,4.466l3.204,0v-12l-4.597-4.596
+		C126.042,27.895,122.044,21.149,120,21.149z M120.005,28.185c0.712,0,1.965,2,2.746,4.392c-0.846-0.157-1.747-0.244-2.686-0.244
+		c-0.987,0-1.933,0.099-2.815,0.271C118.03,30.199,119.289,28.185,120.005,28.185z"/>
+	<path fill="#DCE8F3" d="M121.436,50.98c0,1.41-1.094,2.553-1.459,2.553c-0.364,0-1.459-1.144-1.459-2.553
+		c0-0.546,0.099-1.051,0.266-1.466h-1.69c-0.198,0.731-0.31,1.549-0.31,2.412c0,3.108,2.411,5.627,3.215,5.627
+		s3.216-2.519,3.215-5.626c0-0.864-0.112-1.681-0.31-2.413l-1.734,0C121.337,49.929,121.436,50.434,121.436,50.98z"/>
+</g>
+<g>
+	<g>
+		<path fill="#B2B5B9" d="M52.5,136.017c0,2.279-1.888,4.167-4.167,4.167H31.667c-2.279,0-4.167-1.888-4.167-4.167v-33.333
+			c0-2.279,1.888-4.167,4.167-4.167h16.667c2.279,0,4.167,1.888,4.167,4.167V136.017z M49.375,107.892
+			c0-0.554-0.488-1.042-1.042-1.042H31.667c-0.553,0-1.042,0.488-1.042,1.042v22.917c0,0.554,0.488,1.042,1.042,1.042h16.667
+			c0.553,0,1.042-0.488,1.042-1.042V107.892z M42.604,102.684h-5.208c-0.293,0-0.521,0.228-0.521,0.521
+			c0,0.293,0.228,0.521,0.521,0.521h5.208c0.293,0,0.521-0.228,0.521-0.521C43.125,102.912,42.897,102.684,42.604,102.684z
+			 M40,133.413c-1.432,0-2.604,1.171-2.604,2.604c0,1.433,1.172,2.604,2.604,2.604s2.604-1.171,2.604-2.604
+			C42.604,134.585,41.432,133.413,40,133.413z"/>
+	</g>
+</g>
+<g>
+	<path fill="#DCE8F3" d="M132.5,136.017c0,2.279-1.888,4.167-4.167,4.167h-16.667c-2.279,0-4.167-1.888-4.167-4.167v-33.333
+		c0-2.279,1.888-4.167,4.167-4.167h16.667c2.279,0,4.167,1.888,4.167,4.167V136.017z M129.375,107.892
+		c0-0.554-0.488-1.042-1.042-1.042h-16.667c-0.553,0-1.042,0.488-1.042,1.042v22.917c0,0.554,0.488,1.042,1.042,1.042h16.667
+		c0.553,0,1.042-0.488,1.042-1.042V107.892z M122.604,102.684h-5.208c-0.293,0-0.521,0.228-0.521,0.521
+		c0,0.293,0.228,0.521,0.521,0.521h5.208c0.293,0,0.521-0.228,0.521-0.521C123.125,102.912,122.897,102.684,122.604,102.684z
+		 M120,133.413c-1.432,0-2.604,1.171-2.604,2.604c0,1.433,1.172,2.604,2.604,2.604s2.604-1.171,2.604-2.604
+		C122.604,134.585,121.432,133.413,120,133.413z"/>
+</g>
+<g>
+	<path fill="#B2B5B9" d="M40,185.388c8.121,0,14.729,6.607,14.729,14.729S48.121,214.845,40,214.845s-14.729-6.607-14.729-14.729
+		S31.879,185.388,40,185.388 M40,182.75c-9.591,0-17.367,7.775-17.367,17.367c0,9.591,7.775,17.367,17.367,17.367
+		s17.367-7.775,17.367-17.367C57.367,190.525,49.591,182.75,40,182.75L40,182.75z"/>
+	<g>
+		<path fill="#B2B5B9" d="M39.565,204.504c-0.688,0-1.196-0.508-1.286-1.195l-0.299-2.57c-0.12-0.808,0.359-1.405,1.166-1.495
+			c2.81-0.269,4.364-1.345,4.364-3.229v-0.06c0-1.674-1.285-2.84-3.438-2.84c-1.584,0-2.87,0.568-4.065,1.645
+			c-0.299,0.239-0.688,0.418-1.106,0.418c-0.926,0-1.674-0.747-1.674-1.644c0-0.448,0.18-0.927,0.598-1.285
+			c1.584-1.495,3.587-2.481,6.337-2.481c4.185,0,7.024,2.331,7.024,6.068v0.06c0,3.767-2.72,5.47-6.038,6.038l-0.12,1.375
+			c-0.12,0.657-0.598,1.195-1.285,1.195H39.565z M39.565,206.687c1.226,0,2.122,0.896,2.122,2.062v0.299
+			c0,1.166-0.896,2.062-2.122,2.062s-2.123-0.896-2.123-2.062v-0.299C37.442,207.583,38.339,206.687,39.565,206.687z"/>
+	</g>
+</g>
+<g>
+	<path fill="#DCE8F3" d="M120,185.388c8.121,0,14.729,6.607,14.729,14.729s-6.607,14.729-14.729,14.729s-14.729-6.607-14.729-14.729
+		S111.879,185.388,120,185.388 M120,182.75c-9.591,0-17.367,7.775-17.367,17.367c0,9.591,7.775,17.367,17.367,17.367
+		s17.367-7.775,17.367-17.367C137.367,190.525,129.591,182.75,120,182.75L120,182.75z"/>
+	<g>
+		<path fill="#DCE8F3" d="M119.564,204.504c-0.688,0-1.195-0.508-1.285-1.195l-0.299-2.57c-0.12-0.808,0.358-1.405,1.166-1.495
+			c2.81-0.269,4.363-1.345,4.363-3.229v-0.06c0-1.674-1.285-2.84-3.438-2.84c-1.584,0-2.869,0.568-4.064,1.645
+			c-0.3,0.239-0.688,0.418-1.106,0.418c-0.927,0-1.674-0.747-1.674-1.644c0-0.448,0.18-0.927,0.598-1.285
+			c1.584-1.495,3.587-2.481,6.337-2.481c4.186,0,7.024,2.331,7.024,6.068v0.06c0,3.767-2.72,5.47-6.038,6.038l-0.119,1.375
+			c-0.12,0.657-0.598,1.195-1.285,1.195H119.564z M119.564,206.687c1.226,0,2.122,0.896,2.122,2.062v0.299
+			c0,1.166-0.896,2.062-2.122,2.062s-2.122-0.896-2.122-2.062v-0.299C117.442,207.583,118.339,206.687,119.564,206.687z"/>
+	</g>
+</g>
+</svg>
diff --git a/browser/themes/shared/devtools/app-manager/images/noise.png b/browser/themes/shared/devtools/app-manager/images/noise.png
new file mode 100644
index 000000000..b3c42acae
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/images/noise.png
diff --git a/browser/themes/shared/devtools/app-manager/images/plus.svg b/browser/themes/shared/devtools/app-manager/images/plus.svg
new file mode 100644
index 000000000..10e8d2b25
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/images/plus.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
+  <path fill="#ABABAB" d="M32.336,3.894c-15.74,0-28.5,12.76-28.5,28.5s12.76,28.5,28.5,28.5s28.5-12.76,28.5-28.5
+    S48.076,3.894,32.336,3.894z M44.86,36.966h-7.823v7.62c0,2.582-2.12,4.702-4.702,4.702c-2.584,0-4.704-2.12-4.704-4.702v-7.62
+    h-7.817c-2.52,0-4.572-2.056-4.572-4.572s2.053-4.572,4.572-4.572h7.817v-7.62c0-2.582,2.12-4.702,4.704-4.702
+    c2.582,0,4.702,2.12,4.702,4.702v7.62h7.823c2.514,0,4.57,2.056,4.57,4.572S47.374,36.966,44.86,36.966z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/app-manager/images/remove.svg b/browser/themes/shared/devtools/app-manager/images/remove.svg
new file mode 100644
index 000000000..3d36871c9
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/images/remove.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64">
+<path d="m 12.183457,12.241457 c -11.129861,11.12986 -11.129861,29.175226 0,40.305086 11.12986,11.129861 29.175226,11.129861 40.305086,0 11.129861,-11.12986 11.129861,-29.175226 0,-40.305086 -11.12986,-11.129861 -29.175226,-11.129861 -40.305086,0 z m 32.241241,14.52963 -5.531697,5.531696 5.388154,5.388154 c 1.82575,1.82575 1.82575,4.823882 0,6.649632 -1.827164,1.827164 -4.825297,1.827164 -6.651047,0.0014 l -5.388153,-5.388153 -5.527454,5.527453 c -1.781909,1.781909 -4.686704,1.779081 -6.465784,0 -1.779081,-1.77908 -1.781202,-4.684582 0,-6.465784 l 5.527453,-5.527454 -5.388153,-5.388153 c -1.82575,-1.82575 -1.82575,-4.823883 0.0014,-6.651047 1.82575,-1.82575 4.823882,-1.82575 6.649632,0 l 5.388154,5.388154 5.531696,-5.531697 c 1.777667,-1.777666 4.68529,-1.777666 6.46437,0.0014 1.779081,1.77908 1.779081,4.686703 0.0014,6.46437 z"
+   style="fill:#FF6B00" />
+</svg>
diff --git a/browser/themes/shared/devtools/app-manager/images/rocket.svg b/browser/themes/shared/devtools/app-manager/images/rocket.svg
new file mode 100644
index 000000000..95c42a47c
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/images/rocket.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+  <g opacity="0.1">
+    <g>
+      <path fill="#FFFFFF" d="M12,2.3c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464
+        c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535
+        C15.333,6.021,13.127,2.3,12,2.3z M12.003,6.181c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135
+        c-0.545,0-1.066,0.054-1.553,0.15C10.914,7.292,11.608,6.181,12.003,6.181z"/>
+      <path fill="#FFFFFF" d="M12.792,18.755c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408
+        c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104
+        s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,18.175,12.792,18.453,12.792,18.755z"/>
+    </g>
+    <g>
+      <g>
+        <path fill="#414042" d="M12,2c-1.127,0-3.333,3.721-4.084,7.411l-2.535,2.535v6.619l1.767,0l2.464-2.464
+          c0.252,0.264,0.529,0.486,0.827,0.662h3.118c0.299-0.175,0.579-0.397,0.831-0.662l2.464,2.464l1.767,0v-6.619l-2.535-2.535
+          C15.333,5.721,13.127,2,12,2z M12.003,5.881c0.393,0,1.084,1.103,1.515,2.423c-0.466-0.087-0.963-0.135-1.481-0.135
+          c-0.545,0-1.066,0.054-1.553,0.15C10.914,6.992,11.608,5.881,12.003,5.881z"/>
+        <path fill="#414042" d="M12.792,18.455c0,0.778-0.603,1.408-0.805,1.408c-0.201,0-0.805-0.631-0.805-1.408
+          c0-0.301,0.055-0.579,0.147-0.809h-0.932c-0.109,0.403-0.171,0.854-0.171,1.33c0,1.714,1.33,3.104,1.774,3.104
+          s1.774-1.389,1.774-3.103c0-0.477-0.062-0.927-0.171-1.331l-0.957,0C12.738,17.875,12.792,18.153,12.792,18.455z"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/browser/themes/shared/devtools/app-manager/images/warning.svg b/browser/themes/shared/devtools/app-manager/images/warning.svg
new file mode 100644
index 000000000..89e7c6fb8
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/images/warning.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
+  <path fill="#ECB51F" d="M61.689,51.121L36.437,7.384c-2.441-4.227-6.434-4.227-8.875,0L2.311,51.121
+    c-2.441,4.227-0.444,7.686,4.437,7.686h50.504C62.133,58.807,64.13,55.349,61.689,51.121z M35.968,47.68
+    c0,2.191-1.688,3.877-3.968,3.877s-3.968-1.686-3.968-3.877v-0.093c0-2.187,1.688-3.873,3.968-3.873s3.968,1.686,3.968,3.873V47.68z
+    M36.059,21.548l-1.961,17.146c-0.137,1.233-0.958,2.009-2.098,2.009s-1.961-0.776-2.098-2.009l-1.961-17.146
+    c-0.137-1.322,0.592-2.325,1.825-2.325h4.469C35.466,19.223,36.196,20.226,36.059,21.548z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/app-manager/index.css b/browser/themes/shared/devtools/app-manager/index.css
new file mode 100644
index 000000000..cb3f87662
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/index.css
@@ -0,0 +1,103 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
+}
+
+#tabs {
+  box-shadow: inset -4px 0 0 rgba(0,0,0,0.3);
+  background: #252C33;
+}
+
+#toolbox-tabs {
+  overflow-y: auto;
+}
+
+.button {
+  width: 80px;
+  height: 85px;
+  padding-bottom: 5px;
+  -moz-appearance: none;
+  border: none;
+  border-bottom: 1px solid #121214;
+  background-color: transparent;
+  color: #B5B8BB;
+  cursor: pointer;
+  text-align: center;
+  -moz-box-align: end;
+  font-size: 10px;
+  text-shadow: 0 1px 0 #333;
+  color: #9FA6AD;
+}
+
+.button:first-child {
+  border-top: none;
+}
+
+.button[selected] {
+  box-shadow: inset -4px 0 0 rgba(0,0,0,0.3), inset 2px 0 0 #DEFFFF, inset 3px 0 0 #8DC7E8, inset 4px 0 1px #1D6496;
+  color: #DCE8F3;
+  background-color: #1A4766;
+  border-color: #191B1E;
+}
+
+.button::-moz-focus-inner {
+  border-width: 0;
+}
+
+.panel {
+  border-width: 0;
+}
+
+.panel:not([selected="true"]) {
+  display: none;
+}
+
+.button.toolbox {
+  background-repeat: no-repeat;
+  background-position: center 15px;
+  background-size: 40px 40px;
+}
+
+.projects-button {
+  background: url('chrome://browser/skin/devtools/app-manager/index-icons.svg') no-repeat;
+  background-position: left -5px;
+}
+
+.projects-button[selected] {
+  background-position: right -5px;
+}
+
+.device-button {
+  background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg');
+  background-position: left -85px, top left;
+  background-repeat: no-repeat, no-repeat;
+  background-size: 160px 240px, 2px 80px;
+}
+
+.device-button[selected] {
+  background-position: right -85px, top left;
+}
+
+.help-button {
+  border-bottom: 0;
+  background-image: url('chrome://browser/skin/devtools/app-manager/index-icons.svg');
+  background-position: left -165px, top left;
+  background-repeat: no-repeat, no-repeat;
+  background-size: 160px 240px, 2px 80px;
+}
+
+.help-button[selected] {
+  background-position: right -165px, top left;
+}
+
+#connection-footer {
+  border-width: 0;
+  height: 50px;
+  min-height: 50px;
+}
diff --git a/browser/themes/shared/devtools/app-manager/manifest-editor.inc.css b/browser/themes/shared/devtools/app-manager/manifest-editor.inc.css
new file mode 100644
index 000000000..a0e245e89
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/manifest-editor.inc.css
@@ -0,0 +1,82 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Manifest Editor overrides */
+
+.variables-view-container.manifest-editor {
+  background-color: #F5F5F5;
+  padding: 20px 2px;
+}
+
+.manifest-editor .variable-or-property:focus > .title {
+  background-color: #EDEDED;
+  color: #000;
+  border-radius: 4px;
+}
+
+.manifest-editor .variables-view-property > .title > .name {
+  color: #27406A;
+}
+
+.manifest-editor .variable-or-property > .title > label,
+.manifest-editor textbox  {
+  font-family: monospace;
+}
+
+.manifest-editor .variable-or-property > .title > .token-string {
+  color: #54BC6A;
+  font-weight: bold;
+}
+
+.manifest-editor .variable-or-property > .title > .token-boolean,
+.manifest-editor .variable-or-property > .title > .token-number {
+  color: #009BD4;
+  font-weight: bold;
+}
+
+.manifest-editor .variable-or-property > .title > .token-undefined {
+  color: #bbb;
+}
+
+.manifest-editor .variable-or-property > .title > .token-null {
+  color: #999;
+}
+
+.manifest-editor .variable-or-property > .title > .token-other {
+  color: #333;
+}
+
+.manifest-editor .variables-view-variable {
+  border-bottom: none;
+}
+
+.manifest-editor .variables-view-delete,
+.manifest-editor .variables-view-delete:hover,
+.manifest-editor .variables-view-delete:active,
+.manifest-editor .variable-or-property:focus .variables-view-delete,
+.manifest-editor .variables-view-add-property,
+.manifest-editor .variables-view-add-property:hover,
+.manifest-editor .variables-view-add-property:active,
+.manifest-editor .variable-or-property:focus .variables-view-add-property {
+  list-style-image: none;
+  -moz-image-region: initial;
+}
+
+.manifest-editor .variables-view-delete::before,
+.manifest-editor .variables-view-add-property::before {
+  width: 11px;
+  height: 11px;
+  content: "";
+  display: inline-block;
+  background-size: 11px auto;
+}
+
+.manifest-editor .variables-view-delete::before {
+  background-image: url("app-manager/remove.svg");
+}
+
+.manifest-editor .variables-view-add-property::before {
+  background-image: url("app-manager/add.svg");
+  -moz-margin-end: 2px;
+}
diff --git a/browser/themes/shared/devtools/app-manager/projects.css b/browser/themes/shared/devtools/app-manager/projects.css
new file mode 100644
index 000000000..98b2289fb
--- /dev/null
+++ b/browser/themes/shared/devtools/app-manager/projects.css
@@ -0,0 +1,556 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-size: 0.9rem;
+}
+
+html, body {
+  height: 100%;
+}
+
+template {
+  display: none;
+}
+
+body {
+  display: flex;
+  color: #333;
+  background-color: white;
+  font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
+  overflow: hidden;
+}
+
+body:not(.connected) button.device-action {
+  display: none;
+}
+
+strong {
+  color: #111;
+}
+
+
+/********* SIDEBAR ***********/
+
+
+
+#sidebar {
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 350px;
+  overflow: hidden;
+  z-index: 100;
+  background-color: #E9EAEB;
+  position: relative;
+  box-shadow: 3px 0 1.5px rgba(0,0,0,0.08);
+}
+
+#project-list {
+  height: 100%;
+  overflow: auto;
+}
+
+#project-list:not([projects-count="0"]) > #no-project {
+  display: none;
+}
+
+#no-project {
+  padding: 100px 20px 0;
+  font-weight: bold;
+  color: #BBB;
+  font-size: 22px;
+}
+
+
+/********* PROJECT MENU ***********/
+
+
+.project-item {
+  padding: 10px 0;
+  background-color: #F0F1F2;
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.1);
+  color: #666;
+  line-height: 120%;
+  cursor: pointer;
+  display: flex;
+  position: relative;
+}
+
+.project-item:hover {
+  background-color: #EEE;
+}
+
+.project-item > * {
+  flex-shrink: 0;
+}
+
+.project-item.selected {
+  background-color: #46AFE3;
+}
+
+.project-item.selected strong {
+  color: #FFF;
+}
+
+.project-item.selected p,
+.project-item.selected span {
+  color: #C1DCF0;
+}
+
+.button-remove {
+  background-image: url('remove.svg');
+  background-size: 20px;
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  visibility: hidden;
+  opacity: 0.5;
+}
+
+.project-item:hover .button-remove {
+  visibility: visible;
+}
+
+.project-item-status {
+  width: 6px;
+  margin: -10px 0;
+  border-right: 1px solid rgba(0,0,0,0.1);
+  box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.2), inset 0 -1px 0 0 rgba(0,0,0,0.2);
+}
+
+.project-item-status[status="valid"] {
+  background-color: #70BF53;
+}
+
+.project-item-status[status~="warning"] {
+  background-color: #F2B33F;
+}
+
+.project-item-status[status~="error"] {
+  background-color: #ED4C62;
+}
+
+.project-item-icon {
+  width: 32px;
+  height: 32px;
+  margin: 0 10px;
+}
+
+.project-item-meta {
+  flex-grow: 1;
+  flex-shrink: 1 !important;
+}
+
+.project-item-type {
+  font-size: 10px;
+  line-height: 20px;
+  float: right;
+  padding-right: 10px;
+  color: #7597B9;
+  text-transform: uppercase;
+}
+
+.project-item-description {
+  color: #888;
+  font-size: 90%;
+}
+
+/********* ADD PROJECT ***********/
+
+#new-packaged-project {
+  box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
+  background-position: calc(100% - 10px) 10px;
+}
+
+#new-packaged-project,
+#new-hosted-project {
+  background-color: #EEE;
+  border: none;
+  border-top: 1px solid #DDD;
+  padding: 10px;
+  font-weight: bold;
+}
+
+#new-packaged-project:hover,
+#new-hosted-project:hover {
+  background-color: #DDD;
+}
+
+#new-hosted-project-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+#new-packaged-project,
+#new-hosted-project-click {
+  background-image: url('plus.svg');
+  background-size: 20px;
+  background-repeat: no-repeat;
+  cursor: pointer;
+}
+
+#new-hosted-project-click {
+  background-position: top right;
+  width: 20px;
+  height: 20px;
+  margin-left: 5px;
+}
+
+#url-input {
+  flex-grow: 1;
+  width: 90%;
+  box-shadow: none;
+  border-radius: 3px;
+  border: 1px solid #DDD;
+  padding: 4px;
+  margin-top: 4px;
+}
+
+
+/********* LENSE ***********/
+
+
+#lense {
+  height: 100%;
+  flex-grow: 1;
+  display: flex;
+  z-index: 1;
+  overflow: hidden;
+  background-color: rgb(225, 225, 225);
+  background-image: url('rocket.svg'), url('noise.png');
+  background-repeat: no-repeat, repeat;
+  background-size: 35%, auto;
+  background-position: center center, top left;
+}
+
+#lense > div {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+}
+
+
+/********* PROJECT ***********/
+
+
+.project-details {
+  background-color: rgb(225, 225, 225);
+  padding: 10px;
+  line-height: 160%;
+  display: flex;
+  flex-direction: column;
+}
+
+.project-metadata {
+  flex-grow: 1;
+}
+
+.project-status {
+  display: flex;
+}
+
+.project-title {
+  flex-direction: row;
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #CCC;
+  margin-bottom: 10px;
+}
+
+.project-title > h1 {
+  flex-grow: 1;
+  font-size: 24px;
+}
+
+.project-location {
+  color: gray;
+  font-size: 10px;
+  cursor: pointer;
+  font-family: monospace;
+}
+
+.project-location:hover {
+  text-decoration: underline;
+}
+
+.project-header {
+  display: flex;
+  border-bottom: 1px solid #CCC;
+  margin: 10px 20px 10px 20px;
+  padding-bottom: 10px;
+}
+
+.project-icon {
+  flex-shrink: 0;
+  width: 64px;
+  height: 64px;
+  margin-right: 10px;
+}
+
+.project-location {
+  font-size: 11px;
+  color: #999;
+}
+
+.project-description {
+  font-style: italic;
+  color: #333;
+}
+
+.project-status > p {
+  text-transform: uppercase;
+  font-size: 10px;
+  padding: 2px 10px;
+  border-radius: 2px;
+  margin-top: 6px;
+  line-height: 10px;
+}
+
+.project-validation {
+  color: #FFF;
+  display: none;
+  margin-left: 10px;
+}
+
+.project-validation.valid {
+  background-color: #70BF53;
+}
+
+.project-validation.warning {
+  background-color: #F2B33F;
+}
+
+.project-validation.error {
+  background-color: #ED4C62;
+}
+
+[status="valid"] > .project-validation.valid,
+[status~="warning"] > .project-validation.warning,
+[status~="error"] > .project-validation.error {
+  display: inline;
+}
+
+.project-type {
+  display: none;
+  margin-left: 10px;
+}
+[type="hosted"] > .project-type.hosted,
+[type="packaged"] > .project-type.packaged {
+  display: inline;
+}
+
+/********* PROJECT BUTTONS ***********/
+
+
+
+.project-buttons {
+  display: flex;
+  margin-left: 20px;
+  color: #BBB;
+}
+
+.project-buttons > button {
+  margin: 0;
+  font-size: 11px;
+  border: 1px solid #CCC;
+  border-left-width: 0;
+  padding: 5px 15px;
+  cursor: pointer;
+  background: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+}
+
+.project-buttons > button[disabled] {
+  background-color: transparent;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.project-buttons > button:first-child {
+  border-left-width: 1px;
+}
+
+.project-button-debug {
+  color: #3498DB;
+}
+
+.project-button-debug:hover {
+  background-color: #3498DB;
+  color: #FFF;
+}
+
+.project-button-debug[disabled] {
+  color: #3498DB;
+}
+
+.project-button-update {
+  color: #777;
+}
+
+.project-button-update:hover {
+  background-color: #777;
+  color: #FFF;
+}
+
+.project-button-update[disabled] {
+  color: #777;
+}
+
+
+
+/********* ERRORS AND WARNINGS ***********/
+
+.project-warnings,
+.project-errors,
+.project-item-warnings,
+.project-item-errors {
+  display: none;
+}
+
+[status~="warning"] .project-item-warnings,
+[status~="error"] .project-item-errors {
+  display: inline-block;
+}
+
+[status~="warning"] > .project-warnings,
+[status~="error"] > .project-errors {
+  display: block;
+}
+
+.project-warnings,
+.project-errors {
+  margin: 20px 20px 0;
+  padding: 10px 10px;
+  font-family: monospace;
+}
+
+.project-warnings {
+  border-left: 3px solid #ECB51E;
+  background-color: rgba(236, 181, 20, 0.1);
+}
+
+.project-errors {
+  border-left: 3px solid #ED4C62;
+  background-color: rgba(237,76,98,0.1);
+}
+
+.project-item-warnings {
+  background-image: url('warning.svg');
+}
+
+.project-item-errors {
+  background-image: url('error.svg');
+  color: rgb(227, 79, 34);
+}
+
+.project-item-warnings,
+.project-item-errors {
+  background-repeat: no-repeat;
+  background-size: 12px;
+  background-position: left center;
+  margin-top: 6px;
+}
+
+.project-item-warnings > span,
+.project-item-errors > span {
+  font-size: 11px;
+  padding-left: 16px;
+  font-weight: bold;
+}
+
+
+/********* MANIFEST EDITOR ***********/
+
+.manifest-editor {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  background-color: #E1E1E1;
+}
+
+.manifest-header {
+  display: flex;
+  flex-direction: row;
+}
+
+.manifest-header > h2 {
+  font-size: 18px;
+  margin: 1em 15px 1em 30px;
+  display: none;
+}
+
+.manifest-header > button {
+  margin: 18px 0;
+  font-size: 11px;
+  border: 1px solid #CCC;
+  border-right-width: 0;
+  padding: 2px;
+  cursor: pointer;
+  background: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+  display: none;
+}
+
+.manifest-header > button[disabled] {
+  background-color: transparent;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.manifest-header > button:last-child {
+  border-right-width: 1px;
+}
+
+[type="packaged"] > .editable {
+  display: block;
+}
+
+[type="hosted"] > .viewable {
+  display: block;
+}
+
+.manifest-button-save {
+  color: #777;
+}
+
+.manifest-button-save:hover {
+  background-color: #777;
+  color: #FFF;
+}
+
+.manifest-button-save[disabled] {
+  color: #777;
+}
+
+.variables-view {
+  flex-grow: 1;
+  border: 0;
+  border-top: 5px solid #C9C9C9;
+}
+
+/* Bug 925921: Remove when the manifest editor is always on */
+
+.manifest-editor {
+  display: none;
+}
+
+.project-details {
+  flex-grow: 1;
+}
+
+#lense[manifest-editable] .manifest-editor {
+  display: flex;
+}
+
+#lense[manifest-editable] .project-details {
+  flex-grow: 0;
+}
+
+/* End blocks to remove */
diff --git a/browser/themes/shared/devtools/canvasdebugger.inc.css b/browser/themes/shared/devtools/canvasdebugger.inc.css
new file mode 100644
index 000000000..0697afdf6
--- /dev/null
+++ b/browser/themes/shared/devtools/canvasdebugger.inc.css
@@ -0,0 +1,461 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%filter substitution
+%define darkCheckerboardBackground #000
+%define lightCheckerboardBackground #fff
+%define checkerboardCell rgba(128,128,128,0.2)
+%define checkerboardPattern linear-gradient(45deg, @checkerboardCell@ 25%, transparent 25%, transparent 75%, @checkerboardCell@ 75%, @checkerboardCell@), linear-gradient(45deg, @checkerboardCell@ 25%, transparent 25%, transparent 75%, @checkerboardCell@ 75%, @checkerboardCell@)
+%define gutterWidth 3em
+%define gutterPaddingStart 22px
+
+/* 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 {
+  min-width: 30px;
+  min-height: 28px;
+  margin: 0;
+  list-style-image: url(profiler-stopwatch.svg);
+}
+
+#empty-notice > button .button-text {
+  display: none;
+}
+
+.theme-dark #import-notice {
+  font-size: 250%;
+  color: rgba(255,255,255,0.2);
+}
+
+.theme-light #import-notice {
+  font-size: 250%;
+  color: rgba(0,0,0,0.2);
+}
+
+/* Snapshots pane */
+
+#snapshots-pane > tabs {
+  -moz-border-end: 1px solid;
+}
+
+#snapshots-pane .devtools-toolbar {
+  -moz-border-end: 1px solid;
+}
+
+.theme-dark #snapshots-pane > tabs,
+.theme-dark #snapshots-pane .devtools-toolbar {
+  -moz-border-end-color: black; /* Match the splitter color. */
+}
+
+.theme-light #snapshots-pane > tabs,
+.theme-light #snapshots-pane .devtools-toolbar {
+  -moz-border-end-color: #aaa; /* Match the splitter color. */
+}
+
+#record-snapshot {
+  list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch.svg");
+}
+
+#record-snapshot[checked] {
+  list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg");
+}
+
+/* Snapshots items */
+
+.snapshot-item-thumbnail {
+  image-rendering: -moz-crisp-edges;
+  background-image: @checkerboardPattern@;
+  background-size: 12px 12px, 12px 12px;
+  background-position: 0px 0px, 6px 6px;
+  background-repeat: repeat, repeat;
+}
+
+.snapshot-item-thumbnail[flipped=true] {
+  transform: scaleY(-1);
+}
+
+.theme-dark .snapshot-item-thumbnail {
+  background-color: @darkCheckerboardBackground@;
+}
+
+.theme-light .snapshot-item-thumbnail {
+  background-color: @lightCheckerboardBackground@;
+}
+
+.snapshot-item-details {
+  -moz-padding-start: 6px;
+}
+
+.snapshot-item-calls {
+  padding-top: 4px;
+  font-size: 80%;
+}
+
+.snapshot-item-save {
+  padding-bottom: 2px;
+  font-size: 90%;
+}
+
+.snapshot-item-calls,
+.snapshot-item-save {
+  color: var(--theme-body-color-alt);
+}
+
+.snapshot-item-save {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.snapshot-item-save[disabled=true] {
+  text-decoration: none;
+  pointer-events: none;
+}
+
+.snapshot-item-footer.devtools-throbber::before {
+  margin-top: -2px;
+}
+
+#snapshots-list .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Debugging pane controls */
+
+#debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#resume {
+  list-style-image: url(debugger-play.png);
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+#step-over {
+  list-style-image: url(debugger-step-over.png);
+}
+
+#step-in {
+  list-style-image: url(debugger-step-in.png);
+}
+
+#step-out {
+  list-style-image: url(debugger-step-out.png);
+}
+
+@media (min-resolution: 2dppx) {
+  #resume {
+    list-style-image: url(debugger-play@2x.png);
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+
+  #step-over {
+    list-style-image: url(debugger-step-over@2x.png);
+  }
+
+  #step-in {
+    list-style-image: url(debugger-step-in@2x.png);
+  }
+
+  #step-out {
+    list-style-image: url(debugger-step-out@2x.png);
+  }
+}
+
+#debugging-controls > toolbarbutton {
+  transition: opacity 0.15s ease-in-out;
+}
+
+#debugging-controls > toolbarbutton[disabled=true] {
+  opacity: 0.5;
+}
+
+#calls-slider {
+  -moz-padding-end: 24px;
+}
+
+#calls-slider .scale-slider {
+  margin: 0;
+}
+
+#debugging-toolbar-sizer-button {
+  /* This button's only purpose in life is to make the
+     container .devtools-toolbar have the right height. */
+  visibility: hidden;
+  min-width: 1px;
+}
+
+/* Calls list pane */
+
+#calls-list .side-menu-widget-container {
+  background: transparent;
+}
+
+#calls-list .side-menu-widget-item {
+  padding: 0;
+}
+
+/* Calls list items */
+
+.theme-dark #calls-list .side-menu-widget-item {
+  border-color: #111;
+  border-bottom-color: transparent;
+}
+
+.theme-light #calls-list .side-menu-widget-item {
+  border-color: #eee;
+  border-bottom-color: transparent;
+}
+
+.theme-dark .call-item-view:hover {
+  background-color: rgba(255,255,255,.025);
+}
+
+.theme-light .call-item-view:hover {
+  background-color: rgba(0,0,0,.025);
+}
+
+.theme-dark .call-item-view[draw-call] {
+  background-color: rgba(112,191,83,0.15);
+}
+
+.theme-light .call-item-view[draw-call] {
+  background-color: rgba(44,187,15,0.1);
+}
+
+.theme-dark .call-item-view[interesting-call] {
+  background-color: rgba(223,128,255,0.15);
+}
+
+.theme-light .call-item-view[interesting-call] {
+  background-color: rgba(184,46,229,0.1);
+}
+
+.call-item-gutter {
+  width: calc(@gutterWidth@ + @gutterPaddingStart@);
+  -moz-padding-start: @gutterPaddingStart@;
+  -moz-padding-end: 4px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  -moz-border-end: 1px solid;
+  -moz-margin-end: 6px;
+}
+
+.selected .call-item-gutter {
+  background-image: url("editor-debug-location.png");
+  background-repeat: no-repeat;
+  background-position: 6px center;
+  background-size: 12px;
+}
+
+@media (min-resolution: 2dppx) {
+  .selected .call-item-gutter {
+    background-image: url("editor-debug-location@2x.png");
+  }
+}
+
+.call-item-gutter {
+  background-color: var(--theme-sidebar-background);
+  color: var(--theme-content-color3);
+  border-color: var(--theme-splitter-color);
+}
+
+.call-item-index {
+  text-align: end;
+}
+
+.call-item-context {
+  color: var(--theme-highlight-orange);
+}
+
+.call-item-name {
+  color: var(--theme-highlight-blue);
+}
+
+.call-item-location {
+  -moz-padding-start: 2px;
+  -moz-padding-end: 6px;
+  text-align: end;
+  cursor: pointer;
+  color: var(--theme-highlight-bluegrey);
+}
+
+.call-item-location:hover {
+  color: var(--theme-highlight-blue);
+}
+
+.call-item-view:hover .call-item-location,
+.call-item-view[expanded] .call-item-location {
+  text-decoration: underline;
+}
+
+.theme-dark .call-item-location {
+  border-color: #111;
+}
+
+.theme-light .call-item-location {
+  border-color: #eee;
+}
+
+.call-item-stack {
+  -moz-padding-start: calc(@gutterWidth@ + @gutterPaddingStart@);
+  padding-bottom: 10px;
+}
+
+.theme-dark .call-item-stack {
+  background: rgba(0,0,0,0.9);
+}
+
+.theme-light .call-item-stack {
+  background: rgba(255,255,255,0.9);
+}
+
+.call-item-stack-fn {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
+.call-item-stack-fn-location {
+  -moz-padding-start: 2px;
+  -moz-padding-end: 6px;
+  text-align: end;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.call-item-stack-fn-name {
+  color: var(--theme-content-color3);
+}
+
+.call-item-stack-fn-location {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.call-item-stack-fn-location:hover {
+  color: var(--theme-highlight-blue);
+}
+
+#calls-list .selected .call-item-contents > label:not(.call-item-gutter) {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Rendering preview */
+
+#screenshot-container {
+  background-image: @checkerboardPattern@;
+  background-size: 30px 30px, 30px 30px;
+  background-position: 0px 0px, 15px 15px;
+  background-repeat: repeat, repeat;
+}
+
+.theme-dark #screenshot-container {
+  background-color: @darkCheckerboardBackground@;
+}
+
+.theme-light #screenshot-container {
+  background-color: @lightCheckerboardBackground@;
+}
+
+@media (min-width: 701px) {
+  #screenshot-container {
+    width: 30vw;
+    max-width: 50vw;
+    min-width: 100px;
+  }
+}
+
+@media (max-width: 700px) {
+  #screenshot-container {
+    height: 40vh;
+    max-height: 70vh;
+    min-height: 100px;
+  }
+}
+
+#screenshot-image {
+  background-image: -moz-element(#screenshot-rendering);
+  background-size: contain;
+  background-position: center, center;
+  background-repeat: no-repeat;
+}
+
+#screenshot-image[flipped=true] {
+  transform: scaleY(-1);
+}
+
+#screenshot-dimensions {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  text-align: center;
+}
+
+.theme-dark #screenshot-dimensions {
+  background-color: rgba(0,0,0,0.4);
+}
+
+.theme-light #screenshot-dimensions {
+  background-color: rgba(255,255,255,0.8);
+}
+
+/* Snapshot filmstrip */
+
+#snapshot-filmstrip {
+  overflow: hidden;
+}
+
+.theme-dark #snapshot-filmstrip {
+  border-top: 1px solid #000;
+  color: var(--theme-selection-color);
+}
+
+.theme-light #snapshot-filmstrip {
+  border-top: 1px solid #aaa;
+  color: var(--theme-body-color-alt);
+}
+
+.filmstrip-thumbnail {
+  image-rendering: -moz-crisp-edges;
+  background-image: @checkerboardPattern@;
+  background-size: 12px 12px, 12px 12px;
+  background-position: 0px -1px, 6px 5px;
+  background-repeat: repeat, repeat;
+  background-origin: content-box;
+  cursor: pointer;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  transition: opacity 0.1s ease-in-out;
+}
+
+.filmstrip-thumbnail[flipped=true] {
+  transform: scaleY(-1);
+}
+
+.theme-dark .filmstrip-thumbnail {
+  background-color: @darkCheckerboardBackground@;
+}
+
+.theme-light .filmstrip-thumbnail {
+  background-color: @lightCheckerboardBackground@;
+}
+
+.filmstrip-thumbnail {
+  -moz-border-end: 1px solid var(--theme-splitter-color)
+}
+
+#snapshot-filmstrip > .filmstrip-thumbnail:hover,
+#snapshot-filmstrip:not(:hover) > .filmstrip-thumbnail[highlighted] {
+  border: 1px solid var(--theme-highlight-blue);
+  margin: 0 0 0 -1px;
+  padding: 0;
+  opacity: 0.66;
+}
diff --git a/browser/themes/shared/devtools/commandline.inc.css b/browser/themes/shared/devtools/commandline.inc.css
index a5aa8df8a..990a9ffcb 100644
--- a/browser/themes/shared/devtools/commandline.inc.css
+++ b/browser/themes/shared/devtools/commandline.inc.css
@@ -7,14 +7,15 @@
 /* Developer toolbar */
 
 #developer-toolbar {
+  -moz-appearance: none;
   padding: 0;
   min-height: 32px;
-  background-image: url(devtools/background-noise-toolbar.png), linear-gradient(#303840, #2d3640);
+  background-color: #343C45; /* Toolbars */
   border-top: 1px solid #060a0d;
   box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(206,37%,4%,.1) inset;
 }
 
-.developer-toolbar-button {
+#developer-toolbar > toolbarbutton {
   -moz-appearance: none;
   border: none;
   background: transparent;
@@ -27,11 +28,21 @@
   margin: auto 10px;
 }
 
+.developer-toolbar-button > .toolbarbutton-icon,
+#developer-toolbar-closebutton > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
 #developer-toolbar-toolbox-button {
   list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
+#developer-toolbar-toolbox-button > label {
+  display: none;
+}
+
 #developer-toolbar-toolbox-button:hover {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
@@ -44,6 +55,59 @@
   -moz-image-region: rect(0px, 64px, 16px, 48px);
 }
 
+@media (min-resolution: 2dppx) {
+  #developer-toolbar-toolbox-button {
+    list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png");
+    -moz-image-region: rect(0px, 32px, 32px, 0px);
+  }
+
+  #developer-toolbar-toolbox-button:hover {
+    -moz-image-region: rect(0px, 64px, 32px, 32px);
+  }
+
+  #developer-toolbar-toolbox-button:hover:active {
+    -moz-image-region: rect(0px, 96px, 32px, 64px);
+  }
+
+  #developer-toolbar-toolbox-button[checked=true] {
+    -moz-image-region: rect(0px, 128px, 32px, 96px);
+  }
+}
+
+#developer-toolbar-closebutton {
+  list-style-image: url("chrome://browser/skin/devtools/close.png");
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
+  opacity: 0.6;
+}
+
+@media (min-resolution: 2dppx) {
+  #developer-toolbar-closebutton {
+    list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
+  }
+}
+
+#developer-toolbar-closebutton > .toolbarbutton-icon {
+  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
+     use evil CSS to give the impression of smaller content */
+  margin: -4px;
+}
+
+#developer-toolbar-closebutton > .toolbarbutton-text {
+  display: none;
+}
+
+#developer-toolbar-closebutton:hover {
+  opacity: 0.8;
+}
+
+#developer-toolbar-closebutton:hover:active {
+  opacity: 1;
+}
+
 /* GCLI */
 
 html|*#gcli-tooltip-frame,
@@ -76,7 +140,6 @@ html|*#gcli-output-frame {
 .gclitoolbar-input-node {
   -moz-appearance: none;
   color: hsl(210,30%,85%);
-  padding-left: 20px;
   background-color: #242b33;
   background-repeat: no-repeat;
   background-position: 4px center;
@@ -85,14 +148,35 @@ html|*#gcli-output-frame {
               -1px 0 0 hsla(206,37%,4%,.2) inset;
   line-height: 32px;
   outline-style: none;
-  background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
+  padding: 0;
 }
 
 .gclitoolbar-input-node[focused="true"] {
-  background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
   background-color: #232e38;
 }
 
+.gclitoolbar-input-node::before {
+  content: "";
+  display: inline-block;
+  -moz-box-ordinal-group: 0;
+  width: 16px;
+  height: 16px;
+  margin: 0 2px;
+  background-image: url("chrome://browser/skin/devtools/commandline-icon.png");
+  background-position: 0 center;
+  background-size: 32px 16px;
+}
+
+.gclitoolbar-input-node[focused="true"]::before {
+  background-position: -16px center;
+}
+
+@media (min-resolution: 2dppx) {
+  .gclitoolbar-input-node::before {
+    background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png");
+  }
+}
+
 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
   background-color: hsl(210,30%,85%);
   color: hsl(210,24%,16%);
diff --git a/browser/themes/shared/devtools/common.css b/browser/themes/shared/devtools/common.css
new file mode 100644
index 000000000..420bc1c08
--- /dev/null
+++ b/browser/themes/shared/devtools/common.css
@@ -0,0 +1,249 @@
+%if 0
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+%endif
+
+:root {
+  font: message-box;
+}
+
+.devtools-monospace {
+%ifdef XP_MACOSX
+  font-family: Menlo, monospace;
+%elifdef XP_WIN
+  font-family: Consolas, monospace;
+%else
+  font-family: monospace;
+%endif
+%if defined(MOZ_WIDGET_GTK) || defined(MOZ_WIDGET_QT)
+  font-size: 80%;
+%endif
+}
+
+/* Splitters */
+.devtools-horizontal-splitter {
+  -moz-appearance: none;
+  background-image: none;
+  background-color: transparent;
+  border: 0;
+  border-bottom: 1px solid rgba(118, 121, 125, .5);
+  min-height: 3px;
+  height: 3px;
+  margin-top: -3px;
+  position: relative;
+}
+
+.devtools-side-splitter {
+  -moz-appearance: none;
+  background-image: none;
+  background-color: transparent;
+  border: 0;
+  -moz-border-end: 1px solid rgba(118, 121, 125, .5);
+  min-width: 3px;
+  width: 3px;
+  -moz-margin-start: -3px;
+  position: relative;
+  cursor: e-resize;
+}
+
+.devtools-toolbox-side-iframe {
+  min-width: 465px;
+}
+
+/* Autocomplete Popup */
+/* Dark and light theme */
+
+.devtools-autocomplete-popup {
+  -moz-appearance: none !important;
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
+  background-color: transparent;
+  border-radius: 3px;
+  overflow-x: hidden;
+%if defined(MOZ_WIDGET_GTK) || defined(MOZ_WIDGET_QT)
+  max-height: 32rem;
+%else
+  max-height: 40rem;
+%endif
+}
+
+.devtools-autocomplete-listbox {
+  -moz-appearance: none !important;
+  background-color: transparent;
+  border-width: 0px !important;
+}
+
+.devtools-autocomplete-listbox > richlistitem,
+.devtools-autocomplete-listbox > richlistitem[selected] {
+  width: 100%;
+  background-color: transparent;
+  border-radius: 4px;
+}
+
+.devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
+.devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
+  background-color: rgba(0,0,0,0.5);
+}
+
+.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
+.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
+  color: hsl(208,100%,60%);
+}
+
+.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
+  color: #eee;
+}
+
+.devtools-autocomplete-listbox.dark-theme > richlistitem > label {
+  color: #ccc;
+}
+
+.devtools-autocomplete-listbox > richlistitem > .initial-value,
+.devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
+  margin: 0;
+  padding: 1px 0;
+}
+
+.devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
+  text-align: end;
+}
+
+/* Rest of the dark and light theme */
+
+.devtools-autocomplete-popup,
+.theme-dark .CodeMirror-hints,
+.theme-dark .CodeMirror-Tern-tooltip {
+  border: 1px solid hsl(210,11%,10%);
+  background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
+}
+
+.devtools-autocomplete-popup.light-theme,
+.light-theme .CodeMirror-hints,
+.light-theme .CodeMirror-Tern-tooltip {
+  border: 1px solid hsl(210,24%,90%);
+  background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%));
+}
+
+.devtools-autocomplete-popup.light-theme {
+  box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset;
+}
+
+.devtools-autocomplete-listbox.light-theme > richlistitem[selected],
+.devtools-autocomplete-listbox.light-theme > richlistitem:hover {
+  background-color: rgba(128,128,128,0.3);
+}
+
+.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
+.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
+  color: #222;
+}
+
+.devtools-autocomplete-listbox.light-theme > richlistitem > label {
+  color: #666;
+}
+
+/* Tooltip widget (see browser/devtools/shared/widgets/Tooltip.js) */
+
+.devtools-tooltip .panel-arrowcontent {
+  padding: 4px;
+}
+
+.devtools-tooltip .panel-arrowcontainer {
+  /* Reseting the transition used when panels are shown */
+  transition: none;
+  /* Panels slide up/down/left/right when they appear using a transform.
+  Since we want to remove the transition, we don't need to transform anymore
+  plus it can interfeer by causing mouseleave events on the underlying nodes */
+  transform: none;
+}
+
+.devtools-tooltip[clamped-dimensions] {
+  min-height: 100px;
+  max-height: 400px;
+  min-width: 100px;
+  max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions-no-min-height] {
+  min-height: 0;
+  max-height: 400px;
+  min-width: 100px;
+  max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] {
+  min-width: 400px;
+  max-width: 400px;
+}
+.devtools-tooltip[clamped-dimensions] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-min-height] .panel-arrowcontent,
+.devtools-tooltip[clamped-dimensions-no-max-or-min-height] .panel-arrowcontent {
+  overflow: hidden;
+}
+.devtools-tooltip[wide] {
+  max-width: 600px;
+}
+
+/* Tooltip: Simple Text */
+
+.devtools-tooltip-simple-text {
+  max-width: 400px;
+  margin: 0 -4px; /* Compensate for the .panel-arrowcontent padding. */
+  padding: 8px 12px;
+  white-space: pre-wrap;
+}
+
+.devtools-tooltip-simple-text:first-child {
+  margin-top: -4px;
+}
+
+.devtools-tooltip-simple-text:last-child {
+  margin-bottom: -4px;
+}
+
+/* Tooltip: Alert Icon */
+
+.devtools-tooltip-alert-icon {
+  width: 32px;
+  height: 32px;
+  margin: 6px;
+  -moz-margin-end: 20px;
+}
+
+.devtools-tooltip-alert-icon {
+  list-style-image: url("chrome://global/skin/icons/warning-32.png");
+}
+
+/* Tooltip: Variables View */
+
+.devtools-tooltip-variables-view-box {
+  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
+}
+
+.devtools-tooltip-variables-view-box .variable-or-property > .title {
+  -moz-padding-end: 6px;
+}
+
+/* Tooltip: Tiles */
+
+.devtools-tooltip-tiles {
+  background-color: #eee;
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+  background-size: 20px 20px;
+  background-position: 0 0, 10px 10px;
+}
+
+.devtools-tooltip-iframe {
+  border: none;
+  background: transparent;
+}
+
+/* Eyedropper Widget */
+
+.devtools-eyedropper-panel {
+  pointer-events: none;
+  -moz-appearance: none;
+  width: 156px;
+  height: 120px;
+  background-color: transparent;
+  border: none;
+}
diff --git a/browser/themes/shared/devtools/common.inc.css b/browser/themes/shared/devtools/common.inc.css
deleted file mode 100644
index 268164e01..000000000
--- a/browser/themes/shared/devtools/common.inc.css
+++ /dev/null
@@ -1,113 +0,0 @@
-%if 0
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-%endif
-
-/* Autocomplete Popup */
-/* Dark and light theme */
-
-.devtools-autocomplete-popup {
-  -moz-appearance: none !important;
-  border: 1px solid hsl(210,11%,10%);
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
-  background-color: transparent;
-  background-image: linear-gradient(to bottom, hsla(209,18%,18%,0.9), hsl(210,11%,16%));
-  border-radius: 3px;
-%ifdef XP_LINUX
-  max-height: 32rem;
-%else
-  max-height: 40rem;
-%endif
-}
-
-.devtools-autocomplete-listbox {
-  -moz-appearance: none !important;
-  background-color: transparent;
-  border-width: 0px !important;
-}
-
-.devtools-autocomplete-listbox > richlistitem,
-.devtools-autocomplete-listbox > richlistitem[selected] {
-  width: 100%;
-  background-color: transparent;
-  border-radius: 4px;
-}
-
-.devtools-autocomplete-listbox.dark-theme > richlistitem[selected],
-.devtools-autocomplete-listbox.dark-theme > richlistitem:hover {
-  background-color: rgba(0,0,0,0.5);
-}
-
-.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > .autocomplete-value,
-.devtools-autocomplete-listbox:focus.dark-theme > richlistitem[selected] > .initial-value {
-  color: hsl(208,100%,60%);
-}
-
-.devtools-autocomplete-listbox.dark-theme > richlistitem[selected] > label {
-  color: #eee;
-}
-
-.devtools-autocomplete-listbox.dark-theme > richlistitem > label {
-  color: #ccc;
-}
-
-.devtools-autocomplete-listbox > richlistitem > .initial-value,
-.devtools-autocomplete-listbox > richlistitem > .autocomplete-value {
-  margin: 0;
-  padding: 1px 0;
-}
-
-.devtools-autocomplete-listbox > richlistitem > .autocomplete-count {
-  text-align: right;
-}
-
-/* Rest of the light theme */
-
-.devtools-autocomplete-popup.light-theme {
-  border: 1px solid hsl(210,24%,90%);
-  box-shadow: 0 1px 0 hsla(209,29%,90%,.25) inset;
-  background-image: linear-gradient(to bottom, hsla(209,18%,100%,0.9), hsl(210,24%,95%));
-}
-
-.devtools-autocomplete-listbox.light-theme > richlistitem[selected],
-.devtools-autocomplete-listbox.light-theme > richlistitem:hover {
-  background-color: rgba(128,128,128,0.3);
-}
-
-.devtools-autocomplete-listbox.light-theme > richlistitem[selected] > .autocomplete-value,
-.devtools-autocomplete-listbox:focus.light-theme > richlistitem[selected] > .initial-value {
-  color: #222;
-}
-
-.devtools-autocomplete-listbox.light-theme > richlistitem > label {
-  color: #666;
-}
-
-/* Responsive container */
-
-.devtools-responsive-container {
-  -moz-box-orient: horizontal;
-}
-
-@media (max-width: 700px) {
-  .devtools-responsive-container {
-    -moz-box-orient: vertical;
-  }
-
-  .devtools-responsive-container > .devtools-side-splitter {
-    border: 0;
-    margin: 0;
-    border-top: 1px solid black;
-    min-height: 3px;
-    height: 3px;
-    margin-bottom: -3px;
-    /* In some edge case the cursor is not changed to n-resize */
-    cursor: n-resize;
-  }
-
-  .devtools-responsive-container > .devtools-sidebar-tabs {
-    min-height: 35vh;
-    max-height: 75vh;
-  }
-}
diff --git a/browser/themes/osx/devtools/computedview.css b/browser/themes/shared/devtools/computedview.css
index 772fc5bd7..463fc9194 100644
--- a/browser/themes/osx/devtools/computedview.css
+++ b/browser/themes/shared/devtools/computedview.css
@@ -3,22 +3,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* Take away these two :visited rules to get a core dumper     */
-/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
-.link,
-.link:visited {
-  color: #0091ff;
-}
-.link,
-.helplink,
-.link:visited,
-.helplink:visited {
-  text-decoration: none;
-}
-.link:hover {
-  text-decoration: underline;
-}
-
 /* From content */
 
 * {
@@ -43,6 +27,10 @@ body {
   flex: 1;
 }
 
+.row-striped {
+  background: var(--theme-body-background);
+}
+
 .property-view-hidden,
 .property-content-hidden {
   display: none;
@@ -59,29 +47,37 @@ body {
 }
 
 .property-name {
-  width: 50%;
+  /* -12px is so the expander triangle isn't pushed up above the property */
+  width: calc(100% - 12px);
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  outline: 0;
+}
+
+.property-value, .other-property-value {
+  background-image: url(arrow-e.png);
+  background-repeat: no-repeat;
+  background-size: 5px 8px;
+}
+
+@media (min-resolution: 2dppx) {
+  .property-value, .other-property-value {
+    background-image: url(arrow-e@2x.png);
+  }
 }
 
 .property-value {
-  width: 50%;
-  max-width: 100%;
+  width: 100%;
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  background-image: url(arrow-e.png);
-  background-repeat: no-repeat;
-  background-size: 5px 8px;
   background-position: 2px center;
   padding-left: 10px;
+  outline: 0;
 }
 
 .other-property-value {
-  background-image: url(arrow-e.png);
-  background-repeat: no-repeat;
-  background-size: 5px 8px;
   background-position: left center;
   padding-left: 8px;
 }
@@ -91,7 +87,8 @@ body {
     width: 200px;
   }
   .property-value {
-    width: auto;
+    /* -212px is accounting for the 200px property-name and the 12px triangle */
+    width: calc(100% - 212px);
   }
 }
 
@@ -105,10 +102,6 @@ body {
   margin-left: -12px!important;
 }
 
-.expander[open] {
-  margin-left: -17px!important;
-}
-
 .expandable {
   visibility: visible;
 }
@@ -158,8 +151,9 @@ body {
   margin: 0 5px;
 }
 
-.devtools-toolbar {
+#root .devtools-toolbar {
   width: 100%;
+  border-bottom-width: 0;
 }
 
 .link {
@@ -167,3 +161,48 @@ body {
   cursor: pointer;
   float: right;
 }
+
+/* Take away these two :visited rules to get a core dumper     */
+/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
+
+.link,
+.link:visited {
+  color: #0091ff;
+}
+
+.link,
+.helplink,
+.link:visited,
+.helplink:visited {
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.computedview-colorswatch {
+  border-radius: 50%;
+  width: 1em;
+  height: 1em;
+  vertical-align: text-top;
+  -moz-margin-end: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+.computedview-colorswatch::before {
+  content: '';
+  background-color: #eee;
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 6px;
+  position: absolute;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
diff --git a/browser/themes/shared/devtools/dark-theme.css b/browser/themes/shared/devtools/dark-theme.css
new file mode 100644
index 000000000..eb93f5f37
--- /dev/null
+++ b/browser/themes/shared/devtools/dark-theme.css
@@ -0,0 +1,406 @@
+/* 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/. */
+
+/* According to:
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
+ */
+:root {
+  --theme-body-background: #14171a;
+  --theme-sidebar-background: #181d20;
+  --theme-contrast-background: #b28025;
+
+  --theme-tab-toolbar-background: #252c33;
+  --theme-toolbar-background: #343c45;
+  --theme-selection-background: #1d4f73;
+  --theme-selection-color: #f5f7fa;
+  --theme-selection-background-semitransparent: rgba(29, 79, 115, .5);
+  --theme-splitter-color: black;
+  --theme-comment: #5c6773;
+
+  --theme-body-color: #a9bacb;
+  --theme-body-color-alt: #b6babf;
+  --theme-content-color1: #a9bacb;
+  --theme-content-color2: #8fa1b2;
+  --theme-content-color3: #667380;
+
+  --theme-highlight-green: #5c9966;
+  --theme-highlight-blue: #3689b2;
+  --theme-highlight-bluegrey: #5e88b0;
+  --theme-highlight-purple: #6270b2;
+  --theme-highlight-lightorange: #a18650;
+  --theme-highlight-orange: #b26b47;
+  --theme-highlight-red: #bf5656;
+  --theme-highlight-pink: #a673bf;
+}
+
+.theme-body {
+  background: var(--theme-body-background);
+  color: var(--theme-body-color);
+}
+
+.theme-sidebar {
+  background: var(--theme-sidebar-background);
+  color: var(--theme-content-color1);
+}
+
+::-moz-selection {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.theme-bg-darker {
+  background-color: var(--theme-selection-background-semitransparent);
+}
+
+.theme-selected,
+.CodeMirror-hint-active {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.theme-bg-contrast,
+.variable-or-property:not([overridden])[changed] {
+  background: var(--theme-contrast-background);
+}
+
+.theme-link,
+.cm-s-mozilla .cm-link {
+  color: var(--theme-highlight-blue);
+}
+
+/*
+ * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
+ * failures in debug builds.
+ */
+.theme-link:visited,
+.cm-s-mozilla .cm-link:visited,
+.CodeMirror-Tern-type {
+  color: var(--theme-highlight-blue);
+}
+
+
+.theme-comment,
+.cm-s-mozilla .cm-meta,
+.cm-s-mozilla .cm-hr,
+.cm-s-mozilla .cm-comment,
+.variable-or-property .token-undefined,
+.variable-or-property .token-null,
+.CodeMirror-Tern-completion-unknown:before {
+  color: var(--theme-comment);
+}
+
+.theme-gutter {
+  background-color: #0f171f;
+  color: var(--theme-content-color3);
+  border-color: #303b47;
+}
+
+.theme-separator { /* grey */
+  border-color: #303b47;
+}
+
+.theme-fg-color1,
+.cm-s-mozilla .cm-number,
+.variable-or-property .token-number,
+.variable-or-property[return] > .title > .name,
+.variable-or-property[scope] > .title > .name {
+  color: var(--theme-highlight-green);
+}
+
+.CodeMirror-Tern-completion-number:before {
+  background-color: #5c9966;
+}
+
+.theme-fg-color2,
+.cm-s-mozilla .cm-attribute,
+.cm-s-mozilla .cm-variable,
+.cm-s-mozilla .cm-def,
+.cm-s-mozilla .cm-property,
+.cm-s-mozilla .cm-qualifier,
+.variables-view-variable > .title > .name {
+  color: var(--theme-highlight-blue);
+}
+
+.CodeMirror-Tern-completion-object:before {
+  background-color: #3689b2;
+}
+
+.cm-s-mozilla .cm-unused-line {
+  text-decoration: line-through;
+  text-decoration-color: #5f88b0;
+}
+
+.cm-s-mozilla .cm-executed-line {
+  background-color: #133c26;
+}
+
+.theme-fg-color3,
+.cm-s-mozilla .cm-builtin,
+.cm-s-mozilla .cm-tag,
+.cm-s-mozilla .cm-header,
+.cm-s-mozilla .cm-bracket,
+.variables-view-property > .title > .name {
+  color: var(--theme-highlight-pink);
+}
+
+.CodeMirror-Tern-completion-array:before {
+  background-color: var(--theme-highlight-bluegrey);
+}
+
+.theme-fg-color4 {
+  color: var(--theme-highlight-purple);
+}
+
+.theme-fg-color5,
+.cm-s-mozilla .cm-keyword {
+  color: var(--theme-highlight-lightorange);
+}
+
+.theme-fg-color6,
+.cm-s-mozilla .cm-string,
+.cm-s-mozilla .cm-string-2,
+.variable-or-property .token-string,
+.CodeMirror-Tern-farg {
+  color: var(--theme-highlight-orange);
+}
+
+.CodeMirror-Tern-completion-string:before,
+.CodeMirror-Tern-completion-fn:before {
+  background-color: #b26b47;
+}
+
+.theme-fg-color7,
+.cm-s-mozilla .cm-atom,
+.cm-s-mozilla .cm-quote,
+.cm-s-mozilla .cm-error,
+.variable-or-property .token-boolean,
+.variable-or-property .token-domnode,
+.variable-or-property[exception] > .title > .name {
+  color: var(--theme-highlight-red);
+}
+
+.CodeMirror-Tern-completion-bool:before {
+  background-color: #bf5656;
+}
+
+.variable-or-property .token-domnode {
+  font-weight: bold;
+}
+
+.theme-toolbar,
+.devtools-toolbar,
+.devtools-sidebar-tabs tabs,
+.devtools-sidebar-alltabs,
+.CodeMirror-dialog { /* General toolbar styling */
+  color: var(--theme-body-color-alt);
+  background-color: var(--theme-toolbar-background);
+  border-color: hsla(210,8%,5%,.6);
+}
+
+.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
+  color: black;
+}
+
+.ruleview-colorswatch,
+.computedview-colorswatch,
+.ruleview-bezierswatch {
+  box-shadow: 0 0 0 1px #818181;
+}
+
+/* CodeMirror specific styles.
+ * Best effort to match the existing theme, some of the colors
+ * are duplicated here to prevent weirdness in the main theme. */
+
+.CodeMirror { /* Inherit platform specific font sizing and styles */
+  font-family: inherit;
+  font-size: inherit;
+  background: transparent;
+}
+
+.CodeMirror pre,
+.cm-s-mozilla .cm-variable-2,
+.cm-s-mozilla .cm-variable-3,
+.cm-s-mozilla .cm-operator,
+.cm-s-mozilla .cm-special {
+  color: var(--theme-content-color1);
+}
+
+.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
+  border-left: solid 1px #fff;
+}
+
+.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
+  background: rgb(185, 215, 253);
+}
+
+.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
+  background: rgb(176, 176, 176);
+}
+
+.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
+  background: rgba(185, 215, 253, .15);
+}
+
+div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
+  outline: solid 1px rgba(255, 255, 255, .25);
+  color: white;
+}
+
+/* Highlight for a line that contains an error. */
+div.CodeMirror div.error-line {
+  background: rgba(255,0,0,0.2);
+}
+
+/* Highlight for a line that represents a stack frame's location. */
+div.CodeMirror div.debug-line {
+  background: rgba(0,128,255,0.1);
+  box-shadow:
+    0 1px 0 0 rgba(0,128,255,0.4),
+    0 -1px 0 0 rgba(0,128,255,0.4);
+}
+
+/* Generic highlighted text */
+div.CodeMirror span.marked-text {
+  background: rgba(255,255,0,0.2);
+  border: 1px dashed rgba(192,192,0,0.6);
+  -moz-margin-start: -1px;
+  -moz-margin-end: -1px;
+}
+
+/* Highlight for evaluating current statement. */
+div.CodeMirror span.eval-text {
+  background-color: #556;
+}
+
+.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
+  color: var(--theme-content-color3);
+}
+
+.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
+  border-right-color: var(--theme-toolbar-background);
+  background-color: var(--theme-sidebar-background);
+}
+
+.cm-s-markup-view pre {
+  line-height: 1.4em;
+  min-height: 1.4em;
+}
+
+/* Twisty and checkbox controls */
+.theme-twisty, .theme-checkbox {
+  width: 14px;
+  height: 14px;
+  background-repeat: no-repeat;
+  background-image: url("chrome://browser/skin/devtools/controls.png");
+  background-size: 56px 28px;
+}
+
+.theme-twisty {
+  cursor: pointer;
+  background-position: -28px -14px;
+}
+
+.theme-twisty:-moz-focusring {
+  outline-style: none;
+}
+
+.theme-twisty[open] {
+  background-position: -42px -14px;
+}
+
+.theme-twisty[invisible] {
+  visibility: hidden;
+}
+
+.theme-checkbox {
+  display: inline-block;
+  border: 0;
+  padding: 0;
+  outline: none;
+  background-position: -28px 0;
+}
+
+.theme-checkbox[checked] {
+  background-position: -42px 0;
+}
+
+@media (min-resolution: 2dppx) {
+  .theme-twisty, .theme-checkbox {
+    background-image: url("chrome://browser/skin/devtools/controls@2x.png");
+  }
+}
+
+/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
+
+.theme-tooltip-panel .panel-arrowcontent {
+  padding: 5px;
+  background: rgba(19, 28, 38, .9);
+  border-radius: 5px;
+  box-shadow: none;
+  border: 3px solid #434850;
+}
+
+/* Overring panel arrow images to fit with our light and dark themes */
+
+.theme-tooltip-panel .panel-arrow[side="top"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
+  margin-bottom: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark.png");
+  margin-top: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
+  margin-right: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark.png");
+  margin-left: -4px;
+}
+
+@media (min-resolution: 2dppx) {
+  .theme-tooltip-panel .panel-arrow[side="top"],
+  .theme-tooltip-panel .panel-arrow[side="bottom"] {
+    list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-dark@2x.png");
+  }
+
+  .theme-tooltip-panel .panel-arrow[side="left"],
+  .theme-tooltip-panel .panel-arrow[side="right"] {
+    list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-dark@2x.png");
+  }
+}
+
+.theme-tooltip-panel .devtools-tooltip-simple-text {
+  color: white;
+  border-bottom: 1px solid #434850;
+}
+
+.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
+  border-bottom: 0;
+}
+
+.devtools-textinput,
+.devtools-searchinput {
+  background-color: rgba(24, 29, 32, 1);
+  color: rgba(184, 200, 217, 1);
+}
+
+.CodeMirror-Tern-fname {
+  color: #f7f7f7;
+}
+
+.CodeMirror-hints,
+.CodeMirror-Tern-tooltip {
+  box-shadow: 0 0 4px rgba(255, 255, 255, .3);
+  background-color: #0f171f;
+  color: var(--theme-body-color);
+}
+
+
+%include toolbars.inc.css
diff --git a/browser/themes/shared/devtools/debugger.inc.css b/browser/themes/shared/devtools/debugger.inc.css
new file mode 100644
index 000000000..14db353c5
--- /dev/null
+++ b/browser/themes/shared/devtools/debugger.inc.css
@@ -0,0 +1,658 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Sources and breakpoints pane */
+
+#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
+  border-color: transparent;
+}
+
+#sources-pane > tabs {
+  -moz-border-end: 1px solid;
+}
+
+#sources-pane .devtools-toolbar {
+  border: none; /* Remove the devtools-toolbar bottom border. */
+  -moz-border-end: 1px solid;
+}
+
+#sources-pane > tabs,
+#sources-pane .devtools-toolbar {
+  -moz-border-end-color: var(--theme-splitter-color);
+}
+
+/* Sources and breakpoints list */
+
+.dbg-source-item {
+  padding: 2px 0px;
+}
+
+.dbg-breakpoint-line {
+  font-weight: 600;
+}
+
+.dbg-breakpoint-text {
+  -moz-padding-start: 6px;
+  font-style: italic;
+  font-size: 90%;
+}
+
+.dbg-breakpoint-checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+}
+
+/* Sources toolbar */
+
+#sources-toolbar > .devtools-toolbarbutton,
+#sources-controls > .devtools-toolbarbutton {
+  min-width: 32px;
+}
+
+#black-box {
+  list-style-image: url(debugger-blackbox.png);
+}
+
+@media (min-resolution: 2dppx) {
+  #black-box {
+    list-style-image: url(debugger-blackbox@2x.png);
+  }
+}
+
+#pretty-print {
+  list-style-image: url(debugger-prettyprint.png);
+}
+
+@media (min-resolution: 2dppx) {
+  #pretty-print {
+    list-style-image: url(debugger-prettyprint@2x.png);
+  }
+}
+
+#toggle-breakpoints {
+  list-style-image: url(debugger-toggleBreakpoints.png);
+}
+
+@media (min-resolution: 2dppx) {
+  #toggle-breakpoints {
+    list-style-image: url(debugger-toggleBreakpoints@2x.png);
+  }
+}
+
+#sources-toolbar .devtools-toolbarbutton:not([label]) {
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 2dppx) {
+  #sources-toolbar .devtools-toolbarbutton:not([label]) {
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+#sources .black-boxed {
+  color: rgba(128,128,128,0.4);
+}
+
+#sources .selected .black-boxed {
+  color: rgba(255,255,255,0.4);
+}
+
+#sources .black-boxed ~ .dbg-breakpoint {
+  display: none;
+}
+
+/* Debugger unblackbox button */
+
+#black-boxed-message-button > .button-box > .button-icon {
+  width: 16px;
+  height: 16px;
+  background-image: url(debugger-blackbox.png);
+  background-position: 0 0;
+  background-size: 32px 16px;
+  background-repeat: no-repeat;
+  -moz-margin-end: 5px;
+}
+
+@media (min-resolution: 2dppx) {
+  #black-boxed-message-button > .button-box > .button-icon {
+    background-image: url(debugger-blackbox@2x.png);
+  }
+}
+
+/* Black box message and source progress meter */
+
+#black-boxed-message,
+#source-progress-container {
+  /* Prevent the container deck from aquiring the size from this message. */
+  min-width: 1px;
+  min-height: 1px;
+}
+
+#source-progress {
+  min-height: 2em;
+  min-width: 40em;
+}
+
+#black-boxed-message-label,
+#black-boxed-message-button {
+  text-align: center;
+  font-size: 120%;
+}
+
+#black-boxed-message-button {
+  margin-top: 1em;
+  padding: .25em;
+}
+
+/* Breadcrumbs stack frames view */
+
+.dbg-stackframe-details {
+  -moz-padding-start: 4px;
+}
+
+/* Classic stack frames view */
+
+.dbg-classic-stackframe {
+  display: block;
+}
+
+.dbg-classic-stackframe-title {
+  font-weight: 600;
+}
+
+.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
+  float: right;
+}
+
+.dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
+  float: left;
+}
+
+.dbg-classic-stackframe-details-url {
+  max-width: 90%;
+  text-align: end;
+}
+
+.dbg-classic-stackframe-details-url {
+  color: var(--theme-content-color1);
+}
+
+.dbg-classic-stackframe-details-sep {
+  color: var(--theme-body-color-alt)
+}
+
+.dbg-classic-stackframe-details-line {
+  color: var(--theme-highlight-bluegrey);
+}
+
+#callstack-list .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Tracer */
+
+#trace {
+  list-style-image: url(tracer-icon.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#trace[checked] {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 2dppx) {
+  #trace {
+    list-style-image: url(tracer-icon@2x.png);
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #trace[checked] {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+#clear-tracer {
+  /* Make this button as narrow as the text inside it. */
+  min-width: 1px;
+}
+
+.trace-name {
+  -moz-padding-start: 4px;
+}
+
+/* Tracer dark theme */
+
+.theme-dark .trace-item {
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .trace-item.black-boxed {
+  color: rgba(128,128,128,0.4);
+}
+
+.theme-dark .trace-item.selected-matching {
+  background-color: rgba(29,79,115,.4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-dark .selected > .trace-item {
+  background-color: rgba(29,79,115,.6); /* Select highlight blue at 60% alpha */
+}
+
+.trace-call {
+  color: var(--theme-highlight-blue);
+}
+
+.trace-return,
+.trace-yield {
+  color: var(--theme-highlight-green);
+}
+
+.trace-throw {
+  color: var(--theme-highlight-red);
+}
+
+.trace-param {
+  color: var(--theme-content-color1);
+}
+
+.theme-dark .trace-syntax {
+  color: var(--theme-content-color2);
+}
+
+/* Tracer light theme */
+.theme-light .trace-item {
+  color: var(--theme-content-color1);
+}
+
+.theme-light .trace-item.black-boxed {
+  color: rgba(128,128,128,0.4);
+}
+
+.theme-light .trace-item.selected-matching {
+  background-color: rgba(76,158,217,.4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-light .selected > .trace-item {
+  background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */
+}
+
+#tracer-traces .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Watch expressions view */
+
+#expressions {
+  min-height: 10px;
+  max-height: 125px;
+}
+
+.dbg-expression {
+  height: 20px;
+}
+
+.dbg-expression-arrow {
+  background-image: url(commandline-icon.png);
+  background-position: -16px 0;
+  background-repeat: no-repeat;
+  background-size: 32px 16px;
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+}
+
+@media (min-resolution: 2dppx) {
+  .dbg-expression-arrow {
+    background-image: url(commandline-icon@2x.png);
+  }
+}
+
+.dbg-expression-input {
+  color: inherit;
+}
+
+.dbg-expression-button {
+  -moz-appearance: none;
+  border: none;
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.dbg-expression-button {
+  color: var(--theme-highlight-blue);
+}
+
+/* Event listeners view */
+
+.dbg-event-listener-type {
+  font-weight: 600;
+}
+
+.dbg-event-listener-location {
+  color: var(--theme-content-color1);
+}
+
+.dbg-event-listener-separator {
+  color: var(--theme-body-color-alt);
+}
+
+.dbg-event-listener-targets {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.theme-dark #event-listeners .selected {
+  /* Selected items shouldn't be displayed differently. */
+  background: none;
+  color: #fff;
+}
+
+.theme-light #event-listeners .selected {
+  /* Selected items shouldn't be displayed differently. */
+  background: none;
+  color: #000;
+}
+
+/* Searchbox and the search operations help panel */
+
+#searchbox {
+  min-width: 220px;
+  -moz-margin-start: 1px;
+}
+
+#filter-label {
+  -moz-margin-start: 2px;
+}
+
+#searchbox-panel-operators {
+  margin-top: 5px;
+  margin-bottom: 8px;
+  -moz-margin-start: 2px;
+}
+
+.searchbox-panel-operator-button {
+  min-width: 26px;
+  margin-top: 0;
+  margin-bottom: 0;
+  -moz-margin-start: 2px;
+  -moz-margin-end: 6px;
+  text-align: center;
+}
+
+.searchbox-panel-operator-label {
+  padding-bottom: 2px;
+}
+
+/* Searchbox results panel */
+
+#results-panel {
+  border: none;
+}
+
+.results-panel-item {
+  padding: 6px 8px;
+  border-top: 1px solid rgba(128,128,128,0.2);
+}
+
+.results-panel-item:first-of-type {
+  border-top: none;
+}
+
+.results-panel-item-label {
+  font-weight: 600;
+}
+
+.results-panel-item-label-before {
+  -moz-padding-end: 6px;
+}
+
+.theme-dark .results-panel-item-label {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .results-panel-item-label {
+  color: var(--theme-body-color);
+}
+
+.results-panel-item-label-before {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.results-panel-item-label-below {
+  color: var(--theme-content-color3);
+}
+
+#results-panel .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Sources search view */
+
+#globalsearch {
+  min-height: 10px;
+  max-height: 50vh;
+}
+
+.dbg-results-header {
+  -moz-padding-start: 6px;
+}
+
+.dbg-results-header-location {
+  font-weight: 600;
+}
+
+.dbg-results-header-match-count {
+  -moz-padding-start: 6px;
+}
+
+.dbg-results-line-number {
+  min-width: 3em;
+  -moz-border-end: 1px solid rgba(128,128,128,0.2);
+  -moz-padding-end: 4px;
+  text-align: end;
+}
+
+.dbg-results-line-contents {
+  -moz-padding-start: 4px;
+}
+
+.dbg-results-line-contents-string[match=true] {
+  background-color: rgba(255,255,0,0.2);
+  border: 1px solid rgba(128,128,128,0.7);
+  border-radius: 4px;
+  margin-top: -1px !important;
+  margin-bottom: -1px !important;
+  cursor: pointer;
+}
+
+.dbg-results-line-contents-string[match=true][focusing] {
+  transition: transform 0.3s ease-in-out;
+}
+
+.dbg-results-line-contents-string[match=true][focused] {
+  transition-duration: 0.1s;
+  transform: scale(1.75, 1.75);
+}
+
+.dbg-source-results:not(.selected):hover {
+  background-color: var(--theme-sidebar-background);
+}
+
+.dbg-results-header {
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.theme-dark .dbg-results-header {
+  color: var(--theme-content-color1);
+}
+
+.theme-light .dbg-results-header {
+  color: var(--theme-content-color3);
+}
+
+.theme-dark .dbg-search-result:hover {
+  background-color: rgba(29,79,115,.2); /* Select highlight blue at 40% alpha */
+}
+
+.theme-light .dbg-search-result:hover {
+  background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */
+}
+
+.dbg-results-header-match-count {
+  color: var(--theme-content-color3);
+}
+
+.dbg-results-line-number {
+  background-color: var(--theme-tab-toolbar-background);
+  color: var(--theme-body-color-alt);
+}
+
+.dbg-results-line-contents-string {
+  color: var(--theme-body-color-alt);
+}
+
+.theme-dark .dbg-results-line-contents-string[match=true] {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .dbg-results-line-contents-string[match=true] {
+  color: var(--theme-body-color);
+}
+
+/* Toolbar controls */
+
+#debugger-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
+#sources-toolbar .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#resume {
+  list-style-image: url(debugger-pause.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#resume[checked] {
+  list-style-image: url(debugger-play.png);
+}
+
+@media (min-resolution: 2dppx) {
+  #resume {
+    list-style-image: url(debugger-pause@2x.png);
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #resume[checked] {
+    list-style-image: url(debugger-play@2x.png);
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+#resume ~ toolbarbutton {
+  transition: opacity 0.15s ease-in-out;
+}
+
+#resume:not([checked]) ~ toolbarbutton {
+  opacity: 0.5;
+}
+
+#step-over {
+  list-style-image: url(debugger-step-over.png);
+}
+
+#step-in {
+  list-style-image: url(debugger-step-in.png);
+}
+
+#step-out {
+  list-style-image: url(debugger-step-out.png);
+}
+
+@media (min-resolution: 2dppx) {
+  #step-over {
+    list-style-image: url(debugger-step-over@2x.png);
+  }
+
+  #step-in {
+    list-style-image: url(debugger-step-in@2x.png);
+  }
+
+  #step-out {
+    list-style-image: url(debugger-step-out@2x.png);
+  }
+}
+
+#instruments-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border: none;
+  list-style-image: url(debugger-collapse.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#instruments-pane-toggle[pane-collapsed] {
+  list-style-image: url(debugger-expand.png);
+}
+
+#instruments-pane-toggle:hover {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 2dppx) {
+  #instruments-pane-toggle {
+    list-style-image: url(debugger-collapse@2x.png);
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #instruments-pane-toggle[pane-collapsed] {
+    list-style-image: url(debugger-expand@2x.png);
+  }
+
+  #instruments-pane-toggle:hover {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+/* Horizontal vs. vertical layout */
+
+#vertical-layout-panes-container {
+  min-height: 35vh;
+  max-height: 80vh;
+}
+
+#body[layout=vertical] #sources-pane > tabs {
+  -moz-border-end: none;
+}
+
+#body[layout=vertical] #instruments-pane {
+  margin: 0 !important;
+  /* To prevent all the margin hacks to hide the sidebar. */
+}
+
+#body[layout=vertical] .side-menu-widget-container,
+#body[layout=vertical] .side-menu-widget-empty-text {
+  box-shadow: none !important;
+}
+
+#body[layout=vertical] .side-menu-widget-item-arrow {
+  background-image: none !important;
+}
+
+#body[layout=vertical] .side-menu-widget-group,
+#body[layout=vertical] .side-menu-widget-item {
+  -moz-margin-end: 0;
+}
diff --git a/browser/themes/shared/devtools/eyedropper.css b/browser/themes/shared/devtools/eyedropper.css
new file mode 100644
index 000000000..cf22caf73
--- /dev/null
+++ b/browser/themes/shared/devtools/eyedropper.css
@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#canvas {
+  image-rendering: -moz-crisp-edges;
+  cursor: none;
+  border: 3px solid #E0E0E0;
+  border-radius: 50%;
+}
+
+#canvas-overflow {
+  overflow: hidden;
+  width: 96px;
+  height: 96px;
+}
+
+#color-preview {
+  width: 16px;
+  height: 16px;
+  box-shadow: 0px 0px 0px black;
+  border: solid 1px #fff;
+  margin: 3px;
+}
+
+#color-value-box {
+  background-color: #E0E0E0;
+  border-radius: 1px;
+  width: 150px;
+}
+
+#color-value {
+  padding: 0.3em;
+  text-shadow: 1px 1px 1px #fff;
+}
+
+#color-value.highlight {
+  font-family: inherit;
+}
+
+window {
+  /* inexplicably, otherwise background shows up on Linux */
+  border: 1px solid transparent;
+  background-color: transparent;
+}
diff --git a/browser/themes/shared/devtools/filters.svg b/browser/themes/shared/devtools/filters.svg
new file mode 100644
index 000000000..916028bec
--- /dev/null
+++ b/browser/themes/shared/devtools/filters.svg
@@ -0,0 +1,27 @@
+<svg height="0" xmlns="http://www.w3.org/2000/svg">
+<filter id="invert" x="0%" y="0%" width="100%" height="100%" >
+  <feComponentTransfer>
+    <feFuncR type="table" tableValues=".1 0"/>
+    <feFuncG type="table" tableValues=".1 0"/>
+    <feFuncB type="table" tableValues=".1 0"/>
+  </feComponentTransfer>
+</filter>
+<filter id="invert-white" x="0%" y="0%" width="100%" height="100%" >
+  <feComponentTransfer>
+    <feFuncR type="table" tableValues=".6 0"/>
+    <feFuncG type="table" tableValues=".6 0"/>
+    <feFuncB type="table" tableValues=".6 0"/>
+  </feComponentTransfer>
+ </filter>
+
+  <!-- Web Audio Gradients -->
+  <linearGradient id="bypass-light" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat">
+    <stop offset="0%" stop-color="#f0f1f2"/> <!-- theme-toolbar-background -->
+    <stop offset="50%" stop-color="#fff"/>
+  </linearGradient>
+
+  <linearGradient id="bypass-dark" x1="6%" y1="8%" x2="12%" y2="12%" spreadMethod="repeat">
+    <stop offset="0%" stop-color="#343c45"/> <!-- theme-toolbar-background -->
+    <stop offset="50%" stop-color="transparent"/>
+  </linearGradient>
+</svg>
diff --git a/browser/themes/windows/devtools/font-inspector.css b/browser/themes/shared/devtools/font-inspector.css
index dff3abb30..30424dfe1 100644
--- a/browser/themes/windows/devtools/font-inspector.css
+++ b/browser/themes/shared/devtools/font-inspector.css
@@ -8,7 +8,7 @@ body {
 }
 
 #all-fonts {
-  padding: 0 5px;
+  padding: 0;
   margin: 0;
 }
 
@@ -23,8 +23,7 @@ body {
 }
 
 .font {
-  padding: 10px 5px;
-  font-size: 0;
+  padding: 10px 10px;
 }
 
 .theme-dark .font {
@@ -44,14 +43,12 @@ body {
 }
 
 .font-preview {
+  margin-left: -4px;
   height: 60px;
-  width: 100%;
-  border: 0;
   display: block;
 }
 
 .font-info {
-  font-size: 1rem;
   display: block;
 }
 
diff --git a/browser/themes/shared/devtools/highlighter.inc.css b/browser/themes/shared/devtools/highlighter.inc.css
deleted file mode 100644
index 3d5ae51d4..000000000
--- a/browser/themes/shared/devtools/highlighter.inc.css
+++ /dev/null
@@ -1,131 +0,0 @@
-%if 0
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-%endif
-
-/* Highlighter */
-
-.highlighter-outline {
-  box-shadow: 0 0 0 1px black;
-  outline: 1px dashed white;
-  outline-offset: -1px;
-}
-
-.highlighter-outline[locked]  {
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
-  outline-color: rgba(255,255,255,0.7);
-}
-
-/* Highlighter - Node Infobar */
-
-.highlighter-nodeinfobar {
-  color: hsl(200, 100%, 65%);
-  border: 1px solid hsla(210, 19%, 63%, .5);
-  border-radius: 3px;
-  background: linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box;
-}
-
-/* Highlighter - Node Infobar - text */
-
-.highlighter-nodeinfobar-text {
-  /* 100% - size of the buttons and margins */
-  max-width: calc(100% - 2 * (26px + 6px));
-  padding-bottom: 1px;
-}
-
-html|*.highlighter-nodeinfobar-tagname {
-  color: white;
-}
-
-html|*.highlighter-nodeinfobar-id {
-  color: hsl(90, 79%, 52%);
-}
-
-html|*.highlighter-nodeinfobar-pseudo-classes {
-  color: hsl(20, 100%, 70%);
-}
-
-/* Highlighter - Node Infobar - buttons */
-
-.highlighter-nodeinfobar-button {
-  -moz-appearance: none;
-  border: 0 solid hsla(210,8%,5%,.45);
-  padding: 0;
-  width: 26px;
-  min-height: 26px;
-%ifndef XP_LINUX
-  background-color: transparent;
-%endif
-}
-
-.highlighter-nodeinfobar-inspectbutton {
-  -moz-border-end-width: 1px;
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
-  -moz-margin-end: 6px;
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-.highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
-}
-
-.highlighter-nodeinfobar-inspectbutton:active:hover,
-.highlighter-nodeinfobar-container:not([locked]) >  .highlighter-nodeinfobar >  .highlighter-nodeinfobar-inspectbutton {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-.highlighter-nodeinfobar-menu {
-  -moz-border-start-width: 1px;
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
-  -moz-margin-start: 6px;
-}
-
-.highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
-}
-
-.highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
-  -moz-appearance: none !important;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  -moz-box-align: center;
-  -moz-margin-start: -1px;
-}
-
-/* Highlighter - Node Infobar - box & arrow */
-
-.highlighter-nodeinfobar-arrow {
-  width: 14px;
-  height: 14px;
-  -moz-margin-start: calc(50% - 7px);
-  transform: rotate(-45deg);
-  border: 1px solid transparent;
-  background-clip: padding-box;
-  background-repeat: no-repeat;
-}
-
-.highlighter-nodeinfobar-arrow-top {
-  margin-bottom: -8px;
-  margin-top: 8px;
-  border-right-color: hsla(210, 19%, 63%, .5);
-  border-top-color: hsla(210, 19%, 63%, .5);
-  background-image: linear-gradient(to top right, transparent 50%, hsl(209, 18%, 30%) 50%);
-}
-
-.highlighter-nodeinfobar-arrow-bottom {
-  margin-top: -8px;
-  margin-bottom: 8px;
-  border-left-color: hsla(210, 19%, 63%, .5);
-  border-bottom-color: hsla(210, 19%, 63%, .5);
-  background-image: linear-gradient(to bottom left, transparent 50%, hsl(210, 24%, 16%) 50%);
-}
-
-.highlighter-nodeinfobar-container[position="top"] > .highlighter-nodeinfobar,
-.highlighter-nodeinfobar-container[position="overlap"] > .highlighter-nodeinfobar {
-  box-shadow: 0 1px 0 hsla(0, 0%, 100%, .1) inset;
-}
-
-.highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
-  margin: 7px 0;
-}
diff --git a/browser/themes/linux/devtools/alerticon-warning.png b/browser/themes/shared/devtools/images/alerticon-warning.png
index 5c5d0aec5..5c5d0aec5 100644
--- a/browser/themes/linux/devtools/alerticon-warning.png
+++ b/browser/themes/shared/devtools/images/alerticon-warning.png
diff --git a/browser/themes/shared/devtools/images/alerticon-warning@2x.png b/browser/themes/shared/devtools/images/alerticon-warning@2x.png
new file mode 100644
index 000000000..dc3a3b108
--- /dev/null
+++ b/browser/themes/shared/devtools/images/alerticon-warning@2x.png
diff --git a/browser/themes/shared/devtools/images/arrow-e.png b/browser/themes/shared/devtools/images/arrow-e.png
new file mode 100644
index 000000000..cfa950a1f
--- /dev/null
+++ b/browser/themes/shared/devtools/images/arrow-e.png
diff --git a/browser/themes/shared/devtools/images/arrow-e@2x.png b/browser/themes/shared/devtools/images/arrow-e@2x.png
new file mode 100644
index 000000000..c628ca0a5
--- /dev/null
+++ b/browser/themes/shared/devtools/images/arrow-e@2x.png
diff --git a/browser/themes/shared/devtools/images/breadcrumbs-divider@2x.png b/browser/themes/shared/devtools/images/breadcrumbs-divider@2x.png
new file mode 100644
index 000000000..9ce5dd74e
--- /dev/null
+++ b/browser/themes/shared/devtools/images/breadcrumbs-divider@2x.png
diff --git a/browser/themes/shared/devtools/images/breadcrumbs-scrollbutton.png b/browser/themes/shared/devtools/images/breadcrumbs-scrollbutton.png
new file mode 100644
index 000000000..5f28c8b22
--- /dev/null
+++ b/browser/themes/shared/devtools/images/breadcrumbs-scrollbutton.png
diff --git a/browser/themes/shared/devtools/images/breadcrumbs-scrollbutton@2x.png b/browser/themes/shared/devtools/images/breadcrumbs-scrollbutton@2x.png
new file mode 100644
index 000000000..22c3c8667
--- /dev/null
+++ b/browser/themes/shared/devtools/images/breadcrumbs-scrollbutton@2x.png
diff --git a/browser/themes/linux/devtools/close.png b/browser/themes/shared/devtools/images/close.png
index b53941253..b53941253 100644
--- a/browser/themes/linux/devtools/close.png
+++ b/browser/themes/shared/devtools/images/close.png
diff --git a/browser/themes/shared/devtools/images/close@2x.png b/browser/themes/shared/devtools/images/close@2x.png
new file mode 100644
index 000000000..79ef6ceca
--- /dev/null
+++ b/browser/themes/shared/devtools/images/close@2x.png
diff --git a/browser/themes/shared/devtools/images/command-console.png b/browser/themes/shared/devtools/images/command-console.png
new file mode 100644
index 000000000..5c3740ef4
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-console.png
diff --git a/browser/themes/shared/devtools/images/command-console@2x.png b/browser/themes/shared/devtools/images/command-console@2x.png
new file mode 100644
index 000000000..00bdc353d
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-console@2x.png
diff --git a/browser/themes/shared/devtools/images/command-eyedropper.png b/browser/themes/shared/devtools/images/command-eyedropper.png
new file mode 100644
index 000000000..a96b8eb80
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-eyedropper.png
diff --git a/browser/themes/shared/devtools/images/command-eyedropper@2x.png b/browser/themes/shared/devtools/images/command-eyedropper@2x.png
new file mode 100644
index 000000000..edfe4c175
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-eyedropper@2x.png
diff --git a/browser/themes/shared/devtools/images/command-frames.png b/browser/themes/shared/devtools/images/command-frames.png
new file mode 100644
index 000000000..5c37ccb6b
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-frames.png
diff --git a/browser/themes/shared/devtools/images/command-frames@2x.png b/browser/themes/shared/devtools/images/command-frames@2x.png
new file mode 100644
index 000000000..84b37d330
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-frames@2x.png
diff --git a/browser/themes/shared/devtools/images/command-paintflashing.png b/browser/themes/shared/devtools/images/command-paintflashing.png
new file mode 100644
index 000000000..244fb3cb9
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-paintflashing.png
diff --git a/browser/themes/shared/devtools/images/command-paintflashing@2x.png b/browser/themes/shared/devtools/images/command-paintflashing@2x.png
new file mode 100644
index 000000000..77435bf3b
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-paintflashing@2x.png
diff --git a/browser/themes/shared/devtools/images/command-pick.png b/browser/themes/shared/devtools/images/command-pick.png
new file mode 100644
index 000000000..37ce97cab
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-pick.png
diff --git a/browser/themes/shared/devtools/images/command-pick@2x.png b/browser/themes/shared/devtools/images/command-pick@2x.png
new file mode 100644
index 000000000..88d739e6c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-pick@2x.png
diff --git a/browser/themes/shared/devtools/images/command-responsivemode.png b/browser/themes/shared/devtools/images/command-responsivemode.png
new file mode 100644
index 000000000..2cad91565
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-responsivemode.png
diff --git a/browser/themes/shared/devtools/images/command-responsivemode@2x.png b/browser/themes/shared/devtools/images/command-responsivemode@2x.png
new file mode 100644
index 000000000..6fce40421
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-responsivemode@2x.png
diff --git a/browser/themes/shared/devtools/images/command-scratchpad.png b/browser/themes/shared/devtools/images/command-scratchpad.png
new file mode 100644
index 000000000..f9470b4a0
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-scratchpad.png
diff --git a/browser/themes/shared/devtools/images/command-scratchpad@2x.png b/browser/themes/shared/devtools/images/command-scratchpad@2x.png
new file mode 100644
index 000000000..ea5630ffe
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-scratchpad@2x.png
diff --git a/browser/themes/shared/devtools/images/command-screenshot.png b/browser/themes/shared/devtools/images/command-screenshot.png
new file mode 100644
index 000000000..f6da8e949
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-screenshot.png
diff --git a/browser/themes/shared/devtools/images/command-screenshot@2x.png b/browser/themes/shared/devtools/images/command-screenshot@2x.png
new file mode 100644
index 000000000..b7cdced75
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-screenshot@2x.png
diff --git a/browser/themes/shared/devtools/images/command-tilt.png b/browser/themes/shared/devtools/images/command-tilt.png
new file mode 100644
index 000000000..6909b0aa0
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-tilt.png
diff --git a/browser/themes/shared/devtools/images/command-tilt@2x.png b/browser/themes/shared/devtools/images/command-tilt@2x.png
new file mode 100644
index 000000000..2c35d199e
--- /dev/null
+++ b/browser/themes/shared/devtools/images/command-tilt@2x.png
diff --git a/browser/themes/shared/devtools/images/commandline-icon.png b/browser/themes/shared/devtools/images/commandline-icon.png
new file mode 100644
index 000000000..e51f67f13
--- /dev/null
+++ b/browser/themes/shared/devtools/images/commandline-icon.png
diff --git a/browser/themes/shared/devtools/images/commandline-icon@2x.png b/browser/themes/shared/devtools/images/commandline-icon@2x.png
new file mode 100644
index 000000000..407fdae8c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/commandline-icon@2x.png
diff --git a/browser/themes/linux/devtools/commandline.png b/browser/themes/shared/devtools/images/commandline.png
index 6726f2820..6726f2820 100644
--- a/browser/themes/linux/devtools/commandline.png
+++ b/browser/themes/shared/devtools/images/commandline.png
diff --git a/browser/themes/shared/devtools/images/controls.png b/browser/themes/shared/devtools/images/controls.png
new file mode 100644
index 000000000..569c266e4
--- /dev/null
+++ b/browser/themes/shared/devtools/images/controls.png
diff --git a/browser/themes/shared/devtools/images/controls@2x.png b/browser/themes/shared/devtools/images/controls@2x.png
new file mode 100644
index 000000000..fb062516d
--- /dev/null
+++ b/browser/themes/shared/devtools/images/controls@2x.png
diff --git a/browser/themes/shared/devtools/images/cubic-bezier-swatch.png b/browser/themes/shared/devtools/images/cubic-bezier-swatch.png
new file mode 100644
index 000000000..2dcb58a2a
--- /dev/null
+++ b/browser/themes/shared/devtools/images/cubic-bezier-swatch.png
diff --git a/browser/themes/shared/devtools/images/cubic-bezier-swatch@2x.png b/browser/themes/shared/devtools/images/cubic-bezier-swatch@2x.png
new file mode 100644
index 000000000..64dbef89b
--- /dev/null
+++ b/browser/themes/shared/devtools/images/cubic-bezier-swatch@2x.png
diff --git a/browser/themes/shared/devtools/images/debugger-blackbox.png b/browser/themes/shared/devtools/images/debugger-blackbox.png
new file mode 100644
index 000000000..c64f4bb92
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-blackbox.png
diff --git a/browser/themes/shared/devtools/images/debugger-blackbox@2x.png b/browser/themes/shared/devtools/images/debugger-blackbox@2x.png
new file mode 100644
index 000000000..2dd33d2fa
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-blackbox@2x.png
diff --git a/browser/themes/shared/devtools/images/debugger-collapse.png b/browser/themes/shared/devtools/images/debugger-collapse.png
new file mode 100644
index 000000000..9573fc72d
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-collapse.png
diff --git a/browser/themes/shared/devtools/images/debugger-collapse@2x.png b/browser/themes/shared/devtools/images/debugger-collapse@2x.png
new file mode 100644
index 000000000..12f7223bc
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-collapse@2x.png
diff --git a/browser/themes/shared/devtools/images/debugger-expand.png b/browser/themes/shared/devtools/images/debugger-expand.png
new file mode 100644
index 000000000..f31799726
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-expand.png
diff --git a/browser/themes/shared/devtools/images/debugger-expand@2x.png b/browser/themes/shared/devtools/images/debugger-expand@2x.png
new file mode 100644
index 000000000..091601f5c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-expand@2x.png
diff --git a/browser/themes/shared/devtools/images/debugger-pause.png b/browser/themes/shared/devtools/images/debugger-pause.png
new file mode 100644
index 000000000..8288bdfc3
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-pause.png
diff --git a/browser/themes/shared/devtools/images/debugger-pause@2x.png b/browser/themes/shared/devtools/images/debugger-pause@2x.png
new file mode 100644
index 000000000..53ed141a2
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-pause@2x.png
diff --git a/browser/themes/shared/devtools/images/debugger-play.png b/browser/themes/shared/devtools/images/debugger-play.png
new file mode 100644
index 000000000..9189a0a20
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-play.png
diff --git a/browser/themes/shared/devtools/images/debugger-play@2x.png b/browser/themes/shared/devtools/images/debugger-play@2x.png
new file mode 100644
index 000000000..5fe68e1d1
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-play@2x.png
diff --git a/browser/themes/shared/devtools/images/debugger-prettyprint.png b/browser/themes/shared/devtools/images/debugger-prettyprint.png
new file mode 100644
index 000000000..fb59dcc33
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-prettyprint.png
diff --git a/browser/themes/shared/devtools/images/debugger-prettyprint@2x.png b/browser/themes/shared/devtools/images/debugger-prettyprint@2x.png
new file mode 100644
index 000000000..e3791bfa1
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-prettyprint@2x.png
diff --git a/browser/themes/shared/devtools/images/debugger-step-in.png b/browser/themes/shared/devtools/images/debugger-step-in.png
new file mode 100644
index 000000000..b16b70602
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-step-in.png
diff --git a/browser/themes/shared/devtools/images/debugger-step-in@2x.png b/browser/themes/shared/devtools/images/debugger-step-in@2x.png
new file mode 100644
index 000000000..c0b45008e
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-step-in@2x.png
diff --git a/browser/themes/shared/devtools/images/debugger-step-out.png b/browser/themes/shared/devtools/images/debugger-step-out.png
new file mode 100644
index 000000000..859c727cd
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-step-out.png
diff --git a/browser/themes/shared/devtools/images/debugger-step-out@2x.png b/browser/themes/shared/devtools/images/debugger-step-out@2x.png
new file mode 100644
index 000000000..1c1967935
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-step-out@2x.png
diff --git a/browser/themes/shared/devtools/images/debugger-step-over.png b/browser/themes/shared/devtools/images/debugger-step-over.png
new file mode 100644
index 000000000..ec28fc05e
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-step-over.png
diff --git a/browser/themes/shared/devtools/images/debugger-step-over@2x.png b/browser/themes/shared/devtools/images/debugger-step-over@2x.png
new file mode 100644
index 000000000..452f0d459
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-step-over@2x.png
diff --git a/browser/themes/shared/devtools/images/debugger-toggleBreakpoints.png b/browser/themes/shared/devtools/images/debugger-toggleBreakpoints.png
new file mode 100644
index 000000000..c4b7dcbfe
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-toggleBreakpoints.png
diff --git a/browser/themes/shared/devtools/images/debugger-toggleBreakpoints@2x.png b/browser/themes/shared/devtools/images/debugger-toggleBreakpoints@2x.png
new file mode 100644
index 000000000..b8bbadd17
--- /dev/null
+++ b/browser/themes/shared/devtools/images/debugger-toggleBreakpoints@2x.png
diff --git a/browser/themes/shared/devtools/images/dock-bottom.png b/browser/themes/shared/devtools/images/dock-bottom.png
new file mode 100644
index 000000000..b9fe45b68
--- /dev/null
+++ b/browser/themes/shared/devtools/images/dock-bottom.png
diff --git a/browser/themes/shared/devtools/images/dock-bottom@2x.png b/browser/themes/shared/devtools/images/dock-bottom@2x.png
new file mode 100644
index 000000000..d5df16fea
--- /dev/null
+++ b/browser/themes/shared/devtools/images/dock-bottom@2x.png
diff --git a/browser/themes/shared/devtools/images/dock-side.png b/browser/themes/shared/devtools/images/dock-side.png
new file mode 100644
index 000000000..61d9e6046
--- /dev/null
+++ b/browser/themes/shared/devtools/images/dock-side.png
diff --git a/browser/themes/shared/devtools/images/dock-side@2x.png b/browser/themes/shared/devtools/images/dock-side@2x.png
new file mode 100644
index 000000000..17de7f1c5
--- /dev/null
+++ b/browser/themes/shared/devtools/images/dock-side@2x.png
diff --git a/browser/themes/shared/devtools/images/dropmarker.svg b/browser/themes/shared/devtools/images/dropmarker.svg
new file mode 100644
index 000000000..09b65c78b
--- /dev/null
+++ b/browser/themes/shared/devtools/images/dropmarker.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="4" viewBox="0 0 8 4" enable-background="new 0 0 8 4">
+  <polygon points="0,0 4,4 8,0" fill="#B6BABF" />
+</svg>
+\ No newline at end of file
diff --git a/browser/themes/shared/devtools/images/editor-breakpoint.png b/browser/themes/shared/devtools/images/editor-breakpoint.png
new file mode 100644
index 000000000..401f26b3f
--- /dev/null
+++ b/browser/themes/shared/devtools/images/editor-breakpoint.png
diff --git a/browser/themes/shared/devtools/images/editor-breakpoint@2x.png b/browser/themes/shared/devtools/images/editor-breakpoint@2x.png
new file mode 100644
index 000000000..7253aeee2
--- /dev/null
+++ b/browser/themes/shared/devtools/images/editor-breakpoint@2x.png
diff --git a/browser/themes/shared/devtools/images/editor-debug-location.png b/browser/themes/shared/devtools/images/editor-debug-location.png
new file mode 100644
index 000000000..d590573a8
--- /dev/null
+++ b/browser/themes/shared/devtools/images/editor-debug-location.png
diff --git a/browser/themes/shared/devtools/images/editor-debug-location@2x.png b/browser/themes/shared/devtools/images/editor-debug-location@2x.png
new file mode 100644
index 000000000..b1dd7ee0b
--- /dev/null
+++ b/browser/themes/shared/devtools/images/editor-debug-location@2x.png
diff --git a/browser/themes/linux/devtools/itemArrow-ltr.png b/browser/themes/shared/devtools/images/editor-error.png
index 6cc3e984b..39ef81e20 100644
--- a/browser/themes/linux/devtools/itemArrow-ltr.png
+++ b/browser/themes/shared/devtools/images/editor-error.png
diff --git a/browser/themes/shared/devtools/images/filetypes/dir-close.svg b/browser/themes/shared/devtools/images/filetypes/dir-close.svg
new file mode 100644
index 000000000..e8ff440b9
--- /dev/null
+++ b/browser/themes/shared/devtools/images/filetypes/dir-close.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" width="16" height="16">
+  <path d="M 0.00,160.00 L 512.00,160.00 L 480.00,480.00 L 32.00,480.00 L 0.00,160.00 Z M 464.00,96.00 L 480.00,128.00 L 32.00,128.00 L 64.00,64.00 L 240.00,64.00 L 256.00,96.00 L 464.00,96.00 Z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/filetypes/dir-open.svg b/browser/themes/shared/devtools/images/filetypes/dir-open.svg
new file mode 100644
index 000000000..fd8209d62
--- /dev/null
+++ b/browser/themes/shared/devtools/images/filetypes/dir-open.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" width="16" height="16">
+  <path d="M 416.00,480.00L 512.00,224.00L 96.00,224.00L0.00,480.00 zM 64.00,192.00 L 0.00,480.00 L 0.00,64.00 L 144.00,64.00 L 208.00,128.00 L 416.00,128.00 L 416.00,192.00 Z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/filetypes/globe.svg b/browser/themes/shared/devtools/images/filetypes/globe.svg
new file mode 100644
index 000000000..809e09807
--- /dev/null
+++ b/browser/themes/shared/devtools/images/filetypes/globe.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="20" viewBox="0 0 878 1024">
+	<path d="M438.857 73.143q119.429 0 220.286 58.857t159.714 159.714 58.857 220.286-58.857 220.286-159.714 159.714-220.286 58.857-220.286-58.857-159.714-159.714-58.857-220.286 58.857-220.286 159.714-159.714 220.286-58.857zM595.429 370.857q-1.143 0.571-5.429 5.429t-7.714 5.429q1.143 0 2.571-2.857t2.857-6.286 2-4q3.429-4 12.571-8.571 8-3.429 29.714-6.857 19.429-4.571 29.143 6.286-1.143-1.143 5.429-7.429t8.286-6.857q1.714-1.143 8.571-2.571t8.571-4.286l1.143-12.571q-6.857 0.571-10-4t-3.714-12q0 1.143-3.429 4.571 0-4-2.571-4.571t-6.571 0.571-5.143 0.571q-5.714-1.714-8.571-4.286t-4.571-9.429-2.286-8.571q-1.143-2.857-5.429-6t-5.429-6q-0.571-1.143-1.429-3.143t-1.714-3.714-2.286-3.143-3.143-1.429-4 2.857-4.286 5.714-2.571 2.857q-1.714-1.143-3.429-0.857t-2.571 0.571-2.571 1.714-2.857 2q-1.714 1.143-4.857 1.714t-4.857 1.143q8.571-2.857-0.571-6.286-5.714-2.286-9.143-1.714 5.143-2.286 4.286-6.857t-4.857-8h2.857q-0.571-2.286-4.857-4.857t-10-4.857-7.429-3.429q-4.571-2.857-19.429-5.429t-18.857-0.286q-2.857 3.429-2.571 6t2.286 8 2 7.143q0.571 3.429-3.143 7.429t-3.714 6.857q0 4 8 8.857t5.714 12.286q-1.714 4.571-9.143 9.143t-9.143 6.857q-2.857 4.571-0.857 10.571t6 9.429q1.143 1.143 0.857 2.286t-2 2.571-3.143 2.286-3.714 2l-1.714 1.143q-6.286 2.857-11.714-3.429t-7.714-14.857q-4-14.286-9.143-17.143-13.143-4.571-16.571 0.571-2.857-7.429-23.429-14.857-14.286-5.143-33.143-2.286 3.429-0.571 0-8.571-4-8.571-10.857-6.857 1.714-3.429 2.286-10t0.571-7.714q1.714-7.429 6.857-13.143 0.571-0.571 4-4.857t5.429-7.714 0.286-3.429q20 2.286 28.571-6.286 2.857-2.857 6.571-9.714t6-9.714q5.143-3.429 8-3.143t8.286 3.143 8.286 2.857q8 0.571 8.857-6.286t-4.286-11.429q6.857 0.571 1.714-9.714-2.857-4-4.571-5.143-6.857-2.286-15.429 2.857-4.571 2.286 1.143 4.571-0.571-0.571-5.429 6t-9.429 10-9.143-2.857q-0.571-0.571-3.143-7.714t-5.429-7.714q-4.571 0-9.143 8.571 1.714-4.571-6.286-8.571t-13.714-4.571q10.857-6.857-4.571-15.429-4-2.286-11.714-2.857t-11.143 2.286q-2.857 4-3.143 6.571t2.857 4.571 6 3.143 6.571 2.286 4.857 1.714q8 5.714 4.571 8-1.143 0.571-4.857 2t-6.571 2.571-3.429 2.286q-1.714 2.286 0 8t-1.143 8q-2.857-2.857-5.143-10t-4-9.429q4 5.143-14.286 3.429l-5.714-0.571q-2.286 0-9.143 1.143t-11.714 0.571-7.714-4.571q-2.286-4.571 0-11.429 0.571-2.286 2.286-1.143-2.286-1.714-6.286-5.429t-5.714-4.857q-26.286 8.571-53.714 23.429 3.429 0.571 6.857-0.571 2.857-1.143 7.429-3.714t5.714-3.143q19.429-8 24-4l2.857-2.857q8 9.143 11.429 14.286-4-2.286-17.143-0.571-11.429 3.429-12.571 6.857 4 6.857 2.857 10.286-2.286-1.714-6.571-5.714t-8.286-6.286-8.571-2.857q-9.143 0-12.571 0.571-83.429 45.714-134.286 126.857 4 4 6.857 4.571 2.286 0.571 2.857 5.143t1.429 6.286 6.571-1.714q5.143 4.571 1.714 10.857 0.571-0.571 25.143 15.429 10.857 9.714 12 12 1.714 6.286-5.714 10.286-0.571-1.143-5.143-5.143t-5.143-2.286q-1.714 2.857 0.286 10.571t6 7.143q-4 0-5.429 9.143t-1.429 20.286-0.571 13.429l1.143 0.571q-1.714 6.857 3.143 19.714t12.286 11.143q-7.429 1.714 11.429 24.571 3.429 4.571 4.571 5.143 1.714 1.143 6.857 4.286t8.571 5.714 5.714 6q2.286 2.857 5.714 12.857t8 13.429q-1.143 3.429 5.429 11.429t6 13.143q-0.571 0-1.429 0.571t-1.429 0.571q1.714 4 8.857 8t8.857 7.429q0.571 1.714 1.143 5.714t1.714 6.286 4.571 1.143q1.143-11.429-13.714-35.429-8.571-14.286-9.714-16.571-1.714-2.857-3.143-8.857t-2.571-8.286q1.143 0 3.429 0.857t4.857 2 4.286 2.286 1.143 1.714q-1.714 4 1.143 10t6.857 10.571 9.714 10.857 6.857 7.429q3.429 3.429 8 11.143t0 7.714q5.143 0 11.429 5.714t9.714 11.429q2.857 4.571 4.571 14.857t2.857 13.714q1.143 4 4.857 7.714t7.143 5.429l9.143 4.571t7.429 4q2.857 1.143 10.571 6t12.286 6.571q5.714 2.286 9.143 2.286t8.286-1.429 7.714-2q8.571-1.143 16.571 8.571t12 12q20.571 10.857 31.429 6.286-1.143 0.571 0.286 4.286t4.571 8.857 5.143 8.286 3.143 4.857q2.857 3.429 10.286 8.571t10.286 8.571q3.429-2.286 4-5.143-1.714 4.571 4 11.429t10.286 5.714q8-1.714 8-18.286-17.714 8.571-28-10.286 0-0.571-1.429-3.143t-2.286-4.857-1.429-4.857 0-4.286 2.857-1.714q5.143 0 5.714-2t-1.143-7.143-2.286-7.429q-0.571-4.571-6.286-11.429t-6.857-8.571q-2.857 5.143-9.143 4.571t-9.143-5.143q0 0.571-0.857 3.143t-0.857 3.714q-7.429 0-8.571-0.571 0.571-1.714 1.429-10t2-12.857q0.571-2.286 3.143-6.857t4.286-8.286 2.286-7.143-2.571-5.429-10-1.429q-10.857 0.571-14.857 11.429-0.571 1.714-1.714 6t-2.857 6.571-5.143 4q-4 1.714-13.714 1.143t-13.714-2.857q-7.429-4.571-12.857-16.571t-5.429-21.143q0-5.714 1.429-15.143t1.714-14.286-3.143-14q1.714-1.143 5.143-5.429t5.714-6q1.143-0.571 2.571-0.857t2.571 0 2.286-0.857 1.714-3.429q-0.571-0.571-2.286-1.714-1.714-1.714-2.286-1.714 4 1.714 16.286-0.857t15.714 0.857q8.571 6.286 12.571-1.143 0-0.571-1.429-5.429t-0.286-7.714q2.857 15.429 16.571 5.143 1.714 1.714 8.857 2.857t10 2.857q1.714 1.143 4 3.143t3.143 2.571 2.857-0.286 4.857-3.714q5.714 8 6.857 13.714 6.286 22.857 10.857 25.143 4 1.714 6.286 1.143t2.571-5.429 0-8-0.857-7.143l-0.571-4.571v-10.286l-0.571-4.571q-8.571-1.714-10.571-6.857t0.857-10.571 8.571-10.571q0.571-0.571 4.571-2t8.857-3.714 7.143-4.571q12-10.857 8.571-20 4 0 6.286-5.143-0.571 0-2.857-1.714t-4.286-2.857-2.571-1.143q5.143-2.857 1.143-9.143 2.857-1.714 4.286-6.286t4.286-5.714q5.143 6.857 12 1.143 4-4.571 0.571-9.143 2.857-4 11.714-6t10.571-5.429q4 1.143 4.571-1.143t0.571-6.857 1.714-6.857q2.286-2.857 8.571-5.143t7.429-2.857l9.714-6.286q1.714-2.286 0-2.286 10.286 1.143 17.714-6.286 5.714-6.286-3.429-11.429 1.714-3.429-1.714-5.429t-8.571-3.143q1.714-0.571 6.571-0.286t6-0.857q8.571-5.714-4-9.143-9.714-2.857-24.571 6.857zM502.286 872q117.714-20.571 200.571-108-1.714-1.714-7.143-2.571t-7.143-2q-10.286-4-13.714-4.571 0.571-4-1.429-7.429t-4.571-5.143-7.143-4.571-6.286-4q-1.143-1.143-4-3.429t-4-3.143-4.286-2.571-4.857-1.143-5.714 0.571l-1.714 0.571q-1.714 0.571-3.143 1.429t-3.143 1.714-2.286 1.714 0 1.429q-12-9.714-20.571-12.571-2.857-0.571-6.286-3.143t-6-4-5.714-0.857-6.571 4q-2.857 2.857-3.429 8.571t-1.143 7.429q-4-2.857 0-10t1.143-10.571q-1.714-3.429-6-2.571t-6.857 2.571-6.571 4.857-5.143 3.714-4.857 3.143-4.857 4.286q-1.714 2.286-3.429 6.857t-2.857 6.286q-1.143-2.286-6.571-3.714t-5.429-3.143q1.143 5.714 2.286 20t2.857 21.714q4 17.714-6.857 27.429-15.429 14.286-16.571 22.857-2.286 12.571 6.857 14.857 0 4-4.571 11.714t-4 12.286q0 3.429 1.143 9.143z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/filetypes/store.svg b/browser/themes/shared/devtools/images/filetypes/store.svg
new file mode 100644
index 000000000..95be627ce
--- /dev/null
+++ b/browser/themes/shared/devtools/images/filetypes/store.svg
@@ -0,0 +1,7 @@
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g>
+<path d="m1.3,12.5v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6,0-6.6-2.7-6.6-2.7z"/>
+<path d="m14.7,3.4c0-1.4-3-2.5-6.7-2.5s-6.7,1.1-6.7,2.5c0,.2 0,.3 .1,.5-.1-.3-.1-.4-.1-.4v1.5c0,0 0,2.7 6.7,2.7 6.7,0 6.8-2.7 6.8-2.7v-1.6c0,.1 0,.2-.1,.5-0-.2-0-.3-0-.5z"/>
+<path d="m1.3,8.7v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6-0-6.6-2.7-6.6-2.7z"/>
+</g>
+</svg>
diff --git a/browser/themes/shared/devtools/images/itemArrow-dark-ltr.svg b/browser/themes/shared/devtools/images/itemArrow-dark-ltr.svg
new file mode 100644
index 000000000..7bd7028ac
--- /dev/null
+++ b/browser/themes/shared/devtools/images/itemArrow-dark-ltr.svg
@@ -0,0 +1,4 @@
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 7 12">
+<path fill="#181D20" d="M7,11.6 7,.4 1.5,6z"/>
+<path fill="#000" d="M7,0 6,0 0,6 6,12 7,12 7,11.6 1.5,6 7,.4z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/itemArrow-dark-rtl.svg b/browser/themes/shared/devtools/images/itemArrow-dark-rtl.svg
new file mode 100644
index 000000000..9315d9e56
--- /dev/null
+++ b/browser/themes/shared/devtools/images/itemArrow-dark-rtl.svg
@@ -0,0 +1,4 @@
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 7 12">
+<path fill="#181D20" d="M0,11.6 0,.4 5.5,6z"/>
+<path fill="#000" d="M1,0 0,0 0,.4 5.5,6 0,11.6 0,12 1,12 7,6z"/>
+</svg>
+\ No newline at end of file
diff --git a/browser/themes/shared/devtools/images/itemArrow-ltr.svg b/browser/themes/shared/devtools/images/itemArrow-ltr.svg
new file mode 100644
index 000000000..93913c927
--- /dev/null
+++ b/browser/themes/shared/devtools/images/itemArrow-ltr.svg
@@ -0,0 +1,4 @@
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 7 12">
+<path fill="#f7f7f7" d="M7,11.6 7,.4 1.5,6z"/>
+<path fill="#ababab" d="M7,0 6,0 0,6 6,12 7,12 7,11.6 1.5,6 7,.4z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/itemArrow-rtl.svg b/browser/themes/shared/devtools/images/itemArrow-rtl.svg
new file mode 100644
index 000000000..e580b887b
--- /dev/null
+++ b/browser/themes/shared/devtools/images/itemArrow-rtl.svg
@@ -0,0 +1,4 @@
+<svg width="7" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 7 12" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 7 12">
+<path fill="#f7f7f7" d="M0,11.6 0,.4 5.5,6z"/>
+<path fill="#ababab" d="M1,0 0,0 0,.4 5.5,6 0,11.6 0,12 1,12 7,6z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/itemToggle.png b/browser/themes/shared/devtools/images/itemToggle.png
new file mode 100644
index 000000000..dc30c224d
--- /dev/null
+++ b/browser/themes/shared/devtools/images/itemToggle.png
diff --git a/browser/themes/shared/devtools/images/itemToggle@2x.png b/browser/themes/shared/devtools/images/itemToggle@2x.png
new file mode 100644
index 000000000..90421287c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/itemToggle@2x.png
diff --git a/browser/themes/shared/devtools/images/magnifying-glass-light.png b/browser/themes/shared/devtools/images/magnifying-glass-light.png
new file mode 100644
index 000000000..e8c184158
--- /dev/null
+++ b/browser/themes/shared/devtools/images/magnifying-glass-light.png
diff --git a/browser/themes/shared/devtools/images/magnifying-glass-light@2x.png b/browser/themes/shared/devtools/images/magnifying-glass-light@2x.png
new file mode 100644
index 000000000..d784870c3
--- /dev/null
+++ b/browser/themes/shared/devtools/images/magnifying-glass-light@2x.png
diff --git a/browser/themes/shared/devtools/images/magnifying-glass.png b/browser/themes/shared/devtools/images/magnifying-glass.png
new file mode 100644
index 000000000..bd09ffb4f
--- /dev/null
+++ b/browser/themes/shared/devtools/images/magnifying-glass.png
diff --git a/browser/themes/shared/devtools/images/magnifying-glass@2x.png b/browser/themes/shared/devtools/images/magnifying-glass@2x.png
new file mode 100644
index 000000000..17842853a
--- /dev/null
+++ b/browser/themes/shared/devtools/images/magnifying-glass@2x.png
diff --git a/browser/themes/shared/devtools/images/newtab-inverted.png b/browser/themes/shared/devtools/images/newtab-inverted.png
new file mode 100644
index 000000000..2d29c2cbe
--- /dev/null
+++ b/browser/themes/shared/devtools/images/newtab-inverted.png
diff --git a/browser/themes/shared/devtools/images/newtab-inverted@2x.png b/browser/themes/shared/devtools/images/newtab-inverted@2x.png
new file mode 100644
index 000000000..6feba0e83
--- /dev/null
+++ b/browser/themes/shared/devtools/images/newtab-inverted@2x.png
diff --git a/browser/themes/shared/devtools/images/newtab.png b/browser/themes/shared/devtools/images/newtab.png
new file mode 100644
index 000000000..32e42b04c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/newtab.png
diff --git a/browser/themes/shared/devtools/images/newtab@2x.png b/browser/themes/shared/devtools/images/newtab@2x.png
new file mode 100644
index 000000000..ffde5f050
--- /dev/null
+++ b/browser/themes/shared/devtools/images/newtab@2x.png
diff --git a/browser/themes/shared/devtools/images/noise.png b/browser/themes/shared/devtools/images/noise.png
new file mode 100644
index 000000000..01d340aaa
--- /dev/null
+++ b/browser/themes/shared/devtools/images/noise.png
diff --git a/browser/themes/shared/devtools/images/performance-icons.svg b/browser/themes/shared/devtools/images/performance-icons.svg
new file mode 100644
index 000000000..8bea99760
--- /dev/null
+++ b/browser/themes/shared/devtools/images/performance-icons.svg
@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px">
+<style>
+  g {
+    fill: #edf0f1;
+  }
+  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/browser/themes/shared/devtools/images/power.svg b/browser/themes/shared/devtools/images/power.svg
new file mode 100644
index 000000000..28889519b
--- /dev/null
+++ b/browser/themes/shared/devtools/images/power.svg
@@ -0,0 +1,14 @@
+<!--
+Logo from raphaeljs.com, MIT License
+
+Copyright © 2008 Dmitry Baranovskiy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+The software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.
+-->
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+  <path stroke="#edf0f1" 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="#edf0f1"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/profiler-stopwatch-checked.svg b/browser/themes/shared/devtools/images/profiler-stopwatch-checked.svg
new file mode 100644
index 000000000..f682354c1
--- /dev/null
+++ b/browser/themes/shared/devtools/images/profiler-stopwatch-checked.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#3BACE5" fill-rule="evenodd">
+<path d="m8,1c-3.9,0-7,3.1-7,7s3.1,7 7,7c3.9,0 7-3.1 7-7s-3.1-7-7-7zm-.1,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5s5,2.2 5,5c0,2.8-2.2,5-5,5z"/>
+<path d="m8,6.9c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/>
+<path d="m11.3,4.6l-3.9,2.5 1.5,1.4 2.4-3.9z"/>
+<path opacity=".4" d="m4.6,10c.7,1.2 2,2 3.4,2 1.5,0 2.7-.8 3.4-2h-6.8z"/>
+<g opacity=".3">
+<path d="m7.1,5.1l-.6-1.3-.9,.4 .7,1.3c.2-.1 .5-.3 .8-.4z"/>
+<path d="m9.8,5.6l.7-1.4-.9-.4-.7,1.3c.3,.2 .6,.3 .9,.5z"/>
+<path d="m10.8,7c.1,.3 .2,.7 .2,1h2v-1h-2.2z"/>
+<path d="m5,8c0-.3 .1-.7 .2-1h-2.2l-.1,1h2.1z"/>
+</g>
+</g>
+</svg>
diff --git a/browser/themes/shared/devtools/images/profiler-stopwatch.svg b/browser/themes/shared/devtools/images/profiler-stopwatch.svg
new file mode 100644
index 000000000..d8e1bdd55
--- /dev/null
+++ b/browser/themes/shared/devtools/images/profiler-stopwatch.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#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/browser/themes/shared/devtools/images/responsivemode/responsive-horizontal-resizer.png b/browser/themes/shared/devtools/images/responsivemode/responsive-horizontal-resizer.png
new file mode 100644
index 000000000..7d113f0df
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsive-horizontal-resizer.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsive-horizontal-resizer@2x.png b/browser/themes/shared/devtools/images/responsivemode/responsive-horizontal-resizer@2x.png
new file mode 100644
index 000000000..bb3c4bde0
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsive-horizontal-resizer@2x.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsive-se-resizer.png b/browser/themes/shared/devtools/images/responsivemode/responsive-se-resizer.png
new file mode 100644
index 000000000..35b54d62c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsive-se-resizer.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsive-se-resizer@2x.png b/browser/themes/shared/devtools/images/responsivemode/responsive-se-resizer@2x.png
new file mode 100644
index 000000000..9dbf4fe8e
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsive-se-resizer@2x.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsive-vertical-resizer.png b/browser/themes/shared/devtools/images/responsivemode/responsive-vertical-resizer.png
new file mode 100644
index 000000000..3b4e78c6f
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsive-vertical-resizer.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsive-vertical-resizer@2x.png b/browser/themes/shared/devtools/images/responsivemode/responsive-vertical-resizer@2x.png
new file mode 100644
index 000000000..cbae60621
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsive-vertical-resizer@2x.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsiveui-rotate.png b/browser/themes/shared/devtools/images/responsivemode/responsiveui-rotate.png
new file mode 100644
index 000000000..2bacbd2d5
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsiveui-rotate.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsiveui-rotate@2x.png b/browser/themes/shared/devtools/images/responsivemode/responsiveui-rotate@2x.png
new file mode 100644
index 000000000..eeeb82328
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsiveui-rotate@2x.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsiveui-screenshot.png b/browser/themes/shared/devtools/images/responsivemode/responsiveui-screenshot.png
new file mode 100644
index 000000000..084220ed1
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsiveui-screenshot.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsiveui-screenshot@2x.png b/browser/themes/shared/devtools/images/responsivemode/responsiveui-screenshot@2x.png
new file mode 100644
index 000000000..927c5cf0b
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsiveui-screenshot@2x.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsiveui-touch.png b/browser/themes/shared/devtools/images/responsivemode/responsiveui-touch.png
new file mode 100644
index 000000000..90587034c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsiveui-touch.png
diff --git a/browser/themes/shared/devtools/images/responsivemode/responsiveui-touch@2x.png b/browser/themes/shared/devtools/images/responsivemode/responsiveui-touch@2x.png
new file mode 100644
index 000000000..e4645039c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/responsivemode/responsiveui-touch@2x.png
diff --git a/browser/themes/shared/devtools/images/timeline-filter.svg b/browser/themes/shared/devtools/images/timeline-filter.svg
new file mode 100644
index 000000000..60ebf9a3c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/timeline-filter.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     x="0px" y="0px"
+     width="16" height="16"
+     viewBox="0 0 16 16"
+     enable-background="new 0 0 16 16"
+     xml:space="preserve">
+<style>
+use:not(:target) {
+  display: none;
+}
+
+use {
+  fill: #EDF0F1;
+}
+
+use[id$="-disabled"] {
+  fill-opacity: 0.5;
+}
+
+use[id$="-open"] {
+  fill: #3BACE5;
+}
+
+</style>
+<defs style="display:none">
+  <path id="filter-shape"
+         d="M 2,2 v 3 l 5,4 v 6 h 2 v -6 l 5,-4 v -3 L 14,2 z"/>
+</defs>
+<use id="filter"              xlink:href="#filter-shape"/>
+<use id="filter-disabled"     xlink:href="#filter-shape"/>
+<use id="filter-open"         xlink:href="#filter-shape"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/toggle-tools.png b/browser/themes/shared/devtools/images/toggle-tools.png
new file mode 100644
index 000000000..495439391
--- /dev/null
+++ b/browser/themes/shared/devtools/images/toggle-tools.png
diff --git a/browser/themes/shared/devtools/images/toggle-tools@2x.png b/browser/themes/shared/devtools/images/toggle-tools@2x.png
new file mode 100644
index 000000000..971f41431
--- /dev/null
+++ b/browser/themes/shared/devtools/images/toggle-tools@2x.png
diff --git a/browser/themes/shared/devtools/images/tool-debugger-paused.svg b/browser/themes/shared/devtools/images/tool-debugger-paused.svg
new file mode 100644
index 000000000..ae294f67e
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-debugger-paused.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<path fill="#71c054" fill-rule="evenodd" d="m8,1c-3.9,0-7,3.1-7,7 0,3.9 3.1,7 7,7 3.9,0 7-3.1 7-7 0-3.9-3.1-7-7-7zm2,11h-1-5c-.6,0-1-.4-1-1v-6c0-.6 .4-1 1-1h5 1l4,4-4,4z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/tool-debugger.svg b/browser/themes/shared/devtools/images/tool-debugger.svg
new file mode 100644
index 000000000..128e6e813
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-debugger.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#edf0f1" fill-rule="evenodd">
+<path d="m8,1c-3.9,0-7,3.1-7,7 0,3.9 3.1,7 7,7 3.9,0 7-3.1 7-7 0-3.9-3.1-7-7-7zm0,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5 2.8,0 5,2.2 5,5 0,2.8-2.2,5-5,5z"/>
+<path d="m6,5c.6,0 1,.4 1,1v4c0,.6-.4,1-1,1-.6,0-1-.4-1-1v-4c0-.6 .4-1 1-1z"/>
+<path d="m10,5c.6,0 1,.4 1,1v4c0,.6-.4,1-1,1-.6,0-1-.4-1-1v-4c0-.6 .4-1 1-1z"/>
+</g>
+</svg>
diff --git a/browser/themes/shared/devtools/images/tool-inspector.svg b/browser/themes/shared/devtools/images/tool-inspector.svg
new file mode 100644
index 000000000..5a8cbb8eb
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-inspector.svg
@@ -0,0 +1,9 @@
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<path fill="#eef0f2" fill-rule="evenodd" d="M2,4v9h11V4H2z M11,11H4V6h7V11z"/>
+<g opacity=".8">
+<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M0,8h2v1H0V8z"/>
+<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M13,8h2v1h-2V8z"/>
+<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M7,2h1v2H7V2z"/>
+<path opacity=".8" fill="#eef0f2" fill-rule="evenodd" d="M7,13h1v2H7V13z"/>
+</g>
+</svg>
diff --git a/browser/themes/shared/devtools/images/tool-network.svg b/browser/themes/shared/devtools/images/tool-network.svg
new file mode 100644
index 000000000..bec394d96
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-network.svg
@@ -0,0 +1,36 @@
+<svg width="17" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 17 16">
+<g fill="#edf0f1" fill-rule="evenodd">
+<path opacity=".1" d="M2.1,0h12.8C16,0,17,1,17,2.1v10.6c0,1.2-1,2.1-2.1,2.1H2.1c-1.2,0-2.1-1-2.1-2.1V2.1C0,1,1,0,2.1,0z"/>
+<path d="m2.1,2.1h9.6c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-9.6c-.6,0-1.1-.5-1.1-1.1 .1-.6 .5-1.1 1.1-1.1z"/>
+</g>
+<g opacity=".7">
+<g opacity=".75">
+<path fill="#edf0f1" fill-rule="evenodd" d="m7.4,5.3h7.4c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-7.4c-.5-.1-1-.5-1-1.1 0-.6 .5-1.1 1-1.1z"/>
+</g>
+<g opacity=".85">
+<path fill="#edf0f1" d="m14.9,5.7c.4,0 .7,.3 .7,.7s-.4,.6-.7,.6h-7.5c-.3,0-.6-.3-.6-.6s.3-.7 .7-.7h7.4m0-.4h-7.5c-.6,0-1.1,.5-1.1,1.1 0,.6 .5,1.1 1.1,1.1h7.4c.6,0 1.1-.5 1.1-1.1 0-.6-.4-1.1-1-1.1z"/>
+</g>
+</g>
+<g opacity=".75">
+<path fill="#edf0f1" fill-rule="evenodd" d="m5.3,8.5h3.2c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-3.2c-.6,0-1.1-.5-1.1-1.1 .1-.6 .5-1.1 1.1-1.1z"/>
+</g>
+<g opacity=".85">
+<path fill="#edf0f1" d="m8.5,8.9c.4,0 .7,.3 .7,.7 0,.4-.3,.7-.7,.7h-3.2c-.4,0-.7-.3-.7-.7 0-.4 .3-.7 .7-.7h3.2m0-.4h-3.2c-.6,0-1.1,.5-1.1,1.1 0,.6 .5,1.1 1.1,1.1h3.2c.6,0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1z"/>
+</g>
+<g opacity=".7">
+<g opacity=".75">
+<path fill="#edf0f1" fill-rule="evenodd" d="m4.3,11.7h2.1c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1h-2.1c-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/>
+</g>
+<g opacity=".85">
+<path fill="#edf0f1" d="m6.4,12.1c.4,0 .7,.3 .7,.7 0,.4-.3,.7-.7,.7h-2.1c-.4,0-.7-.3-.7-.7 0-.4 .3-.7 .7-.7h2.1m0-.4h-2.1c-.6,0-1.1,.5-1.1,1.1 0,.6 .5,1.1 1.1,1.1h2.1c.6,0 1.1-.5 1.1-1.1-.1-.6-.5-1.1-1.1-1.1z"/>
+</g>
+</g>
+<g opacity="5.000000e-02" fill="#edf0f1" fill-rule="evenodd">
+<path d="m7.4,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/>
+<path d="m4.2,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/>
+<path d="m1,14.6c0-.1 0-.1 0-.2v-13.9c0-.1 0-.1 0-.2-.6,.4-1,1-1,1.8v10.6c0,.8 .4,1.5 1,1.9z"/>
+<path d="m16,.3c0,.1 0,.1 0,.2v13.8c0,.1 0,.1 0,.2 .6-.4 1-1 1-1.8v-10.6c0-.7-.4-1.4-1-1.8z"/>
+<path d="m13.8,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/>
+<path d="m10.6,14.3v-13.8c0-.3-.2-.5-.5-.5-.3,0-.5,.2-.5,.5v13.8c0,.3 .2,.5 .5,.5 .3,.1 .5-.2 .5-.5z"/>
+</g>
+</svg>
diff --git a/browser/themes/shared/devtools/images/tool-options.svg b/browser/themes/shared/devtools/images/tool-options.svg
new file mode 100644
index 000000000..62a6d7513
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-options.svg
@@ -0,0 +1,3 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<path fill="#edf0f1" d="m11.5,13.9l-.6-1.5c.3-.2 .5-.4 .8-.6 .2-.2 .4-.5 .6-.7l1.5,.6c.3,.1 .6,0 .7-.3l.4-1c.1-.3 0-.6-.3-.7l-1.5-.6c.1-.6 .1-1.3 0-2l1.5-.6c.3-.1 .4-.4 .3-.7l-.4-1c-.1-.3-.4-.4-.7-.3l-1.5,.6c-.2-.3-.4-.5-.6-.8-.2-.1-.5-.3-.7-.5l.6-1.5c.1-.3 0-.6-.3-.7l-.9-.4c-.3-.1-.6,0-.7,.3l-.6,1.5c-.6-.1-1.3-.1-2,0l-.6-1.5c-.1-.3-.4-.4-.7-.3l-1,.4c-.2,.1-.3,.4-.2,.6l.6,1.5c-.3,.3-.5,.5-.8,.7-.2,.3-.4,.5-.6,.8l-1.5-.7c-.3-.1-.6,0-.7,.3l-.4,.9c-.1,.3 0,.6 .3,.7l1.5,.7c-.1,.6-.1,1.3 0,1.9l-1.5,.6c-.3,.1-.4,.4-.3,.7l.4,1c.1,.3 .4,.4 .7,.3l1.5-.6c.2,.3 .4,.5 .6,.8 .2,.2 .5,.4 .7,.6l-.6,1.5c-.1,.3 0,.6 .3,.7l1,.4c.3,.1 .6,0 .7-.3l.6-1.5c.6,.1 1.3,.1 2,0l.6,1.5c.1,.3 .4,.4 .7,.3l1-.4c.1-.1 .3-.4 .1-.7zm-5.1-4.2c-.9-.9-.9-2.4 0-3.3 .9-.9 2.4-.9 3.3,0 .9,.9 .9,2.4 0,3.3-.9,.9-2.4,.9-3.3,0z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/tool-profiler.svg b/browser/themes/shared/devtools/images/tool-profiler.svg
new file mode 100644
index 000000000..d8e1bdd55
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-profiler.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#edf0f1" fill-rule="evenodd">
+<path d="m8,1c-3.9,0-7,3.1-7,7s3.1,7 7,7c3.9,0 7-3.1 7-7s-3.1-7-7-7zm-.1,12c-2.8,0-5-2.2-5-5 0-2.8 2.2-5 5-5s5,2.2 5,5c0,2.8-2.2,5-5,5z"/>
+<path d="m8,6.9c.6,0 1.1,.5 1.1,1.1 0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1 0-.6 .5-1.1 1.1-1.1z"/>
+<path d="m11.3,4.6l-3.9,2.5 1.5,1.4 2.4-3.9z"/>
+<path opacity=".4" d="m4.6,10c.7,1.2 2,2 3.4,2 1.5,0 2.7-.8 3.4-2h-6.8z"/>
+<g opacity=".3">
+<path d="m7.1,5.1l-.6-1.3-.9,.4 .7,1.3c.2-.1 .5-.3 .8-.4z"/>
+<path d="m9.8,5.6l.7-1.4-.9-.4-.7,1.3c.3,.2 .6,.3 .9,.5z"/>
+<path d="m10.8,7c.1,.3 .2,.7 .2,1h2v-1h-2.2z"/>
+<path d="m5,8c0-.3 .1-.7 .2-1h-2.2l-.1,1h2.1z"/>
+</g>
+</g>
+</svg>
diff --git a/browser/themes/shared/devtools/images/tool-scratchpad.svg b/browser/themes/shared/devtools/images/tool-scratchpad.svg
new file mode 100644
index 000000000..ad2133a11
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-scratchpad.svg
@@ -0,0 +1,6 @@
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#edf0f1" fill-rule="evenodd">
+<path opacity=".3" d="m1.1,6.3c0-.3 .3-.6 .6-.6h4.6c.3,0 .6,.3 .6,.6s-.3,.6-.6,.6h-4.6c-.3,0-.6-.3-.6-.6zm12,1.7h-10.2c-.4,0-.6,.3-.6,.6 0,.3 .3,.6 .6,.6h10.3c.3,0 .6-.3 .6-.6-.1-.3-.3-.6-.7-.6zm-5.7,3.4c.3,0 .6-.3 .6-.6 0-.3-.3-.6-.6-.6h-4.5c-.3,0-.6,.3-.6,.6 0,.3 .3,.6 .6,.6h4.5zm2.3,1.2h-8c-.3,0-.6,.3-.6,.6 0,.3 .3,.6 .6,.6h8c.3,0 .6-.3 .6-.6 0-.4-.3-.6-.6-.6z"/>
+<path d="m14.3,2.3h-.6v1.1c0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.1-.1-.1-.1-.2-.2-.2-.1-.3-.1-.4-.1-.3,0-.6,.3-.6,.6v1.7h-1.1v1.1c0,.6-.5,1.1-1.1,1.1-.7,.1-1.2-.4-1.2-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.1-.1-.2-.2-.3-.2-.1-.1-.1-.1-.2-.1-.3,0-.6,.3-.6,.6v1.7h-1.1v1.1c0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.3-.1-.3-.2-.4-.2-.1-.1-.2-.1-.3-.1-.3,0-.5,.3-.5,.6v1.7h-1.2v1.1c0,.6-.5,1.1-1.1,1.1-.6,0-1.1-.5-1.1-1.1v-.5c0,.3 .3,.6 .6,.6 .3,0 .6-.3 .6-.6v-.6-1.7c0-.1 0-.2-.1-.3-.2-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1-.3,0-.6,.3-.6,.6v1.7h-.5c-.3,0-.6,.2-.6,.6v12.6c0,.2 .3,.5 .6,.5h13.7c.3,0 .6-.3 .6-.6v-12.5c0-.4-.3-.6-.6-.6zm-12.6,3.4h4.6c.3,0 .6,.3 .6,.6s-.3,.6-.6,.6h-4.6c-.3,0-.6-.3-.6-.6s.3-.6 .6-.6zm8,8h-8c-.3,0-.6-.3-.6-.6 0-.3 .3-.6 .6-.6h8c.3,0 .6,.3 .6,.6 0,.4-.3,.6-.6,.6zm-7.4-2.8c0-.3 .3-.6 .6-.6h4.6c.3,0 .6,.3 .6,.6 0,.3-.3,.6-.6,.6h-4.6c-.4-.1-.6-.3-.6-.6zm10.8-1.8h-10.2c-.3,0-.6-.3-.6-.6 0-.2 .2-.5 .6-.5h10.3c.3,0 .6,.3 .6,.6-.1,.3-.3,.5-.7,.5z"/>
+</g>
+</svg>
diff --git a/browser/themes/shared/devtools/images/tool-storage.svg b/browser/themes/shared/devtools/images/tool-storage.svg
new file mode 100644
index 000000000..7f5013b06
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-storage.svg
@@ -0,0 +1,7 @@
+<svg width="16" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<g fill="#edf0f1">
+<path d="m1.3,12.5v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6,0-6.6-2.7-6.6-2.7z"/>
+<path d="m14.7,3.4c0-1.4-3-2.5-6.7-2.5s-6.7,1.1-6.7,2.5c0,.2 0,.3 .1,.5-.1-.3-.1-.4-.1-.4v1.5c0,0 0,2.7 6.7,2.7 6.7,0 6.8-2.7 6.8-2.7v-1.6c0,.1 0,.2-.1,.5-0-.2-0-.3-0-.5z"/>
+<path d="m1.3,8.7v-2.4c0,0 0,2.5 6.7,2.5 6.7,0 6.7-2.5 6.7-2.5v2.4c0,0 0,2.7-6.8,2.7-6.6-0-6.6-2.7-6.6-2.7z"/>
+</g>
+</svg>
diff --git a/browser/themes/shared/devtools/images/tool-styleeditor.svg b/browser/themes/shared/devtools/images/tool-styleeditor.svg
new file mode 100644
index 000000000..ac1f5c759
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-styleeditor.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 17 16">
+<g fill="#edf0f1" fill-rule="evenodd">
+<path d="m10,11.1 0,2.3-7.8,0 0-11.2 5.6-0 1.1,1.1 1.7-1.6-1.7-1.7-8.9,0 0,15.6 12.2,0 0-6.7z"/>
+<path d="M6.7,7.8L14.5,0l2.2,2.2L8.9,10l-3.3,1.1L6.7,7.8z"/>
+</g>
+</svg>
diff --git a/browser/themes/shared/devtools/images/tool-webaudio.svg b/browser/themes/shared/devtools/images/tool-webaudio.svg
new file mode 100644
index 000000000..59d9d908e
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-webaudio.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="16px" height="16px" viewBox="-6.167 -16.135 100 100" enable-background="new -6.167 -16.135 100 100" xml:space="preserve">
+  <path fill="none" stroke="#edf0f1" stroke-width="8" stroke-linecap="round" stroke-miterlimit="10" d="M86.666,33.864  c-0.797,5.297-3.467,32.799-10.518,32.866c-7.086,0.066-9.973-27.596-10.9-32.866C64.322,28.597,61.436,0.933,54.35,1  c-7.105,0.068-9.644,27.561-10.517,32.864c-0.874,5.305-3.412,32.799-10.517,32.866c-7.087,0.066-9.974-27.596-10.899-32.866  C21.49,28.597,18.604,0.933,11.517,1C4.466,1.067,1.796,28.569,1,33.864"/>
+</svg>
+\ No newline at end of file
diff --git a/browser/themes/shared/devtools/images/tool-webconsole.svg b/browser/themes/shared/devtools/images/tool-webconsole.svg
new file mode 100644
index 000000000..0739e8209
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tool-webconsole.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16 16">
+<path fill="#edf0f1" fill-rule="evenodd" d="M2,2h5.4l6.5,6.5L7.4,15H2l6.5-6.5L2,2z"/>
+</svg>
diff --git a/browser/themes/shared/devtools/images/tracer-icon.png b/browser/themes/shared/devtools/images/tracer-icon.png
new file mode 100644
index 000000000..8229dd7c7
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tracer-icon.png
diff --git a/browser/themes/shared/devtools/images/tracer-icon@2x.png b/browser/themes/shared/devtools/images/tracer-icon@2x.png
new file mode 100644
index 000000000..de0ded4c8
--- /dev/null
+++ b/browser/themes/shared/devtools/images/tracer-icon@2x.png
diff --git a/browser/themes/shared/devtools/images/undock.png b/browser/themes/shared/devtools/images/undock.png
new file mode 100644
index 000000000..3ca29e4bc
--- /dev/null
+++ b/browser/themes/shared/devtools/images/undock.png
diff --git a/browser/themes/shared/devtools/images/undock@2x.png b/browser/themes/shared/devtools/images/undock@2x.png
new file mode 100644
index 000000000..137d6df35
--- /dev/null
+++ b/browser/themes/shared/devtools/images/undock@2x.png
diff --git a/browser/themes/shared/devtools/images/vview-delete.png b/browser/themes/shared/devtools/images/vview-delete.png
new file mode 100644
index 000000000..db4b0620c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/vview-delete.png
diff --git a/browser/themes/shared/devtools/images/vview-delete@2x.png b/browser/themes/shared/devtools/images/vview-delete@2x.png
new file mode 100644
index 000000000..ae6fbb21c
--- /dev/null
+++ b/browser/themes/shared/devtools/images/vview-delete@2x.png
diff --git a/browser/themes/shared/devtools/images/vview-edit.png b/browser/themes/shared/devtools/images/vview-edit.png
new file mode 100644
index 000000000..f57503200
--- /dev/null
+++ b/browser/themes/shared/devtools/images/vview-edit.png
diff --git a/browser/themes/shared/devtools/images/vview-edit@2x.png b/browser/themes/shared/devtools/images/vview-edit@2x.png
new file mode 100644
index 000000000..a34c8ede6
--- /dev/null
+++ b/browser/themes/shared/devtools/images/vview-edit@2x.png
diff --git a/browser/themes/shared/devtools/images/vview-lock.png b/browser/themes/shared/devtools/images/vview-lock.png
new file mode 100644
index 000000000..b68cc5e7d
--- /dev/null
+++ b/browser/themes/shared/devtools/images/vview-lock.png
diff --git a/browser/themes/shared/devtools/images/vview-lock@2x.png b/browser/themes/shared/devtools/images/vview-lock@2x.png
new file mode 100644
index 000000000..5d7640bbe
--- /dev/null
+++ b/browser/themes/shared/devtools/images/vview-lock@2x.png
diff --git a/browser/themes/shared/devtools/images/vview-open-inspector.png b/browser/themes/shared/devtools/images/vview-open-inspector.png
new file mode 100644
index 000000000..ee1d7a59e
--- /dev/null
+++ b/browser/themes/shared/devtools/images/vview-open-inspector.png
diff --git a/browser/themes/shared/devtools/images/vview-open-inspector@2x.png b/browser/themes/shared/devtools/images/vview-open-inspector@2x.png
new file mode 100644
index 000000000..2b09f01a5
--- /dev/null
+++ b/browser/themes/shared/devtools/images/vview-open-inspector@2x.png
diff --git a/browser/themes/linux/devtools/webconsole.png b/browser/themes/shared/devtools/images/webconsole.png
index 8aee79015..8aee79015 100644
--- a/browser/themes/linux/devtools/webconsole.png
+++ b/browser/themes/shared/devtools/images/webconsole.png
diff --git a/browser/themes/shared/devtools/images/webconsole@2x.png b/browser/themes/shared/devtools/images/webconsole@2x.png
new file mode 100644
index 000000000..2d5e97f88
--- /dev/null
+++ b/browser/themes/shared/devtools/images/webconsole@2x.png
diff --git a/browser/themes/shared/devtools/inspector.css b/browser/themes/shared/devtools/inspector.css
new file mode 100644
index 000000000..b72b7b343
--- /dev/null
+++ b/browser/themes/shared/devtools/inspector.css
@@ -0,0 +1,130 @@
+/* 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/. */
+
+%ifdef XP_MACOSX
+
+#inspector-toolbar:-moz-locale-dir(ltr) {
+  padding-left: 2px;
+  padding-right: 16px; /* use -moz-padding-end when/if bug 631729 gets fixed */
+}
+
+#inspector-toolbar:-moz-locale-dir(rtl) {
+  padding-left: 4px;
+  padding-right: 18px; /* use -moz-padding-end when/if bug 631729 gets fixed */
+}
+
+%endif
+
+#inspector-searchbox {
+  transition-property: max-width, -moz-padding-end, -moz-padding-start;
+  transition-duration: 250ms;
+  transition-timing-function: ease;
+}
+
+#inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box {
+  overflow: hidden;
+}
+
+#inspector-searchbox:not([focused]):not([filled]) {
+  max-width: 20px !important;
+  -moz-padding-end: 5px;
+  -moz-padding-start: 22px;
+  background-position: 8px center, top left, top left;
+}
+
+#inspector-searchbox[focused],
+#inspector-searchbox[filled] {
+  max-width: 200px !important;
+}
+
+/* Tooltip: Events */
+
+#devtools-tooltip-events-container {
+  margin: -4px; /* Compensate for the .panel-arrowcontent padding. */
+  max-width: 590px;
+  overflow-y: auto;
+}
+
+.event-header {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.event-tooltip-event-type,
+.event-tooltip-filename,
+.event-tooltip-attributes {
+  -moz-margin-start: 0;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.event-tooltip-event-type {
+  font-weight: bold;
+  font-size: 13px;
+}
+
+.event-tooltip-filename {
+  -moz-margin-end: 0;
+  font-size: 100%;
+  flex-shrink: 1;
+}
+
+.event-tooltip-debugger-icon {
+  width: 16px;
+  height: 16px;
+  -moz-margin-end: 4px;
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
+.event-tooltip-debugger-icon:hover {
+  opacity: 1;
+}
+
+.event-tooltip-content-box {
+  display: none;
+  overflow: auto;
+  -moz-margin-end: 0;
+}
+
+.event-tooltip-content-box[open] {
+  display: block;
+}
+
+.event-tooltip-source-container {
+  margin-top: 5px;
+  margin-bottom: 10px;
+  -moz-margin-start: 5px;
+  -moz-margin-end: 0;
+}
+
+.event-tooltip-source {
+  margin-bottom: 0;
+}
+
+.event-tooltip-attributes-container {
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 1;
+  justify-content: flex-end;
+}
+
+.event-tooltip-attributes-box {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  border-radius: 3px;
+  padding: 2px;
+  -moz-margin-start: 5px;
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-toolbar-background);
+}
+
+.event-tooltip-attributes {
+  margin: 0;
+  font-size: 9px;
+  padding-top: 2px;
+}
diff --git a/browser/themes/shared/devtools/layoutview.css b/browser/themes/shared/devtools/layoutview.css
new file mode 100644
index 000000000..3e0ca8be5
--- /dev/null
+++ b/browser/themes/shared/devtools/layoutview.css
@@ -0,0 +1,60 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.theme-sidebar {
+  box-sizing: border-box;
+}
+
+#main {
+  background-color: white;
+  border-color: hsla(210,100%,85%,0.7);
+  border-style: dotted;
+  color: var(--theme-selection-color);
+}
+
+.margin,
+.size {
+  color: var(--theme-highlight-blue);
+}
+
+#content {
+  background-color: #87ceeb;
+  border-color: hsl(210,100%,85%);
+  border-style: dotted;
+}
+
+#padding,
+#margins {
+  border-color: hsla(210,100%,85%,0.2);
+  outline: dotted 1px hsl(210,100%,85%);
+}
+
+#padding {
+  background-color: #6a5acd;
+}
+
+#borders {
+  background-color: #444444;
+  border-style: dotted;
+  border-color: hsl(210,100%,85%);
+}
+
+#margins {
+  background-color: #edff64;
+  /* This opacity applies to all of the regions, since they are nested. */
+  opacity: .8;
+}
+
+.editable {
+  border-bottom: 1px dashed transparent;
+}
+
+.editable:hover {
+  border-bottom-color: hsl(0,0%,50%);
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #CCC;
+  padding: 0;
+}
diff --git a/browser/themes/shared/devtools/light-theme.css b/browser/themes/shared/devtools/light-theme.css
new file mode 100644
index 000000000..278dd9f48
--- /dev/null
+++ b/browser/themes/shared/devtools/light-theme.css
@@ -0,0 +1,404 @@
+/* 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/. */
+
+/* According to:
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
+ */
+:root {
+  --theme-body-background: #fcfcfc;
+  --theme-sidebar-background: #f7f7f7;
+  --theme-contrast-background: #e6b064;
+
+  --theme-tab-toolbar-background: #ebeced;
+  --theme-toolbar-background: #f0f1f2;
+  --theme-selection-background: #4c9ed9;
+  --theme-selection-color: #f5f7fa;
+  --theme-selection-background-semitransparent: rgba(76, 158, 217, .23);
+  --theme-splitter-color: #aaaaaa;
+  --theme-comment: hsl(90,2%,46%);
+
+  --theme-body-color: #18191a;
+  --theme-body-color-alt: #585959;
+  --theme-content-color1: #292e33;
+  --theme-content-color2: #8fa1b2;
+  --theme-content-color3: #667380;
+
+  --theme-highlight-green: hsl(72,100%,27%);
+  --theme-highlight-blue: hsl(208,56%,40%);
+  --theme-highlight-bluegrey: hsl(208,81%,21%);
+  --theme-highlight-purple: #5b5fff;
+  --theme-highlight-lightorange: #a18650;
+  --theme-highlight-orange: hsl(24,85%,39%);
+  --theme-highlight-red: #bf5656;
+  --theme-highlight-pink: #b82ee5;
+}
+
+.theme-body {
+  background: var(--theme-body-background);
+  color: var(--theme-body-color);
+}
+
+.theme-sidebar {
+  background: var(--theme-sidebar-background);
+  color: var(--theme-body-color);
+}
+
+::-moz-selection {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.theme-bg-darker {
+  background: var(--theme-selection-background-semitransparent);
+}
+
+.theme-selected,
+.CodeMirror-hint-active {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.theme-bg-contrast,
+.variable-or-property:not([overridden])[changed] {
+  background: var(--theme-contrast-background);
+}
+
+.theme-link,
+.cm-s-mozilla .cm-link,
+.CodeMirror-Tern-type {
+  color: var(--theme-highlight-blue);
+}
+
+/*
+ * FIXME: http://bugzil.la/575675 CSS links without :visited set cause assertion
+ * failures in debug builds.
+ */
+.theme-link:visited,
+.cm-s-mozilla .cm-link:visited {
+  color: var(--theme-highlight-blue);
+}
+
+.theme-comment,
+.cm-s-mozilla .cm-meta,
+.cm-s-mozilla .cm-hr,
+.cm-s-mozilla .cm-comment,
+.variable-or-property .token-undefined,
+.variable-or-property .token-null,
+.CodeMirror-Tern-completion-unknown:before {
+  color: var(--theme-comment);
+}
+
+.theme-gutter {
+  background-color: hsl(0,0%,90%);
+  color: var(--theme-content-color3);
+  border-color: hsl(0,0%,65%);
+}
+
+.theme-separator { /* grey */
+  border-color: #cddae5;
+}
+
+.cm-s-mozilla .cm-unused-line {
+  text-decoration: line-through;
+  text-decoration-color: var(--theme-highlight-bluegrey);
+}
+
+.cm-s-mozilla .cm-executed-line {
+  background-color: #fcfffc;
+}
+
+.theme-fg-color1,
+.cm-s-mozilla .cm-number,
+.variable-or-property .token-number,
+.variable-or-property[return] > .title > .name,
+.variable-or-property[scope] > .title > .name {
+  color: var(--theme-highlight-green);
+}
+
+.CodeMirror-Tern-completion-number:before {
+  background-color: hsl(72,100%,27%);
+}
+
+.theme-fg-color2,
+.cm-s-mozilla .cm-attribute,
+.cm-s-mozilla .cm-builtin,
+.cm-s-mozilla .cm-def,
+.cm-s-mozilla .cm-property,
+.cm-s-mozilla .cm-qualifier,
+.variables-view-variable > .title > .name {
+  color: var(--theme-highlight-blue);
+}
+
+.CodeMirror-Tern-completion-object:before {
+  background-color: hsl(208,56%,40%);
+}
+
+.theme-fg-color3,
+.cm-s-mozilla .cm-variable,
+.cm-s-mozilla .cm-tag,
+.cm-s-mozilla .cm-header,
+.cm-s-mozilla .cm-bracket,
+.variables-view-property > .title > .name {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.CodeMirror-Tern-completion-array:before {
+  background-color: var(--theme-highlight-bluegrey);
+}
+
+.theme-fg-color4 {
+  color: var(--theme-highlight-orange);
+}
+
+.theme-fg-color5,
+.cm-s-mozilla .cm-keyword {
+  color: var(--theme-highlight-lightorange);
+}
+
+.theme-fg-color6,
+.cm-s-mozilla .cm-string,
+.cm-s-mozilla .cm-string-2,
+.variable-or-property .token-string,
+.CodeMirror-Tern-farg {
+  color: var(--theme-highlight-orange);
+}
+
+.CodeMirror-Tern-completion-string:before,
+.CodeMirror-Tern-completion-fn:before {
+  background-color: hsl(24,85%,39%);
+}
+
+.theme-fg-color7,
+.cm-s-mozilla .cm-atom,
+.cm-s-mozilla .cm-quote,
+.cm-s-mozilla .cm-error,
+.variable-or-property .token-boolean,
+.variable-or-property .token-domnode,
+.variable-or-property[exception] > .title > .name {
+  color: var(--theme-highlight-red);
+}
+
+.CodeMirror-Tern-completion-bool:before {
+  background-color: #bf5656;
+}
+
+.variable-or-property .token-domnode {
+  font-weight: bold;
+}
+
+.theme-fg-contrast { /* To be used for text on theme-bg-contrast */
+  color: black;
+}
+
+.theme-toolbar,
+.devtools-toolbar,
+.devtools-sidebar-tabs tabs,
+.devtools-sidebar-alltabs,
+.CodeMirror-dialog { /* General toolbar styling */
+  color: var(--theme-body-color-alt);
+  background-color: var(--theme-toolbar-background);
+  border-color: var(--theme-splitter-color);
+}
+
+.ruleview-colorswatch,
+.computedview-colorswatch,
+.ruleview-bezierswatch {
+  box-shadow: 0 0 0 1px #c4c4c4;
+}
+
+/* CodeMirror specific styles.
+ * Best effort to match the existing theme, some of the colors
+ * are duplicated here to prevent weirdness in the main theme. */
+
+.CodeMirror { /* Inherit platform specific font sizing and styles */
+  font-family: inherit;
+  font-size: inherit;
+  background: transparent;
+}
+
+.CodeMirror pre,
+.cm-s-mozilla .cm-variable-2,
+.cm-s-mozilla .cm-variable-3,
+.cm-s-mozilla .cm-operator,
+.cm-s-mozilla .cm-special {
+  color: var(--theme-body-color);
+}
+
+.cm-s-mozilla .CodeMirror-lines .CodeMirror-cursor {
+  border-left: solid 1px black;
+}
+
+.cm-s-mozilla.CodeMirror-focused .CodeMirror-selected { /* selected text (focused) */
+  background: rgb(185, 215, 253);
+}
+
+.cm-s-mozilla .CodeMirror-selected { /* selected text (unfocused) */
+  background: rgb(176, 176, 176);
+}
+
+.cm-s-mozilla .CodeMirror-activeline-background { /* selected color with alpha */
+  background: rgba(185, 215, 253, .35);
+}
+
+div.cm-s-mozilla span.CodeMirror-matchingbracket { /* highlight brackets */
+  outline: solid 1px rgba(0, 0, 0, .25);
+  color: black;
+}
+
+/* Highlight for a line that contains an error. */
+div.CodeMirror div.error-line {
+  background: rgba(255,0,0,0.2);
+}
+
+/* Highlight for a line that represents a stack frame's location. */
+div.CodeMirror div.debug-line {
+  background: rgba(0,128,255,0.1);
+  box-shadow:
+    0 1px 0 0 rgba(0,128,255,0.4),
+    0 -1px 0 0 rgba(0,128,255,0.4);
+}
+
+/* Generic highlighted text */
+div.CodeMirror span.marked-text {
+  background: rgba(255,255,0,0.2);
+  border: 1px dashed rgba(192,192,0,0.6);
+  -moz-margin-start: -1px;
+  -moz-margin-end: -1px;
+}
+
+/* Highlight for evaluating current statement. */
+div.CodeMirror span.eval-text {
+  background-color: #ccd;
+}
+
+.cm-s-mozilla .CodeMirror-linenumber { /* line number text */
+  color: var(--theme-content-color3);
+}
+
+.cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
+  border-right-color: var(--theme-splitter-color);
+  background-color: var(--theme-sidebar-background);
+}
+
+.cm-s-markup-view pre {
+  line-height: 1.4em;
+  min-height: 1.4em;
+}
+
+/* Twisty and checkbox controls */
+
+.theme-twisty, .theme-checkbox {
+  width: 14px;
+  height: 14px;
+  background-repeat: no-repeat;
+  background-image: url("chrome://browser/skin/devtools/controls.png");
+  background-size: 56px 28px;
+}
+
+.theme-twisty {
+  cursor: pointer;
+  background-position: 0 -14px;
+}
+
+.theme-twisty:-moz-focusring {
+  outline-style: none;
+}
+
+.theme-twisty[open] {
+  background-position: -14px -14px;
+}
+
+.theme-twisty[invisible] {
+  visibility: hidden;
+}
+
+/* Use white twisty when next to a selected item in markup view */
+.theme-selected ~ .theme-twisty {
+  background-position: -28px -14px;
+}
+
+.theme-selected ~ .theme-twisty[open] {
+  background-position: -42px -14px;
+}
+
+.theme-checkbox {
+  display: inline-block;
+  border: 0;
+  padding: 0;
+  outline: none;
+  background-position: 0 0;
+}
+
+.theme-checkbox[checked] {
+  background-position: -14px 0;
+}
+
+@media (min-resolution: 2dppx) {
+  .theme-twisty, .theme-checkbox {
+    background-image: url("chrome://browser/skin/devtools/controls@2x.png");
+  }
+}
+
+/* XUL panel styling (see browser/devtools/shared/widgets/Tooltip.js) */
+
+.theme-tooltip-panel .panel-arrowcontent {
+  padding: 4px;
+  background: rgba(255, 255, 255, .9);
+  border-radius: 5px;
+  box-shadow: none;
+  border: 3px solid #d9e1e8;
+}
+
+/* Overring panel arrow images to fit with our light and dark themes */
+
+.theme-tooltip-panel .panel-arrow[side="top"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png");
+  margin-bottom: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="bottom"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light.png");
+  margin-top: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="left"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png");
+  margin-right: -4px;
+}
+
+.theme-tooltip-panel .panel-arrow[side="right"] {
+  list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light.png");
+  margin-left: -4px;
+}
+
+@media (min-resolution: 2dppx) {
+  .theme-tooltip-panel .panel-arrow[side="top"],
+  .theme-tooltip-panel .panel-arrow[side="bottom"] {
+    list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-vertical-light@2x.png");
+  }
+
+  .theme-tooltip-panel .panel-arrow[side="left"],
+  .theme-tooltip-panel .panel-arrow[side="right"] {
+    list-style-image: url("chrome://browser/skin/devtools/tooltip/arrow-horizontal-light@2x.png");
+  }
+}
+
+.theme-tooltip-panel .devtools-tooltip-simple-text {
+  color: black;
+  border-bottom: 1px solid #d9e1e8;
+}
+
+.theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
+  border-bottom: 0;
+}
+
+.CodeMirror-hints,
+.CodeMirror-Tern-tooltip {
+  box-shadow: 0 0 4px rgba(128, 128, 128, .5);
+  background-color: var(--theme-sidebar-background);
+}
+
+
+%include toolbars.inc.css
diff --git a/browser/themes/shared/devtools/markup-view.css b/browser/themes/shared/devtools/markup-view.css
new file mode 100644
index 000000000..e1912d863
--- /dev/null
+++ b/browser/themes/shared/devtools/markup-view.css
@@ -0,0 +1,100 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.more-nodes {
+  padding-left: 16px;
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #CCC;
+}
+
+
+/* Selected nodes in the tree should have light selected text.
+   theme-selected doesn't work in this case since the text is a
+   sibling of the class, not a child. */
+.theme-selected ~ .editor,
+.theme-selected ~ .editor .theme-fg-color1,
+.theme-selected ~ .editor .theme-fg-color2,
+.theme-selected ~ .editor .theme-fg-color3,
+.theme-selected ~ .editor .theme-fg-color4,
+.theme-selected ~ .editor .theme-fg-color5,
+.theme-selected ~ .editor .theme-fg-color6,
+.theme-selected ~ .editor .theme-fg-color7 {
+  color: var(--theme-selection-color);
+}
+
+/* In case a node isn't displayed in the page, we fade the syntax highlighting */
+.not-displayed .open,
+.not-displayed .close {
+  opacity: .7;
+}
+
+.tag-line {
+  padding-left: 2px;
+}
+
+/* Preview */
+
+#previewbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 90px;
+  background: black;
+  border-left: 1px solid;
+  border-bottom: 1px solid;
+  overflow: hidden;
+}
+
+#previewbar {
+  background: var(--theme-tab-toolbar-background);
+  border-color: var(--theme-splitter-color);
+}
+
+#preview {
+  position: absolute;
+  top: 0;
+  right: 5px;
+  width: 80px;
+  height: 100%;
+  background-image: -moz-element(#root);
+  background-repeat: no-repeat;
+}
+
+#previewbar.hide,
+#previewbar.disabled {
+  display: none;
+}
+
+#viewbox {
+  position: absolute;
+  top: 0;
+  right: 5px;
+  width: 80px;
+  border: 1px dashed #888;
+  background: rgba(205,205,255,0.2);
+  outline: 1px solid transparent;
+}
+
+/* Events */
+.markupview-events {
+  font-size: 8px;
+  font-weight: bold;
+  line-height: 10px;
+  border-radius: 3px;
+  padding: 0px 2px;
+  -moz-margin-start: 5px;
+  -moz-user-select: none;
+}
+
+.markupview-events {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
+}
diff --git a/browser/themes/shared/devtools/netmonitor.inc.css b/browser/themes/shared/devtools/netmonitor.inc.css
new file mode 100644
index 000000000..d2c893e00
--- /dev/null
+++ b/browser/themes/shared/devtools/netmonitor.inc.css
@@ -0,0 +1,858 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+#requests-menu-empty-notice {
+  margin: 0;
+  padding: 12px;
+  font-size: 120%;
+}
+
+#notice-perf-message {
+  margin-top: 2px;
+}
+
+#requests-menu-perf-notice-button {
+  min-width: 30px;
+  min-height: 26px;
+  margin: 0;
+  list-style-image: url(profiler-stopwatch.svg);
+}
+
+#requests-menu-perf-notice-button .button-text {
+  display: none;
+}
+
+#requests-menu-reload-notice-button {
+  min-height: 26px;
+  margin: 0;
+}
+
+%filter substitution
+%define table_itemDarkStartBorder rgba(0,0,0,0.2)
+%define table_itemDarkEndBorder rgba(128,128,128,0.15)
+%define table_itemLightStartBorder rgba(128,128,128,0.25)
+%define table_itemLightEndBorder transparent
+
+/* Network requests table */
+
+#requests-menu-toolbar {
+  padding: 0;
+}
+
+.requests-menu-header:first-child,
+.requests-menu-subitem:first-child {
+  -moz-padding-start: 6px;
+}
+
+.requests-menu-subitem {
+  padding: 3px;
+}
+
+.theme-dark .requests-menu-header:not(:last-child),
+.theme-dark .requests-menu-subitem:not(:last-child) {
+  -moz-border-end: 1px solid @table_itemDarkStartBorder@;
+  box-shadow: 1px 0 0 @table_itemDarkEndBorder@;
+}
+
+.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 @table_itemDarkEndBorder@;
+}
+
+.theme-light .requests-menu-header:not(:last-child),
+.theme-light .requests-menu-subitem:not(:last-child) {
+  -moz-border-end: 1px solid @table_itemLightStartBorder@;
+  box-shadow: 1px 0 0 @table_itemLightEndBorder@;
+}
+
+.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 @table_itemLightEndBorder@;
+}
+
+.requests-menu-header-button {
+  -moz-appearance: none;
+  background: none;
+  min-width: 1px;
+  min-height: 24px;
+  margin: 0;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-weight: inherit !important;
+  transition: background-color 0.1s ease-in-out;
+}
+
+.requests-menu-header-button:hover {
+  background: rgba(0,0,0,0.10);
+}
+
+.requests-menu-header-button:hover:active {
+  background: rgba(0,0,0,0.25);
+}
+
+.requests-menu-header-button:not(:active)[sorted] {
+  background: rgba(0,0,0,0.15);
+}
+
+.requests-menu-header-button:not(:active)[sorted=ascending] {
+  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+}
+
+.requests-menu-header-button:not(:active)[sorted=descending] {
+  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+
+/* Network requests table: specific column dimensions */
+
+.requests-menu-status-and-method {
+  width: 12em;
+}
+
+.requests-menu-status {
+  width: 20px;
+  height: 10px;
+}
+
+.requests-menu-method {
+  text-align: center;
+  font-weight: 600;
+}
+
+.requests-menu-icon-and-file {
+  width: 20vw;
+  min-width: 4em;
+}
+
+.requests-menu-icon {
+  background: #fff;
+  width: calc(1em + 4px);
+  height: calc(1em + 4px);
+  margin: -4px 0px;
+  -moz-margin-end: 4px;
+}
+
+.theme-dark .requests-menu-icon {
+  outline: 1px solid @table_itemDarkStartBorder@;
+}
+
+.theme-light .requests-menu-icon {
+  outline: 1px solid @table_itemLightStartBorder@;
+}
+
+.requests-menu-file {
+  text-align: start;
+}
+
+.requests-menu-security-and-domain {
+  width: 14vw;
+  min-width: 10em;
+}
+
+.requests-security-state-icon {
+  -moz-margin-end: 4px;
+  -moz-image-region:rect(0px, 16px, 16px, 0px);
+}
+
+.requests-security-state-icon:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+.requests-security-state-icon:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+.security-state-insecure {
+  list-style-image: url(chrome://browser/skin/identity-icons-generic.png);
+}
+
+.security-state-secure {
+  cursor: pointer;
+  list-style-image: url(chrome://browser/skin/identity-icons-https.png);
+}
+
+.security-state-weak {
+  cursor: pointer;
+  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-display.png);
+}
+
+.security-state-broken {
+  cursor: pointer;
+  list-style-image: url(chrome://browser/skin/identity-icons-https-mixed-active.png);
+}
+
+.requests-menu-type {
+  text-align: center;
+  width: 4em;
+}
+
+.requests-menu-size {
+  text-align: center;
+  width: 8em;
+}
+
+.requests-menu-transferred {
+  text-align: center;
+  width: 8em;
+}
+
+/* Network requests table: status codes */
+
+box.requests-menu-status {
+  background: #fff;
+  width: 10px;
+  -moz-margin-start: 5px;
+  -moz-margin-end: 5px;
+  border-radius: 10px;
+  transition: box-shadow 0.5s ease-in-out;
+}
+
+label.requests-menu-status-code {
+  -moz-margin-start: 3px !important;
+  width: 3em;
+  -moz-margin-end: -3em !important;
+}
+
+.theme-dark box.requests-menu-status:not([code]) {
+  background-color: rgba(95, 115, 135, 1); /* dark grey */
+}
+
+.theme-light box.requests-menu-status:not([code]) {
+  background-color: rgba(143, 161, 178, 1); /* grey */
+}
+
+.theme-dark box.requests-menu-status[code^="1"] {
+  background-color: rgba(70, 175, 227, 1); /* light blue */
+}
+
+.theme-light box.requests-menu-status[code^="1"] {
+  background-color: rgba(0, 136, 204, 1); /* light blue */
+}
+
+.theme-dark box.requests-menu-status[code^="2"] {
+  background-color: rgba(112, 191, 83, 1); /* green */
+}
+
+.theme-light box.requests-menu-status[code^="2"] {
+  background-color: rgba(44, 187, 15, 1); /* green */
+}
+
+/* 3xx are triangles */
+.theme-dark box.requests-menu-status[code^="3"] {
+  background-color: transparent;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 10px solid rgba(217, 155, 40, 1); /* light orange */
+  border-radius: 0;
+}
+
+.theme-light box.requests-menu-status[code^="3"] {
+  background-color: transparent;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 10px solid rgba(217, 126, 0, 1); /* light orange */
+  border-radius: 0;
+}
+
+/* 4xx and 5xx are squares - error codes */
+.theme-dark box.requests-menu-status[code^="4"] {
+  background-color: rgba(235, 83, 104, 1); /* red */
+  border-radius: 0; /* squares */
+}
+
+.theme-light box.requests-menu-status[code^="4"] {
+  background-color: rgba(237, 38, 85, 1); /* red */
+  border-radius: 0; /* squares */
+}
+
+.theme-dark box.requests-menu-status[code^="5"] {
+  background-color: rgba(223, 128, 255, 1); /* pink? */
+  border-radius: 0;
+  transform: rotate(45deg);
+}
+
+.theme-light box.requests-menu-status[code^="5"] {
+  background-color: rgba(184, 46, 229, 1); /* pink! */
+  border-radius: 0;
+  transform: rotate(45deg);
+}
+
+/* Network requests table: waterfall header */
+
+#requests-menu-waterfall-label {
+  -moz-padding-start: 8px;
+  -moz-padding-end: 8px;
+}
+
+.requests-menu-timings-division {
+  width: 100px;
+  padding-top: 2px;
+  -moz-padding-start: 4px;
+  font-size: 75%;
+  pointer-events: none;
+}
+
+.requests-menu-timings-division:not(:first-child) {
+  -moz-border-start: 1px dotted;
+  -moz-margin-start: -100px !important; /* Don't affect layout. */
+}
+
+.requests-menu-timings-division:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-division:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.theme-dark .requests-menu-timings-division[division-scale=millisecond] {
+  -moz-border-start-color: var(--theme-selection-color) !important;
+}
+
+.theme-light .requests-menu-timings-division[division-scale=millisecond] {
+  -moz-border-start-color: var(--theme-body-color-alt) !important;
+}
+
+.theme-dark .requests-menu-timings-division[division-scale=second] {
+  -moz-border-start-color: var(--theme-selection-color) !important;
+  font-weight: 600;
+}
+
+.theme-light .requests-menu-timings-division[division-scale=second] {
+  -moz-border-start-color: var(--theme-body-color-alt) !important;
+  font-weight: 600;
+}
+
+.theme-dark .requests-menu-timings-division[division-scale=minute] {
+  -moz-border-start-color: var(--theme-selection-color) !important;
+  font-weight: 600;
+}
+
+.theme-light .requests-menu-timings-division[division-scale=minute] {
+  -moz-border-start-color: var(--theme-body-color-alt) !important;
+  font-weight: 600;
+}
+
+/* Network requests table: waterfall items */
+
+.requests-menu-subitem.requests-menu-waterfall {
+  -moz-padding-start: 0px;
+  -moz-padding-end: 4px;
+  /* Background created on a <canvas> in js. */
+  /* @see browser/devtools/netmonitor/netmonitor-view.js */
+  background-image: -moz-element(#waterfall-background);
+  background-repeat: repeat-y;
+  background-position: -1px center;
+}
+
+.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
+  background-position: right center;
+}
+
+.requests-menu-timings:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.requests-menu-timings-total {
+  -moz-padding-start: 4px;
+  font-size: 85%;
+  font-weight: 600;
+}
+
+.requests-menu-timings-box {
+  height: 9px;
+}
+
+.requests-menu-timings-box.blocked {
+  background-color: rgba(235, 83, 104, 0.8); /* red */
+}
+
+.requests-menu-timings-box.dns {
+  background-color: rgba(223, 128, 255, 0.8); /* pink */
+}
+
+.requests-menu-timings-box.connect {
+  background-color: rgba(217, 102, 41, 0.8); /* orange */
+}
+
+/* Use custom colors for dark and light theme on remaining timing types. */
+.theme-dark .requests-menu-timings-box.send {
+  background-color: rgba(70, 175, 227, 0.8); /* light blue */
+}
+
+.theme-light .requests-menu-timings-box.send {
+  background-color: rgba(0, 136, 204, 0.8); /* blue */
+}
+
+.theme-dark .requests-menu-timings-box.wait {
+  background-color: rgba(94, 136, 176, 0.8); /* blue grey */
+}
+
+.theme-light .requests-menu-timings-box.wait {
+  background-color: rgba(95, 136, 176, 0.8); /* blue grey */
+}
+
+.theme-dark .requests-menu-timings-box.receive {
+  background-color: rgba(112, 191, 83, 0.8); /* green */
+}
+
+.theme-light .requests-menu-timings-box.receive {
+  background-color: rgba(44, 187, 15, 0.8); /* green */
+}
+
+/* SideMenuWidget */
+
+.side-menu-widget-item-contents {
+  padding: 0px;
+}
+
+.theme-dark .side-menu-widget-item:not(.selected)[odd] {
+  background: rgba(255,255,255,0.05);
+}
+
+.theme-light .side-menu-widget-item:not(.selected)[odd] {
+  background: rgba(128,128,128,0.05);
+}
+
+/* Network request details */
+
+#details-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border-color: transparent;
+  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#details-pane-toggle > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#details-pane-toggle[pane-collapsed] {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
+}
+
+#details-pane-toggle:active {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 2dppx) {
+  #details-pane-toggle {
+    list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png");
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #details-pane-toggle[pane-collapsed] {
+    list-style-image: url("chrome://browser/skin/devtools/debugger-expand@2x.png");
+  }
+
+  #details-pane-toggle:active {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+/* Network request details tabpanels */
+
+.theme-dark .tabpanel-content {
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-selection-color);
+}
+
+/* Summary tabpanel */
+
+.tabpanel-summary-container {
+  padding: 1px;
+}
+
+.tabpanel-summary-label {
+  -moz-padding-start: 4px;
+  -moz-padding-end: 3px;
+  font-weight: 600;
+}
+
+.tabpanel-summary-value {
+  color: inherit;
+  -moz-padding-start: 3px;
+}
+
+/* Headers tabpanel */
+
+#headers-summary-status,
+#headers-summary-version {
+  padding-bottom: 2px;
+}
+
+#headers-summary-size {
+  padding-top: 2px;
+}
+
+#headers-summary-resend {
+  margin-top: -10px;
+  -moz-margin-end: 6px;
+}
+
+#toggle-raw-headers {
+  margin-top: -10px;
+  -moz-margin-end: 6px;
+}
+
+.raw-response-textarea {
+  height: 50vh;
+}
+
+/* Response tabpanel */
+
+#response-content-info-header {
+  margin: 0;
+  padding: 3px 8px;
+  background-color: var(--theme-highlight-red);
+  color: var(--theme-selection-color);
+}
+
+#response-content-image-box {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+#response-content-image {
+  background: #fff;
+  border: 1px dashed GrayText;
+  margin-bottom: 10px;
+}
+
+/* Preview tabpanel */
+
+#preview-tabpanel {
+  background: #fff;
+}
+
+#response-preview {
+  display: -moz-box;
+  -moz-box-flex: 1;
+}
+
+/* Timings tabpanel */
+
+#timings-tabpanel .tabpanel-summary-label {
+  width: 10em;
+}
+
+#timings-tabpanel .requests-menu-timings-box {
+  transition: transform 0.2s ease-out;
+  border: none;
+  min-width: 1px;
+}
+
+#timings-tabpanel .requests-menu-timings-total {
+  transition: transform 0.2s ease-out;
+}
+
+/* Security tabpanel */
+.security-info-section {
+  -moz-padding-start: 1em;
+}
+
+#security-tabpanel {
+  overflow: auto;
+}
+
+.security-warning-icon {
+  background-image: url(alerticon-warning.png);
+  background-size: 13px 12px;
+  -moz-margin-start: 5px;
+  vertical-align: top;
+  width: 13px;
+  height: 12px;
+}
+
+@media (min-resolution: 2dppx) {
+  .security-warning-icon {
+    background-image: url(alerticon-warning@2x.png);
+  }
+}
+
+/* Custom request form */
+
+#custom-pane {
+  padding: 0.6em 0.5em;
+}
+
+.custom-header {
+  font-size: 1.1em;
+}
+
+.custom-section {
+  margin-top: 0.5em;
+}
+
+#custom-method-value {
+  width: 4.5em;
+}
+
+/* Footer */
+
+.theme-dark #requests-menu-footer {
+  border-top: 1px solid @table_itemDarkStartBorder@;
+  box-shadow: 0 1px 0 @table_itemDarkEndBorder@ inset;
+  background-color: var(--theme-toolbar-background);
+}
+
+.theme-light #requests-menu-footer {
+  border-top: 1px solid @table_itemLightStartBorder@;
+  box-shadow: 0 1px 0 @table_itemLightEndBorder@ inset;
+  background-color: var(--theme-toolbar-background);
+}
+
+.requests-menu-footer-button,
+.requests-menu-footer-label {
+  min-width: 1em;
+  margin: 0;
+  border: none;
+  padding: 2px 1vw;
+}
+
+.theme-dark .requests-menu-footer-button,
+.theme-dark .requests-menu-footer-label {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .requests-menu-footer-button,
+.theme-light .requests-menu-footer-label {
+  color: var(--theme-body-color);
+}
+
+.requests-menu-footer-spacer {
+  min-width: 2px;
+}
+
+.theme-dark .requests-menu-footer-spacer:not(:first-child),
+.theme-dark .requests-menu-footer-button:not(:first-child) {
+  -moz-border-start: 1px solid @table_itemDarkEndBorder@;
+  box-shadow: -1px 0 0 @table_itemDarkStartBorder@;
+}
+
+.theme-light .requests-menu-footer-spacer:not(:first-child),
+.theme-light .requests-menu-footer-button:not(:first-child) {
+  -moz-border-start: 1px solid @table_itemLightEndBorder@;
+  box-shadow: -1px 0 0 @table_itemLightStartBorder@;
+}
+
+.requests-menu-footer-button {
+  -moz-appearance: none;
+  background: rgba(0,0,0,0.025);
+}
+
+.requests-menu-footer-button:hover {
+  background: rgba(0,0,0,0.10);
+}
+
+.theme-dark .requests-menu-footer-button:hover:active {
+  background-color: rgba(29,79,115,0.4); /* Select Highlight Blue at 40% opacity */
+}
+
+.theme-light .requests-menu-footer-button:hover:active {
+  background-color: rgba(76,158,217,0.4); /* Select Highlight Blue at 40% opacity */
+}
+
+.theme-dark .requests-menu-footer-button:not(:active)[checked] {
+  background-color: rgba(29,79,115,1); /* Select Highlight Blue */
+  color: rgba(245,247,250,1); /* Light foreground text */
+}
+
+.theme-light .requests-menu-footer-button:not(:active)[checked] {
+  background-color: rgba(76,158,217,1); /* Select Highlight Blue */
+  color: rgba(245,247,250,1); /* Light foreground text */
+}
+
+.requests-menu-footer-label {
+  padding-top: 3px;
+  font-weight: 600;
+}
+
+/* Performance analysis buttons */
+
+#requests-menu-network-summary-button {
+  background: none;
+  box-shadow: none;
+  border-color: transparent;
+  list-style-image: url(profiler-stopwatch.svg);
+  -moz-padding-end: 0;
+  cursor: pointer;
+}
+
+#requests-menu-network-summary-label {
+  -moz-padding-start: 0;
+  cursor: pointer;
+}
+
+#requests-menu-network-summary-label:hover {
+  text-decoration: underline;
+}
+
+/* Performance analysis view */
+
+#network-statistics-toolbar {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+#network-statistics-back-button {
+  min-width: 4em;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-top: none;
+  border-bottom: none;
+  -moz-border-start: none;
+}
+
+#network-statistics-view-splitter {
+  border-color: rgba(0,0,0,0.2);
+  cursor: default;
+  pointer-events: none;
+}
+
+#network-statistics-charts {
+  min-height: 1px;
+}
+
+#network-statistics-charts {
+  background-color: var(--theme-toolbar-background);
+}
+
+#network-statistics-charts .pie-chart-container {
+  -moz-margin-start: 3vw;
+  -moz-margin-end: 1vw;
+}
+
+#network-statistics-charts .table-chart-container {
+  -moz-margin-start: 1vw;
+  -moz-margin-end: 3vw;
+}
+
+.chart-colored-blob[name=html] {
+  fill: var(--theme-highlight-bluegrey);
+  background: var(--theme-highlight-bluegrey);
+}
+
+.chart-colored-blob[name=css] {
+  fill: var(--theme-highlight-blue);
+  background: var(--theme-highlight-blue);
+}
+
+.chart-colored-blob[name=js] {
+  fill: var(--theme-highlight-lightorange);
+  background: var(--theme-highlight-lightorange);
+}
+
+.chart-colored-blob[name=xhr] {
+  fill: var(--theme-highlight-orange);
+  background: var(--theme-highlight-orange);
+}
+
+.chart-colored-blob[name=fonts] {
+  fill: var(--theme-highlight-purple);
+  background: var(--theme-highlight-purple);
+}
+
+.chart-colored-blob[name=images] {
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);
+}
+
+.chart-colored-blob[name=media] {
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
+}
+
+.chart-colored-blob[name=flash] {
+  fill: var(--theme-highlight-red);
+  background: var(--theme-highlight-red);
+}
+
+.table-chart-row-label[name=cached] {
+  display: none;
+}
+
+.table-chart-row-label[name=count] {
+  width: 3em;
+  text-align: end;
+}
+
+.table-chart-row-label[name=label] {
+  width: 7em;
+}
+
+.table-chart-row-label[name=size] {
+  width: 7em;
+}
+
+.table-chart-row-label[name=time] {
+  width: 7em;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #requests-menu-toolbar {
+    height: 22px;
+  }
+
+  .requests-menu-header-button {
+    min-height: 20px;
+  }
+
+  #details-pane {
+    margin: 0 !important;
+    /* To prevent all the margin hacks to hide the sidebar. */
+  }
+
+  .requests-menu-status-and-method {
+    width: 16vw;
+  }
+
+  .requests-menu-icon-and-file {
+    width: 30vw;
+  }
+
+  .requests-menu-security-and-domain {
+    width: 30vw;
+  }
+
+  .requests-menu-type {
+    width: 8vw;
+  }
+
+  .requests-menu-size {
+    width: 16vw;
+    border-width: 0 !important;
+    box-shadow: none !important;
+    /* The "Timeline" header is not visible anymore, and thus the
+       right border and box-shadow of "Size" column should be hidden. */
+  }
+}
diff --git a/browser/themes/shared/devtools/performance.inc.css b/browser/themes/shared/devtools/performance.inc.css
new file mode 100644
index 000000000..52a85ecca
--- /dev/null
+++ b/browser/themes/shared/devtools/performance.inc.css
@@ -0,0 +1,451 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* CSS Variables specific to this panel that aren't defined by the themes */
+.theme-dark {
+  --cell-border-color: rgba(255,255,255,0.15);
+  --focus-cell-border-color: rgba(255,255,255,0.5);
+  --row-alt-background-color: rgba(29,79,115,0.15);
+  --row-hover-background-color: rgba(29,79,115,0.25);
+}
+
+.theme-light {
+  --cell-border-color: rgba(0,0,0,0.15);
+  --focus-cell-border-color: rgba(0,0,0,0.3);
+  --row-alt-background-color: rgba(76,158,217,0.1);
+  --row-hover-background-color: rgba(76,158,217,0.2);
+}
+
+/* Toolbar */
+
+#performance-toolbar > tabs,
+#performance-toolbar {
+  -moz-border-end-color: var(--theme-splitter-color);
+}
+
+#performance-toolbar-controls-detail-views > toolbarbutton {
+  min-width: 0;
+}
+
+#performance-toolbar-controls-detail-views .toolbarbutton-text {
+  -moz-padding-start: 4px;
+  -moz-padding-end: 8px;
+}
+
+/* Recording Notice */
+
+#performance-view .notice-container {
+  font-size: 120%;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color);
+  padding-bottom: 20vh;
+}
+
+#performance-view .notice-container button {
+  min-width: 30px;
+  min-height: 28px;
+  margin: 0;
+}
+
+/* Overview Panel */
+
+.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;
+}
+
+.record-button .button-icon {
+  margin: 0;
+}
+
+.record-button .button-text {
+  display: none;
+}
+
+/* Details Panel */
+
+#select-waterfall-view {
+  list-style-image: url(performance-icons.svg#details-waterfall);
+}
+
+#select-js-calltree-view,
+#select-memory-calltree-view {
+  list-style-image: url(performance-icons.svg#details-call-tree);
+}
+
+#select-js-flamegraph-view,
+#select-memory-flamegraph-view {
+  list-style-image: url(performance-icons.svg#details-flamegraph);
+}
+
+/* Profile call tree */
+
+.call-tree-cells-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+  overflow: auto;
+}
+
+.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="allocations"],
+.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"],
+.call-tree-cells-container[categories-hidden] .call-tree-category {
+  display: none;
+}
+
+.call-tree-header {
+  font-size: 90%;
+  padding-top: 2px !important;
+  padding-bottom: 2px !important;
+}
+
+.call-tree-header[type="duration"],
+.call-tree-cell[type="duration"],
+.call-tree-header[type="self-duration"],
+.call-tree-cell[type="self-duration"] {
+  width: 6vw;
+}
+
+.call-tree-header[type="percentage"],
+.call-tree-cell[type="percentage"],
+.call-tree-header[type="self-percentage"],
+.call-tree-cell[type="self-percentage"] {
+  width: 5vw;
+}
+
+.call-tree-header[type="samples"],
+.call-tree-cell[type="samples"] {
+  width: 4.5vw;
+}
+
+.call-tree-header[type="allocations"],
+.call-tree-cell[type="allocations"],
+.call-tree-header[type="self-allocations"],
+.call-tree-cell[type="self-allocations"] {
+  width: 7vw;
+}
+
+.call-tree-header[type="function"],
+.call-tree-cell[type="function"] {
+  -moz-box-flex: 1;
+}
+
+.call-tree-header,
+.call-tree-cell {
+  -moz-box-align: center;
+  overflow: hidden;
+  padding: 1px 4px;
+  color: var(--theme-body-color);
+  -moz-border-end-color: var(--cell-border-color);
+}
+
+.call-tree-header:not(:last-child),
+.call-tree-cell:not(:last-child) {
+  -moz-border-end-width: 1px;
+  -moz-border-end-style: solid;
+}
+
+.call-tree-header:not(:last-child) {
+  text-align: center;
+}
+
+.call-tree-cell:not(:last-child) {
+  text-align: end;
+}
+
+.call-tree-header {
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.call-tree-item:last-child:not(:focus) {
+  border-bottom: 1px solid var(--cell-border-color);
+}
+
+.call-tree-item:nth-child(2n) {
+  background-color: var(--row-alt-background-color);
+}
+
+.call-tree-item:hover {
+  background-color: var(--row-hover-background-color);
+}
+
+.call-tree-item:focus {
+  background-color: var(--theme-selection-background);
+}
+
+.call-tree-item:focus label {
+  color: var(--theme-selection-color) !important;
+}
+
+.call-tree-item:focus .call-tree-cell {
+  -moz-border-end-color: var(--focus-cell-border-color);
+}
+
+.call-tree-item:not([origin="content"]) .call-tree-name,
+.call-tree-item:not([origin="content"]) .call-tree-url,
+.call-tree-item:not([origin="content"]) .call-tree-line,
+.call-tree-item:not([origin="content"]) .call-tree-column {
+  /* Style chrome and non-JS nodes differently. */
+  opacity: 0.6;
+}
+
+.call-tree-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: 2dppx) {
+  .theme-dark .call-tree-zoom {
+    background-image: url(magnifying-glass@2x.png);
+  }
+
+  .theme-light .call-tree-zoom {
+    background-image: url(magnifying-glass-light@2x.png);
+  }
+}
+
+.call-tree-item:hover .call-tree-zoom {
+  transition: opacity 0.3s ease-in;
+  opacity: 1;
+}
+
+.call-tree-item:hover .call-tree-zoom:hover {
+  opacity: 0;
+}
+
+.call-tree-category {
+  transform: scale(0.75);
+  transform-origin: center right;
+}
+
+/**
+ * Details Waterfall Styles
+ */
+
+.waterfall-list-contents {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.waterfall-header-contents {
+  overflow-x: hidden;
+}
+
+.waterfall-background-ticks {
+  /* Background created on a <canvas> in js. */
+  /* @see browser/devtools/timeline/widgets/waterfall.js */
+  background-image: -moz-element(#waterfall-background);
+  background-repeat: repeat-y;
+  background-position: -1px center;
+}
+
+.waterfall-marker-container[is-spacer] {
+  pointer-events: none;
+}
+
+.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
+  background-color: rgba(255,255,255,0.03);
+}
+
+.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
+  background-color: rgba(128,128,128,0.03);
+}
+
+.theme-dark .waterfall-marker-container:hover {
+  background-color: rgba(255,255,255,0.1) !important;
+}
+
+.theme-light .waterfall-marker-container:hover {
+  background-color: rgba(128,128,128,0.1) !important;
+}
+
+.waterfall-marker-item {
+  overflow: hidden;
+}
+
+.waterfall-sidebar {
+  -moz-border-end: 1px solid var(--theme-splitter-color);
+}
+
+.waterfall-marker-container:hover > .waterfall-sidebar {
+  background-color: transparent;
+}
+
+.waterfall-header-name {
+  padding: 2px 4px;
+  font-size: 90%;
+}
+
+.waterfall-header-tick {
+  width: 100px;
+  font-size: 9px;
+  transform-origin: left center;
+  color: var(--theme-body-color);
+}
+
+.waterfall-header-tick:not(:first-child) {
+  -moz-margin-start: -100px !important; /* Don't affect layout. */
+}
+
+.waterfall-marker-bullet {
+  width: 8px;
+  height: 8px;
+  -moz-margin-start: 8px;
+  -moz-margin-end: 6px;
+  border: 1px solid;
+  border-radius: 1px;
+}
+
+.waterfall-marker-name {
+  font-size: 95%;
+  padding-bottom: 1px !important;
+}
+
+.waterfall-marker-bar {
+  height: 9px;
+  border: 1px solid;
+  border-radius: 1px;
+  transform-origin: left center;
+}
+
+.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-container.selected .waterfall-marker-bullet,
+.waterfall-marker-container.selected .waterfall-marker-bar {
+  border-color: initial !important;
+}
+
+.waterfall-marker-location {
+   color: -moz-nativehyperlinktext;
+}
+
+.waterfall-marker-location:hover,
+.waterfall-marker-location:focus {
+   text-decoration: underline;
+}
+
+#waterfall-details {
+  -moz-padding-start: 8px;
+  -moz-padding-end: 8px;
+  padding-top: 2vh;
+  overflow: auto;
+}
+
+.marker-details-bullet {
+  width: 8px;
+  height: 8px;
+  border: 1px solid;
+  border-radius: 1px;
+}
+
+#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;
+}
diff --git a/browser/themes/shared/devtools/profiler.inc.css b/browser/themes/shared/devtools/profiler.inc.css
index a8849cfac..92c7ef3c8 100644
--- a/browser/themes/shared/devtools/profiler.inc.css
+++ b/browser/themes/shared/devtools/profiler.inc.css
@@ -1,43 +1,394 @@
-%if 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/. */
-%endif
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-.profiler-sidebar {
-  min-width: 196px;
+/* 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);
 }
 
-.profiler-sidebar + .devtools-side-splitter {
-  -moz-border-start-color: transparent;
+.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);
 }
 
-.profiler-sidebar-item {
-  padding: 3px 5px;
+/* 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: 2dppx) {
+  .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[allocations-hidden] .call-tree-cell[type="allocations"],
+.call-tree-cells-container[allocations-hidden] .call-tree-cell[type="self-allocations"],
+.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;
 }
 
-.profiler-sidebar-item > h3 {
-  font-size: 13px;
-  display: block;
+.call-tree-url {
+  color: var(--theme-highlight-blue);
 }
 
-.profiler-sidebar-item > span {
-  margin-top: 2px;
-  color: rgb(140, 152, 165);
+.call-tree-line {
+  color: var(--theme-highlight-orange);
 }
 
-.selected .profiler-sidebar-item > span {
-  color: rgb(128, 195, 228);
+.call-tree-column {
+  color: var(--theme-highlight-orange);
+  opacity: 0.6;
 }
 
-.devtools-toolbar {
-  height: 26px;
-  padding: 3px;
+.call-tree-host {
+  -moz-margin-start: 8px !important;
+  font-size: 90%;
+  color: var(--theme-content-color2);
 }
 
-.devtools-toolbar .devtools-toolbarbutton {
-  min-width: 48px;
-  min-height: 0;
-  font-size: 11px;
-  padding: 0px 8px;
-}
-\ No newline at end of file
+.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: 2dppx) {
+  .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;
+}
diff --git a/browser/themes/shared/devtools/projecteditor/projecteditor.css b/browser/themes/shared/devtools/projecteditor/projecteditor.css
new file mode 100644
index 000000000..9ea540eee
--- /dev/null
+++ b/browser/themes/shared/devtools/projecteditor/projecteditor.css
@@ -0,0 +1,188 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+ :root {
+  color: #18191a;
+}
+
+.view-project-detail {
+  overflow: auto;
+}
+
+.plugin-hidden {
+  display: none;
+}
+
+.arrow {
+  -moz-appearance: treetwisty;
+  width: 20px;
+  height: 20px;
+}
+
+.arrow[open] {
+  -moz-appearance: treetwistyopen;
+}
+
+.arrow[invisible] {
+  visibility: hidden;
+}
+
+#projecteditor-menubar {
+  display: none;
+}
+
+#projecteditor-toolbar,
+#projecteditor-toolbar-bottom {
+  display: none; /* For now don't show the status bars */
+  min-height: 22px;
+  height: 22px;
+  background: rgb(237, 237, 237);
+}
+
+#sources {
+  overflow: auto;
+}
+
+.sources-tree {
+  overflow:auto;
+  overflow-x: hidden;
+  -moz-user-focus: normal;
+
+  /* Allows this to expand inside of parent xul element, while
+     still supporting child flexbox elements, including ellipses. */
+  -moz-box-flex: 1;
+  display: block;
+}
+
+.sources-tree input {
+  margin: 2px;
+  border: 1px solid gray;
+}
+
+#main-deck .sources-tree {
+  background: rgb(225, 225, 225);
+  min-width: 100px;
+}
+
+.entry {
+  color: #18191A;
+  display: flex;
+  align-items: center;
+}
+
+.entry .file-label {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.entry {
+  border: none;
+  box-shadow: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.entry:hover:not(.entry-group-title):not(.selected) {
+  background: rgba(0, 0, 0, .05);
+}
+
+.entry.selected {
+  background: rgba(56, 117, 215, 1);
+  color: #F5F7FA;
+  outline: none;
+}
+
+.entry-group-title {
+  background: rgba(56, 117, 215, 0.8);
+  color: #F5F7FA;
+  font-weight: bold;
+  font-size: 1.05em;
+  line-height: 35px;
+  padding: 0 10px;
+}
+
+.sources-tree .entry-group-title .expander {
+  display: none;
+}
+
+.entry .expander {
+  width: 16px;
+  padding: 0;
+}
+
+.tree-collapsed .children {
+  display: none;
+}
+
+/* Plugins */
+
+#projecteditor-toolbar textbox {
+  margin: 0;
+}
+
+.projecteditor-basic-display {
+  padding: 0 3px;
+}
+
+/* App Manager */
+.project-name-label {
+  font-weight: bold;
+  padding-left: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.project-flex {
+  flex: 1;
+}
+
+.project-image {
+  max-height: 25px;
+  margin-left: -10px;
+}
+
+.project-image,
+.project-status,
+.project-options {
+  flex-shrink: 0;
+}
+
+.project-status {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  border: solid 1px rgba(255, 255, 255, .5);
+  margin-right: 10px;
+  visibility: hidden;
+}
+
+.project-status[status=valid] {
+  background: #70bf53;
+  visibility: visible;
+}
+
+.project-status[status=warning] {
+  background: #d99b28;
+  visibility: visible;
+}
+
+.project-status[status=error] {
+  background: #ed2655;
+  visibility: visible;
+}
+
+/* Status Bar */
+.projecteditor-file-label {
+  font-weight: bold;
+  padding-left: 29px;
+  padding-right: 10px;
+  flex: 1;
+}
+
+/* Image View */
+.editor-image {
+  padding: 10px;
+}
diff --git a/browser/themes/shared/devtools/responsivedesign.inc.css b/browser/themes/shared/devtools/responsivedesign.inc.css
index db349bdef..9a7bead7a 100644
--- a/browser/themes/shared/devtools/responsivedesign.inc.css
+++ b/browser/themes/shared/devtools/responsivedesign.inc.css
@@ -7,7 +7,7 @@
 /* Responsive Mode */
 
 .browserContainer[responsivemode] {
-  background: #222 url("chrome://browser/skin/devtools/responsive-background.png");
+  background-color: #222;
   padding: 0 20px 20px 20px;
 }
 
@@ -16,17 +16,130 @@
 }
 
 .devtools-responsiveui-toolbar {
+  -moz-appearance: none;
   background: transparent;
+  /* text color is textColor from dark theme, since no theme is applied to
+   * the responsive toolbar.
+   */
+  color: hsl(210,30%,85%);
   margin: 10px 0;
   padding: 0;
   box-shadow: none;
   border-bottom-width: 0;
 }
 
-.devtools-responsiveui-toolbar > menulist,
-.devtools-responsiveui-toolbar > toolbarbutton {
-  min-width: 22px;
+.devtools-responsiveui-menulist,
+.devtools-responsiveui-toolbarbutton {
+  -moz-appearance: none;
+  -moz-box-align: center;
+  min-width: 32px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border: 1px solid hsla(210,8%,5%,.45);
   border-radius: 0;
+  background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
+  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
+  margin: 0 3px;
+  color: inherit;
+}
+
+.devtools-responsiveui-menulist .menulist-editable-box {
+  -moz-appearance: none;
+  background-color: transparent;
+}
+
+.devtools-responsiveui-menulist html|*.menulist-editable-input {
+  -moz-appearance: none;
+  color: inherit;
+  text-align: center;
+}
+
+.devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
+  background: hsla(212,7%,57%,.35);
+}
+
+.devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
+  -moz-box-orient: horizontal;
+}
+
+.devtools-responsiveui-menulist:-moz-focusring,
+.devtools-responsiveui-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.7);
+  outline-offset: -4px;
+}
+
+.devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
+  border-color: hsla(210,8%,5%,.6);
+  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-responsiveui-menulist[open=true],
+.devtools-responsiveui-toolbarbutton[open=true],
+.devtools-responsiveui-toolbarbutton[checked=true] {
+  border-color: hsla(210,8%,5%,.6) !important;
+  background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
+  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-responsiveui-toolbarbutton[checked=true] {
+  color: hsl(208,100%,60%);
+}
+
+.devtools-responsiveui-toolbarbutton[checked=true]:hover {
+  background-color: transparent !important;
+}
+
+.devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
+  background-color: hsla(210,8%,5%,.2) !important;
+}
+
+.devtools-responsiveui-menulist > .menulist-label-box {
+  text-align: center;
+}
+
+.devtools-responsiveui-menulist > .menulist-dropmarker {
+  -moz-appearance: none;
+  display: -moz-box;
+  background-color: transparent;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
+  -moz-box-align: center;
+  border-width: 0;
+  min-width: 16px;
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+  -moz-appearance: none;
+  color: inherit;
+  border-width: 0;
+  -moz-border-end: 1px solid hsla(210,8%,5%,.45);
+  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
+  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu-button] {
+  padding: 0 1px;
+  -moz-box-align: stretch;
+}
+
+.devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
+  -moz-box-align: center;
+  padding: 0 3px;
 }
 
 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
@@ -34,18 +147,190 @@
   margin-left: 0;
 }
 
-.devtools-responsiveui-resizebar {
+.devtools-responsiveui-close {
+  list-style-image: url("chrome://browser/skin/devtools/close.png");
+}
+
+.devtools-responsiveui-rotate {
+  list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
+}
+
+@media (min-resolution: 2dppx) {
+  .devtools-responsiveui-close {
+    list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
+  }
+
+  .devtools-responsiveui-rotate {
+    list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate@2x.png");
+  }
+}
+
+.devtools-responsiveui-touch {
+  list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+.devtools-responsiveui-touch[checked] {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+@media (min-resolution: 2dppx) {
+  .devtools-responsiveui-touch {
+    list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png");
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  .devtools-responsiveui-touch[checked] {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+}
+
+.devtools-responsiveui-screenshot {
+  list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
+}
+
+@media (min-resolution: 2dppx) {
+  .devtools-responsiveui-screenshot {
+    list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png");
+  }
+}
+
+.devtools-responsiveui-resizebarV {
   width: 7px;
   height: 24px;
   cursor: ew-resize;
   transform: translate(12px, -12px);
+  background-size: cover;
   background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
 }
 
+.devtools-responsiveui-resizebarH {
+  width: 24px;
+  height: 7px;
+  cursor: ns-resize;
+  transform: translate(-12px, 12px);
+  background-size: cover;
+  background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
+}
+
 .devtools-responsiveui-resizehandle {
   width: 16px;
   height: 16px;
   cursor: se-resize;
   transform: translate(12px, 12px);
+  background-size: cover;
   background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
 }
+
+/* FxOS custom mode with additional buttons and phone look'n feel */
+
+/* Hide devtools manual resizer */
+.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
+.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
+.browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
+  display: none;
+}
+
+/* Gives responsive mode a phone look'n feel */
+.browserStack[responsivemode].fxos-mode {
+  padding: 60px 15px 0;
+
+  border-radius: 25px / 20px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid #FFFFFF;
+  border-bottom-width: 0;
+
+  background-color: #353535;
+
+  box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
+
+  background-image: linear-gradient(to right, #111 11%, #333 56%);
+  min-width: 320px;
+}
+
+.devtools-responsiveui-hardware-buttons {
+  -moz-appearance: none;
+  padding: 20px;
+
+  border: 1px solid #FFFFFF;
+  border-bottom-left-radius: 25px;
+  border-bottom-right-radius: 25px;
+  border-top-width: 0;
+
+  box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
+
+  background-image: linear-gradient(to right, #111 11%, #333 56%);
+}
+
+.devtools-responsiveui-home-button {
+  width: 40px;
+  height: 30px;
+  list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png");
+}
+
+.devtools-responsiveui-sleep-button {
+  -moz-appearance: none;
+  /* compensate browserStack top padding */
+  margin-top: -67px;
+  margin-right: 10px;
+
+  min-width: 10px;
+  width: 50px;
+  height: 5px;
+
+  border: 1px solid #444;
+  border-top-right-radius: 12px;
+  border-top-left-radius: 12px;
+  border-bottom-color: transparent;
+
+  background-image: linear-gradient(to top, #111 11%, #333 56%);
+}
+
+.devtools-responsiveui-sleep-button:hover:active {
+  background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
+}
+
+.devtools-responsiveui-volume-buttons {
+  margin-left: -29px;
+}
+
+.devtools-responsiveui-volume-up-button,
+.devtools-responsiveui-volume-down-button {
+  -moz-appearance: none;
+  border: 1px solid red;
+  min-width: 8px;
+  height: 40px;
+
+  border: 1px solid #444;
+  border-right-color: transparent;
+
+  background-image: linear-gradient(to right, #111 11%, #333 56%);
+}
+
+.devtools-responsiveui-volume-up-button:hover:active,
+.devtools-responsiveui-volume-down-button:hover:active {
+  background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
+}
+
+.devtools-responsiveui-volume-up-button {
+  border-top-left-radius: 12px;
+}
+
+.devtools-responsiveui-volume-down-button {
+  border-bottom-left-radius: 12px;
+}
+
+@media (min-resolution: 2dppx) {
+  .devtools-responsiveui-resizebarV {
+    background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png");
+  }
+
+  .devtools-responsiveui-resizebarH {
+    background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer@2x.png");
+  }
+
+  .devtools-responsiveui-resizehandle {
+    background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png");
+  }
+}
diff --git a/browser/themes/shared/devtools/responsiveui-home.png b/browser/themes/shared/devtools/responsiveui-home.png
new file mode 100644
index 000000000..43379d0e9
--- /dev/null
+++ b/browser/themes/shared/devtools/responsiveui-home.png
diff --git a/browser/themes/shared/devtools/ruleview.css b/browser/themes/shared/devtools/ruleview.css
new file mode 100644
index 000000000..b0ade0f76
--- /dev/null
+++ b/browser/themes/shared/devtools/ruleview.css
@@ -0,0 +1,234 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.ruleview {
+  height: 100%;
+}
+
+.ruleview-rule-source {
+  -moz-padding-start: 5px;
+  text-align: end;
+  float: right;
+  -moz-user-select: none;
+}
+
+.ruleview-rule-source,
+.ruleview-rule-source > label {
+  cursor: pointer;
+}
+
+.ruleview-rule-source[unselectable],
+.ruleview-rule-source[unselectable] > label {
+  cursor: default;
+}
+
+.ruleview-rule-source:not([unselectable]):hover {
+  text-decoration: underline;
+}
+
+.ruleview-header {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+  border-top-style: solid;
+  border-bottom-style: solid;
+  padding: 1px 4px;
+  -moz-user-select: none;
+  word-wrap: break-word;
+%ifndef XP_MACOSX
+  margin-top: 4px;
+%endif
+}
+
+.ruleview-rule-pseudo-element {
+  padding-left:20px;
+  border-left: solid 10px;
+}
+
+.ruleview-rule,
+#noResults {
+  padding: 2px 4px;
+}
+
+/* User agent styles are not editable, display them differently */
+.ruleview-rule[uneditable=true] {
+  background: var(--theme-tab-toolbar-background);
+}
+
+.ruleview-rule[uneditable=true] :focus {
+  outline: none;
+}
+
+.ruleview-rule[uneditable=true] .theme-link {
+  color: var(--theme-highlight-bluegrey);
+}
+
+.ruleview-rule[uneditable=true] .ruleview-enableproperty {
+  visibility: hidden;
+}
+
+.ruleview-rule[uneditable=true] .ruleview-colorswatch,
+.ruleview-rule[uneditable=true] .ruleview-bezierswatch {
+  cursor: default;
+}
+
+
+.ruleview-rule[uneditable=true] .ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-rule[uneditable=true] .ruleview-propertycontainer > .ruleview-propertyvalue {
+  border-bottom-color: transparent;
+}
+
+#noResults {
+  font: message-box;
+  color: GrayText;
+}
+
+.ruleview-rule + .ruleview-rule {
+  border-top-width: 1px;
+  border-top-style: dotted;
+}
+
+.ruleview-warning {
+  background-image: url(alerticon-warning.png);
+  background-size: 13px 12px;
+  -moz-margin-start: 5px;
+  display: inline-block;
+  vertical-align: top;
+  width: 13px;
+  height: 12px;
+}
+
+
+@media (min-resolution: 2dppx) {
+  .ruleview-warning {
+    background-image: url(alerticon-warning@2x.png);
+  }
+}
+
+.ruleview-ruleopen {
+  -moz-padding-end: 5px;
+}
+
+.ruleview-ruleclose {
+  cursor: text;
+  padding-right: 20px;
+}
+
+.ruleview-propertylist {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.ruleview-rule:not(:hover) .ruleview-enableproperty {
+  visibility: hidden;
+}
+
+.ruleview-expander {
+  display: inline-block;
+}
+
+.ruleview-newproperty {
+  /* (enable checkbox width: 12px) + (expander width: 15px) */
+  -moz-margin-start: 27px;
+}
+
+.ruleview-namecontainer,
+.ruleview-propertycontainer,
+.ruleview-propertyname,
+.ruleview-propertyvalue {
+  text-decoration: inherit;
+}
+
+.ruleview-computedlist {
+  list-style: none;
+  padding: 0;
+}
+
+.ruleview-computed {
+  -moz-margin-start: 35px;
+}
+
+.ruleview-colorswatch,
+.ruleview-bezierswatch {
+  cursor: pointer;
+  border-radius: 50%;
+  width: 1em;
+  height: 1em;
+  vertical-align: text-top;
+  -moz-margin-end: 5px;
+  display: inline-block;
+  position: relative;
+}
+
+.ruleview-colorswatch::before {
+  content: '';
+  background-color: #eee;
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
+                    linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
+  background-size: 12px 12px;
+  background-position: 0 0, 6px 6px;
+  position: absolute;
+  border-radius: 50%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+
+.ruleview-bezierswatch {
+  background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
+  background-size: 1em;
+}
+
+@media (min-resolution: 2dppx) {
+  .ruleview-bezierswatch {
+    background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
+    background-size: 1em;
+  }
+}
+
+.ruleview-overridden {
+  text-decoration: line-through;
+}
+
+.theme-light .ruleview-overridden {
+  text-decoration-color: var(--theme-content-color3);
+}
+
+.styleinspector-propertyeditor {
+  border: 1px solid #CCC;
+  padding: 0;
+}
+
+.ruleview-property {
+  border-left: 3px solid transparent;
+  clear: right;
+}
+
+.ruleview-property  > * {
+  vertical-align: middle;
+}
+
+.ruleview-property[dirty] {
+  border-left-color: var(--theme-highlight-green);
+}
+
+.ruleview-namecontainer > .ruleview-propertyname,
+.ruleview-propertycontainer > .ruleview-propertyvalue {
+  border-bottom: 1px dashed transparent;
+}
+
+.ruleview-namecontainer:hover > .ruleview-propertyname,
+.ruleview-propertycontainer:hover > .ruleview-propertyvalue {
+  border-bottom-color: hsl(0,0%,50%);
+}
+
+.ruleview-selector {
+  word-wrap: break-word;
+}
+
+.ruleview-selector-separator, .ruleview-selector-unmatched {
+  color: #888;
+}
diff --git a/browser/themes/shared/devtools/scratchpad.inc.css b/browser/themes/shared/devtools/scratchpad.inc.css
index 3895498a0..4be2e1ad7 100644
--- a/browser/themes/shared/devtools/scratchpad.inc.css
+++ b/browser/themes/shared/devtools/scratchpad.inc.css
@@ -1,10 +1,14 @@
-%if 0
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-%endif
-
-#scratchpad-sidebar > tabs {
-  height: 0;
-  border: none;
-}
+%if 0
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+%endif
+
+#scratchpad-sidebar > tabs {
+  height: 0;
+  border: none;
+}
+
+#sp-toolbar {
+  border: none;
+}
diff --git a/browser/themes/shared/devtools/shadereditor.inc.css b/browser/themes/shared/devtools/shadereditor.inc.css
new file mode 100644
index 000000000..6d961c1a4
--- /dev/null
+++ b/browser/themes/shared/devtools/shadereditor.inc.css
@@ -0,0 +1,119 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Reload and waiting notices */
+
+.notice-container {
+  margin-top: -50vh;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);
+}
+
+#reload-notice {
+  font-size: 120%;
+}
+
+#waiting-notice {
+  font-size: 110%;
+}
+
+/* Shaders pane */
+
+#shaders-pane {
+  min-width: 150px;
+}
+
+#shaders-pane + .devtools-side-splitter {
+  border-color: transparent;
+}
+
+.program-item {
+  padding: 2px 0px;
+}
+
+.side-menu-widget-item-checkbox {
+  -moz-appearance: none;
+  opacity: 0;
+  transition: opacity .15s ease-out 0s;
+}
+
+/* Only show the checkbox when the source is hovered over, is selected, or if it
+ * is not checked. */
+.side-menu-widget-item:hover > .side-menu-widget-item-checkbox,
+.side-menu-widget-item.selected > .side-menu-widget-item-checkbox,
+.side-menu-widget-item-checkbox:not([checked]) {
+  opacity: 1;
+  transition: opacity .15s ease-out 0s;
+}
+
+.side-menu-widget-item-checkbox .checkbox-check {
+  -moz-appearance: none;
+  background-image: url(itemToggle.png);
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-clip: content-box;
+  background-size: 32px 16px;
+  background-position: -16px 0;
+  width: 16px;
+  height: 16px;
+  border: 0;
+}
+
+@media (min-resolution: 2dppx) {
+  .side-menu-widget-item-checkbox .checkbox-check {
+    background-image: url(itemToggle@2x.png);
+  }
+}
+
+.side-menu-widget-item-checkbox[checked] .checkbox-check {
+  background-position: 0 0;
+}
+
+/* Invert all toggle icons but the one in the active row for light theme */
+.theme-light .side-menu-widget-item:not(.selected) .checkbox-check {
+  filter: url(filters.svg#invert);
+}
+
+/* Shader source editors */
+
+.editor-label {
+  padding: 1px 12px;
+  border-top: 1px solid;
+}
+
+.editor-label {
+  background: var(--theme-toolbar-background);
+  border-color: var(--theme-splitter-color);
+  color: var(--theme-body-color-alt);
+}
+
+.editor-label[selected] {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+/* Responsive sidebar */
+
+@media (max-width: 700px) {
+  #shaders-pane {
+    max-height: 60vh;
+  }
+
+  #editors-splitter {
+    border-color: transparent;
+  }
+
+  .side-menu-widget-container {
+    box-shadow: none !important;
+  }
+
+  .side-menu-widget-item-arrow {
+    background-image: none !important;
+  }
+
+  .editor-label {
+    -moz-box-ordinal-group: 0;
+    border-bottom: 1px solid;
+  }
+}
diff --git a/browser/themes/shared/devtools/splitview.css b/browser/themes/shared/devtools/splitview.css
new file mode 100644
index 000000000..b5f2f5051
--- /dev/null
+++ b/browser/themes/shared/devtools/splitview.css
@@ -0,0 +1,159 @@
+/* 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/. */
+
+%filter substitution
+%define smw_marginDark #000
+%define smw_marginLight #aaa
+%define smw_itemDarkTopBorder rgba(0,0,0,0.2)
+%define smw_itemDarkBottomBorder rgba(128,128,128,0.15)
+%define smw_itemLightTopBorder rgba(128,128,128,0.15)
+%define smw_itemLightBottomBorder transparent
+
+.splitview-nav-container .devtools-throbber {
+  display: none;
+  text-align: center;
+}
+
+.loading .splitview-nav-container .devtools-throbber {
+  display: block;
+}
+
+.theme-dark .splitview-nav-container {
+  background-color: var(--theme-toolbar-background);
+}
+
+.splitview-nav {
+  -moz-appearance: none;
+  list-style-image: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.theme-dark .splitview-nav {
+  box-shadow: inset -1px 0 0 @smw_marginDark@;
+}
+
+.theme-dark .splitview-nav:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 @smw_marginDark@;
+}
+
+.theme-light .splitview-nav {
+  box-shadow: inset -1px 0 0 @smw_marginLight@;
+}
+
+.theme-light .splitview-nav:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 @smw_marginLight@;
+}
+
+.splitview-nav > li {
+  /* To compensate for the top and bottom borders */
+  margin-top: -1px;
+  margin-bottom: -1px;
+  -moz-padding-end: 8px;
+  -moz-box-align: center;
+  outline: 0;
+  vertical-align: bottom;
+}
+
+.theme-dark .splitview-nav > li {
+  border-top: 1px solid @smw_itemDarkTopBorder@;
+  border-bottom: 1px solid @smw_itemDarkBottomBorder@;
+}
+
+.theme-dark .splitview-nav > li:last-of-type {
+  box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;
+}
+
+.theme-light  .splitview-nav > li {
+  border-top: 1px solid @smw_itemLightTopBorder@;
+  border-bottom: 1px solid @smw_itemLightBottomBorder@;
+}
+
+.theme-light .splitview-nav > li:last-of-type {
+  box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@;
+}
+
+.placeholder {
+  -moz-box-flex: 1;
+  text-align: center;
+}
+
+.splitview-nav > li.splitview-active {
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: center right, center right, top left;
+  background-size: auto, 1px, auto;
+}
+
+.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: center left, center left, top right;
+}
+
+.theme-dark .splitview-nav > li.splitview-active {
+  background-image: url(itemArrow-dark-ltr.svg),
+                    linear-gradient(@smw_marginDark@, @smw_marginDark@),
+                    linear-gradient(#1d4f73, #1d4f73);
+}
+
+.theme-dark .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-dark-rtl.svg),
+                    linear-gradient(@smw_marginDark@, @smw_marginDark@),
+                    linear-gradient(#1d4f73, #1d4f73);
+}
+
+.theme-light .splitview-nav > li.splitview-active {
+  background-image: url(itemArrow-ltr.svg),
+                    linear-gradient(@smw_marginLight@, @smw_marginLight@),
+                    linear-gradient(#4c9ed9, #4c9ed9);
+}
+
+.theme-light .splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-rtl.svg),
+                    linear-gradient(@smw_marginLight@, @smw_marginLight@),
+                    linear-gradient(#4c9ed9, #4c9ed9);
+}
+
+/* Toolbars */
+
+.splitview-main > .devtools-toolbar {
+  background-origin: border-box;
+  background-clip: border-box;
+}
+
+.theme-dark .splitview-main > toolbar,
+.theme-dark .loading .splitview-nav-container {
+  -moz-border-end: 1px solid @smw_marginDark@;
+}
+
+.theme-light .splitview-main > toolbar,
+.theme-light .loading .splitview-nav-container {
+  -moz-border-end: 1px solid @smw_marginLight@;
+}
+
+.splitview-main > .devtools-toolbarbutton {
+  font-size: 11px;
+  padding: 0 8px;
+  width: auto;
+  min-width: 48px;
+  min-height: 0;
+}
+
+
+/* Resizers */
+
+.splitview-portrait-resizer {
+  -moz-appearance: none;
+  background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px),
+              linear-gradient(hsl(210,11%,36%), hsl(210,11%,18%));
+  height: 12px;
+  background-size: 10px 2px, 100% 12px;
+  background-clip: content-box, border-box;
+  background-repeat: repeat-y, no-repeat;
+  background-position: center center;
+  padding: 2px 0;
+  border-top: 1px solid hsla(210,8%,5%,.5);
+  border-bottom: 1px solid hsla(210,8%,5%,.5);
+}
diff --git a/browser/themes/shared/devtools/storage.css b/browser/themes/shared/devtools/storage.css
new file mode 100644
index 000000000..5f6d78e7e
--- /dev/null
+++ b/browser/themes/shared/devtools/storage.css
@@ -0,0 +1,48 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Storage Host Tree */
+
+#storage-tree {
+  min-width: 220px;
+  max-width: 500px;
+  overflow: auto;
+}
+
+.theme-dark #storage-tree {
+  background: #343c45; /* Toolbars */
+}
+
+#storage-tree .tree-widget-item[type="store"]:after {
+  background-image: url(chrome://browser/skin/devtools/filetype-store.svg);
+  background-size: 18px 18px;
+  background-position: -1px 0;
+}
+
+/* Columns with date should have a min width so that date is visible */
+#expires, #lastAccessed, #creationTime {
+  min-width: 150px;
+}
+
+/* Variables View Sidebar */
+
+#storage-sidebar {
+  max-width: 500px;
+  min-width: 250px;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #storage-tree {
+    max-width: 100%;
+  }
+
+  #storage-table #path {
+    display: none;
+  }
+
+  #storage-table .table-widget-cell {
+    min-width: 100px;
+  }
+}
diff --git a/browser/themes/shared/devtools/styleeditor.css b/browser/themes/shared/devtools/styleeditor.css
new file mode 100644
index 000000000..788d4aa15
--- /dev/null
+++ b/browser/themes/shared/devtools/styleeditor.css
@@ -0,0 +1,305 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.stylesheet-title,
+.stylesheet-name {
+  text-decoration: none;
+}
+
+.stylesheet-name {
+  font-size: 13px;
+}
+
+.theme-dark .stylesheet-title,
+.theme-dark .stylesheet-name {
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .stylesheet-rule-count,
+.theme-dark .stylesheet-linked-file,
+.theme-dark .stylesheet-saveButton {
+  color: var(--theme-body-color-alt);
+}
+
+.theme-light .stylesheet-title,
+.theme-light .stylesheet-name {
+  color: var(--theme-body-color-alt);
+}
+
+.theme-light .stylesheet-rule-count,
+.theme-light .stylesheet-linked-file,
+.theme-light .stylesheet-saveButton {
+  color: var(--theme-body-color);
+}
+
+.stylesheet-saveButton {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.splitview-active .stylesheet-title,
+.splitview-active .stylesheet-name,
+.theme-light .splitview-active .stylesheet-rule-count,
+.theme-light .splitview-active .stylesheet-linked-file,
+.theme-light .splitview-active .stylesheet-saveButton {
+  color: var(--theme-selection-color);
+}
+
+.splitview-nav:focus {
+  outline: 0; /* focus ring is on the stylesheet name */
+}
+
+.splitview-nav > li.unsaved > hgroup .stylesheet-name {
+  font-style: italic;
+}
+
+.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
+.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
+  font-style: italic;
+}
+
+.splitview-nav.empty > p {
+  padding: 0 10px;
+}
+
+.stylesheet-sidebar {
+  max-width: 400px;
+  min-width: 100px;
+}
+
+.theme-light .stylesheet-sidebar {
+  border-color: #aaa; /* Splitters */
+}
+
+.theme-dark .stylesheet-sidebar {
+  border-color: #000;  /* Splitters */
+}
+
+.theme-light .media-rule-label {
+  border-bottom-color: #cddae5; /* Grey */
+}
+
+.theme-dark .media-rule-label {
+  border-bottom-color: #303b47; /* Grey */
+}
+
+.media-rule-label {
+  padding: 4px;
+  cursor: pointer;
+  border-bottom: 1px solid;
+}
+
+.media-rule-line {
+  -moz-padding-start: 4px;
+}
+
+.theme-light .media-condition-unmatched {
+  color: grey;
+}
+
+.theme-dark .media-condition-unmatched {
+  color: #606C75;
+}
+
+.stylesheet-enabled {
+  padding: 8px 0;
+  margin: 0 8px;
+  background-image: url(itemToggle.png);
+  background-repeat: no-repeat;
+  background-clip: content-box;
+  background-position: 0 8px;
+  background-size: 48px 24px;
+  width: 24px;
+  height: 40px;
+}
+
+@media (min-resolution: 2dppx) {
+  .stylesheet-enabled {
+    background-image: url(itemToggle@2x.png);
+  }
+}
+
+.disabled > .stylesheet-enabled {
+  background-position: -24px 8px;
+}
+
+/* Invert all toggle icons but the one in the active row for light theme */
+.theme-light .splitview-nav > li:not(.splitview-active) .stylesheet-enabled {
+  filter: url(filters.svg#invert);
+}
+
+.splitview-nav > li > .stylesheet-enabled:focus,
+.splitview-nav > li:hover > .stylesheet-enabled {
+  outline: 0;
+}
+
+.stylesheet-linked-file:not(:empty){
+  -moz-margin-end: 0.4em;
+}
+
+.stylesheet-linked-file:not(:empty):before {
+  -moz-margin-start: 0.4em;
+}
+
+li.linked-file-error .stylesheet-linked-file:after {
+  font-size: 110%;
+}
+
+.stylesheet-more > h3 {
+  font-size: 11px;
+  -moz-margin-end: 2px;
+}
+
+.devtools-searchinput {
+  max-width: 25ex;
+  font-size: 11px;
+}
+
+.placeholder a {
+  text-decoration: underline;
+}
+
+h1,
+h2,
+h3 {
+  font-size: inherit;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
+
+@media (max-width: 700px) {
+  .stylesheet-sidebar {
+    width: 150px;
+  }
+}
+
+/* portrait mode */
+@media (max-width: 550px) {
+  .splitview-nav {
+    box-shadow: none;
+  }
+
+  .splitview-nav > li.splitview-active {
+    background-size: 0 0, 0 0, auto;
+  }
+
+  .stylesheet-enabled {
+    padding: 0;
+    background-position: 0 0;
+    height: 24px;
+  }
+
+  .disabled > .stylesheet-enabled {
+    background-position: -24px 0;
+  }
+
+  .splitview-nav > li > hgroup.stylesheet-info {
+    -moz-box-align: baseline;
+  }
+
+  .stylesheet-sidebar {
+    width: 180px;
+  }
+}
+
+.csscoverage-report {
+  background-color: var(--theme-toolbar-background);
+}
+
+.csscoverage-report-container {
+  height: 100vh;
+  padding: 0 30px;
+}
+
+.csscoverage-report-content {
+  margin: 20px auto;
+  -moz-column-width: 300px;
+  font-size: 13px;
+}
+
+.csscoverage-report h1 {
+  font-size: 120%;
+}
+
+.csscoverage-report h2 {
+  font-size: 110%;
+}
+
+.csscoverage-report h1,
+.csscoverage-report h2,
+.csscoverage-report h3 {
+  font-weight: bold;
+  margin: 10px 0;
+}
+
+.csscoverage-list:after {
+  content: ', ';
+}
+
+.csscoverage-list:last-child:after {
+  display: none;
+}
+
+.csscoverage-report textarea {
+  width: 100%;
+  height: 100px;
+}
+
+.csscoverage-report a {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.csscoverage-report > .csscoverage-toolbar {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.csscoverage-report > .csscoverage-toolbarbutton {
+  min-width: 4em;
+  min-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  border-top: none;
+  border-bottom: none;
+  -moz-border-start: none;
+}
+
+.chart-colored-blob[name="Used Preload"] {
+  fill: var(--theme-highlight-pink);
+  background: var(--theme-highlight-pink);;
+}
+
+.chart-colored-blob[name=Used] {
+  fill: var(--theme-highlight-green);
+  background: var(--theme-highlight-green);
+}
+
+.chart-colored-blob[name=Unused] {
+  fill: var(--theme-highlight-lightorange);
+  background: var(--theme-highlight-lightorange);
+}
+
+/* Undo 'largest' customization */
+.theme-dark .pie-chart-slice[largest] {
+  stroke-width: 1px;
+  stroke: rgba(0,0,0,0.2);
+}
+
+.theme-light .pie-chart-slice[largest] {
+  stroke-width: 1px;
+  stroke: rgba(255,255,255,0.8);
+}
+
+.csscoverage-report .pie-chart-slice {
+  cursor: default;
+}
+
+.csscoverage-report-chart {
+  margin: 0 50px;
+}
diff --git a/browser/themes/shared/devtools/timeline.inc.css b/browser/themes/shared/devtools/timeline.inc.css
new file mode 100644
index 000000000..270ad9a70
--- /dev/null
+++ b/browser/themes/shared/devtools/timeline.inc.css
@@ -0,0 +1,246 @@
+/* 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/. */
+
+#record-button {
+  list-style-image: url(profiler-stopwatch.svg);
+  min-width: 24px;
+}
+
+#record-button[checked] {
+  list-style-image: url(profiler-stopwatch-checked.svg);
+}
+
+#record-button:not([checked]) ~ #record-label {
+  visibility: hidden;
+}
+
+#memory-checkbox .checkbox-label {
+  line-height: 100%;
+}
+
+#filter-button {
+  list-style-image: url(timeline-filter.svg#filter);
+  min-width: 24px;
+}
+
+#filter-button[disabled] {
+  list-style-image: url(timeline-filter.svg#filter-disabled);
+}
+
+#filter-button[open] {
+  list-style-image: url(timeline-filter.svg#filter-open);
+}
+
+#timelineFilterPopup > menuitem:before {
+  content: "";
+  display: block;
+  width: 8px;
+  height: 8px;
+  margin: 0 8px;
+  border: 1px solid;
+  border-radius: 1px;
+  background-color: var(--bullet-bg);
+  border-color: var(--bullet-border);
+}
+
+.notice-container {
+  font-size: 120%;
+  padding-bottom: 35vh;
+}
+
+.theme-dark .notice-container {
+  background: #343c45; /* Toolbars */
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.theme-light .notice-container {
+  background: #f0f1f2; /* Toolbars */
+  color: #585959; /* Grey foreground text */
+}
+
+#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 #timeline-pane {
+  border-top: 1px solid #000;
+}
+
+.theme-light #timeline-pane {
+  border-top: 1px solid #aaa;
+}
+
+.waterfall-list-contents {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.waterfall-header-contents {
+  overflow-x: hidden;
+}
+
+.waterfall-background-ticks {
+  /* Background created on a <canvas> in js. */
+  /* @see browser/devtools/timeline/widgets/waterfall.js */
+  background-image: -moz-element(#waterfall-background);
+  background-repeat: repeat-y;
+  background-position: -1px center;
+}
+
+.waterfall-marker-container[is-spacer] {
+  pointer-events: none;
+}
+
+.theme-dark .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
+  background-color: rgba(255,255,255,0.03);
+}
+
+.theme-light .waterfall-marker-container:not([is-spacer]):nth-child(2n) {
+  background-color: rgba(128,128,128,0.03);
+}
+
+.theme-dark .waterfall-marker-container:hover {
+  background-color: rgba(255,255,255,0.1) !important;
+}
+
+.theme-light .waterfall-marker-container:hover {
+  background-color: rgba(128,128,128,0.1) !important;
+}
+
+.waterfall-marker-item {
+  overflow: hidden;
+}
+
+.waterfall-sidebar {
+  -moz-border-end: 1px solid;
+}
+
+.theme-dark .waterfall-sidebar {
+  -moz-border-end-color: #000;
+}
+
+.theme-light .waterfall-sidebar {
+  -moz-border-end-color: #aaa;
+}
+
+.waterfall-marker-container:hover > .waterfall-sidebar {
+  background-color: transparent;
+}
+
+.waterfall-header-name {
+  padding: 4px;
+}
+
+.waterfall-header-tick {
+  width: 100px;
+  font-size: 9px;
+  transform-origin: left center;
+}
+
+.theme-dark .waterfall-header-tick {
+  color: #a9bacb;
+}
+
+.theme-light .waterfall-header-tick {
+  color: #292e33;
+}
+
+.waterfall-header-tick:not(:first-child) {
+  -moz-margin-start: -100px !important; /* Don't affect layout. */
+}
+
+.waterfall-marker-bullet {
+  width: 8px;
+  height: 8px;
+  -moz-margin-start: 8px;
+  -moz-margin-end: 6px;
+  border: 1px solid;
+  border-radius: 1px;
+}
+
+.waterfall-marker-name {
+  font-size: 95%;
+  padding-bottom: 1px !important;
+}
+
+.waterfall-marker-bar {
+  height: 9px;
+  border: 1px solid;
+  border-radius: 1px;
+  transform-origin: left center;
+}
+
+.theme-light .waterfall-marker-container.selected > .waterfall-sidebar,
+.theme-light .waterfall-marker-container.selected > .waterfall-marker-item {
+  background-color: #4c9ed9; /* Select Highlight Blue */
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.theme-dark .waterfall-marker-container.selected > .waterfall-sidebar,
+.theme-dark .waterfall-marker-container.selected > .waterfall-marker-item {
+  background-color: #1d4f73; /* Select Highlight Blue */
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.waterfall-marker-container.selected .waterfall-marker-bullet,
+.waterfall-marker-container.selected .waterfall-marker-bar {
+  border-color: initial!important;
+}
+
+.waterfall-marker-location {
+   color: -moz-nativehyperlinktext;
+}
+
+.waterfall-marker-location:hover,
+.waterfall-marker-location:focus {
+   text-decoration: underline;
+}
+
+#timeline-waterfall-details {
+  -moz-padding-start: 8px;
+  -moz-padding-end: 8px;
+  padding-top: 2vh;
+  overflow: auto;
+}
+
+.marker-details-bullet {
+  width: 8px;
+  height: 8px;
+  border: 1px solid;
+  border-radius: 1px;
+}
+
+#timeline-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;
+}
diff --git a/browser/themes/shared/devtools/toolbars.inc.css b/browser/themes/shared/devtools/toolbars.inc.css
new file mode 100644
index 000000000..9abd07901
--- /dev/null
+++ b/browser/themes/shared/devtools/toolbars.inc.css
@@ -0,0 +1,961 @@
+%if 0
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+%endif
+%filter substitution
+%define smallSeparatorDark linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%)
+%define smallSeparatorLight linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%)
+%define solidSeparatorDark linear-gradient(#2d5b7d, #2d5b7d)
+%define solidSeparatorLight linear-gradient(#aaa, #aaa)
+
+/* Toolbars */
+.devtools-toolbar,
+.devtools-sidebar-tabs tabs,
+.devtools-sidebar-alltabs {
+  -moz-appearance: none;
+  padding: 0;
+  border-width: 0;
+  border-bottom-width: 1px;
+  border-style: solid;
+  height: 24px;
+  line-height: 24px;
+  box-sizing: border-box;
+}
+
+.devtools-toolbar {
+  padding: 0 3px;
+}
+
+.devtools-toolbar checkbox {
+  margin: 0 2px;
+  padding: 0;
+}
+.devtools-toolbar checkbox .checkbox-check {
+  margin: 0;
+  padding: 0;
+}
+.devtools-toolbar checkbox .checkbox-label-box {
+  border: none !important; /* overrides .checkbox-label-box from checkbox.css */
+}
+.devtools-toolbar checkbox .checkbox-label-box .checkbox-label {
+  margin: 0 6px !important; /* overrides .checkbox-label from checkbox.css */
+  padding: 0;
+}
+
+/* Toolbar buttons */
+.devtools-menulist,
+.devtools-toolbarbutton {
+  -moz-appearance: none;
+  -moz-box-align: center;
+  background: transparent;
+  min-width: 78px;
+  min-height: 18px;
+  padding: 1px;
+  text-shadow: none;
+  border: none;
+  border-radius: 0;
+  margin: 2px 3px;
+  color: inherit;
+  transition: background 0.05s ease-in-out;
+  color: var(--theme-content-color1);
+  background-color: var(--theme-toolbar-background);
+}
+
+.devtools-menulist:-moz-focusring,
+.devtools-toolbarbutton:-moz-focusring {
+  outline: 1px dotted hsla(210,30%,85%,0.7);
+  outline-offset: -4px;
+}
+
+.devtools-toolbarbutton[standalone] {
+  -moz-margin-end: 5px;
+  border-width: 1px;
+  border-style: solid;
+}
+.devtools-toolbarbutton[label][standalone] {
+  min-height: 2em;
+}
+
+.devtools-toolbarbutton:not([label]),
+.devtools-toolbarbutton[text-as-image] {
+  min-width: 32px;
+}
+
+#toolbox-buttons .devtools-toolbarbutton[text-as-image] {
+  -moz-padding-start: 5px;
+  -moz-padding-end: 5px;
+  min-width: inherit;
+}
+
+/* Command buttons with menupopups should be styled slightly differently -
+   no background color and a bit more narrow */
+#toolbox-buttons .devtools-toolbarbutton:not([text-as-image]):not(:hover):not([open=true]) {
+  background: transparent;
+}
+#toolbox-buttons .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker {
+  padding: 0 2px;
+}
+
+.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-toolbar .devtools-toolbarbutton {
+  border-width: 0;
+}
+
+.devtools-toolbarbutton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
+  -moz-appearance: none;
+  color: inherit;
+  border-width: 0;
+  -moz-box-orient: horizontal;
+  padding: 0;
+}
+
+.devtools-toolbarbutton[type=menu-button] {
+  padding: 0 1px;
+  -moz-box-align: stretch;
+}
+
+.devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
+  -moz-margin-end: 4px;
+}
+
+.devtools-menulist > .menulist-dropmarker {
+  -moz-appearance: none;
+  display: -moz-box;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
+  -moz-box-align: center;
+  min-width: 16px;
+}
+
+.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
+.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
+  -moz-appearance: none !important;
+  list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
+  -moz-box-align: center;
+  padding: 0 3px;
+}
+
+.theme-dark .devtools-menulist,
+.theme-dark .devtools-toolbarbutton {
+  border-color: rgba(0, 0, 0, .4); /* Splitters */
+}
+.theme-light .devtools-menulist,
+.theme-light .devtools-toolbarbutton {
+  border-color: rgba(170, 170, 170, .5); /* Splitters */
+}
+
+/* Text-only buttons */
+.theme-light .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
+.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
+  background-color: rgba(170, 170, 170, .2); /* Splitter */
+}
+.theme-dark .devtools-toolbarbutton[label]:not([text-as-image]):not([type=menu-button]),
+.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image] {
+  background-color: rgba(0, 0, 0, .2); /* Splitter */
+}
+
+/* Button States */
+.theme-dark .devtools-toolbarbutton:not([disabled]):hover,
+.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
+.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
+  background: rgba(0, 0, 0, .3); /* Splitters */
+}
+.theme-light .devtools-toolbarbutton:not([disabled]):hover,
+.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover,
+.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover {
+  background: rgba(170, 170, 170, .3); /* Splitters */
+}
+
+.theme-dark .devtools-toolbarbutton:not([disabled]):hover:active,
+.theme-dark #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
+.theme-dark .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+  background: rgba(0, 0, 0, .4); /* Splitters */
+}
+.theme-light .devtools-toolbarbutton:not([disabled]):hover:active,
+.theme-light #toolbox-buttons .devtools-toolbarbutton:not([disabled])[text-as-image]:hover:active,
+.theme-light .devtools-toolbarbutton:not([disabled])[label]:not([text-as-image]):not([type=menu-button]):hover:active {
+  background: rgba(170, 170, 170, .4); /* Splitters */
+}
+
+/* Menu type buttons and checked states */
+.theme-dark .devtools-toolbarbutton[checked=true],
+.theme-dark #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
+  background: rgba(29, 79, 115, .7); /* Select highlight blue */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-toolbarbutton[checked=true],
+.theme-light #toolbox-buttons .devtools-toolbarbutton[text-as-image][checked] {
+  background: rgba(76, 158, 217, .2); /* Select highlight blue */
+}
+
+.theme-dark .devtools-menulist[open=true],
+.theme-dark .devtools-toolbarbutton[open=true],
+.theme-dark .devtools-toolbarbutton[open=true]:hover,
+.theme-dark .devtools-toolbarbutton[open=true]:hover:active,
+.theme-dark .devtools-toolbarbutton[checked=true]:hover {
+  background: rgba(29, 79, 115, .8); /* Select highlight blue */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-menulist[open=true],
+.theme-light .devtools-toolbarbutton[open=true],
+.theme-light .devtools-toolbarbutton[open=true]:hover,
+.theme-light .devtools-toolbarbutton[open=true]:hover:active,
+.theme-light .devtools-toolbarbutton[checked=true]:hover {
+  background: rgba(76, 158, 217, .4); /* Select highlight blue */
+}
+
+.devtools-option-toolbarbutton {
+  -moz-appearance: none;
+  list-style-image: url("chrome://browser/skin/devtools/tool-options.svg");
+  background: none;
+  opacity: .8;
+  border: none;
+}
+
+.devtools-option-toolbarbutton[open=true] {
+  opacity: 1;
+}
+
+/* Toolbar button groups */
+.devtools-toolbarbutton-group > .devtools-toolbarbutton {
+  margin-left: 1px;
+  margin-right: 1px;
+  outline-offset: -3px;
+  box-shadow: none;
+}
+
+.devtools-toolbarbutton-group > .devtools-toolbarbutton:last-child {
+  -moz-margin-end: 0;
+}
+
+.devtools-toolbarbutton-group + .devtools-toolbarbutton {
+  -moz-margin-start: 3px;
+}
+
+.devtools-separator + .devtools-toolbarbutton {
+  -moz-margin-start: 1px;
+}
+
+/* HTML buttons, similar to toolbar buttons, but work in HTML documents */
+
+.devtools-button {
+  border: 0 solid var(--theme-splitter-color);
+  background: var(--theme-toolbar-background);
+  margin: 0;
+  padding: 0;
+  min-width: 32px;
+  min-height: 18px;
+  /* The icon is absolutely positioned in the button using ::before */
+  position: relative;
+}
+
+.devtools-button[standalone] {
+  min-height: 32px;
+  border-width: 1px;
+}
+
+/* Button States */
+.theme-dark .devtools-button:not([disabled]):hover {
+  background: rgba(0, 0, 0, .3); /* Splitters */
+}
+.theme-light .devtools-button:not([disabled]):hover {
+  background: rgba(170, 170, 170, .3); /* Splitters */
+}
+
+.theme-dark .devtools-button:not([disabled]):hover:active {
+  background: rgba(0, 0, 0, .4); /* Splitters */
+}
+.theme-light .devtools-button:not([disabled]):hover:active {
+  background: rgba(170, 170, 170, .4); /* Splitters */
+}
+
+/* Menu type buttons and checked states */
+.theme-dark .devtools-button[checked] {
+  background: rgba(29, 79, 115, .7) !important; /* Select highlight blue */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-button[checked] {
+  background: rgba(76, 158, 217, .2) !important; /* Select highlight blue */
+}
+
+.devtools-button::before {
+  content: "";
+  display: block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -8px 0 0 -8px;
+  background-repeat: no-repeat;
+}
+
+@media (min-resolution: 2dppx) {
+  .devtools-button::before {
+    background-size: 32px;
+  }
+}
+
+/* Text input */
+
+.devtools-textinput,
+.devtools-searchinput {
+  -moz-appearance: none;
+  margin: 0 3px;
+  border: 1px solid;
+%ifdef XP_MACOSX
+  border-radius: 20px;
+%else
+  border-radius: 2px;
+%endif
+  padding: 4px 6px;
+  border-color: var(--theme-splitter-color);
+}
+
+.devtools-searchinput {
+  margin-top: 1px;
+  margin-bottom: 1px;
+  padding: 0;
+  -moz-padding-start: 22px;
+  -moz-padding-end: 12px;
+  background-position: 8px center;
+  background-size: 11px 11px;
+  background-repeat: no-repeat;
+  font-size: inherit;
+}
+
+.theme-dark .devtools-searchinput {
+  background-image: url(magnifying-glass.png);
+}
+
+.theme-light .devtools-searchinput {
+  background-image: url(magnifying-glass-light.png);
+}
+
+@media (min-resolution: 2dppx) {
+  .theme-dark .devtools-searchinput {
+    background-image: url(magnifying-glass@2x.png);
+  }
+
+  .theme-light .devtools-searchinput {
+    background-image: url(magnifying-glass-light@2x.png);
+  }
+}
+
+.devtools-searchinput:-moz-locale-dir(rtl) {
+  background-position: calc(100% - 8px) center;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
+  display: none;
+}
+
+.devtools-no-search-result {
+  border-color: var(--theme-highlight-red) !important;
+}
+
+/* Close button */
+
+.devtools-closebutton {
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
+  opacity: 0.8;
+}
+
+.devtools-closebutton > image {
+  width: 16px;
+  height: 16px;
+  -moz-appearance: none;
+  background-size: 16px 16px;
+  background-image: url("chrome://browser/skin/devtools/close@2x.png");
+  background-position: center center;
+  background-repeat: no-repeat;
+}
+
+.devtools-closebutton > .toolbarbutton-icon {
+  /* XXX Buttons have padding in widget/ that we don't want here but can't override with good CSS, so we must
+     use evil CSS to give the impression of smaller content */
+  margin: -4px;
+}
+
+.devtools-closebutton > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-closebutton:hover {
+  opacity: 1;
+}
+
+/* In-tools sidebar */
+.devtools-sidebar-tabs {
+  -moz-appearance: none;
+  margin: 0;
+}
+
+.devtools-sidebar-tabs > tabpanels {
+  -moz-appearance: none;
+  background: transparent;
+  padding: 0;
+  border: 0;
+}
+
+.theme-light .devtools-sidebar-tabs > tabpanels {
+  background: var(--theme-sidebar-background);
+  color: var(--theme-body-color);
+}
+
+.devtools-sidebar-tabs tabs {
+  position: static;
+  font: inherit;
+  margin-bottom: 0;
+  overflow: hidden;
+}
+
+.devtools-sidebar-alltabs {
+  margin: 0;
+  border-width: 0 0 1px 0;
+  -moz-border-start-width: 1px;
+  border-style: solid;
+}
+
+.devtools-sidebar-alltabs dropmarker {
+  display: none;
+}
+
+.devtools-sidebar-tabs tabs > .tabs-right,
+.devtools-sidebar-tabs tabs > .tabs-left {
+  display: none;
+}
+
+.devtools-sidebar-tabs tabs > tab {
+  -moz-appearance: none;
+  /* We want to match the height of a toolbar with a toolbarbutton
+   * First, we need to replicated the padding of toolbar (4px),
+   * then we need to take the border of the buttons into account (1px).
+   */
+  padding: 0 3px;
+  margin: 0;
+  min-width: 78px;
+  text-align: center;
+  background-color: transparent;
+  color: inherit;
+  -moz-box-flex: 1;
+  border-width: 0;
+  -moz-border-start-width: 1px;
+  border-style: solid;
+  border-radius: 0;
+  position: static;
+  text-shadow: none;
+}
+
+.devtools-sidebar-tabs tabs > tab:first-child {
+  -moz-border-start-width: 0;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab {
+  border-image: @smallSeparatorDark@ 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab:hover {
+  background: hsla(206,37%,4%,.2);
+  border-image: @smallSeparatorDark@ 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab:hover:active {
+  background: hsla(206,37%,4%,.4);
+  border-image: @smallSeparatorDark@ 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab {
+  border-image: @solidSeparatorDark@ 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
+  background: hsla(206,37%,4%,.2);
+  border-image: @solidSeparatorDark@ 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
+  background: hsla(206,37%,4%,.4);
+  border-image: @solidSeparatorDark@ 1 1;
+}
+
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected],
+.theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
+  color: var(--theme-selection-color);
+  background: #1d4f73;
+  border-image: @solidSeparatorDark@ 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab {
+  border-image: @smallSeparatorLight@ 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab:hover {
+  background: #ddd;
+  border-image: @smallSeparatorLight@ 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab:hover:active {
+  background: #ddd;
+  border-image: @smallSeparatorLight@ 1 1;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab {
+  border-image: @solidSeparatorLight@;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
+  background: #ddd;
+  border-image: @solidSeparatorLight@;
+}
+
+.theme-light .devtools-sidebar-tabs tabs > tab[selected],
+.theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
+  color: var(--theme-selection-color);
+  background: #4c9ed9;
+  border-image: @solidSeparatorLight@;
+}
+
+/* Toolbox - moved from toolbox.css.
+ * Rules that apply to the global toolbox like command buttons,
+ * devtools tabs, docking buttons, etc. */
+
+#toolbox-controls > toolbarbutton,
+#toolbox-dock-buttons > toolbarbutton {
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
+}
+
+#toolbox-controls > toolbarbutton > .toolbarbutton-text,
+#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text,
+.command-button > .toolbarbutton-text {
+  display: none;
+}
+
+#toolbox-dock-buttons > toolbarbutton > image {
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  background-size: 16px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+}
+
+#toolbox-dock-bottom > image {
+  background-image: url("chrome://browser/skin/devtools/dock-bottom@2x.png");
+}
+
+#toolbox-dock-side  > image {
+  background-image: url("chrome://browser/skin/devtools/dock-side@2x.png");
+}
+
+#toolbox-dock-window > image {
+  background-image: url("chrome://browser/skin/devtools/undock@2x.png");
+}
+
+#toolbox-dock-window,
+#toolbox-dock-bottom,
+#toolbox-dock-side {
+  opacity: 0.8;
+}
+
+#toolbox-dock-window:hover,
+#toolbox-dock-bottom:hover,
+#toolbox-dock-side:hover {
+  opacity: 1;
+}
+
+.devtools-separator {
+  margin: 0 2px;
+  width: 2px;
+  background-image: linear-gradient(transparent, hsla(204,45%,98%,.1), transparent),
+                    linear-gradient(transparent, hsla(206,37%,4%,.6), transparent),
+                    linear-gradient(transparent, hsla(204,45%,98%,.1), transparent);
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position: 0, 1px, 2px;
+}
+
+#toolbox-buttons:empty + .devtools-separator,
+.devtools-separator[invisible] {
+  visibility: hidden;
+}
+
+#toolbox-controls-separator {
+  margin: 0;
+}
+
+/* Command buttons */
+
+.command-button {
+  -moz-appearance: none;
+  border: none;
+  padding: 0 8px;
+  margin: 0;
+  width: 32px;
+  position: relative;
+}
+
+.command-button:hover {
+  background-color: hsla(206,37%,4%,.2);
+}
+.command-button:hover:active, .command-button[checked=true]:not(:hover) {
+  background-color: hsla(206,37%,4%,.4);
+}
+
+.command-button > image {
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  background-size: 64px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+}
+.command-button:hover > image {
+  background-position: -16px center;
+}
+.command-button:hover:active > image {
+  background-position: -32px center;
+}
+.command-button[checked=true] > image {
+  background-position: -48px center;
+}
+.command-button[open=true] > image {
+  background-position: 0 center;
+}
+
+#command-button-paintflashing > image {
+  background-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
+}
+
+#command-button-screenshot > image {
+  background-image: url("chrome://browser/skin/devtools/command-screenshot.png");
+}
+
+#command-button-responsive > image {
+  background-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
+}
+
+#command-button-tilt > image {
+  background-image: url("chrome://browser/skin/devtools/command-tilt.png");
+}
+
+#command-button-scratchpad > image {
+  background-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
+  background-size: 48px 16px;
+}
+
+#command-button-pick > image {
+  background-image: url("chrome://browser/skin/devtools/command-pick.png");
+}
+
+#command-button-frames > image {
+  background-image: url("chrome://browser/skin/devtools/command-frames.png");
+}
+
+#command-button-splitconsole > image {
+  background-image: url("chrome://browser/skin/devtools/command-console.png");
+}
+
+#command-button-eyedropper > image {
+  background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
+}
+
+@media (min-resolution: 2dppx) {
+  #command-button-paintflashing > image {
+    background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
+  }
+
+  #command-button-screenshot > image {
+    background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png");
+  }
+
+  #command-button-responsive > image {
+    background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png");
+  }
+
+  #command-button-tilt > image {
+    background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png");
+  }
+
+  #command-button-scratchpad > image {
+    background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png");
+  }
+
+  #command-button-pick > image {
+    background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
+  }
+
+  #command-button-frames > image {
+    background-image: url("chrome://browser/skin/devtools/command-frames@2x.png");
+  }
+
+  #command-button-splitconsole > image {
+    background-image: url("chrome://browser/skin/devtools/command-console@2x.png");
+  }
+
+  #command-button-eyedropper > image {
+    background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
+  }
+}
+
+/* Tabs */
+
+.devtools-tabbar {
+  -moz-appearance: none;
+  min-height: 24px;
+  border: 0px solid;
+  border-bottom-width: 1px;
+  padding: 0;
+  background: var(--theme-tab-toolbar-background);
+  border-bottom-color: var(--theme-splitter-color);
+}
+
+.theme-light .devtools-tabbar {
+  box-shadow: 0 -2px 0 rgba(170,170,170,.1) inset;
+}
+
+.theme-dark .devtools-tabbar {
+  box-shadow: 0 -2px 0 rgba(0,0,0,.1) inset;
+}
+
+#toolbox-tabs {
+  margin: 0;
+}
+
+.devtools-tab {
+  -moz-appearance: none;
+  -moz-binding: url("chrome://global/content/bindings/general.xml#control-item");
+  -moz-box-align: center;
+  min-width: 32px;
+  min-height: 24px;
+  max-width: 110px;
+  margin: 0;
+  padding: 0;
+  border-style: solid;
+  border-width: 0;
+  -moz-border-start-width: 1px;
+  -moz-box-align: center;
+}
+
+.theme-dark .devtools-tab {
+  color: var(--theme-body-color-alt);
+  border-color: #42484f;
+}
+
+.theme-light .devtools-tab {
+  color: var(--theme-body-color);
+  border-color: var(--theme-splitter-color);
+}
+
+.theme-dark .devtools-tab:hover {
+  background-color: hsla(206,37%,4%,.2);
+  color: #ced3d9;
+}
+
+.theme-light .devtools-tab:hover {
+  background-color: rgba(170,170,170,.2);
+}
+
+.theme-dark .devtools-tab:hover:active {
+  background-color: hsla(206,37%,4%,.4);
+  color: var(--theme-selection-color);
+}
+
+.theme-light .devtools-tab:hover:active {
+  background-color: rgba(170,170,170,.4);
+}
+
+.theme-dark .devtools-tab:not([selected])[highlighted] {
+  background-color: hsla(99,100%,14%,.2);
+  box-shadow: 0 2px 0 #7bc107 inset;
+}
+
+.theme-light .devtools-tab:not([selected])[highlighted] {
+  background-color: rgba(44, 187, 15, .2);
+}
+
+.devtools-tab > image {
+  border: none;
+  -moz-margin-end: 0;
+  -moz-margin-start: 4px;
+  opacity: 0.6;
+  max-height: 16px;
+  width: 16px; /* Prevents collapse during theme switching */
+}
+
+.devtools-tab > label {
+  white-space: nowrap;
+}
+
+.devtools-tab:hover > image {
+  opacity: 0.8;
+}
+
+.devtools-tab:active > image,
+.devtools-tab[selected] > image {
+  opacity: 1;
+}
+
+.devtools-tabbar .devtools-tab[selected],
+.devtools-tabbar .devtools-tab[selected]:hover:active {
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+.theme-dark .devtools-tabbar .devtools-tab[selected] {
+  box-shadow: 0 2px 0 #d7f1ff inset,
+              0 8px 3px -5px #2b82bf inset,
+              0 -2px 0 rgba(0,0,0,.2) inset;
+}
+
+.theme-light .devtools-tabbar .devtools-tab[selected] {
+  box-shadow: 0 2px 0 #d7f1ff inset,
+              0 8px 3px -5px #2b82bf inset,
+              0 -2px 0 rgba(0,0,0,.06) inset;
+}
+
+#toolbox-tabs .devtools-tab[selected],
+#toolbox-tabs .devtools-tab[highlighted] {
+  border-width: 0;
+  -moz-padding-start: 1px;
+}
+
+#toolbox-tabs .devtools-tab[selected]:last-child,
+#toolbox-tabs .devtools-tab[highlighted]:last-child {
+  -moz-padding-end: 1px;
+}
+
+#toolbox-tabs .devtools-tab[selected] + .devtools-tab,
+#toolbox-tabs .devtools-tab[highlighted] + .devtools-tab {
+  -moz-border-start-width: 0;
+  -moz-padding-start: 1px;
+}
+
+#toolbox-tabs .devtools-tab:first-child[selected] {
+  -moz-border-start-width: 0;
+}
+
+#toolbox-tabs .devtools-tab:last-child {
+  -moz-border-end-width: 1px;
+}
+
+.devtools-tab:not([highlighted]) > .highlighted-icon,
+.devtools-tab[selected] > .highlighted-icon,
+.devtools-tab:not([selected])[highlighted] > .default-icon {
+  visibility: collapse;
+}
+
+/* The options tab is special - it doesn't have the same parent
+   as the other tabs (toolbox-option-container vs toolbox-tabs) */
+#toolbox-option-container .devtools-tab:not([selected]) {
+  background-color: transparent;
+}
+#toolbox-option-container .devtools-tab {
+  border-color: transparent;
+  border-width: 0;
+  -moz-padding-start: 1px;
+}
+#toolbox-tab-options > image {
+  margin: 0 8px;
+}
+
+/* Invert the colors of certain dark theme images for displaying
+ * inside of the light theme.
+ */
+.theme-light .devtools-tab[icon-invertable] > image,
+.theme-light #toolbox-dock-buttons > toolbarbutton > image,
+.theme-light .command-button-invertable > image,
+.theme-light .command-button-invertable:active > image,
+.theme-light .devtools-closebutton > image,
+.theme-light .devtools-toolbarbutton > image,
+.theme-light .devtools-option-toolbarbutton > image,
+.theme-light #breadcrumb-separator-normal,
+.theme-light .scrollbutton-up > .toolbarbutton-icon,
+.theme-light .scrollbutton-down > .toolbarbutton-icon,
+.theme-light #black-boxed-message-button .button-icon,
+.theme-light .notice-container button .button-icon,
+.theme-light #requests-menu-perf-notice-button .button-icon,
+.theme-light #requests-menu-network-summary-button .button-icon,
+.theme-light .event-tooltip-debugger-icon,
+.theme-light .devtools-button::before {
+  filter: url(filters.svg#invert);
+}
+
+/* Since selected backgrounds are blue, we want to use the normal
+ * (light) icons. */
+.theme-light .command-button-invertable[checked=true]:not(:active) > image,
+.theme-light .devtools-tab[icon-invertable][selected] > image,
+.theme-light .devtools-tab[icon-invertable][highlighted] > image,
+.theme-light #record-snapshot[checked] > image,
+.theme-light #profiler-start[checked] > image,
+.theme-light .notice-container button[checked] .button-icon {
+  filter: none !important;
+}
+
+.theme-light .command-button:hover {
+  background-color: inherit;
+}
+
+.theme-light .command-button:hover:active,
+.theme-light .command-button[checked=true]:not(:hover) {
+  background-color: inherit;
+}
+
+.hidden-labels-box:not(.visible) > label,
+.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
+  display: none;
+}
+
+.devtools-invisible-splitter {
+  border-color: transparent;
+}
+
+.devtools-horizontal-splitter {
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.devtools-side-splitter {
+  -moz-border-end: 1px solid var(--theme-splitter-color);
+  border-color: var(--theme-splitter-color); /* Needed for responsive container at low width. */
+}
+
+/* Throbbers */
+.devtools-throbber::before {
+  content: "";
+  display: inline-block;
+  vertical-align: bottom;
+  -moz-margin-end: 0.5em;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: 1.1s linear throbber-spin infinite;
+}
+
+@keyframes throbber-spin {
+  from {
+    transform: none;
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/browser/themes/shared/devtools/tooltip/arrow-horizontal-dark.png b/browser/themes/shared/devtools/tooltip/arrow-horizontal-dark.png
new file mode 100644
index 000000000..751fbc3d3
--- /dev/null
+++ b/browser/themes/shared/devtools/tooltip/arrow-horizontal-dark.png
diff --git a/browser/themes/shared/devtools/tooltip/arrow-horizontal-dark@2x.png b/browser/themes/shared/devtools/tooltip/arrow-horizontal-dark@2x.png
new file mode 100644
index 000000000..e4db35e72
--- /dev/null
+++ b/browser/themes/shared/devtools/tooltip/arrow-horizontal-dark@2x.png
diff --git a/browser/themes/shared/devtools/tooltip/arrow-horizontal-light.png b/browser/themes/shared/devtools/tooltip/arrow-horizontal-light.png
new file mode 100644
index 000000000..298ced115
--- /dev/null
+++ b/browser/themes/shared/devtools/tooltip/arrow-horizontal-light.png
diff --git a/browser/themes/shared/devtools/tooltip/arrow-horizontal-light@2x.png b/browser/themes/shared/devtools/tooltip/arrow-horizontal-light@2x.png
new file mode 100644
index 000000000..7dec13406
--- /dev/null
+++ b/browser/themes/shared/devtools/tooltip/arrow-horizontal-light@2x.png
diff --git a/browser/themes/shared/devtools/tooltip/arrow-vertical-dark.png b/browser/themes/shared/devtools/tooltip/arrow-vertical-dark.png
new file mode 100644
index 000000000..dfd535433
--- /dev/null
+++ b/browser/themes/shared/devtools/tooltip/arrow-vertical-dark.png
diff --git a/browser/themes/shared/devtools/tooltip/arrow-vertical-dark@2x.png b/browser/themes/shared/devtools/tooltip/arrow-vertical-dark@2x.png
new file mode 100644
index 000000000..721bb0d88
--- /dev/null
+++ b/browser/themes/shared/devtools/tooltip/arrow-vertical-dark@2x.png
diff --git a/browser/themes/shared/devtools/tooltip/arrow-vertical-light.png b/browser/themes/shared/devtools/tooltip/arrow-vertical-light.png
new file mode 100644
index 000000000..5a57fc353
--- /dev/null
+++ b/browser/themes/shared/devtools/tooltip/arrow-vertical-light.png
diff --git a/browser/themes/shared/devtools/tooltip/arrow-vertical-light@2x.png b/browser/themes/shared/devtools/tooltip/arrow-vertical-light@2x.png
new file mode 100644
index 000000000..c2b95c45a
--- /dev/null
+++ b/browser/themes/shared/devtools/tooltip/arrow-vertical-light@2x.png
diff --git a/browser/themes/shared/devtools/webaudioeditor.inc.css b/browser/themes/shared/devtools/webaudioeditor.inc.css
new file mode 100644
index 000000000..7489a47a9
--- /dev/null
+++ b/browser/themes/shared/devtools/webaudioeditor.inc.css
@@ -0,0 +1,253 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Reload and waiting notices */
+.notice-container {
+  margin-top: -50vh;
+  background-color: var(--theme-toolbar-background);
+  color: var(--theme-body-color-alt);
+}
+
+#reload-notice {
+  font-size: 120%;
+}
+
+#waiting-notice {
+  font-size: 110%;
+}
+
+/* Context Graph */
+svg {
+  overflow: hidden;
+  -moz-box-flex: 1;
+}
+
+/* Edges in graph */
+.edgePath path {
+  stroke-width: 1px;
+  fill: none;
+}
+
+.theme-dark .edgePath path {
+  stroke: #b6babf; /* Grey foreground text */
+}
+.theme-light .edgePath path {
+  stroke: #aaaaaa; /* Splitters */
+}
+
+/* AudioParam connection edges */
+g.edgePath.param-connection {
+  stroke-dasharray: 5,5;
+}
+
+.theme-dark .edgePath.param-connection path {
+  stroke: #b6babf; /* Grey foreground text */
+}
+.theme-light .edgePath.param-connection path {
+  stroke: #aaaaaa; /* Splitters */
+}
+
+/* Labels in AudioParam connection should have background that match
+ * the main background so there's whitespace around the label, on top of the
+ * dotted lines. */
+.theme-dark g.edgeLabel rect {
+  fill: #14171a;
+}
+.theme-light g.edgeLabel rect {
+  fill: #fcfcfc; /* Background - Editor */
+}
+.theme-dark g.edgeLabel tspan {
+  fill: var(--theme-body-color-alt);
+}
+.theme-light g.edgeLabel tspan {
+  fill: #585959; /* Grey foreground text */
+}
+
+/* Audio Nodes */
+.nodes rect {
+  stroke-width: 1px;
+  cursor: pointer;
+}
+
+.nodes rect {
+  stroke: var(--theme-tab-toolbar-background);
+}
+.theme-light rect {
+  fill: var(--theme-tab-toolbar-background);
+}
+.theme-dark rect {
+  fill: var(--theme-toolbar-background);
+}
+
+/**
+ * Bypassed Nodes
+ */
+
+.theme-light .nodes g.bypassed rect {
+  fill: url(chrome://browser/skin/devtools/filters.svg#bypass-light);
+}
+.theme-dark .nodes g.bypassed rect {
+  fill: url(chrome://browser/skin/devtools/filters.svg#bypass-dark);
+}
+.nodes g.bypassed.selected rect {
+  stroke: var(--theme-selection-background);
+}
+
+/*
+.nodes g.bypassed text {
+  opacity: 0.8;
+}
+*/
+
+/**
+ * Selected Nodes
+ */
+.nodes g.selected rect {
+  fill: var(--theme-selection-background);
+}
+
+/* Don't style bypassed nodes text different because it'd be illegible in light-theme */
+.theme-light g.selected:not(.bypassed) text {
+  fill: var(--theme-toolbar-background);
+}
+
+
+/* Text in nodes and edges */
+text {
+  cursor: default; /* override the "text" cursor */
+  font-weight: 300;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
+  font-size: 14px;
+}
+
+text {
+  fill: var(--theme-body-color-alt);
+}
+
+
+.nodes text {
+  cursor: pointer;
+}
+
+/**
+ * Inspector Styles
+ */
+
+/* hide the variables view scope title as its redundant,
+ * because there's only one scope displayed. */
+.variables-view-scope > .title {
+  display: none;
+}
+
+#web-audio-inspector-title {
+  margin: 6px;
+}
+
+.web-audio-inspector .error {
+  background-image: url(alerticon-warning.png);
+  background-size: 13px 12px;
+  -moz-appearance: none;
+  opacity: 0;
+  transition: opacity .5s ease-out 0s;
+}
+
+#inspector-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border: none;
+  list-style-image: url(debugger-collapse.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#inspector-pane-toggle > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+}
+
+#inspector-pane-toggle[pane-collapsed] {
+  list-style-image: url(debugger-expand.png);
+}
+
+#inspector-pane-toggle:active {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+/**
+ * Automation Styles
+ */
+
+#automation-param-toolbar .automation-param-button[selected] {
+  color: var(--theme-selection-color);
+  background-color: var(--theme-selection-background);
+}
+
+#automation-graph {
+  overflow: hidden;
+  -moz-box-flex: 1;
+}
+
+@media (min-resolution: 2dppx) {
+  #inspector-pane-toggle {
+    list-style-image: url(debugger-collapse@2x.png);
+    -moz-image-region: rect(0px,32px,32px,0px);
+  }
+
+  #inspector-pane-toggle[pane-collapsed] {
+    list-style-image: url(debugger-expand@2x.png);
+  }
+
+  #inspector-pane-toggle:active {
+    -moz-image-region: rect(0px,64px,32px,32px);
+  }
+
+  .web-audio-inspector .error {
+    background-image: url(alerticon-warning@2x.png);
+  }
+}
+
+/**
+ * Inspector toolbar
+ */
+
+#audio-node-toolbar .bypass {
+  list-style-image: url(power.svg);
+}
+
+#audio-node-toolbar toolbarbutton[disabled] {
+  opacity: 0.5;
+  background-color: transparent;
+}
+
+.theme-dark #audio-node-toolbar toolbarbutton[checked] {
+  background-color: #1d4f73; /* Select Highlight Blue */
+}
+.theme-light #audio-node-toolbar toolbarbutton[checked] {
+  background-color: #4c9ed9; /* Select Highlight Blue */
+}
+
+/* don't invert checked buttons so we can have white icons on light theme */
+#audio-node-toolbar toolbarbutton[checked] > .toolbarbutton-icon {
+  filter: none;
+}
+
+
+/**
+ * Responsive Styles
+ * `.devtools-responsive-container` takes care of most of
+ * the changing of host types.
+ */
+@media (max-width: 700px) {
+  /**
+   * Override the inspector toggle so it's always open
+   * in the portrait view, with the toggle button hidden.
+   */
+  #inspector-pane-toggle {
+    display: none;
+  }
+
+  #web-audio-inspector {
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+  }
+}
diff --git a/browser/themes/shared/devtools/webconsole.inc.css b/browser/themes/shared/devtools/webconsole.inc.css
index ca6f71af8..4c213ef3b 100644
--- a/browser/themes/shared/devtools/webconsole.inc.css
+++ b/browser/themes/shared/devtools/webconsole.inc.css
@@ -4,51 +4,76 @@
 
 /* General output styles */
 
-.webconsole-timestamp {
+a {
+  -moz-user-focus: normal;
+  -moz-user-input: enabled;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* Workaround for Bug 575675 - FindChildWithRules aRelevantLinkVisited
+ * assertion when loading HTML page with links in XUL iframe */
+*:visited { }
+
+.message {
+  display: flex;
+  flex: none;
+  padding: 0 7px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.message > .timestamp {
+  flex: none;
   color: GrayText;
-  margin-top: 0;
-  margin-bottom: 0;
-  font-family: monospace;
+  margin: 4px 6px 0 0;
 }
 
-.hud-msg-node {
-  list-style-image: url(chrome://browser/skin/devtools/webconsole.png);
-  -moz-image-region: rect(0, 1px, 0, 0);
+.message > .indent {
+  flex: none;
 }
 
-.webconsole-msg-icon {
-  margin: 3px 4px;
-  width: 8px;
-  height: 8px;
+.message > .icon {
+  flex: none;
+  margin: 3px 6px 0 0;
+  padding: 0 4px;
+  height: 1em;
+  align-self: flex-start;
 }
 
-.hud-clickable {
-  cursor: pointer;
-  text-decoration: underline;
+.message > .icon::before {
+  content: "";
+  background-image: url(chrome://browser/skin/devtools/webconsole.png);
+  background-position: 8px 8px;
+  background-repeat: no-repeat;
+  background-size: 48px 40px;
+  width: 8px;
+  height: 8px;
+  display: inline-block;
 }
 
-.webconsole-msg-body {
-  margin-top: 0;
-  margin-bottom: 3px;
-  -moz-margin-start: 3px;
-  -moz-margin-end: 6px;
-  white-space: pre-wrap;
-  font-family: monospace;
+@media (min-resolution: 2dppx) {
+  .message > .icon::before {
+    background-image: url(chrome://browser/skin/devtools/webconsole@2x.png);
+  }
 }
 
-.webconsole-msg-body-piece {
-  margin: 0;
+.message > .message-body-wrapper {
+  flex: 1 1 100%;
+  margin: 3px;
 }
 
-.webconsole-msg-url {
-  margin: 0 6px;
+.message-body-wrapper .table-widget-body {
+  overflow: visible;
 }
 
-/* Repeated messages */
-.webconsole-msg-repeat {
-  margin: 2px 0;
-  padding-left: 4px;
-  padding-right: 4px;
+/* The red bubble that shows the number of times a message is repeated */
+.message-repeats {
+  -moz-user-select: none;
+  flex: none;
+  margin: 2px 6px;
+  padding: 0 6px;
+  height: 1.25em;
   color: white;
   background-color: red;
   border-radius: 40px;
@@ -57,50 +82,90 @@
   font-weight: 600;
 }
 
-.webconsole-msg-repeat[value="1"] {
+.message-repeats[value="1"] {
   display: none;
 }
 
-.webconsole-location {
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 0;
-  -moz-margin-end: 6px;
+.message-location {
+  display: flex;
+  flex: none;
+  align-self: flex-start;
+  justify-content: flex-end;
   width: 10em;
+  margin-top: 3px;
+  color: -moz-nativehyperlinktext;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.message-location:hover,
+.message-location:focus {
+  text-decoration: underline;
+}
+
+.message-location > .filename {
+  text-overflow: ellipsis;
   text-align: end;
+  overflow: hidden;
 }
 
-.webconsole-mixed-content {
-  color: #FF0000;
+.message-location > .line-number {
+  flex: none;
 }
 
-.webconsole-mixed-content-link {
-  color: #0000EE;
-  margin: 0;
+.message-flex-body {
+  display: flex;
 }
 
-.hud-msg-node[selected="true"] > .webconsole-timestamp,
-.hud-msg-node[selected="true"] > .webconsole-location {
-  color: inherit;
+.message-body > * {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.message-flex-body > .message-body {
+  display: block;
+  flex: 1 1 auto;
+  vertical-align: middle;
+}
+
+.message-flex-body > .message-location {
+  margin-top: 0;
 }
 
 .jsterm-input-container {
-  background: white;
+  border-top-width: 1px;
+  border-top-style: solid;
 }
 
-.jsterm-input-node,
-.jsterm-complete-node {
-  font-family: monospace;
+#output-wrapper {
+  direction: ltr;
+  overflow: auto;
 }
 
-.hud-output-node {
-  -moz-appearance: none;
-  border-bottom: 1px solid ThreeDShadow;
-  margin: 0;
+#output-container {
+  -moz-user-select: text;
+  -moz-box-flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+#output-container.hideTimestamps > .message {
+  -moz-padding-start: 0;
+  -moz-margin-start: 7px;
+  width: calc(100% - 7px);
+}
+
+#output-container.hideTimestamps > .message > .timestamp {
+  display: none;
+}
+
+#output-container.hideTimestamps > .message > .indent {
+  background-color: var(--theme-body-background);
 }
 
-.hud-filtered-by-type,
-.hud-filtered-by-string {
+.filtered-by-type,
+.filtered-by-string {
   display: none;
 }
 
@@ -117,10 +182,6 @@
   -moz-user-focus: normal;
 }
 
-.webconsole-filter-button[checked] {
-  color: white !important;
-}
-
 .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
   content: "";
   display: inline-block;
@@ -138,12 +199,78 @@
   border-color: #777;
 }
 
-.webconsole-msg-network > .webconsole-msg-icon-container {
-  -moz-border-start: solid #000 6px;
+.message:hover {
+  background-color: var(--theme-selection-background-semitransparent) !important;
+}
+
+.theme-light .message[severity=error] {
+  background-color: rgba(255, 150, 150, 0.3);
+}
+
+.theme-dark .message[severity=error] {
+  background-color: rgba(235, 83, 104, 0.17);
+}
+
+.console-string {
+  color: var(--theme-highlight-lightorange);
+}
+
+.theme-selected .console-string,
+.theme-selected .cm-number,
+.theme-selected .cm-variable,
+.theme-selected .kind-ArrayLike {
+  color: #f5f7fa !important; /* Selection Text Color */
+}
+
+.message[category=network] > .indent {
+  -moz-border-end: solid #000 6px;
+}
+
+.message[category=network][severity=error] > .icon::before {
+  background-position: -8px 0;
+}
+
+.message[category=network] > .message-body {
+  display: flex;
+}
+
+.message[category=network] .method {
+  flex: none;
+}
+
+.message[category=network]:not(.navigation-marker) .url {
+  flex: 1 1 auto;
+  /* Make sure the URL is very small initially, let flex change width as needed. */
+  width: 100px;
+  min-width: 5em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.message[category=network] .status {
+  flex: none;
+  -moz-margin-start: 6px;
+}
+
+.message[category=network].mixed-content .url {
+  color: #FF0000;
+}
+
+.message .learn-more-link {
+  color: -moz-nativehyperlinktext;
+  margin: 0 6px;
 }
 
-.webconsole-msg-network.webconsole-msg-error {
-  -moz-image-region: rect(0, 16px, 8px, 8px);
+.message[category=network] .xhr {
+  background-color: var(--theme-body-color-alt);
+  color: var(--theme-body-background);
+  border-radius: 3px;
+  font-weight: bold;
+  font-size: 10px;
+  padding: 2px;
+  line-height: 10px;
+  -moz-margin-end: 1ex;
 }
 
 /* CSS styles */
@@ -152,16 +279,16 @@
   border-color: #1BA2CC;
 }
 
-.webconsole-msg-cssparser > .webconsole-msg-icon-container {
-  -moz-border-start: solid #00b6f0 6px;
+.message[category=cssparser] > .indent {
+  -moz-border-end: solid #00b6f0 6px;
 }
 
-.webconsole-msg-cssparser.webconsole-msg-error {
-  -moz-image-region: rect(8px, 16px, 16px, 8px);
+.message[category=cssparser][severity=error] > .icon::before {
+  background-position: -8px -8px;
 }
 
-.webconsole-msg-cssparser.webconsole-msg-warn {
-  -moz-image-region: rect(8px, 24px, 16px, 16px);
+.message[category=cssparser][severity=warn] > .icon::before {
+  background-position: -16px -8px;
 }
 
 /* JS styles */
@@ -170,16 +297,16 @@
   border-color: #E98A00;
 }
 
-.webconsole-msg-exception > .webconsole-msg-icon-container {
-  -moz-border-start: solid #fb9500 6px;
+.message[category=exception] > .indent {
+  -moz-border-end: solid #fb9500 6px;
 }
 
-.webconsole-msg-exception.webconsole-msg-error {
-  -moz-image-region: rect(16px, 16px, 24px, 8px);
+.message[category=exception][severity=error] > .icon::before {
+  background-position: -8px -16px;
 }
 
-.webconsole-msg-exception.webconsole-msg-warn {
-  -moz-image-region: rect(16px, 24px, 24px, 16px);
+.message[category=exception][severity=warn] > .icon::before {
+  background-position: -16px -16px;
 }
 
 /* Web Developer styles */
@@ -188,35 +315,35 @@
   border-color: #929292;
 }
 
-.webconsole-msg-console > .webconsole-msg-icon-container {
-  -moz-border-start: solid #cbcbcb 6px;
+.message[category=console] > .indent {
+  -moz-border-end: solid #cbcbcb 6px;
 }
 
-.webconsole-msg-console.webconsole-msg-error,
-.webconsole-msg-output.webconsole-msg-error {
-  -moz-image-region: rect(24px, 16px, 32px, 8px);
+.message[category=console][severity=error] > .icon::before,
+.message[category=output][severity=error] > .icon::before {
+  background-position: -8px -24px;
 }
 
-.webconsole-msg-console.webconsole-msg-warn {
-  -moz-image-region: rect(24px, 24px, 32px, 16px);
+.message[category=console][severity=warn] > .icon::before {
+  background-position: -16px -24px;
 }
 
-.webconsole-msg-console.webconsole-msg-info {
-  -moz-image-region: rect(24px, 32px, 32px, 24px);
+.message[category=console][severity=info] > .icon::before {
+  background-position: -24px -24px;
 }
 
 /* Input and output styles */
-.webconsole-msg-input > .webconsole-msg-icon-container,
-.webconsole-msg-output > .webconsole-msg-icon-container {
-  border-left: solid #808080 6px;
+.message[category=input] > .indent,
+.message[category=output] > .indent {
+  -moz-border-end: solid #808080 6px;
 }
 
-.webconsole-msg-input {
-  -moz-image-region: rect(24px, 40px, 32px, 32px);
+.message[category=input] > .icon::before {
+  background-position: -32px -24px;
 }
 
-.webconsole-msg-output {
-  -moz-image-region: rect(24px, 48px, 32px, 40px);
+.message[category=output] > .icon::before {
+  background-position: -40px -24px;
 }
 
 /* JSTerm Styles */
@@ -225,10 +352,19 @@
   border: none;
   padding: 0 0 0 16px;
   -moz-appearance: none;
+  background-color: transparent;
 }
 
 .jsterm-input-node {
-  background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat;
+  background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+}
+
+@media (min-resolution: 2dppx) {
+  .jsterm-input-node {
+    background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32);
+  }
 }
 
 :-moz-any(.jsterm-input-node,
@@ -236,16 +372,18 @@
   overflow-x: hidden;
 }
 
-.jsterm-complete-node > .textbox-input-box > .textbox-textarea {
-  color: GrayText;
+.inlined-variables-view .message-body {
+  display: flex;
+  flex-direction: column;
 }
-
-.webconsole-msg-inspector iframe {
-  height: 7em;
+.inlined-variables-view iframe {
+  display: block;
+  flex: 1;
+  margin-top: 5px;
   margin-bottom: 15px;
   -moz-margin-end: 15px;
-  border-radius: 4px;
-  box-shadow: 0 0 12px #dfdfdf;
+  border: 1px solid rgba(128, 128, 128, .5);
+  border-radius: 3px;
 }
 
 #webconsole-sidebar > tabs {
@@ -253,10 +391,14 @@
   border: none;
 }
 
+.devtools-side-splitter ~ #webconsole-sidebar[hidden] {
+  display: none;
+}
+
 /* Security styles */
 
-.webconsole-msg-security > .webconsole-msg-icon-container {
-  -moz-border-start: solid red 6px;
+.message[category=security] > .indent {
+  -moz-border-end: solid red 6px;
 }
 
 .webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
@@ -264,10 +406,176 @@
   border-color: #D12C2C;
 }
 
-.webconsole-msg-security.webconsole-msg-error {
-  -moz-image-region: rect(32px, 16px, 40px, 8px);
+.message[category=security][severity=error] > .icon::before {
+  background-position: -8px -32px;
+}
+
+.message[category=security][severity=warn] > .icon::before {
+  background-position: -16px -32px;
+}
+
+.navigation-marker {
+  color: #aaa;
+  background: linear-gradient(#aaa, #aaa) no-repeat left 50%;
+  background-size: 100% 2px;
+  margin-top: 6px;
+  margin-bottom: 6px;
+  font-size: 0.9em;
+}
+
+.navigation-marker .url {
+  -moz-padding-end: 9px;
+  text-decoration: none;
+}
+
+.stacktrace {
+  display: none;
+  list-style: none;
+  padding: 0 1em 0 1.5em;
+  margin: 5px 0 0 0;
+  max-height: 10em;
+  overflow-y: auto;
+  border: 1px solid rgb(200,200,200);
+  border-radius: 3px;
+}
+
+.consoletable {
+  margin: 5px 0 0 0;
+}
+
+.theme-light .message[severity=error] .stacktrace {
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.theme-dark .message[severity=error] .stacktrace {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.message[open] .stacktrace {
+  display: block;
+}
+
+.message .theme-twisty {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 3px 0 0;
+}
+
+.stacktrace li {
+  display: flex;
+  margin: 0;
+}
+
+.stacktrace .function {
+  display: block;
+  flex: 1 1 auto;
+}
+
+.cm-s-mozilla a[class] {
+  font-style: italic;
+  text-decoration: none;
+}
+
+.cm-s-mozilla a[class]:hover,
+.cm-s-mozilla a[class]:focus {
+  text-decoration: underline;
+}
+
+/* Open DOMNode in inspector button */
+.open-inspector {
+  background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
+  padding-left: 16px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.elementNode:hover .open-inspector,
+.open-inspector:hover {
+  background-position: -32px 0;
+}
+
+.open-inspector:active {
+  background-position: -16px 0;
+}
+
+.jsterm-input-container {
+  background-color: var(--theme-tab-toolbar-background);
+  border-color: var(--theme-body-background);
+}
+
+.jsterm-input-node {
+  color: var(--theme-content-color1);
+}
+
+.jsterm-complete-node {
+  color: var(--theme-comment);
+}
+
+.navigation-marker .url {
+  background: var(--theme-body-background);
+}
+
+.theme-dark .inlined-variables-view iframe {
+  border-color: #333;
+}
+
+.theme-dark .stacktrace {
+  border-color: #333;
+}
+
+.theme-light .jsterm-input-container {
+  /* For light theme use a white background for the input - it looks better
+     than off-white */
+  background-color: #fff;
+  border-color: ThreeDShadow;
+}
+.theme-light .navigation-marker .url {
+  background: #fff;
+}
+
+.theme-light .inlined-variables-view iframe {
+  border-color: #ccc;
+}
+
+.theme-light .stacktrace {
+  border-color: #ccc;
+}
+
+@media (max-width: 500px) {
+  .message > .timestamp {
+    display: none;
+  }
+  .hud-console-filter-toolbar .webconsole-filter-button .toolbarbutton-text {
+    display: none;
+  }
+  .hud-console-filter-toolbar .webconsole-filter-button {
+    min-width: 40px;
+  }
+  .hud-console-filter-toolbar .webconsole-clear-console-button {
+    min-width: 25px;
+  }
+  .webconsole-filter-button > .toolbarbutton-menubutton-button:before {
+    width: 12px;
+    height: 12px;
+    margin-left: 1px;
+  }
+  .toolbarbutton-menubutton-dropmarker {
+    margin: 0px;
+  }
 }
 
-.webconsole-msg-security.webconsole-msg-warn {
-  -moz-image-region: rect(32px, 24px, 40px, 16px);
+@media (max-width: 300px) {
+  .hud-console-filter-toolbar {
+    -moz-box-orient: vertical;
+  }
+  .toolbarbutton-text {
+    display: -moz-box;
+  }
+  .devtools-toolbarbutton {
+    margin-top: 3px;
+  }
+  .hud-console-filter-toolbar .hud-filter-box,
+  .hud-console-filter-toolbar .devtools-toolbarbutton {
+    margin-top: 5px;
+  }
 }
diff --git a/browser/themes/shared/devtools/widgets.inc.css b/browser/themes/shared/devtools/widgets.inc.css
new file mode 100644
index 000000000..7e4e7707d
--- /dev/null
+++ b/browser/themes/shared/devtools/widgets.inc.css
@@ -0,0 +1,1519 @@
+/* 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/. */
+
+%filter substitution
+%define smw_marginDark #000
+%define smw_marginLight #aaa
+%define smw_itemDarkTopBorder rgba(0,0,0,0.2)
+%define smw_itemDarkBottomBorder rgba(128,128,128,0.15)
+%define smw_itemLightTopBorder rgba(128,128,128,0.15)
+%define smw_itemLightBottomBorder transparent
+%define table_itemDarkStartBorder rgba(0,0,0,0.2)
+%define table_itemDarkEndBorder rgba(128,128,128,0.15)
+%define table_itemLightStartBorder rgba(128,128,128,0.25)
+%define table_itemLightEndBorder transparent
+
+/* Generic pane helpers */
+
+.generic-toggled-side-pane {
+  -moz-margin-start: 0 !important;
+  /* Unfortunately, transitions don't work properly with locale-aware properties,
+     so both the left and right margins are set via js, while the start margin
+     is always overridden here. */
+}
+
+.generic-toggled-side-pane[animated] {
+  transition: margin 0.25s ease-in-out;
+}
+
+/* Responsive container */
+
+.devtools-responsive-container {
+  -moz-box-orient: horizontal;
+}
+
+.devtools-main-content {
+  min-width: 50px;
+}
+
+.devtools-main-content,
+.devtools-sidebar-tabs {
+  /* Prevent some children that should be hidden from remaining visible as this is shrunk (Bug 971959) */
+  position: relative;
+}
+
+@media (max-width: 700px) {
+  .devtools-responsive-container {
+    -moz-box-orient: vertical;
+  }
+
+  .devtools-responsive-container > .devtools-side-splitter {
+    /* This is a normally vertical splitter, but we have turned it horizontal
+       due to the smaller resolution */
+    min-height: 3px;
+    height: 3px;
+    margin-top: -3px;
+
+    /* Reset the vertical splitter styles */
+    border-width: 0;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    -moz-margin-start: 0;
+    width: auto;
+    min-width: 0;
+
+    /* In some edge case the cursor is not changed to n-resize */
+    cursor: n-resize;
+  }
+
+  .devtools-responsive-container > .devtools-sidebar-tabs {
+    min-height: 35vh;
+    max-height: 75vh;
+  }
+}
+
+/* BreacrumbsWidget */
+
+.breadcrumbs-widget-container {
+  -moz-margin-end: 3px;
+  max-height: 24px; /* Set max-height for proper sizing on linux */
+  height: 24px; /* Set height to prevent starting small waiting for content */
+}
+
+.scrollbutton-up,
+.scrollbutton-down {
+  -moz-appearance: none;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  list-style-image: none;
+  margin: 0;
+  padding: 0;
+}
+
+.scrollbutton-up > .toolbarbutton-icon,
+.scrollbutton-down > .toolbarbutton-icon {
+  -moz-appearance: none;
+  width: 7px;
+  height: 16px;
+  background-size: 14px 16px;
+  background-position: 0 center;
+  background-repeat: no-repeat;
+  background-image: url("breadcrumbs-scrollbutton.png");
+  list-style-image: none;
+  margin: 0 8px;
+  padding: 0;
+}
+
+@media (min-resolution: 2dppx) {
+  .scrollbutton-up > .toolbarbutton-icon,
+  .scrollbutton-down > .toolbarbutton-icon {
+    background-image: url("breadcrumbs-scrollbutton@2x.png");
+  }
+}
+
+.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
+.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
+  background-position: -7px center;
+}
+
+.scrollbutton-up[disabled] > .toolbarbutton-icon,
+.scrollbutton-down[disabled] > .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+/* Draw shadows to indicate there is more content 'behind' scrollbuttons. */
+.scrollbutton-up:-moz-locale-dir(ltr),
+.scrollbutton-down:-moz-locale-dir(rtl) {
+  border-right: solid 1px rgba(255, 255, 255, .1);
+  border-left: solid 1px transparent;
+  box-shadow: 3px 0px 3px -3px var(--theme-sidebar-background);
+}
+
+.scrollbutton-down:-moz-locale-dir(ltr),
+.scrollbutton-up:-moz-locale-dir(rtl) {
+  border-right: solid 1px transparent;
+  border-left: solid 1px rgba(255, 255, 255, .1);
+  box-shadow: -3px 0px 3px -3px var(--theme-sidebar-background);
+}
+
+.scrollbutton-up[disabled],
+.scrollbutton-down[disabled] {
+  box-shadow: none;
+  border-color: transparent;
+}
+
+.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
+.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
+
+/* The breadcrumb separator elements are used as background images with
+ * -moz-element, so we position them offscreen since we don't care about
+ * seeing the original elements.
+ */
+.breadcrumb-separator-container {
+  position: fixed;
+  top: -1000px;
+  left: -1000px;
+}
+
+#breadcrumb-separator-before,
+#breadcrumb-separator-after,
+#breadcrumb-separator-normal {
+  width: 12px;
+  height: 24px;
+  overflow: hidden;
+}
+
+#breadcrumb-separator-before,
+#breadcrumb-separator-after:after {
+  background: var(--theme-selection-background);
+}
+
+#breadcrumb-separator-after,
+#breadcrumb-separator-before:after {
+  background: var(--theme-toolbar-background);
+}
+
+/* This chevron arrow cannot be replicated easily in CSS, so we are using
+ * a background image for it (still keeping it in a separate element so
+ * we can handle RTL support with a CSS transform).
+ */
+#breadcrumb-separator-normal {
+  background: url(breadcrumbs-divider@2x.png) no-repeat center right;
+  background-size: 12px 24px;
+}
+
+/* Fake a triangle by rotating a rectangle inside the elements */
+#breadcrumb-separator-before:after,
+#breadcrumb-separator-after:after {
+  content: "";
+  display: block;
+  width: 25px;
+  height: 24px;
+  transform: translateX(-18px) rotate(45deg);
+  -moz-box-sizing: border-box;
+}
+
+.breadcrumbs-widget-item {
+  background-color: transparent;
+  -moz-appearance: none;
+  min-height: 24px;
+  min-width: 65px;
+  margin: 0;
+  padding: 0 8px 0 20px;
+  border: none;
+  outline: none;
+  color: hsl(210,30%,85%);
+}
+
+.breadcrumbs-widget-item > .button-box {
+  border: none;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.breadcrumbs-widget-item:not([checked]) {
+  background: -moz-element(#breadcrumb-separator-normal) no-repeat center left;
+}
+
+.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item {
+  background: -moz-element(#breadcrumb-separator-after) no-repeat 0 0;
+}
+
+.breadcrumbs-widget-item[checked] {
+  background: -moz-element(#breadcrumb-separator-before) no-repeat 0 0;
+}
+
+.breadcrumbs-widget-item[checked] {
+  background-color: var(--theme-selection-background);
+}
+
+.breadcrumbs-widget-item:first-child {
+  background-image: none;
+}
+
+/* RTL support: move the images that were on the left to the right,
+ * and move images that were on the right to the left.
+ */
+.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
+  padding: 0 20px 0 8px;
+}
+
+.breadcrumbs-widget-item:-moz-locale-dir(rtl),
+.breadcrumbs-widget-item[checked] + .breadcrumbs-widget-item:-moz-locale-dir(rtl) {
+  background-position: center right;
+}
+
+#breadcrumb-separator-before:-moz-locale-dir(rtl),
+#breadcrumb-separator-after:-moz-locale-dir(rtl),
+#breadcrumb-separator-normal:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+#breadcrumb-separator-before:-moz-locale-dir(rtl):after,
+#breadcrumb-separator-after:-moz-locale-dir(rtl):after {
+  transform: translateX(-5px) rotate(45deg);
+}
+
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id,
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag,
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes,
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-classes {
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .breadcrumbs-widget-item {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .breadcrumbs-widget-item {
+  color: var(--theme-body-color);
+}
+
+.breadcrumbs-widget-item-id {
+  color: var(--theme-body-color-alt);
+}
+
+.breadcrumbs-widget-item-classes {
+  color: var(--theme-content-color1);
+}
+
+.breadcrumbs-widget-item-pseudo-classes {
+  color: var(--theme-highlight-lightorange);
+}
+
+.theme-dark .breadcrumbs-widget-item:not([checked]):hover label {
+  color: white;
+}
+
+.theme-light .breadcrumbs-widget-item:not([checked]):hover label {
+  color: black;
+}
+
+/* SimpleListWidget */
+
+.simple-list-widget-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.simple-list-widget-item.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .simple-list-widget-item:not(.selected):hover {
+  background-color: rgba(255,255,255,.05);
+}
+
+.theme-light .simple-list-widget-item:not(.selected):hover {
+  background-color: rgba(0,0,0,.05);
+}
+
+.simple-list-widget-empty-text,
+.simple-list-widget-perma-text {
+  padding: 4px 8px;
+}
+
+.simple-list-widget-empty-text,
+.simple-list-widget-perma-text {
+  color: var(--theme-body-color-alt);
+}
+
+/* FastListWidget */
+
+.fast-list-widget-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.fast-list-widget-empty-text {
+  padding: 4px 8px;
+}
+
+.fast-list-widget-empty-text {
+  color: var(--theme-body-color-alt);
+}
+
+/* SideMenuWidget */
+
+.side-menu-widget-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+/* SideMenuWidget container */
+
+.theme-dark .side-menu-widget-container:-moz-locale-dir(ltr),
+.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(ltr) {
+  box-shadow: inset -1px 0 0 @smw_marginDark@;
+}
+
+.theme-dark .side-menu-widget-container:-moz-locale-dir(rtl),
+.theme-dark .side-menu-widget-empty-text:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 @smw_marginDark@;
+}
+
+.side-menu-widget-container:-moz-locale-dir(ltr),
+.side-menu-widget-empty-text:-moz-locale-dir(ltr) {
+  box-shadow: inset -1px 0 0 @smw_marginLight@;
+}
+
+.side-menu-widget-container:-moz-locale-dir(rtl),
+.side-menu-widget-empty-text:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 @smw_marginLight@;
+}
+
+.side-menu-widget-group {
+  /* To allow visibility of the dark margin shadow. */
+  -moz-margin-end: 1px;
+}
+
+.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
+  /* To compensate for the arrow image's dark margin. */
+  -moz-margin-end: -1px;
+}
+
+/* SideMenuWidget groups */
+
+.side-menu-widget-group-title {
+  padding: 4px;
+  background-color: var(--theme-tab-toolbar-background);
+}
+
+.theme-dark .side-menu-widget-group-title {
+  color: var(--theme-content-color1);
+}
+
+.theme-light .side-menu-widget-group-title {
+  color: var(--theme-content-color3);
+}
+
+/* SideMenuWidget items */
+
+.side-menu-widget-item {
+  /* To compensate for the top and bottom borders */
+  margin-top: -1px;
+  margin-bottom: -1px;
+  background-clip: padding-box;
+}
+
+.theme-dark .side-menu-widget-item {
+  border-top: 1px solid @smw_itemDarkTopBorder@;
+  border-bottom: 1px solid @smw_itemDarkBottomBorder@;
+  color: var(--theme-selection-color);
+}
+
+.theme-dark .side-menu-widget-item:last-of-type {
+  box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;
+}
+
+.theme-light .side-menu-widget-item {
+  border-top: 1px solid @smw_itemLightTopBorder@;
+  border-bottom: 1px solid @smw_itemLightBottomBorder@;
+  color: var(--theme-body-color);
+}
+
+.theme-light .side-menu-widget-item:last-of-type {
+  box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@;
+}
+
+.side-menu-widget-item.selected {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.side-menu-widget-item-arrow {
+  -moz-margin-start: -7px;
+  width: 7px; /* The image's width is 7 pixels */
+  /* Cover the border of the side-menu-widget-item */
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
+  background-size: auto, 1px 100%;
+  background-repeat: no-repeat;
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
+  background-position: center right, top right;
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+  background-position: center left, top left;
+}
+
+.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
+  background-image: url(itemArrow-dark-ltr.svg), linear-gradient(to right, @smw_marginDark@, @smw_marginDark@);
+}
+
+.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-dark-rtl.svg), linear-gradient(to right, @smw_marginDark@, @smw_marginDark@);
+}
+
+.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
+  background-image: url(itemArrow-ltr.svg), linear-gradient(to right, @smw_marginLight@, @smw_marginLight@);
+}
+
+.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-rtl.svg), linear-gradient(to right, @smw_marginLight@, @smw_marginLight@);
+}
+
+/* SideMenuWidget items contents */
+
+.side-menu-widget-item-contents {
+  padding: 4px;
+  /* To avoid having content overlapping the arrow image. */
+  -moz-padding-end: 8px;
+}
+
+.side-menu-widget-item-other {
+  /* To avoid having content overlapping the arrow image. */
+  -moz-padding-end: 8px;
+  /* To compensate for the .side-menu-widget-item-contents padding. */
+  -moz-margin-start: -4px;
+  -moz-margin-end: -8px;
+}
+
+.side-menu-widget-item-other:first-of-type {
+  margin-top: 4px;
+}
+
+.side-menu-widget-item-other:last-of-type {
+  margin-bottom: -4px;
+}
+
+.theme-dark .side-menu-widget-item-other {
+  background-color: rgba(0,0,0,.1);
+}
+
+.theme-light .side-menu-widget-item-other {
+  background-color: rgba(128,128,128,.1);
+}
+
+.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other {
+  background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */
+  color: var(--theme-selection-color);
+}
+
+.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other {
+  background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */
+  color: var(--theme-body-color);
+}
+
+.side-menu-widget-item.selected .side-menu-widget-item-other.selected {
+  background-color: transparent;
+  color: var(--theme-selection-color);
+}
+
+/* SideMenuWidget checkboxes */
+
+.side-menu-widget-group-checkbox {
+  margin: 0;
+  -moz-margin-end: 4px;
+}
+
+.side-menu-widget-item-checkbox {
+  margin: 0;
+  -moz-margin-start: 4px;
+}
+
+/* SideMenuWidget misc */
+
+.theme-dark .side-menu-widget-container,
+.theme-dark .side-menu-widget-empty-text {
+  background-color: var(--theme-toolbar-background);
+}
+
+.side-menu-widget-empty-text {
+  padding: 4px 8px;
+}
+
+/* VariablesView */
+
+.variables-view-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.variables-view-empty-notice {
+  padding: 2px;
+}
+
+.variables-view-empty-notice {
+  color: var(--theme-body-color-alt);
+}
+
+.variables-view-scope:focus > .title,
+.variable-or-property:focus > .title {
+  background-color: var(--theme-selection-background);
+  color: var(--theme-selection-color);
+}
+
+.variables-view-scope > .title {
+  border-top-width: 1px;
+  border-top-style: solid;
+  margin-top: -1px;
+}
+
+/* Generic variables traits */
+
+.variables-view-variable:not(:last-child) {
+  border-bottom: 1px solid rgba(128, 128, 128, .15);
+}
+
+.variables-view-variable > .title > .name {
+  font-weight: 600;
+}
+
+/* Generic variables *and* properties traits */
+
+.variable-or-property:focus > .title > label {
+  color: inherit !important;
+}
+
+.variables-view-container .theme-twisty {
+  margin: 2px;
+}
+
+.variable-or-property > .title > .theme-twisty {
+  -moz-margin-start: 5px;
+}
+
+.variable-or-property:not([untitled]) > .variables-view-element-details {
+  -moz-margin-start: 7px;
+}
+
+/* Traits applied when variables or properties are changed or overridden */
+
+.variable-or-property:not([overridden]) {
+  transition: background 1s ease-in-out;
+}
+
+.variable-or-property:not([overridden])[changed] {
+  transition-duration: .4s;
+}
+
+.variable-or-property[overridden] {
+  background: rgba(128,128,128,0.05);
+}
+
+.variable-or-property[overridden] .title > label {
+  /* Cross out the title for this variable and all child properties. */
+  font-style: italic;
+  text-decoration: line-through;
+  border-bottom: none !important;
+  color: rgba(128,128,128,0.9);
+  opacity: 0.7;
+}
+
+/* Traits applied when variables or properties are editable */
+
+.variable-or-property[editable] > .title > .value {
+  cursor: text;
+}
+
+.variable-or-property[overridden] .title > .value {
+  /* Disallow editing this variable and all child properties. */
+  pointer-events: none;
+}
+
+/* Custom configurable/enumerable/writable or frozen/sealed/extensible
+ * variables and properties */
+
+.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
+  opacity: 0.6;
+}
+
+.variable-or-property-non-writable-icon {
+  background: url("chrome://browser/skin/devtools/vview-lock.png") no-repeat;
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+}
+
+@media (min-resolution: 2dppx) {
+  .variable-or-property-non-writable-icon {
+    background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
+  }
+}
+
+.variable-or-property-frozen-label,
+.variable-or-property-sealed-label,
+.variable-or-property-non-extensible-label {
+  height: 16px;
+  -moz-padding-end: 4px;
+}
+
+.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
+.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
+.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
+  color: #666;
+}
+
+/* Aligned values */
+
+.variables-view-container[aligned-values] .title > .separator {
+  -moz-box-flex: 1;
+}
+
+.variables-view-container[aligned-values] .title > .value {
+  -moz-box-flex: 0;
+  width: 70vw;
+}
+
+.variables-view-container[aligned-values] .title > .element-value-input {
+  width: calc(70vw - 10px);
+}
+
+/* Actions first */
+
+.variables-view-open-inspector {
+  -moz-box-ordinal-group: 1;
+}
+
+.variables-view-edit,
+.variables-view-add-property {
+  -moz-box-ordinal-group: 2;
+}
+
+.variable-or-property-frozen-label,
+.variable-or-property-sealed-label,
+.variable-or-property-non-extensible-label,
+.variable-or-property-non-writable-icon {
+  -moz-box-ordinal-group: 3;
+}
+
+.variables-view-delete {
+  -moz-box-ordinal-group: 4;
+}
+
+.variables-view-container[actions-first] .variables-view-delete,
+.variables-view-container[actions-first] .variables-view-add-property,
+.variables-view-container[actions-first] .variables-view-open-inspector {
+  -moz-box-ordinal-group: 0;
+}
+
+.variables-view-container[actions-first] [invisible] {
+  visibility: hidden;
+}
+
+/* Variables and properties tooltips */
+
+.variable-or-property > tooltip > label {
+  margin: 0 2px 0 2px;
+}
+
+.variable-or-property[non-enumerable] > tooltip > label.enumerable,
+.variable-or-property[non-configurable] > tooltip > label.configurable,
+.variable-or-property[non-writable] > tooltip > label.writable,
+.variable-or-property[non-extensible] > tooltip > label.extensible {
+  color: #800;
+  text-decoration: line-through;
+}
+
+.variable-or-property[overridden] > tooltip > label.overridden {
+  -moz-padding-start: 4px;
+  -moz-border-start: 1px dotted #000;
+}
+
+.variable-or-property[safe-getter] > tooltip > label.WebIDL {
+  -moz-padding-start: 4px;
+  -moz-border-start: 1px dotted #000;
+  color: #080;
+}
+
+/* Variables and properties editing */
+
+.variables-view-delete {
+  background: url("chrome://browser/skin/devtools/vview-delete.png");
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+}
+
+@media (min-resolution: 2dppx) {
+  .variables-view-delete {
+    background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
+  }
+}
+
+.variables-view-delete:hover {
+  background-position: 16px;
+}
+
+.variables-view-delete:active {
+  background-position: 32px;
+}
+
+.variable-or-property:focus > .title > .variables-view-delete {
+  background-position: 0px;
+}
+
+.variables-view-edit {
+  background: url("chrome://browser/skin/devtools/vview-edit.png");
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+@media (min-resolution: 2dppx) {
+  .variables-view-edit {
+    background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
+  }
+}
+
+.variables-view-edit:hover {
+  background-position: 16px;
+}
+
+.variables-view-edit:active {
+  background-position: 32px;
+}
+
+.variable-or-property:focus > .title > .variables-view-edit {
+  background-position: 0px;
+}
+
+.variables-view-open-inspector {
+  background: url("chrome://browser/skin/devtools/vview-open-inspector.png");
+  background-size: cover;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+@media (min-resolution: 2dppx) {
+  .variables-view-open-inspector {
+    background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png");
+  }
+}
+
+.variables-view-open-inspector:hover {
+  background-position: 16px;
+}
+
+.variables-view-open-inspector:active {
+  background-position: 32px;
+}
+
+.variable-or-property:focus > .title > .variables-view-open-inspector {
+  background-position: 0px;
+}
+
+/* Variables and properties input boxes */
+
+.variable-or-property > .title > .separator + .element-value-input {
+  -moz-margin-start: -2px !important;
+  -moz-margin-end: 2px !important;
+}
+
+.variable-or-property > .title > .separator[hidden=true] + .element-value-input {
+  -moz-margin-start: 4px !important;
+  -moz-margin-end: 2px !important;
+}
+
+.element-name-input {
+  -moz-margin-start: -2px !important;
+  -moz-margin-end: 2px !important;
+  font-weight: 600;
+}
+
+.element-value-input,
+.element-name-input {
+  border: 1px solid rgba(128, 128, 128, .5) !important;
+  border-radius: 0;
+  color: inherit;
+}
+
+/* Variables and properties searching */
+
+.variable-or-property[unmatched] {
+  border: none;
+  margin: 0;
+}
+
+/* Canvas graphs */
+
+.graph-widget-container {
+  position: relative;
+}
+
+.graph-widget-canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.graph-widget-canvas[input=hovering-background] {
+  cursor: text;
+}
+
+.graph-widget-canvas[input=hovering-region] {
+  cursor: pointer;
+}
+
+.graph-widget-canvas[input=hovering-selection-start-boundary],
+.graph-widget-canvas[input=hovering-selection-end-boundary],
+.graph-widget-canvas[input=adjusting-selection-boundary] {
+  cursor: col-resize;
+}
+
+.graph-widget-canvas[input=hovering-selection-contents] {
+  cursor: grab;
+}
+
+.graph-widget-canvas[input=dragging-selection-contents] {
+  cursor: grabbing;
+}
+
+/* Line graph widget */
+
+.line-graph-widget-gutter {
+  position: absolute;
+  background: rgba(255,255,255,0.75);
+  width: 10px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-right: 1px solid rgba(255,255,255,0.25);
+  pointer-events: none;
+}
+
+.line-graph-widget-gutter-line {
+  position: absolute;
+  width: 100%;
+  border-top: 1px solid;
+}
+
+.line-graph-widget-gutter-line[type=maximum] {
+  border-color: #2cbb0f;
+}
+
+.line-graph-widget-gutter-line[type=minimum] {
+  border-color: #ed2655;
+}
+
+.line-graph-widget-gutter-line[type=average] {
+  border-color: #d97e00;
+}
+
+.line-graph-widget-tooltip {
+  position: absolute;
+  background: rgba(255,255,255,0.75);
+  border-radius: 2px;
+  line-height: 15px;
+  -moz-padding-start: 6px;
+  -moz-padding-end: 6px;
+  transform: translateY(-50%);
+  font-size: 80%;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.line-graph-widget-tooltip[with-arrows=true]::before {
+  content: "";
+  position: absolute;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  top: calc(50% - 3px);
+}
+
+.line-graph-widget-tooltip[arrow=start][with-arrows=true]::before {
+  -moz-border-end: 3px solid rgba(255,255,255,0.75);
+  left: -3px;
+}
+
+.line-graph-widget-tooltip[arrow=end][with-arrows=true]::before {
+  -moz-border-start: 3px solid rgba(255,255,255,0.75);
+  right: -3px;
+}
+
+.line-graph-widget-tooltip[type=maximum] {
+  left: 14px;
+}
+
+.line-graph-widget-tooltip[type=minimum] {
+  left: 14px;
+}
+
+.line-graph-widget-tooltip[type=average] {
+  right: 4px;
+}
+
+.line-graph-widget-tooltip > [text=info] {
+  color: #18191a;
+}
+
+.line-graph-widget-tooltip > [text=value] {
+  -moz-margin-start: 3px;
+}
+
+.line-graph-widget-tooltip > [text=metric] {
+  -moz-margin-start: 1px;
+  color: #667380;
+}
+
+.line-graph-widget-tooltip > [text=value],
+.line-graph-widget-tooltip > [text=metric] {
+  text-shadow: 1px  0px rgba(255,255,255,0.6),
+              -1px  0px rgba(255,255,255,0.6),
+               0px -1px rgba(255,255,255,0.6),
+               0px  1px rgba(255,255,255,0.6);
+}
+
+.line-graph-widget-tooltip[type=maximum] > [text=value] {
+  color: #2cbb0f;
+}
+
+.line-graph-widget-tooltip[type=minimum] > [text=value] {
+  color: #ed2655;
+}
+
+.line-graph-widget-tooltip[type=average] > [text=value] {
+  color: #d97e00;
+}
+
+/* Bar graph widget */
+
+.bar-graph-widget-canvas {
+  background: #f7f7f7;
+}
+
+.bar-graph-widget-legend {
+  position: absolute;
+  top: 4px;
+  left: 8px;
+  color: #292e33;
+  font-size: 80%;
+  pointer-events: none;
+}
+
+.bar-graph-widget-legend-item {
+  float: left;
+  -moz-margin-end: 8px;
+}
+
+.bar-graph-widget-legend-item > [view="color"],
+.bar-graph-widget-legend-item > [view="label"] {
+  vertical-align: middle;
+}
+
+.bar-graph-widget-legend-item > [view="color"] {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border: 1px solid #fff;
+  border-radius: 1px;
+  -moz-margin-end: 4px;
+  pointer-events: all;
+  cursor: pointer;
+}
+
+.bar-graph-widget-legend-item > [view="label"] {
+  text-shadow: 1px  0px rgba(255,255,255,0.8),
+              -1px  0px rgba(255,255,255,0.8),
+               0px -1px rgba(255,255,255,0.8),
+               0px  1px rgba(255,255,255,0.8);
+}
+
+/* Charts */
+
+.generic-chart-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.theme-dark .generic-chart-container {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .generic-chart-container {
+  color: var(--theme-body-color-alt);
+}
+
+.chart-colored-blob {
+  fill: var(--theme-content-color2);
+  background: var(--theme-content-color2);
+}
+
+/* Charts: Pie */
+
+.pie-chart-slice {
+  stroke-width: 1px;
+  cursor: pointer;
+}
+
+.theme-dark .pie-chart-slice {
+  stroke: rgba(0,0,0,0.2);
+}
+
+.theme-light .pie-chart-slice {
+  stroke: rgba(255,255,255,0.8);
+}
+
+.theme-dark .pie-chart-slice[largest] {
+  stroke-width: 2px;
+  stroke: #fff;
+}
+
+.theme-light .pie-chart-slice[largest] {
+  stroke: #000;
+}
+
+.pie-chart-label {
+  text-anchor: middle;
+  dominant-baseline: middle;
+  pointer-events: none;
+}
+
+.theme-dark .pie-chart-label {
+  fill: #000;
+}
+
+.theme-light .pie-chart-label {
+  fill: #fff;
+}
+
+.pie-chart-container[slices="1"] > .pie-chart-slice {
+  stroke-width: 0px;
+}
+
+.pie-chart-slice,
+.pie-chart-label {
+  transition: all 0.1s ease-out;
+}
+
+.pie-chart-slice:not(:hover):not([focused]),
+.pie-chart-slice:not(:hover):not([focused]) + .pie-chart-label {
+  transform: none !important;
+}
+
+/* Charts: Table */
+
+.table-chart-title {
+  padding-bottom: 10px;
+  font-size: 120%;
+  font-weight: 600;
+}
+
+.table-chart-row {
+  margin-top: 1px;
+  cursor: pointer;
+}
+
+.table-chart-grid:hover > .table-chart-row {
+  transition: opacity 0.1s ease-in-out;
+}
+
+.table-chart-grid:not(:hover) > .table-chart-row {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.generic-chart-container:hover > .table-chart-grid:hover > .table-chart-row:not(:hover),
+.generic-chart-container:hover ~ .table-chart-container > .table-chart-grid > .table-chart-row:not([focused]) {
+  opacity: 0.4;
+}
+
+.table-chart-row-box {
+  width: 8px;
+  height: 1.5em;
+  -moz-margin-end: 10px;
+}
+
+.table-chart-row-label {
+  width: 8em;
+  -moz-padding-end: 6px;
+  cursor: inherit;
+}
+
+.table-chart-totals {
+  margin-top: 8px;
+  padding-top: 6px;
+}
+
+.table-chart-totals {
+  border-top: 1px solid var(--theme-body-color-alt); /* Grey foreground text */
+}
+
+.table-chart-summary-label {
+  font-weight: 600;
+  padding: 1px 0px;
+}
+
+.theme-dark .table-chart-summary-label {
+  color: var(--theme-selection-color);
+}
+
+.theme-light .table-chart-summary-label {
+  color: var(--theme-body-color);
+}
+
+/* Table Widget */
+
+/* Table body */
+
+.table-widget-body > .devtools-side-splitter {
+  border: none;
+}
+
+.table-widget-body {
+  overflow: auto;
+}
+
+.theme-light .table-widget-body {
+  background: var(--theme-sidebar-background);
+}
+
+.theme-dark .table-widget-body,
+.theme-dark .table-widget-empty-text {
+  background-color: var(--theme-toolbar-background);
+}
+
+.theme-dark .table-widget-body:-moz-locale-dir(ltr) {
+  box-shadow: inset -1px 0 0 @smw_marginDark@;
+}
+
+.theme-dark .table-widget-body:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 @smw_marginDark@;
+}
+
+.table-widget-body:-moz-locale-dir(ltr) {
+  box-shadow: inset -1px 0 0 @smw_marginLight@;
+}
+
+.table-widget-body:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 @smw_marginLight@;
+}
+
+/* Column Headers */
+
+.theme-dark .table-widget-column-header,
+.theme-dark .table-widget-cell {
+  -moz-border-end: 1px solid @table_itemDarkStartBorder@;
+  box-shadow: inset 1px 0 0 @table_itemDarkEndBorder@;
+}
+
+.theme-light .table-widget-column-header,
+.theme-light .table-widget-cell {
+  -moz-border-end: 1px solid @table_itemLightStartBorder@;
+  box-shadow: inset 1px 0 0 @table_itemLightEndBorder@;
+}
+
+/* Table widget column header colors are taken from netmonitor.inc.css to match
+   the look of both the tables. This needs to be updated along with netmonitor
+   header colors in bug 951714 */
+
+.table-widget-column-header {
+  background: rgba(0,0,0,0);
+  position: sticky;
+  top: 0;
+  min-height: 32px;
+  width: 100%;
+  border: none;
+  padding: 8px 0 0 !important;
+  color: inherit;
+  text-align: center;
+  font-weight: inherit !important;
+  transition: background-color 0.1s ease-in-out;
+}
+
+.table-widget-column-header:hover {
+  background: rgba(0,0,0,0.10);
+}
+
+.table-widget-column-header:hover:active {
+  background: rgba(0,0,0,0.25);
+}
+
+.table-widget-column-header:not(:active)[sorted] {
+  background: rgba(0,0,0,0.15);
+}
+
+.table-widget-column-header:not(:active)[sorted=ascending] {
+  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+}
+
+.table-widget-column-header:not(:active)[sorted=descending] {
+  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+
+/* Cells */
+
+.table-widget-cell {
+  width: 100%;
+  margin: -1px 0 !important;
+  padding: 3px 4px;
+  background-clip: padding-box;
+  min-width: 100px;
+  -moz-user-focus: normal;
+}
+
+.theme-dark .table-widget-cell {
+  border-top: 1px solid @smw_itemDarkTopBorder@;
+  border-bottom: 1px solid @smw_itemDarkBottomBorder@;
+  color: var(--theme-selection-color);
+}
+
+.theme-dark:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
+.theme-dark .table-widget-cell:not(.theme-selected)[odd] {
+  background: rgba(255,255,255,0.05);
+}
+
+.theme-dark .table-widget-cell:last-of-type {
+  box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;
+}
+
+.theme-light .table-widget-cell {
+  border-top: 1px solid @smw_itemLightTopBorder@;
+  border-bottom: 1px solid @smw_itemLightBottomBorder@;
+}
+
+.theme-light .table-widget-cell:not(.theme-selected) {
+  color: var(--theme-body-color);
+}
+
+.theme-light:not(.filtering) .table-widget-cell:nth-child(odd):not(.theme-selected),
+.theme-light .table-widget-cell:not(.theme-selected)[odd] {
+  background: rgba(128,128,128,0.05);
+}
+
+.theme-light .table-widget-cell:last-of-type {
+  box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@;
+}
+
+.table-widget-cell.flash-out {
+  animation: flash-out 0.5s ease-in;
+}
+
+@keyframes flash-out {
+  to {
+    background: var(--theme-contrast-background);
+  }
+}
+
+/* Empty text and initial text */
+
+.table-widget-empty-text {
+  display: none;
+  text-align: center;
+  font-size: large;
+  margin-top: -20px !important;
+}
+
+.theme-light .table-widget-empty-text {
+  background: #F7F7F7; /* Background-Sidebar */
+}
+
+.table-widget-body:empty + .table-widget-empty-text:not([value=""]),
+.table-widget-body[empty] + .table-widget-empty-text:not([value=""]) {
+  display: block;
+}
+
+/* Tree Widget */
+
+.tree-widget-container {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  list-style: none;
+  overflow: hidden;
+  -moz-margin-end: 40px;
+}
+
+.tree-widget-container:-moz-focusring,
+.tree-widget-container *:-moz-focusring {
+  outline-style: none;
+}
+
+.tree-widget-empty-text {
+  padding: 10px 20px;
+  font-size: medium;
+  background: transparent;
+  pointer-events: none;
+}
+
+/* Tree Item */
+
+.tree-widget-container .tree-widget-item {
+  padding: 2px 0px 4px;
+  /* OSX has line-height 14px by default, which causes weird alignment issues
+   * because of 20px high icons. thus making line-height consistent with that of
+   * windows.
+   */
+  line-height: 17px !important;
+  display: inline-block;
+  width: 100%;
+  word-break: keep-all; /* To prevent long urls like http://foo.com/bar from
+                           breaking in multiple lines */
+}
+
+.tree-widget-container .tree-widget-children {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tree-widget-item[level="1"] {
+  font-weight: 800;
+}
+
+/* Twisties */
+.tree-widget-item:before {
+  content: "";
+  width: 14px;
+  height: 14px;
+  float: left;
+  margin: 3px 2px -3px;
+  background-repeat: no-repeat;
+  background-image: url("chrome://browser/skin/devtools/controls.png");
+  background-size: 56px 28px;
+  cursor: pointer;
+  background-position: -28px -14px;
+}
+
+.tree-widget-item:-moz-locale-dir(rtl):before {
+  float: right;
+  transform: scaleX(-1);
+}
+
+.theme-light .tree-widget-item:before {
+  background-position: 0 -14px;
+}
+
+.tree-widget-item[empty]:before {
+  background: transparent;
+}
+
+.tree-widget-item[expanded]:before {
+  background-position: -42px -14px;
+}
+
+.theme-light .tree-widget-item[expanded]:before {
+  background-position: -14px -14px;
+}
+
+.tree-widget-item + ul {
+  overflow: hidden;
+  animation: collapse-tree-item 0.2s;
+  max-height: 0;
+}
+
+.tree-widget-item[expanded] + ul {
+  animation: expand-tree-item 0.3s;
+  max-height: unset;
+}
+
+@keyframes collapse-tree-item {
+  from {
+    max-height: 300px;
+  }
+  to {
+    max-height: 0;
+  }
+}
+
+@keyframes expand-tree-item {
+  from {
+    max-height: 0;
+  }
+  to {
+    max-height: 500px;
+  }
+}
+
+@media (min-resolution: 2dppx) {
+  .tree-widget-item:before {
+    background-image: url("chrome://browser/skin/devtools/controls@2x.png");
+  }
+}
+
+/* Indentation of child items in the tree */
+
+/* For level > 6 */
+.tree-widget-item[level] + ul > li > .tree-widget-item {
+  -moz-padding-start: 98px;
+}
+
+/* First level */
+.tree-widget-item[level="1"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 14px;
+}
+
+/* Second level */
+.tree-widget-item[level="2"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 28px;
+}
+
+/* Third level */
+.tree-widget-item[level="3"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 42px;
+}
+
+/* Fourth level */
+.tree-widget-item[level="4"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 56px;
+}
+
+/* Fifth level */
+.tree-widget-item[level="5"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 70px;
+}
+
+/* Sixth level */
+.tree-widget-item[level="6"] + ul > li > .tree-widget-item {
+  -moz-padding-start: 84px;
+}
+
+/* Custom icons for certain tree items indicating the type of the item */
+
+.tree-widget-item[type]:after {
+  content: "";
+  float: left;
+  width: 16px;
+  height: 17px;
+  -moz-margin-end: 4px;
+  background-repeat: no-repeat;
+  background-size: 20px auto;
+  filter: url('filters.svg#invert');
+  background-position: 0 0;
+  background-size: auto 20px;
+}
+
+.tree-widget-item:-moz-locale-dir(rtl):after {
+  float: right;
+}
+
+.theme-dark .tree-widget-item[type]:after {
+  filter: url('filters.svg#invert-white');
+}
+
+.tree-widget-item[type="dir"]:after {
+  background-image: url(chrome://browser/skin/devtools/filetype-dir-close.svg);
+  background-position: 2px 0;
+  background-size: auto 16px;
+  width: 20px;
+}
+
+.tree-widget-item[type="dir"][expanded]:not([empty]):after {
+  background-image: url(chrome://browser/skin/devtools/filetype-dir-open.svg);
+}
+
+.tree-widget-item[type="url"]:after {
+  background-image: url(chrome://browser/skin/devtools/filetype-globe.svg);
+  background-size: auto 18px;
+  width: 18px;
+}
+
+%include ../../shared/devtools/app-manager/manifest-editor.inc.css
diff --git a/browser/themes/windows/Info-aero.png b/browser/themes/windows/Info-aero.png
deleted file mode 100644
index f9c6ef2fd..000000000
--- a/browser/themes/windows/Info-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/Info.png b/browser/themes/windows/Info.png
index d09e82b6c..f9c6ef2fd 100644
--- a/browser/themes/windows/Info.png
+++ b/browser/themes/windows/Info.png
diff --git a/browser/themes/windows/Makefile.in b/browser/themes/windows/Makefile.in
index 353289fb2..173ca6843 100644
--- a/browser/themes/windows/Makefile.in
+++ b/browser/themes/windows/Makefile.in
@@ -2,15 +2,6 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-DEPTH		= @DEPTH@
-topsrcdir	= @top_srcdir@
-srcdir		= @srcdir@
-VPATH		= @srcdir@
-
-include $(DEPTH)/config/autoconf.mk
-
 ICON_FILES := icon.png
 ICON_DEST = $(FINAL_TARGET)/extensions/{972ce4c6-7e08-4474-a285-3208198ce6fd}
 INSTALL_TARGETS += ICON
-
-include $(topsrcdir)/config/rules.mk
diff --git a/browser/themes/windows/Privacy-16-aero.png b/browser/themes/windows/Privacy-16-aero.png
deleted file mode 100644
index f801bfee2..000000000
--- a/browser/themes/windows/Privacy-16-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/Privacy-16.png b/browser/themes/windows/Privacy-16.png
index a4be3e9ac..f801bfee2 100644
--- a/browser/themes/windows/Privacy-16.png
+++ b/browser/themes/windows/Privacy-16.png
diff --git a/browser/themes/windows/Privacy-32-aero.png b/browser/themes/windows/Privacy-32-aero.png
deleted file mode 100644
index 41ecd5d93..000000000
--- a/browser/themes/windows/Privacy-32-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/Privacy-32.png b/browser/themes/windows/Privacy-32.png
index dd07c1a12..41ecd5d93 100644
--- a/browser/themes/windows/Privacy-32.png
+++ b/browser/themes/windows/Privacy-32.png
diff --git a/browser/themes/windows/Privacy-48-aero.png b/browser/themes/windows/Privacy-48-aero.png
deleted file mode 100644
index 372b8235a..000000000
--- a/browser/themes/windows/Privacy-48-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/Privacy-48.png b/browser/themes/windows/Privacy-48.png
index 2396f99e5..372b8235a 100644
--- a/browser/themes/windows/Privacy-48.png
+++ b/browser/themes/windows/Privacy-48.png
diff --git a/browser/themes/windows/Privacy-64-aero.png b/browser/themes/windows/Privacy-64-aero.png
deleted file mode 100644
index bd8d19154..000000000
--- a/browser/themes/windows/Privacy-64-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/Privacy-64.png b/browser/themes/windows/Privacy-64.png
index d3605015b..bd8d19154 100644
--- a/browser/themes/windows/Privacy-64.png
+++ b/browser/themes/windows/Privacy-64.png
diff --git a/browser/themes/windows/Secure24-aero.png b/browser/themes/windows/Secure24-aero.png
deleted file mode 100644
index 265d79ba1..000000000
--- a/browser/themes/windows/Secure24-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/Secure24.png b/browser/themes/windows/Secure24.png
index 896343afc..265d79ba1 100644
--- a/browser/themes/windows/Secure24.png
+++ b/browser/themes/windows/Secure24.png
diff --git a/browser/themes/windows/aboutSessionRestore-window-icon-aero.png b/browser/themes/windows/aboutSessionRestore-window-icon.png
index 00774050c..00774050c 100644
--- a/browser/themes/windows/aboutSessionRestore-window-icon-aero.png
+++ b/browser/themes/windows/aboutSessionRestore-window-icon.png
diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css
deleted file mode 100644
index 075bf0356..000000000
--- a/browser/themes/windows/browser-aero.css
+++ /dev/null
@@ -1,769 +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/. */
-
-%define WINDOWS_AERO
-%include browser.css
-%undef WINDOWS_AERO
-
-%define customToolbarColor hsl(210,75%,92%)
-%define customToolbarColorWin10 hsl(210,0%,92%)
-%define glassActiveBorderColor rgb(37, 44, 51)
-%define glassInactiveBorderColor rgb(102, 102, 102)
-
-@media not all and (-moz-windows-classic) {
-  #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container {
-    margin-top: 1px;
-  }
-
-  #appmenu-button {
-    border-width: 2px;
-    -moz-border-left-colors: @appMenuButtonBorderColor@;
-    -moz-border-bottom-colors: @appMenuButtonBorderColor@;
-    -moz-border-right-colors: @appMenuButtonBorderColor@;
-    margin-bottom: 1px; /* compensate white outer border */
-    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
-                0 0 2px 1px rgba(255,255,255,.25) inset;
-  }
-
-  #main-window[privatebrowsingmode=temporary] #appmenu-button {
-    -moz-border-left-colors: rgba(255,255,255,.5) rgba(43,8,65,.9);
-    -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(43,8,65,.9);
-    -moz-border-right-colors: rgba(255,255,255,.5) rgba(43,8,65,.9);
-  }
-
-  #appmenu-popup {
-    margin-top: -1px;
-    -moz-margin-start: 1px;
-  }
-
-  .panel-promo-message {
-    font-style: italic;
-  }
-}
-
-@media (-moz-windows-default-theme) {
- @media (-moz-os-version: windows-vista),
-        (-moz-os-version: windows-win7) {
-  #navigator-toolbox > toolbar:not(:-moz-lwtheme),
-  #browser-bottombox:not(:-moz-lwtheme) {
-    background-color: @customToolbarColor@;
-  }
-
-  .tabbrowser-tab:not(:-moz-lwtheme),
-  .tabs-newtab-button:not(:-moz-lwtheme) {
-    background-image: @toolbarShadowOnTab@, @bgTabTexture@,
-                      linear-gradient(@customToolbarColor@, @customToolbarColor@);
-  }
-
-  .tabbrowser-tab:not(:-moz-lwtheme):hover,
-  .tabs-newtab-button:not(:-moz-lwtheme):hover {
-    background-image: @toolbarShadowOnTab@, @bgTabTextureHover@,
-                      linear-gradient(@customToolbarColor@, @customToolbarColor@);
-  }
-
-  .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
-    background-image: linear-gradient(#fff, @toolbarHighlight@ 50%),
-                      linear-gradient(@customToolbarColor@, @customToolbarColor@);
-  }
-
-  #main-window[tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
-    background-image: @toolbarShadowOnTab@,
-                      linear-gradient(#fff, @toolbarHighlight@ 50%),
-                      linear-gradient(@customToolbarColor@, @customToolbarColor@);
-  }
-
-  #navigator-toolbox:not(:-moz-lwtheme)::after {
-    background-color: #aabccf;
-  }
- }
-
- @media (-moz-os-version: windows-win8),
-        (-moz-os-version: windows-win10) {
-  #navigator-toolbox > toolbar:not(:-moz-lwtheme),
-  #browser-bottombox:not(:-moz-lwtheme) {
-    background-color: @customToolbarColorWin10@;
-  }
-
-  .tabbrowser-tab:not(:-moz-lwtheme),
-  .tabs-newtab-button:not(:-moz-lwtheme) {
-    background-image: @toolbarShadowOnTab@, @bgTabTexture@,
-                      linear-gradient(@customToolbarColorWin10@, @customToolbarColorWin10@);
-  }
-
-  .tabbrowser-tab:not(:-moz-lwtheme):hover,
-  .tabs-newtab-button:not(:-moz-lwtheme):hover {
-    background-image: @toolbarShadowOnTab@, @bgTabTextureHover@,
-                      linear-gradient(@customToolbarColorWin10@, @customToolbarColorWin10@);
-  }
-
-  .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
-    background-image: linear-gradient(#fff, @toolbarHighlight@ 50%),
-                      linear-gradient(@customToolbarColorWin10@, @customToolbarColorWin10@);
-  }
-
-  #main-window[tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
-    background-image: @toolbarShadowOnTab@,
-                      linear-gradient(#fff, @toolbarHighlight@ 50%),
-                      linear-gradient(@customToolbarColorWin10@, @customToolbarColorWin10@);
-  }
-
-  #navigator-toolbox:not(:-moz-lwtheme)::after {
-    background-color: #bcbcbc;
-  }
- }
- 
- 
-  #navigator-toolbox[tabsontop=true] #urlbar:not(:-moz-lwtheme),
-  #navigator-toolbox[tabsontop=true] .searchbar-textbox:not(:-moz-lwtheme) {
-    border-color: hsla(210,54%,20%,.25) hsla(210,54%,20%,.27) hsla(210,54%,20%,.3);
-  }
-
-  #navigator-toolbox[tabsontop=true] #urlbar:not(:-moz-lwtheme):not([focused]):hover,
-  #navigator-toolbox[tabsontop=true] .searchbar-textbox:not(:-moz-lwtheme):not([focused]):hover {
-    border-color: hsla(210,54%,20%,.35) hsla(210,54%,20%,.37) hsla(210,54%,20%,.4);
-  }
-
-  #navigator-toolbox[tabsontop=true] #urlbar:not(:-moz-lwtheme)[focused],
-  #navigator-toolbox[tabsontop=true] .searchbar-textbox:not(:-moz-lwtheme)[focused] {
-    border-color: hsla(206,100%,60%,.65) hsla(206,100%,55%,.65) hsla(206,100%,50%,.65);
-  }
-
-  .sidebar-splitter {
-    border: 0;
-    -moz-border-end: 1px solid #A9B7C9;
-    min-width: 0;
-    width: 3px;
-    background-color: transparent;
-    -moz-margin-start: -3px;
-    position: relative;
-  }
-
-  #appcontent ~ .sidebar-splitter {
-    -moz-border-start: 1px solid #A9B7C9;
-    -moz-border-end: none;
-    -moz-margin-start: 0;
-    -moz-margin-end: -3px;
-  }
-
-  .menu-accel,
-  .menu-iconic-accel {
-    color: graytext;
-  }
-
-  .chatbar-button,
-  chatbar > chatbox {
-    border-color: #A9B7C9;
-  }
-  
-}
-
-@media (-moz-windows-compositor) {
-  #main-window {
-    background-color: transparent;
-    -moz-appearance: -moz-win-glass;
-  }
-
-  /* On win 10, if we don't set this on the entire browser container, including
-   * the sidebar, then the accent color bleeds through in the titlebar
-   * if the sidebar is open. */
-  #browser {
-    -moz-appearance: -moz-win-exclude-glass;
-  }
-
-/* ==== Windows 10 styling ==== */
-
-  @media (-moz-os-version: windows-win10) {
-    /* Draw XUL caption buttons on Win10 in lwthemes */
-
-    #titlebar-buttonbox,
-    .titlebar-button {
-      -moz-appearance: none !important;
-    }
-
-    .titlebar-button {
-      border: none;
-      margin: 0 !important;
-      padding: 9px 17px;
-    }
-        
-    #main-window[sizemode="maximized"][tabsontop=true] #tabbrowser-tabs {
-      min-height: 28px;
-    }
-
-    #main-window[sizemode=maximized] .titlebar-button {
-      padding-top: 8px;
-      padding-bottom: 8px;
-    }
-
-    .titlebar-button > .toolbarbutton-icon {
-      width: 12px;
-      height: 12px;
-    }
-
-    #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox {
-      margin-top: -4px;
-    }
-
-	#main-window[sizemode="maximized"] #titlebar-close {
-      padding-right: 19px;
-    }
-	
-    #titlebar-close:hover {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight);
-      background-color: hsla(0, 86%, 49%, 1);
-      transition: background-color linear 160ms;
-    }
-
-    #titlebar-close:hover:active {
-      background-color: hsla(0, 86%, 49%, 0.6); 
-      transition: none;
-    }
-    
-    /* light persona */
-    
-    #titlebar-min:-moz-lwtheme-darktext {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline);
-    }
-
-    #titlebar-max:-moz-lwtheme-darktext {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline);
-    }
-
-    #main-window[sizemode="maximized"]:-moz-lwtheme-darktext #titlebar-max:-moz-lwtheme-darktext {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline);
-    }
-
-    #titlebar-close:-moz-lwtheme-darktext {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline);
-    }
-    #titlebar-close:hover:-moz-lwtheme-darktext {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline);
-    }
-        
-    /* dark persona */
-    
-    #titlebar-min:-moz-lwtheme-brighttext {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline-inverted);
-    }
-
-    #titlebar-max:-moz-lwtheme-brighttext {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline-inverted);
-    }
-
-    #main-window[sizemode="maximized"]:-moz-lwtheme-brighttext #titlebar-max:-moz-lwtheme-brighttext {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline-inverted);
-    }
-
-    #titlebar-close:-moz-lwtheme-brighttext {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted);
-    }
-    #titlebar-close:hover:-moz-lwtheme-brighttext {
-      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted);
-    }
-        
-    /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
-     * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
-    @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
-      .titlebar-button > .toolbarbutton-icon {
-        width: 11.5px;
-        height: 11.5px;
-      }
-    }
-
-    /* 175% dpi should result in the same device pixel sizes as 150% dpi. */
-    @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
-      .titlebar-button {
-        padding-left: 14.1px;
-        padding-right: 14.1px;
-      }
-
-      .titlebar-button > .toolbarbutton-icon {
-        width: 10.8px;
-        height: 10.8px;
-      }
-    }
-
-    /* 225% dpi should result in the same device pixel sizes as 200% dpi. */
-    @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
-      .titlebar-button {
-        padding-left: 15.3333px;
-        padding-right: 15.3333px;
-      }
-
-      .titlebar-button > .toolbarbutton-icon {
-        width: 10.8px;
-        height: 10.8px;
-      }
-    }
-
-    /* 275% dpi should result in the same device pixel sizes as 250% dpi. */
-    @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
-      .titlebar-button > .toolbarbutton-icon {
-        width: 10.8px;
-        height: 10.8px;
-      }
-    }
-
-    .titlebar-button:hover {
-      background-color: hsla(0, 0%, 0%, .17);
-      transition: background-color linear 160ms;
-    }
-
-    .titlebar-button:hover:active {
-      background-color: hsla(0, 0%, 0%, .27);
-      transition: none;
-    }
-
-    .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
-      opacity: 0.5;
-    }
-          
-    /* dark persona */
-    .titlebar-button:-moz-lwtheme-brighttext:hover {
-      background-color: hsla(0, 0%, 100%, .27);
-      transition: background-color linear 180ms;
-    }
-
-    .titlebar-button:-moz-lwtheme-brighttext:hover:active {
-      background-color: hsla(0, 0%, 100%, .37);
-      transition: none;
-    }
-    
-    /* dark accent color */
-    #main-window[darkwindowframe="true"] .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
-      background-color: hsla(0, 0%, 100%, .17);
-      transition: background-color linear 180ms;
-    }
-
-    #main-window[darkwindowframe="true"] .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active	{
-      background-color: hsla(0, 0%, 100%, .27);
-      transition: none;
-    }
-    
-    #main-window[darkwindowframe="true"] #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
-      background-color: hsla(0, 86%, 49%, 1);
-      transition: background-color linear 120ms;
-    }
-
-    #main-window[darkwindowframe="true"] #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active	{
-      background-color: hsla(0, 60%, 39%, 1);
-      transition: none;
-    }
-     
-    #appmenu-button {
-      margin-top: -1px;
-      margin-bottom: 5px;
-    }    
-
-  }
-
-/* ==== Windows Vista/7/8 styling ==== */
-
-  @media (-moz-os-version: windows-vista),
-         (-moz-os-version: windows-win7),
-         (-moz-os-version: windows-win8) {
-    /* Make sure the native margins are correct on Win Vista/7/8.
-     * We can't use -moz-win-glass there because the border sizing would
-     * not be correct. */
-    #main-window {
-      -moz-appearance: -moz-win-borderless-glass;
-    }
-    
-    /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
-    .titlebar-button {
-      display: none;
-    }
-
-    /* The borders on the glass frame are ours, and inside #browser, and on
-     * vista and win7 we want to make sure they are "glassy", so we can't use
-     * #browser as the exclude-glass container. We use #appcontent instead. */
-    #browser {
-      -moz-appearance: none;
-    }
-
-    #appcontent {
-      -moz-appearance: -moz-win-exclude-glass;
-    }
-
-    #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox {
-      margin-top: -7px;
-    }
-
-    /* Artificially draw window borders that are covered by lwtheme, see bug 591930. */
-    #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme {
-      border-top: 2px solid;
-      -moz-border-top-colors: @glassActiveBorderColor@ rgba(255,255,255,.6);
-    }
-
-    #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme:-moz-window-inactive {
-      -moz-border-top-colors: @glassInactiveBorderColor@ rgba(255,255,255,.6);
-    }
-    
-    #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container:-moz-lwtheme {
-      margin-top: -1px;
-    }
-
-    #main-window[sizemode="normal"] #titlebar-buttonbox:-moz-lwtheme {
-      margin-top: -2px;
-    }
-
-    #appmenu-button {
-      margin-bottom: -1px; /* compensate white outer border */
-    }
-    
-  }
-
-/* ==== Windows Vista/7 (true glass) styling ==== */
-
-  @media (-moz-os-version: windows-vista),
-         (-moz-os-version: windows-win7) {
-    #toolbar-menubar:not(:-moz-lwtheme),
-    #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
-    #nav-bar[tabsontop=false]:not(:-moz-lwtheme),
-    #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child:not(:-moz-lwtheme) {
-      text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
-    }
-  
-    #main-menubar:not(:-moz-lwtheme):not(:-moz-window-inactive) {
-      background-color: rgba(255,255,255,.7);
-      border-radius: 2.5px;
-      color: black;
-    }
-    
-  }
- 
-/* ==== Windows 8/10 (flat color) styling ==== */
- 
-  @media (-moz-os-version: windows-win8),
-         (-moz-os-version: windows-win10) {
-    /* On dark window frames, use a light text color instead of fog on Win8/10 */
-    #main-window[darkwindowframe=true] #toolbar-menubar:not(:-moz-lwtheme),
-    #main-window[darkwindowframe=true] #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
-    #main-window[darkwindowframe=true] #nav-bar[tabsontop=false]:not(:-moz-lwtheme),
-    #main-window[darkwindowframe=true] #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child:not(:-moz-lwtheme) {
-	  color: white;
-	}
-    
-    /* Prevent the dark window frame styles from disturbing native menu styling */
-    #main-window[darkwindowframe=true] #main-menubar > menu:not(:-moz-lwtheme) {
-      color: inherit;
-    }
-    
-    #main-window[darkwindowframe=true] #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive {
-      color: ThreeDShadow;
-    }
-  }
-  
-/* ==== ==== */
-
-  #main-window[sizemode=fullscreen]:not(:-moz-lwtheme) {
-    -moz-appearance: none;
-    background-color: #556;
-  }
-
-  #toolbar-menubar:not(:-moz-lwtheme),
-  #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
-  #nav-bar[tabsontop=false]:not(:-moz-lwtheme),
-  #nav-bar + #customToolbars + #PersonalToolbar:-moz-any([collapsed=true],[moz-collapsed=true]) + #TabsToolbar[tabsontop=false]:last-child:not(:-moz-lwtheme) {
-    background-color: transparent !important;
-    color: black;
-    border-left-style: none !important;
-    border-right-style: none !important;
-  }
-
-  :-moz-any(#toolbar-menubar, #nav-bar[tabsontop=false]) :-moz-any(@primaryToolbarButtons@):not(:-moz-any(#alltabs-button,#sync-button[status])) > .toolbarbutton-icon:not(:-moz-lwtheme),
-  :-moz-any(#toolbar-menubar, #nav-bar[tabsontop=false]) :-moz-any(@primaryToolbarButtons@) > toolbarbutton > .toolbarbutton-icon:not(:-moz-lwtheme),
-  #TabsToolbar[tabsontop=true] :-moz-any(@primaryToolbarButtons@):not(:-moz-any(#alltabs-button,#new-tab-button,#sync-button[status])) > .toolbarbutton-icon:not(:-moz-lwtheme),
-  #TabsToolbar[tabsontop=true] :-moz-any(@primaryToolbarButtons@) > toolbarbutton > .toolbarbutton-icon:not(:-moz-lwtheme),
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child :-moz-any(@primaryToolbarButtons@):not(:-moz-any(#alltabs-button,#new-tab-button,#sync-button[status])) > .toolbarbutton-icon:not(:-moz-lwtheme),
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child :-moz-any(@primaryToolbarButtons@) > toolbarbutton > .toolbarbutton-icon:not(:-moz-lwtheme) {
-    list-style-image: url("chrome://browser/skin/Toolbar-glass.png");
-  }
-
-  :-moz-any(#toolbar-menubar, #TabsToolbar[tabsontop=true], #nav-bar[tabsontop=false]) .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:not(:-moz-lwtheme),
-  :-moz-any(#toolbar-menubar, #TabsToolbar[tabsontop=true], #nav-bar[tabsontop=false]) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:not(:-moz-lwtheme),
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:not(:-moz-lwtheme),
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:not(:-moz-lwtheme) {
-    list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png");
-  }
-  
-/* Show toolbar borders on vista through win8, but not on win10 and later: */
-@media (-moz-os-version: windows-vista),
-       (-moz-os-version: windows-win7),
-       (-moz-os-version: windows-win8) {
-  /* Vertical toolbar border */
-  #main-window[sizemode=normal] #navigator-toolbox::after,
-  #main-window[sizemode=normal] #navigator-toolbox[tabsontop=true] > toolbar:not(#toolbar-menubar):not(#TabsToolbar),
-  #main-window[sizemode=normal] #navigator-toolbox[tabsontop=false] > toolbar:not(#toolbar-menubar):not(#nav-bar) {
-    border-left: 1px solid @toolbarShadowColor@;
-    border-right: 1px solid @toolbarShadowColor@;
-    background-clip: padding-box;
-  }
-  #main-window[sizemode=normal] #navigator-toolbox > toolbar:-moz-lwtheme {
-    border-color: transparent !important;
-  }
-  #main-window[sizemode=normal] #browser-border-start,
-  #main-window[sizemode=normal] #browser-border-end {
-    display: -moz-box;
-    background-color: @toolbarShadowColor@;
-    width: 1px;
-  }
-  #main-window[sizemode=normal] #browser-bottombox {
-    border: 1px solid @toolbarShadowColor@;
-    border-top-style: none;
-    background-clip: padding-box;
-  }
-}
-
-/* Round top corners on Vista/7/8, but now Win10 because it's flush against the window edge */
-@media (-moz-os-version: windows-vista),
-       (-moz-os-version: windows-win7),
-       (-moz-os-version: windows-win8) {
-  #main-window[sizemode=normal][tabsontop=false] #PersonalToolbar:not(:-moz-lwtheme) {
-    border-top-left-radius: 2.5px;
-    border-top-right-radius: 2.5px;
-  }
-  #main-window[sizemode=normal] #nav-bar[tabsontop=true]:not(:-moz-lwtheme),
-  #main-window[sizemode=normal] #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme),
-  #main-window[sizemode=normal] #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme),
-  #main-window[sizemode=normal][disablechrome] #navigator-toolbox[tabsontop=true]:not(:-moz-lwtheme)::after {
-    border-top-left-radius: 2.5px;
-    border-top-right-radius: 2.5px;
-  }
-}
-
-  /* Toolbar shadow behind tabs */
-  /* This code is only needed for restored windows (i.e. sizemode=normal)
-     because of the border radius on the toolbar below the tab bar. */
-  #main-window[sizemode=normal] #nav-bar[tabsontop=true]:not(:-moz-lwtheme),
-  #main-window[sizemode=normal] #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme),
-  #main-window[sizemode=normal] #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme),
-  #main-window[sizemode=normal][disablechrome] #navigator-toolbox[tabsontop=true]:not(:-moz-lwtheme)::after {
-    border-top: 1px solid @toolbarShadowColor@;
-    background-clip: padding-box;
-  }
-  #main-window[sizemode=normal] #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme) {
-    margin-bottom: -1px;
-    background-image: none !important;
-  }
-  #main-window[sizemode=normal] #tabbrowser-tabs[tabsontop=true] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox:not(:-moz-lwtheme) {
-    position: relative;
-  }
-
-  #navigator-toolbox[tabsontop=false] > #PersonalToolbar {
-    margin-top: 3px;
-  }
-  
-  #navigator-toolbox[tabsontop=false] > #PersonalToolbar:not(:-moz-lwtheme) {
-    margin-top: 2px;
-    border-top: 1px solid @toolbarShadowColor@;
-    background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
-  }
-  
-  @media (-moz-os-version: windows-win10) {
-    /* Remove gradient and make border faded */
-    #navigator-toolbox[tabsontop=false] > #PersonalToolbar:not(:-moz-lwtheme) {
-      border-top: 1px solid rgba(10%,10%,10%,.2);
-      background-image: none;
-    }
-  }
-
-  #main-window[sizemode=normal] #TabsToolbar[tabsontop=true] {
-    padding-left: 4px;
-    padding-right: 4px;
-  }
-
-  #main-window[sizemode=normal] #TabsToolbar[tabsontop=false] {
-    padding-left: 2px;
-    padding-right: 2px;
-  }
-
-  /* Rounded corners for when chrome is disabled */
-  #main-window[sizemode=normal][disablechrome] #navigator-toolbox[tabsontop=true]:not(:-moz-lwtheme)::after {
-    visibility: visible;
-    background-color: @customToolbarColor@;
-    background-image: linear-gradient(@toolbarHighlight@, @toolbarHighlight@);
-    height: 4px;
-  }
-
-  /* Make the window draggable by glassed toolbars (bug 555081) */
-  #toolbar-menubar:not([autohide="true"]),
-  #TabsToolbar[tabsontop="true"],
-  #nav-bar[tabsontop=false],
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child,
-  #navigator-toolbox > toolbar:not(#toolbar-menubar):-moz-lwtheme {
-    -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
-  }
-
-  #appcontent:not(:-moz-lwtheme) {
-    background-color: -moz-dialog;
-  }
-
-  #navigator-toolbox[tabsontop=false] #urlbar:not(:-moz-lwtheme),
-  #navigator-toolbox[tabsontop=false] .searchbar-textbox:not(:-moz-lwtheme) {
-    background-color: rgba(255,255,255,.725);
-    @navbarTextboxCustomBorder@
-    color: black;
-  }
-
-  #navigator-toolbox[tabsontop=false] html|*.urlbar-input:not(:-moz-lwtheme)::-moz-placeholder,
-  #navigator-toolbox[tabsontop=false] .searchbar-textbox > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input:not(:-moz-lwtheme)::-moz-placeholder {
-    opacity: 1.0;
-    color: #777;
-  }
-
-  #navigator-toolbox[tabsontop=false] #urlbar:not(:-moz-lwtheme):hover,
-  #navigator-toolbox[tabsontop=false] .searchbar-textbox:not(:-moz-lwtheme):hover {
-    background-color: rgba(255,255,255,.898);
-  }
-
-  #navigator-toolbox[tabsontop=false] #urlbar:not(:-moz-lwtheme)[focused],
-  #navigator-toolbox[tabsontop=false] .searchbar-textbox:not(:-moz-lwtheme)[focused] {
-    background-color: white;
-  }
-
-  .tabbrowser-tab:not(:-moz-lwtheme) {
-    text-shadow: none;
-  }
-
-  #main-window[sizemode=normal] .statuspanel-inner {
-    /* align with the browser's side borders */
-    padding-left: 1px;
-    padding-right: 1px;
-  }
-
-  #allTabs-panel,
-  #ctrlTab-panel {
-    background: transparent;
-    -moz-appearance: -moz-win-glass;
-    border-radius: 0;
-    border: none;
-    font: normal 1.2em "Segoe UI";
-    color: black;
-    text-shadow: white -1px -1px .35em, white -1px 1px .35em, white 1px 1px .35em, white 1px -1px .35em;
-  }
-}
-
-@media not all and (-moz-windows-compositor) {
-  @media (-moz-windows-default-theme) {
-    #main-window {
-      background-color: rgb(185,209,234);
-    }
-    #main-window:-moz-window-inactive {
-      background-color: rgb(215,228,242);
-    }
-
-    #toolbar-menubar:not([autohide=true]):not(:-moz-lwtheme),
-    #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
-    #navigator-toolbox[tabsontop=false] > toolbar:not(#toolbar-menubar):not(:-moz-lwtheme) {
-      -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
-      background-color: transparent;
-    }
-    #toolbar-menubar[autohide=true] {
-      background-color: transparent !important;
-    }
-  }
-
-  #print-preview-toolbar:not(:-moz-lwtheme) {
-    -moz-appearance: -moz-win-browsertabbar-toolbox;
-  }
-}
-
-/* ::::: fullscreen window controls ::::: */
-
-#window-controls {
-  -moz-box-align: start;
-}
-
-#minimize-button,
-#restore-button,
-#close-button {
-  -moz-appearance: none;
-  border-style: none;
-  margin: 0;
-}
-#close-button {
-  -moz-image-region: rect(0, 49px, 16px, 32px);
-}
-#close-button:hover {
-  -moz-image-region: rect(16px, 49px, 32px, 32px);
-}
-#close-button:hover:active {
-  -moz-image-region: rect(32px, 49px, 48px, 32px);
-}
-
-#minimize-button:-moz-locale-dir(rtl),
-#restore-button:-moz-locale-dir(rtl),
-#close-button:-moz-locale-dir(rtl) {
-  transform: scaleX(-1);
-}
-
-/* ::::: splitmenu highlight style that imitates Windows 7 start menu ::::: */
-@media (-moz-windows-default-theme) {
-  .splitmenu-menuitem,
-  .splitmenu-menu {
-    -moz-appearance: none;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    border: 1px solid transparent;
-  }
-  .splitmenu-menuitem {
-    -moz-margin-end: 0;
-  }
-  .splitmenu-menu {
-    -moz-margin-start: -1px;
-  }
-  .splitmenu-menuitem:-moz-locale-dir(ltr),
-  .splitmenu-menu:-moz-locale-dir(rtl) {
-    border-top-left-radius: 3px;
-    border-bottom-left-radius: 3px;
-  }
-  .splitmenu-menu:-moz-locale-dir(ltr),
-  .splitmenu-menuitem:-moz-locale-dir(rtl) {
-    border-top-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-  }
-
-  .splitmenu-menuitem > .menu-text {
-    -moz-margin-start: 1px !important;
-    -moz-margin-end: 3px !important;
-  }
-  .splitmenu-menu > .menu-right {
-    -moz-margin-end: -3px;
-  }
-
-  .splitmenu-menuitem[iconic],
-  .splitmenu-menu[iconic] {
-    padding-bottom: 1px;
-  }
-  .splitmenu-menuitem[iconic] > .menu-iconic-left {
-    margin-top: -3px;
-    margin-bottom: -2px;
-    -moz-margin-start: -1px;
-  }
-  .splitmenu-menuitem[iconic] > .menu-iconic-text {
-    -moz-margin-start: 2px !important;
-    -moz-margin-end: 3px !important;
-  }
-  .splitmenu-menu[iconic] > .menu-right {
-    margin-top: -1px;
-  }
-
-  .splitmenu-menuitem[_moz-menuactive],
-  .splitmenu-menu[_moz-menuactive] {
-    background-color: transparent;
-    background-image: linear-gradient(#fafbfd, #ebf3fd);
-    border-color: #aeccf1;
-  }
-
-  .splitmenu-menuitem[disabled][_moz-menuactive],
-  .splitmenu-menu[disabled][_moz-menuactive] {
-    background-image: linear-gradient(#f8f9f9, #eaeaea);
-    border-color: #d8d7d7;
-  }
-
-  .splitmenu-menu[_moz-menuactive]:not(:hover):not([open]) {
-    background-image: none;
-  }
-}
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index 19056e6a1..9d18a8414 100644
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -21,6 +21,10 @@
 %define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button"],#nav-bar:not([currentset])) > #unified-back-forward-button
 %define conditionalForwardWithUrlbar2 window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button"]:not([currentset*="unified-back-forward-button,urlbar-container"]),#nav-bar:not([currentset])) > #unified-back-forward-button
 %define conditionalForwardWithUrlbarWidth 27
+%define customToolbarColor hsl(210,75%,92%)
+%define customToolbarColorWin10 hsl(210,0%,92%)
+%define glassActiveBorderColor rgb(37, 44, 51)
+%define glassInactiveBorderColor rgb(102, 102, 102)
 
 %ifdef MOZ_OFFICIAL_BRANDING
 %define appMenuButtonBorderColor rgba(255,255,255,.5) rgba(6,42,83,.9)
@@ -64,9 +68,7 @@
   background-color: -moz-Dialog;
 }
 
-%ifdef WINDOWS_AERO
 @media not all and (-moz-windows-compositor) {
-%endif
   #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[inactive] ~ #TabsToolbar:not(:-moz-lwtheme) {
     background: linear-gradient(to top, @toolbarShadowColor@ 1px, transparent 1px),
                 linear-gradient(rgba(50%,50%,50%,0), ActiveCaption 85%);
@@ -85,9 +87,7 @@
     -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
     visibility: visible;
   }
-%ifdef WINDOWS_AERO
 }
-%endif
 
 #nav-bar[tabsontop=true]:not(:-moz-lwtheme),
 #nav-bar[tabsontop=true][collapsed=true]:not([customizing]):not(:-moz-lwtheme) + toolbar,
@@ -124,7 +124,6 @@
 #appmenu-button {
   -moz-appearance: none;
   background-clip: padding-box;
-  border-radius: 0 0 4px 4px;
   border: 1px solid;
   border-top: none;
   color: white;
@@ -135,19 +134,18 @@
   margin: 0 0 2px;
 }
 
-@media (-moz-windows-classic) {
+@media (-moz-os-version: windows-vista),
+       (-moz-os-version: windows-win7) {
   #appmenu-button {
-    margin-bottom: 1px;
+    border-radius: 0 0 4px 4px;
   }
 }
 
-%ifndef WINDOWS_AERO
-@media (-moz-windows-default-theme) {
-  #main-window[sizemode="normal"] #appmenu-button {
-    margin-bottom: 5px;
+@media (-moz-windows-classic) {
+  #appmenu-button {
+    margin-bottom: 1px;
   }
 }
-%endif
 
 #appmenu-button:hover:active,
 #appmenu-button[open] {
@@ -244,6 +242,8 @@
   background-image: linear-gradient(rgb(144,20,207), rgb(95,0,158) 95%);
 }
 
+
+
 #appmenu-button > .button-box {
   border-style: none;
   padding: 0;
@@ -260,9 +260,7 @@
 
 .splitmenu-menuitem {
   -moz-margin-end: 1px;
-%ifdef WINDOWS_AERO
   -moz-padding-end: 0.5em;
-%endif
 }
 
 .splitmenu-menu {
@@ -309,7 +307,6 @@
     box-shadow: -1px 0 2px rgb(204,214,234) inset;
   }
 
-%ifdef WINDOWS_AERO
   #appmenuPrimaryPane menupopup {
     -moz-appearance: none;
     background-image: linear-gradient(to right, white 26px, ThreeDLightShadow 26px,
@@ -321,11 +318,9 @@
     -moz-border-left-colors: ThreeDShadow white;
     -moz-border-right-colors: ThreeDShadow white;
   }
-%endif
 
   #appmenuSecondaryPane menupopup {
     -moz-appearance: none;
-%ifdef WINDOWS_AERO
     background-image: linear-gradient(to right, #f1f5fb 26px, ThreeDLightShadow 26px,
                                       ThreeDLightShadow 27px, ThreeDHighlight 27px,
                                       ThreeDHighlight 28px, #f1f5fb 28px);
@@ -334,14 +329,8 @@
     -moz-border-bottom-colors: ThreeDShadow #f1f5fb;
     -moz-border-left-colors: ThreeDShadow #f1f5fb;
     -moz-border-right-colors: ThreeDShadow #f1f5fb;
-%else
-    background-color: #f1f5fb;
-    border: 1px solid ThreeDShadow;
-    padding: 2px;
-%endif
   }
 
-%ifdef WINDOWS_AERO
   #appmenuPrimaryPane menupopup:-moz-locale-dir(rtl) {
     background-image: linear-gradient(to left, white 26px, ThreeDLightShadow 26px,
                                       ThreeDLightShadow 27px, ThreeDHighlight 27px,
@@ -422,23 +411,17 @@
                                         ThreeDHighlight 20.5px, #f1f5fb 20.5px);
     }
   }
-%endif
 
   .appmenu-menuseparator {
     -moz-appearance: none;
     margin-top: 3px;
     margin-bottom: 3px;
-%ifdef WINDOWS_AERO
     -moz-margin-start: 30px;
-%else
-    -moz-margin-start: calc(1.45em + 4px);
-%endif
     padding: 0;
     border-top: 1px solid #d6e5f5;
     border-bottom: none;
   }
 
-%ifdef WINDOWS_AERO
   @media (min-resolution: 1.25dppx) {
     .appmenu-menuseparator {
       -moz-margin-start: 25px;
@@ -454,7 +437,6 @@
       -moz-margin-start: 22px;
     }
   }
-%endif
 
   .appmenu-edit-button:not([disabled]):hover {
     border: 1px solid #b8d6fb;
@@ -593,11 +575,7 @@
 }
 
 .titlebar-placeholder[type="caption-buttons"] {
-%ifdef WINDOWS_AERO
   margin-left: 22px; /* additional space for Aero Snap */
-%else
-  margin-left: 10px;
-%endif
 }
 
 /* titlebar command buttons */
@@ -752,11 +730,10 @@ menuitem.bookmark-item {
 toolbar[brighttext] .toolbarbutton-1 {
   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
 }
-%ifdef WINDOWS_AERO
+
 .toolbarbutton-1:not(:-moz-lwtheme) {
   list-style-image: url("chrome://browser/skin/Toolbar-glass.png");
 }
-%endif
 
 .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
 .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
@@ -1126,11 +1103,10 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button {
 toolbar[brighttext] #home-button.bookmark-item {
   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
 }
-%ifdef WINDOWS_AERO
+
 #home-button.bookmark-item:not(:-moz-lwtheme) {
   list-style-image: url("chrome://browser/skin/Toolbar-glass.png");
 }
-%endif
 
 #home-button {
   -moz-image-region: rect(0, 90px, 18px, 72px);
@@ -1157,11 +1133,10 @@ toolbar[brighttext] #home-button.bookmark-item {
 toolbar[brighttext] #bookmarks-menu-button.bookmark-item {
   list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
 }
-%ifdef WINDOWS_AERO
+
 #bookmarks-menu-button.bookmark-item:not(:-moz-lwtheme) {
   list-style-image: url("chrome://browser/skin/Toolbar-glass.png");
 }
-%endif
 
 #print-button {
   -moz-image-region: rect(0, 162px, 18px, 144px);
@@ -1650,24 +1625,13 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
   color: -moz-nativehyperlinktext;
 }
 
-%ifndef WINDOWS_AERO
-@media (-moz-windows-default-theme) {
-  .ac-url-text:not([selected="true"]),
-  .ac-action-text:not([selected="true"]) {
-    color: #008800;
-  }
-}
-%endif
-
 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
   list-style-image: url("chrome://browser/skin/actionicon-tab.png");
   -moz-image-region: rect(0, 16px, 11px, 0);
   padding: 0 3px;
 }
 
-%ifdef WINDOWS_AERO
 @media not all and (-moz-windows-default-theme) {
-%endif
   richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
     -moz-image-region: rect(11px, 16px, 22px, 0);
   }
@@ -1677,9 +1641,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   .ac-action-text[selected="true"] {
     color: inherit !important;
   }
-%ifdef WINDOWS_AERO
 }
-%endif
 
 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
   color: GrayText;
@@ -1918,15 +1880,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   background-image: linear-gradient(to top, @toolbarShadowColor@ 1px, rgba(0,0,0,.05) 1px, transparent 50%);
 }
 
-%ifndef WINDOWS_AERO
-@media (-moz-windows-default-theme) {
-  #main-window[sizemode=normal] #TabsToolbar {
-    padding-left: 2px;
-    padding-right: 2px;
-  }
-}
-%endif
-
 .tabbrowser-tab,
 .tabs-newtab-button {
   -moz-appearance: none;
@@ -1997,22 +1950,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
                     linear-gradient(-moz-dialog, -moz-dialog);
 }
 
-%ifndef WINDOWS_AERO
-@media (-moz-windows-theme: luna-blue) {
-  .tabbrowser-tab,
-  .tabs-newtab-button {
-    background-image: @toolbarShadowOnTab@,
-                      linear-gradient(hsla(51,34%,89%,.9), hsla(51,15%,79%,.9) 1px, hsla(51,9%,68%,.9));
-  }
-
-  .tabbrowser-tab:hover,
-  .tabs-newtab-button:hover {
-    background-image: @toolbarShadowOnTab@,
-                      linear-gradient(hsla(51,34%,100%,.9), hsla(51,15%,94%,.9) 1px, hsla(51,9%,83%,.9));
-  }
-}
-%endif
-
 .tabbrowser-tab[selected="true"] {
   background-image: linear-gradient(@selectedTabHighlight@, @toolbarHighlight@ 50%),
                     linear-gradient(-moz-dialog, -moz-dialog);
@@ -2152,12 +2089,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   margin-bottom: 1px;
 }
 
-%ifdef WINDOWS_AERO
 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-compositor):not(:-moz-lwtheme),
 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-compositor):not(:-moz-lwtheme) {
   list-style-image: url(chrome://browser/skin/tabbrowser/tab-arrow-left-glass.png);
 }
-%endif
 
 toolbar[brighttext] .tabbrowser-arrowscrollbox > .scrollbutton-up,
 toolbar[brighttext] .tabbrowser-arrowscrollbox > .scrollbutton-down {
@@ -2202,12 +2137,10 @@ toolbar[brighttext] .tabbrowser-arrowscrollbox > .scrollbutton-down {
   -moz-image-region: auto;
 }
 
-%ifdef WINDOWS_AERO
 #TabsToolbar > #new-tab-button:-moz-system-metric(windows-compositor):not(:-moz-lwtheme),
 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-compositor):not(:-moz-lwtheme) {
   list-style-image: url(chrome://browser/skin/tabbrowser/newtab-glass.png);
 }
-%endif
 
 .tabs-newtab-button:-moz-lwtheme-brighttext,
 #TabsToolbar[brighttext] > #new-tab-button,
@@ -2239,10 +2172,8 @@ toolbar[brighttext] #alltabs-button {
   list-style-image: url("chrome://browser/skin/tabbrowser/alltabs-inverted.png");
 }
 
-%ifdef WINDOWS_AERO
 :-moz-any(#TabsToolbar, #nav-bar[tabsontop=false], #toolbar-menubar) > #alltabs-button[type=menu]:-moz-system-metric(windows-compositor):not(:-moz-lwtheme),
 :-moz-any(#TabsToolbar, #nav-bar[tabsontop=false], #toolbar-menubar) > toolbarpaletteitem > #alltabs-button[type=menu]:-moz-system-metric(windows-compositor):not(:-moz-lwtheme),
-%endif
 toolbar[brighttext] #alltabs-button[type="menu"] {
   list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png");
 }
@@ -2460,6 +2391,7 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
 .popup-notification-icon[popupid="addon-progress"],
 .popup-notification-icon[popupid="addon-install-cancelled"],
 .popup-notification-icon[popupid="addon-install-blocked"],
+.popup-notification-icon[popupid="addon-install-origin-blocked"],
 .popup-notification-icon[popupid="addon-install-failed"],
 .popup-notification-icon[popupid="addon-install-complete"] {
   list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png);
@@ -2942,7 +2874,6 @@ toolbar[brighttext] #addonbar-closebutton {
 
 %ifdef MOZ_DEVTOOLS
 %include ../shared/devtools/responsivedesign.inc.css
-%include ../shared/devtools/highlighter.inc.css
 %include ../shared/devtools/commandline.inc.css
 %endif
 %include ../shared/plugin-doorhanger.inc.css
@@ -3028,3 +2959,761 @@ toolbar[brighttext] #addonbar-closebutton {
   width: 20px;
   height: 16px;
 }
+
+@media not all and (-moz-windows-classic) {
+  #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container {
+    margin-top: 1px;
+  }
+
+  #appmenu-button {
+    border-width: 2px;
+    -moz-border-left-colors: @appMenuButtonBorderColor@;
+    -moz-border-bottom-colors: @appMenuButtonBorderColor@;
+    -moz-border-right-colors: @appMenuButtonBorderColor@;
+    margin-bottom: 1px; /* compensate white outer border */
+    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
+                0 0 2px 1px rgba(255,255,255,.25) inset;
+  }
+
+  #main-window[privatebrowsingmode=temporary] #appmenu-button {
+    -moz-border-left-colors: rgba(255,255,255,.5) rgba(43,8,65,.9);
+    -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(43,8,65,.9);
+    -moz-border-right-colors: rgba(255,255,255,.5) rgba(43,8,65,.9);
+  }
+
+  #appmenu-popup {
+    margin-top: -1px;
+    -moz-margin-start: 1px;
+  }
+
+  .panel-promo-message {
+    font-style: italic;
+  }
+}
+
+@media (-moz-windows-default-theme) {
+ @media (-moz-os-version: windows-vista),
+        (-moz-os-version: windows-win7) {
+  #navigator-toolbox > toolbar:not(:-moz-lwtheme),
+  #browser-bottombox:not(:-moz-lwtheme) {
+    background-color: @customToolbarColor@;
+  }
+
+  .tabbrowser-tab:not(:-moz-lwtheme),
+  .tabs-newtab-button:not(:-moz-lwtheme) {
+    background-image: @toolbarShadowOnTab@, @bgTabTexture@,
+                      linear-gradient(@customToolbarColor@, @customToolbarColor@);
+  }
+
+  .tabbrowser-tab:not(:-moz-lwtheme):hover,
+  .tabs-newtab-button:not(:-moz-lwtheme):hover {
+    background-image: @toolbarShadowOnTab@, @bgTabTextureHover@,
+                      linear-gradient(@customToolbarColor@, @customToolbarColor@);
+  }
+
+  .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
+    background-image: linear-gradient(#fff, @toolbarHighlight@ 50%),
+                      linear-gradient(@customToolbarColor@, @customToolbarColor@);
+  }
+
+  #main-window[tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
+    background-image: @toolbarShadowOnTab@,
+                      linear-gradient(#fff, @toolbarHighlight@ 50%),
+                      linear-gradient(@customToolbarColor@, @customToolbarColor@);
+  }
+
+  #navigator-toolbox:not(:-moz-lwtheme)::after {
+    background-color: #aabccf;
+  }
+ }
+
+ @media (-moz-os-version: windows-win8),
+        (-moz-os-version: windows-win10) {
+  #navigator-toolbox > toolbar:not(:-moz-lwtheme),
+  #browser-bottombox:not(:-moz-lwtheme) {
+    background-color: @customToolbarColorWin10@;
+  }
+
+  .tabbrowser-tab:not(:-moz-lwtheme),
+  .tabs-newtab-button:not(:-moz-lwtheme) {
+    background-image: @toolbarShadowOnTab@, @bgTabTexture@,
+                      linear-gradient(@customToolbarColorWin10@, @customToolbarColorWin10@);
+  }
+
+  .tabbrowser-tab:not(:-moz-lwtheme):hover,
+  .tabs-newtab-button:not(:-moz-lwtheme):hover {
+    background-image: @toolbarShadowOnTab@, @bgTabTextureHover@,
+                      linear-gradient(@customToolbarColorWin10@, @customToolbarColorWin10@);
+  }
+
+  .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
+    background-image: linear-gradient(#fff, @toolbarHighlight@ 50%),
+                      linear-gradient(@customToolbarColorWin10@, @customToolbarColorWin10@);
+  }
+
+  #main-window[tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
+    background-image: @toolbarShadowOnTab@,
+                      linear-gradient(#fff, @toolbarHighlight@ 50%),
+                      linear-gradient(@customToolbarColorWin10@, @customToolbarColorWin10@);
+  }
+
+  #navigator-toolbox:not(:-moz-lwtheme)::after {
+    background-color: #bcbcbc;
+  }
+ }
+ 
+ 
+  #navigator-toolbox[tabsontop=true] #urlbar:not(:-moz-lwtheme),
+  #navigator-toolbox[tabsontop=true] .searchbar-textbox:not(:-moz-lwtheme) {
+    border-color: hsla(210,54%,20%,.25) hsla(210,54%,20%,.27) hsla(210,54%,20%,.3);
+  }
+
+  #navigator-toolbox[tabsontop=true] #urlbar:not(:-moz-lwtheme):not([focused]):hover,
+  #navigator-toolbox[tabsontop=true] .searchbar-textbox:not(:-moz-lwtheme):not([focused]):hover {
+    border-color: hsla(210,54%,20%,.35) hsla(210,54%,20%,.37) hsla(210,54%,20%,.4);
+  }
+
+  #navigator-toolbox[tabsontop=true] #urlbar:not(:-moz-lwtheme)[focused],
+  #navigator-toolbox[tabsontop=true] .searchbar-textbox:not(:-moz-lwtheme)[focused] {
+    border-color: hsla(206,100%,60%,.65) hsla(206,100%,55%,.65) hsla(206,100%,50%,.65);
+  }
+
+  .sidebar-splitter {
+    border: 0;
+    -moz-border-end: 1px solid #A9B7C9;
+    min-width: 0;
+    width: 3px;
+    background-color: transparent;
+    -moz-margin-start: -3px;
+    position: relative;
+  }
+
+  #appcontent ~ .sidebar-splitter {
+    -moz-border-start: 1px solid #A9B7C9;
+    -moz-border-end: none;
+    -moz-margin-start: 0;
+    -moz-margin-end: -3px;
+  }
+
+  .menu-accel,
+  .menu-iconic-accel {
+    color: graytext;
+  }
+
+  .chatbar-button,
+  chatbar > chatbox {
+    border-color: #A9B7C9;
+  }
+  
+}
+
+@media (-moz-windows-compositor) {
+  #main-window {
+    background-color: transparent;
+    -moz-appearance: -moz-win-glass;
+  }
+
+  /* On win 10, if we don't set this on the entire browser container, including
+   * the sidebar, then the accent color bleeds through in the titlebar
+   * if the sidebar is open. */
+  #browser {
+    -moz-appearance: -moz-win-exclude-glass;
+  }
+
+/* ==== Windows 10 styling ==== */
+
+  @media (-moz-os-version: windows-win10) {
+    /* Draw XUL caption buttons on Win10 in lwthemes */
+
+    #titlebar-buttonbox,
+    .titlebar-button {
+      -moz-appearance: none !important;
+    }
+
+    .titlebar-button {
+      border: none;
+      margin: 0 !important;
+      padding: 9px 17px;
+    }
+        
+    #main-window[sizemode="maximized"][tabsontop=true] #tabbrowser-tabs {
+      min-height: 28px;
+    }
+
+    #main-window[sizemode=maximized] .titlebar-button {
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+
+    .titlebar-button > .toolbarbutton-icon {
+      width: 12px;
+      height: 12px;
+    }
+
+    #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox {
+      margin-top: -4px;
+    }
+
+	#main-window[sizemode="maximized"] #titlebar-close {
+      padding-right: 19px;
+    }
+	
+    #titlebar-close:hover {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight);
+      background-color: hsla(0, 86%, 49%, 1);
+      transition: background-color linear 160ms;
+    }
+
+    #titlebar-close:hover:active {
+      background-color: hsla(0, 86%, 49%, 0.6); 
+      transition: none;
+    }
+    
+    /* light persona */
+    
+    #titlebar-min:-moz-lwtheme-darktext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline);
+    }
+
+    #titlebar-max:-moz-lwtheme-darktext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline);
+    }
+
+    #main-window[sizemode="maximized"]:-moz-lwtheme-darktext #titlebar-max:-moz-lwtheme-darktext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline);
+    }
+
+    #titlebar-close:-moz-lwtheme-darktext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline);
+    }
+    #titlebar-close:hover:-moz-lwtheme-darktext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline);
+    }
+        
+    /* dark persona */
+    
+    #titlebar-min:-moz-lwtheme-brighttext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline-inverted);
+    }
+
+    #titlebar-max:-moz-lwtheme-brighttext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline-inverted);
+    }
+
+    #main-window[sizemode="maximized"]:-moz-lwtheme-brighttext #titlebar-max:-moz-lwtheme-brighttext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline-inverted);
+    }
+
+    #titlebar-close:-moz-lwtheme-brighttext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted);
+    }
+    #titlebar-close:hover:-moz-lwtheme-brighttext {
+      list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted);
+    }
+        
+    /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
+     * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
+    @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
+      .titlebar-button > .toolbarbutton-icon {
+        width: 11.5px;
+        height: 11.5px;
+      }
+    }
+
+    /* 175% dpi should result in the same device pixel sizes as 150% dpi. */
+    @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
+      .titlebar-button {
+        padding-left: 14.1px;
+        padding-right: 14.1px;
+      }
+
+      .titlebar-button > .toolbarbutton-icon {
+        width: 10.8px;
+        height: 10.8px;
+      }
+    }
+
+    /* 225% dpi should result in the same device pixel sizes as 200% dpi. */
+    @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
+      .titlebar-button {
+        padding-left: 15.3333px;
+        padding-right: 15.3333px;
+      }
+
+      .titlebar-button > .toolbarbutton-icon {
+        width: 10.8px;
+        height: 10.8px;
+      }
+    }
+
+    /* 275% dpi should result in the same device pixel sizes as 250% dpi. */
+    @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
+      .titlebar-button > .toolbarbutton-icon {
+        width: 10.8px;
+        height: 10.8px;
+      }
+    }
+
+    .titlebar-button:hover {
+      background-color: hsla(0, 0%, 0%, .17);
+      transition: background-color linear 160ms;
+    }
+
+    .titlebar-button:hover:active {
+      background-color: hsla(0, 0%, 0%, .27);
+      transition: none;
+    }
+
+    .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
+      opacity: 0.5;
+    }
+
+    /* dark persona */
+    .titlebar-button:-moz-lwtheme-brighttext:hover {
+      background-color: hsla(0, 0%, 100%, .27);
+      transition: background-color linear 180ms;
+    }
+
+    .titlebar-button:-moz-lwtheme-brighttext:hover:active {
+      background-color: hsla(0, 0%, 100%, .37);
+      transition: none;
+    }
+    
+    /* dark accent color */
+    #main-window[darkwindowframe="true"] .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
+      background-color: hsla(0, 0%, 100%, .17);
+      transition: background-color linear 180ms;
+    }
+
+    #main-window[darkwindowframe="true"] .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active	{
+      background-color: hsla(0, 0%, 100%, .27);
+      transition: none;
+    }
+    
+    #main-window[darkwindowframe="true"] #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover {
+      background-color: hsla(0, 86%, 49%, 1);
+      transition: background-color linear 120ms;
+    }
+
+    #main-window[darkwindowframe="true"] #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active	{
+      background-color: hsla(0, 60%, 39%, 1);
+      transition: none;
+    }
+      
+    #appmenu-button {
+      margin-top: -1px;
+      margin-bottom: 5px;
+    }    
+
+  }
+
+/* ==== Windows Vista/7/8 styling ==== */
+
+  @media (-moz-os-version: windows-vista),
+         (-moz-os-version: windows-win7),
+         (-moz-os-version: windows-win8) {
+    /* Make sure the native margins are correct on Win Vista/7/8.
+     * We can't use -moz-win-glass there because the border sizing would
+     * not be correct. */
+    #main-window {
+      -moz-appearance: -moz-win-borderless-glass;
+    }
+    
+    /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
+    .titlebar-button {
+      display: none;
+    }
+
+    /* The borders on the glass frame are ours, and inside #browser, and on
+     * vista and win7 we want to make sure they are "glassy", so we can't use
+     * #browser as the exclude-glass container. We use #appcontent instead. */
+    #browser {
+      -moz-appearance: none;
+    }
+
+    #appcontent {
+      -moz-appearance: -moz-win-exclude-glass;
+    }
+
+    #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox {
+      margin-top: -7px;
+    }
+
+    /* Artificially draw window borders that are covered by lwtheme, see bug 591930. */
+    #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme {
+      border-top: 2px solid;
+      -moz-border-top-colors: @glassActiveBorderColor@ rgba(255,255,255,.6);
+    }
+
+    #main-window[sizemode="normal"] > #titlebar > #titlebar-content:-moz-lwtheme:-moz-window-inactive {
+      -moz-border-top-colors: @glassInactiveBorderColor@ rgba(255,255,255,.6);
+    }
+    
+    #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container:-moz-lwtheme {
+      margin-top: -1px;
+    }
+
+    #main-window[sizemode="normal"] #titlebar-buttonbox:-moz-lwtheme {
+      margin-top: -2px;
+    }
+
+    #appmenu-button {
+      margin-bottom: -1px; /* compensate white outer border */
+    }
+    
+  }
+
+/* ==== Windows Vista/7 (true glass) styling ==== */
+
+  @media (-moz-os-version: windows-vista),
+         (-moz-os-version: windows-win7) {
+    #toolbar-menubar:not(:-moz-lwtheme),
+    #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
+    #nav-bar[tabsontop=false]:not(:-moz-lwtheme),
+    #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child:not(:-moz-lwtheme) {
+      text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
+    }
+  
+    #main-menubar:not(:-moz-lwtheme):not(:-moz-window-inactive) {
+      background-color: rgba(255,255,255,.7);
+      border-radius: 2.5px;
+      color: black;
+    }
+    
+  }
+ 
+/* ==== Windows 8/10 (flat color) styling ==== */
+
+  @media (-moz-os-version: windows-win8),
+         (-moz-os-version: windows-win10) {
+    /* On dark window frames, use a light text color instead of fog on Win8/10 */
+    #main-window[darkwindowframe=true] #toolbar-menubar:not(:-moz-lwtheme),
+    #main-window[darkwindowframe=true] #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
+    #main-window[darkwindowframe=true] #nav-bar[tabsontop=false]:not(:-moz-lwtheme),
+    #main-window[darkwindowframe=true] #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child:not(:-moz-lwtheme) {
+    color: white;
+  }
+    
+    /* Prevent the dark window frame styles from disturbing native menu styling */
+    #main-window[darkwindowframe=true] #main-menubar > menu:not(:-moz-lwtheme) {
+      color: inherit;
+    }
+    
+    #main-window[darkwindowframe=true] #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive {
+      color: ThreeDShadow;
+    }
+  }
+  
+/* ==== ==== */
+
+  #main-window[sizemode=fullscreen]:not(:-moz-lwtheme) {
+    -moz-appearance: none;
+    background-color: #556;
+  }
+
+  #toolbar-menubar:not(:-moz-lwtheme),
+  #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
+  #nav-bar[tabsontop=false]:not(:-moz-lwtheme),
+  #nav-bar + #customToolbars + #PersonalToolbar:-moz-any([collapsed=true],[moz-collapsed=true]) + #TabsToolbar[tabsontop=false]:last-child:not(:-moz-lwtheme) {
+    background-color: transparent !important;
+    color: black;
+    border-left-style: none !important;
+    border-right-style: none !important;
+  }
+
+  :-moz-any(#toolbar-menubar, #nav-bar[tabsontop=false]) :-moz-any(@primaryToolbarButtons@):not(:-moz-any(#alltabs-button,#sync-button[status])) > .toolbarbutton-icon:not(:-moz-lwtheme),
+  :-moz-any(#toolbar-menubar, #nav-bar[tabsontop=false]) :-moz-any(@primaryToolbarButtons@) > toolbarbutton > .toolbarbutton-icon:not(:-moz-lwtheme),
+  #TabsToolbar[tabsontop=true] :-moz-any(@primaryToolbarButtons@):not(:-moz-any(#alltabs-button,#new-tab-button,#sync-button[status])) > .toolbarbutton-icon:not(:-moz-lwtheme),
+  #TabsToolbar[tabsontop=true] :-moz-any(@primaryToolbarButtons@) > toolbarbutton > .toolbarbutton-icon:not(:-moz-lwtheme),
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child :-moz-any(@primaryToolbarButtons@):not(:-moz-any(#alltabs-button,#new-tab-button,#sync-button[status])) > .toolbarbutton-icon:not(:-moz-lwtheme),
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child :-moz-any(@primaryToolbarButtons@) > toolbarbutton > .toolbarbutton-icon:not(:-moz-lwtheme) {
+    list-style-image: url("chrome://browser/skin/Toolbar-glass.png");
+  }
+
+  :-moz-any(#toolbar-menubar, #TabsToolbar[tabsontop=true], #nav-bar[tabsontop=false]) .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:not(:-moz-lwtheme),
+  :-moz-any(#toolbar-menubar, #TabsToolbar[tabsontop=true], #nav-bar[tabsontop=false]) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:not(:-moz-lwtheme),
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:not(:-moz-lwtheme),
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:not(:-moz-lwtheme) {
+    list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png");
+  }
+  
+/* Show toolbar borders on vista through win8, but not on win10 and later: */
+@media (-moz-os-version: windows-vista),
+       (-moz-os-version: windows-win7),
+       (-moz-os-version: windows-win8) {
+  /* Vertical toolbar border */
+  #main-window[sizemode=normal] #navigator-toolbox::after,
+  #main-window[sizemode=normal] #navigator-toolbox[tabsontop=true] > toolbar:not(#toolbar-menubar):not(#TabsToolbar),
+  #main-window[sizemode=normal] #navigator-toolbox[tabsontop=false] > toolbar:not(#toolbar-menubar):not(#nav-bar) {
+    border-left: 1px solid @toolbarShadowColor@;
+    border-right: 1px solid @toolbarShadowColor@;
+    background-clip: padding-box;
+  }
+  #main-window[sizemode=normal] #navigator-toolbox > toolbar:-moz-lwtheme {
+    border-color: transparent !important;
+  }
+  #main-window[sizemode=normal] #browser-border-start,
+  #main-window[sizemode=normal] #browser-border-end {
+    display: -moz-box;
+    background-color: @toolbarShadowColor@;
+    width: 1px;
+  }
+  #main-window[sizemode=normal] #browser-bottombox {
+    border: 1px solid @toolbarShadowColor@;
+    border-top-style: none;
+    background-clip: padding-box;
+  }
+}
+
+/* Round top corners on Vista/7/8, but now Win10 because it's flush against the window edge */
+@media (-moz-os-version: windows-vista),
+       (-moz-os-version: windows-win7),
+       (-moz-os-version: windows-win8) {
+  #main-window[sizemode=normal][tabsontop=false] #PersonalToolbar:not(:-moz-lwtheme) {
+    border-top-left-radius: 2.5px;
+    border-top-right-radius: 2.5px;
+  }
+  #main-window[sizemode=normal] #nav-bar[tabsontop=true]:not(:-moz-lwtheme),
+  #main-window[sizemode=normal] #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme),
+  #main-window[sizemode=normal] #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme),
+  #main-window[sizemode=normal][disablechrome] #navigator-toolbox[tabsontop=true]:not(:-moz-lwtheme)::after {
+    border-top-left-radius: 2.5px;
+    border-top-right-radius: 2.5px;
+  }
+}
+
+  /* Toolbar shadow behind tabs */
+  /* This code is only needed for restored windows (i.e. sizemode=normal)
+     because of the border radius on the toolbar below the tab bar. */
+  #main-window[sizemode=normal] #nav-bar[tabsontop=true]:not(:-moz-lwtheme),
+  #main-window[sizemode=normal] #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme),
+  #main-window[sizemode=normal] #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme),
+  #main-window[sizemode=normal][disablechrome] #navigator-toolbox[tabsontop=true]:not(:-moz-lwtheme)::after {
+    border-top: 1px solid @toolbarShadowColor@;
+    background-clip: padding-box;
+  }
+  #main-window[sizemode=normal] #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme) {
+    margin-bottom: -1px;
+    background-image: none !important;
+  }
+  #main-window[sizemode=normal] #tabbrowser-tabs[tabsontop=true] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox:not(:-moz-lwtheme) {
+    position: relative;
+  }
+
+  #navigator-toolbox[tabsontop=false] > #PersonalToolbar {
+    margin-top: 3px;
+  }
+  
+  #navigator-toolbox[tabsontop=false] > #PersonalToolbar:not(:-moz-lwtheme) {
+    margin-top: 2px;
+    border-top: 1px solid @toolbarShadowColor@;
+    background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
+  }
+  
+  @media (-moz-os-version: windows-win10) {
+    /* Remove gradient and make border faded */
+    #navigator-toolbox[tabsontop=false] > #PersonalToolbar:not(:-moz-lwtheme) {
+      border-top: 1px solid rgba(10%,10%,10%,.2);
+      background-image: none;
+    }
+  }
+
+  #main-window[sizemode=normal] #TabsToolbar[tabsontop=true] {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+
+  #main-window[sizemode=normal] #TabsToolbar[tabsontop=false] {
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+
+  /* Rounded corners for when chrome is disabled */
+  #main-window[sizemode=normal][disablechrome] #navigator-toolbox[tabsontop=true]:not(:-moz-lwtheme)::after {
+    visibility: visible;
+    background-color: @customToolbarColor@;
+    background-image: linear-gradient(@toolbarHighlight@, @toolbarHighlight@);
+    height: 4px;
+  }
+
+  /* Make the window draggable by glassed toolbars (bug 555081) */
+  #toolbar-menubar:not([autohide="true"]),
+  #TabsToolbar[tabsontop="true"],
+  #nav-bar[tabsontop=false],
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed="true"] + #TabsToolbar[tabsontop="false"]:last-child,
+  #navigator-toolbox > toolbar:not(#toolbar-menubar):-moz-lwtheme {
+    -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
+  }
+
+  #appcontent:not(:-moz-lwtheme) {
+    background-color: -moz-dialog;
+  }
+
+  #navigator-toolbox[tabsontop=false] #urlbar:not(:-moz-lwtheme),
+  #navigator-toolbox[tabsontop=false] .searchbar-textbox:not(:-moz-lwtheme) {
+    background-color: rgba(255,255,255,.725);
+    @navbarTextboxCustomBorder@
+    color: black;
+  }
+
+  #navigator-toolbox[tabsontop=false] html|*.urlbar-input:not(:-moz-lwtheme)::-moz-placeholder,
+  #navigator-toolbox[tabsontop=false] .searchbar-textbox > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input:not(:-moz-lwtheme)::-moz-placeholder {
+    opacity: 1.0;
+    color: #777;
+  }
+
+  #navigator-toolbox[tabsontop=false] #urlbar:not(:-moz-lwtheme):hover,
+  #navigator-toolbox[tabsontop=false] .searchbar-textbox:not(:-moz-lwtheme):hover {
+    background-color: rgba(255,255,255,.898);
+  }
+
+  #navigator-toolbox[tabsontop=false] #urlbar:not(:-moz-lwtheme)[focused],
+  #navigator-toolbox[tabsontop=false] .searchbar-textbox:not(:-moz-lwtheme)[focused] {
+    background-color: white;
+  }
+
+  .tabbrowser-tab:not(:-moz-lwtheme) {
+    text-shadow: none;
+  }
+
+  #main-window[sizemode=normal] .statuspanel-inner {
+    /* align with the browser's side borders */
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  #allTabs-panel,
+  #ctrlTab-panel {
+    background: transparent;
+    -moz-appearance: -moz-win-glass;
+    border-radius: 0;
+    border: none;
+    font: normal 1.2em "Segoe UI";
+    color: black;
+    text-shadow: white -1px -1px .35em, white -1px 1px .35em, white 1px 1px .35em, white 1px -1px .35em;
+  }
+}
+
+@media not all and (-moz-windows-compositor) {
+  @media (-moz-windows-default-theme) {
+    #main-window {
+      background-color: rgb(185,209,234);
+    }
+    #main-window:-moz-window-inactive {
+      background-color: rgb(215,228,242);
+    }
+
+    #toolbar-menubar:not([autohide=true]):not(:-moz-lwtheme),
+    #TabsToolbar[tabsontop=true]:not(:-moz-lwtheme),
+    #navigator-toolbox[tabsontop=false] > toolbar:not(#toolbar-menubar):not(:-moz-lwtheme) {
+      -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbar-drag");
+      background-color: transparent;
+    }
+    #toolbar-menubar[autohide=true] {
+      background-color: transparent !important;
+    }
+  }
+
+  #print-preview-toolbar:not(:-moz-lwtheme) {
+    -moz-appearance: -moz-win-browsertabbar-toolbox;
+  }
+}
+
+/* ::::: fullscreen window controls ::::: */
+
+#window-controls {
+  -moz-box-align: start;
+}
+
+#minimize-button,
+#restore-button,
+#close-button {
+  -moz-appearance: none;
+  border-style: none;
+  margin: 0;
+}
+#close-button {
+  -moz-image-region: rect(0, 49px, 16px, 32px);
+}
+#close-button:hover {
+  -moz-image-region: rect(16px, 49px, 32px, 32px);
+}
+#close-button:hover:active {
+  -moz-image-region: rect(32px, 49px, 48px, 32px);
+}
+
+#minimize-button:-moz-locale-dir(rtl),
+#restore-button:-moz-locale-dir(rtl),
+#close-button:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
+/* ::::: splitmenu highlight style that imitates Windows 7 start menu ::::: */
+@media (-moz-os-version: windows-vista) and (-moz-windows-default-theme),
+       (-moz-os-version: windows-win7) and (-moz-windows-default-theme) {
+  .splitmenu-menuitem,
+  .splitmenu-menu {
+    -moz-appearance: none;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    border: 1px solid transparent;
+  }
+  .splitmenu-menuitem {
+    -moz-margin-end: 0;
+  }
+  .splitmenu-menu {
+    -moz-margin-start: -1px;
+  }
+  .splitmenu-menuitem:-moz-locale-dir(ltr),
+  .splitmenu-menu:-moz-locale-dir(rtl) {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+  }
+  .splitmenu-menu:-moz-locale-dir(ltr),
+  .splitmenu-menuitem:-moz-locale-dir(rtl) {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+  }
+
+  .splitmenu-menuitem > .menu-text {
+    -moz-margin-start: 1px !important;
+    -moz-margin-end: 3px !important;
+  }
+  .splitmenu-menu > .menu-right {
+    -moz-margin-end: -3px;
+  }
+
+  .splitmenu-menuitem[iconic],
+  .splitmenu-menu[iconic] {
+    padding-bottom: 1px;
+  }
+  .splitmenu-menuitem[iconic] > .menu-iconic-left {
+    margin-top: -3px;
+    margin-bottom: -2px;
+    -moz-margin-start: -1px;
+  }
+  .splitmenu-menuitem[iconic] > .menu-iconic-text {
+    -moz-margin-start: 2px !important;
+    -moz-margin-end: 3px !important;
+  }
+  .splitmenu-menu[iconic] > .menu-right {
+    margin-top: -1px;
+  }
+
+  .splitmenu-menuitem[_moz-menuactive],
+  .splitmenu-menu[_moz-menuactive] {
+    background-color: transparent;
+    background-image: linear-gradient(#fafbfd, #ebf3fd);
+    border-color: #aeccf1;
+  }
+
+  .splitmenu-menuitem[disabled][_moz-menuactive],
+  .splitmenu-menu[disabled][_moz-menuactive] {
+    background-image: linear-gradient(#f8f9f9, #eaeaea);
+    border-color: #d8d7d7;
+  }
+
+  .splitmenu-menu[_moz-menuactive]:not(:hover):not([open]) {
+    background-image: none;
+  }
+}
diff --git a/browser/themes/windows/communicator/moz.build b/browser/themes/windows/communicator/moz.build
index 895d11993..c97072bba 100644
--- a/browser/themes/windows/communicator/moz.build
+++ b/browser/themes/windows/communicator/moz.build
@@ -4,3 +4,4 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+JAR_MANIFESTS += ['jar.mn']
+\ No newline at end of file
diff --git a/browser/themes/windows/devtools/alerticon-warning.png b/browser/themes/windows/devtools/alerticon-warning.png
deleted file mode 100644
index 5c5d0aec5..000000000
--- a/browser/themes/windows/devtools/alerticon-warning.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/arrow-e.png b/browser/themes/windows/devtools/arrow-e.png
deleted file mode 100644
index 09691bc5e..000000000
--- a/browser/themes/windows/devtools/arrow-e.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/background-noise-toolbar.png b/browser/themes/windows/devtools/background-noise-toolbar.png
deleted file mode 100644
index d09ba9daf..000000000
--- a/browser/themes/windows/devtools/background-noise-toolbar.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs-scrollbutton.png b/browser/themes/windows/devtools/breadcrumbs-scrollbutton.png
deleted file mode 100644
index 722438060..000000000
--- a/browser/themes/windows/devtools/breadcrumbs-scrollbutton.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-end-pressed.png b/browser/themes/windows/devtools/breadcrumbs/ltr-end-pressed.png
deleted file mode 100644
index 80c1f3a26..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-end-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-end-selected-pressed.png b/browser/themes/windows/devtools/breadcrumbs/ltr-end-selected-pressed.png
deleted file mode 100644
index 87808778c..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-end-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-end-selected.png b/browser/themes/windows/devtools/breadcrumbs/ltr-end-selected.png
deleted file mode 100644
index dbb728411..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-end-selected.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-end.png b/browser/themes/windows/devtools/breadcrumbs/ltr-end.png
deleted file mode 100644
index ee96024f1..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-end.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-middle-pressed.png b/browser/themes/windows/devtools/breadcrumbs/ltr-middle-pressed.png
deleted file mode 100644
index 57abb3ffb..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-middle-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-middle-selected-pressed.png b/browser/themes/windows/devtools/breadcrumbs/ltr-middle-selected-pressed.png
deleted file mode 100644
index 3898ba3ac..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-middle-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-middle-selected.png b/browser/themes/windows/devtools/breadcrumbs/ltr-middle-selected.png
deleted file mode 100644
index c0d13e3ef..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-middle-selected.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-middle.png b/browser/themes/windows/devtools/breadcrumbs/ltr-middle.png
deleted file mode 100644
index eb65fffd5..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-middle.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-start-pressed.png b/browser/themes/windows/devtools/breadcrumbs/ltr-start-pressed.png
deleted file mode 100644
index c1a946525..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-start-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-start-selected-pressed.png b/browser/themes/windows/devtools/breadcrumbs/ltr-start-selected-pressed.png
deleted file mode 100644
index 77d63d1b1..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-start-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-start-selected.png b/browser/themes/windows/devtools/breadcrumbs/ltr-start-selected.png
deleted file mode 100644
index 6529b71ab..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-start-selected.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/ltr-start.png b/browser/themes/windows/devtools/breadcrumbs/ltr-start.png
deleted file mode 100644
index a4ca85860..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/ltr-start.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-end-pressed.png b/browser/themes/windows/devtools/breadcrumbs/rtl-end-pressed.png
deleted file mode 100644
index 1077cfb7b..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-end-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-end-selected-pressed.png b/browser/themes/windows/devtools/breadcrumbs/rtl-end-selected-pressed.png
deleted file mode 100644
index ab1040ba8..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-end-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-end-selected.png b/browser/themes/windows/devtools/breadcrumbs/rtl-end-selected.png
deleted file mode 100644
index 8b0905d0f..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-end-selected.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-end.png b/browser/themes/windows/devtools/breadcrumbs/rtl-end.png
deleted file mode 100644
index 88cc61b0b..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-end.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-middle-pressed.png b/browser/themes/windows/devtools/breadcrumbs/rtl-middle-pressed.png
deleted file mode 100644
index f4a3a5bee..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-middle-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-middle-selected-pressed.png b/browser/themes/windows/devtools/breadcrumbs/rtl-middle-selected-pressed.png
deleted file mode 100644
index d66acb42e..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-middle-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-middle-selected.png b/browser/themes/windows/devtools/breadcrumbs/rtl-middle-selected.png
deleted file mode 100644
index 9b77579e9..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-middle-selected.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-middle.png b/browser/themes/windows/devtools/breadcrumbs/rtl-middle.png
deleted file mode 100644
index 63b620154..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-middle.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-start-pressed.png b/browser/themes/windows/devtools/breadcrumbs/rtl-start-pressed.png
deleted file mode 100644
index bfff8e95d..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-start-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-start-selected-pressed.png b/browser/themes/windows/devtools/breadcrumbs/rtl-start-selected-pressed.png
deleted file mode 100644
index 2ce094819..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-start-selected-pressed.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-start-selected.png b/browser/themes/windows/devtools/breadcrumbs/rtl-start-selected.png
deleted file mode 100644
index e7c848ac3..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-start-selected.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/breadcrumbs/rtl-start.png b/browser/themes/windows/devtools/breadcrumbs/rtl-start.png
deleted file mode 100644
index b8f67974c..000000000
--- a/browser/themes/windows/devtools/breadcrumbs/rtl-start.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/canvasdebugger.css b/browser/themes/windows/devtools/canvasdebugger.css
new file mode 100644
index 000000000..504c3fb9b
--- /dev/null
+++ b/browser/themes/windows/devtools/canvasdebugger.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/devtools/canvasdebugger.inc.css
diff --git a/browser/themes/windows/devtools/checkbox-dark.png b/browser/themes/windows/devtools/checkbox-dark.png
deleted file mode 100644
index e937b600b..000000000
--- a/browser/themes/windows/devtools/checkbox-dark.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/checkbox-light.png b/browser/themes/windows/devtools/checkbox-light.png
deleted file mode 100644
index 00d6d450c..000000000
--- a/browser/themes/windows/devtools/checkbox-light.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/close.png b/browser/themes/windows/devtools/close.png
deleted file mode 100644
index b53941253..000000000
--- a/browser/themes/windows/devtools/close.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/command-paintflashing.png b/browser/themes/windows/devtools/command-paintflashing.png
deleted file mode 100644
index b785131a2..000000000
--- a/browser/themes/windows/devtools/command-paintflashing.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/command-responsivemode.png b/browser/themes/windows/devtools/command-responsivemode.png
deleted file mode 100644
index cbfa59904..000000000
--- a/browser/themes/windows/devtools/command-responsivemode.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/command-scratchpad.png b/browser/themes/windows/devtools/command-scratchpad.png
deleted file mode 100644
index 5131ca5cb..000000000
--- a/browser/themes/windows/devtools/command-scratchpad.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/command-tilt.png b/browser/themes/windows/devtools/command-tilt.png
deleted file mode 100644
index f816bba59..000000000
--- a/browser/themes/windows/devtools/command-tilt.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/commandline-icon.png b/browser/themes/windows/devtools/commandline-icon.png
deleted file mode 100644
index e120a3926..000000000
--- a/browser/themes/windows/devtools/commandline-icon.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/commandline.css b/browser/themes/windows/devtools/commandline.css
index 7eee7eb5c..06d7512ae 100644
--- a/browser/themes/windows/devtools/commandline.css
+++ b/browser/themes/windows/devtools/commandline.css
@@ -120,12 +120,13 @@
   color: hsl(210,30%,75%);
 }
 
-.gcli-menu-option:hover {
+.gcli-menu-name:hover,
+.gcli-menu-desc:hover {
   background-color: hsla(0,0%,0%,.3);
 }
 
 .gcli-menu-highlight,
-.gcli-menu-highlight.gcli-menu-option:hover {
+.gcli-menu-highlight:hover {
   background-color: hsla(0,100%,100%,.1);
 }
 
@@ -135,7 +136,7 @@
 
 .gcli-menu-more {
   font-size: 80%;
-  text-align: right;
+  text-align: end;
   -moz-padding-end: 8px;
 }
 
diff --git a/browser/themes/windows/devtools/commandline.png b/browser/themes/windows/devtools/commandline.png
deleted file mode 100644
index 6726f2820..000000000
--- a/browser/themes/windows/devtools/commandline.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/common.css b/browser/themes/windows/devtools/common.css
deleted file mode 100644
index 2e13f4eae..000000000
--- a/browser/themes/windows/devtools/common.css
+++ /dev/null
@@ -1,369 +0,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/. */
-
-/* Font for code */
-
-:root {
-  font: message-box;
-}
-
-.devtools-monospace {
-  font-family: monospace;
-}
-
-/* Toolbar and Toolbar items */
-
-.devtools-toolbar {
-  -moz-appearance: none;
-  padding: 4px 3px;
-  color: hsl(210,30%,85%);
-  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
-  border-bottom: 1px solid #060a0d;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
-}
-
-.devtools-menulist,
-.devtools-toolbarbutton {
-  -moz-appearance: none;
-  -moz-box-align: center;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border: 1px solid hsla(211,68%,6%,.5);
-  border-radius: 3px;
-  background: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-  margin: 0;
-  -moz-margin-end: 3px;
-  color: inherit;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
-  -moz-box-orient: horizontal;
-}
-
-.devtools-menulist:-moz-focusring,
-.devtools-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.7);
-  outline-offset: -4px;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-icon {
-  margin: 0;
-}
-
-.devtools-toolbarbutton:not([label]) {
-  min-width: 32px;
-}
-
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
-}
-
-.devtools-toolbarbutton:not([checked=true]):hover:active {
-  background-color: hsla(210,18%,9%,.1);
-  background-image: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
-  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-.devtools-menulist[open=true],
-.devtools-toolbarbutton[open=true],
-.devtools-toolbarbutton[checked=true] {
-  border-color: hsla(211,68%,6%,.6);
-  background: linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
-  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-.devtools-toolbarbutton[checked=true] {
-  color: hsl(200,100%,60%) !important;
-}
-
-.devtools-toolbarbutton[checked=true]:hover:active {
-  background-color: hsla(211,68%,6%,.2);
-}
-
-.devtools-option-toolbarbutton {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-  background: none;
-  border: none;
-}
-
-.devtools-option-toolbarbutton[open=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-.devtools-menulist > .menulist-label-box {
-  text-align: center;
-}
-
-.devtools-menulist > .menulist-dropmarker {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  border-width: 0;
-  background-color: transparent;
-}
-
-.devtools-menulist:focus:not([open="true"]):not(.menulist-compact) > .menulist-label-box {
-  color: hsl(210,30%,85%) !important;
-  background-color: transparent;
-}
-
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
-  color: inherit;
-  border-width: 0;
-  -moz-border-end: 1px solid hsla(210,8%,5%,.45);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[type=menu-button] {
-  padding: 0 1px;
-  -moz-box-align: stretch;
-}
-
-.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-  -moz-appearance: none !important;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  -moz-box-align: center;
-}
-
-/* Text input */
-
-.devtools-textinput,
-.devtools-searchinput {
-  -moz-appearance: none;
-  margin: 0 3px;
-  min-height: 22px;
-  border: 1px solid hsla(211,68%,6%,.6);
-  box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1);
-  border-radius: 2px;
-  background-color: transparent;
-  background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
-  padding: 3px;
-  transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
-  transition-timing-function: ease;
-  color: inherit;
-}
-
-.devtools-searchinput {
-  background-image: url(magnifying-glass.png), linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
-  background-repeat: no-repeat;
-  background-position: 4px center, top left, top left;
-  padding-top: 0;
-  padding-bottom: 0;
-  -moz-padding-start: 18px;
-  -moz-padding-end: 12px;
-  font-size: inherit;
-}
-
-.devtools-searchinput[focused] {
-  border-color: hsl(200,70%,40%) hsl(200,75%,37%) hsl(200,80%,35%);
-  background-origin: padding-box;
-  background-clip: padding-box;
-  box-shadow: inset 0 0 0 1px hsla(211,68%,6%,.1);
-}
-
-.devtools-searchinput:-moz-locale-dir(rtl) {
-  background-position: calc(100% - 4px) center, top left, top left;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
-  display: none;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
-  opacity: 1.0;
-  color: hsl(208,10%,66%);
-}
-
-.devtools-no-search-result {
-  box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35);
-  border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;
-  background-image: url(magnifying-glass.png), linear-gradient(hsla(1,16%,76%,.45), hsla(1,16%,76%,.75));
-}
-
-/* Close button */
-
-.devtools-closebutton {
-  list-style-image: url("chrome://browser/skin/devtools/close.png");
-  -moz-appearance: none;
-  border: none;
-  margin: 0 4px;
-  min-width: 16px;
-  width: 16px;
-  opacity: 0.6;
-}
-
-.devtools-closebutton > .toolbarbutton-text {
-  display: none;
-}
-
-.devtools-closebutton:hover {
-  opacity: 0.8;
-}
-
-.devtools-closebutton:hover:active {
-  opacity: 1;
-}
-
-/* Splitters */
-
-.devtools-horizontal-splitter {
-  -moz-appearance: none;
-  border-width: 1px 0 0 0;
-  -moz-border-top-colors: black;
-  background-color: transparent;
-  min-height: 3px;
-  height: 3px;
-  margin-bottom: -3px;
-  position: relative;
-}
-
-.devtools-side-splitter {
-  border: 0;
-  -moz-border-start: 1px solid #242b33;
-  min-width: 0;
-  width: 3px;
-  background-color: transparent;
-  -moz-margin-end: -3px;
-  position: relative;
-  cursor: e-resize;
-}
-
-/* In-tools sidebar */
-
-.devtools-toolbox-side-iframe {
-  min-width: 465px;
-}
-
-.devtools-sidebar-tabs {
-  -moz-appearance: none;
-  margin: 0;
-}
-
-.devtools-sidebar-tabs > tabpanels {
-  -moz-appearance: none;
-  padding: 0;
-  border: 0;
-}
-
-.devtools-sidebar-tabs > tabs {
-  -moz-appearance: none;
-  position: static;
-  color: hsl(210,30%,85%);
-  margin-bottom: 0;
-  padding: 0;
-  background-image: url(background-noise-toolbar.png), linear-gradient(#3e4750, #3e4750);
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, -1px 0 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(204,45%,98%,.05) inset;
-  border-width: 0 0 1px 0;
-  border-color: hsla(210,8%,5%,.6);
-  border-style: solid;
-  overflow: hidden;
-}
-
-.devtools-sidebar-tabs > tabs > .tabs-right,
-.devtools-sidebar-tabs > tabs > .tabs-left {
-  display: none;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  -moz-appearance: none;
-  /* We want to match the height of a toolbar with a toolbarbutton
-   * First, we need to replicated the padding of toolbar (4px),
-   * then, the padding of the button itself from toolbarbutton.css (3px),
-   * Also, we need to take the border of the buttons into accout (1px).
-   * Padding-bottom is one pixel shorter because we need to include the
-   * black border.
-   */
-  padding: 8px 3px 7px;
-  -moz-padding-start: 6px;
-  margin: 0;
-  min-width: 78px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  text-align: center;
-  color: inherit;
-  -moz-box-flex: 1;
-  border-width: 0;
-  background: transparent;
-  border-radius: 0;
-  position: static;
-  -moz-margin-start: -1px;
-}
-
-.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
-  position: static;
-}
-
-.devtools-sidebar-tabs > tabs > tab:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-.devtools-sidebar-tabs > tabs > tab:first-of-type {
-  -moz-margin-start: -3px;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-size: 100% 100%, 1px 100%, 1px 100%, 1px 100%;
-  background-repeat: no-repeat;
-  background-position: 2px, 0, 1px, 2px;
-}
-
-.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
-  background-position: calc(100% - 3px), 100%, calc(100% - 1px), calc(100% - 2px);
-}
-
-%filter substitution
-%define smallSeparator linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)), linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)), linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0))
-%define solidSeparator linear-gradient(transparent, transparent), linear-gradient(hsla(206,37%,4%,.6), hsla(206,37%,4%,.7)), linear-gradient(hsla(204,45%,98%,.1), hsla(204,45%,98%,.1))
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-image: linear-gradient(transparent, transparent), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
-  background-image: linear-gradient(transparent, transparent), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] {
-  color: #f5f7fa;
-  background-image: linear-gradient(#2f607b, #294d68), @solidSeparator@;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.1) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
-  background-image: linear-gradient(#274f64, #224056), @solidSeparator@;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
-  background-image: linear-gradient(#1f3e4f, #1b3243), @solidSeparator@;
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset, 0 -2px 0 hsla(206,37%,4%,.05) inset, 0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-%include ../../shared/devtools/common.inc.css
diff --git a/browser/themes/windows/devtools/computedview.css b/browser/themes/windows/devtools/computedview.css
deleted file mode 100644
index 772fc5bd7..000000000
--- a/browser/themes/windows/devtools/computedview.css
+++ /dev/null
@@ -1,169 +0,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/. */
-
-/* Take away these two :visited rules to get a core dumper     */
-/* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
-.link,
-.link:visited {
-  color: #0091ff;
-}
-.link,
-.helplink,
-.link:visited,
-.helplink:visited {
-  text-decoration: none;
-}
-.link:hover {
-  text-decoration: underline;
-}
-
-/* From content */
-
-* {
-  box-sizing: border-box;
-}
-
-:root {
-  height: 100%;
-}
-
-body {
-  margin: 0;
-  display : flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-#propertyContainer {
-  -moz-user-select: text;
-  overflow: auto;
-  min-height: 0;
-  flex: 1;
-}
-
-.property-view-hidden,
-.property-content-hidden {
-  display: none;
-}
-
-.property-view {
-  clear: both;
-  padding: 2px 0 2px 17px;
-}
-
-.property-view > * {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.property-name {
-  width: 50%;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.property-value {
-  width: 50%;
-  max-width: 100%;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-image: url(arrow-e.png);
-  background-repeat: no-repeat;
-  background-size: 5px 8px;
-  background-position: 2px center;
-  padding-left: 10px;
-}
-
-.other-property-value {
-  background-image: url(arrow-e.png);
-  background-repeat: no-repeat;
-  background-size: 5px 8px;
-  background-position: left center;
-  padding-left: 8px;
-}
-
-@media (min-width: 400px) {
-  .property-name {
-    width: 200px;
-  }
-  .property-value {
-    width: auto;
-  }
-}
-
-.property-content {
-  padding-left: 17px;
-}
-
-/* From skin */
-.expander {
-  visibility: hidden;
-  margin-left: -12px!important;
-}
-
-.expander[open] {
-  margin-left: -17px!important;
-}
-
-.expandable {
-  visibility: visible;
-}
-
-.match {
-  visibility: hidden;
-}
-
-.matchedselectors > p {
-  clear: both;
-  margin: 0 2px 0 0;
-  padding: 2px;
-  overflow-x: hidden;
-  border-style: dotted;
-  border-color: rgba(128,128,128,0.4);
-  border-width: 1px 1px 0 1px;
-}
-
-.matchedselectors > p:last-of-type {
-  border-bottom-width: 1px;
-}
-
-/* This rule is necessary because Templater.jsm breaks LTR TDs in RTL docs */
-.rule-text {
-  direction: ltr;
-}
-
-.matched {
-  text-decoration: line-through;
-}
-
-.parentmatch {
-  opacity: 0.5;
-}
-
-#noResults {
-  font-size: 110%;
-  margin: 5px;
-  text-align: center;
-}
-
-.onlyuserstyles {
-  cursor: pointer;
-}
-
-.legendKey {
-  margin: 0 5px;
-}
-
-.devtools-toolbar {
-  width: 100%;
-}
-
-.link {
-  padding: 0 3px;
-  cursor: pointer;
-  float: right;
-}
diff --git a/browser/themes/windows/devtools/dark-theme.css b/browser/themes/windows/devtools/dark-theme.css
deleted file mode 100644
index 97189572d..000000000
--- a/browser/themes/windows/devtools/dark-theme.css
+++ /dev/null
@@ -1,104 +0,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/. */
-
-/* According to:
- * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
- */
-.theme-body {
-  background: #131c26;
-  color: #8fa1b2
-}
-
-.theme-twisty {
-  cursor: pointer;
-  margin-right: 5px;
-}
-
-.theme-twisty:-moz-focusring {
-  outline-style: none;
-}
-
-.theme-twisty:not([open]) {
-  width: 0;
-  height: 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid rgba(255,255,255,0.5);
-  margin-left: 5px;
-}
-
-.theme-twisty[open] {
-  width: 10px;
-  height: 10px;
-  background-image: linear-gradient(to bottom right, transparent 68%,  rgba(255,255,255,0.5) 68%);
-}
-
-.theme-checkbox {
-  display: inline-block;
-  border: 0;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  outline: none;
-  background: url("chrome://browser/skin/devtools/checkbox-dark.png") no-repeat;
-}
-
-.theme-checkbox[checked] {
-  background: url("chrome://browser/skin/devtools/checkbox-dark.png") 14px 0;
-}
-
-.theme-selected {
-  background: #26384E;
-}
-
-.theme-bg-darker {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.theme-link { /* blue */
-  color: #3689b2;
-}
-
-.theme-comment { /* grey */
-  color: #5c6773;
-}
-
-.theme-gutter {
-  background-color: #0f171f;
-  color: #667380;
-  border-color: #303b47;
-}
-
-.theme-separator { /* grey */
-  border-color: #303b47;
-}
-
-.theme-fg-color1 { /* green */
-  color: #5c9966;
-}
-
-.theme-fg-color2 { /* blue */
-  color: #3689b2;
-}
-
-.theme-fg-color3 { /* pink/lavender */
-  color: #a673bf;
-}
-
-.theme-fg-color4 { /* purple/violet */
-  color: #6270b2;
-}
-
-.theme-fg-color5 { /* Yellow */
-  color: #a18650;
-}
-
-.theme-fg-color6 { /* Orange */
-  color: #b26b47;
-}
-
-.theme-fg-color7 { /* Red */
-  color: #bf5656;
-}
diff --git a/browser/themes/windows/devtools/debugger-collapse.png b/browser/themes/windows/devtools/debugger-collapse.png
deleted file mode 100644
index 242e19c56..000000000
--- a/browser/themes/windows/devtools/debugger-collapse.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/debugger-expand.png b/browser/themes/windows/devtools/debugger-expand.png
deleted file mode 100644
index af453e316..000000000
--- a/browser/themes/windows/devtools/debugger-expand.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/debugger-pause.png b/browser/themes/windows/devtools/debugger-pause.png
deleted file mode 100644
index 7f908bf8b..000000000
--- a/browser/themes/windows/devtools/debugger-pause.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/debugger-play.png b/browser/themes/windows/devtools/debugger-play.png
deleted file mode 100644
index 91719826a..000000000
--- a/browser/themes/windows/devtools/debugger-play.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/debugger-step-in.png b/browser/themes/windows/devtools/debugger-step-in.png
deleted file mode 100644
index c80ee72a2..000000000
--- a/browser/themes/windows/devtools/debugger-step-in.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/debugger-step-out.png b/browser/themes/windows/devtools/debugger-step-out.png
deleted file mode 100644
index 1a7145a98..000000000
--- a/browser/themes/windows/devtools/debugger-step-out.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/debugger-step-over.png b/browser/themes/windows/devtools/debugger-step-over.png
deleted file mode 100644
index 7c9b82ad4..000000000
--- a/browser/themes/windows/devtools/debugger-step-over.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/debugger.css b/browser/themes/windows/devtools/debugger.css
index 9eeaf2eba..7b0bd5fc4 100644
--- a/browser/themes/windows/devtools/debugger.css
+++ b/browser/themes/windows/devtools/debugger.css
@@ -1,321 +1,5 @@
-/* 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/. */
 
-#body {
-  background: #fff;
-}
-
-/* Sources and breakpoints pane */
-
-#sources-pane {
-  min-width: 50px;
-}
-
-#sources-pane + .devtools-side-splitter {
-  -moz-border-start-color: transparent;
-}
-
-/* ListWidget items */
-
-.list-widget-item {
-  padding: 2px;
-}
-
-.list-widget-item:not(.selected):not(.empty):hover {
-  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;
-}
-
-.list-widget-item.selected.light {
-  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
-  color: #000;
-}
-
-.list-widget-item.selected {
-  background: Highlight;
-  color: HighlightText;
-}
-
-.list-widget-item.empty {
-  color: GrayText;
-  padding: 2px;
-}
-
-/* Stack frames view */
-
-.dbg-stackframe-details {
-  -moz-padding-start: 4px;
-}
-
-.dbg-stackframe-menuitem[checked] {
-  margin-top: 3px;
-  margin-bottom: 3px;
-  outline: 1px solid #eee;
-  font-weight: 600;
-}
-
-.dbg-stackframe-menuitem-details {
-  -moz-padding-start: 16px;
-}
-
-/* Sources and breakpoints view */
-
-.dbg-breakpoint {
-  font-family: monospace;
-}
-
-.dbg-breakpoint-line {
-  font-weight: 600;
-}
-
-.dbg-breakpoint-text {
-  -moz-margin-start: 10px !important;
-  font-style: italic;
-}
-
-/* Watch expressions view */
-
-#expressions {
-  min-height: 10px;
-  max-height: 125px;
-}
-
-.dbg-expression {
-  height: 20px;
-}
-
-.dbg-expression-arrow {
-  width: 16px;
-  height: auto;
-  background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
-}
-
-.dbg-expression-input {
-  -moz-padding-start: 2px !important;
-  font-family: Menlo, Monaco, monospace;
-}
-
-/* Searchbox and the search operations help panel */
-
-.devtools-searchinput {
-  min-width: 220px;
-  -moz-margin-start: 1px;
-}
-
-#searchbox-panel-description {
-  margin-top: 0;
-  margin-bottom: 8px;
-  -moz-margin-start: 2px;
-}
-
-.searchbox-panel-operator-button {
-  min-width: 26px;
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 2px;
-  -moz-margin-end: 6px;
-  text-align: center;
-  font-family: Menlo, Monaco, monospace;
-}
-
-.searchbox-panel-operator-label {
-  padding-bottom: 2px;
-}
-
-/* Searchbox results panel */
-
-.results-panel {
-  padding: 4px;
-  opacity: 0.9;
-}
-
-.results-panel-item {
-  background: #f4f4f4;
-  border: 1px solid #ddd;
-  border-top-color: #fff;
-  padding: 5px;
-  cursor: pointer;
-}
-
-.results-panel-item:first-of-type {
-  border-top-color: #ddd;
-  border-radius: 4px 4px 0 0;
-}
-
-.results-panel-item:last-of-type {
-  border-radius: 0 0 4px 4px;
-}
-
-.results-panel-item:only-of-type {
-  border-radius: 4px;
-}
-
-.results-panel-item:not(.selected):not(:hover) {
-  text-shadow: 0 1px #fff;
-}
-
-.results-panel-item-pre {
-  -moz-margin-end: 5px !important;
-  color: #444;
-  cursor: inherit;
-}
-
-.results-panel-item-name {
-  color: #111;
-  font-weight: 600;
-  cursor: inherit;
-}
-
-.results-panel-item-details {
-  color: #7f7f7f;
-  cursor: inherit;
-}
-
-/* Sources search view */
-
-#globalsearch {
-  min-height: 10px;
-  box-shadow: inset 0 -4px 8px #eee;
-  background: url(background-noise-toolbar.png);
-}
-
-#globalsearch > vbox:not(:empty) {
-  min-height: 10px;
-  max-height: 125px;
-}
-
-#globalsearch + .devtools-horizontal-splitter {
-  -moz-border-top-colors: #bfbfbf;
-}
-
-.dbg-source-results {
-  padding: 0;
-  background: none !important;
-}
-
-.dbg-results-header {
-  -moz-padding-start: 6px;
-}
-
-.dbg-results-header-location {
-  font-weight: 600;
-}
-
-.dbg-results-header-match-count {
-  -moz-padding-start: 6px;
-  color: GrayText;
-}
-
-.dbg-results-line-number {
-  background: #e2e2e2;
-  min-width: 40px;
-  -moz-border-end: 1px solid #b4c4d3;
-  -moz-padding-end: 4px;
-  padding-top: 2px;
-  text-align: end;
-  font-family: monospace;
-  color: #8c8c8c;
-}
-
-.dbg-results-line-contents {
-  -moz-padding-start: 4px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-  font-family: monospace;
-}
-
-.dbg-results-line-contents-string {
-  padding: 1px;
-}
-
-.dbg-results-line-contents-string[match=true] {
-  background: rgba(255,255,0,0.5);
-  padding: 0;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.dbg-results-line-contents-string[match=true][focusing] {
-  transition: transform 0.3s ease-in-out;
-}
-
-.dbg-results-line-contents-string[match=true][focused] {
-  transition-duration: 0.1s;
-  transform: scale(1.75, 1.75);
-}
-
-/* Toolbar Controls */
-
-#resumption-panel-desc {
-  width: 200px;
-}
-
-#resumption-order-panel {
-  -moz-margin-start: -8px;
-}
-
-#resume {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#resume[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#step-over {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
-}
-
-#step-in {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
-}
-
-#step-out {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
-}
-
-#debugger-controls > toolbarbutton {
-  margin: 0;
-  box-shadow: none;
-  border-radius: 0;
-  border-width: 0;
-  -moz-border-end-width: 1px;
-  outline-offset: -3px;
-}
-
-#debugger-controls > toolbarbutton:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-#debugger-controls {
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset,
-              0 0 0 1px hsla(209,29%,72%,.1) inset,
-              0 0 0 1px hsla(209,29%,72%,.1),
-              0 1px 0 hsla(210,16%,76%,.1);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: 3px;
-  margin: 0 3px;
-}
-
-#instruments-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border: none;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#instruments-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#instruments-pane-toggle:hover {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#instruments-pane-toggle:hover:active {
-  -moz-image-region: rect(0px,48px,16px,32px);
-}
+%include ../../shared/devtools/debugger.inc.css
diff --git a/browser/themes/windows/devtools/dock-bottom.png b/browser/themes/windows/devtools/dock-bottom.png
deleted file mode 100644
index 8fa9c932b..000000000
--- a/browser/themes/windows/devtools/dock-bottom.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/dock-side.png b/browser/themes/windows/devtools/dock-side.png
deleted file mode 100644
index 1c1235513..000000000
--- a/browser/themes/windows/devtools/dock-side.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/dropmarker.png b/browser/themes/windows/devtools/dropmarker.png
deleted file mode 100644
index 7e91860fb..000000000
--- a/browser/themes/windows/devtools/dropmarker.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/inspect-button.png b/browser/themes/windows/devtools/inspect-button.png
deleted file mode 100644
index ebfd9586d..000000000
--- a/browser/themes/windows/devtools/inspect-button.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/inspector.css b/browser/themes/windows/devtools/inspector.css
deleted file mode 100644
index 62e70b798..000000000
--- a/browser/themes/windows/devtools/inspector.css
+++ /dev/null
@@ -1,35 +0,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/. */
-
-#inspector-inspect-toolbutton {
-  list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-}
-
-#inspector-inspect-toolbutton[checked=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-#inspector-searchbox {
-  transition-property: max-width, -moz-padding-end, -moz-padding-start;
-  transition-duration: 250ms;
-  transition-timing-function: ease;
-}
-
-#inspector-searchbox:not([focused]):not([filled]) > .textbox-input-box {
-  overflow: hidden;
-}
-
-#inspector-searchbox:not([focused]):not([filled]) {
-  max-width: 20px !important;
-  -moz-padding-end: 6px;
-  -moz-padding-start: 22px;
-  background-position: 8px center, top left, top left;
-}
-
-#inspector-searchbox[focused],
-#inspector-searchbox[filled] {
-  max-width: 200px !important;
-}
diff --git a/browser/themes/windows/devtools/itemArrow-ltr.png b/browser/themes/windows/devtools/itemArrow-ltr.png
deleted file mode 100644
index 6cc3e984b..000000000
--- a/browser/themes/windows/devtools/itemArrow-ltr.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/itemArrow-rtl.png b/browser/themes/windows/devtools/itemArrow-rtl.png
deleted file mode 100644
index 0f8f4b1b0..000000000
--- a/browser/themes/windows/devtools/itemArrow-rtl.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/itemToggle.png b/browser/themes/windows/devtools/itemToggle.png
deleted file mode 100644
index cf70394e6..000000000
--- a/browser/themes/windows/devtools/itemToggle.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/layout-background-grid.png b/browser/themes/windows/devtools/layout-background-grid.png
deleted file mode 100644
index 87b0b855d..000000000
--- a/browser/themes/windows/devtools/layout-background-grid.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/layoutview.css b/browser/themes/windows/devtools/layoutview.css
deleted file mode 100644
index 14e10dfd3..000000000
--- a/browser/themes/windows/devtools/layoutview.css
+++ /dev/null
@@ -1,46 +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/. */
-
-.theme-dark .theme-body {
-  background-image: url(layout-background-grid.png);
-}
-
-.theme-light .theme-body {
-  background-image: url(layout-background-grid.png), radial-gradient(circle at 50% 70%, hsl(210,53%,45%) 0%, hsl(210,54%,33%) 100%);
-}
-
-.theme-body {
-  color: hsl(210,100%,85%);
-  box-sizing: border-box;
-}
-
-#main {
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted;
-}
-
-#main > .border {
-  color: hsl(210,53%,45%);
-}
-
-.border > span {
-  background-color: hsl(210,100%,85%);
-  border-radius: 2px;
-  padding: 0 4px;
-}
-
-#content {
-  border-color: hsla(210,100%,85%,0.7);
-  border-style: dotted 
-}
-
-#padding {
-  border-color: hsla(210,100%,85%,0.2);
-  border-style: solid;
-}
-
-#borders {
-  border-style: solid;
-  border-color: hsl(210,100%,85%);
-}
diff --git a/browser/themes/windows/devtools/light-theme.css b/browser/themes/windows/devtools/light-theme.css
deleted file mode 100644
index a867df614..000000000
--- a/browser/themes/windows/devtools/light-theme.css
+++ /dev/null
@@ -1,104 +0,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/. */
-
-/* According to:
- * https://bugzilla.mozilla.org/show_bug.cgi?id=715472#c17
- */
-.theme-body {
-  background: white;
-  color: black;
-}
-
-.theme-twisty {
-  cursor: pointer;
-  margin-right: 5px;
-}
-
-.theme-twisty:-moz-focusring {
-  outline-style: none;
-}
-
-.theme-twisty:not([open]) {
-  width: 0;
-  height: 0;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid rgba(0,0,0,0.5);
-  margin-left: 5px;
-}
-
-.theme-twisty[open] {
-  width: 10px;
-  height: 10px;
-  background-image: linear-gradient(to bottom right, transparent 68%,  rgba(0,0,0,0.5) 68%);
-}
-
-.theme-checkbox {
-  display: inline-block;
-  border: 0;
-  width: 14px;
-  height: 14px;
-  padding: 0;
-  outline: none;
-  background: url("chrome://browser/skin/devtools/checkbox-light.png") no-repeat;
-}
-
-.theme-checkbox[checked] {
-  background: url("chrome://browser/skin/devtools/checkbox-light.png") 14px 0;
-}
-
-.theme-selected {
-  background-color: hsl(0,0%,90%);
-}
-
-.theme-bg-darker {
-  background: #F9F9F9;
-}
-
-.theme-link { /* blue */
-  color: hsl(208,56%,40%);
-}
-
-.theme-comment { /* grey */
-  color: hsl(90,2%,46%);
-}
-
-.theme-gutter {
-  background-color: hsl(0,0%,90%);
-  color: #667380;
-  border-color: hsl(0,0%,65%);
-}
-
-.theme-separator { /* grey */
-  border-color: #cddae5;
-}
-
-.theme-fg-color1 { /* green */
-  color: hsl(72,100%,27%);
-}
-
-.theme-fg-color2 { /* blue */
-  color: hsl(208,56%,40%);
-}
-
-.theme-fg-color3 { /* dark blue */
-  color: hsl(208,81%,21%)
-}
-
-.theme-fg-color4 { /* Orange */
-  color: hsl(24,85%,39%);
-}
-
-.theme-fg-color5 { /* Yellow */
-  color: #a18650;
-}
-
-.theme-fg-color6 { /* Orange */
-  color: hsl(24,85%,39%);
-}
-
-.theme-fg-color7 { /* Red */
-  color: #bf5656;
-}
diff --git a/browser/themes/windows/devtools/magnifying-glass.png b/browser/themes/windows/devtools/magnifying-glass.png
deleted file mode 100644
index 236d93d49..000000000
--- a/browser/themes/windows/devtools/magnifying-glass.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/markup-view.css b/browser/themes/windows/devtools/markup-view.css
deleted file mode 100644
index 4651a4314..000000000
--- a/browser/themes/windows/devtools/markup-view.css
+++ /dev/null
@@ -1,44 +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/. */
-
-* {
-  padding: 0;
-  margin: 0;
-}
-
-.newattr {
-  cursor: pointer;
-}
-
-.selected {
-  background-color: hsl(0,0%,90%);
-}
-
-/* Give some padding to focusable elements to match the editor input
- * that will replace them. */
-span[tabindex] {
-  display: inline-block;
-  padding: 1px 0;
-}
-
-li.container {
-  position: relative;
-  padding: 2px 0 0 2px;
-}
-
-.codebox {
-  padding-left: 14px;
-}
-
-.expander {
-  position: absolute;
-}
-
-.more-nodes {
-  padding-left: 16px;
-}
-
-.styleinspector-propertyeditor {
-  border: 1px solid #CCC;
-}
diff --git a/browser/themes/windows/devtools/netmonitor.css b/browser/themes/windows/devtools/netmonitor.css
index ee72aa607..9a086c920 100644
--- a/browser/themes/windows/devtools/netmonitor.css
+++ b/browser/themes/windows/devtools/netmonitor.css
@@ -1,531 +1,29 @@
-/* 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/. */
 
-#body {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-}
-
-/* Network requests table */
-
-#requests-menu-empty-notice {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  font-size: 110%;
-  color: #fff;
-}
-
-#requests-menu-toolbar {
-  height: 33px;
-  padding: 0;
-}
-
-.requests-menu-header:first-child {
-  -moz-padding-start: 4px;
-}
-
-.requests-menu-subitem {
-  padding: 4px;
-}
-
-.requests-menu-header:not(:last-child):-moz-locale-dir(ltr),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.1);
-}
+%include ../../shared/devtools/netmonitor.inc.css
 
-.requests-menu-header-button {
-  -moz-appearance: none;
-  background: none;
-  min-width: 20px;
-  min-height: 32px; /* Remaining 1px comes from border of the toolbar. */
-  margin: 0;
-  border: none;
+.requests-menu-header-button > .button-box {
   padding: 0;
-  color: inherit;
-  font-weight: inherit !important;
-  transition: background-color 0.1s ease-in-out;
-}
-
-.requests-menu-header-button:hover {
-  background: rgba(0,0,0,0.10);
-}
-
-.requests-menu-header-button:hover:active {
-  background: rgba(0,0,0,0.25);
-}
-
-.requests-menu-header-button:not(:active)[sorted] {
-  background: rgba(0,0,0,0.15);
-}
-
-.requests-menu-header-button:not(:active)[sorted=ascending] {
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-header-button:not(:active)[sorted=descending] {
-  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom;
-}
-
-/* Network requests table: specific column dimensions */
-
-.requests-menu-status-and-method {
-  width: 8em;
-}
-
-.requests-menu-status {
-  width: 10px;
-  height: 10px;
-}
-
-.requests-menu-method {
-  text-align: center;
-  font-weight: 600;
-}
-
-.requests-menu-file {
-  width: 20vw;
-  min-width: 4em;
-}
-
-.requests-menu-domain {
-  width: 14vw;
-  min-width: 10em;
-}
-
-.requests-menu-type {
-  text-align: center;
-  width: 4em;
-}
-
-.requests-menu-size {
-  text-align: center;
-  width: 8em;
-}
-
-/* Network requests table: status codes */
-
-box.requests-menu-status {
-  background: #fff;
-  -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
-  border-radius: 20px;
-  box-shadow:
-    0 0 0 1px rgba(255,255,255,0.4) inset,
-    0 -6px 4px 0 rgba(32,32,32,1.0) inset,
-    0 0 8px 0 rgba(32,0,0,0.4);
-  transition: box-shadow 0.5s ease-in-out;
-}
-
-box.requests-menu-status[code^="1"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,0,64,1.0) inset,
-    0 0 8px 0 rgba(0,0,128,1.0);
-}
-
-box.requests-menu-status[code^="2"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,64,0,1.0) inset,
-    0 0 8px 0 rgba(0,128,0,1.0);
-}
-
-box.requests-menu-status[code^="3"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,32,0,1.0) inset,
-    0 0 8px 0 rgba(128,128,0,1.0);
-}
-
-box.requests-menu-status[code^="4"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,0,1.0) inset,
-    0 0 8px 0 rgba(128,0,0,1.0);
-}
-
-box.requests-menu-status[code^="5"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,64,1.0) inset,
-    0 0 8px 0 rgba(128,0,128,1.0);
-}
-
-/* Network requests table: waterfall header */
-
-#requests-menu-waterfall-label {
-  -moz-padding-start: 8px;
-  -moz-padding-end: 8px;
 }
 
 .requests-menu-timings-division {
-  width: 100px;
   padding-top: 1px;
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #999;
   font-size: 90%;
-  pointer-events: none;
-}
-
-.requests-menu-timings-division:not(:first-child) {
-  -moz-margin-start: -100px !important; /* Don't affect layout. */
-}
-
-.requests-menu-timings-division:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-division:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-/* Network requests table: waterfall items */
-
-.requests-menu-subitem.requests-menu-waterfall {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 4px;
-  background-repeat: repeat-y; /* Background created on a <canvas> in js. */
-  margin-top: -1px; /* Compensate borders. */
-  margin-bottom: -1px;
-}
-
-.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
-  background-position: right center;
-}
-
-.requests-menu-timings:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total {
-  -moz-padding-start: 8px;
-  font-size: 85%;
-  font-weight: 600;
-}
-
-.requests-menu-timings-cap {
-  width: 4px;
-  height: 10px;
-  border: 1px solid #fff;
-}
-
-.requests-menu-timings-cap.start {
-  -moz-border-end: none;
-}
-
-.requests-menu-timings-cap.end {
-  -moz-border-start: none;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-box {
-  height: 10px;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-}
-
-.requests-menu-timings-box.blocked,
-.requests-menu-timings-cap.blocked {
-  background-color: rgba(255,32,32,0.8);
-  box-shadow: 0 0 8px 0 rgba(128,32,32,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.dns,
-.requests-menu-timings-cap.dns {
-  background-color: rgba(255,128,255,0.6);
-  box-shadow: 0 0 8px 0 rgba(128,128,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.connect,
-.requests-menu-timings-cap.connect {
-  background-color: rgba(255,128,16,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,128,16,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.send,
-.requests-menu-timings-cap.send {
-  background-color: rgba(255,255,128,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,255,128,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.wait,
-.requests-menu-timings-cap.wait {
-  background-color: rgba(255,255,255,0.2);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,0.4),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.receive,
-.requests-menu-timings-cap.receive {
-  background-color: rgba(255,255,255,1.0);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-item[odd] {
-  background: rgba(255,255,255,0.05);
-}
-
-.side-menu-widget-item-contents {
-  padding: 0;
-}
-
-/* Network request details */
-
-#details-pane {
-  background: hsl(208,11%,27%);
-  max-width: 500px;
-}
-
-#details-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border-color: transparent;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#details-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#details-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-/* Network request details tabpanels */
-
-.tabpanel-content {
-  background: url(background-noise-toolbar.png), #3e4750;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset;
-  color: #fff;
-}
-
-.tabpanel-summary-container {
-  padding: 1px;
-}
-
-.tabpanel-summary-label {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 3px;
-  font-weight: 600;
-  text-shadow: 0 1px 0 #000;
-  color: hsl(210,30%,85%);
-}
-
-.tabpanel-summary-value {
-  -moz-padding-start: 3px;
-  font-family: Menlo, Monaco, monospace;
-}
-
-.variable-or-property:not(:focus) > .title > .token-string {
-  color: #10c !important;
-}
-
-/* Headers tabpanel */
-
-#headers-summary-status,
-#headers-summary-version {
-  padding-bottom: 2px;
-}
-
-#headers-summary-size {
-  padding-top: 2px;
-}
-
-/* Response tabpanel */
-
-#response-content-info-header {
-  background:
-    url(background-noise-toolbar.png),
-    linear-gradient(hsl(0,61%,40%), hsl(0,61%,31%)) repeat-x top left;
-  box-shadow:
-    inset 0 1px 0 hsla(210,40%,83%,.15),
-    inset 0 -1px 0 hsla(210,40%,83%,.05);
-  margin: 0;
-  padding: 5px 8px;
-}
-
-#response-content-image-box {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-#response-content-image {
-  background: #fff;
-  border: 1px dashed GrayText;
-  margin-bottom: 10px;
-}
-
-/* Timings tabpanel */
-
-#timings-tabpanel .tabpanel-summary-label {
-  width: 10em;
-}
-
-#timings-tabpanel .requests-menu-timings-box {
-  transition: transform 0.2s ease-out;
-  min-width: 1px;
-}
-
-#timings-tabpanel .requests-menu-timings-total {
-  transition: transform 0.2s ease-out;
-}
-
-/* Footer */
-
-#requests-menu-footer {
-  box-shadow: inset 0 1px 16px hsla(210,8%,5%,.3);
 }
 
 .requests-menu-footer-button,
 .requests-menu-footer-label {
-  min-width: 1em;
-  margin: 0;
-  border: none;
-  padding: 0px 1.5vw;
-  color: #fff;
-}
-
-.requests-menu-footer-spacer {
-  min-width: 2px;
-}
-
-.requests-menu-footer-spacer,
-.requests-menu-footer-button {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-footer-button {
-  -moz-appearance: none;
-  background: rgba(0,0,0,0.025);
-}
-
-.requests-menu-footer-button:hover {
-  background: rgba(0,0,0,0.20);
-}
-
-.requests-menu-footer-button:hover:active {
-  background: rgba(0,0,0,0.35);
-}
-
-.requests-menu-footer-button:not(:active)[checked] {
-  background-color: rgba(0,0,0,0.25);
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-footer-label {
-  font-weight: 600;
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
 /* Responsive sidebar */
 @media (max-width: 700px) {
-  #requests-menu-toolbar {
-    height: 24px;
-  }
-
-  .requests-menu-header-button {
-    min-height: 23px; /* Remaining 1px comes from border of the toolbar. */
-  }
-
   .requests-menu-footer-button,
   .requests-menu-footer-label {
-    padding: 0px 2vw;
-  }
-
-  #details-pane {
-    max-width: none;
-    margin: 0 !important;
-    /* To prevent all the margin hacks to hide the sidebar. */
-  }
-
-  .requests-menu-status-and-method {
-    width: 16vw;
-  }
-
-  .requests-menu-file,
-  .requests-menu-domain {
-    width: 30vw;
-  }
-
-  .requests-menu-type {
-    width: 8vw;
-  }
-
-  .requests-menu-size {
-    width: 16vw;
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Timeline" header is not visible anymore, and thus the
-       right border and box-shadow of "Size" column should be hidden. */
-  }
-}
-
-@media (min-width: 701px) {
-  #network-table[type-overflows] .requests-menu-domain {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Type" header is not visible anymore, and thus the
-       right border and box-shadow of "Domain" column should be hidden. */
-  }
-
-  #network-table[domain-overflows] .requests-menu-file {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Domain" header is not visible anymore, and thus the
-       right border and box-shadow of "File" column should be hidden. */
+    padding-top: 0px;
+    padding-bottom: 0px;
   }
 }
diff --git a/browser/themes/windows/devtools/option-icon.png b/browser/themes/windows/devtools/option-icon.png
deleted file mode 100644
index 9fd78175d..000000000
--- a/browser/themes/windows/devtools/option-icon.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/orion-breakpoint.png b/browser/themes/windows/devtools/orion-breakpoint.png
deleted file mode 100644
index ddd344eee..000000000
--- a/browser/themes/windows/devtools/orion-breakpoint.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/orion-container.css b/browser/themes/windows/devtools/orion-container.css
deleted file mode 100644
index cf3568a94..000000000
--- a/browser/themes/windows/devtools/orion-container.css
+++ /dev/null
@@ -1,39 +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/. */
-
-.viewTooltip {
-  display: none; /* TODO: add tooltips support, see bug 721752 */
-  font-family: monospace;
-  font-size: 13px;
-  background-color: InfoBackground;
-  color: InfoText;
-  padding: 2px;
-  border-radius: 4px;
-  border: 1px solid black;
-  z-index: 100;
-  position: fixed;
-  overflow: hidden;
-  white-space: pre;
-}
-
-.viewTooltip em {
-  font-style: normal;
-  font-weight: bold;
-}
-
-.annotationHTML {
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-  vertical-align: middle;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.annotationHTML.task {
-  background-image: url("chrome://browser/skin/devtools/orion-task.png");
-}
-.annotationHTML.breakpoint {
-  background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png");
-}
diff --git a/browser/themes/windows/devtools/orion-debug-location.png b/browser/themes/windows/devtools/orion-debug-location.png
deleted file mode 100644
index a00649b77..000000000
--- a/browser/themes/windows/devtools/orion-debug-location.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/orion-task.png b/browser/themes/windows/devtools/orion-task.png
deleted file mode 100644
index 42dbc00b6..000000000
--- a/browser/themes/windows/devtools/orion-task.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/orion.css b/browser/themes/windows/devtools/orion.css
deleted file mode 100644
index f51ecceeb..000000000
--- a/browser/themes/windows/devtools/orion.css
+++ /dev/null
@@ -1,199 +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/. */
-
-.viewContainer {
-  background: hsl(0,0%,89%); /* This will be seen as the continuation of the ruler */
-  font-family: monospace;
-  font-size: inherit; /* inherit browser's default monospace font size */
-}
-
-.view {
-  color: black; /* Default text color */
-  background: white; /* Background of the editor */
-  padding-left: 4px;
-}
-
-.readonly > .view {
-  background: #fdfefd; /* super light green */
-}
-
-.ruler {
-  background: hsl(0,0%,89%);
-  color: hsl(0,0%,55%);
-}
-.ruler.annotations {
-  width: 16px;
-  padding-left: 4px;
-}
-.ruler.lines {
-  border-right: 1px solid #b4c4d3;
-  min-width: 1.4em;
-  padding-left: 4px;
-  padding-right: 4px;
-  text-align: end;
-}
-
-.ruler.linesWithAnnotations {
-  min-width: 0;
-  padding-left: 0;
-}
-
-.ruler.overview {
-  border-left: 1px solid #b4c4d3;
-  width: 14px;
-  text-align: start;
-}
-
-/* Styles for the annotation ruler (first line) */
-.annotationHTML {
-  cursor: pointer;
-  width: 16px;
-  height: 16px;
-  display: inline-block;
-  vertical-align: middle;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-.annotation.task .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-task.png");
-}
-.annotation.breakpoint .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png");
-}
-.annotation.debugLocation .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png");
-}
-.annotation.breakpoint.debugLocation .annotationHTML,
-.annotation.task.debugLocation .annotationHTML {
-  background-position: center, center;
-  background-repeat: no-repeat, no-repeat;
-  background-size: 75%, 100%;
-}
-.annotation.breakpoint.debugLocation .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"),
-                    url("chrome://browser/skin/devtools/orion-breakpoint.png");
-}
-
-.annotation.task.debugLocation .annotationHTML {
-  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png"),
-                    url("chrome://browser/skin/devtools/orion-task.png");
-}
-
-/* Styles for the overview ruler  */
-.annotationOverview {
-  cursor: pointer;
-  border-radius: 2px;
-  left: 2px;
-  width: 8px;
-}
-.annotationOverview.task {
-  background-color: lightgreen;
-  border: 1px solid green;
-}
-.annotationOverview.breakpoint {
-  background-color: lightblue;
-  border: 1px solid blue;
-}
-.annotationOverview.debugLocation {
-  background-color: white;
-  border: 1px solid green;
-}
-.annotationOverview.currentBracket {
-  background-color: lightgray;
-  border: 1px solid red;
-}
-.annotationOverview.matchingBracket {
-  background-color: lightgray;
-  border: 1px solid red;
-}
-
-/* Styles for text range */
-.annotationRange {
-  background-repeat: repeat-x;
-  background-position: left bottom;
-}
-.annotationRange.task {
-  outline: 1px dashed rgba(0, 255, 0, 0.5);
-}
-.annotationRange.matchingBracket {
-  outline: 1px solid grey;
-}
-
-.token_singleline_comment,
-.token_multiline_comment,
-.token_doc_comment  {
-  color: hsl(90,2%,50%); /* grey */
-}
-
-.token_doc_html_markup {
-  color: #dd0058; /* purple */
-}
-
-.token_doc_tag {
-  color: #dd0058; /* purple */
-}
-
-.token_task_tag { /* "TODO" */
-  color: black;
-  background: yellow;
-}
-
-.token_string {
-  color: hsl(72,100%,27%); /* green */
-  font-style: italic;
-}
-
-.token_keyword {
-  color: hsl(276,44%,45%); /* purple */
-}
-
-.token_space {
-  /* images/white_space.png */
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAIAAABv85FHAAAABnRSTlMA/wAAAACkwsAdAAAAIUlEQVR4nGP4z8CAC+GUIEXuABhgkTuABEiRw2cmae4EAH05X7xDolNRAAAAAElFTkSuQmCC");
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.token_tab {
-  /* images/white_tab.png */
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAJCAIAAACJ2loDAAAABnRSTlMA/wD/AP83WBt9AAAAMklEQVR4nGP4TwRgoK6i52c3bz5w6zMSA6tJn28d2Lx589nnCAYu63AaSLxJRLoJPwAAeNk0aG4opfMAAAAASUVORK5CYII=");
-  background-repeat: no-repeat;
-  background-position: left center;
-}
-
-.line_caret,
-.annotationLine.currentLine { /* Current line */
-  background: hsl(208, 93%, 94%);
-}
-
-.readonly .line_caret,
-.readonly .annotationLine.currentLine {
-  background: hsl(208, 80%, 90%);
-}
-
-/* Styling for html syntax highlighting */
-.entity-name-tag {
-  color: hsl(208,48%,40%); /* blue */
-}
-
-.entity-other-attribute-name {
-  color: hsl(208,48%,40%); /* blue */
-}
-
-.punctuation-definition-comment {
-  color: hsl(90,2%,50%); /* grey */
-}
-
-.comment {
-  color: hsl(90,2%,50%); /* grey */
-}
-
-.string-quoted {
-  color: hsl(24,85%,39%); /* orange */
-}
-
-.invalid {
-  color: red;
-  font-weight: bold;
-}
diff --git a/browser/themes/windows/devtools/performance.css b/browser/themes/windows/devtools/performance.css
new file mode 100644
index 000000000..9fbdab02d
--- /dev/null
+++ b/browser/themes/windows/devtools/performance.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/devtools/performance.inc.css
diff --git a/browser/themes/windows/devtools/responsive-background.png b/browser/themes/windows/devtools/responsive-background.png
deleted file mode 100644
index 271dd5ebc..000000000
--- a/browser/themes/windows/devtools/responsive-background.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/responsive-se-resizer.png b/browser/themes/windows/devtools/responsive-se-resizer.png
deleted file mode 100644
index bdc03ee24..000000000
--- a/browser/themes/windows/devtools/responsive-se-resizer.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/responsive-vertical-resizer.png b/browser/themes/windows/devtools/responsive-vertical-resizer.png
deleted file mode 100644
index 1bb622dd3..000000000
--- a/browser/themes/windows/devtools/responsive-vertical-resizer.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/ruleview.css b/browser/themes/windows/devtools/ruleview.css
deleted file mode 100644
index b0ddd80e6..000000000
--- a/browser/themes/windows/devtools/ruleview.css
+++ /dev/null
@@ -1,131 +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/. */
-
-.ruleview {
-  height: 100%;
-}
-
-.ruleview-rule-source {
-  -moz-padding-start: 5px;
-  cursor: pointer;
-  text-align: right;
-  float: right;
-  -moz-user-select: none;
-}
-
-.ruleview-rule-inheritance {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-  border-top-style: solid;
-  border-bottom-style: solid;
-  padding: 1px 4px;
-  margin-top: 4px;
-  -moz-user-select: none;
-}
-
-.ruleview-rule-source:hover {
-  text-decoration: underline;
-}
-
-.ruleview-rule,
-#noResults {
-  padding: 2px 4px;
-}
-
-#noResults {
-  font: message-box;
-  color: GrayText;
-}
-
-.ruleview-rule + .ruleview-rule {
-  border-top-width: 1px;
-  border-top-style: dotted;
-}
-
-.ruleview-warning {
-  background: url("chrome://browser/skin/devtools/alerticon-warning.png");
-  -moz-margin-start: 5px;
-  vertical-align: middle;
-  width: 13px;
-  height: 12px;
-}
-
-.ruleview-ruleopen {
-  -moz-padding-end: 5px;
-}
-
-.ruleview-ruleclose {
-  cursor: text;
-  padding-right: 20px;
-}
-
-.ruleview-propertylist {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.ruleview-rule:not(:hover) .ruleview-enableproperty {
-  visibility: hidden;
-}
-
-.ruleview-expander {
-  display: inline-block;
-}
-
-.ruleview-newproperty {
-  /* (enable checkbox width: 12px) + (expander width: 15px) */
-  -moz-margin-start: 27px;
-}
-
-.ruleview-namecontainer,
-.ruleview-propertycontainer,
-.ruleview-propertyname,
-.ruleview-propertyvalue {
-  text-decoration: inherit;
-}
-
-.ruleview-computedlist {
-  list-style: none;
-  padding: 0;
-}
-
-.ruleview-computed {
-  -moz-margin-start: 35px;
-}
-
-.ruleview-overridden {
-  text-decoration: line-through;
-}
-
-.styleinspector-propertyeditor {
-  border: 1px solid #CCC;
-  padding: 0;
-}
-
-.ruleview-property {
-  border-left: 2px solid transparent;
-}
-
-.ruleview-property  > * {
-  vertical-align: middle;
-}
-
-.ruleview-property[dirty] {
-  border-left-color: #68E268;
-}
-
-.ruleview-namecontainer > .ruleview-propertyname,
-.ruleview-propertycontainer > .ruleview-propertyvalue {
-  border-bottom: 1px dashed transparent;
-}
-
-.ruleview-namecontainer:hover > .ruleview-propertyname,
-.ruleview-propertycontainer:hover > .ruleview-propertyvalue {
-  border-bottom-color: hsl(0,0%,50%);
-}
-
-.ruleview-selector-separator, .ruleview-selector-unmatched {
-  color: #888;
-}
diff --git a/browser/themes/windows/devtools/scratchpad.css b/browser/themes/windows/devtools/scratchpad.css
index 86b4b167b..a6207e37d 100644
--- a/browser/themes/windows/devtools/scratchpad.css
+++ b/browser/themes/windows/devtools/scratchpad.css
@@ -1,5 +1,5 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 %include ../../shared/devtools/scratchpad.inc.css
 \ No newline at end of file
diff --git a/browser/themes/windows/devtools/shadereditor.css b/browser/themes/windows/devtools/shadereditor.css
new file mode 100644
index 000000000..34817e245
--- /dev/null
+++ b/browser/themes/windows/devtools/shadereditor.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/devtools/shadereditor.inc.css
diff --git a/browser/themes/windows/devtools/splitview.css b/browser/themes/windows/devtools/splitview.css
deleted file mode 100644
index 549f4cdaa..000000000
--- a/browser/themes/windows/devtools/splitview.css
+++ /dev/null
@@ -1,115 +0,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/. */
-
-.splitview-nav-container {
-  background-color: hsl(211,21%,26%);
-  color: white;
-}
-
-.loading .splitview-nav-container {
-  background-image: url(chrome://global/skin/icons/loading_16.png);
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-
-.splitview-nav {
-  -moz-appearance: none;
-  margin: 0;
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-.splitview-nav > li {
-  color: white;
-  background-clip: padding-box;
-  border-bottom: 1px solid hsla(210,40%,83%,.1);
-  box-shadow: inset 0 -1px 0 hsla(211,68%,6%,.3);
-  -moz-padding-end: 8px;
-  -moz-box-align: center;
-}
-
-.splitview-nav {
-  list-style-image: none;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.splitview-nav > li {
-  outline: 0;
-  vertical-align: bottom;
-}
-
-.placeholder {
-  -moz-box-flex: 1;
-  text-align: center;
-}
-
-.splitview-nav > li.splitview-active {
-  background-image: url(itemArrow-ltr.png),
-                    linear-gradient(to right, black, black),
-                    linear-gradient(hsl(200,100%,33%), hsl(200,100%,25%));
-  background-repeat: no-repeat, no-repeat, repeat-x;
-  background-position: center right, top right, top left;
-  background-size: auto, 1px 100%, auto;
-  border-bottom: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
-              inset 0 -1px 0 hsla(210,40%,83%,.05);
-}
-
-.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
-  background-image: url(itemArrow-rtl.png),
-                    linear-gradient(to right, black, black),
-                    linear-gradient(hsl(200,100%,33%), hsl(200,100%,25%));
-  background-repeat: no-repeat, no-repeat, repeat-x;
-  background-position: center left, top left, top right;
-}
-
-/* Toolbars */
-
-.devtools-toolbar {
-  height: 26px;
-  background-origin: border-box;
-  background-clip: border-box;
-  border-top-width: 0;
-  border-bottom: 1px solid hsla(210,8%,5%,.65);
-  padding: 3px;
-}
-
-.splitview-main > toolbar:-moz-locale-dir(ltr) {
-  border-right: 1px solid hsla(210,8%,5%,.5);
-}
-
-.splitview-main > toolbar:-moz-locale-dir(rtl) {
-  border-left: 1px solid hsla(210,8%,5%,.5);
-}
-
-.devtools-toolbarbutton {
-  font-size: 11px;
-  padding: 0 8px;
-  width: auto;
-  min-width: 48px;
-  min-height: 0;
-}
-
-
-/* Resizers */
-
-.splitview-landscape-splitter {
-  -moz-border-start-color: transparent;
-}
-
-.splitview-portrait-resizer {
-  -moz-appearance: none;
-  background: linear-gradient(black 1px, rgba(255,255,255,0.2) 1px),
-              linear-gradient(hsl(209,18%,34%), hsl(210,24%,16%));
-  height: 12px;
-  background-size: 10px 2px, 100% 12px;
-  background-clip: content-box, border-box;
-  background-repeat: repeat-y, no-repeat;
-  background-position: center center;
-  padding: 2px 0;
-  border-top: 1px solid hsla(210,8%,5%,.5);
-  border-bottom: 1px solid hsla(210,8%,5%,.5);
-}
diff --git a/browser/themes/windows/devtools/styleeditor.css b/browser/themes/windows/devtools/styleeditor.css
deleted file mode 100644
index 8b10c25f9..000000000
--- a/browser/themes/windows/devtools/styleeditor.css
+++ /dev/null
@@ -1,131 +0,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/. */
-
-#style-editor-chrome {
-  background-color: hsl(211,21%,26%);
-}
-
-.stylesheet-title,
-.stylesheet-name {
-  text-decoration: none;
-  color: hsl(210,30%,85%);
-}
-
-.stylesheet-name {
-  font-size: 13px;
-}
-
-.stylesheet-rule-count,
-.stylesheet-saveButton {
-  color: hsl(210,16%,53%);
-}
-
-.stylesheet-saveButton {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.splitview-active .stylesheet-title,
-.splitview-active .stylesheet-name {
-  color: hsl(0,0%,100%);
-}
-
-.splitview-active .stylesheet-rule-count,
-.splitview-active .stylesheet-saveButton {
-  color: hsl(205,50%,70%);
-}
-
-.splitview-nav:focus {
-  outline: 0; /* focus ring is on the stylesheet name */
-}
-
-.splitview-nav > li.unsaved > hgroup .stylesheet-name {
-  font-style: italic;
-}
-
-.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
-.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
-  font-style: italic;
-}
-
-.splitview-nav.empty > p {
-  padding: 0 10px;
-}
-
-.stylesheet-enabled {
-  padding: 8px 0;
-  margin: 0 8px;
-  background-image: url(itemToggle.png);
-  background-repeat: no-repeat;
-  background-clip: content-box;
-  background-position: 0 8px;
-  width: 24px;
-  height: 40px;
-}
-
-.disabled > .stylesheet-enabled {
-  background-position: -24px 8px;
-}
-
-.splitview-nav > li > .stylesheet-enabled:focus,
-.splitview-nav > li:hover > .stylesheet-enabled {
-  outline: 0;
-}
-
-.stylesheet-error-message {
-  color: red;
-}
-
-.stylesheet-more > h3 {
-  font-size: 11px;
-  -moz-margin-end: 2px;
-}
-
-.devtools-searchinput {
-  max-width: 25ex;
-  font-size: 11px;
-}
-
-.placeholder {
-  color: white;
-}
-
-.placeholder a {
-  text-decoration: underline;
-}
-
-h1,
-h2,
-h3 {
-  font-size: inherit;
-  font-weight: normal;
-  margin: 0;
-  padding: 0;
-}
-
-/* portrait mode */
-@media (max-width: 550px) {
-  .splitview-nav {
-    box-shadow: none;
-  }
-
-  .splitview-nav > li.splitview-active {
-    background-size: 0 0, 0 0, auto;
-  }
-
-  .stylesheet-enabled {
-    padding: 0;
-    background-position: 0 0;
-    height: 24px;
-  }
-
-  .disabled > .stylesheet-enabled {
-    background-position: -24px 0;
-  }
-
-  .splitview-nav > li > hgroup.stylesheet-info {
-    -moz-box-align: baseline;
-  }
-}
diff --git a/browser/themes/windows/devtools/timeline.css b/browser/themes/windows/devtools/timeline.css
new file mode 100644
index 000000000..d22fe6d7a
--- /dev/null
+++ b/browser/themes/windows/devtools/timeline.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/devtools/timeline.inc.css
diff --git a/browser/themes/windows/devtools/toggle-tools.png b/browser/themes/windows/devtools/toggle-tools.png
deleted file mode 100644
index 8a40d0d11..000000000
--- a/browser/themes/windows/devtools/toggle-tools.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/tool-debugger-paused.png b/browser/themes/windows/devtools/tool-debugger-paused.png
deleted file mode 100644
index 4c968f542..000000000
--- a/browser/themes/windows/devtools/tool-debugger-paused.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/tool-debugger.png b/browser/themes/windows/devtools/tool-debugger.png
deleted file mode 100644
index af4dbc0e0..000000000
--- a/browser/themes/windows/devtools/tool-debugger.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/tool-inspector.png b/browser/themes/windows/devtools/tool-inspector.png
deleted file mode 100644
index 8c1e7f308..000000000
--- a/browser/themes/windows/devtools/tool-inspector.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/tool-network.png b/browser/themes/windows/devtools/tool-network.png
deleted file mode 100644
index 01f23203f..000000000
--- a/browser/themes/windows/devtools/tool-network.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/tool-options.png b/browser/themes/windows/devtools/tool-options.png
deleted file mode 100644
index 7079a1752..000000000
--- a/browser/themes/windows/devtools/tool-options.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/tool-profiler.png b/browser/themes/windows/devtools/tool-profiler.png
deleted file mode 100644
index 8f30f12a9..000000000
--- a/browser/themes/windows/devtools/tool-profiler.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/tool-styleeditor.png b/browser/themes/windows/devtools/tool-styleeditor.png
deleted file mode 100644
index 83765d9f6..000000000
--- a/browser/themes/windows/devtools/tool-styleeditor.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/tool-webconsole.png b/browser/themes/windows/devtools/tool-webconsole.png
deleted file mode 100644
index 86633249a..000000000
--- a/browser/themes/windows/devtools/tool-webconsole.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/toolbox.css b/browser/themes/windows/devtools/toolbox.css
deleted file mode 100644
index ef71b811a..000000000
--- a/browser/themes/windows/devtools/toolbox.css
+++ /dev/null
@@ -1,282 +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/. */
-
-#toolbox-controls {
-  margin: 0 4px;
-}
-
-#toolbox-controls > toolbarbutton,
-#toolbox-dock-buttons > toolbarbutton {
-  -moz-appearance: none;
-  border: none;
-  margin: 0 4px;
-  min-width: 16px;
-  width: 16px;
-}
-
-#toolbox-dock-bottom {
-  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
-}
-
-#toolbox-dock-side {
-  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
-}
-
-#toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/undock.png");
-}
-
-#toolbox-dock-window,
-#toolbox-dock-bottom,
-#toolbox-dock-side {
-  opacity: 0.6;
-}
-
-#toolbox-dock-window:hover,
-#toolbox-dock-bottom:hover,
-#toolbox-dock-side:hover {
-  opacity: 1;
-}
-
-#toolbox-controls-separator {
-  width: 3px;
-  background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)),
-                    linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)),
-                    linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0));
-  background-size: 1px 100%;
-  background-repeat: no-repeat;
-  background-position: 0, 1px, 2px;
-  -moz-margin-start: 8px;
-}
-
-
-/* Command buttons */
-
-.command-button {
-  -moz-appearance: none;
-  border: none;
-  margin: 0;
-  padding: 0 8px;
-  width: 16px;
-}
-
-.command-button:hover {
-  background-color: hsla(206,37%,4%,.2);
-}
-.command-button:hover:active, .command-button[checked=true]:not(:hover) {
-  background-color: hsla(206,37%,4%,.4);
-}
-
-#command-button-paintflashing {
-  list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-paintflashing:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-paintflashing:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-paintflashing[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-responsive {
-  list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-responsive:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-responsive:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-responsive[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-tilt {
-  list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-tilt:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-tilt:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-#command-button-tilt[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-scratchpad {
-  list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-
-#command-button-scratchpad:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-scratchpad:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-/* Tabs */
-
-.devtools-tabbar {
-  -moz-appearance: none;
-  background-image: url("background-noise-toolbar.png"),
-                    linear-gradient(#303840, #2d3640);
-  border-bottom: 1px solid #060a0d;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
-              0 -1px 0 hsla(206,37%,4%,.1) inset;
-  min-height: 32px;
-  padding: 0;
-}
-
-#toolbox-tabs {
-  margin: 0;
-}
-
-.devtools-tab {
-  -moz-appearance: none;
-  min-width: 32px;
-  min-height: 32px;
-  max-width: 110px;
-  color: #b6babf;
-  margin: 0;
-  padding: 0;
-  background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1));
-  background-size: 1px 100%;
-  background-repeat: no-repeat;
-  background-position: left, right;
-  border-top: 1px solid #060a0d;
-  border-right: 1px solid hsla(206,37%,4%,.45);
-}
-
-.devtools-tab > image {
-  -moz-margin-end: 0;
-  -moz-margin-start: 4px;
-  opacity: 0.6;
-}
-
-#toolbox-tab-options > image {
-  margin: 0 8px;
-}
-
-.devtools-tab:hover > image {
-  opacity: 0.8;
-}
-
-.devtools-tab:active > image,
-.devtools-tab[selected=true] > image {
-  opacity: 1;
-}
-
-.devtools-tab:hover {
-  background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(206,37%,4%,.1), hsla(206,37%,4%,.2));
-  background-size: 1px 100%,
-                   1px 100%,
-                   100%;
-  background-repeat: no-repeat,
-                     no-repeat,
-                     repeat-x;
-  background-position: left, right;
-  color: #ced3d9;
-}
-.devtools-tab:hover:active {
-  background-color: hsla(206,37%,4%,.2);
-  color: #f5f7fa;
-}
-
-.devtools-tab[selected=true] {
-  color: #f5f7fa;
-  background-image: radial-gradient(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
-                    radial-gradient(farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)),
-                    linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3));
-  background-size: 100% 1px,
-                   100% 5px,
-                   1px 100%,
-                   1px 100%,
-                   100%;
-  background-repeat: no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     repeat-x;
-  background-position: top right, top left, left, right;
-  box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
-}
-
-.devtools-tab:not([selected=true]).highlighted {
-  color: #f5f7fa;
-  background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
-                    radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-                    linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
-  background-size: 100% 1px,
-                   100% 5px,
-                   1px 100%,
-                   1px 100%,
-                   100%;
-  background-repeat: no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     no-repeat,
-                     repeat-x;
-  background-position: top right, top left, left, right;
-}
-
-.devtools-tab:not(.highlighted) > .highlighted-icon,
-.devtools-tab[selected=true] > .highlighted-icon,
-.devtools-tab:not([selected=true]).highlighted > .default-icon {
-  visibility: collapse;
-}
-
-#options-panel {
-  background-image: url("chrome://browser/skin/newtab/noise.png");
-}
-
-.options-vertical-pane {
-  margin: 15px;
-  width: calc(50% - 30px);
-  min-width: 400px;
-  -moz-padding-start: 5px;
-}
-
-.options-vertical-pane > label {
-  padding: 5px 0;
-  font-size: 1.4rem;
-}
-
-.options-groupbox {
-  -moz-margin-start: 15px;
-  padding: 4px;
-}
-
-.options-groupbox > * {
-  padding: 2px;
-}
-
-.options-citation-label {
-  font-size: 1rem !important;
-  /* !important is required otherwise font-size will still be 1.4rem */
-  font-style: italic;
-  padding: 4px 0 0; /* To align it with the checkbox */
-  color: #444;
-}
-
-.options-citation-label + label {
-  padding: 3px 0 0 !important; /* To align it with the checkbox */
-  font-style: italic;
-}
diff --git a/browser/themes/windows/devtools/undock.png b/browser/themes/windows/devtools/undock.png
deleted file mode 100644
index 4e62b2cee..000000000
--- a/browser/themes/windows/devtools/undock.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/vview-delete.png b/browser/themes/windows/devtools/vview-delete.png
deleted file mode 100644
index 9604653c0..000000000
--- a/browser/themes/windows/devtools/vview-delete.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/vview-edit.png b/browser/themes/windows/devtools/vview-edit.png
deleted file mode 100644
index af42a28df..000000000
--- a/browser/themes/windows/devtools/vview-edit.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/webaudioeditor.css b/browser/themes/windows/devtools/webaudioeditor.css
new file mode 100644
index 000000000..079602f4d
--- /dev/null
+++ b/browser/themes/windows/devtools/webaudioeditor.css
@@ -0,0 +1,5 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+%include ../../shared/devtools/webaudioeditor.inc.css
diff --git a/browser/themes/windows/devtools/webconsole.css b/browser/themes/windows/devtools/webconsole.css
index 3daf77ca7..b8062e31e 100644
--- a/browser/themes/windows/devtools/webconsole.css
+++ b/browser/themes/windows/devtools/webconsole.css
@@ -4,13 +4,6 @@
 
 %include ../../shared/devtools/webconsole.inc.css
 
-.webconsole-timestamp,
-.webconsole-msg-body,
-.jsterm-input-node,
-.jsterm-complete-node {
-  font-family: Consolas, Lucida Console, monospace;
-}
-
 /*
  * This hardcoded width likely due to a toolkit Windows specific bug.
  * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
diff --git a/browser/themes/windows/devtools/webconsole.png b/browser/themes/windows/devtools/webconsole.png
deleted file mode 100644
index 8aee79015..000000000
--- a/browser/themes/windows/devtools/webconsole.png
+++ /dev/null
diff --git a/browser/themes/windows/devtools/webconsole_networkpanel.css b/browser/themes/windows/devtools/webconsole_networkpanel.css
index d66232fe9..a7cc36e51 100644
--- a/browser/themes/windows/devtools/webconsole_networkpanel.css
+++ b/browser/themes/windows/devtools/webconsole_networkpanel.css
@@ -51,7 +51,7 @@ h1 .info {
   padding-right: 4px;
   color: #000;
   white-space: nowrap;
-  text-align: right;
+  text-align: end;
   vertical-align: top;
   width: 10%;
 }
diff --git a/browser/themes/windows/devtools/widgets.css b/browser/themes/windows/devtools/widgets.css
index 0422b68d1..a3845e38e 100644
--- a/browser/themes/windows/devtools/widgets.css
+++ b/browser/themes/windows/devtools/widgets.css
@@ -1,655 +1,9 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-/* Generic pane helpers */
-
-.generic-toggled-side-pane {
-  min-width: 50px;
-  -moz-margin-start: 0px !important;
-  /* Unfortunately, transitions don't work properly with locale-aware properties,
-     so both the left and right margins are set via js, while the start margin
-     is always overridden here. */
-}
-
-.generic-toggled-side-pane[animated] {
-  transition: margin 0.25s ease-in-out;
-}
-
-/* BreacrumbsWidget */
-
-.breadcrumbs-widget-container {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     breadcrumbs-widget-items, to match toolbar-buttons style.
-     This negative margin compensates the extra row of pixels created
-     by the shadow.*/
-  margin: -1px 0;
-}
-
-/* Preloading hack, LTR */
-
-.breadcrumbs-widget-container:-moz-locale-dir(ltr)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/ltr-start.png),
-    url(breadcrumbs/ltr-start-selected.png),
-    url(breadcrumbs/ltr-start-pressed.png),
-    url(breadcrumbs/ltr-start-selected-pressed.png),
-    url(breadcrumbs/ltr-middle.png),
-    url(breadcrumbs/ltr-middle-selected.png),
-    url(breadcrumbs/ltr-middle-pressed.png),
-    url(breadcrumbs/ltr-middle-selected-pressed.png),
-    url(breadcrumbs/ltr-end.png),
-    url(breadcrumbs/ltr-end-selected.png),
-    url(breadcrumbs/ltr-end-pressed.png),
-    url(breadcrumbs/ltr-end-selected-pressed.png);
-}
-
-/* Preloading hack, RTL */
-
-.breadcrumbs-widget-container:-moz-locale-dir(rtl)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/rtl-start.png),
-    url(breadcrumbs/rtl-start-selected.png),
-    url(breadcrumbs/rtl-start-pressed.png),
-    url(breadcrumbs/rtl-start-selected-pressed.png),
-    url(breadcrumbs/rtl-middle.png),
-    url(breadcrumbs/rtl-middle-selected.png),
-    url(breadcrumbs/rtl-middle-pressed.png),
-    url(breadcrumbs/rtl-middle-selected-pressed.png),
-    url(breadcrumbs/rtl-end.png),
-    url(breadcrumbs/rtl-end-selected.png),
-    url(breadcrumbs/rtl-end-pressed.png),
-    url(breadcrumbs/rtl-end-selected-pressed.png);
-}
-
-.scrollbutton-up,
-.scrollbutton-down {
-  -moz-appearance: none;
-  background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset,
-              0 0 0 1px hsla(210,16%,76%,.15) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-  border: 1px solid hsla(210,8%,5%,.45);
-  margin: 1px 0 1px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover,
-.scrollbutton-down:not([disabled]):active:hover {
-  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset,
-              0 1px 3px hsla(210,8%,5%,.25) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-  border-color: hsla(210,8%,5%,.6);
-}
-
-.scrollbutton-up > .toolbarbutton-icon,
-.scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px,7px,16px,0px);
-  margin: 0 5px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px,14px,16px,7px);
-}
-
-.scrollbutton-up[disabled] > .toolbarbutton-icon,
-.scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.breadcrumbs-widget-item {
-  background-color: transparent;
-  -moz-appearance: none;
-  overflow: hidden;
-  min-width: 85px;
-  max-width: 250px;
-  min-height: 25px;
-  border-style: solid;
-  border-width: 2px 13px;
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-  outline: none;
-  color: hsl(210,30%,85%);
-}
-
-.breadcrumbs-widget-item:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
+%include ../../shared/devtools/widgets.inc.css
 
 .breadcrumbs-widget-item:-moz-focusring > .button-box {
   border-width: 0;
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag {
-  color: hsl(208,100%,60%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
-  color: hsl(205,100%,70%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,70%);
-}
-
-.breadcrumbs-widget-item-id,
-.breadcrumbs-widget-item-classes {
-  color: #8d99a6;
-}
-
-.breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,85%);
-}
-
-/* Breadcrumbs LTR */
-
-.breadcrumbs-widget-item:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-left-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-right-width: 0;
-}
-
-/* Breadcrumbs RTL */
-
-.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-right-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-container {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  color: #fff;
-}
-
-.side-menu-widget-container[with-arrow=true]:-moz-locale-dir(ltr),
-.side-menu-widget-group[with-arrow=true]:-moz-locale-dir(ltr),
-.side-menu-widget-item[with-arrow=true]:-moz-locale-dir(ltr) {
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-.side-menu-widget-container[with-arrow=true]:-moz-locale-dir(rtl),
-.side-menu-widget-group[with-arrow=true]:-moz-locale-dir(rtl),
-.side-menu-widget-item[with-arrow=true]:-moz-locale-dir(rtl) {
-  box-shadow: inset 1px 0 0 #222426;
-}
-
-.side-menu-widget-group-title {
-  background-image: linear-gradient(#1f3e4f, #1b3243);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 -2px 0 hsla(206,37%,4%,.05) inset,
-              0 -1px 1px hsla(206,37%,4%,.1) inset;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  padding: 4px;
-  color: #f5f7fa;
-  transition-property: color, text-shadow;
-  transition-duration: 0.3s;
-}
-
-.side-menu-widget-group:hover > .side-menu-widget-group-title {
-  text-shadow: 0 0 1px #cfcfcf;
-  color: #fff;
-}
-
-.side-menu-widget-item {
-  border-top: 1px solid hsla(210,16%,76%,.1);
-  border-bottom: 1px solid hsla(210,8%,5%,.25);
-  cursor: pointer;
-}
-
-.side-menu-widget-item:last-of-type {
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-.side-menu-widget-item.selected {
-  background: linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)) repeat-x top left !important;
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
-              inset 0 -1px 0 hsla(210,40%,83%,.05);
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
-  background-size: auto, 1px 100%;
-  background-repeat: no-repeat;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
-  background-image: url(itemArrow-ltr.png), linear-gradient(to right, black, black);
-  background-position: center right, top right;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
-  background-image: url(itemArrow-rtl.png), linear-gradient(to right, black, black);
-  background-position: center left, top left;
-}
-
-.side-menu-widget-item-arrow {
-  -moz-margin-start: -8px;
-  width: 8px;
-}
-
-.side-menu-widget-item-contents {
-  padding: 4px;
-}
-
-.side-menu-widget-item label {
-  cursor: inherit;
-}
-
-.side-menu-widget-item-other {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.65);
-  margin: 0 -4px;
-  -moz-padding-start: 5px;
-}
-
-.side-menu-widget-item-other.selected {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.15);
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.07),
-              inset 0 -1px 0 hsla(210,40%,83%,.07);
-}
-
-.side-menu-widget-item.selected .side-menu-widget-item-other:first-of-type {
-  border-top: 1px dotted #333;
-  margin-top: 3px;
-}
-
-.side-menu-widget-item-other:first-of-type {
-  margin-top: 4px;
-}
-
-.side-menu-widget-item-other:last-of-type {
-  margin-bottom: -4px;
-}
-
-.side-menu-widget-item-other > label {
-  color: #f5f7fa;
-}
-
-.side-menu-widget-empty-notice-container {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  color: #fff;
-  font-weight: 600;
-}
-
-/* VariablesView */
-
-.variables-view-container {
-  background: #fff;
-}
-
-.variables-view-empty-notice {
-  color: GrayText;
-  padding: 2px;
-}
-
-.variables-view-scope > .title {
-  color: #fff;
-}
-
-.variables-view-scope:focus > .title {
-  background: Highlight;
-  color: HighlightText;
-}
-
-.variables-view-scope > .variables-view-element-details:not(:empty) {
-  margin-top: 1px;
-  -moz-margin-start: 2px;
-  -moz-margin-end: 1px;
-}
-
-.variables-view-scope > .variables-view-element-details.enum:not(:empty) {
-  border-bottom: 1px solid #ddd;
-}
-
-/* Generic traits applied to both variables and properties */
-
-.variable-or-property {
-  transition: background 1s ease-in-out;
-  color: #000;
-}
-
-.variable-or-property[changed] {
-  background: rgba(255,255,0,0.65);
-  transition-duration: 0.4s;
-}
-
-.variable-or-property > .title > .value {
-  -moz-padding-start: 6px;
-  -moz-padding-end: 4px;
-}
-
-.variable-or-property:focus > .title {
-  background: Highlight;
-  color: HighlightText;
-  border-radius: 4px;
-}
-
-.variable-or-property[editable] > .title > .value {
-  cursor: text;
-}
-
-.variable-or-property:not([non-header]) > .variables-view-element-details {
-  -moz-margin-start: 10px;
-}
-
-/* Custom variables and properties traits */
-
-.variables-view-variable {
-  -moz-margin-start: 1px;
-  -moz-margin-end: 1px;
-  border-bottom: 1px solid #eee;
-}
-
-.variables-view-variable > .title > .name {
-  font-weight: 600;
-}
-
-.variables-view-variable:not(:focus) > .title > .name {
-  color: #048;
-}
-
-.variables-view-property:not(:focus) > .title > .name {
-  color: #881090;
-}
-
-/* Token value colors */
-
-.variable-or-property:not(:focus) > .title > .token-undefined {
-  color: #bbb;
-}
-
-.variable-or-property:not(:focus) > .title > .token-null {
-  color: #999;
-}
-
-.variable-or-property:not(:focus) > .title > .token-boolean {
-  color: #10c;
-}
-
-.variable-or-property:not(:focus) > .title > .token-number {
-  color: #c00;
-}
-
-.variable-or-property:not(:focus) > .title > .token-string {
-  color: #282;
-}
-
-.variable-or-property:not(:focus) > .title > .token-other {
-  color: #333;
-}
-
-/* Custom configurable/enumerable/writable or frozen/sealed/extensible
- * variables and properties */
-
-.variable-or-property[non-enumerable]:not([self]):not([exception]):not([return]) > .title > .name {
-  opacity: 0.5;
-}
-
-.variable-or-property[non-configurable] > .title > .name {
-  border-bottom: 1px dashed #99f;
-}
-
-.variable-or-property[non-writable] > .title > .name {
-  border-bottom: 1px dashed #f99;
-}
-
-.variable-or-property-non-writable-icon {
-  background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
-  width: 16px;
-  height: 16px;
-  opacity: 0.5;
-}
-
-@media (min-resolution: 2dppx) {
-  .variable-or-property-non-writable-icon {
-    background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
-    background-size: 32px;
-  }
-}
-
-.variable-or-property-frozen-label,
-.variable-or-property-sealed-label,
-.variable-or-property-non-extensible-label {
-  -moz-padding-end: 4px;
-}
-
-.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
-  color: #666;
-}
-
-/* Special variables and properties */
-
-.variable-or-property[safe-getter] > .title > .name {
-  border-bottom: 1px dashed #8b0;
-}
-
-.variable-or-property[exception]:not(:focus) > .title > .name {
-  color: #a00;
-  text-shadow: 0 0 8px #fcc;
-}
-
-.variable-or-property[return]:not(:focus) > .title > .name {
-  color: #0a0;
-  text-shadow: 0 0 8px #cfc;
-}
-
-/* Variables and properties tooltips */
-
-.variable-or-property > tooltip > label {
-  margin: 0 2px 0 2px;
-}
-
-.variable-or-property[non-enumerable] > tooltip > label[value=enumerable],
-.variable-or-property[non-configurable] > tooltip > label[value=configurable],
-.variable-or-property[non-writable] > tooltip > label[value=writable],
-.variable-or-property[non-extensible] > tooltip > label[value=extensible] {
-  color: #800;
-  text-decoration: line-through;
-}
-
-.variable-or-property[safe-getter] > tooltip > label[value=WebIDL] {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #000;
-  color: #080;
-}
-
-/* Variables and properties editing */
-
-.variables-view-delete {
-  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
-  -moz-image-region: rect(0,16px,16px,0);
-}
-
-.variables-view-delete:hover {
-  -moz-image-region: rect(0,32px,16px,16px);
-}
-
-.variables-view-delete:active {
-  -moz-image-region: rect(0,48px,16px,32px);
-}
-
-*:not(:hover) .variables-view-delete {
-  display: none;
-}
-
-.variables-view-delete > .toolbarbutton-text {
-  display: none;
-}
-
-.variables-view-edit {
-  background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
-  width: 20px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.variables-view-throbber {
-  background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
-  width: 16px;
-  height: 16px;
-}
-
-.element-value-input {
-  -moz-margin-start: 4px !important;
-  -moz-margin-end: 2px !important;
-}
-
-.element-name-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
-  color: #048;
-  font-weight: 600;
-}
-
-.element-value-input,
-.element-name-input {
-  border: 1px solid #999 !important;
-  box-shadow: 1px 2px 4px #aaa;
-}
-
-/* Variables and properties searching */
-
-.variables-view-searchinput {
-  min-height: 24px;
-}
-
-.variable-or-property[non-match] {
-  border: none;
-  margin: 0;
-}
-
-/* Expand/collapse arrow */
-
-.arrow {
-  background: url("chrome://global/skin/tree/twisty-clsd.png") center center no-repeat;
-  width: 9px;
-  height: 20px;
-  -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
-}
-
-.arrow[open] {
-  background-image: url("chrome://global/skin/tree/twisty-open.png");
-}
-
-.arrow[invisible] {
-  visibility: hidden;
-}
+}
+\ No newline at end of file
diff --git a/browser/themes/windows/downloads/allDownloadsViewOverlay-aero.css b/browser/themes/windows/downloads/allDownloadsViewOverlay-aero.css
deleted file mode 100644
index 1907fc152..000000000
--- a/browser/themes/windows/downloads/allDownloadsViewOverlay-aero.css
+++ /dev/null
@@ -1,35 +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/. */
-
-%define WINDOWS_AERO
-%include allDownloadsViewOverlay.css
-%undef WINDOWS_AERO
-
-@media (-moz-windows-default-theme) {
-  /*
-  -moz-appearance: menuitem is almost right, but the hover effect is not
-  transparent and is lighter than desired.
-
-  Copied from the autocomplete richlistbox styling in
-  toolkit/themes/windows/global/autocomplete.css
-
-  This styling should be kept in sync with the style from the above file.
-  */
-  #downloadsRichListBox > richlistitem.download[selected] {
-    color: inherit;
-    background-color: transparent;
-    /* four gradients for the bevel highlights on each edge, one for blue background */
-    background-image:
-      linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, rgba(255,255,255,0) 3px),
-      linear-gradient(to right, rgba(255,255,255,0.5) 3px, rgba(255,255,255,0) 3px),
-      linear-gradient(to left, rgba(255,255,255,0.5) 3px, rgba(255,255,255,0) 3px),
-      linear-gradient(to top, rgba(255,255,255,0.4) 3px, rgba(255,255,255,0) 3px),
-      linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3));
-    background-clip: content-box;
-    border-radius: 6px;
-    outline: 1px solid rgb(124,163,206);
-    -moz-outline-radius: 3px;
-    outline-offset: -2px;
-  }
-}
diff --git a/browser/themes/windows/downloads/allDownloadsViewOverlay.css b/browser/themes/windows/downloads/allDownloadsViewOverlay.css
index 62457d4b9..bd3b7899d 100644
--- a/browser/themes/windows/downloads/allDownloadsViewOverlay.css
+++ b/browser/themes/windows/downloads/allDownloadsViewOverlay.css
@@ -10,16 +10,11 @@
 
 #downloadsRichListBox > richlistitem.download {
   height: 6em;
-%ifndef WINDOWS_AERO
-  padding: 5px 8px;
-%endif
 }
 
 .downloadTypeIcon {
-  -moz-margin-end: 8px;
-%ifdef WINDOWS_AERO
   -moz-margin-start: 8px;
-%endif
+  -moz-margin-end: 8px;
   /* explicitly size the icon, so size doesn't vary on hidpi systems */
   height: 32px;
   width: 32px;
@@ -101,52 +96,83 @@ richlistitem.download:hover > .downloadButton.downloadRetry:active {
   -moz-image-region: rect(32px, 64px, 48px, 48px);
 }
 
-%ifndef WINDOWS_AERO
-richlistitem.download[selected] > .downloadButton.downloadCancel {
-  -moz-image-region: rect(0px, 80px, 16px, 64px);
-}
-
-richlistitem.download[selected]:hover > .downloadButton.downloadCancel {
-  -moz-image-region: rect(0px, 96px, 16px, 80px);
-}
-
-richlistitem.download[selected]:hover > .downloadButton.downloadCancel:hover {
-  -moz-image-region: rect(0px, 112px, 16px, 96px);
-}
-
-richlistitem.download[selected]:hover > .downloadButton.downloadCancel:active {
-  -moz-image-region: rect(0px, 128px, 16px, 112px);
-}
-
-richlistitem.download[selected] > .downloadButton.downloadShow {
-  -moz-image-region: rect(16px, 80px, 32px, 64px);
-}
-
-richlistitem.download[selected]:hover > .downloadButton.downloadShow {
-  -moz-image-region: rect(16px, 96px, 32px, 80px);
-}
-
-richlistitem.download[selected]:hover > .downloadButton.downloadShow:hover {
-  -moz-image-region: rect(16px, 112px, 32px, 96px);
-}
-
-richlistitem.download[selected]:hover > .downloadButton.downloadShow:active {
-  -moz-image-region: rect(16px, 128px, 32px, 112px);
-}
-
-richlistitem.download[selected] > .downloadButton.downloadRetry {
-  -moz-image-region: rect(32px, 80px, 48px, 64px);
-}
-
-richlistitem.download[selected]:hover > .downloadButton.downloadRetry {
-  -moz-image-region: rect(32px, 96px, 48px, 80px);
-}
-
-richlistitem.download[selected]:hover > .downloadButton.downloadRetry:hover {
-  -moz-image-region: rect(32px, 112px, 48px, 96px);
-}
-
-richlistitem.download[selected]:hover > .downloadButton.downloadRetry:active {
-  -moz-image-region: rect(32px, 128px, 48px, 112px);
+@media not all and (-moz-os-version: windows-vista) and (-moz-windows-default-theme) {
+  @media not all and (-moz-os-version: windows-win7) and (-moz-windows-default-theme) {
+    richlistitem.download[selected] > .downloadButton.downloadCancel {
+      -moz-image-region: rect(0px, 80px, 16px, 64px);
+    }
+
+    richlistitem.download[selected]:hover > .downloadButton.downloadCancel {
+      -moz-image-region: rect(0px, 96px, 16px, 80px);
+    }
+
+    richlistitem.download[selected]:hover > .downloadButton.downloadCancel:hover {
+      -moz-image-region: rect(0px, 112px, 16px, 96px);
+    }
+
+    richlistitem.download[selected]:hover > .downloadButton.downloadCancel:active {
+      -moz-image-region: rect(0px, 128px, 16px, 112px);
+    }
+
+    richlistitem.download[selected] > .downloadButton.downloadShow {
+      -moz-image-region: rect(16px, 80px, 32px, 64px);
+    }
+
+    richlistitem.download[selected]:hover > .downloadButton.downloadShow {
+      -moz-image-region: rect(16px, 96px, 32px, 80px);
+    }
+
+    richlistitem.download[selected]:hover > .downloadButton.downloadShow:hover {
+      -moz-image-region: rect(16px, 112px, 32px, 96px);
+    }
+
+    richlistitem.download[selected]:hover > .downloadButton.downloadShow:active {
+      -moz-image-region: rect(16px, 128px, 32px, 112px);
+    }
+
+    richlistitem.download[selected] > .downloadButton.downloadRetry {
+      -moz-image-region: rect(32px, 80px, 48px, 64px);
+    }
+
+    richlistitem.download[selected]:hover > .downloadButton.downloadRetry {
+      -moz-image-region: rect(32px, 96px, 48px, 80px);
+    }
+
+    richlistitem.download[selected]:hover > .downloadButton.downloadRetry:hover {
+      -moz-image-region: rect(32px, 112px, 48px, 96px);
+    }
+
+    richlistitem.download[selected]:hover > .downloadButton.downloadRetry:active {
+      -moz-image-region: rect(32px, 128px, 48px, 112px);
+    }
+  }
+}
+
+@media (-moz-os-version: windows-vista) and (-moz-windows-default-theme),
+       (-moz-os-version: windows-win7) and (-moz-windows-default-theme) {
+  /*
+  -moz-appearance: menuitem is almost right, but the hover effect is not
+  transparent and is lighter than desired.
+
+  Copied from the autocomplete richlistbox styling in
+  toolkit/themes/windows/global/autocomplete.css
+
+  This styling should be kept in sync with the style from the above file.
+  */
+  #downloadsRichListBox > richlistitem.download[selected] {
+    color: inherit;
+    background-color: transparent;
+    /* four gradients for the bevel highlights on each edge, one for blue background */
+    background-image:
+      linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, transparent 3px),
+      linear-gradient(to right, rgba(255,255,255,0.5) 3px, transparent 3px),
+      linear-gradient(to left, rgba(255,255,255,0.5) 3px, transparent 3px),
+      linear-gradient(to top, rgba(255,255,255,0.4) 3px, transparent 3px),
+      linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3));
+    background-clip: content-box;
+    border-radius: 6px;
+    outline: 1px solid rgb(124,163,206);
+    -moz-outline-radius: 3px;
+    outline-offset: -2px;
+  }
 }
-%endif
diff --git a/browser/themes/windows/downloads/buttons-aero.png b/browser/themes/windows/downloads/buttons-aero.png
deleted file mode 100644
index c1057c434..000000000
--- a/browser/themes/windows/downloads/buttons-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/downloads/downloads-aero.css b/browser/themes/windows/downloads/downloads-aero.css
deleted file mode 100644
index 68dbfc111..000000000
--- a/browser/themes/windows/downloads/downloads-aero.css
+++ /dev/null
@@ -1,60 +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/. */
-
-%define WINDOWS_AERO
-%include downloads.css
-%undef WINDOWS_AERO
-
-@media (-moz-windows-default-theme) {
-  richlistitem[type="download"] {
-    border: 1px solid transparent;
-    border-bottom: 1px solid hsl(213,40%,90%);
-  }
-
-  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
-    border: 1px solid hsl(213,45%,65%);
-    box-shadow: 0 0 0 1px hsla(0,0%,100%,.5) inset,
-                0 1px 0 hsla(0,0%,100%,.3) inset;
-    background-image: linear-gradient(hsl(212,86%,92%), hsl(212,91%,86%));
-    color: black;
-  }
-}
-
-@media (-moz-windows-compositor) {
-  /* The following rules are for the downloads indicator when in its normal,
-     non-downloading, non-paused state (ie, it's just showing the downloads
-     button icon). */
-  #toolbar-menubar #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
-  #TabsToolbar[tabsontop=true] #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
-  #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
-
-  /* The following rules are for the downloads indicator when in its paused
-     or undetermined progress state. We use :not([counter]) as a shortcut for
-     :-moz-any([progress], [paused]). */
-
-  /* This is the case where the downloads indicator has been moved next to the menubar */
-  #toolbar-menubar #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
-  /* This is the case where the downloads indicator is in the tabstrip toolbar with tabs on top. */
-  #TabsToolbar[tabsontop=true] #downloads-indicator:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
-  /* This is the case where the downloads indicator is anywhere in the nav-bar with tabs on bottom. */
-  #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-indicator:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
-  /* This is the case where the downloads indicator is in the tabstrip when the tabstrip is the last item in the toolbox (and is therefore over glass) */
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
-    background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 108, 18, 90);
-  }
-
-  #toolbar-menubar #downloads-indicator-counter:not(:-moz-lwtheme),
-  #TabsToolbar[tabsontop=true] #downloads-indicator-counter:not(:-moz-lwtheme),
-  #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-indicator-counter:not(:-moz-lwtheme),
-  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator-counter:not(:-moz-lwtheme) {
-    color: white;
-    text-shadow: 0 0 1px rgba(0,0,0,.7),
-                 0 1px 1.5px rgba(0,0,0,.5);
-  }
-}
-
-#downloads-indicator-counter {
-  margin-bottom: -1px;
-}
diff --git a/browser/themes/windows/downloads/downloads.css b/browser/themes/windows/downloads/downloads.css
index 7f5f195e4..8ead0fe22 100644
--- a/browser/themes/windows/downloads/downloads.css
+++ b/browser/themes/windows/downloads/downloads.css
@@ -20,10 +20,16 @@
 
 #downloadsHistory {
   background: transparent;
-  color: -moz-nativehyperlinktext;
   cursor: pointer;
 }
 
+@media (-moz-os-version: windows-vista),
+       (-moz-os-version: windows-win7) {
+  #downloadsHistory {
+    color: -moz-nativehyperlinktext;
+  }
+}
+
 #downloadsPanel[keyfocus] > #downloadsFooter > #downloadsHistory:focus {
   outline: 1px -moz-dialogtext dotted;
   outline-offset: -1px;
@@ -34,16 +40,37 @@
   margin: 1em;
 }
 
-@media (-moz-windows-default-theme) {
-  #downloadsPanel[hasdownloads] > #downloadsFooter {
-%ifdef WINDOWS_AERO
-    background-color: #f1f5fb;
-%else
-    background-color: hsla(216,45%,88%,.98);
-%endif
-    box-shadow: 0px 1px 2px rgb(204,214,234) inset;
-    border-bottom-left-radius: 3px;
-    border-bottom-right-radius: 3px;
+#downloadsPanel[hasdownloads] > #downloadsFooter {
+  background-color: hsla(210,4%,10%,.04);
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.08) inset;
+  transition-duration: 150ms;
+  transition-property: background-color;
+}
+
+#downloadsPanel[hasdownloads] > #downloadsFooter:hover {
+  background-color: hsla(210,4%,10%,.05);
+}
+
+#downloadsPanel[hasdownloads] > #downloadsFooter:hover:active {
+  background-color: hsla(210,4%,10%,.1);
+  box-shadow: 0 2px 0 0 hsla(210,4%,10%,.1) inset;
+}
+
+@media (-moz-os-version: windows-vista),
+       (-moz-os-version: windows-win7) {
+  @media (-moz-windows-default-theme) {
+    #downloadsPanel[hasdownloads] > #downloadsFooter {
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+      transition-duration: 0s;
+    }
+
+    #downloadsPanel[hasdownloads] > #downloadsFooter,
+    #downloadsPanel[hasdownloads] > #downloadsFooter:hover,
+    #downloadsPanel[hasdownloads] > #downloadsFooter:hover:active {
+      background-color: #f1f5fb;
+      box-shadow: 0px 1px 2px rgb(204,214,234) inset;
+    }
   }
 }
 
@@ -83,6 +110,14 @@ richlistitem[type="download"] {
   padding: 8px;
 }
 
+@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
+       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
+  richlistitem[type="download"] {
+    border: 1px solid transparent;
+    border-bottom: 1px solid hsl(213,40%,90%);
+  }
+}
+
 richlistitem[type="download"]:first-child {
   border-top: 1px solid transparent;
 }
@@ -167,14 +202,47 @@ richlistitem[type="download"]:first-child {
 /*** Highlighted list items ***/
 
 #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
-  border-radius: 3px;
-  border-top: 1px solid hsla(0,0%,100%,.2);
-  border-bottom: 1px solid hsla(0,0%,0%,.2);
-  background-color: Highlight;
-  color: HighlightText;
+  background-color: hsla(210,4%,10%,.08);
+  outline: 1px solid hsla(210,4%,10%,.1);
+  outline-offset: -1px;
   cursor: pointer;
 }
 
+#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
+  background-color: hsla(210,4%,10%,.15);
+  outline: 1px solid hsla(210,4%,10%,.15);
+  box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
+}
+
+@media (-moz-os-version: windows-vista),
+       (-moz-os-version: windows-win7) {
+  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
+    border-radius: 3px;
+    outline: 0;
+    border-top: 1px solid hsla(0,0%,100%,.2);
+    border-bottom: 1px solid hsla(0,0%,0%,.2);
+    background-color: Highlight;
+    color: HighlightText;
+  }
+
+  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
+    background-color: Highlight;
+    outline: 0;
+    box-shadow: none;
+  }
+}
+
+@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
+       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
+  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
+    border: 1px solid hsl(213,45%,65%);
+    box-shadow: 0 0 0 1px hsla(0,0%,100%,.5) inset,
+                0 1px 0 hsla(0,0%,100%,.3) inset;
+    background-image: linear-gradient(hsl(212,86%,92%), hsl(212,91%,86%));
+    color: black;
+  }
+}
+
 /*** Button icons ***/
 
 .downloadButton.downloadCancel {
@@ -202,26 +270,6 @@ richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover
 richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
   -moz-image-region: rect(16px, 64px, 32px, 48px);
 }
-%ifndef WINDOWS_AERO
-#downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
-  -moz-image-region: rect(16px, 32px, 32px, 16px);
-}
-#downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
-  -moz-image-region: rect(16px, 48px, 32px, 32px);
-}
-#downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
-  -moz-image-region: rect(16px, 64px, 32px, 48px);
-}
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
-  -moz-image-region: rect(16px, 96px, 32px, 80px);
-}
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
-  -moz-image-region: rect(16px, 112px, 32px, 96px);
-}
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
-  -moz-image-region: rect(16px, 128px, 32px, 112px);
-}
-%endif
 
 .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 16px, 48px, 0px);
@@ -389,3 +437,41 @@ toolbar[mode="full"] > #downloads-indicator > .toolbarbutton-text {
   margin: 0;
   text-align: center;
 }
+
+@media (-moz-windows-compositor) {
+  /* The following rules are for the downloads indicator when in its normal,
+     non-downloading, non-paused state (ie, it's just showing the downloads
+     button icon). */
+  #toolbar-menubar #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
+  #TabsToolbar[tabsontop=true] #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
+  #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator:not([attention]) > #downloads-indicator-anchor > #downloads-indicator-icon:not(:-moz-lwtheme),
+
+  /* The following rules are for the downloads indicator when in its paused
+     or undetermined progress state. We use :not([counter]) as a shortcut for
+     :-moz-any([progress], [paused]). */
+
+  /* This is the case where the downloads indicator has been moved next to the menubar */
+  #toolbar-menubar #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
+  /* This is the case where the downloads indicator is in the tabstrip toolbar with tabs on top. */
+  #TabsToolbar[tabsontop=true] #downloads-indicator:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
+  /* This is the case where the downloads indicator is anywhere in the nav-bar with tabs on bottom. */
+  #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-indicator:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter,
+  /* This is the case where the downloads indicator is in the tabstrip when the tabstrip is the last item in the toolbox (and is therefore over glass) */
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator:not(:-moz-lwtheme):not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter {
+    background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 108, 18, 90);
+  }
+
+  #toolbar-menubar #downloads-indicator-counter:not(:-moz-lwtheme),
+  #TabsToolbar[tabsontop=true] #downloads-indicator-counter:not(:-moz-lwtheme),
+  #navigator-toolbox[tabsontop=false] > #nav-bar #downloads-indicator-counter:not(:-moz-lwtheme),
+  #nav-bar + #customToolbars + #PersonalToolbar[collapsed=true] + #TabsToolbar[tabsontop=false]:last-child #downloads-indicator-counter:not(:-moz-lwtheme) {
+    color: white;
+    text-shadow: 0 0 1px rgba(0,0,0,.7),
+                 0 1px 1.5px rgba(0,0,0,.5);
+  }
+}
+
+#downloads-indicator-counter {
+  margin-bottom: -1px;
+}
diff --git a/browser/themes/windows/feeds/feed-icons-16-aero.png b/browser/themes/windows/feeds/feed-icons-16-aero.png
deleted file mode 100644
index b822aa44f..000000000
--- a/browser/themes/windows/feeds/feed-icons-16-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/feeds/feed-icons-16.png b/browser/themes/windows/feeds/feed-icons-16.png
index bcca08638..b822aa44f 100644
--- a/browser/themes/windows/feeds/feed-icons-16.png
+++ b/browser/themes/windows/feeds/feed-icons-16.png
diff --git a/browser/themes/windows/feeds/feedIcon-aero.png b/browser/themes/windows/feeds/feedIcon-aero.png
deleted file mode 100644
index b4d599499..000000000
--- a/browser/themes/windows/feeds/feedIcon-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/feeds/feedIcon.png b/browser/themes/windows/feeds/feedIcon.png
index e69bc4496..b4d599499 100644
--- a/browser/themes/windows/feeds/feedIcon.png
+++ b/browser/themes/windows/feeds/feedIcon.png
diff --git a/browser/themes/windows/feeds/feedIcon16-aero.png b/browser/themes/windows/feeds/feedIcon16-aero.png
deleted file mode 100644
index 7c3aceb66..000000000
--- a/browser/themes/windows/feeds/feedIcon16-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/feeds/feedIcon16.png b/browser/themes/windows/feeds/feedIcon16.png
index d77880753..7c3aceb66 100644
--- a/browser/themes/windows/feeds/feedIcon16.png
+++ b/browser/themes/windows/feeds/feedIcon16.png
diff --git a/browser/themes/windows/identity-aero.png b/browser/themes/windows/identity-aero.png
deleted file mode 100644
index 0dcccd493..000000000
--- a/browser/themes/windows/identity-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/identity.png b/browser/themes/windows/identity.png
index 60d5261ff..0dcccd493 100644
--- a/browser/themes/windows/identity.png
+++ b/browser/themes/windows/identity.png
diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn
index 636509983..68d72adbf 100644
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -3,14 +3,11 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 browser.jar:
-% skin browser classic/1.0 %skin/classic/browser/ os=WINNT osversion<6
-% skin browser classic/1.0 %skin/classic/browser/ os!=WINNT
-# NOTE: If you add a new file here, you'll need to add it to the aero
-# section at the bottom of this file
+% skin browser classic/1.0 %skin/classic/browser/
         skin/classic/browser/sanitizeDialog.css
 *       skin/classic/browser/aboutPrivateBrowsing.css
 *       skin/classic/browser/aboutSessionRestore.css
-        skin/classic/browser/aboutSessionRestore-window-icon.png     (preferences/application.png)
+        skin/classic/browser/aboutSessionRestore-window-icon.png
         skin/classic/browser/aboutCertError.css
         skin/classic/browser/aboutCertError_sectionCollapsed.png
         skin/classic/browser/aboutCertError_sectionCollapsed-rtl.png
@@ -53,6 +50,7 @@ browser.jar:
         skin/classic/browser/Privacy-16.png
         skin/classic/browser/Privacy-32.png
         skin/classic/browser/Privacy-48.png
+        skin/classic/browser/Privacy-64.png
         skin/classic/browser/privatebrowsing-light.png
         skin/classic/browser/privatebrowsing-dark.png
         skin/classic/browser/reload-stop-go.png
@@ -63,6 +61,7 @@ browser.jar:
         skin/classic/browser/setDesktopBackground.css
         skin/classic/browser/slowStartup-16.png
         skin/classic/browser/Toolbar.png
+        skin/classic/browser/Toolbar-glass.png
         skin/classic/browser/Toolbar-inverted.png
         skin/classic/browser/toolbarbutton-dropdown-arrow.png
         skin/classic/browser/toolbarbutton-dropdown-arrow-inverted.png
@@ -82,16 +81,16 @@ browser.jar:
         skin/classic/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png)
         skin/classic/browser/downloads/download-notification-start.png (downloads/download-notification-start.png)
         skin/classic/browser/downloads/download-summary.png          (downloads/download-summary.png)
-*       skin/classic/browser/downloads/downloads.css                 (downloads/downloads.css)
-*       skin/classic/browser/downloads/allDownloadsViewOverlay.css   (downloads/allDownloadsViewOverlay.css)
+        skin/classic/browser/downloads/downloads.css                 (downloads/downloads.css)
+        skin/classic/browser/downloads/allDownloadsViewOverlay.css   (downloads/allDownloadsViewOverlay.css)
         skin/classic/browser/downloads/contentAreaDownloadsView.css  (downloads/contentAreaDownloadsView.css)
         skin/classic/browser/feeds/feedIcon.png                      (feeds/feedIcon.png)
         skin/classic/browser/feeds/feedIcon16.png                    (feeds/feedIcon16.png)
-        skin/classic/browser/feeds/feed-icons-16.png                 (feeds/feed-icons-16.png)
-        skin/classic/browser/feeds/audioFeedIcon.png                 (feeds/feedIcon.png)
-        skin/classic/browser/feeds/audioFeedIcon16.png               (feeds/feedIcon16.png)
         skin/classic/browser/feeds/videoFeedIcon.png                 (feeds/feedIcon.png)
         skin/classic/browser/feeds/videoFeedIcon16.png               (feeds/feedIcon16.png)
+        skin/classic/browser/feeds/audioFeedIcon.png                 (feeds/feedIcon.png)
+        skin/classic/browser/feeds/audioFeedIcon16.png               (feeds/feedIcon16.png)
+        skin/classic/browser/feeds/feed-icons-16.png                 (feeds/feed-icons-16.png)
         skin/classic/browser/feeds/subscribe.css                     (feeds/subscribe.css)
         skin/classic/browser/feeds/subscribe-ui.css                  (feeds/subscribe-ui.css)
         skin/classic/browser/newtab/newTab.css                       (newtab/newTab.css)
@@ -130,6 +129,7 @@ browser.jar:
         skin/classic/browser/tabbrowser/alltabs.png                  (tabbrowser/alltabs.png)
         skin/classic/browser/tabbrowser/alltabs-inverted.png         (tabbrowser/alltabs-inverted.png)
         skin/classic/browser/tabbrowser/newtab.png                   (tabbrowser/newtab.png)
+        skin/classic/browser/tabbrowser/newtab-glass.png             (tabbrowser/newtab-glass.png)
         skin/classic/browser/tabbrowser/newtab-inverted.png          (tabbrowser/newtab-inverted.png)
         skin/classic/browser/tabbrowser/connecting.png               (tabbrowser/connecting.png)
         skin/classic/browser/tabbrowser/loading.png                  (tabbrowser/loading.png)
@@ -138,102 +138,175 @@ browser.jar:
         skin/classic/browser/tabbrowser/tab-overflow-border.png      (tabbrowser/tab-overflow-border.png)
         skin/classic/browser/tabbrowser/tabDragIndicator.png         (tabbrowser/tabDragIndicator.png)
 #ifdef MOZ_DEVTOOLS
-*       skin/classic/browser/devtools/common.css                    (devtools/common.css)
-        skin/classic/browser/devtools/dark-theme.css                (devtools/dark-theme.css)
-        skin/classic/browser/devtools/light-theme.css               (devtools/light-theme.css)
-        skin/classic/browser/devtools/widgets.css                   (devtools/widgets.css)
-        skin/classic/browser/devtools/commandline-icon.png          (devtools/commandline-icon.png)
-        skin/classic/browser/devtools/alerticon-warning.png         (devtools/alerticon-warning.png)
-        skin/classic/browser/devtools/ruleview.css                  (devtools/ruleview.css)
+*       skin/classic/browser/devtools/common.css                    (../shared/devtools/common.css)
+*       skin/classic/browser/devtools/dark-theme.css                (../shared/devtools/dark-theme.css)
+*       skin/classic/browser/devtools/light-theme.css               (../shared/devtools/light-theme.css)
+        skin/classic/browser/devtools/filters.svg                   (../shared/devtools/filters.svg)
+        skin/classic/browser/devtools/controls.png                  (../shared/devtools/images/controls.png)
+        skin/classic/browser/devtools/controls@2x.png               (../shared/devtools/images/controls@2x.png)
+        skin/classic/browser/devtools/performance-icons.svg         (../shared/devtools/images/performance-icons.svg)
+        skin/classic/browser/devtools/newtab.png                    (../shared/devtools/images/newtab.png)
+        skin/classic/browser/devtools/newtab@2x.png                 (../shared/devtools/images/newtab@2x.png)
+        skin/classic/browser/devtools/newtab-inverted.png           (../shared/devtools/images/newtab-inverted.png)
+        skin/classic/browser/devtools/newtab-inverted@2x.png        (../shared/devtools/images/newtab-inverted@2x.png)
+*       skin/classic/browser/devtools/widgets.css                   (devtools/widgets.css)
+        skin/classic/browser/devtools/power.svg                     (../shared/devtools/images/power.svg)
+        skin/classic/browser/devtools/filetype-dir-close.svg        (../shared/devtools/images/filetypes/dir-close.svg)
+        skin/classic/browser/devtools/filetype-dir-open.svg         (../shared/devtools/images/filetypes/dir-open.svg)
+        skin/classic/browser/devtools/filetype-globe.svg            (../shared/devtools/images/filetypes/globe.svg)
+        skin/classic/browser/devtools/filetype-store.svg            (../shared/devtools/images/filetypes/store.svg)
+        skin/classic/browser/devtools/commandline-icon.png          (../shared/devtools/images/commandline-icon.png)
+        skin/classic/browser/devtools/commandline-icon@2x.png          (../shared/devtools/images/commandline-icon@2x.png)
+        skin/classic/browser/devtools/alerticon-warning.png         (../shared/devtools/images/alerticon-warning.png)
+        skin/classic/browser/devtools/alerticon-warning@2x.png      (../shared/devtools/images/alerticon-warning@2x.png)
+*       skin/classic/browser/devtools/ruleview.css                  (../shared/devtools/ruleview.css)
         skin/classic/browser/devtools/commandline.css               (devtools/commandline.css)
-        skin/classic/browser/devtools/command-paintflashing.png     (devtools/command-paintflashing.png)
-        skin/classic/browser/devtools/command-responsivemode.png    (devtools/command-responsivemode.png)
-        skin/classic/browser/devtools/command-scratchpad.png        (devtools/command-scratchpad.png)
-        skin/classic/browser/devtools/command-tilt.png              (devtools/command-tilt.png)
-        skin/classic/browser/devtools/checkbox-dark.png             (devtools/checkbox-dark.png)
-        skin/classic/browser/devtools/checkbox-light.png            (devtools/checkbox-light.png)
-        skin/classic/browser/devtools/markup-view.css               (devtools/markup-view.css)
-        skin/classic/browser/devtools/orion.css                     (devtools/orion.css)
-        skin/classic/browser/devtools/orion-container.css           (devtools/orion-container.css)
-        skin/classic/browser/devtools/orion-task.png                (devtools/orion-task.png)
-        skin/classic/browser/devtools/orion-breakpoint.png          (devtools/orion-breakpoint.png)
-        skin/classic/browser/devtools/orion-debug-location.png      (devtools/orion-debug-location.png)
-*       skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
-        skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
-        skin/classic/browser/devtools/webconsole.png                  (devtools/webconsole.png)
-        skin/classic/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png     (devtools/breadcrumbs/ltr-end-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end-selected.png             (devtools/breadcrumbs/ltr-end-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-end.png                      (devtools/breadcrumbs/ltr-end.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle-pressed.png           (devtools/breadcrumbs/ltr-middle-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected-pressed.png  (devtools/breadcrumbs/ltr-middle-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle-selected.png          (devtools/breadcrumbs/ltr-middle-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-middle.png                   (devtools/breadcrumbs/ltr-middle.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start-pressed.png            (devtools/breadcrumbs/ltr-start-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start-selected-pressed.png   (devtools/breadcrumbs/ltr-start-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start.png                    (devtools/breadcrumbs/ltr-start.png)
-        skin/classic/browser/devtools/breadcrumbs/ltr-start-selected.png           (devtools/breadcrumbs/ltr-start-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end-pressed.png              (devtools/breadcrumbs/rtl-end-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end-selected-pressed.png     (devtools/breadcrumbs/rtl-end-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end-selected.png             (devtools/breadcrumbs/rtl-end-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-end.png                      (devtools/breadcrumbs/rtl-end.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle-pressed.png           (devtools/breadcrumbs/rtl-middle-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected-pressed.png  (devtools/breadcrumbs/rtl-middle-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle-selected.png          (devtools/breadcrumbs/rtl-middle-selected.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
-        skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-        skin/classic/browser/devtools/splitview.css                 (devtools/splitview.css)
-        skin/classic/browser/devtools/styleeditor.css               (devtools/styleeditor.css)
-        skin/classic/browser/devtools/debugger.css                  (devtools/debugger.css)
+        skin/classic/browser/devtools/command-paintflashing.png     (../shared/devtools/images/command-paintflashing.png)
+        skin/classic/browser/devtools/command-paintflashing@2x.png  (../shared/devtools/images/command-paintflashing@2x.png)
+        skin/classic/browser/devtools/command-screenshot.png        (../shared/devtools/images/command-screenshot.png)
+        skin/classic/browser/devtools/command-screenshot@2x.png     (../shared/devtools/images/command-screenshot@2x.png)
+        skin/classic/browser/devtools/command-responsivemode.png    (../shared/devtools/images/command-responsivemode.png)
+        skin/classic/browser/devtools/command-responsivemode@2x.png (../shared/devtools/images/command-responsivemode@2x.png)
+        skin/classic/browser/devtools/command-scratchpad.png        (../shared/devtools/images/command-scratchpad.png)
+        skin/classic/browser/devtools/command-scratchpad@2x.png     (../shared/devtools/images/command-scratchpad@2x.png)
+        skin/classic/browser/devtools/command-tilt.png              (../shared/devtools/images/command-tilt.png)
+        skin/classic/browser/devtools/command-tilt@2x.png           (../shared/devtools/images/command-tilt@2x.png)
+        skin/classic/browser/devtools/command-pick.png              (../shared/devtools/images/command-pick.png)
+        skin/classic/browser/devtools/command-pick@2x.png           (../shared/devtools/images/command-pick@2x.png)
+        skin/classic/browser/devtools/command-frames.png            (../shared/devtools/images/command-frames.png)
+        skin/classic/browser/devtools/command-frames@2x.png         (../shared/devtools/images/command-frames@2x.png)
+        skin/classic/browser/devtools/command-console.png           (../shared/devtools/images/command-console.png)
+        skin/classic/browser/devtools/command-console@2x.png        (../shared/devtools/images/command-console@2x.png)
+        skin/classic/browser/devtools/command-eyedropper.png        (../shared/devtools/images/command-eyedropper.png)
+        skin/classic/browser/devtools/command-eyedropper@2x.png     (../shared/devtools/images/command-eyedropper@2x.png)
+        skin/classic/browser/devtools/markup-view.css               (../shared/devtools/markup-view.css)
+        skin/classic/browser/devtools/editor-error.png              (../shared/devtools/images/editor-error.png)
+        skin/classic/browser/devtools/editor-breakpoint.png         (../shared/devtools/images/editor-breakpoint.png)
+        skin/classic/browser/devtools/editor-breakpoint@2x.png         (../shared/devtools/images/editor-breakpoint@2x.png)
+        skin/classic/browser/devtools/editor-debug-location.png     (../shared/devtools/images/editor-debug-location.png)
+        skin/classic/browser/devtools/editor-debug-location@2x.png     (../shared/devtools/images/editor-debug-location@2x.png)
+*       skin/classic/browser/devtools/webconsole.css                (devtools/webconsole.css)
+        skin/classic/browser/devtools/webconsole_networkpanel.css   (devtools/webconsole_networkpanel.css)
+        skin/classic/browser/devtools/webconsole.png                (../shared/devtools/images/webconsole.png)
+        skin/classic/browser/devtools/webconsole@2x.png             (../shared/devtools/images/webconsole@2x.png)
+        skin/classic/browser/devtools/breadcrumbs-divider@2x.png    (../shared/devtools/images/breadcrumbs-divider@2x.png)
+        skin/classic/browser/devtools/breadcrumbs-scrollbutton.png  (../shared/devtools/images/breadcrumbs-scrollbutton.png)
+        skin/classic/browser/devtools/breadcrumbs-scrollbutton@2x.png (../shared/devtools/images/breadcrumbs-scrollbutton@2x.png)
+        skin/classic/browser/devtools/animationinspector.css        (../shared/devtools/animationinspector.css)
+        skin/classic/browser/devtools/eyedropper.css                (../shared/devtools/eyedropper.css)
+*       skin/classic/browser/devtools/canvasdebugger.css            (devtools/canvasdebugger.css)
+*       skin/classic/browser/devtools/debugger.css                  (devtools/debugger.css)
+*       skin/classic/browser/devtools/netmonitor.css                (devtools/netmonitor.css)
 *       skin/classic/browser/devtools/profiler.css                  (devtools/profiler.css)
-        skin/classic/browser/devtools/netmonitor.css                (devtools/netmonitor.css)
+*       skin/classic/browser/devtools/performance.css               (devtools/performance.css)
+*       skin/classic/browser/devtools/timeline.css                  (devtools/timeline.css)
+        skin/classic/browser/devtools/timeline-filter.svg           (../shared/devtools/images/timeline-filter.svg)
 *       skin/classic/browser/devtools/scratchpad.css                (devtools/scratchpad.css)
-        skin/classic/browser/devtools/magnifying-glass.png          (devtools/magnifying-glass.png)
-        skin/classic/browser/devtools/option-icon.png               (devtools/option-icon.png)
-        skin/classic/browser/devtools/itemToggle.png                (devtools/itemToggle.png)
-        skin/classic/browser/devtools/itemArrow-rtl.png             (devtools/itemArrow-rtl.png)
-        skin/classic/browser/devtools/itemArrow-ltr.png             (devtools/itemArrow-ltr.png)
-        skin/classic/browser/devtools/background-noise-toolbar.png  (devtools/background-noise-toolbar.png)
-        skin/classic/browser/devtools/inspect-button.png            (devtools/inspect-button.png)
-        skin/classic/browser/devtools/dropmarker.png                (devtools/dropmarker.png)
-        skin/classic/browser/devtools/layout-background-grid.png    (devtools/layout-background-grid.png)
-        skin/classic/browser/devtools/layoutview.css                (devtools/layoutview.css)
-        skin/classic/browser/devtools/debugger-collapse.png         (devtools/debugger-collapse.png)
-        skin/classic/browser/devtools/debugger-expand.png           (devtools/debugger-expand.png)
-        skin/classic/browser/devtools/debugger-pause.png            (devtools/debugger-pause.png)
-        skin/classic/browser/devtools/debugger-play.png             (devtools/debugger-play.png)
-        skin/classic/browser/devtools/debugger-step-in.png          (devtools/debugger-step-in.png)
-        skin/classic/browser/devtools/debugger-step-out.png         (devtools/debugger-step-out.png)
-        skin/classic/browser/devtools/debugger-step-over.png        (devtools/debugger-step-over.png)
-        skin/classic/browser/devtools/responsive-se-resizer.png     (devtools/responsive-se-resizer.png)
-        skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
-        skin/classic/browser/devtools/responsive-background.png     (devtools/responsive-background.png)
-        skin/classic/browser/devtools/toggle-tools.png              (devtools/toggle-tools.png)
-        skin/classic/browser/devtools/dock-bottom.png               (devtools/dock-bottom.png)
-        skin/classic/browser/devtools/dock-side.png                 (devtools/dock-side.png)
+*       skin/classic/browser/devtools/shadereditor.css              (devtools/shadereditor.css)
+        skin/classic/browser/devtools/storage.css                   (../shared/devtools/storage.css)
+*       skin/classic/browser/devtools/splitview.css                 (../shared/devtools/splitview.css)
+        skin/classic/browser/devtools/styleeditor.css               (../shared/devtools/styleeditor.css)
+*       skin/classic/browser/devtools/webaudioeditor.css            (devtools/webaudioeditor.css)
+        skin/classic/browser/devtools/magnifying-glass.png          (../shared/devtools/images/magnifying-glass.png)
+        skin/classic/browser/devtools/magnifying-glass@2x.png       (../shared/devtools/images/magnifying-glass@2x.png)
+        skin/classic/browser/devtools/magnifying-glass-light.png    (../shared/devtools/images/magnifying-glass-light.png)
+        skin/classic/browser/devtools/magnifying-glass-light@2x.png  (../shared/devtools/images/magnifying-glass-light@2x.png)
+        skin/classic/browser/devtools/itemToggle.png                (../shared/devtools/images/itemToggle.png)
+        skin/classic/browser/devtools/itemToggle@2x.png             (../shared/devtools/images/itemToggle@2x.png)
+        skin/classic/browser/devtools/itemArrow-dark-rtl.svg        (../shared/devtools/images/itemArrow-dark-rtl.svg)
+        skin/classic/browser/devtools/itemArrow-dark-ltr.svg        (../shared/devtools/images/itemArrow-dark-ltr.svg)
+        skin/classic/browser/devtools/itemArrow-rtl.svg             (../shared/devtools/images/itemArrow-rtl.svg)
+        skin/classic/browser/devtools/itemArrow-ltr.svg             (../shared/devtools/images/itemArrow-ltr.svg)
+        skin/classic/browser/devtools/noise.png                     (../shared/devtools/images/noise.png)
+        skin/classic/browser/devtools/dropmarker.svg                (../shared/devtools/images/dropmarker.svg)
+        skin/classic/browser/devtools/layoutview.css                (../shared/devtools/layoutview.css)
+        skin/classic/browser/devtools/debugger-collapse.png         (../shared/devtools/images/debugger-collapse.png)
+        skin/classic/browser/devtools/debugger-collapse@2x.png      (../shared/devtools/images/debugger-collapse@2x.png)
+        skin/classic/browser/devtools/debugger-expand.png           (../shared/devtools/images/debugger-expand.png)
+        skin/classic/browser/devtools/debugger-expand@2x.png        (../shared/devtools/images/debugger-expand@2x.png)
+        skin/classic/browser/devtools/debugger-pause.png            (../shared/devtools/images/debugger-pause.png)
+        skin/classic/browser/devtools/debugger-pause@2x.png         (../shared/devtools/images/debugger-pause@2x.png)
+        skin/classic/browser/devtools/debugger-play.png             (../shared/devtools/images/debugger-play.png)
+        skin/classic/browser/devtools/debugger-play@2x.png          (../shared/devtools/images/debugger-play@2x.png)
+        skin/classic/browser/devtools/debugger-step-in.png          (../shared/devtools/images/debugger-step-in.png)
+        skin/classic/browser/devtools/debugger-step-in@2x.png       (../shared/devtools/images/debugger-step-in@2x.png)
+        skin/classic/browser/devtools/debugger-step-out.png         (../shared/devtools/images/debugger-step-out.png)
+        skin/classic/browser/devtools/debugger-step-out@2x.png      (../shared/devtools/images/debugger-step-out@2x.png)
+        skin/classic/browser/devtools/debugger-step-over.png        (../shared/devtools/images/debugger-step-over.png)
+        skin/classic/browser/devtools/debugger-step-over@2x.png     (../shared/devtools/images/debugger-step-over@2x.png)
+        skin/classic/browser/devtools/debugger-blackbox.png         (../shared/devtools/images/debugger-blackbox.png)
+        skin/classic/browser/devtools/debugger-blackbox@2x.png      (../shared/devtools/images/debugger-blackbox@2x.png)
+        skin/classic/browser/devtools/debugger-prettyprint.png      (../shared/devtools/images/debugger-prettyprint.png)
+        skin/classic/browser/devtools/debugger-prettyprint@2x.png   (../shared/devtools/images/debugger-prettyprint@2x.png)
+        skin/classic/browser/devtools/debugger-toggleBreakpoints.png  (../shared/devtools/images/debugger-toggleBreakpoints.png)
+        skin/classic/browser/devtools/debugger-toggleBreakpoints@2x.png  (../shared/devtools/images/debugger-toggleBreakpoints@2x.png)
+        skin/classic/browser/devtools/tracer-icon.png               (../shared/devtools/images/tracer-icon.png)
+        skin/classic/browser/devtools/tracer-icon@2x.png            (../shared/devtools/images/tracer-icon@2x.png)
+        skin/classic/browser/devtools/responsive-se-resizer.png     (../shared/devtools/images/responsivemode/responsive-se-resizer.png)
+        skin/classic/browser/devtools/responsive-se-resizer@2x.png       (../shared/devtools/images/responsivemode/responsive-se-resizer@2x.png)
+        skin/classic/browser/devtools/responsive-vertical-resizer.png    (../shared/devtools/images/responsivemode/responsive-vertical-resizer.png)
+        skin/classic/browser/devtools/responsive-vertical-resizer@2x.png (../shared/devtools/images/responsivemode/responsive-vertical-resizer@2x.png)
+        skin/classic/browser/devtools/responsive-horizontal-resizer.png  (../shared/devtools/images/responsivemode/responsive-horizontal-resizer.png)
+        skin/classic/browser/devtools/responsive-horizontal-resizer@2x.png  (../shared/devtools/images/responsivemode/responsive-horizontal-resizer@2x.png)
+        skin/classic/browser/devtools/responsiveui-rotate.png       (../shared/devtools/images/responsivemode/responsiveui-rotate.png)
+        skin/classic/browser/devtools/responsiveui-rotate@2x.png       (../shared/devtools/images/responsivemode/responsiveui-rotate@2x.png)
+        skin/classic/browser/devtools/responsiveui-touch.png        (../shared/devtools/images/responsivemode/responsiveui-touch.png)
+        skin/classic/browser/devtools/responsiveui-touch@2x.png        (../shared/devtools/images/responsivemode/responsiveui-touch@2x.png)
+        skin/classic/browser/devtools/responsiveui-screenshot.png   (../shared/devtools/images/responsivemode/responsiveui-screenshot.png)
+        skin/classic/browser/devtools/responsiveui-screenshot@2x.png   (../shared/devtools/images/responsivemode/responsiveui-screenshot@2x.png)
+        skin/classic/browser/devtools/toggle-tools.png              (../shared/devtools/images/toggle-tools.png)
+        skin/classic/browser/devtools/toggle-tools@2x.png              (../shared/devtools/images/toggle-tools@2x.png)
+        skin/classic/browser/devtools/dock-bottom@2x.png            (../shared/devtools/images/dock-bottom@2x.png)
+        skin/classic/browser/devtools/dock-side@2x.png              (../shared/devtools/images/dock-side@2x.png)
         skin/classic/browser/devtools/floating-scrollbars.css       (devtools/floating-scrollbars.css)
         skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
-        skin/classic/browser/devtools/inspector.css                 (devtools/inspector.css)
-        skin/classic/browser/devtools/toolbox.css                   (devtools/toolbox.css)
-        skin/classic/browser/devtools/tool-options.png              (devtools/tool-options.png)
-        skin/classic/browser/devtools/tool-webconsole.png           (devtools/tool-webconsole.png)
-        skin/classic/browser/devtools/tool-debugger.png             (devtools/tool-debugger.png)
-        skin/classic/browser/devtools/tool-debugger-paused.png      (devtools/tool-debugger-paused.png)
-        skin/classic/browser/devtools/tool-inspector.png            (devtools/tool-inspector.png)
-        skin/classic/browser/devtools/tool-styleeditor.png          (devtools/tool-styleeditor.png)
-        skin/classic/browser/devtools/tool-profiler.png             (devtools/tool-profiler.png)
-        skin/classic/browser/devtools/tool-network.png              (devtools/tool-network.png)
-        skin/classic/browser/devtools/close.png                     (devtools/close.png)
-        skin/classic/browser/devtools/vview-delete.png              (devtools/vview-delete.png)
-        skin/classic/browser/devtools/vview-edit.png                (devtools/vview-edit.png)
-        skin/classic/browser/devtools/undock.png                    (devtools/undock.png)
-        skin/classic/browser/devtools/font-inspector.css            (devtools/font-inspector.css)
-        skin/classic/browser/devtools/computedview.css              (devtools/computedview.css)
-        skin/classic/browser/devtools/arrow-e.png                   (devtools/arrow-e.png)
+*       skin/classic/browser/devtools/inspector.css                 (../shared/devtools/inspector.css)
+        skin/classic/browser/devtools/profiler-stopwatch.svg        (../shared/devtools/images/profiler-stopwatch.svg)
+        skin/classic/browser/devtools/profiler-stopwatch-checked.svg  (../shared/devtools/images/profiler-stopwatch-checked.svg)
+        skin/classic/browser/devtools/tool-options.svg              (../shared/devtools/images/tool-options.svg)
+        skin/classic/browser/devtools/tool-webconsole.svg           (../shared/devtools/images/tool-webconsole.svg)
+        skin/classic/browser/devtools/tool-debugger.svg             (../shared/devtools/images/tool-debugger.svg)
+        skin/classic/browser/devtools/tool-debugger-paused.svg      (../shared/devtools/images/tool-debugger-paused.svg)
+        skin/classic/browser/devtools/tool-inspector.svg            (../shared/devtools/images/tool-inspector.svg)
+        skin/classic/browser/devtools/tool-styleeditor.svg          (../shared/devtools/images/tool-styleeditor.svg)
+        skin/classic/browser/devtools/tool-storage.svg              (../shared/devtools/images/tool-storage.svg)
+        skin/classic/browser/devtools/tool-profiler.svg             (../shared/devtools/images/tool-profiler.svg)
+        skin/classic/browser/devtools/tool-network.svg              (../shared/devtools/images/tool-network.svg)
+        skin/classic/browser/devtools/tool-scratchpad.svg           (../shared/devtools/images/tool-scratchpad.svg)
+        skin/classic/browser/devtools/tool-webaudio.svg             (../shared/devtools/images/tool-webaudio.svg)
+        skin/classic/browser/devtools/close.png                     (../shared/devtools/images/close.png)
+        skin/classic/browser/devtools/close@2x.png                  (../shared/devtools/images/close@2x.png)
+        skin/classic/browser/devtools/vview-delete.png              (../shared/devtools/images/vview-delete.png)
+        skin/classic/browser/devtools/vview-delete@2x.png           (../shared/devtools/images/vview-delete@2x.png)
+        skin/classic/browser/devtools/vview-edit.png                (../shared/devtools/images/vview-edit.png)
+        skin/classic/browser/devtools/vview-edit@2x.png             (../shared/devtools/images/vview-edit@2x.png)
+        skin/classic/browser/devtools/vview-lock.png                (../shared/devtools/images/vview-lock.png)
+        skin/classic/browser/devtools/vview-lock@2x.png             (../shared/devtools/images/vview-lock@2x.png)
+        skin/classic/browser/devtools/vview-open-inspector.png      (../shared/devtools/images/vview-open-inspector.png)
+        skin/classic/browser/devtools/vview-open-inspector@2x.png   (../shared/devtools/images/vview-open-inspector@2x.png)
+        skin/classic/browser/devtools/cubic-bezier-swatch.png       (../shared/devtools/images/cubic-bezier-swatch.png)
+        skin/classic/browser/devtools/cubic-bezier-swatch@2x.png    (../shared/devtools/images/cubic-bezier-swatch@2x.png)
+        skin/classic/browser/devtools/undock@2x.png                 (../shared/devtools/images/undock@2x.png)
+        skin/classic/browser/devtools/font-inspector.css            (../shared/devtools/font-inspector.css)
+        skin/classic/browser/devtools/computedview.css              (../shared/devtools/computedview.css)
+        skin/classic/browser/devtools/arrow-e.png                   (../shared/devtools/images/arrow-e.png)
+        skin/classic/browser/devtools/arrow-e@2x.png                (../shared/devtools/images/arrow-e@2x.png)
+        skin/classic/browser/devtools/responsiveui-home.png         (../shared/devtools/responsiveui-home.png)
+        skin/classic/browser/devtools/projecteditor/projecteditor.css           (../shared/devtools/projecteditor/projecteditor.css)
+        skin/classic/browser/devtools/app-manager/connection-footer.css     (../shared/devtools/app-manager/connection-footer.css)
+        skin/classic/browser/devtools/app-manager/index.css                 (../shared/devtools/app-manager/index.css)
+        skin/classic/browser/devtools/app-manager/device.css                (../shared/devtools/app-manager/device.css)
+        skin/classic/browser/devtools/app-manager/projects.css              (../shared/devtools/app-manager/projects.css)
+        skin/classic/browser/devtools/app-manager/help.css                  (../shared/devtools/app-manager/help.css)
+        skin/classic/browser/devtools/app-manager/warning.svg               (../shared/devtools/app-manager/images/warning.svg)
+        skin/classic/browser/devtools/app-manager/error.svg                 (../shared/devtools/app-manager/images/error.svg)
+        skin/classic/browser/devtools/app-manager/plus.svg                  (../shared/devtools/app-manager/images/plus.svg)
+        skin/classic/browser/devtools/app-manager/remove.svg                (../shared/devtools/app-manager/images/remove.svg)
+        skin/classic/browser/devtools/app-manager/add.svg                   (../shared/devtools/app-manager/images/add.svg)
+        skin/classic/browser/devtools/app-manager/index-icons.svg           (../shared/devtools/app-manager/images/index-icons.svg)
+        skin/classic/browser/devtools/app-manager/rocket.svg                (../shared/devtools/app-manager/images/rocket.svg)
+        skin/classic/browser/devtools/app-manager/noise.png                 (../shared/devtools/app-manager/images/noise.png)
+        skin/classic/browser/devtools/app-manager/default-app-icon.png      (../shared/devtools/app-manager/images/default-app-icon.png)
 #endif
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
@@ -249,253 +322,13 @@ browser.jar:
         skin/classic/browser/syncQuota.css
         skin/classic/browser/syncProgress.css
 #endif
-
-#ifdef XP_WIN
-browser.jar:
-% skin browser classic/1.0 %skin/classic/aero/browser/ os=WINNT osversion>=6
-        skin/classic/aero/browser/sanitizeDialog.css                       (sanitizeDialog.css)
-*       skin/classic/aero/browser/aboutPrivateBrowsing.css           (aboutPrivateBrowsing.css)
-*       skin/classic/aero/browser/aboutSessionRestore.css            (aboutSessionRestore.css)
-        skin/classic/aero/browser/aboutSessionRestore-window-icon.png (aboutSessionRestore-window-icon-aero.png)
-        skin/classic/aero/browser/aboutCertError.css
-        skin/classic/aero/browser/aboutCertError_sectionCollapsed.png
-        skin/classic/aero/browser/aboutCertError_sectionCollapsed-rtl.png
-        skin/classic/aero/browser/aboutCertError_sectionExpanded.png
-#ifdef MOZ_SERVICES_SYNC
-        skin/classic/aero/browser/aboutSyncTabs.css
-#endif
-        skin/classic/aero/browser/actionicon-tab.png
-        skin/classic/aero/browser/appmenu-dropmarker.png
-        skin/classic/aero/browser/appmenu-icons.png
-*       skin/classic/aero/browser/browser.css                        (browser-aero.css)
-        skin/classic/aero/browser/caption-buttons.svg
-        skin/classic/aero/browser/click-to-play-warning-stripes.png
-*       skin/classic/aero/browser/engineManager.css
-        skin/classic/aero/browser/Geolocation-16.png
-        skin/classic/aero/browser/Geolocation-64.png
-        skin/classic/aero/browser/Info.png                           (Info-aero.png)
-        skin/classic/aero/browser/identity.png                       (identity-aero.png)
-        skin/classic/aero/browser/identity-icons-generic.png
-        skin/classic/aero/browser/identity-icons-https.png
-        skin/classic/aero/browser/identity-icons-https-ev.png
-        skin/classic/aero/browser/identity-icons-https-mixed-active.png
-        skin/classic/aero/browser/keyhole-forward-mask.svg
-        skin/classic/aero/browser/KUI-background.png
-        skin/classic/aero/browser/KUI-close.png
-        skin/classic/aero/browser/livemark-folder.png                (livemark-folder-aero.png)
-        skin/classic/aero/browser/menu-back.png                      (menu-back-aero.png)
-        skin/classic/aero/browser/menu-forward.png                   (menu-forward-aero.png)
-        skin/classic/aero/browser/mixed-content-blocked-16.png
-        skin/classic/aero/browser/mixed-content-blocked-64.png
-        skin/classic/aero/browser/monitor.png
-        skin/classic/aero/browser/monitor_16-10.png
-        skin/classic/aero/browser/notification-16.png
-        skin/classic/aero/browser/notification-64.png
-        skin/classic/aero/browser/pageInfo.css
-        skin/classic/aero/browser/pageInfo.png                       (pageInfo-aero.png)
-        skin/classic/aero/browser/page-livemarks.png                 (feeds/feedIcon16-aero.png)
-        skin/classic/aero/browser/pointerLock-16.png
-        skin/classic/aero/browser/pointerLock-64.png
-        skin/classic/aero/browser/Privacy-16.png                     (Privacy-16-aero.png)
-        skin/classic/aero/browser/Privacy-32.png                     (Privacy-32-aero.png)
-        skin/classic/aero/browser/Privacy-48.png                     (Privacy-48-aero.png)
-        skin/classic/aero/browser/privatebrowsing-light.png
-        skin/classic/aero/browser/privatebrowsing-dark.png
-        skin/classic/aero/browser/reload-stop-go.png
-        skin/classic/aero/browser/sanitize.png
-        skin/classic/aero/browser/searchbar.css
-        skin/classic/aero/browser/searchbar-dropdown-arrow.png       (searchbar-dropdown-arrow-aero.png)
-        skin/classic/aero/browser/Secure24.png                       (Secure24-aero.png)
-        skin/classic/aero/browser/setDesktopBackground.css
-        skin/classic/aero/browser/slowStartup-16.png
-        skin/classic/aero/browser/Toolbar.png
-        skin/classic/aero/browser/Toolbar-glass.png
-        skin/classic/aero/browser/Toolbar-inverted.png
-        skin/classic/aero/browser/toolbarbutton-dropdown-arrow.png
-        skin/classic/aero/browser/toolbarbutton-dropdown-arrow-inverted.png
-        skin/classic/aero/browser/urlbar-arrow.png
-        skin/classic/aero/browser/urlbar-popup-blocked.png
-        skin/classic/aero/browser/urlbar-history-dropmarker.png
-        skin/classic/aero/browser/webapps-16.png
-        skin/classic/aero/browser/webapps-64.png
-        skin/classic/aero/browser/notification-pluginNormal.png     (../shared/plugins/notification-pluginNormal.png)
-        skin/classic/aero/browser/notification-pluginAlert.png      (../shared/plugins/notification-pluginAlert.png)
-        skin/classic/aero/browser/notification-pluginBlocked.png    (../shared/plugins/notification-pluginBlocked.png)
-        skin/classic/aero/browser/webRTC-shareDevice-16.png
-        skin/classic/aero/browser/webRTC-shareDevice-64.png
-        skin/classic/aero/browser/webRTC-sharingDevice-16.png
-        skin/classic/aero/browser/downloads/buttons.png              (downloads/buttons-aero.png)
-        skin/classic/aero/browser/downloads/download-glow.png        (downloads/download-glow.png)
-        skin/classic/aero/browser/downloads/download-notification-finish.png (downloads/download-notification-finish.png)
-        skin/classic/aero/browser/downloads/download-notification-start.png (downloads/download-notification-start.png)
-        skin/classic/aero/browser/downloads/download-summary.png     (downloads/download-summary.png)
-*       skin/classic/aero/browser/downloads/downloads.css            (downloads/downloads-aero.css)
-*       skin/classic/aero/browser/downloads/allDownloadsViewOverlay.css (downloads/allDownloadsViewOverlay-aero.css)
-        skin/classic/aero/browser/downloads/contentAreaDownloadsView.css (downloads/contentAreaDownloadsView.css)
-        skin/classic/aero/browser/feeds/feedIcon.png                 (feeds/feedIcon-aero.png)
-        skin/classic/aero/browser/feeds/feedIcon16.png               (feeds/feedIcon16-aero.png)
-        skin/classic/aero/browser/feeds/feed-icons-16.png            (feeds/feed-icons-16-aero.png)
-        skin/classic/aero/browser/feeds/audioFeedIcon.png            (feeds/feedIcon-aero.png)
-        skin/classic/aero/browser/feeds/audioFeedIcon16.png          (feeds/feedIcon16-aero.png)
-        skin/classic/aero/browser/feeds/videoFeedIcon.png            (feeds/feedIcon-aero.png)
-        skin/classic/aero/browser/feeds/videoFeedIcon16.png          (feeds/feedIcon16-aero.png)
-        skin/classic/aero/browser/feeds/subscribe.css                (feeds/subscribe.css)
-        skin/classic/aero/browser/feeds/subscribe-ui.css             (feeds/subscribe-ui.css)
-        skin/classic/aero/browser/newtab/newTab.css                  (newtab/newTab.css)
-        skin/classic/aero/browser/newtab/controls.png                (newtab/controls.png)
-        skin/classic/aero/browser/newtab/noise.png                   (newtab/noise.png)
-*       skin/classic/aero/browser/places/places.css                  (places/places-aero.css)
-*       skin/classic/aero/browser/places/organizer.css               (places/organizer-aero.css)
-        skin/classic/aero/browser/places/bookmark.png                (places/bookmark.png)
-        skin/classic/aero/browser/places/editBookmark.png            (places/editBookmark.png)
-        skin/classic/aero/browser/places/query.png                   (places/query-aero.png)
-        skin/classic/aero/browser/places/bookmarksMenu.png           (places/bookmarksMenu-aero.png)
-        skin/classic/aero/browser/places/bookmarksToolbar.png        (places/bookmarksToolbar-aero.png)
-        skin/classic/aero/browser/places/calendar.png                (places/calendar-aero.png)
-        skin/classic/aero/browser/places/toolbarDropMarker.png       (places/toolbarDropMarker-aero.png)
-        skin/classic/aero/browser/places/editBookmarkOverlay.css     (places/editBookmarkOverlay.css)
-        skin/classic/aero/browser/places/libraryToolbar.png          (places/libraryToolbar-aero.png)
-        skin/classic/aero/browser/places/starred48.png               (places/starred48-aero.png)
-        skin/classic/aero/browser/places/unstarred48.png             (places/unstarred48.png)
-        skin/classic/aero/browser/places/tag.png                     (places/tag-aero.png)
-        skin/classic/aero/browser/places/history.png                 (places/history.png)
-        skin/classic/aero/browser/places/allBookmarks.png            (places/allBookmarks-aero.png)
-        skin/classic/aero/browser/places/unsortedBookmarks.png       (places/unsortedBookmarks-aero.png)
-        skin/classic/aero/browser/places/downloads.png               (places/downloads.png)
-        skin/classic/aero/browser/places/livemark-item.png           (places/livemark-item.png)
-        skin/classic/aero/browser/preferences/alwaysAsk.png          (preferences/alwaysAsk-aero.png)
-        skin/classic/aero/browser/preferences/application.png        (preferences/application-aero.png)
-        skin/classic/aero/browser/preferences/mail.png               (preferences/mail-aero.png)
-        skin/classic/aero/browser/preferences/Options.png            (preferences/Options-aero.png)
-#ifdef MOZ_SERVICES_SYNC
-        skin/classic/aero/browser/preferences/Options-sync.png       (preferences/Options-sync.png)
-#endif
-        skin/classic/aero/browser/preferences/saveFile.png           (preferences/saveFile-aero.png)
-*       skin/classic/aero/browser/preferences/preferences.css        (preferences/preferences.css)
-        skin/classic/aero/browser/preferences/applications.css       (preferences/applications.css)
-        skin/classic/aero/browser/preferences/aboutPermissions.css   (preferences/aboutPermissions.css)
-        skin/classic/aero/browser/tabbrowser/alltabs.png             (tabbrowser/alltabs.png)
-        skin/classic/aero/browser/tabbrowser/alltabs-inverted.png    (tabbrowser/alltabs-inverted.png)        
-        skin/classic/aero/browser/tabbrowser/newtab.png              (tabbrowser/newtab.png)
-        skin/classic/aero/browser/tabbrowser/newtab-glass.png        (tabbrowser/newtab-glass.png)
-        skin/classic/aero/browser/tabbrowser/newtab-inverted.png     (tabbrowser/newtab-inverted.png)
-        skin/classic/aero/browser/tabbrowser/connecting.png          (tabbrowser/connecting.png)
-        skin/classic/aero/browser/tabbrowser/loading.png             (tabbrowser/loading.png)
-        skin/classic/aero/browser/tabbrowser/tab-arrow-left.png      (tabbrowser/tab-arrow-left.png)
-        skin/classic/aero/browser/tabbrowser/tab-arrow-left-glass.png    (tabbrowser/tab-arrow-left-glass.png)
-        skin/classic/aero/browser/tabbrowser/tab-arrow-left-inverted.png (tabbrowser/tab-arrow-left-inverted.png)
-        skin/classic/aero/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png)
-        skin/classic/aero/browser/tabbrowser/tabDragIndicator.png    (tabbrowser/tabDragIndicator.png)
 #ifdef MOZ_DEVTOOLS
-*       skin/classic/aero/browser/devtools/common.css                (devtools/common.css)
-        skin/classic/aero/browser/devtools/dark-theme.css            (devtools/dark-theme.css)
-        skin/classic/aero/browser/devtools/light-theme.css           (devtools/light-theme.css)
-        skin/classic/aero/browser/devtools/widgets.css               (devtools/widgets.css)
-        skin/classic/aero/browser/devtools/commandline-icon.png      (devtools/commandline-icon.png)
-        skin/classic/aero/browser/devtools/command-paintflashing.png  (devtools/command-paintflashing.png)
-        skin/classic/aero/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
-        skin/classic/aero/browser/devtools/command-scratchpad.png    (devtools/command-scratchpad.png)
-        skin/classic/aero/browser/devtools/command-tilt.png          (devtools/command-tilt.png)
-        skin/classic/aero/browser/devtools/checkbox-dark.png         (devtools/checkbox-dark.png)
-        skin/classic/aero/browser/devtools/checkbox-light.png        (devtools/checkbox-light.png)
-        skin/classic/aero/browser/devtools/alerticon-warning.png     (devtools/alerticon-warning.png)
-        skin/classic/aero/browser/devtools/ruleview.css              (devtools/ruleview.css)
-        skin/classic/aero/browser/devtools/commandline.css           (devtools/commandline.css)
-        skin/classic/aero/browser/devtools/markup-view.css           (devtools/markup-view.css)
-        skin/classic/aero/browser/devtools/orion.css                 (devtools/orion.css)
-        skin/classic/aero/browser/devtools/orion-container.css       (devtools/orion-container.css)
-        skin/classic/aero/browser/devtools/orion-task.png            (devtools/orion-task.png)
-        skin/classic/aero/browser/devtools/orion-breakpoint.png      (devtools/orion-breakpoint.png)
-        skin/classic/aero/browser/devtools/orion-debug-location.png  (devtools/orion-debug-location.png)
-*       skin/classic/aero/browser/devtools/webconsole.css                  (devtools/webconsole.css)
-        skin/classic/aero/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
-        skin/classic/aero/browser/devtools/webconsole.png                  (devtools/webconsole.png)
-        skin/classic/aero/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png     (devtools/breadcrumbs/ltr-end-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-end-selected.png             (devtools/breadcrumbs/ltr-end-selected.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-end.png                      (devtools/breadcrumbs/ltr-end.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-middle-pressed.png           (devtools/breadcrumbs/ltr-middle-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-middle-selected-pressed.png  (devtools/breadcrumbs/ltr-middle-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-middle-selected.png          (devtools/breadcrumbs/ltr-middle-selected.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-middle.png                   (devtools/breadcrumbs/ltr-middle.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-start-pressed.png            (devtools/breadcrumbs/ltr-start-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-start-selected-pressed.png   (devtools/breadcrumbs/ltr-start-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-start.png                    (devtools/breadcrumbs/ltr-start.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/ltr-start-selected.png           (devtools/breadcrumbs/ltr-start-selected.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-end-pressed.png              (devtools/breadcrumbs/rtl-end-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-end-selected-pressed.png     (devtools/breadcrumbs/rtl-end-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-end-selected.png             (devtools/breadcrumbs/rtl-end-selected.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-end.png                      (devtools/breadcrumbs/rtl-end.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-middle-pressed.png           (devtools/breadcrumbs/rtl-middle-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-middle-selected-pressed.png  (devtools/breadcrumbs/rtl-middle-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-middle-selected.png          (devtools/breadcrumbs/rtl-middle-selected.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
-        skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-        skin/classic/aero/browser/devtools/splitview.css             (devtools/splitview.css)
-        skin/classic/aero/browser/devtools/styleeditor.css           (devtools/styleeditor.css)
-        skin/classic/aero/browser/devtools/debugger.css              (devtools/debugger.css)
-*       skin/classic/aero/browser/devtools/profiler.css              (devtools/profiler.css)
-        skin/classic/aero/browser/devtools/netmonitor.css            (devtools/netmonitor.css)
-*       skin/classic/aero/browser/devtools/scratchpad.css            (devtools/scratchpad.css)
-        skin/classic/aero/browser/devtools/magnifying-glass.png      (devtools/magnifying-glass.png)
-        skin/classic/aero/browser/devtools/option-icon.png           (devtools/option-icon.png)
-        skin/classic/aero/browser/devtools/itemToggle.png            (devtools/itemToggle.png)
-        skin/classic/aero/browser/devtools/itemArrow-rtl.png         (devtools/itemArrow-rtl.png)
-        skin/classic/aero/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
-        skin/classic/aero/browser/devtools/itemArrow-ltr.png         (devtools/itemArrow-ltr.png)
-        skin/classic/aero/browser/devtools/inspect-button.png        (devtools/inspect-button.png)
-        skin/classic/aero/browser/devtools/dropmarker.png            (devtools/dropmarker.png)
-        skin/classic/aero/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
-        skin/classic/aero/browser/devtools/layoutview.css            (devtools/layoutview.css)
-        skin/classic/aero/browser/devtools/debugger-collapse.png     (devtools/debugger-collapse.png)
-        skin/classic/aero/browser/devtools/debugger-expand.png       (devtools/debugger-expand.png)
-        skin/classic/aero/browser/devtools/debugger-pause.png        (devtools/debugger-pause.png)
-        skin/classic/aero/browser/devtools/debugger-play.png         (devtools/debugger-play.png)
-        skin/classic/aero/browser/devtools/debugger-step-in.png      (devtools/debugger-step-in.png)
-        skin/classic/aero/browser/devtools/debugger-step-out.png     (devtools/debugger-step-out.png)
-        skin/classic/aero/browser/devtools/debugger-step-over.png    (devtools/debugger-step-over.png)
-        skin/classic/aero/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
-        skin/classic/aero/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
-        skin/classic/aero/browser/devtools/responsive-background.png (devtools/responsive-background.png)
-        skin/classic/aero/browser/devtools/toggle-tools.png          (devtools/toggle-tools.png)
-        skin/classic/aero/browser/devtools/dock-bottom.png           (devtools/dock-bottom.png)
-        skin/classic/aero/browser/devtools/dock-side.png             (devtools/dock-side.png)
-        skin/classic/aero/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
-        skin/classic/aero/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
-        skin/classic/aero/browser/devtools/inspector.css             (devtools/inspector.css)
-        skin/classic/aero/browser/devtools/toolbox.css               (devtools/toolbox.css)
-        skin/classic/aero/browser/devtools/tool-options.png          (devtools/tool-options.png)
-        skin/classic/aero/browser/devtools/tool-webconsole.png       (devtools/tool-webconsole.png)
-        skin/classic/aero/browser/devtools/tool-debugger.png         (devtools/tool-debugger.png)
-        skin/classic/aero/browser/devtools/tool-debugger-paused.png  (devtools/tool-debugger-paused.png)
-        skin/classic/aero/browser/devtools/tool-inspector.png        (devtools/tool-inspector.png)
-        skin/classic/aero/browser/devtools/tool-styleeditor.png      (devtools/tool-styleeditor.png)
-        skin/classic/aero/browser/devtools/tool-profiler.png         (devtools/tool-profiler.png)
-        skin/classic/aero/browser/devtools/tool-network.png          (devtools/tool-network.png)
-        skin/classic/aero/browser/devtools/close.png                 (devtools/close.png)
-        skin/classic/aero/browser/devtools/vview-delete.png          (devtools/vview-delete.png)
-        skin/classic/aero/browser/devtools/vview-edit.png            (devtools/vview-edit.png)
-        skin/classic/aero/browser/devtools/undock.png                (devtools/undock.png)
-        skin/classic/aero/browser/devtools/font-inspector.css        (devtools/font-inspector.css)
-        skin/classic/aero/browser/devtools/computedview.css          (devtools/computedview.css)
-        skin/classic/aero/browser/devtools/arrow-e.png               (devtools/arrow-e.png)
-#endif
-#ifdef MOZ_SERVICES_SYNC
-        skin/classic/aero/browser/sync-throbber.png
-        skin/classic/aero/browser/sync-16.png
-        skin/classic/aero/browser/sync-32.png
-        skin/classic/aero/browser/sync-128.png
-        skin/classic/aero/browser/sync-bg.png
-        skin/classic/aero/browser/sync-desktopIcon.png
-        skin/classic/aero/browser/sync-mobileIcon.png
-        skin/classic/aero/browser/sync-notification-24.png
-        skin/classic/aero/browser/syncSetup.css
-        skin/classic/aero/browser/syncCommon.css
-        skin/classic/aero/browser/syncQuota.css
-        skin/classic/aero/browser/syncProgress.css
-#endif
+        skin/classic/browser/devtools/tooltip/arrow-horizontal-dark.png   (../shared/devtools/tooltip/arrow-horizontal-dark.png)
+        skin/classic/browser/devtools/tooltip/arrow-horizontal-dark@2x.png   (../shared/devtools/tooltip/arrow-horizontal-dark@2x.png)
+        skin/classic/browser/devtools/tooltip/arrow-vertical-dark.png   (../shared/devtools/tooltip/arrow-vertical-dark.png)
+        skin/classic/browser/devtools/tooltip/arrow-vertical-dark@2x.png   (../shared/devtools/tooltip/arrow-vertical-dark@2x.png)
+        skin/classic/browser/devtools/tooltip/arrow-horizontal-light.png   (../shared/devtools/tooltip/arrow-horizontal-light.png)
+        skin/classic/browser/devtools/tooltip/arrow-horizontal-light@2x.png   (../shared/devtools/tooltip/arrow-horizontal-light@2x.png)
+        skin/classic/browser/devtools/tooltip/arrow-vertical-light.png   (../shared/devtools/tooltip/arrow-vertical-light.png)
+        skin/classic/browser/devtools/tooltip/arrow-vertical-light@2x.png   (../shared/devtools/tooltip/arrow-vertical-light@2x.png)
 #endif
diff --git a/browser/themes/windows/livemark-folder-aero.png b/browser/themes/windows/livemark-folder-aero.png
deleted file mode 100644
index 79e332945..000000000
--- a/browser/themes/windows/livemark-folder-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/livemark-folder.png b/browser/themes/windows/livemark-folder.png
index 38a4f1055..79e332945 100644
--- a/browser/themes/windows/livemark-folder.png
+++ b/browser/themes/windows/livemark-folder.png
diff --git a/browser/themes/windows/menu-back-aero.png b/browser/themes/windows/menu-back-aero.png
deleted file mode 100644
index 2f99ea7a5..000000000
--- a/browser/themes/windows/menu-back-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/menu-back.png b/browser/themes/windows/menu-back.png
index ecb8ccd1a..2f99ea7a5 100644
--- a/browser/themes/windows/menu-back.png
+++ b/browser/themes/windows/menu-back.png
diff --git a/browser/themes/windows/menu-forward-aero.png b/browser/themes/windows/menu-forward-aero.png
deleted file mode 100644
index 82cd87483..000000000
--- a/browser/themes/windows/menu-forward-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/menu-forward.png b/browser/themes/windows/menu-forward.png
index 20834927a..82cd87483 100644
--- a/browser/themes/windows/menu-forward.png
+++ b/browser/themes/windows/menu-forward.png
diff --git a/browser/themes/windows/moz.build b/browser/themes/windows/moz.build
index 4c7366cd5..6a7af20ad 100644
--- a/browser/themes/windows/moz.build
+++ b/browser/themes/windows/moz.build
@@ -6,3 +6,4 @@
 
 DIRS += ['communicator']
 
+JAR_MANIFESTS += ['jar.mn']
+\ No newline at end of file
diff --git a/browser/themes/windows/pageInfo-aero.png b/browser/themes/windows/pageInfo-aero.png
deleted file mode 100644
index fcc713b8f..000000000
--- a/browser/themes/windows/pageInfo-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/pageInfo.css b/browser/themes/windows/pageInfo.css
index f205b57bb..ec65cc408 100644
--- a/browser/themes/windows/pageInfo.css
+++ b/browser/themes/windows/pageInfo.css
@@ -123,7 +123,7 @@ groupbox.collapsable caption .caption-icon {
   background-position: center;
   -moz-margin-start: 2px;
   -moz-margin-end: 2px;
-  background-image: url("chrome://global/skin/tree/twisty-open.png");
+  background-image: url("chrome://global/skin/tree/twisty.svg#open");
 }
 
 groupbox.collapsable[closed="true"] {
@@ -133,7 +133,7 @@ groupbox.collapsable[closed="true"] {
 }
 
 groupbox.collapsable[closed="true"] caption .caption-icon { 
-  background-image: url("chrome://global/skin/tree/twisty-clsd.png");
+  background-image: url("chrome://global/skin/tree/twisty.svg#clsd");
 }
 
 groupbox tree { 
@@ -150,6 +150,16 @@ groupbox tree {
   line-height: 2em;
 }
 
+@media (-moz-os-version: windows-win10) {
+  groupbox.collapsable caption .caption-icon {
+    background-image: url("chrome://global/skin/tree/twisty-10.svg#open");
+  }
+  
+  groupbox.collapsable[closed="true"] caption .caption-icon { 
+    background-image: url("chrome://global/skin/tree/twisty-10.svg#clsd");
+  }
+}
+
 /* Media Tab */
 #imagetree {
   min-height: 10em;
diff --git a/browser/themes/windows/pageInfo.png b/browser/themes/windows/pageInfo.png
index 237381b4a..fcc713b8f 100644
--- a/browser/themes/windows/pageInfo.png
+++ b/browser/themes/windows/pageInfo.png
diff --git a/browser/themes/windows/places/allBookmarks-aero.png b/browser/themes/windows/places/allBookmarks-aero.png
deleted file mode 100644
index 177c31c3c..000000000
--- a/browser/themes/windows/places/allBookmarks-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/places/allBookmarks.png b/browser/themes/windows/places/allBookmarks.png
index 74af71c81..177c31c3c 100644
--- a/browser/themes/windows/places/allBookmarks.png
+++ b/browser/themes/windows/places/allBookmarks.png
diff --git a/browser/themes/windows/places/bookmarksMenu-aero.png b/browser/themes/windows/places/bookmarksMenu-aero.png
deleted file mode 100644
index 14c9601bb..000000000
--- a/browser/themes/windows/places/bookmarksMenu-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/places/bookmarksMenu.png b/browser/themes/windows/places/bookmarksMenu.png
index b76d849b9..14c9601bb 100644
--- a/browser/themes/windows/places/bookmarksMenu.png
+++ b/browser/themes/windows/places/bookmarksMenu.png
diff --git a/browser/themes/windows/places/bookmarksToolbar-aero.png b/browser/themes/windows/places/bookmarksToolbar-aero.png
deleted file mode 100644
index 5a4a6935d..000000000
--- a/browser/themes/windows/places/bookmarksToolbar-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/places/bookmarksToolbar.png b/browser/themes/windows/places/bookmarksToolbar.png
index 1e36e1177..5a4a6935d 100644
--- a/browser/themes/windows/places/bookmarksToolbar.png
+++ b/browser/themes/windows/places/bookmarksToolbar.png
diff --git a/browser/themes/windows/places/calendar-aero.png b/browser/themes/windows/places/calendar-aero.png
deleted file mode 100644
index c0d107159..000000000
--- a/browser/themes/windows/places/calendar-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/places/calendar.png b/browser/themes/windows/places/calendar.png
index 1855c9f50..c0d107159 100644
--- a/browser/themes/windows/places/calendar.png
+++ b/browser/themes/windows/places/calendar.png
diff --git a/browser/themes/windows/places/libraryToolbar-aero.png b/browser/themes/windows/places/libraryToolbar-aero.png
deleted file mode 100644
index f5f3654ae..000000000
--- a/browser/themes/windows/places/libraryToolbar-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/places/libraryToolbar.png b/browser/themes/windows/places/libraryToolbar.png
index 2ed627acb..f5f3654ae 100644
--- a/browser/themes/windows/places/libraryToolbar.png
+++ b/browser/themes/windows/places/libraryToolbar.png
diff --git a/browser/themes/windows/places/organizer-aero.css b/browser/themes/windows/places/organizer-aero.css
deleted file mode 100644
index f0893bd16..000000000
--- a/browser/themes/windows/places/organizer-aero.css
+++ /dev/null
@@ -1,83 +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/. */
-
-%include organizer.css
-
-%filter substitution
-%define toolbarHighlight rgba(255,255,255,.5)
-%define customToolbarColor hsl(210,75%,92%)
-
-#placesView {
-  border-top: none;
-}
-
-@media not all and (-moz-windows-classic) {
-  #placesToolbox {
-    -moz-appearance: none;
-    background-color: transparent;
-  }
-
-  #placesToolbar {
-    -moz-appearance: none;
-    background-color: -moz-Dialog;
-    color: -moz-dialogText;
-  }
-}
-
-@media (-moz-windows-compositor) {
-  #placesToolbox {
-    border-top: none;
-  }
-
-  #placesToolbar {
-    background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
-  }
-}
-
-@media (-moz-windows-default-theme) {
-  #placesView,
-  #searchModifiers,
-  #infoPane,
-  #placesList,
-  #placeContent {
-    background-color: #EEF3FA;
-  }
-
-  #placesToolbar {
-    background-color: @customToolbarColor@;
-    color: black;
-  }
-
-  #placesView > splitter {
-    border: 0;
-    -moz-border-end: 1px solid #A9B7C9;
-    min-width: 0;
-    width: 3px;
-    background-color: transparent;
-    -moz-margin-start: -3px;
-    position: relative;
-  }
-
-  #searchModifiers {
-    border-bottom: 1px solid #A9B7C9;
-  }
-
-  #organizerScopeBar {
-    -moz-appearance: none;
-    border: none;
-  }
-
-  #detailsDeck {
-    border-top-color: #A9B7C9;
-  }
-
-  #searchFilter {
-    -moz-appearance: none;
-    padding: 2px;
-    -moz-padding-start: 4px;
-    background-clip: padding-box;
-    border: 1px solid rgba(0,0,0,.32);
-    border-radius: 2px;
-  }
-}
diff --git a/browser/themes/windows/places/organizer.css b/browser/themes/windows/places/organizer.css
index aa45df743..ee86de586 100644
--- a/browser/themes/windows/places/organizer.css
+++ b/browser/themes/windows/places/organizer.css
@@ -2,6 +2,10 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+%filter substitution
+%define toolbarHighlight rgba(255,255,255,.5)
+%define customToolbarColor hsl(210,75%,92%)
+ 
 /* Toolbar */
 #placesToolbar {
   padding: 3px;
@@ -171,3 +175,70 @@
   -moz-padding-start: 9px;
   -moz-padding-end: 9px;
 }
+
+#placesView {
+  border-top: none;
+}
+
+@media not all and (-moz-windows-classic) {
+  #placesToolbox {
+    -moz-appearance: none;
+    background-color: transparent;
+  }
+
+  #placesToolbar {
+    -moz-appearance: none;
+    background-color: -moz-Dialog;
+    color: -moz-dialogText;
+  }
+}
+
+@media (-moz-windows-default-theme) {
+  #placesView > splitter {
+    border: 0;
+    -moz-border-end: 1px solid #A9B7C9;
+    min-width: 0;
+    width: 3px;
+    background-color: transparent;
+    -moz-margin-start: -3px;
+    position: relative;
+  }
+}
+
+@media (-moz-windows-glass) {
+  #placesToolbox {
+    border-top: none;
+  }
+
+  #placesToolbar {
+    background-image: linear-gradient(@toolbarHighlight@, transparent);
+  }
+}
+
+@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
+       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
+  #placesView,
+  #infoPane,
+  #placesList,
+  #placeContent {
+    background-color: #EEF3FA;
+  }
+
+  #placesToolbar {
+    background-color: @customToolbarColor@;
+    color: black;
+  }
+
+  #detailsDeck {
+    border-top-color: #A9B7C9;
+  }
+
+  #searchFilter {
+    -moz-appearance: none;
+    padding: 2px;
+    -moz-padding-start: 4px;
+    background-clip: padding-box;
+    border: 1px solid rgba(0,0,0,.32);
+    border-radius: 2px;
+  }
+}
diff --git a/browser/themes/windows/places/places-aero.css b/browser/themes/windows/places/places-aero.css
deleted file mode 100644
index 2efd906c6..000000000
--- a/browser/themes/windows/places/places-aero.css
+++ /dev/null
@@ -1,18 +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/. */
-
-%include places.css
-
-/* Style Places sidebars as Vista media collection */
-@media (-moz-windows-default-theme) {
-  #bookmarksPanel,
-  #history-panel {
-    background-color: #EEF3FA;
-  }
-
-  .sidebar-placesTree {
-    background-color: transparent;
-    border-top: none;
-  }
-}
diff --git a/browser/themes/windows/places/places.css b/browser/themes/windows/places/places.css
index bc18b3645..bb160463e 100644
--- a/browser/themes/windows/places/places.css
+++ b/browser/themes/windows/places/places.css
@@ -24,6 +24,25 @@
   cursor: default;
 }
 
+@media (-moz-windows-default-theme) {
+  .sidebar-placesTree {
+    background-color: transparent;
+    border-top: none;
+  }
+
+  .sidebar-placesTreechildren::-moz-tree-cell-text(leaf, hover) {
+    text-decoration: none;
+  }
+
+  @media (-moz-os-version: windows-vista),
+         (-moz-os-version: windows-win7) {
+    #bookmarksPanel,
+    #history-panel {
+      background-color: #EEF3FA;
+    }
+  }
+}
+
 /* Trees */
 treechildren::-moz-tree-image(title) {
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
diff --git a/browser/themes/windows/places/query-aero.png b/browser/themes/windows/places/query-aero.png
deleted file mode 100644
index fff0fb014..000000000
--- a/browser/themes/windows/places/query-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/places/query.png b/browser/themes/windows/places/query.png
index c06025e62..fff0fb014 100644
--- a/browser/themes/windows/places/query.png
+++ b/browser/themes/windows/places/query.png
diff --git a/browser/themes/windows/places/starred48-aero.png b/browser/themes/windows/places/starred48-aero.png
deleted file mode 100644
index 2f7e878a7..000000000
--- a/browser/themes/windows/places/starred48-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/places/starred48.png b/browser/themes/windows/places/starred48.png
index bfa14599a..2f7e878a7 100644
--- a/browser/themes/windows/places/starred48.png
+++ b/browser/themes/windows/places/starred48.png
diff --git a/browser/themes/windows/places/tag-aero.png b/browser/themes/windows/places/tag-aero.png
deleted file mode 100644
index da906245d..000000000
--- a/browser/themes/windows/places/tag-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/places/tag.png b/browser/themes/windows/places/tag.png
index 4c876b92b..da906245d 100644
--- a/browser/themes/windows/places/tag.png
+++ b/browser/themes/windows/places/tag.png
diff --git a/browser/themes/windows/places/toolbarDropMarker-aero.png b/browser/themes/windows/places/toolbarDropMarker-aero.png
deleted file mode 100644
index 3abb7c281..000000000
--- a/browser/themes/windows/places/toolbarDropMarker-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/places/toolbarDropMarker.png b/browser/themes/windows/places/toolbarDropMarker.png
index 38e9f9ae5..3abb7c281 100644
--- a/browser/themes/windows/places/toolbarDropMarker.png
+++ b/browser/themes/windows/places/toolbarDropMarker.png
diff --git a/browser/themes/windows/places/unsortedBookmarks-aero.png b/browser/themes/windows/places/unsortedBookmarks-aero.png
deleted file mode 100644
index d18a5016c..000000000
--- a/browser/themes/windows/places/unsortedBookmarks-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/places/unsortedBookmarks.png b/browser/themes/windows/places/unsortedBookmarks.png
index 893e75a79..d18a5016c 100644
--- a/browser/themes/windows/places/unsortedBookmarks.png
+++ b/browser/themes/windows/places/unsortedBookmarks.png
diff --git a/browser/themes/windows/preferences/Options-aero.png b/browser/themes/windows/preferences/Options-aero.png
deleted file mode 100644
index 2cb1f5088..000000000
--- a/browser/themes/windows/preferences/Options-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/preferences/Options.png b/browser/themes/windows/preferences/Options.png
index 448eca6e1..2cb1f5088 100644
--- a/browser/themes/windows/preferences/Options.png
+++ b/browser/themes/windows/preferences/Options.png
diff --git a/browser/themes/windows/preferences/alwaysAsk-aero.png b/browser/themes/windows/preferences/alwaysAsk-aero.png
deleted file mode 100644
index d12805ef0..000000000
--- a/browser/themes/windows/preferences/alwaysAsk-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/preferences/alwaysAsk.png b/browser/themes/windows/preferences/alwaysAsk.png
index ddd4cb213..d12805ef0 100644
--- a/browser/themes/windows/preferences/alwaysAsk.png
+++ b/browser/themes/windows/preferences/alwaysAsk.png
diff --git a/browser/themes/windows/preferences/application-aero.png b/browser/themes/windows/preferences/application-aero.png
deleted file mode 100644
index d67993d59..000000000
--- a/browser/themes/windows/preferences/application-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/preferences/application.png b/browser/themes/windows/preferences/application.png
index ff2ecc2f3..d67993d59 100644
--- a/browser/themes/windows/preferences/application.png
+++ b/browser/themes/windows/preferences/application.png
diff --git a/browser/themes/windows/preferences/mail-aero.png b/browser/themes/windows/preferences/mail-aero.png
deleted file mode 100644
index be1ed4d38..000000000
--- a/browser/themes/windows/preferences/mail-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/preferences/mail.png b/browser/themes/windows/preferences/mail.png
index c40d15991..be1ed4d38 100644
--- a/browser/themes/windows/preferences/mail.png
+++ b/browser/themes/windows/preferences/mail.png
diff --git a/browser/themes/windows/preferences/saveFile-aero.png b/browser/themes/windows/preferences/saveFile-aero.png
deleted file mode 100644
index 1248dd30c..000000000
--- a/browser/themes/windows/preferences/saveFile-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/preferences/saveFile.png b/browser/themes/windows/preferences/saveFile.png
index c210e8473..1248dd30c 100644
--- a/browser/themes/windows/preferences/saveFile.png
+++ b/browser/themes/windows/preferences/saveFile.png
diff --git a/browser/themes/windows/searchbar-dropdown-arrow-aero.png b/browser/themes/windows/searchbar-dropdown-arrow-aero.png
deleted file mode 100644
index 79d8d61b4..000000000
--- a/browser/themes/windows/searchbar-dropdown-arrow-aero.png
+++ /dev/null
diff --git a/browser/themes/windows/searchbar-dropdown-arrow.png b/browser/themes/windows/searchbar-dropdown-arrow.png
index 7f5f55ef2..79d8d61b4 100644
--- a/browser/themes/windows/searchbar-dropdown-arrow.png
+++ b/browser/themes/windows/searchbar-dropdown-arrow.png
author	Pale Moon <git-repo@palemoon.org>	2016-09-01 13:39:08 +0200
committer	Pale Moon <git-repo@palemoon.org>	2016-09-01 13:39:08 +0200
commit	3d8ce1a11a7347cc94a937719c4bc8df46fb8d14 (patch)
tree	8c26ca375a6312751c00a27e1653fb6f189f0463 /browser/themes
parent	e449bdb1ec3a82f204bffdd9c3c54069d086eee3 (diff)
download	palemoon-gre-3d8ce1a11a7347cc94a937719c4bc8df46fb8d14.tar.gz