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); |