chore(trace-viewer): ui tweaks

microsoft · Jun 16, 2024 · 1f55027 · 1f55027
1 parent 888c77f
commit 1f55027
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 23 deletions.
diff --git a/media/traceViewer.css b/media/traceViewer.css
@@ -53,3 +53,7 @@ iframe {
 .vscode-high-contrast .loading-indicator {
 	background-image: url('./loading-hc.svg');
 }
+
+.hidden {
+  display: none;
+}
diff --git a/src/traceViewer.ts b/src/traceViewer.ts
@@ -100,12 +100,23 @@ class TraceViewerView extends DisposableBase {
     const theme = getThemeMode(this._vscode);
     const origin = url ? new URL(url).origin : undefined;
 
-    const loadingBody = /* html */ `<body class="loading" data-vscode-context='{ "preventDefaultContextMenuItems": true }'>
-        <div class="loading-indicator"></div>
-      </body>`;
-
-    const iframeBody = /* html */ `<body data-vscode-context='{ "preventDefaultContextMenuItems": true }'>
-        <iframe id="traceviewer" src="${url}"></iframe>
+    return /* html */ `<!DOCTYPE html>
+      <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta
+          http-equiv="Content-Security-Policy"
+          content="default-src 'none'; img-src data: ${cspSource}; media-src ${cspSource}; script-src 'nonce-${nonce}'; style-src ${cspSource}; frame-src ${url ?? ''} ${cspSource} https:">
+        <!-- Disable pinch zooming -->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
+        <title>Playwright Trace Viewer</title>
+        <link rel="stylesheet" href="${escapeAttribute(this.extensionResource('media', 'traceViewer.css'))}" type="text/css" media="screen">
+      </head>
+      <body data-vscode-context='{ "preventDefaultContextMenuItems": true }'>
+        <div class="${url ? 'hidden' : 'loading'}">
+          <div class="loading-indicator"></div>
+        </div>
+        <iframe class="${url ? '' : 'hidden'}" id="traceviewer" src="${url ?? ''}"></iframe>
         <script nonce="${nonce}">
           const vscode = acquireVsCodeApi();
           const iframe = document.getElementById('traceviewer');
@@ -133,23 +144,7 @@ class TraceViewerView extends DisposableBase {
             }
           });
         </script>
-      </body>`;
-
-    return /* html */ `<!DOCTYPE html>
-      <html lang="en">
-      <head>
-        <meta charset="UTF-8">
-        <meta
-          http-equiv="Content-Security-Policy"
-          content="default-src 'none'; img-src data: ${cspSource}; media-src ${cspSource}; script-src 'nonce-${nonce}'; style-src ${cspSource}; frame-src ${url ?? ''} ${cspSource} https:">
-        <!-- Disable pinch zooming -->
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-
-        <title>Playwright Trace Viewer</title>
-
-        <link rel="stylesheet" href="${escapeAttribute(this.extensionResource('media', 'traceViewer.css'))}" type="text/css" media="screen">
-      </head>
-      ${url ? iframeBody : loadingBody}
+      </body>
 			</html>`;
   }