Suggest enabling the "JavaScript Sources" feature in the source view

locales/en-US/app.ftl

@@ -1284,6 +1284,13 @@ BottomBox--source-code-not-available-title = Source code not available
 SourceView--source-not-available-text =
     See <a>issue #3741</a> for supported scenarios and planned improvements.
 
+# Displayed in the source view when the source code for a JavaScript file could
+# not be obtained. It hints that the "JavaScript Sources" feature needs to be
+# enabled in the recording settings before capturing a profile.
+# "JavaScript Sources" and "about:profiling" should not be translated.
+SourceView--enable-js-sources-feature-hint =
+    To view the source of this JavaScript file, before recording the profile enable the “JavaScript Sources” feature in the recording settings in about:profiling.
+
 # Displayed whenever the assembly view was not able to get the assembly code for
 # a file.
 # Assembly refers to the low-level programming language.

src/components/app/BottomBox.tsx

@@ -38,6 +38,7 @@ import {
 import {
   getSourceViewFile,
   getSourceViewStartLine,
+  getSourceViewSourceId,
 } from 'firefox-profiler/selectors/profile';
 import explicitConnect from 'firefox-profiler/utils/connect';
 
@@ -60,6 +61,7 @@ import './BottomBox.css';
 type StateProps = {
   readonly isFullscreen: boolean;
   readonly sourceViewFile: string | null;
+  readonly sourceViewHasValidId: boolean;
   readonly sourceViewCode: SourceCodeStatus | void;
   readonly sourceViewScrollGeneration: number;
   readonly sourceViewScrollToLineNumber?: number;
@@ -82,13 +84,29 @@ type DispatchProps = {
 
 type Props = ConnectedProps<{}, StateProps, DispatchProps>;
 
-export function SourceCodeErrorOverlay({ errors }: CodeErrorOverlayProps) {
+type SourceCodeErrorOverlayProps = CodeErrorOverlayProps & {
+  readonly hasValidId: boolean;
+};
+
+export function SourceCodeErrorOverlay({
+  errors,
+  hasValidId,
+}: SourceCodeErrorOverlayProps) {
   return (
     <div className="sourceCodeErrorOverlay">
       <div>
         <Localized id="BottomBox--source-code-not-available-title">
           <h3>Source code not available</h3>
         </Localized>
+        {hasValidId ? (
+          <Localized id="SourceView--enable-js-sources-feature-hint">
+            <p>
+              To view the source of this JavaScript file, enable the “JavaScript
+              Sources” feature in the recording settings on about:profiling
+              before recording the profile.
+            </p>
+          </Localized>
+        ) : null}
         <Localized
           id="SourceView--source-not-available-text"
           elems={{
@@ -186,6 +204,7 @@ class BottomBoxImpl extends React.PureComponent<Props> {
     const {
       isFullscreen,
       sourceViewFile,
+      sourceViewHasValidId,
       sourceViewCode,
       globalLineTimings,
       sourceViewScrollGeneration,
@@ -278,7 +297,10 @@ class BottomBoxImpl extends React.PureComponent<Props> {
               <CodeLoadingOverlay source={sourceViewCode.source} />
             ) : null}
             {sourceViewCode !== undefined && sourceViewCode.type === 'ERROR' ? (
-              <SourceCodeErrorOverlay errors={sourceViewCode.errors} />
+              <SourceCodeErrorOverlay
+                errors={sourceViewCode.errors}
+                hasValidId={sourceViewHasValidId}
+              />
             ) : null}
           </div>
         </div>
@@ -341,6 +363,7 @@ export const BottomBox = explicitConnect<{}, StateProps, DispatchProps>({
   mapStateToProps: (state) => ({
     isFullscreen: getIsBottomBoxFullscreen(state),
     sourceViewFile: getSourceViewFile(state),
+    sourceViewHasValidId: getSourceViewSourceId(state) !== null,
     sourceViewCode: getSourceViewCode(state),
     globalLineTimings: selectedThreadSelectors.getSourceViewLineTimings(state),
     sourceViewScrollGeneration: getSourceViewScrollGeneration(state),

src/test/components/BottomBox.test.tsx

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux';
 import { stripIndent } from 'common-tags';
 
 import { ProfileViewer } from 'firefox-profiler/components/app/ProfileViewer';
+import { SourceCodeErrorOverlay } from 'firefox-profiler/components/app/BottomBox';
 import { updateUrlState } from 'firefox-profiler/actions/app';
 import { viewProfile } from 'firefox-profiler/actions/receive-profile';
 import { stateFromLocation } from 'firefox-profiler/app-logic/url-handling';
@@ -238,3 +239,17 @@ describe('BottomBox', () => {
     expect(nextButton).toBeEnabled();
   });
 });
+
+describe('SourceCodeErrorOverlay', () => {
+  const errors = [{ type: 'NO_KNOWN_CORS_URL' } as const];
+
+  it('shows the JS sources hint when the source has a valid id', () => {
+    render(<SourceCodeErrorOverlay errors={errors} hasValidId={true} />);
+    expect(screen.getByText(/JavaScript Sources/)).toBeInTheDocument();
+  });
+
+  it('does not show the JS sources hint when the source has no id', () => {
+    render(<SourceCodeErrorOverlay errors={errors} hasValidId={false} />);
+    expect(screen.queryByText(/JavaScript Sources/)).not.toBeInTheDocument();
+  });
+});