Replace my old ResizeObserver workaround for RainLoop bugs with proper CSS flex.

And removed wysiwyg resize() in favor of flexbox.

dev/Common/Html.js

@@ -29,12 +29,6 @@ export class HtmlEditor {
 		this.onBlur = onBlur;
 		this.onModeChange = onModeChange;
 
-		this.resize = (() => {
-			try {
-				this.editor && this.editor.resize(element.clientWidth, element.clientHeight);
-			} catch (e) {} // eslint-disable-line no-empty
-		}).throttle(100);
-
 		if (element) {
 			let editor;
 
@@ -42,7 +36,6 @@ export class HtmlEditor {
 			this.onReady = fn => onReady.push(fn);
 			const readyCallback = () => {
 				this.editor = editor;
-				this.resize();
 				this.onReady = fn => fn();
 				onReady.forEach(fn => fn());
 			};

dev/External/SquireUI.js

@@ -540,12 +540,6 @@ class SquireUI
 	focus() {
 		('plain' == this.mode ? this.plain : this.squire).focus();
 	}
-
-	resize(width, height) {
-		height = Math.max(200, (height - this.wysiwyg.offsetTop)) + 'px';
-		this.wysiwyg.style.height = height;
-		this.plain.style.height = height;
-	}
 }
 
 this.SquireUI = SquireUI;

dev/Styles/User/Compose.less

@@ -2,21 +2,32 @@
 .b-compose {
 
 	&.modal {
-		width: 98%;
+		display: flex;
+		flex-direction: column;
+		height: calc(100% - 52px);
 		max-width: 1000px;
-		min-height: calc(100% - 52px);
+		width: 98%;
 	}
 
 	.modal-body {
 		padding: 0;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
 	}
 
 	.textAreaParent, .attachmentAreaParent {
 		box-sizing: border-box;
+		height: 100%;
 		min-height: 200px;
 		position: relative;
 	}
 
+	.textAreaParent {
+		display: flex;
+		flex-direction: column;
+	}
+
 	.attachmentAreaParent {
 		border-top: 1px solid #ccc;
 		overflow-y: auto;

dev/Styles/User/MessageList.less

@@ -13,6 +13,11 @@ html.rl-no-preview-pane {
 
 .messageList {
 	height: 100%;
+	background-color: #fff;
+	border: 1px solid @rlMainDarkColor;
+	border-radius: @rlMainBorderRadius;
+	box-shadow: @rlMainShadow;
+	z-index: 101;
 
 	.toolbar {
 		position: absolute;
@@ -25,14 +30,15 @@ html.rl-no-preview-pane {
 		white-space: nowrap;
 	}
 
+	.b-message-list-wrapper {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
 	.b-footer {
-		position: absolute;
+		flex-shrink: 0;
-		bottom: 0;
-		right: 0;
-		left: 0;
-		height: 30px;
 		padding: 7px;
-		z-index: 101;
 
 		background-color: var(--message-list-toolbar-bg-color, #eee);
 //		#gradient > .vertical(#f4f4f4, #dfdfdf);
@@ -59,23 +65,9 @@ html.rl-no-preview-pane {
 		padding-right: 8px;
 	}
 
-	.b-message-list-wrapper {
-		border: 1px solid @rlMainDarkColor;
-		height: 100%;
-
-		box-shadow: @rlMainShadow;
-		border-radius: @rlMainBorderRadius;
-		z-index: 101;
-	}
-
 	.second-toolbar {
-		position: absolute;
+		flex-shrink: 0;
-		top: 0;
-		right: 0;
-		left: 0;
-		height: 29px;
 		padding: 10px 8px 10px 11px;
-		z-index: 101;
 		white-space: nowrap;
 
 		background-color: var(--message-list-toolbar-bg-color, #eee);
@@ -108,18 +100,11 @@ html.rl-no-preview-pane {
 	}
 
 	.b-content {
-		position: absolute;
+		height: 100%;
-		top: 50px;
-		bottom: 45px;
-		left: 0;
-		right: 0;
 		padding: 0;
 		overflow: auto;
-		z-index: 101;
 		scroll-behavior: smooth;
 
-		background-color: #fff;
-
 		.listClear {
 			text-align: center;
 			padding: 10px;
@@ -179,8 +164,7 @@ html.rl-no-preview-pane {
 		}
 	}
 
-	&.focused .b-message-list-wrapper {
+	&.focused {
-		background-color: #000;
 		border-color: #9d9d9d;
 	}
 }

dev/Styles/User/MessageView.less

@@ -3,6 +3,9 @@
 }
 
 .messageView {
+	background-color: #fff;
+	border: 1px solid @rlMainDarkColor;
+	border-radius: @rlMainBorderRadius;
 	height: 100%;
 
 	.toolbar {
@@ -16,10 +19,14 @@
 	}
 
 	.b-content {
-		background-color: #fff;
-		border: 1px solid @rlMainDarkColor;
-		border-radius: @rlMainBorderRadius;
 		height: 100%;
+	}
+
+	.b-message {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
 
 	.b-message-view-checked-helper {
 		text-align: center;
@@ -77,14 +84,14 @@
 			opacity: 0.5;
 		}
 	}
-	}
 
 	.messageItemHeader {
 
-		padding: 10px;
 		background-color: #f8f8f8;
 		border-bottom: 1px solid #ddd;
 		border-radius: @rlMainBorderRadius @rlMainBorderRadius 0 0;
+		padding: 10px;
+		flex-shrink: 0;
 
 		.subjectParent {
 			font-size: 18px;
@@ -162,11 +169,7 @@
 	.messageItem {
 
 		color: #000;
-		position: absolute;
+		height: 100%;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
 		overflow: auto;
 		scroll-behavior: smooth;
 
@@ -443,8 +446,7 @@
 		}
 	}
 
-	&.focused .b-content {
+	&.focused {
-		z-index: 101;
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 		border-color: darken(@rlMainDarkColor, 5%);
 	}

dev/Styles/User/SquireUI.less

@@ -1,9 +1,10 @@
 
 .squire-toolbar {
-	padding: 2px;
 	border-bottom: 1px solid #b6b6b6;
+	min-height: 28px;
 	overflow-x: auto;
 	overflow-y: hidden;
+	padding: 2px;
 	white-space: nowrap;
 }
 
@@ -38,6 +39,7 @@
 .squire-wysiwyg, .squire-plain {
 	box-sizing: border-box;
 	font-size: 13px;
+	height: 100%;
 	line-height: 16px;
 	min-height: 200px;
 	overflow: auto;
@@ -155,16 +157,22 @@ Secondly, we can't rely on MUA's what to do with :empty
 }
 
 /* @media (hover: none) */
-.rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar {
+@media screen and (max-height: 600px) {
+	.rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar {
 		display: none;
-}
+	}
-.rl-mobile .squire-toolbar {
+	.rl-mobile .squire-toolbar {
 		background: #EEE;
 		padding: 1px;
 		position: fixed;
-	bottom: 0;
+		top: 18px;
 		left: 0;
 		right: 0;
+	/*
+		transform: translateY(-42px);
+		z-index: 9;
+	*/
+	}
 }
 
 .rl-mobile .b-compose.modal,

dev/View/Popup/Compose.js

@@ -312,8 +312,6 @@ class ComposePopupView extends AbstractViewPopup {
 			}
 		});
 
-		this.resizeObserver = new ResizeObserver(this.resizerTrigger.throttle(50).bind(this));
-
 		decorateKoCommands(this, {
 			sendCommand: self => self.canBeSentOrSaved(),
 				saveCommand: self => self.canBeSentOrSaved(),
@@ -641,8 +639,6 @@ class ComposePopupView extends AbstractViewPopup {
 
 		rl.route.on();
 
-		this.resizeObserver.disconnect();
-
 		(getFullscreenElement() === this.oContent) && exitFullscreen();
 	}
 
@@ -709,10 +705,6 @@ class ComposePopupView extends AbstractViewPopup {
 	onShow(type, oMessageOrArray, aToEmails, aCcEmails, aBccEmails, sCustomSubject, sCustomPlainText) {
 		rl.route.off();
 
-		const ro = this.resizeObserver;
-		ro.observe(ro.compose);
-		ro.observe(ro.header);
-
 		this.autosaveStart();
 
 		this.viewModelDom.dataset.wysiwyg = SettingsUserStore.editorDefaultType();
@@ -1088,7 +1080,7 @@ class ComposePopupView extends AbstractViewPopup {
 		}
 	}
 
-	onBuild(dom) {
+	onBuild() {
 		// initUploader
 
 		if (this.composeUploaderButton()) {
@@ -1249,12 +1241,6 @@ class ComposePopupView extends AbstractViewPopup {
 			return false;
 		});
 
-		const ro = this.resizeObserver;
-		ro.compose = dom.querySelector('.b-compose');
-		ro.header = dom.querySelector('.b-header');
-		ro.toolbar = dom.querySelector('.b-header-toolbar');
-		ro.els = [dom.querySelector('.textAreaParent'), dom.querySelector('.attachmentAreaParent')];
-
 		this.editor(editor => editor[this.isPlainEditor()?'modePlain':'modeWysiwyg']());
 
 		// Fullscreen must be on app, else other popups fail
@@ -1463,16 +1449,6 @@ class ComposePopupView extends AbstractViewPopup {
 			item => item.id
 		);
 	}
-
-	resizerTrigger() {
-		let ro = this.resizeObserver,
-			height = Math.max(200, ro.compose.clientHeight - ro.header.offsetHeight - ro.toolbar.offsetHeight) + 'px';
-		if (ro.height !== height) {
-			ro.height = height;
-			ro.els.forEach(element => element.style.height = height);
-			this.oEditor && this.oEditor.resize();
-		}
-	}
 }
 
 export { ComposePopupView, ComposePopupView as default };

dev/View/User/MailBox/MessageView.js

@@ -60,7 +60,6 @@ export class MailMessageView extends AbstractViewRight {
 					}
 				}, this.messageVisibility);
 
-		this.oHeaderDom = null;
 		this.oMessageScrollerDom = null;
 
 		this.addObservables({
@@ -116,7 +115,6 @@ export class MailMessageView extends AbstractViewRight {
 		this.viewUid = '';
 		this.viewHash = '';
 		this.addObservables({
-			viewBodyTopValue: 0,
 			viewSubject: '',
 			viewFromShort: '',
 			viewFromDkimData: ['none', ''],
@@ -304,10 +302,6 @@ export class MailMessageView extends AbstractViewRight {
 		showMessageComposer([sType, MessageUserStore.message()]);
 	}
 
-	checkHeaderHeight() {
-		this.oHeaderDom && this.viewBodyTopValue(MessageUserStore.message() ? this.oHeaderDom.offsetHeight : 0);
-	}
-
 	onBuild(dom) {
 		this.oMessageScrollerDom = dom.querySelector('.messageItem');
 
@@ -316,19 +310,8 @@ export class MailMessageView extends AbstractViewRight {
 
 		this.showFullInfo.subscribe(value => Local.set(ClientSideKeyName.MessageHeaderFullInfo, value ? '1' : '0'));
 
-		let el = dom.querySelector('.messageItemHeader');
+		let event = 'fullscreenchange',
-		this.oHeaderDom = el;
+			el = dom.querySelector('.b-content');
-		if (el) {
-			if (!this.resizeObserver) {
-				this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.debounce(50).bind(this));
-			}
-			this.resizeObserver.observe(el);
-		} else if (this.resizeObserver) {
-			this.resizeObserver.disconnect();
-		}
-
-		let event = 'fullscreenchange';
-		el = dom.querySelector('.b-message-view-wrapper');
 		if (!el.requestFullscreen && el.webkitRequestFullscreen) {
 			el.requestFullscreen = el.webkitRequestFullscreen;
 			event = 'webkit'+event;

snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html

@@ -23,8 +23,7 @@
 			</div>
 		</div>
 	</div>
-	<div class="b-content b-message-view-wrapper">
+	<div class="b-content">
-		<div style="height: 100%">
 		<div class="b-message-view-backdrop" data-bind="visible: moveAction">
 			<div class="backdrop-message">
 				<i class="fontastic">📁</i>
@@ -158,7 +157,7 @@
 			</div>
 		</div>
 
-			<div data-bind="visible: message">
+		<div class="b-message" data-bind="visible: message">
 			<div class="messageItemHeader" data-bind="css: {'emptySubject': '' === viewSubject()}">
 				<div class="subjectParent">
 					<button class="close" data-bind="command: closeMessageCommand" style="margin-top: -2px;">×</button>
@@ -241,7 +240,7 @@
 				</div>
 				<div class="hasVirus" data-bind="visible: hasVirus()" data-i18n="MESSAGE/HAS_VIRUS_WARNING"></div>
 			</div>
-				<div class="messageItem" data-bind="css: viewLineAsCss(), attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">
+			<div class="messageItem" data-bind="css: viewLineAsCss()">
 				<div tabindex="0" data-bind="hasfocus: messageDomFocused">
 
 					<div>
@@ -318,5 +317,4 @@
 			</div>
 		</div>
 	</div>
-	</div>
 </div>

snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html

@@ -153,7 +153,7 @@
 			</table>
 		</div>
 
-		<div class="attachmentAreaParent b-content" data-bind="visible: attachmentsPlace">
+		<div class="attachmentAreaParent" data-bind="visible: attachmentsPlace">
 			<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled() && dragAndDropVisible(), initDom: composeUploaderDropPlace, css: {'dragAndDropOver': dragAndDropOver}"
 				data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
 			<ul class="attachmentList" data-bind="foreach: attachments">

snappymail/v/0.0.0/themes/SquaresDark/styles.css

@@ -71,15 +71,11 @@
 	border-top-color: var(--main-color);
 }
 
-.messageList .b-message-list-wrapper {
-	border-color: #555;
-}
-
 .well,
 .modal,
 .b-settins-right .b-content,
-.messageList .b-content,
+.messageList,
-.messageView .b-content,
+.messageView,
 .b-admin-right .b-content,
 .b-compose .b-attachment-place {
 	background-color: #000;