Separate display resizer (#1494)

* Make invokeContentOrigin public

* Move display resizer functionality into a new class: DisplayResizer

* Simplify field names

* Use parent frame instead of content origin

* Remove unused

ext/js/app/frontend.js

@@ -128,9 +128,7 @@ class Frontend {
             ['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)}],
+            ['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();
@@ -221,14 +219,6 @@ class Frontend {
         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() {

ext/js/display/display-resizer.js

@@ -0,0 +1,172 @@
+/*
+ * Copyright (C) 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 <https://www.gnu.org/licenses/>.
+ */
+
+class DisplayResizer {
+    constructor(display) {
+        this._display = display;
+        this._token = null;
+        this._handle = null;
+        this._touchIdentifier = null;
+        this._startSize = null;
+        this._startOffset = null;
+        this._eventListeners = new EventListenerCollection();
+    }
+
+    prepare() {
+        this._handle = document.querySelector('#frame-resizer-handle');
+        if (this._handle === null) { return; }
+
+        this._handle.addEventListener('mousedown', this._onFrameResizerMouseDown.bind(this), false);
+        this._handle.addEventListener('touchstart', this._onFrameResizerTouchStart.bind(this), false);
+    }
+
+    // Private
+
+    _onFrameResizerMouseDown(e) {
+        if (e.button !== 0) { return; }
+        // Don't do e.preventDefault() here; this allows mousemove events to be processed
+        // if the pointer moves out of the frame.
+        this._startFrameResize(e);
+    }
+
+    _onFrameResizerTouchStart(e) {
+        e.preventDefault();
+        this._startFrameResizeTouch(e);
+    }
+
+    _onFrameResizerMouseUp() {
+        this._stopFrameResize();
+    }
+
+    _onFrameResizerWindowBlur() {
+        this._stopFrameResize();
+    }
+
+    _onFrameResizerMouseMove(e) {
+        if ((e.buttons & 0x1) === 0x0) {
+            this._stopFrameResize();
+        } else {
+            if (this._startSize === null) { return; }
+            const {clientX: x, clientY: y} = e;
+            this._updateFrameSize(x, y);
+        }
+    }
+
+    _onFrameResizerTouchEnd(e) {
+        if (this._getTouch(e.changedTouches, this._touchIdentifier) === null) { return; }
+        this._stopFrameResize();
+    }
+
+    _onFrameResizerTouchCancel(e) {
+        if (this._getTouch(e.changedTouches, this._touchIdentifier) === null) { return; }
+        this._stopFrameResize();
+    }
+
+    _onFrameResizerTouchMove(e) {
+        if (this._startSize === null) { return; }
+        const primaryTouch = this._getTouch(e.changedTouches, this._touchIdentifier);
+        if (primaryTouch === null) { return; }
+        const {clientX: x, clientY: y} = primaryTouch;
+        this._updateFrameSize(x, y);
+    }
+
+    _startFrameResize(e) {
+        if (this._token !== null) { return; }
+
+        const {clientX: x, clientY: y} = e;
+        const token = {};
+        this._token = token;
+        this._startOffset = {x, y};
+        this._eventListeners.addEventListener(window, 'mouseup', this._onFrameResizerMouseUp.bind(this), false);
+        this._eventListeners.addEventListener(window, 'blur', this._onFrameResizerWindowBlur.bind(this), false);
+        this._eventListeners.addEventListener(window, 'mousemove', this._onFrameResizerMouseMove.bind(this), false);
+
+        const {documentElement} = document;
+        if (documentElement !== null) {
+            documentElement.dataset.isResizing = 'true';
+        }
+
+        this._initializeFrameResize(token);
+    }
+
+    _startFrameResizeTouch(e) {
+        if (this._token !== null) { return; }
+
+        const {clientX: x, clientY: y, identifier} = e.changedTouches[0];
+        const token = {};
+        this._token = token;
+        this._startOffset = {x, y};
+        this._touchIdentifier = identifier;
+        this._eventListeners.addEventListener(window, 'touchend', this._onFrameResizerTouchEnd.bind(this), false);
+        this._eventListeners.addEventListener(window, 'touchcancel', this._onFrameResizerTouchCancel.bind(this), false);
+        this._eventListeners.addEventListener(window, 'blur', this._onFrameResizerWindowBlur.bind(this), false);
+        this._eventListeners.addEventListener(window, 'touchmove', this._onFrameResizerTouchMove.bind(this), false);
+
+        const {documentElement} = document;
+        if (documentElement !== null) {
+            documentElement.dataset.isResizing = 'true';
+        }
+
+        this._initializeFrameResize(token);
+    }
+
+    async _initializeFrameResize(token) {
+        const {parentPopupId} = this._display;
+        if (parentPopupId === null) { return; }
+
+        const size = await this._display.invokeParentFrame('popup.getFrameSize', {id: parentPopupId});
+        if (this._token !== token) { return; }
+        this._startSize = size;
+    }
+
+    _stopFrameResize() {
+        if (this._token === null) { return; }
+
+        this._eventListeners.removeAllEventListeners();
+        this._startSize = null;
+        this._startOffset = null;
+        this._touchIdentifier = null;
+        this._token = null;
+
+        const {documentElement} = document;
+        if (documentElement !== null) {
+            delete documentElement.dataset.isResizing;
+        }
+    }
+
+    async _updateFrameSize(x, y) {
+        const {parentPopupId} = this._display;
+        if (parentPopupId === null) { return; }
+
+        const handleSize = this._handle.getBoundingClientRect();
+        let {width, height} = this._startSize;
+        width += x - this._startOffset.x;
+        height += y - this._startOffset.y;
+        width = Math.max(Math.max(0, handleSize.width), width);
+        height = Math.max(Math.max(0, handleSize.height), height);
+        await this._display.invokeParentFrame('popup.setFrameSize', {id: parentPopupId, width, height});
+    }
+
+    _getTouch(touchList, identifier) {
+        for (const touch of touchList) {
+            if (touch.identifier === identifier) {
+                return touch;
+            }
+        }
+        return null;
+    }
+}

ext/js/display/display.js

@@ -106,12 +106,6 @@ class Display extends EventDispatcher {
         this._browser = null;
         this._copyTextarea = null;
         this._definitionTextScanner = null;
-        this._frameResizeToken = null;
-        this._frameResizeHandle = document.querySelector('#frame-resizer-handle');
-        this._frameResizeTouchIdentifier = null;
-        this._frameResizeStartSize = null;
-        this._frameResizeStartOffset = null;
-        this._frameResizeEventListeners = new EventListenerCollection();
         this._tagNotification = null;
         this._footerNotificationContainer = document.querySelector('#content-footer');
         this._displayAudio = new DisplayAudio(this);
@@ -204,6 +198,10 @@ class Display extends EventDispatcher {
         return this._frameId;
     }
 
+    get parentPopupId() {
+        return this._parentPopupId;
+    }
+
     async prepare() {
         // State setup
         const {documentElement} = document;
@@ -243,11 +241,6 @@ class Display extends EventDispatcher {
         if (this._navigationNextButton !== null) {
             this._navigationNextButton.addEventListener('click', this._onNextTermView.bind(this), false);
         }
-
-        if (this._frameResizeHandle !== null) {
-            this._frameResizeHandle.addEventListener('mousedown', this._onFrameResizerMouseDown.bind(this), false);
-            this._frameResizeHandle.addEventListener('touchstart', this._onFrameResizerTouchStart.bind(this), false);
-        }
     }
 
     getContentOrigin() {
@@ -399,7 +392,7 @@ class Display extends EventDispatcher {
     close() {
         switch (this._pageType) {
             case 'popup':
-                this._invokeContentOrigin('closePopup');
+                this.invokeContentOrigin('closePopup');
                 break;
             case 'search':
                 this._closeTab();
@@ -439,6 +432,20 @@ class Display extends EventDispatcher {
         this.setContent(details);
     }
 
+    async invokeContentOrigin(action, params={}) {
+        if (this._contentOriginTabId === this._tabId && this._contentOriginFrameId === this._frameId) {
+            throw new Error('Content origin is same page');
+        }
+        return await yomichan.crossFrame.invokeTab(this._contentOriginTabId, this._contentOriginFrameId, action, params);
+    }
+
+    async invokeParentFrame(action, params={}) {
+        if (this._parentFrameId === null || this._parentFrameId === this._frameId) {
+            throw new Error('Invalid parent frame');
+        }
+        return await yomichan.crossFrame.invoke(this._parentFrameId, action, params);
+    }
+
     // Message handlers
 
     _onDirectMessage(data) {
@@ -1618,13 +1625,6 @@ class Display extends EventDispatcher {
         await frontend.prepare();
     }
 
-    async _invokeContentOrigin(action, params={}) {
-        if (this._contentOriginTabId === this._tabId && this._contentOriginFrameId === this._frameId) {
-            throw new Error('Content origin is same page');
-        }
-        return await yomichan.crossFrame.invokeTab(this._contentOriginTabId, this._contentOriginFrameId, action, params);
-    }
-
     _copyHostSelection() {
         if (this._contentOriginFrameId === null || window.getSelection().toString()) { return false; }
         this._copyHostSelectionSafe();
@@ -1646,7 +1646,7 @@ class Display extends EventDispatcher {
                 {
                     let text;
                     try {
-                        text = await this._invokeContentOrigin('getSelectionText');
+                        text = await this.invokeContentOrigin('getSelectionText');
                     } catch (e) {
                         break;
                     }
@@ -1654,7 +1654,7 @@ class Display extends EventDispatcher {
                 }
                 break;
             default:
-                await this._invokeContentOrigin('copySelection');
+                await this.invokeContentOrigin('copySelection');
                 break;
         }
     }
@@ -1779,138 +1779,10 @@ class Display extends EventDispatcher {
         this.setContent(details);
     }
 
-    _onFrameResizerMouseDown(e) {
-        if (e.button !== 0) { return; }
-        // Don't do e.preventDefault() here; this allows mousemove events to be processed
-        // if the pointer moves out of the frame.
-        this._startFrameResize(e);
-    }
-
-    _onFrameResizerTouchStart(e) {
-        e.preventDefault();
-        this._startFrameResizeTouch(e);
-    }
-
-    _onFrameResizerMouseUp() {
-        this._stopFrameResize();
-    }
-
-    _onFrameResizerWindowBlur() {
-        this._stopFrameResize();
-    }
-
-    _onFrameResizerMouseMove(e) {
-        if ((e.buttons & 0x1) === 0x0) {
-            this._stopFrameResize();
-        } else {
-            if (this._frameResizeStartSize === null) { return; }
-            const {clientX: x, clientY: y} = e;
-            this._updateFrameSize(x, y);
-        }
-    }
-
-    _onFrameResizerTouchEnd(e) {
-        if (this._getTouch(e.changedTouches, this._frameResizeTouchIdentifier) === null) { return; }
-        this._stopFrameResize();
-    }
-
-    _onFrameResizerTouchCancel(e) {
-        if (this._getTouch(e.changedTouches, this._frameResizeTouchIdentifier) === null) { return; }
-        this._stopFrameResize();
-    }
-
-    _onFrameResizerTouchMove(e) {
-        if (this._frameResizeStartSize === null) { return; }
-        const primaryTouch = this._getTouch(e.changedTouches, this._frameResizeTouchIdentifier);
-        if (primaryTouch === null) { return; }
-        const {clientX: x, clientY: y} = primaryTouch;
-        this._updateFrameSize(x, y);
-    }
-
     _getSearchContext() {
         return {optionsContext: this.getOptionsContext()};
     }
 
-    _startFrameResize(e) {
-        if (this._frameResizeToken !== null) { return; }
-
-        const {clientX: x, clientY: y} = e;
-        const token = {};
-        this._frameResizeToken = token;
-        this._frameResizeStartOffset = {x, y};
-        this._frameResizeEventListeners.addEventListener(window, 'mouseup', this._onFrameResizerMouseUp.bind(this), false);
-        this._frameResizeEventListeners.addEventListener(window, 'blur', this._onFrameResizerWindowBlur.bind(this), false);
-        this._frameResizeEventListeners.addEventListener(window, 'mousemove', this._onFrameResizerMouseMove.bind(this), false);
-
-        const {documentElement} = document;
-        if (documentElement !== null) {
-            documentElement.dataset.isResizing = 'true';
-        }
-
-        this._initializeFrameResize(token);
-    }
-
-    _startFrameResizeTouch(e) {
-        if (this._frameResizeToken !== null) { return; }
-
-        const {clientX: x, clientY: y, identifier} = e.changedTouches[0];
-        const token = {};
-        this._frameResizeToken = token;
-        this._frameResizeStartOffset = {x, y};
-        this._frameResizeTouchIdentifier = identifier;
-        this._frameResizeEventListeners.addEventListener(window, 'touchend', this._onFrameResizerTouchEnd.bind(this), false);
-        this._frameResizeEventListeners.addEventListener(window, 'touchcancel', this._onFrameResizerTouchCancel.bind(this), false);
-        this._frameResizeEventListeners.addEventListener(window, 'blur', this._onFrameResizerWindowBlur.bind(this), false);
-        this._frameResizeEventListeners.addEventListener(window, 'touchmove', this._onFrameResizerTouchMove.bind(this), false);
-
-        const {documentElement} = document;
-        if (documentElement !== null) {
-            documentElement.dataset.isResizing = 'true';
-        }
-
-        this._initializeFrameResize(token);
-    }
-
-    async _initializeFrameResize(token) {
-        const size = await this._invokeContentOrigin('getFrameSize');
-        if (this._frameResizeToken !== token) { return; }
-        this._frameResizeStartSize = size;
-    }
-
-    _stopFrameResize() {
-        if (this._frameResizeToken === null) { return; }
-
-        this._frameResizeEventListeners.removeAllEventListeners();
-        this._frameResizeStartSize = null;
-        this._frameResizeStartOffset = null;
-        this._frameResizeTouchIdentifier = null;
-        this._frameResizeToken = null;
-
-        const {documentElement} = document;
-        if (documentElement !== null) {
-            delete documentElement.dataset.isResizing;
-        }
-    }
-
-    async _updateFrameSize(x, y) {
-        const handleSize = this._frameResizeHandle.getBoundingClientRect();
-        let {width, height} = this._frameResizeStartSize;
-        width += x - this._frameResizeStartOffset.x;
-        height += y - this._frameResizeStartOffset.y;
-        width = Math.max(Math.max(0, handleSize.width), width);
-        height = Math.max(Math.max(0, handleSize.height), height);
-        await this._invokeContentOrigin('setFrameSize', {width, height});
-    }
-
-    _getTouch(touchList, identifier) {
-        for (const touch of touchList) {
-            if (touch.identifier === identifier) {
-                return touch;
-            }
-        }
-        return null;
-    }
-
     _updateHotkeys(options) {
         this._hotkeyHandler.setHotkeys(this._pageType, options.inputs.hotkeys);
     }

ext/js/display/popup-main.js

@@ -18,6 +18,7 @@
 /* global
  * Display
  * DisplayProfileSelection
+ * DisplayResizer
  * DocumentFocusController
  * HotkeyHandler
  * JapaneseUtil
@@ -43,6 +44,9 @@
         const displayProfileSelection = new DisplayProfileSelection(display);
         displayProfileSelection.prepare();
 
+        const displayResizer = new DisplayResizer(display);
+        displayResizer.prepare();
+
         display.initializeState();
 
         document.documentElement.dataset.loaded = 'true';

ext/popup.html

@@ -104,6 +104,7 @@
 <script src="/js/display/display-history.js"></script>
 <script src="/js/display/display-notification.js"></script>
 <script src="/js/display/display-profile-selection.js"></script>
+<script src="/js/display/display-resizer.js"></script>
 <script src="/js/display/query-parser.js"></script>
 <script src="/js/dom/document-focus-controller.js"></script>
 <script src="/js/dom/document-util.js"></script>