XMLDocument handling (#738)

* Add tests for SVGs

* Add more null checks for Frontend._popup

* Use null popup when on an XMLDocument

ext/fg/js/frontend.js

@@ -167,6 +167,7 @@ class Frontend {
     // Message handlers
 
     _onMessagePopupSetVisibleOverride({visible}) {
+        if (this._popup === null) { return; }
         this._popup.setVisibleOverride(visible);
     }
 
@@ -226,15 +227,17 @@ class Frontend {
     }
 
     _onClearSelection({passive}) {
+        if (this._popup !== null) {
             this._popup.hide(!passive);
             this._popup.clearAutoPlayTimer();
+        }
         this._updatePendingOptions();
     }
 
     async _onActiveModifiersChanged({modifiers}) {
         if (areSetsEqual(modifiers, this._activeModifiers)) { return; }
         this._activeModifiers = modifiers;
-        if (await this._popup.isVisible()) {
+        if (this._popup !== null && await this._popup.isVisible()) {
             this._optionsUpdatePending = true;
             return;
         }
@@ -311,7 +314,9 @@ class Frontend {
         const popup = await popupPromise;
         const optionsContext = await this.getOptionsContext();
         if (this._updatePopupToken !== token) { return; }
+        if (popup !== null) {
             await popup.setOptionsContext(optionsContext, this._id);
+        }
         if (this._updatePopupToken !== token) { return; }
 
         if (this._isSearchPage) {
@@ -323,6 +328,11 @@ class Frontend {
     }
 
     async _getDefaultPopup() {
+        const isXmlDocument = (typeof XMLDocument !== 'undefined' && document instanceof XMLDocument);
+        if (isXmlDocument) {
+            return null;
+        }
+
         return this._popupFactory.getOrCreatePopup({depth: this._depth, ownerFrameId: this._frameId});
     }
 
@@ -335,7 +345,12 @@ class Frontend {
     async _getIframeProxyPopup() {
         const targetFrameId = 0; // Root frameId
         await this._waitForFrontendReady(targetFrameId);
+
         const {popupId} = await api.crossFrame.invoke(targetFrameId, 'getPopupInfo');
+        if (popupId === null) {
+            return null;
+        }
+
         const popup = new PopupProxy(popupId, 0, null, targetFrameId, this._frameId, this._frameOffsetForwarder);
         popup.on('offsetNotFound', () => {
             this._allowRootFramePopupProxy = false;
@@ -368,6 +383,10 @@ class Frontend {
     }
 
     async _search(textSource, cause) {
+        if (this._popup === null) {
+            return null;
+        }
+
         await this._updatePendingOptions();
 
         let results = null;
@@ -466,7 +485,9 @@ class Frontend {
     }
 
     _showPopupContent(textSource, optionsContext, details=null) {
-        this._lastShowPromise = this._popup.showContent(
+        this._lastShowPromise = (
+            this._popup !== null ?
+            this._popup.showContent(
                 {
                     source: this._id,
                     optionsContext,
@@ -474,6 +495,8 @@ class Frontend {
                     writingMode: textSource.getWritingMode()
                 },
                 details
+            ) :
+            Promise.resolve()
         );
         this._lastShowPromise.catch((error) => {
             if (yomichan.isExtensionUnloaded) { return; }

test/data/html/test-document2-frame2.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<style>
+:root {
+    background-color: #f8f8f8;
+}
+text {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    fill: #000000;
+    dominant-baseline: hanging;
+}
+</style>
+<text x="7" y="12">ありがとう</text>
+</svg>

test/data/html/test-document2-script.js

@@ -58,6 +58,10 @@ function setup(container, fullscreenElement=null) {
     if (template !== null && templateContentContainer !== null) {
         const mode = container.dataset.shadowMode;
         const shadow = templateContentContainer.attachShadow({mode});
+
+        const containerStyles = document.querySelector('#container-styles');
+        shadow.appendChild(containerStyles.cloneNode(true));
+
         const content = document.importNode(template.content, true);
         setup(content);
         shadow.appendChild(content);

test/data/html/test-document2.html

@@ -8,6 +8,24 @@
         <link rel="stylesheet" href="test-stylesheet.css" />
         <script src="test-document2-script.js"></script>
     </head>
+    <style id="container-styles">
+.container {
+    width: 100%;
+    height: 200px;
+    border: 1px solid #d8d8d8;
+    position: relative;
+    box-sizing: border-box;
+}
+.container-inner {
+    background-color: #f8f8f8;
+    padding: 0.5em;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+}
+    </style>
 <body>
 
     <h1>Yomichan Manual Tests</h1>
@@ -15,7 +33,7 @@
 
     <y-test>
         <y-description>Standard content.</y-description>
-        <div class="fullscreen-element" style="width: 100%; height: 200px; border: 1px solid #d8d8d8; position: relative;"><div style="background-color: #f8f8f8; padding: 0.5em; position: absolute; left: 0; top: 0; bottom: 0; right: 0;">
+        <div class="fullscreen-element container"><div class="container-inner">
             <div>
                 ありがとう
             </div>
@@ -30,7 +48,7 @@
         <div class="template-content-container"></div>
         <template>
             <link rel="stylesheet" href="test-stylesheet.css" />
-            <div class="fullscreen-element" style="width: 100%; height: 200px; border: 1px solid #d8d8d8; position: relative;"><div style="background-color: #f8f8f8; padding: 0.5em; position: absolute; left: 0; top: 0; bottom: 0; right: 0;">
+            <div class="fullscreen-element container"><div class="container-inner">
                 <div>
                     ありがとう
                 </div>
@@ -46,7 +64,7 @@
         <div class="template-content-container"></div>
         <template>
             <link rel="stylesheet" href="test-stylesheet.css" />
-            <div class="fullscreen-element" style="width: 100%; height: 200px; border: 1px solid #d8d8d8; position: relative;"><div style="background-color: #f8f8f8; padding: 0.5em; position: absolute; left: 0; top: 0; bottom: 0; right: 0;">
+            <div class="fullscreen-element container"><div class="container-inner">
                 <div>
                     ありがとう
                 </div>
@@ -59,14 +77,14 @@
 
     <y-test>
         <y-description>&lt;iframe&gt; element.</y-description>
-        <iframe src="test-document2-frame1.html" allowfullscreen="true" style="width: 100%; height: 200px; border: 1px solid #d8d8d8;"></iframe>
+        <iframe src="test-document2-frame1.html" allowfullscreen="true" class="container"></iframe>
     </y-test>
 
     <y-test data-shadow-mode="open">
         <y-description>&lt;iframe&gt; element inside of an open shadow DOM.</y-description>
         <div class="template-content-container"></div>
         <template>
-            <iframe src="test-document2-frame1.html" allowfullscreen="true" style="width: 100%; height: 200px; border: 1px solid #d8d8d8;"></iframe>
+            <iframe src="test-document2-frame1.html" allowfullscreen="true" class="container"></iframe>
         </template>
     </y-test>
 
@@ -74,10 +92,48 @@
         <y-description>&lt;iframe&gt; element inside of a closed shadow DOM.</y-description>
         <div class="template-content-container"></div>
         <template>
-            <iframe src="test-document2-frame1.html" allowfullscreen="true" style="width: 100%; height: 200px; border: 1px solid #d8d8d8;"></iframe>
+            <iframe src="test-document2-frame1.html" allowfullscreen="true" class="container"></iframe>
         </template>
     </y-test>
 
+    <y-test>
+        <y-description>SVG &lt;img&gt;.</y-description>
+        <img src="test-document2-frame2.svg" class="container">
+    </y-test>
+
+    <y-test>
+        <y-description>SVG &lt;object&gt;.</y-description>
+        <object data="test-document2-frame2.svg" type="image/svg+xml" class="container"></object>
+    </y-test>
+
+    <y-test>
+        <y-description>SVG &lt;embed&gt;.</y-description>
+        <embed type="image/svg+xml" src="test-document2-frame2.svg" class="container">
+    </y-test>
+
+    <y-test>
+        <y-description>SVG &lt;iframe&gt;.</y-description>
+        <iframe src="test-document2-frame2.svg" allowfullscreen="true" class="container"></iframe>
+    </y-test>
+
+    <y-test>
+        <y-description>SVG &lt;svg&gt;.</y-description>
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="container" style="background-color: #f8f8f8;">
+            <text
+                x="7"
+                y="12"
+                style="
+                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 14px;
+                fill: #000000;
+                dominant-baseline: hanging;"
+            >
+                ありがとう
+            </text>
+        </svg>
+    </y-test>
+
+
     <script>
 for (const element of document.querySelectorAll('y-test')) {
     setup(element);