Bug 1598629 - Part 1: Debug workers within the new threads panel in the debugger r=bhackett,jdescottes

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

--HG--
rename : devtools/client/application/src/modules/services.js => devtools/client/application/src/modules/application-services.js
extra : moz-landing-system : lando

devtools/client/application/initializer.js

@@ -28,7 +28,7 @@ const actions = require("./src/actions/index");
 
 const { WorkersListener } = require("devtools/client/shared/workers-listener");
 
-const { services } = require("./src/modules/services");
+const { services } = require("./src/modules/application-services");
 
 const App = createFactory(require("./src/components/App"));
 
@@ -49,7 +49,6 @@ window.Application = {
 
     this.store = configureStore();
     this.actions = bindActionCreators(actions, this.store.dispatch);
-    this.serviceWorkerRegistrationFronts = [];
 
     services.init(this.toolbox);
 
@@ -104,7 +103,9 @@ window.Application = {
       ? (await this.deviceFront.getDescription()).canDebugServiceWorkers
       : false;
 
-    this.actions.updateCanDebugWorkers(canDebugWorkers);
+    this.actions.updateCanDebugWorkers(
+      canDebugWorkers && services.features.doesDebuggerSupportWorkers
+    );
   },
 
   destroy() {

devtools/client/application/src/actions/manifest.js

@@ -6,7 +6,10 @@
 
 const { l10n } = require("../modules/l10n");
 
-const { services, ManifestDevToolsError } = require("../modules/services");
+const {
+  services,
+  ManifestDevToolsError,
+} = require("../modules/application-services");
 const {
   FETCH_MANIFEST_FAILURE,
   FETCH_MANIFEST_START,

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

@@ -31,17 +31,11 @@ const {
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
+const { services } = require("../../modules/application-services");
 const Types = require("../../types/index");
 
 const UIButton = createFactory(require("../ui/UIButton"));
 
-loader.lazyRequireGetter(
-  this,
-  "gDevToolsBrowser",
-  "devtools/client/framework/devtools-browser",
-  true
-);
-
 /**
  * This component is dedicated to display a worker, more accurately a service worker, in
  * the list of workers displayed in the application panel. It displays information about
@@ -70,8 +64,7 @@ class Worker extends PureComponent {
       return;
     }
 
-    const { workerTargetFront } = this.props.worker;
-    gDevToolsBrowser.openWorkerToolbox(workerTargetFront);
+    services.openWorkerInDebugger(this.props.worker.workerTargetFront);
   }
 
   start() {

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

@@ -21,7 +21,7 @@ const {
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
-const { services } = require("../../modules/services");
+const { services } = require("../../modules/application-services");
 
 const DOC_URL =
   "https://developer.mozilla.org/docs/Web/API/Service_Worker_API/Using_Service_Workers" +

devtools/client/application/src/modules/application-services.js

@@ -4,6 +4,8 @@
 
 "use strict";
 
+const Services = require("Services");
+
 class ManifestDevToolsError extends Error {
   constructor(...params) {
     super(...params);
@@ -12,9 +14,16 @@ class ManifestDevToolsError extends Error {
   }
 }
 
-class Services {
+class ApplicationServices {
   init(toolbox) {
     this._toolbox = toolbox;
+
+    this.features = {
+      doesDebuggerSupportWorkers: Services.prefs.getBoolPref(
+        "devtools.debugger.features.windowless-service-workers",
+        false
+      ),
+    };
   }
 
   selectTool(toolId) {
@@ -22,6 +31,11 @@ class Services {
     return this._toolbox.selectTool(toolId);
   }
 
+  async openWorkerInDebugger(workerTargetFront) {
+    const debuggerPanel = await this.selectTool("jsdebugger");
+    debuggerPanel.selectWorker(workerTargetFront);
+  }
+
   async fetchManifest() {
     let response;
 
@@ -54,5 +68,5 @@ class Services {
 module.exports = {
   ManifestDevToolsError,
   // exports a singleton, which will be used across all application panel modules
-  services: new Services(),
+  services: new ApplicationServices(),
 };

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

@@ -3,6 +3,6 @@
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
+    'application-services.js',
     'l10n.js',
-    'services.js',
 )

devtools/client/application/test/browser/browser_application_panel_debug-service-worker.js

@@ -20,7 +20,10 @@ const TAB_URL = URL_ROOT + "resources/service-workers/debug.html";
 add_task(async function() {
   await enableApplicationPanel();
 
-  const { panel, tab, target } = await openNewTabAndApplicationPanel(TAB_URL);
+  const { panel, tab, target, toolbox } = await openNewTabAndApplicationPanel(
+    TAB_URL
+  );
+
   const doc = panel.panelWin.document;
 
   selectPage(panel, "service-workers");
@@ -35,39 +38,28 @@ add_task(async function() {
     return button && !button.disabled;
   });
 
-  info("Click on the debug button and wait for the new toolbox to be ready");
-  const onToolboxReady = gDevTools.once("toolbox-ready");
-
+  info("Click on the debug button and wait for debugger to be ready");
   const debugButton = container.querySelector(".js-debug-button");
   debugButton.click();
+  await waitFor(() => toolbox.getPanel("jsdebugger"));
 
-  const serviceWorkerToolbox = await onToolboxReady;
-  await serviceWorkerToolbox.selectTool("jsdebugger");
-  const debuggerContext = createDebuggerContext(serviceWorkerToolbox);
-
-  await waitForSources(debuggerContext, "debug-sw.js");
-  await selectSource(debuggerContext, "debug-sw.js");
+  // add a breakpoint at line 11
+  const debuggerContext = createDebuggerContext(toolbox);
   await waitForLoadedSource(debuggerContext, "debug-sw.js");
+  await addBreakpoint(debuggerContext, "debug-sw.js", 11);
 
-  await addBreakpoint(debuggerContext, "debug-sw.js", 8);
-
-  info(
-    "Reload the main tab, expect the service worker script to pause on line 8"
-  );
-  tab.linkedBrowser.reload();
-
+  // force a pause at the breakpoint
+  info("Invoke fetch, expect the service worker script to pause on line 11");
+  await ContentTask.spawn(tab.linkedBrowser, {}, async function() {
+    content.wrappedJSObject.fetchFromWorker();
+  });
   await waitForPaused(debuggerContext);
   assertPausedLocation(debuggerContext);
   await resume(debuggerContext);
 
+  // remove breakpoint
   const workerScript = findSource(debuggerContext, "debug-sw.js");
-  await removeBreakpoint(debuggerContext, workerScript.id, 8);
-
-  info("Destroy the worker toolbox");
-  await serviceWorkerToolbox.destroy();
-
-  info("Wait until the focus goes back to the main window");
-  await waitUntil(() => gBrowser.selectedBrowser === tab.linkedBrowser);
+  await removeBreakpoint(debuggerContext, workerScript.id, 11);
 
   await unregisterAllWorkers(target.client);
 });

devtools/client/application/test/browser/head.js

@@ -25,6 +25,9 @@ async function enableServiceWorkerDebugging() {
   // SW debugging in multi-e10s.
   await pushPref("dom.ipc.processCount", 1);
 
+  // Enable service workers in the debugger
+  await pushPref("devtools.debugger.features.windowless-service-workers", true);
+
   // Wait for dom.ipc.processCount to be updated before releasing processes.
   Services.ppmm.releaseCachedProcesses();
 }

devtools/client/application/test/browser/resources/service-workers/debug-sw.js

@@ -3,8 +3,16 @@
 
 "use strict";
 
-// Bug 1328293
+self.addEventListener("activate", event => {
+  event.waitUntil(self.clients.claim());
+});
+
 self.onfetch = function(event) {
-  const a = 5;
-  console.log(a);
+  const url = event.request.url;
+
+  const response = url.endsWith("test")
+    ? new Response("lorem ipsum", { statusText: "OK" })
+    : fetch(event.request);
+
+  event.respondWith(response);
 };

devtools/client/application/test/browser/resources/service-workers/debug.html

@@ -11,6 +11,15 @@
 <script type="text/javascript">
 "use strict";
 window.sw = navigator.serviceWorker.register("debug-sw.js");
+
+/* exported fetchFromWorker */
+async function fetchFromWorker() {
+  const response = await fetch("test");
+  const text = await response.text();
+  console.log(`Response from worker: ${text}`);
+}
 </script>
+
+<p>This page has a <code>fetchFromWorker()</code> function.</p>
 </body>
 </html>

devtools/client/application/test/node/actions/actions_application_panel-manifest.test.js

@@ -12,7 +12,7 @@ const { setupStore } = require("devtools/client/application/test/node/helpers");
 const {
   ManifestDevToolsError,
   services,
-} = require("devtools/client/application/src/modules/services");
+} = require("devtools/client/application/src/modules/application-services");
 
 const {
   FETCH_MANIFEST_FAILURE,

devtools/client/debugger/panel.js

@@ -9,6 +9,12 @@ loader.lazyRequireGetter(
   "devtools/client/shared/link",
   true
 );
+loader.lazyRequireGetter(
+  this,
+  "features",
+  "devtools/client/debugger/src/utils/prefs",
+  true
+);
 
 const DBG_STRINGS_URI = "devtools/client/locales/debugger.properties";
 const L10N = new LocalizationHelper(DBG_STRINGS_URI);
@@ -171,6 +177,29 @@ DebuggerPanel.prototype = {
     return this._actions.selectSourceURL(cx, url, { line, column });
   },
 
+  async selectWorker(workerTargetFront) {
+    const threadId = workerTargetFront.threadFront.actorID;
+    const isThreadAvailable = this._selectors
+      .getThreads(this._getState())
+      .find(x => x.actor === threadId);
+
+    if (!features.windowlessServiceWorkers) {
+      console.error(
+        "Selecting a worker needs the pref debugger.features.windowless-service-workers set to true"
+      );
+    } else if (!isThreadAvailable) {
+      console.error(`Worker ${threadId} is not available for debugging`);
+    } else {
+      // select worker's thread
+      const cx = this._selectors.getContext(this._getState());
+      this._actions.selectThread(cx, threadId);
+
+      // select worker's source
+      const source = this.getSourceByURL(workerTargetFront._url);
+      await this.selectSource(source.id, 1, 1);
+    }
+  },
+
   previewPausedLocation(location) {
     return this._actions.previewPausedLocation(location);
   },