alex/yomichan
1
Fork 0
Code Releases Activity

Update Popup to not store the full options object (#2106)

Browse Source
This commit is contained in:
toasted-nutbread 2022-04-03 17:09:51 -04:00 committed by GitHub
parent f61690ea2c
commit b896724aac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
ext/js/app/popup.js
View File

@ -51,11 +51,25 @@ class Popup extends EventDispatcher {
this._injectPromiseComplete = false; this._injectPromiseComplete = false;
this._visible = new DynamicProperty(false); this._visible = new DynamicProperty(false);
this._visibleValue = false; this._visibleValue = false;
this._options = null;
this._optionsContext = null; this._optionsContext = null;
this._contentScale = 1.0; this._contentScale = 1.0;
this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, ''); this._targetOrigin = chrome.runtime.getURL('/').replace(/\/$/, '');
this._optionsAssigned = false;
this._initialWidth = 400;
this._initialHeight = 250;
this._horizontalOffset = 0;
this._verticalOffset = 10;
this._horizontalOffset2 = 10;
this._verticalOffset2 = 0;
this._verticalTextPosition = 'before';
this._horizontalTextPosition = 'below';
this._displayMode = 'default';
this._scaleRelativeToVisualViewport = true;
this._useSecureFrameUrl = true;
this._useShadowDom = true;
this._customOuterCss = '';
this._frameSizeContentScale = null; this._frameSizeContentScale = null;
this._frameClient = null; this._frameClient = null;
this._frame = document.createElement('iframe'); this._frame = document.createElement('iframe');
@ -237,7 +251,7 @@ class Popup extends EventDispatcher {
* @returns {Promise<void>} * @returns {Promise<void>}
*/ */
async showContent(details, displayDetails) { async showContent(details, displayDetails) {
if (this._options === null) { throw new Error('Options not assigned'); } if (!this._optionsAssigned) { throw new Error('Options not assigned'); }
const {optionsContext, elementRect, writingMode} = details; const {optionsContext, elementRect, writingMode} = details;
if (optionsContext !== null) { if (optionsContext !== null) {
@ -379,13 +393,13 @@ class Popup extends EventDispatcher {
} }
async _injectInner2() { async _injectInner2() {
if (this._options === null) { if (!this._optionsAssigned) {
throw new Error('Options not initialized'); throw new Error('Options not initialized');
} }
const {useSecurePopupFrameUrl, usePopupShadowDom} = this._options.general; const useSecurePopupFrameUrl = this._useSecureFrameUrl;
await this._setUpContainer(usePopupShadowDom); await this._setUpContainer(this._useShadowDom);
const setupFrame = (frame) => { const setupFrame = (frame) => {
frame.removeAttribute('src'); frame.removeAttribute('src');
@ -470,7 +484,7 @@ class Popup extends EventDispatcher {
} }
try { try {
await this.setCustomOuterCss(this._options.general.customPopupOuterCss, true); await this.setCustomOuterCss(this._customOuterCss, true);
} catch (e) { } catch (e) {
// NOP // NOP
} }
@ -513,34 +527,31 @@ class Popup extends EventDispatcher {
const injected = await this._inject(); const injected = await this._inject();
if (!injected) { return; } if (!injected) { return; }
const optionsGeneral = this._options.general;
const {popupDisplayMode} = optionsGeneral;
const frame = this._frame; const frame = this._frame;
const frameRect = frame.getBoundingClientRect(); const frameRect = frame.getBoundingClientRect();
const viewport = this._getViewport(optionsGeneral.popupScaleRelativeToVisualViewport); const viewport = this._getViewport(this._scaleRelativeToVisualViewport);
const scale = this._contentScale; const scale = this._contentScale;
const scaleRatio = this._frameSizeContentScale === null ? 1.0 : scale / this._frameSizeContentScale; const scaleRatio = this._frameSizeContentScale === null ? 1.0 : scale / this._frameSizeContentScale;
this._frameSizeContentScale = scale; this._frameSizeContentScale = scale;
const getPositionArgs = [ const getPositionArgs = [
elementRect, elementRect,
Math.max(frameRect.width * scaleRatio, optionsGeneral.popupWidth * scale), Math.max(frameRect.width * scaleRatio, this._initialWidth * scale),
Math.max(frameRect.height * scaleRatio, optionsGeneral.popupHeight * scale), Math.max(frameRect.height * scaleRatio, this._initialHeight * scale),
viewport, viewport,
scale, scale,
optionsGeneral,
writingMode writingMode
]; ];
let [x, y, width, height, below] = ( let [x, y, width, height, below] = (
writingMode === 'horizontal-tb' || optionsGeneral.popupVerticalTextPosition === 'default' ? writingMode === 'horizontal-tb' || this._verticalTextPosition === 'default' ?
this._getPositionForHorizontalText(...getPositionArgs) : this._getPositionForHorizontalText(...getPositionArgs) :
this._getPositionForVerticalText(...getPositionArgs) this._getPositionForVerticalText(...getPositionArgs)
); );
frame.dataset.popupDisplayMode = popupDisplayMode; frame.dataset.popupDisplayMode = this._displayMode;
frame.dataset.below = `${below}`; frame.dataset.below = `${below}`;
if (popupDisplayMode === 'full-width') { if (this._displayMode === 'full-width') {
x = viewport.left; x = viewport.left;
y = below ? viewport.bottom - height : viewport.top; y = below ? viewport.bottom - height : viewport.top;
width = viewport.right - viewport.left; width = viewport.right - viewport.left;
@ -641,10 +652,10 @@ class Popup extends EventDispatcher {
return fullscreenElement; return fullscreenElement;
} }
_getPositionForHorizontalText(elementRect, width, height, viewport, offsetScale, optionsGeneral) { _getPositionForHorizontalText(elementRect, width, height, viewport, offsetScale) {
const preferBelow = (optionsGeneral.popupHorizontalTextPosition === 'below'); const preferBelow = (this._horizontalTextPosition === 'below');
const horizontalOffset = optionsGeneral.popupHorizontalOffset * offsetScale; const horizontalOffset = this._horizontalOffset * offsetScale;
const verticalOffset = optionsGeneral.popupVerticalOffset * offsetScale; const verticalOffset = this._verticalOffset * offsetScale;
const [x, w] = this._getConstrainedPosition( const [x, w] = this._getConstrainedPosition(
elementRect.x + elementRect.width - horizontalOffset, elementRect.x + elementRect.width - horizontalOffset,
@ -665,10 +676,10 @@ class Popup extends EventDispatcher {
return [x, y, w, h, below]; return [x, y, w, h, below];
} }
_getPositionForVerticalText(elementRect, width, height, viewport, offsetScale, optionsGeneral, writingMode) { _getPositionForVerticalText(elementRect, width, height, viewport, offsetScale, writingMode) {
const preferRight = this._isVerticalTextPopupOnRight(optionsGeneral.popupVerticalTextPosition, writingMode); const preferRight = this._isVerticalTextPopupOnRight(this._verticalTextPosition, writingMode);
const horizontalOffset = optionsGeneral.popupHorizontalOffset2 * offsetScale; const horizontalOffset = this._horizontalOffset2 * offsetScale;
const verticalOffset = optionsGeneral.popupVerticalOffset2 * offsetScale; const verticalOffset = this._verticalOffset2 * offsetScale;
const [x, w] = this._getConstrainedPositionBinary( const [x, w] = this._getConstrainedPositionBinary(
elementRect.x - horizontalOffset, elementRect.x - horizontalOffset,
@ -784,10 +795,24 @@ class Popup extends EventDispatcher {
async _setOptionsContext(optionsContext) { async _setOptionsContext(optionsContext) {
this._optionsContext = optionsContext; this._optionsContext = optionsContext;
this._options = await yomichan.api.optionsGet(optionsContext); const options = await yomichan.api.optionsGet(optionsContext);
const {general} = this._options; const {general} = options;
this._themeController.theme = general.popupTheme; this._themeController.theme = general.popupTheme;
this._themeController.outerTheme = general.popupOuterTheme; this._themeController.outerTheme = general.popupOuterTheme;
this._initialWidth = general.popupWidth;
this._initialHeight = general.popupHeight;
this._horizontalOffset = general.popupHorizontalOffset;
this._verticalOffset = general.popupVerticalOffset;
this._horizontalOffset2 = general.popupHorizontalOffset2;
this._verticalOffset2 = general.popupVerticalOffset2;
this._verticalTextPosition = general.popupVerticalTextPosition;
this._horizontalTextPosition = general.popupHorizontalTextPosition;
this._displayMode = general.popupDisplayMode;
this._scaleRelativeToVisualViewport = general.popupScaleRelativeToVisualViewport;
this._useSecureFrameUrl = general.useSecurePopupFrameUrl;
this._useShadowDom = general.usePopupShadowDom;
this._customOuterCss = general.customPopupOuterCss;
this._optionsAssigned = true;
this.updateTheme(); this.updateTheme();
} }