Tests: Adjust shadow dom for e2e tests (#967)

* Disable closed mode in e2e tests

* Build assets

Author: kraleppa

assets/client/client.js

@@ -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';

lib/live_debugger.ex

@@ -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)

lib/live_debugger/client/config_component.ex

@@ -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>

priv/static/client.js

@@ -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"
@@ -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
@@ -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}`)});})();