Bug 1462236 - Application panel empty screen polish;r=ladybenko draft
authorJulian Descottes <jdescottes@mozilla.com>
Fri, 25 May 2018 11:12:47 +0200
changeset 799734 4d0695668607a7eb80d3815140d9ee09dae60dca
parent 799729 fcfdf8af92188213ae9ffe823148d70aef60437d
child 799740 c4bca46a3752731fa374f1085e797b6a14709e27
child 800927 b7d77c1d3893255627c0ba1e9e9b51bc6b88545c
push id111156
push userjdescottes@mozilla.com
push dateFri, 25 May 2018 09:13:06 +0000
reviewersladybenko
bugs1462236
milestone62.0a1
Bug 1462236 - Application panel empty screen polish;r=ladybenko MozReview-Commit-ID: ENd72iKrw8U
devtools/client/application/src/components/App.css
devtools/client/application/src/components/WorkerListEmpty.css
devtools/client/application/src/components/WorkerListEmpty.js
--- 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"
           )
         )
       )
     );