Added: support for real Fullscreen

dev/Styles/MessageView.less

@@ -217,7 +217,7 @@
 			border-radius: @rlLowBorderRadius;
 			scroll-behavior: smooth;
 
-			.buttonUnFull, .buttonFull {
+			.buttonFull {
 				display: inline-block;
 				position: fixed;
 				right: 25px;
@@ -244,10 +244,6 @@
 				}
 			}
 
-			.buttonUnFull {
-				display: none;
-			}
-
 			.loading {
 				text-align: center;
 				font-size: 24px;
@@ -625,12 +621,3 @@ html:not(.rl-mobile) .messageItem {
 		display: none !important;
 	}
 }
-
-html.rl-message-fullscreen .messageItem {
-	.buttonUnFull {
-		display: inline-block !important;
-	}
-	.buttonFull {
-		display: none !important;
-	}
-}

dev/View/User/MailBox/MessageView.js

@@ -15,7 +15,7 @@ import {
 	MessageSetAction
 } from 'Common/EnumsUser';
 
-import { $htmlCL, leftPanelDisabled, keyScopeReal, moveAction, Settings } from 'Common/Globals';
+import { doc, $htmlCL, leftPanelDisabled, keyScopeReal, moveAction, Settings } from 'Common/Globals';
 
 import { inFocus } from 'Common/Utils';
 import { mailToHelper } from 'Common/UtilsUser';
@@ -253,7 +253,13 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
 				}
 			},
 
-			fullScreenMode: value => $htmlCL.toggle('rl-message-fullscreen', value)
+			fullScreenMode: value => {
+				if (this.oContent) {
+					value ? this.oContent.requestFullscreen() : doc.exitFullscreen();
+				} else {
+					$htmlCL.toggle('rl-message-fullscreen', value);
+				}
+			}
 		});
 
 		MessageStore.messageViewTrigger.subscribe(() => {
@@ -319,14 +325,6 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
 		return color;
 	}
 
-	fullScreen() {
-		this.fullScreenMode(true);
-	}
-
-	unFullScreen() {
-		this.fullScreenMode(false);
-	}
-
 	toggleFullScreen() {
 		try {
 			getSelection().removeAllRanges();
@@ -403,16 +401,33 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
 
 		this.showFullInfo.subscribe(value => Local.set(ClientSideKeyName.MessageHeaderFullInfo, value ? '1' : '0'));
 
-		this.oHeaderDom = dom.querySelector('.messageItemHeader');
+		let el = dom.querySelector('.messageItemHeader');
-		if (this.oHeaderDom) {
+		this.oHeaderDom = el;
+		if (el) {
 			if (!this.resizeObserver) {
 				this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.debounce(50).bind(this));
 			}
-			this.resizeObserver.observe(this.oHeaderDom);
+			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;
+		}
+		if (el.requestFullscreen) {
+			if (!doc.exitFullscreen && doc.webkitExitFullscreen) {
+				doc.exitFullscreen = doc.webkitExitFullscreen;
+			}
+			this.oContent = el;
+			el.addEventListener(event, () =>
+				this.fullScreenMode((doc.fullscreenElement || doc.webkitFullscreenElement) === el)
+			);
+		}
+
 		const eqs = (ev, s) => ev.target.closestWithin(s, dom);
 		dom.addEventListener('click', event => {
 			ThemeStore.isMobile() && leftPanelDisabled(true);

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

@@ -237,11 +237,8 @@
 							<div class="content-wrapper">
 
 								<div>
-									<span class="buttonFull" data-bind="click: fullScreen">
+									<span class="buttonFull" data-bind="click: toggleFullScreen">
-										<i class="icon-arrows-out"></i>
+										<i data-bind="css: { 'icon-arrows-out': !fullScreenMode(), 'icon-arrows-in': fullScreenMode }"></i>
-									</span>
-									<span class="buttonUnFull" data-bind="click: unFullScreen">
-										<i class="icon-arrows-in"></i>
 									</span>
 
 									<div class="line-loading e-strip-animation" data-bind="visible: messageLoadingThrottle()"></div>