Add windowless workers UI (#7525)

assets/panel/prefs.js

@@ -68,3 +68,4 @@ pref("devtools.debugger.features.autocomplete-expressions", false);
 pref("devtools.debugger.features.map-expression-bindings", true);
 pref("devtools.debugger.features.xhr-breakpoints", true);
 pref("devtools.debugger.features.origial-blackbox", false);
+pref("devtools.debugger.features.windowless-workers", false);

bin/copy-modules.js

@@ -24,7 +24,7 @@ function ignoreFile(file) {
   // We exclude worker files because they are bundled and we include
   // worker/index.js files because are required by the debugger app in order
   // to communicate with the worker.
-  if (file.match(/\/workers/) && !file.match(/index.js/)) {
+  if (file.match(/\/workers/) && !file.match(/workers.js/) && !file.match(/index.js/)) {
     return true;
   }
 

src/actions/expressions.js

@@ -5,6 +5,7 @@
 // @flow
 
 import {
+  getCurrentThread,
   getExpression,
   getExpressions,
   getSelectedFrame,
@@ -117,7 +118,11 @@ export function evaluateExpressions() {
     const expressions = getExpressions(getState()).toJS();
     const inputs = expressions.map(({ input }) => input);
     const frameId = getSelectedFrameId(getState());
-    const results = await client.evaluateExpressions(inputs, frameId);
+    const thread = getCurrentThread(getState());
+    const results = await client.evaluateExpressions(inputs, {
+      frameId,
+      thread
+    });
     dispatch({ type: "EVALUATE_EXPRESSIONS", inputs, results });
   };
 }
@@ -147,11 +152,16 @@ function evaluateExpression(expression: Expression) {
     }
 
     const frameId = getSelectedFrameId(getState());
+    const thread = getCurrentThread(getState());
 
     return dispatch({
       type: "EVALUATE_EXPRESSION",
+      thread,
       input: expression.input,
-      [PROMISE]: client.evaluateInFrame(wrapExpression(input), frameId)
+      [PROMISE]: client.evaluateInFrame(wrapExpression(input), {
+        frameId,
+        thread
+      })
     });
   };
 }

src/actions/navigation.js

@@ -54,10 +54,10 @@ export function navigate(url: string): Action {
   };
 }
 
-export function connect(url: string, canRewind: boolean) {
+export function connect(url: string, thread: string, canRewind: boolean) {
   return async function({ dispatch }: ThunkArgs) {
     await dispatch(updateWorkers());
-    dispatch(({ type: "CONNECT", url, canRewind }: Action));
+    dispatch(({ type: "CONNECT", url, thread, canRewind }: Action));
   };
 }
 

src/actions/pause/breakOnNext.js

@@ -5,6 +5,7 @@
 // @flow
 
 import type { ThunkArgs } from "../types";
+import { getCurrentThread } from "../../selectors";
 
 /**
  * Debugger breakOnNext command.
@@ -15,8 +16,9 @@ import type { ThunkArgs } from "../types";
  * @static
  */
 export function breakOnNext() {
-  return async ({ dispatch, client }: ThunkArgs) => {
-    await client.breakOnNext();
-    return dispatch({ type: "BREAK_ON_NEXT" });
+  return async ({ dispatch, getState, client }: ThunkArgs) => {
+    const thread = getCurrentThread(getState());
+    await client.breakOnNext(thread);
+    return dispatch({ type: "BREAK_ON_NEXT", thread });
   };
 }

src/actions/pause/commands.js

@@ -5,7 +5,12 @@
 
 // @flow
 
-import { isPaused, getSource, getTopFrame } from "../../selectors";
+import {
+  isPaused,
+  getCurrentThread,
+  getSource,
+  getTopFrame
+} from "../../selectors";
 import { PROMISE } from "../utils/middleware/promise";
 import { getNextStep } from "../../workers/parser";
 import { addHiddenBreakpoint } from "../breakpoints";
@@ -16,6 +21,15 @@ import type { Source } from "../../types";
 import type { ThunkArgs } from "../types";
 import type { Command } from "../../reducers/types";
 
+export function selectThread(thread: string) {
+  return async ({ dispatch, client }: ThunkArgs) => {
+    return dispatch({
+      type: "SELECT_THREAD",
+      thread
+    });
+  };
+}
+
 /**
  * Debugger commands like stepOver, stepIn, stepUp
  *
@@ -24,11 +38,13 @@ import type { Command } from "../../reducers/types";
  * @static
  */
 export function command(type: Command) {
-  return async ({ dispatch, client }: ThunkArgs) => {
+  return async ({ dispatch, getState, client }: ThunkArgs) => {
+    const thread = getCurrentThread(getState());
     return dispatch({
       type: "COMMAND",
       command: type,
-      [PROMISE]: client[type]()
+      thread,
+      [PROMISE]: client[type](thread)
     });
   };
 }

src/actions/pause/extra.js

@@ -4,7 +4,12 @@
 
 // @flow
 
-import { inComponent, getSelectedFrame } from "../../selectors";
+import {
+  getCurrentThread,
+  getSource,
+  inComponent,
+  getSelectedFrame
+} from "../../selectors";
 import { isImmutablePreview } from "../../utils/preview";
 
 import type { ThunkArgs } from "../types";
@@ -77,6 +82,7 @@ export function fetchExtra() {
     const extra = await dispatch(getExtra("this;", frame.this));
     dispatch({
       type: "ADD_EXTRA",
+      thread: getCurrentThread(getState()),
       extra: extra
     });
   };
@@ -89,8 +95,16 @@ export function getExtra(expression: string, result: Object) {
       return {};
     }
 
+    const source = getSource(getState(), selectedFrame.location.sourceId);
+    if (!source) {
+      return {};
+    }
+
     const extra = await getExtraProps(getState, expression, result, expr =>
-      client.evaluateInFrame(expr, selectedFrame.id)
+      client.evaluateInFrame(expr, {
+        frameId: selectedFrame.id,
+        thread: source.thread
+      })
     );
 
     return extra;

src/actions/pause/fetchScopes.js

@@ -4,7 +4,11 @@
 
 // @flow
 
-import { getSelectedFrame, getGeneratedFrameScope } from "../../selectors";
+import {
+  getCurrentThread,
+  getSelectedFrame,
+  getGeneratedFrameScope
+} from "../../selectors";
 import { mapScopes } from "./mapScopes";
 import { PROMISE } from "../utils/middleware/promise";
 import { fetchExtra } from "./extra";
@@ -19,6 +23,7 @@ export function fetchScopes() {
 
     const scopes = dispatch({
       type: "ADD_SCOPES",
+      thread: getCurrentThread(getState()),
       frame,
       [PROMISE]: client.getFrameScopes(frame)
     });

src/actions/pause/index.js

@@ -10,6 +10,7 @@
  */
 
 export {
+  selectThread,
   stepIn,
   stepOver,
   stepOut,

src/actions/pause/mapFrames.js

@@ -5,6 +5,7 @@
 // @flow
 
 import {
+  getCurrentThread,
   getFrames,
   getSymbols,
   getSource,
@@ -170,9 +171,11 @@ export function mapFrames() {
     mappedFrames = await expandFrames(mappedFrames, sourceMaps, getState);
     mappedFrames = mapDisplayNames(mappedFrames, getState);
 
+    const thread = getCurrentThread(getState());
     const selectedFrameId = getSelectedFrameId(getState(), mappedFrames);
     dispatch({
       type: "MAP_FRAMES",
+      thread,
       frames: mappedFrames,
       selectedFrameId
     });

src/actions/pause/mapScopes.js

@@ -4,7 +4,7 @@
 
 // @flow
 
-import { getSource } from "../../selectors";
+import { getCurrentThread, getSource } from "../../selectors";
 import { loadSourceText } from "../sources/loadSourceText";
 import { PROMISE } from "../utils/middleware/promise";
 
@@ -28,6 +28,7 @@ export function mapScopes(scopes: Promise<Scope>, frame: Frame) {
 
     await dispatch({
       type: "MAP_SCOPES",
+      thread: getCurrentThread(getState()),
       frame,
       [PROMISE]: (async function() {
         if (

src/actions/pause/pauseOnExceptions.js

@@ -7,6 +7,7 @@
 import { PROMISE } from "../utils/middleware/promise";
 import { recordEvent } from "../../utils/telemetry";
 import type { ThunkArgs } from "../types";
+import { getCurrentThread } from "../../selectors";
 
 /**
  *
@@ -17,7 +18,7 @@ export function pauseOnExceptions(
   shouldPauseOnExceptions: boolean,
   shouldPauseOnCaughtExceptions: boolean
 ) {
-  return ({ dispatch, client }: ThunkArgs) => {
+  return ({ dispatch, getState, client }: ThunkArgs) => {
     /* eslint-disable camelcase */
     recordEvent("pause_on_exceptions", {
       exceptions: shouldPauseOnExceptions,
@@ -26,11 +27,14 @@ export function pauseOnExceptions(
     });
     /* eslint-enable camelcase */
 
+    const thread = getCurrentThread(getState());
     return dispatch({
       type: "PAUSE_ON_EXCEPTIONS",
+      thread,
       shouldPauseOnExceptions,
       shouldPauseOnCaughtExceptions,
       [PROMISE]: client.pauseOnExceptions(
+        thread,
         shouldPauseOnExceptions,
         shouldPauseOnCaughtExceptions
       )

src/actions/pause/paused.js

@@ -38,7 +38,7 @@ async function getOriginalSourceForFrame(state, frame: Frame) {
  */
 export function paused(pauseInfo: Pause) {
   return async function({ dispatch, getState, client, sourceMaps }: ThunkArgs) {
-    const { frames, why, loadedObjects } = pauseInfo;
+    const { thread, frames, why, loadedObjects } = pauseInfo;
     const topFrame = frames.length > 0 ? frames[0] : null;
 
     // NOTE: do not step when leaving a frame or paused at a debugger statement
@@ -57,6 +57,7 @@ export function paused(pauseInfo: Pause) {
 
     dispatch({
       type: "PAUSED",
+      thread,
       why,
       frames,
       selectedFrameId: topFrame ? topFrame.id : undefined,

src/actions/pause/resumed.js

@@ -4,7 +4,7 @@
 
 // @flow
 
-import { isStepping, getPauseReason } from "../../selectors";
+import { getCurrentThread, isStepping, getPauseReason } from "../../selectors";
 import { evaluateExpressions } from "../expressions";
 import { inDebuggerEval } from "../../utils/pause";
 
@@ -21,8 +21,9 @@ export function resumed() {
     const why = getPauseReason(getState());
     const wasPausedInEval = inDebuggerEval(why);
     const wasStepping = isStepping(getState());
+    const thread = getCurrentThread(getState());
 
-    dispatch({ type: "RESUME" });
+    dispatch({ type: "RESUME", thread });
 
     if (!wasStepping && !wasPausedInEval) {
       await dispatch(evaluateExpressions());

src/actions/pause/selectFrame.js

@@ -7,6 +7,7 @@
 import { selectLocation } from "../sources";
 import { evaluateExpressions } from "../expressions";
 import { fetchScopes } from "./fetchScopes";
+import { getCurrentThread } from "../../selectors";
 
 import type { Frame } from "../../types";
 import type { ThunkArgs } from "../types";
@@ -19,6 +20,7 @@ export function selectFrame(frame: Frame) {
   return async ({ dispatch, client, getState, sourceMaps }: ThunkArgs) => {
     dispatch({
       type: "SELECT_FRAME",
+      thread: getCurrentThread(getState()),
       frame
     });
 

src/actions/pause/setPopupObjectProperties.js

@@ -4,7 +4,7 @@
 
 // @flow
 
-import { getPopupObjectProperties } from "../../selectors";
+import { getCurrentThread, getPopupObjectProperties } from "../../selectors";
 import type { ThunkArgs } from "../types";
 
 /**
@@ -19,8 +19,10 @@ export function setPopupObjectProperties(object: any, properties: Object) {
       return;
     }
 
+    const thread = getCurrentThread(getState());
     dispatch({
       type: "SET_POPUP_OBJECT_PROPERTIES",
+      thread,
       objectId,
       properties
     });

src/actions/pause/skipPausing.js

@@ -5,16 +5,17 @@
 // @flow
 
 import type { ThunkArgs } from "../types";
-import { getSkipPausing } from "../../selectors";
+import { getSkipPausing, getCurrentThread } from "../../selectors";
 
 /**
  * @memberof actions/pause
  * @static
  */
 export function toggleSkipPausing() {
   return async ({ dispatch, client, getState, sourceMaps }: ThunkArgs) => {
+    const thread = getCurrentThread(getState());
     const skipPausing = !getSkipPausing(getState());
-    await client.setSkipPausing(skipPausing);
-    dispatch({ type: "TOGGLE_SKIP_PAUSING", skipPausing });
+    await client.setSkipPausing(thread, skipPausing);
+    dispatch({ type: "TOGGLE_SKIP_PAUSING", thread, skipPausing });
   };
 }

src/actions/pause/tests/pause.spec.js

@@ -76,6 +76,7 @@ function createPauseInfo(
   frameOpts = {}
 ) {
   return {
+    thread: "FakeThread",
     frames: [
       makeFrame(
         { id: mockFrameId, sourceId: frameLocation.sourceId },

src/actions/preview.js

@@ -100,10 +100,10 @@ export function setPreview(
           return;
         }
 
-        const { result } = await client.evaluateInFrame(
-          expression,
-          selectedFrame.id
-        );
+        const { result } = await client.evaluateInFrame(expression, {
+          frameId: selectedFrame.id,
+          thread: source.thread
+        });
 
         if (result === undefined) {
           return;

src/actions/sources/newSources.js

@@ -40,6 +40,7 @@ function createOriginalSource(
     url: originalUrl,
     relativeUrl: originalUrl,
     id: generatedToOriginalId(generatedSource.id, originalUrl),
+    thread: "",
     isPrettyPrinted: false,
     isWasm: false,
     isBlackBoxed: false,