centralise test server base URL

packages/trace-viewer/src/searchParams.ts

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+// needs to work both in window and service worker, so we use `self`
+const searchParams = new URLSearchParams(self.location.search); // see `installRootRedirect`
+
+const testServerBaseURL = new URL(self.location.href);
+const testServerPort = searchParams.get('testServerPort');
+if (testServerPort)
+  testServerBaseURL.port = testServerPort;
+
+const testServerWebSocketURL = new URL(`/${searchParams.get('ws')}`, testServerBaseURL);
+testServerWebSocketURL.protocol = (self.location.protocol === 'https:' ? 'wss:' : 'ws:');
+
+export { searchParams, testServerBaseURL, testServerWebSocketURL };

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

@@ -18,6 +18,7 @@ import type zip from '@zip.js/zip.js';
 // @ts-ignore
 import * as zipImport from '@zip.js/zip.js/lib/zip-no-worker-inflate.js';
 import type { TraceModelBackend } from './traceModel';
+import { testServerBaseURL } from '../searchParams';
 
 const zipjs = zipImport as typeof zip;
 

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 { testServerWebSocketURL, searchParams } from '../searchParams';
 
 let xtermSize = { cols: 80, rows: 24 };
 const xtermDataSource: XtermDataSource = {
@@ -46,11 +47,6 @@ const xtermDataSource: XtermDataSource = {
   resize: () => {},
 };
 
-const searchParams = new URLSearchParams(window.location.search);
-const guid = searchParams.get('ws');
-const wsURL = new URL(`../${guid}`, window.location.toString());
-wsURL.protocol = (window.location.protocol === 'https:' ? 'wss:' : 'ws:');
-wsURL.port = searchParams.get('testServerPort') ?? window.location.port;
 const queryParams = {
   args: searchParams.getAll('arg'),
   grep: searchParams.get('grep') || undefined,
@@ -111,7 +107,7 @@ export const UIModeView: React.FC<{}> = ({
   const inputRef = React.useRef<HTMLInputElement>(null);
 
   const reloadTests = React.useCallback(() => {
-    setTestServerConnection(new TestServerConnection(new WebSocketTestServerTransport(wsURL)));
+    setTestServerConnection(new TestServerConnection(new WebSocketTestServerTransport(testServerWebSocketURL)));
   }, []);
 
   // Load tests on startup.