Implement fetching JS sources from browser via WebChannel (#5506)

Backend bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1916785
(but patches are from multiple bugs, see
https://phabricator.services.mozilla.com/D259273 for the whole stack)

This PR adds support for fetching the JS source code via WebChannel and
displaying them in the source view.

Author: canova

docs-developer/CHANGELOG-formats.md

@@ -6,6 +6,10 @@ Note that this is not an exhaustive list. Processed profile format upgraders can
 
 ## Processed profile format
 
+### Version 58
+
+A new `SourceTable` has been added to `profile.shared.sources` to centralize all source file information. The `FuncTable.fileName` field has been replaced with `FuncTable.source`, which references indices in the shared sources table. This change allows storing a UUID per JS source, which will be used for fetching sources.
+
 ### Version 57
 
 The `searchable` property in marker schemas, originally added in version 44, is now removed again. Now all marker fields are searchable.
@@ -122,6 +126,10 @@ Older versions are not documented in this changelog but can be found in [process
 
 ## Gecko profile format
 
+### Version 32
+
+`frameTable` `location` string field was changed to include an optional `sourceIndex` at the end of the string inside brackets for JS sources. For example, new JS frames look like this: `functionName (http://script.url/:1234:1234)[1234]` with the last number being its `sourceIndex`. This index references entries in the shared `SourceTable` in `profile.sources` (added in in the same version) which centralizes all source file information.
+
 ### Version 31
 
 Two new marker schema field format types have been added: `flow-id` and `terminating-flow-id`, with string index values (like `unique-string`).

locales/en-US/app.ftl

@@ -1243,6 +1243,15 @@ SourceView--not-in-archive-error-when-obtaining-source =
 SourceView--archive-parsing-error-when-obtaining-source =
     The archive at { $url } could not be parsed: { $parsingErrorMessage }
 
+# Displayed below SourceView--cannot-obtain-source, if a JS file could not be found in
+# the browser.
+# Variables:
+#   $url (String) - The URL of the JS source file.
+#   $sourceUuid (number) - The UUID of the JS source file.
+#   $errorMessage (String) - The raw internal error message, not localized
+SourceView--not-in-browser-error-when-obtaining-js-source =
+    The browser was unable to obtain the source file for { $url } with sourceUuid { $sourceUuid }: { $errorMessage }.
+
 ## Toggle buttons in the top right corner of the bottom box
 
 # The toggle button for the assembly view, while the assembly view is hidden.

src/actions/code.ts

@@ -6,30 +6,34 @@ import type {
   SourceCodeLoadingError,
   ApiQueryError,
   DecodedInstruction,
+  IndexIntoSourceTable,
 } from 'firefox-profiler/types';
 
 export function beginLoadingSourceCodeFromUrl(
-  file: string,
+  sourceIndex: IndexIntoSourceTable,
   url: string
 ): Action {
-  return { type: 'SOURCE_CODE_LOADING_BEGIN_URL', file, url };
+  return { type: 'SOURCE_CODE_LOADING_BEGIN_URL', sourceIndex, url };
 }
 
 export function beginLoadingSourceCodeFromBrowserConnection(
-  file: string
+  sourceIndex: IndexIntoSourceTable
 ): Action {
-  return { type: 'SOURCE_CODE_LOADING_BEGIN_BROWSER_CONNECTION', file };
+  return { type: 'SOURCE_CODE_LOADING_BEGIN_BROWSER_CONNECTION', sourceIndex };
 }
 
-export function finishLoadingSourceCode(file: string, code: string): Action {
-  return { type: 'SOURCE_CODE_LOADING_SUCCESS', file, code };
+export function finishLoadingSourceCode(
+  sourceIndex: IndexIntoSourceTable,
+  code: string
+): Action {
+  return { type: 'SOURCE_CODE_LOADING_SUCCESS', sourceIndex, code };
 }
 
 export function failLoadingSourceCode(
-  file: string,
+  sourceIndex: IndexIntoSourceTable,
   errors: SourceCodeLoadingError[]
 ): Action {
-  return { type: 'SOURCE_CODE_LOADING_ERROR', file, errors };
+  return { type: 'SOURCE_CODE_LOADING_ERROR', sourceIndex, errors };
 }
 
 export function beginLoadingAssemblyCodeFromUrl(

src/actions/profile-view.ts

@@ -1917,7 +1917,7 @@ export function changeTableViewOptions(
 
 export function updateBottomBoxContentsAndMaybeOpen(
   currentTab: TabSlug,
-  { libIndex, sourceFile, nativeSymbols }: BottomBoxInfo
+  { libIndex, sourceIndex, nativeSymbols }: BottomBoxInfo
 ): Action {
   // TODO: If the set has more than one element, pick the native symbol with
   // the highest total sample count
@@ -1926,12 +1926,12 @@ export function updateBottomBoxContentsAndMaybeOpen(
   return {
     type: 'UPDATE_BOTTOM_BOX',
     libIndex,
-    sourceFile,
+    sourceIndex,
     nativeSymbol,
     allNativeSymbolsForInitiatingCallNode: nativeSymbols,
     currentTab,
-    shouldOpenBottomBox: sourceFile !== null || nativeSymbol !== null,
-    shouldOpenAssemblyView: sourceFile === null && nativeSymbol !== null,
+    shouldOpenBottomBox: sourceIndex !== null || nativeSymbol !== null,
+    shouldOpenAssemblyView: sourceIndex === null && nativeSymbol !== null,
   };
 }
 

src/app-logic/browser-connection.ts

@@ -12,6 +12,7 @@ import {
   querySymbolicationApiViaWebChannel,
   getPageFaviconsViaWebChannel,
   showFunctionInDevtoolsViaWebChannel,
+  getJSSourcesViaWebChannel,
 } from './web-channel';
 import type {
   Milliseconds,
@@ -83,6 +84,8 @@ export interface BrowserConnection {
     line: number | null,
     column: number | null
   ): Promise<void>;
+
+  getJSSource(sourceUuid: string): Promise<string>;
 }
 
 /**
@@ -98,6 +101,7 @@ class BrowserConnectionImpl implements BrowserConnection {
   _webChannelSupportsGetExternalMarkers: boolean;
   _webChannelSupportsGetPageFavicons: boolean;
   _webChannelSupportsOpenDebuggerInTab: boolean;
+  _webChannelSupportsGetJSSource: boolean;
   _geckoProfiler: $GeckoProfiler | undefined;
 
   constructor(webChannelVersion: number) {
@@ -106,6 +110,7 @@ class BrowserConnectionImpl implements BrowserConnection {
     this._webChannelSupportsGetExternalMarkers = webChannelVersion >= 3;
     this._webChannelSupportsGetPageFavicons = webChannelVersion >= 4;
     this._webChannelSupportsOpenDebuggerInTab = webChannelVersion >= 5;
+    this._webChannelSupportsGetJSSource = webChannelVersion >= 6;
   }
 
   // Only called when we must obtain the profile from the browser, i.e. if we
@@ -226,6 +231,31 @@ class BrowserConnectionImpl implements BrowserConnection {
 
     return [];
   }
+
+  /**
+   * Fetches JavaScript source code from the browser using the source UUID.
+   * This method requires WebChannel version 6 or higher (Firefox 145+).
+   */
+  async getJSSource(sourceUuid: string): Promise<string> {
+    if (!this._webChannelSupportsGetJSSource) {
+      throw new Error(
+        "Can't use getJSSource in Firefox versions with the old WebChannel."
+      );
+    }
+
+    // Even though the WebChannel request for fetching JS sources supports
+    // fetching multiple sources, we only fetch one at a time currently.
+    // TODO: Change this to fetch multiple JS sources at the load time or while
+    // we share the profile.
+    return getJSSourcesViaWebChannel([sourceUuid]).then((sources) => {
+      const source = sources[0];
+      if ('error' in source) {
+        throw new Error(source.error);
+      }
+
+      return source.sourceText;
+    });
+  }
 }
 
 // Should work with:

src/app-logic/constants.ts

@@ -7,12 +7,12 @@ import type { MarkerPhase } from 'firefox-profiler/types';
 // The current version of the Gecko profile format.
 // Please don't forget to update the gecko profile format changelog in
 // `docs-developer/CHANGELOG-formats.md`.
-export const GECKO_PROFILE_VERSION = 31;
+export const GECKO_PROFILE_VERSION = 32;
 
 // The current version of the "processed" profile format.
 // Please don't forget to update the processed profile format changelog in
 // `docs-developer/CHANGELOG-formats.md`.
-export const PROCESSED_PROFILE_VERSION = 57;
+export const PROCESSED_PROFILE_VERSION = 58;
 
 // The following are the margin sizes for the left and right of the timeline. Independent
 // components need to share these values.

src/app-logic/url-handling.ts

@@ -47,8 +47,9 @@ import {
   encodeUintSetForUrlComponent,
 } from '../utils/uintarray-encoding';
 import { tabSlugs } from '../app-logic/tabs-handling';
+import { StringTable } from 'firefox-profiler/utils/string-table';
 
-export const CURRENT_URL_VERSION = 11;
+export const CURRENT_URL_VERSION = 12;
 
 /**
  * This static piece of state might look like an anti-pattern, but it's a relatively
@@ -171,7 +172,7 @@ type BaseQuery = {
   view: string;
   implementation: string;
   timelineType: string;
-  sourceView: string;
+  sourceViewIndex: number;
   assemblyView: string;
 };
 
@@ -208,7 +209,7 @@ type Query = BaseQuery & {
   invertCallstack?: null | undefined;
   ctSummary?: string;
   transforms?: string;
-  sourceView?: string;
+  sourceViewIndex?: number;
   assemblyView?: string;
 
   // StackChart specific
@@ -349,8 +350,8 @@ export function getQueryStringFromUrlState(urlState: UrlState): string {
         urlState.profileSpecific;
 
       if (isBottomBoxOpenPerPanel[selectedTab]) {
-        if (sourceView.sourceFile !== null) {
-          query.sourceView = sourceView.sourceFile;
+        if (sourceView.sourceIndex !== null) {
+          query.sourceViewIndex = sourceView.sourceIndex;
         }
         if (assemblyView.isOpen && assemblyView.nativeSymbol !== null) {
           query.assemblyView = stringifyAssemblyViewSymbol(
@@ -508,7 +509,7 @@ export function stateFromLocation(
   const sourceView: SourceViewState = {
     scrollGeneration: 0,
     libIndex: null,
-    sourceFile: null,
+    sourceIndex: null,
   };
   const assemblyView: AssemblyViewState = {
     isOpen: false,
@@ -518,8 +519,8 @@ export function stateFromLocation(
   };
   const isBottomBoxOpenPerPanel: any = {};
   tabSlugs.forEach((tabSlug) => (isBottomBoxOpenPerPanel[tabSlug] = false));
-  if (query.sourceView) {
-    sourceView.sourceFile = query.sourceView;
+  if (query.sourceViewIndex !== undefined) {
+    sourceView.sourceIndex = Number(query.sourceViewIndex);
     isBottomBoxOpenPerPanel[selectedTab] = true;
   }
   if (query.assemblyView) {
@@ -1162,6 +1163,35 @@ const _upgraders: {
       processedLocation.query = {};
     }
   },
+  [12]: (
+    processedLocation: ProcessedLocationBeforeUpgrade,
+    profile?: Profile
+  ) => {
+    // This version changes the source view parameter from 'sourceView' (filename
+    // string) to 'sourceViewIndex' (IndexIntoSourceTable). If we can't convert
+    // the filename to a source index, we just remove the sourceView parameter.
+    const { query } = processedLocation;
+    if (!('sourceView' in query) || !profile || !profile.shared.sources) {
+      return;
+    }
+
+    // Try to find the source index for the given filename
+    const filename = query.sourceView;
+    const { sources, stringArray } = profile.shared;
+    const stringTable = StringTable.withBackingArray(stringArray);
+
+    // Find the filename string index
+    const filenameStringIndex = stringTable.indexForString(filename);
+    if (filenameStringIndex !== -1) {
+      // Find the source index with this filename
+      const sourceIndex = sources.filename.indexOf(filenameStringIndex);
+      if (sourceIndex !== -1) {
+        query.sourceViewIndex = sourceIndex;
+      }
+    }
+    // Remove the old sourceView parameter regardless of whether we found a match
+    delete query.sourceView;
+  },
 };
 
 for (let destVersion = 1; destVersion <= CURRENT_URL_VERSION; destVersion++) {

src/app-logic/web-channel.ts

@@ -28,7 +28,8 @@ export type Request =
   | GetSymbolTableRequest
   | QuerySymbolicationApiRequest
   | GetPageFaviconsRequest
-  | OpenScriptInTabDebuggerRequest;
+  | OpenScriptInTabDebuggerRequest
+  | GetJSSourcesRequest;
 
 type StatusQueryRequest = { type: 'STATUS_QUERY' };
 type EnableMenuButtonRequest = { type: 'ENABLE_MENU_BUTTON' };
@@ -64,6 +65,10 @@ type OpenScriptInTabDebuggerRequest = {
   line: number | null;
   column: number | null;
 };
+type GetJSSourcesRequest = {
+  type: 'GET_JS_SOURCES';
+  sourceUuids: Array<string>;
+};
 
 export type MessageFromBrowser<R extends ResponseFromBrowser> =
   | OutOfBandErrorMessageFromBrowser
@@ -128,6 +133,10 @@ type StatusQueryResponse = {
   //  Shipped in Firefox 136.
   //  Adds support for showing the JS script in DevTools debugger.
   //    - OPEN_SCRIPT_IN_DEBUGGER
+  // Version 6:
+  //  Shipped in Firefox 145.
+  //  Adds support for fetching JS sources.
+  //    - GET_JS_SOURCES
   version?: number;
 };
 type EnableMenuButtonResponse = void;
@@ -138,6 +147,8 @@ type GetSymbolTableResponse = SymbolTableAsTuple;
 type QuerySymbolicationApiResponse = string;
 type GetPageFaviconsResponse = Array<FaviconData | null>;
 type OpenScriptInTabDebuggerResponse = void;
+type GetJSSourceReponseItem = { sourceText: string } | { error: string };
+type GetJSSourcesResponse = Array<GetJSSourceReponseItem>;
 
 // TypeScript function overloads for request/response pairs.
 function _sendMessageWithResponse(
@@ -167,6 +178,10 @@ function _sendMessageWithResponse(
 function _sendMessageWithResponse(
   request: OpenScriptInTabDebuggerRequest
 ): Promise<OpenScriptInTabDebuggerResponse>;
+function _sendMessageWithResponse(
+  request: GetJSSourcesRequest
+): Promise<GetJSSourcesResponse>;
+
 function _sendMessageWithResponse(request: Request): Promise<any> {
   const requestId = _requestId++;
   const type = request.type;
@@ -371,6 +386,15 @@ export async function showFunctionInDevtoolsViaWebChannel(
   });
 }
 
+export async function getJSSourcesViaWebChannel(
+  sourceUuids: Array<string>
+): Promise<Array<GetJSSourceReponseItem>> {
+  return _sendMessageWithResponse({
+    type: 'GET_JS_SOURCES',
+    sourceUuids,
+  });
+}
+
 /**
  * -----------------------------------------------------------------------------
  *

src/components/app/BottomBox.tsx

@@ -13,7 +13,6 @@ import { IonGraphView } from '../shared/IonGraphView';
 import { CodeLoadingOverlay } from './CodeLoadingOverlay';
 import { CodeErrorOverlay } from './CodeErrorOverlay';
 import {
-  getSourceViewFile,
   getSourceViewScrollGeneration,
   getAssemblyViewIsOpen,
   getAssemblyViewNativeSymbol,
@@ -29,7 +28,10 @@ import {
   getSourceViewCode,
   getAssemblyViewCode,
 } from 'firefox-profiler/selectors/code';
-import { getPreviewSelectionIsBeingModified } from 'firefox-profiler/selectors/profile';
+import {
+  getPreviewSelectionIsBeingModified,
+  getSourceViewFile,
+} from 'firefox-profiler/selectors/profile';
 import explicitConnect from 'firefox-profiler/utils/connect';
 
 import type { ConnectedProps } from 'firefox-profiler/utils/connect';

src/components/app/CodeErrorOverlay.tsx

@@ -112,6 +112,17 @@ export function CodeErrorOverlay({ errors }: CodeErrorOverlayProps) {
               </Localized>
             );
           }
+          case 'NOT_PRESENT_IN_BROWSER': {
+            const { sourceUuid, url, errorMessage } = error;
+            return (
+              <Localized
+                id="SourceView--not-in-browser-error-when-obtaining-js-source"
+                vars={{ url, sourceUuid, errorMessage }}
+              >
+                <li>{`The browser was unable to obtain the source file for ${url} with sourceUuid ${sourceUuid}: ${errorMessage}`}</li>
+              </Localized>
+            );
+          }
           default:
             throw assertExhaustiveCheck(error);
         }