Support frame resize on firefox (#1088)

* Add popup functions for getting/setting the frame size

* Add frontend functions for getting/setting popup frame size

* Expose display mode attribute on display HTML

* Disable resizer on iframe

* Add custom frame resizer handle

* Add support for custom frame resizer

6 files changed, 64 insertions, 4 deletions

diff --git a/ext/fg/float.html b/ext/fg/float.html
index 5874f44d..50c3b691 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -67,6 +67,13 @@
     </div>
 </div>
 
+<div class="frame-resizer-container">
+    <div class="frame-resizer-sizer1"><div class="frame-resizer-sizer2 frame-resizer-sizer2-with-min-size scrollbar"></div></div>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" preserveAspectRatio="none" class="frame-resizer-svg">
+        <path d="M1 0L1 1L0 1Z" class="frame-resizer-handle" id="frame-resizer-handle"/>
+    </svg>
+</div>
+
 <!-- Scripts -->
 <script src="/mixed/js/core.js"></script>
 <script src="/mixed/js/yomichan.js"></script>
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 49c8a91c..cb105341 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -119,7 +119,9 @@ 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)}],
-            ['getDocumentInformation',  {async: false, handler: this._onApiGetDocumentInformation.bind(this)}]
+            ['getDocumentInformation',  {async: false, handler: this._onApiGetDocumentInformation.bind(this)}],
+            ['getFrameSize',            {async: true,  handler: this._onApiGetFrameSize.bind(this)}],
+            ['setFrameSize',            {async: true,  handler: this._onApiSetFrameSize.bind(this)}]
         ]);
 
         this._updateContentScale();
@@ -203,6 +205,14 @@ 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() {
diff --git a/ext/fg/js/popup-factory.js b/ext/fg/js/popup-factory.js
index 252bcdf4..9a6c2ccd 100644
--- a/ext/fg/js/popup-factory.js
+++ b/ext/fg/js/popup-factory.js
@@ -48,7 +48,9 @@ class PopupFactory {
             ['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)}]
+            ['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)}]
         ]);
     }
 
@@ -265,6 +267,16 @@ class PopupFactory {
         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) {
diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js
index 26dce0d1..a03b58e8 100644
--- a/ext/fg/js/popup-proxy.js
+++ b/ext/fg/js/popup-proxy.js
@@ -149,6 +149,14 @@ class PopupProxy extends EventDispatcher {
         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={}) {
diff --git a/ext/fg/js/popup-window.js b/ext/fg/js/popup-window.js
index 3d707a9e..3d68beb8 100644
--- a/ext/fg/js/popup-window.js
+++ b/ext/fg/js/popup-window.js
@@ -132,6 +132,14 @@ class PopupWindow extends EventDispatcher {
         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) {
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index ffd72dca..c24ffb5c 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -208,6 +208,16 @@ class Popup extends EventDispatcher {
         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() {
@@ -397,8 +407,7 @@ class Popup extends EventDispatcher {
 
         frame.style.left = `${x}px`;
         frame.style.top = `${y}px`;
-        frame.style.width = `${width}px`;
-        frame.style.height = `${height}px`;
+        this._setFrameSize(width, height);
 
         this._setVisible(true);
         if (this._child !== null) {
@@ -406,6 +415,12 @@ class Popup extends EventDispatcher {
         }
     }
 
+    _setFrameSize(width, height) {
+        const {style} = this._frame;
+        style.width = `${width}px`;
+        style.height = `${height}px`;
+    }
+
     _setVisible(visible) {
         this._visible.defaultValue = visible;
     }