v0.0.14

src/bg.js

@@ -1,46 +1,51 @@
 const kTST_ID = 'treestyletab@piro.sakura.ne.jp';
 const MY_EXTENSION_NAME = 'tab-groupcolor';
+let tabIcons = {};
 
 var changeIcon = function(color, currentIcon, options) {
 	var canvas = document.createElement('canvas');
-	canvas.width = 16;
-	canvas.height = 16;
 	var ctx = canvas.getContext('2d');
 	var img = new Image();
 
-	if (currentIcon && typeof(currentIcon) !== 'undefined' && currentIcon !== null && currentIcon !== 'undefined') {
+	if (currentIcon && typeof(currentIcon) !== 'undefined' && currentIcon !== null && currentIcon !== "null" && currentIcon !== 'undefined') {
 		img.src = currentIcon;
 	} else {
 		img.src = 'data:image/x-icon;base64,AAABAAEAEBACAAEAAQCwAAAAFgAAACgAAAAQAAAAIAAAAAEAAQAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA';
 	}
 
 	img.onload = function() {
+		canvas.width = this.naturalWidth;
+		canvas.height = this.naturalHeight;
 		ctx.drawImage(img, 0, 0);
 		ctx.fillStyle = color;
 		if (options.globals.orientation === 'vertical') {
-			ctx.fillRect(0, 0, options.globals.width, 16);
+			ctx.fillRect(0, 0, (options.globals.width / 16) * canvas.width, canvas.height);
 		} else {
-			ctx.fillRect(0, 0, 16, options.globals.width);
+			ctx.fillRect(0, 0, canvas.width, (options.globals.width / 16) * canvas.height);
 		}
 
-
 		var link = document.createElement('link');
 		link.type = 'image/x-icon';
 		link.rel = 'shortcut icon';
 		link.href = canvas.toDataURL("image/x-icon");
+		link.id = 'tab-groupcolor' + '-favicon';
+		var oldicon = document.getElementById('tab-groupcolor' + '-favicon');
+		if (oldicon) {
+			oldicon.outerHTML = '';
+			delete oldicon;
+		}
 		document.getElementsByTagName('head')[0].appendChild(link);
 	}
 };
 
 var generateRandomColor = function(seed) {
-	var selectColor = function (colorNum, colors) {
+	var colors = ['#e6194b', '#3cb44b', '#ffe119', '#0082c8', '#f58231', '#FFFFFF'];
-		if (colors < 1) {
+
-			colors = 1; // defaults to one color - avoid divide by zero
+	var selectColor = function (colorNum) {
-		}
+		return colors[seed % colors.length]
-		return "hsl(" + (colorNum * (360 / colors) % 360) + ",100%,50%)";
 	}
 
-	return selectColor(seed, 8);
+	return selectColor(seed);
 };
 
 var registerToTST = async function() {
@@ -58,21 +63,21 @@ var registerToTST = async function() {
 };
 
 //returns the index of the tabs array object that contains the tab with the passed id
-var getTabParent = async (tabs, id, currentTopLevelTabPos) => {
+var getTabParent = (tabs, id, currentTopLevelTabPos) => {
 	for (let i = 0; i < tabs.length; i++) {
 
 		//on a root node because there is no opener
-		if (typeof(tabs[i].openerTabId) === 'undefined' || tabs[i].openerTabId === tabs[i].id) {
+		if (!tabs[i].openerTabId || typeof(tabs[i].openerTabId) === 'undefined' || tabs[i].openerTabId === tabs[i].id) {
 			currentTopLevelTabPos = i;
 		}
 
 		if (tabs[i].id === id) {
 
 			//get original favicon for this tab
-			let orginalFavIconUrl = await browser.sessions.getTabValue(id, 'orginalFavIconUrl');
+			let orginalFavIconUrl = tabIcons[id];
 			if (!orginalFavIconUrl) {
 				orginalFavIconUrl = tabs[i].favIconUrl;
-				await browser.sessions.setTabValue(id, 'orginalFavIconUrl', orginalFavIconUrl);
+				tabIcons[id] = orginalFavIconUrl;
 			}
 
 			return {
@@ -81,7 +86,7 @@ var getTabParent = async (tabs, id, currentTopLevelTabPos) => {
 			};
 		} else {
 			if (tabs[i].children && tabs[i].children.length > 0) {
-				let ret = await getTabParent(tabs[i].children, id, currentTopLevelTabPos);
+				let ret = getTabParent(tabs[i].children, id, currentTopLevelTabPos);
 				if (ret) {
 					return ret;
 				}
@@ -103,14 +108,18 @@ var updateAllColorsOnAllTabs = async () => {
 			for (let i = 0; i < tabs.length; i++) {
 
 				if (tabs[i].status === 'complete') {
-					let t = await getTabParent(tstTabs, tabs[i].id);
+					let t = getTabParent(tstTabs, tabs[i].id);
-
+					let options = await loadOptions();
-					loadOptions().then((options) => {
+					let tabHost = new URL(tabs[i].url).host;
+					if (tabHost) {
+						tabHost = tabHost.toLowerCase();
+					}
+					if (!(options.globals.ignore && options.globals.ignore.split('\n').includes(tabHost))) {
 						browser.tabs.executeScript(tabs[i].id, {
 							code: '(' + changeIcon.toString() + ')' +
 								'("' + generateRandomColor(t.parentIndex) + '", "' + t.faviconUrl + '", ' + JSON.stringify(options) + ')'
 						});
-					});
+					}
 				}
 
 				if (tabs[i].children && tabs[i].children.length > 0) {
@@ -138,13 +147,20 @@ browser.runtime.onMessageExternal.addListener((aMessage, aSender) => {
 });
 
 //when something happens with a tab
-let tabEvents = ['onUpdated', 'onAttached', 'onDetached', 'onMoved', 'onRemoved']
+let tabEvents = ['onAttached', 'onDetached', 'onMoved', 'onRemoved']
 tabEvents.forEach((ev) => {
-	browser.tabs[ev].addListener(async (tabId, changeInfo, tab) => {
+	browser.tabs[ev].addListener((tabId, changeInfo, tab) => {
 		updateAllColorsOnAllTabs();
 	});
 });
 
+//when a tab reloads
+browser.webNavigation.onCompleted.addListener((details) => {
+	delete tabIcons[details.tabId];
+	updateAllColorsOnAllTabs();
+});
+
+
 //when the options are updated
 browser.storage.onChanged.addListener((changes) => {
 	updateAllColorsOnAllTabs();

src/manifest.json

@@ -2,7 +2,7 @@
   "description": "Color tabs based on their parent.",
   "manifest_version": 2,
   "name": "Color Tab Group",
-  "version": "0.0.4",
+  "version": "0.0.14",
   "homepage_url": "https://git.e.tern.al/s2/tab-groupcolor",
   "icons": {
     "48": "img/icon-48.png"
@@ -18,7 +18,7 @@
   },
   "permissions": [
     "storage",
-    "sessions",
+    "webNavigation",
     "<all_urls>"
   ],
   "options_ui": {

src/options/options.html

@@ -26,6 +26,13 @@
 				</select>
 			</div>
 
+			<div class="panel-formElements-item browser-style">
+				<label for="ignore">Ignore hosts (one per line - ex.: google.com):</label>
+			</div>
+			<div class="panel-formElements-item browser-style">
+				<textarea id="ignore"></textarea>
+			</div>
+
 	</div>
 
 </section>

src/options/options.js

@@ -3,7 +3,8 @@ function persistOptions() {
 
 	globals = {
 		width: document.querySelector('#indicator-width').value,
-		orientation: document.querySelector('#indicator-orientation').value
+		orientation: document.querySelector('#indicator-orientation').value,
+		ignore: document.querySelector('#ignore').value
 	};
 
 	return browser.storage.local.set({
@@ -15,10 +16,11 @@ document.addEventListener('DOMContentLoaded', () => {
 	loadOptions().then((options) => {
 		document.querySelector('#indicator-width').value = options.globals.width;
 		document.querySelector('#indicator-orientation').value = options.globals.orientation;
+		document.querySelector('#ignore').value = options.globals.ignore;
 	});
 });
 
-var list = document.querySelectorAll('select,input');
+var list = document.querySelectorAll('select,input,textarea');
 for (var i = 0; i < list.length; i++) {
 	list[i].addEventListener('change', (ev) => {
 		persistOptions();

src/utils.js

@@ -2,7 +2,8 @@ function loadOptions() {
 	return browser.storage.local.get({
 		globals: {
 			width: 3,
-			orientation: 'vertical'
+			orientation: 'vertical',
+			ignore: ''
 		}
 	});
 }