📺 Pop out Live Docs tab into window-in-window

fonsp · Oct 11, 2024 · 3db7dd4 · 3db7dd4
1 parent af7f5e9
commit 3db7dd4
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 12 deletions.
diff --git a/frontend/components/BottomRightPanel.js b/frontend/components/BottomRightPanel.js
@@ -78,6 +78,35 @@ export let BottomRightPanel = ({
 
     const my_clock_is_ahead_by = useMyClockIsAheadBy({ connected })
 
+    const on_popout_click = async () => {
+        // Open a Picture-in-Picture window, see https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
+        // @ts-ignore
+        const pip_window = await documentPictureInPicture.requestWindow()
+
+        // Copy style sheets
+        ;[...document.styleSheets].forEach((styleSheet) => {
+            try {
+                const style = document.createElement("style")
+                style.textContent = [...styleSheet.cssRules].map((rule) => rule.cssText).join("")
+                pip_window.document.head.appendChild(style)
+            } catch (e) {
+                const link = document.createElement("link")
+                link.rel = "stylesheet"
+                link.type = styleSheet.type
+                // @ts-ignore
+                link.media = styleSheet.media
+                // @ts-ignore
+                link.href = styleSheet.href
+                pip_window.document.head.appendChild(link)
+            }
+        })
+        pip_window.document.body.append(container_ref.current.firstElementChild)
+        pip_window.addEventListener("pagehide", (event) => {
+            const pipPlayer = event.target.querySelector("pluto-helpbox")
+            container_ref.current.append(pipPlayer)
+        })
+    }
+
     return html`
         <aside id="helpbox-wrapper" ref=${container_ref}>
             <pluto-helpbox class=${cl({ hidden, [`helpbox-${open_tab ?? hidden}`]: true })}>
@@ -119,17 +148,23 @@ export let BottomRightPanel = ({
                                 : html`Status${" "}<span class="subprogress-counter">(${status_done}/${status_total})</span>`}</span
                         >
                     </button>
+
                     ${hidden
                         ? null
-                        : html`<button
-                              class="helpbox-close"
-                              title="Close panel"
-                              onClick=${() => {
-                                  set_open_tab(null)
-                              }}
-                          >
-                              <span></span>
-                          </button>`}
+                        : html` ${"documentPictureInPicture" in window
+                                  ? html`<button class="helpbox-popout" title="Pop out panel" onClick=${on_popout_click}>
+                                        <span></span>
+                                    </button>`
+                                  : null}
+                              <button
+                                  class="helpbox-close"
+                                  title="Close panel"
+                                  onClick=${() => {
+                                      set_open_tab(null)
+                                  }}
+                              >
+                                  <span></span>
+                              </button>`}
                 </header>
                 ${open_tab === "docs"
                     ? html`<${LiveDocsTab}

diff --git a/frontend/editor.css b/frontend/editor.css
@@ -2459,6 +2459,10 @@ button.helpbox-tab-key {
     /* overflow: hidden; */
 }
 
+button.helpbox-tab-key.helpbox-process {
+    margin-right: auto;
+}
+
 button.helpbox-process.busy {
     outline: 6px solid var(--process-busy);
 }
@@ -2485,18 +2489,17 @@ button.active.helpbox-tab-key {
     animation: none;
 }
 
-pluto-helpbox > header > button.helpbox-close {
+pluto-helpbox > header > button:is(.helpbox-close, .helpbox-popout) {
     border: none;
     background: none;
     cursor: pointer;
 
     /* for bigger hitbox */
     margin: -15px;
     border: 15px solid transparent;
-    margin-left: auto;
 }
 
-pluto-helpbox > header > button.helpbox-close > span {
+pluto-helpbox > header > button:is(.helpbox-close, .helpbox-popout) > span {
     display: block;
     content: " " !important;
     background-size: 1em 1em;
@@ -2505,6 +2508,9 @@ pluto-helpbox > header > button.helpbox-close > span {
     background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/chevron-down-outline.svg");
     filter: var(--image-filters);
 }
+pluto-helpbox > header > button.helpbox-popout > span {
+    background-image: url("https://cdn.jsdelivr.net/gh/ionic-team/[email protected]/src/svg/open-outline.svg");
+}
 pluto-helpbox.hidden {
     height: initial;
     width: auto;
@@ -2513,6 +2519,16 @@ pluto-helpbox.hidden > section {
     display: none;
 }
 
+/* pop out */
+body > pluto-helpbox {
+    position: static;
+    width: auto;
+    height: auto;
+}
+body > pluto-helpbox > header > button.helpbox-popout {
+    display: none;
+}
+
 /* NOTE */
 /* We try to match the visual style of Documenter.jl, so we have copied over some rules from */
 /* https://docs.julialang.org/en/v1/assets/themes/documenter-light.css */