add cancel button to undo unwanted save session

src/browserExt/translateSandbox/translateSandboxFunctionOverrides.js

@@ -129,6 +129,7 @@ const CONTENT_SCRIPT_FUNCTION_OVERRIDES = {
 	'debug': true,
 	'getExtensionURL': true,
 	'getExtensionVersion': true,
+	'Inject.getSessionDetails': true,
 	'Errors.log': true,
 	'Messaging.sendMessage': true,
 	'Connector.checkIsOnline': true,

src/browserExt/translateSandbox/translateSandboxManager.js

@@ -32,7 +32,6 @@ Zotero.SandboxedTranslateManager = {
 	headAllowedTags: new Set(["BASE", "COMMAND", "LINK", "META", "NOSCRIPT", "SCRIPT", "STYLE", "TITLE"]),
 	handlers: {
 		'getVersion': () => Zotero.version,
-		'Inject.getSessionDetails': () => Zotero.Inject.sessionDetails,
 	},
 
 	init: function () {

src/common/connector.js

@@ -65,6 +65,7 @@ Zotero.Connector = new function() {
 			Zotero.Connector.automaticSnapshots = !!response.prefs.automaticSnapshots;
 			Zotero.Connector.googleDocsAddNoteEnabled = !!response.prefs.googleDocsAddNoteEnabled;
 			Zotero.Connector.googleDocsCitationExplorerEnabled = !!response.prefs.googleDocsCitationExplorerEnabled;
+			Zotero.Connector.supportsSaveCancelling = !!response.prefs.supportsSaveCancelling;
 			if (response.prefs.translatorsHash) {
 				(async () => {
 					let sorted = !!response.prefs.sortedTranslatorHash;

src/common/inject/inject.jsx

@@ -461,6 +461,9 @@ Zotero.Inject = new function() {
 		return false;
 	};
 
+	// To unify async access in MV3
+	this.getSessionDetails = async () => this.sessionDetails;
+
 	this.translate = async function(translatorID, options={}) {
 		let result = await Zotero.Inject.checkActionToServer();
 		if (!result) return;
@@ -477,7 +480,9 @@ Zotero.Inject = new function() {
 				// Not "Create Zotero Item and Note from Selection"
 				&& !options.note
 				// Not from the context menu, which always triggers a resave
-				&& !options.resave) {
+				&& !options.resave
+				// The last translate was not cancelled
+				&& !this.sessionDetails.cancelled) {
 			let sessionID = this.sessionDetails.id;
 			Zotero.Messaging.sendMessage("progressWindow.show", [sessionID]);
 			return;

src/common/inject/progressWindow_inject.js

@@ -237,9 +237,9 @@ if (isTopWindow) {
 			top: '15px',
 			left: 'unset',
 			right: '8px',
-			width: '351px',
+			width: '380px',
 			maxWidth: '95%',
-			height: '120px',
+			height: '100%', // frame tries to take as much height as possible
 			border: "none",
 			padding: "none",
 			margin: "initial",
@@ -276,10 +276,6 @@ if (isTopWindow) {
 			frameReadyDeferred.resolve(iframe);
 		});
 
-		// Adjust iframe height when inner document is resized
-		addMessageListener('progressWindowIframe.resized', function(data) {
-			iframe.style.height = (data.height + 33) + "px";
-		});
 
 		// Update the client or API with changes
 		var handleUpdated = async function (data) {
@@ -339,6 +335,18 @@ if (isTopWindow) {
 
 		// Sent by the progress window when changes are made in the target selector
 		addMessageListener('progressWindowIframe.updated', handleUpdated);
+
+		// Stop saving and delete items that were added
+		addMessageListener('progressWindowIframe.cancel', async (_) => {
+			await Zotero.Connector.callMethod("cancel", { sessionID: currentSessionID });
+			Zotero.Inject.sessionDetails.cancelled = true;
+
+			// Wait for a moment after click and reset + hide the progress window
+			setTimeout(() => {
+				addEvent('reset');
+				hideFrame();
+			}, 500);
+		});
 
 		// Keep track of when the mouse is over the popup, for various purposes
 		addMessageListener('progressWindowIframe.mouseenter', handleMouseEnter);

src/common/progressWindow/progressWindow.css

@@ -1,18 +1,11 @@
 body {
 	/* Match tree.css */
 	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-button {
-	border: 1px solid darkgray;
-}
 
-button:active {
-	background-color: #d5d5d5;
 }
 
 .ProgressWindow-box {
-	width: 300px;
+	width: 360px;
 	max-width: 92%;
 	border-color: #adadad #9a9a9a #ababab;
 	border-width: 1px;
@@ -23,7 +16,18 @@ button:active {
 	padding: 6px 10px 6px;
 	min-height: 40px;
 	overflow: hidden;
-	position: relative
+	position: relative;
+
+	/* Make progress box scrollable if there are too many items */
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+
+	/* Prevent the popup from becoming scrollable unless we zoom in */
+	max-height: 95vh;
+
+	/* scrollbar should be never visible (macOS) */
+	scrollbar-width: none;
 }
 
 /* Hack to check whether the mouse is over the pane when switching back from another tab.
@@ -48,11 +52,13 @@ button:active {
 .ProgressWindow-headlineSelect {
 	margin-left: 5px;
 	height: 22px;
-	width: 100%;
+	width: 150px;
 	font-size: 12px;
-	flex-grow: 1;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	background-color: white;
+	border-radius: 5px;
+	border: 1px solid lightgray;
 }
 
 .ProgressWindow-targetIcon {
@@ -66,25 +72,10 @@ button:active {
 	vertical-align: -3px;
 }
 
-.ProgressWindow-disclosure {
-	border-radius: 3px;
-	margin-left: 6px;
-	background: url('disclosure-closed.svg') no-repeat center/40% transparent;
-	width: 26px;
-	font-size: 20px;
-	height: 20px;
-	line-height: 17px;
-	cursor: default;
-	user-select: none
-}
-
-.ProgressWindow-disclosure.is-open {
-	background-image: url('disclosure-open.svg');
-}
-
 .ProgressWindow-inputRow {
 	display: flex;
 	margin-top: 6px;
+	margin-bottom: 10px;
 }
 
 .ProgressWindow-tagsRow {
@@ -100,19 +91,89 @@ button:active {
 
 .ProgressWindow-tagsInput {
 	flex-grow: 1;
-	margin-right: 8px;
-	padding-left: 5px;
-	padding-right: 5px;
+	margin-right: 2px;
+	padding-inline: 1px;
 	font-size: 12px;
 	/* Ensures the input can shrink to make space for the done btn if the user zooms into the iframe */
 	min-width: 0; 
 }
 
 .ProgressWindow-button {
 	background-color: white;
-	padding: 3px 24px;
+	border: 1px solid lightgray;
+	height: 22px;
+	width: 22px;
+	margin-inline-start: 4px;
 	border-radius: 4px;
 	font-size: 11px;
+	/* button will get wider on hover */
+	transition: width 0.3s ease, background-color 0.1s ease;
+
+	/* center the icon */
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	overflow: hidden;
+}
+/* initially, the icon is visible */
+.ProgressWindow-button > .icon {
+	opacity: 1;
+}
+/* and the label is hidden */
+.ProgressWindow-button .label {
+    opacity: 0;
+    width: 0;
+    overflow: hidden;
+}
+
+/* on hover, the button will become wider */
+.ProgressWindow-button.can-expand:hover {
+	width: 60px;
+}
+
+/* the icon will fade out */
+.ProgressWindow-button.can-expand:hover .icon {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+/* the label will fade-in a moment after the button expands */
+.ProgressWindow-button.can-expand:hover .label {
+    opacity: 1;
+    width: auto;
+    transition: opacity 0.2s ease 0.1s, width 0.3s ease;
+	margin-left: -16px;
+}
+
+.ProgressWindow-button.done {
+	color: white;
+	background-color: #4072e5; /* --accent-blue */
+}
+
+.ProgressWindow-button.cancel {
+	color: red;
+}
+
+.ProgressWindow-button.disclosure {	
+	margin-inline-end: auto !important;
+}
+
+/* chevron that flips up or down on each click */
+.ProgressWindow-button.disclosure > .icon {
+	transition: transform .2s ease-in-out;
+	transform-origin: center;
+}
+
+.ProgressWindow-button.disclosure.is-open > .icon {
+	transform: rotate(-180deg);
+}
+
+.ProgressWindow-button.cancel:active,
+.ProgressWindow-button.disclosure:active {
+	background-color: #0000001a !important; /* fill-quarternary */
+}
+
+.ProgressWindow-button[hidden] {
+	display: none;
 }
 
 .ProgressWindow-filterWrapper {
@@ -150,31 +211,42 @@ button:active {
 }
 
 .ProgressWindow-progressBox {
-	margin-top: 10px;
-	margin-bottom: 4px
+	/* Will become scrollable when too many items */
+	overflow-y: scroll;
+	flex-grow: 1;
+}
+
+/* Make sure that if we zoom-in very closely, the progress-box is not completely shrunk */
+.ProgressWindow-progressBox:not(:empty) {
+	min-height: 40px;
 }
 
 .ProgressWindow-item {
 	font-size: 11px;
+	display: flex;
+	height: 16px;
+}
+
+/* default margin between top-level items (first one is skipped as there's margin between sections) */
+.ProgressWindow-item:not(:first-child) {
 	margin-top: 8px;
-	margin-bottom: 4px
 }
 
 .ProgressWindow-itemIcon {
-	position: absolute;
 	width: 16px;
 	height: 16px;
 	background-size: contain;
 	background-position: 0;
-	background-repeat: no-repeat
+	background-repeat: no-repeat;
+	flex-shrink: 0;
 }
 
 .ProgressWindow-itemText {
 	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 	font-size: 12px;
 	vertical-align: middle;
 	line-height: 16px;
-	margin: 0 0 0 22px;
+	margin: 0 0 0 6px;
 	white-space: nowrap;
 	overflow-x: hidden;
 	text-overflow: ellipsis