mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-19 00:05:36 +00:00
Bug 1557699 - Improve CSS base, r=ladybenko
Added variables in base.css, reduced specificity Differential Revision: https://phabricator.services.mozilla.com/D35513 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
c440961ac6
commit
05e788acf7
@ -2,11 +2,23 @@
|
||||
* 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/. */
|
||||
|
||||
/*
|
||||
* Global styles
|
||||
*/
|
||||
@import "resource://devtools/client/application/src/base.css";
|
||||
|
||||
/*
|
||||
* Components
|
||||
*/
|
||||
@import "resource://devtools/client/application/src/components/App.css";
|
||||
@import "resource://devtools/client/application/src/components/Worker.css";
|
||||
@import "resource://devtools/client/application/src/components/WorkerList.css";
|
||||
@import "resource://devtools/client/application/src/components/WorkerListEmpty.css";
|
||||
|
||||
|
||||
/*
|
||||
* Reset
|
||||
*/
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
61
devtools/client/application/src/base.css
Normal file
61
devtools/client/application/src/base.css
Normal file
@ -0,0 +1,61 @@
|
||||
/* 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 {
|
||||
/* Typography from Photon */
|
||||
/* See https://firefox-dev.tools/photon/visuals/typography.html */
|
||||
--body-10-font-size: 13px;
|
||||
--body-10-font-weight: 400;
|
||||
--body-20-font-size: 15px;
|
||||
--body-20-font-weight: 400;
|
||||
--body-20-font-weight-bold: 700;
|
||||
--title-20-font-size: 17px;
|
||||
--title-20-font-weight: 600;
|
||||
--title-30-font-size: 22px;
|
||||
--title-30-font-weight: 300;
|
||||
|
||||
/* Global styles */
|
||||
--base-font-size: var(--body-10-font-size);
|
||||
--base-font-weight: var(--body-10-font-weight);
|
||||
--base-line-height: 1.8;
|
||||
--list-line-height: 1.25;
|
||||
|
||||
/* Global colours */
|
||||
--bg-color: var(--grey-10);
|
||||
--text-color: var(--grey-90);
|
||||
|
||||
/* Global layout vars */
|
||||
--base-unit: 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Reset some tags
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: var(--base-line-height);
|
||||
}
|
||||
|
||||
ul {
|
||||
line-height: var(--list-line-height);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--theme-highlight-blue);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1,
|
||||
.application--title {
|
||||
font-size: var(--title-30-font-size);
|
||||
font-weight: var(--title-30-font-weight);
|
||||
line-height: var(--base-line-height);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
@ -6,26 +6,10 @@
|
||||
* General styles
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 22px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:visited {
|
||||
color: var(--theme-highlight-blue) !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a.disabled-link,
|
||||
a.disabled-link:hover,
|
||||
a.disabled-link:visited {
|
||||
opacity: 0.5 !important;
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
|
@ -22,9 +22,8 @@
|
||||
width: 100%;
|
||||
grid-column-gap: 0;
|
||||
padding: 1rem 0;
|
||||
|
||||
line-height: 1.5;
|
||||
font-size: 1.2rem;
|
||||
font-size: var(--body-10-font-size);
|
||||
}
|
||||
|
||||
.worker:first-child {
|
||||
@ -73,3 +72,8 @@
|
||||
.worker__data__updated {
|
||||
color: var(--theme-text-color-alt);
|
||||
}
|
||||
|
||||
.worker__link-start,
|
||||
.worker__link-debug {
|
||||
margin: 0 calc(var(--base-unit) * 2);
|
||||
}
|
||||
|
@ -154,7 +154,7 @@ class Worker extends Component {
|
||||
},
|
||||
a({
|
||||
onClick: !shallDisableLink ? this.debug : null,
|
||||
className: `${linkClass} worker__debug-link js-debug-link`,
|
||||
className: `${linkClass} worker__link-debug js-link-debug`,
|
||||
})
|
||||
);
|
||||
return link;
|
||||
@ -174,7 +174,7 @@ class Worker extends Component {
|
||||
},
|
||||
a({
|
||||
onClick: this.start,
|
||||
className: `worker__start-link js-start-link ${linkClass}`,
|
||||
className: `worker__link-start js-link-start ${linkClass}`,
|
||||
})
|
||||
);
|
||||
return link;
|
||||
|
@ -42,7 +42,12 @@ class WorkerList extends Component {
|
||||
return [
|
||||
article(
|
||||
{ className: "workers-container" },
|
||||
Localized({ id: "serviceworker-list-header" }, h1({})),
|
||||
Localized(
|
||||
{ id: "serviceworker-list-header" },
|
||||
h1({
|
||||
className: "application--title",
|
||||
})
|
||||
),
|
||||
ul(
|
||||
{},
|
||||
workers.map(worker =>
|
||||
@ -56,7 +61,7 @@ class WorkerList extends Component {
|
||||
),
|
||||
Localized(
|
||||
{
|
||||
id: "serviceworker-list-aboutdebugging2",
|
||||
id: "serviceworker-list-aboutdebugging",
|
||||
a: a({
|
||||
className: "aboutdebugging-plug__link",
|
||||
onClick: () => openTrustedLink("about:debugging#workers"),
|
||||
|
@ -3,16 +3,20 @@
|
||||
* 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;
|
||||
max-width: calc(var(--base-unit) * 179);
|
||||
font-size: var(--body-10-font-size);
|
||||
color: var(--theme-toolbar-color);
|
||||
}
|
||||
|
||||
.worker-list-empty__title {
|
||||
font-size: 1.4rem;
|
||||
font-size: var(--title-20-font-size);
|
||||
font-weight: var(--title-20-font-weight);
|
||||
}
|
||||
|
||||
.worker-list-empty__title .external-link {
|
||||
font-weight: var(--title-30-font-weight);
|
||||
}
|
||||
|
||||
.worker-list-empty__tips {
|
||||
margin-inline-start: 2rem;
|
||||
}
|
||||
@ -20,4 +24,4 @@
|
||||
.worker-list-empty__tips__item {
|
||||
margin-block-start: 0.5rem;
|
||||
margin-block-end: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
@ -13,7 +13,6 @@ const {
|
||||
const {
|
||||
a,
|
||||
article,
|
||||
h1,
|
||||
li,
|
||||
p,
|
||||
ul,
|
||||
@ -64,7 +63,7 @@ class WorkerListEmpty extends Component {
|
||||
onClick: () => this.openDocumentation(),
|
||||
}),
|
||||
},
|
||||
h1({ className: "worker-list-empty__title" })
|
||||
p({ className: "worker-list-empty__title" })
|
||||
),
|
||||
Localized({ id: "serviceworker-empty-suggestions" }, p({})),
|
||||
ul(
|
||||
|
@ -10,6 +10,7 @@ DIRS += [
|
||||
]
|
||||
|
||||
DevToolsModules(
|
||||
'base.css',
|
||||
'constants.js',
|
||||
'create-store.js',
|
||||
)
|
||||
|
@ -29,13 +29,13 @@ add_task(async function() {
|
||||
const container = getWorkerContainers(doc)[0];
|
||||
info("Wait until the debug link is displayed and enabled");
|
||||
await waitUntil(() =>
|
||||
container.querySelector(".js-debug-link:not(.worker__debug-link--disabled)")
|
||||
container.querySelector(".js-link-debug:not(.worker__debug-link--disabled)")
|
||||
);
|
||||
|
||||
info("Click on the debug link and wait for the new toolbox to be ready");
|
||||
const onToolboxReady = gDevTools.once("toolbox-ready");
|
||||
|
||||
const debugLink = container.querySelector(".js-debug-link");
|
||||
const debugLink = container.querySelector(".js-link-debug");
|
||||
debugLink.click();
|
||||
|
||||
const serviceWorkerToolbox = await onToolboxReady;
|
||||
|
@ -29,10 +29,10 @@ add_task(async function() {
|
||||
info("Wait until the start link is displayed and enabled");
|
||||
const container = getWorkerContainers(doc)[0];
|
||||
await waitUntil(() =>
|
||||
container.querySelector(".js-start-link:not(.disabled-link)")
|
||||
container.querySelector(".js-link-start:not(.disabled-link)")
|
||||
);
|
||||
info("Click the link and wait for the worker to start");
|
||||
const link = container.querySelector(".js-start-link");
|
||||
const link = container.querySelector(".js-link-start");
|
||||
link.click();
|
||||
await waitUntil(
|
||||
() => container.querySelector(".js-worker-status").textContent === "Running"
|
||||
@ -61,9 +61,9 @@ add_task(async function() {
|
||||
|
||||
info("Wait until the start link is displayed");
|
||||
const container = getWorkerContainers(doc)[0];
|
||||
await waitUntil(() => container.querySelector(".js-start-link"));
|
||||
await waitUntil(() => container.querySelector(".js-link-start"));
|
||||
ok(
|
||||
container.querySelector(".js-start-link.disabled-link"),
|
||||
container.querySelector(".js-link-start.disabled-link"),
|
||||
"Start link is disabled"
|
||||
);
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user