Fixes loading error (firefox-devtools#5090)

Author: yurydelendik

assets/panel/debugger.properties

@@ -581,6 +581,10 @@ pauseOnExceptions=Pause on all exceptions. Click to ignore exceptions
 # yet.
 loadingText=Loading\u2026
 
+# LOCALIZATION NOTE (wasmIsNotAvailable): The text that is displayed in the
+# script editor when the WebAssembly source is not available.
+wasmIsNotAvailable=Please refresh to debug this module
+
 # LOCALIZATION NOTE (errorLoadingText3): The text that is displayed in the debugger
 # viewer when there is an error loading a file
 errorLoadingText3=Error loading this URI: %S

src/actions/sources/loadSourceText.js

@@ -81,11 +81,17 @@ export function loadSourceText(source: SourceRecord) {
     }
 
     requests.set(id, deferred.promise);
-    await dispatch({
-      type: "LOAD_SOURCE_TEXT",
-      sourceId: id,
-      [PROMISE]: loadSource(source, { sourceMaps, client })
-    });
+    try {
+      await dispatch({
+        type: "LOAD_SOURCE_TEXT",
+        sourceId: id,
+        [PROMISE]: loadSource(source, { sourceMaps, client })
+      });
+    } catch (e) {
+      deferred.resolve();
+      requests.delete(id);
+      return;
+    }
 
     const newSource = getSource(getState(), source.get("id")).toJS();
 

src/actions/sources/tests/loadSource.spec.js

@@ -116,9 +116,7 @@ describe("loadSourceText", async () => {
   it("should indicate an errored source text", async () => {
     const { dispatch, getState } = createStore(sourceThreadClient);
 
-    await dispatch(actions.loadSourceText(I.Map({ id: "bad-id" }))).catch(
-      () => {}
-    );
+    await dispatch(actions.loadSourceText(I.Map({ id: "bad-id" })));
     const badSource = selectors.getSource(getState(), "bad-id");
     expect(badSource.get("error").indexOf("unknown source")).not.toBe(-1);
   });

src/components/Editor/index.js

@@ -46,13 +46,14 @@ import {
   showSourceText,
   updateDocument,
   showLoading,
+  showErrorMessage,
   shouldShowFooter,
   createEditor,
+  clearEditor,
   getCursorLine,
   toSourceLine,
   scrollToColumn,
   toEditorPosition,
-  resetLineNumberFormat,
   getSourceLocationFromMouseEvent
 } from "../../utils/editor";
 
@@ -442,28 +443,37 @@ class Editor extends PureComponent<Props, State> {
     }
 
     if (!selectedSource) {
-      return this.showMessage("");
+      return this.clearEditor();
     }
 
     if (!isLoaded(selectedSource)) {
       return showLoading(this.state.editor);
     }
 
     if (selectedSource.get("error")) {
-      return this.showMessage(selectedSource.get("error"));
+      return this.showErrorMessage(selectedSource.get("error"));
     }
     if (selectedSource) {
       return showSourceText(this.state.editor, selectedSource.toJS(), symbols);
     }
   }
 
-  showMessage(msg) {
+  clearEditor() {
     const { editor } = this.state;
     if (!editor) {
       return;
     }
 
-    resetLineNumberFormat(editor);
+    clearEditor(editor);
+  }
+
+  showErrorMessage(msg) {
+    const { editor } = this.state;
+    if (!editor) {
+      return;
+    }
+
+    showErrorMessage(editor, msg);
   }
 
   getInlineEditorStyles() {

src/components/Editor/tests/Editor.spec.js

@@ -70,7 +70,7 @@ describe("Editor", () => {
         selectedSource: I.fromJS({ loadedState: "loading" })
       });
 
-      expect(mockEditor.setText.mock.calls).toEqual([["Loading…"]]);
+      expect(mockEditor.setText.mock.calls).toEqual([[""], ["Loading…"]]);
       expect(mockEditor.codeMirror.scrollTo.mock.calls).toEqual([]);
     });
   });
@@ -86,11 +86,54 @@ describe("Editor", () => {
         selectedLocation: { sourceId: "foo", line: 3, column: 1 }
       });
 
-      expect(mockEditor.setText.mock.calls).toEqual([["the text"]]);
+      expect(mockEditor.setText.mock.calls).toEqual([[""], ["the text"]]);
       expect(mockEditor.codeMirror.scrollTo.mock.calls).toEqual([[1, 2]]);
     });
   });
 
+  describe("When error", () => {
+    it("should show error text", async () => {
+      const { component, mockEditor, props } = render({});
+
+      await component.setState({ editor: mockEditor });
+      await component.setProps({
+        ...props,
+        selectedSource: createMockSource({
+          loadedState: "loaded",
+          text: undefined,
+          error: "error text"
+        }),
+        selectedLocation: { sourceId: "bad-foo", line: 3, column: 1 }
+      });
+
+      expect(mockEditor.setText.mock.calls).toEqual([
+        [""],
+        ["Error loading this URI: error text"]
+      ]);
+    });
+
+    it("should show wasm error", async () => {
+      const { component, mockEditor, props } = render({});
+
+      await component.setState({ editor: mockEditor });
+      await component.setProps({
+        ...props,
+        selectedSource: createMockSource({
+          loadedState: "loaded",
+          isWasm: true,
+          text: undefined,
+          error: "blah WebAssembly binary source is not available blah"
+        }),
+        selectedLocation: { sourceId: "bad-foo", line: 3, column: 1 }
+      });
+
+      expect(mockEditor.setText.mock.calls).toEqual([
+        [""],
+        ["Please refresh to debug this module"]
+      ]);
+    });
+  });
+
   describe("When navigating to a loading source", () => {
     it("should show loading message and not scroll", async () => {
       const { component, mockEditor, props } = render({});
@@ -113,6 +156,7 @@ describe("Editor", () => {
       });
 
       expect(mockEditor.setText.mock.calls).toEqual([
+        [""],
         ["the text"],
         ["Loading…"]
       ]);
@@ -142,6 +186,7 @@ describe("Editor", () => {
       });
 
       expect(mockEditor.setText.mock.calls).toEqual([
+        [""],
         ["Loading…"],
         ["the text"]
       ]);

src/utils/editor/source-documents.js

@@ -64,6 +64,14 @@ function updateDocument(editor: SourceEditor, source: SourceRecord) {
   updateLineNumberFormat(editor, sourceId);
 }
 
+function clearEditor(editor: SourceEditor) {
+  const doc = editor.createDocument();
+  editor.replaceDocument(doc);
+  editor.setText("");
+  editor.setMode({ name: "text" });
+  resetLineNumberFormat(editor);
+}
+
 function showLoading(editor: SourceEditor) {
   if (hasDocument("loading")) {
     return;
@@ -76,6 +84,20 @@ function showLoading(editor: SourceEditor) {
   editor.setMode({ name: "text" });
 }
 
+function showErrorMessage(editor: Object, msg: string) {
+  let error;
+  if (msg.includes("WebAssembly binary source is not available")) {
+    error = L10N.getStr("wasmIsNotAvailable");
+  } else {
+    error = L10N.getFormatStr("errorLoadingText3", msg);
+  }
+  const doc = editor.createDocument();
+  editor.replaceDocument(doc);
+  editor.setText(error);
+  editor.setMode({ name: "text" });
+  resetLineNumberFormat(editor);
+}
+
 function setEditorText(editor: Object, source: Source) {
   const { text, id: sourceId } = source;
   if (source.isWasm) {
@@ -129,9 +151,10 @@ export {
   hasDocument,
   removeDocument,
   clearDocuments,
-  resetLineNumberFormat,
   updateLineNumberFormat,
   updateDocument,
+  clearEditor,
   showSourceText,
+  showErrorMessage,
   showLoading
 };

src/utils/source.js

@@ -203,7 +203,7 @@ export function getSourcePath(url: string) {
  * the function returns amount of bytes.
  */
 export function getSourceLineCount(source: Source) {
-  if (source.isWasm) {
+  if (source.isWasm && !source.error) {
     const { binary } = (source.text: any);
     return binary.length;
   }