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

@@ -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;
 }

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;
+}

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;
 }
 

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);
+}

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;

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

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;
+  max-width: calc(var(--base-unit) * 179);
-  font-size: 1.2rem;
+  font-size: var(--body-10-font-size);
-  line-height: 1.25;
   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;
-}
+}

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(

devtools/client/application/src/moz.build

@@ -10,6 +10,7 @@ DIRS += [
 ]
 
 DevToolsModules(
+	'base.css',
     'constants.js',
     'create-store.js',
 )

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;

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"
   );