share baseURL, fix sources tab

packages/trace-viewer/src/settings.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const searchParams = new URLSearchParams(window.location.search);
+
+export const testServerBaseURL = new URL(self.location.href);
+testServerBaseURL.port = searchParams.get('testServerPort') ?? testServerBaseURL.port;

packages/trace-viewer/src/sw/main.ts

@@ -85,7 +85,8 @@ async function doFetch(event: FetchEvent): Promise<Response> {
   // the https urls.
   const isDeployedAsHttps = self.registration.scope.startsWith('https://');
 
-  if (request.url.startsWith(self.registration.scope)) {
+  // test server runs on a different port in HMR mode, so we only look at the hostname
+  if (new URL(request.url).hostname === new URL(self.registration.scope).hostname) {
     const url = new URL(unwrapPopoutUrl(request.url));
     const relativePath = url.pathname.substring(scopePath.length - 1);
     if (relativePath === '/ping') {

packages/trace-viewer/src/ui/attachmentsTab.tsx

@@ -147,7 +147,6 @@ export const AttachmentsTab: React.FunctionComponent<{
 
 function attachmentURL(attachment: Attachment, queryParams: Record<string, string> = {}) {
   const params = new URLSearchParams(queryParams);
-  // TODO: put in testServerURL here
   if (attachment.sha1) {
     params.set('trace', attachment.traceUrl);
     return 'sha1/' + attachment.sha1 + '?' + params.toString();

packages/trace-viewer/src/ui/sourceTab.tsx

@@ -26,6 +26,7 @@ import type { StackFrame } from '@protocol/channels';
 import { CopyToClipboard } from './copyToClipboard';
 import { ToolbarButton } from '@web/components/toolbarButton';
 import { Toolbar } from '@web/components/toolbar';
+import { testServerBaseURL } from '../settings';
 
 export const SourceTab: React.FunctionComponent<{
   stack?: StackFrame[],
@@ -73,7 +74,7 @@ export const SourceTab: React.FunctionComponent<{
       try {
         let response = await fetch(`sha1/src@${sha1}.txt`);
         if (response.status === 404)
-          response = await fetch(`file?path=${encodeURIComponent(file)}`);
+          response = await fetch(new URL(`/trace/file?path=${encodeURIComponent(file)}`, testServerBaseURL));
         if (response.status >= 400)
           source.content = `<Unable to read "${file}">`;
         else

packages/trace-viewer/src/ui/uiModeTraceView.tsx

@@ -24,7 +24,7 @@ import type { ContextEntry } from '../types/entries';
 import type { SourceLocation } from './modelUtil';
 import { MultiTraceModel } from './modelUtil';
 import { Workbench } from './workbench';
-import { testServerBaseURL } from './uiModeView';
+import { testServerBaseURL } from '../settings';
 
 export const TraceView: React.FC<{
   item: { treeItem?: TreeItem, testFile?: SourceLocation, testCase?: reporterTypes.TestCase },

packages/trace-viewer/src/ui/uiModeView.tsx

@@ -37,6 +37,7 @@ import { FiltersView } from './uiModeFiltersView';
 import { TestListView } from './uiModeTestListView';
 import { TraceView } from './uiModeTraceView';
 import { SettingsView } from './settingsView';
+import { testServerBaseURL } from '../settings';
 
 let xtermSize = { cols: 80, rows: 24 };
 const xtermDataSource: XtermDataSource = {
@@ -47,9 +48,6 @@ const xtermDataSource: XtermDataSource = {
 };
 
 const searchParams = new URLSearchParams(window.location.search);
-export const testServerBaseURL = new URL(self.location.href);
-testServerBaseURL.port = searchParams.get('testServerPort') ?? testServerBaseURL.port;
-
 const wsURL = new URL(`/${searchParams.get('ws')}`, testServerBaseURL);
 wsURL.protocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:');
 const queryParams = {