Skip to content

Tests: Adjust shadow dom for e2e tests #967

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kraleppa merged 2 commits into from
Apr 3, 2026
Merged

Tests: Adjust shadow dom for e2e tests #967

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1146f90
Disable closed mode in e2e tests
kraleppa Apr 3, 2026
857fdd1
Build assets
kraleppa Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion assets/client/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ window.document.addEventListener('DOMContentLoaded', async () => {
shadowHost.style.zIndex = '2147483647';
document.body.appendChild(shadowHost);

const shadowRoot = shadowHost.attachShadow({ mode: 'closed' });
const mode = metaTag.getAttribute('e2e') === 'true' ? 'open' : 'closed';
const shadowRoot = shadowHost.attachShadow({ mode });

const cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
Expand Down
3 changes: 2 additions & 1 deletion lib/live_debugger.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,8 @@ defmodule LiveDebugger do
phoenix_url: live_debugger_phoenix_url,
browser_features?: browser_features?,
version: version,
debug_button?: SettingsStorage.get(:debug_button)
debug_button?: SettingsStorage.get(:debug_button),
e2e?: Keyword.get(config, :e2e?, false)
}

tags = LiveDebugger.Client.ConfigComponent.live_debugger_tags(assigns)
Expand Down
13 changes: 12 additions & 1 deletion lib/live_debugger/client/config_component.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,21 @@ defmodule LiveDebugger.Client.ConfigComponent do
attr(:browser_features?, :boolean, default: true)
attr(:version, :string, default: nil)
attr(:debug_button?, :boolean, default: true)
attr(:e2e?, :boolean, default: false)

def live_debugger_tags(assigns) do
~H"""
<meta name="live-debugger-config" url={@url} version={@version} debug-button={@debug_button?} />
<%= if @e2e? do %>
<meta
name="live-debugger-config"
url={@url}
version={@version}
debug-button={@debug_button?}
e2e="true"
/>
<% else %>
<meta name="live-debugger-config" url={@url} version={@version} debug-button={@debug_button?} />
<% end %>
<%= if @browser_features? do %>
<script src={@js_url}>
</script>
Expand Down
6 changes: 3 additions & 3 deletions priv/static/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
<path d="M3 14v1" />
</svg>
</div>
`;function w(e){let t=document.createElement("div");return t.innerHTML=e,t.firstElementChild}function a(e,t={}){let o=new CustomEvent(e,t);document.dispatchEvent(o)}function C(){let e=w(_),t=!1,o=()=>{t?i():a("lvdbg:debug-button-click",{detail:{buttonRect:e.getBoundingClientRect()}})},n=()=>{t=!0,e.style.cursor="grabbing",document.addEventListener("mousemove",r)},i=()=>{t=!1,e.style.cursor="pointer",document.removeEventListener("mousemove",r)},r=s=>{let g=e.offsetWidth,m=e.offsetHeight,d=window.innerWidth-g,h=window.innerHeight-m,v=Math.max(0,Math.min(s.clientX-g/2,d)),f=Math.max(0,Math.min(s.clientY-m/2,h));e.style.left=`${v}px`,e.style.top=`${f}px`,e.style.right="auto",e.style.bottom="auto"},l=()=>{let s=e.getBoundingClientRect();s.top>=0&&s.left>=0&&s.bottom<=window.innerHeight&&s.right<=window.innerWidth||(e.style.left="auto",e.style.top="auto",e.style.right="20px",e.style.bottom="20px")};return e.addEventListener("click",o),document.addEventListener("lvdbg:move-button-click",n),window.addEventListener("resize",()=>l()),e}var U=`<div id="live-debugger-debug-tooltip">
`;function w(e){let t=document.createElement("div");return t.innerHTML=e,t.firstElementChild}function a(e,t={}){let o=new CustomEvent(e,t);document.dispatchEvent(o)}function C(){let e=w(_),t=!1,o=()=>{t?i():a("lvdbg:debug-button-click",{detail:{buttonRect:e.getBoundingClientRect()}})},n=()=>{t=!0,e.style.cursor="grabbing",document.addEventListener("mousemove",r)},i=()=>{t=!1,e.style.cursor="pointer",document.removeEventListener("mousemove",r)},r=s=>{let g=e.offsetWidth,m=e.offsetHeight,d=window.innerWidth-g,h=window.innerHeight-m,v=Math.max(0,Math.min(s.clientX-g/2,d)),f=Math.max(0,Math.min(s.clientY-m/2,h));e.style.left=`${v}px`,e.style.top=`${f}px`,e.style.right="auto",e.style.bottom="auto"},l=()=>{let s=e.getBoundingClientRect();s.top>=0&&s.left>=0&&s.bottom<=window.innerHeight&&s.right<=window.innerWidth||(e.style.left="auto",e.style.top="auto",e.style.right="20px",e.style.bottom="20px")};return e.addEventListener("click",o),document.addEventListener("lvdbg:move-button-click",n),window.addEventListener("resize",()=>l()),e}var A=`<div id="live-debugger-debug-tooltip">
<div
class="live-debugger-tooltip-option"
id="live-debugger-debug-tooltip-open-in-new-tab"
Expand Down Expand Up @@ -156,7 +156,7 @@
<p>Move button</p>
</div>
</div>
`;function E({liveDebuggerURL:e,debugChannel:t}){let o=w(U),n=!1,i=d=>{o.style.display="block";let h=o.getBoundingClientRect(),v=h.width,f=h.height;d.right+v>window.innerWidth?o.style.left=`${d.left-v}px`:o.style.left=`${d.right}px`,d.top+f>window.innerHeight?o.style.top=`${d.bottom-f}px`:o.style.top=`${d.top}px`,n=!0},r=()=>{o.style.display="none",n=!1},l=d=>{let h=d.detail.buttonRect;n?r():i(h)},s=()=>{window.open(e,"_blank"),r()},g=()=>{a("lvdbg:inspect-button-click"),r()},m=()=>{a("lvdbg:move-button-click"),r()};return o.querySelector("#live-debugger-debug-tooltip-open-in-new-tab").addEventListener("click",s),o.querySelector("#live-debugger-debug-tooltip-inspect-elements").addEventListener("click",g),o.querySelector("#live-debugger-debug-tooltip-move-button").addEventListener("click",m),document.addEventListener("lvdbg:debug-button-click",l),document.addEventListener("lvdbg:click-outside-debug-menu",r),t.on("inspect-mode-changed",r),window.addEventListener("resize",()=>{n&&r()}),o}function A(){return new Promise(e=>{let t=document.querySelectorAll("[data-phx-session]"),o={},n=document.querySelector("[data-phx-main]")?.id,i=l=>{se(l)&&(de(o,l.target),ce(o,t)&&(r.disconnect(),e({mainSocketID:n,rootSocketIDs:ue(o,n)})))},r=new MutationObserver(l=>{l.forEach(i)});t.forEach(l=>{r.observe(l,{attributes:!0})})})}function se(e){return e.type==="attributes"&&e.attributeName==="data-phx-root-id"}function de(e,t){e[t.id]=t.getAttribute("data-phx-root-id")}function ce(e,t){return Object.keys(e).length>=t.length}function ue(e,t){let o=new Set(Object.values(e));return o.delete(t),[...o]}function R(){let e=document.querySelector('meta[name="live-debugger-config"]');if(e)return e;{let t=`
`;function E({liveDebuggerURL:e,debugChannel:t}){let o=w(A),n=!1,i=d=>{o.style.display="block";let h=o.getBoundingClientRect(),v=h.width,f=h.height;d.right+v>window.innerWidth?o.style.left=`${d.left-v}px`:o.style.left=`${d.right}px`,d.top+f>window.innerHeight?o.style.top=`${d.bottom-f}px`:o.style.top=`${d.top}px`,n=!0},r=()=>{o.style.display="none",n=!1},l=d=>{let h=d.detail.buttonRect;n?r():i(h)},s=()=>{window.open(e,"_blank"),r()},g=()=>{a("lvdbg:inspect-button-click"),r()},m=()=>{a("lvdbg:move-button-click"),r()};return o.querySelector("#live-debugger-debug-tooltip-open-in-new-tab").addEventListener("click",s),o.querySelector("#live-debugger-debug-tooltip-inspect-elements").addEventListener("click",g),o.querySelector("#live-debugger-debug-tooltip-move-button").addEventListener("click",m),document.addEventListener("lvdbg:debug-button-click",l),document.addEventListener("lvdbg:click-outside-debug-menu",r),t.on("inspect-mode-changed",r),window.addEventListener("resize",()=>{n&&r()}),o}function U(){return new Promise(e=>{let t=document.querySelectorAll("[data-phx-session]"),o={},n=document.querySelector("[data-phx-main]")?.id,i=l=>{se(l)&&(de(o,l.target),ce(o,t)&&(r.disconnect(),e({mainSocketID:n,rootSocketIDs:ue(o,n)})))},r=new MutationObserver(l=>{l.forEach(i)});t.forEach(l=>{r.observe(l,{attributes:!0})})})}function se(e){return e.type==="attributes"&&e.attributeName==="data-phx-root-id"}function de(e,t){e[t.id]=t.getAttribute("data-phx-root-id")}function ce(e,t){return Object.keys(e).length>=t.length}function ue(e,t){let o=new Set(Object.values(e));return o.delete(t),[...o]}function R(){let e=document.querySelector('meta[name="live-debugger-config"]');if(e)return e;{let t=`
LiveDebugger meta tag not found!
If you have recently bumped LiveDebugger version, please update your layout according to the instructions in the GitHub README.
You can find it here: https://github.com/software-mansion/live-debugger#installation
Expand Down Expand Up @@ -217,4 +217,4 @@
</div>
</div>
</div>
`;function Ie(e,t){let o=e.querySelector(".live-debugger-tooltip-icon-component");o.style.display=t.type==="LiveComponent"?"block":"none";let n=e.querySelector(".live-debugger-tooltip-icon-view");n.style.display=t.type==="LiveView"?"block":"none"}function De(e,t){let o=e.querySelector(".type-info"),n=o.querySelector(".type-text"),i=o.querySelector(".live-debugger-type-square");n.textContent=t.type,i.style.backgroundColor=t.type==="LiveComponent"?"#87CCE8":"#ffe780"}function Se(e,t){let o=e.querySelector(".id-info"),n=o.querySelector(".label"),i=o.querySelector(".value");n.textContent=`${t.id_key}:`,i.textContent=t.id_value}function $e(e,t){De(e,t),Se(e,t)}function qe(e,t){let o=e.querySelector(".live-debugger-tooltip-module");o.textContent=t.module||"Element"}function Q(e,t){let o=w(J);return qe(o,e),Ie(o,e),$e(o,e),t.appendChild(o),o}function Te(e,t){let o=e.top-t.height-10,n=e.left;return{top:o,left:n}}function He(e,t,o,n){return e<10&&(e=t.bottom+10),e+o.height>n-10&&(e=t.top-o.height-10,e<10&&(e=10)),e<10&&(e=10),e+o.height>n-10&&(e=n-o.height-10),e}function Ve(e,t,o){return e+t.width>o-10&&(e=o-t.width-10),e<10&&(e=10),e<10&&(e=10),e+t.width>o-10&&(e=o-t.width-10),e}function Be(e,t,o){e.style.top=`${t+window.scrollY}px`,e.style.left=`${o+window.scrollX}px`}function H(e,t){if(!t||!e)return;let o=t.getBoundingClientRect(),n=e.getBoundingClientRect(),i=window.innerWidth,r=window.innerHeight,{top:l,left:s}=Te(o,n);return l=He(l,o,n,r),s=Ve(s,n,i),Be(e,l,s),{top:l,left:s,tooltipRect:n}}function _e(e){let t=e.querySelector(".live-debugger-tooltip-arrow");t&&t.remove()}function Ue(){let e=document.createElement("div");return e.className="live-debugger-tooltip-arrow",e}function Ae(e,t,o){let n=e+t.height,i=o.top;return n<i?"down":"up"}function V(e,t,o,n){_e(e);let i=Ue();Ae(o,n,t)==="down"?i.classList.add("live-debugger-tooltip-arrow-down"):i.classList.add("live-debugger-tooltip-arrow-up"),e.appendChild(i)}var te="live-debugger-tooltip",Re="live-debugger-highlight-element";function oe(e){return e.querySelector(`#${Re}`)}function ne(e){let t=e.querySelector(`#${te}`);t&&t.remove()}function Oe(e,t){let o=oe(t);if(!o)return;ne(t);let n=Q(e,t),i=H(n,o);i&&V(n,o.getBoundingClientRect(),i.top,i.tooltipRect)}function ee(e){let t=e.querySelector(`#${te}`),o=oe(e);if(t&&o){let n=H(t,o);n&&V(t,o.getBoundingClientRect(),n.top,n.tooltipRect)}}function Pe(e,t){Oe(e.detail,t)}function ze(e){ne(e)}function je(e){window.addEventListener("resize",()=>ee(e)),window.addEventListener("scroll",()=>ee(e)),document.addEventListener("lvdbg:show-tooltip",t=>Pe(t,e)),document.addEventListener("lvdbg:remove-tooltip",()=>ze(e))}function B(e){je(e)}window.document.addEventListener("DOMContentLoaded",async()=>{let e=R(),t=O(e),{mainSocketID:o,rootSocketIDs:n}=await A();if(o?n=[]:[o,...n]=n,o){let i=`${t}/redirect/${o}`,{debugChannel:r}=q(t,o,n);r.on("ping",d=>{console.log("Received ping",d),r.push("pong",d)});let l=document.createElement("div");l.style.position="absolute",l.style.width="0px",l.style.height="0px",l.style.left="0px",l.style.top="0px",l.style.zIndex="2147483647",document.body.appendChild(l);let s=l.attachShadow({mode:"closed"}),g=document.createElement("link");g.rel="stylesheet",g.href=`${t}/assets/live_debugger/client.css`,s.appendChild(g);let{debugButton:m}=L(e,i,r,s);T({baseURL:t,debugChannel:r,socketID:o,debugButton:m}),B(s),k(r,s)}console.info(`LiveDebugger available at: ${t}`)});})();
`;function Ie(e,t){let o=e.querySelector(".live-debugger-tooltip-icon-component");o.style.display=t.type==="LiveComponent"?"block":"none";let n=e.querySelector(".live-debugger-tooltip-icon-view");n.style.display=t.type==="LiveView"?"block":"none"}function De(e,t){let o=e.querySelector(".type-info"),n=o.querySelector(".type-text"),i=o.querySelector(".live-debugger-type-square");n.textContent=t.type,i.style.backgroundColor=t.type==="LiveComponent"?"#87CCE8":"#ffe780"}function Se(e,t){let o=e.querySelector(".id-info"),n=o.querySelector(".label"),i=o.querySelector(".value");n.textContent=`${t.id_key}:`,i.textContent=t.id_value}function $e(e,t){De(e,t),Se(e,t)}function qe(e,t){let o=e.querySelector(".live-debugger-tooltip-module");o.textContent=t.module||"Element"}function Q(e,t){let o=w(J);return qe(o,e),Ie(o,e),$e(o,e),t.appendChild(o),o}function Te(e,t){let o=e.top-t.height-10,n=e.left;return{top:o,left:n}}function He(e,t,o,n){return e<10&&(e=t.bottom+10),e+o.height>n-10&&(e=t.top-o.height-10,e<10&&(e=10)),e<10&&(e=10),e+o.height>n-10&&(e=n-o.height-10),e}function Ve(e,t,o){return e+t.width>o-10&&(e=o-t.width-10),e<10&&(e=10),e<10&&(e=10),e+t.width>o-10&&(e=o-t.width-10),e}function Be(e,t,o){e.style.top=`${t+window.scrollY}px`,e.style.left=`${o+window.scrollX}px`}function H(e,t){if(!t||!e)return;let o=t.getBoundingClientRect(),n=e.getBoundingClientRect(),i=window.innerWidth,r=window.innerHeight,{top:l,left:s}=Te(o,n);return l=He(l,o,n,r),s=Ve(s,n,i),Be(e,l,s),{top:l,left:s,tooltipRect:n}}function _e(e){let t=e.querySelector(".live-debugger-tooltip-arrow");t&&t.remove()}function Ae(){let e=document.createElement("div");return e.className="live-debugger-tooltip-arrow",e}function Ue(e,t,o){let n=e+t.height,i=o.top;return n<i?"down":"up"}function V(e,t,o,n){_e(e);let i=Ae();Ue(o,n,t)==="down"?i.classList.add("live-debugger-tooltip-arrow-down"):i.classList.add("live-debugger-tooltip-arrow-up"),e.appendChild(i)}var te="live-debugger-tooltip",Re="live-debugger-highlight-element";function oe(e){return e.querySelector(`#${Re}`)}function ne(e){let t=e.querySelector(`#${te}`);t&&t.remove()}function Oe(e,t){let o=oe(t);if(!o)return;ne(t);let n=Q(e,t),i=H(n,o);i&&V(n,o.getBoundingClientRect(),i.top,i.tooltipRect)}function ee(e){let t=e.querySelector(`#${te}`),o=oe(e);if(t&&o){let n=H(t,o);n&&V(t,o.getBoundingClientRect(),n.top,n.tooltipRect)}}function Pe(e,t){Oe(e.detail,t)}function ze(e){ne(e)}function je(e){window.addEventListener("resize",()=>ee(e)),window.addEventListener("scroll",()=>ee(e)),document.addEventListener("lvdbg:show-tooltip",t=>Pe(t,e)),document.addEventListener("lvdbg:remove-tooltip",()=>ze(e))}function B(e){je(e)}window.document.addEventListener("DOMContentLoaded",async()=>{let e=R(),t=O(e),{mainSocketID:o,rootSocketIDs:n}=await U();if(o?n=[]:[o,...n]=n,o){let i=`${t}/redirect/${o}`,{debugChannel:r}=q(t,o,n);r.on("ping",h=>{console.log("Received ping",h),r.push("pong",h)});let l=document.createElement("div");l.style.position="absolute",l.style.width="0px",l.style.height="0px",l.style.left="0px",l.style.top="0px",l.style.zIndex="2147483647",document.body.appendChild(l);let s=e.getAttribute("e2e")==="true"?"open":"closed",g=l.attachShadow({mode:s}),m=document.createElement("link");m.rel="stylesheet",m.href=`${t}/assets/live_debugger/client.css`,g.appendChild(m);let{debugButton:d}=L(e,i,r,g);T({baseURL:t,debugChannel:r,socketID:o,debugButton:d}),B(g),k(r,g)}console.info(`LiveDebugger available at: ${t}`)});})();
6 changes: 3 additions & 3 deletions priv/static/client.js.map
View file
Open in desktop

Large diffs are not rendered by default.

Loading