Done extension UI and basic interactions

collections.html

@@ -0,0 +1,56 @@
+<div class="aside pane" id="aside-pane" style="transform: translateX(110%);">
+	<div class="header">
+		<div class="title">
+			<h1>Tabs aside</h1>
+			<button title="Options">&#xE10C;</button>
+
+			<nav>
+				<div>
+					<button onclick="window.open('https://github.com/xfox111/ChromiumTabsAside', '_blank')">Visit GitHub page</button>
+					<button onclick="window.open('https://chrome.google.com/webstore/category/extensions', '_blank')">Leave feedback</button>
+					<button onclick="window.open('https://www.buymeacoffee.com/xfox111', '_blank')">Buy me a coffee!</button>
+				</div>
+				<p>
+					<small>v1.0</small><br />
+					Developed by Michael Gordeev (<a href="https://twitter.com/xfox111" target="_blank">@xfox111</a>)
+				</p>
+			</nav>
+		</div>
+		<a class="setAside">&#xE0AB; Set current tabs aside</a>
+		<hr />
+	</div>
+
+	<div id="content">
+		<h2 id="noTabsTitle" style="display: none;">You have no aside tabs</h1>
+
+		<div class="set">
+			<div class="setHeader">
+				<div>
+					<span>Tabs: $(tabsCount)</span>
+					<small>$(timestamp)</small>
+				</div>
+				<div>
+					<a>Restore tabs</a>
+					<button title="More...">&#xE10C;</button>
+					<nav>
+						<button>Add tabs to favorites</button>
+						<button>Share tabs</button>
+					</nav>
+					<button title="Remove collection">&#xE106;</button>
+				</div>
+			</div>
+
+			<div class="collection">
+				<div class="item" title="Tab title caption">
+					<div class="caption">
+						<div></div>
+						<span>$(title)</span>
+						<button title="Remove tab from collection">&#xE106;</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<link id="darkCSS" rel="stylesheet" type="text/css" href="%EXTENSION_PATH%css/style.dark.css" disabled/>
+</div>

css/style.css

@@ -0,0 +1,178 @@
+.aside.pane
+{
+	font-family: 'Segoe UI', 'Segoe MDL2 Assets';
+	user-select: none;
+	position: fixed;
+	z-index: 999;
+
+	right: 0px;
+	top: 0px;
+	width: 40%;
+	min-width: 500px;
+	min-height: 100%;
+
+	background-color: #f7f7f7;
+	border: 1px solid rgba(100, 100, 100, .5);
+	box-sizing: border-box;
+	box-shadow: 6px 0px 12px black;
+
+	transition: .2s;
+}
+
+	.aside.pane > .header
+	{
+		margin: 20px 40px;
+	}
+		.aside.pane > .header > .title
+		{
+			display: grid;
+			grid-template-columns: 1fr auto;
+		}
+
+			.aside.pane > .header > .title > h1
+			{
+				margin: 10px 0px;
+				font-weight: normal;
+				font-size: 21pt;
+			}
+
+			.aside.pane > .header > .title > button
+			{
+				margin: auto;
+			}
+			
+			.aside.pane > .header > .title > nav
+			{
+				top: 70px;
+				right: 40px;
+			}
+
+				.aside.pane > .header > .title > nav > div
+				{
+					box-shadow: 0px 4px 5px -2px rgba(100, 100, 100, .5);
+				}
+
+				.aside.pane > .header > .title > nav > p
+				{
+					margin: 10px;
+				}
+
+		.aside.pane > .header > hr
+		{
+			border: 1px solid #8a8a8a;
+		}
+
+	.aside.pane > #content > h2
+	{
+		margin: 0px 40px;
+		font-weight: normal;
+	}
+
+	.aside.pane > #content > .set > .setHeader
+	{
+		margin: 0px 20px;
+		display: grid;
+		grid-template-columns: 1fr auto;
+	}
+
+		.aside.pane > #content > .set > .setHeader small
+		{
+			color: gray;
+		}
+
+		.aside.pane > #content > .set > .setHeader span
+		{
+			font-weight: 600;
+		}
+
+		.aside.pane > #content > .set > .setHeader a
+		{
+			font-size: 11pt;
+			font-weight: 500;
+		}
+		.aside.pane > #content > .set > .setHeader nav
+		{
+			width: 200px;
+			margin-top: 10px;
+			right: 50px;
+		}
+
+		.aside.pane > #content > .set > .setHeader > div:first-child
+		{
+			margin: auto 0px;
+		}
+
+		.aside.pane > #content > .set > .collection
+		{
+			padding: 10px 0px;
+			padding-left: 40px;
+			white-space: nowrap;
+			overflow: auto;
+		}
+
+			.aside.pane > #content > .set > .collection > .item
+			{
+				width: 175px;
+				height: 148px;
+				margin: 5px;
+
+				background-color: #c2c2c2;
+				background-image: url("../images/tab_thumbnail.png");
+
+				display: inline-grid;
+				grid-template-rows: 1fr auto;
+
+				box-shadow: 0px 0px 5px rgba(100, 100, 100, .5);
+				transition: .25s;
+				cursor: pointer;
+			}
+				.aside.pane > #content > .set > .collection > .item:hover
+				{
+					filter: brightness(120%);
+					box-shadow: 0px 0px 15px rgba(100, 100, 100, .5);
+				}
+
+				.aside.pane > #content > .set > .collection > .item > .caption
+				{
+					background-color: rgba(233, 233, 233, .75);
+					grid-row: 2;
+					display: grid;
+					grid-template-columns: auto 1fr auto;
+				}
+
+					.aside.pane > #content > .set > .collection > .item > .caption > button
+					{
+						margin: auto;
+						margin-right: 5px;
+						visibility: hidden;
+					}
+
+					.aside.pane > #content > .set > .collection > .item:hover > .caption > button
+					{
+						visibility: visible;
+					}
+
+					.aside.pane > #content > .set > .collection > .item > .caption > div
+					{
+						width: 20px;
+						height: 20px;
+						margin: 10px;
+
+						background-image: url("../images/tab_icon.png");
+					}
+
+					.aside.pane > #content > .set > .collection > .item > .caption > span
+					{
+						margin: auto 0px;
+					}
+
+@media only screen and (max-width: 500px)
+{
+	.aside.pane
+	{
+		right: initial;
+		width: 100%;
+		left: 0px;
+		min-width: initial;
+	}
+}

css/style.dark.css

@@ -0,0 +1,54 @@
+.aside.pane
+{	
+	background-color: #333333;
+	color: white;
+}
+
+.aside button
+{
+	color: white;
+}
+.aside button:hover
+{
+	background-color: gray;
+}
+.aside button:active
+{
+	background-color: dimgray;
+}
+
+.aside.pane > #content > .set > .setHeader small
+{
+	color: lightgray;
+}
+
+.aside ::-webkit-scrollbar-thumb
+{
+	background: gray;
+	border-radius: 3px;
+}
+	::-webkit-scrollbar-thumb:hover
+	{
+		background: dimgray;
+	}
+
+.aside.pane > #content > .set > .collection > .item
+{
+	background-color: #0c0c0c;
+	background-image: url("../images/tab_thumbnail_dark.png");
+}
+
+.aside.pane > #content > .set > .collection > .item > .caption
+{
+	background-color: rgba(50, 50, 50, .75);
+}
+
+.aside nav
+{
+	background-color: #3f3f3f;
+}
+
+.aside.pane > #content > .set > .collection > .item > .caption > div
+{
+	background-image: url("../images/tab_icon_dark.png");
+}

css/style.generic.css

@@ -0,0 +1,123 @@
+.aside ::-webkit-scrollbar 
+{
+	height: 6px;
+}
+
+.aside ::-webkit-scrollbar-thumb
+{
+	background: darkgray;
+	border-radius: 3px;
+}
+	::-webkit-scrollbar-thumb:hover
+	{
+		background: gray;
+	}
+
+.aside a
+{
+	font-family: 'Segoe UI', 'Segoe MDL2 Assets';
+	color: #0078d7;
+}
+	.aside a:hover 
+	{
+		text-decoration: underline;
+		cursor: pointer;
+	}
+
+.aside .slider
+{
+	position: relative;
+	display: inline-block;
+
+	border-radius: 13px;
+	width: 50px;
+	height: 26px;
+	
+	background-color: #cccccc;
+	transition: .4s;
+}
+
+	.aside .slider:before
+	{
+		position: absolute;
+		content: "";
+
+		height: 16px;
+		width: 16px;
+		left: 5px;
+		top: 5px;
+		border-radius: 50%;
+
+		margin: auto;
+
+		background-color: white;
+		transition: .3s;
+	}
+
+	.aside input:checked + .slider,
+	.aside input:focus + .slider
+	{
+		background-color: #0078d7;
+	}
+
+	.aside input:checked + .slider:before
+	{
+		transform: translateX(24px);
+		background-color: #3f3f3f;
+	}
+
+.aside nav
+{
+	font-family: 'Segoe UI';
+	user-select: none;
+
+	position: absolute;
+	width: 250px;
+
+	box-shadow: 0px 0px 10px black;
+	background-color: white;
+	border-radius: 5px;
+
+	z-index: 10;
+
+    visibility: hidden;
+}
+
+	.aside nav button 
+	{
+		font-family: 'Segoe UI';
+		cursor: pointer;
+		background-color: transparent;
+		border: none;
+		
+		font-size: medium;
+		text-align: start;
+
+		padding: 10px;
+		width: 100%;
+		height: initial;
+	}
+
+	.aside button + nav:active,
+	.aside button:focus + nav 
+	{
+		visibility: visible;
+	}
+
+.aside button
+{
+	font-family: 'Segoe MDL2 Assets';
+	width: 32px;
+	height: 32px;
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+}
+	.aside button:hover
+	{
+		background-color: #c6c6c6;
+	}
+	.aside button:active
+	{
+		background-color: gray;
+	}

js/aside-script.js

@@ -0,0 +1,40 @@
+chrome.runtime.onMessage.addListener(function(sender, request, sendResponse)
+{
+	var pane = document.querySelector("#aside-pane");
+	if (pane.style.transform == "translateX(110%)")
+	{
+		pane.style.transform = "translateX(0%)";
+	}
+	else
+	{
+		pane.style.transform = "translateX(110%)";
+	}
+
+	UpdateTheme();
+	
+	sendResponse();
+});
+
+var xhr = new XMLHttpRequest();
+xhr.open('GET', chrome.extension.getURL("collections.html"), true);
+xhr.onreadystatechange = function () 
+{
+	if (this.status !== 200 || document.querySelector("#aside-pane") != null)
+		return;
+
+	document.body.innerHTML += this.responseText.split("%EXTENSION_PATH%").join(chrome.extension.getURL(""));
+};
+xhr.send();
+
+function UpdateTheme()
+{
+	var css = document.querySelector("#aside-pane #darkCSS")
+	if (window.matchMedia("(prefers-color-scheme: dark)").matches)
+	{
+		css.removeAttribute("disabled");
+	}
+	else
+	{
+		css.setAttribute("disabled", true);
+	}
+}

js/background.js

@@ -0,0 +1,50 @@
+function UpdateTheme()
+{
+	if (window.matchMedia("(prefers-color-scheme: dark)").matches)
+	{
+		chrome.browserAction.setIcon(
+		{
+			path: 
+			{
+				"128": "icons/dark/empty/128.png",
+				"48": "icons/dark/empty/48.png",
+				"32": "icons/dark/empty/32.png",
+				"16": "icons/dark/empty/16.png"
+			}
+		});
+	}
+	else
+	{
+		chrome.browserAction.setIcon(
+		{
+			path: 
+			{
+				"128": "icons/light/empty/128.png",
+				"48": "icons/light/empty/48.png",
+				"32": "icons/light/empty/32.png",
+				"16": "icons/light/empty/16.png"
+			}
+		});
+	}
+}
+
+UpdateTheme();
+chrome.windows.onCreated.addListener(UpdateTheme);
+chrome.windows.onRemoved.addListener(UpdateTheme);
+chrome.windows.onFocusChanged.addListener(UpdateTheme);
+
+chrome.tabs.onUpdated.addListener(UpdateTheme);
+chrome.tabs.onCreated.addListener(UpdateTheme);
+chrome.tabs.onMoved.addListener(UpdateTheme);
+chrome.tabs.onSelectionChanged.addListener(UpdateTheme);
+chrome.tabs.onActiveChanged.addListener(UpdateTheme);
+chrome.tabs.onActivated.addListener(UpdateTheme);
+chrome.tabs.onHighlightChanged.addListener(UpdateTheme);
+chrome.tabs.onHighlighted.addListener(UpdateTheme);
+chrome.tabs.onDetached.addListener(UpdateTheme);
+chrome.tabs.onAttached.addListener(UpdateTheme);
+chrome.tabs.onRemoved.addListener(UpdateTheme);
+chrome.tabs.onReplaced.addListener(UpdateTheme);
+chrome.tabs.onZoomChange.addListener(UpdateTheme);
+
+// TODO: Load saved tabs

manifest.json

@@ -0,0 +1,39 @@
+{
+	"name": "Tabs Aside",
+	"version": "0.1",
+	"manifest_version": 2,
+	"description": "Classic Microsoft Edge \"Tabs Aside\" feature",
+	"author": "Michael \"XFox\" Gordeev",
+	"permissions": [ "tabs" ],
+	
+	"icons": 
+	{
+		"128": "icons/light/empty/128.png",
+		"48": "icons/light/empty/48.png",
+		"32": "icons/light/empty/32.png",
+		"16": "icons/light/empty/16.png"
+	},
+	"web_accessible_resources": [ "*" ],
+
+	"browser_action": 
+	{
+		"default_popup": "popup/popup.html"
+	},
+	"content_scripts":
+	[
+		{
+			"matches": [ "<all_urls>" ],
+			"js": [ "js/aside-script.js" ],
+			"css":
+			[
+				"css/style.css",
+				"css/style.generic.css"
+			]
+		}
+	],
+	"background":
+	{
+		"scripts": ["js/background.js"],
+		"persistent": true
+	}
+}

popup/popup.html

@@ -0,0 +1,8 @@
+<html>
+	<head>
+		<meta charset="utf-8" />
+	</head>
+	<body>
+		<script type="text/javascript" src="trigger.js"></script>
+	</body>
+</html>

popup/trigger.js

@@ -0,0 +1,11 @@
+chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) 
+{
+	chrome.tabs.sendMessage(
+		tabs[0].id,
+		{ },
+		function() 
+		{
+			window.close();
+		}
+	);
+});