2 lines
6 KiB
JavaScript
2 lines
6 KiB
JavaScript
import{M as m,r as s,T as M,W as C,j as e,D as F,a as I,b as k,c as z,d as O,e as V}from"./assets/defaultSettingsView-BEpdCv1S.js";const $=()=>{const[o,i]=s.useState(!1),[c,l]=s.useState(),[h,u]=s.useState(),[g,L]=s.useState(N),[p,x]=s.useState({done:0,total:0}),[b,v]=s.useState(!1),[j,S]=s.useState(null),[y,P]=s.useState(null),[R,E]=s.useState(!1),w=s.useCallback(t=>{const r=new URL(window.location.href);if(!t.length)return;const n=t.item(0),a=URL.createObjectURL(n);r.searchParams.append("trace",a);const d=r.toString();window.history.pushState({},"",d),l(a),u(n.name),v(!1),S(null)},[]);s.useEffect(()=>{const t=async r=>{var n;if((n=r.clipboardData)!=null&&n.files.length){for(const a of r.clipboardData.files)if(a.type!=="application/zip")return;r.preventDefault(),w(r.clipboardData.files)}};return document.addEventListener("paste",t),()=>document.removeEventListener("paste",t)}),s.useEffect(()=>{const t=r=>{const{method:n,params:a}=r.data;if(n!=="load"||!((a==null?void 0:a.trace)instanceof Blob))return;const d=new File([a.trace],"trace.zip",{type:"application/zip"}),f=new DataTransfer;f.items.add(d),w(f.files)};return window.addEventListener("message",t),()=>window.removeEventListener("message",t)});const U=s.useCallback(t=>{t.preventDefault(),w(t.dataTransfer.files)},[w]),W=s.useCallback(t=>{t.preventDefault(),t.target.files&&w(t.target.files)},[w]);s.useEffect(()=>{const t=new URL(window.location.href).searchParams,r=t.get("trace");if(i(t.has("isServer")),r!=null&&r.startsWith("file:")){P(r||null);return}if(t.has("isServer")){const n=new URLSearchParams(window.location.search).get("ws"),a=new URL(`../${n}`,window.location.toString());a.protocol=window.location.protocol==="https:"?"wss:":"ws:";const d=new M(new C(a));d.onLoadTraceRequested(async f=>{l(f.traceUrl),v(!1),S(null)}),d.initialize({}).catch(()=>{})}else r&&!r.startsWith("blob:")&&l(r)},[]),s.useEffect(()=>{(async()=>{if(!c){L(N);return}const t=r=>{r.data.method==="progress"&&x(r.data.params)};try{navigator.serviceWorker.addEventListener("message",t),x({done:0,total:1});const r=new URLSearchParams;r.set("trace",c);const n=await fetch(`contexts?${r.toString()}`);if(!n.ok){o||l(void 0),S((await n.json()).error);return}const a=await n.json(),d=new m(c,a);x({done:0,total:0}),L(d)}finally{navigator.serviceWorker.removeEventListener("message",t)}})()},[o,c,h]);const D=p.done!==p.total&&p.total!==0&&!j;s.useEffect(()=>{if(D){const t=setTimeout(()=>{E(!0)},200);return()=>clearTimeout(t)}else E(!1)},[D]);const T=!!(!o&&!b&&!y&&(!c||j));return e.jsxs("div",{className:"vbox workbench-loader",onDragOver:t=>{t.preventDefault(),v(!0)},children:[e.jsxs("div",{className:"hbox header",...T?{inert:!0}:{},children:[e.jsx("div",{className:"logo",children:e.jsx("img",{src:"playwright-logo.svg",alt:"Playwright logo"})}),e.jsx("div",{className:"product",children:"Playwright"}),g.title&&e.jsx("div",{className:"title",children:g.title}),e.jsx("div",{className:"spacer"}),e.jsx(F,{icon:"settings-gear",title:"Settings",dialogDataTestId:"settings-toolbar-dialog",children:e.jsx(I,{location:"trace-viewer"})})]}),e.jsx(k,{model:g,inert:T}),y&&e.jsxs("div",{className:"drop-target",children:[e.jsx("div",{children:"Trace Viewer uses Service Workers to show traces. To view trace:"}),e.jsxs("div",{style:{paddingTop:20},children:[e.jsxs("div",{children:["1. Click ",e.jsx("a",{href:y,children:"here"})," to put your trace into the download shelf"]}),e.jsxs("div",{children:["2. Go to ",e.jsx("a",{href:"https://trace.playwright.dev",children:"trace.playwright.dev"})]}),e.jsx("div",{children:"3. Drop the trace from the download shelf into the page"})]})]}),e.jsx(z,{open:R,isModal:!0,className:"progress-dialog",children:e.jsxs("div",{className:"progress-content",children:[e.jsx("div",{className:"title",role:"heading","aria-level":1,children:"Loading Playwright Trace..."}),e.jsx("div",{className:"progress-wrapper",children:e.jsx("div",{className:"inner-progress",style:{width:p.total?100*p.done/p.total+"%":0}})})]})}),T&&e.jsxs("div",{className:"drop-target",children:[e.jsx("div",{className:"processing-error",role:"alert",children:j}),e.jsx("div",{className:"title",role:"heading","aria-level":1,children:"Drop Playwright Trace to load"}),e.jsx("div",{children:"or"}),e.jsx("button",{onClick:()=>{const t=document.createElement("input");t.type="file",t.click(),t.addEventListener("change",r=>W(r))},type:"button",children:"Select file"}),e.jsx("div",{className:"info",children:"Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere, it opens it locally."}),e.jsxs("div",{className:"version",children:["Playwright v","1.57.0"]})]}),o&&!c&&e.jsx("div",{className:"drop-target",children:e.jsx("div",{className:"title",children:"Select test to see the trace"})}),b&&e.jsx("div",{className:"drop-target",onDragLeave:()=>{v(!1)},onDrop:t=>U(t),children:e.jsx("div",{className:"title",children:"Release to analyse the Playwright Trace"})})]})},N=new m("",[]),q=({traceJson:o})=>{const[i,c]=s.useState(void 0),[l,h]=s.useState(0),u=s.useRef(null);return s.useEffect(()=>(u.current&&clearTimeout(u.current),u.current=setTimeout(async()=>{try{const g=await A(o);c(g)}catch{const g=new m("",[]);c(g)}finally{h(l+1)}},500),()=>{u.current&&clearTimeout(u.current)}),[o,l]),e.jsx(k,{isLive:!0,model:i})};async function A(o){const i=new URLSearchParams;i.set("trace",o);const l=await(await fetch(`contexts?${i.toString()}`)).json();return new m(o,l)}(async()=>{const o=new URLSearchParams(window.location.search);if(O(),window.location.protocol!=="file:"){if(o.get("isUnderTest")==="true"&&await new Promise(h=>setTimeout(h,1e3)),!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"),navigator.serviceWorker.controller||await new Promise(h=>{navigator.serviceWorker.oncontrollerchange=()=>h()}),setInterval(function(){fetch("ping")},1e4)}const i=o.get("trace"),l=(i==null?void 0:i.endsWith(".json"))?e.jsx(q,{traceJson:i}):e.jsx($,{});V.createRoot(document.querySelector("#root")).render(l)})();
|