Minor 1.8 (#34)

- Ability to rename Tab Groups #33
- Added collections view switch #35

.github/workflows/ci.yaml

@@ -0,0 +1,73 @@
+name: CI
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ master ]
+    paths:
+      # Trigger deploy on manifest change
+      - 'manifest.json'
+
+jobs:
+  Firefox:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Build Extension for Firefox
+      id: web-ext-build
+      uses: kewisch/action-web-ext@v1
+      with:
+        cmd: build
+
+    - name: Sign build
+      id: web-ext-sign
+      uses: kewisch/action-web-ext@v1
+      with:
+        cmd: sign
+        source: ${{ steps.web-ext-build.outputs.target }}
+        apiKey: ${{ secrets.FIREFOX_API_KEY }}
+        apiSecret: ${{ secrets.FIREFOX_CLIENT_SECRET }}
+
+    - name: Publish to Firefox Webstore
+      uses: trmcnvn/firefox-addon@v1
+      with:
+        uuid: tabsaside@xfox111.net
+        xpi: ${{ steps.web-ext-sign.outputs.target }}
+        manifest: ./manifest.json
+        api-key: ${{ secrets.FIREFOX_API_KEY }}
+        api-secret: ${{ secrets.FIREFOX_CLIENT_SECRET }}
+
+    - name: Drop artifacts
+      uses: actions/upload-artifact@v2
+      with:
+        name: 'Firefox Artefacts'
+        path: ${{ steps.web-ext-sign.outputs.target }}
+
+  Chrome:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v2
+
+    - name: Pack extension
+      uses: TheDoctor0/zip-release@0.4.1
+      with:
+        filename: ./TabsAside.zip
+        exclusions: '.git/* .vscode/* .github/* *.md'
+
+    - name: Publish to Chrome Webstore
+      uses: SebastienGllmt/chrome-addon@v3
+      with:
+        extension: mgmjbodjgijnebfgohlnjkegdpbdjgin
+        zip: ./TabsAside.zip
+        client-id: ${{ secrets.CHROME_CLIENT_ID }}
+        client-secret: ${{ secrets.CHROME_CLIENT_SECRET }}
+        refresh-token: ${{ secrets.CHROME_REFRESH_TOKEN }}
+
+    - name: Drop artifacts
+      uses: actions/upload-artifact@v2
+      with:
+        name: 'Chrome Artifacts'
+        path: ./TabsAside.zip

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Welcome, and thank you for your interest in contributing to my project!
 There are many ways in which you can contribute, beyond writing code. The goal of this document is to provide a high-level overview of how you can get involved.
 
 ## Table of Contents
-- [Contribution Guidelines](#gutschedule-contribution-guidelines)
+- [Contribution Guidelines](#contribution-guidelines)
   - [Table of Contents](#table-of-contents)
   - [Asking Questions](#asking-questions)
   - [Providing Feedback](#providing-feedback)

README.md

@@ -1,8 +1,9 @@
 # Tabs aside
+[![GitHub release (latest by date)](https://img.shields.io/github/v/release/xfox111/TabsAsideExtension)](https://github.com/xfox111/TabsAsideExtension/releases/latest)
+![CI](https://github.com/XFox111/TabsAsideExtension/workflows/CI/badge.svg)
 
 [![Chrome Web Store](https://img.shields.io/chrome-web-store/users/mgmjbodjgijnebfgohlnjkegdpbdjgin?label=Chrome%20Webstore%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/TabsAsideExtension)](https://github.com/xfox111/TabsAsideExtension/releases/latest)
 
 [![Mozilla Add-on](https://img.shields.io/amo/users/ms-edge-tabs-aside?label=Firefox%20Webstore%20downloads)](https://addons.mozilla.org/firefox/addon/ms-edge-tabs-aside/)
 [![Mozilla Add-on](https://img.shields.io/amo/rating/ms-edge-tabs-aside)](https://addons.mozilla.org/firefox/addon/ms-edge-tabs-aside/)
@@ -43,8 +44,8 @@ You can go to the project's [roadmap kanban board](https://github.com/XFox111/Ta
 
 ## Contributing
 There are many ways in which you can participate in the project, for example:
-- [Submit bugs and feature requests](https://github.com/xfox111/gutschedule/issues), and help us verify as they are checked in
-- Review [source code changes](https://github.com/xfox111/gutschedule/pulls)
+- [Submit bugs and feature requests](https://github.com/xfox111/TabsAsideExtension/issues), and help us verify as they are checked in
+- Review [source code changes](https://github.com/xfox111/TabsAsideExtension/pulls)
 - Review documentation and make pull requests for anything from typos to new content
 
 If you are interested in fixing issues and contributing directly to the code base, please see the [Contribution Guidelines](https://github.com/XFox111/TabsAsideExtension/blob/master/CONTRIBUTING.md), which covers the following:

TabsAside.html

@@ -8,49 +8,59 @@
 	<link rel="stylesheet" type="text/css" href="css/style.css" />
 	<link rel="stylesheet" type="text/css" href="css/style.generic.css" />
 	<link rel="stylesheet" type="text/css" href="css/style.dark.css" />
+	<link rel="stylesheet" type="text/css" href="css/style.listview.css" />
 
-	<meta charset="utf-8"/>
+	<meta charset="utf-8" />
 </head>
 
 <body>
 	<div class="tabsAside background">
 		<aside class="tabsAside pane">
 			<header>
-				<div>
-					<h1 loc="name">Tabs aside</h1>
-					<button loc_alt="options" class="btn more" title="Options"></button>
+				<h1 loc="name">Tabs aside</h1>
+				<button loc_alt="options" class="btn more" title="Options"></button>
 
-					<nav>
-						<p>
-							<input type="checkbox" id="loadOnRestore"/>
-							<label loc="loadOnRestore" for="loadOnRestore">Load tabs on restore</label>
-						</p>
-						<p>
-							<input type="checkbox" id="swapIconAction"/>
-							<label loc="swapIconAction" for="swapIconAction">Set tabs aside on extension icon click (Alt+P or right-click to open the pane)</label>
-						</p>
-						<p>
-							<input type="checkbox" id="showDeleteDialog"/>
-							<label loc="showDeleteDialog" for="showDeleteDialog">Show confirmation dialog before deleting an item</label>
-						</p>
-						<hr/>
-						<div>
-							<button loc="github" value="https://github.com/xfox111/TabsAsideExtension">Visit GitHub page</button>
-							<button loc="contributors" value="https://github.com/XFox111/TabsAsideExtension/graphs/contributors">Project contributors</button>
-							<button loc="feedback" feedback-button>Leave feedback</button>
-							<button loc="buyMeACoffee" value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button>
-						</div>
-						<hr/>
-						<p>
-							<small>v1.0</small><br />
-							<span loc="credits">Developed by Michael Gordeev</span> (<a href="https://twitter.com/xfox111"
-								target="_blank">@xfox111</a>)
-						</p>
-					</nav>
+				<nav>
+					<p>
+						<input type="checkbox" id="loadOnRestore" />
+						<label loc="loadOnRestore" for="loadOnRestore">Load tabs on restore</label>
+					</p>
+					<p>
+						<input type="checkbox" id="swapIconAction" />
+						<label loc="swapIconAction" for="swapIconAction">Set tabs aside on extension icon click (Alt+P or right-click to open the pane)</label>
+					</p>
+					<p>
+						<input type="checkbox" id="showDeleteDialog" />
+						<label loc="showDeleteDialog" for="showDeleteDialog">Show confirmation dialog before deleting an item</label>
+					</p>
+					<hr />
+					<div>
+						<button loc="github" value="https://github.com/xfox111/TabsAsideExtension">Visit GitHub page</button>
+						<button loc="contributors" value="https://github.com/XFox111/TabsAsideExtension/graphs/contributors">Project contributors</button>
+						<button loc="feedback" feedback-button>Leave feedback</button>
+						<button loc="buyMeACoffee" value="https://buymeacoffee.com/xfox111">Buy me a coffee!</button>
+					</div>
+					<hr />
+					<p>
+						<small>v1.0</small><br />
+						<span loc="credits">Developed by Michael Gordeev</span> (<a href="https://twitter.com/xfox111" target="_blank">@xfox111</a>)
+					</p>
+				</nav>
 
-					<button loc_alt="closePanel" class="btn remove" title="Close panel"></button>
-				</div>
+				<button loc_alt="closePanel" class="btn remove" title="Close panel"></button>
 				<a class="saveTabs"><span class="iconArrowRight"></span> <span loc="setAside">Set current tabs aside</span></a>
+
+				<div class="listviewSwitch tile">
+					<div></div>
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
+				<div class="listviewSwitch list">
+					<div></div>
+					<div></div>
+					<div></div>
+				</div>
 			</header>
 
 			<section>

css/style.css

@@ -53,23 +53,20 @@
 		padding: 14px 20px 16px 20px;
 		box-shadow: 0px 0px 5px rgba(0,0,0,.5);
 		background-color: white;
+		display: grid;
+		grid-template-columns: 1fr auto auto;
+		grid-column-gap: 10px;
+		grid-row-gap: 30px;
 	}
-		.tabsAside.pane > header > div
-		{
-			display: grid;
-			grid-template-columns: 1fr auto auto;
-			grid-column-gap: 10px;
-			margin-bottom: 29px;
-		}
 
-			.tabsAside.pane > header > div > h1
+			.tabsAside.pane > header > h1
 			{
 				margin: 0px 5px;
 				font-weight: 500;
 				font-size: 15pt;
 			}
 
-			.tabsAside.pane > header > div > nav
+			.tabsAside.pane > header > nav
 			{
 				top: 45px;
 				right: 55px;
@@ -92,6 +89,7 @@
 			grid-column-gap: 15px;
 
 			font-weight: 600;
+			margin-right: auto;
 		}
 
 		.iconArrowRight
@@ -162,11 +160,18 @@
 			visibility: visible !important;
 		}
 
-		.collectionSet > .header > h4
+		.collectionSet > .header > input
 		{
 			margin: 0px;
 			visibility: visible !important;
 			font-weight: 500;
+			border: none;
+			background: transparent;
+		}
+
+		.collectionSet > .header > input:hover
+		{
+			border: 1px solid black;
 		}
 
 		.collectionSet > .header > a

css/style.dark.css

@@ -38,6 +38,22 @@
 		background-color: dimgray;
 	}
 
+	.tabsAside[darkmode] .collectionSet > .header > input
+	{
+		color: white;
+	}
+
+	.tabsAside[darkmode] .collectionSet > .header > input:hover
+	{
+		border: 1px solid dimgray;
+	}
+
+	.tabsAside[darkmode] .collectionSet > .header > input:focus
+	{
+		background: white;
+		color: black;
+	}
+
 	.tabsAside[darkmode] a
 	{
 		color: #48adff;

css/style.listview.css

@@ -0,0 +1,58 @@
+.tabsAside[listview] .collectionSet > .header
+{
+	margin-bottom: 5px;
+}
+
+.tabsAside[listview] .collectionSet > .set
+{
+	max-height: 250px;
+}
+
+.tabsAside[listview] .collectionSet > .set > div
+{
+	width: initial;
+	height: initial;
+	background-image: none !important;
+	display: block;
+}
+
+.listviewSwitch
+{
+	width: 20px;
+	height: 20px;
+	display: grid;
+	grid-row-gap: 2px;
+	grid-column-gap: 2px;
+	cursor: pointer;
+}
+
+.listviewSwitch.tile
+{
+	grid-template-columns: 1fr 1fr;
+}
+
+.listviewSwitch > div
+{
+	border-radius: 1px;
+	background-color: #c2c2c2;
+}
+
+.listviewSwitch:hover > div
+{
+	background-color: #a0a0aa;
+}
+
+.tabsAside .listviewSwitch.tile > div
+{
+	background-color: gray;
+}
+
+.tabsAside[listview] .listviewSwitch.tile > div
+{
+	background-color: #c2c2c2;
+}
+
+.tabsAside[listview] .listviewSwitch.list > div
+{
+	background-color: gray;
+}

js/aside-script.js

@@ -128,7 +128,7 @@ function Initialize()
 		if (namespace == 'sync')
 			for (key in changes)
 				if (key === 'showDeleteDialog')
-				showDeleteDialog.checked = changes[key].newValue
+					showDeleteDialog.checked = changes[key].newValue
 	});
 	showDeleteDialog.addEventListener("click", () =>
 		chrome.storage.sync.set(
@@ -137,6 +137,42 @@ function Initialize()
 			})
 	);
 
+	// Collections view switch
+	chrome.storage.sync.get(
+		{ "listview": false },
+		values =>
+		{
+			if (values?.listview)
+				pane.setAttribute("listview", "");
+		}
+	);
+	document.querySelectorAll(".listviewSwitch").forEach(i =>
+		{
+			i.onclick = (args) =>
+			{
+				if (args.currentTarget.classList[1] == "list")
+				{
+					pane.setAttribute("listview", "");
+					chrome.storage.sync.set({ "listview": true });
+				}
+				else
+				{
+					pane.removeAttribute("listview");
+					chrome.storage.sync.set({ "listview": false });
+				}
+			}
+		});
+	chrome.storage.onChanged.addListener((changes, namespace) =>
+	{
+		if (namespace == 'sync')
+			for (key in changes)
+				if (key === 'listview')
+					if (changes[key].newValue)
+						pane.setAttribute("listview", "");
+					else
+						pane.removeAttribute("listview");
+	});
+
 	document.querySelectorAll(".tabsAside.pane > header nav button").forEach(i =>
 		i.onclick = () =>
 		{
@@ -182,8 +218,8 @@ function AddCollection(collection)
 	for (var i = 0; i < collection.links.length; i++)
 	{
 		rawTabs +=
-			"<div title='" + collection.titles[i] + "'" + ((collection.thumbnails && collection.thumbnails[i]) ? " style='background-image: url(" + collection.thumbnails[i] + ")'" : "") + ">" +
-				"<span class='openTab' value='" + collection.links[i] + "'></span>" +
+			"<div title='" + collection.titles[i] + "'" + ((collection.thumbnails && collection.thumbnails[i]) ? " style='background-image: url(" + collection.thumbnails[i] + ")'" : "") + " value='" + collection.links[i] + "'>" +
+				//"<span class='openTab' value='" + collection.links[i] + "'></span>" +
 				"<div>" +
 					"<div" + ((collection.icons[i] == 0 || collection.icons[i] == null) ? "" : " style='background-image: url(\"" + collection.icons[i] + "\")'") + "></div>" +
 					"<span>" + collection.titles[i] + "</span>" +
@@ -195,7 +231,7 @@ function AddCollection(collection)
 	list.innerHTML +=
 		"<div class='collectionSet'>" +
 			"<div class='header'>" +
-				"<h4>" + new Date(collection.timestamp).toDateString() + "</h4>" +
+				"<input type='text' value='" + (collection.name ?? new Date(collection.timestamp).toDateString()) + "'/>" +
 				"<a loc='restoreTabs' class='restoreCollection'>Restore tabs</a>" +
 				"<div>" +
 					"<button loc_alt='more' class='btn more' title='More...'></button>" +
@@ -212,26 +248,33 @@ function AddCollection(collection)
 
 	UpdateLocale();
 
+	list.querySelectorAll("input").forEach(i =>
+		i.oninput = (event) => RenameCollection(i.parentElement.parentElement, event.target.value));
+
 	list.querySelectorAll(".restoreCollection").forEach(i =>
 		i.onclick = () => RestoreTabs(i.parentElement.parentElement));
 
 	list.querySelectorAll(".restoreCollection.noDelete").forEach(i =>
 		i.onclick = () => RestoreTabs(i.parentElement.parentElement.parentElement.parentElement, false));
 
-	list.querySelectorAll(".openTab").forEach(i =>
-		i.onclick = () =>
-			chrome.runtime.sendMessage(
-				{
-					command: "openTab",
-					url: i.getAttribute("value")
-				}
-			));
+	list.querySelectorAll(".set > div").forEach(i =>
+		i.onclick = (args) =>
+		{
+			if (args.target.localName != "button")
+				chrome.runtime.sendMessage(
+					{
+						command: "openTab",
+						url: i.getAttribute("value")
+					}
+				);
+		});
 
 	document.querySelectorAll(".header .btn.remove").forEach(i =>
 		i.onclick = () => RemoveTabs(i.parentElement.parentElement));
 
 	document.querySelectorAll(".set .btn.remove").forEach(i =>
-		i.onclick = () => RemoveOneTab(i.parentElement.parentElement));
+		i.onclick = (args) =>
+			RemoveOneTab(i.parentElement.parentElement));
 }
 
 function SetTabsAside()
@@ -239,6 +282,16 @@ function SetTabsAside()
 	chrome.runtime.sendMessage({ command: "saveTabs" });
 }
 
+function RenameCollection(collectionData, name)
+{
+	chrome.runtime.sendMessage(
+		{
+			command: "renameCollection",
+			newName: name,
+			collectionIndex: Array.prototype.slice.call(collectionData.parentElement.children).indexOf(collectionData) - 1
+		});
+}
+
 function RestoreTabs(collectionData, removeCollection = true)
 {
 	chrome.runtime.sendMessage(

js/background.js

@@ -119,6 +119,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) =>
 			RemoveTab(message.collectionIndex, message.tabIndex);
 			sendResponse();
 			break;
+		case "renameCollection":
+			collections[message.collectionIndex].name = message.newName;
+			localStorage.setItem("sets", JSON.stringify(collections));
+			break;
 		case "togglePane":
 			chrome.tabs.query(
 				{

manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "__MSG_name__",
-	"version": "1.7.3",
+	"version": "1.8",
 	"manifest_version": 2,
 	"description": "__MSG_description__",
 	"author": "__MSG_author__",