From 779d0bb4d05ec19a898920c97f6ae1e73adf903c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Fri, 19 Oct 2018 09:23:22 +0000 Subject: [PATCH] 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 --HG-- rename : devtools/client/aboutdebugging-new/aboutdebugging.css => devtools/client/aboutdebugging-new/src/base.css extra : moz-landing-system : lando --- .../aboutdebugging-new/aboutdebugging.css | 84 +----- devtools/client/aboutdebugging-new/index.html | 1 - .../client/aboutdebugging-new/src/base.css | 250 ++++++++++++++++++ .../aboutdebugging-new/src/components/App.css | 33 +-- .../src/components/RuntimeInfo.css | 3 + .../src/components/RuntimeInfo.js | 2 +- .../src/components/connect/ConnectPage.js | 4 +- .../src/components/connect/ConnectSection.js | 4 +- .../connect/NetworkLocationsForm.js | 4 +- .../connect/NetworkLocationsList.js | 2 +- .../debugtarget/DebugTargetItem.css | 6 +- .../components/debugtarget/DebugTargetPane.js | 2 +- .../components/debugtarget/InspectAction.js | 2 +- .../debugtarget/ServiceWorkerAction.js | 9 +- .../debugtarget/TemporaryExtensionAction.js | 8 +- .../TemporaryExtensionInstaller.js | 2 +- .../components/debugtarget/WorkerDetail.css | 33 +-- .../components/debugtarget/WorkerDetail.js | 17 +- .../src/components/sidebar/Sidebar.js | 2 +- .../src/components/sidebar/SidebarItem.css | 7 +- .../components/sidebar/SidebarRuntimeItem.js | 2 +- .../client/aboutdebugging-new/src/moz.build | 1 + 22 files changed, 309 insertions(+), 169 deletions(-) create mode 100644 devtools/client/aboutdebugging-new/src/base.css diff --git a/devtools/client/aboutdebugging-new/aboutdebugging.css b/devtools/client/aboutdebugging-new/aboutdebugging.css index b7fc69c371b2..d2c894504179 100644 --- a/devtools/client/aboutdebugging-new/aboutdebugging.css +++ b/devtools/client/aboutdebugging-new/aboutdebugging.css @@ -2,8 +2,15 @@ * 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"; @@ -19,78 +26,3 @@ @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; -} diff --git a/devtools/client/aboutdebugging-new/index.html b/devtools/client/aboutdebugging-new/index.html index 1ba14526fcbf..ad6df05c0c97 100644 --- a/devtools/client/aboutdebugging-new/index.html +++ b/devtools/client/aboutdebugging-new/index.html @@ -5,7 +5,6 @@ - diff --git a/devtools/client/aboutdebugging-new/src/base.css b/devtools/client/aboutdebugging-new/src/base.css new file mode 100644 index 000000000000..dfabe3e21638 --- /dev/null +++ b/devtools/client/aboutdebugging-new/src/base.css @@ -0,0 +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/. */ + +: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); +} diff --git a/devtools/client/aboutdebugging-new/src/components/App.css b/devtools/client/aboutdebugging-new/src/components/App.css index ed6cc1e253c8..e61481ad800c 100644 --- a/devtools/client/aboutdebugging-new/src/components/App.css +++ b/devtools/client/aboutdebugging-new/src/components/App.css @@ -53,38 +53,7 @@ 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)); -} - -.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; + --section-inline-margin: calc(var(--alt-heading-icon-size) + var(--alt-heading-icon-gap)); } diff --git a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css index 077656f03bd3..9c316b445812 100644 --- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css +++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css @@ -2,6 +2,9 @@ * 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; diff --git a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js index 2d805efaf14d..14665fb9c327 100644 --- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js +++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js @@ -29,7 +29,7 @@ class RuntimeInfo extends PureComponent { return dom.h1( { - className: "runtime-info", + className: "main-heading runtime-info", }, dom.img( { diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js index a2ddff5231fa..873a7cb70ae4 100644 --- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js +++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js @@ -166,7 +166,7 @@ class ConnectPage extends PureComponent { title: "Via Network Location", }, NetworkLocationsList({ dispatch, networkLocations }), - dom.hr({ className: "separator" }), + dom.hr({ className: "separator separator--breathe" }), NetworkLocationsForm({ dispatch }), ) ); @@ -183,7 +183,7 @@ class ConnectPage extends PureComponent { }, dom.h1( { - className: "page__title" + className: "alt-heading" }, "Connect a Device" ) diff --git a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js index a32946c0593e..0061e28599a2 100644 --- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js +++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js @@ -25,11 +25,11 @@ class ConnectSection extends PureComponent { }, dom.h2( { - className: "page__section__title" + className: "alt-subheading" }, dom.img( { - className: "page__section__icon", + className: "alt-subheading__icon", src: this.props.icon } ), diff --git a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js index 0fb4b83a360f..59276f37d14f 100644 --- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js +++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js @@ -53,7 +53,7 @@ class NetworkLocationsForm extends PureComponent { ), 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, @@ -68,7 +68,7 @@ class NetworkLocationsForm extends PureComponent { }, dom.button( { - className: "std-button js-network-form-submit-button" + className: "default-button js-network-form-submit-button" }, "Add" ) diff --git a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js index 4dcf5180d16c..4292d28c5e3b 100644 --- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js +++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js @@ -42,7 +42,7 @@ class NetworkLocationsList extends PureComponent { }, 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)); } diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css index c0ec8523b1fd..423d364ca2ed 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css @@ -16,14 +16,16 @@ */ .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 { diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js index dfa0106ca62d..49e2fa58a522 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js @@ -48,7 +48,7 @@ class DebugTargetPane extends PureComponent { className: "js-debug-target-pane", }, dom.h2( - {}, + { className: "main-subheading" }, dom.a( { className: "debug-target-pane__title js-debug-target-pane-title" + diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js b/devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js index 58ca3b420d6f..bd1b825628fa 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js @@ -37,7 +37,7 @@ class InspectAction extends PureComponent { dom.button( { onClick: e => this.inspect(), - className: "aboutdebugging-button", + className: "default-button", }, "Inspect" ) diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js b/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js index 8e516424e4b3..117f3dc29716 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js @@ -61,7 +61,7 @@ class ServiceWorkerAction extends PureComponent { _renderButton(label, onClick) { return dom.button( { - className: "aboutdebugging-button", + className: "default-button", onClick: e => onClick(), }, label, @@ -69,7 +69,12 @@ class ServiceWorkerAction extends PureComponent { } render() { - return dom.div({}, this._renderAction()); + return dom.div( + { + className: "toolbar" + }, + this._renderAction() + ); } } diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAction.js b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAction.js index 122eed03e5b9..0ee8084be9b1 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAction.js +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAction.js @@ -40,7 +40,9 @@ class TemporaryExtensionAction extends PureComponent { const { dispatch, target } = this.props; return dom.div( - {}, + { + className: "toolbar", + }, InspectAction({ dispatch, target }), Localized( { @@ -48,7 +50,7 @@ class TemporaryExtensionAction extends PureComponent { }, dom.button( { - className: "aboutdebugging-button", + className: "default-button", onClick: e => this.reload() }, "Reload", @@ -60,7 +62,7 @@ class TemporaryExtensionAction extends PureComponent { }, dom.button( { - className: "aboutdebugging-button js-temporary-extension-remove-button", + className: "default-button js-temporary-extension-remove-button", onClick: e => this.remove() }, "Remove", diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js index fbf40d57e857..53118e43e224 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js @@ -37,7 +37,7 @@ class TemporaryExtensionInstaller extends PureComponent { }, 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…" diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css index 9543049264f2..06eefba0adeb 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.css @@ -17,36 +17,11 @@ * +----------------+--------------------+ * | detail name dt | detail value dd | * +----------------+--------------------+ + * | [status] | + * +----------------+ */ .worker-detail { display: grid; - 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; + grid-template-columns: calc(var(--base-distance) * 15) auto; + margin-block-start: var(--base-distance); } diff --git a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js index d225d05132be..685793da04ca 100644 --- a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js +++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js @@ -69,15 +69,18 @@ class WorkerDetail extends PureComponent { 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 + ) ) ); } diff --git a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js index b39c1aab4c06..bf318de44db6 100644 --- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js +++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js @@ -122,7 +122,7 @@ class Sidebar extends PureComponent { name: "Connect", }) ), - dom.hr(), + dom.hr({ className: "separator" }), this.renderAdbAddonStatus(), this.renderDevices() ) diff --git a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css index 60a121a6670e..8e70b97e8ca0 100644 --- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css +++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.css @@ -3,10 +3,9 @@ * 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 { diff --git a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js index 8dad98715c40..e46ec79e70bb 100644 --- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js +++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js @@ -40,7 +40,7 @@ class SidebarRuntimeItem extends PureComponent { }, dom.button( { - className: "sidebar-item__connect-button", + className: "default-button default-button--micro", onClick: () => { const { dispatch, runtimeId } = this.props; dispatch(Actions.connectRuntime(runtimeId)); diff --git a/devtools/client/aboutdebugging-new/src/moz.build b/devtools/client/aboutdebugging-new/src/moz.build index 374e37dc3ea6..5bf11cc46ed4 100644 --- a/devtools/client/aboutdebugging-new/src/moz.build +++ b/devtools/client/aboutdebugging-new/src/moz.build @@ -11,6 +11,7 @@ DIRS += [ ] DevToolsModules( + 'base.css', 'constants.js', 'create-store.js', 'types.js',