Bug 1496400 - Remove common.css r=jdescottes,daisuke
authorBelén Albeza <balbeza@mozilla.com>
Mon, 22 Oct 2018 13:53:31 +0000
changeset 490680 ad022c9aec53ad84e86d0164e1c3f100ae5449b1
parent 490679 527ac367e301ec8b55b4b226ceeca47cb87d130f
child 490681 3c04e96db3e6b2e13c7a46c35e98b6d24e2304ae
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersjdescottes, daisuke
bugs1496400
milestone64.0a1
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',
 )