@checkly/playwright-core 1.51.15-beta.1 → 1.51.16-beta.0

package/lib/vite/traceViewer/index.DilotR1h.js

@@ -0,0 +1,314 @@
+import { r as reactExports, j as jsxRuntimeExports, T as ToolbarButton, M as MultiTraceModel, a as applyTheme, c as clientExports } from "./assets/inspectorTab-CwgfffWb.js";
+import { L as LLMProvider, W as Workbench } from "./assets/workbench-CWZselvp.js";
+import { D as DefaultSettingsView, T as TestServerConnection, W as WebSocketTestServerTransport } from "./assets/defaultSettingsView-CBiB4avC.js";
+const Dialog = ({
+  className,
+  style: externalStyle,
+  open,
+  width,
+  verticalOffset,
+  requestClose,
+  anchor,
+  dataTestId,
+  children
+}) => {
+  const dialogRef = reactExports.useRef(null);
+  const [_, setRecalculateDimensionsCount] = reactExports.useState(0);
+  let style = externalStyle;
+  if (anchor == null ? void 0 : anchor.current) {
+    const bounds = anchor.current.getBoundingClientRect();
+    style = {
+      position: "fixed",
+      margin: 0,
+      top: bounds.bottom + (verticalOffset ?? 0),
+      left: buildTopLeftCoord(bounds, width),
+      width,
+      zIndex: 1,
+      ...externalStyle
+    };
+  }
+  reactExports.useEffect(() => {
+    const onClick = (event) => {
+      if (!dialogRef.current || !(event.target instanceof Node))
+        return;
+      if (!dialogRef.current.contains(event.target))
+        requestClose == null ? void 0 : requestClose();
+    };
+    const onKeyDown = (event) => {
+      if (event.key === "Escape")
+        requestClose == null ? void 0 : requestClose();
+    };
+    if (open) {
+      document.addEventListener("mousedown", onClick);
+      document.addEventListener("keydown", onKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", onClick);
+        document.removeEventListener("keydown", onKeyDown);
+      };
+    }
+    return () => {
+    };
+  }, [open, requestClose]);
+  reactExports.useEffect(() => {
+    const onResize = () => setRecalculateDimensionsCount((count) => count + 1);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+  return open && /* @__PURE__ */ jsxRuntimeExports.jsx("dialog", { ref: dialogRef, style, className, "data-testid": dataTestId, open: true, children });
+};
+const buildTopLeftCoord = (bounds, width) => {
+  const leftAlignCoord = buildTopLeftCoordWithAlignment(bounds, width, "left");
+  if (leftAlignCoord.inBounds)
+    return leftAlignCoord.value;
+  const rightAlignCoord = buildTopLeftCoordWithAlignment(
+    bounds,
+    width,
+    "right"
+  );
+  if (rightAlignCoord.inBounds)
+    return rightAlignCoord.value;
+  return leftAlignCoord.value;
+};
+const buildTopLeftCoordWithAlignment = (bounds, width, alignment) => {
+  const maxLeft = document.documentElement.clientWidth;
+  if (alignment === "left") {
+    const value = bounds.left;
+    return {
+      value,
+      inBounds: value + width <= maxLeft
+    };
+  } else {
+    const value = bounds.right - width;
+    return {
+      value,
+      inBounds: bounds.right - width >= 0
+    };
+  }
+};
+const SettingsToolbarButton = () => {
+  const hostingRef = reactExports.useRef(null);
+  const [open, setOpen] = reactExports.useState(false);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ToolbarButton,
+      {
+        ref: hostingRef,
+        icon: "settings-gear",
+        title: "Settings",
+        onClick: () => setOpen((current) => !current)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Dialog,
+      {
+        style: {
+          backgroundColor: "var(--vscode-sideBar-background)",
+          padding: "4px 8px"
+        },
+        open,
+        width: 200,
+        verticalOffset: 8,
+        requestClose: () => setOpen(false),
+        anchor: hostingRef,
+        dataTestId: "settings-toolbar-dialog",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultSettingsView, {})
+      }
+    )
+  ] });
+};
+const WorkbenchLoader = () => {
+  const [isServer, setIsServer] = reactExports.useState(false);
+  const [traceURLs, setTraceURLs] = reactExports.useState([]);
+  const [uploadedTraceNames, setUploadedTraceNames] = reactExports.useState([]);
+  const [model, setModel] = reactExports.useState(emptyModel);
+  const [progress, setProgress] = reactExports.useState({ done: 0, total: 0 });
+  const [dragOver, setDragOver] = reactExports.useState(false);
+  const [processingErrorMessage, setProcessingErrorMessage] = reactExports.useState(null);
+  const [fileForLocalModeError, setFileForLocalModeError] = reactExports.useState(null);
+  const processTraceFiles = reactExports.useCallback((files) => {
+    const blobUrls = [];
+    const fileNames = [];
+    const url = new URL(window.location.href);
+    for (let i = 0; i < files.length; i++) {
+      const file = files.item(i);
+      if (!file)
+        continue;
+      const blobTraceURL = URL.createObjectURL(file);
+      blobUrls.push(blobTraceURL);
+      fileNames.push(file.name);
+      url.searchParams.append("trace", blobTraceURL);
+      url.searchParams.append("traceFileName", file.name);
+    }
+    const href = url.toString();
+    window.history.pushState({}, "", href);
+    setTraceURLs(blobUrls);
+    setUploadedTraceNames(fileNames);
+    setDragOver(false);
+    setProcessingErrorMessage(null);
+  }, []);
+  reactExports.useEffect(() => {
+    const listener = async (e) => {
+      var _a;
+      if (!((_a = e.clipboardData) == null ? void 0 : _a.files.length))
+        return;
+      for (const file of e.clipboardData.files) {
+        if (file.type !== "application/zip")
+          return;
+      }
+      e.preventDefault();
+      processTraceFiles(e.clipboardData.files);
+    };
+    document.addEventListener("paste", listener);
+    return () => document.removeEventListener("paste", listener);
+  });
+  const handleDropEvent = reactExports.useCallback((event) => {
+    event.preventDefault();
+    processTraceFiles(event.dataTransfer.files);
+  }, [processTraceFiles]);
+  const handleFileInputChange = reactExports.useCallback((event) => {
+    event.preventDefault();
+    if (!event.target.files)
+      return;
+    processTraceFiles(event.target.files);
+  }, [processTraceFiles]);
+  reactExports.useEffect(() => {
+    const params = new URL(window.location.href).searchParams;
+    const newTraceURLs = params.getAll("trace");
+    setIsServer(params.has("isServer"));
+    for (const url of newTraceURLs) {
+      if (url.startsWith("file:")) {
+        setFileForLocalModeError(url || null);
+        return;
+      }
+    }
+    if (params.has("isServer")) {
+      const guid = new URLSearchParams(window.location.search).get("ws");
+      const wsURL = new URL(`../${guid}`, window.location.toString());
+      wsURL.protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      const testServerConnection = new TestServerConnection(new WebSocketTestServerTransport(wsURL));
+      testServerConnection.onLoadTraceRequested(async (params2) => {
+        setTraceURLs(params2.traceUrl ? [params2.traceUrl] : []);
+        setDragOver(false);
+        setProcessingErrorMessage(null);
+      });
+      testServerConnection.initialize({}).catch(() => {
+      });
+    } else if (!newTraceURLs.some((url) => url.startsWith("blob:"))) {
+      setTraceURLs(newTraceURLs);
+    }
+  }, []);
+  reactExports.useEffect(() => {
+    (async () => {
+      if (traceURLs.length) {
+        const swListener = (event) => {
+          if (event.data.method === "progress")
+            setProgress(event.data.params);
+        };
+        navigator.serviceWorker.addEventListener("message", swListener);
+        setProgress({ done: 0, total: 1 });
+        const contextEntries = [];
+        for (let i = 0; i < traceURLs.length; i++) {
+          const url = traceURLs[i];
+          const params = new URLSearchParams();
+          params.set("trace", url);
+          if (uploadedTraceNames.length)
+            params.set("traceFileName", uploadedTraceNames[i]);
+          params.set("limit", String(traceURLs.length));
+          const response = await fetch(`contexts?${params.toString()}`);
+          if (!response.ok) {
+            if (!isServer)
+              setTraceURLs([]);
+            setProcessingErrorMessage((await response.json()).error);
+            return;
+          }
+          contextEntries.push(...await response.json());
+        }
+        navigator.serviceWorker.removeEventListener("message", swListener);
+        const model2 = new MultiTraceModel(contextEntries);
+        setProgress({ done: 0, total: 0 });
+        setModel(model2);
+      } else {
+        setModel(emptyModel);
+      }
+    })();
+  }, [isServer, traceURLs, uploadedTraceNames]);
+  const showFileUploadDropArea = !!(!isServer && !dragOver && !fileForLocalModeError && (!traceURLs.length || processingErrorMessage));
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox workbench-loader", onDragOver: (event) => {
+    event.preventDefault();
+    setDragOver(true);
+  }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "hbox header", ...showFileUploadDropArea ? { inert: "true" } : {}, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "logo", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: "playwright-logo.svg", alt: "Playwright logo" }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "product", children: "Playwright" }),
+      model.title && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "title", children: model.title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "spacer" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsToolbarButton, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "progress", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "inner-progress", style: { width: progress.total ? 100 * progress.done / progress.total + "%" : 0 } }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(LLMProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Workbench, { model, inert: showFileUploadDropArea }) }),
+    fileForLocalModeError && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "drop-target", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Trace Viewer uses Service Workers to show traces. To view trace:" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { paddingTop: 20 }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "1. Click ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: fileForLocalModeError, children: "here" }),
+          " to put your trace into the download shelf"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+          "2. Go to ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: "https://trace.playwright.dev", children: "trace.playwright.dev" })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "3. Drop the trace from the download shelf into the page" })
+      ] })
+    ] }),
+    showFileUploadDropArea && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "drop-target", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "processing-error", role: "alert", children: processingErrorMessage }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "title", role: "heading", "aria-level": 1, children: "Drop Playwright Trace to load" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "or" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("button", { onClick: () => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.multiple = true;
+        input.click();
+        input.addEventListener("change", (e) => handleFileInputChange(e));
+      }, type: "button", children: "Select file(s)" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { maxWidth: 400 }, children: "Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere, it opens it locally." })
+    ] }),
+    isServer && !traceURLs.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "drop-target", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "title", children: "Select test to see the trace" }) }),
+    dragOver && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: "drop-target",
+        onDragLeave: () => {
+          setDragOver(false);
+        },
+        onDrop: (event) => handleDropEvent(event),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "title", children: "Release to analyse the Playwright Trace" })
+      }
+    )
+  ] });
+};
+const emptyModel = new MultiTraceModel([]);
+(async () => {
+  applyTheme();
+  if (window.location.protocol !== "file:") {
+    if (window.location.href.includes("isUnderTest=true"))
+      await new Promise((f) => setTimeout(f, 1e3));
+    if (!navigator.serviceWorker)
+      throw new Error(`Service workers are not supported.
+Make sure to serve the Trace Viewer (${window.location}) via HTTPS or localhost.`);
+    navigator.serviceWorker.register("sw.bundle.js");
+    if (!navigator.serviceWorker.controller) {
+      await new Promise((f) => {
+        navigator.serviceWorker.oncontrollerchange = () => f();
+      });
+    }
+    setInterval(function() {
+      fetch("ping");
+    }, 1e4);
+  }
+  clientExports.createRoot(document.querySelector("#root")).render(/* @__PURE__ */ jsxRuntimeExports.jsx(WorkbenchLoader, {}));
+})();
+//# sourceMappingURL=index.DilotR1h.js.map

package/lib/vite/traceViewer/index.QewjJ85u.css

@@ -0,0 +1,131 @@
+/*
+  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.
+*/
+
+.drop-target {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: auto;
+  flex-direction: column;
+  background-color: var(--vscode-editor-background);
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 100;
+  line-height: 24px;
+}
+
+body .drop-target {
+  background: rgba(255, 255, 255, 0.8);
+}
+
+body.dark-mode .drop-target {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.drop-target .title {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 30px;
+}
+
+.drop-target .processing-error {
+  font-size: 24px;
+  color: #e74c3c;
+  font-weight: bold;
+  text-align: center;
+  margin: 30px;
+}
+
+.drop-target input {
+  margin-top: 50px;
+}
+
+.drop-target button {
+  color: rgb(255, 255, 255);
+  background-color: rgb(0, 122, 204);
+  padding: 8px 12px;
+  border: none;
+  margin: 30px 0;
+  cursor: pointer;
+}
+
+.progress {
+  flex: none;
+  width: 100%;
+  height: 3px;
+  margin-top: -3px;
+  z-index: 10;
+}
+
+.inner-progress {
+  background-color: var(--vscode-progressBar-background);
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  background-color: #000;
+  flex: none;
+  flex-basis: 48px;
+  line-height: 48px;
+  font-size: 16px;
+  color: #cccccc;
+}
+
+.workbench-loader {
+  contain: size;
+}
+
+.workbench-loader .header .toolbar-button {
+  margin: 12px;
+  padding: 8px 4px;
+}
+
+.workbench-loader .logo {
+  margin-left: 16px;
+  display: flex;
+  align-items: center;
+}
+
+.workbench-loader .logo img {
+  height: 32px;
+  width: 32px;
+  pointer-events: none;
+  flex: none;
+}
+
+.workbench-loader .product {
+  font-weight: 600;
+  margin-left: 16px;
+  flex: none;
+}
+
+.workbench-loader .header .title {
+  margin-left: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+
+/* Limit to a reasonable minimum viewport */
+html, body {
+  min-width: 550px;
+  min-height: 450px;
+  overflow: auto;
+}

package/lib/vite/traceViewer/index.html

@@ -7,14 +7,14 @@
     <link rel="icon" href="./playwright-logo.svg" type="image/svg+xml">
     <link rel="manifest" href="./manifest.webmanifest">
     <title>Playwright Trace Viewer</title>
-    <script type="module" crossorigin src="./index.CuE3SYGw.js"></script>
-    <link rel="modulepreload" crossorigin href="./assets/inspectorTab-6Tru8Mn_.js">
-    <link rel="modulepreload" crossorigin href="./assets/workbench-B_Nj4NA2.js">
-    <link rel="modulepreload" crossorigin href="./assets/defaultSettingsView-B5n_FjMx.js">
-    <link rel="stylesheet" crossorigin href="./inspectorTab.CXDulcFG.css">
-    <link rel="stylesheet" crossorigin href="./workbench.B9vIAzH9.css">
-    <link rel="stylesheet" crossorigin href="./defaultSettingsView.CO3FR0CX.css">
-    <link rel="stylesheet" crossorigin href="./index.CFOW-Ezb.css">
+    <script type="module" crossorigin src="./index.DilotR1h.js"></script>
+    <link rel="modulepreload" crossorigin href="./assets/inspectorTab-CwgfffWb.js">
+    <link rel="modulepreload" crossorigin href="./assets/workbench-CWZselvp.js">
+    <link rel="modulepreload" crossorigin href="./assets/defaultSettingsView-CBiB4avC.js">
+    <link rel="stylesheet" crossorigin href="./inspectorTab.DnGm18kV.css">
+    <link rel="stylesheet" crossorigin href="./workbench.xUZSA8PY.css">
+    <link rel="stylesheet" crossorigin href="./defaultSettingsView.Dp3b_92q.css">
+    <link rel="stylesheet" crossorigin href="./index.QewjJ85u.css">
   </head>
   <body>
     <div id="root"></div>