From 7a74c3c31ece7788e82c46f22cb4327ffe08307a Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 13 Feb 2021 23:13:53 -0500 Subject: Move fg/js (#1384) * Move fg/js/frame-ancestry-handler.js to js/comm/frame-ancestry-handler.js * Move fg/js/frame-offset-forwarder.js to js/comm/frame-offset-forwarder.js * Move fg/js/dom-text-scanner.js to js/dom/dom-text-scanner.js * Move fg/js/text-source-element.js to js/dom/text-source-element.js * Move fg/js/text-source-range.js to js/dom/text-source-range.js * Move fg/js/float-main.js to js/display/popup-main.js * Move fg/js/content-script-main.js to js/app/content-script-main.js * Move fg/js/frontend.js to js/app/frontend.js * Move fg/js/popup-factory.js to js/app/popup-factory.js * Move fg/js/popup-proxy.js to js/app/popup-proxy.js * Move fg/js/popup-window.js to js/app/popup-window.js * Move fg/js/popup.js to js/app/popup.js --- ext/js/app/content-script-main.js | 59 ++++ ext/js/app/frontend.js | 691 ++++++++++++++++++++++++++++++++++++++ ext/js/app/popup-factory.js | 319 ++++++++++++++++++ ext/js/app/popup-proxy.js | 218 ++++++++++++ ext/js/app/popup-window.js | 169 ++++++++++ ext/js/app/popup.js | 687 +++++++++++++++++++++++++++++++++++++ 6 files changed, 2143 insertions(+) create mode 100644 ext/js/app/content-script-main.js create mode 100644 ext/js/app/frontend.js create mode 100644 ext/js/app/popup-factory.js create mode 100644 ext/js/app/popup-proxy.js create mode 100644 ext/js/app/popup-window.js create mode 100644 ext/js/app/popup.js (limited to 'ext/js/app') diff --git a/ext/js/app/content-script-main.js b/ext/js/app/content-script-main.js new file mode 100644 index 00000000..5dee4c56 --- /dev/null +++ b/ext/js/app/content-script-main.js @@ -0,0 +1,59 @@ +/* + * Copyright (C) 2019-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* global + * Frontend + * HotkeyHandler + * PopupFactory + * api + */ + +(async () => { + try { + api.forwardLogsToBackend(); + await yomichan.backendReady(); + + const {tabId, frameId} = await api.frameInformationGet(); + if (typeof frameId !== 'number') { + throw new Error('Failed to get frameId'); + } + + const hotkeyHandler = new HotkeyHandler(); + hotkeyHandler.prepare(); + + const popupFactory = new PopupFactory(frameId); + popupFactory.prepare(); + + const frontend = new Frontend({ + tabId, + frameId, + popupFactory, + depth: 0, + parentPopupId: null, + parentFrameId: null, + useProxyPopup: false, + pageType: 'web', + allowRootFramePopupProxy: true, + hotkeyHandler + }); + await frontend.prepare(); + + yomichan.ready(); + } catch (e) { + yomichan.logError(e); + } +})(); diff --git a/ext/js/app/frontend.js b/ext/js/app/frontend.js new file mode 100644 index 00000000..a62b06bf --- /dev/null +++ b/ext/js/app/frontend.js @@ -0,0 +1,691 @@ +/* + * Copyright (C) 2016-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* global + * DocumentUtil + * TextScanner + * TextSourceElement + * TextSourceRange + * api + */ + +class Frontend { + constructor({ + pageType, + popupFactory, + depth, + tabId, + frameId, + parentPopupId, + parentFrameId, + useProxyPopup, + canUseWindowPopup=true, + allowRootFramePopupProxy, + childrenSupported=true, + hotkeyHandler + }) { + this._pageType = pageType; + this._popupFactory = popupFactory; + this._depth = depth; + this._tabId = tabId; + this._frameId = frameId; + this._parentPopupId = parentPopupId; + this._parentFrameId = parentFrameId; + this._useProxyPopup = useProxyPopup; + this._canUseWindowPopup = canUseWindowPopup; + this._allowRootFramePopupProxy = allowRootFramePopupProxy; + this._childrenSupported = childrenSupported; + this._hotkeyHandler = hotkeyHandler; + this._popup = null; + this._disabledOverride = false; + this._options = null; + this._pageZoomFactor = 1.0; + this._contentScale = 1.0; + this._lastShowPromise = Promise.resolve(); + this._documentUtil = new DocumentUtil(); + this._textScanner = new TextScanner({ + node: window, + ignoreElements: this._ignoreElements.bind(this), + ignorePoint: this._ignorePoint.bind(this), + getSearchContext: this._getSearchContext.bind(this), + documentUtil: this._documentUtil, + searchTerms: true, + searchKanji: true + }); + this._popupCache = new Map(); + this._popupEventListeners = new EventListenerCollection(); + this._updatePopupToken = null; + this._clearSelectionTimer = null; + this._isPointerOverPopup = false; + this._optionsContextOverride = null; + + this._runtimeMessageHandlers = new Map([ + ['requestFrontendReadyBroadcast', {async: false, handler: this._onMessageRequestFrontendReadyBroadcast.bind(this)}], + ['setAllVisibleOverride', {async: true, handler: this._onApiSetAllVisibleOverride.bind(this)}], + ['clearAllVisibleOverride', {async: true, handler: this._onApiClearAllVisibleOverride.bind(this)}] + ]); + + this._hotkeyHandler.registerActions([ + ['scanSelectedText', this._onActionScanSelectedText.bind(this)] + ]); + } + + get canClearSelection() { + return this._textScanner.canClearSelection; + } + + set canClearSelection(value) { + this._textScanner.canClearSelection = value; + } + + get popup() { + return this._popup; + } + + async prepare() { + await this.updateOptions(); + try { + const {zoomFactor} = await api.getZoom(); + this._pageZoomFactor = zoomFactor; + } catch (e) { + // Ignore exceptions which may occur due to being on an unsupported page (e.g. about:blank) + } + + this._textScanner.prepare(); + + window.addEventListener('resize', this._onResize.bind(this), false); + DocumentUtil.addFullscreenChangeEventListener(this._updatePopup.bind(this)); + + const visualViewport = window.visualViewport; + if (visualViewport !== null && typeof visualViewport === 'object') { + visualViewport.addEventListener('scroll', this._onVisualViewportScroll.bind(this)); + visualViewport.addEventListener('resize', this._onVisualViewportResize.bind(this)); + } + + yomichan.on('optionsUpdated', this.updateOptions.bind(this)); + yomichan.on('zoomChanged', this._onZoomChanged.bind(this)); + yomichan.on('closePopups', this._onClosePopups.bind(this)); + chrome.runtime.onMessage.addListener(this._onRuntimeMessage.bind(this)); + + this._textScanner.on('clearSelection', this._onClearSelection.bind(this)); + this._textScanner.on('searched', this._onSearched.bind(this)); + + api.crossFrame.registerHandlers([ + ['closePopup', {async: false, handler: this._onApiClosePopup.bind(this)}], + ['copySelection', {async: false, handler: this._onApiCopySelection.bind(this)}], + ['getSelectionText', {async: false, handler: this._onApiGetSelectionText.bind(this)}], + ['getPopupInfo', {async: false, handler: this._onApiGetPopupInfo.bind(this)}], + ['getPageInfo', {async: false, handler: this._onApiGetPageInfo.bind(this)}], + ['getFrameSize', {async: true, handler: this._onApiGetFrameSize.bind(this)}], + ['setFrameSize', {async: true, handler: this._onApiSetFrameSize.bind(this)}] + ]); + + this._updateContentScale(); + this._signalFrontendReady(); + } + + setDisabledOverride(disabled) { + this._disabledOverride = disabled; + this._updateTextScannerEnabled(); + } + + setOptionsContextOverride(optionsContext) { + this._optionsContextOverride = optionsContext; + } + + async setTextSource(textSource) { + this._textScanner.setCurrentTextSource(null); + await this._textScanner.search(textSource); + } + + async updateOptions() { + try { + await this._updateOptionsInternal(); + } catch (e) { + if (!yomichan.isExtensionUnloaded) { + throw e; + } + } + } + + showContentCompleted() { + return this._lastShowPromise; + } + + // Message handlers + + _onMessageRequestFrontendReadyBroadcast({frameId}) { + this._signalFrontendReady(frameId); + } + + // Action handlers + + _onActionScanSelectedText() { + this._scanSelectedText(); + } + + // API message handlers + + _onApiGetUrl() { + return window.location.href; + } + + _onApiClosePopup() { + this._clearSelection(false); + } + + _onApiCopySelection() { + // This will not work on Firefox if a popup has focus, which is usually the case when this function is called. + document.execCommand('copy'); + } + + _onApiGetSelectionText() { + return document.getSelection().toString(); + } + + _onApiGetPopupInfo() { + return { + popupId: (this._popup !== null ? this._popup.id : null) + }; + } + + _onApiGetPageInfo() { + return { + url: window.location.href, + documentTitle: document.title + }; + } + + async _onApiSetAllVisibleOverride({value, priority, awaitFrame}) { + const result = await this._popupFactory.setAllVisibleOverride(value, priority); + if (awaitFrame) { + await promiseAnimationFrame(100); + } + return result; + } + + async _onApiClearAllVisibleOverride({token}) { + return await this._popupFactory.clearAllVisibleOverride(token); + } + + async _onApiGetFrameSize() { + return await this._popup.getFrameSize(); + } + + async _onApiSetFrameSize({width, height}) { + return await this._popup.setFrameSize(width, height); + } + + // Private + + _onResize() { + this._updatePopupPosition(); + } + + _onRuntimeMessage({action, params}, sender, callback) { + const messageHandler = this._runtimeMessageHandlers.get(action); + if (typeof messageHandler === 'undefined') { return false; } + return yomichan.invokeMessageHandler(messageHandler, params, callback, sender); + } + + _onZoomChanged({newZoomFactor}) { + this._pageZoomFactor = newZoomFactor; + this._updateContentScale(); + } + + _onClosePopups() { + this._clearSelection(true); + } + + _onVisualViewportScroll() { + this._updatePopupPosition(); + } + + _onVisualViewportResize() { + this._updateContentScale(); + } + + _onClearSelection({passive}) { + this._stopClearSelectionDelayed(); + if (this._popup !== null) { + this._popup.hide(!passive); + this._popup.clearAutoPlayTimer(); + this._isPointerOverPopup = false; + } + } + + _onSearched({type, definitions, sentence, inputInfo: {eventType, passive, detail}, textSource, optionsContext, detail: {documentTitle}, error}) { + const scanningOptions = this._options.scanning; + + if (error !== null) { + if (yomichan.isExtensionUnloaded) { + if (textSource !== null && !passive) { + this._showExtensionUnloaded(textSource); + } + } else { + yomichan.logError(error); + } + } if (type !== null) { + this._stopClearSelectionDelayed(); + let focus = (eventType === 'mouseMove'); + if (isObject(detail)) { + const focus2 = detail.focus; + if (typeof focus2 === 'boolean') { focus = focus2; } + } + this._showContent(textSource, focus, definitions, type, sentence, documentTitle, optionsContext); + } else { + if (scanningOptions.autoHideResults) { + this._clearSelectionDelayed(scanningOptions.hideDelay, false); + } + } + } + + _onPopupFramePointerOver() { + this._isPointerOverPopup = true; + this._stopClearSelectionDelayed(); + } + + _onPopupFramePointerOut() { + this._isPointerOverPopup = false; + } + + _clearSelection(passive) { + this._stopClearSelectionDelayed(); + this._textScanner.clearSelection(passive); + } + + _clearSelectionDelayed(delay, restart, passive) { + if (!this._textScanner.hasSelection()) { return; } + if (delay > 0) { + if (this._clearSelectionTimer !== null && !restart) { return; } // Already running + this._stopClearSelectionDelayed(); + this._clearSelectionTimer = setTimeout(() => { + this._clearSelectionTimer = null; + if (this._isPointerOverPopup) { return; } + this._clearSelection(passive); + }, delay); + } else { + this._clearSelection(passive); + } + } + + _stopClearSelectionDelayed() { + if (this._clearSelectionTimer !== null) { + clearTimeout(this._clearSelectionTimer); + this._clearSelectionTimer = null; + } + } + + async _updateOptionsInternal() { + const optionsContext = await this._getOptionsContext(); + const options = await api.optionsGet(optionsContext); + const {scanning: scanningOptions, sentenceParsing: sentenceParsingOptions} = options; + this._options = options; + + this._hotkeyHandler.setHotkeys('web', options.inputs.hotkeys); + + await this._updatePopup(); + + const preventMiddleMouse = this._getPreventMiddleMouseValueForPageType(scanningOptions.preventMiddleMouse); + this._textScanner.setOptions({ + inputs: scanningOptions.inputs, + deepContentScan: scanningOptions.deepDomScan, + selectText: scanningOptions.selectText, + delay: scanningOptions.delay, + touchInputEnabled: scanningOptions.touchInputEnabled, + pointerEventsEnabled: scanningOptions.pointerEventsEnabled, + scanLength: scanningOptions.length, + layoutAwareScan: scanningOptions.layoutAwareScan, + preventMiddleMouse, + sentenceParsingOptions + }); + this._updateTextScannerEnabled(); + + if (this._pageType !== 'web') { + const excludeSelectors = ['.scan-disable', '.scan-disable *']; + if (!scanningOptions.enableOnPopupExpressions) { + excludeSelectors.push('.source-text', '.source-text *'); + } + this._textScanner.excludeSelector = excludeSelectors.join(','); + } + + this._updateContentScale(); + + await this._textScanner.searchLast(); + } + + async _updatePopup() { + const {usePopupWindow, showIframePopupsInRootFrame} = this._options.general; + const isIframe = !this._useProxyPopup && (window !== window.parent); + + const currentPopup = this._popup; + + let popupPromise; + if (usePopupWindow && this._canUseWindowPopup) { + popupPromise = this._popupCache.get('window'); + if (typeof popupPromise === 'undefined') { + popupPromise = this._getPopupWindow(); + this._popupCache.set('window', popupPromise); + } + } else if ( + isIframe && + showIframePopupsInRootFrame && + DocumentUtil.getFullscreenElement() === null && + this._allowRootFramePopupProxy + ) { + popupPromise = this._popupCache.get('iframe'); + if (typeof popupPromise === 'undefined') { + popupPromise = this._getIframeProxyPopup(); + this._popupCache.set('iframe', popupPromise); + } + } else if (this._useProxyPopup) { + popupPromise = this._popupCache.get('proxy'); + if (typeof popupPromise === 'undefined') { + popupPromise = this._getProxyPopup(); + this._popupCache.set('proxy', popupPromise); + } + } else { + popupPromise = this._popupCache.get('default'); + if (typeof popupPromise === 'undefined') { + popupPromise = this._getDefaultPopup(); + this._popupCache.set('default', popupPromise); + } + } + + // The token below is used as a unique identifier to ensure that a new _updatePopup call + // hasn't been started during the await. + const token = {}; + this._updatePopupToken = token; + const popup = await popupPromise; + const optionsContext = await this._getOptionsContext(); + if (this._updatePopupToken !== token) { return; } + if (popup !== null) { + await popup.setOptionsContext(optionsContext); + } + if (this._updatePopupToken !== token) { return; } + + if (popup !== currentPopup) { + this._clearSelection(true); + } + + this._popupEventListeners.removeAllEventListeners(); + this._popup = popup; + if (popup !== null) { + this._popupEventListeners.on(popup, 'framePointerOver', this._onPopupFramePointerOver.bind(this)); + this._popupEventListeners.on(popup, 'framePointerOut', this._onPopupFramePointerOut.bind(this)); + } + this._isPointerOverPopup = false; + } + + async _getDefaultPopup() { + const isXmlDocument = (typeof XMLDocument !== 'undefined' && document instanceof XMLDocument); + if (isXmlDocument) { + return null; + } + + return await this._popupFactory.getOrCreatePopup({ + frameId: this._frameId, + depth: this._depth, + childrenSupported: this._childrenSupported + }); + } + + async _getProxyPopup() { + return await this._popupFactory.getOrCreatePopup({ + frameId: this._parentFrameId, + depth: this._depth, + parentPopupId: this._parentPopupId, + childrenSupported: this._childrenSupported + }); + } + + async _getIframeProxyPopup() { + const targetFrameId = 0; // Root frameId + try { + await this._waitForFrontendReady(targetFrameId); + } catch (e) { + // Root frame not available + return await this._getDefaultPopup(); + } + + const {popupId} = await api.crossFrame.invoke(targetFrameId, 'getPopupInfo'); + if (popupId === null) { + return null; + } + + const popup = await this._popupFactory.getOrCreatePopup({ + frameId: targetFrameId, + id: popupId, + childrenSupported: this._childrenSupported + }); + popup.on('offsetNotFound', () => { + this._allowRootFramePopupProxy = false; + this._updatePopup(); + }); + return popup; + } + + async _getPopupWindow() { + return await this._popupFactory.getOrCreatePopup({ + depth: this._depth, + popupWindow: true, + childrenSupported: this._childrenSupported + }); + } + + _ignoreElements() { + if (this._popup !== null) { + const container = this._popup.container; + if (container !== null) { + return [container]; + } + } + return []; + } + + async _ignorePoint(x, y) { + try { + return this._popup !== null && await this._popup.containsPoint(x, y); + } catch (e) { + if (!yomichan.isExtensionUnloaded) { + throw e; + } + return false; + } + } + + _showExtensionUnloaded(textSource) { + if (textSource === null) { + textSource = this._textScanner.getCurrentTextSource(); + if (textSource === null) { return; } + } + this._showPopupContent(textSource, null); + } + + _showContent(textSource, focus, definitions, type, sentence, documentTitle, optionsContext) { + const query = textSource.text(); + const {url} = optionsContext; + const details = { + focus, + history: false, + params: { + type, + query, + wildcards: 'off' + }, + state: { + focusEntry: 0, + optionsContext, + url, + sentence, + documentTitle + }, + content: { + definitions, + contentOrigin: { + tabId: this._tabId, + frameId: this._frameId + } + } + }; + if (textSource instanceof TextSourceElement && textSource.fullContent !== query) { + details.params.full = textSource.fullContent; + details.params['full-visible'] = 'true'; + } + this._showPopupContent(textSource, optionsContext, details); + } + + _showPopupContent(textSource, optionsContext, details=null) { + this._lastShowPromise = ( + this._popup !== null ? + this._popup.showContent( + { + optionsContext, + elementRect: textSource.getRect(), + writingMode: textSource.getWritingMode() + }, + details + ) : + Promise.resolve() + ); + this._lastShowPromise.catch((error) => { + if (yomichan.isExtensionUnloaded) { return; } + yomichan.logError(error); + }); + return this._lastShowPromise; + } + + _updateTextScannerEnabled() { + const enabled = (this._options !== null && this._options.general.enable && !this._disabledOverride); + this._textScanner.setEnabled(enabled); + } + + _updateContentScale() { + const {popupScalingFactor, popupScaleRelativeToPageZoom, popupScaleRelativeToVisualViewport} = this._options.general; + let contentScale = popupScalingFactor; + if (popupScaleRelativeToPageZoom) { + contentScale /= this._pageZoomFactor; + } + if (popupScaleRelativeToVisualViewport) { + const visualViewport = window.visualViewport; + const visualViewportScale = (visualViewport !== null && typeof visualViewport === 'object' ? visualViewport.scale : 1.0); + contentScale /= visualViewportScale; + } + if (contentScale === this._contentScale) { return; } + + this._contentScale = contentScale; + if (this._popup !== null) { + this._popup.setContentScale(this._contentScale); + } + this._updatePopupPosition(); + } + + async _updatePopupPosition() { + const textSource = this._textScanner.getCurrentTextSource(); + if ( + textSource !== null && + this._popup !== null && + await this._popup.isVisible() + ) { + this._showPopupContent(textSource, null); + } + } + + _signalFrontendReady(targetFrameId=null) { + const params = {frameId: this._frameId}; + if (targetFrameId === null) { + api.broadcastTab('frontendReady', params); + } else { + api.sendMessageToFrame(targetFrameId, 'frontendReady', params); + } + } + + async _waitForFrontendReady(frameId) { + const promise = yomichan.getTemporaryListenerResult( + chrome.runtime.onMessage, + ({action, params}, {resolve}) => { + if ( + action === 'frontendReady' && + params.frameId === frameId + ) { + resolve(); + } + }, + 10000 + ); + api.broadcastTab('requestFrontendReadyBroadcast', {frameId: this._frameId}); + await promise; + } + + _getPreventMiddleMouseValueForPageType(preventMiddleMouseOptions) { + switch (this._pageType) { + case 'web': return preventMiddleMouseOptions.onWebPages; + case 'popup': return preventMiddleMouseOptions.onPopupPages; + case 'search': return preventMiddleMouseOptions.onSearchPages; + default: return false; + } + } + + async _getOptionsContext() { + let optionsContext = this._optionsContextOverride; + if (optionsContext === null) { + optionsContext = (await this._getSearchContext()).optionsContext; + } + return optionsContext; + } + + async _getSearchContext() { + let url = window.location.href; + let documentTitle = document.title; + if (this._useProxyPopup) { + try { + ({url, documentTitle} = await api.crossFrame.invoke(this._parentFrameId, 'getPageInfo', {})); + } catch (e) { + // NOP + } + } + + let optionsContext = this._optionsContextOverride; + if (optionsContext === null) { + optionsContext = {depth: this._depth, url}; + } + + return { + optionsContext, + detail: {documentTitle} + }; + } + + async _scanSelectedText() { + const range = this._getFirstNonEmptySelectionRange(); + if (range === null) { return false; } + const source = new TextSourceRange(range, range.toString(), null, null); + await this._textScanner.search(source, {focus: true}); + return true; + } + + _getFirstNonEmptySelectionRange() { + const selection = window.getSelection(); + for (let i = 0, ii = selection.rangeCount; i < ii; ++i) { + const range = selection.getRangeAt(i); + if (range.toString().length > 0) { + return range; + } + } + return null; + } +} diff --git a/ext/js/app/popup-factory.js b/ext/js/app/popup-factory.js new file mode 100644 index 00000000..7571d7ab --- /dev/null +++ b/ext/js/app/popup-factory.js @@ -0,0 +1,319 @@ +/* + * Copyright (C) 2019-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* global + * FrameOffsetForwarder + * Popup + * PopupProxy + * PopupWindow + * api + */ + +class PopupFactory { + constructor(frameId) { + this._frameId = frameId; + this._frameOffsetForwarder = new FrameOffsetForwarder(frameId); + this._popups = new Map(); + this._allPopupVisibilityTokenMap = new Map(); + } + + // Public functions + + prepare() { + this._frameOffsetForwarder.prepare(); + api.crossFrame.registerHandlers([ + ['getOrCreatePopup', {async: true, handler: this._onApiGetOrCreatePopup.bind(this)}], + ['setOptionsContext', {async: true, handler: this._onApiSetOptionsContext.bind(this)}], + ['hide', {async: false, handler: this._onApiHide.bind(this)}], + ['isVisible', {async: true, handler: this._onApiIsVisibleAsync.bind(this)}], + ['setVisibleOverride', {async: true, handler: this._onApiSetVisibleOverride.bind(this)}], + ['clearVisibleOverride', {async: true, handler: this._onApiClearVisibleOverride.bind(this)}], + ['containsPoint', {async: true, handler: this._onApiContainsPoint.bind(this)}], + ['showContent', {async: true, handler: this._onApiShowContent.bind(this)}], + ['setCustomCss', {async: false, handler: this._onApiSetCustomCss.bind(this)}], + ['clearAutoPlayTimer', {async: false, handler: this._onApiClearAutoPlayTimer.bind(this)}], + ['setContentScale', {async: false, handler: this._onApiSetContentScale.bind(this)}], + ['updateTheme', {async: false, handler: this._onApiUpdateTheme.bind(this)}], + ['setCustomOuterCss', {async: false, handler: this._onApiSetCustomOuterCss.bind(this)}], + ['popup.getFrameSize', {async: true, handler: this._onApiGetFrameSize.bind(this)}], + ['popup.setFrameSize', {async: true, handler: this._onApiSetFrameSize.bind(this)}] + ]); + } + + async getOrCreatePopup({ + frameId=null, + id=null, + parentPopupId=null, + depth=null, + popupWindow=false, + childrenSupported=false + }) { + // Find by existing id + if (id !== null) { + const popup = this._popups.get(id); + if (typeof popup !== 'undefined') { + return popup; + } + } + + // Find by existing parent id + let parent = null; + if (parentPopupId !== null) { + parent = this._popups.get(parentPopupId); + if (typeof parent !== 'undefined') { + const popup = parent.child; + if (popup !== null) { + return popup; + } + } else { + parent = null; + } + } + + // Depth + if (parent !== null) { + if (depth !== null) { + throw new Error('Depth cannot be set when parent exists'); + } + depth = parent.depth + 1; + } else if (depth === null) { + depth = 0; + } + + if (popupWindow) { + // New unique id + if (id === null) { + id = generateId(16); + } + const popup = new PopupWindow({ + id, + depth, + frameId: this._frameId + }); + this._popups.set(id, popup); + return popup; + } else if (frameId === this._frameId) { + // New unique id + if (id === null) { + id = generateId(16); + } + const popup = new Popup({ + id, + depth, + frameId: this._frameId, + childrenSupported + }); + if (parent !== null) { + if (parent.child !== null) { + throw new Error('Parent popup already has a child'); + } + popup.parent = parent; + parent.child = popup; + } + this._popups.set(id, popup); + popup.prepare(); + return popup; + } else { + if (frameId === null) { + throw new Error('Invalid frameId'); + } + const useFrameOffsetForwarder = (parentPopupId === null); + ({id, depth, frameId} = await api.crossFrame.invoke(frameId, 'getOrCreatePopup', { + id, + parentPopupId, + frameId, + childrenSupported + })); + const popup = new PopupProxy({ + id, + depth, + frameId, + frameOffsetForwarder: useFrameOffsetForwarder ? this._frameOffsetForwarder : null + }); + this._popups.set(id, popup); + return popup; + } + } + + async setAllVisibleOverride(value, priority) { + const promises = []; + const errors = []; + for (const popup of this._popups.values()) { + const promise = popup.setVisibleOverride(value, priority) + .then( + (token) => ({popup, token}), + (error) => { errors.push(error); return null; } + ); + promises.push(promise); + } + + const results = (await Promise.all(promises)).filter(({token}) => token !== null); + + if (errors.length === 0) { + const token = generateId(16); + this._allPopupVisibilityTokenMap.set(token, results); + return token; + } + + // Revert on error + await this._revertPopupVisibilityOverrides(results); + throw errors[0]; + } + + async clearAllVisibleOverride(token) { + const results = this._allPopupVisibilityTokenMap.get(token); + if (typeof results === 'undefined') { return false; } + + this._allPopupVisibilityTokenMap.delete(token); + await this._revertPopupVisibilityOverrides(results); + return true; + } + + // API message handlers + + async _onApiGetOrCreatePopup(details) { + const popup = await this.getOrCreatePopup(details); + return { + id: popup.id, + depth: popup.depth, + frameId: popup.frameId + }; + } + + async _onApiSetOptionsContext({id, optionsContext, source}) { + const popup = this._getPopup(id); + return await popup.setOptionsContext(optionsContext, source); + } + + _onApiHide({id, changeFocus}) { + const popup = this._getPopup(id); + return popup.hide(changeFocus); + } + + async _onApiIsVisibleAsync({id}) { + const popup = this._getPopup(id); + return await popup.isVisible(); + } + + async _onApiSetVisibleOverride({id, value, priority}) { + const popup = this._getPopup(id); + return await popup.setVisibleOverride(value, priority); + } + + async _onApiClearVisibleOverride({id, token}) { + const popup = this._getPopup(id); + return await popup.clearVisibleOverride(token); + } + + async _onApiContainsPoint({id, x, y}) { + const popup = this._getPopup(id); + [x, y] = this._convertPopupPointToRootPagePoint(popup, x, y); + return await popup.containsPoint(x, y); + } + + async _onApiShowContent({id, details, displayDetails}) { + const popup = this._getPopup(id); + if (!this._popupCanShow(popup)) { return; } + + const {elementRect} = details; + if (typeof elementRect !== 'undefined') { + details.elementRect = this._convertJsonRectToDOMRect(popup, elementRect); + } + + return await popup.showContent(details, displayDetails); + } + + _onApiSetCustomCss({id, css}) { + const popup = this._getPopup(id); + return popup.setCustomCss(css); + } + + _onApiClearAutoPlayTimer({id}) { + const popup = this._getPopup(id); + return popup.clearAutoPlayTimer(); + } + + _onApiSetContentScale({id, scale}) { + const popup = this._getPopup(id); + return popup.setContentScale(scale); + } + + _onApiUpdateTheme({id}) { + const popup = this._getPopup(id); + return popup.updateTheme(); + } + + _onApiSetCustomOuterCss({id, css, useWebExtensionApi}) { + const popup = this._getPopup(id); + return popup.setCustomOuterCss(css, useWebExtensionApi); + } + + async _onApiGetFrameSize({id}) { + const popup = this._getPopup(id); + return await popup.getFrameSize(); + } + + async _onApiSetFrameSize({id, width, height}) { + const popup = this._getPopup(id); + return await popup.setFrameSize(width, height); + } + + // Private functions + + _getPopup(id) { + const popup = this._popups.get(id); + if (typeof popup === 'undefined') { + throw new Error(`Invalid popup ID ${id}`); + } + return popup; + } + + _convertJsonRectToDOMRect(popup, jsonRect) { + const [x, y] = this._convertPopupPointToRootPagePoint(popup, jsonRect.x, jsonRect.y); + return new DOMRect(x, y, jsonRect.width, jsonRect.height); + } + + _convertPopupPointToRootPagePoint(popup, x, y) { + const parent = popup.parent; + if (parent !== null) { + const popupRect = parent.getFrameRect(); + x += popupRect.x; + y += popupRect.y; + } + return [x, y]; + } + + _popupCanShow(popup) { + const parent = popup.parent; + return parent === null || parent.isVisibleSync(); + } + + async _revertPopupVisibilityOverrides(overrides) { + const promises = []; + for (const value of overrides) { + if (value === null) { continue; } + const {popup, token} = value; + const promise = popup.clearVisibleOverride(token) + .then( + (v) => v, + () => false + ); + promises.push(promise); + } + return await Promise.all(promises); + } +} diff --git a/ext/js/app/popup-proxy.js b/ext/js/app/popup-proxy.js new file mode 100644 index 00000000..b2e81824 --- /dev/null +++ b/ext/js/app/popup-proxy.js @@ -0,0 +1,218 @@ +/* + * Copyright (C) 2019-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* global + * api + */ + +class PopupProxy extends EventDispatcher { + constructor({ + id, + depth, + frameId, + frameOffsetForwarder + }) { + super(); + this._id = id; + this._depth = depth; + this._frameId = frameId; + this._frameOffsetForwarder = frameOffsetForwarder; + + this._frameOffset = [0, 0]; + this._frameOffsetPromise = null; + this._frameOffsetUpdatedAt = null; + this._frameOffsetExpireTimeout = 1000; + } + + // Public properties + + get id() { + return this._id; + } + + get parent() { + return null; + } + + set parent(value) { + throw new Error('Not supported on PopupProxy'); + } + + get child() { + return null; + } + + set child(value) { + throw new Error('Not supported on PopupProxy'); + } + + get depth() { + return this._depth; + } + + get frameContentWindow() { + return null; + } + + get container() { + return null; + } + + get frameId() { + return this._frameId; + } + + // Public functions + + setOptionsContext(optionsContext, source) { + return this._invokeSafe('setOptionsContext', {id: this._id, optionsContext, source}); + } + + hide(changeFocus) { + return this._invokeSafe('hide', {id: this._id, changeFocus}); + } + + isVisible() { + return this._invokeSafe('isVisible', {id: this._id}, false); + } + + setVisibleOverride(value, priority) { + return this._invokeSafe('setVisibleOverride', {id: this._id, value, priority}, null); + } + + clearVisibleOverride(token) { + return this._invokeSafe('clearVisibleOverride', {id: this._id, token}, false); + } + + async containsPoint(x, y) { + if (this._frameOffsetForwarder !== null) { + await this._updateFrameOffset(); + [x, y] = this._applyFrameOffset(x, y); + } + return await this._invokeSafe('containsPoint', {id: this._id, x, y}, false); + } + + async showContent(details, displayDetails) { + const {elementRect} = details; + if (typeof elementRect !== 'undefined') { + let {x, y, width, height} = elementRect; + if (this._frameOffsetForwarder !== null) { + await this._updateFrameOffset(); + [x, y] = this._applyFrameOffset(x, y); + } + details.elementRect = {x, y, width, height}; + } + return await this._invokeSafe('showContent', {id: this._id, details, displayDetails}); + } + + setCustomCss(css) { + return this._invokeSafe('setCustomCss', {id: this._id, css}); + } + + clearAutoPlayTimer() { + return this._invokeSafe('clearAutoPlayTimer', {id: this._id}); + } + + setContentScale(scale) { + return this._invokeSafe('setContentScale', {id: this._id, scale}); + } + + isVisibleSync() { + throw new Error('Not supported on PopupProxy'); + } + + updateTheme() { + return this._invokeSafe('updateTheme', {id: this._id}); + } + + setCustomOuterCss(css, useWebExtensionApi) { + return this._invokeSafe('setCustomOuterCss', {id: this._id, css, useWebExtensionApi}); + } + + getFrameRect() { + return new DOMRect(0, 0, 0, 0); + } + + getFrameSize() { + return this._invokeSafe('popup.getFrameSize', {id: this._id}, {width: 0, height: 0, valid: false}); + } + + setFrameSize(width, height) { + return this._invokeSafe('popup.setFrameSize', {id: this._id, width, height}); + } + + // Private + + _invoke(action, params={}) { + return api.crossFrame.invoke(this._frameId, action, params); + } + + async _invokeSafe(action, params={}, defaultReturnValue) { + try { + return await this._invoke(action, params); + } catch (e) { + if (!yomichan.isExtensionUnloaded) { throw e; } + return defaultReturnValue; + } + } + + async _updateFrameOffset() { + const now = Date.now(); + const firstRun = this._frameOffsetUpdatedAt === null; + const expired = firstRun || this._frameOffsetUpdatedAt < now - this._frameOffsetExpireTimeout; + if (this._frameOffsetPromise === null && !expired) { return; } + + if (this._frameOffsetPromise !== null) { + if (firstRun) { + await this._frameOffsetPromise; + } + return; + } + + const promise = this._updateFrameOffsetInner(now); + if (firstRun) { + await promise; + } + } + + async _updateFrameOffsetInner(now) { + this._frameOffsetPromise = this._frameOffsetForwarder.getOffset(); + try { + let offset = null; + try { + offset = await this._frameOffsetPromise; + } catch (e) { + // NOP + } + this._frameOffset = offset !== null ? offset : [0, 0]; + if (offset === null) { + this.trigger('offsetNotFound'); + return; + } + this._frameOffsetUpdatedAt = now; + } catch (e) { + yomichan.logError(e); + } finally { + this._frameOffsetPromise = null; + } + } + + _applyFrameOffset(x, y) { + const [offsetX, offsetY] = this._frameOffset; + return [x + offsetX, y + offsetY]; + } +} diff --git a/ext/js/app/popup-window.js b/ext/js/app/popup-window.js new file mode 100644 index 00000000..5fa0c647 --- /dev/null +++ b/ext/js/app/popup-window.js @@ -0,0 +1,169 @@ +/* + * Copyright (C) 2020-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* global + * api + */ + +class PopupWindow extends EventDispatcher { + constructor({ + id, + depth, + frameId + }) { + super(); + this._id = id; + this._depth = depth; + this._frameId = frameId; + this._popupTabId = null; + } + + // Public properties + + get id() { + return this._id; + } + + get parent() { + return null; + } + + set parent(value) { + throw new Error('Not supported on PopupProxy'); + } + + get child() { + return null; + } + + set child(value) { + throw new Error('Not supported on PopupProxy'); + } + + get depth() { + return this._depth; + } + + get frameContentWindow() { + return null; + } + + get container() { + return null; + } + + get frameId() { + return this._frameId; + } + + + // Public functions + + setOptionsContext(optionsContext, source) { + return this._invoke(false, 'setOptionsContext', {id: this._id, optionsContext, source}); + } + + hide(_changeFocus) { + // NOP + } + + async isVisible() { + return (this._popupTabId !== null && await api.isTabSearchPopup(this._popupTabId)); + } + + async setVisibleOverride(_value, _priority) { + return null; + } + + clearVisibleOverride(_token) { + return false; + } + + async containsPoint(_x, _y) { + return false; + } + + async showContent(_details, displayDetails) { + if (displayDetails === null) { return; } + await this._invoke(true, 'setContent', {id: this._id, details: displayDetails}); + } + + setCustomCss(css) { + return this._invoke(false, 'setCustomCss', {id: this._id, css}); + } + + clearAutoPlayTimer() { + return this._invoke(false, 'clearAutoPlayTimer', {id: this._id}); + } + + setContentScale(_scale) { + // NOP + } + + isVisibleSync() { + throw new Error('Not supported on PopupWindow'); + } + + updateTheme() { + // NOP + } + + async setCustomOuterCss(_css, _useWebExtensionApi) { + // NOP + } + + getFrameRect() { + return new DOMRect(0, 0, 0, 0); + } + + async getFrameSize() { + return {width: 0, height: 0, valid: false}; + } + + async setFrameSize(_width, _height) { + return false; + } + + // Private + + async _invoke(open, action, params={}, defaultReturnValue) { + if (yomichan.isExtensionUnloaded) { + return defaultReturnValue; + } + + const frameId = 0; + if (this._popupTabId !== null) { + try { + return await api.crossFrame.invokeTab(this._popupTabId, frameId, 'popupMessage', {action, params}); + } catch (e) { + if (yomichan.isExtensionUnloaded) { + open = false; + } + } + this._popupTabId = null; + } + + if (!open) { + return defaultReturnValue; + } + + const {tabId} = await api.getOrCreateSearchPopup({focus: 'ifCreated'}); + this._popupTabId = tabId; + + return await api.crossFrame.invokeTab(this._popupTabId, frameId, 'popupMessage', {action, params}); + } +} diff --git a/ext/js/app/popup.js b/ext/js/app/popup.js new file mode 100644 index 00000000..75b74257 --- /dev/null +++ b/ext/js/app/popup.js @@ -0,0 +1,687 @@ +/* + * Copyright (C) 2016-2021 Yomichan Authors + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +/* global + * DocumentUtil + * FrameClient + * api + * dynamicLoader + */ + +class Popup extends EventDispatcher { + constructor({ + id, + depth, + frameId, + childrenSupported + }) { + super(); + this._id = id; + this._depth = depth; + this._frameId = frameId; + this._childrenSupported = childrenSupported; + this._parent = null; + this._child = null; + this._injectPromise = null; + this._injectPromiseComplete = false; + this._visible = new DynamicProperty(false); + this._options = null; + this._optionsContext = null; + this._contentScale = 1.0; + this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); + + this._frameSizeContentScale = null; + this._frameClient = null; + this._frame = document.createElement('iframe'); + this._frame.className = 'yomichan-popup'; + this._frame.style.width = '0'; + this._frame.style.height = '0'; + + this._container = this._frame; + this._shadow = null; + + this._fullscreenEventListeners = new EventListenerCollection(); + } + + // Public properties + + get id() { + return this._id; + } + + get parent() { + return this._parent; + } + + set parent(value) { + this._parent = value; + } + + get child() { + return this._child; + } + + set child(value) { + this._child = value; + } + + get depth() { + return this._depth; + } + + get frameContentWindow() { + return this._frame.contentWindow; + } + + get container() { + return this._container; + } + + get frameId() { + return this._frameId; + } + + // Public functions + + prepare() { + this._frame.addEventListener('mouseover', this._onFrameMouseOver.bind(this)); + this._frame.addEventListener('mouseout', this._onFrameMouseOut.bind(this)); + this._frame.addEventListener('mousedown', (e) => e.stopPropagation()); + this._frame.addEventListener('scroll', (e) => e.stopPropagation()); + this._frame.addEventListener('load', this._onFrameLoad.bind(this)); + this._visible.on('change', this._onVisibleChange.bind(this)); + yomichan.on('extensionUnloaded', this._onExtensionUnloaded.bind(this)); + this._onVisibleChange({value: this.isVisibleSync()}); + } + + async setOptionsContext(optionsContext) { + await this._setOptionsContext(optionsContext); + await this._invokeSafe('setOptionsContext', {optionsContext}); + } + + hide(changeFocus) { + if (!this.isVisibleSync()) { + return; + } + + this._setVisible(false); + if (this._child !== null) { + this._child.hide(false); + } + if (changeFocus) { + this._focusParent(); + } + } + + async isVisible() { + return this.isVisibleSync(); + } + + async setVisibleOverride(value, priority) { + return this._visible.setOverride(value, priority); + } + + async clearVisibleOverride(token) { + return this._visible.clearOverride(token); + } + + async containsPoint(x, y) { + for (let popup = this; popup !== null && popup.isVisibleSync(); popup = popup.child) { + const rect = popup.getFrameRect(); + if (x >= rect.left && y >= rect.top && x < rect.right && y < rect.bottom) { + return true; + } + } + return false; + } + + async showContent(details, displayDetails) { + if (this._options === null) { throw new Error('Options not assigned'); } + + const {optionsContext, elementRect, writingMode} = details; + if (optionsContext !== null) { + await this._setOptionsContextIfDifferent(optionsContext); + } + + if (typeof elementRect !== 'undefined' && typeof writingMode !== 'undefined') { + await this._show(elementRect, writingMode); + } + + if (displayDetails !== null) { + this._invokeSafe('setContent', {details: displayDetails}); + } + } + + setCustomCss(css) { + this._invokeSafe('setCustomCss', {css}); + } + + clearAutoPlayTimer() { + this._invokeSafe('clearAutoPlayTimer'); + } + + setContentScale(scale) { + this._contentScale = scale; + this._frame.style.fontSize = `${scale}px`; + this._invokeSafe('setContentScale', {scale}); + } + + isVisibleSync() { + return this._visible.value; + } + + updateTheme() { + const {popupTheme, popupOuterTheme} = this._options.general; + this._frame.dataset.theme = popupTheme; + this._frame.dataset.outerTheme = popupOuterTheme; + this._frame.dataset.siteColor = this._getSiteColor(); + } + + async setCustomOuterCss(css, useWebExtensionApi) { + let parentNode = null; + const inShadow = (this._shadow !== null); + if (inShadow) { + useWebExtensionApi = false; + parentNode = this._shadow; + } + const node = await dynamicLoader.loadStyle('yomichan-popup-outer-user-stylesheet', 'code', css, useWebExtensionApi, parentNode); + this.trigger('customOuterCssChanged', {node, useWebExtensionApi, inShadow}); + } + + getFrameRect() { + return this._frame.getBoundingClientRect(); + } + + async getFrameSize() { + const rect = this._frame.getBoundingClientRect(); + return {width: rect.width, height: rect.height, valid: true}; + } + + async setFrameSize(width, height) { + this._setFrameSize(width, height); + return true; + } + + // Private functions + + _onFrameMouseOver() { + this.trigger('framePointerOver', {}); + } + + _onFrameMouseOut() { + this.trigger('framePointerOut', {}); + } + + _inject() { + let injectPromise = this._injectPromise; + if (injectPromise === null) { + injectPromise = this._createInjectPromise(); + this._injectPromise = injectPromise; + injectPromise.then( + () => { + if (injectPromise !== this._injectPromise) { return; } + this._injectPromiseComplete = true; + }, + () => { this._resetFrame(); } + ); + } + return injectPromise; + } + + async _createInjectPromise() { + if (this._options === null) { + throw new Error('Options not initialized'); + } + + const {useSecurePopupFrameUrl, usePopupShadowDom} = this._options.general; + + await this._setUpContainer(usePopupShadowDom); + + const setupFrame = (frame) => { + frame.removeAttribute('src'); + frame.removeAttribute('srcdoc'); + this._observeFullscreen(true); + this._onFullscreenChanged(); + const url = chrome.runtime.getURL('/popup.html'); + if (useSecurePopupFrameUrl) { + frame.contentDocument.location.href = url; + } else { + frame.setAttribute('src', url); + } + }; + + const frameClient = new FrameClient(); + this._frameClient = frameClient; + await frameClient.connect(this._frame, this._targetOrigin, this._frameId, setupFrame); + + // Configure + await this._invokeSafe('configure', { + depth: this._depth, + parentPopupId: this._id, + parentFrameId: this._frameId, + childrenSupported: this._childrenSupported, + scale: this._contentScale, + optionsContext: this._optionsContext + }); + } + + _onFrameLoad() { + if (!this._injectPromiseComplete) { return; } + this._resetFrame(); + } + + _resetFrame() { + const parent = this._container.parentNode; + if (parent !== null) { + parent.removeChild(this._container); + } + this._frame.removeAttribute('src'); + this._frame.removeAttribute('srcdoc'); + + this._frameClient = null; + this._injectPromise = null; + this._injectPromiseComplete = false; + } + + async _setUpContainer(usePopupShadowDom) { + if (usePopupShadowDom && typeof this._frame.attachShadow === 'function') { + const container = document.createElement('div'); + container.style.setProperty('all', 'initial', 'important'); + const shadow = container.attachShadow({mode: 'closed', delegatesFocus: true}); + shadow.appendChild(this._frame); + + this._container = container; + this._shadow = shadow; + } else { + const frameParentNode = this._frame.parentNode; + if (frameParentNode !== null) { + frameParentNode.removeChild(this._frame); + } + + this._container = this._frame; + this._shadow = null; + } + + await this._injectStyles(); + } + + async _injectStyles() { + try { + await this._injectPopupOuterStylesheet(); + } catch (e) { + // NOP + } + + try { + await this.setCustomOuterCss(this._options.general.customPopupOuterCss, true); + } catch (e) { + // NOP + } + } + + async _injectPopupOuterStylesheet() { + let fileType = 'file'; + let useWebExtensionApi = true; + let parentNode = null; + if (this._shadow !== null) { + fileType = 'file-content'; + useWebExtensionApi = false; + parentNode = this._shadow; + } + await dynamicLoader.loadStyle('yomichan-popup-outer-stylesheet', fileType, '/css/popup-outer.css', useWebExtensionApi, parentNode); + } + + _observeFullscreen(observe) { + if (!observe) { + this._fullscreenEventListeners.removeAllEventListeners(); + return; + } + + if (this._fullscreenEventListeners.size > 0) { + // Already observing + return; + } + + DocumentUtil.addFullscreenChangeEventListener(this._onFullscreenChanged.bind(this), this._fullscreenEventListeners); + } + + _onFullscreenChanged() { + const parent = this._getFrameParentElement(); + if (parent !== null && this._container.parentNode !== parent) { + parent.appendChild(this._container); + } + } + + async _show(elementRect, writingMode) { + await this._inject(); + + const optionsGeneral = this._options.general; + const {popupDisplayMode} = optionsGeneral; + const frame = this._frame; + const frameRect = frame.getBoundingClientRect(); + + const viewport = this._getViewport(optionsGeneral.popupScaleRelativeToVisualViewport); + const scale = this._contentScale; + const scaleRatio = this._frameSizeContentScale === null ? 1.0 : scale / this._frameSizeContentScale; + this._frameSizeContentScale = scale; + const getPositionArgs = [ + elementRect, + Math.max(frameRect.width * scaleRatio, optionsGeneral.popupWidth * scale), + Math.max(frameRect.height * scaleRatio, optionsGeneral.popupHeight * scale), + viewport, + scale, + optionsGeneral, + writingMode + ]; + let [x, y, width, height, below] = ( + writingMode === 'horizontal-tb' || optionsGeneral.popupVerticalTextPosition === 'default' ? + this._getPositionForHorizontalText(...getPositionArgs) : + this._getPositionForVerticalText(...getPositionArgs) + ); + + frame.dataset.popupDisplayMode = popupDisplayMode; + frame.dataset.below = `${below}`; + + if (popupDisplayMode === 'full-width') { + x = viewport.left; + y = below ? viewport.bottom - height : viewport.top; + width = viewport.right - viewport.left; + } + + frame.style.left = `${x}px`; + frame.style.top = `${y}px`; + this._setFrameSize(width, height); + + this._setVisible(true); + if (this._child !== null) { + this._child.hide(true); + } + } + + _setFrameSize(width, height) { + const {style} = this._frame; + style.width = `${width}px`; + style.height = `${height}px`; + } + + _setVisible(visible) { + this._visible.defaultValue = visible; + } + + _onVisibleChange({value}) { + this._frame.style.setProperty('visibility', value ? 'visible' : 'hidden', 'important'); + } + + _focusParent() { + if (this._parent !== null) { + // Chrome doesn't like focusing iframe without contentWindow. + const contentWindow = this._parent.frameContentWindow; + if (contentWindow !== null) { + contentWindow.focus(); + } + } else { + // Firefox doesn't like focusing window without first blurring the iframe. + // this._frame.contentWindow.blur() doesn't work on Firefox for some reason. + this._frame.blur(); + // This is needed for Chrome. + window.focus(); + } + } + + _getSiteColor() { + const color = [255, 255, 255]; + const {documentElement, body} = document; + if (documentElement !== null) { + this._addColor(color, window.getComputedStyle(documentElement).backgroundColor); + } + if (body !== null) { + this._addColor(color, window.getComputedStyle(body).backgroundColor); + } + const dark = (color[0] < 128 && color[1] < 128 && color[2] < 128); + return dark ? 'dark' : 'light'; + } + + async _invoke(action, params={}) { + const contentWindow = this._frame.contentWindow; + if (this._frameClient === null || !this._frameClient.isConnected() || contentWindow === null) { return; } + + const message = this._frameClient.createMessage({action, params}); + return await api.crossFrame.invoke(this._frameClient.frameId, 'popupMessage', message); + } + + async _invokeSafe(action, params={}, defaultReturnValue) { + try { + return await this._invoke(action, params); + } catch (e) { + if (!yomichan.isExtensionUnloaded) { throw e; } + return defaultReturnValue; + } + } + + _invokeWindow(action, params={}) { + const contentWindow = this._frame.contentWindow; + if (this._frameClient === null || !this._frameClient.isConnected() || contentWindow === null) { return; } + + const message = this._frameClient.createMessage({action, params}); + contentWindow.postMessage(message, this._targetOrigin); + } + + _onExtensionUnloaded() { + this._invokeWindow('extensionUnloaded'); + } + + _getFrameParentElement() { + const defaultParent = document.body; + const fullscreenElement = DocumentUtil.getFullscreenElement(); + if ( + fullscreenElement === null || + fullscreenElement.shadowRoot || + fullscreenElement.openOrClosedShadowRoot // Available to Firefox 63+ for WebExtensions + ) { + return defaultParent; + } + + switch (fullscreenElement.nodeName.toUpperCase()) { + case 'IFRAME': + case 'FRAME': + return defaultParent; + } + + return fullscreenElement; + } + + _getPositionForHorizontalText(elementRect, width, height, viewport, offsetScale, optionsGeneral) { + const preferBelow = (optionsGeneral.popupHorizontalTextPosition === 'below'); + const horizontalOffset = optionsGeneral.popupHorizontalOffset * offsetScale; + const verticalOffset = optionsGeneral.popupVerticalOffset * offsetScale; + + const [x, w] = this._getConstrainedPosition( + elementRect.right - horizontalOffset, + elementRect.left + horizontalOffset, + width, + viewport.left, + viewport.right, + true + ); + const [y, h, below] = this._getConstrainedPositionBinary( + elementRect.top - verticalOffset, + elementRect.bottom + verticalOffset, + height, + viewport.top, + viewport.bottom, + preferBelow + ); + return [x, y, w, h, below]; + } + + _getPositionForVerticalText(elementRect, width, height, viewport, offsetScale, optionsGeneral, writingMode) { + const preferRight = this._isVerticalTextPopupOnRight(optionsGeneral.popupVerticalTextPosition, writingMode); + const horizontalOffset = optionsGeneral.popupHorizontalOffset2 * offsetScale; + const verticalOffset = optionsGeneral.popupVerticalOffset2 * offsetScale; + + const [x, w] = this._getConstrainedPositionBinary( + elementRect.left - horizontalOffset, + elementRect.right + horizontalOffset, + width, + viewport.left, + viewport.right, + preferRight + ); + const [y, h, below] = this._getConstrainedPosition( + elementRect.bottom - verticalOffset, + elementRect.top + verticalOffset, + height, + viewport.top, + viewport.bottom, + true + ); + return [x, y, w, h, below]; + } + + _isVerticalTextPopupOnRight(positionPreference, writingMode) { + switch (positionPreference) { + case 'before': + return !this._isWritingModeLeftToRight(writingMode); + case 'after': + return this._isWritingModeLeftToRight(writingMode); + case 'left': + return false; + case 'right': + return true; + default: + return false; + } + } + + _isWritingModeLeftToRight(writingMode) { + switch (writingMode) { + case 'vertical-lr': + case 'sideways-lr': + return true; + default: + return false; + } + } + + _getConstrainedPosition(positionBefore, positionAfter, size, minLimit, maxLimit, after) { + size = Math.min(size, maxLimit - minLimit); + + let position; + if (after) { + position = Math.max(minLimit, positionAfter); + position = position - Math.max(0, (position + size) - maxLimit); + } else { + position = Math.min(maxLimit, positionBefore) - size; + position = position + Math.max(0, minLimit - position); + } + + return [position, size, after]; + } + + _getConstrainedPositionBinary(positionBefore, positionAfter, size, minLimit, maxLimit, after) { + const overflowBefore = minLimit - (positionBefore - size); + const overflowAfter = (positionAfter + size) - maxLimit; + + if (overflowAfter > 0 || overflowBefore > 0) { + after = (overflowAfter < overflowBefore); + } + + let position; + if (after) { + size -= Math.max(0, overflowAfter); + position = Math.max(minLimit, positionAfter); + } else { + size -= Math.max(0, overflowBefore); + position = Math.min(maxLimit, positionBefore) - size; + } + + return [position, size, after]; + } + + _addColor(target, cssColor) { + if (typeof cssColor !== 'string') { return; } + + const color = this._getColorInfo(cssColor); + if (color === null) { return; } + + const a = color[3]; + if (a <= 0.0) { return; } + + const aInv = 1.0 - a; + for (let i = 0; i < 3; ++i) { + target[i] = target[i] * aInv + color[i] * a; + } + } + + _getColorInfo(cssColor) { + const m = /^\s*rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)\s*$/.exec(cssColor); + if (m === null) { return null; } + + const m4 = m[4]; + return [ + Number.parseInt(m[1], 10), + Number.parseInt(m[2], 10), + Number.parseInt(m[3], 10), + m4 ? Math.max(0.0, Math.min(1.0, Number.parseFloat(m4))) : 1.0 + ]; + } + + _getViewport(useVisualViewport) { + const visualViewport = window.visualViewport; + if (visualViewport !== null && typeof visualViewport === 'object') { + const left = visualViewport.offsetLeft; + const top = visualViewport.offsetTop; + const width = visualViewport.width; + const height = visualViewport.height; + if (useVisualViewport) { + return { + left, + top, + right: left + width, + bottom: top + height + }; + } else { + const scale = visualViewport.scale; + return { + left: 0, + top: 0, + right: Math.max(left + width, width * scale), + bottom: Math.max(top + height, height * scale) + }; + } + } + + const body = document.body; + return { + left: 0, + top: 0, + right: (body !== null ? body.clientWidth : 0), + bottom: window.innerHeight + }; + } + + async _setOptionsContext(optionsContext) { + this._optionsContext = optionsContext; + this._options = await api.optionsGet(optionsContext); + this.updateTheme(); + } + + async _setOptionsContextIfDifferent(optionsContext) { + if (deepEqual(this._optionsContext, optionsContext)) { return; } + await this._setOptionsContext(optionsContext); + } +} -- cgit v1.2.3