Bug 1535103 - Improve Debugger CSS DX. r=davidwalsh

Differential Revision: https://phabricator.services.mozilla.com/D24254 --HG-- extra : moz-landing-system : lando
2019-03-27 14:35:16 +00:00 · 2019-03-27 14:35:16 +00:00 · d605b47da3
--- a/browser/base/content/test/static/browser_parsable_css.js
+++ b/browser/base/content/test/static/browser_parsable_css.js
@ -14,7 +14,9 @@ let whitelist = [
  {sourceName: /codemirror\.css$/i,
   isFromDevTools: true},
  // The debugger uses cross-browser CSS.
-  {sourceName: /devtools\/client\/debugger\/new\/dist\/debugger.css/i,
+  {sourceName: /devtools\/client\/debugger\/new\/dist\/vendors.css/i,
+   isFromDevTools: true},
+  {sourceName: /devtools\/client\/debugger\/new\/src\/components\/([A-z\/]+).css/i,
  isFromDevTools: true},
   // Reps uses cross-browser CSS.
   {sourceName: /devtools-client-shared\/components\/reps\/reps.css/i,
--- a/devtools/client/debugger/new/bin/bundle.js
+++ b/devtools/client/debugger/new/bin/bundle.js
@ -1,14 +1,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/>. */
+
 const {
  tools: { makeBundle, copyFile }
 } = require("devtools-launchpad/index");

 const sourceMapAssets = require("devtools-source-map/assets");
 const path = require("path");
-const minimist = require("minimist");
 var fs = require("fs");
 const rimraf = require("rimraf");

-
 const projectPath = path.resolve(__dirname, "..");
 const bundlePath = path.join(projectPath, "./dist");

@ -16,7 +18,7 @@ const clientPath = path.join(projectPath, "../../");
 const watch = false;
 const updateAssets = false;

-process.env.NODE_ENV = "production"
+process.env.NODE_ENV = "production";

 function moveFile(src, dest, opts) {
  if (!fs.existsSync(src)) {
@ -28,16 +30,15 @@ function moveFile(src, dest, opts) {
 }

 async function bundle() {
-
  makeBundle({
    outputPath: bundlePath,
    projectPath,
    watch,
    updateAssets,
-    onFinish: () => onBundleFinish({bundlePath, projectPath })
+    onFinish: () => onBundleFinish()
  })
    .then(() => {
-      console.log("[copy-assets] bundle is done")
+      console.log("[copy-assets] bundle is done");
    })
    .catch(err => {
      console.log(
@ -49,20 +50,14 @@ async function bundle() {
    });
 }

-function onBundleFinish({ bundlePath, projectPath }) {
-  console.log("[copy-assets] delete debugger.js bundle");
-
-  const debuggerPath = path.join(bundlePath, "debugger.js");
-  if (fs.existsSync(debuggerPath)) {
-    fs.unlinkSync(debuggerPath);
-  }
-
+function onBundleFinish() {
  console.log("[copy-assets] copy shared bundles to client/shared");
  moveFile(
    path.join(bundlePath, "source-map-worker.js"),
    path.join(clientPath, "shared/source-map/worker.js"),
    { cwd: projectPath }
  );
+
  for (const filename of Object.keys(sourceMapAssets)) {
    moveFile(
      path.join(bundlePath, "source-map-worker-assets", filename),
@ -77,7 +72,6 @@ function onBundleFinish({ bundlePath, projectPath }) {
    { cwd: projectPath }
  );

-
  moveFile(
    path.join(bundlePath, "reps.js"),
    path.join(clientPath, "shared/components/reps/reps.js"),
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
--- a/devtools/client/debugger/new/dist/moz.build
+++ b/devtools/client/debugger/new/dist/moz.build
@ -4,9 +4,9 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.

 DevToolsModules(
-    'debugger.css',
    'parser-worker.js',
    'pretty-print-worker.js',
    'search-worker.js',
-    'vendors.js'
+    'vendors.css',
+    'vendors.js',
 )
--- a/devtools/client/debugger/new/index.html
+++ b/devtools/client/debugger/new/index.html
@ -3,25 +3,54 @@
   - 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/shared/sourceeditor/codemirror/lib/codemirror.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="chrome://devtools/content/shared/sourceeditor/codemirror/addon/dialog/dialog.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="chrome://devtools/content/shared/sourceeditor/codemirror/mozilla.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="resource://devtools/client/shared/components/reps/reps.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="resource://devtools/client/debugger/new/dist/vendors.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="resource://devtools/client/debugger/new/src/debugger.css"
+    />
+  </head>

-<head>
-  <link rel="stylesheet" type="text/css" href="chrome://devtools/content/shared/sourceeditor/codemirror/lib/codemirror.css" />
-  <link rel="stylesheet" type="text/css" href="chrome://devtools/content/shared/sourceeditor/codemirror/addon/dialog/dialog.css" />
-  <link rel="stylesheet" type="text/css" href="chrome://devtools/content/shared/sourceeditor/codemirror/mozilla.css" />
-  <link rel="stylesheet" type="text/css" href="resource://devtools/client/debugger/new/dist/debugger.css" />
-</head>
-
-<body>
+  <body>
    <div id="mount"></div>
-  <script type="application/javascript" src="chrome://devtools/content/shared/theme-switching.js"></script>
+    <script
+      type="application/javascript"
+      src="chrome://devtools/content/shared/theme-switching.js"
+    ></script>
    <script type="text/javascript">
-    const { BrowserLoader } = ChromeUtils.import("resource://devtools/client/shared/browser-loader.js");
+      const { BrowserLoader } = ChromeUtils.import(
+        "resource://devtools/client/shared/browser-loader.js"
+      );
      const { require } = BrowserLoader({
        baseURI: "resource://devtools/client/debugger/new",
-      window,
+        window
      });
      Debugger = require("devtools/client/debugger/new/src/main");
    </script>
-</body>
-
+  </body>
 </html>
--- a/devtools/client/debugger/new/packages/devtools-components/src/tree.css
+++ b/devtools/client/debugger/new/packages/devtools-components/src/tree.css
@ -55,7 +55,8 @@
 }

 .tree-node button.arrow {
-  mask: url(/images/arrow.svg) no-repeat center;
+  mask: url(resource://devtools/client/debugger/new/images/arrow.svg) no-repeat
+    center;
  mask-size: 10px;
  vertical-align: -1px;
  width: 10px;
--- a/devtools/client/debugger/new/packages/devtools-reps/src/reps/reps.css
+++ b/devtools/client/debugger/new/packages/devtools-reps/src/reps/reps.css
@ -267,7 +267,8 @@ button.open-inspector {
 /* Jump to definition button */

 button.jump-definition {
-  mask: url(/images/jump-definition.svg) no-repeat;
+  mask: url(resource://devtools/client/debugger/new/images/jump-definition.svg)
+    no-repeat;
  display: inline-block;
  background-color: var(--theme-icon-color);
  height: 16px;
@ -283,7 +284,7 @@ button.jump-definition {
 /* Invoke getter button */

 button.invoke-getter {
-  mask: url(/images/input.svg) no-repeat;
+  mask: url(resource://devtools/client/debugger/new/images/input.svg) no-repeat;
  display: inline-block;
  background-color: var(--theme-icon-color);
  height: 10px;
--- a/devtools/client/debugger/new/postcss.config.js
+++ b/devtools/client/debugger/new/postcss.config.js
@ -5,19 +5,13 @@
 var mapUrl = require("postcss-url-mapper");
 const debug = require("debug")("launchpad");

-function mapUrlProduction(url) {
-  const newUrl = url.replace(
-    /\/images\//,
-    "resource://devtools/client/debugger/new/images/"
-  );
-
-  debug("map url", { url, newUrl });
-  return newUrl;
-}
-
 function mapUrlDevelopment(url) {
  const newUrl = url
-    .replace(/(chrome:\/\/|resource:\/\/)/, "/mc/")
+    .replace(
+      /resource:\/\/devtools\/client\/debugger\/new\/images\//,
+      "/images/"
+    )
+    .replace(/(chrome:\/\/)/, "/images/")
    .replace(/devtools\/skin/, "devtools/client/themes")
    .replace(/devtools\/content/, "devtools/client");

@ -27,9 +21,7 @@ function mapUrlDevelopment(url) {

 module.exports = ({ file, options, env }) => {
  if (env === "production") {
-    return {
-      plugins: [mapUrl(mapUrlProduction)]
-    };
+    return {};
  }

  return {
--- a/devtools/client/debugger/new/src/components/App.css
+++ b/devtools/client/debugger/new/src/components/App.css
@ -81,3 +81,38 @@ button:focus {
 .split-box > .splitter:last-child {
  display: none;
 }
+
+/* Launchpad Root */
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+#mount {
+  display: flex;
+  height: 100%;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 8px;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  background: rgba(113, 113, 113, 0.5);
+}
--- a/devtools/client/debugger/new/src/components/Editor/Breakpoints.css
+++ b/devtools/client/debugger/new/src/components/Editor/Breakpoints.css
@ -56,7 +56,8 @@
  bottom: 0;
  height: 15px;
  background-color: var(--gutter-hover-background-color);
-  mask: url(/images/breakpoint.svg) no-repeat;
+  mask: url(resource://devtools/client/debugger/new/images/breakpoint.svg)
+    no-repeat;
  mask-size: auto 15px;
  mask-position: right;
 }
@ -151,5 +152,5 @@
 }

 .img.column-marker {
-  background-image: url(/images/column-marker.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/column-marker.svg);
 }
--- a/devtools/client/debugger/new/src/components/Editor/Preview/moz.build
+++ b/devtools/client/debugger/new/src/components/Editor/Preview/moz.build
@ -11,3 +11,7 @@ CompiledModules(
    'index.js',
    'Popup.js',
 )
+
+DevToolsModules(
+    'Popup.css',
+)
--- a/devtools/client/debugger/new/src/components/Editor/moz.build
+++ b/devtools/client/debugger/new/src/components/Editor/moz.build
@ -25,3 +25,14 @@ CompiledModules(
    'Tab.js',
    'Tabs.js',
 )
+
+DevToolsModules(
+    'Breakpoints.css',
+    'ConditionalPanel.css',
+    'Editor.css',
+    'Footer.css',
+    'Highlight.css',
+    'Preview.css',
+    'SearchBar.css',
+    'Tabs.css',
+)
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/moz.build
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/moz.build
@ -14,3 +14,9 @@ CompiledModules(
    'SourcesTree.js',
    'SourcesTreeItem.js',
 )
+
+DevToolsModules(
+    'Outline.css',
+    'OutlineFilter.css',
+    'Sources.css',
+)
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/moz.build
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints/moz.build
@ -15,3 +15,7 @@ CompiledModules(
    'ExceptionOption.js',
    'index.js',
 )
+
+DevToolsModules(
+    'Breakpoints.css',
+)
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/moz.build
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Frames/moz.build
@ -15,3 +15,9 @@ CompiledModules(
    'index.js',
    'WhyPaused.js',
 )
+
+DevToolsModules(
+    'Frames.css',
+    'Group.css',
+    'WhyPaused.css',
+)
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/moz.build
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/moz.build
@ -19,3 +19,13 @@ CompiledModules(
    'Workers.js',
    'XHRBreakpoints.js',
 )
+
+DevToolsModules(
+    'CommandBar.css',
+    'EventListeners.css',
+    'Expressions.css',
+    'Scopes.css',
+    'SecondaryPanes.css',
+    'Workers.css',
+    'XHRBreakpoints.css',
+)
--- a/devtools/client/debugger/new/src/components/moz.build
+++ b/devtools/client/debugger/new/src/components/moz.build
@ -18,3 +18,13 @@ CompiledModules(
    'ShortcutsModal.js',
    'WelcomeBox.js',
 )
+
+DevToolsModules(
+    'A11yIntention.css',
+    'App.css',
+    'ProjectSearch.css',
+    'QuickOpenModal.css',
+    'ShortcutsModal.css',
+    'variables.css',
+    'WelcomeBox.css',
+)
--- a/devtools/client/debugger/new/src/components/shared/AccessibleImage.css
+++ b/devtools/client/debugger/new/src/components/shared/AccessibleImage.css
@ -24,7 +24,7 @@
 .img.arrow {
  width: 10px;
  height: 10px;
-  mask-image: url(/images/arrow.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/arrow.svg);
  /* we may override the width/height in specific contexts to make the
     clickable area bigger, but we should always keep the mask size 10x10 */
  mask-size: 10px 10px;
@ -44,61 +44,61 @@ html[dir="rtl"] .img.arrow {
 }

 .img.arrow-down {
-  mask-image: url(/images/arrow-down.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/arrow-down.svg);
 }

 .img.arrow-up {
-  mask-image: url(/images/arrow-up.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/arrow-up.svg);
 }

 .img.blackBox {
-  mask-image: url(/images/blackBox.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/blackBox.svg);
 }

 .img.breadcrumb {
-  mask-image: url(/images/breadcrumbs-divider.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/breadcrumbs-divider.svg);
 }

 .img.case-match {
-  mask-image: url(/images/case-match.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/case-match.svg);
 }

 .img.close {
-  mask-image: url(/images/close.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/close.svg);
 }

 .img.disable-pausing {
-  mask-image: url(/images/disable-pausing.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/disable-pausing.svg);
 }

 .img.globe {
-  mask-image: url(/images/globe.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/globe.svg);
 }

 .img.globe-small {
-  mask-image: url(/images/globe-small.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/globe-small.svg);
  mask-size: 12px 12px;
 }

 .img.file {
-  mask-image: url(/images/file-small.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/file-small.svg);
  mask-size: 12px 12px;
 }

 .img.folder {
-  mask-image: url(/images/folder.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/folder.svg);
 }

 .img.home {
-  mask-image: url(/images/home.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/home.svg);
 }

 .img.loader {
-  mask-image: url(/images/loader.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/loader.svg);
 }

 .img.more-tabs {
-  mask-image: url(/images/command-chevron.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/command-chevron.svg);
 }

 html[dir="rtl"] .img.more-tabs {
@ -106,92 +106,92 @@ html[dir="rtl"] .img.more-tabs {
 }

 .img.next {
-  mask-image: url(/images/next.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/next.svg);
 }

 .img.next-circle {
-  mask-image: url(/images/next-circle.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/next-circle.svg);
 }

 .img.pane-collapse {
-  mask-image: url(/images/pane-collapse.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/pane-collapse.svg);
 }

 .img.pane-expand {
-  mask-image: url(/images/pane-expand.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/pane-expand.svg);
 }

 .img.pause {
-  mask-image: url(/images/pause.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/pause.svg);
 }

 .img.plus {
-  mask-image: url(/images/plus.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/plus.svg);
 }

 .img.prettyPrint {
-  mask-image: url(/images/prettyPrint.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/prettyPrint.svg);
 }

 .img.refresh {
-  mask-image: url(/images/reload.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/reload.svg);
 }

 .img.regex-match {
-  mask-image: url(/images/regex-match.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/regex-match.svg);
 }

 .img.resume {
-  mask-image: url(/images/resume.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/resume.svg);
 }

 .img.reverseStepIn {
-  mask-image: url(/images/stepIn.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/stepIn.svg);
  transform: scaleX(-1);
 }

 .img.reverseStepOut {
-  mask-image: url(/images/stepOut.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/stepOut.svg);
  transform: scaleX(-1);
 }

 .img.reverseStepOver {
-  mask-image: url(/images/stepOver.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/stepOver.svg);
  transform: scaleX(-1);
 }

 .img.rewind {
-  mask-image: url(/images/rewind.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/rewind.svg);
 }

 .img.search {
-  mask-image: url(/images/search.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/search.svg);
 }

 .img.shortcuts {
-  mask-image: url(/images/help.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/help.svg);
 }

 .img.stepIn {
-  mask-image: url(/images/stepIn.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/stepIn.svg);
 }

 .img.stepOut {
-  mask-image: url(/images/stepOut.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/stepOut.svg);
 }

 .img.stepOver {
-  mask-image: url(/images/stepOver.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/stepOver.svg);
 }

 .img.tab {
-  mask-image: url(/images/tab.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/tab.svg);
 }

 .img.whole-word-match {
-  mask-image: url(/images/whole-word-match.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/whole-word-match.svg);
 }

 .img.worker {
-  mask-image: url(/images/worker.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/worker.svg);
 }
--- a/devtools/client/debugger/new/src/components/shared/Button/moz.build
+++ b/devtools/client/debugger/new/src/components/shared/Button/moz.build
@ -4,7 +4,7 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.

 DIRS += [
-
+    'styles',
 ]

 CompiledModules(
@ -13,3 +13,4 @@ CompiledModules(
    'index.js',
    'PaneToggleButton.js',
 )
+
--- a/devtools/client/debugger/new/src/components/shared/Button/styles/moz.build
+++ b/devtools/client/debugger/new/src/components/shared/Button/styles/moz.build
@ -8,6 +8,10 @@ DIRS += [
 ]

 CompiledModules(
+
+)
+
+DevToolsModules(
    'CloseButton.css',
    'CommandBarButton.css',
    'PaneToggleButton.css',
--- a/devtools/client/debugger/new/src/components/shared/SourceIcon.css
+++ b/devtools/client/debugger/new/src/components/shared/SourceIcon.css
@ -14,137 +14,137 @@
 /* Icons for frameworks and libs */

 .img.aframe {
-  background-image: url(/images/sources/aframe.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/aframe.svg);
  background-color: transparent !important;
 }

 .img.angular {
-  background-image: url(/images/sources/angular.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/angular.svg);
  background-color: transparent !important;
 }

 .img.babel {
-  mask-image: url(/images/sources/babel.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/babel.svg);
 }

 .img.backbone {
-  mask-image: url(/images/sources/backbone.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/backbone.svg);
 }

 .img.choo {
-  background-image: url(/images/sources/choo.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/choo.svg);
  background-color: transparent !important;
 }

 .img.coffeescript {
-  mask-image: url(/images/sources/coffeescript.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/coffeescript.svg);
 }

 .img.dojo {
-  background-image: url(/images/sources/dojo.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/dojo.svg);
  background-color: transparent !important;
 }

 .img.ember {
-  background-image: url(/images/sources/ember.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/ember.svg);
  background-color: transparent !important;
 }

 .img.express {
-  mask-image: url(/images/sources/express.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/express.svg);
 }

 .img.extension {
-  mask-image: url(/images/sources/extension.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/extension.svg);
 }

 .img.immutable {
-  mask-image: url(/images/sources/immutable.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/immutable.svg);
 }

 .img.javascript {
-  mask-image: url(/images/sources/javascript.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/javascript.svg);
  mask-size: 14px 14px;
 }

 .img.jquery {
-  mask-image: url(/images/sources/jquery.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/jquery.svg);
 }

 .img.lodash {
-  mask-image: url(/images/sources/lodash.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/lodash.svg);
 }

 .img.marko {
-  background-image: url(/images/sources/marko.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/marko.svg);
  background-color: transparent !important;
 }

 .img.mobx {
-  background-image: url(/images/sources/mobx.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/mobx.svg);
  background-color: transparent !important;
 }

 .img.nextjs {
-  background-image: url(/images/sources/nextjs.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/nextjs.svg);
  background-color: transparent !important;
 }

 .img.node {
-  background-image: url(/images/sources/node.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/node.svg);
  background-color: transparent !important;
 }

 .img.nuxtjs {
-  background-image: url(/images/sources/nuxtjs.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/nuxtjs.svg);
  background-color: transparent !important;
 }

 .img.preact {
-  background-image: url(/images/sources/preact.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/preact.svg);
  background-color: transparent !important;
 }

 .img.pug {
-  background-image: url(/images/sources/pug.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/pug.svg);
  background-color: transparent !important;
 }

 .img.react {
-  mask-image: url(/images/sources/react.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/react.svg);
  background-color: var(--theme-highlight-bluegrey);
 }

 .img.redux {
-  mask-image: url(/images/sources/redux.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/redux.svg);
 }

 .img.rxjs {
-  background-image: url(/images/sources/rxjs.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/rxjs.svg);
  background-color: transparent !important;
 }

 .img.sencha-extjs {
-  background-image: url(/images/sources/sencha-extjs.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/sencha-extjs.svg);
  background-color: transparent !important;
 }

 .img.typescript {
-  mask-image: url(/images/sources/typescript.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/typescript.svg);
 }

 .img.underscore {
-  mask-image: url(/images/sources/underscore.svg);
+  mask-image: url(resource://devtools/client/debugger/new/images/sources/underscore.svg);
 }

 /* We use both 'Vue' and 'VueJS' when identifying frameworks */
 .img.vue,
 .img.vuejs {
-  background-image: url(/images/sources/vuejs.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/vuejs.svg);
  background-color: transparent !important;
 }

 .img.webpack {
-  background-image: url(/images/sources/webpack.svg);
+  background-image: url(resource://devtools/client/debugger/new/images/sources/webpack.svg);
  background-color: transparent !important;
 }
--- a/devtools/client/debugger/new/src/components/shared/moz.build
+++ b/devtools/client/debugger/new/src/components/shared/moz.build
@ -22,3 +22,20 @@ CompiledModules(
    'SourceIcon.js',
    'Svg.js',
 )
+
+DevToolsModules(
+    'AccessibleImage.css',
+    'Accordion.css',
+    'Badge.css',
+    'BracketArrow.css',
+    'Dropdown.css',
+    'ManagedTree.css',
+    'menu.css',
+    'Modal.css',
+    'Popover.css',
+    'PreviewFunction.css',
+    'reps.css',
+    'ResultList.css',
+    'SearchInput.css',
+    'SourceIcon.css',
+)
--- a/devtools/client/debugger/new/src/debugger.css
+++ b/devtools/client/debugger/new/src/debugger.css
@ -0,0 +1,51 @@
+@import url("./components/variables.css");
+
+@import url("./components/A11yIntention.css");
+@import url("./components/App.css");
+
+@import url("./components/shared/AccessibleImage.css");
+@import url("./components/shared/Accordion.css");
+@import url("./components/shared/Badge.css");
+@import url("./components/shared/BracketArrow.css");
+@import url("./components/shared/Button/styles/CloseButton.css");
+@import url("./components/shared/Button/styles/CommandBarButton.css");
+@import url("./components/shared/Button/styles/PaneToggleButton.css");
+@import url("./components/shared/Dropdown.css");
+@import url("./components/shared/ManagedTree.css");
+@import url("./components/shared/menu.css");
+@import url("./components/shared/Modal.css");
+@import url("./components/shared/Popover.css");
+@import url("./components/shared/PreviewFunction.css");
+@import url("./components/shared/reps.css");
+@import url("./components/shared/ResultList.css");
+@import url("./components/shared/SearchInput.css");
+@import url("./components/shared/SourceIcon.css");
+
+@import url("./components/Editor/Breakpoints.css");
+@import url("./components/Editor/ConditionalPanel.css");
+@import url("./components/Editor/Editor.css");
+@import url("./components/Editor/Footer.css");
+@import url("./components/Editor/Highlight.css");
+@import url("./components/Editor/Preview.css");
+@import url("./components/Editor/Preview/Popup.css");
+@import url("./components/Editor/SearchBar.css");
+@import url("./components/Editor/Tabs.css");
+@import url("./components/PrimaryPanes/Outline.css");
+@import url("./components/PrimaryPanes/OutlineFilter.css");
+@import url("./components/PrimaryPanes/Sources.css");
+@import url("./components/ProjectSearch.css");
+@import url("./components/QuickOpenModal.css");
+@import url("./components/SecondaryPanes/Breakpoints/Breakpoints.css");
+@import url("./components/SecondaryPanes/CommandBar.css");
+@import url("./components/SecondaryPanes/EventListeners.css");
+@import url("./components/SecondaryPanes/Expressions.css");
+@import url("./components/SecondaryPanes/Frames/Frames.css");
+@import url("./components/SecondaryPanes/Frames/Group.css");
+@import url("./components/SecondaryPanes/Frames/WhyPaused.css");
+@import url("./components/SecondaryPanes/Scopes.css");
+@import url("./components/SecondaryPanes/SecondaryPanes.css");
+@import url("./components/SecondaryPanes/Workers.css");
+@import url("./components/SecondaryPanes/XHRBreakpoints.css");
+@import url("./components/ShortcutsModal.css");
+@import url("./components/WelcomeBox.css");
+@import url("./utils/editor/source-editor.css");
--- a/devtools/client/debugger/new/src/moz.build
+++ b/devtools/client/debugger/new/src/moz.build
@ -18,3 +18,7 @@ CompiledModules(
    'main.js',
    'vendors.js',
 )
+
+DevToolsModules(
+    'debugger.css',
+)
--- a/devtools/client/debugger/new/src/utils/editor/moz.build
+++ b/devtools/client/debugger/new/src/utils/editor/moz.build
@ -17,3 +17,7 @@ CompiledModules(
    'source-search.js',
    'token-events.js',
 )
+
+DevToolsModules(
+    'source-editor.css',
+)
--- a/devtools/client/debugger/new/webpack.config.js
+++ b/devtools/client/debugger/new/webpack.config.js
@ -26,9 +26,6 @@ const webpackConfig = {
  entry: {
    // We always generate the debugger bundle, but we will only copy the CSS
    // artifact over to mozilla-central.
-    debugger: getEntry(
-      isProduction ? "src/main.js" : "src/main.development.js"
-    ),
    "parser-worker": getEntry("src/workers/parser/worker.js"),
    "pretty-print-worker": getEntry("src/workers/pretty-print/worker.js"),
    "search-worker": getEntry("src/workers/search/worker.js"),
@ -58,6 +55,8 @@ if (isProduction) {
  // compatible with the DevTools Loader.
  webpackConfig.entry.vendors = getEntry("src/vendors.js");
  webpackConfig.entry.reps = getEntry("packages/devtools-reps/src/index.js");
+} else {
+  webpackConfig.entry.debugger = getEntry("src/main.development.js");
 }

 const envConfig = getConfig();