Embed boot.min.js and boot.min.css into index.html for fast response

README.md

@@ -51,6 +51,7 @@ This fork has the following changes:
 * Removed Sentry (Application Monitoring and Error Tracking Software)
 * Replaced gulp-uglify with gulp-terser
 * CRLF => LF line endings
+* Embed boot.js and boot.css into index.html
 * Ongoing removal of old JavaScript code (things are native these days)
 
 ### Removal of old JavaScript
@@ -86,23 +87,23 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill
 
 |js/*       	|1.14.0 	|native 	|
 |-----------	|--------:	|--------:	|
-|admin.js    	|2.130.942	|  938.738	|
+|admin.js    	|2.130.942	|  938.371	|
-|app.js      	|4.184.455	|2.556.224	|
+|app.js      	|4.184.455	|2.556.162	|
-|boot.js     	|  671.522	|    7.265	|
+|boot.js     	|  671.522	|    5.889	|
 |libs.js     	|  647.614	|  312.343	|
 |polyfills.js	|  325.834	|        0	|
-|TOTAL      	|7.960.367	|3.814.570	|
+|TOTAL      	|7.960.367	|3.812.765	|
 
 |js/min/*       	|1.14.0   	|native   	|gzip 1.14	|gzip   	|brotli   	|
 |---------------	|--------:	|--------:	|--------:	|--------:	|--------:	|
-|admin.min.js    	|  252.147	|  128.761	| 73.657	| 37.546	| 32.178	|
+|admin.min.js    	|  252.147	|  128.725	| 73.657	| 37.530	| 32.194	|
-|app.min.js      	|  511.202	|  349.280	|140.462	| 91.746	| 73.635	|
+|app.min.js      	|  511.202	|  349.257	|140.462	| 91.739	| 73.672	|
-|boot.min.js     	|   66.007	|    4.258	| 22.567	|  1.946	|  1.648	|
+|boot.min.js     	|   66.007	|    3.207	| 22.567	|  1.598	|  1.369	|
 |libs.min.js     	|  572.545	|  295.754	|176.720	| 91.521	| 80.871	|
 |polyfills.min.js	|   32.452	|        0	| 11.312	|      0	|      0	|
-|TOTAL          	|1.434.353	|  778.053	|424.718	|222.759	|188.332	|
+|TOTAL          	|1.434.353	|  776.943	|424.718	|222.388	|188.106	|
 
-655.728 bytes (201.830 gzip) is not much, but it feels faster.
+657.410 bytes (202.330 gzip) is not much, but it feels faster.
 
 ### CSS changes
 
@@ -127,8 +128,10 @@ Things might work in Edge 18, Firefox 50-62 and Chrome 54-68 due to one polyfill
 
 |css/*       	|1.14.0   	|native   	|gzip 1.14	|gzip   	|brotli   	|
 |--------------	|-------:	|-------:	|------:	|------:	|------:	|
-|app.css    	| 340.334	| 255.729	| 46,959	| 36.948	| 31.049	|
+|app.css    	| 340.334	| 252.797	| 46,959	| 36.394	| 30.615	|
-|app.min.css	| 274.791	| 208.793	| 39,618	| 32.238	| 27.339	|
+|app.min.css	| 274.791	| 206.474	| 39.618	| 32.238	| 27.339	|
+|boot.css    	|       	|   2.538	|       	|    837	|    668	|
+|boot.min.css	|       	|   2.055	|       	|    732	|    560	|
 
 
 ### PHP73 branch

dev/App/Admin.js

@@ -93,14 +93,10 @@ class AdminApp extends AbstractApp {
 		});
 	}
 
-	bootend(bootendCallback = null) {
+	bootend() {
 		if (window.progressJs) {
 			progressJs.end();
 		}
-
-		if (bootendCallback) {
-			bootendCallback();
-		}
 	}
 
 	bootstart() {

dev/Knoin/Knoin.js

@@ -32,7 +32,7 @@ export const ViewType = {
  * @returns {void}
  */
 export function hideLoading() {
-	qs('#rl-content').classList.add('rl-content-show');
+	qs('#rl-content').hidden = false;
 	qs('#rl-loading').remove();
 }
 

dev/Styles/@Boot.css

@@ -10,10 +10,6 @@ body {
 	color: #333;
 }
 
-#rl-content, #rl-loading-error {
-    display: none;
-}
-
 #rl-loading, #rl-loading-error {
 	font-size: 30px;
 	line-height: 130%;

dev/Styles/Layout.less

@@ -419,10 +419,6 @@ html.rl-ctrl-key-pressed {
 	}
 }
 
-.rl-content-show {
-	display: block !important;
-}
-
 html.rl-mobile .hide-on-mobile {
 	display: none !important;
 }

dev/boot.js

@@ -2,7 +2,7 @@
 (win => {
 
 const
-	doc = win.document,
+	doc = document,
 	app = doc.getElementById('rl-app'),
 	options = app && app.dataset.boot && JSON.parse(app.dataset.boot) || {},
 
@@ -17,7 +17,7 @@ const
 			const cookieName = encodeURIComponent(name+('session' === type ? win.name || (win.name = Date.now()) : ''));
 
 			// initialise if there's already data
-			let data = document.cookie.match('(^|;) ?'+cookieName+'=([^;]*)(;|$)');
+			let data = doc.cookie.match('(^|;) ?'+cookieName+'=([^;]*)(;|$)');
 			data = data ? decodeURIComponent(data[2]) : null;
 			data = data ? JSON.parse(data) : {};
 
@@ -25,7 +25,7 @@ const
 				getItem: key => data[key] === undefined ? null : data[key],
 				setItem: function (key, value) {
 					data[key] = ''+value; // forces the value to a string
-					document.cookie = cookieName+'='+encodeURIComponent(JSON.stringify(data))
+					doc.cookie = cookieName+'='+encodeURIComponent(JSON.stringify(data))
 						+"; expires="+('local' === type ? (new Date(Date.now()+(365*24*60*60*1000))).toGMTString() : '')
 						+"; path=/; samesite=strict";
 				}
@@ -40,17 +40,8 @@ const
 	setTimestamp = () => storage().setItem(TIME_KEY, timestamp()),
 
 	showError = () => {
-		const oR = doc.getElementById('rl-loading'),
+		doc.getElementById('rl-loading').hidden = true;
-			oL = doc.getElementById('rl-loading-error');
+		doc.getElementById('rl-loading-error').hidden = false;
-
-		if (oR) {
-			oR.style.display = 'none';
-		}
-
-		if (oL) {
-			oL.style.display = 'block';
-		}
-
 		p.end();
 	},
 
@@ -104,11 +95,6 @@ let container = doc.querySelector('.progressjs'),
 
 	RL_APP_DATA_STORAGE = {};
 
-p.set(1);
-
-Storage('local');
-Storage('session');
-
 win.rl = {
 	hash: {
 		// getHash
@@ -150,13 +136,10 @@ win.rl = {
 		if (RL_APP_DATA_STORAGE.Title) {
 			title += (title ? ' - ' : '') + RL_APP_DATA_STORAGE.Title;
 		}
-		document.title = null == title ? '' : '' + title;
+		doc.title = null == title ? '' : '' + title;
 	}
 };
 
-// init section
-setInterval(setTimestamp, 60000); // 1m
-
 /**
  * @param {mixed} appData
  * @returns {void}
@@ -229,13 +212,20 @@ win.__initAppData = appData => {
 	}
 };
 
-if (app) {
+p.set(1);
-	['app-css','app-theme-link'].forEach(css => {
+
+Storage('local');
+Storage('session');
+
+// init section
+setInterval(setTimestamp, 60000); // 1m
+
+['app-css','app-theme-link'].forEach(css => {
 	css = doc.getElementById(css);
 	css.href = css.dataset.href;
-	});
+});
 
-	loadScript('./?/'
+loadScript('./?/'
 	+ (options.admin ? 'Admin' : '')
 	+ 'AppData@'
 	+ (options.mobile ? 'mobile' : 'no-mobile')
@@ -245,6 +235,5 @@ if (app) {
 	+ '/'
 	+ Math.random().toString().substr(2)
 	+ '/').then(() => {});
-}
 
 })(this);

rainloop/v/0.0.0/app/libraries/RainLoop/Service.php

@@ -234,15 +234,17 @@ class Service
 
 		list($sLanguage, $sTheme) = $this->oActions->GetLanguageAndTheme($bAdmin, $bMobile);
 
-		$bAppJsDebug = !!$this->oActions->Config()->Get('labs', 'use_app_debug_js', false);
+		$oConfig = $this->oActions->Config();
-		$bAppCssDebug = !!$this->oActions->Config()->Get('labs', 'use_app_debug_css', false);
 
-		$sFaviconUrl = (string) $this->oActions->Config()->Get('webmail', 'favicon_url', '');
+		$bAppJsDebug = !!$oConfig->Get('labs', 'use_app_debug_js', false);
+		$bAppCssDebug = !!$oConfig->Get('labs', 'use_app_debug_css', false);
+
+		$sFaviconUrl = (string) $oConfig->Get('webmail', 'favicon_url', '');
 
 		$sFaviconPngLink = $sFaviconUrl ? $sFaviconUrl : $this->staticPath('apple-touch-icon.png');
 		$sAppleTouchLink = $sFaviconUrl ? '' : $this->staticPath('apple-touch-icon.png');
 
-		$LoadingDescription = $this->oActions->Config()->Get('webmail', 'loading_description', 'RainLoop');
+		$LoadingDescription = $oConfig->Get('webmail', 'loading_description', 'RainLoop');
 
 		$aTemplateParameters = array(
 			'{{BaseAppHeadScriptLink}}' => '',
@@ -253,11 +255,12 @@ class Service
 			'{{BaseAppThemeCssLink}}' => $this->oActions->ThemeLink($sTheme, $bAdmin),
 			'{{BaseAppPolyfillsScriptLink}}' => '',
 			'{{BaseAppBootScriptLink}}' => $this->staticPath('js/'.($bAppJsDebug ? '' : 'min/').'boot'.($bAppJsDebug ? '' : '.min').'.js'),
+			'{{BaseAppBootScript}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/js/min/boot.min.js'),
 			'{{BaseViewport}}' => $bMobile ? 'width=device-width,initial-scale=1,user-scalable=no' : 'width=950,maximum-scale=2',
 			'{{BaseContentSecurityPolicy}}' => '',
 			'{{BaseDir}}' => false && \in_array($sLanguage, array('ar', 'he', 'ur')) ? 'rtl' : 'ltr',
 			'{{BaseAppManifestLink}}' => $this->staticPath('manifest.json'),
-			'{{BaseAppBootCss}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/css/boot'.($bAppCssDebug ? '' : '.min').'.css'),
+			'{{BaseAppBootCss}}' => \file_get_contents(APP_VERSION_ROOT_PATH.'static/css/boot.min.css'),
 			'{{LoadingDescriptionEsc}}' => \htmlspecialchars($LoadingDescription, ENT_QUOTES|ENT_IGNORE, 'UTF-8')
 		);
 
@@ -272,7 +275,7 @@ class Service
 		$aTemplateParameters['{{BaseHash}}'] = \md5(
 			\implode('~', array(
 				$bAdmin ? '1' : '0',
-				\md5($this->oActions->Config()->Get('cache', 'index', '')),
+				\md5($oConfig->Get('cache', 'index', '')),
 				$this->oActions->Plugins()->Hash(),
 				Utils::WebVersionPath(),
 				APP_VERSION,

rainloop/v/0.0.0/app/templates/Index.html

@@ -13,7 +13,7 @@
 	<title></title>
 	{{BaseAppFaviconPngLinkTag}}
 	{{BaseAppFaviconTouchLinkTag}}
-	<style>{{BaseAppBootCss}}</style>
+	<style id="app-boot-css">{{BaseAppBootCss}}</style>
 	<link type="text/css" rel="stylesheet" data-href="{{BaseAppMainCssLink}}" id="app-css" />
 	<link type="text/css" rel="stylesheet" data-href="{{BaseAppThemeCssLink}}" id="app-theme-link" />
 	<link rel="manifest" href="{{BaseAppManifestLink}}" />
@@ -29,8 +29,8 @@
 				<div class="e-bounce bounce3"></div>
 			</div>
 		</div>
-		<div id="rl-loading-error" class="thm-loading">An error occurred.<br/>Please refresh the page and try again.</div>
+		<div id="rl-loading-error" class="thm-loading" hidden="">An error occurred.<br/>Please refresh the page and try again.</div>
-		<div id="rl-content">
+		<div id="rl-content" hidden="">
 			<div id="rl-popups"></div>
 			<div id="rl-center">
 				<div id="rl-top"></div>
@@ -43,7 +43,7 @@
 	</div>
 	<div id="rl-check"></div>
 	<div class="progressjs"><div class="progressjs-inner"><div class="progressjs-percent"></div></div></div>
-	<script type="text/javascript" data-cfasync="false" src="{{BaseAppBootScriptLink}}"></script>
+	<script type="text/javascript">{{BaseAppBootScript}}</script>
 </body>
 
 </html>