Bug 912121 - Package DevTools client themes in devtools.jar. rs=devtools
authorJ. Ryan Stinnett <jryans@gmail.com>
Mon, 21 Sep 2015 12:04:31 -0500
changeset 296961 7054f652e387755532a5ef48c4834533de1dd4ab
parent 296960 1550dafed618735e08236351f3b3fac10abc3a98
child 296962 f5c50b4960f074ae1997da13bca56b724c332c99
push idunknown
push userunknown
push dateunknown
reviewersdevtools
bugs912121
milestone44.0a1
Bug 912121 - Package DevTools client themes in devtools.jar. rs=devtools Break DevTools theme files out of browser.jar and move to a new DevTools specific jar. Update all paths of the form: chrome://browser/skin/devtools/<X> to chrome://devtools/skin/<Y> where <Y> is the source tree path that comes after /devtools/client.
browser/base/content/browser.xul
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/jar.inc.mn
browser/themes/windows/browser.css
devtools/client/animationinspector/animation-inspector.xhtml
devtools/client/app-manager/content/connection-footer.js
devtools/client/app-manager/content/connection-footer.xhtml
devtools/client/app-manager/content/device.js
devtools/client/app-manager/content/device.xhtml
devtools/client/app-manager/content/help.xhtml
devtools/client/app-manager/content/index.xul
devtools/client/app-manager/content/projects.js
devtools/client/app-manager/content/projects.xhtml
devtools/client/canvasdebugger/canvasdebugger.xul
devtools/client/commandline/commandlineoutput.xhtml
devtools/client/commandline/commandlinetooltip.xhtml
devtools/client/debugger/debugger.xul
devtools/client/definitions.js
devtools/client/eyedropper/eyedropper.xul
devtools/client/fontinspector/font-inspector.xhtml
devtools/client/framework/connect/connect.xhtml
devtools/client/framework/test/browser_toolbox_sidebar.js
devtools/client/framework/test/browser_toolbox_sidebar_events.js
devtools/client/framework/test/browser_toolbox_sidebar_existing_tabs.js
devtools/client/framework/test/browser_toolbox_sidebar_tool.xul
devtools/client/framework/toolbox.xul
devtools/client/inspector/inspector.xul
devtools/client/jar.mn
devtools/client/layoutview/view.xhtml
devtools/client/markupview/markup-view.xhtml
devtools/client/memory/memory.xhtml
devtools/client/memory/test/mochitest/test_census-view-01.html
devtools/client/netmonitor/netmonitor.xul
devtools/client/performance/performance.xul
devtools/client/projecteditor/chrome/content/projecteditor-loader.js
devtools/client/projecteditor/chrome/content/projecteditor.xul
devtools/client/projecteditor/lib/plugins/app-manager/plugin.js
devtools/client/projecteditor/test/browser_projecteditor_app_options.js
devtools/client/projecteditor/test/head.js
devtools/client/promisedebugger/promise-debugger.xhtml
devtools/client/responsivedesign/responsivedesign-child.js
devtools/client/scratchpad/scratchpad.xul
devtools/client/shadereditor/shadereditor.xul
devtools/client/shared/test/browser_tableWidget_basic.js
devtools/client/shared/test/browser_tableWidget_keyboard_interaction.js
devtools/client/shared/test/browser_tableWidget_mouse_interaction.js
devtools/client/shared/test/browser_treeWidget_basic.js
devtools/client/shared/test/browser_treeWidget_keyboard_interaction.js
devtools/client/shared/test/browser_treeWidget_mouse_interaction.js
devtools/client/shared/test/doc_options-view.xul
devtools/client/shared/theme-switching.js
devtools/client/shared/theme.js
devtools/client/shared/widgets/Tooltip.js
devtools/client/shared/widgets/VariablesView.xul
devtools/client/shared/widgets/cubic-bezier-frame.xhtml
devtools/client/shared/widgets/filter-frame.xhtml
devtools/client/shared/widgets/filter-widget.css
devtools/client/shared/widgets/graphs-frame.xhtml
devtools/client/shared/widgets/mdn-docs-frame.xhtml
devtools/client/shared/widgets/spectrum-frame.xhtml
devtools/client/shared/widgets/spectrum.css
devtools/client/sourceeditor/codemirror/mozilla.css
devtools/client/sourceeditor/editor.js
devtools/client/storage/storage.xul
devtools/client/styleeditor/styleeditor.xul
devtools/client/styleinspector/computedview.xhtml
devtools/client/styleinspector/cssruleview.xhtml
devtools/client/themes/animationinspector.css
devtools/client/themes/app-manager/device.css
devtools/client/themes/app-manager/index.css
devtools/client/themes/app-manager/manifest-editor.inc.css
devtools/client/themes/app-manager/projects.css
devtools/client/themes/canvasdebugger.css
devtools/client/themes/commandline.inc.css
devtools/client/themes/computedview.css
devtools/client/themes/dark-theme.css
devtools/client/themes/debugger.css
devtools/client/themes/floating-scrollbars-light.css
devtools/client/themes/floating-scrollbars.css
devtools/client/themes/inspector.css
devtools/client/themes/light-theme.css
devtools/client/themes/netmonitor.css
devtools/client/themes/performance.css
devtools/client/themes/responsivedesign.inc.css
devtools/client/themes/ruleview.css
devtools/client/themes/shadereditor.css
devtools/client/themes/splitview.css
devtools/client/themes/storage.css
devtools/client/themes/styleeditor.css
devtools/client/themes/toolbars.inc.css
devtools/client/themes/webaudioeditor.css
devtools/client/themes/webconsole.css
devtools/client/themes/widgets.css
devtools/client/webaudioeditor/webaudioeditor.xul
devtools/client/webconsole/webconsole.xul
devtools/client/webide/content/logs.xhtml
devtools/client/webide/content/webide.xul
devtools/client/webide/modules/app-manager.js
devtools/client/webide/themes/webide.css
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -3,17 +3,17 @@
 # -*- Mode: HTML -*-
 #
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 <?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/places/places.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/controlcenter/panel.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/customizableui/panelUIOverlay.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/browser-lightweightTheme.css" type="text/css"?>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 <?xul-overlay href="chrome://browser/content/baseMenuOverlay.xul"?>
 <?xul-overlay href="chrome://browser/content/places/placesOverlay.xul"?>
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1757,18 +1757,18 @@ toolbarbutton.chevron > .toolbarbutton-i
 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
   border-left-style: solid;
   border-top-left-radius: .3em;
   margin-left: 1em;
 }
 
 %include ../shared/fullscreen/warning.inc.css
-%include ../shared/devtools/responsivedesign.inc.css
-%include ../shared/devtools/commandline.inc.css
+%include ../../../devtools/client/themes/responsivedesign.inc.css
+%include ../../../devtools/client/themes/commandline.inc.css
 %include ../shared/plugin-doorhanger.inc.css
 %include ../shared/login-doorhanger.inc.css
 
 %include downloads/indicator.css
 
 .gcli-panel {
   padding: 0;
 }
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -3307,18 +3307,18 @@ notification[value="loop-sharing-notific
 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
   border-left-style: solid;
   border-top-left-radius: .3em;
   margin-left: 1em;
 }
 
 %include ../shared/fullscreen/warning.inc.css
-%include ../shared/devtools/responsivedesign.inc.css
-%include ../shared/devtools/commandline.inc.css
+%include ../../../devtools/client/themes/responsivedesign.inc.css
+%include ../../../devtools/client/themes/commandline.inc.css
 %include ../shared/plugin-doorhanger.inc.css
 %include ../shared/login-doorhanger.inc.css
 
 %include downloads/indicator.css
 
 /* On mac, the popup notification contents are indented by default and so
   the default closebutton margins from notification.css require adjustment */
 
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -65,200 +65,8 @@
   skin/classic/browser/privatebrowsing/check.png               (../shared/privatebrowsing/check.png)
   skin/classic/browser/privatebrowsing/check@2x.png            (../shared/privatebrowsing/check@2x.png)
   skin/classic/browser/privatebrowsing/mask.svg                (../shared/privatebrowsing/mask.svg)
   skin/classic/browser/privatebrowsing/shield-page.png         (../shared/privatebrowsing/shield-page.png)
   skin/classic/browser/privatebrowsing/shield-page@2x.png      (../shared/privatebrowsing/shield-page@2x.png)
   skin/classic/browser/devedition/urlbar-history-dropmarker.svg (../shared/devedition/urlbar-history-dropmarker.svg)
   skin/classic/browser/devedition/urlbar-arrow.png             (../shared/devedition/urlbar-arrow.png)
   skin/classic/browser/devedition/urlbar-arrow@2x.png          (../shared/devedition/urlbar-arrow@2x.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/add.svg                        (../shared/devtools/images/add.svg)
-  skin/classic/browser/devtools/filters.svg                    (../shared/devtools/images/filters.svg)
-  skin/classic/browser/devtools/filter-swatch.svg              (../shared/devtools/images/filter-swatch.svg)
-  skin/classic/browser/devtools/pseudo-class.svg               (../shared/devtools/images/pseudo-class.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/animation-fast-track.svg       (../shared/devtools/images/animation-fast-track.svg)
-  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                    (../shared/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                (../shared/devtools/commandline.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/command-rulers.png             (../shared/devtools/images/command-rulers.png)
-  skin/classic/browser/devtools/command-rulers@2x.png          (../shared/devtools/images/command-rulers@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                 (../shared/devtools/webconsole.css)
-  skin/classic/browser/devtools/webconsole.svg                 (../shared/devtools/images/webconsole.svg)
-  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             (../shared/devtools/canvasdebugger.css)
-  skin/classic/browser/devtools/debugger.css                   (../shared/devtools/debugger.css)
-* skin/classic/browser/devtools/netmonitor.css                 (../shared/devtools/netmonitor.css)
-  skin/classic/browser/devtools/performance.css                (../shared/devtools/performance.css)
-  skin/classic/browser/devtools/memory.css                     (../shared/devtools/memory.css)
-  skin/classic/browser/devtools/promisedebugger.css            (../shared/devtools/promisedebugger.css)
-  skin/classic/browser/devtools/timeline-filter.svg            (../shared/devtools/images/timeline-filter.svg)
-* skin/classic/browser/devtools/scratchpad.css                 (../shared/devtools/scratchpad.css)
-  skin/classic/browser/devtools/shadereditor.css               (../shared/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             (../shared/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/fast-forward.png               (../shared/devtools/images/fast-forward.png)
-  skin/classic/browser/devtools/fast-forward@2x.png            (../shared/devtools/images/fast-forward@2x.png)
-  skin/classic/browser/devtools/rewind.png                     (../shared/devtools/images/rewind.png)
-  skin/classic/browser/devtools/rewind@2x.png                  (../shared/devtools/images/rewind@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/responsiveui-home.png          (../shared/devtools/images/responsivemode/responsiveui-home.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-bottom-minimize@2x.png    (../shared/devtools/images/dock-bottom-minimize@2x.png)
-  skin/classic/browser/devtools/dock-bottom-maximize@2x.png    (../shared/devtools/images/dock-bottom-maximize@2x.png)
-  skin/classic/browser/devtools/dock-side@2x.png               (../shared/devtools/images/dock-side@2x.png)
-* skin/classic/browser/devtools/floating-scrollbars.css        (../shared/devtools/floating-scrollbars.css)
-  skin/classic/browser/devtools/floating-scrollbars-light.css  (../shared/devtools/floating-scrollbars-light.css)
-* 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-shadereditor.svg          (../shared/devtools/images/tool-shadereditor.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-profiler-active.svg       (../shared/devtools/images/tool-profiler-active.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/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)
-  skin/classic/browser/devtools/search-clear-failed.svg        (../shared/devtools/images/search-clear-failed.svg)
-  skin/classic/browser/devtools/search-clear-light.svg         (../shared/devtools/images/search-clear-light.svg)
-  skin/classic/browser/devtools/search-clear-dark.svg          (../shared/devtools/images/search-clear-dark.svg)
-  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)
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -2509,18 +2509,18 @@ notification[value="loop-sharing-notific
   border-left-style: solid;
   /* disabled for triggering grayscale AA (bug 659213)
   border-top-left-radius: .3em;
   */
   margin-left: 1em;
 }
 
 %include ../shared/fullscreen/warning.inc.css
-%include ../shared/devtools/responsivedesign.inc.css
-%include ../shared/devtools/commandline.inc.css
+%include ../../../devtools/client/themes/responsivedesign.inc.css
+%include ../../../devtools/client/themes/commandline.inc.css
 %include ../shared/plugin-doorhanger.inc.css
 %include ../shared/login-doorhanger.inc.css
 
 %include downloads/indicator.css
 
 /* Error counter */
 
 #developer-toolbar-toolbox-button[error-count]:before {
--- a/devtools/client/animationinspector/animation-inspector.xhtml
+++ b/devtools/client/animationinspector/animation-inspector.xhtml
@@ -5,18 +5,18 @@
 <!DOCTYPE html [
 <!ENTITY % animationinspectorDTD SYSTEM "chrome://browser/locale/devtools/animationinspector.dtd" >
  %animationinspectorDTD;
 ]>
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>&title;</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/animationinspector.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/animationinspector.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
   </head>
   <body class="theme-sidebar devtools-monospace" role="application" empty="true">
     <div id="global-toolbar" class="theme-toolbar">
       <span class="label">&allAnimations;</span>
       <button id="toggle-all" standalone="true" class="devtools-button pause-button"></button>
     </div>
     <div id="timeline-toolbar" class="theme-toolbar">
--- a/devtools/client/app-manager/content/connection-footer.js
+++ b/devtools/client/app-manager/content/connection-footer.js
@@ -79,17 +79,17 @@ var UI = {
     pre.textContent += "\n" + str;
     pre.scrollTop = pre.scrollTopMax;
   },
 
   useFloatingScrollbarsIfNeeded: function() {
     if (Services.appinfo.OS == "Darwin") {
       return;
     }
-    let scrollbarsUrl = Services.io.newURI("chrome://browser/skin/devtools/floating-scrollbars-light.css", null, null);
+    let scrollbarsUrl = Services.io.newURI("chrome://devtools/skin/themes/floating-scrollbars-light.css", null, null);
     let winUtils = window.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowUtils);
     winUtils.loadSheet(scrollbarsUrl, winUtils.AGENT_SHEET);
     let computedStyle = window.getComputedStyle(document.documentElement);
     if (computedStyle) { // Force a reflow to take the new css into account
       let display = computedStyle.display; // Save display value
       document.documentElement.style.display = "none";
       window.getComputedStyle(document.documentElement).display; // Flush
       document.documentElement.style.display = display; // Restore
--- a/devtools/client/app-manager/content/connection-footer.xhtml
+++ b/devtools/client/app-manager/content/connection-footer.xhtml
@@ -6,17 +6,17 @@
   <!ENTITY % appMgrDTD SYSTEM "chrome://browser/locale/devtools/app-manager.dtd" >
   %appMgrDTD;
 ]>
 
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta charset="utf8"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/app-manager/connection-footer.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/app-manager/connection-footer.css" type="text/css"/>
   </head>
 
   <body onload="UI.init()">
 
     <div id="connection-footer" template='{"type":"attribute","path":"connection.status","name":"status"}'>
       <div id="banners-and-logs">
 
         <!-- Connected -->
--- a/devtools/client/app-manager/content/device.js
+++ b/devtools/client/app-manager/content/device.js
@@ -12,17 +12,17 @@ const {TargetFactory} = require("devtool
 const {ConnectionManager, Connection}
   = require("devtools/shared/client/connection-manager");
 const {getDeviceFront} = require("devtools/server/actors/device");
 const {getTargetForApp, launchApp, closeApp}
   = require("devtools/shared/apps/app-actor-front");
 const DeviceStore = require("devtools/client/app-manager/device-store");
 const WebappsStore = require("devtools/client/app-manager/webapps-store");
 const promise = require("devtools/shared/deprecated-sync-thenables");
-const DEFAULT_APP_ICON = "chrome://browser/skin/devtools/app-manager/default-app-icon.png";
+const DEFAULT_APP_ICON = "chrome://devtools/skin/themes/app-manager/images/default-app-icon.png";
 
 window.addEventListener("message", function(event) {
   try {
     let message = JSON.parse(event.data);
     if (message.name == "connection") {
       let cid = parseInt(message.cid);
       for (let c of ConnectionManager.connections) {
         if (c.uid == cid) {
--- a/devtools/client/app-manager/content/device.xhtml
+++ b/devtools/client/app-manager/content/device.xhtml
@@ -8,17 +8,17 @@
 ]>
 
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 
   <head>
     <meta charset="utf8"/>
     <title>&device.title;</title>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/app-manager/device.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/app-manager/device.css" type="text/css"/>
   </head>
 
   <body onload="UI.init()">
 
     <div id="notConnectedMessage"><span>&device.notConnected;</span></div>
 
     <section id="content">
       <aside id="sidebar">
--- a/devtools/client/app-manager/content/help.xhtml
+++ b/devtools/client/app-manager/content/help.xhtml
@@ -7,17 +7,17 @@
   %appMgrDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 
   <head>
     <meta charset="utf8"/>
     <title>&help.title;</title>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/app-manager/help.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/app-manager/help.css" type="text/css"/>
   </head>
 
   <body>
 
     <h1>&help.title;</h1>
 
     <p>&help.intro;</p>
 
--- a/devtools/client/app-manager/content/index.xul
+++ b/devtools/client/app-manager/content/index.xul
@@ -3,17 +3,17 @@
      - License, v. 2.0. If a copy of the MPL was not distributed with this
      - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE window [
   <!ENTITY % appMgrDTD SYSTEM "chrome://browser/locale/devtools/app-manager.dtd" >
   %appMgrDTD;
 ]>
 
 <?xml-stylesheet href="chrome://global/skin/global.css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/app-manager/index.css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/app-manager/index.css"?>
 
 <window id="app-manager-window"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         title="&index.title;"
         windowtype="devtools:app-manager"
         macanimationtype="document"
         fullscreenbutton="true"
         screenX="4" screenY="4"
--- a/devtools/client/app-manager/content/projects.js
+++ b/devtools/client/app-manager/content/projects.js
@@ -126,17 +126,17 @@ var UI = {
     let icon;
     if (manifest.icons) {
       let size = Object.keys(manifest.icons).sort((a, b) => b - a)[0];
       if (size) {
         icon = manifest.icons[size];
       }
     }
     if (!icon)
-      return "chrome://browser/skin/devtools/app-manager/default-app-icon.png";
+      return "chrome://devtools/skin/themes/app-manager/images/default-app-icon.png";
     if (project.type == "hosted") {
       let manifestURL = Services.io.newURI(project.location, null, null);
       let origin = Services.io.newURI(manifestURL.prePath, null, null);
       return Services.io.newURI(icon, null, origin).spec;
     } else if (project.type == "packaged") {
       let projectFolder = FileUtils.File(project.location);
       let folderURI = Services.io.newFileURI(projectFolder).spec;
       return folderURI + icon.replace(/^\/|\\/, "");
--- a/devtools/client/app-manager/content/projects.xhtml
+++ b/devtools/client/app-manager/content/projects.xhtml
@@ -7,17 +7,17 @@
   %appMgrDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 
   <head>
     <meta charset="utf8"/>
     <title>&projects.title;</title>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/app-manager/projects.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/app-manager/projects.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="utils.js"></script>
     <script type="application/javascript;version=1.8" src="projects.js"></script>
     <script type="application/javascript;version=1.8" src="template.js"></script>
     <script type="application/javascript;version=1.8" src="manifest-editor.js"></script>
   </head>
 
   <body onload="UI.onload()">
     <aside id="sidebar">
--- a/devtools/client/canvasdebugger/canvasdebugger.xul
+++ b/devtools/client/canvasdebugger/canvasdebugger.xul
@@ -1,17 +1,17 @@
 <?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/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/canvasdebugger.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/canvasdebugger.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % canvasDebuggerDTD SYSTEM "chrome://browser/locale/devtools/canvasdebugger.dtd">
   %canvasDebuggerDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <script src="chrome://devtools/content/shared/theme-switching.js"/>
   <script type="application/javascript" src="canvasdebugger.js"/>
--- a/devtools/client/commandline/commandlineoutput.xhtml
+++ b/devtools/client/commandline/commandlineoutput.xhtml
@@ -5,14 +5,14 @@
    - License, v. 2.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 xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <link rel="stylesheet" href="chrome://global/skin/global.css" type="text/css"/>
   <link rel="stylesheet" href="chrome://devtools/content/commandline/commandline.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://browser/skin/devtools/commandline.css" type="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/themes/commandline.css" type="text/css"/>
 </head>
 <body class="gcli-body">
 <div id="gcli-output-root"></div>
 </body>
 </html>
--- a/devtools/client/commandline/commandlinetooltip.xhtml
+++ b/devtools/client/commandline/commandlinetooltip.xhtml
@@ -5,15 +5,15 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <link rel="stylesheet" href="chrome://global/skin/global.css" type="text/css"/>
   <link rel="stylesheet" href="chrome://devtools/content/commandline/commandline.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://browser/skin/devtools/commandline.css" type="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/themes/commandline.css" type="text/css"/>
 </head>
 <body class="gcli-body">
 <div id="gcli-tooltip-root"></div>
 <div id="gcli-tooltip-connector"></div>
 </body>
 </html>
--- a/devtools/client/debugger/debugger.xul
+++ b/devtools/client/debugger/debugger.xul
@@ -1,18 +1,18 @@
 <?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/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="debugger.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/debugger.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/debugger.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % debuggerDTD SYSTEM "chrome://browser/locale/devtools/debugger.dtd">
   %debuggerDTD;
 ]>
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml"
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -55,17 +55,17 @@ loader.lazyGetter(this, "scratchpadStrin
 var Tools = {};
 exports.Tools = Tools;
 
 // Definitions
 Tools.options = {
   id: "options",
   ordinal: 0,
   url: "chrome://devtools/content/framework/toolbox-options.xul",
-  icon: "chrome://browser/skin/devtools/tool-options.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-options.svg",
   invertIconForLightTheme: true,
   bgTheme: "theme-body",
   label: l10n("options.label", toolboxStrings),
   iconOnly: true,
   panelLabel: l10n("options.panelLabel", toolboxStrings),
   tooltip: l10n("optionsButton.tooltip", toolboxStrings),
   inMenu: false,
 
@@ -79,17 +79,17 @@ Tools.options = {
 }
 
 Tools.inspector = {
   id: "inspector",
   accesskey: l10n("inspector.accesskey", inspectorStrings),
   key: l10n("inspector.commandkey", inspectorStrings),
   ordinal: 1,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
-  icon: "chrome://browser/skin/devtools/tool-inspector.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-inspector.svg",
   invertIconForLightTheme: true,
   url: "chrome://devtools/content/inspector/inspector.xul",
   label: l10n("inspector.label", inspectorStrings),
   panelLabel: l10n("inspector.panelLabel", inspectorStrings),
   get tooltip() {
     return l10n("inspector.tooltip2", inspectorStrings,
     ( osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+" ) + this.key);
   },
@@ -115,17 +115,17 @@ Tools.inspector = {
 };
 
 Tools.webConsole = {
   id: "webconsole",
   key: l10n("cmd.commandkey", webConsoleStrings),
   accesskey: l10n("webConsoleCmd.accesskey", webConsoleStrings),
   modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 2,
-  icon: "chrome://browser/skin/devtools/tool-webconsole.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-webconsole.svg",
   invertIconForLightTheme: true,
   url: "chrome://devtools/content/webconsole/webconsole.xul",
   label: l10n("ToolboxTabWebconsole.label", webConsoleStrings),
   menuLabel: l10n("MenuWebconsole.label", webConsoleStrings),
   panelLabel: l10n("ToolboxWebConsole.panelLabel", webConsoleStrings),
   get tooltip() {
     return l10n("ToolboxWebconsole.tooltip2", webConsoleStrings,
     ( osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+" ) + this.key);
@@ -151,19 +151,19 @@ Tools.webConsole = {
 };
 
 Tools.jsdebugger = {
   id: "jsdebugger",
   key: l10n("debuggerMenu.commandkey", debuggerStrings),
   accesskey: l10n("debuggerMenu.accesskey", debuggerStrings),
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 3,
-  icon: "chrome://browser/skin/devtools/tool-debugger.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-debugger.svg",
   invertIconForLightTheme: true,
-  highlightedicon: "chrome://browser/skin/devtools/tool-debugger-paused.svg",
+  highlightedicon: "chrome://devtools/skin/themes/images/tool-debugger-paused.svg",
   url: "chrome://devtools/content/debugger/debugger.xul",
   label: l10n("ToolboxDebugger.label", debuggerStrings),
   panelLabel: l10n("ToolboxDebugger.panelLabel", debuggerStrings),
   get tooltip() {
     return l10n("ToolboxDebugger.tooltip2", debuggerStrings,
     ( osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+" ) + this.key);
   },
   inMenu: true,
@@ -179,17 +179,17 @@ Tools.jsdebugger = {
 };
 
 Tools.styleEditor = {
   id: "styleeditor",
   key: l10n("open.commandkey", styleEditorStrings),
   ordinal: 4,
   accesskey: l10n("open.accesskey", styleEditorStrings),
   modifiers: "shift",
-  icon: "chrome://browser/skin/devtools/tool-styleeditor.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-styleeditor.svg",
   invertIconForLightTheme: true,
   url: "chrome://devtools/content/styleeditor/styleeditor.xul",
   label: l10n("ToolboxStyleEditor.label", styleEditorStrings),
   panelLabel: l10n("ToolboxStyleEditor.panelLabel", styleEditorStrings),
   get tooltip() {
     return l10n("ToolboxStyleEditor.tooltip3", styleEditorStrings,
     "Shift+" + functionkey(this.key));
   },
@@ -204,17 +204,17 @@ Tools.styleEditor = {
     return new StyleEditorPanel(iframeWindow, toolbox);
   }
 };
 
 Tools.shaderEditor = {
   id: "shadereditor",
   ordinal: 5,
   visibilityswitch: "devtools.shadereditor.enabled",
-  icon: "chrome://browser/skin/devtools/tool-shadereditor.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-shadereditor.svg",
   invertIconForLightTheme: true,
   url: "chrome://devtools/content/shadereditor/shadereditor.xul",
   label: l10n("ToolboxShaderEditor.label", shaderEditorStrings),
   panelLabel: l10n("ToolboxShaderEditor.panelLabel", shaderEditorStrings),
   tooltip: l10n("ToolboxShaderEditor.tooltip", shaderEditorStrings),
 
   isTargetSupported: function(target) {
     return target.hasActor("webgl") && !target.chrome;
@@ -224,17 +224,17 @@ Tools.shaderEditor = {
     return new ShaderEditorPanel(iframeWindow, toolbox);
   }
 };
 
 Tools.canvasDebugger = {
   id: "canvasdebugger",
   ordinal: 6,
   visibilityswitch: "devtools.canvasdebugger.enabled",
-  icon: "chrome://browser/skin/devtools/tool-styleeditor.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-styleeditor.svg",
   invertIconForLightTheme: true,
   url: "chrome://devtools/content/canvasdebugger/canvasdebugger.xul",
   label: l10n("ToolboxCanvasDebugger.label", canvasDebuggerStrings),
   panelLabel: l10n("ToolboxCanvasDebugger.panelLabel", canvasDebuggerStrings),
   tooltip: l10n("ToolboxCanvasDebugger.tooltip", canvasDebuggerStrings),
 
   // Hide the Canvas Debugger in the Add-on Debugger and Browser Toolbox
   // (bug 1047520).
@@ -245,19 +245,19 @@ Tools.canvasDebugger = {
   build: function (iframeWindow, toolbox) {
     return new CanvasDebuggerPanel(iframeWindow, toolbox);
   }
 };
 
 Tools.performance = {
   id: "performance",
   ordinal: 7,
-  icon: "chrome://browser/skin/devtools/tool-profiler.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-profiler.svg",
   invertIconForLightTheme: true,
-  highlightedicon: "chrome://browser/skin/devtools/tool-profiler-active.svg",
+  highlightedicon: "chrome://devtools/skin/themes/images/tool-profiler-active.svg",
   url: "chrome://devtools/content/performance/performance.xul",
   visibilityswitch: "devtools.performance.enabled",
   label: l10n("performance.label", performanceStrings),
   panelLabel: l10n("performance.panelLabel", performanceStrings),
   get tooltip() {
     return l10n("performance.tooltip", performanceStrings,
     "Shift+" + functionkey(this.key));
   },
@@ -273,17 +273,17 @@ Tools.performance = {
   build: function (frame, target) {
     return new PerformancePanel(frame, target);
   }
 };
 
 Tools.memory = {
   id: "memory",
   ordinal: 8,
-  icon: "chrome://browser/skin/devtools/tool-styleeditor.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-styleeditor.svg",
   invertIconForLightTheme: true,
   url: "chrome://devtools/content/memory/memory.xhtml",
   visibilityswitch: "devtools.memory.enabled",
   label: "Memory",
   panelLabel: "Memory Panel",
   tooltip: "Memory (keyboardshortcut)",
   hiddenInOptions: true,
 
@@ -302,17 +302,17 @@ Tools.memory = {
 
 Tools.netMonitor = {
   id: "netmonitor",
   accesskey: l10n("netmonitor.accesskey", netMonitorStrings),
   key: l10n("netmonitor.commandkey", netMonitorStrings),
   ordinal: 9,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   visibilityswitch: "devtools.netmonitor.enabled",
-  icon: "chrome://browser/skin/devtools/tool-network.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-network.svg",
   invertIconForLightTheme: true,
   url: "chrome://devtools/content/netmonitor/netmonitor.xul",
   label: l10n("netmonitor.label", netMonitorStrings),
   panelLabel: l10n("netmonitor.panelLabel", netMonitorStrings),
   get tooltip() {
     return l10n("netmonitor.tooltip2", netMonitorStrings,
     ( osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+" ) + this.key);
   },
@@ -329,17 +329,17 @@ Tools.netMonitor = {
 
 Tools.storage = {
   id: "storage",
   key: l10n("storage.commandkey", storageStrings),
   ordinal: 10,
   accesskey: l10n("storage.accesskey", storageStrings),
   modifiers: "shift",
   visibilityswitch: "devtools.storage.enabled",
-  icon: "chrome://browser/skin/devtools/tool-storage.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-storage.svg",
   invertIconForLightTheme: true,
   url: "chrome://devtools/content/storage/storage.xul",
   label: l10n("storage.label", storageStrings),
   menuLabel: l10n("storage.menuLabel", storageStrings),
   panelLabel: l10n("storage.panelLabel", storageStrings),
   get tooltip() {
     return l10n("storage.tooltip3", storageStrings,
     "Shift+" + functionkey(this.key));
@@ -356,17 +356,17 @@ Tools.storage = {
     return new StoragePanel(iframeWindow, toolbox);
   }
 };
 
 Tools.webAudioEditor = {
   id: "webaudioeditor",
   ordinal: 11,
   visibilityswitch: "devtools.webaudioeditor.enabled",
-  icon: "chrome://browser/skin/devtools/tool-webaudio.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-webaudio.svg",
   invertIconForLightTheme: true,
   url: "chrome://devtools/content/webaudioeditor/webaudioeditor.xul",
   label: l10n("ToolboxWebAudioEditor1.label", webAudioEditorStrings),
   panelLabel: l10n("ToolboxWebAudioEditor1.panelLabel", webAudioEditorStrings),
   tooltip: l10n("ToolboxWebAudioEditor1.tooltip", webAudioEditorStrings),
 
   isTargetSupported: function(target) {
     return !target.chrome && target.hasActor("webaudio");
@@ -376,17 +376,17 @@ Tools.webAudioEditor = {
     return new WebAudioEditorPanel(iframeWindow, toolbox);
   }
 };
 
 Tools.scratchpad = {
   id: "scratchpad",
   ordinal: 12,
   visibilityswitch: "devtools.scratchpad.enabled",
-  icon: "chrome://browser/skin/devtools/tool-scratchpad.svg",
+  icon: "chrome://devtools/skin/themes/images/tool-scratchpad.svg",
   invertIconForLightTheme: true,
   url: "chrome://devtools/content/scratchpad/scratchpad.xul",
   label: l10n("scratchpad.label", scratchpadStrings),
   panelLabel: l10n("scratchpad.panelLabel", scratchpadStrings),
   tooltip: l10n("scratchpad.tooltip", scratchpadStrings),
   inMenu: false,
   commands: "devtools/client/scratchpad/scratchpad-commands",
 
@@ -416,25 +416,25 @@ var defaultTools = [
 ];
 
 exports.defaultTools = defaultTools;
 
 Tools.darkTheme = {
   id: "dark",
   label: l10n("options.darkTheme.label", toolboxStrings),
   ordinal: 1,
-  stylesheets: ["chrome://browser/skin/devtools/dark-theme.css"],
+  stylesheets: ["chrome://devtools/skin/themes/dark-theme.css"],
   classList: ["theme-dark"],
 };
 
 Tools.lightTheme = {
   id: "light",
   label: l10n("options.lightTheme.label", toolboxStrings),
   ordinal: 2,
-  stylesheets: ["chrome://browser/skin/devtools/light-theme.css"],
+  stylesheets: ["chrome://devtools/skin/themes/light-theme.css"],
   classList: ["theme-light"],
 };
 
 exports.defaultThemes = [
   Tools.darkTheme,
   Tools.lightTheme,
 ];
 
--- a/devtools/client/eyedropper/eyedropper.xul
+++ b/devtools/client/eyedropper/eyedropper.xul
@@ -1,18 +1,18 @@
 <?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/. -->
 
 <!DOCTYPE window []>
 
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/eyedropper.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/eyedropper.css" type="text/css"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <commandset id="eyedropper-commandset">
     <command id="eyedropper-cmd-close"
              oncommand="void(0);"/>
     <command id="eyedropper-cmd-copy"
              oncommand="void(0);"/>
   </commandset>
--- a/devtools/client/fontinspector/font-inspector.xhtml
+++ b/devtools/client/fontinspector/font-inspector.xhtml
@@ -7,18 +7,18 @@
  %fontinspectorDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>&title;</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link rel="stylesheet" href="font-inspector.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/font-inspector.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/font-inspector.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
   </head>
   <body class="theme-sidebar devtools-monospace" role="application">
     <script type="application/javascript;version=1.8" src="font-inspector.js"></script>
     <div>
       <div class="devtools-toolbar preview-input-toolbar">
         <div class="devtools-searchbox">
           <input id="preview-text-input"
--- a/devtools/client/framework/connect/connect.xhtml
+++ b/devtools/client/framework/connect/connect.xhtml
@@ -7,17 +7,17 @@
 <!ENTITY % connectionDTD SYSTEM "chrome://browser/locale/devtools/connection-screen.dtd" >
  %connectionDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <head>
     <title>&title;</title>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/dark-theme.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/dark-theme.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/content/framework/connect/connect.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="connect.js"></script>
   </head>
   <body>
     <h1>&header;</h1>
     <section id="connection-form">
       <form validate="validate" action="#">
         <label>
--- a/devtools/client/framework/test/browser_toolbox_sidebar.js
+++ b/devtools/client/framework/test/browser_toolbox_sidebar.js
@@ -1,17 +1,17 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 function test() {
   const Cu = Components.utils;
   let {ToolSidebar} = require("devtools/client/framework/sidebar");
 
   const toolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
-                  "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css' type='text/css'?>" +
+                  "<?xml-stylesheet href='chrome://devtools/skin/themes/common.css' type='text/css'?>" +
                   "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>" +
                   "<hbox flex='1'><description flex='1'>foo</description><splitter class='devtools-side-splitter'/>" +
                   "<tabbox flex='1' id='sidebar' class='devtools-sidebar-tabs'><tabs/><tabpanels flex='1'/></tabbox>" +
                   "</hbox>" +
                   "</window>";
 
   const tab1URL = "data:text/html;charset=utf8,<title>1</title><p>1</p>";
   const tab2URL = "data:text/html;charset=utf8,<title>2</title><p>2</p>";
--- a/devtools/client/framework/test/browser_toolbox_sidebar_events.js
+++ b/devtools/client/framework/test/browser_toolbox_sidebar_events.js
@@ -1,17 +1,17 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 function test() {
   const Cu = Components.utils;
   const { ToolSidebar } = require("devtools/client/framework/sidebar");
 
   const toolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
-                  "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css' type='text/css'?>" +
+                  "<?xml-stylesheet href='chrome://devtools/skin/themes/common.css' type='text/css'?>" +
                   "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>" +
                   "<hbox flex='1'><description flex='1'>foo</description><splitter class='devtools-side-splitter'/>" +
                   "<tabbox flex='1' id='sidebar' class='devtools-sidebar-tabs'><tabs/><tabpanels flex='1'/></tabbox>" +
                   "</hbox>" +
                   "</window>";
 
   const tab1URL = "data:text/html;charset=utf8,<title>1</title><p>1</p>";
 
--- a/devtools/client/framework/test/browser_toolbox_sidebar_existing_tabs.js
+++ b/devtools/client/framework/test/browser_toolbox_sidebar_existing_tabs.js
@@ -2,17 +2,17 @@
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 "use strict";
 
 // Test that the sidebar widget auto-registers existing tabs.
 
 const {ToolSidebar} = require("devtools/client/framework/sidebar");
 
 const testToolURL = "data:text/xml;charset=utf8,<?xml version='1.0'?>" +
-                "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css' type='text/css'?>" +
+                "<?xml-stylesheet href='chrome://devtools/skin/themes/common.css' type='text/css'?>" +
                 "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>" +
                 "<hbox flex='1'><description flex='1'>test tool</description>" +
                 "<splitter class='devtools-side-splitter'/>" +
                 "<tabbox flex='1' id='sidebar' class='devtools-sidebar-tabs'>" +
                 "<tabs><tab id='tab1' label='tab 1'></tab><tab id='tab2' label='tab 2'></tab></tabs>" +
                 "<tabpanels flex='1'><tabpanel id='tabpanel1'>tab 1</tabpanel><tabpanel id='tabpanel2'>tab 2</tabpanel></tabpanels>" +
                 "</tabbox></hbox></window>";
 
--- a/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul
+++ b/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul
@@ -1,16 +1,16 @@
 <?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/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
   <box flex="1" class="devtools-responsive-container theme-body">
     <vbox flex="1" class="devtools-main-content" id="content">test</vbox>
     <splitter class="devtools-side-splitter"/>
     <tabbox flex="1" id="sidebar" class="devtools-sidebar-tabs">
       <tabs/>
       <tabpanels flex="1"/>
--- a/devtools/client/framework/toolbox.xul
+++ b/devtools/client/framework/toolbox.xul
@@ -1,14 +1,14 @@
 <?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/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <!DOCTYPE window [
 <!ENTITY % toolboxDTD SYSTEM "chrome://browser/locale/devtools/toolbox.dtd" >
 %toolboxDTD;
 <!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
 %editMenuStrings;
--- a/devtools/client/inspector/inspector.xul
+++ b/devtools/client/inspector/inspector.xul
@@ -1,18 +1,18 @@
 <?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/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/inspector/inspector.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/inspector.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/inspector.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/inspector.dtd" >
    %inspectorDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <script type="application/javascript;version=1.8"
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -152,8 +152,201 @@ devtools.jar:
     content/shared/widgets/cubic-bezier.css (shared/widgets/cubic-bezier.css)
     content/shared/widgets/mdn-docs-frame.xhtml (shared/widgets/mdn-docs-frame.xhtml)
     content/shared/widgets/mdn-docs.css (shared/widgets/mdn-docs.css)
     content/shared/widgets/filter-frame.xhtml (shared/widgets/filter-frame.xhtml)
     content/shared/widgets/filter-widget.css (shared/widgets/filter-widget.css)
     content/eyedropper/eyedropper.xul (eyedropper/eyedropper.xul)
     content/eyedropper/crosshairs.css (eyedropper/crosshairs.css)
     content/eyedropper/nocursor.css (eyedropper/nocursor.css)
+%   skin devtools classic/1.0 %skin/
+*   skin/themes/common.css (themes/common.css)
+*   skin/themes/dark-theme.css (themes/dark-theme.css)
+*   skin/themes/light-theme.css (themes/light-theme.css)
+    skin/themes/images/add.svg (themes/images/add.svg)
+    skin/themes/images/filters.svg (themes/images/filters.svg)
+    skin/themes/images/filter-swatch.svg (themes/images/filter-swatch.svg)
+    skin/themes/images/pseudo-class.svg (themes/images/pseudo-class.svg)
+    skin/themes/images/controls.png (themes/images/controls.png)
+    skin/themes/images/controls@2x.png (themes/images/controls@2x.png)
+    skin/themes/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
+    skin/themes/images/performance-icons.svg (themes/images/performance-icons.svg)
+    skin/themes/images/newtab.png (themes/images/newtab.png)
+    skin/themes/images/newtab@2x.png (themes/images/newtab@2x.png)
+    skin/themes/images/newtab-inverted.png (themes/images/newtab-inverted.png)
+    skin/themes/images/newtab-inverted@2x.png (themes/images/newtab-inverted@2x.png)
+*   skin/themes/widgets.css (themes/widgets.css)
+    skin/themes/images/power.svg (themes/images/power.svg)
+    skin/themes/images/filetypes/dir-close.svg (themes/images/filetypes/dir-close.svg)
+    skin/themes/images/filetypes/dir-open.svg (themes/images/filetypes/dir-open.svg)
+    skin/themes/images/filetypes/globe.svg (themes/images/filetypes/globe.svg)
+    skin/themes/images/filetypes/store.svg (themes/images/filetypes/store.svg)
+    skin/themes/images/commandline-icon.png (themes/images/commandline-icon.png)
+    skin/themes/images/commandline-icon@2x.png (themes/images/commandline-icon@2x.png)
+    skin/themes/images/alerticon-warning.png (themes/images/alerticon-warning.png)
+    skin/themes/images/alerticon-warning@2x.png (themes/images/alerticon-warning@2x.png)
+*   skin/themes/ruleview.css (themes/ruleview.css)
+    skin/themes/commandline.css (themes/commandline.css)
+    skin/themes/images/command-paintflashing.png (themes/images/command-paintflashing.png)
+    skin/themes/images/command-paintflashing@2x.png (themes/images/command-paintflashing@2x.png)
+    skin/themes/images/command-screenshot.png (themes/images/command-screenshot.png)
+    skin/themes/images/command-screenshot@2x.png (themes/images/command-screenshot@2x.png)
+    skin/themes/images/command-responsivemode.png (themes/images/command-responsivemode.png)
+    skin/themes/images/command-responsivemode@2x.png (themes/images/command-responsivemode@2x.png)
+    skin/themes/images/command-scratchpad.png (themes/images/command-scratchpad.png)
+    skin/themes/images/command-scratchpad@2x.png (themes/images/command-scratchpad@2x.png)
+    skin/themes/images/command-tilt.png (themes/images/command-tilt.png)
+    skin/themes/images/command-tilt@2x.png (themes/images/command-tilt@2x.png)
+    skin/themes/images/command-pick.png (themes/images/command-pick.png)
+    skin/themes/images/command-pick@2x.png (themes/images/command-pick@2x.png)
+    skin/themes/images/command-frames.png (themes/images/command-frames.png)
+    skin/themes/images/command-frames@2x.png (themes/images/command-frames@2x.png)
+    skin/themes/images/command-console.png (themes/images/command-console.png)
+    skin/themes/images/command-console@2x.png (themes/images/command-console@2x.png)
+    skin/themes/images/command-eyedropper.png (themes/images/command-eyedropper.png)
+    skin/themes/images/command-eyedropper@2x.png (themes/images/command-eyedropper@2x.png)
+    skin/themes/images/command-rulers.png (themes/images/command-rulers.png)
+    skin/themes/images/command-rulers@2x.png (themes/images/command-rulers@2x.png)
+    skin/themes/markup-view.css (themes/markup-view.css)
+    skin/themes/images/editor-error.png (themes/images/editor-error.png)
+    skin/themes/images/editor-breakpoint.png (themes/images/editor-breakpoint.png)
+    skin/themes/images/editor-breakpoint@2x.png (themes/images/editor-breakpoint@2x.png)
+    skin/themes/images/editor-debug-location.png (themes/images/editor-debug-location.png)
+    skin/themes/images/editor-debug-location@2x.png (themes/images/editor-debug-location@2x.png)
+*   skin/themes/webconsole.css (themes/webconsole.css)
+    skin/themes/images/webconsole.svg (themes/images/webconsole.svg)
+    skin/themes/images/breadcrumbs-divider@2x.png (themes/images/breadcrumbs-divider@2x.png)
+    skin/themes/images/breadcrumbs-scrollbutton.png (themes/images/breadcrumbs-scrollbutton.png)
+    skin/themes/images/breadcrumbs-scrollbutton@2x.png (themes/images/breadcrumbs-scrollbutton@2x.png)
+    skin/themes/animationinspector.css (themes/animationinspector.css)
+    skin/themes/eyedropper.css (themes/eyedropper.css)
+*   skin/themes/canvasdebugger.css (themes/canvasdebugger.css)
+    skin/themes/debugger.css (themes/debugger.css)
+*   skin/themes/netmonitor.css (themes/netmonitor.css)
+    skin/themes/performance.css (themes/performance.css)
+    skin/themes/memory.css (themes/memory.css)
+    skin/themes/promisedebugger.css (themes/promisedebugger.css)
+    skin/themes/images/timeline-filter.svg (themes/images/timeline-filter.svg)
+*   skin/themes/scratchpad.css (themes/scratchpad.css)
+    skin/themes/shadereditor.css (themes/shadereditor.css)
+    skin/themes/storage.css (themes/storage.css)
+*   skin/themes/splitview.css (themes/splitview.css)
+    skin/themes/styleeditor.css (themes/styleeditor.css)
+    skin/themes/webaudioeditor.css (themes/webaudioeditor.css)
+    skin/themes/images/magnifying-glass.png (themes/images/magnifying-glass.png)
+    skin/themes/images/magnifying-glass@2x.png (themes/images/magnifying-glass@2x.png)
+    skin/themes/images/magnifying-glass-light.png (themes/images/magnifying-glass-light.png)
+    skin/themes/images/magnifying-glass-light@2x.png (themes/images/magnifying-glass-light@2x.png)
+    skin/themes/images/itemToggle.png (themes/images/itemToggle.png)
+    skin/themes/images/itemToggle@2x.png (themes/images/itemToggle@2x.png)
+    skin/themes/images/itemArrow-dark-rtl.svg (themes/images/itemArrow-dark-rtl.svg)
+    skin/themes/images/itemArrow-dark-ltr.svg (themes/images/itemArrow-dark-ltr.svg)
+    skin/themes/images/itemArrow-rtl.svg (themes/images/itemArrow-rtl.svg)
+    skin/themes/images/itemArrow-ltr.svg (themes/images/itemArrow-ltr.svg)
+    skin/themes/images/noise.png (themes/images/noise.png)
+    skin/themes/images/dropmarker.svg (themes/images/dropmarker.svg)
+    skin/themes/layoutview.css (themes/layoutview.css)
+    skin/themes/images/debugger-collapse.png (themes/images/debugger-collapse.png)
+    skin/themes/images/debugger-collapse@2x.png (themes/images/debugger-collapse@2x.png)
+    skin/themes/images/debugger-expand.png (themes/images/debugger-expand.png)
+    skin/themes/images/debugger-expand@2x.png (themes/images/debugger-expand@2x.png)
+    skin/themes/images/debugger-pause.png (themes/images/debugger-pause.png)
+    skin/themes/images/debugger-pause@2x.png (themes/images/debugger-pause@2x.png)
+    skin/themes/images/debugger-play.png (themes/images/debugger-play.png)
+    skin/themes/images/debugger-play@2x.png (themes/images/debugger-play@2x.png)
+    skin/themes/images/fast-forward.png (themes/images/fast-forward.png)
+    skin/themes/images/fast-forward@2x.png (themes/images/fast-forward@2x.png)
+    skin/themes/images/rewind.png (themes/images/rewind.png)
+    skin/themes/images/rewind@2x.png (themes/images/rewind@2x.png)
+    skin/themes/images/debugger-step-in.png (themes/images/debugger-step-in.png)
+    skin/themes/images/debugger-step-in@2x.png (themes/images/debugger-step-in@2x.png)
+    skin/themes/images/debugger-step-out.png (themes/images/debugger-step-out.png)
+    skin/themes/images/debugger-step-out@2x.png (themes/images/debugger-step-out@2x.png)
+    skin/themes/images/debugger-step-over.png (themes/images/debugger-step-over.png)
+    skin/themes/images/debugger-step-over@2x.png (themes/images/debugger-step-over@2x.png)
+    skin/themes/images/debugger-blackbox.png (themes/images/debugger-blackbox.png)
+    skin/themes/images/debugger-blackbox@2x.png (themes/images/debugger-blackbox@2x.png)
+    skin/themes/images/debugger-prettyprint.png (themes/images/debugger-prettyprint.png)
+    skin/themes/images/debugger-prettyprint@2x.png (themes/images/debugger-prettyprint@2x.png)
+    skin/themes/images/debugger-toggleBreakpoints.png (themes/images/debugger-toggleBreakpoints.png)
+    skin/themes/images/debugger-toggleBreakpoints@2x.png (themes/images/debugger-toggleBreakpoints@2x.png)
+    skin/themes/images/tracer-icon.png (themes/images/tracer-icon.png)
+    skin/themes/images/tracer-icon@2x.png (themes/images/tracer-icon@2x.png)
+    skin/themes/images/responsivemode/responsive-se-resizer.png (themes/images/responsivemode/responsive-se-resizer.png)
+    skin/themes/images/responsivemode/responsive-se-resizer@2x.png (themes/images/responsivemode/responsive-se-resizer@2x.png)
+    skin/themes/images/responsivemode/responsive-vertical-resizer.png (themes/images/responsivemode/responsive-vertical-resizer.png)
+    skin/themes/images/responsivemode/responsive-vertical-resizer@2x.png (themes/images/responsivemode/responsive-vertical-resizer@2x.png)
+    skin/themes/images/responsivemode/responsive-horizontal-resizer.png (themes/images/responsivemode/responsive-horizontal-resizer.png)
+    skin/themes/images/responsivemode/responsive-horizontal-resizer@2x.png (themes/images/responsivemode/responsive-horizontal-resizer@2x.png)
+    skin/themes/images/responsivemode/responsiveui-rotate.png (themes/images/responsivemode/responsiveui-rotate.png)
+    skin/themes/images/responsivemode/responsiveui-rotate@2x.png (themes/images/responsivemode/responsiveui-rotate@2x.png)
+    skin/themes/images/responsivemode/responsiveui-touch.png (themes/images/responsivemode/responsiveui-touch.png)
+    skin/themes/images/responsivemode/responsiveui-touch@2x.png (themes/images/responsivemode/responsiveui-touch@2x.png)
+    skin/themes/images/responsivemode/responsiveui-screenshot.png (themes/images/responsivemode/responsiveui-screenshot.png)
+    skin/themes/images/responsivemode/responsiveui-screenshot@2x.png (themes/images/responsivemode/responsiveui-screenshot@2x.png)
+    skin/themes/images/responsivemode/responsiveui-home.png (themes/images/responsivemode/responsiveui-home.png)
+    skin/themes/images/toggle-tools.png (themes/images/toggle-tools.png)
+    skin/themes/images/toggle-tools@2x.png (themes/images/toggle-tools@2x.png)
+    skin/themes/images/dock-bottom@2x.png (themes/images/dock-bottom@2x.png)
+    skin/themes/images/dock-bottom-minimize@2x.png (themes/images/dock-bottom-minimize@2x.png)
+    skin/themes/images/dock-bottom-maximize@2x.png (themes/images/dock-bottom-maximize@2x.png)
+    skin/themes/images/dock-side@2x.png (themes/images/dock-side@2x.png)
+*   skin/themes/floating-scrollbars.css (themes/floating-scrollbars.css)
+    skin/themes/floating-scrollbars-light.css (themes/floating-scrollbars-light.css)
+*   skin/themes/inspector.css (themes/inspector.css)
+    skin/themes/images/profiler-stopwatch.svg (themes/images/profiler-stopwatch.svg)
+    skin/themes/images/profiler-stopwatch-checked.svg (themes/images/profiler-stopwatch-checked.svg)
+    skin/themes/images/tool-options.svg (themes/images/tool-options.svg)
+    skin/themes/images/tool-webconsole.svg (themes/images/tool-webconsole.svg)
+    skin/themes/images/tool-debugger.svg (themes/images/tool-debugger.svg)
+    skin/themes/images/tool-debugger-paused.svg (themes/images/tool-debugger-paused.svg)
+    skin/themes/images/tool-inspector.svg (themes/images/tool-inspector.svg)
+    skin/themes/images/tool-shadereditor.svg (themes/images/tool-shadereditor.svg)
+    skin/themes/images/tool-styleeditor.svg (themes/images/tool-styleeditor.svg)
+    skin/themes/images/tool-storage.svg (themes/images/tool-storage.svg)
+    skin/themes/images/tool-profiler.svg (themes/images/tool-profiler.svg)
+    skin/themes/images/tool-profiler-active.svg (themes/images/tool-profiler-active.svg)
+    skin/themes/images/tool-network.svg (themes/images/tool-network.svg)
+    skin/themes/images/tool-scratchpad.svg (themes/images/tool-scratchpad.svg)
+    skin/themes/images/tool-webaudio.svg (themes/images/tool-webaudio.svg)
+    skin/themes/images/close.png (themes/images/close.png)
+    skin/themes/images/close@2x.png (themes/images/close@2x.png)
+    skin/themes/images/vview-delete.png (themes/images/vview-delete.png)
+    skin/themes/images/vview-delete@2x.png (themes/images/vview-delete@2x.png)
+    skin/themes/images/vview-edit.png (themes/images/vview-edit.png)
+    skin/themes/images/vview-edit@2x.png (themes/images/vview-edit@2x.png)
+    skin/themes/images/vview-lock.png (themes/images/vview-lock.png)
+    skin/themes/images/vview-lock@2x.png (themes/images/vview-lock@2x.png)
+    skin/themes/images/vview-open-inspector.png (themes/images/vview-open-inspector.png)
+    skin/themes/images/vview-open-inspector@2x.png (themes/images/vview-open-inspector@2x.png)
+    skin/themes/images/cubic-bezier-swatch.png (themes/images/cubic-bezier-swatch.png)
+    skin/themes/images/cubic-bezier-swatch@2x.png (themes/images/cubic-bezier-swatch@2x.png)
+    skin/themes/images/undock@2x.png (themes/images/undock@2x.png)
+    skin/themes/font-inspector.css (themes/font-inspector.css)
+    skin/themes/computedview.css (themes/computedview.css)
+    skin/themes/images/arrow-e.png (themes/images/arrow-e.png)
+    skin/themes/images/arrow-e@2x.png (themes/images/arrow-e@2x.png)
+    skin/themes/projecteditor/projecteditor.css (themes/projecteditor/projecteditor.css)
+    skin/themes/app-manager/connection-footer.css (themes/app-manager/connection-footer.css)
+    skin/themes/app-manager/index.css (themes/app-manager/index.css)
+    skin/themes/app-manager/device.css (themes/app-manager/device.css)
+    skin/themes/app-manager/projects.css (themes/app-manager/projects.css)
+    skin/themes/app-manager/help.css (themes/app-manager/help.css)
+    skin/themes/app-manager/images/warning.svg (themes/app-manager/images/warning.svg)
+    skin/themes/app-manager/images/error.svg (themes/app-manager/images/error.svg)
+    skin/themes/app-manager/images/plus.svg (themes/app-manager/images/plus.svg)
+    skin/themes/app-manager/images/remove.svg (themes/app-manager/images/remove.svg)
+    skin/themes/app-manager/images/add.svg (themes/app-manager/images/add.svg)
+    skin/themes/app-manager/images/index-icons.svg (themes/app-manager/images/index-icons.svg)
+    skin/themes/app-manager/images/rocket.svg (themes/app-manager/images/rocket.svg)
+    skin/themes/app-manager/images/noise.png (themes/app-manager/images/noise.png)
+    skin/themes/app-manager/images/default-app-icon.png (themes/app-manager/images/default-app-icon.png)
+    skin/themes/images/search-clear-failed.svg (themes/images/search-clear-failed.svg)
+    skin/themes/images/search-clear-light.svg (themes/images/search-clear-light.svg)
+    skin/themes/images/search-clear-dark.svg (themes/images/search-clear-dark.svg)
+    skin/themes/tooltip/arrow-horizontal-dark.png (themes/tooltip/arrow-horizontal-dark.png)
+    skin/themes/tooltip/arrow-horizontal-dark@2x.png (themes/tooltip/arrow-horizontal-dark@2x.png)
+    skin/themes/tooltip/arrow-vertical-dark.png (themes/tooltip/arrow-vertical-dark.png)
+    skin/themes/tooltip/arrow-vertical-dark@2x.png (themes/tooltip/arrow-vertical-dark@2x.png)
+    skin/themes/tooltip/arrow-horizontal-light.png (themes/tooltip/arrow-horizontal-light.png)
+    skin/themes/tooltip/arrow-horizontal-light@2x.png (themes/tooltip/arrow-horizontal-light@2x.png)
+    skin/themes/tooltip/arrow-vertical-light.png (themes/tooltip/arrow-vertical-light.png)
+    skin/themes/tooltip/arrow-vertical-light@2x.png (themes/tooltip/arrow-vertical-light@2x.png)
--- a/devtools/client/layoutview/view.xhtml
+++ b/devtools/client/layoutview/view.xhtml
@@ -12,18 +12,18 @@
   <head>
     <title>&title;</title>
 
     <script type="application/javascript;version=1.8"
             src="chrome://devtools/content/shared/theme-switching.js"/>
 
     <script type="application/javascript;version=1.8" src="view.js"></script>
 
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/layoutview.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/layoutview.css" type="text/css"/>
 
   </head>
   <body class="theme-sidebar devtools-monospace">
 
     <p id="header">
       <span id="element-size"></span><span id="element-position"></span>
     </p>
 
--- a/devtools/client/markupview/markup-view.xhtml
+++ b/devtools/client/markupview/markup-view.xhtml
@@ -3,18 +3,18 @@
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <link rel="stylesheet" href="chrome://devtools/content/markupview/markup-view.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://browser/skin/devtools/markup-view.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/themes/markup-view.css" type="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
 
   <script type="application/javascript;version=1.8"
           src="chrome://devtools/content/shared/theme-switching.js"/>
 
 </head>
 <body class="theme-body devtools-monospace" role="application">
 
 <!-- NOTE THAT WE MAKE EXTENSIVE USE OF HTML COMMENTS IN THIS FILE IN ORDER -->
--- a/devtools/client/memory/memory.xhtml
+++ b/devtools/client/memory/memory.xhtml
@@ -8,19 +8,19 @@
 
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.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 xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <link rel="stylesheet" href="chrome://browser/skin/" type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/widgets.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/memory.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/widgets.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/memory.css" type="text/css"/>
 
     <script type="application/javascript;version=1.8"
             src="chrome://devtools/content/shared/theme-switching.js"></script>
     <script type="application/javascript;version=1.8"
             src="controller.js"></script>
   </head>
   <body class="theme-body">
     <toolbar class="devtools-toolbar">
--- a/devtools/client/memory/test/mochitest/test_census-view-01.html
+++ b/devtools/client/memory/test/mochitest/test_census-view-01.html
@@ -3,20 +3,20 @@
 <!--
 Bug 1067491 - Test taking a census over the RDP.
 -->
 <head>
   <meta charset="utf-8">
   <title>Census Tree 01</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css" />
-  <link href="chrome://browser/skin/devtools/light-theme.css" type="text/css" />
-  <link href="chrome://browser/skin/devtools/common.css" type="text/css" />
-  <link href="chrome://browser/skin/devtools/widgets.css" type="text/css" />
-  <link href="chrome://browser/skin/devtools/memory.css" type="text/css" />
+  <link href="chrome://devtools/skin/themes/light-theme.css" type="text/css" />
+  <link href="chrome://devtools/skin/themes/common.css" type="text/css" />
+  <link href="chrome://devtools/skin/themes/widgets.css" type="text/css" />
+  <link href="chrome://devtools/skin/themes/memory.css" type="text/css" />
 </head>
 <body>
 <ul id="container" style="width:100%;height:300px;"></ul>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script>
 window.onload = function() {
   var { CensusTreeNode } = require("devtools/shared/heapsnapshot/census-tree-node");
--- a/devtools/client/netmonitor/netmonitor.xul
+++ b/devtools/client/netmonitor/netmonitor.xul
@@ -1,18 +1,18 @@
 <?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/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/netmonitor/netmonitor.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/netmonitor.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/netmonitor.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % netmonitorDTD SYSTEM "chrome://browser/locale/devtools/netmonitor.dtd">
   %netmonitorDTD;
   <!ENTITY % certManagerDTD SYSTEM "chrome://pippki/locale/certManager.dtd">
   %certManagerDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
--- a/devtools/client/performance/performance.xul
+++ b/devtools/client/performance/performance.xul
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/performance.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/performance.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % performanceDTD SYSTEM "chrome://browser/locale/devtools/performance.dtd">
   %performanceDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <script src="chrome://devtools/content/shared/theme-switching.js"/>
   <script type="application/javascript" src="performance-controller.js"/>
--- a/devtools/client/projecteditor/chrome/content/projecteditor-loader.js
+++ b/devtools/client/projecteditor/chrome/content/projecteditor-loader.js
@@ -3,17 +3,17 @@ const {require} = Cu.import("resource://
 const {FileUtils} = Cu.import("resource://gre/modules/FileUtils.jsm", {});
 const {NetUtil} = Cu.import("resource://gre/modules/NetUtil.jsm", {});
 const promise = require("promise");
 const ProjectEditor = require("devtools/client/projecteditor/lib/projecteditor");
 
 const SAMPLE_PATH = buildTempDirectoryStructure();
 const SAMPLE_NAME = "DevTools Content Application Name";
 const SAMPLE_PROJECT_URL = "data:text/html;charset=utf-8,<body><h1>Project Overview</h1></body>";
-const SAMPLE_ICON = "chrome://browser/skin/devtools/tool-debugger.svg";
+const SAMPLE_ICON = "chrome://devtools/skin/themes/images/tool-debugger.svg";
 
 /**
  * Create a workspace for working on projecteditor, available at
  * chrome://devtools/content/projecteditor/chrome/content/projecteditor-loader.xul.
  * This emulates the integration points that the app manager uses.
  */
 var appManagerEditor;
 
--- a/devtools/client/projecteditor/chrome/content/projecteditor.xul
+++ b/devtools/client/projecteditor/chrome/content/projecteditor.xul
@@ -1,18 +1,18 @@
 <?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/. -->
-<?xml-stylesheet href="chrome://browser/skin/devtools/light-theme.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/projecteditor/projecteditor.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/light-theme.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/projecteditor/projecteditor.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/debugger/debugger.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/markupview/markup-view.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/markup-view.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/markup-view.css" type="text/css"?>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <!DOCTYPE window [
 <!ENTITY % scratchpadDTD SYSTEM "chrome://browser/locale/devtools/scratchpad.dtd" >
  %scratchpadDTD;
 <!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
 %editMenuStrings;
--- a/devtools/client/projecteditor/lib/plugins/app-manager/plugin.js
+++ b/devtools/client/projecteditor/lib/plugins/app-manager/plugin.js
@@ -1,16 +1,16 @@
 const { Cu } = require("chrome");
 const { Class } = require("sdk/core/heritage");
 const { EventTarget } = require("sdk/event/target");
 const { emit } = require("sdk/event/core");
 const promise = require("promise");
 var { registerPlugin, Plugin } = require("devtools/client/projecteditor/lib/plugins/core");
 const { AppProjectEditor } = require("./app-project-editor");
-const OPTION_URL = "chrome://browser/skin/devtools/tool-options.svg";
+const OPTION_URL = "chrome://devtools/skin/themes/images/tool-options.svg";
 const {Services} = Cu.import("resource://gre/modules/Services.jsm");
 const Strings = Services.strings.createBundle("chrome://browser/locale/devtools/webide.properties");
 
 var AppManagerRenderer = Class({
   extends: Plugin,
 
   isAppManagerProject: function() {
     return !!this.host.project.appManagerOpts;
--- a/devtools/client/projecteditor/test/browser_projecteditor_app_options.js
+++ b/devtools/client/projecteditor/test/browser_projecteditor_app_options.js
@@ -15,73 +15,73 @@ add_task(function*() {
   projecteditor.project.once("resource-added", () => {
     info ("A resource has been added");
     resourceBeenAdded.resolve();
   });
 
   info ("About to set project to: " + TEMP_PATH);
   yield projecteditor.setProjectToAppPath(TEMP_PATH, {
     name: "Test",
-    iconUrl: "chrome://browser/skin/devtools/tool-options.svg",
+    iconUrl: "chrome://devtools/skin/themes/images/tool-options.svg",
     projectOverviewURL: SAMPLE_WEBAPP_URL
   });
 
   info ("Making sure a resource has been added before continuing");
   yield resourceBeenAdded.promise;
 
   info ("From now on, if a resource is added it should fail");
   projecteditor.project.on("resource-added", failIfResourceAdded);
 
   info ("Getting ahold and validating the project header DOM");
   let header = projecteditor.document.querySelector(".entry-group-title");
   let image = header.querySelector(".project-image");
   let nameLabel = header.querySelector(".project-name-label");
   let statusElement = header.querySelector(".project-status");
   is (statusElement.getAttribute("status"), "unknown", "The status starts out as unknown.");
   is (nameLabel.textContent, "Test", "The name label has been set correctly");
-  is (image.getAttribute("src"), "chrome://browser/skin/devtools/tool-options.svg", "The icon has been set correctly");
+  is (image.getAttribute("src"), "chrome://devtools/skin/themes/images/tool-options.svg", "The icon has been set correctly");
 
   info ("About to set project with new options.");
   yield projecteditor.setProjectToAppPath(TEMP_PATH, {
     name: "Test2",
-    iconUrl: "chrome://browser/skin/devtools/tool-inspector.svg",
+    iconUrl: "chrome://devtools/skin/themes/images/tool-inspector.svg",
     projectOverviewURL: SAMPLE_WEBAPP_URL,
     validationStatus: "error"
   });
 
   info ("Getting ahold of and validating the project header DOM");
   is (statusElement.getAttribute("status"), "error", "The status has been set correctly.");
   is (nameLabel.textContent, "Test2", "The name label has been set correctly");
-  is (image.getAttribute("src"), "chrome://browser/skin/devtools/tool-inspector.svg", "The icon has been set correctly");
+  is (image.getAttribute("src"), "chrome://devtools/skin/themes/images/tool-inspector.svg", "The icon has been set correctly");
 
   info ("About to set project with new options.");
   yield projecteditor.setProjectToAppPath(TEMP_PATH, {
     name: "Test3",
-    iconUrl: "chrome://browser/skin/devtools/tool-webconsole.svg",
+    iconUrl: "chrome://devtools/skin/themes/images/tool-webconsole.svg",
     projectOverviewURL: SAMPLE_WEBAPP_URL,
     validationStatus: "warning"
   });
 
   info ("Getting ahold of and validating the project header DOM");
   is (statusElement.getAttribute("status"), "warning", "The status has been set correctly.");
   is (nameLabel.textContent, "Test3", "The name label has been set correctly");
-  is (image.getAttribute("src"), "chrome://browser/skin/devtools/tool-webconsole.svg", "The icon has been set correctly");
+  is (image.getAttribute("src"), "chrome://devtools/skin/themes/images/tool-webconsole.svg", "The icon has been set correctly");
 
   info ("About to set project with new options.");
   yield projecteditor.setProjectToAppPath(TEMP_PATH, {
     name: "Test4",
-    iconUrl: "chrome://browser/skin/devtools/tool-debugger.svg",
+    iconUrl: "chrome://devtools/skin/themes/images/tool-debugger.svg",
     projectOverviewURL: SAMPLE_WEBAPP_URL,
     validationStatus: "valid"
   });
 
   info ("Getting ahold of and validating the project header DOM");
   is (statusElement.getAttribute("status"), "valid", "The status has been set correctly.");
   is (nameLabel.textContent, "Test4", "The name label has been set correctly");
-  is (image.getAttribute("src"), "chrome://browser/skin/devtools/tool-debugger.svg", "The icon has been set correctly");
+  is (image.getAttribute("src"), "chrome://devtools/skin/themes/images/tool-debugger.svg", "The icon has been set correctly");
 
   info ("Test finished, cleaning up");
   projecteditor.project.off("resource-added", failIfResourceAdded);
 });
 
 function failIfResourceAdded() {
   ok (false, "A resource has been added, but it shouldn't have been");
 }
--- a/devtools/client/projecteditor/test/head.js
+++ b/devtools/client/projecteditor/test/head.js
@@ -92,17 +92,17 @@ function addProjectEditorTabForTempDirec
     // Bug 1037292 - The test servers sometimes are unable to
     // write to the temporary directory due to locked files
     // or access denied errors.  Try again if this failed.
     info ("Project Editor temp directory creation failed.  Trying again.");
     TEMP_PATH = buildTempDirectoryStructure();
   }
   let customOpts = {
     name: "Test",
-    iconUrl: "chrome://browser/skin/devtools/tool-options.svg",
+    iconUrl: "chrome://devtools/skin/themes/images/tool-options.svg",
     projectOverviewURL: SAMPLE_WEBAPP_URL
   };
 
   info ("Adding a project editor tab for editing at: " + TEMP_PATH);
   return addProjectEditorTab(opts).then((projecteditor) => {
     return projecteditor.setProjectToAppPath(TEMP_PATH, customOpts).then(() => {
       return projecteditor;
     });
--- a/devtools/client/promisedebugger/promise-debugger.xhtml
+++ b/devtools/client/promisedebugger/promise-debugger.xhtml
@@ -7,17 +7,17 @@
   <!ENTITY % promisedebuggerDTD SYSTEM "chrome://browser/locale/devtools/promisedebugger.dtd">
   %promisedebuggerDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>&title;</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/promisedebugger.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/promisedebugger.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
   </head>
   <body class="devtools-monospace" role="application">
     <script type="application/javascript;version=1.8" src="promise-controller.js"></script>
     <script type="application/javascript;version=1.8" src="promise-panel.js"></script>
   </body>
 </html>
--- a/devtools/client/responsivedesign/responsivedesign-child.js
+++ b/devtools/client/responsivedesign/responsivedesign-child.js
@@ -1,15 +1,15 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const Ci = Components.interfaces;
 const gDeviceSizeWasPageSize = docShell.deviceSizeIsPageSize;
-const gFloatingScrollbarsStylesheet = Services.io.newURI("chrome://browser/skin/devtools/floating-scrollbars.css", null, null);
+const gFloatingScrollbarsStylesheet = Services.io.newURI("chrome://devtools/skin/themes/floating-scrollbars.css", null, null);
 var gRequiresFloatingScrollbars;
 
 var active = false;
 
 addMessageListener("ResponsiveMode:Start", startResponsiveMode);
 addMessageListener("ResponsiveMode:Stop", stopResponsiveMode);
 
 function startResponsiveMode({data:data}) {
--- a/devtools/client/scratchpad/scratchpad.xul
+++ b/devtools/client/scratchpad/scratchpad.xul
@@ -9,18 +9,18 @@
  %scratchpadDTD;
 <!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
 %editMenuStrings;
 <!ENTITY % sourceEditorStrings SYSTEM "chrome://browser/locale/devtools/sourceeditor.dtd">
 %sourceEditorStrings;
 ]>
 
 <?xml-stylesheet href="chrome://global/skin/global.css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/scratchpad.css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/scratchpad.css"?>
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <window id="main-window"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         title="&window.title;"
         windowtype="devtools:scratchpad"
         macanimationtype="document"
         fullscreenbutton="true"
--- a/devtools/client/shadereditor/shadereditor.xul
+++ b/devtools/client/shadereditor/shadereditor.xul
@@ -1,16 +1,16 @@
 <?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/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/shadereditor.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/shadereditor.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % debuggerDTD SYSTEM "chrome://browser/locale/devtools/shadereditor.dtd">
   %debuggerDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
--- a/devtools/client/shared/test/browser_tableWidget_basic.js
+++ b/devtools/client/shared/test/browser_tableWidget_basic.js
@@ -1,19 +1,19 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // Tests that the table widget api works fine
 
 const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
   "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
-  "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css'?>" +
-  "<?xml-stylesheet href='chrome://browser/skin/devtools/light-theme.css'?>" +
-  "<?xml-stylesheet href='chrome://browser/skin/devtools/widgets.css'?>" +
+  "<?xml-stylesheet href='chrome://devtools/skin/themes/common.css'?>" +
+  "<?xml-stylesheet href='chrome://devtools/skin/themes/light-theme.css'?>" +
+  "<?xml-stylesheet href='chrome://devtools/skin/themes/widgets.css'?>" +
   "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" +
   " title='Table Widget' width='600' height='500'>" +
   "<box flex='1' class='theme-light'/></window>";
 const TEST_OPT = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";
 
 const {TableWidget} = require("devtools/client/shared/widgets/TableWidget");
 
 var doc, table;
--- a/devtools/client/shared/test/browser_tableWidget_keyboard_interaction.js
+++ b/devtools/client/shared/test/browser_tableWidget_keyboard_interaction.js
@@ -1,19 +1,19 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // Tests that keyboard interaction works fine with the table widget
 
 const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
   "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
-  "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css'?>" +
-  "<?xml-stylesheet href='chrome://browser/skin/devtools/light-theme.css'?>" +
-  "<?xml-stylesheet href='chrome://browser/skin/devtools/widgets.css'?>" +
+  "<?xml-stylesheet href='chrome://devtools/skin/themes/common.css'?>" +
+  "<?xml-stylesheet href='chrome://devtools/skin/themes/light-theme.css'?>" +
+  "<?xml-stylesheet href='chrome://devtools/skin/themes/widgets.css'?>" +
   "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" +
   " title='Table Widget' width='600' height='500'>" +
   "<box flex='1' class='theme-light'/></window>";
 const TEST_OPT = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";
 
 const {TableWidget} = require("devtools/client/shared/widgets/TableWidget");
 var {Task} = require("resource://gre/modules/Task.jsm");
 
--- a/devtools/client/shared/test/browser_tableWidget_mouse_interaction.js
+++ b/devtools/client/shared/test/browser_tableWidget_mouse_interaction.js
@@ -1,19 +1,19 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // Tests that mosue interaction works fine with the table widget
 
 const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
   "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
-  "<?xml-stylesheet href='chrome://browser/skin/devtools/common.css'?>" +
-  "<?xml-stylesheet href='chrome://browser/skin/devtools/light-theme.css'?>" +
-  "<?xml-stylesheet href='chrome://browser/skin/devtools/widgets.css'?>" +
+  "<?xml-stylesheet href='chrome://devtools/skin/themes/common.css'?>" +
+  "<?xml-stylesheet href='chrome://devtools/skin/themes/light-theme.css'?>" +
+  "<?xml-stylesheet href='chrome://devtools/skin/themes/widgets.css'?>" +
   "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" +
   " title='Table Widget' width='600' height='500'>" +
   "<box flex='1' class='theme-light'/></window>";
 const TEST_OPT = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";
 
 const {TableWidget} = require("devtools/client/shared/widgets/TableWidget");
 const Promise = require("promise");
 
--- a/devtools/client/shared/test/browser_treeWidget_basic.js
+++ b/devtools/client/shared/test/browser_treeWidget_basic.js
@@ -1,17 +1,17 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // Tests that the tree widget api works fine
 
 const TEST_URI = "data:text/html;charset=utf-8,<head><link rel='stylesheet' " +
-  "type='text/css' href='chrome://browser/skin/devtools/common.css'><link " +
-  "rel='stylesheet' type='text/css' href='chrome://browser/skin/devtools/widg" +
+  "type='text/css' href='chrome://devtools/skin/themes/common.css'><link " +
+  "rel='stylesheet' type='text/css' href='chrome://devtools/skin/themes/widg" +
   "ets.css'></head><body><div></div><span></span></body>";
 const {TreeWidget} = require("devtools/client/shared/widgets/TreeWidget");
 
 add_task(function*() {
   yield promiseTab("about:blank");
   let [host, win, doc] = yield createHost("bottom", TEST_URI);
 
   let tree = new TreeWidget(doc.querySelector("div"), {
--- a/devtools/client/shared/test/browser_treeWidget_keyboard_interaction.js
+++ b/devtools/client/shared/test/browser_treeWidget_keyboard_interaction.js
@@ -1,17 +1,17 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // Tests that keyboard interaction works fine with the tree widget
 
 const TEST_URI = "data:text/html;charset=utf-8,<head><link rel='stylesheet' " +
-  "type='text/css' href='chrome://browser/skin/devtools/common.css'><link " +
-  "rel='stylesheet' type='text/css' href='chrome://browser/skin/devtools/widg" +
+  "type='text/css' href='chrome://devtools/skin/themes/common.css'><link " +
+  "rel='stylesheet' type='text/css' href='chrome://devtools/skin/themes/widg" +
   "ets.css'></head><body><div></div><span></span></body>";
 const {TreeWidget} = require("devtools/client/shared/widgets/TreeWidget");
 const Promise = require("promise");
 
 add_task(function*() {
   yield promiseTab("about:blank");
   let [host, win, doc] = yield createHost("bottom", TEST_URI);
 
--- a/devtools/client/shared/test/browser_treeWidget_mouse_interaction.js
+++ b/devtools/client/shared/test/browser_treeWidget_mouse_interaction.js
@@ -1,17 +1,17 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 // Tests that mouse interaction works fine with tree widget
 
 const TEST_URI = "data:text/html;charset=utf-8,<head><link rel='stylesheet' " +
-  "type='text/css' href='chrome://browser/skin/devtools/common.css'><link " +
-  "rel='stylesheet' type='text/css' href='chrome://browser/skin/devtools/widg" +
+  "type='text/css' href='chrome://devtools/skin/themes/common.css'><link " +
+  "rel='stylesheet' type='text/css' href='chrome://devtools/skin/themes/widg" +
   "ets.css'></head><body><div></div><span></span></body>";
 const {TreeWidget} = require("devtools/client/shared/widgets/TreeWidget");
 const Promise = require("promise");
 
 add_task(function*() {
   yield promiseTab("about:blank");
   let [host, win, doc] = yield createHost("bottom", TEST_URI);
 
--- a/devtools/client/shared/test/doc_options-view.xul
+++ b/devtools/client/shared/test/doc_options-view.xul
@@ -1,15 +1,15 @@
 <?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/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <!DOCTYPE window []>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
     <popupset id="options-popupset">
         <menupopup id="options-menupopup" position="before_end">
             <menuitem id="option-autoprettyprint"
--- a/devtools/client/shared/theme-switching.js
+++ b/devtools/client/shared/theme-switching.js
@@ -1,14 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 (function() {
-  const DEVTOOLS_SKIN_URL = "chrome://browser/skin/devtools/";
+  const DEVTOOLS_SKIN_URL = "chrome://devtools/skin/themes/";
   let documentElement = document.documentElement;
 
   function forceStyle() {
     let computedStyle = window.getComputedStyle(documentElement);
     if (!computedStyle) {
       // Null when documentElement is not ready. This method is anyways not
       // required then as scrollbars would be in their state without flushing.
       return;
--- a/devtools/client/shared/theme.js
+++ b/devtools/client/shared/theme.js
@@ -10,18 +10,18 @@
  */
 
 const { Ci, Cu } = require("chrome");
 const { NetUtil } = Cu.import("resource://gre/modules/NetUtil.jsm", {});
 loader.lazyRequireGetter(this, "Services");
 loader.lazyImporter(this, "gDevTools", "resource:///modules/devtools/client/framework/gDevTools.jsm");
 
 const themeURIs = {
-  light: "chrome://browser/skin/devtools/light-theme.css",
-  dark: "chrome://browser/skin/devtools/dark-theme.css"
+  light: "chrome://devtools/skin/themes/light-theme.css",
+  dark: "chrome://devtools/skin/themes/dark-theme.css"
 }
 
 const cachedThemes = {};
 
 /**
  * Returns a string of the file found at URI
  */
 function readURI (uri) {
--- a/devtools/client/shared/widgets/Tooltip.js
+++ b/devtools/client/shared/widgets/Tooltip.js
@@ -1274,17 +1274,17 @@ EventTooltip.prototype = {
       // Header
       let header = doc.createElement("hbox");
       header.className = "event-header devtools-toolbar";
       container.appendChild(header);
 
       if (!listener.hide.debugger) {
         let debuggerIcon = doc.createElement("image");
         debuggerIcon.className = "event-tooltip-debugger-icon";
-        debuggerIcon.setAttribute("src", "chrome://browser/skin/devtools/tool-debugger.svg");
+        debuggerIcon.setAttribute("src", "chrome://devtools/skin/themes/images/tool-debugger.svg");
         let openInDebugger =
             l10n.strings.GetStringFromName("eventsTooltip.openInDebugger");
         debuggerIcon.setAttribute("tooltiptext", openInDebugger);
         header.appendChild(debuggerIcon);
       }
 
       if (!listener.hide.type) {
         let eventTypeLabel = doc.createElement("label");
--- a/devtools/client/shared/widgets/VariablesView.xul
+++ b/devtools/client/shared/widgets/VariablesView.xul
@@ -1,16 +1,16 @@
 <?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/. -->
 <?xml-stylesheet href="chrome://global/skin/global.css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % viewDTD SYSTEM "chrome://browser/locale/devtools/VariablesView.dtd">
   %viewDTD;
 ]>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         title="&PropertiesViewWindowTitle;">
 
   <script type="application/javascript;version=1.8"
--- a/devtools/client/shared/widgets/cubic-bezier-frame.xhtml
+++ b/devtools/client/shared/widgets/cubic-bezier-frame.xhtml
@@ -2,17 +2,17 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-  <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
   <link rel="stylesheet" href="chrome://devtools/content/shared/widgets/cubic-bezier.css" type="text/css"/>
   <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
   <style>
     html, body {
       margin: 0;
       padding: 0;
       overflow: hidden;
       width: 410px;
--- a/devtools/client/shared/widgets/filter-frame.xhtml
+++ b/devtools/client/shared/widgets/filter-frame.xhtml
@@ -5,17 +5,17 @@
 <!DOCTYPE html [
   <!ENTITY % filterwidgetDTD SYSTEM "chrome://browser/locale/devtools/filterwidget.dtd" >
   %filterwidgetDTD;
 ]>
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
     <link rel="stylesheet" href="chrome://devtools/content/shared/widgets/filter-widget.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"></script>
   </head>
   <body>
 
     <div id="container">
       <div class="filters-list">
         <div id="filters"></div>
         <div class="footer">
--- a/devtools/client/shared/widgets/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -190,17 +190,17 @@ html, body {
   display: block;
   order: 3;
   color: var(--theme-body-color-alt);
 }
 
 .remove-button {
   width: 16px;
   height: 16px;
-  background: url(chrome://browser/skin/devtools/close@2x.png);
+  background: url(chrome://devtools/skin/themes/images/close@2x.png);
   background-size: cover;
   font-size: 0;
   border: none;
   cursor: pointer;
 }
 
 .hidden {
   display: none !important;
@@ -226,19 +226,19 @@ html, body {
   height: 16px;
   font-size: 0;
   vertical-align: middle;
   cursor: pointer;
   margin: 0 5px;
 }
 
 .add {
-  background: url(chrome://browser/skin/devtools/add.svg);
+  background: url(chrome://devtools/skin/themes/images/add.svg);
 }
 
 #toggle-presets {
-  background: url(chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class);
+  background: url(chrome://devtools/skin/themes/images/pseudo-class.svg#pseudo-class);
 }
 
 .show-presets #toggle-presets {
-  background: url(chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked);
+  background: url(chrome://devtools/skin/themes/images/pseudo-class.svg#pseudo-class-checked);
   filter: none;
 }
--- a/devtools/client/shared/widgets/graphs-frame.xhtml
+++ b/devtools/client/shared/widgets/graphs-frame.xhtml
@@ -2,18 +2,18 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-  <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://browser/skin/devtools/widgets.css" ype="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/themes/widgets.css" ype="text/css"/>
   <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
   <style>
     body {
       overflow: hidden;
       margin: 0;
       padding: 0;
       font-size: 0;
     }
--- a/devtools/client/shared/widgets/mdn-docs-frame.xhtml
+++ b/devtools/client/shared/widgets/mdn-docs-frame.xhtml
@@ -2,17 +2,17 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-  <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
   <link rel="stylesheet" href="chrome://devtools/content/shared/widgets/mdn-docs.css" type="text/css"/>
   <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
 </head>
 <body class="theme-body">
 
   <div id = "container">
 
     <header>
--- a/devtools/client/shared/widgets/spectrum-frame.xhtml
+++ b/devtools/client/shared/widgets/spectrum-frame.xhtml
@@ -2,17 +2,17 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-  <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
+  <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
   <link rel="stylesheet" href="chrome://devtools/content/shared/widgets/spectrum.css" ype="text/css"/>
   <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
   <style>
     body {
       margin: 0;
       padding: 0;
     }
   </style>
--- a/devtools/client/shared/widgets/spectrum.css
+++ b/devtools/client/shared/widgets/spectrum.css
@@ -1,26 +1,26 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #eyedropper-button {
-  background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-eyedropper.png");
   width: 16px;
   height: 16px;
   background-size: 64px 16px;
   background-position: 0 center;
   background-repeat: no-repeat;
   -moz-margin-start: 5px;
   border-radius: 2px;
   cursor: pointer;
 }
 
 .theme-light #eyedropper-button {
-  filter: url(chrome://browser/skin/devtools/filters.svg#invert);
+  filter: url(chrome://devtools/skin/themes/images/filters.svg#invert);
   border: 1px solid #AAA;
 }
 
 .theme-dark #eyedropper-button {
   border: 1px solid #444;
 }
 
 #eyedropper-button:hover {
@@ -30,17 +30,17 @@
   background-position: -32px center;
 }
 #eyedropper-button[checked=true] {
   background-position: -48px center;
 }
 
 @media (min-resolution: 1.1dppx) {
   #eyedropper-button {
-    background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-eyedropper@2x.png");
   }
 }
 
 /* Mix-in classes */
 
 .spectrum-checker {
   background-color: #eee;
   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
--- a/devtools/client/sourceeditor/codemirror/mozilla.css
+++ b/devtools/client/sourceeditor/codemirror/mozilla.css
@@ -28,56 +28,56 @@
   border-width: 1px 1px 1px 0;
   border-radius: 0 3px 3px 0;
   padding: 0 3px;
   font-size: 10px;
   pointer-events: none;
 }
 
 .error {
-  background-image: url("chrome://browser/skin/devtools/editor-error.png");
+  background-image: url("chrome://devtools/skin/themes/images/editor-error.png");
   opacity: 0.75;
 }
 
 .breakpoint {
-  background-image: url("chrome://browser/skin/devtools/editor-breakpoint.png");
+  background-image: url("chrome://devtools/skin/themes/images/editor-breakpoint.png");
   position: relative;
 }
 
 @media (min-resolution: 1.1dppx) {
   .breakpoint {
-    background-image: url("chrome://browser/skin/devtools/editor-breakpoint@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/editor-breakpoint@2x.png");
   }
 }
 
 .breakpoint[adding] {
   transition: transform .25s;
 }
 
 .debugLocation {
-  background-image: url("chrome://browser/skin/devtools/editor-debug-location.png");
+  background-image: url("chrome://devtools/skin/themes/images/editor-debug-location.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   .debugLocation {
-    background-image: url("chrome://browser/skin/devtools/editor-debug-location@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/editor-debug-location@2x.png");
   }
 }
 
 .breakpoint.debugLocation {
   background-image:
-    url("chrome://browser/skin/devtools/editor-debug-location.png"),
-    url("chrome://browser/skin/devtools/editor-breakpoint.png");
+    url("chrome://devtools/skin/themes/images/editor-debug-location.png"),
+    url("chrome://devtools/skin/themes/images/editor-breakpoint.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   .breakpoint.debugLocation {
     background-image:
-      url("chrome://browser/skin/devtools/editor-debug-location@2x.png"),
-      url("chrome://browser/skin/devtools/editor-breakpoint@2x.png");
+      url("chrome://devtools/skin/themes/images/editor-debug-location@2x.png"),
+      url("chrome://devtools/skin/themes/images/editor-breakpoint@2x.png");
   }
 }
 
 .CodeMirror {
   cursor: text;
 }
 
 .CodeMirror-gutters {
--- a/devtools/client/sourceeditor/editor.js
+++ b/devtools/client/sourceeditor/editor.js
@@ -41,17 +41,17 @@ const L10N = Services.strings.createBund
 
 const { OS } = Services.appinfo;
 
 // CM_STYLES, CM_SCRIPTS and CM_IFRAME represent the HTML,
 // JavaScript and CSS that is injected into an iframe in
 // order to initialize a CodeMirror instance.
 
 const CM_STYLES   = [
-  "chrome://browser/skin/devtools/common.css",
+  "chrome://devtools/skin/themes/common.css",
   "chrome://devtools/content/sourceeditor/codemirror/codemirror.css",
   "chrome://devtools/content/sourceeditor/codemirror/dialog/dialog.css",
   "chrome://devtools/content/sourceeditor/codemirror/mozilla.css"
 ];
 
 const CM_SCRIPTS  = [
   "chrome://devtools/content/shared/theme-switching.js",
   "chrome://devtools/content/sourceeditor/codemirror/codemirror.js",
--- a/devtools/client/storage/storage.xul
+++ b/devtools/client/storage/storage.xul
@@ -1,17 +1,17 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/storage.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/storage.css" type="text/css"?>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <script type="application/javascript;version=1.8"
           src="chrome://devtools/content/shared/theme-switching.js"/>
   <script type="text/javascript" src="chrome://global/content/globalOverlay.js"/>
--- a/devtools/client/styleeditor/styleeditor.xul
+++ b/devtools/client/styleeditor/styleeditor.xul
@@ -11,21 +11,21 @@
  %sourceEditorStrings;
 <!ENTITY % csscoverageDTD SYSTEM "chrome://global/locale/devtools/csscoverage.dtd">
  %csscoverageDTD;
 ]>
 
 <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/splitview.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/splitview.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/splitview.css" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/styleeditor/styleeditor.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/styleeditor.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/styleeditor.css" type="text/css"?>
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <xul:window xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns="http://www.w3.org/1999/xhtml"
         id="style-editor-chrome-window">
 
   <script type="application/javascript;version=1.8"
           src="chrome://devtools/content/shared/theme-switching.js"/>
--- a/devtools/client/styleinspector/computedview.xhtml
+++ b/devtools/client/styleinspector/computedview.xhtml
@@ -23,18 +23,18 @@
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       class="theme-sidebar">
 
   <head>
 
     <title>&computedViewTitle;</title>
 
     <link rel="stylesheet" href="chrome://global/skin/global.css"  type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css"  type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/computedview.css"  type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css"  type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/computedview.css"  type="text/css"/>
 
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
 
     <script type="application/javascript;version=1.8">
       window.setPanel = function(panel, iframe) {
         let {require} = Components.utils.import("resource://gre/modules/devtools/shared/Loader.jsm", {});
         let inspector = require("devtools/client/styleinspector/style-inspector");
         this.computedview = new inspector.ComputedViewTool(panel, window);
--- a/devtools/client/styleinspector/cssruleview.xhtml
+++ b/devtools/client/styleinspector/cssruleview.xhtml
@@ -9,19 +9,19 @@
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       class="theme-sidebar">
   <head>
     <title>&ruleViewTitle;</title>
     <link rel="stylesheet" href="chrome://global/skin/global.css"  type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css"  type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css"  type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/content/styleinspector/ruleview.css"  type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/ruleview.css"  type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/ruleview.css"  type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
     <script type="application/javascript;version=1.8">
       window.setPanel = function(panel, iframe) {
         let {require} = Components.utils.import("resource://gre/modules/devtools/shared/Loader.jsm", {});
         let inspector = require("devtools/client/styleinspector/style-inspector");
         this.ruleview = new inspector.RuleViewTool(panel, window);
       }
       window.onunload = function() {
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -111,44 +111,44 @@ body {
   height: 16px;
   position: absolute;
   left: 50%;
   top: 50%;
   margin: -8px 0 0 -8px;
 }
 
 #element-picker::before {
-  background-image: url("chrome://browser/skin/devtools/command-pick.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-pick.png");
 }
 
 .pause-button::before {
-  background-image: url("debugger-pause.png");
+  background-image: url("images/debugger-pause.png");
 }
 
 #element-picker[checked]::before {
   background-position: -48px 0;
   filter: none; /* Icon is blue when checked, don't invert for light theme */
 }
 
 .pause-button.paused::before {
-  background-image: url("debugger-play.png");
+  background-image: url("images/debugger-play.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   #element-picker::before {
-    background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-pick@2x.png");
     background-size: 64px;
   }
 
   .pause-button::before {
-    background-image: url("debugger-pause@2x.png");
+    background-image: url("images/debugger-pause@2x.png");
   }
 
   .pause-button.paused::before {
-    background-image: url("debugger-play@2x.png");
+    background-image: url("images/debugger-play@2x.png");
   }
 }
 
 /* Animation timeline component */
 
 .animation-timeline {
   height: 100%;
   overflow: hidden;
@@ -351,17 +351,17 @@ body {
   white-space: nowrap;
 }
 
 .animation-target .attribute-name {
   padding-left: 4px;
 }
 
 .animation-target .node-selector {
-  background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
+  background: url("chrome://devtools/skin/themes/images/vview-open-inspector.png") no-repeat 0 0;
   padding-left: 16px;
   margin-right: 5px;
   cursor: pointer;
 }
 
 .animation-target .node-selector:hover {
   background-position: -32px 0;
 }
@@ -385,17 +385,17 @@ body {
 }
 
 .animation-title strong {
   margin: 0 .5em;
 }
 
 .animation-title .meta-data .compositor-icon {
     display: none;
-    background-image: url("animation-fast-track.svg");
+    background-image: url("images/animation-fast-track.svg");
     background-repeat: no-repeat;
     padding-left: 12px;
     /* Make sure the icon is positioned above the timeline range input so that
        its tooltip appears on hover */
     z-index: 1;
     position: relative;
 }
 
@@ -417,48 +417,48 @@ body {
 /* Playback control buttons */
 
 .timeline .playback-controls button {
   flex-grow: 1;
   border-width: 0 1px 0 0;
 }
 
 .timeline .toggle::before {
-  background-image: url(debugger-pause.png);
+  background-image: url(images/debugger-pause.png);
 }
 
 .paused .timeline .toggle::before,
 .finished .timeline .toggle::before {
-  background-image: url(debugger-play.png);
+  background-image: url(images/debugger-play.png);
 }
 
 .timeline .ff::before {
-  background-image: url(fast-forward.png);
+  background-image: url(images/fast-forward.png);
 }
 
 .timeline .rw::before {
-  background-image: url(rewind.png);
+  background-image: url(images/rewind.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   .timeline .toggle::before {
-    background-image: url(debugger-pause@2x.png);
+    background-image: url(images/debugger-pause@2x.png);
   }
 
   .paused .timeline .toggle::before,
   .finished .timeline .toggle::before {
-    background-image: url(debugger-play@2x.png);
+    background-image: url(images/debugger-play@2x.png);
   }
 
   .timeline .ff::before {
-    background-image: url(fast-forward@2x.png);
+    background-image: url(images/fast-forward@2x.png);
   }
 
   .timeline .rw::before {
-    background-image: url(rewind@2x.png);
+    background-image: url(images/rewind@2x.png);
   }
 }
 
 .timeline .rate {
   -moz-appearance: none;
   text-align: center;
   color: var(--theme-body-color);
   border-right: 1px solid var(--theme-splitter-color);
--- a/devtools/client/themes/app-manager/device.css
+++ b/devtools/client/themes/app-manager/device.css
@@ -34,17 +34,17 @@ h1 {
 #content {
   display: flex;
   flex-direction: row;
   height: 100%;
   overflow: hidden;
 }
 
 #detail {
-  background-image: url('noise.png');
+  background-image: url('images/noise.png');
   display: flex;
   flex-grow: 1;
   z-index: 1;
   overflow: hidden;
 }
 
 #meta {
   background-size: 100%;
@@ -376,17 +376,17 @@ body.notconnected > #content {
 #notConnectedMessage > span {
   padding: 20px;
   border: 1px solid #CCC;
   border-radius: 5px;
 }
 
 #notConnectedMessage > span:before {
   content: '';
-  background: url('error.svg') no-repeat;
+  background: url('images/error.svg') no-repeat;
   background-size: 18px;
   height: 24px;
   width: 24px;
   position: relative;
   top: 10px;
   display: inline-block;
 }
 
--- a/devtools/client/themes/app-manager/index.css
+++ b/devtools/client/themes/app-manager/index.css
@@ -60,38 +60,38 @@
 
 .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: url('chrome://devtools/skin/themes/app-manager/images/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-image: url('chrome://devtools/skin/themes/app-manager/images/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-image: url('chrome://devtools/skin/themes/app-manager/images/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;
 }
--- a/devtools/client/themes/app-manager/manifest-editor.inc.css
+++ b/devtools/client/themes/app-manager/manifest-editor.inc.css
@@ -68,15 +68,15 @@
   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");
+  background-image: url("images/app-manager/remove.svg");
 }
 
 .manifest-editor .variables-view-add-property::before {
-  background-image: url("app-manager/add.svg");
+  background-image: url("images/app-manager/add.svg");
   -moz-margin-end: 2px;
 }
--- a/devtools/client/themes/app-manager/projects.css
+++ b/devtools/client/themes/app-manager/projects.css
@@ -97,17 +97,17 @@ strong {
 }
 
 .project-item.selected p,
 .project-item.selected span {
   color: #C1DCF0;
 }
 
 .button-remove {
-  background-image: url('remove.svg');
+  background-image: url('images/remove.svg');
   background-size: 20px;
   width: 20px;
   height: 20px;
   position: absolute;
   right: 5px;
   bottom: 5px;
   visibility: hidden;
   opacity: 0.5;
@@ -184,17 +184,17 @@ strong {
 
 #new-hosted-project-wrapper {
   display: flex;
   align-items: center;
 }
 
 #new-packaged-project,
 #new-hosted-project-click {
-  background-image: url('plus.svg');
+  background-image: url('images/plus.svg');
   background-size: 20px;
   background-repeat: no-repeat;
   cursor: pointer;
 }
 
 #new-hosted-project-click {
   background-position: top right;
   width: 20px;
@@ -218,17 +218,17 @@ strong {
 
 #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-image: url('images/rocket.svg'), url('images/noise.png');
   background-repeat: no-repeat, repeat;
   background-size: 35%, auto;
   background-position: center center, top left;
 }
 
 #lense > div {
   display: flex;
   flex-grow: 1;
@@ -437,21 +437,21 @@ strong {
 }
 
 .project-errors {
   border-left: 3px solid #ED4C62;
   background-color: rgba(237,76,98,0.1);
 }
 
 .project-item-warnings {
-  background-image: url('warning.svg');
+  background-image: url('images/warning.svg');
 }
 
 .project-item-errors {
-  background-image: url('error.svg');
+  background-image: url('images/error.svg');
   color: rgb(227, 79, 34);
 }
 
 .project-item-warnings,
 .project-item-errors {
   background-repeat: no-repeat;
   background-size: 12px;
   background-position: left center;
--- a/devtools/client/themes/canvasdebugger.css
+++ b/devtools/client/themes/canvasdebugger.css
@@ -17,17 +17,17 @@
   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);
+  list-style-image: url(images/profiler-stopwatch.svg);
 }
 
 #empty-notice > button .button-text {
   display: none;
 }
 
 #waiting-notice {
   font-size: 110%;
@@ -49,21 +49,21 @@
 }
 
 .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");
+  list-style-image: url("chrome://devtools/skin/themes/images/profiler-stopwatch.svg");
 }
 
 #record-snapshot[checked] {
-  list-style-image: url("chrome://browser/skin/devtools/profiler-stopwatch-checked.svg");
+  list-style-image: url("chrome://devtools/skin/themes/images/profiler-stopwatch-checked.svg");
 }
 
 /* Snapshots items */
 
 .snapshot-item-thumbnail {
   image-rendering: -moz-crisp-edges;
   background-image: @checkerboardPattern@;
   background-size: 12px 12px, 12px 12px;
@@ -124,48 +124,48 @@
 /* Debugging pane controls */
 
 #debugging-controls .devtools-toolbarbutton > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 #resume {
-  list-style-image: url(debugger-play.png);
+  list-style-image: url(images/debugger-play.png);
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 #step-over {
-  list-style-image: url(debugger-step-over.png);
+  list-style-image: url(images/debugger-step-over.png);
 }
 
 #step-in {
-  list-style-image: url(debugger-step-in.png);
+  list-style-image: url(images/debugger-step-in.png);
 }
 
 #step-out {
-  list-style-image: url(debugger-step-out.png);
+  list-style-image: url(images/debugger-step-out.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   #resume {
-    list-style-image: url(debugger-play@2x.png);
+    list-style-image: url(images/debugger-play@2x.png);
     -moz-image-region: rect(0px,64px,32px,32px);
   }
 
   #step-over {
-    list-style-image: url(debugger-step-over@2x.png);
+    list-style-image: url(images/debugger-step-over@2x.png);
   }
 
   #step-in {
-    list-style-image: url(debugger-step-in@2x.png);
+    list-style-image: url(images/debugger-step-in@2x.png);
   }
 
   #step-out {
-    list-style-image: url(debugger-step-out@2x.png);
+    list-style-image: url(images/debugger-step-out@2x.png);
   }
 }
 
 #debugging-controls > toolbarbutton {
   transition: opacity 0.15s ease-in-out;
 }
 
 #debugging-controls > toolbarbutton[disabled=true] {
@@ -239,25 +239,25 @@
   -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-image: url("images/editor-debug-location.png");
   background-repeat: no-repeat;
   background-position: 6px center;
   background-size: 12px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .selected .call-item-gutter {
-    background-image: url("editor-debug-location@2x.png");
+    background-image: url("images/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);
 }
--- a/devtools/client/themes/commandline.inc.css
+++ b/devtools/client/themes/commandline.inc.css
@@ -47,27 +47,27 @@
 }
 
 .developer-toolbar-button > image {
   margin: auto 10px;
 }
 
 :root[devtoolstheme="light"] #developer-toolbar > toolbarbutton:not([checked=true]) > image,
 :root[devtoolstheme="light"] .gclitoolbar-input-node:not([focused=true])::before  {
-  filter: url("chrome://browser/skin/devtools/filters.svg#invert");
+  filter: url("chrome://devtools/skin/themes/images/filters.svg#invert");
 }
 
 .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");
+  list-style-image: url("chrome://devtools/skin/themes/images/toggle-tools.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
 #developer-toolbar-toolbox-button > label {
   display: none;
 }
 
 #developer-toolbar-toolbox-button:hover {
@@ -79,17 +79,17 @@
 }
 
 #developer-toolbar-toolbox-button[checked=true] {
   -moz-image-region: rect(0px, 64px, 16px, 48px);
 }
 
 @media (min-resolution: 1.1dppx) {
   #developer-toolbar-toolbox-button {
-    list-style-image: url("chrome://browser/skin/devtools/toggle-tools@2x.png");
+    list-style-image: url("chrome://devtools/skin/themes/images/toggle-tools@2x.png");
     -moz-image-region: rect(0px, 32px, 32px, 0px);
   }
 
   #developer-toolbar-toolbox-button:hover {
     -moz-image-region: rect(0px, 64px, 32px, 32px);
   }
 
   #developer-toolbar-toolbox-button:hover:active {
@@ -97,28 +97,28 @@
   }
 
   #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");
+  list-style-image: url("chrome://devtools/skin/themes/images/close.png");
   -moz-appearance: none;
   border: none;
   margin: 0 4px;
   min-width: 16px;
   width: 16px;
   opacity: 0.6;
 }
 
 @media (min-resolution: 1.1dppx) {
   #developer-toolbar-closebutton {
-    list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
+    list-style-image: url("chrome://devtools/skin/themes/images/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;
 }
@@ -185,28 +185,28 @@ html|*#gcli-output-frame {
 
 .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-image: url("chrome://devtools/skin/themes/images/commandline-icon.png");
   background-position: 0 center;
   background-size: 32px 16px;
 }
 
 .gclitoolbar-input-node[focused="true"]::before {
   background-position: -16px center;
 }
 
 @media (min-resolution: 1.1dppx) {
   .gclitoolbar-input-node::before {
-    background-image: url("chrome://browser/skin/devtools/commandline-icon@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/commandline-icon@2x.png");
   }
 }
 
 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
   background-color: var(--selection-background);
   color: var(--selection-color);
   text-shadow: none;
 }
--- a/devtools/client/themes/computedview.css
+++ b/devtools/client/themes/computedview.css
@@ -51,24 +51,24 @@ body {
   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-image: url(images/arrow-e.png);
   background-repeat: no-repeat;
   background-size: 5px 8px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .property-value, .other-property-value {
-    background-image: url(arrow-e@2x.png);
+    background-image: url(images/arrow-e@2x.png);
   }
 }
 
 .property-value {
   width: 100%;
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -297,17 +297,17 @@ div.CodeMirror span.eval-text {
   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-image: url("chrome://devtools/skin/themes/images/controls.png");
   background-size: 56px 28px;
 }
 
 .theme-twisty {
   cursor: pointer;
   background-position: -28px -14px;
 }
 
@@ -332,61 +332,61 @@ div.CodeMirror span.eval-text {
 }
 
 .theme-checkbox[checked] {
   background-position: -42px 0;
 }
 
 @media (min-resolution: 1.1dppx) {
   .theme-twisty, .theme-checkbox {
-    background-image: url("chrome://browser/skin/devtools/controls@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/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");
+  list-style-image: url("chrome://devtools/skin/themes/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");
+  list-style-image: url("chrome://devtools/skin/themes/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");
+  list-style-image: url("chrome://devtools/skin/themes/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");
+  list-style-image: url("chrome://devtools/skin/themes/tooltip/arrow-horizontal-dark.png");
   margin-left: -4px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .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");
+    list-style-image: url("chrome://devtools/skin/themes/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");
+    list-style-image: url("chrome://devtools/skin/themes/tooltip/arrow-horizontal-dark@2x.png");
   }
 }
 
 .theme-tooltip-panel .devtools-tooltip-simple-text {
   color: white;
   border-bottom: 1px solid #434850;
 }
 
--- a/devtools/client/themes/debugger.css
+++ b/devtools/client/themes/debugger.css
@@ -58,42 +58,42 @@
 /* Sources toolbar */
 
 #sources-toolbar > .devtools-toolbarbutton,
 #sources-controls > .devtools-toolbarbutton {
   min-width: 32px;
 }
 
 #black-box {
-  list-style-image: url(debugger-blackbox.png);
+  list-style-image: url(images/debugger-blackbox.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   #black-box {
-    list-style-image: url(debugger-blackbox@2x.png);
+    list-style-image: url(images/debugger-blackbox@2x.png);
   }
 }
 
 #pretty-print {
-  list-style-image: url(debugger-prettyprint.png);
+  list-style-image: url(images/debugger-prettyprint.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   #pretty-print {
-    list-style-image: url(debugger-prettyprint@2x.png);
+    list-style-image: url(images/debugger-prettyprint@2x.png);
   }
 }
 
 #toggle-breakpoints {
-  list-style-image: url(debugger-toggleBreakpoints.png);
+  list-style-image: url(images/debugger-toggleBreakpoints.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   #toggle-breakpoints {
-    list-style-image: url(debugger-toggleBreakpoints@2x.png);
+    list-style-image: url(images/debugger-toggleBreakpoints@2x.png);
   }
 }
 
 #toggle-promise-debugger {
   /* TODO Bug 1186119: Add a toggle promise debugger image */
 }
 
 #sources-toolbar .devtools-toolbarbutton:not([label]) {
@@ -126,26 +126,26 @@
   display: none;
 }
 
 /* Debugger unblackbox button */
 
 #black-boxed-message-button > .button-box > .button-icon {
   width: 16px;
   height: 16px;
-  background-image: url(debugger-blackbox.png);
+  background-image: url(images/debugger-blackbox.png);
   background-position: 0 0;
   background-size: 32px 16px;
   background-repeat: no-repeat;
   -moz-margin-end: 5px;
 }
 
 @media (min-resolution: 1.1dppx) {
   #black-boxed-message-button > .button-box > .button-icon {
-    background-image: url(debugger-blackbox@2x.png);
+    background-image: url(images/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. */
@@ -213,27 +213,27 @@
 #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);
+  list-style-image: url(images/tracer-icon.png);
   -moz-image-region: rect(0px,16px,16px,0px);
 }
 
 #trace[checked] {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 @media (min-resolution: 1.1dppx) {
   #trace {
-    list-style-image: url(tracer-icon@2x.png);
+    list-style-image: url(images/tracer-icon@2x.png);
     -moz-image-region: rect(0px,32px,32px,0px);
   }
 
   #trace[checked] {
     -moz-image-region: rect(0px,64px,32px,32px);
   }
 }
 
@@ -314,28 +314,28 @@
   max-height: 125px;
 }
 
 .dbg-expression {
   height: 20px;
 }
 
 .dbg-expression-arrow {
-  background-image: url(commandline-icon.png);
+  background-image: url(images/commandline-icon.png);
   background-position: -16px 0;
   background-repeat: no-repeat;
   background-size: 32px 16px;
   width: 16px;
   height: 16px;
   margin: 2px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .dbg-expression-arrow {
-    background-image: url(commandline-icon@2x.png);
+    background-image: url(images/commandline-icon@2x.png);
   }
 }
 
 .dbg-expression-input {
   color: inherit;
 }
 
 .dbg-expression-button {
@@ -551,32 +551,32 @@
 
 #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);
+  list-style-image: url(images/debugger-pause.png);
   -moz-image-region: rect(0px,16px,16px,0px);
 }
 
 #resume[checked] {
-  list-style-image: url(debugger-play.png);
+  list-style-image: url(images/debugger-play.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   #resume {
-    list-style-image: url(debugger-pause@2x.png);
+    list-style-image: url(images/debugger-pause@2x.png);
     -moz-image-region: rect(0px,32px,32px,0px);
   }
 
   #resume[checked] {
-    list-style-image: url(debugger-play@2x.png);
+    list-style-image: url(images/debugger-play@2x.png);
     -moz-image-region: rect(0px,64px,32px,32px);
   }
 }
 
 #debugger-controls toolbarbutton {
   transition: opacity 0.15s ease-in-out;
 }
 
@@ -585,65 +585,65 @@
   transition: none;
 }
 
 #resume[break-on-next] {
   background: var(--theme-highlight-lightorange);
 }
 
 #step-over {
-  list-style-image: url(debugger-step-over.png);
+  list-style-image: url(images/debugger-step-over.png);
 }
 
 #step-in {
-  list-style-image: url(debugger-step-in.png);
+  list-style-image: url(images/debugger-step-in.png);
 }
 
 #step-out {
-  list-style-image: url(debugger-step-out.png);
+  list-style-image: url(images/debugger-step-out.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   #step-over {
-    list-style-image: url(debugger-step-over@2x.png);
+    list-style-image: url(images/debugger-step-over@2x.png);
   }
 
   #step-in {
-    list-style-image: url(debugger-step-in@2x.png);
+    list-style-image: url(images/debugger-step-in@2x.png);
   }
 
   #step-out {
-    list-style-image: url(debugger-step-out@2x.png);
+    list-style-image: url(images/debugger-step-out@2x.png);
   }
 }
 
 #instruments-pane-toggle {
   background: none;
   box-shadow: none;
   border: none;
-  list-style-image: url(debugger-collapse.png);
+  list-style-image: url(images/debugger-collapse.png);
   -moz-image-region: rect(0px,16px,16px,0px);
 }
 
 #instruments-pane-toggle[pane-collapsed] {
-  list-style-image: url(debugger-expand.png);
+  list-style-image: url(images/debugger-expand.png);
 }
 
 #instruments-pane-toggle:hover {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 @media (min-resolution: 1.1dppx) {
   #instruments-pane-toggle {
-    list-style-image: url(debugger-collapse@2x.png);
+    list-style-image: url(images/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);
+    list-style-image: url(images/debugger-expand@2x.png);
   }
 
   #instruments-pane-toggle:hover {
     -moz-image-region: rect(0px,64px,32px,32px);
   }
 }
 
 /* Horizontal vs. vertical layout */
--- a/devtools/client/themes/floating-scrollbars-light.css
+++ b/devtools/client/themes/floating-scrollbars-light.css
@@ -1,10 +1,10 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@import url("chrome://browser/skin/devtools/floating-scrollbars.css");
+@import url("chrome://devtools/skin/themes/floating-scrollbars.css");
 
 scrollbar thumb {
   background-color: rgba(170,170,170,0.2) !important;
 }
--- a/devtools/client/themes/floating-scrollbars.css
+++ b/devtools/client/themes/floating-scrollbars.css
@@ -1,9 +1,9 @@
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace url("images/http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 scrollbar {
   -moz-appearance: none !important;
   position: relative;
   background-color: transparent;
   background-image: none;
   z-index: 2147483647;
   padding: 2px;
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -38,41 +38,41 @@
 }
 
 /* Expand/collapse panel toolbar button */
 
 #inspector-pane-toggle {
   background: none;
   box-shadow: none;
   border: none;
-  list-style-image: url(debugger-collapse.png);
+  list-style-image: url(images/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);
+  list-style-image: url(images/debugger-expand.png);
 }
 
 #inspector-pane-toggle:active {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 @media (min-resolution: 1.1dppx) {
   #inspector-pane-toggle {
-    list-style-image: url(debugger-collapse@2x.png);
+    list-style-image: url(images/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);
+    list-style-image: url(images/debugger-expand@2x.png);
   }
 
   #inspector-pane-toggle:active {
     -moz-image-region: rect(0px,64px,32px,32px);
   }
 }
 
 /* Tooltip: Events */
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -297,17 +297,17 @@ div.CodeMirror span.eval-text {
 }
 
 /* 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-image: url("chrome://devtools/skin/themes/images/controls.png");
   background-size: 56px 28px;
 }
 
 .theme-twisty {
   cursor: pointer;
   background-position: 0 -14px;
 }
 
@@ -341,61 +341,61 @@ div.CodeMirror span.eval-text {
 }
 
 .theme-checkbox[checked] {
   background-position: -14px 0;
 }
 
 @media (min-resolution: 1.1dppx) {
   .theme-twisty, .theme-checkbox {
-    background-image: url("chrome://browser/skin/devtools/controls@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/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");
+  list-style-image: url("chrome://devtools/skin/themes/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");
+  list-style-image: url("chrome://devtools/skin/themes/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");
+  list-style-image: url("chrome://devtools/skin/themes/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");
+  list-style-image: url("chrome://devtools/skin/themes/tooltip/arrow-horizontal-light.png");
   margin-left: -4px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .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");
+    list-style-image: url("chrome://devtools/skin/themes/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");
+    list-style-image: url("chrome://devtools/skin/themes/tooltip/arrow-horizontal-light@2x.png");
   }
 }
 
 .theme-tooltip-panel .devtools-tooltip-simple-text {
   color: black;
   border-bottom: 1px solid #d9e1e8;
 }
 
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -21,17 +21,17 @@
 #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);
+  list-style-image: url(images/profiler-stopwatch.svg);
 }
 
 #requests-menu-perf-notice-button .button-text {
   display: none;
 }
 
 #requests-menu-reload-notice-button {
   min-height: 26px;
@@ -397,41 +397,41 @@ box.requests-menu-status[code^="5"] {
 }
 
 /* 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");
+  list-style-image: url("chrome://devtools/skin/themes/images/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");
+  list-style-image: url("chrome://devtools/skin/themes/images/debugger-expand.png");
 }
 
 #details-pane-toggle:active {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 @media (min-resolution: 1.1dppx) {
   #details-pane-toggle {
-    list-style-image: url("chrome://browser/skin/devtools/debugger-collapse@2x.png");
+    list-style-image: url("chrome://devtools/skin/themes/images/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");
+    list-style-image: url("chrome://devtools/skin/themes/images/debugger-expand@2x.png");
   }
 
   #details-pane-toggle:active {
     -moz-image-region: rect(0px,64px,32px,32px);
   }
 }
 
 /* Network request details tabpanels */
@@ -550,27 +550,27 @@ box.requests-menu-status[code^="5"] {
   color: var(--theme-selection-color);
 }
 
 #security-tabpanel {
   overflow: auto;
 }
 
 .security-warning-icon {
-  background-image: url(alerticon-warning.png);
+  background-image: url(images/alerticon-warning.png);
   background-size: 13px 12px;
   -moz-margin-start: 5px;
   vertical-align: top;
   width: 13px;
   height: 12px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .security-warning-icon {
-    background-image: url(alerticon-warning@2x.png);
+    background-image: url(images/alerticon-warning@2x.png);
   }
 }
 
 /* Custom request form */
 
 #custom-pane {
   padding: 0.6em 0.5em;
 }
@@ -672,17 +672,17 @@ box.requests-menu-status[code^="5"] {
 }
 
 /* Performance analysis buttons */
 
 #requests-menu-network-summary-button {
   background: none;
   box-shadow: none;
   border-color: transparent;
-  list-style-image: url(profiler-stopwatch.svg);
+  list-style-image: url(images/profiler-stopwatch.svg);
   -moz-padding-end: 0;
   cursor: pointer;
 }
 
 #requests-menu-network-summary-label {
   -moz-padding-start: 0;
   cursor: pointer;
 }
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -37,65 +37,65 @@
 }
 
 #performance-toolbar-controls-detail-views .toolbarbutton-text {
   -moz-padding-start: 4px;
   -moz-padding-end: 8px;
 }
 
 #filter-button {
-  list-style-image: url(timeline-filter.svg#filter);
+  list-style-image: url(images/timeline-filter.svg#filter);
   min-width: 24px;
 }
 
 #filter-button[disabled] {
-  list-style-image: url(timeline-filter.svg#filter-disabled);
+  list-style-image: url(images/timeline-filter.svg#filter-disabled);
 }
 
 #filter-button[open] {
-  list-style-image: url(timeline-filter.svg#filter-open);
+  list-style-image: url(images/timeline-filter.svg#filter-open);
 }
 
 #performance-filter-menupopup > menuitem:before {
   content: "";
   display: block;
   width: 8px;
   height: 8px;
   margin: 0 8px;
   border-radius: 1px;
 }
 
 /* Details panel buttons */
 
 #select-waterfall-view {
-  list-style-image: url(performance-icons.svg#details-waterfall);
+  list-style-image: url(images/performance-icons.svg#details-waterfall);
 }
 
 #select-js-calltree-view,
 #select-memory-calltree-view {
-  list-style-image: url(performance-icons.svg#details-call-tree);
+  list-style-image: url(images/performance-icons.svg#details-call-tree);
 }
 
 #select-js-flamegraph-view,
 #select-memory-flamegraph-view {
-  list-style-image: url(performance-icons.svg#details-flamegraph);
+  list-style-image: url(images/performance-icons.svg#details-flamegraph);
 }
 
 #select-optimizations-view {
-  list-style-image: url(profiler-stopwatch.svg);
+  list-style-image: url(images/profiler-stopwatch.svg);
 }
 
 /* Recording buttons */
 
 #main-record-button {
-  list-style-image: url(profiler-stopwatch.svg);
+  list-style-image: url(images/profiler-stopwatch.svg);
 }
 
 #main-record-button[checked] {
-  list-style-image: url(profiler-stopwatch-checked.svg);
+  list-style-image: url(images/profiler-stopwatch-checked.svg);
 }
 
 #main-record-button .button-icon {
   margin: 0;
 }
 
 #main-record-button .button-text {
   display: none;
@@ -677,17 +677,17 @@ menuitem.marker-color-graphs-grey:before
   text-decoration: underline;
 }
 .opt-url.debugger-link {
   cursor: pointer;
 }
 
 .opt-icon::before {
   content: "";
-  background-image: url(chrome://browser/skin/devtools/webconsole.svg);
+  background-image: url(chrome://devtools/skin/themes/images/webconsole.svg);
   background-repeat: no-repeat;
   background-size: 72px 60px;
   /* show grey "i" bubble by default */
   background-position: -36px -36px;
   width: 12px;
   height: 12px;
   display: inline-block;
 
@@ -699,17 +699,17 @@ menuitem.marker-color-graphs-grey:before
 }
 description.opt-icon {
   margin: 0px 0px 0px 0px;
 }
 description.opt-icon::before {
   margin: 1px 4px 0px 0px;
 }
 .theme-light .opt-icon::before {
-  background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons);
+  background-image: url(chrome://devtools/skin/themes/images/webconsole.svg#light-icons);
 }
 .opt-icon[severity=warning]::before {
   background-position: -24px -24px;
 }
 
 ul.frames-list {
   list-style-type: none;
   padding: 0px;
@@ -732,27 +732,27 @@ ul.frames-list li.selected {
  * preference being applied or removed.
  */
 
 /**
  * devtools.performance.ui.experimental
  */
 menuitem.experimental-option::before {
   content: "";
-  background-image: url(chrome://browser/skin/devtools/webconsole.svg);
+  background-image: url(chrome://devtools/skin/themes/images/webconsole.svg);
   background-repeat: no-repeat;
   background-size: 72px 60px;
   width: 12px;
   height: 12px;
   display: inline-block;
 
   background-position: -24px -24px;
   margin: 2px 5px 0 0;
   max-height: 12px;
 }
 .theme-light menuitem.experimental-option::before {
-  background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons);
+  background-image: url(chrome://devtools/skin/themes/images/webconsole.svg#light-icons);
 }
 
 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
   display: none;
 }
--- a/devtools/client/themes/responsivedesign.inc.css
+++ b/devtools/client/themes/responsivedesign.inc.css
@@ -106,17 +106,17 @@
 .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");
+  list-style-image: url("chrome://devtools/skin/themes/images/dropmarker.svg");
   -moz-box-align: center;
   border-width: 0;
   min-width: 16px;
 }
 
 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
   -moz-appearance: none;
   color: inherit;
@@ -132,99 +132,99 @@
 .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");
+  list-style-image: url("chrome://devtools/skin/themes/images/dropmarker.svg");
   -moz-box-align: center;
   padding: 0 3px;
 }
 
 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
   margin-left: 0;
 }
 
 .devtools-responsiveui-close {
-  list-style-image: url("chrome://browser/skin/devtools/close.png");
+  list-style-image: url("chrome://devtools/skin/themes/images/close.png");
 }
 
 .devtools-responsiveui-rotate {
-  list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
+  list-style-image: url("chrome://devtools/skin/themes/images/responsivemode/responsiveui-rotate.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   .devtools-responsiveui-close {
-    list-style-image: url("chrome://browser/skin/devtools/close@2x.png");
+    list-style-image: url("chrome://devtools/skin/themes/images/close@2x.png");
   }
 
   .devtools-responsiveui-rotate {
-    list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate@2x.png");
+    list-style-image: url("chrome://devtools/skin/themes/images/responsivemode/responsiveui-rotate@2x.png");
   }
 }
 
 .devtools-responsiveui-touch {
-  list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
+  list-style-image: url("chrome://devtools/skin/themes/images/responsivemode/responsiveui-touch.png");
   -moz-image-region: rect(0px,16px,16px,0px);
 }
 
 .devtools-responsiveui-touch[checked] {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 @media (min-resolution: 1.1dppx) {
   .devtools-responsiveui-touch {
-    list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch@2x.png");
+    list-style-image: url("chrome://devtools/skin/themes/images/responsivemode/responsiveui-touch@2x.png");
     -moz-image-region: rect(0px,32px,32px,0px);
   }
 
   .devtools-responsiveui-touch[checked] {
     -moz-image-region: rect(0px,64px,32px,32px);
   }
 }
 
 .devtools-responsiveui-screenshot {
-  list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
+  list-style-image: url("chrome://devtools/skin/themes/images/responsivemode/responsiveui-screenshot.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   .devtools-responsiveui-screenshot {
-    list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot@2x.png");
+    list-style-image: url("chrome://devtools/skin/themes/images/responsivemode/responsiveui-screenshot@2x.png");
   }
 }
 
 .devtools-responsiveui-resizebarV {
   width: 7px;
   height: 24px;
   cursor: ew-resize;
   transform: translate(12px, -12px);
   background-size: cover;
-  background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
+  background-image: url("chrome://devtools/skin/themes/images/responsivemode/responsive-vertical-resizer.png");
 }
 
 .devtools-responsiveui-resizebarH {
   width: 24px;
   height: 7px;
   cursor: ns-resize;
   transform: translate(-12px, 12px);
   background-size: cover;
-  background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
+  background-image: url("chrome://devtools/skin/themes/images/responsivemode/responsive-horizontal-resizer.png");
 }
 
 .devtools-responsiveui-resizehandle {
   width: 16px;
   height: 16px;
   cursor: se-resize;
   transform: translate(12px, 12px);
   background-size: cover;
-  background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
+  background-image: url("chrome://devtools/skin/themes/images/responsivemode/responsive-se-resizer.png");
 }
 
 /* FxOS custom mode with additional buttons and phone look'n feel */
 
 /* Hide devtools manual resizer */
 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
@@ -262,17 +262,17 @@
 
   background-image: linear-gradient(to right, #111 11%, #333 56%);
 }
 
 .devtools-responsiveui-home-button {
   -moz-user-focus: ignore;
   width: 40px;
   height: 30px;
-  list-style-image: url("chrome://browser/skin/devtools/responsiveui-home.png");
+  list-style-image: url("chrome://devtools/skin/themes/images/responsivemode/responsiveui-home.png");
 }
 
 .devtools-responsiveui-sleep-button {
   -moz-user-focus: ignore;
   -moz-appearance: none;
   /* compensate browserStack top padding */
   margin-top: -67px;
   margin-right: 10px;
@@ -321,19 +321,19 @@
 }
 
 .devtools-responsiveui-volume-down-button {
   border-bottom-left-radius: 12px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .devtools-responsiveui-resizebarV {
-    background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/responsivemode/responsive-vertical-resizer@2x.png");
   }
 
   .devtools-responsiveui-resizebarH {
-    background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/responsivemode/responsive-horizontal-resizer@2x.png");
   }
 
   .devtools-responsiveui-resizehandle {
-    background-image: url("chrome://browser/skin/devtools/responsive-se-resizer@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/responsivemode/responsive-se-resizer@2x.png");
   }
 }
--- a/devtools/client/themes/ruleview.css
+++ b/devtools/client/themes/ruleview.css
@@ -1,21 +1,21 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 .theme-light {
   --rule-highlight-background-color: #ffee99;
-  --rule-filter-icon: url(magnifying-glass-light.png);
+  --rule-filter-icon: url(images/magnifying-glass-light.png);
 }
 
 .theme-dark {
   --rule-highlight-background-color: #594724;
-  --rule-filter-icon: url(magnifying-glass.png);
+  --rule-filter-icon: url(images/magnifying-glass.png);
 }
 
 .ruleview {
   height: 100%;
 }
 
 .ruleview-rule-source {
   text-align: end;
@@ -98,27 +98,27 @@
 }
 
 .ruleview-rule + .ruleview-rule {
   border-top-width: 1px;
   border-top-style: dotted;
 }
 
 .ruleview-warning {
-  background-image: url(alerticon-warning.png);
+  background-image: url(images/alerticon-warning.png);
   background-size: 13px 12px;
   -moz-margin-start: 5px;
   display: inline-block;
   width: 13px;
   height: 12px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .ruleview-warning {
-    background-image: url(alerticon-warning@2x.png);
+    background-image: url(images/alerticon-warning@2x.png);
   }
 }
 
 .ruleview-overridden-rule-filter {
   background-image: var(--rule-filter-icon);
   background-size: 11px 11px;
   -moz-margin-start: 5px;
   display: inline-block;
@@ -193,28 +193,28 @@
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
 }
 
 .ruleview-bezierswatch {
-  background: url("chrome://browser/skin/devtools/cubic-bezier-swatch.png");
+  background: url("chrome://devtools/skin/themes/images/cubic-bezier-swatch.png");
   background-size: 1em;
 }
 
 .ruleview-filterswatch {
-  background: url("chrome://browser/skin/devtools/filter-swatch.svg");
+  background: url("chrome://devtools/skin/themes/images/filter-swatch.svg");
   background-size: 1em;
 }
 
 @media (min-resolution: 1.1dppx) {
   .ruleview-bezierswatch {
-    background: url("chrome://browser/skin/devtools/cubic-bezier-swatch@2x.png");
+    background: url("chrome://devtools/skin/themes/images/cubic-bezier-swatch@2x.png");
     background-size: 1em;
   }
 }
 
 .ruleview-overridden {
   text-decoration: line-through;
 }
 
@@ -272,42 +272,42 @@
 }
 
 .ruleview-selector-matched > .ruleview-selector-pseudo-class-lock {
   font-weight: bold;
   color: var(--theme-highlight-orange);
 }
 
 .ruleview-selectorhighlighter {
-  background: url("chrome://browser/skin/devtools/vview-open-inspector.png") no-repeat 0 0;
+  background: url("chrome://devtools/skin/themes/images/vview-open-inspector.png") no-repeat 0 0;
   padding-left: 16px;
   margin-left: 5px;
   cursor: pointer;
 }
 
 .ruleview-selectorhighlighter:hover {
   background-position: -32px 0;
 }
 
 .ruleview-selectorhighlighter:active,
 .ruleview-selectorhighlighter.highlighted {
   background-position: -16px 0;
 }
 
 #ruleview-add-rule-button::before {
-  background-image: url("chrome://browser/skin/devtools/add.svg");
+  background-image: url("chrome://devtools/skin/themes/images/add.svg");
   background-size: cover;
 }
 
 #pseudo-class-panel-toggle::before {
-  background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class");
+  background-image: url("chrome://devtools/skin/themes/images/pseudo-class.svg#pseudo-class");
   background-size: cover;
 }
 #pseudo-class-panel-toggle[checked]::before {
-  background-image: url("chrome://browser/skin/devtools/pseudo-class.svg#pseudo-class-checked");
+  background-image: url("chrome://devtools/skin/themes/images/pseudo-class.svg#pseudo-class-checked");
   filter: none !important;
 }
 
 /**
  * These buttons are using opacity instead of background color to indicate
  * the state
  */
 #ruleview-add-rule-button,
--- a/devtools/client/themes/shadereditor.css
+++ b/devtools/client/themes/shadereditor.css
@@ -44,40 +44,40 @@
 .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-image: url(images/itemToggle.png);
   background-color: transparent;
   background-repeat: no-repeat;
   background-clip: content-box;
   background-size: 32px 16px;
   background-position: -16px 0;
   width: 16px;
   height: 16px;
   border: 0;
 }
 
 @media (min-resolution: 1.1dppx) {
   .side-menu-widget-item-checkbox .checkbox-check {
-    background-image: url(itemToggle@2x.png);
+    background-image: url(images/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);
+  filter: url(images/filters.svg#invert);
 }
 
 /* Shader source editors */
 
 .editor-label {
   padding: 1px 12px;
   border-top: 1px solid;
 }
--- a/devtools/client/themes/splitview.css
+++ b/devtools/client/themes/splitview.css
@@ -88,35 +88,35 @@
 }
 
 .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),
+  background-image: url(images/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),
+  background-image: url(images/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),
+  background-image: url(images/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),
+  background-image: url(images/itemArrow-rtl.svg),
                     linear-gradient(@smw_marginLight@, @smw_marginLight@),
                     linear-gradient(#4c9ed9, #4c9ed9);
 }
 
 /* Toolbars */
 
 .splitview-main > .devtools-toolbar {
   background-origin: border-box;
--- a/devtools/client/themes/storage.css
+++ b/devtools/client/themes/storage.css
@@ -10,17 +10,17 @@
   overflow: auto;
 }
 
 #storage-tree {
   background: var(--theme-sidebar-background);
 }
 
 #storage-tree .tree-widget-item[type="store"]:after {
-  background-image: url(chrome://browser/skin/devtools/filetype-store.svg);
+  background-image: url(chrome://devtools/skin/themes/images/filetypes/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;
 }
--- a/devtools/client/themes/styleeditor.css
+++ b/devtools/client/themes/styleeditor.css
@@ -101,38 +101,38 @@
 
 .theme-dark .media-condition-unmatched {
   color: #606C75;
 }
 
 .stylesheet-enabled {
   padding: 8px 0;
   margin: 0 8px;
-  background-image: url(itemToggle.png);
+  background-image: url(images/itemToggle.png);
   background-repeat: no-repeat;
   background-clip: content-box;
   background-position: 0 8px;
   background-size: 48px 24px;
   width: 24px;
   height: 40px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .stylesheet-enabled {
-    background-image: url(itemToggle@2x.png);
+    background-image: url(images/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);
+  filter: url(images/filters.svg#invert);
 }
 
 .splitview-nav > li > .stylesheet-enabled:focus,
 .splitview-nav > li:hover > .stylesheet-enabled {
   outline: 0;
 }
 
 .stylesheet-linked-file:not(:empty){
--- a/devtools/client/themes/toolbars.inc.css
+++ b/devtools/client/themes/toolbars.inc.css
@@ -135,25 +135,25 @@
 
 .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");
+  list-style-image: url("chrome://devtools/skin/themes/images/dropmarker.svg");
   -moz-box-align: center;
   min-width: 16px;
 }
 
 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
   -moz-appearance: none !important;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.svg");
+  list-style-image: url("chrome://devtools/skin/themes/images/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 */
 }
@@ -221,17 +221,17 @@
 .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");
+  list-style-image: url("chrome://devtools/skin/themes/images/tool-options.svg");
   background: none;
   opacity: .8;
   border: none;
 }
 
 .devtools-option-toolbarbutton[open=true] {
   opacity: 1;
 }
@@ -347,21 +347,21 @@
   -moz-padding-end: 4px;
   background-position: 8px center;
   background-size: 11px 11px;
   background-repeat: no-repeat;
   font-size: inherit;
 }
 
 .theme-dark .devtools-searchinput {
-  background-image: url(magnifying-glass.png);
+  background-image: url(images/magnifying-glass.png);
 }
 
 .theme-light .devtools-searchinput {
-  background-image: url(magnifying-glass-light.png);
+  background-image: url(images/magnifying-glass-light.png);
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl) {
   background-position: calc(100% - 8px) center;
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-icon {
   visibility: hidden;
@@ -404,52 +404,52 @@
   width: 16px;
   height: 16px;
   background-position: 0 0;
   background-repeat: no-repeat;
   background-color: transparent;
 }
 
 .theme-dark .devtools-searchinput-clear {
-  background-image: url("chrome://browser/skin/devtools/search-clear-dark.svg");
+  background-image: url("chrome://devtools/skin/themes/images/search-clear-dark.svg");
 }
 
 .theme-light .devtools-searchinput-clear {
-  background-image: url("chrome://browser/skin/devtools/search-clear-light.svg");
+  background-image: url("chrome://devtools/skin/themes/images/search-clear-light.svg");
 }
 
 .devtools-style-searchbox-no-match + .devtools-searchinput-clear {
-  background-image: url("chrome://browser/skin/devtools/search-clear-failed.svg") !important;
+  background-image: url("chrome://devtools/skin/themes/images/search-clear-failed.svg") !important;
 }
 
 .devtools-searchinput-clear:hover {
   background-position: -16px 0;
 }
 
 .theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
-  list-style-image: url("chrome://browser/skin/devtools/search-clear-dark.svg");
+  list-style-image: url("chrome://devtools/skin/themes/images/search-clear-dark.svg");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 .theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
-  list-style-image: url("chrome://browser/skin/devtools/search-clear-light.svg");
+  list-style-image: url("chrome://devtools/skin/themes/images/search-clear-light.svg");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 @media (min-resolution: 1.1dppx) {
   .theme-dark .devtools-searchinput {
-    background-image: url(magnifying-glass@2x.png);
+    background-image: url(images/magnifying-glass@2x.png);
   }
 
   .theme-light .devtools-searchinput {
-    background-image: url(magnifying-glass-light@2x.png);
+    background-image: url(images/magnifying-glass-light@2x.png);
   }
 }
 
 /* Close button */
 
 .devtools-closebutton {
   -moz-appearance: none;
   border: none;
@@ -459,17 +459,17 @@
   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-image: url("chrome://devtools/skin/themes/images/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;
@@ -626,39 +626,39 @@
   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");
+  background-image: url("chrome://devtools/skin/themes/images/dock-bottom@2x.png");
 }
 
 #toolbox-dock-side  > image {
-  background-image: url("chrome://browser/skin/devtools/dock-side@2x.png");
+  background-image: url("chrome://devtools/skin/themes/images/dock-side@2x.png");
 }
 
 #toolbox-dock-window > image {
-  background-image: url("chrome://browser/skin/devtools/undock@2x.png");
+  background-image: url("chrome://devtools/skin/themes/images/undock@2x.png");
 }
 
 #toolbox-dock-bottom-minimize {
   /* Bug 1177463 - The minimize button is currently hidden until we agree on
      the UI for it, and until bug 1173849 is fixed too. */
   display: none;
 }
 
 #toolbox-dock-bottom-minimize > image {
-  background-image: url("chrome://browser/skin/devtools/dock-bottom-minimize@2x.png");
+  background-image: url("chrome://devtools/skin/themes/images/dock-bottom-minimize@2x.png");
 }
 
 #toolbox-dock-bottom-minimize.minimized > image {
-  background-image: url("chrome://browser/skin/devtools/dock-bottom-maximize@2x.png");
+  background-image: url("chrome://devtools/skin/themes/images/dock-bottom-maximize@2x.png");
 }
 
 #toolbox-dock-window,
 #toolbox-dock-bottom,
 #toolbox-dock-side {
   opacity: 0.8;
 }
 
@@ -723,95 +723,95 @@
 .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");
+  background-image: url("chrome://devtools/skin/themes/images/command-paintflashing.png");
 }
 
 #command-button-screenshot > image {
-  background-image: url("chrome://browser/skin/devtools/command-screenshot.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-screenshot.png");
 }
 
 #command-button-responsive > image {
-  background-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-responsivemode.png");
 }
 
 #command-button-tilt > image {
-  background-image: url("chrome://browser/skin/devtools/command-tilt.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-tilt.png");
 }
 
 #command-button-scratchpad > image {
-  background-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-scratchpad.png");
   background-size: 48px 16px;
 }
 
 #command-button-pick > image {
-  background-image: url("chrome://browser/skin/devtools/command-pick.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-pick.png");
 }
 
 #command-button-frames > image {
-  background-image: url("chrome://browser/skin/devtools/command-frames.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-frames.png");
 }
 
 #command-button-splitconsole > image {
-  background-image: url("chrome://browser/skin/devtools/command-console.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-console.png");
 }
 
 #command-button-eyedropper > image {
-  background-image: url("chrome://browser/skin/devtools/command-eyedropper.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-eyedropper.png");
 }
 
 #command-button-rulers > image {
-  background-image: url("chrome://browser/skin/devtools/command-rulers.png");
+  background-image: url("chrome://devtools/skin/themes/images/command-rulers.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   #command-button-paintflashing > image {
-    background-image: url("chrome://browser/skin/devtools/command-paintflashing@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-paintflashing@2x.png");
   }
 
   #command-button-screenshot > image {
-    background-image: url("chrome://browser/skin/devtools/command-screenshot@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-screenshot@2x.png");
   }
 
   #command-button-responsive > image {
-    background-image: url("chrome://browser/skin/devtools/command-responsivemode@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-responsivemode@2x.png");
   }
 
   #command-button-tilt > image {
-    background-image: url("chrome://browser/skin/devtools/command-tilt@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-tilt@2x.png");
   }
 
   #command-button-scratchpad > image {
-    background-image: url("chrome://browser/skin/devtools/command-scratchpad@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-scratchpad@2x.png");
   }
 
   #command-button-pick > image {
-    background-image: url("chrome://browser/skin/devtools/command-pick@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-pick@2x.png");
   }
 
   #command-button-frames > image {
-    background-image: url("chrome://browser/skin/devtools/command-frames@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-frames@2x.png");
   }
 
   #command-button-splitconsole > image {
-    background-image: url("chrome://browser/skin/devtools/command-console@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-console@2x.png");
   }
 
   #command-button-eyedropper > image {
-    background-image: url("chrome://browser/skin/devtools/command-eyedropper@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-eyedropper@2x.png");
   }
 
   #command-button-rulers > image {
-    background-image: url("chrome://browser/skin/devtools/command-rulers@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/command-rulers@2x.png");
   }
 }
 
 /* Tabs */
 
 .devtools-tabbar {
   -moz-appearance: none;
   min-height: 24px;
@@ -988,17 +988,17 @@
 .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);
+  filter: url(images/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,
--- a/devtools/client/themes/webaudioeditor.css
+++ b/devtools/client/themes/webaudioeditor.css
@@ -80,20 +80,20 @@ g.edgePath.param-connection {
   fill: var(--theme-toolbar-background);
 }
 
 /**
  * Bypassed Nodes
  */
 
 .theme-light .nodes g.bypassed rect {
-  fill: url(chrome://browser/skin/devtools/filters.svg#bypass-light);
+  fill: url(chrome://devtools/skin/themes/images/filters.svg#bypass-light);
 }
 .theme-dark .nodes g.bypassed rect {
-  fill: url(chrome://browser/skin/devtools/filters.svg#bypass-dark);
+  fill: url(chrome://devtools/skin/themes/images/filters.svg#bypass-dark);
 }
 .nodes g.bypassed.selected rect {
   stroke: var(--theme-selection-background);
 }
 
 /*
 .nodes g.bypassed text {
   opacity: 0.8;
@@ -140,38 +140,38 @@ text {
   display: none;
 }
 
 #web-audio-inspector-title {
   margin: 6px;
 }
 
 .web-audio-inspector .error {
-  background-image: url(alerticon-warning.png);
+  background-image: url(images/alerticon-warning.png);
   background-size: 13px 12px;
   -moz-appearance: none;
   opacity: 0;
   transition: opacity .5s ease-out 0s;
 }
 
 #inspector-pane-toggle {
   background: none;
   box-shadow: none;
   border: none;
-  list-style-image: url(debugger-collapse.png);
+  list-style-image: url(images/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);
+  list-style-image: url(images/debugger-expand.png);
 }
 
 #inspector-pane-toggle:active {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 /**
  * Automation Styles
@@ -184,39 +184,39 @@ text {
 
 #automation-graph {
   overflow: hidden;
   -moz-box-flex: 1;
 }
 
 @media (min-resolution: 1.1dppx) {
   #inspector-pane-toggle {
-    list-style-image: url(debugger-collapse@2x.png);
+    list-style-image: url(images/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);
+    list-style-image: url(images/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);
+    background-image: url(images/alerticon-warning@2x.png);
   }
 }
 
 /**
  * Inspector toolbar
  */
 
 #audio-node-toolbar .bypass {
-  list-style-image: url(power.svg);
+  list-style-image: url(images/power.svg);
 }
 
 #audio-node-toolbar toolbarbutton[disabled] {
   opacity: 0.5;
   background-color: transparent;
 }
 
 .theme-dark #audio-node-toolbar toolbarbutton[checked] {
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -39,27 +39,27 @@ a {
   margin: 3px 6px 0 0;
   padding: 0 4px;
   height: 1em;
   align-self: flex-start;
 }
 
 .message > .icon::before {
   content: "";
-  background-image: url(chrome://browser/skin/devtools/webconsole.svg);
+  background-image: url(chrome://devtools/skin/themes/images/webconsole.svg);
   background-position: 12px 12px;
   background-repeat: no-repeat;
   background-size: 72px 60px;
   width: 12px;
   height: 12px;
   display: inline-block;
 }
 
 .theme-light .message > .icon::before {
-  background-image: url(chrome://browser/skin/devtools/webconsole.svg#light-icons);
+  background-image: url(chrome://devtools/skin/themes/images/webconsole.svg#light-icons);
 }
 
 .message > .message-body-wrapper {
   flex: 1 1 100%;
   margin: 3px;
 }
 
 .message-body-wrapper .table-widget-body {
@@ -364,24 +364,24 @@ a {
 .jsterm-complete-node {
   border: none;
   padding: 0 0 0 16px;
   -moz-appearance: none;
   background-color: transparent;
 }
 
 .jsterm-input-node {
-  background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
+  background-image: -moz-image-rect(url("chrome://devtools/skin/themes/images/commandline-icon.png"), 0, 32, 16, 16);
   background-repeat: no-repeat;
   background-size: 16px 16px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .jsterm-input-node {
-    background-image: -moz-image-rect(url('chrome://browser/skin/devtools/commandline-icon@2x.png'), 0, 64, 32, 32);
+    background-image: -moz-image-rect(url('chrome://devtools/skin/themes/images/commandline-icon@2x.png'), 0, 64, 32, 32);
   }
 }
 
 :-moz-any(.jsterm-input-node,
           .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
   overflow-x: hidden;
 }
 
@@ -494,17 +494,17 @@ a {
 
 .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;
+  background: url("chrome://devtools/skin/themes/images/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;
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -100,26 +100,26 @@
 .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");
+  background-image: url("images/breadcrumbs-scrollbutton.png");
   list-style-image: none;
   margin: 0 8px;
   padding: 0;
 }
 
 @media (min-resolution: 1.1dppx) {
   .scrollbutton-up > .toolbarbutton-icon,
   .scrollbutton-down > .toolbarbutton-icon {
-    background-image: url("breadcrumbs-scrollbutton@2x.png");
+    background-image: url("images/breadcrumbs-scrollbutton@2x.png");
   }
 }
 
 .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
 .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
   background-position: -7px center;
 }
 
@@ -182,17 +182,17 @@
   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: url(images/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;
@@ -454,29 +454,29 @@
   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@);
+  background-image: url(images/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@);
+  background-image: url(images/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@);
+  background-image: url(images/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@);
+  background-image: url(images/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;
@@ -636,25 +636,25 @@
 /* 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: url("chrome://devtools/skin/themes/images/vview-lock.png") no-repeat;
   background-size: cover;
   width: 16px;
   height: 16px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .variable-or-property-non-writable-icon {
-    background-image: url("chrome://browser/skin/devtools/vview-lock@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/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;
@@ -736,77 +736,77 @@
   -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: url("chrome://devtools/skin/themes/images/vview-delete.png");
   background-size: cover;
   width: 16px;
   height: 16px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .variables-view-delete {
-    background-image: url("chrome://browser/skin/devtools/vview-delete@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/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: url("chrome://devtools/skin/themes/images/vview-edit.png");
   background-size: cover;
   width: 16px;
   height: 16px;
   cursor: pointer;
 }
 
 @media (min-resolution: 1.1dppx) {
   .variables-view-edit {
-    background-image: url("chrome://browser/skin/devtools/vview-edit@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/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: url("chrome://devtools/skin/themes/images/vview-open-inspector.png");
   background-size: cover;
   width: 16px;
   height: 16px;
   cursor: pointer;
 }
 
 @media (min-resolution: 1.1dppx) {
   .variables-view-open-inspector {
-    background-image: url("chrome://browser/skin/devtools/vview-open-inspector@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/vview-open-inspector@2x.png");
   }
 }
 
 .variables-view-open-inspector:hover {
   background-position: 16px;
 }
 
 .variables-view-open-inspector:active {
@@ -1369,17 +1369,17 @@
 /* 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-image: url("chrome://devtools/skin/themes/images/controls.png");
   background-size: 56px 28px;
   cursor: pointer;
   background-position: -28px -14px;
 }
 
 .tree-widget-item:-moz-locale-dir(rtl)::before {
   float: right;
   transform: scaleX(-1);
@@ -1427,17 +1427,17 @@
   }
   to {
     max-height: 500px;
   }
 }
 
 @media (min-resolution: 1.1dppx) {
   .tree-widget-item:before {
-    background-image: url("chrome://browser/skin/devtools/controls@2x.png");
+    background-image: url("chrome://devtools/skin/themes/images/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;
@@ -1497,25 +1497,25 @@
 }
 
 .theme-light .tree-widget-item.theme-selected[type]::after,
 .theme-dark .tree-widget-item[type]::after {
   filter: invert(1);
 }
 
 .tree-widget-item[type="dir"]::after {
-  background-image: url(chrome://browser/skin/devtools/filetype-dir-close.svg);
+  background-image: url(chrome://devtools/skin/themes/images/filetypes/dir-close.svg);
   background-position: 2px 0;
   background-size: auto 16px;
   width: 20px;
 }
 
 .tree-widget-item[type="dir"][expanded]:not([empty])::after {
-  background-image: url(chrome://browser/skin/devtools/filetype-dir-open.svg);
+  background-image: url(chrome://devtools/skin/themes/images/filetypes/dir-open.svg);
 }
 
 .tree-widget-item[type="url"]::after {
-  background-image: url(chrome://browser/skin/devtools/filetype-globe.svg);
+  background-image: url(chrome://devtools/skin/themes/images/filetypes/globe.svg);
   background-size: auto 18px;
   width: 18px;
 }
 
-%include ../../shared/devtools/app-manager/manifest-editor.inc.css
+%include app-manager/manifest-editor.inc.css
--- a/devtools/client/webaudioeditor/webaudioeditor.xul
+++ b/devtools/client/webaudioeditor/webaudioeditor.xul
@@ -1,17 +1,17 @@
 <?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/. -->
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/webaudioeditor.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/webaudioeditor.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % debuggerDTD SYSTEM "chrome://browser/locale/devtools/webaudioeditor.dtd">
   %debuggerDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <script type="application/javascript;version=1.8"
--- a/devtools/client/webconsole/webconsole.xul
+++ b/devtools/client/webconsole/webconsole.xul
@@ -2,21 +2,21 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE window [
 <!ENTITY % webConsoleDTD SYSTEM "chrome://browser/locale/devtools/webConsole.dtd">
 %webConsoleDTD;
 ]>
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css"
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css"
                  type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/widgets.css"
+<?xml-stylesheet href="chrome://devtools/skin/themes/widgets.css"
                  type="text/css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/webconsole.css"
+<?xml-stylesheet href="chrome://devtools/skin/themes/webconsole.css"
                  type="text/css"?>
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         id="devtools-webconsole"
         macanimationtype="document"
         fullscreenbutton="true"
         title="&window.title;"
         browserConsoleTitle="&browserConsole.title;"
--- a/devtools/client/webide/content/logs.xhtml
+++ b/devtools/client/webide/content/logs.xhtml
@@ -8,17 +8,17 @@
   <!ENTITY % webideDTD SYSTEM "chrome://browser/locale/devtools/webide.dtd" >
   %webideDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta charset="utf8"/>
     <link rel="stylesheet" href="chrome://webide/skin/deck.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://browser/skin/devtools/common.css" type="text/css"/>
+    <link rel="stylesheet" href="chrome://devtools/skin/themes/common.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://webide/skin/logs.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"></script>
     <script type="application/javascript;version=1.8" src="logs.js"></script>
   </head>
   <body>
 
     <div id="controls">
       <a id="close">&deck_close;</a>
--- a/devtools/client/webide/content/webide.xul
+++ b/devtools/client/webide/content/webide.xul
@@ -7,17 +7,17 @@
 <!DOCTYPE window [
   <!ENTITY % webideDTD SYSTEM "chrome://browser/locale/devtools/webide.dtd" >
   %webideDTD;
 ]>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <?xml-stylesheet href="chrome://global/skin/global.css"?>
-<?xml-stylesheet href="chrome://browser/skin/devtools/common.css"?>
+<?xml-stylesheet href="chrome://devtools/skin/themes/common.css"?>
 <?xml-stylesheet href="chrome://webide/skin/webide.css"?>
 
 <window id="webide" onclose="return UI.canCloseProject();"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml"
         title="&windowTitle;"
         windowtype="devtools:webide"
         macanimationtype="document"
--- a/devtools/client/webide/modules/app-manager.js
+++ b/devtools/client/webide/modules/app-manager.js
@@ -25,17 +25,17 @@ const {NetUtil} = Cu.import("resource://
 const Telemetry = require("devtools/client/shared/telemetry");
 const {ProjectBuilding} = require("./build");
 
 const Strings = Services.strings.createBundle("chrome://browser/locale/devtools/webide.properties");
 
 var AppManager = exports.AppManager = {
 
   // FIXME: will break when devtools/app-manager will be removed:
-  DEFAULT_PROJECT_ICON: "chrome://browser/skin/devtools/app-manager/default-app-icon.png",
+  DEFAULT_PROJECT_ICON: "chrome://devtools/skin/themes/app-manager/images/default-app-icon.png",
   DEFAULT_PROJECT_NAME: "--",
 
   _initialized: false,
 
   init: function() {
     if (this._initialized) {
       return;
     }
--- a/devtools/client/webide/themes/webide.css
+++ b/devtools/client/webide/themes/webide.css
@@ -331,17 +331,17 @@ panel > .panel-arrowcontainer > .panel-a
 #runtime-actions > toolbarbutton:last-child {
   border-radius: 0 0 3px 3px;
 }
 
 /* Main view */
 
 #deck {
   background-color: rgb(225, 225, 225);
-  background-image: url('chrome://browser/skin/devtools/app-manager/rocket.svg'), url('chrome://browser/skin/devtools/app-manager/noise.png');
+  background-image: url('chrome://devtools/skin/themes/app-manager/images/rocket.svg'), url('chrome://devtools/skin/themes/app-manager/images/noise.png');
   background-repeat: no-repeat, repeat;
   background-size: 35%, auto;
   background-position: center center, top left;
 %ifndef XP_MACOSX
   border-top: 1px solid #AAA;
 %endif
 }