Allow user to remove some document elements before saving the page

Sometimes pages to be saved contain a lot of superfluous information:
banners, external navigation blocks, etc.
This change allows user to selectively remove any unneeded elements
from the page, thus reducing it's size and making it more readable.


Former-commit-id: ec8493cc58c03fac8520cd7e525650e800d0952b

extension/ui/bg/ui-editor.js

@@ -39,6 +39,7 @@ singlefile.extension.ui.bg.editor = (() => {
 	const addBlueNoteButton = document.querySelector(".add-note-blue-button");
 	const addGreenNoteButton = document.querySelector(".add-note-green-button");
 	const editPageButton = document.querySelector(".edit-page-button");
+	const cutPageButton = document.querySelector(".cut-page-button");
 	const savePageButton = document.querySelector(".save-page-button");
 
 	let tabData;
@@ -55,6 +56,7 @@ singlefile.extension.ui.bg.editor = (() => {
 	toggleHighlightsButton.title = browser.i18n.getMessage("editorToggleHighlights");
 	removeHighlightButton.title = browser.i18n.getMessage("editorRemoveHighlight");
 	editPageButton.title = browser.i18n.getMessage("editorEditPage");
+	cutPageButton.title = browser.i18n.getMessage("editorCutPage");
 	savePageButton.title = browser.i18n.getMessage("editorSavePage");
 
 	addYellowNoteButton.onclick = () => editorElement.contentWindow.postMessage(JSON.stringify({ method: "addNote", color: "note-yellow" }), "*");
@@ -137,6 +139,15 @@ singlefile.extension.ui.bg.editor = (() => {
 			editorElement.contentWindow.postMessage(JSON.stringify({ method: "disableEditPage" }), "*");
 		}
 	};
+	cutPageButton.onclick = () => {
+		if (cutPageButton.classList.contains("cut-disabled")) {
+			cutPageButton.classList.remove("cut-disabled");
+			editorElement.contentWindow.postMessage(JSON.stringify({ method: "enableCutPage" }), "*");
+		} else {
+			cutPageButton.classList.add("cut-disabled");
+			editorElement.contentWindow.postMessage(JSON.stringify({ method: "disableCutPage" }), "*");
+		}
+	};
 	savePageButton.onclick = () => {
 		savePage();
 	};

extension/ui/content/content-ui-editor-web.js

@@ -53,7 +53,7 @@
 	const DISABLED_NOSCRIPT_ATTRIBUTE_NAME = "data-single-file-disabled-noscript";
 
 	let NOTES_WEB_STYLESHEET, MASK_WEB_STYLESHEET, HIGHLIGHTS_WEB_STYLESHEET;
-	let selectedNote, anchorElement, maskNoteElement, maskPageElement, highlightSelectionMode, removeHighlightMode, resizingNoteMode, movingNoteMode, highlightColor, collapseNoteTimeout;
+	let selectedNote, anchorElement, maskNoteElement, maskPageElement, highlightSelectionMode, removeHighlightMode, resizingNoteMode, movingNoteMode, highlightColor, collapseNoteTimeout, cuttingMode;
 
 	window.onmessage = async event => {
 		const message = JSON.parse(event.data);
@@ -117,6 +117,16 @@
 		if (message.method == "disableEditPage") {
 			document.body.contentEditable = false;
 		}
+		if (message.method == "enableCutPage") {
+			cuttingMode = true;
+			document.body.addEventListener ("mouseover", cutter);
+			document.body.addEventListener ("mouseout", cutter);
+		}
+		if (message.method == "disableCutPage" ) {
+			cuttingMode = false;
+			document.body.removeEventListener ("mouseover", cutter);
+			document.body.removeEventListener ("mouseout", cutter);
+		}
 		if (message.method == "getContent") {
 			serializeShadowRoots(document);
 			const doc = document.cloneNode(true);
@@ -201,6 +211,13 @@
 		selectedNote = noteElement;
 	}
 
+	function cutter (e) {
+		if (e.type === 'mouseover' || e.type === 'mouseout') {
+			e.target.classList.toggle ("single-file-hover");
+		}
+		e.stopPropagation();
+	}
+
 	function attachNoteListeners(containerElement, editable = false) {
 		const SELECT_PX_THRESHOLD = 4;
 		const COLLAPSING_NOTE_DELAY = 750;
@@ -400,6 +417,10 @@
 			clearTimeout(collapseNoteTimeout);
 			collapseNoteTimeout = null;
 		}
+		if (cuttingMode) {
+			let element = event.target;
+			element.classList.add ("single-file-removed");
+		}
 	}
 
 	function anchorNote(event, noteElement, deltaX, deltaY) {

extension/ui/editor/editor-frame-web.css

@@ -35,4 +35,15 @@
 single-file-note {
     all: initial !important;
     display: contents !important;
+}
+
+.single-file-hover {
+    outline: 1px solid red !important;
+}
+
+.single-file-removed {
+    display: none !important;
+    float: none !important;
+    position: static !important;
+    visibility: collapse !important;
 }

extension/ui/editor/editor.css

@@ -38,6 +38,7 @@ img[type=button]:hover {
 }
 
 img[type=button].edit-disabled,
+img[type=button].cut-disabled,
 img[type=button].highlight-disabled,
 img[type=button].remove-highlight-disabled {
     background-color: #7b7b7b;

extension/ui/editor/editor.html

@@ -35,6 +35,7 @@
 			<img type="button" class="remove-highlight-button remove-highlight-disabled"
 				src="/extension/ui/resources/button_highlighter_delete.png">
 			<img type="button" class="edit-page-button edit-disabled" src="/extension/ui/resources/button_note_edit.png">
+			<img type="button" class="cut-page-button cut-disabled" src="/extension/ui/resources/button_cut.png">
 			<div class="separator"></div>
 		</div>
 		<div class="buttons">