Bug 1311541 - load devtools CSS and images as resources;r=bgrins draft
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 01 Dec 2016 16:25:34 +0100
changeset 447755 f4725a25088621b6b541379d5e7788f6926f9aa1
parent 447633 ad993783599ab2ede0cf931fdec02f4df40a7a6d
child 447756 20916f0069c5dfd397260a9408a6018bc8cdb8f1
push id38149
push userjdescottes@mozilla.com
push dateWed, 07 Dec 2016 16:26:08 +0000
reviewersbgrins
bugs1311541
milestone53.0a1
Bug 1311541 - load devtools CSS and images as resources;r=bgrins MozReview-Commit-ID: 4Id9B5N0OTW
browser/base/content/test/general/browser_parsable_css.js
browser/installer/allowed-dupes.mn
devtools/client/aboutdebugging/aboutdebugging.css
devtools/client/aboutdebugging/aboutdebugging.xhtml
devtools/client/aboutdebugging/components/aboutdebugging.js
devtools/client/aboutdebugging/components/tabs/panel.js
devtools/client/aboutdebugging/components/workers/panel.js
devtools/client/aboutdebugging/moz.build
devtools/client/animationinspector/animation-inspector.xhtml
devtools/client/canvasdebugger/canvasdebugger.xul
devtools/client/commandline/commandlineoutput.xhtml
devtools/client/commandline/commandlinetooltip.xhtml
devtools/client/commandline/moz.build
devtools/client/debugger/debugger.xul
devtools/client/debugger/moz.build
devtools/client/debugger/new/index.html
devtools/client/definitions.js
devtools/client/dom/content/dom-view.css
devtools/client/framework/connect/connect.xhtml
devtools/client/framework/connect/moz.build
devtools/client/framework/moz.build
devtools/client/framework/test/browser_toolbox_sidebar_tool.xul
devtools/client/framework/toolbox-options.xhtml
devtools/client/framework/toolbox.xul
devtools/client/inspector/inspector.xhtml
devtools/client/inspector/markup/markup.xhtml
devtools/client/jar.mn
devtools/client/jsonview/css/search-box.css
devtools/client/memory/memory.xhtml
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/responsive.html/index.css
devtools/client/responsivedesign/responsivedesign-child.js
devtools/client/scratchpad/scratchpad.xul
devtools/client/shadereditor/shadereditor.xul
devtools/client/shared/components/notification-box.css
devtools/client/shared/components/tabs/tabs.css
devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
devtools/client/shared/components/test/mochitest/test_tree_07.html
devtools/client/shared/components/test/mochitest/test_tree_08.html
devtools/client/shared/components/test/mochitest/test_tree_09.html
devtools/client/shared/components/test/mochitest/test_tree_10.html
devtools/client/shared/components/test/mochitest/test_tree_11.html
devtools/client/shared/components/tree/tree-view.css
devtools/client/shared/css-reload.js
devtools/client/shared/moz.build
devtools/client/shared/test/browser_html_tooltip-01.js
devtools/client/shared/test/browser_html_tooltip-02.js
devtools/client/shared/test/browser_html_tooltip-03.js
devtools/client/shared/test/browser_html_tooltip-04.js
devtools/client/shared/test/browser_html_tooltip-05.js
devtools/client/shared/test/browser_html_tooltip_arrow-01.js
devtools/client/shared/test/browser_html_tooltip_arrow-02.js
devtools/client/shared/test/browser_html_tooltip_consecutive-show.js
devtools/client/shared/test/browser_html_tooltip_hover.js
devtools/client/shared/test/browser_html_tooltip_offset.js
devtools/client/shared/test/browser_html_tooltip_rtl.js
devtools/client/shared/test/browser_html_tooltip_variable-height.js
devtools/client/shared/test/browser_html_tooltip_width-auto.js
devtools/client/shared/test/browser_html_tooltip_xul-wrapper.js
devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js
devtools/client/shared/test/browser_spectrum.js
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/widgets/VariablesView.xul
devtools/client/shared/widgets/filter-widget.css
devtools/client/shared/widgets/graphs-frame.xhtml
devtools/client/shared/widgets/moz.build
devtools/client/shared/widgets/spectrum.css
devtools/client/shared/widgets/tooltip/CssDocsTooltip.js
devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js
devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js
devtools/client/sourceeditor/codemirror/addon/dialog/moz.build
devtools/client/sourceeditor/codemirror/addon/moz.build
devtools/client/sourceeditor/codemirror/lib/moz.build
devtools/client/sourceeditor/codemirror/moz.build
devtools/client/sourceeditor/codemirror/mozilla.css
devtools/client/sourceeditor/editor.js
devtools/client/sourceeditor/moz.build
devtools/client/sourceeditor/test/codemirror/codemirror.html
devtools/client/sourceeditor/test/codemirror/vimemacs.html
devtools/client/storage/storage.xul
devtools/client/styleeditor/styleeditor.xul
devtools/client/themes/animationinspector.css
devtools/client/themes/canvasdebugger.css
devtools/client/themes/commandline.inc.css
devtools/client/themes/common.css
devtools/client/themes/dark-theme.css
devtools/client/themes/debugger.css
devtools/client/themes/devtools-browser.css
devtools/client/themes/firebug-theme.css
devtools/client/themes/images/filetypes/moz.build
devtools/client/themes/images/firebug/moz.build
devtools/client/themes/images/moz.build
devtools/client/themes/images/responsivemode/moz.build
devtools/client/themes/inspector.css
devtools/client/themes/jit-optimizations.css
devtools/client/themes/light-theme.css
devtools/client/themes/memory.css
devtools/client/themes/moz.build
devtools/client/themes/netmonitor.css
devtools/client/themes/performance.css
devtools/client/themes/projecteditor/moz.build
devtools/client/themes/responsivedesign.inc.css
devtools/client/themes/rules.css
devtools/client/themes/storage.css
devtools/client/themes/toolbars.css
devtools/client/themes/toolbox.css
devtools/client/themes/tooltip/moz.build
devtools/client/themes/variables.css
devtools/client/themes/webaudioeditor.css
devtools/client/themes/webconsole.css
devtools/client/themes/widgets.css
devtools/client/webaudioeditor/webaudioeditor.xul
devtools/client/webconsole/net/components/net-info-group.css
devtools/client/webconsole/webconsole.xul
devtools/client/webide/themes/panel-listing.css
--- a/browser/base/content/test/general/browser_parsable_css.js
+++ b/browser/base/content/test/general/browser_parsable_css.js
@@ -42,21 +42,21 @@ let whitelist = [
   {sourceName: /res\/forms\.css$/i,
    errorMessage: /Unknown property.*overflow-clip-box/i,
    isFromDevTools: false},
 ];
 
 // Platform can be "linux", "macosx" or "win". If omitted, the exception applies to all platforms.
 let allowedImageReferences = [
   // Bug 1302691
-  {file: "chrome://devtools/skin/images/dock-bottom-minimize@2x.png",
-   from: "chrome://devtools/skin/toolbox.css",
+  {file: "images/dock-bottom-minimize@2x.png",
+   from: "devtools/client/themes/toolbox.css",
    isFromDevTools: true},
-  {file: "chrome://devtools/skin/images/dock-bottom-maximize@2x.png",
-   from: "chrome://devtools/skin/toolbox.css",
+  {file: "images/dock-bottom-maximize@2x.png",
+   from: "devtools/client/themes/toolbox.css",
    isFromDevTools: true},
 ];
 
 var moduleLocation = gTestPath.replace(/\/[^\/]*$/i, "/parsingTestHelpers.jsm");
 var {generateURIsFromDirTree} = Cu.import(moduleLocation, {});
 
 // Add suffix to stylesheets' URI so that we always load them here and
 // have them parsed. Add a random number so that even if we run this
--- a/browser/installer/allowed-dupes.mn
+++ b/browser/installer/allowed-dupes.mn
@@ -44,28 +44,28 @@ browser/chrome/devtools/modules/devtools
 browser/chrome/devtools/modules/devtools/client/inspector/inspector.xhtml
 browser/chrome/devtools/modules/devtools/client/jsonview/css/controls.png
 browser/chrome/devtools/modules/devtools/client/jsonview/css/controls@2x.png
 browser/chrome/devtools/modules/devtools/client/memory/initializer.js
 browser/chrome/devtools/modules/devtools/client/projecteditor/lib/helpers/readdir.js
 browser/chrome/devtools/modules/devtools/client/shared/frame-script-utils.js
 browser/chrome/devtools/modules/devtools/client/shared/theme-switching.js
 browser/chrome/devtools/modules/devtools/client/themes/common.css
+browser/chrome/devtools/modules/devtools/client/themes/images/security-state-broken.svg
+browser/chrome/devtools/modules/devtools/client/themes/images/security-state-secure.svg
 browser/chrome/devtools/modules/devtools/client/themes/variables.css
 browser/chrome/devtools/skin/common.css
 browser/chrome/devtools/skin/images/command-scratchpad.svg
 browser/chrome/devtools/skin/images/controls.png
 browser/chrome/devtools/skin/images/controls@2x.png
 browser/chrome/devtools/skin/images/debugger-blackbox.svg
 browser/chrome/devtools/skin/images/debugger-prettyprint.svg
 browser/chrome/devtools/skin/images/filetypes/store.svg
 browser/chrome/devtools/skin/images/itemToggle.svg
-browser/chrome/devtools/skin/images/security-state-broken.svg
 browser/chrome/devtools/skin/images/security-state-local.svg
-browser/chrome/devtools/skin/images/security-state-secure.svg
 browser/chrome/devtools/skin/images/tabs-icon.svg
 browser/chrome/devtools/skin/images/tool-scratchpad.svg
 browser/chrome/devtools/skin/images/tool-storage.svg
 browser/chrome/devtools/skin/images/tool-styleeditor.svg
 browser/chrome/devtools/skin/promisedebugger.css
 browser/chrome/devtools/skin/variables.css
 modules/devtools/Console.jsm
 modules/devtools/Loader.jsm
--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -156,28 +156,28 @@ button {
 .addons-install-error {
   background-color: #f3b0b0;
   padding: 5px 10px;
   margin: 5px 4px 5px 0px;
 }
 
 .service-worker-disabled .warning,
 .addons-install-error .warning {
-  background-image: url(chrome://devtools/skin/images/alerticon-warning.png);
+  background-image: url(resource://devtools/client/themes/images/alerticon-warning.png);
   background-size: 13px 12px;
   margin-right: 10px;
   display: inline-block;
   width: 13px;
   height: 12px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .service-worker-disabled .warning,
   .addons-install-error .warning {
-    background-image: url(chrome://devtools/skin/images/alerticon-warning@2x.png);
+    background-image: url(resource://devtools/client/themes/images/alerticon-warning@2x.png);
   }
 }
 
 .addons-options {
   flex: 1;
 }
 
 .addons-debugging-label {
--- a/devtools/client/aboutdebugging/aboutdebugging.xhtml
+++ b/devtools/client/aboutdebugging/aboutdebugging.xhtml
@@ -8,15 +8,15 @@
 <!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd"> %toolboxDTD;
 <!ENTITY % aboutdebuggingDTD SYSTEM "chrome://devtools/locale/aboutdebugging.dtd"> %aboutdebuggingDTD;
 ]>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>&aboutDebugging.fullTitle;</title>
     <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://devtools/content/aboutdebugging/aboutdebugging.css"  type="text/css"/>
+    <link rel="stylesheet" href="resource://devtools/client/aboutdebugging/aboutdebugging.css"  type="text/css"/>
     <script type="application/javascript" src="resource://devtools/client/shared/vendor/react.js"></script>
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/aboutdebugging/initializer.js"></script>
   </head>
   <body id="body">
   </body>
 </html>
--- a/devtools/client/aboutdebugging/components/aboutdebugging.js
+++ b/devtools/client/aboutdebugging/components/aboutdebugging.js
@@ -25,27 +25,27 @@ loader.lazyRequireGetter(this, "Telemetr
   "devtools/client/shared/telemetry");
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
 const panels = [{
   id: "addons",
   name: Strings.GetStringFromName("addons"),
-  icon: "chrome://devtools/skin/images/debugging-addons.svg",
+  icon: "resource://devtools/client/themes/images/debugging-addons.svg",
   component: AddonsPanel
 }, {
   id: "tabs",
   name: Strings.GetStringFromName("tabs"),
-  icon: "chrome://devtools/skin/images/debugging-tabs.svg",
+  icon: "resource://devtools/client/themes/images/debugging-tabs.svg",
   component: TabsPanel
 }, {
   id: "workers",
   name: Strings.GetStringFromName("workers"),
-  icon: "chrome://devtools/skin/images/debugging-workers.svg",
+  icon: "resource://devtools/client/themes/images/debugging-workers.svg",
   component: WorkersPanel
 }];
 
 const defaultPanelId = "addons";
 
 module.exports = createClass({
   displayName: "AboutDebuggingApp",
 
--- a/devtools/client/aboutdebugging/components/tabs/panel.js
+++ b/devtools/client/aboutdebugging/components/tabs/panel.js
@@ -58,17 +58,17 @@ module.exports = createClass({
           let idx = url.pathname.lastIndexOf("/");
           if (idx === -1) {
             prePath += url.pathname;
           } else {
             prePath += url.pathname.substr(0, idx);
           }
           tab.icon = prePath + "/favicon.ico";
         } else {
-          tab.icon = "chrome://devtools/skin/images/globe.svg";
+          tab.icon = "resource://devtools/client/themes/images/globe.svg";
         }
       });
       this.setState({ tabs });
     });
   },
 
   render() {
     let { client, id } = this.props;
--- a/devtools/client/aboutdebugging/components/workers/panel.js
+++ b/devtools/client/aboutdebugging/components/workers/panel.js
@@ -22,17 +22,17 @@ loader.lazyImporter(this, "PrivateBrowsi
   "resource://gre/modules/PrivateBrowsingUtils.jsm");
 
 loader.lazyRequireGetter(this, "DebuggerClient",
   "devtools/shared/client/main", true);
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
-const WorkerIcon = "chrome://devtools/skin/images/debugging-workers.svg";
+const WorkerIcon = "resource://devtools/client/themes/images/debugging-workers.svg";
 const MORE_INFO_URL = "https://developer.mozilla.org/en-US/docs/Tools/about%3Adebugging";
 
 module.exports = createClass({
   displayName: "WorkersPanel",
 
   propTypes: {
     client: PropTypes.instanceOf(DebuggerClient).isRequired,
     id: PropTypes.string.isRequired
--- a/devtools/client/aboutdebugging/moz.build
+++ b/devtools/client/aboutdebugging/moz.build
@@ -7,8 +7,12 @@
 DIRS += [
     'components',
     'modules',
 ]
 
 BROWSER_CHROME_MANIFESTS += [
     'test/browser.ini'
 ]
+
+DevToolsModules(
+  'aboutdebugging.css',
+)
--- a/devtools/client/animationinspector/animation-inspector.xhtml
+++ b/devtools/client/animationinspector/animation-inspector.xhtml
@@ -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/. -->
 <!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/skin/animationinspector.css" type="text/css"/>
+    <link rel="stylesheet" href="resource://devtools/client/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 id="all-animations-label" class="label"></span>
       <button id="toggle-all" standalone="true" class="devtools-button pause-button"></button>
     </div>
     <div id="timeline-toolbar" class="theme-toolbar">
--- a/devtools/client/canvasdebugger/canvasdebugger.xul
+++ b/devtools/client/canvasdebugger/canvasdebugger.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/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/canvasdebugger.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/canvasdebugger.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % canvasDebuggerDTD SYSTEM "chrome://devtools/locale/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
@@ -3,15 +3,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/. -->
 
 <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/commandline/commandline.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/commandline.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/commandline/commandline.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/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
@@ -3,16 +3,16 @@
 
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <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/commandline/commandline.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/commandline.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/commandline/commandline.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/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/commandline/moz.build
+++ b/devtools/client/commandline/moz.build
@@ -1,5 +1,9 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
+
+DevToolsModules(
+  'commandline.css',
+)
\ No newline at end of file
--- a/devtools/client/debugger/debugger.xul
+++ b/devtools/client/debugger/debugger.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://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/debugger/debugger.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/debugger.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/debugger/debugger.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/debugger.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % debuggerDTD SYSTEM "chrome://devtools/locale/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/debugger/moz.build
+++ b/devtools/client/debugger/moz.build
@@ -5,16 +5,17 @@
 
 DIRS += [
     'content',
     'new'
 ]
 
 DevToolsModules(
     'debugger-commands.js',
+    'debugger.css',
     'panel.js'
 )
 
 BROWSER_CHROME_MANIFESTS += [
   'new/test/mochitest/browser.ini',
   'test/mochitest/browser.ini',
   'test/mochitest/browser2.ini'
 ]
--- a/devtools/client/debugger/new/index.html
+++ b/devtools/client/debugger/new/index.html
@@ -1,23 +1,23 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.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 dir="">
   <head>
     <link rel="stylesheet"
           type="text/css"
-          href="chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css" />
+          href="resource://devtools/client/sourceeditor/codemirror/lib/codemirror.css" />
     <link rel="stylesheet"
           type="text/css"
-          href="chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css" />
+          href="resource://devtools/client/sourceeditor/codemirror/addon/dialog/dialog.css" />
     <link rel="stylesheet"
           type="text/css"
-          href="chrome://devtools/content/sourceeditor/codemirror/mozilla.css" />
+          href="resource://devtools/client/sourceeditor/codemirror/mozilla.css" />
     <link rel="stylesheet" type="text/css" href="resource://devtools/client/debugger/new/styles.css" />
   </head>
   <body>
     <div id="mount"></div>
     <script type="application/javascript;version=1.8"
             src="chrome://devtools/content/shared/theme-switching.js"></script>
     <script type="text/javascript">
       const { BrowserLoader } = Components.utils.import("resource://devtools/client/shared/browser-loader.js", {});
--- a/devtools/client/definitions.js
+++ b/devtools/client/definitions.js
@@ -29,17 +29,17 @@ const L10N = new LocalizationHelper("dev
 var Tools = {};
 exports.Tools = Tools;
 
 // Definitions
 Tools.options = {
   id: "options",
   ordinal: 0,
   url: "chrome://devtools/content/framework/toolbox-options.xhtml",
-  icon: "chrome://devtools/skin/images/tool-options.svg",
+  icon: "resource://devtools/client/themes/images/tool-options.svg",
   invertIconForDarkTheme: true,
   bgTheme: "theme-body",
   label: l10n("options.label"),
   iconOnly: true,
   panelLabel: l10n("options.panelLabel"),
   tooltip: l10n("optionsButton.tooltip"),
   inMenu: false,
 
@@ -53,17 +53,17 @@ Tools.options = {
 };
 
 Tools.inspector = {
   id: "inspector",
   accesskey: l10n("inspector.accesskey"),
   key: l10n("inspector.commandkey"),
   ordinal: 1,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
-  icon: "chrome://devtools/skin/images/tool-inspector.svg",
+  icon: "resource://devtools/client/themes/images/tool-inspector.svg",
   invertIconForDarkTheme: true,
   url: "chrome://devtools/content/inspector/inspector.xhtml",
   label: l10n("inspector.label"),
   panelLabel: l10n("inspector.panelLabel"),
   get tooltip() {
     return l10n("inspector.tooltip2",
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
@@ -88,17 +88,17 @@ Tools.inspector = {
 };
 
 Tools.webConsole = {
   id: "webconsole",
   key: l10n("cmd.commandkey"),
   accesskey: l10n("webConsoleCmd.accesskey"),
   modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 2,
-  icon: "chrome://devtools/skin/images/tool-webconsole.svg",
+  icon: "resource://devtools/client/themes/images/tool-webconsole.svg",
   invertIconForDarkTheme: true,
   url: "chrome://devtools/content/webconsole/webconsole.xul",
   label: l10n("ToolboxTabWebconsole.label"),
   menuLabel: l10n("MenuWebconsole.label"),
   panelLabel: l10n("ToolboxWebConsole.panelLabel"),
   get tooltip() {
     return l10n("ToolboxWebconsole.tooltip2",
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
@@ -126,19 +126,19 @@ Tools.webConsole = {
 };
 
 Tools.jsdebugger = {
   id: "jsdebugger",
   key: l10n("debuggerMenu.commandkey"),
   accesskey: l10n("debuggerMenu.accesskey"),
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 3,
-  icon: "chrome://devtools/skin/images/tool-debugger.svg",
+  icon: "resource://devtools/client/themes/images/tool-debugger.svg",
   invertIconForDarkTheme: true,
-  highlightedicon: "chrome://devtools/skin/images/tool-debugger-paused.svg",
+  highlightedicon: "resource://devtools/client/themes/images/tool-debugger-paused.svg",
   url: "chrome://devtools/content/debugger/debugger.xul",
   label: l10n("ToolboxDebugger.label"),
   panelLabel: l10n("ToolboxDebugger.panelLabel"),
   get tooltip() {
     return l10n("ToolboxDebugger.tooltip2",
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
   inMenu: true,
@@ -178,17 +178,17 @@ Services.prefs.addObserver(
 
 Tools.styleEditor = {
   id: "styleeditor",
   key: l10n("open.commandkey"),
   ordinal: 4,
   visibilityswitch: "devtools.styleeditor.enabled",
   accesskey: l10n("open.accesskey"),
   modifiers: "shift",
-  icon: "chrome://devtools/skin/images/tool-styleeditor.svg",
+  icon: "resource://devtools/client/themes/images/tool-styleeditor.svg",
   invertIconForDarkTheme: true,
   url: "chrome://devtools/content/styleeditor/styleeditor.xul",
   label: l10n("ToolboxStyleEditor.label"),
   panelLabel: l10n("ToolboxStyleEditor.panelLabel"),
   get tooltip() {
     return l10n("ToolboxStyleEditor.tooltip3",
     "Shift+" + functionkey(this.key));
   },
@@ -203,17 +203,17 @@ Tools.styleEditor = {
     return new StyleEditorPanel(iframeWindow, toolbox);
   }
 };
 
 Tools.shaderEditor = {
   id: "shadereditor",
   ordinal: 5,
   visibilityswitch: "devtools.shadereditor.enabled",
-  icon: "chrome://devtools/skin/images/tool-shadereditor.svg",
+  icon: "resource://devtools/client/themes/images/tool-shadereditor.svg",
   invertIconForDarkTheme: true,
   url: "chrome://devtools/content/shadereditor/shadereditor.xul",
   label: l10n("ToolboxShaderEditor.label"),
   panelLabel: l10n("ToolboxShaderEditor.panelLabel"),
   tooltip: l10n("ToolboxShaderEditor.tooltip"),
 
   isTargetSupported: function (target) {
     return target.hasActor("webgl") && !target.chrome;
@@ -223,17 +223,17 @@ Tools.shaderEditor = {
     return new ShaderEditorPanel(iframeWindow, toolbox);
   }
 };
 
 Tools.canvasDebugger = {
   id: "canvasdebugger",
   ordinal: 6,
   visibilityswitch: "devtools.canvasdebugger.enabled",
-  icon: "chrome://devtools/skin/images/tool-canvas.svg",
+  icon: "resource://devtools/client/themes/images/tool-canvas.svg",
   invertIconForDarkTheme: true,
   url: "chrome://devtools/content/canvasdebugger/canvasdebugger.xul",
   label: l10n("ToolboxCanvasDebugger.label"),
   panelLabel: l10n("ToolboxCanvasDebugger.panelLabel"),
   tooltip: l10n("ToolboxCanvasDebugger.tooltip"),
 
   // Hide the Canvas Debugger in the Add-on Debugger and Browser Toolbox
   // (bug 1047520).
@@ -244,19 +244,19 @@ Tools.canvasDebugger = {
   build: function (iframeWindow, toolbox) {
     return new CanvasDebuggerPanel(iframeWindow, toolbox);
   }
 };
 
 Tools.performance = {
   id: "performance",
   ordinal: 7,
-  icon: "chrome://devtools/skin/images/tool-profiler.svg",
+  icon: "resource://devtools/client/themes/images/tool-profiler.svg",
   invertIconForDarkTheme: true,
-  highlightedicon: "chrome://devtools/skin/images/tool-profiler-active.svg",
+  highlightedicon: "resource://devtools/client/themes/images/tool-profiler-active.svg",
   url: "chrome://devtools/content/performance/performance.xul",
   visibilityswitch: "devtools.performance.enabled",
   label: l10n("performance.label"),
   panelLabel: l10n("performance.panelLabel"),
   get tooltip() {
     return l10n("performance.tooltip", "Shift+" + functionkey(this.key));
   },
   accesskey: l10n("performance.accesskey"),
@@ -271,19 +271,19 @@ Tools.performance = {
   build: function (frame, target) {
     return new PerformancePanel(frame, target);
   }
 };
 
 Tools.memory = {
   id: "memory",
   ordinal: 8,
-  icon: "chrome://devtools/skin/images/tool-memory.svg",
+  icon: "resource://devtools/client/themes/images/tool-memory.svg",
   invertIconForDarkTheme: true,
-  highlightedicon: "chrome://devtools/skin/images/tool-memory-active.svg",
+  highlightedicon: "resource://devtools/client/themes/images/tool-memory-active.svg",
   url: "chrome://devtools/content/memory/memory.xhtml",
   visibilityswitch: "devtools.memory.enabled",
   label: l10n("memory.label"),
   panelLabel: l10n("memory.panelLabel"),
   tooltip: l10n("memory.tooltip"),
 
   isTargetSupported: function (target) {
     return target.getTrait("heapSnapshots") && !target.isAddon;
@@ -296,17 +296,17 @@ Tools.memory = {
 
 Tools.netMonitor = {
   id: "netmonitor",
   accesskey: l10n("netmonitor.accesskey"),
   key: l10n("netmonitor.commandkey"),
   ordinal: 9,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   visibilityswitch: "devtools.netmonitor.enabled",
-  icon: "chrome://devtools/skin/images/tool-network.svg",
+  icon: "resource://devtools/client/themes/images/tool-network.svg",
   invertIconForDarkTheme: true,
   url: "chrome://devtools/content/netmonitor/netmonitor.xul",
   label: l10n("netmonitor.label"),
   panelLabel: l10n("netmonitor.panelLabel"),
   get tooltip() {
     return l10n("netmonitor.tooltip2",
     (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
@@ -323,17 +323,17 @@ Tools.netMonitor = {
 
 Tools.storage = {
   id: "storage",
   key: l10n("storage.commandkey"),
   ordinal: 10,
   accesskey: l10n("storage.accesskey"),
   modifiers: "shift",
   visibilityswitch: "devtools.storage.enabled",
-  icon: "chrome://devtools/skin/images/tool-storage.svg",
+  icon: "resource://devtools/client/themes/images/tool-storage.svg",
   invertIconForDarkTheme: true,
   url: "chrome://devtools/content/storage/storage.xul",
   label: l10n("storage.label"),
   menuLabel: l10n("storage.menuLabel"),
   panelLabel: l10n("storage.panelLabel"),
   get tooltip() {
     return l10n("storage.tooltip3", "Shift+" + functionkey(this.key));
   },
@@ -348,17 +348,17 @@ Tools.storage = {
     return new StoragePanel(iframeWindow, toolbox);
   }
 };
 
 Tools.webAudioEditor = {
   id: "webaudioeditor",
   ordinal: 11,
   visibilityswitch: "devtools.webaudioeditor.enabled",
-  icon: "chrome://devtools/skin/images/tool-webaudio.svg",
+  icon: "resource://devtools/client/themes/images/tool-webaudio.svg",
   invertIconForDarkTheme: true,
   url: "chrome://devtools/content/webaudioeditor/webaudioeditor.xul",
   label: l10n("ToolboxWebAudioEditor1.label"),
   panelLabel: l10n("ToolboxWebAudioEditor1.panelLabel"),
   tooltip: l10n("ToolboxWebAudioEditor1.tooltip"),
 
   isTargetSupported: function (target) {
     return !target.chrome && target.hasActor("webaudio");
@@ -368,17 +368,17 @@ Tools.webAudioEditor = {
     return new WebAudioEditorPanel(iframeWindow, toolbox);
   }
 };
 
 Tools.scratchpad = {
   id: "scratchpad",
   ordinal: 12,
   visibilityswitch: "devtools.scratchpad.enabled",
-  icon: "chrome://devtools/skin/images/tool-scratchpad.svg",
+  icon: "resource://devtools/client/themes/images/tool-scratchpad.svg",
   invertIconForDarkTheme: true,
   url: "chrome://devtools/content/scratchpad/scratchpad.xul",
   label: l10n("scratchpad.label"),
   panelLabel: l10n("scratchpad.panelLabel"),
   tooltip: l10n("scratchpad.tooltip"),
   inMenu: false,
   commands: "devtools/client/scratchpad/scratchpad-commands",
 
@@ -393,17 +393,17 @@ Tools.scratchpad = {
 
 Tools.dom = {
   id: "dom",
   accesskey: l10n("dom.accesskey"),
   key: l10n("dom.commandkey"),
   ordinal: 13,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   visibilityswitch: "devtools.dom.enabled",
-  icon: "chrome://devtools/skin/images/tool-dom.svg",
+  icon: "resource://devtools/client/themes/images/tool-dom.svg",
   invertIconForDarkTheme: true,
   url: "chrome://devtools/content/dom/dom.html",
   label: l10n("dom.label"),
   panelLabel: l10n("dom.panelLabel"),
   get tooltip() {
     return l10n("dom.tooltip",
       (osString == "Darwin" ? "Cmd+Opt+" : "Ctrl+Shift+") + this.key);
   },
@@ -436,33 +436,33 @@ var defaultTools = [
 ];
 
 exports.defaultTools = defaultTools;
 
 Tools.darkTheme = {
   id: "dark",
   label: l10n("options.darkTheme.label2"),
   ordinal: 1,
-  stylesheets: ["chrome://devtools/skin/dark-theme.css"],
+  stylesheets: ["resource://devtools/client/themes/dark-theme.css"],
   classList: ["theme-dark"],
 };
 
 Tools.lightTheme = {
   id: "light",
   label: l10n("options.lightTheme.label2"),
   ordinal: 2,
-  stylesheets: ["chrome://devtools/skin/light-theme.css"],
+  stylesheets: ["resource://devtools/client/themes/light-theme.css"],
   classList: ["theme-light"],
 };
 
 Tools.firebugTheme = {
   id: "firebug",
   label: l10n("options.firebugTheme.label2"),
   ordinal: 3,
-  stylesheets: ["chrome://devtools/skin/firebug-theme.css"],
+  stylesheets: ["resource://devtools/client/themes/firebug-theme.css"],
   classList: ["theme-light", "theme-firebug"],
 };
 
 exports.defaultThemes = [
   Tools.darkTheme,
   Tools.lightTheme,
   Tools.firebugTheme,
 ];
--- a/devtools/client/dom/content/dom-view.css
+++ b/devtools/client/dom/content/dom-view.css
@@ -37,17 +37,17 @@ body {
 
 .treeTable .treeLabel,
 .treeTable td.treeValueCell .objectBox {
   direction: ltr; /* Don't change the direction of english labels */
 }
 
 /* Read only properties have a padlock icon */
 .treeTable tr:not(.writable) td.treeValueCell {
-  background: url("chrome://devtools/skin/images/firebug/read-only.svg") no-repeat;
+  background: url("resource://devtools/client/themes/images/firebug/read-only.svg") no-repeat;
   background-position: 1px 5px;
   background-size: 10px 10px;
 }
 
 .treeTable tr:not(.writable) td.treeValueCell:dir(rtl) {
   background-position-x: right 1px;
 }
 
--- a/devtools/client/framework/connect/connect.xhtml
+++ b/devtools/client/framework/connect/connect.xhtml
@@ -7,18 +7,18 @@
 <!ENTITY % connectionDTD SYSTEM "chrome://devtools/locale/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://devtools/skin/dark-theme.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://devtools/content/framework/connect/connect.css" type="text/css"/>
+    <link rel="stylesheet" href="resource://devtools/client/themes/dark-theme.css" type="text/css"/>
+    <link rel="stylesheet" href="resource://devtools/client/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>
           <span>&host;</span>
new file mode 100644
--- /dev/null
+++ b/devtools/client/framework/connect/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    'connect.css',
+)
--- a/devtools/client/framework/moz.build
+++ b/devtools/client/framework/moz.build
@@ -1,29 +1,34 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+DIRS += [
+    'connect',
+]
+
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
 TEST_HARNESS_FILES.xpcshell.devtools.client.framework.test += [
     'test/shared-redux-head.js',
 ]
 
 DevToolsModules(
     'about-devtools-toolbox.js',
     'attach-thread.js',
     'browser-menus.js',
     'devtools-browser.js',
     'devtools.js',
     'gDevTools.jsm',
     'location-store.js',
     'menu-item.js',
     'menu.js',
+    'options-panel.css',
     'selection.js',
     'sidebar.js',
     'source-map-service.js',
     'target-from-url.js',
     'target.js',
     'toolbox-highlighter-utils.js',
     'toolbox-host-manager.js',
     'toolbox-hosts.js',
--- a/devtools/client/framework/test/browser_toolbox_sidebar_tool.xul
+++ b/devtools/client/framework/test/browser_toolbox_sidebar_tool.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://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/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-options.xhtml
+++ b/devtools/client/framework/toolbox-options.xhtml
@@ -5,17 +5,17 @@
 <!DOCTYPE html [
 <!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
  %toolboxDTD;
 ]>
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>Toolbox option</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <link rel="stylesheet" href="chrome://devtools/content/framework/options-panel.css" type="text/css"/>
+    <link rel="stylesheet" href="resource://devtools/client/framework/options-panel.css" type="text/css"/>
     <script type="application/javascript;version=1.8" src="chrome://devtools/content/shared/theme-switching.js"/>
   </head>
   <body role="application" class="theme-body">
   <form id="options-panel">
     <div id="tools-box" class="options-vertical-pane">
       <fieldset id="default-tools-box" class="options-groupbox">
         <legend>&options.selectDefaultTools.label2;</legend>
       </fieldset>
--- 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://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/toolbox.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/toolbox.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/shared/components/notification-box.css" type="text/css"?>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <!DOCTYPE window [
 <!ENTITY % toolboxDTD SYSTEM "chrome://devtools/locale/toolbox.dtd" >
 %toolboxDTD;
 <!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -4,24 +4,24 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 
 <html xmlns="http://www.w3.org/1999/xhtml" dir="">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 
   <link rel="stylesheet" href="resource://devtools/client/shared/widgets/widgets.css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/widgets.css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/inspector.css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/rules.css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/computed.css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/fonts.css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/boxmodel.css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/layout.css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/animationinspector.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/widgets.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/inspector.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/rules.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/computed.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/fonts.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/boxmodel.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/layout.css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/animationinspector.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/sidebar-toggle.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabs.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/tabs/tabbar.css"/>
   <link rel="stylesheet" href="resource://devtools/client/inspector/components/inspector-tab-panel.css"/>
   <link rel="stylesheet" href="resource://devtools/client/shared/components/splitter/split-box.css"/>
   <link rel="stylesheet" href="resource://devtools/client/inspector/layout/components/Accordion.css"/>
 
   <script type="application/javascript;version=1.8"
--- a/devtools/client/inspector/markup/markup.xhtml
+++ b/devtools/client/inspector/markup/markup.xhtml
@@ -2,20 +2,20 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!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/skin/markup.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://devtools/content/sourceeditor/codemirror/mozilla.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/markup.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/sourceeditor/codemirror/lib/codemirror.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/sourceeditor/codemirror/addon/dialog/dialog.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/sourceeditor/codemirror/mozilla.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="chrome://devtools/content/sourceeditor/codemirror/codemirror.bundle.js"></script>
 
 </head>
 <body class="theme-body devtools-monospace" role="application">
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -1,45 +1,40 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 devtools.jar:
 %   content devtools %content/
     content/shared/vendor/d3.js (shared/vendor/d3.js)
     content/shared/vendor/dagre-d3.js (shared/vendor/dagre-d3.js)
-    content/shared/widgets/widgets.css (shared/widgets/widgets.css)
     content/shared/widgets/VariablesView.xul (shared/widgets/VariablesView.xul)
     content/projecteditor/chrome/content/projecteditor.xul (projecteditor/chrome/content/projecteditor.xul)
     content/projecteditor/lib/helpers/readdir.js (projecteditor/lib/helpers/readdir.js)
     content/projecteditor/chrome/content/projecteditor-loader.xul (projecteditor/chrome/content/projecteditor-loader.xul)
     content/projecteditor/chrome/content/projecteditor-test.xul (projecteditor/chrome/content/projecteditor-test.xul)
     content/projecteditor/chrome/content/projecteditor-loader.js (projecteditor/chrome/content/projecteditor-loader.js)
     content/netmonitor/netmonitor.xul (netmonitor/netmonitor.xul)
     content/netmonitor/netmonitor-controller.js (netmonitor/netmonitor-controller.js)
     content/netmonitor/netmonitor-view.js (netmonitor/netmonitor-view.js)
     content/webconsole/webconsole.xul (webconsole/webconsole.xul)
 *   content/scratchpad/scratchpad.xul (scratchpad/scratchpad.xul)
     content/scratchpad/scratchpad.js (scratchpad/scratchpad.js)
-    content/shared/splitview.css (shared/splitview.css)
     content/shared/theme-switching.js (shared/theme-switching.js)
     content/shared/frame-script-utils.js (shared/frame-script-utils.js)
     content/styleeditor/styleeditor.xul (styleeditor/styleeditor.xul)
     content/storage/storage.xul (storage/storage.xul)
     content/inspector/inspector.js (inspector/inspector.js)
     content/inspector/markup/markup.xhtml (inspector/markup/markup.xhtml)
     content/animationinspector/animation-controller.js (animationinspector/animation-controller.js)
     content/animationinspector/animation-panel.js (animationinspector/animation-panel.js)
     content/animationinspector/animation-inspector.xhtml (animationinspector/animation-inspector.xhtml)
-    content/sourceeditor/codemirror/addon/dialog/dialog.css (sourceeditor/codemirror/addon/dialog/dialog.css)
     content/sourceeditor/codemirror/addon/hint/show-hint.js (sourceeditor/codemirror/addon/hint/show-hint.js)
     content/sourceeditor/codemirror/addon/tern/tern.js (sourceeditor/codemirror/addon/tern/tern.js)
     content/sourceeditor/codemirror/codemirror.bundle.js (sourceeditor/codemirror/codemirror.bundle.js)
-    content/sourceeditor/codemirror/lib/codemirror.css (sourceeditor/codemirror/lib/codemirror.css)
-    content/sourceeditor/codemirror/mozilla.css (sourceeditor/codemirror/mozilla.css)
     content/debugger/new/index.html (debugger/new/index.html)
     content/debugger/new/images/angle-brackets.svg (debugger/new/images/angle-brackets.svg)
     content/debugger/new/images/arrow.svg (debugger/new/images/arrow.svg)
     content/debugger/new/images/blackBox.svg (debugger/new/images/blackBox.svg)
     content/debugger/new/images/breakpoint.svg (debugger/new/images/breakpoint.svg)
     content/debugger/new/images/close.svg (debugger/new/images/close.svg)
     content/debugger/new/images/disableBreakpoints.svg (debugger/new/images/disableBreakpoints.svg)
     content/debugger/new/images/domain.svg (debugger/new/images/domain.svg)
@@ -53,17 +48,16 @@ devtools.jar:
     content/debugger/new/images/resume.svg (debugger/new/images/resume.svg)
     content/debugger/new/images/stepIn.svg (debugger/new/images/stepIn.svg)
     content/debugger/new/images/stepOut.svg (debugger/new/images/stepOut.svg)
     content/debugger/new/images/stepOver.svg (debugger/new/images/stepOver.svg)
     content/debugger/new/images/worker.svg (debugger/new/images/worker.svg)
     content/debugger/new/images/settings.svg (debugger/new/images/settings.svg)
     content/debugger/new/images/subSettings.svg (debugger/new/images/subSettings.svg)
     content/debugger/debugger.xul (debugger/debugger.xul)
-    content/debugger/debugger.css (debugger/debugger.css)
     content/debugger/debugger-controller.js (debugger/debugger-controller.js)
     content/debugger/debugger-view.js (debugger/debugger-view.js)
     content/debugger/views/workers-view.js (debugger/views/workers-view.js)
     content/debugger/views/variable-bubble-view.js (debugger/views/variable-bubble-view.js)
     content/debugger/views/watch-expressions-view.js (debugger/views/watch-expressions-view.js)
     content/debugger/views/global-search-view.js (debugger/views/global-search-view.js)
     content/debugger/views/toolbar-view.js (debugger/views/toolbar-view.js)
     content/debugger/views/options-view.js (debugger/views/options-view.js)
@@ -96,243 +90,31 @@ devtools.jar:
     content/performance/views/details-waterfall.js (performance/views/details-waterfall.js)
     content/performance/views/details-js-call-tree.js (performance/views/details-js-call-tree.js)
     content/performance/views/details-js-flamegraph.js (performance/views/details-js-flamegraph.js)
     content/performance/views/details-memory-call-tree.js (performance/views/details-memory-call-tree.js)
     content/performance/views/details-memory-flamegraph.js (performance/views/details-memory-flamegraph.js)
     content/performance/views/recordings.js (performance/views/recordings.js)
     content/memory/memory.xhtml (memory/memory.xhtml)
     content/memory/initializer.js (memory/initializer.js)
-    content/commandline/commandline.css (commandline/commandline.css)
     content/commandline/commandlineoutput.xhtml (commandline/commandlineoutput.xhtml)
     content/commandline/commandlinetooltip.xhtml (commandline/commandlinetooltip.xhtml)
     content/framework/toolbox-window.xul (framework/toolbox-window.xul)
     content/framework/toolbox-options.xhtml (framework/toolbox-options.xhtml)
     content/framework/toolbox.xul (framework/toolbox.xul)
     content/framework/toolbox-init.js (framework/toolbox-init.js)
-    content/framework/options-panel.css (framework/options-panel.css)
     content/framework/toolbox-process-window.xul (framework/toolbox-process-window.xul)
 *   content/framework/toolbox-process-window.js (framework/toolbox-process-window.js)
     content/framework/dev-edition-promo/dev-edition-promo.xul (framework/dev-edition-promo/dev-edition-promo.xul)
 *   content/framework/dev-edition-promo/dev-edition-promo.css (framework/dev-edition-promo/dev-edition-promo.css)
     content/framework/dev-edition-promo/dev-edition-logo.png (framework/dev-edition-promo/dev-edition-logo.png)
     content/inspector/inspector.xhtml (inspector/inspector.xhtml)
     content/framework/connect/connect.xhtml (framework/connect/connect.xhtml)
-    content/framework/connect/connect.css (framework/connect/connect.css)
     content/framework/connect/connect.js (framework/connect/connect.js)
     content/shared/widgets/graphs-frame.xhtml (shared/widgets/graphs-frame.xhtml)
-    content/shared/widgets/cubic-bezier.css (shared/widgets/cubic-bezier.css)
-    content/shared/widgets/mdn-docs.css (shared/widgets/mdn-docs.css)
-    content/shared/widgets/filter-widget.css (shared/widgets/filter-widget.css)
-    content/shared/widgets/spectrum.css (shared/widgets/spectrum.css)
     content/aboutdebugging/aboutdebugging.xhtml (aboutdebugging/aboutdebugging.xhtml)
-    content/aboutdebugging/aboutdebugging.css (aboutdebugging/aboutdebugging.css)
     content/aboutdebugging/initializer.js (aboutdebugging/initializer.js)
     content/responsive.html/index.xhtml (responsive.html/index.xhtml)
     content/responsive.html/index.js (responsive.html/index.js)
     content/dom/dom.html (dom/dom.html)
     content/dom/main.js (dom/main.js)
 %   skin devtools classic/1.0 %skin/
     skin/devtools-browser.css (themes/devtools-browser.css)
-    skin/dark-theme.css (themes/dark-theme.css)
-    skin/light-theme.css (themes/light-theme.css)
-    skin/firebug-theme.css (themes/firebug-theme.css)
-    skin/toolbars.css (themes/toolbars.css)
-    skin/toolbox.css (themes/toolbox.css)
-    skin/tooltips.css (themes/tooltips.css)
-    skin/images/add.svg (themes/images/add.svg)
-    skin/images/filters.svg (themes/images/filters.svg)
-    skin/images/filter-swatch.svg (themes/images/filter-swatch.svg)
-    skin/images/grid.svg (themes/images/grid.svg)
-    skin/images/angle-swatch.svg (themes/images/angle-swatch.svg)
-    skin/images/pseudo-class.svg (themes/images/pseudo-class.svg)
-    skin/images/controls.png (themes/images/controls.png)
-    skin/images/controls@2x.png (themes/images/controls@2x.png)
-    skin/images/animation-fast-track.svg (themes/images/animation-fast-track.svg)
-    skin/images/performance-icons.svg (themes/images/performance-icons.svg)
-    skin/widgets.css (themes/widgets.css)
-    skin/images/power.svg (themes/images/power.svg)
-    skin/images/filetypes/dir-close.svg (themes/images/filetypes/dir-close.svg)
-    skin/images/filetypes/dir-open.svg (themes/images/filetypes/dir-open.svg)
-    skin/images/filetypes/globe.svg (themes/images/filetypes/globe.svg)
-    skin/images/commandline-icon.svg (themes/images/commandline-icon.svg)
-    skin/images/alerticon-warning.png (themes/images/alerticon-warning.png)
-    skin/images/alerticon-warning@2x.png (themes/images/alerticon-warning@2x.png)
-    skin/rules.css (themes/rules.css)
-    skin/commandline.css (themes/commandline.css)
-    skin/images/command-paintflashing.svg (themes/images/command-paintflashing.svg)
-    skin/images/command-screenshot.svg (themes/images/command-screenshot.svg)
-    skin/images/command-responsivemode.svg (themes/images/command-responsivemode.svg)
-    skin/images/command-pick.svg (themes/images/command-pick.svg)
-    skin/images/command-frames.svg (themes/images/command-frames.svg)
-    skin/images/command-console.svg (themes/images/command-console.svg)
-    skin/images/command-eyedropper.svg (themes/images/command-eyedropper.svg)
-    skin/images/command-rulers.svg (themes/images/command-rulers.svg)
-    skin/images/command-measure.svg (themes/images/command-measure.svg)
-    skin/images/command-noautohide.svg (themes/images/command-noautohide.svg)
-    skin/markup.css (themes/markup.css)
-    skin/images/editor-error.png (themes/images/editor-error.png)
-    skin/images/breakpoint.svg (themes/images/breakpoint.svg)
-    skin/webconsole.css (themes/webconsole.css)
-    skin/images/webconsole.svg (themes/images/webconsole.svg)
-    skin/images/breadcrumbs-divider@2x.png (themes/images/breadcrumbs-divider@2x.png)
-    skin/images/breadcrumbs-scrollbutton.png (themes/images/breadcrumbs-scrollbutton.png)
-    skin/images/breadcrumbs-scrollbutton@2x.png (themes/images/breadcrumbs-scrollbutton@2x.png)
-    skin/animationinspector.css (themes/animationinspector.css)
-    skin/canvasdebugger.css (themes/canvasdebugger.css)
-    skin/debugger.css (themes/debugger.css)
-    skin/netmonitor.css (themes/netmonitor.css)
-    skin/dom.css (themes/dom.css)
-    skin/performance.css (themes/performance.css)
-    skin/memory.css (themes/memory.css)
-    skin/scratchpad.css (themes/scratchpad.css)
-    skin/shadereditor.css (themes/shadereditor.css)
-    skin/storage.css (themes/storage.css)
-    skin/splitview.css (themes/splitview.css)
-    skin/styleeditor.css (themes/styleeditor.css)
-    skin/webaudioeditor.css (themes/webaudioeditor.css)
-    skin/components-frame.css (themes/components-frame.css)
-    skin/components-h-split-box.css (themes/components-h-split-box.css)
-    skin/jit-optimizations.css (themes/jit-optimizations.css)
-    skin/images/filter.svg (themes/images/filter.svg)
-    skin/images/search.svg (themes/images/search.svg)
-    skin/images/item-toggle.svg (themes/images/item-toggle.svg)
-    skin/images/item-arrow-dark-rtl.svg (themes/images/item-arrow-dark-rtl.svg)
-    skin/images/item-arrow-dark-ltr.svg (themes/images/item-arrow-dark-ltr.svg)
-    skin/images/item-arrow-rtl.svg (themes/images/item-arrow-rtl.svg)
-    skin/images/item-arrow-ltr.svg (themes/images/item-arrow-ltr.svg)
-    skin/images/noise.png (themes/images/noise.png)
-    skin/images/dropmarker.svg (themes/images/dropmarker.svg)
-    skin/boxmodel.css (themes/boxmodel.css)
-    skin/images/geometry-editor.svg (themes/images/geometry-editor.svg)
-    skin/images/pause.svg (themes/images/pause.svg)
-    skin/images/play.svg (themes/images/play.svg)
-    skin/images/fast-forward.svg (themes/images/fast-forward.svg)
-    skin/images/rewind.svg (themes/images/rewind.svg)
-    skin/images/debugger-step-in.svg (themes/images/debugger-step-in.svg)
-    skin/images/debugger-step-out.svg (themes/images/debugger-step-out.svg)
-    skin/images/debugger-step-over.svg (themes/images/debugger-step-over.svg)
-    skin/images/debugger-toggleBreakpoints.svg (themes/images/debugger-toggleBreakpoints.svg)
-    skin/images/tracer-icon.png (themes/images/tracer-icon.png)
-    skin/images/tracer-icon@2x.png (themes/images/tracer-icon@2x.png)
-    skin/images/responsivemode/responsive-se-resizer.png (themes/images/responsivemode/responsive-se-resizer.png)
-    skin/images/responsivemode/responsive-se-resizer@2x.png (themes/images/responsivemode/responsive-se-resizer@2x.png)
-    skin/images/responsivemode/responsive-vertical-resizer.png (themes/images/responsivemode/responsive-vertical-resizer.png)
-    skin/images/responsivemode/responsive-vertical-resizer@2x.png (themes/images/responsivemode/responsive-vertical-resizer@2x.png)
-    skin/images/responsivemode/responsive-horizontal-resizer.png (themes/images/responsivemode/responsive-horizontal-resizer.png)
-    skin/images/responsivemode/responsive-horizontal-resizer@2x.png (themes/images/responsivemode/responsive-horizontal-resizer@2x.png)
-    skin/images/responsivemode/responsiveui-rotate.png (themes/images/responsivemode/responsiveui-rotate.png)
-    skin/images/responsivemode/responsiveui-rotate@2x.png (themes/images/responsivemode/responsiveui-rotate@2x.png)
-    skin/images/responsivemode/responsiveui-touch.png (themes/images/responsivemode/responsiveui-touch.png)
-    skin/images/responsivemode/responsiveui-touch@2x.png (themes/images/responsivemode/responsiveui-touch@2x.png)
-    skin/images/responsivemode/responsiveui-screenshot.png (themes/images/responsivemode/responsiveui-screenshot.png)
-    skin/images/responsivemode/responsiveui-screenshot@2x.png (themes/images/responsivemode/responsiveui-screenshot@2x.png)
-    skin/images/responsivemode/responsiveui-home.png (themes/images/responsivemode/responsiveui-home.png)
-    skin/images/toggle-tools.png (themes/images/toggle-tools.png)
-    skin/images/toggle-tools@2x.png (themes/images/toggle-tools@2x.png)
-    skin/images/dock-bottom.svg (themes/images/dock-bottom.svg)
-    skin/images/dock-side.svg (themes/images/dock-side.svg)
-    skin/images/dock-undock.svg (themes/images/dock-undock.svg)
-    skin/floating-scrollbars-dark-theme.css (themes/floating-scrollbars-dark-theme.css)
-    skin/floating-scrollbars-responsive-design.css (themes/floating-scrollbars-responsive-design.css)
-    skin/inspector.css (themes/inspector.css)
-    skin/images/profiler-stopwatch.svg (themes/images/profiler-stopwatch.svg)
-    skin/images/debugging-addons.svg (themes/images/debugging-addons.svg)
-    skin/images/debugging-devices.svg (themes/images/debugging-devices.svg)
-    skin/images/debugging-tabs.svg (themes/images/debugging-tabs.svg)
-    skin/images/debugging-workers.svg (themes/images/debugging-workers.svg)
-    skin/images/globe.svg (themes/images/globe.svg)
-    skin/images/tool-options.svg (themes/images/tool-options.svg)
-    skin/images/tool-webconsole.svg (themes/images/tool-webconsole.svg)
-    skin/images/tool-canvas.svg (themes/images/tool-canvas.svg)
-    skin/images/tool-debugger.svg (themes/images/tool-debugger.svg)
-    skin/images/tool-debugger-paused.svg (themes/images/tool-debugger-paused.svg)
-    skin/images/tool-inspector.svg (themes/images/tool-inspector.svg)
-    skin/images/tool-shadereditor.svg (themes/images/tool-shadereditor.svg)
-    skin/images/tool-styleeditor.svg (themes/images/tool-styleeditor.svg)
-    skin/images/tool-storage.svg (themes/images/tool-storage.svg)
-    skin/images/tool-profiler.svg (themes/images/tool-profiler.svg)
-    skin/images/tool-profiler-active.svg (themes/images/tool-profiler-active.svg)
-    skin/images/tool-network.svg (themes/images/tool-network.svg)
-    skin/images/tool-scratchpad.svg (themes/images/tool-scratchpad.svg)
-    skin/images/tool-webaudio.svg (themes/images/tool-webaudio.svg)
-    skin/images/tool-memory.svg (themes/images/tool-memory.svg)
-    skin/images/tool-memory-active.svg (themes/images/tool-memory-active.svg)
-    skin/images/tool-dom.svg (themes/images/tool-dom.svg)
-    skin/images/close.svg (themes/images/close.svg)
-    skin/images/clear.svg (themes/images/clear.svg)
-    skin/images/vview-delete.png (themes/images/vview-delete.png)
-    skin/images/vview-delete@2x.png (themes/images/vview-delete@2x.png)
-    skin/images/vview-edit.png (themes/images/vview-edit.png)
-    skin/images/vview-edit@2x.png (themes/images/vview-edit@2x.png)
-    skin/images/vview-lock.png (themes/images/vview-lock.png)
-    skin/images/vview-lock@2x.png (themes/images/vview-lock@2x.png)
-    skin/images/vview-open-inspector.png (themes/images/vview-open-inspector.png)
-    skin/images/vview-open-inspector@2x.png (themes/images/vview-open-inspector@2x.png)
-    skin/images/sort-arrows.svg (themes/images/sort-arrows.svg)
-    skin/images/cubic-bezier-swatch.png (themes/images/cubic-bezier-swatch.png)
-    skin/images/cubic-bezier-swatch@2x.png (themes/images/cubic-bezier-swatch@2x.png)
-    skin/fonts.css (themes/fonts.css)
-    skin/computed.css (themes/computed.css)
-    skin/layout.css (themes/layout.css)
-    skin/images/arrow-e.png (themes/images/arrow-e.png)
-    skin/images/arrow-e@2x.png (themes/images/arrow-e@2x.png)
-    skin/projecteditor/projecteditor.css (themes/projecteditor/projecteditor.css)
-    skin/images/search-clear-failed.svg (themes/images/search-clear-failed.svg)
-    skin/images/search-clear-light.svg (themes/images/search-clear-light.svg)
-    skin/images/search-clear-dark.svg (themes/images/search-clear-dark.svg)
-    skin/tooltip/arrow-horizontal-dark.png (themes/tooltip/arrow-horizontal-dark.png)
-    skin/tooltip/arrow-horizontal-dark@2x.png (themes/tooltip/arrow-horizontal-dark@2x.png)
-    skin/tooltip/arrow-vertical-dark.png (themes/tooltip/arrow-vertical-dark.png)
-    skin/tooltip/arrow-vertical-dark@2x.png (themes/tooltip/arrow-vertical-dark@2x.png)
-    skin/tooltip/arrow-horizontal-light.png (themes/tooltip/arrow-horizontal-light.png)
-    skin/tooltip/arrow-horizontal-light@2x.png (themes/tooltip/arrow-horizontal-light@2x.png)
-    skin/tooltip/arrow-vertical-light.png (themes/tooltip/arrow-vertical-light.png)
-    skin/tooltip/arrow-vertical-light@2x.png (themes/tooltip/arrow-vertical-light@2x.png)
-    skin/images/reload.svg (themes/images/reload.svg)
-    skin/images/security-state-broken.svg (themes/images/security-state-broken.svg)
-    skin/images/security-state-insecure.svg (themes/images/security-state-insecure.svg)
-    skin/images/security-state-secure.svg (themes/images/security-state-secure.svg)
-    skin/images/security-state-weak.svg (themes/images/security-state-weak.svg)
-    skin/images/diff.svg (themes/images/diff.svg)
-    skin/images/import.svg (themes/images/import.svg)
-    skin/images/pane-collapse.svg (themes/images/pane-collapse.svg)
-    skin/images/pane-expand.svg (themes/images/pane-expand.svg)
-
-    # Firebug Theme
-    skin/images/firebug/read-only.svg (themes/images/firebug/read-only.svg)
-    skin/images/firebug/spinner.png (themes/images/firebug/spinner.png)
-    skin/images/firebug/twisty-closed-firebug.svg (themes/images/firebug/twisty-closed-firebug.svg)
-    skin/images/firebug/twisty-open-firebug.svg (themes/images/firebug/twisty-open-firebug.svg)
-    skin/images/firebug/arrow-down.svg (themes/images/firebug/arrow-down.svg)
-    skin/images/firebug/arrow-up.svg (themes/images/firebug/arrow-up.svg)
-    skin/images/firebug/close.svg (themes/images/firebug/close.svg)
-    skin/images/firebug/pause.svg (themes/images/firebug/pause.svg)
-    skin/images/firebug/play.svg (themes/images/firebug/play.svg)
-    skin/images/firebug/rewind.svg (themes/images/firebug/rewind.svg)
-    skin/images/firebug/disable.svg (themes/images/firebug/disable.svg)
-    skin/images/firebug/breadcrumbs-divider.svg (themes/images/firebug/breadcrumbs-divider.svg)
-    skin/images/firebug/breakpoint.svg (themes/images/firebug/breakpoint.svg)
-    skin/images/firebug/tool-options.svg (themes/images/firebug/tool-options.svg)
-    skin/images/firebug/debugger-step-in.svg (themes/images/firebug/debugger-step-in.svg)
-    skin/images/firebug/debugger-step-out.svg (themes/images/firebug/debugger-step-out.svg)
-    skin/images/firebug/debugger-step-over.svg (themes/images/firebug/debugger-step-over.svg)
-    skin/images/firebug/pane-collapse.svg (themes/images/firebug/pane-collapse.svg)
-    skin/images/firebug/pane-expand.svg (themes/images/firebug/pane-expand.svg)
-    skin/images/firebug/dock-undock.svg (themes/images/firebug/dock-undock.svg)
-    skin/images/firebug/dock-side.svg (themes/images/firebug/dock-side.svg)
-    skin/images/firebug/dock-bottom.svg (themes/images/firebug/dock-bottom.svg)
-    skin/images/firebug/commandline-icon.svg (themes/images/firebug/commandline-icon.svg)
-    skin/images/firebug/debugger-blackbox.svg (themes/images/firebug/debugger-blackbox.svg)
-    skin/images/firebug/debugger-prettyprint.svg (themes/images/firebug/debugger-prettyprint.svg)
-    skin/images/firebug/debugger-toggleBreakpoints.svg (themes/images/firebug/debugger-toggleBreakpoints.svg)
-    skin/images/firebug/tool-debugger-paused.svg (themes/images/firebug/tool-debugger-paused.svg)
-    skin/images/firebug/command-pick.svg (themes/images/firebug/command-pick.svg)
-    skin/images/firebug/command-console.svg (themes/images/firebug/command-console.svg)
-    skin/images/firebug/command-eyedropper.svg (themes/images/firebug/command-eyedropper.svg)
-    skin/images/firebug/command-frames.svg (themes/images/firebug/command-frames.svg)
-    skin/images/firebug/command-paintflashing.svg (themes/images/firebug/command-paintflashing.svg)
-    skin/images/firebug/command-responsivemode.svg (themes/images/firebug/command-responsivemode.svg)
-    skin/images/firebug/command-scratchpad.svg (themes/images/firebug/command-scratchpad.svg)
-    skin/images/firebug/command-screenshot.svg (themes/images/firebug/command-screenshot.svg)
-    skin/images/firebug/command-measure.svg (themes/images/firebug/command-measure.svg)
-    skin/images/firebug/command-rulers.svg (themes/images/firebug/command-rulers.svg)
-    skin/images/firebug/command-noautohide.svg (themes/images/firebug/command-noautohide.svg)
--- a/devtools/client/jsonview/css/search-box.css
+++ b/devtools/client/jsonview/css/search-box.css
@@ -5,17 +5,17 @@
 
 /******************************************************************************/
 /* Search Box */
 
 .searchBox {
   height: 18px;
   font: message-box;
   background-color: var(--theme-body-background);
-  background-image: url("chrome://devtools/skin/images/filter.svg#filterinput");
+  background-image: url("resource://devtools/client/themes/images/filter.svg#filterinput");
   background-repeat: no-repeat;
   background-position: 2px center;
   border: 1px solid var(--theme-splitter-color);
   border-radius: 2px;
   color: var(--theme-content-color1);
   width: 200px;
   margin-top: 0;
   margin-right: 1px;
--- a/devtools/client/memory/memory.xhtml
+++ b/devtools/client/memory/memory.xhtml
@@ -6,20 +6,20 @@
   %htmlDTD;
 ]>
 
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.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" dir="">
   <head>
-    <link rel="stylesheet" href="chrome://devtools/skin/widgets.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://devtools/skin/memory.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://devtools/skin/components-frame.css" type="text/css"/>
-    <link rel="stylesheet" href="chrome://devtools/skin/components-h-split-box.css" type="text/css"/>
+    <link rel="stylesheet" href="resource://devtools/client/themes/widgets.css" type="text/css"/>
+    <link rel="stylesheet" href="resource://devtools/client/themes/memory.css" type="text/css"/>
+    <link rel="stylesheet" href="resource://devtools/client/themes/components-frame.css" type="text/css"/>
+    <link rel="stylesheet" href="resource://devtools/client/themes/components-h-split-box.css" type="text/css"/>
   </head>
   <body class="theme-body">
     <div id="app"></div>
 
     <script type="application/javascript;version=1.8"
             src="chrome://devtools/content/shared/theme-switching.js"
             defer="true">
     </script>
--- a/devtools/client/netmonitor/netmonitor.xul
+++ b/devtools/client/netmonitor/netmonitor.xul
@@ -1,16 +1,16 @@
 <?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://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/netmonitor.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/netmonitor.css" type="text/css"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml">
 
   <script type="application/javascript;version=1.8"
           src="chrome://devtools/content/shared/theme-switching.js"/>
   <script type="text/javascript" src="netmonitor-controller.js"/>
   <script type="text/javascript" src="netmonitor-view.js"/>
--- a/devtools/client/performance/performance.xul
+++ b/devtools/client/performance/performance.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://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/performance.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/jit-optimizations.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/components-frame.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/performance.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/jit-optimizations.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/components-frame.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % performanceDTD SYSTEM "chrome://devtools/locale/performance.dtd">
   %performanceDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml">
   <script src="chrome://devtools/content/shared/theme-switching.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://devtools/skin/images/tool-debugger.svg";
+const SAMPLE_ICON = "resource://devtools/client/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,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://devtools/skin/light-theme.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/projecteditor/projecteditor.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/debugger/debugger.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/light-theme.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/projecteditor/projecteditor.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/debugger/debugger.css" type="text/css"?>
 <?xml-stylesheet href="resource://devtools/client/themes/common.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/markup.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/markup.css" type="text/css"?>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <!DOCTYPE window [
 <!ENTITY % scratchpadDTD SYSTEM "chrome://devtools/locale/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://devtools/skin/images/tool-options.svg";
+const OPTION_URL = "resource://devtools/client/themes/images/tool-options.svg";
 const Services = require("Services");
 const Strings = Services.strings.createBundle("chrome://devtools/locale/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://devtools/skin/images/tool-options.svg",
+    iconUrl: "resource://devtools/client/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://devtools/skin/images/tool-options.svg", "The icon has been set correctly");
+  is(image.getAttribute("src"), "resource://devtools/client/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://devtools/skin/images/tool-inspector.svg",
+    iconUrl: "resource://devtools/client/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://devtools/skin/images/tool-inspector.svg", "The icon has been set correctly");
+  is(image.getAttribute("src"), "resource://devtools/client/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://devtools/skin/images/tool-webconsole.svg",
+    iconUrl: "resource://devtools/client/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://devtools/skin/images/tool-webconsole.svg", "The icon has been set correctly");
+  is(image.getAttribute("src"), "resource://devtools/client/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://devtools/skin/images/tool-debugger.svg",
+    iconUrl: "resource://devtools/client/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://devtools/skin/images/tool-debugger.svg", "The icon has been set correctly");
+  is(image.getAttribute("src"), "resource://devtools/client/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
@@ -91,17 +91,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://devtools/skin/images/tool-options.svg",
+    iconUrl: "resource://devtools/client/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/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -69,17 +69,17 @@ html, body {
   height: 16px;
   /* Reset styles from .devtools-button */
   min-width: initial;
   min-height: initial;
   align-self: center;
 }
 
 .toolbar-button:active::before {
-  filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
+  filter: url("resource://devtools/client/themes/images/filters.svg#checked-icon-state");
 }
 
 select {
   -moz-appearance: none;
   background-color: var(--theme-toolbar-background);
   background-image: var(--viewport-selection-arrow);
   background-position: 100% 50%;
   background-repeat: no-repeat;
@@ -160,31 +160,31 @@ select > option.divider {
 }
 
 #global-touch-simulation-button::before {
   background-image: url("./images/touch-events.svg");
   margin: -6px 0 0 -6px;
 }
 
 #global-touch-simulation-button.active::before {
-  filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
+  filter: url("resource://devtools/client/themes/images/filters.svg#checked-icon-state");
 }
 
 #global-screenshot-button::before {
   background-image: url("./images/screenshot.svg");
   margin: -6px 0 0 -6px;
 }
 
 #global-exit-button::before {
   background-image: url("./images/close.svg");
   margin: -6px 0 0 -6px;
 }
 
 #global-screenshot-button:disabled {
-  filter: url("chrome://devtools/skin/images/filters.svg#checked-icon-state");
+  filter: url("resource://devtools/client/themes/images/filters.svg#checked-icon-state");
   opacity: 1 !important;
 }
 
 #global-network-throttling-selector {
   height: 15px;
   padding-left: 0;
   width: 103px;
 }
--- a/devtools/client/responsivedesign/responsivedesign-child.js
+++ b/devtools/client/responsivedesign/responsivedesign-child.js
@@ -12,17 +12,17 @@ var global = this;
 // Guard against loading this frame script mutiple times
 (function () {
   if (global.responsiveFrameScriptLoaded) {
     return;
   }
 
   var Ci = Components.interfaces;
   const gDeviceSizeWasPageSize = docShell.deviceSizeIsPageSize;
-  const gFloatingScrollbarsStylesheet = Services.io.newURI("chrome://devtools/skin/floating-scrollbars-responsive-design.css", null, null);
+  const gFloatingScrollbarsStylesheet = Services.io.newURI("resource://devtools/client/themes/floating-scrollbars-responsive-design.css", null, null);
   var gRequiresFloatingScrollbars;
 
   var active = false;
   var resizeNotifications = false;
 
   addMessageListener("ResponsiveMode:Start", startResponsiveMode);
   addMessageListener("ResponsiveMode:Stop", stopResponsiveMode);
   addMessageListener("ResponsiveMode:IsActive", isActive);
--- a/devtools/client/scratchpad/scratchpad.xul
+++ b/devtools/client/scratchpad/scratchpad.xul
@@ -9,17 +9,17 @@
  %scratchpadDTD;
 <!ENTITY % editMenuStrings SYSTEM "chrome://global/locale/editMenuOverlay.dtd">
 %editMenuStrings;
 <!ENTITY % sourceEditorStrings SYSTEM "chrome://devtools/locale/sourceeditor.dtd">
 %sourceEditorStrings;
 ]>
 
 <?xml-stylesheet href="chrome://global/skin/global.css"?>
-<?xml-stylesheet href="chrome://devtools/skin/scratchpad.css"?>
+<?xml-stylesheet href="resource://devtools/client/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://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/shadereditor.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/shadereditor.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % debuggerDTD SYSTEM "chrome://devtools/locale/shadereditor.dtd">
   %debuggerDTD;
 ]>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
   <script type="application/javascript;version=1.8"
--- a/devtools/client/shared/components/notification-box.css
+++ b/devtools/client/shared/components/notification-box.css
@@ -72,17 +72,17 @@
 
 /* Close button */
 
 .notificationbox .messageCloseButton {
   width: 20px;
   height: 20px;
   margin: 4px;
   margin-inline-end: 8px;
-  background-image: url("chrome://devtools/skin/images/close.svg");
+  background-image: url("resource://devtools/client/themes/images/close.svg");
   background-position: center;
   background-color: transparent;
   background-repeat: no-repeat;
   border-radius: 11px;
   filter: invert(0);
 }
 
 .notificationbox .messageCloseButton:hover {
--- a/devtools/client/shared/components/tabs/tabs.css
+++ b/devtools/client/shared/components/tabs/tabs.css
@@ -41,17 +41,17 @@
 
 .tabs .all-tabs-menu  {
   position: absolute;
   top: 0;
   offset-inline-end: 0;
   width: 15px;
   height: 100%;
   border-inline-start: 1px solid var(--theme-splitter-color);
-  background: url("chrome://devtools/skin/images/dropmarker.svg");
+  background: url("resource://devtools/client/themes/images/dropmarker.svg");
   background-repeat: no-repeat;
   background-position: center;
   background-color: var(--theme-tab-toolbar-background);
 }
 
 /* Light Theme */
 
 .theme-dark .tabs,
--- a/devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
+++ b/devtools/client/shared/components/test/mochitest/test_HSplitBox_01.html
@@ -8,17 +8,17 @@ Basic tests for the HSplitBox component.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <script type="application/javascript "src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
   <link rel="stylesheet" href="resource://devtools/client/themes/splitters.css" type="text/css"/>
-  <link rel="stylesheet" href="chrome://devtools/skin/components-h-split-box.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/themes/components-h-split-box.css" type="text/css"/>
   <style>
     html {
       --theme-splitter-color: black;
     }
   </style>
 </head>
 <body>
 <pre id="test">
--- a/devtools/client/shared/components/test/mochitest/test_tree_07.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_07.html
@@ -6,17 +6,17 @@
 <!--
 Test that arrows get the open attribute when their item's children are expanded.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-  <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+  <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css" type="text/css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
--- a/devtools/client/shared/components/test/mochitest/test_tree_08.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_08.html
@@ -7,17 +7,17 @@
 Test that when an item in the Tree component is clicked, it steals focus from
 other inputs.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-  <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+  <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css" type="text/css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
--- a/devtools/client/shared/components/test/mochitest/test_tree_09.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_09.html
@@ -6,17 +6,17 @@
 <!--
 Test that when an item in the Tree component is expanded or collapsed the appropriate event handler fires.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-  <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+  <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css" type="text/css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
--- a/devtools/client/shared/components/test/mochitest/test_tree_10.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_10.html
@@ -6,17 +6,17 @@
 <!--
 Test that when an item in the Tree component is expanded or collapsed the appropriate event handler fires.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-  <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+  <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css" type="text/css">
 </head>
 <body>
 <pre id="test">
 <script src="head.js" type="application/javascript;version=1.8"></script>
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
--- a/devtools/client/shared/components/test/mochitest/test_tree_11.html
+++ b/devtools/client/shared/components/test/mochitest/test_tree_11.html
@@ -6,17 +6,17 @@
 <!--
 Test that when an item in the Tree component is focused by arrow key, the view is scrolled.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tree component test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
-  <link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
+  <link rel="stylesheet" href="resource://devtools/client/themes/light-theme.css" type="text/css">
   <style>
    * {
        margin: 0;
        padding: 0;
        height: 30px;
        max-height: 30px;
        min-height: 30px;
        font-size: 10px;
--- a/devtools/client/shared/components/tree/tree-view.css
+++ b/devtools/client/shared/components/tree/tree-view.css
@@ -110,21 +110,21 @@
   padding: 0;
 }
 
 .treeTable .treeHeaderSorted {
   background-color: var(--tree-header-sorted-background);
 }
 
 .treeTable .treeHeaderSorted > .treeHeaderCellBox {
-  background: url(chrome://devtools/skin/images/firebug/arrow-down.svg) no-repeat calc(100% - 4px);
+  background: url(resource://devtools/client/themes/images/firebug/arrow-down.svg) no-repeat calc(100% - 4px);
 }
 
 .treeTable .treeHeaderSorted.sortedAscending > .treeHeaderCellBox {
-  background-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
+  background-image: url(resource://devtools/client/themes/images/firebug/arrow-up.svg);
 }
 
 .treeTable .treeHeaderCell:hover:active {
   background-image: linear-gradient(
           rgba(0, 0, 0, 0.1),
           transparent),
       radial-gradient(1px 60% at right,
           rgba(0, 0, 0, 0.8) 0%,
--- a/devtools/client/shared/css-reload.js
+++ b/devtools/client/shared/css-reload.js
@@ -109,31 +109,31 @@ function watchCSS(window) {
       if (relativePath.match(/\.css$/)) {
         if (relativePath.startsWith("client/themes")) {
           let path = relativePath.replace(/^client\/themes\//, "");
 
           // Special-case a few files that get imported from other CSS
           // files. We just manually hot reload the parent CSS file.
           if (path === "variables.css" || path === "toolbars.css" ||
               path === "common.css" || path === "splitters.css") {
-            replaceCSS(window, "chrome://devtools/skin/" + getTheme() + "-theme.css");
+            replaceCSS(window, "resource://devtools/client/themes/" + getTheme() + "-theme.css");
           } else {
-            replaceCSS(window, "chrome://devtools/skin/" + path);
+            replaceCSS(window, "resource://devtools/client/themes/" + path);
           }
           return;
         }
 
         replaceCSS(
           window,
           "chrome://devtools/content/" + relativePath.replace(/^client\//, "")
         );
         replaceCSS(window, "resource://devtools/" + relativePath);
       } else if (relativePath.match(/\.(svg|png)$/)) {
         relativePath = relativePath.replace(/^client\/themes\//, "");
-        replaceCSSResource(window, "chrome://devtools/skin/" + relativePath);
+        replaceCSSResource(window, "resource://devtools/client/themes/" + relativePath);
       }
     }
     watcher.on("file-changed", onFileChanged);
 
     window.addEventListener("unload", () => {
       watcher.off("file-changed", onFileChanged);
     });
   }
--- a/devtools/client/shared/moz.build
+++ b/devtools/client/shared/moz.build
@@ -39,16 +39,17 @@ DevToolsModules(
     'network-throttling-profiles.js',
     'node-attribute-parser.js',
     'options-view.js',
     'output-parser.js',
     'poller.js',
     'prefs.js',
     'scroll.js',
     'source-utils.js',
+    'splitview.css',
     'SplitView.jsm',
     'suggestion-picker.js',
     'telemetry.js',
     'theme.js',
     'undo.js',
     'view-source.js',
     'webgl-utils.js',
     'zoom-keys.js',
--- a/devtools/client/shared/test/browser_html_tooltip-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip-01.js
@@ -6,17 +6,17 @@
 
 /**
  * Test the HTMLTooltip show & hide methods.
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Tooltip test">
     <vbox flex="1">
       <hbox id="box1" flex="1">test1</hbox>
       <hbox id="box2" flex="1">test2</hbox>
       <hbox id="box3" flex="1">test3</hbox>
       <hbox id="box4" flex="1">test4</hbox>
     </vbox>
--- a/devtools/client/shared/test/browser_html_tooltip-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip-02.js
@@ -5,17 +5,17 @@
 
 /**
  * Test the HTMLTooltip is closed when clicking outside of its container.
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
     htmlns="http://www.w3.org/1999/xhtml"
     title="Tooltip test">
     <vbox flex="1">
       <hbox id="box1" flex="1">test1</hbox>
       <hbox id="box2" flex="1">test2</hbox>
       <hbox id="box3" flex="1">test3</hbox>
--- a/devtools/client/shared/test/browser_html_tooltip-03.js
+++ b/devtools/client/shared/test/browser_html_tooltip-03.js
@@ -6,17 +6,17 @@
 
 /**
  * Test the HTMLTooltip autofocus configuration option.
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Tooltip test">
     <vbox flex="1">
       <hbox id="box1" flex="1">
         <textbox></textbox>
       </hbox>
       <hbox id="box2" flex="1">test2</hbox>
       <hbox id="box3" flex="1">
--- a/devtools/client/shared/test/browser_html_tooltip-04.js
+++ b/devtools/client/shared/test/browser_html_tooltip-04.js
@@ -7,17 +7,17 @@
 /**
  * Test the HTMLTooltip positioning for a small tooltip element (should aways
  * find a way to fit).
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Tooltip test">
     <vbox flex="1">
       <hbox style="height: 10px">spacer</hbox>
       <hbox id="box1" style="height: 50px">test1</hbox>
       <hbox id="box2" style="height: 50px">test2</hbox>
       <hbox flex="1">MIDDLE</hbox>
       <hbox id="box3" style="height: 50px">test3</hbox>
--- a/devtools/client/shared/test/browser_html_tooltip-05.js
+++ b/devtools/client/shared/test/browser_html_tooltip-05.js
@@ -7,17 +7,17 @@
 /**
  * Test the HTMLTooltip positioning for a huge tooltip element (can not fit in
  * the viewport).
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Tooltip test">
     <vbox flex="1">
       <hbox id="box1" style="height: 50px">test1</hbox>
       <hbox id="box2" style="height: 50px">test2</hbox>
       <hbox id="box3" style="height: 50px">test3</hbox>
       <hbox id="box4" style="height: 50px">test4</hbox>
     </vbox>
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
@@ -15,17 +15,17 @@ const getAnchor = function (position) {
                                           height: 10px;
                                           position: absolute;
                                           background: red;
                                           ${position}"></html:div>`;
 };
 
 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://devtools/skin/light-theme.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/light-theme.css"?>
 
   <window class="theme-light"
           xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:html="http://www.w3.org/1999/xhtml"
           title="Tooltip test">
     <vbox flex="1" style="position: relative">
       ${getAnchor("top: 0; left: 0;")}
       ${getAnchor("top: 0; left: 25px;")}
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
@@ -14,17 +14,17 @@ const getAnchor = function (position) {
   return `<html:div class="anchor" style="height: 5px;
                                           position: absolute;
                                           background: red;
                                           ${position}"></html:div>`;
 };
 
 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://devtools/skin/light-theme.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/light-theme.css"?>
 
   <window class="theme-light"
           xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
           xmlns:html="http://www.w3.org/1999/xhtml"
           title="Tooltip test">
     <vbox flex="1" style="position: relative">
       ${getAnchor("top:    0; left: 0; width: 50px;")}
       ${getAnchor("top: 10px; left: 0; width: 100px;")}
--- a/devtools/client/shared/test/browser_html_tooltip_consecutive-show.js
+++ b/devtools/client/shared/test/browser_html_tooltip_consecutive-show.js
@@ -7,17 +7,17 @@
 /**
  * Test the HTMLTooltip show can be called several times. It should move according to the
  * new anchor/options and should not leak event listeners.
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Tooltip test">
     <vbox flex="1">
       <hbox id="box1" flex="1">test1</hbox>
       <hbox id="box2" flex="1">test2</hbox>
       <hbox id="box3" flex="1">test3</hbox>
       <hbox id="box4" flex="1">test4</hbox>
     </vbox>
--- a/devtools/client/shared/test/browser_html_tooltip_hover.js
+++ b/devtools/client/shared/test/browser_html_tooltip_hover.js
@@ -7,17 +7,17 @@
 /**
  * Test the TooltipToggle helper class for HTMLTooltip
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
   <?xml-stylesheet href="chrome://global/skin/global.css"?>
   <?xml-stylesheet href="resource://devtools/client/themes/variables.css"?>
-  <?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    class="theme-light" title="Tooltip hover test">
     <vbox id="container" flex="1">
       <hbox id="box1" flex="1"><label>test1</label></hbox>
       <hbox id="box2" flex="1"><label>test2</label></hbox>
       <hbox id="box3" flex="1"><label>test3</label></hbox>
       <hbox id="box4" flex="1"><label>test4</label></hbox>
     </vbox>
--- a/devtools/client/shared/test/browser_html_tooltip_offset.js
+++ b/devtools/client/shared/test/browser_html_tooltip_offset.js
@@ -5,17 +5,17 @@
 
 /**
  * Test the HTMLTooltip can be displayed with vertical and horizontal offsets.
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
     htmlns="http://www.w3.org/1999/xhtml"
     title="Tooltip test">
     <vbox flex="1">
       <hbox id="box1" flex="1">test1</hbox>
       <hbox id="box2" flex="1">test2</hbox>
       <hbox id="box3" flex="1">test3</hbox>
--- a/devtools/client/shared/test/browser_html_tooltip_rtl.js
+++ b/devtools/client/shared/test/browser_html_tooltip_rtl.js
@@ -7,17 +7,17 @@
  * Test the HTMLTooltip anchor alignment changes with the anchor direction.
  * - should be aligned to the right of RTL anchors
  * - should be aligned to the left of LTR anchors
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
     htmlns="http://www.w3.org/1999/xhtml"
     title="Tooltip test">
     <hbox style="padding: 90px 0;" flex="1">
       <hbox id="box1" flex="1" style="background:red; direction: rtl;">test1</hbox>
       <hbox id="box2" flex="1" style="background:blue; direction: rtl;">test2</hbox>
       <hbox id="box3" flex="1" style="background:red; direction: ltr;">test3</hbox>
--- a/devtools/client/shared/test/browser_html_tooltip_variable-height.js
+++ b/devtools/client/shared/test/browser_html_tooltip_variable-height.js
@@ -6,17 +6,17 @@
 
 /**
  * Test the HTMLTooltip content can have a variable height.
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Tooltip test">
     <vbox flex="1">
       <hbox id="box1" flex="1">test1</hbox>
       <hbox id="box2" flex="1">test2</hbox>
       <hbox id="box3" flex="1">test3</hbox>
       <hbox id="box4" flex="1">test4</hbox>
     </vbox>
--- a/devtools/client/shared/test/browser_html_tooltip_width-auto.js
+++ b/devtools/client/shared/test/browser_html_tooltip_width-auto.js
@@ -6,17 +6,17 @@
 
 /**
  * Test the HTMLTooltip content can automatically calculate its width based on content.
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Tooltip test">
     <vbox flex="1">
       <hbox id="box1" flex="1">test1</hbox>
       <hbox id="box2" flex="1">test2</hbox>
       <hbox id="box3" flex="1">test3</hbox>
       <hbox id="box4" flex="1">test4</hbox>
     </vbox>
--- a/devtools/client/shared/test/browser_html_tooltip_xul-wrapper.js
+++ b/devtools/client/shared/test/browser_html_tooltip_xul-wrapper.js
@@ -6,17 +6,17 @@
 
 /**
  * Test the HTMLTooltip can overflow out of the toolbox when using a XUL panel wrapper.
  */
 
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 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://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Tooltip test">
     <vbox flex="1">
       <hbox id="box1" style="height: 50px">test1</hbox>
       <hbox id="box2" style="height: 50px">test2</hbox>
       <hbox id="box3" style="height: 50px">test3</hbox>
       <hbox id="box4" style="height: 50px">test4</hbox>
     </vbox>
--- a/devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js
+++ b/devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js
@@ -7,17 +7,17 @@
 
 const { InplaceEditor } = require("devtools/client/shared/inplace-editor");
 const { AutocompletePopup } = require("devtools/client/shared/autocomplete-popup");
 loadHelperScript("helper_inplace_editor.js");
 
 const TEST_URI = `data:text/xml;charset=UTF-8,<?xml version="1.0"?>
   <?xml-stylesheet href="chrome://global/skin/global.css"?>
   <?xml-stylesheet href="resource://devtools/client/themes/common.css"?>
-  <?xml-stylesheet href="chrome://devtools/skin/tooltips.css"?>
+  <?xml-stylesheet href="resource://devtools/client/themes/tooltips.css"?>
   <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    title="Tooltip test">
   </window>`;
 
 // Test the inplace-editor autocomplete popup is aligned with the completed query.
 // Which means when completing "style=display:flex; color:" the popup will aim to be
 // aligned with the ":" next to "color".
 
--- a/devtools/client/shared/test/browser_spectrum.js
+++ b/devtools/client/shared/test/browser_spectrum.js
@@ -4,17 +4,17 @@
 
 "use strict";
 
 // Tests that the spectrum color picker works correctly
 
 const {Spectrum} = require("devtools/client/shared/widgets/Spectrum");
 
 const TEST_URI = `data:text/html,
-  <link rel="stylesheet" href="chrome://devtools/content/shared/widgets/spectrum.css" type="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/shared/widgets/spectrum.css" type="text/css"/>
   <div id="spectrum-container" />`;
 
 add_task(function* () {
   let [host,, doc] = yield createHost("bottom", TEST_URI);
 
   let container = doc.getElementById("spectrum-container");
 
   yield testCreateAndDestroyShouldAppendAndRemoveElements(container);
--- a/devtools/client/shared/test/browser_tableWidget_basic.js
+++ b/devtools/client/shared/test/browser_tableWidget_basic.js
@@ -6,18 +6,18 @@
 
 "use strict";
 
 const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
   "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
 
   // Uncomment these lines to help with visual debugging. When uncommented they
   // dump a couple of thousand errors in the log (bug 1258285)
-  // "<?xml-stylesheet href='chrome://devtools/skin/light-theme.css'?>" +
-  // "<?xml-stylesheet href='chrome://devtools/skin/widgets.css'?>" +
+  // "<?xml-stylesheet href='resource://devtools/client/themes/light-theme.css'?>" +
+  // "<?xml-stylesheet href='resource://devtools/client/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 {TableWidget} = require("devtools/client/shared/widgets/TableWidget");
 
 add_task(function* () {
--- a/devtools/client/shared/test/browser_tableWidget_keyboard_interaction.js
+++ b/devtools/client/shared/test/browser_tableWidget_keyboard_interaction.js
@@ -6,18 +6,18 @@
 
 "use strict";
 
 const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
   "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
 
   // Uncomment these lines to help with visual debugging. When uncommented they
   // dump a couple of thousand errors in the log (bug 1258285)
-  // "<?xml-stylesheet href='chrome://devtools/skin/light-theme.css'?>" +
-  // "<?xml-stylesheet href='chrome://devtools/skin/widgets.css'?>" +
+  // "<?xml-stylesheet href='resource://devtools/client/themes/light-theme.css'?>" +
+  // "<?xml-stylesheet href='resource://devtools/client/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");
 
--- a/devtools/client/shared/test/browser_tableWidget_mouse_interaction.js
+++ b/devtools/client/shared/test/browser_tableWidget_mouse_interaction.js
@@ -6,18 +6,18 @@
 
 "use strict";
 
 const TEST_URI = "data:text/xml;charset=UTF-8,<?xml version='1.0'?>" +
   "<?xml-stylesheet href='chrome://global/skin/global.css'?>" +
 
   // Uncomment these lines to help with visual debugging. When uncommented they
   // dump a couple of thousand errors in the log (bug 1258285)
-  // "<?xml-stylesheet href='chrome://devtools/skin/light-theme.css'?>" +
-  // "<?xml-stylesheet href='chrome://devtools/skin/widgets.css'?>" +
+  // "<?xml-stylesheet href='resource://devtools/client/themes/light-theme.css'?>" +
+  // "<?xml-stylesheet href='resource://devtools/client/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");
 
--- 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
 "use strict";
 
 const TEST_URI = "data:text/html;charset=utf-8,<head>" +
-  "<link rel='stylesheet' type='text/css' href='chrome://devtools/skin/widg" +
+  "<link rel='stylesheet' type='text/css' href='resource://devtools/client/themes/widg" +
   "ets.css'></head><body><div></div><span></span></body>";
 const {TreeWidget} = require("devtools/client/shared/widgets/TreeWidget");
 
 add_task(function* () {
   yield addTab("about:blank");
   let [host,, 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
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // 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://devtools/skin/widg" +
+  "<link rel='stylesheet' type='text/css' href='resource://devtools/client/themes/widg" +
   "ets.css'></head><body><div></div><span></span></body>";
 const {TreeWidget} = require("devtools/client/shared/widgets/TreeWidget");
 
 add_task(function* () {
   yield addTab("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_mouse_interaction.js
+++ b/devtools/client/shared/test/browser_treeWidget_mouse_interaction.js
@@ -2,17 +2,17 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // 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://devtools/skin/widg" +
+  "<link rel='stylesheet' type='text/css' href='resource://devtools/client/themes/widg" +
   "ets.css'></head><body><div></div><span></span></body>";
 const {TreeWidget} = require("devtools/client/shared/widgets/TreeWidget");
 
 add_task(function* () {
   yield addTab("about:blank");
   let [host,, doc] = yield createHost("bottom", TEST_URI);
 
   let tree = new TreeWidget(doc.querySelector("div"), {
--- 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://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/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"
                       type="checkbox"
--- a/devtools/client/shared/theme-switching.js
+++ b/devtools/client/shared/theme-switching.js
@@ -114,17 +114,17 @@
     for (let url of newThemeDef.stylesheets) {
       let {styleSheet, loadPromise} = appendStyleSheet(url);
       devtoolsStyleSheets.get(newThemeDef).push(styleSheet);
       loadEvents.push(loadPromise);
     }
 
     try {
       const StylesheetUtils = require("sdk/stylesheet/utils");
-      const SCROLLBARS_URL = "chrome://devtools/skin/floating-scrollbars-dark-theme.css";
+      const SCROLLBARS_URL = "resource://devtools/client/themes/floating-scrollbars-dark-theme.css";
 
       // TODO: extensions might want to customize scrollbar styles too.
       if (!Services.appShell.hiddenDOMWindow
         .matchMedia("(-moz-overlay-scrollbars)").matches) {
         if (newTheme == "dark") {
           StylesheetUtils.loadSheet(window, SCROLLBARS_URL, "agent");
         } else if (oldTheme == "dark") {
           StylesheetUtils.removeSheet(window, SCROLLBARS_URL, "agent");
--- a/devtools/client/shared/widgets/VariablesView.xul
+++ b/devtools/client/shared/widgets/VariablesView.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://global/skin/global.css"?>
-<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % viewDTD SYSTEM "chrome://devtools/locale/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/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -179,17 +179,17 @@ input {
   display: block;
   order: 3;
   color: var(--theme-body-color-alt);
 }
 
 .remove-button {
   width: 16px;
   height: 16px;
-  background: url(chrome://devtools/skin/images/close.svg);
+  background: url(resource://devtools/client/themes/images/close.svg);
   background-size: cover;
   font-size: 0;
   border: none;
   cursor: pointer;
 }
 
 .hidden {
   display: none !important;
@@ -215,24 +215,24 @@ input {
   height: 16px;
   font-size: 0;
   vertical-align: middle;
   cursor: pointer;
   margin: 0 5px;
 }
 
 .add {
-  background: url(chrome://devtools/skin/images/add.svg);
+  background: url(resource://devtools/client/themes/images/add.svg);
 }
 
 #toggle-presets {
-  background: url(chrome://devtools/skin/images/pseudo-class.svg);
+  background: url(resource://devtools/client/themes/images/pseudo-class.svg);
 }
 
 .add,
 .remove-button,
 #toggle-presets {
   filter: var(--icon-filter);
 }
 
 .show-presets #toggle-presets {
-  filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
+  filter: url(resource://devtools/client/themes/images/filters.svg#checked-icon-state);
 }
--- a/devtools/client/shared/widgets/graphs-frame.xhtml
+++ b/devtools/client/shared/widgets/graphs-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://devtools/skin/widgets.css" ype="text/css"/>
+  <link rel="stylesheet" href="resource://devtools/client/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/moz.build
+++ b/devtools/client/shared/widgets/moz.build
@@ -8,27 +8,32 @@ DIRS += [
     'tooltip',
 ]
 
 DevToolsModules(
     'AbstractTreeItem.jsm',
     'BarGraphWidget.js',
     'BreadcrumbsWidget.jsm',
     'Chart.jsm',
+    'cubic-bezier.css',
     'CubicBezierPresets.js',
     'CubicBezierWidget.js',
     'FastListWidget.js',
+    'filter-widget.css',
     'FilterWidget.js',
     'FlameGraph.js',
     'Graphs.js',
     'GraphsWorker.js',
     'LineGraphWidget.js',
+    'mdn-docs.css',
     'MdnDocsWidget.js',
     'MountainGraphWidget.js',
     'SideMenuWidget.jsm',
     'SimpleListWidget.jsm',
+    'spectrum.css',
     'Spectrum.js',
     'TableWidget.js',
     'TreeWidget.js',
     'VariablesView.jsm',
     'VariablesViewController.jsm',
     'view-helpers.js',
+    'widgets.css',
 )
--- a/devtools/client/shared/widgets/spectrum.css
+++ b/devtools/client/shared/widgets/spectrum.css
@@ -3,17 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #eyedropper-button {
   margin-inline-start: 5px;
   display: block;
 }
 
 #eyedropper-button::before {
-  background-image: url(chrome://devtools/skin/images/command-eyedropper.svg);
+  background-image: url(resource://devtools/client/themes/images/command-eyedropper.svg);
 }
 
 /* Mix-in classes */
 
 .spectrum-checker {
   background-color: #eee;
   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
     linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
--- a/devtools/client/shared/widgets/tooltip/CssDocsTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/CssDocsTooltip.js
@@ -19,17 +19,17 @@ const TOOLTIP_HEIGHT = 308;
  *        The toolbox document to attach the CSS docs tooltip.
  */
 function CssDocsTooltip(toolboxDoc) {
   this.tooltip = new HTMLTooltip(toolboxDoc, {
     type: "arrow",
     consumeOutsideClicks: true,
     autofocus: true,
     useXulWrapper: true,
-    stylesheet: "chrome://devtools/content/shared/widgets/mdn-docs.css",
+    stylesheet: "resource://devtools/client/themes/shared/widgets/mdn-docs.css",
   });
   this.widget = this.setMdnDocsContent();
   this._onVisitLink = this._onVisitLink.bind(this);
   this.widget.on("visitlink", this._onVisitLink);
 
   // Initialize keyboard shortcuts
   this.shortcuts = new KeyShortcuts({ window: this.tooltip.topWindow });
   this._onShortcut = this._onShortcut.bind(this);
--- a/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
+++ b/devtools/client/shared/widgets/tooltip/EventTooltipHelper.js
@@ -71,17 +71,17 @@ EventTooltip.prototype = {
       let header = doc.createElementNS(XHTML_NS, "div");
       header.className = "event-header devtools-toolbar";
       this.container.appendChild(header);
 
       if (!listener.hide.debugger) {
         let debuggerIcon = doc.createElementNS(XHTML_NS, "img");
         debuggerIcon.className = "event-tooltip-debugger-icon";
         debuggerIcon.setAttribute("src",
-          "chrome://devtools/skin/images/tool-debugger.svg");
+          "resource://devtools/client/themes/images/tool-debugger.svg");
         let openInDebugger = L10N.getStr("eventsTooltip.openInDebugger");
         debuggerIcon.setAttribute("title", openInDebugger);
         header.appendChild(debuggerIcon);
       } else {
         let debuggerDiv = doc.createElementNS(XHTML_NS, "div");
         debuggerDiv.className = "event-tooltip-debugger-spacer";
         header.appendChild(debuggerDiv);
       }
--- a/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchColorPickerTooltip.js
@@ -25,17 +25,17 @@ const XHTML_NS = "http://www.w3.org/1999
  * @param {Document} document
  *        The document to attach the SwatchColorPickerTooltip. This is either the toolbox
  *        document if the tooltip is a popup tooltip or the panel's document if it is an
  *        inline editor.
  * @param {InspectorPanel} inspector
  *        The inspector panel, needed for the eyedropper.
  */
 function SwatchColorPickerTooltip(document, inspector) {
-  let stylesheet = "chrome://devtools/content/shared/widgets/spectrum.css";
+  let stylesheet = "resource://devtools/client/shared/widgets/spectrum.css";
   SwatchBasedEditorTooltip.call(this, document, stylesheet);
 
   this.inspector = inspector;
 
   // Creating a spectrum instance. this.spectrum will always be a promise that
   // resolves to the spectrum instance
   this.spectrum = this.setColorPickerContent([0, 0, 0, 1]);
   this._onSpectrumColorChange = this._onSpectrumColorChange.bind(this);
--- a/devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchCubicBezierTooltip.js
@@ -21,17 +21,17 @@ const XHTML_NS = "http://www.w3.org/1999
  * CubicBezierWidget.
  *
  * @param {Document} document
  *        The document to attach the SwatchCubicBezierTooltip. This is either the toolbox
  *        document if the tooltip is a popup tooltip or the panel's document if it is an
  *        inline editor.
  */
 function SwatchCubicBezierTooltip(document) {
-  let stylesheet = "chrome://devtools/content/shared/widgets/cubic-bezier.css";
+  let stylesheet = "resource://devtools/client/shared/widgets/cubic-bezier.css";
   SwatchBasedEditorTooltip.call(this, document, stylesheet);
 
   // Creating a cubic-bezier instance.
   // this.widget will always be a promise that resolves to the widget instance
   this.widget = this.setCubicBezierContent([0, 0, 1, 1]);
   this._onUpdate = this._onUpdate.bind(this);
 }
 
--- a/devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/SwatchFilterTooltip.js
@@ -23,17 +23,17 @@ const XHTML_NS = "http://www.w3.org/1999
  *        The document to attach the SwatchFilterTooltip. This is either the toolbox
  *        document if the tooltip is a popup tooltip or the panel's document if it is an
  *        inline editor.
  * @param {function} cssIsValid
  *        A function to check that css declaration's name and values are valid together.
  *        This can be obtained from "shared/fronts/css-properties.js".
  */
 function SwatchFilterTooltip(document, cssIsValid) {
-  let stylesheet = "chrome://devtools/content/shared/widgets/filter-widget.css";
+  let stylesheet = "resource://devtools/client/shared/widgets/filter-widget.css";
   SwatchBasedEditorTooltip.call(this, document, stylesheet);
   this._cssIsValid = cssIsValid;
 
   // Creating a filter editor instance.
   this.widget = this.setFilterContent("none");
   this._onUpdate = this._onUpdate.bind(this);
 }
 
new file mode 100644
--- /dev/null
+++ b/devtools/client/sourceeditor/codemirror/addon/dialog/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    'dialog.css',
+)
new file mode 100644
--- /dev/null
+++ b/devtools/client/sourceeditor/codemirror/addon/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+  'dialog',
+]
new file mode 100644
--- /dev/null
+++ b/devtools/client/sourceeditor/codemirror/lib/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    'codemirror.css',
+)
new file mode 100644
--- /dev/null
+++ b/devtools/client/sourceeditor/codemirror/moz.build
@@ -0,0 +1,14 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+  'addon',
+  'lib',
+]
+
+DevToolsModules(
+    'mozilla.css',
+)
--- a/devtools/client/sourceeditor/codemirror/mozilla.css
+++ b/devtools/client/sourceeditor/codemirror/mozilla.css
@@ -1,24 +1,24 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
-  --breakpoint-background: url("chrome://devtools/skin/images/breakpoint.svg#light");
-  --breakpoint-hover-background: url("chrome://devtools/skin/images/breakpoint.svg#light-hover");
+  --breakpoint-background: url("resource://devtools/client/themes/images/breakpoint.svg#light");
+  --breakpoint-hover-background: url("resource://devtools/client/themes/images/breakpoint.svg#light-hover");
   --breakpoint-active-color: rgba(44,187,15,.2);
-  --breakpoint-conditional-background: url("chrome://devtools/skin/images/breakpoint.svg#light-conditional");
+  --breakpoint-conditional-background: url("resource://devtools/client/themes/images/breakpoint.svg#light-conditional");
 }
 
 .theme-dark:root {
-  --breakpoint-background: url("chrome://devtools/skin/images/breakpoint.svg#dark");
-  --breakpoint-hover-background: url("chrome://devtools/skin/images/breakpoint.svg#dark-hover");
+  --breakpoint-background: url("resource://devtools/client/themes/images/breakpoint.svg#dark");
+  --breakpoint-hover-background: url("resource://devtools/client/themes/images/breakpoint.svg#dark-hover");
   --breakpoint-active-color: rgba(112,191,83,.4);
-  --breakpoint-conditional-background: url("chrome://devtools/skin/images/breakpoint.svg#dark-conditional");
+  --breakpoint-conditional-background: url("resource://devtools/client/themes/images/breakpoint.svg#dark-conditional");
 }
 
 .CodeMirror {
   height: 100%;
   cursor: text;
 }
 
 .CodeMirror .errors {
@@ -28,17 +28,17 @@
 .CodeMirror .error {
   display: inline-block;
   margin-left: 5px;
   width: 12px;
   height: 12px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
-  background-image: url("chrome://devtools/skin/images/editor-error.png");
+  background-image: url("resource://devtools/client/themes/images/editor-error.png");
   opacity: 0.75;
 }
 
 .CodeMirror .hit-counts {
   width: 6px;
 }
 
 .CodeMirror .hit-count {
--- a/devtools/client/sourceeditor/editor.js
+++ b/devtools/client/sourceeditor/editor.js
@@ -41,19 +41,19 @@ const L10N = new LocalizationHelper("dev
 
 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://devtools/content/sourceeditor/codemirror/lib/codemirror.css",
-  "chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css",
-  "chrome://devtools/content/sourceeditor/codemirror/mozilla.css"
+  "resource://devtools/client/sourceeditor/codemirror/lib/codemirror.css",
+  "resource://devtools/client/sourceeditor/codemirror/addon/dialog/dialog.css",
+  "resource://devtools/client/sourceeditor/codemirror/mozilla.css"
 ];
 
 const CM_SCRIPTS = [
   "chrome://devtools/content/sourceeditor/codemirror/codemirror.bundle.js",
 ];
 
 const CM_IFRAME =
   "data:text/html;charset=utf8,<!DOCTYPE html>" +
--- a/devtools/client/sourceeditor/moz.build
+++ b/devtools/client/sourceeditor/moz.build
@@ -1,15 +1,16 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += [
+    'codemirror',
     'tern',
 ]
 
 DevToolsModules(
     'autocomplete.js',
     'css-autocompleter.js',
     'debugger.js',
     'editor.js'
--- a/devtools/client/sourceeditor/test/codemirror/codemirror.html
+++ b/devtools/client/sourceeditor/test/codemirror/codemirror.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>CodeMirror: Basic Tests</title>
-    <link rel="stylesheet" href="chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css">
+    <link rel="stylesheet" href="resource://devtools/client/sourceeditor/codemirror/lib/codemirror.css">
     <link rel="stylesheet" href="cm_mode_test.css">
     <!--<link rel="stylesheet" href="../doc/docs.css">-->
 
     <script src="chrome://devtools/content/sourceeditor/codemirror/codemirror.bundle.js"></script>
 
     <style type="text/css">
       .ok {color: #090;}
       .fail {color: #e00;}
--- a/devtools/client/sourceeditor/test/codemirror/vimemacs.html
+++ b/devtools/client/sourceeditor/test/codemirror/vimemacs.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>CodeMirror: VIM/Emacs tests</title>
-    <link rel="stylesheet" href="chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css">
+    <link rel="stylesheet" href="resource://devtools/client/sourceeditor/codemirror/lib/codemirror.css">
     <link rel="stylesheet" href="cm_mode_test.css">
     <!--<link rel="stylesheet" href="../doc/docs.css">-->
 
     <script src="chrome://devtools/content/sourceeditor/codemirror/codemirror.bundle.js"></script>
 
     <style type="text/css">
       .ok {color: #090;}
       .fail {color: #e00;}
--- a/devtools/client/storage/storage.xul
+++ b/devtools/client/storage/storage.xul
@@ -1,16 +1,16 @@
 <?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://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/storage.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/storage.css" type="text/css"?>
 
 <!DOCTYPE window [
   <!ENTITY % storageDTD SYSTEM "chrome://devtools/locale/storage.dtd">
   %storageDTD;
 ]>
 
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
--- a/devtools/client/styleeditor/styleeditor.xul
+++ b/devtools/client/styleeditor/styleeditor.xul
@@ -9,21 +9,21 @@
  %editMenuStrings;
 <!ENTITY % sourceEditorStrings SYSTEM "chrome://devtools/locale/sourceeditor.dtd">
  %sourceEditorStrings;
 <!ENTITY % csscoverageDTD SYSTEM "chrome://devtools-shared/locale/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://devtools/skin/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/splitview.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/styleeditor.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/splitview.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/splitview.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/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/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -1,36 +1,36 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Animation-inspector specific theme variables */
 
 .theme-dark {
   --even-animation-timeline-background-color: rgba(255,255,255,0.03);
-  --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
-  --pause-image: url(chrome://devtools/skin/images/pause.svg);
-  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
-  --play-image: url(chrome://devtools/skin/images/play.svg);
+  --command-pick-image: url(images/command-pick.svg);
+  --pause-image: url(images/pause.svg);
+  --rewind-image: url(images/rewind.svg);
+  --play-image: url(images/play.svg);
 }
 
 .theme-light {
   --even-animation-timeline-background-color: rgba(128,128,128,0.03);
-  --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
-  --pause-image: url(chrome://devtools/skin/images/pause.svg);
-  --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
-  --play-image: url(chrome://devtools/skin/images/play.svg);
+  --command-pick-image: url(images/command-pick.svg);
+  --pause-image: url(images/pause.svg);
+  --rewind-image: url(images/rewind.svg);
+  --play-image: url(images/play.svg);
 }
 
 .theme-firebug {
   --even-animation-timeline-background-color: rgba(128,128,128,0.03);
-  --command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg);
-  --pause-image: url(chrome://devtools/skin/images/firebug/pause.svg);
-  --rewind-image: url(chrome://devtools/skin/images/firebug/rewind.svg);
-  --play-image: url(chrome://devtools/skin/images/firebug/play.svg);
+  --command-pick-image: url(images/firebug/command-pick.svg);
+  --pause-image: url(images/firebug/pause.svg);
+  --rewind-image: url(images/firebug/rewind.svg);
+  --play-image: url(images/firebug/play.svg);
 }
 
 :root {
   /* How high should toolbars be */
   --toolbar-height: 20px;
   /* How wide should the sidebar be (should be wide enough to contain long
      property names like 'border-bottom-right-radius' without ellipsis) */
   --timeline-sidebar-width: 200px;
@@ -193,17 +193,17 @@ body {
   font-family: inherit;
   color: var(--theme-body-color);
   font-size: 1em;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  background-image: url("images/dropmarker.svg");
   background-repeat: no-repeat;
   background-position: calc(100% - 4px) center;
   padding-right: 1em;
 }
 
 #timeline-rate {
   position: relative;
   width: 4.5em;
@@ -475,17 +475,17 @@ body {
   cursor: pointer;
 }
 
 .animation-target .attribute-name {
   padding-left: 4px;
 }
 
 .animation-target .node-highlighter {
-  background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
+  background: url("images/vview-open-inspector.png") no-repeat 0 0;
   padding-left: 16px;
   margin-right: 5px;
   cursor: pointer;
 }
 
 .animation-target .node-highlighter:hover {
   filter: url(images/filters.svg#checked-icon-state);
 }
--- a/devtools/client/themes/canvasdebugger.css
+++ b/devtools/client/themes/canvasdebugger.css
@@ -43,17 +43,17 @@
 
 /* Snapshots pane */
 
 #snapshots-pane {
   border-inline-end: 1px solid var(--theme-splitter-color);
 }
 
 #record-snapshot {
-  list-style-image: url("chrome://devtools/skin/images/profiler-stopwatch.svg");
+  list-style-image: url("images/profiler-stopwatch.svg");
 }
 
 #import-snapshot {
   list-style-image: url("images/import.svg");
 }
 
 /* Snapshots items */
 
--- a/devtools/client/themes/commandline.inc.css
+++ b/devtools/client/themes/commandline.inc.css
@@ -12,30 +12,30 @@
 :root[devtoolstheme="light"] #developer-toolbar {
   --gcli-background-color: #fcfcfc; /* --theme-tab-toolbar-background */
   --gcli-input-background: #fcfcfc; /* --theme-toolbar-background */
   --gcli-input-focused-background: #ffffff; /* --theme-sidebar-background */
   --gcli-input-color: #393f4c; /* --theme-body-color */
   --gcli-border-color: #dde1e4; /* --theme-splitter-color */
   --selection-background: #4c9ed9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
-  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
-  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
+  --command-line-image: url(resource://devtools/client/themes/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
+  --command-line-image-focus: url(resource://devtools/client/themes/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
 }
 
 :root[devtoolstheme="dark"] #developer-toolbar {
   --gcli-background-color: #272b35; /* --theme-toolbar-background */
   --gcli-input-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-focused-background: #272b35; /* --theme-tab-toolbar-background */
   --gcli-input-color: #b6babf; /* --theme-body-color-alt */
   --gcli-border-color: #454d5d; /* --theme-splitter-color */
   --selection-background: #5675b9; /* --theme-selection-background */
   --selection-color: #f5f7fa; /* --theme-selection-color */
-  --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
-  --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
+  --command-line-image: url(resource://devtools/client/themes/images/commandline-icon.svg#dark-theme); /* --theme-command-line-image */
+  --command-line-image-focus: url(resource://devtools/client/themes/images/commandline-icon.svg#dark-theme-focus); /* --theme-command-line-image-focus */
 }
 
 #developer-toolbar {
   -moz-appearance: none;
   padding: 0;
   min-height: 32px;
   background-color: var(--gcli-background-color);
   border-top: 1px solid var(--gcli-border-color);
@@ -65,17 +65,17 @@
 }
 
 /* The toolkit close button is low contrast in the dark theme so invert it. */
 :root[devtoolstheme="dark"] #developer-toolbar > .close-icon:not(:hover) > image {
   filter: invert(1);
 }
 
 #developer-toolbar-toolbox-button {
-  list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
+  list-style-image: url("images/toggle-tools.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
 #developer-toolbar-toolbox-button > label {
   display: none;
 }
 
 #developer-toolbar-toolbox-button:hover {
@@ -87,17 +87,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://devtools/skin/images/toggle-tools@2x.png");
+    list-style-image: url("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 {
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -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/. */
 
 
-@import url("resource://devtools/client/themes/splitters.css");
+@import url("splitters.css");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 :root {
   font: message-box;
 }
 
 :root[platform="mac"] {
   --monospace-font-family: Menlo, monospace;
@@ -348,25 +348,25 @@ checkbox:-moz-focusring {
 
 .devtools-toolbarbutton > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   margin-inline-end: 4px;
 }
 
 .devtools-menulist > .menulist-dropmarker {
   -moz-appearance: none;
   display: -moz-box;
-  list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  list-style-image: url("images/dropmarker.svg");
   -moz-box-align: center;
   min-width: 16px;
 }
 
 .devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
 .devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
   -moz-appearance: none !important;
-  list-style-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  list-style-image: url("images/dropmarker.svg");
   -moz-box-align: center;
   padding: 0 3px;
 }
 
 /* Icon-only buttons */
 .devtools-button:empty::before,
 .devtools-toolbarbutton:not([label]):not([disabled]) > image {
   opacity: 0.8;
@@ -451,17 +451,17 @@ checkbox:-moz-focusring {
 }
 .theme-light .devtools-toolbarbutton:not([disabled])[label][checked=true],
 .theme-light .devtools-toolbarbutton:not([disabled])[label][open],
 .theme-light .devtools-button:not(:empty)[checked=true] {
   background: rgba(76, 158, 217, .3); /* Select highlight blue */
 }
 
 :root {
-  --clear-icon-url: url("chrome://devtools/skin/images/clear.svg");
+  --clear-icon-url: url("images/clear.svg");
 }
 
 .devtools-button.devtools-clear-icon::before {
   background-image: var(--clear-icon-url);
 }
 
 .devtools-button.devtools-filter-icon::before {
   background-image: var(--filter-image);
@@ -555,17 +555,17 @@ checkbox:-moz-focusring {
   padding-inline-end: 23px;
 }
 
 .devtools-searchinput {
   background-image: var(--magnifying-glass-image);
 }
 
 .devtools-filterinput {
-  background-image: url(chrome://devtools/skin/images/filter.svg#filterinput);
+  background-image: url(images/filter.svg#filterinput);
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl),
 .devtools-searchinput:dir(rtl),
 .devtools-filterinput:-moz-locale-dir(rtl),
 .devtools-filterinput:dir(rtl) {
   background-position: calc(100% - 8px) center;
 }
@@ -664,40 +664,40 @@ checkbox:-moz-focusring {
 }
 
 .devtools-searchinput-clear:dir(rtl) {
   right: unset;
   left: 7px;
 }
 
 .theme-dark .devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear-dark.svg");
+  background-image: url("images/search-clear-dark.svg");
 }
 
 .theme-light .devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear-light.svg");
+  background-image: url("images/search-clear-light.svg");
 }
 
 .devtools-style-searchbox-no-match + .devtools-searchinput-clear {
-  background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important;
+  background-image: url("images/search-clear-failed.svg") !important;
 }
 
 .devtools-searchinput-clear:hover {
   background-position: -16px 0;
 }
 
 .theme-dark .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
 .theme-dark .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
-  list-style-image: url("chrome://devtools/skin/images/search-clear-dark.svg");
+  list-style-image: url("images/search-clear-dark.svg");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 .theme-light .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
 .theme-light .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
-  list-style-image: url("chrome://devtools/skin/images/search-clear-light.svg");
+  list-style-image: url("images/search-clear-light.svg");
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
 
 .devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
 .devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
   margin-bottom: 0;
 }
 
@@ -706,17 +706,17 @@ checkbox:-moz-focusring {
   -moz-image-region: rect(0, 32px, 16px, 16px);
 }
 
 /* Twisty and checkbox controls */
 .theme-twisty, .theme-checkbox {
   width: 14px;
   height: 14px;
   background-repeat: no-repeat;
-  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-image: url("images/controls.png");
   background-size: 56px 28px;
 }
 
 .theme-twisty {
   cursor: pointer;
   background-position: 0 -14px;
 }
 
@@ -765,17 +765,17 @@ checkbox:-moz-focusring {
 }
 
 .theme-dark .theme-checkbox[checked] {
   background-position: -42px 0;
 }
 
 @media (min-resolution: 1.1dppx) {
   .theme-twisty, .theme-checkbox {
-    background-image: url("chrome://devtools/skin/images/controls@2x.png");
+    background-image: url("images/controls@2x.png");
   }
 }
 
 /* Throbbers */
 .devtools-throbber::before {
   content: "";
   display: inline-block;
   vertical-align: bottom;
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -1,15 +1,15 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@import url(resource://devtools/client/themes/variables.css);
-@import url(resource://devtools/client/themes/common.css);
+@import url(variables.css);
+@import url(common.css);
 @import url(toolbars.css);
 @import url(tooltips.css);
 
 body {
   margin: 0;
 }
 
 .theme-body {
@@ -273,25 +273,25 @@ div.CodeMirror span.eval-text {
 }
 
 :root[platform="win"] .theme-tooltip-panel .panel-arrow {
   --arrow-margin: -7px;
 }
 
 .theme-tooltip-panel .panel-arrow[side="top"],
 .theme-tooltip-panel .panel-arrow[side="bottom"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark.png");
+  list-style-image: url("tooltip/arrow-vertical-dark.png");
   /* !important is needed to override the popup.css rules in toolkit/themes */
   width: 39px !important;
   height: 16px !important;
 }
 
 .theme-tooltip-panel .panel-arrow[side="left"],
 .theme-tooltip-panel .panel-arrow[side="right"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark.png");
+  list-style-image: url("tooltip/arrow-horizontal-dark.png");
   /* !important is needed to override the popup.css rules in toolkit/themes */
   width: 16px !important;
   height: 39px !important;
 }
 
 .theme-tooltip-panel .panel-arrow[side="top"] {
   margin-bottom: var(--arrow-margin);
 }
@@ -306,22 +306,22 @@ div.CodeMirror span.eval-text {
 
 .theme-tooltip-panel .panel-arrow[side="right"] {
   margin-left: var(--arrow-margin);
 }
 
 @media (min-resolution: 1.1dppx) {
   .theme-tooltip-panel .panel-arrow[side="top"],
   .theme-tooltip-panel .panel-arrow[side="bottom"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-dark@2x.png");
+    list-style-image: url("tooltip/arrow-vertical-dark@2x.png");
   }
 
   .theme-tooltip-panel .panel-arrow[side="left"],
   .theme-tooltip-panel .panel-arrow[side="right"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-dark@2x.png");
+    list-style-image: url("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
@@ -26,17 +26,17 @@
 /* Sources and breakpoints list */
 
 .dbg-source-item {
   padding: 2px 0px;
 }
 
 .dbg-wasm-item .icon {
   display: block;
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-image: url(images/webconsole.svg);
   background-repeat: no-repeat;
   background-size: 72px 60px;
   /* show warning icon */
   background-position: -24px -24px;
   width: 10px;
   height: 10px;
   position: absolute;
   margin-inline-start: -15px;
@@ -59,17 +59,17 @@
   margin: 2px;
 }
 
 /* Firebug theme uses breakpoint icon istead of a checkbox */
 
 .theme-firebug #sources-pane .dbg-breakpoint-checkbox .checkbox-check {
   -moz-appearance: none;
   border: none;
-  background: url(chrome://devtools/skin/images/firebug/breakpoint.svg) no-repeat 50% 50%;
+  background: url(images/firebug/breakpoint.svg) no-repeat 50% 50%;
 }
 
 .theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) > .checkbox-check,
 .theme-firebug #sources-pane .dbg-breakpoint-checkbox:not([checked="true"]) ~ * {
   opacity: 0.5;
 }
 
 .theme-firebug #sources-pane .dbg-breakpoint-checkbox {
--- a/devtools/client/themes/devtools-browser.css
+++ b/devtools/client/themes/devtools-browser.css
@@ -1,12 +1,13 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* devtools-browser.css is loaded via a chrome:// url */
 @import url("resource://devtools/client/themes/splitters.css");
 
 /* Bottom-docked toolbox minimize transition */
 .devtools-toolbox-bottom-iframe {
   transition: margin-bottom .1s;
 }
 
 .devtools-toolbox-side-iframe {
--- a/devtools/client/themes/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -1,15 +1,15 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@import url(resource://devtools/client/themes/variables.css);
-@import url(resource://devtools/client/themes/common.css);
+@import url(variables.css);
+@import url(common.css);
 @import url(light-theme.css);
 
 :root {
   font-size: 11px;
   font-family: var(--proportional-font-family);
 }
 
 /* CodeMirror Color Syntax */
@@ -148,17 +148,17 @@
 /* Firebug theme support for the Option (panel) tab */
 
 .theme-firebug #toolbox-tab-options {
   margin-inline-end: 4px;
   background-color: white;
 }
 
 .theme-firebug #toolbox-tab-options::before {
-  content: url(chrome://devtools/skin/images/firebug/tool-options.svg);
+  content: url(images/firebug/tool-options.svg);
   display: block;
   margin: 4px 7px 0;
 }
 
 .theme-firebug #toolbox-tab-options:not([selected]):hover::before {
   filter: brightness(80%);
 }
 
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/filetypes/moz.build
@@ -0,0 +1,11 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+  'dir-close.svg',
+  'dir-open.svg',
+  'globe.svg',
+)
--- a/devtools/client/themes/images/firebug/moz.build
+++ b/devtools/client/themes/images/firebug/moz.build
@@ -1,11 +1,45 @@
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
-    'read-only.svg',
-    'spinner.png',
-    'twisty-closed-firebug.svg',
-    'twisty-open-firebug.svg',
+    'arrow-down.svg',
+  'arrow-up.svg',
+  'breadcrumbs-divider.svg',
+  'breakpoint.svg',
+  'close.svg',
+  'command-console.svg',
+  'command-eyedropper.svg',
+  'command-frames.svg',
+  'command-measure.svg',
+  'command-noautohide.svg',
+  'command-paintflashing.svg',
+  'command-pick.svg',
+  'command-responsivemode.svg',
+  'command-rulers.svg',
+  'command-scratchpad.svg',
+  'command-screenshot.svg',
+  'commandline-icon.svg',
+  'debugger-blackbox.svg',
+  'debugger-prettyprint.svg',
+  'debugger-step-in.svg',
+  'debugger-step-out.svg',
+  'debugger-step-over.svg',
+  'debugger-toggleBreakpoints.svg',
+  'disable.svg',
+  'dock-bottom.svg',
+  'dock-side.svg',
+  'dock-undock.svg',
+  'pane-collapse.svg',
+  'pane-expand.svg',
+  'pause.svg',
+  'play.svg',
+  'read-only.svg',
+  'rewind.svg',
+  'spinner.png',
+  'tool-debugger-paused.svg',
+  'tool-options.svg',
+  'twisty-closed-firebug.svg',
+  'twisty-open-firebug.svg'
 )
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/moz.build
@@ -0,0 +1,123 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DIRS += [
+  'filetypes',
+  'firebug',
+  'responsivemode',
+]
+
+DevToolsModules(
+  'add.svg',
+  'alerticon-warning.png',
+  'alerticon-warning@2x.png',
+  'angle-swatch.svg',
+  'animation-fast-track.svg',
+  'arrow-e.png',
+  'arrow-e@2x.png',
+  'breadcrumbs-divider@2x.png',
+  'breadcrumbs-scrollbutton.png',
+  'breadcrumbs-scrollbutton@2x.png',
+  'breakpoint.svg',
+  'clear.svg',
+  'close.svg',
+  'command-console.svg',
+  'command-eyedropper.svg',
+  'command-frames.svg',
+  'command-measure.svg',
+  'command-noautohide.svg',
+  'command-paintflashing.svg',
+  'command-pick.svg',
+  'command-responsivemode.svg',
+  'command-rulers.svg',
+  'command-screenshot.svg',
+  'commandline-icon.svg',
+  'controls.png',
+  'controls@2x.png',
+  'cubic-bezier-swatch.png',
+  'cubic-bezier-swatch@2x.png',
+  'debugger-step-in.svg',
+  'debugger-step-out.svg',
+  'debugger-step-over.png',
+  'debugger-step-over.svg',
+  'debugger-step-over@2x.png',
+  'debugger-toggleBreakpoints.svg',
+  'debugging-addons.svg',
+  'debugging-devices.svg',
+  'debugging-tabs.svg',
+  'debugging-workers.svg',
+  'diff.svg',
+  'dock-bottom.svg',
+  'dock-side.svg',
+  'dock-undock.svg',
+  'dropmarker.svg',
+  'editor-error.png',
+  'fast-forward.svg',
+  'filter-swatch.svg',
+  'filter.svg',
+  'filters.svg',
+  'geometry-editor.svg',
+  'globe.svg',
+  'grid.svg',
+  'import.svg',
+  'item-arrow-dark-ltr.svg',
+  'item-arrow-dark-rtl.svg',
+  'item-arrow-ltr.svg',
+  'item-arrow-rtl.svg',
+  'item-toggle.svg',
+  'magnifying-glass.png',
+  'magnifying-glass@2x.png',
+  'noise.png',
+  'pane-collapse.svg',
+  'pane-expand.svg',
+  'pause.svg',
+  'performance-icons.svg',
+  'play.svg',
+  'power.svg',
+  'profiler-stopwatch.svg',
+  'pseudo-class.svg',
+  'reload.svg',
+  'rewind.svg',
+  'search-clear-dark.svg',
+  'search-clear-failed.svg',
+  'search-clear-light.svg',
+  'search.svg',
+  'security-state-broken.svg',
+  'security-state-insecure.svg',
+  'security-state-secure.svg',
+  'security-state-weak.svg',
+  'sort-arrows.svg',
+  'toggle-tools.png',
+  'toggle-tools@2x.png',
+  'tool-canvas.svg',
+  'tool-debugger-paused.svg',
+  'tool-debugger.svg',
+  'tool-dom.svg',
+  'tool-inspector.svg',
+  'tool-memory-active.svg',
+  'tool-memory.svg',
+  'tool-network.svg',
+  'tool-options.svg',
+  'tool-profiler-active.svg',
+  'tool-profiler.svg',
+  'tool-scratchpad.svg',
+  'tool-shadereditor.svg',
+  'tool-storage.svg',
+  'tool-styleeditor.svg',
+  'tool-webaudio.svg',
+  'tool-webconsole.svg',
+  'tracer-icon.png',
+  'tracer-icon@2x.png',
+  'vview-delete.png',
+  'vview-delete@2x.png',
+  'vview-edit.png',
+  'vview-edit@2x.png',
+  'vview-lock.png',
+  'vview-lock@2x.png',
+  'vview-open-inspector.png',
+  'vview-open-inspector@2x.png',
+  'webconsole.svg',
+)
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/responsivemode/moz.build
@@ -0,0 +1,21 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+  'responsive-horizontal-resizer.png',
+  'responsive-horizontal-resizer@2x.png',
+  'responsive-se-resizer.png',
+  'responsive-se-resizer@2x.png',
+  'responsive-vertical-resizer.png',
+  'responsive-vertical-resizer@2x.png',
+  'responsiveui-home.png',
+  'responsiveui-rotate.png',
+  'responsiveui-rotate@2x.png',
+  'responsiveui-screenshot.png',
+  'responsiveui-screenshot@2x.png',
+  'responsiveui-touch.png',
+  'responsiveui-touch@2x.png'
+)
--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -86,18 +86,18 @@ window {
 
 #inspector-toolbar.devtools-toolbar .devtools-toolbar-spacer {
   flex-grow: 1;
   display: inline-block;
 }
 
 /* Add element toolbar button */
 #inspector-element-add-button::before {
-  background-image: url("chrome://devtools/skin/images/add.svg");
-  list-style-image: url("chrome://devtools/skin/images/add.svg");
+  background-image: url("images/add.svg");
+  list-style-image: url("images/add.svg");
   -moz-user-focus: normal;
 }
 
 #inspector-searchlabel {
   overflow: hidden;
   margin-inline-end: 2px;
 }
 
--- a/devtools/client/themes/jit-optimizations.css
+++ b/devtools/client/themes/jit-optimizations.css
@@ -71,20 +71,20 @@
 #jit-optimizations-view .optimization-outcome.success {
   color: var(--theme-highlight-green);
 }
 #jit-optimizations-view .optimization-outcome.failure {
   color: var(--theme-highlight-red);
 }
 
 .theme-dark .opt-icon::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-image: url(images/webconsole.svg);
 }
 .theme-light .opt-icon::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+  background-image: url(images/webconsole.svg#light-icons);
 }
 
 .opt-icon::before {
   display: inline-block;
   content: "";
   background-repeat: no-repeat;
   background-size: 72px 60px;
   /* show grey "i" bubble by default */
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -1,15 +1,15 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-@import url(resource://devtools/client/themes/variables.css);
-@import url(resource://devtools/client/themes/common.css);
+@import url(variables.css);
+@import url(common.css);
 @import url(toolbars.css);
 @import url(tooltips.css);
 
 body {
   margin: 0;
 }
 
 .theme-body {
@@ -275,25 +275,25 @@ div.CodeMirror span.eval-text {
 }
 
 :root[platform="win"] .theme-tooltip-panel .panel-arrow {
   --arrow-margin: -7px;
 }
 
 .theme-tooltip-panel .panel-arrow[side="top"],
 .theme-tooltip-panel .panel-arrow[side="bottom"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light.png");
+  list-style-image: url("tooltip/arrow-vertical-light.png");
   /* !important is needed to override the popup.css rules in toolkit/themes */
   width: 39px !important;
   height: 16px !important;
 }
 
 .theme-tooltip-panel .panel-arrow[side="left"],
 .theme-tooltip-panel .panel-arrow[side="right"] {
-  list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light.png");
+  list-style-image: url("tooltip/arrow-horizontal-light.png");
   /* !important is needed to override the popup.css rules in toolkit/themes */
   width: 16px !important;
   height: 39px !important;
 }
 
 .theme-tooltip-panel .panel-arrow[side="top"] {
   margin-bottom: var(--arrow-margin);
 }
@@ -308,22 +308,22 @@ div.CodeMirror span.eval-text {
 
 .theme-tooltip-panel .panel-arrow[side="right"] {
   margin-left: var(--arrow-margin);
 }
 
 @media (min-resolution: 1.1dppx) {
   .theme-tooltip-panel .panel-arrow[side="top"],
   .theme-tooltip-panel .panel-arrow[side="bottom"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-vertical-light@2x.png");
+    list-style-image: url("tooltip/arrow-vertical-light@2x.png");
   }
 
   .theme-tooltip-panel .panel-arrow[side="left"],
   .theme-tooltip-panel .panel-arrow[side="right"] {
-    list-style-image: url("chrome://devtools/skin/tooltip/arrow-horizontal-light@2x.png");
+    list-style-image: url("tooltip/arrow-horizontal-light@2x.png");
   }
 }
 
 .theme-tooltip-panel .devtools-tooltip-simple-text {
   color: black;
   border-bottom: 1px solid #d9e1e8;
 }
 
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -103,25 +103,25 @@ html, body, #app, #memory-tool {
   margin-inline-start: 5px;
 }
 
 #take-snapshot::before {
   background-image: url(images/command-screenshot.svg);
 }
 
 #clear-snapshots::before {
-  background-image: url(chrome://devtools/skin/images/clear.svg);
+  background-image: url(images/clear.svg);
 }
 
 #diff-snapshots::before {
-  background-image: url(chrome://devtools/skin/images/diff.svg);
+  background-image: url(images/diff.svg);
 }
 
 #import-snapshot::before {
-  background-image: url(chrome://devtools/skin/images/import.svg);
+  background-image: url(images/import.svg);
 }
 
 #record-allocation-stacks-label,
 #pop-view-button-label {
   border-inline-end: 1px solid var(--theme-splitter-color);
   padding-inline-end: 5px;
 }
 
@@ -212,17 +212,17 @@ html, body, #app, #memory-tool {
   min-width: 1.3em;
 }
 
 .snapshot-list-item.selected .delete::before {
   filter: invert(1);
 }
 
 .snapshot-list-item .delete::before {
-  background-image: url("chrome://devtools/skin/images/close.svg");
+  background-image: url("images/close.svg");
   background-position: 0.2em 0;
 }
 
 .snapshot-list-item > .snapshot-title {
   margin-bottom: 14px;
 }
 
 .snapshot-list-item > .snapshot-title > input[type=checkbox] {
@@ -549,27 +549,27 @@ html, body, #app, #memory-tool {
  */
 
 .error::before {
   content: "";
   display: inline-block;
   width: 12px;
   height: 12px;
   max-height: 12px;
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-image: url(images/webconsole.svg);
   background-size: 72px 60px;
   background-position: -24px -24px;
   background-repeat: no-repeat;
   margin: 0px;
   margin-top: 2px;
   margin-inline-end: 5px;
 }
 
 .theme-light .error::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+  background-image: url(images/webconsole.svg#light-icons);
 }
 
 /**
  * Frame View components
  */
 
 .separator,
 .not-available,
--- a/devtools/client/themes/moz.build
+++ b/devtools/client/themes/moz.build
@@ -1,15 +1,51 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DIRS += [
     'audio',
+    'images',
+    'projecteditor',
+    'tooltip',
 ]
 
 DevToolsModules(
+    'animationinspector.css',
+    'boxmodel.css',
+    'canvasdebugger.css',
+    'commandline.css',
     'common.css',
+    'components-frame.css',
+    'components-h-split-box.css',
+    'computed.css',
+    'dark-theme.css',
+    'debugger.css',
+    'firebug-theme.css',
+    'floating-scrollbars-dark-theme.css',
+    'floating-scrollbars-responsive-design.css',
+    'fonts.css',
+    'inspector.css',
+    'jit-optimizations.css',
+    'layout.css',
+    'light-theme.css',
+    'markup.css',
+    'memory.css',
+    'netmonitor.css',
+    'performance.css',
+    'rules.css',
+    'scratchpad.css',
+    'shadereditor.css',
     'splitters.css',
+    'splitview.css',
+    'storage.css',
+    'styleeditor.css',
+    'toolbars.css',
+    'toolbox.css',
+    'tooltips.css',
     'variables.css',
+    'webaudioeditor.css',
+    'webconsole.css',
+    'widgets.css',
 )
--- a/devtools/client/themes/netmonitor.css
+++ b/devtools/client/themes/netmonitor.css
@@ -65,48 +65,48 @@
 
   --timing-blocked-color: rgba(235, 83, 104, 0.8);
   --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
   --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
   --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
   --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
 
-  --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
-  --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
+  --sort-ascending-image: url(images/sort-arrows.svg#ascending);
+  --sort-descending-image: url(images/sort-arrows.svg#descending);
 }
 
 :root.theme-light {
   --table-splitter-color: rgba(0,0,0,0.15);
   --table-zebra-background: rgba(0,0,0,0.05);
 
   --timing-blocked-color: rgba(235, 83, 104, 0.8);
   --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
   --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-send-color: rgba(0, 136, 204, 0.8); /* blue */
   --timing-wait-color: rgba(95, 136, 176, 0.8); /* blue grey */
   --timing-receive-color: rgba(44, 187, 15, 0.8); /* green */
 
-  --sort-ascending-image: url(chrome://devtools/skin/images/sort-arrows.svg#ascending);
-  --sort-descending-image: url(chrome://devtools/skin/images/sort-arrows.svg#descending);
+  --sort-ascending-image: url(images/sort-arrows.svg#ascending);
+  --sort-descending-image: url(images/sort-arrows.svg#descending);
 }
 
 :root.theme-firebug {
   --table-splitter-color: rgba(0,0,0,0.15);
   --table-zebra-background: rgba(0,0,0,0.05);
 
   --timing-blocked-color:  rgba(235, 83, 104, 0.8); /* red */
   --timing-dns-color: rgba(223, 128, 255, 0.8); /* pink */
   --timing-connect-color: rgba(217, 102, 41, 0.8); /* orange */
   --timing-send-color: rgba(70, 175, 227, 0.8); /* light blue */
   --timing-wait-color: rgba(94, 136, 176, 0.8); /* blue grey */
   --timing-receive-color: rgba(112, 191, 83, 0.8); /* green */
 
-  --sort-ascending-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
-  --sort-descending-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg);
+  --sort-ascending-image: url(images/firebug/arrow-up.svg);
+  --sort-descending-image: url(images/firebug/arrow-down.svg);
 }
 
 #requests-menu-empty-notice {
   margin: 0;
   padding: 12px;
   font-size: 120%;
 }
 
@@ -286,33 +286,33 @@
   margin-inline-end: 4px;
 }
 
 .side-menu-widget-item.selected .requests-security-state-icon {
   filter: brightness(1.3);
 }
 
 .security-state-insecure {
-  list-style-image: url(chrome://devtools/skin/images/security-state-insecure.svg);
+  list-style-image: url(images/security-state-insecure.svg);
 }
 
 .security-state-secure {
-  list-style-image: url(chrome://devtools/skin/images/security-state-secure.svg);
+  list-style-image: url(images/security-state-secure.svg);
 }
 
 .security-state-weak {
-  list-style-image: url(chrome://devtools/skin/images/security-state-weak.svg);
+  list-style-image: url(images/security-state-weak.svg);
 }
 
 .security-state-broken {
-  list-style-image: url(chrome://devtools/skin/images/security-state-broken.svg);
+  list-style-image: url(images/security-state-broken.svg);
 }
 
 .security-state-local {
-  list-style-image: url(chrome://devtools/skin/images/globe.svg);
+  list-style-image: url(images/globe.svg);
 }
 
 .requests-menu-type,
 .requests-menu-size {
   max-width: 6em;
   text-align: center;
   width: 8vw;
 }
--- a/devtools/client/themes/performance.css
+++ b/devtools/client/themes/performance.css
@@ -53,17 +53,17 @@
 }
 
 #performance-toolbar-controls-detail-views .toolbarbutton-text {
   padding-inline-start: 4px;
   padding-inline-end: 8px;
 }
 
 #filter-button {
-  list-style-image: url(chrome://devtools/skin/images/filter.svg);
+  list-style-image: url(images/filter.svg);
 }
 
 #performance-filter-menupopup > menuitem .menu-iconic-left::after {
   content: "";
   display: block;
   width: 8px;
   height: 8px;
   margin: 0 8px;
@@ -760,29 +760,29 @@ menuitem.marker-color-graphs-grey .menu-
  * preference being applied or removed.
  */
 
 /**
  * devtools.performance.ui.experimental
  */
 menuitem.experimental-option::before {
   content: "";
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-image: url(images/webconsole.svg);
   background-repeat: no-repeat;
   background-size: 72px 60px;
   width: 12px;
   height: 12px;
   display: inline-block;
 
   background-position: -24px -24px;
   margin: 2px 5px 0 0;
   max-height: 12px;
 }
 .theme-light menuitem.experimental-option::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+  background-image: url(images/webconsole.svg#light-icons);
 }
 
 #performance-options-menupopup:not(.experimental-enabled) .experimental-option,
 #performance-options-menupopup:not(.experimental-enabled) .experimental-option::before {
   display: none;
 }
 
 /* for call tree */
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/projecteditor/moz.build
@@ -0,0 +1,9 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    'projecteditor.css',
+)
--- a/devtools/client/themes/responsivedesign.inc.css
+++ b/devtools/client/themes/responsivedesign.inc.css
@@ -122,17 +122,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://devtools/skin/images/dropmarker.svg");
+  list-style-image: url(resource://devtools/client/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;
@@ -148,99 +148,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://devtools/skin/images/dropmarker.svg");
+  list-style-image: url(resource://devtools/client/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://devtools/skin/images/close.svg");
+  list-style-image: url(resource://devtools/client/themes/images/close.svg);
 }
 
 .devtools-responsiveui-close > image {
   filter: invert(1);
 }
 
 .devtools-responsiveui-rotate {
-  list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate.png");
+  list-style-image: url(resource://devtools/client/themes/images/responsivemode/responsiveui-rotate.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   .devtools-responsiveui-rotate {
-    list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-rotate@2x.png");
+    list-style-image: url(resource://devtools/client/themes/images/responsivemode/responsiveui-rotate@2x.png);
   }
 }
 
 .devtools-responsiveui-touch {
-  list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-touch.png");
+  list-style-image: url(resource://devtools/client/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://devtools/skin/images/responsivemode/responsiveui-touch@2x.png");
+    list-style-image: url(resource://devtools/client/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://devtools/skin/images/responsivemode/responsiveui-screenshot.png");
+  list-style-image: url(resource://devtools/client/themes/images/responsivemode/responsiveui-screenshot.png);
 }
 
 @media (min-resolution: 1.1dppx) {
   .devtools-responsiveui-screenshot {
-    list-style-image: url("chrome://devtools/skin/images/responsivemode/responsiveui-screenshot@2x.png");
+    list-style-image: url(resource://devtools/client/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://devtools/skin/images/responsivemode/responsive-vertical-resizer.png");
+  background-image: url(resource://devtools/client/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://devtools/skin/images/responsivemode/responsive-horizontal-resizer.png");
+  background-image: url(resource://devtools/client/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://devtools/skin/images/responsivemode/responsive-se-resizer.png");
+  background-image: url(resource://devtools/client/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 {
@@ -278,17 +278,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://devtools/skin/images/responsivemode/responsiveui-home.png");
+  list-style-image: url(resource://devtools/client/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;
@@ -337,19 +337,19 @@
 }
 
 .devtools-responsiveui-volume-down-button {
   border-bottom-left-radius: 12px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .devtools-responsiveui-resizebarV {
-    background-image: url("chrome://devtools/skin/images/responsivemode/responsive-vertical-resizer@2x.png");
+    background-image: url(resource://devtools/client/themes/images/responsivemode/responsive-vertical-resizer@2x.png);
   }
 
   .devtools-responsiveui-resizebarH {
-    background-image: url("chrome://devtools/skin/images/responsivemode/responsive-horizontal-resizer@2x.png");
+    background-image: url(resource://devtools/client/themes/images/responsivemode/responsive-horizontal-resizer@2x.png);
   }
 
   .devtools-responsiveui-resizehandle {
-    background-image: url("chrome://devtools/skin/images/responsivemode/responsive-se-resizer@2x.png");
+    background-image: url(resource://devtools/client/themes/images/responsivemode/responsive-se-resizer@2x.png);
   }
 }
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -304,17 +304,17 @@
 
 @media (min-resolution: 1.1dppx) {
   .ruleview-warning {
     background-image: url(images/alerticon-warning@2x.png);
   }
 }
 
 .ruleview-overridden-rule-filter {
-  background-image: url(chrome://devtools/skin/images/filter.svg#filterinput);
+  background-image: url(images/filter.svg#filterinput);
   background-size: 11px 11px;
   margin-inline-start: 5px;
   display: inline-block;
   width: 11px;
   height: 11px;
 }
 
 .ruleview-ruleopen {
@@ -377,17 +377,17 @@
   /* align the swatch with its value */
   margin-top: -1px;
   margin-inline-end: 5px;
   display: inline-block;
   position: relative;
 }
 
 .ruleview-grid {
-  background: url("chrome://devtools/skin/images/grid.svg");
+  background: url("images/grid.svg");
   background-size: 1em;
   border-radius: 0;
 }
 
 .ruleview-colorswatch::before {
   content: '';
   background-color: #eee;
   background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
@@ -399,33 +399,33 @@
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
 }
 
 .ruleview-bezierswatch {
-  background: url("chrome://devtools/skin/images/cubic-bezier-swatch.png");
+  background: url("images/cubic-bezier-swatch.png");
   background-size: 1em;
 }
 
 .ruleview-filterswatch {
-  background: url("chrome://devtools/skin/images/filter-swatch.svg");
+  background: url("images/filter-swatch.svg");
   background-size: 1em;
 }
 
 .ruleview-angleswatch {
-  background: url("chrome://devtools/skin/images/angle-swatch.svg");
+  background: url("images/angle-swatch.svg");
   background-size: 1em;
 }
 
 @media (min-resolution: 1.1dppx) {
   .ruleview-bezierswatch {
-    background: url("chrome://devtools/skin/images/cubic-bezier-swatch@2x.png");
+    background: url("images/cubic-bezier-swatch@2x.png");
     background-size: 1em;
   }
 }
 
 .ruleview-overridden {
   text-decoration: line-through;
 }
 
@@ -496,39 +496,39 @@
 
 .theme-firebug .ruleview-selector > .ruleview-selector-matched,
 .theme-firebug .ruleview-selector > .ruleview-selector-separator,
 .theme-firebug .ruleview-selector > .ruleview-selector-unmatched {
   color: inherit;
 }
 
 .ruleview-selectorhighlighter {
-  background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
+  background: url("images/vview-open-inspector.png") no-repeat 0 0;
   padding-left: 16px;
   margin-left: 5px;
   cursor: pointer;
 }
 
 .ruleview-selectorhighlighter:hover {
   filter: url(images/filters.svg#checked-icon-state);
 }
 
 .ruleview-grid.active,
 .ruleview-selectorhighlighter:active,
 .ruleview-selectorhighlighter.highlighted {
   filter: url(images/filters.svg#checked-icon-state) brightness(0.9);
 }
 
 #ruleview-add-rule-button::before {
-  background-image: url("chrome://devtools/skin/images/add.svg");
+  background-image: url("images/add.svg");
   background-size: cover;
 }
 
 #pseudo-class-panel-toggle::before {
-  background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
+  background-image: url("images/pseudo-class.svg");
   background-size: cover;
 }
 
 .ruleview-overridden-rule-filter {
   opacity: 0.8;
 }
 .ruleview-overridden-rule-filter:hover {
   opacity: 1;
@@ -539,17 +539,17 @@
 }
 
 /* Firebug theme disable/enable CSS rule. Firebug theme uses its own
   icons to indicate when CSS rules can be disabled or enabled. */
 
 .theme-firebug .ruleview-rule .theme-checkbox {
   background-repeat: no-repeat;
   background-size: 12px 12px;
-  background-image: url(chrome://devtools/skin/images/firebug/disable.svg);
+  background-image: url(images/firebug/disable.svg);
   background-position: 0 0;
 }
 
 .theme-firebug .ruleview-rule .theme-checkbox:not([checked]){
   filter: grayscale(1);
 }
 
 .theme-firebug .ruleview-rule .theme-checkbox[checked] {
--- 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://devtools/skin/images/tool-storage.svg);
+  background-image: url(images/tool-storage.svg);
   background-size: 18px 18px;
   background-position: -1px 0;
 }
 
 /* Columns with date should have a min width so that date is visible */
 #expires, #lastAccessed, #creationTime {
   min-width: 150px;
 }
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -6,42 +6,42 @@
 /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
 .theme-light {
   --toolbar-tab-hover: rgba(170, 170, 170, .2);
   --toolbar-tab-hover-active: rgba(170, 170, 170, .4);
   --searchbox-background-color: #ffee99;
   --searchbox-border-color: #ffbf00;
   --searcbox-no-match-background-color: #ffe5e5;
   --searcbox-no-match-border-color: #e52e2e;
-  --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
-  --filter-image: url(chrome://devtools/skin/images/filter.svg);
-  --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
+  --magnifying-glass-image: url(images/search.svg);
+  --filter-image: url(images/filter.svg);
+  --tool-options-image: url(images/tool-options.svg);
   --icon-filter: none;
-  --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
+  --checked-icon-filter: url(images/filters.svg#checked-icon-state);
   --toolbar-button-border-color: rgba(170, 170, 170, .5);
 }
 
 .theme-dark {
   --toolbar-tab-hover: hsla(206, 37%, 4%, .2);
   --toolbar-tab-hover-active: hsla(206, 37%, 4%, .4);
   --searchbox-background-color: #4d4222;
   --searchbox-border-color: #d99f2b;
   --searcbox-no-match-background-color: #402325;
   --searcbox-no-match-border-color: #cc3d3d;
-  --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
-  --filter-image: url(chrome://devtools/skin/images/filter.svg);
-  --tool-options-image: url(chrome://devtools/skin/images/tool-options.svg);
+  --magnifying-glass-image: url(images/search.svg);
+  --filter-image: url(images/filter.svg);
+  --tool-options-image: url(images/tool-options.svg);
   --icon-filter: invert(1);
-  --checked-icon-filter: url(chrome://devtools/skin/images/filters.svg#dark-theme-checked-icon-state);
+  --checked-icon-filter: url(images/filters.svg#dark-theme-checked-icon-state);
   --toolbar-button-border-color: rgba(0, 0, 0, .4);
 }
 
 .theme-firebug {
-  --magnifying-glass-image: url(chrome://devtools/skin/images/search.svg);
-  --tool-options-image: url(chrome://devtools/skin/images/firebug/tool-options.svg);
+  --magnifying-glass-image: url(images/search.svg);
+  --tool-options-image: url(images/firebug/tool-options.svg);
   --icon-filter: none;
   --checked-icon-filter: none;
   --toolbar-button-border-color: rgba(170, 170, 170, .5);
 }
 
 
 /* Toolbars */
 .devtools-toolbar,
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -1,36 +1,36 @@
 /* vim:set ts=2 sw=2 sts=2 et: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
-  --close-button-image: url(chrome://devtools/skin/images/close.svg);
-  --dock-bottom-image: url(chrome://devtools/skin/images/dock-bottom.svg);
-  --dock-side-image: url(chrome://devtools/skin/images/dock-side.svg);
-  --dock-undock-image: url(chrome://devtools/skin/images/dock-undock.svg);
+  --close-button-image: url(images/close.svg);
+  --dock-bottom-image: url(images/dock-bottom.svg);
+  --dock-side-image: url(images/dock-side.svg);
+  --dock-undock-image: url(images/dock-undock.svg);
 
   --command-paintflashing-image: url(images/command-paintflashing.svg);
   --command-screenshot-image: url(images/command-screenshot.svg);
   --command-responsive-image: url(images/command-responsivemode.svg);
   --command-scratchpad-image: url(images/tool-scratchpad.svg);
   --command-pick-image: url(images/command-pick.svg);
   --command-frames-image: url(images/command-frames.svg);
   --command-splitconsole-image: url(images/command-console.svg);
   --command-noautohide-image: url(images/command-noautohide.svg);
   --command-rulers-image: url(images/command-rulers.svg);
   --command-measure-image: url(images/command-measure.svg);
 }
 
 .theme-firebug {
-  --close-button-image: url(chrome://devtools/skin/images/firebug/close.svg);
-  --dock-bottom-image: url(chrome://devtools/skin/images/firebug/dock-bottom.svg);
-  --dock-side-image: url(chrome://devtools/skin/images/firebug/dock-side.svg);
-  --dock-undock-image: url(chrome://devtools/skin/images/firebug/dock-undock.svg);
+  --close-button-image: url(images/firebug/close.svg);
+  --dock-bottom-image: url(images/firebug/dock-bottom.svg);
+  --dock-side-image: url(images/firebug/dock-side.svg);
+  --dock-undock-image: url(images/firebug/dock-undock.svg);
 
   --command-paintflashing-image: url(images/firebug/command-paintflashing.svg);
   --command-screenshot-image: url(images/firebug/command-screenshot.svg);
   --command-responsive-image: url(images/firebug/command-responsivemode.svg);
   --command-scratchpad-image: url(images/firebug/command-scratchpad.svg);
   --command-pick-image: url(images/firebug/command-pick.svg);
   --command-frames-image: url(images/firebug/command-frames.svg);
   --command-splitconsole-image: url(images/firebug/command-console.svg);
@@ -121,17 +121,17 @@
 .theme-light .devtools-tab:not([selected])[highlighted] {
   background-color: rgba(44, 187, 15, .2);
 }
 
 /* Display execution pointer in the Debugger tab to indicate
    that the debugger is paused. */
 .theme-firebug #toolbox-tab-jsdebugger.devtools-tab:not([selected])[highlighted] {
   background-color: rgba(89, 178, 234, .2);
-  background-image: url(chrome://devtools/skin/images/firebug/tool-debugger-paused.svg);
+  background-image: url(images/firebug/tool-debugger-paused.svg);
   background-repeat: no-repeat;
   padding-left: 13px !important;
   background-position: 3px 6px;
 }
 
 .devtools-tab > image {
   border: none;
   margin: 0;
@@ -251,21 +251,21 @@
   background-image: var(--dock-side-image);
 }
 
 #toolbox-dock-window::before {
   background-image: var(--dock-undock-image);
 }
 
 #toolbox-dock-bottom-minimize::before {
-  background-image: url("chrome://devtools/skin/images/dock-bottom-minimize@2x.png");
+  background-image: url("images/dock-bottom-minimize@2x.png");
 }
 
 #toolbox-dock-bottom-minimize.minimized::before {
-  background-image: url("chrome://devtools/skin/images/dock-bottom-maximize@2x.png");
+  background-image: url("images/dock-bottom-maximize@2x.png");
 }
 
 #toolbox-buttons:empty + .devtools-separator,
 .devtools-separator[invisible] {
   visibility: hidden;
 }
 
 #toolbox-controls-separator {
@@ -354,17 +354,17 @@
   background-image: var(--command-measure-image);
 }
 
 #command-button-frames::before {
   background-image: var(--command-frames-image);
 }
 
 #command-button-frames {
-  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  background-image: url("images/dropmarker.svg");
   background-repeat: no-repeat;
 
   /* Override background-size from the command-button.
    The drop down arrow is smaller */
   background-size: 8px 4px !important;
   min-width: 32px;
 }
 
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/tooltip/moz.build
@@ -0,0 +1,16 @@
+# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+  'arrow-horizontal-dark.png',
+  'arrow-horizontal-dark@2x.png',
+  'arrow-horizontal-light.png',
+  'arrow-horizontal-light@2x.png',
+  'arrow-vertical-dark.png',
+  'arrow-vertical-dark@2x.png',
+  'arrow-vertical-light.png',
+  'arrow-vertical-light@2x.png',
+)
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -56,27 +56,27 @@
   --theme-graphs-yellow: #efc052;
   --theme-graphs-orange: #d97e00;
   --theme-graphs-red: #e57180;
   --theme-graphs-grey: #cccccc;
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
 
   /* Images */
-  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
-  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
+  --theme-pane-collapse-image: url(resource://devtools/client/themes/images/pane-collapse.svg);
+  --theme-pane-expand-image: url(resource://devtools/client/themes/images/pane-expand.svg);
 
   /* Tooltips */
   --theme-tooltip-border: #d9e1e8;
   --theme-tooltip-background: rgba(255, 255, 255, .9);
   --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
 
   /* Command line */
-  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
-  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
+  --theme-command-line-image: url(resource://devtools/client/themes/images/commandline-icon.svg#light-theme);
+  --theme-command-line-image-focus: url(resource://devtools/client/themes/images/commandline-icon.svg#light-theme-focus);
 }
 
 :root.theme-dark {
   --theme-body-background: #393f4c;
   --theme-sidebar-background: #393f4c;
   --theme-contrast-background: #ffb35b;
 
   --theme-tab-toolbar-background: #272b35;
@@ -116,27 +116,27 @@
   --theme-graphs-yellow: #d99b28;
   --theme-graphs-orange: #d96629;
   --theme-graphs-red: #eb5368;
   --theme-graphs-grey: #757873;
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
 
   /* Images */
-  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
-  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
+  --theme-pane-collapse-image: url(resource://devtools/client/themes/images/pane-collapse.svg);
+  --theme-pane-expand-image: url(resource://devtools/client/themes/images/pane-expand.svg);
 
   /* Tooltips */
   --theme-tooltip-border: #434850;
   --theme-tooltip-background: rgba(19, 28, 38, .9);
   --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
 
   /* Command line */
-  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
-  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
+  --theme-command-line-image: url(resource://devtools/client/themes/images/commandline-icon.svg#dark-theme);
+  --theme-command-line-image-focus: url(resource://devtools/client/themes/images/commandline-icon.svg#dark-theme-focus);
 }
 
 :root.theme-firebug {
   --theme-body-background: #fcfcfc;
   --theme-sidebar-background: #fcfcfc;
   --theme-contrast-background: #e6b064;
 
   --theme-tab-toolbar-background: #d8eaf9;
@@ -171,30 +171,30 @@
   --theme-graphs-yellow: #efc052;
   --theme-graphs-orange: #d97e00;
   --theme-graphs-red: #e57180;
   --theme-graphs-grey: #cccccc;
   --theme-graphs-full-red: #f00;
   --theme-graphs-full-blue: #00f;
 
   /* Images */
-  --theme-pane-collapse-image: url(chrome://devtools/skin/images/firebug/pane-collapse.svg);
-  --theme-pane-expand-image: url(chrome://devtools/skin/images/firebug/pane-expand.svg);
+  --theme-pane-collapse-image: url(resource://devtools/client/themes/images/firebug/pane-collapse.svg);
+  --theme-pane-expand-image: url(resource://devtools/client/themes/images/firebug/pane-expand.svg);
 
   /* Font size */
   --theme-toolbar-font-size: 12px;
 
   /* Header */
   --theme-header-background: #F0F0F0 linear-gradient(to top,
                                                      rgba(0, 0, 0, 0.1),
                                                      transparent) repeat-x;
 
   /* Command line */
-  --theme-command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
-  --theme-command-line-image-focus: url(chrome://devtools/skin/images/firebug/commandline-icon.svg#focus);
+  --theme-command-line-image: url(resource://devtools/client/themes/images/firebug/commandline-icon.svg);
+  --theme-command-line-image-focus: url(resource://devtools/client/themes/images/firebug/commandline-icon.svg#focus);
 }
 
 :root {
   --theme-focus-border-color-textbox: #0675d3;
   --theme-textbox-box-shadow: rgba(97,181,255,.75);
 
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */
--- a/devtools/client/themes/webaudioeditor.css
+++ b/devtools/client/themes/webaudioeditor.css
@@ -62,21 +62,21 @@ g.edgeLabel tspan {
   fill: var(--theme-toolbar-background);
 }
 
 /**
  * Bypassed Nodes
  */
 
 .theme-light .nodes g.bypassed rect {
-  fill: url(chrome://devtools/skin/images/filters.svg#bypass-light);
+  fill: url(images/filters.svg#bypass-light);
 }
 
 .theme-dark .nodes g.bypassed rect {
-  fill: url(chrome://devtools/skin/images/filters.svg#bypass-dark);
+  fill: url(images/filters.svg#bypass-dark);
 }
 
 .nodes g.bypassed.selected rect {
   stroke: var(--theme-selection-background);
 }
 
 .nodes g.bypassed text {
   opacity: 0.6;
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -64,27 +64,27 @@ a {
 .theme-firebug .message[severity="warn"],
 .theme-light .message.warn,
 .theme-firebug .message.warn {
   background-color: var(--warning-background-color);
 }
 
 .message > .icon::before {
   content: "";
-  background-image: url(chrome://devtools/skin/images/webconsole.svg);
+  background-image: url(images/webconsole.svg);
   background-position: 12px 12px;
   background-repeat: no-repeat;
   background-size: 72px 60px;
   width: 12px;
   height: 12px;
   display: inline-block;
 }
 
 .theme-light .message > .icon::before {
-  background-image: url(chrome://devtools/skin/images/webconsole.svg#light-icons);
+  background-image: url(images/webconsole.svg#light-icons);
 }
 
 .message > .message-body-wrapper {
   flex: auto;
   min-width: 0px;
   margin: 3px;
 }
 
@@ -591,17 +591,17 @@ a {
 }
 
 a.learn-more-link.webconsole-learn-more-link {
     font-style: normal;
 }
 
 /* Open DOMNode in inspector button */
 .open-inspector {
-  background: url("chrome://devtools/skin/images/vview-open-inspector.png") no-repeat 0 0;
+  background: url("images/vview-open-inspector.png") no-repeat 0 0;
   padding-left: 16px;
   margin-left: 5px;
   cursor: pointer;
 }
 
 .elementNode:hover .open-inspector,
 .open-inspector:hover {
   filter: url(images/filters.svg#checked-icon-state);
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -3,36 +3,36 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .theme-dark {
   --table-splitter-color: rgba(255,255,255,0.15);
   --table-zebra-background: rgba(255,255,255,0.05);
   --sidemenu-selected-arrow: url(images/item-arrow-dark-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/item-arrow-dark-rtl.svg);
-  --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
-  --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
+  --delete-icon: url(images/vview-delete.png);
+  --delete-icon-2x: url(images/vview-delete@2x.png);
 }
 
 .theme-light {
   --table-splitter-color: rgba(0,0,0,0.15);
   --table-zebra-background: rgba(0,0,0,0.05);
   --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
-  --delete-icon: url(chrome://devtools/skin/images/vview-delete.png);
-  --delete-icon-2x: url(chrome://devtools/skin/images/vview-delete@2x.png);
+  --delete-icon: url(images/vview-delete.png);
+  --delete-icon-2x: url(images/vview-delete@2x.png);
 }
 
 .theme-firebug {
   --table-splitter-color: rgba(0,0,0,0.15);
   --table-zebra-background: rgba(0,0,0,0.05);
   --sidemenu-selected-arrow: url(images/item-arrow-ltr.svg);
   --sidemenu-selected-arrow-rtl: url(images/item-arrow-rtl.svg);
-  --delete-icon: url(chrome://devtools/skin/images/firebug/close.svg);
-  --delete-icon-2x: url(chrome://devtools/skin/images/firebug/close.svg);
+  --delete-icon: url(images/firebug/close.svg);
+  --delete-icon-2x: url(images/firebug/close.svg);
 }
 
 
 /* Generic pane helpers */
 
 .generic-toggled-pane {
   margin-inline-start: 0 !important;
   /* Unfortunately, transitions don't work properly with locale-aware properties,
@@ -367,17 +367,17 @@
   padding-right: 0;
 }
 
 .theme-firebug .breadcrumbs-widget-item:first-child {
   margin: 0;
 }
 
 .theme-firebug .breadcrumbs-widget-item:not(:first-child)::before {
-  content: url(chrome://devtools/skin/images/firebug/breadcrumbs-divider.svg);
+  content: url(images/firebug/breadcrumbs-divider.svg);
   position: relative;
   left: -3px;
   margin: 0 0 0 -5px;
   padding: 0;
   width: 5px;
 }
 
 /* Breadcrumbs Separators (reset selection styles) */
@@ -694,25 +694,25 @@ widgets.css is overwritten. */
 /* Custom configurable/enumerable/writable or frozen/sealed/extensible
  * variables and properties */
 
 .variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
   opacity: 0.6;
 }
 
 .variable-or-property-non-writable-icon {
-  background: url("chrome://devtools/skin/images/vview-lock.png") no-repeat;
+  background: url("images/vview-lock.png") no-repeat;
   background-size: cover;
   width: 16px;
   height: 16px;
 }
 
 @media (min-resolution: 1.1dppx) {
   .variable-or-property-non-writable-icon {
-    background-image: url("chrome://devtools/skin/images/vview-lock@2x.png");
+    background-image: url("images/vview-lock@2x.png");
   }
 }
 
 .variable-or-property-frozen-label,
 .variable-or-property-sealed-label,
 .variable-or-property-non-extensible-label {
   height: 16px;
   padding-inline-end: 4px;
@@ -830,32 +830,32 @@ widgets.css is overwritten. */
 
 @media (min-resolution: 1.1dppx) {
   .variables-view-delete {
     background-image: var(--delete-icon-2x);
   }
 }
 
 .variables-view-edit {
-  background-image: url("chrome://devtools/skin/images/vview-edit.png");
+  background-image: url("images/vview-edit.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   .variables-view-edit {
-    background-image: url("chrome://devtools/skin/images/vview-edit@2x.png");
+    background-image: url("images/vview-edit@2x.png");
   }
 }
 
 .variables-view-open-inspector {
-  background-image: url("chrome://devtools/skin/images/vview-open-inspector.png");
+  background-image: url("images/vview-open-inspector.png");
 }
 
 @media (min-resolution: 1.1dppx) {
   .variables-view-open-inspector {
-    background-image: url("chrome://devtools/skin/images/vview-open-inspector@2x.png");
+    background-image: url("images/vview-open-inspector@2x.png");
   }
 }
 
 /* Variables and properties input boxes */
 
 .variable-or-property > .title > .separator + .element-value-input {
   margin-inline-start: -2px !important;
   margin-inline-end: 2px !important;
@@ -1298,21 +1298,21 @@ widgets.css is overwritten. */
   background-position: right 6px center;
 }
 
 .table-widget-column-header[sorted]:-moz-locale-dir(rtl) {
   background-position: 6px center;
 }
 
 .table-widget-column-header[sorted=ascending] {
-  background-image: url("chrome://devtools/skin/images/sort-arrows.svg#ascending");
+  background-image: url("images/sort-arrows.svg#ascending");
 }
 
 .table-widget-column-header[sorted=descending] {
-  background-image: url("chrome://devtools/skin/images/sort-arrows.svg#descending");
+  background-image: url("images/sort-arrows.svg#descending");
 }
 
 .theme-dark .table-widget-column[readonly] {
   background-color: rgba(255,255,255,0.1);
 }
 
 .theme-light .table-widget-column[readonly] {
   background-color: rgba(0,0,0,0.1);
@@ -1345,21 +1345,21 @@ widgets.css is overwritten. */
 }
 
 .theme-firebug .devtools-toolbar.table-widget-column-header:hover:active {
   background-image: linear-gradient(rgba(0, 0, 0, 0.1),
                                     transparent);
 }
 
 .theme-firebug .devtools-toolbar.table-widget-column-header[sorted=descending]:not(:active) {
-  background-image: url(chrome://devtools/skin/images/firebug/arrow-down.svg);
+  background-image: url(images/firebug/arrow-down.svg);
 }
 
 .theme-firebug .devtools-toolbar.table-widget-column-header[sorted=ascending]:not(:active) {
-  background-image: url(chrome://devtools/skin/images/firebug/arrow-up.svg);
+  background-image: url(images/firebug/arrow-up.svg);
 }
 
 /* Cells */
 
 .table-widget-cell {
   width: 100%;
   padding: 3px 4px;
   min-width: 100px;
@@ -1451,17 +1451,17 @@ widgets.css is overwritten. */
 /* Twisties */
 .tree-widget-item::before {
   content: "";
   width: 14px;
   height: 14px;
   float: left;
   margin: 3px 2px -3px;
   background-repeat: no-repeat;
-  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-image: url("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);
@@ -1509,17 +1509,17 @@ widgets.css is overwritten. */
   }
   to {
     max-height: 500px;
   }
 }
 
 @media (min-resolution: 1.1dppx) {
   .tree-widget-item:before {
-    background-image: url("chrome://devtools/skin/images/controls@2x.png");
+    background-image: url("images/controls@2x.png");
   }
 }
 
 /* Indentation of child items in the tree */
 
 /* For level > 6 */
 .tree-widget-item[level] + ul > li > .tree-widget-item {
   padding-inline-start: 98px;
@@ -1579,23 +1579,23 @@ widgets.css is overwritten. */
 }
 
 .theme-light .tree-widget-item.theme-selected[type]::after,
 .theme-dark .tree-widget-item[type]::after {
   filter: invert(1);
 }
 
 .tree-widget-item[type="dir"]::after {
-  background-image: url(chrome://devtools/skin/images/filetypes/dir-close.svg);
+  background-image: url(images/filetypes/dir-close.svg);
   background-position: 2px 0;
   background-size: auto 16px;
   width: 20px;
 }
 
 .tree-widget-item[type="dir"][expanded]:not([empty])::after {
-  background-image: url(chrome://devtools/skin/images/filetypes/dir-open.svg);
+  background-image: url(images/filetypes/dir-open.svg);
 }
 
 .tree-widget-item[type="url"]::after {
-  background-image: url(chrome://devtools/skin/images/filetypes/globe.svg);
+  background-image: url(images/filetypes/globe.svg);
   background-size: auto 18px;
   width: 18px;
 }
--- a/devtools/client/webaudioeditor/webaudioeditor.xul
+++ b/devtools/client/webaudioeditor/webaudioeditor.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/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/content/shared/widgets/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/webaudioeditor.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/shared/widgets/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css" type="text/css"?>
+<?xml-stylesheet href="resource://devtools/client/themes/webaudioeditor.css" type="text/css"?>
 <!DOCTYPE window [
   <!ENTITY % debuggerDTD SYSTEM "chrome://devtools/locale/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/net/components/net-info-group.css
+++ b/devtools/client/webconsole/net/components/net-info-group.css
@@ -22,17 +22,17 @@
   cursor: pointer;
   font-weight: bold;
   -moz-user-select: none;
   cursor: pointer;
   padding-left: 3px;
 }
 
 .netInfoBody .netInfoGroupTwisty {
-  background-image: url("chrome://devtools/skin/images/controls.png");
+  background-image: url("resource://devtools/client/themes/images/controls.png");
   background-size: 56px 28px;
   background-position: 0 -14px;
   background-repeat: no-repeat;
   width: 14px;
   height: 14px;
   cursor: pointer;
   display: inline-block;
   vertical-align: middle;
@@ -64,17 +64,17 @@
 }
 
 .theme-dark .netInfoBody .netInfoGroup .netInfoGroupTwisty {
   filter: invert(1);
 }
 
 /* Twisties */
 .theme-firebug .netInfoBody .netInfoGroup .netInfoGroupTwisty {
-  background-image: url("chrome://devtools/skin/images/firebug/twisty-closed-firebug.svg");
+  background-image: url("resource://devtools/client/themes/images/firebug/twisty-closed-firebug.svg");
   background-position: 0 2px;
   background-size: 11px 11px;
   width: 15px;
 }
 
 .theme-firebug .netInfoBody .netInfoGroup.opened .netInfoGroupTwisty {
-  background-image: url("chrome://devtools/skin/images/firebug/twisty-open-firebug.svg");
+  background-image: url("resource://devtools/client/themes/images/firebug/twisty-open-firebug.svg");
 }
--- 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://devtools/locale/webConsole.dtd">
 %webConsoleDTD;
 ]>
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/widgets.css"
+<?xml-stylesheet href="resource://devtools/client/themes/widgets.css"
                  type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/webconsole.css"
+<?xml-stylesheet href="resource://devtools/client/themes/webconsole.css"
                  type="text/css"?>
-<?xml-stylesheet href="chrome://devtools/skin/components-frame.css"
+<?xml-stylesheet href="resource://devtools/client/themes/components-frame.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/themes/panel-listing.css
+++ b/devtools/client/webide/themes/panel-listing.css
@@ -87,17 +87,17 @@ button.panel-item {
 .panel-item:disabled {
   background-color: #FFF;
   color: #5A5A5A;
   opacity: 0.5;
   cursor: default;
 }
 
 .refresh-icon {
-  background-image: url("chrome://devtools/skin/images/reload.svg");
+  background-image: url("resource://devtools/client/themes/images/reload.svg");
   height: 14px;
   width: 14px;
   border: 0;
   opacity: 0.6;
   display: inline-block;
   margin: 3px;
   float: right;
 }