added "auto-save on page load or on page unload as fallback" mode

extension/core/bg/config.js

@@ -44,7 +44,9 @@ singlefile.config = (() => {
 		displayStats: false,
 		backgroundSave: true,
 		autoSaveDelay: 1,
-		autoSaveUnload: false
+		autoSaveLoad: false,
+		autoSaveUnload: false,
+		autoSaveLoadOrUnload: true
 	};
 
 	let pendingUpgradePromise;
@@ -119,6 +121,11 @@ singlefile.config = (() => {
 		if (config.autoSaveDelay === undefined) {
 			config.autoSaveDelay = 1;
 		}
+		if (config.autoSaveLoadOrUnload === undefined && !config.autoSaveUnload) {
+			config.autoSaveLoadOrUnload = true;
+			config.autoSaveLoad = false;
+			config.autoSaveUnload = false;
+		}
 		const platformInfo = await browser.runtime.getPlatformInfo();
 		if (platformInfo.os == "android") {
 			config.backgroundSave = false;

extension/core/content/content-autosave-unload.js

@@ -18,24 +18,23 @@
  *   along with SingleFile.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* global browser, window, addEventListener, removeEventListener, document, location, docHelper */
+/* global singlefile, browser, window, addEventListener, removeEventListener, document, location, docHelper */
 
-this.singlefile.autoSave = this.singlefile.autoSave || (async () => {
-
-	let listenerAdded;
-	const [enabled, options] = await Promise.all([browser.runtime.sendMessage({ isAutoSaveUnloadEnabled: true }), browser.runtime.sendMessage({ getConfig: true })]);
-
-	enableAutoSaveUnload(enabled);
+this.singlefile.autoSaveUnload = this.singlefile.autoSaveUnload || (async () => {
 
+	let listenerAdded, saveConfig;
+	refreshAutoSaveUnload();
 	browser.runtime.onMessage.addListener(message => {
 		if (message.autoSaveUnloadEnabled) {
 			refreshAutoSaveUnload();
 		}
 	});
+	return true;
 
 	async function refreshAutoSaveUnload() {
-		const enabled = await browser.runtime.sendMessage({ isAutoSaveUnloadEnabled: true });
-		enableAutoSaveUnload(enabled);
+		const [autoSaveEnabled, config] = await Promise.all([browser.runtime.sendMessage({ isAutoSaveEnabled: true }), browser.runtime.sendMessage({ getConfig: true })]);
+		saveConfig = config;
+		enableAutoSaveUnload(autoSaveEnabled && (config.autoSaveUnload || config.autoSaveLoadOrUnload));
 	}
 
 	function enableAutoSaveUnload(enabled) {
@@ -51,8 +50,10 @@ this.singlefile.autoSave = this.singlefile.autoSave || (async () => {
 	}
 
 	function onUnload() {
-		const docData = docHelper.preProcessDoc(document, window, options);
-		browser.runtime.sendMessage({ processContent: true, content: docHelper.serialize(document), canvasData: docData.canvasData, emptyStyleRulesText: docData.emptyStyleRulesText, url: location.href });
+		if (!singlefile.pageAutoSaved) {
+			const docData = docHelper.preProcessDoc(document, window, saveConfig);
+			browser.runtime.sendMessage({ processContent: true, content: docHelper.serialize(document), canvasData: docData.canvasData, emptyStyleRulesText: docData.emptyStyleRulesText, url: location.href });
+		}
 	}
 
 })();

extension/core/content/content.js

@@ -59,6 +59,9 @@ this.singlefile.top = this.singlefile.top || (() => {
 					console.error(error); // eslint-disable-line no-console
 					browser.runtime.sendMessage({ processError: true, error, options: { autoSave: options.autoSave } });
 				}
+				if (options.autoSave && options.autoSaveLoadOrUnload) {
+					singlefile.pageAutoSaved = true;
+				}
 				if (!options.autoSave) {
 					processing = false;
 				}

extension/ui/bg/options.js

@@ -44,7 +44,9 @@
 	const displayStatsInput = document.getElementById("displayStatsInput");
 	const backgroundSaveInput = document.getElementById("backgroundSaveInput");
 	const autoSaveDelayInput = document.getElementById("autoSaveDelayInput");
+	const autoSaveLoadInput = document.getElementById("autoSaveLoadInput");
 	const autoSaveUnloadInput = document.getElementById("autoSaveUnloadInput");
+	const autoSaveLoadOrUnloadInput = document.getElementById("autoSaveLoadOrUnloadInput");
 	let pendingSave = Promise.resolve();
 	document.getElementById("resetButton").addEventListener("click", async () => {
 		await bgPage.singlefile.config.reset();
@@ -56,6 +58,16 @@
 		autoSaveDelayInput.disabled = autoSaveUnloadInput.checked;
 		await bgPage.singlefile.ui.refreshAutoSaveUnload();
 	}, false);
+	autoSaveLoadOrUnloadInput.addEventListener("click", async () => {
+		autoSaveUnloadInput.disabled = autoSaveLoadInput.disabled = autoSaveLoadOrUnloadInput.checked;
+		if (autoSaveLoadOrUnloadInput.checked) {
+			autoSaveUnloadInput.checked = autoSaveLoadInput.checked = false;
+		} else {
+			autoSaveUnloadInput.checked = false;
+			autoSaveLoadInput.checked = true;
+		}
+		await bgPage.singlefile.ui.refreshAutoSaveUnload();
+	}, false);
 	document.body.onchange = update;
 	refresh();
 
@@ -85,8 +97,12 @@
 		backgroundSaveInput.disabled = config.backgroundSaveDisabled;
 		autoSaveDelayInput.value = config.autoSaveDelay;
 		autoSaveDelayInput.disabled = config.autoSaveDelayDisabled || config.autoSaveUnload;
-		autoSaveUnloadInput.checked = config.autoSaveUnload;
+		autoSaveLoadInput.checked = !config.autoSaveLoadOrUnload && config.autoSaveLoad;
+		autoSaveLoadOrUnloadInput.checked = config.autoSaveLoadOrUnload;
+		autoSaveUnloadInput.checked = !config.autoSaveLoadOrUnload && config.autoSaveUnload;
 		autoSaveUnloadInput.disabled = config.autoSaveUnloadDisabled;
+		autoSaveLoadInput.disabled = config.autoSaveLoadOrUnload;
+		autoSaveUnloadInput.disabled = config.autoSaveUnloadDisabled || config.autoSaveLoadOrUnload;
 	}
 
 	async function update() {
@@ -113,7 +129,9 @@
 			displayStats: displayStatsInput.checked,
 			backgroundSave: backgroundSaveInput.checked,
 			autoSaveDelay: autoSaveDelayInput.value,
-			autoSaveUnload: autoSaveUnloadInput.checked
+			autoSaveLoad: autoSaveLoadInput.checked,
+			autoSaveUnload: autoSaveUnloadInput.checked,
+			autoSaveLoadOrUnload: autoSaveLoadOrUnloadInput.checked
 		});
 		await pendingSave;
 		await bgPage.singlefile.ui.refreshContextMenu();

extension/ui/bg/ui.js

@@ -64,7 +64,7 @@ singlefile.ui = (() => {
 	});
 	browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
 		const [config, tabsData] = await Promise.all([singlefile.config.get(), getPersistentTabsData()]);
-		if (!config.autoSaveUnload && (tabsData.autoSaveAll || (tabsData.autoSaveUnpinned && !tab.pinned) || (tabsData[tab.id] && tabsData[tab.id].autoSave))) {
+		if ((config.autoSaveLoad || config.autoSaveLoadOrUnload) && (tabsData.autoSaveAll || (tabsData.autoSaveUnpinned && !tab.pinned) || (tabsData[tab.id] && tabsData[tab.id].autoSave))) {
 			if (changeInfo.status == "complete") {
 				processTab(tab, { autoSave: true });
 			}
@@ -87,8 +87,8 @@ singlefile.ui = (() => {
 			}
 			onTabError(sender.tab.id, request.options);
 		}
-		if (request.isAutoSaveUnloadEnabled) {
-			return isAutoSaveUnloadEnabled(sender.tab.id);
+		if (request.isAutoSaveEnabled) {
+			return isAutoSaveEnabled(sender.tab.id);
 		}
 	});
 	return {
@@ -380,12 +380,6 @@ singlefile.ui = (() => {
 		}
 	}
 
-	async function isAutoSaveUnloadEnabled(tabId) {
-		const config = await singlefile.config.get();
-		const autoSaveEnabled = await isAutoSaveEnabled(tabId);
-		return autoSaveEnabled && config.autoSaveUnload;
-	}
-
 	async function isAutoSaveEnabled(tabId) {
 		const tabsData = await getPersistentTabsData();
 		return tabsData.autoSaveAll || tabsData.autoSaveUnpinned || (tabsData[tabId] && tabsData[tabId].autoSave);

extension/ui/pages/help.html

@@ -68,7 +68,7 @@
 				<a id="options">Options description</a>
 				<p>You can customize SingleFile through the options page. Right-click on SingleFile button
 					<img src="../resources/icon_16.png" class="icon"> in the browser toolbar and select "Options"/"Manage extension" in the context menu to open the options page.</p>
-				<p>Option details :</p>
+				<p>User interface</p>
 				<ul>
 					<li>
 						<span class="option">add entry in the context menu of the webpage</span>
@@ -97,7 +97,9 @@
 						<p class="notice">It is recommended to
 							<u>check</u> this option</p>
 					</li>
-
+				</ul>
+				<p>File name</p>
+				<ul>
 					<li>
 						<span class="option">append the save date to the file name</span>
 						<p>Check this option to append the save date of the webpage to the file name.
@@ -107,13 +109,16 @@
 					</li>
 
 					<li>
-						<span class="option">enter file name before saving the page</span>
-						<p>Check this option to display a prompt asking you to enter the file name of the saved page.
+						<span class="option">open the "Save as" dialog to confirm the file name</span>
+						<p>Check this option to display the "Save as" dialog in order to confirm the file name before saving the page. If the
+							option "save pages in background" is unchecked then a prompt dialog will be displayed instead of the "Save as" dialog.
 						</p>
 						<p class="notice">It is recommended to
 							<u>uncheck</u> this option</p>
 					</li>
-
+				</ul>
+				<p>Page content</p>
+				<ul>
 					<li>
 						<span class="option">compress HTML</span>
 						<p>Check this option to remove all HTML comments, and unneeded spaces or returns. This helps to reduce the size of the
@@ -152,7 +157,9 @@
 						<p class="notice">It is recommended to
 							<u>uncheck</u> this option</p>
 					</li>
-
+				</ul>
+				<p>Pages resources</p>
+				<ul>
 					<li>
 						<span class="option">remove scripts</span>
 						<p>Check this option to remove all scripts. Unchecking this option may alter the document.</p>
@@ -202,21 +209,44 @@
 						<p>Specify the maximum size of embedded resources (i.e. images, stylesheets, scripts and iframes) in megabytes.
 						</p>
 					</li>
+				</ul>
+				<p>Auto-save</p>
+				<ul>
+					<li>
+						<span class="option">auto-save on page load or on page unload as fallback</span>
+						<p>Check this option to auto-save pages after being loaded. If you browse to another page before the page is fully loaded
+							then the page will be saved just before being unloaded. With this option active, you are guaranteed pages will always
+							be saved. Pages saved before being unloaded will not contain frame contents (if you unchecked "remove frames").</p>
+					</li>
+					<p class="notice">It is recommended to
+						<u>check</u> this option</p>
+
+					<li>
+						<span class="option">auto-save on page load</span>
+						<p>Check this option to auto-save pages after being loaded.</p>
+					</li>
 
 					<li>
 						<span class="option">auto-save on page unload</span>
-						<p>Check this option to auto-save the page when it is unloaded instead of saving the page after it is loaded.</p>
+						<p>Check this option to auto-save pages before being unloaded instead of saving pages after being loaded. With this option
+							active, you are guaranteed pages will always be saved but they will never contain frame contents (if you unchecked
+							"remove frames").</p>
 					</li>
 
 					<li>
 						<span class="option">auto-save wait delay after load (sec.)</span>
-						<p>Specify the time to wait in seconds before saving a page after it is loaded.
+						<p>Specify the amount of time in seconds to wait before saving a page when the "auto-save on page load or on page unload
+							as fallback" or "auto-save on page load" is checked.
 						</p>
 					</li>
-
+				</ul>
+				<p>Misc.</p>
+				<ul>
 					<li>
 						<span class="option">save pages in background</span>
-						<p>Uncheck this option if you get invalid file names like "37bec68b-446a-46a5-8642-19a89c231b46.html" when saving pages.
+						<p>Uncheck this option if you get invalid file names like "37bec68b-446a-46a5-8642-19a89c231b46.html" when saving pages
+							or if you prefer to use the prompt dialog instead of the "Save as" dialog when "open the 'Save as' dialog to confirm
+							the file name" option is checked.
 						</p>
 						<p class="notice">It is recommended to
 							<u>check</u> this option</p>
@@ -225,14 +255,16 @@
 					<li>
 						<span class="option">display stats in the console after processing</span>
 						<p>Check this option to display stats about processing in the JavaScript developer tools of your browser. Checking this
-							option may increase the time needed to process a page.
+							option may increase the CPU consumption and the time needed to process a page.
 						</p>
 						<p class="notice">It is recommended to
 							<u>uncheck</u> this option</p>
 					</li>
-
+				</ul>
+				<p>Form buttons</p>
+				<ul>
 					<li>
-						<span class="option">Reset to default options</span>
+						<span class="option">Reset</span>
 						<p>Reset all the options to their default value.</p>
 					</li>
 				</ul>

extension/ui/pages/options.html

@@ -31,7 +31,7 @@
 			<input type="checkbox" id="appendSaveDateInput">
 		</div>
 		<div class="option">
-			<label for="confirmFilenameInput">confirm file name before saving the page</label>
+			<label for="confirmFilenameInput">open the "Save as" dialog to confirm the file name</label>
 			<input type="checkbox" id="confirmFilenameInput">
 		</div>
 	</details>
@@ -95,6 +95,14 @@
 	</details>
 	<details>
 		<summary>Auto-save</summary>
+		<div class="option">
+			<label for="autoSaveLoadInput">auto-save on page load or on page unload as fallback</label>
+			<input type="checkbox" id="autoSaveLoadOrUnloadInput">
+		</div>
+		<div class="option">
+			<label for="autoSaveLoadInput">auto-save on page load</label>
+			<input type="checkbox" id="autoSaveLoadInput">
+		</div>
 		<div class="option">
 			<label for="autoSaveUnloadInput">auto-save on page unload</label>
 			<input type="checkbox" id="autoSaveUnloadInput">