Backed out changeset 5ba65c3ad1ff (bug 1496400) for failing devtools' browser_parsable_css.js. CLOSED TREE
authorSebastian Hengst <archaeopteryx@coole-files.de>
Fri, 19 Oct 2018 17:17:05 +0300
changeset 497931 5a25082188fdf172bcfbf143087c5db62a16c714
parent 497930 8b9c8d77185a1eafcf79046782d4ee6c47d84f1d
child 497932 9a0a97d16ecc59647ce9c5f856a88e5e2a13ce2d
push id10016
push userrgurzau@mozilla.com
push dateMon, 22 Oct 2018 13:58:55 +0000
treeherdermozilla-beta@848cf6354160 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1496400
milestone64.0a1
backs out5ba65c3ad1ffc76c31dcfda165b87afc1269b415
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Backed out changeset 5ba65c3ad1ff (bug 1496400) for failing devtools' browser_parsable_css.js. CLOSED TREE
devtools/client/aboutdebugging-new/index.html
devtools/client/aboutdebugging-new/src/base.css
devtools/client/aboutdebugging-new/src/components/App.css
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js
devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAction.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css
devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
devtools/client/aboutdebugging-new/src/moz.build
--- a/devtools/client/aboutdebugging-new/index.html
+++ b/devtools/client/aboutdebugging-new/index.html
@@ -1,14 +1,15 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
+    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" type="text/css"/>
     <link rel="stylesheet" href="chrome://devtools/content/aboutdebugging-new/aboutdebugging.css"/>
     <script type="application/javascript" src="resource://devtools/client/aboutdebugging-new/initializer.js"></script>
   </head>
   <body>
     <div id="mount"></div>
   </body>
 </html>
deleted file mode 100644
--- a/devtools/client/aboutdebugging-new/src/base.css
+++ /dev/null
@@ -1,250 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-:root {
-  /* Colors from common.css */
-  --bg-color: #f9f9fa; /* --in-content-background-color */
-  --text-color: #0c0c0d; /* --in-content-text-color */
-
-  --border-color: #d7d7db; /* --in-content-border-color */
-
-  --box-background: #fff;
-  --box-background-hover: #ebebeb;
-  --box-border-color: #d7d7db;
-
-  --category-background-hover: rgba(12,12,13,0.1);
-  --category-text: rgba(12,12,13);
-  --category-text-selected: #0a84ff;
-
-  --link-color: #0a8dff;
-  --link-color-active: #003eaa;
-  --link-color-hover: #0060df;
-
-  /* Colors from Photon */
-  --success-50: #30e60b;
-  --warning-50: #ffe900;
-  --error-50: #ff0039;
-  --highlight-50: #0a84ff;
-  --grey-30: #d7d7db; /* for ui, no special semantic */
-
-  /* Global layout vars */
-  --page-width: 664px;
-  --base-distance: 4px;
-
-  /* Global styles */
-  --base-font-style: message-box;
-  --base-font-size: 15px; /* root font of 11px * 1.36em = 15px */
-  --base-line-height: 1.8;
-  --micro-font-size: 11px;
-
-  /*
-  * Variables particular to about:debugging
-  */
-  --alt-heading-icon-size: calc(var(--base-distance) * 6);
-  --alt-heading-icon-gap: var(--base-distance);
-}
-
-/*
-* Reset some tags
-*/
-
-html {
-  font: var(--base-font-style);
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-color);
-  font-size: var(--base-font-size);
-  background: var(--bg-color);
-}
-
-dd {
-  margin: 0;
-  padding: 0;
-}
-
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-a {
-  color: var(--link-color);
-  text-decoration: none;
-}
-a:hover {
-  color: var(--link-color-hover);
-}
-a:active {
-  color: var(--link-color-active);
-}
-
-
-/*
-* Utils
-*/
-
-/* text that needs to be cut with … */
-.ellipsis-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/*
-* Typography
-*/
-
-/* Main style for heading (i.e. h1) */
-.main-heading {
-  font-size: 2.5em;
-  font-weight: lighter;
-  line-height: 1.2;
-  color: var(--in-content-text-color);
-  margin: 0;
-  margin-bottom: .5em;
-}
-
-/* Main style for a subheading (i.e. h2) */
-.main-subheading {
-  line-height: 1.4em;
-  font-weight: 600;
-}
-
-/* Alternative style for a heading (i.e. h1) */
-.alt-heading {
-  font-weight: 300;
-  font-size: 1.46em;
-  line-height: 1.2; /* odd value - from common.inc.css */
-
-  margin-block-start: 0;
-  margin-block-end: calc(var(--base-distance) * 4);
-}
-
-/* Alternative style for a subheading (i.e. h2). It features an icon */
-/* +--------+-------------+
-*  | [Icon] | Lorem ipsum |
-*  +--------+-------------+
-*/
-.alt-subheading {
-  margin-block-start: calc(var(--base-distance) * 4);
-  font-weight: 600;
-  font-size: 1.14em;
-  line-height: 1.4em; /* odd value - from common.inc.css */
-
-  display: grid;
-  grid-template-columns: var(--alt-heading-icon-size) 1fr;
-  grid-column-gap: var(--alt-heading-icon-gap);
-  align-items: center;
-}
-
-.alt-subheading__icon {
-  width: 100%;
-  fill: currentColor;
-  -moz-context-properties: fill;
-}
-
-
-/*
-* Layout elements
-*/
-
-/* for horizontal rules / separators */
-.separator {
-  border-style: solid none none none;
-  border-color: var(--border-color);
-}
-
-/* adds breathing space to the separator */
-.separator--breathe {
-  margin: calc(var(--base-distance) * 4) 0;
-}
-
-/* a series of button-like elements, layed out horizontally */
-.toolbar {
-  display: flex;
-  column-gap: var(--base-distance);
-}
-
-/*
-Form controls
-*/
-.default-button, .default-input {
-  box-sizing: border-box;
-  font-size: 1em;
-}
-
-/* standard, normal button */
-.default-button, .default-select {
-  -moz-appearance: none;
-  font-size: 1em;
-  color: var(--text-color);
-  background-color: var(--page-background);
-
-  margin: 0;
-  height: calc(var(--base-distance) * 8); /* Note: this is from Photon, not common.css */
-  padding-inline-start: calc(var(--base-distance) * 5);
-  padding-inline-end: calc(var(--base-distance) * 5);
-
-  border: 1px solid var(--box-border-color);
-  border-radius: calc(var(--base-distance) / 2);
-}
-
-.default-button:enabled:hover {
-  background: var(--box-background-hover)
-}
-
-/* smaller size for a default button */
-.default-button--micro {
-  padding-inline-start: calc(2 * var(--base-distance));
-  padding-inline-end: calc(2 * var(--base-distance));
-  font-size: var(--micro-font-size);
-  height: calc(var(--base-distance) * 6);
-}
-
-/* standard inputs */
-.default-input {
-  line-height: unset;
-  padding: 0 calc(var(--base-distance) * 2);
-  height: 100%;
-
-  border: 1px solid var(--box-border-color);
-  border-radius: 2px;
-  color: var(--text-color);
-  background-color: var(--box-background);
-}
-
-/*
-* Other UI components
-*/
-
-/*
-* A small, colored badge.
-* NOTE: styles borrowed from Photon's micro buttons (there aren't badges)
-*/
-.badge {
-  font-size: var(--micro-font-size);
-  background: var(--grey-30);
-  border-radius: calc(var(--base-distance) / 2);
-  padding: var(--base-distance) calc(2 * var(--base-distance));
-}
-
-.badge--info {
-  background: var(--highlight-50);
-}
-
-.badge--success {
-  background: var(--success-50);
-}
-
-.badge--warning {
-  background: var(--yellow-50);
-}
-
-.badge--error {
-  background: var(--error-50);
-}
--- a/devtools/client/aboutdebugging-new/src/components/App.css
+++ b/devtools/client/aboutdebugging-new/src/components/App.css
@@ -48,12 +48,43 @@
   /* we want to scroll only the main content, not the sidebar */
   overflow-y: auto;
 }
 
 .page {
   width: var(--page-width);
 }
 
+.page__title {
+  /* from common */
+  font-weight: 300;
+  font-size: 1.46em;
+  line-height: 1.3;
+
+  margin-block-end: calc(var(--base-distance) * 4);
+}
+
 .page__section {
+  /* from common */
   margin-block-end: calc(var(--base-distance) * 12);
-  --section-inline-margin: calc(var(--alt-heading-icon-size) + var(--alt-heading-icon-gap));
+
+  --icon-size: calc(var(--base-distance) * 6);
+  --icon-gap: var(--base-distance);
+  --section-inline-margin: calc(var(--icon-size) + var(--icon-gap));
 }
+
+.page__section__title {
+  /* from common */
+  margin-block-start: calc(var(--base-distance) * 4);
+  font-weight: 600;
+  font-size: 1.14em;
+
+  display: grid;
+  grid-template-columns: var(--icon-size) 1fr;
+  grid-column-gap: var(--icon-gap);
+  align-items: center;
+}
+
+.page__section__icon {
+  width: 100%;
+  fill: currentColor;
+  -moz-context-properties: fill;
+}
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
@@ -1,15 +1,12 @@
 /* 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/. */
 
- /* NOTE: refactor these two rules into a more generic component if we ever need
-          a main heading with an icon */
-
 .runtime-info {
   align-items: center;
   display: flex;
   margin-block-end: 40px;
   white-space: nowrap;
 }
 
 .runtime-info__icon {
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
@@ -24,17 +24,17 @@ class RuntimeInfo extends PureComponent 
     };
   }
 
   render() {
     const { icon, deviceName, name, version } = this.props;
 
     return dom.h1(
       {
-        className: "main-heading runtime-info",
+        className: "runtime-info",
       },
       dom.img(
         {
           className: "runtime-info__icon",
           src: icon,
         }
       ),
       Localized(
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
@@ -161,34 +161,34 @@ class ConnectPage extends PureComponent 
       },
       ConnectSection(
         {
           className: "connect-page__network",
           icon: GLOBE_ICON_SRC,
           title: "Via Network Location",
         },
         NetworkLocationsList({ dispatch, networkLocations }),
-        dom.hr({ className: "separator separator--breathe" }),
+        dom.hr({ className: "separator" }),
         NetworkLocationsForm({ dispatch }),
       )
     );
   }
 
   render() {
     return dom.article(
       {
         className: "page connect-page js-connect-page",
       },
       Localized(
         {
           id: "about-debugging-connect-title",
         },
         dom.h1(
           {
-            className: "alt-heading",
+            className: "page__title"
           },
           "Connect a Device"
         )
       ),
       this.renderWifi(),
       this.renderUsb(),
       this.renderNetwork(),
     );
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
@@ -20,21 +20,21 @@ class ConnectSection extends PureCompone
 
   render() {
     return dom.section(
       {
         className: `page__section ${this.props.className || ""}`,
       },
       dom.h2(
         {
-          className: "alt-subheading",
+          className: "page__section__title",
         },
         dom.img(
           {
-            className: "alt-subheading__icon",
+            className: "page__section__icon",
             src: this.props.icon,
           }
         ),
         this.props.title
       ),
       this.props.children
     );
   }
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
@@ -48,32 +48,32 @@ class NetworkLocationsForm extends PureC
           {
             htmlFor: "about-debugging-network-locations-host-input",
           },
           "Host",
         )
       ),
       dom.input({
         id: "about-debugging-network-locations-host-input",
-        className: "default-input js-network-form-input",
+        className: "std-input js-network-form-input",
         placeholder: "localhost:6080",
         type: "text",
         value: this.state.value,
         onChange: (e) => {
           const value = e.target.value;
           this.setState({ value });
         },
       }),
       Localized(
         {
           id: "about-debugging-network-locations-add-button",
         },
         dom.button(
           {
-            className: "default-button js-network-form-submit-button",
+            className: "std-button js-network-form-submit-button",
           },
           "Add"
         )
       )
     );
   }
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
@@ -37,17 +37,17 @@ class NetworkLocationsList extends PureC
             location
           ),
           Localized(
             {
               id: "about-debugging-network-locations-remove-button",
             },
             dom.button(
               {
-                className: "default-button js-network-location-remove-button",
+                className: "std-button js-network-location-remove-button",
                 onClick: () => {
                   this.props.dispatch(Actions.removeNetworkLocation(location));
                 },
               },
               "Remove"
             )
           )
         )
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css
@@ -11,26 +11,24 @@
  *  |        || Name                      ||                |
  *  |        |+---------------------------+|                |
  *  |        || Detail                    ||                |
  *  |        |+---------------------------+|                |
  *  +--------+-----------------------------+----------------+
  */
 .debug-target-item {
   display: grid;
-  grid-template-columns: calc(var(--base-distance) * 10) auto max-content;
+  grid-template-columns: 54px auto max-content;
   grid-template-rows: auto auto;
-  grid-row-gap: calc(var(--base-distance) * 5);
-  grid-column-gap: calc(var(--base-distance) * 2);
+  grid-row-gap: 20px;
 }
 
 .debug-target-item__icon {
   height: 36px;
   width: 36px;
-  justify-self: center;
 }
 
 .debug-target-item__info {
   /* so as to ellipsis */
   min-width: 0;
 }
 
 .debug-target-item__info__name {
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
@@ -43,17 +43,17 @@ class DebugTargetPane extends PureCompon
       targets,
     } = this.props;
 
     return dom.section(
       {
         className: "js-debug-target-pane",
       },
       dom.h2(
-        { className: "main-subheading" },
+        {},
         dom.a(
           {
             className: "debug-target-pane__title js-debug-target-pane-title" +
                        (isCollapsed ? " debug-target-pane__title--collapsed" : ""),
             href: "#",
             onClick: e => this.toggleCollapsibility(),
           },
           name,
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js
@@ -32,17 +32,17 @@ class InspectAction extends PureComponen
   render() {
     return Localized(
       {
         id: "about-debugging-debug-target-inspect-button",
       },
       dom.button(
         {
           onClick: e => this.inspect(),
-          className: "default-button",
+          className: "aboutdebugging-button",
         },
         "Inspect"
       )
     );
   }
 }
 
 module.exports = InspectAction;
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js
@@ -56,26 +56,21 @@ class ServiceWorkerAction extends PureCo
       this._renderButton(pushLabel, this.push.bind(this)),
       InspectAction({ dispatch, target }),
     ];
   }
 
   _renderButton(label, onClick) {
     return dom.button(
       {
-        className: "default-button",
+        className: "aboutdebugging-button",
         onClick: e => onClick(),
       },
       label,
     );
   }
 
   render() {
-    return dom.div(
-      {
-        className: "toolbar",
-      },
-      this._renderAction()
-    );
+    return dom.div({}, this._renderAction());
   }
 }
 
 module.exports = FluentReact.withLocalization(ServiceWorkerAction);
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAction.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAction.js
@@ -35,39 +35,37 @@ class TemporaryExtensionAction extends P
     const { dispatch, target } = this.props;
     dispatch(Actions.removeTemporaryExtension(target.id));
   }
 
   render() {
     const { dispatch, target } = this.props;
 
     return dom.div(
-      {
-        className: "toolbar",
-      },
+      {},
       InspectAction({ dispatch, target }),
       Localized(
         {
           id: "about-debugging-tmp-extension-reload-button",
         },
         dom.button(
           {
-            className: "default-button",
+            className: "aboutdebugging-button",
             onClick: e => this.reload(),
           },
           "Reload",
         )
       ),
       Localized(
         {
           id: "about-debugging-tmp-extension-remove-button",
         },
         dom.button(
           {
-            className: "default-button js-temporary-extension-remove-button",
+            className: "aboutdebugging-button js-temporary-extension-remove-button",
             onClick: e => this.remove(),
           },
           "Remove",
         )
       ),
     );
   }
 }
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
@@ -32,17 +32,17 @@ class TemporaryExtensionInstaller extend
 
   render() {
     return Localized(
       {
         id: "about-debugging-tmp-extension-install-button",
       },
       dom.button(
         {
-          className: "default-button js-temporary-extension-install-button",
+          className: "aboutdebugging-button js-temporary-extension-install-button",
           onClick: e => this.install(),
         },
         "Load Temporary Add-on…"
       )
     );
   }
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css
@@ -12,16 +12,41 @@
  *  +----------------+--------------------+
  *  | detail name dt | detail value dd    |
  *  | (60px )        | (auto)             |
  *  +----------------+--------------------+
  *  | detail name dt | detail value dd    |
  *  +----------------+--------------------+
  *  | detail name dt | detail value dd    |
  *  +----------------+--------------------+
- *  | [status]       |
- *  +----------------+
  */
 .worker-detail {
   display: grid;
-  grid-template-columns: calc(var(--base-distance) * 15) auto;
-  margin-block-start: var(--base-distance);
+  grid-template-columns: 60px auto;
+  margin-block-start: 4px;
 }
+
+/*
+ * worker-detail__status has a ui like badge and the color change by the status.
+ * For now, the background-color of running status is palegreen, stopped is lightgrey
+ * though, might be changed since this is not Photon color.
+ */
+.worker-detail__status {
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  display: inline-block;
+  font-size: var(--worker-status-font-size);
+  margin-block-start: 6px;
+  padding-block-start: 2px;
+  padding-block-end: 2px;
+  text-align: center;
+}
+
+.worker-detail__status--running {
+  border-color: limegreen;
+  background-color: palegreen;
+}
+
+.worker-detail__status--stopped {
+  border-color: grey;
+  background-color: lightgrey;
+}
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
@@ -64,28 +64,23 @@ class WorkerDetail extends PureComponent
       ),
     ];
   }
 
   renderStatus() {
     const status = this.props.target.details.status.toLowerCase();
     const ftlId = this.getStatusFtlId(status);
 
-    return dom.dt(
-      {},
-      Localized(
-        {
-          id: ftlId,
+    return Localized(
+      {
+          className: `worker-detail__status worker-detail__status--${ status }`,
+      },
+      dom.div(
         },
-        dom.span(
-          {
-            className: `badge ${status === "running" ? "badge--success" : ""}`,
-          },
-          status
-        )
+        status
       )
     );
   }
 
   render() {
     const { fetch, scope, status } = this.props.target.details;
 
     return dom.dl(
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -117,17 +117,17 @@ class Sidebar extends PureComponent {
           SidebarFixedItem({
             id: PAGES.CONNECT,
             dispatch,
             icon: CONNECT_ICON,
             isSelected: PAGES.CONNECT === selectedPage,
             name: "Connect",
           })
         ),
-        dom.hr({ className: "separator" }),
+        dom.hr(),
         this.renderAdbAddonStatus(),
         this.renderDevices()
       )
     );
   }
 }
 
 module.exports = Sidebar;
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css
@@ -1,16 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .sidebar-item {
-  --sidebar-text-color: var(--category-text);
-  --sidebar-selected-color: var(--category-text-selected);
-  --sidebar-background-hover: var(--category-background-hover);
+  /* Import css variables from common.css */
+  --sidebar-text-color: var(--in-content-category-text);
+  --sidebar-selected-color: var(--in-content-category-text-selected);
+  --sidebar-background-hover: var(--in-content-category-background-hover);
 }
 
 .sidebar-item {
   color: var(--sidebar-text-color);
   border-radius: 2px;
   padding-inline-end: 10px;
   padding-inline-start: 10px;
   transition: background-color 150ms;
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
@@ -35,17 +35,17 @@ class SidebarRuntimeItem extends PureCom
 
   renderConnectButton() {
     return Localized(
       {
         id: "about-debugging-sidebar-item-connect-button",
       },
       dom.button(
         {
-          className: "default-button default-button--micro",
+          className: "sidebar-item__connect-button",
           onClick: () => {
             const { dispatch, runtimeId } = this.props;
             dispatch(Actions.connectRuntime(runtimeId));
           },
         },
         "Connect"
       )
     );
--- a/devtools/client/aboutdebugging-new/src/moz.build
+++ b/devtools/client/aboutdebugging-new/src/moz.build
@@ -6,13 +6,12 @@ DIRS += [
     'actions',
     'components',
     'middleware',
     'modules',
     'reducers',
 ]
 
 DevToolsModules(
-    'base.css',
     'constants.js',
     'create-store.js',
     'types.js',
 )