Timeline events can cause significant performance overhead in large applications, so we recommend enabling it only when needed and on-demand.
",html:!0},void 0,{"bottom-end":!0}]])])])):q("",!0)]))}}),A0=A1(k0,[["__scopeId","data-v-3dbcfd2a"]]),Q2=Symbol("SelectedSymbolKey");function x0(){const h=S("");return p1(Q2,h),{selected:h}}function _0(){const h=d1(Q2,S(""));function l(c){h.value=c}return{selected:h,select:l}}const I0=["onClick","onDblclick","onMouseover"],E0={key:1,pl5:""},T0={"font-state-field":"","text-3.5":""},q0={key:0,class:"text-gray-400 dark:text-gray-600 group-hover:text-white group-hover:op50 [.active_&]:op50 [.active_&]:text-white!"},$0={"group-hover:text-white":"",class:"ws-nowrap [.active_&]:text-white"},R0={key:2,class:"text-gray-400 dark:text-gray-600 group-hover:text-white group-hover:op50 [.active_&]:op50 [.active_&]:text-white!"},P0={key:2,class:"ml-2 rounded-sm bg-blue-400 px-1 text-[0.75rem] leading-snug dark:bg-blue-800"},B0={key:3,class:"ml-2 rounded-sm bg-gray-500 px-1 text-[0.75rem] leading-snug"},D0={key:0},n2=R({__name:"TreeViewer",props:w1({data:{},depth:{default:0},withTag:{type:Boolean,default:!1}},{modelValue:{},modelModifiers:{}}),emits:w1(["hover","leave"],["update:modelValue"]),setup(h,{emit:l}){const c=l,e=K1(h,"modelValue"),{expanded:a,toggleExpanded:r}=r2();_0();function s(t){return"name"in t&&t?.name||"label"in t&&t.label}function i(t){e.value=t}return(t,u)=>(n(!0),z(W,null,h1(t.data,(v,m)=>{var M,A;return n(),z("div",{key:m,class:N({"min-w-max":t.depth===0})},[d("div",{class:N(["group flex cursor-pointer items-center rounded-1 hover:bg-primary-300 hover:dark:bg-gray-600",{"bg-primary-600! active":e.value===v.id}]),style:V1({paddingLeft:`${15*t.depth+4}px`}),onClick:g=>i(v.id),onDblclick:g=>o(r)(v.id),onMouseover:()=>c("hover",v.id),onMouseleave:u[0]||(u[0]=()=>c("leave"))},[(M=v?.children)!=null&&M.length?(n(),P(e2,{key:0,value:o(a).includes(v.id),class:"[.active_&]:op20 group-hover:op20",onClick:i1(g=>o(r)(v.id),["stop"])},null,8,["value","onClick"])):(n(),z("span",E0)),d("span",T0,[t.withTag?(n(),z("span",q0,"<")):q("",!0),d("span",$0,X(s(v)),1),(v.renderKey===0||v.renderKey)&&v.renderKey!==o(I2)?(n(),z("span",{key:1,class:N(["text-xs opacity-50",{"opacity-100":e.value===v.id}])},[d("span",{class:N([e.value===v.id?"text-purple-200":"text-purple-500"])}," key",2),u[4]||(u[4]=Q("=")),d("span",null,X(v.renderKey),1)],2)):q("",!0),t.withTag?(n(),z("span",R0,">")):q("",!0)]),v.isFragment?F((n(),z("span",P0,u[5]||(u[5]=[Q(" fragment ")]))),[[o(Z),"Has multiple root DOM nodes"]]):q("",!0),v.inactive?F((n(),z("span",B0,u[6]||(u[6]=[Q(" inactive ")]))),[[o(Z),"Currently inactive but not destroyed"]]):q("",!0),(n(!0),z(W,null,h1(v.tags,(g,p)=>(n(),P(N2,{key:p,tag:g},null,8,["tag"]))),128))],46,I0),(A=v?.children)!=null&&A.length&&o(a).includes(v.id)?(n(),z("div",D0,[V(n2,{modelValue:e.value,"onUpdate:modelValue":u[1]||(u[1]=g=>e.value=g),data:v?.children,depth:t.depth+1,"with-tag":t.withTag,onHover:u[2]||(u[2]=g=>c("hover",g)),onLeave:u[3]||(u[3]=g=>c("leave"))},null,8,["modelValue","data","depth","with-tag"])])):q("",!0)],2)}),128))}}),w2=200;function j0(){const h=g2(c=>$.value.highlighComponent(c),w2),l=g2(()=>$.value.unhighlight(),w2);return{highlight:h,unhighlight:l}}const N0={class:"absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-#121212"},O0={class:"flex-1 overflow-scroll text-3.5"},U0=R({__name:"RenderCode",props:{code:{}},emits:["close"],setup(h,{emit:l}){const c=l;function e(){c("close")}return(a,r)=>(n(),z("div",N0,[d("div",{class:"h-12 w-full flex items-center justify-between p-2"},[r[0]||(r[0]=d("span",{class:"font-500"},"Render Code",-1)),d("i",{class:"i-carbon-close cursor-pointer hover:op80",onClick:e})]),d("div",O0,[V(o(K5),{code:a.code,lang:"javascript"},null,8,["code"])])]))}}),F0={class:"h-full w-full"},G0={class:"no-scrollbar h-full flex select-none gap-2 overflow-scroll"},Z0={key:0,class:"h-full flex flex-col p2"},K0={class:"flex py2"},W0={xmlns:"http://www.w3.org/2000/svg",style:{height:"1.1em",width:"1.1em"},class:"op-80 hover:op-100",viewBox:"0 0 24 24"},J0={class:"h-full flex flex-col p2"},Q0={class:"flex py2"},X0={key:0,class:"font-state-field flex items-center px-1 text-3.5"},Y0={"group-hover:text-white":"",class:"max-w-40 of-hidden text-ellipsis ws-nowrap [.active_&]:text-white"},l3={class:"flex items-center gap-2 px-1"},c3={class:"h-full flex flex-col items-center justify-center gap-2"},e3={class:"block"},h3={xmlns:"http://www.w3.org/2000/svg",style:{height:"2em",width:"2em",opacity:"0.5",color:"#00dc82"},class:"animate-fade",viewBox:"0 0 24 24"},r3={class:"flex items-center justify-center"},S1="components",a3=R({__name:"index",emits:["openInEditor","onInspectComponentStart","onInspectComponentEnd"],setup(h,{emit:l}){const c=l,e=S(),a=S(!1),{width:r}=G4(e),s=b(()=>a.value?r.value<700:!1),i=S(""),t=S(""),[u,v]=D4(!0),m=S(!1),M=S(!1),A=S(""),g=S(!1),p=j0();function w(C,f=[],E=[]){var U;return f.push(C.id),((U=C.children)==null?void 0:U.length)===0&&E.push([...f]),Array.isArray(C.children)&&C.children.forEach(Y=>{w(Y,f,E)}),f.pop(),E}function G(C){const f=[],E=U=>{U?.forEach(Y=>{var m2;f.push(Y),(m2=Y.children)!=null&&m2.length&&E(Y.children)})};return E(C),f}function k(C,f){const E=[];return C?.forEach(U=>{E.push(...U.slice(0,f+1))}),[...new Set(E)]}function y(C,f){const E=[];return C.forEach(U=>{const Y=U.indexOf(f);Y!==-1&&E.push(...U.slice(0,Y+1))}),[...new Set(E)]}const x=S([]),j=b(()=>{var C,f;return(C=x.value)!=null&&C.length?w((f=x.value)==null?void 0:f[0]):[]}),J=b(()=>G(x.value)),u1=b(()=>J.value.map(C=>C.id)),n1=S({}),D=S(""),z1=b(()=>{const C=[],f=E=>{E.forEach(U=>{var Y;U.id===D.value&&C.push(U),(Y=U.children)!=null&&Y.length&&f(U.children)})};return f(x.value),C[0]}),H1=b(()=>{var C;return((C=z1.value)==null?void 0:C.file)??""}),b1=b(()=>j2({state:n1.value,filterKey:t.value,processGroup(C){return v5(Object.values(m5(E2(C),"stateType")))}})),{expanded:_}=k1(),{expanded:H}=k1("component-state");x0();async function L(C=""){return $.value.getInspectorTree({inspectorId:S1,filter:C}).then(f=>{var E,U;const Y=v1(f);x.value=Y,D.value=(U=(E=x.value)==null?void 0:E[0])==null?void 0:U.id,_.value=k(j.value,1),m.value=!0})}function T(C){if(!C||!(C!=null&&C.state))return{};const f={};return C.state.forEach(E=>{f[E.type]||(f[E.type]=[]),f[E.type].push(E)}),f}function B(C){$.value.getInspectorState({inspectorId:S1,nodeId:C}).then(f=>{const E=v1(f);E&&(n1.value=T(E),H.value=Array.from({length:Object.keys(n1.value).length},(U,Y)=>`${Y}`))})}a1(D,C=>{B(C),g.value&&I1()});function O(C){const f=v1(C);f.inspectorId!==S1||f.nodeId!==D.value||(n1.value=T({state:f.state.state}))}$.functions.on(s1.INSPECTOR_STATE_UPDATED,O),L();function e1(C){const f=C.trim().toLowerCase();v(),L(f).then(()=>{v()})}j4(i,C=>{e1(C)},{debounce:300});function x1(C){var f,E;const U=v1(C);U.inspectorId===S1&&(i.value?e1(i.value):x.value=U.rootNodes,u1.value.includes(D.value)||(D.value=(E=(f=x.value)==null?void 0:f[0])==null?void 0:E.id,_.value=k(j.value,1)))}$.functions.on(s1.INSPECTOR_TREE_UPDATED,x1),Z1(()=>{$.functions.off(s1.INSPECTOR_STATE_UPDATED,O),$.functions.off(s1.INSPECTOR_TREE_UPDATED,x1)});function f1(){M.value=!0,c("onInspectComponentStart"),$.value.inspectComponentInspector().then(C=>{const f=JSON.parse(C);D.value=f.id,_.value.includes(f.id)||_.value.push(f.id),_.value=[...new Set([..._.value,...y(j.value,f.id)])],l5()}).finally(()=>{M.value=!1,c("onInspectComponentEnd")})}function y1(){M.value=!1,$.value.cancelInspectComponentInspector()}m1("keydown",C=>{C.key==="s"&&(C.ctrlKey||C.metaKey)&&!M.value?f1():C.key==="Escape"&&M.value&&y1()});function _1(){$.value.scrollToComponent(D.value)}function j1(){$.value.inspectDOM(D.value).then(()=>{chrome.devtools.inspectedWindow.eval("inspect(window.__VUE_DEVTOOLS_INSPECT_DOM_TARGET__)")})}function I1(){$.value.getComponentRenderCode(D.value).then(C=>{A.value=C,g.value=!0})}function E1(){c("openInEditor",H1.value)}const i2=S();function l5(){setTimeout(()=>{var C;const f=(C=i2.value)==null?void 0:C.querySelector(".active");f?.scrollIntoView({behavior:"smooth",block:"center"})},300)}function c5(){A.value="",g.value=!1}const N1=T2(),v2=b(()=>N1.appRecords.value.map(C=>({label:C.name+(C.version?` (${C.version})`:""),value:C.id}))),e5=b(()=>v2.value.map(C=>({label:C.label,id:C.value}))),O1=S(N1.activeAppRecordId.value);L1(()=>{O1.value=N1.activeAppRecordId.value});function h5(C){$.value.toggleApp(C).then(()=>{D.value="",L()})}return(C,f)=>(n(),z("div",F0,[V(o(Q1),{ref_key:"splitpanesRef",ref:e,class:"flex-1 overflow-auto",horizontal:s.value,onReady:f[4]||(f[4]=E=>a.value=!0)},{default:I(()=>[v2.value.length>1?(n(),P(o(M1),{key:0,border:"base h-full",size:"20"},{default:I(()=>[d("div",G0,[V(p4,{modelValue:O1.value,"onUpdate:modelValue":f[0]||(f[0]=E=>O1.value=E),data:e5.value,class:"w-full",onSelect:h5},null,8,["modelValue","data"])])]),_:1})):q("",!0),V(o(M1),{border:"base","h-full":""},{default:I(()=>[m.value?(n(),z("div",Z0,[d("div",K0,[V(o(g1),{modelValue:i.value,"onUpdate:modelValue":f[1]||(f[1]=E=>i.value=E),"loading-debounce-time":250,loading:!o(u),placeholder:"Find components...",class:"flex-1 text-3.5"},null,8,["modelValue","loading"]),o(S5)?q("",!0):F((n(),z("button",{key:0,"px-1":"",class:"hover:color-#00dc82",onClick:f1},[(n(),z("svg",W0,f[6]||(f[6]=[d("path",{fill:"currentColor",d:"M10.611 10.611a1 1 0 0 1 1.11-.208l8.839 3.889a1 1 0 0 1-.14 1.88l-3.338.91l-.91 3.338a1 1 0 0 1-1.88.14l-3.89-8.84a1 1 0 0 1 .209-1.109M17 3a3 3 0 0 1 3 3v3a1 1 0 1 1-2 0V6a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h3a1 1 0 1 1 0 2H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm-3.73 10.269l1.715 3.9l.318-1.164a1 1 0 0 1 .701-.702l1.165-.318l-3.9-1.716Z"},null,-1)])))])),[[o(Z),"Select component in the page",void 0,{bottom:!0}]])]),d("div",{ref_key:"componentTreeContainer",ref:i2,class:"no-scrollbar flex-1 select-none overflow-scroll"},[V(n2,{modelValue:D.value,"onUpdate:modelValue":f[2]||(f[2]=E=>D.value=E),data:x.value,"with-tag":!0,onHover:o(p).highlight,onLeave:o(p).unhighlight},null,8,["modelValue","data","onHover","onLeave"])],512)])):q("",!0)]),_:1}),V(o(M1),{relative:"","h-full":""},{default:I(()=>{var E;return[d("div",J0,[d("div",Q0,[(E=z1.value)!=null&&E.name?(n(),z("span",X0,[f[7]||(f[7]=d("span",{class:"text-gray-400 dark:text-gray-600"},"<",-1)),d("span",Y0,X(z1.value.name),1),f[8]||(f[8]=d("span",{class:"text-gray-400 dark:text-gray-600"},">",-1))])):q("",!0),V(o(g1),{modelValue:t.value,"onUpdate:modelValue":f[3]||(f[3]=U=>t.value=U),"loading-debounce-time":250,placeholder:"Filter State...",class:"flex-1 text-3.5"},null,8,["modelValue"]),d("div",l3,[F(d("i",{class:"i-material-symbols-light:eye-tracking-outline h-4 w-4 cursor-pointer hover:op-70",onClick:_1},null,512),[[o(Z),"Scroll to component",void 0,{bottom:!0}]]),F(d("i",{class:"i-material-symbols-light:code h-5 w-5 cursor-pointer hover:op-70",onClick:I1},null,512),[[o(Z),"Show render code",void 0,{bottom:!0}]]),o(z2)?F((n(),z("i",{key:0,class:"i-material-symbols-light:menu-open h-5 w-5 cursor-pointer hover:op-70",onClick:j1},null,512)),[[o(Z),"Inspect DOM",void 0,{bottom:!0}]]):q("",!0),H1.value?F((n(),z("i",{key:1,class:"i-carbon-launch h-4 w-4 cursor-pointer hover:op-70",onClick:E1},null,512)),[[o(Z),"Open in Editor",void 0,{bottom:!0}]]):q("",!0)])]),V(s2,{class:"no-scrollbar flex-1 overflow-scroll",data:b1.value,"node-id":D.value,"inspector-id":S1,"expanded-state-id":"component-state"},null,8,["data","node-id"])]),g.value&&A.value?(n(),P(U0,{key:0,code:A.value,onClose:c5},null,8,["code"])):q("",!0)]}),_:1})]),_:1},8,["horizontal"]),o(z2)?(n(),P(o(c4),{key:0,modelValue:M.value,"onUpdate:modelValue":f[5]||(f[5]=E=>M.value=E),title:"",height:"12rem",closable:!1},{footer:I(()=>[d("div",r3,[V(o(c1),{onClick:y1},{default:I(()=>f[11]||(f[11]=[Q(" Cancel ")])),_:1})])]),default:I(()=>[d("div",c3,[d("span",e3,[(n(),z("svg",h3,f[9]||(f[9]=[d("g",{fill:"none",stroke:"currentColor","stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2"},[d("circle",{cx:"12",cy:"12",r:".5",fill:"currentColor"}),d("path",{d:"M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0m7-9v2m-9 7h2m7 7v2m7-9h2"})],-1)])))]),f[10]||(f[10]=d("p",null," Click on a component on the page to select it ",-1))])]),_:1},8,["modelValue"])):q("",!0)]))}}),F3=A1(a3,[["__scopeId","data-v-7c513123"]]),X2=Symbol.for("VueDevToolsCustomInspectorStateSymbol");function t3(){return d1(X2)}function o3(){const h=S({homepage:"",id:"",label:"",logo:"",timelineLayerIds:[]});return p1(X2,h),h}const s3={class:"flex-1 overflow-y-auto p2"},n3={class:"max-w-[190px] flex-1 select-none py-1.5 text-sm"},i3={class:"w-4/5"},v3={key:0,class:"flex justify-start"},m3={key:1},d3=R({__name:"Settings",props:{pluginId:{},options:{},values:{}},emits:["update"],setup(h,{emit:l}){const c=h,e=l,a=b(()=>c.options),r=b(()=>c.values);function s(i,t){$.value.updatePluginSettings(c.pluginId,i,t),$.value.getPluginSettings(c.pluginId).then(u=>{e("update",u)})}return(i,t)=>(n(),z("div",s3,[d("ul",null,[(n(!0),z(W,null,h1(a.value,(u,v)=>(n(),z("li",{key:v,class:"flex items-center py-2"},[d("div",n3,X(u.label),1),d("div",i3,[u.type==="boolean"?(n(),z("div",v3,[V(o(n4),{"model-value":r.value[v],class:"row-reverse flex hover:bg-active py1 pl2 pr1","onUpdate:modelValue":m=>s(v,m)},null,8,["model-value","onUpdate:modelValue"])])):u.type==="choice"?(n(),z("div",m3,[V(o(s4),{"model-value":r.value[v],options:u.options,"onUpdate:modelValue":m=>s(v,m)},null,8,["model-value","options","onUpdate:modelValue"])])):u.type==="text"?(n(),P(o(g1),{key:2,"model-value":r.value[v],"onUpdate:modelValue":m=>s(v,m)},null,8,["model-value","onUpdate:modelValue"])):q("",!0)])]))),128))])]))}}),u3={},z3={viewBox:"0 0 566 154",fill:"none",xmlns:"http://www.w3.org/2000/svg"};function p3(h,l){return n(),z("svg",z3,l[0]||(l[0]=[d5('