Resolve #298

dev/Common/Globals.js

@@ -11,8 +11,12 @@ export const
 
 	elementById = id => doc.getElementById(id),
 
-	exitFullscreen = () => getFullscreenElement() && (doc.exitFullscreen || doc.webkitExitFullscreen).call(doc),
+	// Fullscreen must be on app, else other popups fail
-	getFullscreenElement = () => doc.fullscreenElement || doc.webkitFullscreenElement,
+	app = doc.getElementById('rl-app'),
+	appFullscreen = () => (doc.fullscreenElement || doc.webkitFullscreenElement) === app,
+	exitFullscreen = () => appFullscreen() && (doc.exitFullscreen || doc.webkitExitFullscreen).call(doc),
+	isFullscreen = ko.observable(false),
+	toggleFullscreen = () => isFullscreen() ? exitFullscreen() : app.requestFullscreen(),
 
 	Settings = rl.settings,
 	SettingsGet = Settings.get,
@@ -61,6 +65,20 @@ export const
 		shortcuts.setScope(value);
 	};
 
+if (app) {
+	let event = 'fullscreenchange';
+	if (!app.requestFullscreen && app.webkitRequestFullscreen) {
+		app.requestFullscreen = app.webkitRequestFullscreen;
+		event = 'webkit'+event;
+	}
+	if (app.requestFullscreen) {
+		doc.addEventListener(event, () => {
+			isFullscreen(appFullscreen());
+			$htmlCL.toggle('rl-fullscreen', appFullscreen());
+		});
+	}
+}
+
 dropdownVisibility.subscribe(value => {
 	if (value) {
 		keyScope(ScopeMenu);

dev/Common/UtilsUser.js

@@ -172,19 +172,6 @@ showMessageComposer = (params = []) =>
 	rl.app.showMessageComposer(params);
 },
 
-initFullscreen = (el, fn) =>
-{
-	let event = 'fullscreenchange';
-	if (!el.requestFullscreen && el.webkitRequestFullscreen) {
-		el.requestFullscreen = el.webkitRequestFullscreen;
-		event = 'webkit'+event;
-	}
-	if (el.requestFullscreen) {
-		el.addEventListener(event, fn);
-		return el;
-	}
-},
-
 setLayoutResizer = (source, target, sClientSideKeyName, mode) =>
 {
 	if (source.layoutResizer && source.layoutResizer.mode != mode) {

dev/Stores/User/Message.js

@@ -1,5 +1,5 @@
 import { Scope } from 'Common/Enums';
-import { elementById } from 'Common/Globals';
+import { elementById, exitFullscreen } from 'Common/Globals';
 import { addObservablesTo, addSubscribablesTo } from 'External/ko';
 
 import { AppUserStore } from 'Stores/User/App';
@@ -12,7 +12,6 @@ export const MessageUserStore = new class {
 			message: null,
 			error: '',
 			loading: false,
-			fullScreen: false,
 
 			// Cache mail bodies
 			bodiesDom: null,
@@ -31,8 +30,7 @@ export const MessageUserStore = new class {
 					}
 				} else {
 					AppUserStore.focusedState(Scope.MessageList);
-
+					exitFullscreen();
-					this.fullScreen(false);
 					this.hideMessageBodies();
 				}
 			},
@@ -41,10 +39,6 @@ export const MessageUserStore = new class {
 		this.purgeMessageBodyCache = this.purgeMessageBodyCache.throttle(30000);
 	}
 
-	toggleFullScreen() {
-		MessageUserStore.fullScreen(!MessageUserStore.fullScreen());
-	}
-
 	purgeMessageBodyCache() {
 		const messagesDom = this.bodiesDom(),
 			children = messagesDom && messagesDom.children;

dev/Styles/User/Layout.less

@@ -26,17 +26,6 @@
 	left: @rlLeftWidth;
 }
 
-html.rl-mobile {
-
-	&:not(.rl-left-panel-disabled) #rl-right {
-		right: -150px;
-	}
-
-	&.rl-left-panel-disabled #rl-right {
-		left: 5px !important;
-	}
-}
-
 /*
 .resizable::after {
 	background-color: #aaa;
@@ -255,7 +244,7 @@ html.rl-left-panel-disabled {
 	}
 
 	#rl-right {
-		left: 60px !important;
+		left: 60px;
 	}
 }
 
@@ -313,3 +302,14 @@ html:not(.rl-mobile) .show-mobile {
 		}
 	}
 }
+
+html.rl-mobile {
+
+	&:not(.rl-left-panel-disabled) #rl-right {
+		right: -150px;
+	}
+
+	&.rl-left-panel-disabled #rl-right {
+		left: 5px;
+	}
+}

dev/Styles/User/MessageView.less

@@ -234,8 +234,8 @@ html.rl-no-preview-pane {
 	.buttonFull {
 		display: inline-block;
 		position: fixed;
-		right: 25px;
+		right: 8px;
-		bottom: 25px;
+		bottom: 8px;
 		height: 30px;
 		width: 30px;
 		text-align: center;
@@ -483,13 +483,15 @@ html.rl-bottom-preview-pane .messageView {
 	}
 }
 
-html.rl-message-fullscreen {
+html.rl-fullscreen {
 
 	#rl-left {
 		display: none !important;
 	}
 
 	#rl-right {
+		left: 0 !important;
+
 		#V-MailMessageList,
 		#V-SettingsPane,
 		#V-SystemDropDown,
@@ -498,15 +500,21 @@ html.rl-message-fullscreen {
 		}
 	}
 
+	#V-SystemDropDown,
+	.messageView .top-toolbar {
+		display: none;
+	}
+
+	.messageView {
+		border: 0;
+	}
+
 	.messageView .b-content {
-		position: fixed !important;
+		position: fixed;
-		margin: 5px !important;
+		top: 0;
-		top: 0 !important;
+		right: 0;
-		left: 0 !important;
+		bottom: 0;
-		right: 0 !important;
+		border: 0;
-		bottom: 0 !important;
-		z-index: 10000 !important;
-		border: 1px solid @rlMainDarkColor  !important;
 	}
 }
 

dev/View/Popup/Compose.js

@@ -12,7 +12,6 @@ import {
 } from 'Common/EnumsUser';
 
 import { pInt, isArray, arrayLength, forEachObjectEntry } from 'Common/Utils';
-import { initFullscreen } from 'Common/UtilsUser';
 import { encodeHtml, HtmlEditor, htmlToPlain } from 'Common/Html';
 import { koArrayWithDestroy } from 'External/ko';
 
@@ -21,7 +20,7 @@ import { messagesDeleteHelper } from 'Common/Folders';
 import { serverRequest } from 'Common/Links';
 import { i18n, getNotification, getUploadErrorDescByCode, timestampToString } from 'Common/Translator';
 import { MessageFlagsCache, setFolderHash } from 'Common/Cache';
-import { doc, Settings, SettingsGet, getFullscreenElement, exitFullscreen, elementById, addShortcut } from 'Common/Globals';
+import { Settings, SettingsGet, elementById, addShortcut/*, exitFullscreen, isFullscreen, toggleFullscreen*/ } from 'Common/Globals';
 
 import { AppUserStore } from 'Stores/User/App';
 import { SettingsUserStore } from 'Stores/User/Settings';
@@ -45,9 +44,11 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 import { FolderSystemPopupView } from 'View/Popup/FolderSystem';
 import { AskPopupView } from 'View/Popup/Ask';
 import { ContactsPopupView } from 'View/Popup/Contacts';
-
+/*
 import { ThemeStore } from 'Stores/Theme';
 
+let alreadyFullscreen;
+*/
 const
 	ScopeCompose = 'Compose',
 
@@ -766,7 +767,7 @@ export class ComposePopupView extends AbstractViewPopup {
 
 		this.to.focused(false);
 
-		(getFullscreenElement() === this.oContent) && exitFullscreen();
+//		alreadyFullscreen || exitFullscreen();
 	}
 
 	dropMailvelope() {
@@ -856,8 +857,9 @@ export class ComposePopupView extends AbstractViewPopup {
 			this.initOnShow(type, oMessageOrArray, aToEmails, aCcEmails, aBccEmails, sCustomSubject, sCustomPlainText);
 		}
 
-//		(navigator.standalone || matchMedia('(display-mode: standalone)').matches || matchMedia('(display-mode: fullscreen)').matches) &&
+		// Chrome bug #298
-		ThemeStore.isMobile() && this.oContent.requestFullscreen && this.oContent.requestFullscreen();
+//		alreadyFullscreen = isFullscreen();
+//		alreadyFullscreen || (ThemeStore.isMobile() && toggleFullscreen());
 	}
 
 	/**
@@ -1350,15 +1352,6 @@ export class ComposePopupView extends AbstractViewPopup {
 		});
 
 		this.editor(editor => editor[this.isPlainEditor()?'modePlain':'modeWysiwyg']());
-
-		// Fullscreen must be on app, else other popups fail
-		const el = doc.getElementById('rl-app');
-		this.oContent = initFullscreen(el, () =>
-			ThemeStore.isMobile()
-			&& this.modalVisible()
-			&& (getFullscreenElement() !== el)
-			&& this.skipCommand()
-		);
 	}
 
 	/**

dev/View/User/MailBox/MessageList.js

@@ -9,7 +9,8 @@ import { UNUSED_OPTION_VALUE } from 'Common/Consts';
 import { doc, leftPanelDisabled, moveAction,
 	Settings, SettingsCapa, SettingsGet,
 	addEventsListeners,
-	addShortcut, registerShortcut, formFieldFocused
+	addShortcut, registerShortcut, formFieldFocused,
+	isFullscreen, toggleFullscreen
 } from 'Common/Globals';
 
 import { computedPaginatorHelper, showMessageComposer, populateMessageBody } from 'Common/UtilsUser';
@@ -699,7 +700,7 @@ export class MailMessageList extends AbstractViewRight {
 				return false;
 			}
 			if (MessageUserStore.message() && this.useAutoSelect()) {
-				MessageUserStore.toggleFullScreen();
+				isFullscreen() || toggleFullscreen();
 				return false;
 			}
 		});

dev/View/User/MailBox/MessageView.js

@@ -16,21 +16,19 @@ import {
 
 import {
 	elementById,
-	$htmlCL,
 	leftPanelDisabled,
 	keyScopeReal,
 	moveAction,
 	Settings,
 	SettingsCapa,
-	getFullscreenElement,
-	exitFullscreen,
 	fireEvent,
 	addShortcut,
-	registerShortcut
+	registerShortcut,
+	isFullscreen, exitFullscreen, toggleFullscreen
 } from 'Common/Globals';
 
 import { arrayLength } from 'Common/Utils';
-import { download, mailToHelper, showMessageComposer, initFullscreen } from 'Common/UtilsUser';
+import { download, mailToHelper, showMessageComposer } from 'Common/UtilsUser';
 
 import { SMAudio } from 'Common/Audio';
 
@@ -120,8 +118,8 @@ export class MailMessageView extends AbstractViewRight {
 		this.messagesBodiesDom = MessageUserStore.bodiesDom;
 		this.messageError = MessageUserStore.error;
 
-		this.fullScreenMode = MessageUserStore.fullScreen;
+		this.fullScreenMode = isFullscreen;
-		this.toggleFullScreen = MessageUserStore.toggleFullScreen;
+		this.toggleFullScreen = toggleFullscreen;
 
 		this.messageListOfThreadsLoading = ko.observable(false).extend({ rateLimit: 1 });
 		this.highlightUnselectedAttachments = ko.observable(false).extend({ falseTimeout: 2000 });
@@ -215,15 +213,6 @@ export class MailMessageView extends AbstractViewRight {
 				}
 			},
 
-			fullScreenMode: value => {
-				value && currentMessage() && AppUserStore.focusedState(Scope.MessageView);
-				if (this.oContent) {
-					value ? this.oContent.requestFullscreen() : exitFullscreen();
-				} else {
-					$htmlCL.toggle('rl-message-fullscreen', value);
-				}
-			},
-
 			showFullInfo: value => Local.set(ClientSideKeyNameMessageHeaderFullInfo, value ? '1' : '0')
 		});
 
@@ -281,9 +270,6 @@ export class MailMessageView extends AbstractViewRight {
 	}
 
 	onBuild(dom) {
-		const el = dom.querySelector('.b-content');
-		this.oContent = initFullscreen(el, () => MessageUserStore.fullScreen(getFullscreenElement() === el));
-
 		const eqs = (ev, s) => ev.target.closestWithin(s, dom);
 		dom.addEventListener('click', event => {
 			ThemeStore.isMobile() && leftPanelDisabled(true);
@@ -351,9 +337,8 @@ export class MailMessageView extends AbstractViewRight {
 		addShortcut('escape', '', Scope.MessageView, () => {
 			if (!this.viewModelDom.hidden && currentMessage()) {
 				const preview = SettingsUserStore.usePreviewPane();
-				if (MessageUserStore.fullScreen()) {
+				if (isFullscreen()) {
-					MessageUserStore.fullScreen(false);
+					exitFullscreen();
-
 					if (preview) {
 						AppUserStore.focusedState(Scope.MessageList);
 					}
@@ -369,7 +354,7 @@ export class MailMessageView extends AbstractViewRight {
 
 		// fullscreen
 		addShortcut('enter,open', '', Scope.MessageView, () => {
-			MessageUserStore.toggleFullScreen();
+			isFullscreen() || toggleFullscreen();
 			return false;
 		});
 
@@ -449,14 +434,14 @@ export class MailMessageView extends AbstractViewRight {
 
 		// change focused state
 		addShortcut('arrowleft', '', Scope.MessageView, () => {
-			if (!MessageUserStore.fullScreen() && currentMessage() && SettingsUserStore.usePreviewPane()
+			if (!isFullscreen() && currentMessage() && SettingsUserStore.usePreviewPane()
 			 && !oMessageScrollerDom().scrollLeft) {
 				AppUserStore.focusedState(Scope.MessageList);
 				return false;
 			}
 		});
 		addShortcut('tab', 'shift', Scope.MessageView, () => {
-			if (!MessageUserStore.fullScreen() && currentMessage() && SettingsUserStore.usePreviewPane()) {
+			if (!isFullscreen() && currentMessage() && SettingsUserStore.usePreviewPane()) {
 				AppUserStore.focusedState(Scope.MessageList);
 			}
 			return false;

dev/View/User/SystemDropDown.js

@@ -1,6 +1,5 @@
 import { AppUserStore } from 'Stores/User/App';
 import { AccountUserStore } from 'Stores/User/Account';
-import { MessageUserStore } from 'Stores/User/Message';
 //import { FolderUserStore } from 'Stores/User/Folder';
 
 import { Scope } from 'Common/Enums';
@@ -126,7 +125,7 @@ export class SystemDropDownUserView extends AbstractViewRight {
 	onBuild() {
 		registerShortcut('m', '', [Scope.MessageList, Scope.MessageView, Scope.Settings], () => {
 			if (!this.viewModelDom.hidden) {
-				MessageUserStore.fullScreen(false);
+//				exitFullscreen();
 				this.accountMenuDropdownTrigger(true);
 				return false;
 			}