Bug 1635402 - UX polish: empty pages r=jdescottes,Gijs

Differential Revision: https://phabricator.services.mozilla.com/D81362

devtools/client/application/application.css

@@ -24,7 +24,6 @@
 @import "resource://devtools/client/application/src/components/routing/SidebarItem.css";
 @import "resource://devtools/client/application/src/components/service-workers/Registration.css";
 @import "resource://devtools/client/application/src/components/service-workers/RegistrationList.css";
-@import "resource://devtools/client/application/src/components/service-workers/RegistrationListEmpty.css";
 @import "resource://devtools/client/application/src/components/service-workers/Worker.css";
 @import "resource://devtools/client/application/src/components/ui/UIButton.css";
 

devtools/client/application/src/base.css

@@ -17,7 +17,6 @@
   --title-20-font-size: 17px;
   --title-20-font-weight: 400;
   --title-30-font-size: 22px;
-  --title-30-font-weight: 300;
 
   /* Global styles */
   --base-line-height: 1.8;
@@ -33,6 +32,14 @@
 
   /* Global layout vars */
   --base-unit: 4px;
+
+  /* these are the color for icons in empty pages - note that these are not
+     available in devtools' variables.css */
+  --dimmed-icon-color: #d3d3d3;
+}
+
+:root.theme-dark {
+  --dimmed-icon-color: #484848;
 }
 
 /*

devtools/client/application/src/components/manifest/ManifestEmpty.js

@@ -13,7 +13,10 @@ const {
 const {
   a,
   article,
+  aside,
+  div,
   h1,
+  img,
   p,
 } = require("devtools/client/shared/vendor/react-dom-factories");
 
@@ -35,18 +38,41 @@ class ManifestEmpty extends PureComponent {
 
   render() {
     return article(
-      { className: "manifest-empty js-manifest-empty" },
+      { className: "app-page__icon-container js-manifest-empty" },
+      aside(
+        {},
         Localized(
           {
-          id: "manifest-empty-intro",
-          a: a({
-            className: "external-link",
-            onClick: () => this.openDocumentation(),
-          }),
+            id: "sidebar-item-manifest",
+            attrs: {
+              alt: true,
+            },
+          },
+          img({
+            className: "app-page__icon",
+            src: "chrome://devtools/skin/images/application-manifest.svg",
+          })
+        )
+      ),
+      div(
+        {},
+        Localized(
+          {
+            id: "manifest-empty-intro2",
           },
           h1({ className: "app-page__title" })
         ),
+        p(
+          {},
+          Localized(
+            { id: "manifest-empty-intro-link" },
+            a({
+              onClick: () => this.openDocumentation(),
+            })
+          )
+        ),
         Localized({ id: "manifest-non-existing" }, p({}))
+      )
     );
   }
 }

devtools/client/application/src/components/routing/PageSwitcher.css

@@ -26,3 +26,20 @@
   font-weight: var(--title-20-font-weight);
   margin: 0;
 }
+
+.app-page__icon-container {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-column-gap: calc(var(--base-unit) * 4);
+}
+
+.app-page__icon {
+  width: calc(var(--base-unit) * 10);
+  height: calc(var(--base-unit) * 10);
+
+  fill: var(--dimmed-icon-color);
+  -moz-context-properties: fill;
+
+  /* alignment fix for text to compensate for low baseline */
+  margin-block-start: var(--base-unit);
+}

devtools/client/application/src/components/service-workers/RegistrationListEmpty.css

@@ -1,16 +0,0 @@
-/* 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/. */
-
-.app-page__title .external-link {
-  font-weight: var(--title-30-font-weight);
-}
-
-.registration-list-empty__tips {
-  margin-inline-start: 2rem;
-}
-
-.registration-list-empty__tips-item {
-  margin-block-start: 0.5rem;
-  margin-block-end: 0.5rem;
-}

devtools/client/application/src/components/service-workers/RegistrationListEmpty.js

@@ -12,10 +12,11 @@ const {
 const {
   a,
   article,
+  aside,
+  div,
   h1,
-  li,
+  img,
   p,
-  ul,
 } = require("devtools/client/shared/vendor/react-dom-factories");
 
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
@@ -52,43 +53,62 @@ class RegistrationListEmpty extends PureComponent {
 
   render() {
     return article(
-      { className: "registration-list-empty js-registration-list-empty" },
+      { className: "app-page__icon-container js-registration-list-empty" },
+      aside(
+        {},
         Localized(
           {
-          id: "serviceworker-empty-intro",
-          a: a({
-            className: "external-link",
-            onClick: () => this.openDocumentation(),
-          }),
+            id: "sidebar-item-service-workers",
+            attrs: {
+              alt: true,
+            },
+          },
+          img({
+            className: "app-page__icon",
+            src: "chrome://devtools/skin/images/debugging-workers.svg",
+          })
+        )
+      ),
+      div(
+        {},
+        Localized(
+          {
+            id: "serviceworker-empty-intro2",
           },
           h1({ className: "app-page__title" })
         ),
-      Localized({ id: "serviceworker-empty-suggestions" }, p({})),
-      ul(
-        { className: "registration-list-empty__tips" },
         Localized(
           {
-            id: "serviceworker-empty-suggestions-console",
-            a: a({ className: "link", onClick: () => this.switchToConsole() }),
-          },
-          li({ className: "registration-list-empty__tips-item" })
-        ),
-        Localized(
-          {
-            id: "serviceworker-empty-suggestions-debugger",
-            a: a({ className: "link", onClick: () => this.switchToDebugger() }),
-          },
-          li({ className: "registration-list-empty__tips-item" })
-        ),
-        Localized(
-          {
-            id: "serviceworker-empty-suggestions-aboutdebugging",
+            id: "serviceworker-empty-suggestions2",
             a: a({
-              className: "link js-trusted-link",
-              onClick: () => this.openAboutDebugging(),
+              onClick: () => this.switchToConsole(),
+            }),
+            // NOTE: for <Localized> to parse the markup in the string, the
+            //       markup needs to be actual HTML elements
+            span: a({
+              onClick: () => this.switchToDebugger(),
             }),
           },
-          li({ className: "registration-list-empty__tips-item" })
+          p({})
+        ),
+        p(
+          {},
+          Localized(
+            { id: "serviceworker-empty-intro-link" },
+            a({
+              onClick: () => this.openDocumentation(),
+            })
+          )
+        ),
+        p(
+          {},
+          Localized(
+            { id: "serviceworker-empty-suggestions-aboutdebugging2" },
+            a({
+              className: "js-trusted-link",
+              onClick: () => this.openAboutDebugging(),
+            })
+          )
         )
       )
     );

devtools/client/application/src/components/service-workers/moz.build

@@ -7,7 +7,6 @@ DevToolsModules(
     'Registration.js',
     'RegistrationList.css',
     'RegistrationList.js',
-    'RegistrationListEmpty.css',
     'RegistrationListEmpty.js',
     'Worker.css',
     'Worker.js',

devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestEmpty.test.js.snap

@@ -2,25 +2,45 @@
 
 exports[`ManifestEmpty renders the expected snapshot 1`] = `
 <article
-  className="manifest-empty js-manifest-empty"
+  className="app-page__icon-container js-manifest-empty"
 >
+  <aside>
     <Localized
-    a={
-      <a
-        className="external-link"
-        onClick={[Function]}
-      />
+      attrs={
+        Object {
+          "alt": true,
         }
-    id="manifest-empty-intro"
+      }
+      id="sidebar-item-manifest"
+    >
+      <img
+        className="app-page__icon"
+        src="chrome://devtools/skin/images/application-manifest.svg"
+      />
+    </Localized>
+  </aside>
+  <div>
+    <Localized
+      id="manifest-empty-intro2"
     >
       <h1
         className="app-page__title"
       />
     </Localized>
+    <p>
+      <Localized
+        id="manifest-empty-intro-link"
+      >
+        <a
+          onClick={[Function]}
+        />
+      </Localized>
+    </p>
     <Localized
       id="manifest-non-existing"
     >
       <p />
     </Localized>
+  </div>
 </article>
 `;

devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationListEmpty.test.js.snap

@@ -2,68 +2,65 @@
 
 exports[`RegistrationListEmpty renders the expected snapshot 1`] = `
 <article
-  className="registration-list-empty js-registration-list-empty"
+  className="app-page__icon-container js-registration-list-empty"
 >
+  <aside>
     <Localized
-    a={
-      <a
-        className="external-link"
-        onClick={[Function]}
-      />
+      attrs={
+        Object {
+          "alt": true,
         }
-    id="serviceworker-empty-intro"
+      }
+      id="sidebar-item-service-workers"
+    >
+      <img
+        className="app-page__icon"
+        src="chrome://devtools/skin/images/debugging-workers.svg"
+      />
+    </Localized>
+  </aside>
+  <div>
+    <Localized
+      id="serviceworker-empty-intro2"
     >
       <h1
         className="app-page__title"
       />
     </Localized>
     <Localized
-    id="serviceworker-empty-suggestions"
+      a={
+        <a
+          onClick={[Function]}
+        />
+      }
+      id="serviceworker-empty-suggestions2"
+      span={
+        <a
+          onClick={[Function]}
+        />
+      }
     >
       <p />
     </Localized>
-  <ul
-    className="registration-list-empty__tips"
-  >
+    <p>
       <Localized
-      a={
+        id="serviceworker-empty-intro-link"
+      >
         <a
-          className="link"
           onClick={[Function]}
         />
-      }
-      id="serviceworker-empty-suggestions-console"
-    >
-      <li
-        className="registration-list-empty__tips-item"
-      />
       </Localized>
+    </p>
+    <p>
       <Localized
-      a={
+        id="serviceworker-empty-suggestions-aboutdebugging2"
+      >
         <a
-          className="link"
+          className="js-trusted-link"
           onClick={[Function]}
         />
-      }
-      id="serviceworker-empty-suggestions-debugger"
-    >
-      <li
-        className="registration-list-empty__tips-item"
-      />
       </Localized>
-    <Localized
-      a={
-        <a
-          className="link js-trusted-link"
-          onClick={[Function]}
-        />
-      }
-      id="serviceworker-empty-suggestions-aboutdebugging"
-    >
-      <li
-        className="registration-list-empty__tips-item"
-      />
-    </Localized>
-  </ul>
+    </p>
+  </div>
 </article>
 `;

devtools/client/locales/en-US/application.ftl

@@ -56,32 +56,29 @@ serviceworker-worker-status-running = Running
 # Service Worker status. A stopped service worker is registered but not currently active.
 serviceworker-worker-status-stopped = Stopped
 
-# Text displayed when no service workers are visible for the current page. Clicking on the
-# link will open https://developer-mozilla-org/docs/Web/API/Service_Worker_API/Using_Service_Workers
-serviceworker-empty-intro = You need to register a Service Worker to inspect it here. <a>Learn more</a>
+# Text displayed when no service workers are visible for the current page.
+serviceworker-empty-intro2 = No service workers found
+
+# Link will open https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers
+serviceworker-empty-intro-link = Learn more
 
 # Text displayed when there are no Service Workers to display for the current page,
 # introducing hints to debug Service Worker issues.
-serviceworker-empty-suggestions = If the current page should have a service worker, here are some things you can try
-
-# Suggestion to check for errors in the Console to investigate why a service worker is not
-# registered. Clicking on the link opens the webconsole.
-serviceworker-empty-suggestions-console = Look for errors in the Console. <a>Open the Console</a>
-
-# Suggestion to use the debugger to investigate why a service worker is not registered.
-# Clicking on the link will switch from the Application panel to the debugger.
-serviceworker-empty-suggestions-debugger = Step through your Service Worker registration and look for exceptions. <a>Open the Debugger</a>
+# <a> and <span> are links that will open the webconsole and the debugger, respectively.
+serviceworker-empty-suggestions2 = If the current page should have a service worker, you could look for errors in the <a>Console</a> or step through your service worker registration in the <span>Debugger</span>.
 
 # Suggestion to go to about:debugging in order to see Service Workers for all domains.
-# Clicking on the link will open about:debugging in a new tab.
-serviceworker-empty-suggestions-aboutdebugging = Inspect Service Workers from other domains. <a>Open about:debugging</a>
+# Link will open about:debugging in a new tab.
+serviceworker-empty-suggestions-aboutdebugging2 = View service workers from other domains
 
 # Header for the Manifest page when we have an actual manifest
 manifest-view-header = App Manifest
 
 # Header for the Manifest page when there's no manifest to inspect
+manifest-empty-intro2 = No web app manifest detected
+
 # The link will open https://developer.mozilla.org/en-US/docs/Web/Manifest
-manifest-empty-intro = You need to add a web app manifest to inspect it here. <a>Learn more</a>
+manifest-empty-intro-link = Learn how to add a manifest
 
 # Header for the Errors and Warnings section of Manifest inspection displayed in the application panel.
 manifest-item-warnings = Errors and Warnings