--- 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',
)