Bug 1496400 - Remove common.css r=jdescottes,daisuke
authorBelén Albeza <balbeza@mozilla.com>
Mon, 22 Oct 2018 13:53:31 +0000
changeset 442324 ad022c9aec53ad84e86d0164e1c3f100ae5449b1
parent 442323 527ac367e301ec8b55b4b226ceeca47cb87d130f
child 442325 3c04e96db3e6b2e13c7a46c35e98b6d24e2304ae
push id71445
push userbalbeza@mozilla.com
push dateMon, 22 Oct 2018 13:54:37 +0000
treeherderautoland@ad022c9aec53 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes, daisuke
bugs1496400
milestone64.0a1
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
Bug 1496400 - Remove common.css r=jdescottes,daisuke - Removed common.css - Re-ordered the loading of stylesheets, so components sheets are loaded _after_ the more generic rules - Refactored some of our components into more generic ones. Note that a few styles do not match exactly `common.css` (for instance, buttons' `min-height` and `min-width`), in favor of Photon. This might change later depending on the UX guidance we'll get eventually. Differential Revision: https://phabricator.services.mozilla.com/D8970
devtools/client/aboutdebugging-new/aboutdebugging.css
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/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -1,97 +1,28 @@
 /* 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 "chrome://global/skin/in-content/common.css";
+/*
+* Global styles
+*/
 @import "resource://devtools/client/themes/variables.css";
+@import "resource://devtools/client/aboutdebugging-new/src/base.css";
 
+/*
+* Components
+*/
 @import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css";
-
-:root {
-  /* Import css variables from common.css */
-  --text-color: var(--in-content-page-color);
-
-  /* */
-  /* Variables with values from common.css, which are hardcoded there */
-  /* */
-
-  /* global layout vars */
-  --page-width: 664px;
-  --base-distance: 4px;
-
-  /* global styles */
-  --base-font-size: 15px; /* root font of 11px * 1.36em = 15px */
-  --base-line-height: 1.8;
-  --button-form-width: 150px;
-  --input-hpadding: 5px;
-}
-
-html, body {
-  margin: 0;
-  padding: 0;
-  color: var(--text-color);
-}
-
-dd {
-  margin: 0;
-  padding: 0;
-}
-
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.ellipsis-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.separator {
-  margin: calc(var(--base-distance) * 4) 0;
-}
-
-.std-button {
-  box-sizing: border-box;
-  margin: 0;
-  min-width: var(--button-form-width);
-}
-
-.std-input,
-/* NOTE: this is here to override the rules in common.css, which have higher
-specificity. Once we stop importing that stylesheet, this extra selector can
-be removed. */
-.std-input[type=text] {
-  box-sizing: border-box;
-  line-height: unset;
-  padding: 0 var(--input-hpadding);
-  height: 100%;
-}
-
-/* TODO: check these values */
-.aboutdebugging-button {
-  height: 36px;
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 4px;
-  margin-inline-end: 4px;
-  min-width: 100px;
-  padding-inline-start: 20px;
-  padding-inline-end: 20px;
-}
--- a/devtools/client/aboutdebugging-new/index.html
+++ b/devtools/client/aboutdebugging-new/index.html
@@ -1,15 +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/. -->
 <!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>
copy from devtools/client/aboutdebugging-new/aboutdebugging.css
copy to devtools/client/aboutdebugging-new/src/base.css
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/src/base.css
@@ -1,97 +1,250 @@
 /* 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 "chrome://global/skin/in-content/common.css";
-@import "resource://devtools/client/themes/variables.css";
+: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;
 
-@import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css";
-@import "resource://devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.css";
+  --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;
 
-:root {
-  /* Import css variables from common.css */
-  --text-color: var(--in-content-page-color);
+  /* Colors from Photon */
+  --success-50: #30e60b;
+  --warning-50: #ffe900;
+  --error-50: #ff0039;
+  --highlight-50: #0a84ff;
+  --grey-30: #d7d7db; /* for ui, no special semantic */
 
-  /* */
-  /* Variables with values from common.css, which are hardcoded there */
-  /* */
-
-  /* global layout vars */
+  /* Global layout vars */
   --page-width: 664px;
   --base-distance: 4px;
 
-  /* global styles */
+  /* Global styles */
+  --base-font-style: message-box;
   --base-font-size: 15px; /* root font of 11px * 1.36em = 15px */
   --base-line-height: 1.8;
-  --button-form-width: 150px;
-  --input-hpadding: 5px;
+  --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);
 }
 
-html, body {
+/*
+* 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;
 }
 
-.std-button {
+/* 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;
-  min-width: var(--button-form-width);
+  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);
 }
 
-.std-input,
-/* NOTE: this is here to override the rules in common.css, which have higher
-specificity. Once we stop importing that stylesheet, this extra selector can
-be removed. */
-.std-input[type=text] {
-  box-sizing: border-box;
+/* standard inputs */
+.default-input {
   line-height: unset;
-  padding: 0 var(--input-hpadding);
+  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);
 }
 
-/* TODO: check these values */
-.aboutdebugging-button {
-  height: 36px;
-  margin-block-start: 0;
-  margin-block-end: 0;
-  margin-inline-start: 4px;
-  margin-inline-end: 4px;
-  min-width: 100px;
-  padding-inline-start: 20px;
-  padding-inline-end: 20px;
+/*
+* 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(--warning-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,43 +48,12 @@
   /* 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);
-
-  --icon-size: calc(var(--base-distance) * 6);
-  --icon-gap: var(--base-distance);
-  --section-inline-margin: calc(var(--icon-size) + var(--icon-gap));
+  --section-inline-margin: calc(var(--alt-heading-icon-size) + var(--alt-heading-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,12 +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/. */
 
+ /* 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: "runtime-info",
+        className: "main-heading 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" }),
+        dom.hr({ className: "separator separator--breathe" }),
         NetworkLocationsForm({ dispatch }),
       )
     );
   }
 
   render() {
     return dom.article(
       {
         className: "page connect-page js-connect-page",
       },
       Localized(
         {
           id: "about-debugging-connect-title",
         },
         dom.h1(
           {
-            className: "page__title",
+            className: "alt-heading",
           },
           "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,22 +20,22 @@ class ConnectSection extends PureCompone
 
   render() {
     return dom.section(
       {
         className: `page__section ${this.props.className || ""}`,
       },
       dom.h2(
         {
-          className: "page__section__title",
+          className: "alt-subheading",
         },
         dom.img(
           {
-            className: "page__section__icon",
-            src: this.props.icon,
+            className: "alt-subheading__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: "std-input js-network-form-input",
+        className: "default-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: "std-button js-network-form-submit-button",
+            className: "default-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: "std-button js-network-location-remove-button",
+                className: "default-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,24 +11,26 @@
  *  |        || Name                      ||                |
  *  |        |+---------------------------+|                |
  *  |        || Detail                    ||                |
  *  |        |+---------------------------+|                |
  *  +--------+-----------------------------+----------------+
  */
 .debug-target-item {
   display: grid;
-  grid-template-columns: 54px auto max-content;
+  grid-template-columns: calc(var(--base-distance) * 10) auto max-content;
   grid-template-rows: auto auto;
-  grid-row-gap: 20px;
+  grid-row-gap: calc(var(--base-distance) * 5);
+  grid-column-gap: calc(var(--base-distance) * 2);
 }
 
 .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: "aboutdebugging-button",
+          className: "default-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,21 +56,26 @@ class ServiceWorkerAction extends PureCo
       this._renderButton(pushLabel, this.push.bind(this)),
       InspectAction({ dispatch, target }),
     ];
   }
 
   _renderButton(label, onClick) {
     return dom.button(
       {
-        className: "aboutdebugging-button",
+        className: "default-button",
         onClick: e => onClick(),
       },
       label,
     );
   }
 
   render() {
-    return dom.div({}, this._renderAction());
+    return dom.div(
+      {
+        className: "toolbar"
+      },
+      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,37 +35,39 @@ 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: "aboutdebugging-button",
+            className: "default-button",
             onClick: e => this.reload(),
           },
           "Reload",
         )
       ),
       Localized(
         {
           id: "about-debugging-tmp-extension-remove-button",
         },
         dom.button(
           {
-            className: "aboutdebugging-button js-temporary-extension-remove-button",
+            className: "default-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: "aboutdebugging-button js-temporary-extension-install-button",
+          className: "default-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
@@ -1,52 +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/. */
 
-.worker-detail {
-  --worker-status-font-size: 10px;
-}
-
 /*
  * The current layout of worker detail is
  *
  *  +----------------+--------------------+
  *  | 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: 60px auto;
-  margin-block-start: 4px;
+  grid-template-columns: calc(var(--base-distance) * 15) auto;
+  margin-block-start: var(--base-distance);
 }
-
-/*
- * 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,25 +64,28 @@ class WorkerDetail extends PureComponent
       ),
     ];
   }
 
   renderStatus() {
     const status = this.props.target.details.status.toLowerCase();
     const ftlId = this.getStatusFtlId(status);
 
-    return Localized(
-      {
-        id: ftlId,
-      },
-      dom.div(
+    return dom.dt(
+      {},
+      Localized(
         {
-          className: `worker-detail__status worker-detail__status--${ status }`,
+          id: ftlId
         },
-        status
+        dom.span(
+          {
+            className: `badge ${status === "running" ? "badge--success" : ""}`,
+          },
+          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(),
+        dom.hr({ className: "separator" }),
         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,17 +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/. */
 
 .sidebar-item {
-  /* 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-text-color: var(--category-text);
+  --sidebar-selected-color: var(--category-text-selected);
+  --sidebar-background-hover: var(--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: "sidebar-item__connect-button",
+          className: "default-button default-button--micro",
           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,12 +6,13 @@ DIRS += [
     'actions',
     'components',
     'middleware',
     'modules',
     'reducers',
 ]
 
 DevToolsModules(
+    'base.css',
     'constants.js',
     'create-store.js',
     'types.js',
 )