From 2935d9feb7b8fe2d417c8f18000d32b7d445c54c Mon Sep 17 00:00:00 2001
From: Mihai Parparita <mihai@tailscale.com>
Date: Wed, 24 Aug 2022 16:39:02 -0700
Subject: [PATCH] Add demo of opening the terminal in a popout window

The poput window is just a rendering surface, the termminal code still
executes in the original/parent window.
---
 demo/client.ts  | 32 +++++++++++++++++++++++++++++++-
 demo/index.html |  1 +
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/demo/client.ts b/demo/client.ts
index 610f2e27..00b10b57 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -94,7 +94,7 @@ const addons: { [T in AddonType]: IDemoAddon<T> } = {
   ligatures: { name: 'ligatures', ctor: LigaturesAddon, canChange: true }
 };
 
-const terminalContainer = document.getElementById('terminal-container');
+let terminalContainer = document.getElementById('terminal-container');
 const actionElements = {
   find: <HTMLInputElement>document.querySelector('#find'),
   findNext: <HTMLInputElement>document.querySelector('#find-next'),
@@ -169,6 +169,35 @@ const disposeRecreateButtonHandler = () => {
   }
 };
 
+const createNewWindowButtonHandler = () => {
+  if (term) {
+    disposeRecreateButtonHandler();
+  }
+  const win = window.open();
+  terminalContainer = win.document.createElement('div');
+  terminalContainer.id = 'terminal-container';
+  win.document.body.appendChild(terminalContainer);
+
+  // Stylesheets are needed to get the terminal in the popout window to render
+  // correctly. We also need to wait for them to load before creating the
+  // terminal, otherwise we will not compute the correct metrics when rendering.
+  let pendingStylesheets = 0;
+  for (const linkNode of document.querySelectorAll('head link[rel=stylesheet]')) {
+    const newLink = document.createElement('link');
+    newLink.rel = 'stylesheet';
+    newLink.href = (linkNode as HTMLLinkElement).href;
+    win.document.head.appendChild(newLink);
+
+    pendingStylesheets++;
+    newLink.addEventListener('load', () => {
+      pendingStylesheets--;
+      if (pendingStylesheets === 0) {
+        createTerminal();
+      }
+    });
+  }
+}
+
 if (document.location.pathname === '/test') {
   window.Terminal = Terminal;
   window.AttachAddon = AttachAddon;
@@ -182,6 +211,7 @@ if (document.location.pathname === '/test') {
 } else {
   createTerminal();
   document.getElementById('dispose').addEventListener('click', disposeRecreateButtonHandler);
+  document.getElementById('create-new-window').addEventListener('click', createNewWindowButtonHandler);
   document.getElementById('serialize').addEventListener('click', serializeButtonHandler);
   document.getElementById('htmlserialize').addEventListener('click', htmlSerializeButtonHandler);
   document.getElementById('custom-glyph').addEventListener('click', writeCustomGlyphHandler);
diff --git a/demo/index.html b/demo/index.html
index d6c20851..41289221 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -70,6 +70,7 @@
             <dl>
               <dt>Lifecycle</dt>
               <dd><button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button></dd>
+              <dd><button id="create-new-window" title="This is used to test rendering in other windows">Create terminal in new window</button></dd>
 
               <dt>Performance</dt>
               <dd><button id="load-test" title="Write several MB of data to simulate a lot of data coming from the process">Load test</button></dd>