Change the resizer color when the window is being resized (#1120)

2 files changed, 12 insertions, 1 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index d95aee2f..f18ff325 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -1196,7 +1196,8 @@ button.action-button {
         fill var(--animation-duration) linear,
         opacity var(--animation-duration) linear;
 }
-.frame-resizer-handle:hover {
+.frame-resizer-handle:hover,
+:root[data-is-resizing=true] .frame-resizer-handle {
     fill: var(--accent-color);
     opacity: 1;
 }
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 77bf9649..91168748 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -1868,6 +1868,11 @@ class Display extends EventDispatcher {
         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);
     }
 
@@ -1884,6 +1889,11 @@ class Display extends EventDispatcher {
         this._frameResizeStartSize = null;
         this._frameResizeStartOffset = null;
         this._frameResizeToken = null;
+
+        const {documentElement} = document;
+        if (documentElement !== null) {
+            delete documentElement.dataset.isResizing;
+        }
     }
 
     async _updateFrameSize(x, y) {