add filter feature (fix #905)

src/extension/ui/bg/ui-batch-save-urls.js

@@ -25,6 +25,9 @@
 
 const URLLabel = document.getElementById("URLLabel");
 const addUrlsLabel = document.getElementById("addUrlsLabel");
+const filterButton = document.getElementById("filterButton");
+const filterPanel = document.getElementById("filterPanel");
+const filterInput = document.getElementById("filterInput");
 const urlsTable = document.getElementById("urlsTable");
 const removeAllButton = document.getElementById("removeAllButton");
 const addUrlForm = document.getElementById("addUrlForm");
@@ -55,7 +58,8 @@ addUrlForm.onsubmit = () => {
 	return false;
 };
 removeAllButton.onclick = async () => {
-	urls = [];
+	const displayedUrls = getDisplayedUrls();
+	urls = urls.filter(url => !displayedUrls.includes(url));
 	await refresh();
 };
 addUrlsButton.onclick = displayAddUrlsPopup;
@@ -63,15 +67,43 @@ if (location.href.endsWith("#side-panel")) {
 	document.documentElement.classList.add("side-panel");
 }
 saveUrlsButton.onclick = async () => {
-	if (urls.length) {
-		await browser.runtime.sendMessage({ method: "downloads.saveUrls", urls });
-		urls.length = 0;
+	const displayedUrls = getDisplayedUrls();
+	if (displayedUrls.length) {
+		await browser.runtime.sendMessage({ method: "downloads.saveUrls", urls: displayedUrls });
+		urls = urls.filter(url => !displayedUrls.includes(url));
 		refresh();
 	}
 };
 
 let previousState;
 let urls = [];
+
+filterButton.onclick = () => {
+	filterPanel.hidden = !filterPanel.hidden;
+	if (!filterPanel.hidden) {
+		filterButton.classList.add("filter-displayed");
+		filterInput.focus();
+	} else {
+		filterButton.classList.remove("filter-displayed");
+	}
+	refresh(true);
+};
+filterButton.onkeyup = event => {
+	if (event.key == "Enter") {
+		filterButton.onclick();
+	}
+};
+filterInput.oninput = () => {
+	refresh();
+};
+filterInput.onkeyup = event => {
+	if (event.key == "Escape") {
+		filterPanel.hidden = true;
+		filterButton.classList.remove("filter-displayed");
+		filterButton.focus();
+		refresh(true);
+	}
+};
 browser.runtime.onMessage.addListener(message => {
 	if (message.method == "newUrls.addURLs") {
 		urls = message.urls;
@@ -137,19 +169,30 @@ async function displayAddUrlsPopup() {
 }
 
 async function refresh(force) {
-	const currentState = JSON.stringify(urls);
+	const displayedUrls = getDisplayedUrls();
+	const currentState = JSON.stringify(displayedUrls);
 	if (previousState != currentState || force) {
 		previousState = currentState;
 		resetTable();
-		updateTable(urls);
-		if (!urls.length) {
+		updateTable(displayedUrls);
+		if (!displayedUrls.length) {
 			const row = document.createElement("div");
 			row.className = "urls-row";
 			const cell = document.createElement("span");
 			cell.className = "no-result";
-			cell.textContent = noPendingsText;
+			if (filterPanel.hidden) {
+				cell.textContent = noPendingsText;
+			}
 			row.appendChild(cell);
 			urlsTable.appendChild(row);
 		}
 	}
+}
+
+function getDisplayedUrls() {
+	let displayedUrls = urls;
+	if (!filterPanel.hidden) {
+		displayedUrls = urls.filter(url => url.includes(filterInput.value));
+	}
+	return displayedUrls;
 }

src/extension/ui/pages/batch-save-urls.css

@@ -17,6 +17,7 @@ header {
 body>main {
     background-color: #fff;
     border: solid 1px rgb(191, 191, 191);
+    position: relative;
 }
 
 body>main,
@@ -30,12 +31,49 @@ body>footer {
     max-width: 1024px;
 }
 
-body>header, body>footer {
+body>header,
+body>footer {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 }
 
+#filterPanel {
+    position: absolute;
+    top: 38px;
+    left: 8px;
+    width: calc(100% - 24px);
+}
+
+#filterPanel input {
+    width: 100%;
+    border: dotted 1px #3e3e3e;
+    font-size: 12px;
+}
+
+#filterButton {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAwCAYAAABnjuimAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/TakUqIu0g4pChOlkoKuIoVSyChdJWaNXB5NIvaNKQpLg4Cq4FBz8Wqw4uzro6uAqC4AeIo5OToouU+L+k0CLWg+N+vLv3uHsHCI0KU01fFFA1y0jFY2I2tyr6X+FDL4KIYkhipp5IL2bQdXzdw8PXuwjP6n7uzzGg5E0GeETiOaYbFvEG8cympXPeJw6xkqQQnxNPGHRB4keuyy6/cS46LPDMkJFJzROHiMViB8sdzEqGSjxNHFZUjfKFrMsK5y3OaqXGWvfkLwzktZU012mOIo4lJJCECBk1lFGBhQitGikmUrQf6+IfcfxJcsnkKoORYwFVqJAcP/gf/O7WLExNukmBGNDzYtsfY4B/F2jWbfv72LabJ4D3GbjS2v5qA5j9JL3e1sJHwOA2cHHd1uQ94HIHGH7SJUNyJC9NoVAA3s/om3JA8BboX3N7a+3j9AHIUFfLN8DBITBepOz1Lu/u6+zt3zOt/n4AehRyqjxXv90AAAAGYktHRACKAIoAiuPa5yQAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfmBAYUEAJjwdPyAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAJFJREFUWMPt1zkOwCAMRFEPyv2vTJrUWQAvKH8aJDDihUCBGSHkX9HV9urGtsuONg4V2eTWW8HbrztoFaweOwpg9bozEavPAwlYDQ8GYjVdEIDVsiJHrJYXOmDlVrwQK/cJC7AKmzSBVejXDWJl0b9hADu9Dk8RoECBAgUKFGiJHNmvy2yoqu+oKh+fboSQfXIC3YMQPCS0R+8AAAAASUVORK5CYII=");
+    filter: opacity(.25);
+    margin: 0px;
+    padding: 2px;
+    margin-bottom: 2px;
+    cursor: pointer;
+    transition: filter 200ms;
+    user-select: none;
+    width: 21px;
+    height: 13px;
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+#filterButton:hover {
+    filter: opacity(.5);
+}
+
+#filterButton.filter-displayed {
+    filter: opacity(1);
+}
+
 .header-buttons {
     display: flex;
     width: 100%;
@@ -61,7 +99,7 @@ body>header, body>footer {
     margin-top: 5px;
     margin-bottom: 5px;
     margin-left: 2px;
-    padding: 2px;  
+    padding: 2px;
     border: solid 1px rgb(191, 191, 191);
 }
 
@@ -79,7 +117,8 @@ button:not([disabled]):hover {
     background-color: #ededed;
 }
 
-body>header button, body>footer button {
+body>header button,
+body>footer button {
     margin-top: 5px;
     margin-bottom: 5px;
     align-self: flex-end;
@@ -105,6 +144,12 @@ body>header button, body>footer button {
 .urls-head {
     background-color: #ececec;
     padding-left: 5px;
+    display: flex;
+    flex-direction: row;
+}
+
+#URLLabel {
+    flex: 1;
 }
 
 .urls-row>span {
@@ -258,6 +303,20 @@ html.side-panel,
         font-size: 11px;
     }
 
+    #filterPanel {
+        top: 32px;
+    }
+
+    #filterPanel input {
+        height: 14px;
+    }
+
+    #filterButton {
+        width: 17px;
+        height: 8px;
+        margin-bottom: 0px;
+    }
+
     .header-buttons>form>input {
         padding: 1px;
     }
@@ -284,7 +343,7 @@ html.side-panel,
 }
 
 @media (max-width:250px) {
-    .header-buttons > form {
+    .header-buttons>form {
         flex-direction: column;
     }
 }
@@ -312,6 +371,10 @@ html.side-panel,
         color: #fdfdfd;
     }
 
+    #filterButton {
+        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAwCAYAAABnjuimAAABhWlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV/TakUqIu0g4pChOlkoKuIoVSyChdJWaNXB5NIvaNKQpLg4Cq4FBz8Wqw4uzro6uAqC4AeIo5OToouU+L+k0CLWg+N+vLv3uHsHCI0KU01fFFA1y0jFY2I2tyr6X+FDL4KIYkhipp5IL2bQdXzdw8PXuwjP6n7uzzGg5E0GeETiOaYbFvEG8cympXPeJw6xkqQQnxNPGHRB4keuyy6/cS46LPDMkJFJzROHiMViB8sdzEqGSjxNHFZUjfKFrMsK5y3OaqXGWvfkLwzktZU012mOIo4lJJCECBk1lFGBhQitGikmUrQf6+IfcfxJcsnkKoORYwFVqJAcP/gf/O7WLExNukmBGNDzYtsfY4B/F2jWbfv72LabJ4D3GbjS2v5qA5j9JL3e1sJHwOA2cHHd1uQ94HIHGH7SJUNyJC9NoVAA3s/om3JA8BboX3N7a+3j9AHIUFfLN8DBITBepOz1Lu/u6+zt3zOt/n4AehRyqjxXv90AAAAGYktHRACKAIoAiuPa5yQAAAAJcEhZcwAALiMAAC4jAXilP3YAAAAHdElNRQfmBAYUGgvg8oPcAAAAGXRFWHRDb21tZW50AENyZWF0ZWQgd2l0aCBHSU1QV4EOFwAAAKZJREFUWMPt2DkOwCAMRNEB5f5XJhVNRMALi6PMP8ETsgsDMMb+VQKAUkoJC0wpAUD+yotmDhX7wtbXIm1/3fYmNAr2iWxCT2NbyFfoKewbsgvdje0hh9Bd2BFSBF2NlSDF0FVYKVIFnY3VINXQWVgt0gT1Yi1IM9SKtSJdUC3Wg3RDpVgvkqcIoYQSSiihhBIapuv0dXkUOhO4BLoCOK3I//+MsUY3urtAQnBIEzkAAAAASUVORK5CYII=");
+    }
+
     .urls-row {
         color: #dedede;
     }

src/extension/ui/pages/batch-save-urls.html

@@ -25,6 +25,10 @@
 	<main>
 		<div class="urls-row urls-head">
 			<span id="URLLabel"></span>
+			<span id="filterButton" tabindex="0"></span>
+		</div>
+		<div id="filterPanel" hidden>
+			<input id="filterInput" type="text">
 		</div>
 		<div id="urlsTable">
 		</div>