@vtbag/inspection-chamber 1.0.20 → 1.0.21

package/lib/index.js

@@ -899,7 +899,7 @@
 [data-vtbag-transition-name] {
 	cursor: help;
 }
-`)}function pt(){Ct(),At()}function At(){let t=1/Math.max(1e-6,parseFloat(top.document.querySelector("#vtbag-ui-tsf")?.innerText??"1.0"));top.__vtbag.inspectionChamber.animations?.forEach(e=>{e.playbackRate=t,e.playState==="paused"&&e.play()})}function vt(){let t=top.document.querySelector("#vtbag-ui-slo-mo"),e=top.document.querySelector("#vtbag-ui-tsf");t.addEventListener("input",n=>{if(n.target instanceof HTMLInputElement){let o=(Math.exp(parseInt(n.target.value,10)/100)-100)/100+1-.14;e.innerText=`${o.toFixed(1)}`,At()}})}function Ct(){let t=top.__vtbag.inspectionChamber,e=t.longestAnimation;e&&(top.document.querySelector("#vtbag-ui-slo-mo-progress").innerText=` ${~~(e.currentTime??0)} / ${t.animationEndTime} ms`,b()&&top.setTimeout(Ct,20))}var Mt=[],oe=["top","left","right","bottom"];var bt;function yt(t){bt??=ae();let e=[];return e.push("inset"),Mt.forEach(n=>{t.getPropertyValue(n)!==bt[n]&&e.push(n)}),e.filter(n=>!(n.startsWith("inset-")||n.startsWith("animation-")||oe.includes(n)))}function ae(){let t=top.document.createElement("div");top.document.body.appendChild(t);let e=top.getComputedStyle(t),n={};for(let o=0;o<e.length;o++){let i=e.item(o);Mt.push(i),n[i]=e.getPropertyValue(i)}return top.document.body.removeChild(t),n}function ht(t,e,n,o,i){let a=e.createElement("vtbag-pseudo-twin");d(a,t,"::view-transition","");let l=top.__vtbag.inspectionChamber.twin=a.firstElementChild;n.forEach(c=>{let s=d(l,t,"group",c),g=d(s,t,"image-pair",c);d(g,t,"old",c)&&o.add(c),d(g,t,"new",c)&&i.add(c)}),e.body.insertAdjacentElement("beforeend",l);function d(c,s,g,u){if(!c){console.error("[inspection chamber] Works not as expected ;-)");return}let A=top.__vtbag.inspectionChamber,r=c.ownerDocument,p=s.defaultView,I=u?`::view-transition-${g}(${u})`:g,C=p.getComputedStyle(s.documentElement,I);if(!C.height.endsWith("px"))return;A?.styleMap.set(u?`${g}-${u}`:g,C);let v=r.createElement("vtbag-pseudo-twin");return v.id=re(u,g),v.dataset.vtbagTransitionName=u,v.dataset.vtbagTransitionPseudo=g,c.insertAdjacentElement("beforeend",v),Lt(C,v.style),v.style.visibility="hidden",v}}function re(t,e){return t?`vtbag-twin--view-transition-${e}-${t}`:"vtbag-twin--view-transition"}async function ft(t){top.document.documentElement.classList.add("vtbag-twin-sync");let e=top.__vtbag.inspectionChamber,n=e.frameDocument.documentElement;for(let o of[...e.twin?.children||[]]){let i=o.dataset.vtbagTransitionName;t.has(i)||(O(o,i),O(o.children[0],i),O(o.children[0].children[0],i),O(o.children[0].children[1],i),await new Promise(a=>self.setTimeout(a)))}top.document.documentElement.classList.remove("vtbag-twin-sync")}function O(t,e){if(!t)return;let n=t.dataset.vtbagTransitionPseudo,o=top.__vtbag.inspectionChamber.styleMap.get(`${n}-${e}`),i=t.style;Lt(o,i)}function Lt(t,e){e.position=t.position,e.inset=t.inset,e.height=t.height,e.width=t.width,e.transform=t.transform,e.zIndex=t.zIndex,e.transformOrigin=t.transformOrigin,e.perspective=t.perspective}function wt(t){if(b()){let e,n=1/0;top.__vtbag.inspectionChamber.twin?.querySelectorAll("vtbag-pseudo-twin > vtbag-pseudo-twin > vtbag-pseudo-twin > vtbag-pseudo-twin").forEach(o=>{let{clientX:i,clientY:a}=t,{top:l,bottom:d,left:c,right:s,width:g,height:u}=o.getBoundingClientRect(),A=o.dataset.vtbagTransitionName,r=o.dataset.vtbagTransitionPseudo;if(g&&u&&g*u<n&&l<=a&&a<=d&&c<=i&&i<=s){let p=!0,I;window.top.document.querySelectorAll("#vtbag-ui-names li").forEach(C=>{C.innerText===A&&(I=C,C.classList.contains(`${r}-hidden`)&&(p=!1))}),p&&(n=g*u,e=I)}}),e?.click()}}function V(){top.document.querySelector('#vtbag-ui-filter input[type="text"]').value="",top.document.querySelector("#vtbag-ui-filter ul input").click(),H()}function Tt(){top.document.querySelectorAll("#vtbag-ui-names li").forEach(t=>t.classList.remove("selected","old-hidden","new-hidden")),x(),xt(),Q()}function St(){top.document.querySelector("#vtbag-ui-filter ul").addEventListener("change",H),top.document.querySelector('#vtbag-ui-filter input[type="text"]').addEventListener("input",H),top.document.querySelector("#vtbag-ui-filter button").addEventListener("click",V)}var jt=500;function U(t,e,n){return h(()=>{top.document.querySelector("#vtbag-ui-info").innerHTML="",top.document.querySelectorAll("#vtbag-ui-names li").forEach(i=>i.remove()),top.document.querySelector("#vtbag-ui-names h4").innerText=e?"Animation Groups":"Elements w/ View Transition Names",top.document.querySelector("#vtbag-ui-names div").style.display=e?"flex":"none";let o=top.document.querySelector("#vtbag-ui-names > ol");(e?n:[...t].sort()).forEach((i,a)=>{let l=top.document.createElement("li");l.innerText=i,e&&t.has(i)&&l.classList.add("old"),e?.has(i)&&l.classList.add("new"),o.appendChild(l)}),top.document.querySelector("#vtbag-ui-filter ul").style.display=e?"block":"none",H()},"update names"),n}function H(){let t=top.document.querySelectorAll("#vtbag-ui-names li"),e=top.document.querySelector("#vtbag-ui-filter ul input:checked").id.replace("vtbag-c-",""),n=top.document.querySelector('#vtbag-ui-filter input[type="text"]').value;h(()=>{t.forEach(o=>{let i=o.style,a=o.classList,l=o.innerText;i.display=(n===""||l.includes(n))&&(e==="all"||e==="both"&&a.contains("new")&&a.contains("old")||e==="old-only"&&a.contains("old")&&!a.contains("new")||e==="new-only"&&a.contains("new")&&!a.contains("old")||e==="old"&&a.contains("old")||e==="new"&&a.contains("new"))?"list-item":"none"})},"refresh names")}async function q(){if(!b())return;let e=top.__vtbag.inspectionChamber.twin?.ownerDocument,n=top.document,o=top.getComputedStyle(n.documentElement),i=n.documentElement.classList.contains("vtbag-ui-column"),a=i?parseFloat(o.getPropertyValue("--vtbag-panel-width")||"0"):0,l=i?0:parseFloat(o.getPropertyValue("--vtbag-panel-height")||"0"),d=n.querySelectorAll("#vtbag-ui-names li"),c=new Set;d.forEach(s=>{s.classList.contains("old-hidden")&&s.classList.contains("new-hidden")&&c.add(s.innerText)}),await ft(c),e&&d.forEach(s=>{let g=s.innerText,u=s.classList;u[u.contains("old")&&Et(e.querySelector(`#vtbag-twin--view-transition-old-${g}`),a,l)===!1?"add":"remove"]("old-invisible"),u[u.contains("new")&&Et(e.querySelector(`#vtbag-twin--view-transition-new-${g}`),a,l)===!1?"add":"remove"]("new-invisible"),u[(!u.contains("old")||u.contains("old-invisible"))&&(!u.contains("new")||u.contains("new-invisible"))?"add":"remove"]("invisible")})}function Et(t,e=0,n=0){if(!t)return;let{top:o,right:i,bottom:a,left:l,width:d,height:c}=t.getBoundingClientRect();return!1,d>0&&c>0&&o<window.top.innerHeight-n&&a>0&&l<window.top.innerWidth-e&&i>0}function x(){let t=[];top.document.querySelectorAll("#vtbag-ui-names li").forEach(e=>{let n=e.innerText,o=e.classList,i=!1;o.contains("old-hidden")&&(i=!0,t.push(`::view-transition-old(${n}) { visibility: hidden; }`)),o.contains("new-hidden")&&(t.push(`::view-transition-new(${n}) { visibility: hidden; }`),i&&t.push(`::view-transition-group(${n}) { visibility: hidden; }`))}),L(t.join(`
+`)}function pt(){Ct(),At()}function At(){let t=1/Math.max(1e-6,parseFloat(top.document.querySelector("#vtbag-ui-tsf")?.innerText??"1.0"));top.__vtbag.inspectionChamber.animations?.forEach(e=>{e.playbackRate=t,e.playState==="paused"&&e.play()})}function vt(){let t=top.document.querySelector("#vtbag-ui-slo-mo"),e=top.document.querySelector("#vtbag-ui-tsf");t.addEventListener("input",n=>{if(n.target instanceof HTMLInputElement){let o=(Math.exp(parseInt(n.target.value,10)/100)-100)/100+1-.14;e.innerText=`${o.toFixed(1)}`,At()}})}function Ct(){let t=top.__vtbag.inspectionChamber,e=t.longestAnimation;e&&(top.document.querySelector("#vtbag-ui-slo-mo-progress").innerText=` ${~~(e.currentTime??0)} / ${t.animationEndTime} ms`,b()&&top.setTimeout(Ct,20))}var Mt=[],oe=["top","left","right","bottom"];var bt;function yt(t){bt??=ae();let e=[];return e.push("inset"),Mt.forEach(n=>{t.getPropertyValue(n)!==bt[n]&&e.push(n)}),e.filter(n=>!(n.startsWith("inset-")||n.startsWith("animation-")||oe.includes(n)))}function ae(){let t=top.document.createElement("div");top.document.body.appendChild(t);let e=top.getComputedStyle(t),n={};for(let o=0;o<e.length;o++){let i=e.item(o);Mt.push(i),n[i]=e.getPropertyValue(i)}return top.document.body.removeChild(t),n}function ht(t,e,n,o,i){let a=e.createElement("vtbag-pseudo-twin");d(a,t,"::view-transition","");let l=top.__vtbag.inspectionChamber.twin=a.firstElementChild;n.forEach(c=>{let s=d(l,t,"group",c),g=d(s,t,"image-pair",c);d(g,t,"old",c)&&o.add(c),d(g,t,"new",c)&&i.add(c)}),e.body.insertAdjacentElement("beforeend",l);function d(c,s,g,u){if(!c){console.error("[inspection chamber] Works not as expected ;-)");return}let A=top.__vtbag.inspectionChamber,r=c.ownerDocument,p=s.defaultView,I=u?`::view-transition-${g}(${u})`:g,C=p.getComputedStyle(s.documentElement,I);if(!C.height.endsWith("px"))return;A?.styleMap.set(u?`${g}-${u}`:g,C);let v=r.createElement("vtbag-pseudo-twin");return v.id=re(u,g),v.dataset.vtbagTransitionName=u,v.dataset.vtbagTransitionPseudo=g,c.insertAdjacentElement("beforeend",v),Lt(C,v.style),v.style.visibility="hidden",v}}function re(t,e){return t?`vtbag-twin--view-transition-${e}-${t}`:"vtbag-twin--view-transition"}async function ft(t){top.document.documentElement.classList.add("vtbag-twin-sync");let e=top.__vtbag.inspectionChamber,n=e.frameDocument.documentElement;for(let o of[...e.twin?.children||[]]){let i=o.dataset.vtbagTransitionName;t.has(i)||(O(o,i),O(o.children[0],i),O(o.children[0].children[0],i),O(o.children[0].children[1],i),await new Promise(a=>self.setTimeout(a)))}top.document.documentElement.classList.remove("vtbag-twin-sync")}function O(t,e){if(!t)return;let n=t.dataset.vtbagTransitionPseudo,o=top.__vtbag.inspectionChamber.styleMap.get(`${n}-${e}`),i=t.style;Lt(o,i)}function Lt(t,e){e.position=t.position,e.inset=t.inset,e.height=t.height,e.width=t.width,e.transform=t.transform,e.zIndex=t.zIndex,e.transformOrigin=t.transformOrigin,e.perspective=t.perspective}function wt(t){if(b()){let e,n=1/0;top.__vtbag.inspectionChamber.twin?.querySelectorAll("vtbag-pseudo-twin > vtbag-pseudo-twin > vtbag-pseudo-twin > vtbag-pseudo-twin").forEach(o=>{let{clientX:i,clientY:a}=t,{top:l,bottom:d,left:c,right:s,width:g,height:u}=o.getBoundingClientRect(),A=o.dataset.vtbagTransitionName,r=o.dataset.vtbagTransitionPseudo;if(g&&u&&g*u<n&&l<=a&&a<=d&&c<=i&&i<=s){let p=!0,I;window.top.document.querySelectorAll("#vtbag-ui-names li").forEach(C=>{C.innerText===A&&(I=C,C.classList.contains(`${r}-hidden`)&&(p=!1))}),p&&(n=g*u,e=I)}}),e?.click()}}function V(){top.document.querySelector('#vtbag-ui-filter input[type="text"]').value="",top.document.querySelector("#vtbag-ui-filter ul input").click(),H()}function Tt(){top.document.querySelectorAll("#vtbag-ui-names li").forEach(t=>t.classList.remove("selected","old-hidden","new-hidden")),x(),xt(),Q()}function St(){top.document.querySelector("#vtbag-ui-filter ul").addEventListener("change",H),top.document.querySelector('#vtbag-ui-filter input[type="text"]').addEventListener("input",H),top.document.querySelector("#vtbag-ui-filter button").addEventListener("click",V)}var jt=500;function U(t,e,n){return h(()=>{top.document.querySelector("#vtbag-ui-info").innerHTML="",top.document.querySelectorAll("#vtbag-ui-names li").forEach(i=>i.remove()),top.document.querySelector("#vtbag-ui-names h4").innerText=e?"Animation Groups":"Elements w/ View Transition Names",top.document.querySelector("#vtbag-ui-names div").style.display=e?"flex":"none";let o=top.document.querySelector("#vtbag-ui-names > ol");(e?n:[...t].sort()).forEach((i,a)=>{let l=top.document.createElement("li");l.innerText=i,e&&t.has(i)&&l.classList.add("old"),e?.has(i)&&l.classList.add("new"),o.appendChild(l)}),top.document.querySelector("#vtbag-ui-filter ul").style.display=e?"block":"none",H()},"update names"),n}function H(){let t=top.document.querySelectorAll("#vtbag-ui-names li"),e=top.document.querySelector("#vtbag-ui-filter ul input:checked").id.replace("vtbag-c-",""),n=top.document.querySelector('#vtbag-ui-filter input[type="text"]').value;h(()=>{t.forEach(o=>{let i=o.style,a=o.classList,l=o.innerText;i.display=(n===""||l.includes(n))&&(e==="all"||e==="both"&&a.contains("new")&&a.contains("old")||e==="old-only"&&a.contains("old")&&!a.contains("new")||e==="new-only"&&a.contains("new")&&!a.contains("old")||e==="old"&&a.contains("old")||e==="new"&&a.contains("new"))?"list-item":"none"})},"refresh names")}async function q(){if(!b())return;let e=top.__vtbag.inspectionChamber.twin?.ownerDocument,n=top.document,o=top.getComputedStyle(n.documentElement),i=n.documentElement.classList.contains("vtbag-ui-column"),a=i?parseFloat(o.getPropertyValue("--vtbag-panel-width")||"0"):0,l=i?0:parseFloat(o.getPropertyValue("--vtbag-panel-height")||"0"),d=n.querySelectorAll("#vtbag-ui-names li"),c=new Set;d.forEach(s=>{s.classList.contains("old-hidden")&&s.classList.contains("new-hidden")&&c.add(s.innerText)}),await ft(c),e&&d.forEach(s=>{let g=s.innerText,u=s.classList;u[u.contains("old")&&Et(e.querySelector(`#vtbag-twin--view-transition-old-${g}`),a,l)===!1?"add":"remove"]("old-invisible"),u[u.contains("new")&&Et(e.querySelector(`#vtbag-twin--view-transition-new-${g}`),a,l)===!1?"add":"remove"]("new-invisible"),u[(!u.contains("old")||u.contains("old-invisible"))&&(!u.contains("new")||u.contains("new-invisible"))?"add":"remove"]("invisible")})}function Et(t,e=0,n=0){if(!t)return;let{top:o,right:i,bottom:a,left:l,width:d,height:c}=t.getBoundingClientRect();return!1,d>0&&c>0&&o<window.top.innerHeight-n&&a>0&&l<window.top.innerWidth-e&&i>0}function x(){let t=[];top.document.querySelectorAll("#vtbag-ui-names li").forEach(e=>{let n=e.innerText,o=e.classList,i=!0,a=!0;o.contains("old-hidden")?(i=!1,t.push(`::view-transition-old(${n}) { visibility: hidden; }`)):o.contains("old")||(i=!1),o.contains("new-hidden")?(t.push(`::view-transition-new(${n}) { visibility: hidden; }`),a=!1):o.contains("new")||(a=!1),!i&&!a&&t.push(`::view-transition-group(${n}) { visibility: hidden; }`)}),L(t.join(`
 `),"image-visibility"),f()}function ge(t){let e=y()==="full-control"&&b(),n=top.document.querySelectorAll("#vtbag-ui-names li"),o,i=top.document.querySelector("#vtbag-ui-controller"),a=top.document.querySelector("#vtbag-ui-progress"),l=top.document.querySelector("#vtbag-ui-controller2"),d=top.document.querySelector("#vtbag-ui-progress2");n.forEach(c=>{c.innerText===t?(c.classList.contains("selected")?(l.value=i.value,d.innerText=a.innerText):(i.value=l.value,a.innerText=d.innerText),c.classList[e?"toggle":"add"]("selected"),o=c,c.style.display==="none"&&V()):e||c.classList.remove("selected")}),o&&o.scrollIntoView({behavior:"instant",block:"nearest",inline:"nearest"})}function le(t){let e=top.document.querySelector("#vtbag-ui-info");if(t&&!b())navigator.clipboard.writeText(`inspect(top.document.querySelector("#vtbag-main-frame").contentDocument.querySelector("${Nt(t)}"))`),e.innerHTML=`<h4>Info</h4>
 						<p>DevTools selector '<b><code>${Nt(t)}</code></b>' copied to clipboard. Paste to DevTools console to further inspect the element.</p>`;else{navigator.clipboard.writeText('inspect(top.document.querySelector("#vtbag-main-frame").contentDocument.querySelector(":root"))');let n=t&&t.dataset.vtbagTransitionName;e.innerHTML=`<h4>Info</h4>
 						<p>DevTools selector '<b><code>:root</code></b>' copied to clipboard. Paste to DevTools console, then expand the <code>&lt;html></code> element and its <code>::view-transition</code> pseudo element.</p>${n&&"<p>Look for the <code>::view-transition-group("+n+")</code> pseudo element and its children.</p>"}`}S(e)}function Nt(t,e=!0){let n=[];for(;t&&t.nodeType===Node.ELEMENT_NODE;){let o=t.nodeName.toLowerCase();if(e&&t.id){o="#"+t.id,n.unshift(o);break}else{let i=t,a=1;for(;i=i.previousElementSibling;)i.nodeName.toLowerCase()===o&&a++;a!==1&&(o+=":nth-of-type("+a+")")}n.unshift(o),t=t.parentNode}return n.join(" > ")}function zt(){let t=e=>{let n=e+"-hidden",i=[...top.document.querySelectorAll("#vtbag-ui-names li")].filter(l=>l.classList.contains(e)),a=i.length>0&&i[0].classList.contains(n)?"remove":"add";i.forEach(l=>l.classList[a](n)),x()};top.document.querySelector("#vtbag-ui-names button").addEventListener("click",()=>Tt()),top.document.querySelector("#vtbag-ui-names-old").addEventListener("click",()=>t("old")),top.document.querySelector("#vtbag-ui-names-new").addEventListener("click",()=>t("new")),top.document.querySelector("#vtbag-ui-names ol").addEventListener("click",e=>{let n=!e.isTrusted;if(e.target instanceof HTMLElement){let o=e.target.closest("li");if(o&&e instanceof PointerEvent){o.style.display==="none"&&V();let i=y();h(()=>{let{left:a,width:l}=o.getBoundingClientRect(),d=e.clientX-a,c=!n&&d>=0&&d<=20,s=!n&&d>=l-20&&d<=l,g=o.classList;if(c&&g.contains("old")){g.toggle("old-hidden"),x();return}if(s&&g.contains("new")){g.toggle("new-hidden"),x();return}let u=o.innerText;!n&&se(u),ge(u);let A=window.top.__vtbag.inspectionChamber?.frameDocument.querySelector(`[data-vtbag-transition-name="${u}"]`);i&&i!=="bypass"&&le(A),b()&&J(u)},"names",!0)}}Q()})}var Dt=[{boxShadow:"inset 0 0  50px darkslateblue"},{boxShadow:"inset 0 0 0px darkslateblue"},{boxShadow:"0 0 50px darkslateblue"},{boxShadow:"0 0 100px darkslateblue",display:"inline-block",minWidth:"20px",minHeight:"20px",backgroundColor:"darkslateblue",opacity:"0.5"},{boxShadow:"0 0 50px darkslateblue"},{boxShadow:"0 0 0px darkslateblue"},{boxShadow:"inset 0 0 50px darkslateblue"}];function se(t){if(b())ce(t);else{let e=top.__vtbag.inspectionChamber,n=e.frameDocument.querySelector(`[data-vtbag-transition-name="${t}"]`);if(n){n.scrollIntoView({behavior:"instant",block:"nearest",inline:"nearest"});let o=self.getComputedStyle(n).display;Dt[3].display=o.includes("block")?o:"inline-block",e.glow=n.animate(Dt,{duration:500,iterations:1}),self.setTimeout(()=>e.glow=void 0,500)}}}function ce(t){L(`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vtbag/inspection-chamber",
   "type": "module",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "main": "lib/index.js",
   "description": "The Inspection Chamber is an in-browser development tool that gives you all the knobs and dials to interactively put your view transitions through their paces.",
   "files": [