[geary/mjog/283-plain-text-whitespace-fixes: 1/4] ui/components-web-view.js: Use ResizeObserver for watching pref height
- From: Michael Gratton <mjog src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [geary/mjog/283-plain-text-whitespace-fixes: 1/4] ui/components-web-view.js: Use ResizeObserver for watching pref height
- Date: Sat, 17 Oct 2020 02:51:28 +0000 (UTC)
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]