From 7a21694396709246792cfad34bdd0078187b827d Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Wed, 19 Aug 2020 12:34:05 +0200
Subject: [PATCH] Drop windowResize/windowResizeCallback in favor of
 ResizeObservable

---
 README.md                            | 13 ++++---
 dev/App/Abstract.js                  |  4 +-
 dev/Common/Globals.js                |  4 --
 dev/Common/Utils.js                  | 19 +---------
 dev/External/ko.js                   |  6 +--
 dev/Model/Filter.js                  |  4 +-
 dev/Model/Message.js                 |  5 ---
 dev/Screen/AbstractSettings.js       |  4 +-
 dev/Screen/User/MailBox.js           |  7 +---
 dev/Settings/User/Filters.js         |  4 +-
 dev/Stores/User/Message.js           |  4 --
 dev/View/Popup/Contacts.js           |  4 --
 dev/View/User/MailBox/FolderList.js  |  2 -
 dev/View/User/MailBox/MessageView.js | 55 ++++++----------------------
 14 files changed, 25 insertions(+), 110 deletions(-)

diff --git a/README.md b/README.md
index eeb6d200f..ecd18f192 100644
--- a/README.md
+++ b/README.md
@@ -76,24 +76,25 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill
 * Replaced Autolinker with simple https/email detection
 * Replaced ifvisible.js with simple drop-in replacement
 * Replaced momentToNode with proper HTML5 <time>
+* Replaced resize listeners with ResizeObserver
 
 |js/*       	|1.14.0 	|native 	|
 |-----------	|--------:	|--------:	|
-|admin.js    	|2.130.942	|1.064.762	|
-|app.js      	|4.184.455	|2.741.688	|
+|admin.js    	|2.130.942	|1.061.841	|
+|app.js      	|4.184.455	|2.732.920	|
 |boot.js     	|  671.522	|   43.995	|
 |libs.js     	|  647.614	|  317.218	|
 |polyfills.js	|  325.834	|        0	|
-|TOTAL      	|7.960.367	|4.167.663	|
+|TOTAL      	|7.960.367	|4.155.974	|
 
 |js/min/*       	|1.14.0   	|native   	|gzip 1.14	|gzip   	|
 |---------------	|--------:	|--------:	|--------:	|--------:	|
-|admin.min.js    	|  252.147	|  145.240	| 73.657	| 41.520	|
-|app.min.js      	|  511.202	|  368.020	|140.462	| 96.834	|
+|admin.min.js    	|  252.147	|  144.802	| 73.657	| 41.416	|
+|app.min.js      	|  511.202	|  366.677	|140.462	| 96.593	|
 |boot.min.js     	|   66.007	|    5.579	| 22.567	|  2.328	|
 |libs.min.js     	|  572.545	|  300.771	|176.720	| 92.928	|
 |polyfills.min.js	|   32.452	|        0	| 11.312	|      0	|
-|TOTAL          	|1.434.353	|  819.610	|424.718	|233.610	|
+|TOTAL          	|1.434.353	|  817.829	|424.718	|233.265	|
 
 614.743 bytes (191.108 gzip) is not much, but it feels faster.
 
diff --git a/dev/App/Abstract.js b/dev/App/Abstract.js
index 17b3c0913..553a1d5b5 100644
--- a/dev/App/Abstract.js
+++ b/dev/App/Abstract.js
@@ -7,7 +7,7 @@ import {
 	bMobileDevice
 } from 'Common/Globals';
 
-import { pString, detectDropdownVisibility, windowResizeCallback } from 'Common/Utils';
+import { pString, detectDropdownVisibility } from 'Common/Utils';
 
 import { KeyState } from 'Common/Enums';
 import { root, rootAdmin, rootUser, populateAuthSuffix } from 'Common/Links';
@@ -187,8 +187,6 @@ class AbstractApp extends AbstractBoot {
 
 		initOnStartOrLangChange(initNotificationLanguage);
 
-		setTimeout(windowResizeCallback, 1000);
-
 		if (!mobile) {
 			$htmlCL.add('rl-desktop');
 
diff --git a/dev/Common/Globals.js b/dev/Common/Globals.js
index c960d293a..c4af0638d 100644
--- a/dev/Common/Globals.js
+++ b/dev/Common/Globals.js
@@ -1,10 +1,6 @@
 import ko from 'ko';
 import { KeyState } from 'Common/Enums';
 
-const $win = jQuery(window);
-
-export { $win };
-
 export const $html = jQuery('html');
 export const $htmlCL = document.documentElement.classList;
 
diff --git a/dev/Common/Utils.js b/dev/Common/Utils.js
index fd0d25297..632a0051e 100644
--- a/dev/Common/Utils.js
+++ b/dev/Common/Utils.js
@@ -1,6 +1,6 @@
 import ko from 'ko';
 
-import { $win, dropdownVisibility, data as GlobalsData } from 'Common/Globals';
+import { dropdownVisibility, data as GlobalsData } from 'Common/Globals';
 import { ComposeType, SaveSettingsStep, FolderType } from 'Common/Enums';
 import { Mime } from 'Common/Mime';
 
@@ -1170,23 +1170,6 @@ export function mailToHelper(mailToUrl, PopupComposeViewModel) {
 	return false;
 }
 
-var wr;
-export const windowResize = timeout => {
-	clearTimeout(wr);
-	if (null == timeout) {
-		$win.trigger('resize');
-	} else {
-		wr = setTimeout(()=>$win.trigger('resize'), timeout);
-	}
-};
-
-/**
- * @returns {void}
- */
-export function windowResizeCallback() {
-	windowResize();
-}
-
 let substr = String.substr;
 if ('b' !== 'ab'.substr(-1)) {
 	substr = (str, start, length) => {
diff --git a/dev/External/ko.js b/dev/External/ko.js
index f97af93fe..379e2140b 100644
--- a/dev/External/ko.js
+++ b/dev/External/ko.js
@@ -182,8 +182,7 @@ ko.bindingHandlers.onEsc = {
 
 ko.bindingHandlers.modal = {
 	init: (element, fValueAccessor) => {
-		const Globals = require('Common/Globals'),
-			Utils = require('Common/Utils');
+		const Globals = require('Common/Globals');
 
 		$(element)
 			.toggleClass('fade', !Globals.bMobileDevice)
@@ -191,7 +190,6 @@ ko.bindingHandlers.modal = {
 				'keyboard': false,
 				'show': ko.unwrap(fValueAccessor())
 			})
-			.on('shown.koModal', Utils.windowResizeCallback)
 			.find('.close')
 			.on('click.koModal', () => {
 				fValueAccessor()(false);
@@ -290,7 +288,6 @@ ko.bindingHandlers.draggable = {
 							if (event.pageY >= bottomPos - triggerZone && event.pageY <= bottomPos) {
 								const moveUp = () => {
 									$this.scrollTop($this.scrollTop() + scrollSpeed);
-									Utils.windowResize();
 								};
 
 								$this.data('timerScroll', setInterval(moveUp, 10));
@@ -300,7 +297,6 @@ ko.bindingHandlers.draggable = {
 							if (event.pageY >= offset.top && event.pageY <= offset.top + triggerZone) {
 								const moveDown = () => {
 									$this.scrollTop($this.scrollTop() - scrollSpeed);
-									Utils.windowResize();
 								};
 
 								$this.data('timerScroll', setInterval(moveDown, 10));
diff --git a/dev/Model/Filter.js b/dev/Model/Filter.js
index 5171f88b5..0d55b5d6b 100644
--- a/dev/Model/Filter.js
+++ b/dev/Model/Filter.js
@@ -1,7 +1,7 @@
 import ko from 'ko';
 
 import { FilterRulesType, FiltersAction } from 'Common/Enums';
-import { pString, isNonEmptyArray, fakeMd5, delegateRunOnDestroy, windowResizeCallback } from 'Common/Utils';
+import { pString, isNonEmptyArray, fakeMd5, delegateRunOnDestroy } from 'Common/Utils';
 import { i18n } from 'Common/Translator';
 import { getFolderFromCacheList } from 'Common/Cache';
 
@@ -114,8 +114,6 @@ class FilterModel extends AbstractModel {
 			return result;
 		});
 
-		this.regDisposables(this.conditions.subscribe(windowResizeCallback));
-
 		this.regDisposables(
 			this.name.subscribe((sValue) => {
 				this.name.error(!sValue);
diff --git a/dev/Model/Message.js b/dev/Model/Message.js
index b61fedcf0..13faaa70d 100644
--- a/dev/Model/Message.js
+++ b/dev/Model/Message.js
@@ -6,7 +6,6 @@ import { i18n } from 'Common/Translator';
 import {
 	pInt,
 	previewMessage,
-	windowResize,
 	friendlySize,
 	isNonEmptyArray
 } from 'Common/Utils';
@@ -747,8 +746,6 @@ class MessageModel extends AbstractModel {
 				style = style ? (';' === style.substr(-1) ? style + ' ' : style + '; ') : '';
 				$this.attr('style', style + $this.attr(attr));
 			});
-
-			windowResize(500);
 		}
 	}
 
@@ -798,8 +795,6 @@ class MessageModel extends AbstractModel {
 					}
 				}
 			});
-
-			windowResize(500);
 		}
 	}
 
diff --git a/dev/Screen/AbstractSettings.js b/dev/Screen/AbstractSettings.js
index 27eb79da1..f6e3c88fd 100644
--- a/dev/Screen/AbstractSettings.js
+++ b/dev/Screen/AbstractSettings.js
@@ -1,7 +1,7 @@
 import ko from 'ko';
 
 import { VIEW_MODELS } from 'Common/Globals';
-import { windowResize, pString } from 'Common/Utils';
+import { pString } from 'Common/Utils';
 import { settings } from 'Common/Links';
 
 import { setHash } from 'Knoin/Knoin';
@@ -130,8 +130,6 @@ class AbstractSettingsScreen extends AbstractScreen {
 						jQuery('#rl-content .b-settings .b-content')[0].scrollTop = 0;
 					}
 					// --
-
-					windowResize();
 				}, 1);
 			}
 		} else {
diff --git a/dev/Screen/User/MailBox.js b/dev/Screen/User/MailBox.js
index 90cd5cc06..e707dd139 100644
--- a/dev/Screen/User/MailBox.js
+++ b/dev/Screen/User/MailBox.js
@@ -1,6 +1,6 @@
 import { Focused, Capa, ClientSideKeyName } from 'Common/Enums';
 import { $html, leftPanelDisabled, leftPanelType, moveAction, bMobileDevice } from 'Common/Globals';
-import { pString, pInt, windowResizeCallback } from 'Common/Utils';
+import { pString, pInt } from 'Common/Utils';
 import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache';
 import { i18n } from 'Common/Translator';
 
@@ -101,11 +101,6 @@ class MailBoxUserScreen extends AbstractScreen {
 	 * @returns {void}
 	 */
 	onStart() {
-		FolderStore.folderList.subscribe(windowResizeCallback);
-
-		MessageStore.messageList.subscribe(windowResizeCallback);
-		MessageStore.message.subscribe(windowResizeCallback);
-
 		setTimeout(() => SettingsStore.layout.valueHasMutated(), 50);
 		setTimeout(() => warmUpScreenPopup(require('View/Popup/Compose')), 500);
 
diff --git a/dev/Settings/User/Filters.js b/dev/Settings/User/Filters.js
index 484971305..345b1e9ef 100644
--- a/dev/Settings/User/Filters.js
+++ b/dev/Settings/User/Filters.js
@@ -1,6 +1,6 @@
 import ko from 'ko';
 
-import { windowResizeCallback, delegateRunOnDestroy } from 'Common/Utils';
+import { delegateRunOnDestroy } from 'Common/Utils';
 import { StorageResultType, Notification } from 'Common/Enums';
 import { getNotification } from 'Common/Translator';
 
@@ -23,8 +23,6 @@ class FiltersUserSettings {
 
 		this.saveErrorText = ko.observable('');
 
-		this.filters.subscribe(windowResizeCallback);
-
 		this.serverError.subscribe((value) => {
 			if (!value) {
 				this.serverErrorDesc('');
diff --git a/dev/Stores/User/Message.js b/dev/Stores/User/Message.js
index 4b44c3077..490d4a92a 100644
--- a/dev/Stores/User/Message.js
+++ b/dev/Stores/User/Message.js
@@ -6,7 +6,6 @@ import {
 	pInt,
 	pString,
 	plainToHtml,
-	windowResize,
 	findEmailAndLinks
 } from 'Common/Utils';
 
@@ -457,7 +456,6 @@ class MessageUserStore {
 							.insertBefore($this)
 							.on('click.rlBlockquoteSwitcher', () => {
 								$this.toggleClass('hidden-bq');
-								windowResize();
 							})
 							.after('<br />')
 							.before('<br />');
@@ -646,8 +644,6 @@ class MessageUserStore {
 						}
 					}
 				}
-
-				windowResize();
 			}
 		}
 	}
diff --git a/dev/View/Popup/Contacts.js b/dev/View/Popup/Contacts.js
index c3be58b4a..02c7fe17b 100644
--- a/dev/View/Popup/Contacts.js
+++ b/dev/View/Popup/Contacts.js
@@ -14,7 +14,6 @@ import {
 	delegateRunOnDestroy,
 	computedPagenatorHelper,
 	trim,
-	windowResizeCallback,
 	isNonEmptyArray,
 	fakeMd5,
 	pInt
@@ -155,9 +154,6 @@ class ContactsPopupView extends AbstractViewNext {
 			this.reloadContactList();
 		});
 
-		this.contacts.subscribe(windowResizeCallback);
-		this.viewProperties.subscribe(windowResizeCallback);
-
 		this.contactsChecked = ko.computed(() => this.contacts().filter(item => item.checked()));
 
 		this.contactsCheckedOrSelected = ko.computed(() => {
diff --git a/dev/View/User/MailBox/FolderList.js b/dev/View/User/MailBox/FolderList.js
index 981c7f9c5..7a42d7c4f 100644
--- a/dev/View/User/MailBox/FolderList.js
+++ b/dev/View/User/MailBox/FolderList.js
@@ -1,6 +1,5 @@
 import ko from 'ko';
 
-import { windowResize } from 'Common/Utils';
 import { Capa, Focused, Layout, KeyState, EventKeyCode } from 'Common/Enums';
 import { $htmlCL, leftPanelDisabled, moveAction } from 'Common/Globals';
 import { mailBox, settings } from 'Common/Links';
@@ -198,7 +197,6 @@ class FolderListMailBoxUserView extends AbstractViewNext {
 			this.iDropOverTimer = setTimeout(() => {
 				folder.collapsed(false);
 				getApp().setExpandedFolder(folder.fullNameHash, true);
-				windowResize();
 			}, 500);
 		}
 	}
diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js
index de200b66e..9cbd4fd7c 100644
--- a/dev/View/User/MailBox/MessageView.js
+++ b/dev/View/User/MailBox/MessageView.js
@@ -17,8 +17,6 @@ import { $htmlCL, leftPanelDisabled, keyScopeReal, useKeyboardShortcuts, moveAct
 
 import {
 	isNonEmptyArray,
-	windowResize,
-	windowResizeCallback,
 	inFocus,
 	removeSelection,
 	removeInFocus,
@@ -316,11 +314,8 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 
 		this.fullScreenMode.subscribe((value) => {
 			$htmlCL.toggle('rl-message-fullscreen', value);
-			windowResize();
 		});
 
-		this.messageLoadingThrottle.subscribe(windowResizeCallback);
-
 		this.messageFocused = ko.computed(() => Focused.MessageView === AppStore.focusedState());
 
 		this.messageListAndMessageViewLoading = ko.computed(
@@ -405,19 +400,16 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 
 	fullScreen() {
 		this.fullScreenMode(true);
-		windowResize();
 	}
 
 	unFullScreen() {
 		this.fullScreenMode(false);
-		windowResize();
 	}
 
 	toggleFullScreen() {
 		removeSelection();
 
 		this.fullScreenMode(!this.fullScreenMode());
-		windowResize();
 	}
 
 	/**
@@ -431,15 +423,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 	}
 
 	checkHeaderHeight() {
-		if (this.oHeaderDom) {
-			this.viewBodyTopValue(
-				this.message()
-					? this.oHeaderDom.height() +
-					  20 /* padding-(top/bottom): 20px */ +
-					   1 /* borded-bottom: 1px */
-					: 0
-			);
-		}
+		this.oHeaderDom && this.viewBodyTopValue(this.message() ? this.oHeaderDom.offsetHeight : 0);
 	}
 
 	//  displayMailToPopup(sMailToUrl) {
@@ -523,8 +507,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 	}
 
 	onBuild(dom) {
-		const self = this,
-			fCheckHeaderHeight = this.checkHeaderHeight.bind(this);
+		const self = this;
 
 		this.oDom = dom;
 
@@ -534,28 +517,19 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 			}
 		});
 
-		this.showAttachmnetControls.subscribe(fCheckHeaderHeight);
-		this.fullScreenMode.subscribe(fCheckHeaderHeight);
-		this.showFullInfo.subscribe(fCheckHeaderHeight);
-		this.message.subscribe(fCheckHeaderHeight);
-
-		addEventListener(
-			'resize',
-			(()=>{
-				setTimeout(fCheckHeaderHeight, 1);
-				setTimeout(fCheckHeaderHeight, 200);
-				setTimeout(fCheckHeaderHeight, 500);
-			}).throttle(50)
-		);
-
 		this.showFullInfo.subscribe((value) => {
-			windowResize();
-			windowResize(200);
 			Local.set(ClientSideKeyName.MessageHeaderFullInfo, value ? '1' : '0');
 		});
 
-		this.oHeaderDom = jQuery('.messageItemHeader', dom);
-		this.oHeaderDom = this.oHeaderDom[0] ? this.oHeaderDom : null;
+		this.oHeaderDom = dom[0].querySelector('.messageItemHeader');
+		if (this.oHeaderDom) {
+			if (!this.resizeObserver) {
+				this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.throttle(50).bind(this));
+			}
+			this.resizeObserver.observe(this.oHeaderDom);
+		} else if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+		}
 
 		if (this.mobile) {
 			dom.on('click', () => {
@@ -865,15 +839,12 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 			} else {
 				this.oMessageScrollerDom.scrollTop = 0;
 			}
-
-			windowResize();
 		}
 	}
 
 	scrollMessageToLeft() {
 		if (this.oMessageScrollerDom) {
 			this.oMessageScrollerDom.scrollLeft = 0;
-			windowResize();
 		}
 	}
 
@@ -909,8 +880,6 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 		if (message && message.showExternalImages) {
 			message.showExternalImages(true);
 		}
-
-		this.checkHeaderHeight();
 	}
 
 	/**
@@ -942,8 +911,6 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 
 			getApp().reloadFlagsCurrentMessageListAndMessageFromCache();
 		}
-
-		this.checkHeaderHeight();
 	}
 }