XMLDocument handling (#738)

* Add tests for SVGs

* Add more null checks for Frontend._popup

* Use null popup when on an XMLDocument
This commit is contained in:
toasted-nutbread 2020-08-22 13:03:35 -04:00 committed by GitHub
parent c26c4ae0cb
commit 1f564b94cb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 116 additions and 18 deletions

View File

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

View File

@ -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>

After

Width:  |  Height:  |  Size: 375 B

View File

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

View File

@ -8,6 +8,24 @@
<link rel="stylesheet" href="test-stylesheet.css" /> <link rel="stylesheet" href="test-stylesheet.css" />
<script src="test-document2-script.js"></script> <script src="test-document2-script.js"></script>
</head> </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> <body>
<h1>Yomichan Manual Tests</h1> <h1>Yomichan Manual Tests</h1>
@ -15,7 +33,7 @@
<y-test> <y-test>
<y-description>Standard content.</y-description> <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>
ありがとう ありがとう
</div> </div>
@ -30,7 +48,7 @@
<div class="template-content-container"></div> <div class="template-content-container"></div>
<template> <template>
<link rel="stylesheet" href="test-stylesheet.css" /> <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>
ありがとう ありがとう
</div> </div>
@ -46,7 +64,7 @@
<div class="template-content-container"></div> <div class="template-content-container"></div>
<template> <template>
<link rel="stylesheet" href="test-stylesheet.css" /> <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>
ありがとう ありがとう
</div> </div>
@ -59,14 +77,14 @@
<y-test> <y-test>
<y-description>&lt;iframe&gt; element.</y-description> <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>
<y-test data-shadow-mode="open"> <y-test data-shadow-mode="open">
<y-description>&lt;iframe&gt; element inside of an open shadow DOM.</y-description> <y-description>&lt;iframe&gt; element inside of an open shadow DOM.</y-description>
<div class="template-content-container"></div> <div class="template-content-container"></div>
<template> <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> </template>
</y-test> </y-test>
@ -74,10 +92,48 @@
<y-description>&lt;iframe&gt; element inside of a closed shadow DOM.</y-description> <y-description>&lt;iframe&gt; element inside of a closed shadow DOM.</y-description>
<div class="template-content-container"></div> <div class="template-content-container"></div>
<template> <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> </template>
</y-test> </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> <script>
for (const element of document.querySelectorAll('y-test')) { for (const element of document.querySelectorAll('y-test')) {
setup(element); setup(element);