wip: embedded trace viewer tests

Depends on microsoft/playwright#30885 being merged and @playwright/test being updated
ruifigueira · Jun 11, 2024 · 10350a5 · 10350a5
1 parent 4a2aaeb
commit 10350a5
Show file tree

Hide file tree

Showing 10 changed files with 277 additions and 121 deletions.
diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json
@@ -19,6 +19,7 @@
   "Show browser mode does not work in the Web mode": "Show browser mode does not work in the Web mode",
   "Show browser": "Show browser",
   "Show trace viewer": "Show trace viewer",
+  "Embedded": "Embedded",
   "Start dev server": "Start dev server",
   "Stop dev server": "Stop dev server",
   "this feature": "this feature",

diff --git a/media/settingsView.css b/media/settingsView.css
@@ -100,3 +100,7 @@ body[data-vscode-theme-kind=vscode-dark] div.separator {
   width: 4px;
   height: 4px;
 }
+
+.hidden {
+  display: none;
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -159,7 +159,7 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.23.2",
-    "@playwright/test": "1.44.0-beta-1714435420000",
+    "@playwright/test": "file:../playwright/packages/playwright-test",
     "@types/babel__core": "^7.20.3",
     "@types/babel__helper-plugin-utils": "^7.10.2",
     "@types/babel__traverse": "^7.20.3",

diff --git a/src/settingsView.ts b/src/settingsView.ts
@@ -278,7 +278,7 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
             <input type="checkbox" setting="showTrace"></input>
             ${vscode.l10n.t('Show trace viewer')}
           </label>
-          <label id="embedTraceViewerLabel" style="display: none">
+          <label id="embedTraceViewerLabel" class="hidden">
             <input type="checkbox" setting="embedTraceViewer"></input>
             ${vscode.l10n.t('Embedded')}
           </label>
@@ -321,7 +321,10 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
       function updateEmbedTraceViewer() {
         const embedTraceViewerLabel = document.getElementById('embedTraceViewerLabel');
         const showTrace = document.querySelector('[setting="showTrace"]');
-        embedTraceViewerLabel.style.display = showTrace.checked ? '' : 'none';
+        if (showTrace.checked)
+          embedTraceViewerLabel.classList.remove('hidden');
+        else
+          embedTraceViewerLabel.classList.add('hidden');
       }
       updateEmbedTraceViewer();
 
@@ -397,7 +400,10 @@ function htmlForWebview(vscode: vscodeTypes.VSCode, extensionUri: vscodeTypes.Ur
             updateProjects(configsMap.get(select.value).projects);
           });
           const modelSelector = document.getElementById('model-selector');
-          modelSelector.style.display = showModelSelector ? 'block' : 'none';
+          if (showModelSelector)
+            modelSelector.classList.remove('hidden');
+          else
+            modelSelector.classList.add('hidden');
         }
       });
     </script>

diff --git a/src/traceViewer.ts b/src/traceViewer.ts
@@ -100,7 +100,7 @@ class TraceViewerView extends DisposableBase {
       </body>`;
 
     const iframeBody = /* html */ `<body data-vscode-context='{ "preventDefaultContextMenuItems": true }'>
-        <iframe id="traceviewer" src="${escapeAttribute(url)}"></iframe>
+        <iframe id="traceviewer" src="${url}"></iframe>
         <script nonce="${nonce}">
           const vscode = acquireVsCodeApi();
           const iframe = document.getElementById('traceviewer');
@@ -134,14 +134,13 @@ class TraceViewerView extends DisposableBase {
       <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 *">
         <!-- 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">
-        <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 *">
       </head>
       ${url ? iframeBody : loadingBody}
 			</html>`;