[geary/mjog/283-plain-text-whitespace-fixes: 1/4] ui/components-web-view.js: Use ResizeObserver for watching pref height




commit 01a0f96b40345642b1100a583b13a2f67487f642
Author: Michael Gratton <mike vee net>
Date:   Sat Oct 17 11:29:05 2020 +1100

    ui/components-web-view.js: Use ResizeObserver for watching pref height
    
    Rather than guessing when the height might change by using a number
    of different event listeners, use a ResizeObserver to get direct
    notifications of any changes to the HTML element's size.

 ui/components-web-view.js | 54 +++++------------------------------------------
 1 file changed, 5 insertions(+), 49 deletions(-)
---
diff --git a/ui/components-web-view.js b/ui/components-web-view.js
index d0998a678..34bf0430d 100644
--- a/ui/components-web-view.js
+++ b/ui/components-web-view.js
@@ -41,7 +41,12 @@ PageState.prototype = {
             }
         });
 
+        this.heightObserver = new ResizeObserver((entries) => {
+            state.updatePreferredHeight();
+        });
+
         document.addEventListener("DOMContentLoaded", function(e) {
+            state.heightObserver.observe(window.document.documentElement);
             state.loaded();
         });
 
@@ -49,55 +54,6 @@ PageState.prototype = {
             state.selectionChanged();
         });
 
-        // Coalesce multiple calls to updatePreferredHeight using a
-        // timeout to avoid the overhead of multiple JS messages sent
-        // to the app and hence view multiple resizes being queued.
-        let queueTimeout = null;
-        let queuePreferredHeightUpdate = function() {
-            if (queueTimeout != null) {
-                clearTimeout(queueTimeout);
-            }
-            queueTimeout = setTimeout(
-                function() { state.updatePreferredHeight(); }, 100
-            );
-        };
-
-        // Queues an update when the complete document is loaded.
-        //
-        // Note also that the delay introduced here by this last call
-        // to queuePreferredHeightUpdate when the complete document is
-        // loaded seems to be important to get an accurate idea of the
-        // final document size.
-        window.addEventListener("load", function(e) {
-            queuePreferredHeightUpdate();
-        }, true); // load does not bubble
-
-        // Queues updates for any STYLE, IMG and other loaded
-        // elements, hence handles resizing when the user later
-        // requests remote images loading.
-        document.addEventListener("load", function(e) {
-            queuePreferredHeightUpdate();
-        }, true); // load does not bubble
-
-        // Queues an update if the window changes size, e.g. if the
-        // user resized the window. Only trigger when the width has
-        // changed however since the height should only change as the
-        // body is being loaded.
-        let width = window.innerWidth;
-        window.addEventListener("resize", function(e) {
-            let currentWidth = window.innerWidth;
-            if (width != currentWidth) {
-                width = currentWidth;
-                queuePreferredHeightUpdate();
-            }
-        }, false); // load does not bubble
-
-        // Queues an update when a transition has completed, e.g. if the
-        // user resized the window
-        window.addEventListener("transitionend", function(e) {
-            queuePreferredHeightUpdate();
-        }, false); // load does not bubble
-
         this.testResult = null;
     },
     getPreferredHeight: function() {


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]