From b3341169fc8c3362d941321b0f64a58c2dd99229 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 11 Oct 2017 17:45:14 +0200
Subject: [PATCH] Optimized JavaScript activity in background tabs

---
 .../WoltLabSuite/Core/Date/Time/Relative.js   | 29 ++++++++++++++++++-
 .../WoltLabSuite/Core/Ui/Redactor/Autosave.js | 25 ++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Time/Relative.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Time/Relative.js
index 6e7355d269..7d1cc8bfaa 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Time/Relative.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Time/Relative.js
@@ -10,6 +10,8 @@ define(['Dom/ChangeListener', 'Language', 'WoltLabSuite/Core/Date/Util', 'WoltLa
 	"use strict";
 	
 	var _elements = elByTag('time');
+	var _isActive = true;
+	var _isPending = false;
 	var _offset = null;
 	
 	/**
@@ -25,12 +27,37 @@ define(['Dom/ChangeListener', 'Language', 'WoltLabSuite/Core/Date/Util', 'WoltLa
 			new Repeating(this._refresh.bind(this), 60000);
 			
 			DomChangeListener.add('WoltLabSuite/Core/Date/Time/Relative', this._refresh.bind(this));
+			
+			document.addEventListener('visibilitychange', this._onVisibilityChange.bind(this));
+		},
+		
+		_onVisibilityChange: function () {
+			if (document.hidden) {
+				_isActive = false;
+				_isPending = false;
+			}
+			else {
+				_isActive = true;
+				
+				// force immediate refresh
+				if (_isPending) {
+					this._refresh();
+					_isPending = false;
+				}
+			}
 		},
 		
 		_refresh: function() {
+			// activity is suspended while the tab is hidden, but force an
+			// immediate refresh once the page is active again
+			if (!_isActive) {
+				if (!_isPending) _isPending = true;
+				return;
+			}
+			
 			var date = new Date();
 			var timestamp = (date.getTime() - date.getMilliseconds()) / 1000;
-			if (_offset === null) _offset = timestamp - TIME_NOW;
+			if (_offset === null) _offset = timestamp - window.TIME_NOW;
 			
 			for (var i = 0, length = _elements.length; i < length; i++) {
 				var element = _elements[i];
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js
index c0fe0a815d..5962535659 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js
@@ -46,6 +46,8 @@ define(['Core', 'Devtools', 'EventHandler', 'Language', 'Dom/Traverse', './Metac
 			this._metaData = {};
 			this._editor = null;
 			this._element = element;
+			this._isActive = true;
+			this._isPending = false;
 			this._key = Core.getStoragePrefix() + elData(this._element, 'autosave');
 			this._lastMessage = '';
 			this._originalMessage = '';
@@ -74,6 +76,19 @@ define(['Core', 'Devtools', 'EventHandler', 'Language', 'Dom/Traverse', './Metac
 			
 			// clear editor content on reset
 			EventHandler.add('com.woltlab.wcf.redactor2', 'reset_' + this._element.id, this.hideOverlay.bind(this));
+			
+			document.addEventListener('visibilitychange', this._onVisibilityChange.bind(this));
+		},
+		
+		_onVisibilityChange: function () {
+			if (document.hidden) {
+				this._isActive = false;
+				this._isPending = true;
+			}
+			else {
+				this._isActive = true;
+				this._isPending = false;
+			}
 		},
 		
 		/**
@@ -146,6 +161,8 @@ define(['Core', 'Devtools', 'EventHandler', 'Language', 'Dom/Traverse', './Metac
 			this._timer = window.setInterval(this._saveToStorage.bind(this), _frequency * 1000);
 			
 			this._saveToStorage();
+			
+			this._isPending = false;
 		},
 		
 		/**
@@ -158,6 +175,7 @@ define(['Core', 'Devtools', 'EventHandler', 'Language', 'Dom/Traverse', './Metac
 			
 			window.clearInterval(this._timer);
 			this._timer = null;
+			this._isPending = false;
 		},
 		
 		/**
@@ -260,6 +278,13 @@ define(['Core', 'Devtools', 'EventHandler', 'Language', 'Dom/Traverse', './Metac
 		 * @protected
 		 */
 		_saveToStorage: function() {
+			if (!this._isActive) {
+				if (!this._isPending) return;
+				
+				// save one last time before suspending
+				this._isPending = false;
+			}
+			
 			//noinspection JSUnresolvedVariable
 			if (window.ENABLE_DEVELOPER_TOOLS && Devtools._internal_.editorAutosave() === false) {
 				//noinspection JSUnresolvedVariable
-- 
2.20.1