diff options
-rw-r--r-- | ext/fg/js/frontend.js | 47 | ||||
-rw-r--r-- | test/data/html/test-document2-frame2.svg | 15 | ||||
-rw-r--r-- | test/data/html/test-document2-script.js | 4 | ||||
-rw-r--r-- | test/data/html/test-document2.html | 68 |
4 files changed, 116 insertions, 18 deletions
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index 36b1898b..e7fb7f47 100644 --- a/ext/fg/js/frontend.js +++ b/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}) { - this._popup.hide(!passive); - this._popup.clearAutoPlayTimer(); + 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; } - await popup.setOptionsContext(optionsContext, this._id); + 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,14 +485,18 @@ class Frontend { } _showPopupContent(textSource, optionsContext, details=null) { - this._lastShowPromise = this._popup.showContent( - { - source: this._id, - optionsContext, - elementRect: textSource.getRect(), - writingMode: textSource.getWritingMode() - }, - details + this._lastShowPromise = ( + this._popup !== null ? + this._popup.showContent( + { + source: this._id, + optionsContext, + elementRect: textSource.getRect(), + writingMode: textSource.getWritingMode() + }, + details + ) : + Promise.resolve() ); this._lastShowPromise.catch((error) => { if (yomichan.isExtensionUnloaded) { return; } diff --git a/test/data/html/test-document2-frame2.svg b/test/data/html/test-document2-frame2.svg new file mode 100644 index 00000000..380eab97 --- /dev/null +++ b/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>
\ No newline at end of file diff --git a/test/data/html/test-document2-script.js b/test/data/html/test-document2-script.js index ab516a4e..01bc211f 100644 --- a/test/data/html/test-document2-script.js +++ b/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); diff --git a/test/data/html/test-document2.html b/test/data/html/test-document2.html index 6d174571..10fecbbb 100644 --- a/test/data/html/test-document2.html +++ b/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><iframe> 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><iframe> 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><iframe> 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 <img>.</y-description> + <img src="test-document2-frame2.svg" class="container"> + </y-test> + + <y-test> + <y-description>SVG <object>.</y-description> + <object data="test-document2-frame2.svg" type="image/svg+xml" class="container"></object> + </y-test> + + <y-test> + <y-description>SVG <embed>.</y-description> + <embed type="image/svg+xml" src="test-document2-frame2.svg" class="container"> + </y-test> + + <y-test> + <y-description>SVG <iframe>.</y-description> + <iframe src="test-document2-frame2.svg" allowfullscreen="true" class="container"></iframe> + </y-test> + + <y-test> + <y-description>SVG <svg>.</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); |