From 01a0f96b40345642b1100a583b13a2f67487f642 Mon Sep 17 00:00:00 2001
From: Michael Gratton <mike@vee.net>
Date: Sat, 17 Oct 2020 11:29:05 +1100
Subject: [PATCH 103/124] 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 d0998a67..34bf0430 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() {
-- 
2.29.2