added events to track page processing

extension/core/bg/processor.js

@@ -18,7 +18,7 @@
  *   along with SingleFile.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* global browser, SingleFile, singlefile, Blob */
+/* global browser, SingleFile, singlefile, Blob, URL */
 
 singlefile.processor = (() => {
 
@@ -40,7 +40,7 @@ singlefile.processor = (() => {
 		options.imageData = message.imageData;
 		options.postersData = message.postersData;
 		options.usedFonts = message.usedFonts;
-		options.shadowRootContents = message.shadowRootContents
+		options.shadowRootContents = message.shadowRootContents;
 		options.insertSingleFileComment = true;
 		options.insertFaviconLink = true;
 		options.backgroundTab = true;
@@ -51,7 +51,7 @@ singlefile.processor = (() => {
 		let index = 0, maxIndex = 0;
 		options.onprogress = async event => {
 			if (event.type == event.RESOURCES_INITIALIZED) {
-				maxIndex = event.details.max;
+				maxIndex = event.detail.max;
 				singlefile.ui.button.onProgress(tabId, index, maxIndex, { autoSave: true });
 			}
 			if (event.type == event.RESOURCE_LOADED) {

extension/core/content/content.js

@@ -87,17 +87,23 @@ this.singlefile.top = this.singlefile.top || (() => {
 		options.insertSingleFileComment = true;
 		options.insertFaviconLink = true;
 		if (!options.removeFrames && this.frameTree) {
-			preInitializationPromises.push(frameTree.getAsync(options));
+			const frameTreePromise = frameTree.getAsync(options);
+			singlefile.ui.onLoadingFrames();
+			frameTreePromise.then(() => singlefile.ui.onLoadFrames());
+			preInitializationPromises.push(frameTreePromise);
 		}
 		if (options.lazyLoadImages) {
-			preInitializationPromises.push(lazyLoader.process());
+			const lazyLoadPromise = lazyLoader.process();
+			singlefile.ui.onLoadingDeferResources();
+			lazyLoadPromise.then(() => singlefile.ui.onLoadDeferResources());
+			preInitializationPromises.push(lazyLoadPromise);
 		}
 		options.doc = document;
 		options.win = window;
 		let index = 0, maxIndex = 0;
 		options.onprogress = event => {
 			if (event.type == event.RESOURCES_INITIALIZED) {
-				maxIndex = event.details.max;
+				maxIndex = event.detail.max;
 			}
 			if (event.type == event.RESOURCES_INITIALIZED || event.type == event.RESOURCE_LOADED) {
 				if (event.type == event.RESOURCE_LOADED) {
@@ -105,10 +111,24 @@ this.singlefile.top = this.singlefile.top || (() => {
 				}
 				browser.runtime.sendMessage({ processProgress: true, index, maxIndex, options: { autoSave: false } });
 				if (options.shadowEnabled) {
-					singlefile.ui.onprogress(index, maxIndex);
+					singlefile.ui.onResourceProgress(index, maxIndex);
 				}
-			} else if (event.type == event.PAGE_ENDED) {
+			} if (event.type == event.PAGE_ENDED) {
 				browser.runtime.sendMessage({ processEnd: true, options: { autoSave: false } });
+			} else if (options.shadowEnabled && !event.detail.frame) {
+				if (event.type == event.PAGE_LOADING) {
+					singlefile.ui.onPageLoading();
+				} else if (event.type == event.PAGE_LOADED) {
+					singlefile.ui.onPageLoad();
+				} else if (event.type == event.STAGE_STARTED) {
+					singlefile.ui.onStageStart(event.detail.step);
+				} else if (event.type == event.STAGE_ENDED) {
+					singlefile.ui.onStageEnd(event.detail.step);
+				} else if (event.type == event.STAGE_TASK_STARTED) {
+					singlefile.ui.onStageTaskStart(event.detail.step, event.detail.task);
+				} else if (event.type == event.STAGE_TASK_ENDED) {
+					singlefile.ui.onStageTaskEnd(event.detail.step, event.detail.task);
+				}
 			}
 		};
 		[options.framesData] = await Promise.all(preInitializationPromises);

extension/ui/content/content-ui.js

@@ -43,7 +43,7 @@ this.singlefile.ui = this.singlefile.ui || (() => {
 				});
 			}
 		},
-		onprogress(index, maxIndex) {
+		onResourceProgress(index, maxIndex) {
 			const progressBarElement = document.querySelector(PROGRESS_BAR_TAGNAME);
 			if (progressBarElement && maxIndex) {
 				const width = Math.floor((index / maxIndex) * 100) + "%";
@@ -58,7 +58,37 @@ this.singlefile.ui = this.singlefile.ui || (() => {
 				requestAnimationFrame(() => maskElement.remove());
 			}
 		},
-		getSelectedArea
+		getSelectedArea,
+		onLoadingDeferResources() {
+			// TODO
+		},
+		onLoadDeferResources() {
+			// TODO
+		},
+		onLoadingFrames() {
+			// TODO
+		},
+		onLoadFrames() {
+			// TODO
+		},
+		onPageLoading() {
+			// TODO
+		},
+		onPageLoad() {
+			// TODO
+		},
+		onStageStart(step) {
+			// TODO
+		},
+		onStageEnd(step) {
+			// TODO
+		},
+		onStageTaskStart(step, task) {
+			// TODO
+		},
+		onStageTaskEnd(step, task) {
+			// TODO
+		}
 	};
 
 	function getSelectedArea() {

lib/fetch/bg/fetch.js

@@ -48,7 +48,7 @@
 			const response = responses.get(request.requestId);
 			responses.delete(response.requestId);
 			return new Promise((resolve, reject) => {
-				response.xhrRequest.onerror = event => reject(new Error(event.details));
+				response.xhrRequest.onerror = event => reject(new Error(event.detail));
 				if (response.xhrRequest.readyState == XMLHttpRequest.DONE) {
 					resolve(getResponse(response.xhrRequest));
 				} else {
@@ -67,7 +67,7 @@
 			const xhrRequest = new XMLHttpRequest();
 			xhrRequest.withCredentials = true;
 			xhrRequest.responseType = "arraybuffer";
-			xhrRequest.onerror = event => reject(new Error(event.details));
+			xhrRequest.onerror = event => reject(new Error(event.detail));
 			xhrRequest.onreadystatechange = () => {
 				if (xhrRequest.readyState == XMLHttpRequest.HEADERS_RECEIVED) {
 					const headers = {};

lib/fetch/content/fetch.js

@@ -74,7 +74,7 @@ this.superFetch = this.superFetch || (() => {
 		return new Promise((resolve, reject) => {
 			const xhrRequest = new XMLHttpRequest();
 			xhrRequest.responseType = "arraybuffer";
-			xhrRequest.onerror = event => reject(new Error(event.details));
+			xhrRequest.onerror = event => reject(new Error(event.detail));
 			xhrRequest.onreadystatechange = () => {
 				if (xhrRequest.readyState == XMLHttpRequest.HEADERS_RECEIVED || xhrRequest.readyState == XMLHttpRequest.DONE) {
 					const headers = new Map();
@@ -83,7 +83,7 @@ this.superFetch = this.superFetch || (() => {
 						status: xhrRequest.status,
 						headers,
 						arrayBuffer: () => new Promise((resolve, reject) => {
-							xhrRequest.onerror = event => reject(new Error(event.details));
+							xhrRequest.onerror = event => reject(new Error(event.detail));
 							if (xhrRequest.readyState == XMLHttpRequest.DONE) {
 								resolve(xhrRequest.response);
 							} else {

lib/single-file/single-file-core.js

@@ -43,7 +43,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			}
 		}
 		async initialize() {
-			this.processor = new PageProcessor(this.options);
+			this.processor = new PageProcessor(this.options, true);
 			await this.processor.loadPage();
 			await this.processor.initialize();
 		}
@@ -73,8 +73,8 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 	const STAGE_TASK_ENDED = "stage-task-ended";
 
 	class ProgressEvent {
-		constructor(type, details) {
-			return { type, details, PAGE_LOADING, PAGE_LOADED, RESOURCES_INITIALIZING, RESOURCES_INITIALIZED, RESOURCE_LOADED, PAGE_ENDED };
+		constructor(type, detail) {
+			return { type, detail, PAGE_LOADING, PAGE_LOADED, RESOURCES_INITIALIZING, RESOURCES_INITIALIZED, RESOURCE_LOADED, PAGE_ENDED, STAGE_STARTED, STAGE_ENDED, STAGE_TASK_STARTED, STAGE_TASK_ENDED };
 		}
 	}
 
@@ -141,7 +141,8 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 	}];
 
 	class PageProcessor {
-		constructor(options) {
+		constructor(options, root) {
+			this.root = root;
 			this.options = options;
 			this.options.url = this.options.url || this.options.doc.location.href;
 			this.options.baseURI = this.options.doc && this.options.doc.baseURI;
@@ -162,9 +163,9 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		}
 
 		async loadPage() {
-			this.onprogress(new ProgressEvent(PAGE_LOADING, { pageURL: this.options.url }));
+			this.onprogress(new ProgressEvent(PAGE_LOADING, { pageURL: this.options.url, frame: !this.root }));
 			await this.processor.loadPage(this.options.content);
-			this.onprogress(new ProgressEvent(PAGE_LOADED, { pageURL: this.options.url }));
+			this.onprogress(new ProgressEvent(PAGE_LOADED, { pageURL: this.options.url, frame: !this.root }));
 		}
 
 		async initialize() {
@@ -179,13 +180,13 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		}
 
 		async run() {
-			if (!this.options.windowId) {
+			if (this.root) {
 				this.processor.initialize(this.batchRequest);
 				this.onprogress(new ProgressEvent(RESOURCES_INITIALIZED, { pageURL: this.options.url, index: 0, max: this.processor.maxResources }));
 			}
-			await this.batchRequest.run(details => {
-				details.pageURL = this.options.url;
-				this.onprogress(new ProgressEvent(RESOURCE_LOADED, details));
+			await this.batchRequest.run(detail => {
+				detail.pageURL = this.options.url;
+				this.onprogress(new ProgressEvent(RESOURCE_LOADED, detail));
 			}, this.options);
 			await this.pendingPromises;
 			await this.executeStage(REPLACE_DOCS_STAGE);
@@ -194,7 +195,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 		}
 
 		async getPageData() {
-			if (!this.options.windowId) {
+			if (this.root) {
 				this.onprogress(new ProgressEvent(PAGE_ENDED, { pageURL: this.options.url }));
 			}
 			return this.processor.getPageData();
@@ -204,16 +205,17 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			if (DEBUG) {
 				log("**** STARTED STAGE", step, "****");
 			}
-			this.onprogress(new ProgressEvent(STAGE_STARTED, { pageURL: this.options.url, step }));
+			const frame = !this.root;
+			this.onprogress(new ProgressEvent(STAGE_STARTED, { pageURL: this.options.url, step, frame }));
 			STAGES[step].sequential.forEach(task => {
 				let startTime;
 				if (DEBUG) {
 					startTime = Date.now();
 					log("  -- STARTED task =", task.action);
 				}
-				this.onprogress(new ProgressEvent(STAGE_TASK_STARTED, { pageURL: this.options.url, task: task.action }));
+				this.onprogress(new ProgressEvent(STAGE_TASK_STARTED, { pageURL: this.options.url, step, task: task.action, frame }));
 				this.executeTask(task);
-				this.onprogress(new ProgressEvent(STAGE_TASK_ENDED, { pageURL: this.options.url, step, task: task.action }));
+				this.onprogress(new ProgressEvent(STAGE_TASK_ENDED, { pageURL: this.options.url, step, task: task.action, frame }));
 				if (DEBUG) {
 					log("  -- ENDED   task =", task.action, "delay =", Date.now() - startTime);
 				}
@@ -225,16 +227,16 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 						startTime = Date.now();
 						log("  // STARTED task =", task.action);
 					}
-					this.onprogress(new ProgressEvent(STAGE_TASK_STARTED, { pageURL: this.options.url, task: task.action }));
+					this.onprogress(new ProgressEvent(STAGE_TASK_STARTED, { pageURL: this.options.url, step, task: task.action, frame }));
 					const promise = this.executeTask(task);
-					promise.then(() => this.onprogress(new ProgressEvent(STAGE_TASK_ENDED, { pageURL: this.options.url, step, task: task.action })));
+					promise.then(() => this.onprogress(new ProgressEvent(STAGE_TASK_ENDED, { pageURL: this.options.url, step, task: task.action, frame })));
 					if (DEBUG) {
 						promise.then(() => log("  // ENDED task =", task.action, "delay =", Date.now() - startTime));
 					}
 					return promise;
 				}));
 			}
-			this.onprogress(new ProgressEvent(STAGE_ENDED, { pageURL: this.options.url, step }));
+			this.onprogress(new ProgressEvent(STAGE_ENDED, { pageURL: this.options.url, step, frame }));
 			if (DEBUG) {
 				log("**** ENDED   STAGE", step, "****");
 			}