Bug 1459953 - Part 1: Show all service worker states r=jdescottes,flu…

…ent-reviewers,flod

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

devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAdditionalActions.js

@@ -132,6 +132,7 @@ class ServiceWorkerAdditionalActions extends PureComponent {
       className: "default-button default-button--micro qa-unregister-button",
       key: "service-worker-unregister-button",
       labelId: "about-debugging-worker-action-unregister",
+      disabled: false,
       onClick: this.unregister.bind(this),
     });
   }

devtools/client/aboutdebugging/src/middleware/worker-component-data.js

@@ -4,6 +4,8 @@
 
 "use strict";
 
+const { Ci } = require("chrome");
+
 const {
   DEBUG_TARGETS,
   REQUEST_WORKERS_SUCCESS,
@@ -29,14 +31,15 @@ const workerComponentDataMiddleware = store => next => action => {
 };
 
 function getServiceWorkerStatus(worker) {
-  const isActive = worker.active;
+  const isActive = worker.state === Ci.nsIServiceWorkerInfo.STATE_ACTIVATED;
   const isRunning = !!worker.workerTargetFront;
 
   if (isActive && isRunning) {
     return SERVICE_WORKER_STATUSES.RUNNING;
   } else if (isActive) {
     return SERVICE_WORKER_STATUSES.STOPPED;
   }
+
   // We cannot get service worker registrations unless the registration is in
   // ACTIVE state. Unable to know the actual state ("installing", "waiting"), we
   // display a custom state "registering" for now. See Bug 1153292.

devtools/client/application/initializer.js

@@ -99,12 +99,8 @@ window.Application = {
   },
 
   async updateWorkers() {
-    const { service } = await this.client.mainRoot.listAllWorkers();
-    // filter out workers that don't have an URL or a scope
-    // TODO: Bug 1595138 investigate why we lack those properties
-    const workers = service.filter(x => x.url && x.scope);
-
-    this.actions.updateWorkers(workers);
+    const registrationsWithWorkers = await this.client.mainRoot.listAllServiceWorkers();
+    this.actions.updateWorkers(registrationsWithWorkers);
   },
 
   updateDomain() {

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

@@ -77,3 +77,7 @@
 .worker__link-debug {
   margin: 0 calc(var(--base-unit) * 2);
 }
+
+.worker__status {
+  text-transform: capitalize;
+}

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

@@ -30,6 +30,7 @@ const {
 
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
+const { l10n } = require("devtools/client/application/src/modules/l10n");
 
 const {
   services,
@@ -97,19 +98,19 @@ class Worker extends PureComponent {
   }
 
   isActive() {
-    return this.props.worker.active;
+    return this.props.worker.isActive;
   }
 
-  getServiceWorkerStatus() {
+  getLocalizedStatus() {
     if (this.isActive() && this.isRunning()) {
-      return "running";
+      return l10n.getString("serviceworker-worker-status-running");
     } else if (this.isActive()) {
-      return "stopped";
+      return l10n.getString("serviceworker-worker-status-stopped");
     }
-    // We cannot get service worker registrations unless the registration is in
-    // ACTIVE state. Unable to know the actual state ("installing", "waiting"), we
-    // display a custom state "registering" for now. See Bug 1153292.
-    return "registering";
+
+    // NOTE: this is already localized by the service worker front
+    // (strings are in debugger.properties)
+    return this.props.worker.stateText;
   }
 
   formatScope(scope) {
@@ -171,7 +172,7 @@ class Worker extends PureComponent {
 
   render() {
     const { worker } = this.props;
-    const status = this.getServiceWorkerStatus();
+    const statusText = this.getLocalizedStatus();
 
     const unregisterButton = this.isActive()
       ? Localized(
@@ -235,10 +236,7 @@ class Worker extends PureComponent {
         ),
         dd(
           {},
-          Localized(
-            { id: "serviceworker-worker-status-" + status },
-            span({ className: "js-worker-status" })
-          ),
+          span({ className: "js-worker-status worker__status" }, statusText),
           " ",
           !this.isRunning() ? this.renderStartButton() : null
         )

devtools/client/application/src/reducers/workers-state.js

@@ -4,6 +4,8 @@
 
 "use strict";
 
+const { Ci } = require("chrome");
+
 const {
   UPDATE_CAN_DEBUG_WORKERS,
   UPDATE_WORKERS,
@@ -17,6 +19,19 @@ function WorkersState() {
   };
 }
 
+function buildWorkerDataFromFronts({ registration, workers }) {
+  return workers.map(worker => ({
+    id: worker.id,
+    isActive: worker.state === Ci.nsIServiceWorkerInfo.STATE_ACTIVATED,
+    scope: registration.scope,
+    lastUpdateTime: registration.lastUpdateTime, // only available for active worker
+    url: worker.url,
+    registrationFront: registration,
+    workerTargetFront: worker.workerTargetFront,
+    stateText: worker.stateText,
+  }));
+}
+
 function workersReducer(state = WorkersState(), action) {
   switch (action.type) {
     case UPDATE_CAN_DEBUG_WORKERS: {
@@ -26,7 +41,9 @@ function workersReducer(state = WorkersState(), action) {
     }
     case UPDATE_WORKERS: {
       const { workers } = action;
-      return Object.assign({}, state, { list: workers });
+      return Object.assign({}, state, {
+        list: workers.map(buildWorkerDataFromFronts).flat(),
+      });
     }
     default:
       return state;

devtools/client/application/src/types/service-workers.js

@@ -7,10 +7,11 @@
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const worker = {
-  active: PropTypes.bool,
-  name: PropTypes.string.isRequired,
-  scope: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  isActive: PropTypes.bool.isRequired,
   lastUpdateTime: PropTypes.number,
+  scope: PropTypes.string.isRequired,
+  stateText: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
   // registrationFront can be missing in e10s.
   registrationFront: PropTypes.object,

devtools/client/application/test/xpcshell/test_workers_reducer.js

@@ -3,6 +3,8 @@ http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
+const { Ci } = require("chrome");
+
 const {
   updateCanDebugWorkers,
   updateWorkers,
@@ -33,13 +35,40 @@ add_task(async function() {
 
 add_task(async function() {
   info("Test workers reducer: UPDATE_WORKERS action");
-
   const state = WorkersState();
-  const action = updateWorkers([{ foo: "bar" }, { lorem: "ipsum" }]);
+
+  const rawData = [
+    {
+      registration: {
+        scope: "lorem-ipsum",
+        lastUpdateTime: 42,
+      },
+      workers: [
+        {
+          id: 1,
+          state: Ci.nsIServiceWorkerInfo.STATE_ACTIVATED,
+          url: "https://example.com",
+          workerTargetFront: { foo: "bar" },
+          stateText: "activated",
+        },
+      ],
+    },
+  ];
+
+  const expectedData = [
+    {
+      id: 1,
+      isActive: true,
+      scope: "lorem-ipsum",
+      lastUpdateTime: 42,
+      url: "https://example.com",
+      registrationFront: rawData[0].registration,
+      workerTargetFront: rawData[0].workers[0].workerTargetFront,
+      stateText: "activated",
+    },
+  ];
+
+  const action = updateWorkers(rawData);
   const newState = workersReducer(state, action);
-  deepEqual(
-    newState.list,
-    [{ foo: "bar" }, { lorem: "ipsum" }],
-    "workers contains the expected list"
-  );
+  deepEqual(newState.list, expectedData, "workers contains the expected list");
 });

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

@@ -56,10 +56,6 @@ serviceworker-worker-status-running = Running
 # Service Worker status. A stopped service worker is registered but not currently active.
 serviceworker-worker-status-stopped = Stopped
 
-# Service Worker status. A registering service worker is not yet registered and cannot be
-# started or debugged.
-serviceworker-worker-status-registering = Registering
-
 # 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>