Merge pull request #2 from XFox111/v1-minor2

[v1.2] Restore without removing, tabs thumbnails and more

README.md

@@ -2,9 +2,7 @@
 
 [![Chrome Web Store](https://img.shields.io/chrome-web-store/users/mgmjbodjgijnebfgohlnjkegdpbdjgin?label=Chrome%20Web%20Store%20downloads)](https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin)
 [![Chrome Web Store](https://img.shields.io/chrome-web-store/rating/mgmjbodjgijnebfgohlnjkegdpbdjgin)](https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin)
-
 [![GitHub release (latest by date)](https://img.shields.io/github/v/release/xfox111/chromiumtabsaside)](https://github.com/xfox111/chromiumtabsaside/releases/latest)
-[![GitHub All Releases Downloads](https://img.shields.io/github/downloads/xfox111/chromiumtabsaside/total?label=GitHub%20downloads)](https://github.com/xfox111/chromiumtabsaside/releases/latest)
 
 [![GitHub issues](https://img.shields.io/github/issues/xfox111/chromiumtabsaside)](https://github.com/xfox111/ChromiumTabsAside/issues)
 [![GitHub last commit](https://img.shields.io/github/last-commit/xfox111/chromiumtabsaside)](https://github.com/xfox111/ChromiumTabsAside/commits/master)
@@ -32,17 +30,8 @@ Unfortunately, in new Chromium-based Microsoft Edge, the devs decided not to imp
 - [Microsoft Edge Add-ons Webstore](https://microsoftedge.microsoft.com/addons/detail/kmnblllmalkiapkfknnlpobmjjdnlhnd)
 - [GitHub Releases](https://github.com/xfox111/chromiumtabsaside/releases/latest)
 
-## To-do list
-- Add ability to backup and restore saved tabs
-- Add ability to share collections
-- Add ability to add collections to bookmarks
-- Add ability to sync saved tabs across different devices
-- Add saved tabs thumbnails
-- Add ability to reorder tabs inside collections
-- Add ability to restore collections without removing them from the pane
-- Add more languages (probably engage auto translator)
-- Code cleanup
-- Fix appearance on some websites
+## Project roadmap
+You can go to the project's [roadmap kanban board](https://github.com/XFox111/ChromiumTabsAside/projects/1) and see what have we planned and watch our progress in realtime
 
 ## Copyrights
 > ©2020 Michael "XFox" Gordeev

TabsAside.html

@@ -33,7 +33,7 @@
 				<nav>
 					<div>
 						<button value="https://github.com/xfox111/ChromiumTabsAside">Visit GitHub page</button>
-						<button value="https://chrome.google.com/webstore/category/extensions">Leave feedback</button>
+						<button value="https://chrome.google.com/webstore/detail/tabs-aside/mgmjbodjgijnebfgohlnjkegdpbdjgin">Leave feedback</button>
 						<button value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button>
 						<button hidden>Backup saved tabs</button>
 					</div>
@@ -50,34 +50,6 @@
 
 		<section>
 			<h2>You have no aside tabs</h1>
-
-				<!--<div>
-					<div>
-						<span>Tabs: $(tabsCount)</span>
-						<small>$(timestamp)</small>
-		
-						<a>Restore tabs</a>
-		
-						<div>
-							<button title="More...">&#xE10C;</button>
-							<nav>
-								<button>Add tabs to favorites</button>
-								<button>Share tabs</button>
-							</nav>
-						</div>
-						<button title="Remove collection">&#xE106;</button>
-					</div>
-		
-					<div>
-						<div title="Tab title caption">
-							<div>
-								<div></div>
-								<span>$(title)</span>
-								<button title="Remove tab from collection">&#xE106;</button>
-							</div>
-						</div>
-					</div>
-				</div>-->
 		</section>
 	</aside>
 

css/style.css

@@ -162,15 +162,10 @@
 			line-height: initial !important;
 		}
 
-		.tabsAside.pane > section > div > div:first-child > div
-		{
-			display: none !important;	/* TODO: Implement this menu */
-		}
-
 			.tabsAside.pane > section > div > div:first-child > div > nav
 			{
-				width: 200px !important;
-				margin-top: 10px !important;
+				width: 250px !important;
+				margin-top: 40px !important;
 				right: 50px !important;
 			}
 
@@ -196,6 +191,8 @@
 
 				background-color: #c2c2c2 !important;
 				background-image: url("chrome-extension://__MSG_@@extension_id__/images/tab_thumbnail.png");
+				background-size: cover !important;
+				background-position-x: center !important;
 
 				display: inline-grid !important;
 				grid-template-rows: 1fr auto !important;

css/style.generic.css

@@ -35,6 +35,7 @@
 {
 	font-family: 'Segoe UI', 'Segoe MDL2 Assets' !important;
 	color: #0078d7 !important;
+	font-weight: 400 !important;
 }
 	.tabsAside a:hover 
 	{
@@ -108,6 +109,7 @@
 		cursor: pointer !important;
 		background-color: transparent !important;
 		border: none !important;
+		box-sizing: border-box !important;
 		
 		font-size: medium !important;
 		text-align: start !important;

js/aside-script.js

@@ -123,7 +123,7 @@ function AddCollection(collection)
 	for (var i = 0; i < collection.links.length; i++)
 	{
 		rawTabs +=
-			"<div title='" + collection.titles[i] + "'>" +
+			"<div title='" + collection.titles[i] + "'" + ((collection.thumbnails[i]) ? " style='background-image: url(" + collection.thumbnails[i] + ")'" : "") + ">" +
 			"<span value='" + collection.links[i] + "'></span>" +
 			"<div>" +
 			"<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" +
@@ -141,8 +141,9 @@ function AddCollection(collection)
 		"<div>" +
 		"<button title='More...'>&#xE10C;</button>" +
 		"<nav>" +
-		"<button>Add tabs to favorites</button>" +
-		"<button>Share tabs</button>" +
+		"<button>Restore without removing</button>" +
+		"<button hidden>Add tabs to favorites</button>" +
+		"<button hidden>Share tabs</button>" +
 		"</nav>" +
 		"</div>" +
 		"<button title='Remove collection'>&#xE106;</button>" +
@@ -156,6 +157,11 @@ function AddCollection(collection)
 		i.onclick = function () { RestoreTabs(i.parentElement.parentElement) };
 	});
 
+	list.querySelectorAll("nav button:first-child").forEach(i => 
+	{
+		i.onclick = function () { RestoreTabs(i.parentElement.parentElement.parentElement.parentElement, false) };
+	});
+
 	list.querySelectorAll("div > div:last-child > div > span").forEach(i => 
 	{
 		i.onclick = function () {
@@ -173,14 +179,14 @@ function AddCollection(collection)
 		i.onclick = function () { RemoveTabs(i.parentElement.parentElement) };
 	});
 
-	document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:first-child").forEach(i => 
+	/*document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:first-child").forEach(i => 
 	{
 		i.onclick = function () { AddToFavorites(i.parentElement.parentElement.parentElement.parentElement) };
 	});
 	document.querySelectorAll(".tabsAside.pane > section > div > div:first-child > div > nav > button:last-child").forEach(i => 
 	{
 		i.onclick = function () { ShareTabs(i.parentElement.parentElement.parentElement.parentElement) };
-	});
+	});*/
 
 	document.querySelectorAll(".tabsAside.pane > section > div > div:last-child > div > div > button").forEach(i => 
 	{
@@ -193,15 +199,19 @@ function SetTabsAside()
 	chrome.runtime.sendMessage({ command: "saveTabs" });
 }
 
-function RestoreTabs(collectionData)
+function RestoreTabs(collectionData, removeCollection = true)
 {
 	chrome.runtime.sendMessage(
 		{
 			command: "restoreTabs",
+			removeCollection: removeCollection,
 			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
 		},
 		function ()
 		{
+			if (!removeCollection)
+				return;
+
 			if (collectionData.parentElement.children.length < 3)
 			{
 				RemoveElement(collectionData);

js/background.js

@@ -129,7 +129,7 @@ chrome.runtime.onMessage.addListener(function (message, sender, sendResponse)
 			SaveCollection();
 			break;
 		case "restoreTabs":
-			RestoreCollection(message.collectionIndex);
+			RestoreCollection(message.collectionIndex, message.removeCollection);
 			sendResponse();
 			break;
 		case "deleteTabs":
@@ -179,8 +179,8 @@ function SaveCollection()
 			tabsCount: tabs.length,
 			titles: tabs.map(tab => tab.title ?? ""),
 			links: tabs.map(tab => tab.url ?? ""),
-			icons: tabs.map(tab => tab.favIconUrl ?? "")//,
-			//tumbnails: tabs.map(tab => chrome.tabs.captureVisibleTab)
+			icons: tabs.map(tab => tab.favIconUrl ?? ""),
+			thumbnails: tabs.map(tab => thumbnails.find(i => i.tabId == tab.id)?.url ?? "")
 		};
 
 		var rawData;
@@ -211,7 +211,7 @@ function DeleteCollection(collectionIndex)
 	UpdateTheme();
 }
 
-function RestoreCollection(collectionIndex)
+function RestoreCollection(collectionIndex, removeCollection)
 {
 	collections[collectionIndex].links.forEach(i => 
 	{
@@ -222,6 +222,9 @@ function RestoreCollection(collectionIndex)
 			});
 	});
 
+	if (!removeCollection)
+		return;
+
 	collections = collections.filter(i => i != collections[collectionIndex]);
 	localStorage.setItem("sets", JSON.stringify(collections));
 
@@ -280,3 +283,40 @@ function RemoveTab(collectionIndex, tabIndex)
 
 	UpdateTheme();
 }
+
+var thumbnails = [];
+
+function AppendThumbnail(tabId, cahngeInfo, tab)
+{
+	if (!tab.active || !tab.url.startsWith("http"))
+		return;
+
+	chrome.tabs.captureVisibleTab(
+		{
+			format: "jpeg",
+			quality: 1
+		},
+		function (dataUrl)
+		{
+			if(!dataUrl)
+			{
+				console.log("Failed to retrieve thumbnail");
+				return;
+			}
+
+			console.log("Thumbnail retrieved");
+			var item = thumbnails.find(i => i.tabId == tabId);
+			if (item)
+				item.url = dataUrl;
+			else
+				thumbnails.unshift(
+					{
+						tabId: tabId,
+						url: dataUrl
+					}
+				);
+		}
+	);
+}
+
+chrome.tabs.onUpdated.addListener(AppendThumbnail);

manifest.json

@@ -4,12 +4,11 @@
 	"manifest_version": 2,
 	"description": "Classic Microsoft Edge \"Tabs Aside\" feature for Chromium browsers",
 	"author": "Michael \"XFox\" Gordeev",
-	"default_locale": "en",
 	"permissions": 
 	[
 		"tabs",
 		"unlimitedStorage",
-		"activeTab"
+		"<all_urls>"
 	],
 	
 	"icons":