From 0322d2bb60e757cbc16e37b9baed66420e2073b0 Mon Sep 17 00:00:00 2001
From: Tomas Mecir <mecirt@gmail.com>
Date: Tue, 5 Apr 2022 15:12:41 +0200
Subject: [PATCH 1/2] * Fix links in new window by setting the base URL
 correctly * Update styles in the new window whenever they change in the
 parent.   This is needed if the application mounts new React components
 inside   the new window (React updates those styles on-demand instead of  
 loading them at start).

---
 src/NewWindow.js | 167 ++++++++++++++++++++++++++---------------------
 1 file changed, 93 insertions(+), 74 deletions(-)

diff --git a/src/NewWindow.js b/src/NewWindow.js
index 019980a..56143a5 100644
--- a/src/NewWindow.js
+++ b/src/NewWindow.js
@@ -99,7 +99,8 @@ class NewWindow extends React.PureComponent {
 
     // Open a new window.
     this.window = window.open(url, name, toWindowFeatures(features))
-    this.container = this.window.document.createElement('div')
+    let doc = this.window.document;
+    this.container = doc.createElement('div')
     // When a new window use content from a cross-origin there's no way we can attach event
     // to it. Therefore, we need to detect in a interval when the new window was destroyed
     // or was closed.
@@ -111,27 +112,32 @@ class NewWindow extends React.PureComponent {
 
     // Check if the new window was succesfully opened.
     if (this.window) {
-      this.window.document.title = title
+      doc.title = title;
 
       // Check if the container already exists as the window may have been already open
-      this.container = this.window.document.getElementById(
+      this.container = doc.getElementById(
         'new-window-container'
       )
       if (this.container === null) {
-        this.container = this.window.document.createElement('div')
+        // Set the base href for links.
+        this.base = doc.createElement('base');
+        this.base.setAttribute('href', window.location.href);
+        doc.head.appendChild(this.base);
+
+        this.container = doc.createElement('div')
         this.container.setAttribute('id', 'new-window-container')
-        this.window.document.body.appendChild(this.container)
+        doc.body.appendChild(this.container)
       } else {
         // Remove any existing content
-        const staticContainer = this.window.document.getElementById(
+        const staticContainer = doc.getElementById(
           'new-window-container-static'
         )
-        this.window.document.body.removeChild(staticContainer)
+        doc.body.removeChild(staticContainer)
       }
 
       // If specified, copy styles from parent window's document.
       if (this.props.copyStyles) {
-        setTimeout(() => copyStyles(document, this.window.document), 0)
+        setTimeout(() => this.copyStyles(document, doc), 0)
       }
 
       if (typeof onOpen === 'function') {
@@ -180,6 +186,12 @@ class NewWindow extends React.PureComponent {
     // Remove checker interval.
     clearInterval(this.windowCheckerInterval)
 
+    // Clear the observer.
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+
     // Call any function bound to the `onUnload` prop.
     const { onUnload } = this.props
 
@@ -187,6 +199,79 @@ class NewWindow extends React.PureComponent {
       onUnload(null)
     }
   }
+
+  /**
+  * Copy styles from a source document to a target.
+  * @param {Object} source
+  * @param {Object} target
+  * @private
+  */
+
+  copyStyles(source, target) {
+    // Store style tags, avoid reflow in the loop
+    const headFrag = target.createDocumentFragment()
+
+    Array.from(source.styleSheets).forEach(styleSheet => {
+      // For <style> elements
+      let rules
+      try {
+        rules = styleSheet.cssRules
+      } catch (err) {
+        console.error(err)
+      }
+      if (rules) {
+        // IE11 is very slow for appendChild, so use plain string here
+        const ruleText = []
+
+        // Write the text of each rule into the body of the style element
+        Array.from(styleSheet.cssRules).forEach(cssRule => {
+          const { type } = cssRule
+
+          // Skip unknown rules
+          if (type === CSSRule.UNKNOWN_RULE) {
+            return
+          }
+
+          let returnText = ''
+
+          if (type === CSSRule.KEYFRAMES_RULE) {
+            // IE11 will throw error when trying to access cssText property, so we
+            // need to assemble them
+            returnText = getKeyFrameText(cssRule)
+          } else if (
+            [CSSRule.IMPORT_RULE, CSSRule.FONT_FACE_RULE].includes(type)
+          ) {
+            // Check if the cssRule type is CSSImportRule (3) or CSSFontFaceRule (5)
+            // to handle local imports on a about:blank page
+            // '/custom.css' turns to 'http://my-site.com/custom.css'
+            returnText = fixUrlForRule(cssRule)
+          } else {
+            returnText = cssRule.cssText
+          }
+          ruleText.push(returnText)
+        })
+
+        const newStyleEl = target.createElement('style')
+        newStyleEl.textContent = ruleText.join('\n')
+        headFrag.appendChild(newStyleEl)
+      } else if (styleSheet.href) {
+        // for <link> elements loading CSS from a URL
+        const newLinkEl = target.createElement('link')
+
+        newLinkEl.rel = 'stylesheet'
+        newLinkEl.href = styleSheet.href
+        headFrag.appendChild(newLinkEl)
+      }
+    })
+    target.head.appendChild(headFrag)
+
+    // Monitor changes and update the styles if any happen.
+    if (!this.observer) {
+      this.observer = new MutationObserver((list, observer) => { this.copyStyles(source, target) } );
+      this.observer.observe(source.head, { childList: true });
+    }
+  }
+
 }
 
 NewWindow.propTypes = {
@@ -208,72 +293,6 @@ NewWindow.propTypes = {
  * @private
  */
 
-/**
- * Copy styles from a source document to a target.
- * @param {Object} source
- * @param {Object} target
- * @private
- */
-
-function copyStyles(source, target) {
-  // Store style tags, avoid reflow in the loop
-  const headFrag = target.createDocumentFragment()
-
-  Array.from(source.styleSheets).forEach(styleSheet => {
-    // For <style> elements
-    let rules
-    try {
-      rules = styleSheet.cssRules
-    } catch (err) {
-      console.error(err)
-    }
-    if (rules) {
-      // IE11 is very slow for appendChild, so use plain string here
-      const ruleText = []
-
-      // Write the text of each rule into the body of the style element
-      Array.from(styleSheet.cssRules).forEach(cssRule => {
-        const { type } = cssRule
-
-        // Skip unknown rules
-        if (type === CSSRule.UNKNOWN_RULE) {
-          return
-        }
-
-        let returnText = ''
-
-        if (type === CSSRule.KEYFRAMES_RULE) {
-          // IE11 will throw error when trying to access cssText property, so we
-          // need to assemble them
-          returnText = getKeyFrameText(cssRule)
-        } else if (
-          [CSSRule.IMPORT_RULE, CSSRule.FONT_FACE_RULE].includes(type)
-        ) {
-          // Check if the cssRule type is CSSImportRule (3) or CSSFontFaceRule (5)
-          // to handle local imports on a about:blank page
-          // '/custom.css' turns to 'http://my-site.com/custom.css'
-          returnText = fixUrlForRule(cssRule)
-        } else {
-          returnText = cssRule.cssText
-        }
-        ruleText.push(returnText)
-      })
-
-      const newStyleEl = target.createElement('style')
-      newStyleEl.textContent = ruleText.join('\n')
-      headFrag.appendChild(newStyleEl)
-    } else if (styleSheet.href) {
-      // for <link> elements loading CSS from a URL
-      const newLinkEl = target.createElement('link')
-
-      newLinkEl.rel = 'stylesheet'
-      newLinkEl.href = styleSheet.href
-      headFrag.appendChild(newLinkEl)
-    }
-  })
-
-  target.head.appendChild(headFrag)
-}
 
 /**
  * Make keyframe rules.

From 4d141982cf111736db8760e6ccc9966a08913ede Mon Sep 17 00:00:00 2001
From: Tomas Mecir <mecirt@gmail.com>
Date: Fri, 13 May 2022 21:15:37 +0200
Subject: [PATCH 2/2] Update to properly delete old styles when updating the
 tree

---
 src/NewWindow.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/NewWindow.js b/src/NewWindow.js
index 56143a5..197513d 100644
--- a/src/NewWindow.js
+++ b/src/NewWindow.js
@@ -262,9 +262,24 @@ class NewWindow extends React.PureComponent {
         newLinkEl.href = styleSheet.href
         headFrag.appendChild(newLinkEl)
       }
-    })
+    });
+
+    // Remember existing styles
+    let existing = [];
+    let childs = target.head.childNodes;
+    for (let i = 0; i < childs.length; ++i)
+      if (childs[i].tagName.toLowerCase() === 'style')
+        existing.push(childs[i]);
+
     target.head.appendChild(headFrag)
 
+    // Now delete the old styles. I need to do it like this instead of removing the old styles first, otherwise we get flicker as the styles briefly do not exist.
+    window.setTimeout(() => {
+      for (let i = 0; i < existing.length; ++i)
+        if (existing[i].parentNode === target.head)
+          target.head.removeChild(existing[i]);
+    }, 1);
+
     // Monitor changes and update the styles if any happen.
     if (!this.observer) {
       this.observer = new MutationObserver((list, observer) => { this.copyStyles(source, target) } );