Bug 1454931 - Display help screen when no service worker is available;r=sole

MozReview-Commit-ID: JDPX45YIkrB

--HG--
extra : rebase_source : 73e5f73be441e11a160276344fcd14cc6b379149

devtools/client/application/application.css

@@ -5,6 +5,7 @@
 @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";
 
 * {
   box-sizing: border-box;

devtools/client/application/initializer.js

@@ -36,9 +36,18 @@ window.Application = {
     this.actions = bindActionCreators(actions, this.store.dispatch);
 
     const serviceContainer = {
-      openAboutDebugging() {
+      openWebLink(url) {
         let win = toolbox.doc.defaultView.top;
-        win.openUILinkIn("about:debugging#workers", "tab", { relatedToCurrent: true });
+        win.openWebLinkIn(url, "tab", { relatedToCurrent: true });
+      },
+
+      openTrustedLink(url) {
+        let win = toolbox.doc.defaultView.top;
+        win.openTrustedLinkIn(url, "tab", { relatedToCurrent: true });
+      },
+
+      selectTool(toolId) {
+        return toolbox.selectTool(toolId);
       }
     };
 

devtools/client/application/src/components/App.css

@@ -23,6 +23,10 @@
   flex-direction: column;
 }
 
+.application.empty {
+  background-color: var(--grey-30);
+}
+
 h1 {
   font-size: 22px;
   font-weight: normal;

devtools/client/application/src/components/App.js

@@ -10,6 +10,7 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { div } = require("devtools/client/shared/vendor/react-dom-factories");
 
 const WorkerList = createFactory(require("./WorkerList"));
+const WorkerListEmpty = createFactory(require("./WorkerListEmpty"));
 
 /**
  * This is the main component for the application panel.
@@ -25,9 +26,16 @@ class App extends Component {
 
   render() {
     let { workers, client, serviceContainer } = this.props;
+    const isEmpty = workers.length == 0;
 
-    return div({className: "application"},
-      WorkerList({ workers, client, serviceContainer }));
+    return (
+      div(
+        { className: `application ${isEmpty ? "empty" : ""}` },
+        isEmpty
+          ? WorkerListEmpty({ serviceContainer })
+          : WorkerList({ workers, client, serviceContainer })
+      )
+    );
   }
 }
 

devtools/client/application/src/components/WorkerList.js

@@ -25,7 +25,7 @@ class WorkerList extends Component {
 
   render() {
     const { workers, client, serviceContainer } = this.props;
-    const { openAboutDebugging } = serviceContainer;
+    const { openTrustedLink } = serviceContainer;
 
     return [
       ul({ className: "application-workers-container" },
@@ -40,7 +40,10 @@ class WorkerList extends Component {
       ),
       div({ className: "application-aboutdebugging-plug" },
         "See about:debugging for Service Workers from other domains",
-        a({ onClick: () => openAboutDebugging() }, "Open about:debugging")
+        a(
+          { onClick: () => openTrustedLink("about:debugging#workers") },
+          "Open about:debugging"
+        )
       )
     ];
   }

devtools/client/application/src/components/WorkerListEmpty.css

@@ -0,0 +1,19 @@
+/* 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 {
+  width: 700px;
+  line-height: 24px;
+  left: 50%;
+  top: 50%;
+  margin-top: -100px;
+  margin-left: -350px;
+  position: absolute;
+  font-size: 13px;
+}
+
+.worker-list-empty ul {
+  list-style: unset;
+  padding: 0 40px;
+}

devtools/client/application/src/components/WorkerListEmpty.js

@@ -0,0 +1,88 @@
+/* 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/. */
+
+"use strict";
+
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { Component } = require("devtools/client/shared/vendor/react");
+const { a, div, li, ul } = require("devtools/client/shared/vendor/react-dom-factories");
+const DOC_URL = "https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers";
+
+/**
+ * This component displays help information when no service workers are found for the
+ * current target.
+ */
+class WorkerListEmpty extends Component {
+  static get propTypes() {
+    return {
+      serviceContainer: PropTypes.object.isRequired,
+    };
+  }
+
+  switchToConsole() {
+    this.props.serviceContainer.selectTool("webconsole");
+  }
+
+  switchToDebugger() {
+    this.props.serviceContainer.selectTool("jsdebugger");
+  }
+
+  openAboutDebugging() {
+    this.props.serviceContainer.openTrustedLink("about:debugging#workers");
+  }
+
+  openDocumentation() {
+    this.props.serviceContainer.openWebLink(DOC_URL);
+  }
+
+  render() {
+    return div(
+      { className: "worker-list-empty" },
+      div(
+        {},
+        "You need to register a Service Worker to inspect it here.",
+        a(
+          { className: "external-link", onClick: () => this.openDocumentation() },
+          "Learn More"
+        )
+      ),
+      div(
+        {},
+        `If the current page should have a service worker, ` +
+        `here are some things you can try`,
+      ),
+      ul(
+        {},
+        li(
+          {},
+          "Look for errors in the Console.",
+          a(
+            { className: "link", onClick: () => this.switchToConsole() },
+            "Open the Console"
+          )
+        ),
+        li(
+          {},
+          "Step through you Service Worker registration and look for exceptions.",
+          a(
+            { className: "link", onClick: () => this.switchToDebugger()},
+            "Open the Debugger"
+          )
+        ),
+        li(
+          {},
+          "Inspect Service Workers from other domains.",
+          a(
+            { className: "external-link", onClick: () => this.openAboutDebugging() },
+            "Open about:debugging"
+          )
+        )
+      )
+    );
+  }
+}
+
+// Exports
+
+module.exports = WorkerListEmpty;

devtools/client/application/src/components/moz.build

@@ -9,4 +9,6 @@ DevToolsModules(
     'Worker.js',
     'WorkerList.css',
     'WorkerList.js',
+    'WorkerListEmpty.css',
+    'WorkerListEmpty.js',
 )