Bug 1153292 - part1: display serviceworker status RUNNING/STOPPPED in aboutdebugging;r=janx

MozReview-Commit-ID: FvXM7QvB0Pn

--HG--
extra : rebase_source : caca55e0004d2479cd2fb5358cf45fa9455493b1
extra : source : 43475a195115054bf6fab64f7266133575b25b18

devtools/client/aboutdebugging/aboutdebugging.css

@@ -117,6 +117,35 @@ button {
   margin-left: 8px;
 }
 
+.target-status {
+  box-sizing: border-box;
+  display: inline-block;
+
+  min-width: 50px;
+  margin-right: 5px;
+  padding: 2px;
+
+  border-width: 1px;
+  border-style: solid;
+
+  font-size: 0.6em;
+  text-align: center;
+}
+
+.target-status-stopped {
+  border-color: grey;
+  background-color: lightgrey;
+}
+
+.target-status-running {
+  border-color: limegreen;
+  background-color: palegreen;
+}
+
+.target-name {
+  display: inline-block;
+}
+
 .addons-controls {
   display: flex;
   flex-direction: row;

devtools/client/aboutdebugging/components/workers/service-worker-target.js

@@ -102,10 +102,15 @@ module.exports = createClass({
     return !!this.props.target.workerActor;
   },
 
+  getServiceWorkerStatus() {
+    return this.isRunning() ? "running" : "stopped";
+  },
+
   render() {
     let { target, debugDisabled } = this.props;
     let { pushSubscription } = this.state;
     let isRunning = this.isRunning();
+    let status = this.getServiceWorkerStatus();
 
     return dom.div({ className: "target-container" },
       dom.img({
@@ -113,6 +118,8 @@ module.exports = createClass({
         role: "presentation",
         src: target.icon
       }),
+      dom.span({ className: `target-status target-status-${status}` },
+        Strings.GetStringFromName(status)),
       dom.div({ className: "target" },
         dom.div({ className: "target-name", title: target.name }, target.name),
         dom.ul({ className: "target-details" },

devtools/client/locales/en-US/aboutdebugging.properties

@@ -71,6 +71,9 @@ serviceWorkers = Service Workers
 sharedWorkers = Shared Workers
 otherWorkers = Other Workers
 
+running = Running
+stopped = Stopped
+
 # LOCALIZATION NOTE (tabs):
 # This string is displayed as a header of the about:debugging#tabs page.
 tabs = Tabs