Bug 1462236 - Application panel empty screen polish;r=ladybenko
MozReview-Commit-ID: ENd72iKrw8U
--- a/devtools/client/application/src/components/App.css
+++ b/devtools/client/application/src/components/App.css
@@ -51,15 +51,13 @@ a.disabled:visited {
height: 100vh;
padding: 0 2rem;
display: grid;
}
.application--empty {
align-items: center;
justify-content: center;
- font-size: 1.3rem;
- line-height: 1.25;
}
.application:not(.application--empty) {
grid-template-rows: 1fr auto;
}
\ No newline at end of file
--- a/devtools/client/application/src/components/WorkerListEmpty.css
+++ b/devtools/client/application/src/components/WorkerListEmpty.css
@@ -1,14 +1,21 @@
/* 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-list-empty {
max-width: 65rem;
+ font-size: 1.2rem;
+ line-height: 1.25;
+ color: var(--theme-toolbar-color);
+}
+
+.worker-list-empty__title {
+ font-size: 1.4rem;
}
.worker-list-empty__tips {
margin-inline-start: 2rem;
}
.worker-list-empty__tips__item {
margin-block-start: 0.5rem;
--- a/devtools/client/application/src/components/WorkerListEmpty.js
+++ b/devtools/client/application/src/components/WorkerListEmpty.js
@@ -36,48 +36,48 @@ class WorkerListEmpty extends Component
openDocumentation() {
this.props.serviceContainer.openWebLink(DOC_URL);
}
render() {
return article(
{ className: "worker-list-empty" },
h1(
- {},
+ { className: "worker-list-empty__title" },
"You need to register a Service Worker to inspect it here.",
a(
{ className: "external-link", onClick: () => this.openDocumentation() },
"Learn More"
)
),
p(
{},
`If the current page should have a service worker, ` +
`here are some things you can try:`,
),
ul(
- { className: "worker-list-empty__tips"},
+ { className: "worker-list-empty__tips" },
li(
- { className: "worker-list-empty__tips__item"},
+ { className: "worker-list-empty__tips__item" },
"Look for errors in the Console.",
a(
{ className: "link", onClick: () => this.switchToConsole() },
"Open the Console"
)
),
li(
- { className: "worker-list-empty__tips__item"},
+ { className: "worker-list-empty__tips__item" },
"Step through you Service Worker registration and look for exceptions.",
a(
{ className: "link", onClick: () => this.switchToDebugger()},
"Open the Debugger"
)
),
li(
- { className: "worker-list-empty__tips__item"},
+ { className: "worker-list-empty__tips__item" },
"Inspect Service Workers from other domains.",
a(
{ className: "external-link", onClick: () => this.openAboutDebugging() },
"Open about:debugging"
)
)
)
);