From 05e788acf728e453ec27e872ea07e0fe41d72257 Mon Sep 17 00:00:00 2001 From: Ola Gasidlo Date: Fri, 12 Jul 2019 08:24:55 +0000 Subject: [PATCH] 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 --- devtools/client/application/application.css | 12 ++++ devtools/client/application/src/base.css | 61 +++++++++++++++++++ .../client/application/src/components/App.css | 18 +----- .../application/src/components/Worker.css | 8 ++- .../application/src/components/Worker.js | 4 +- .../application/src/components/WorkerList.js | 9 ++- .../src/components/WorkerListEmpty.css | 14 +++-- .../src/components/WorkerListEmpty.js | 3 +- devtools/client/application/src/moz.build | 1 + ..._application_panel_debug-service-worker.js | 4 +- ..._application_panel_start-service-worker.js | 8 +-- 11 files changed, 106 insertions(+), 36 deletions(-) create mode 100644 devtools/client/application/src/base.css diff --git a/devtools/client/application/application.css b/devtools/client/application/application.css index 478d57688efa..c6072356f53b 100644 --- a/devtools/client/application/application.css +++ b/devtools/client/application/application.css @@ -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; } diff --git a/devtools/client/application/src/base.css b/devtools/client/application/src/base.css new file mode 100644 index 000000000000..bfb13132806f --- /dev/null +++ b/devtools/client/application/src/base.css @@ -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; +} diff --git a/devtools/client/application/src/components/App.css b/devtools/client/application/src/components/App.css index b2242f35dd14..6c2c1acabaf4 100644 --- a/devtools/client/application/src/components/App.css +++ b/devtools/client/application/src/components/App.css @@ -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; } diff --git a/devtools/client/application/src/components/Worker.css b/devtools/client/application/src/components/Worker.css index f39753cc8faf..6a3f218f82b9 100644 --- a/devtools/client/application/src/components/Worker.css +++ b/devtools/client/application/src/components/Worker.css @@ -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); +} diff --git a/devtools/client/application/src/components/Worker.js b/devtools/client/application/src/components/Worker.js index ed01d2bbf8db..f203c04ff534 100644 --- a/devtools/client/application/src/components/Worker.js +++ b/devtools/client/application/src/components/Worker.js @@ -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; diff --git a/devtools/client/application/src/components/WorkerList.js b/devtools/client/application/src/components/WorkerList.js index 4c9f5c542dc4..be1277680c28 100644 --- a/devtools/client/application/src/components/WorkerList.js +++ b/devtools/client/application/src/components/WorkerList.js @@ -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"), diff --git a/devtools/client/application/src/components/WorkerListEmpty.css b/devtools/client/application/src/components/WorkerListEmpty.css index cfd0f967811c..3822ee9923e2 100644 --- a/devtools/client/application/src/components/WorkerListEmpty.css +++ b/devtools/client/application/src/components/WorkerListEmpty.css @@ -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; -} \ No newline at end of file +} diff --git a/devtools/client/application/src/components/WorkerListEmpty.js b/devtools/client/application/src/components/WorkerListEmpty.js index 6db0150bf97a..440f47e907da 100644 --- a/devtools/client/application/src/components/WorkerListEmpty.js +++ b/devtools/client/application/src/components/WorkerListEmpty.js @@ -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( diff --git a/devtools/client/application/src/moz.build b/devtools/client/application/src/moz.build index ba5b0aa05109..84b406abd9a7 100644 --- a/devtools/client/application/src/moz.build +++ b/devtools/client/application/src/moz.build @@ -10,6 +10,7 @@ DIRS += [ ] DevToolsModules( + 'base.css', 'constants.js', 'create-store.js', ) diff --git a/devtools/client/application/test/browser/browser_application_panel_debug-service-worker.js b/devtools/client/application/test/browser/browser_application_panel_debug-service-worker.js index ecc1119614ef..f1b777ffdd53 100644 --- a/devtools/client/application/test/browser/browser_application_panel_debug-service-worker.js +++ b/devtools/client/application/test/browser/browser_application_panel_debug-service-worker.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; diff --git a/devtools/client/application/test/browser/browser_application_panel_start-service-worker.js b/devtools/client/application/test/browser/browser_application_panel_start-service-worker.js index f0bafc28f858..88c62eb8a517 100644 --- a/devtools/client/application/test/browser/browser_application_panel_start-service-worker.js +++ b/devtools/client/application/test/browser/browser_application_panel_start-service-worker.js @@ -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" );