Drop windowResize/windowResizeCallback in favor of ResizeObservable

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	|
+|admin.js    	|2.130.942	|1.061.841	|
-|app.js      	|4.184.455	|2.741.688	|
+|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	|
+|admin.min.js    	|  252.147	|  144.802	| 73.657	| 41.416	|
-|app.min.js      	|  511.202	|  368.020	|140.462	| 96.834	|
+|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.
 

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');
 

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;
 

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) => {

dev/External/ko.js

@@ -182,8 +182,7 @@ ko.bindingHandlers.onEsc = {
 
 ko.bindingHandlers.modal = {
 	init: (element, fValueAccessor) => {
-		const Globals = require('Common/Globals'),
+		const Globals = require('Common/Globals');
-			Utils = require('Common/Utils');
 
 		$(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));

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);

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);
 		}
 	}
 

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 {

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);
 

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('');

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();
 			}
 		}
 	}

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(() => {

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);
 		}
 	}

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.oHeaderDom && this.viewBodyTopValue(this.message() ? this.oHeaderDom.offsetHeight : 0);
-			this.viewBodyTopValue(
-				this.message()
-					? this.oHeaderDom.height() +
-					  20 /* padding-(top/bottom): 20px */ +
-					   1 /* borded-bottom: 1px */
-					: 0
-			);
-		}
 	}
 
 	//  displayMailToPopup(sMailToUrl) {
@@ -523,8 +507,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 	}
 
 	onBuild(dom) {
-		const self = this,
+		const self = this;
-			fCheckHeaderHeight = this.checkHeaderHeight.bind(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 = dom[0].querySelector('.messageItemHeader');
-		this.oHeaderDom = this.oHeaderDom[0] ? this.oHeaderDom : null;
+		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();
 	}
 }