switch between URL and title by clicking on the header label

Former-commit-id: 87fc7494b702c2f0c66afe332535c1b0af6f355a

_locales/de/messages.json

@@ -543,6 +543,10 @@
 		"message": "Cancel all",
 		"description": "Pending saves button 'Cancel all'"
 	},
+	"pendingsTitleTitle": {
+		"message": "Titel",
+		"description": "Title of the first column in the table of the pending saves 'Title'"
+	},
 	"pendingsURLTitle": {
 		"message": "URL",
 		"description": "Title of the first column in the table of the pending saves 'URL'"

_locales/en/messages.json

@@ -547,6 +547,10 @@
 		"message": "URL",
 		"description": "Title of the first column in the table of the pending saves 'URL'"
 	},
+	"pendingsTitleTitle": {
+		"message": "Title",
+		"description": "Title of the first column in the table of the pending saves 'Title'"
+	},
 	"pendingsStatusTitle": {
 		"message": "status",
 		"description": "Title of the second column in the table of the pending saves 'status'"

_locales/es/messages.json

@@ -543,6 +543,10 @@
 		"message": "Cancel all",
 		"description": "Pending saves button 'Cancel all'"
 	},
+	"pendingsTitleTitle": {
+		"message": "Title",
+		"description": "Title of the first column in the table of the pending saves 'Title'"
+	},
 	"pendingsURLTitle": {
 		"message": "URL",
 		"description": "Title of the first column in the table of the pending saves 'URL'"

_locales/fr/messages.json

@@ -543,6 +543,10 @@
 		"message": "Annuler tout",
 		"description": "Pending saves button 'Cancel all'"
 	},
+	"pendingsTitleTitle": {
+		"message": "Titre",
+		"description": "Title of the first column in the table of the pending saves 'Title'"
+	},
 	"pendingsURLTitle": {
 		"message": "URL",
 		"description": "Title of the first column in the table of the pending saves 'URL'"

_locales/ja/messages.json

@@ -543,6 +543,10 @@
 		"message": "Cancel all",
 		"description": "Pending saves button 'Cancel all'"
 	},
+	"pendingsTitleTitle": {
+		"message": "Title",
+		"description": "Title of the first column in the table of the pending saves 'Title'"
+	},
 	"pendingsURLTitle": {
 		"message": "URL",
 		"description": "Title of the first column in the table of the pending saves 'URL'"

_locales/pl/messages.json

@@ -543,6 +543,10 @@
 		"message": "Anuluj wszystkie",
 		"description": "Pending saves button 'Cancel all'"
 	},
+	"pendingsTitleTitle": {
+		"message": "Tytuł",
+		"description": "Title of the first column in the table of the pending saves 'Title'"
+	},
 	"pendingsURLTitle": {
 		"message": "Adres URL",
 		"description": "Title of the first column in the table of the pending saves 'URL'"

_locales/ru/messages.json

@@ -543,6 +543,10 @@
 		"message": "Cancel all",
 		"description": "Pending saves button 'Cancel all'"
 	},
+	"pendingsTitleTitle": {
+		"message": "Title",
+		"description": "Title of the first column in the table of the pending saves 'Title'"
+	},
 	"pendingsURLTitle": {
 		"message": "URL",
 		"description": "Title of the first column in the table of the pending saves 'URL'"

_locales/uk/messages.json

@@ -543,6 +543,10 @@
 		"message": "Cancel all",
 		"description": "Pending saves button 'Cancel all'"
 	},
+	"pendingsTitleTitle": {
+		"message": "Title",
+		"description": "Title of the first column in the table of the pending saves 'Title'"
+	},
 	"pendingsURLTitle": {
 		"message": "URL",
 		"description": "Title of the first column in the table of the pending saves 'URL'"

_locales/zh_CN/messages.json

@@ -543,6 +543,10 @@
 		"message": "Cancel all",
 		"description": "Pending saves button 'Cancel all'"
 	},
+	"pendingsTitleTitle": {
+		"message": "Title",
+		"description": "Title of the first column in the table of the pending saves 'Title'"
+	},
 	"pendingsURLTitle": {
 		"message": "URL",
 		"description": "Title of the first column in the table of the pending saves 'URL'"

_locales/zh_TW/messages.json

@@ -543,6 +543,10 @@
 		"message": "Cancel all",
 		"description": "Pending saves button 'Cancel all'"
 	},
+	"pendingsTitleTitle": {
+		"message": "Title",
+		"description": "Title of the first column in the table of the pending saves 'Title'"
+	},
 	"pendingsURLTitle": {
 		"message": "URL",
 		"description": "Title of the first column in the table of the pending saves 'URL'"

extension/core/bg/business.js

@@ -158,7 +158,7 @@ singlefile.extension.core.bg.business = (() => {
 	}
 
 	function mapSaveInfo([tabId, saveInfo]) {
-		return [tabId, { index: saveInfo.tab.index, url: saveInfo.tab.url, cancelled: saveInfo.cancelled, status: saveInfo.status }];
+		return [tabId, { index: saveInfo.tab.index, url: saveInfo.tab.url, title: saveInfo.tab.title, cancelled: saveInfo.cancelled, status: saveInfo.status }];
 	}
 
 })();

extension/ui/bg/ui-pendings.js

@@ -26,13 +26,14 @@
 (async () => {
 
 	const URLLabel = document.getElementById("URLLabel");
-	const statusLabel = document.getElementById("statusLabel");
+	const titleLabel = document.getElementById("titleLabel");
 	const resultsTable = document.getElementById("resultsTable");
 	const cancelAllButton = document.getElementById("cancelAllButton");
 	document.title = browser.i18n.getMessage("pendingsTitle");
 	cancelAllButton.textContent = browser.i18n.getMessage("pendingsCancelAllButton");
 	URLLabel.textContent = browser.i18n.getMessage("pendingsURLTitle");
-	statusLabel.textContent = browser.i18n.getMessage("pendingsStatusTitle");
+	titleLabel.textContent = browser.i18n.getMessage("pendingsTitleTitle");
+	document.getElementById("statusLabel").textContent = browser.i18n.getMessage("pendingsStatusTitle");
 	const statusText = {
 		pending: browser.i18n.getMessage("pendingsPendingStatus"),
 		processing: browser.i18n.getMessage("pendingsProcessingStatus"),
@@ -43,6 +44,11 @@
 		await browser.runtime.sendMessage({ method: "downloads.cancelAll" });
 		await refresh();
 	};
+	let URLDisplayed = true;
+	document.getElementById("URLTitleLabel").onclick = () => {
+		URLDisplayed = !URLDisplayed;
+		refresh(true);
+	};
 	let previousState;
 	setInterval(refresh, 1000);
 	await refresh();
@@ -62,8 +68,12 @@
 				const buttonCancel = document.createElement("button");
 				row.dataset.tabId = tabId;
 				row.className = "result-row";
-				cellURL.textContent = tabInfo.url;
-				cellURL.className = "result-url";
+				if (URLDisplayed) {
+					cellURL.textContent = tabInfo.url;
+				} else {
+					cellURL.textContent = tabInfo.title;
+				}
+				cellURL.className = "result-url-title";
 				cellURL.onclick = () => selectTab(tabId);
 				if (tabInfo.cancelled) {
 					cellStatus.textContent = statusText.cancelling;
@@ -93,12 +103,19 @@
 		await refresh();
 	}
 
-	async function refresh() {
+	async function refresh(force) {
 		const results = await browser.runtime.sendMessage({ method: "downloads.getInfo" });
 		const currentState = JSON.stringify(results);
-		if (previousState != currentState) {
+		if (previousState != currentState || force) {
 			previousState = currentState;
 			resetTable();
+			if (URLDisplayed) {
+				URLLabel.className = "";
+				titleLabel.className = "unselected";
+			} else {
+				URLLabel.className = "unselected";
+				titleLabel.className = "";
+			}
 			updateTable(results);
 			if (!results.length) {
 				const row = document.createElement("div");

extension/ui/pages/pendings.css

@@ -64,20 +64,30 @@ header button {
     background-color: #ececec;
 }
 
-.result-row span {
+.result-row>span {
     padding: 10px;
     align-self: center;
 }
 
-.result-url {
+.result-row>span>span {
+    padding: 5px;
+}
+
+.result-head .unselected {
+    opacity: .5;
+}
+
+.result-url-title {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     display: inline-block;
     white-space: nowrap;
+    user-select: none;
+    cursor: pointer;
 }
 
-.result-row:not(.result-head) .result-url {
+.result-row:not(.result-head) .result-url-title {
     cursor: pointer;
 }
 

extension/ui/pages/pendings.html

@@ -14,7 +14,9 @@
 	</header>
 	<main>
 		<div class="result-row result-head">
-			<span class="result-url" id="URLLabel"></span>
+			<span class="result-url-title" id="URLTitleLabel">
+				<span id="URLLabel"></span> / <span id="titleLabel"></span>
+			</span>
 			<span class="result-status" id="statusLabel"></span>
 			<span class="result-cancel">&nbsp;</span>
 		</div>