Bug 1153292 - part1: display serviceworker status RUNNING/STOPPPED in aboutdebugging;r=janx draft
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 15 Sep 2016 17:54:43 +0200
changeset 420132 caca55e0004d2479cd2fb5358cf45fa9455493b1
parent 420131 26f30041f37eb870bf2fc94bdcbb58287c326673
child 420133 bd35e5e913583d4235435c106aeee79a8a478534
push id31104
push userjdescottes@mozilla.com
push dateMon, 03 Oct 2016 13:33:13 +0000
reviewersjanx
bugs1153292
milestone52.0a1
Bug 1153292 - part1: display serviceworker status RUNNING/STOPPPED in aboutdebugging;r=janx MozReview-Commit-ID: FvXM7QvB0Pn
devtools/client/aboutdebugging/aboutdebugging.css
devtools/client/aboutdebugging/components/workers/service-worker-target.js
devtools/client/locales/en-US/aboutdebugging.properties
--- a/devtools/client/aboutdebugging/aboutdebugging.css
+++ b/devtools/client/aboutdebugging/aboutdebugging.css
@@ -112,16 +112,45 @@ button {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .target-detail > :not(:first-child) {
   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;
 }
 
 .addons-install-error {
   background-color: #f3b0b0;
   padding: 5px 10px;
--- a/devtools/client/aboutdebugging/components/workers/service-worker-target.js
+++ b/devtools/client/aboutdebugging/components/workers/service-worker-target.js
@@ -97,27 +97,34 @@ module.exports = createClass({
     });
   },
 
   isRunning() {
     // We know the target is running if it has a worker actor.
     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({
         className: "target-icon",
         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" },
           (pushSubscription ?
             dom.li({ className: "target-detail" },
               dom.strong(null, Strings.GetStringFromName("pushService")),
               dom.span({
                 className: "service-worker-push-url",
--- a/devtools/client/locales/en-US/aboutdebugging.properties
+++ b/devtools/client/locales/en-US/aboutdebugging.properties
@@ -66,16 +66,19 @@ reloadDisabledTooltip = Only temporarily
 # LOCALIZATION NOTE (workers):
 # This string is displayed as a header of the about:debugging#workers page.
 workers = Workers
 
 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
 
 # LOCALIZATION NOTE (pageNotFound):
 # This string is displayed as the main message at any error/invalid page.
 pageNotFound = Page not found