v0.0.8

README.md

@@ -2,6 +2,8 @@
 
 ## What it does
 
+**Please install [Tree Style Tab](https://addons.mozilla.org/firefox/addon/tree-style-tab/) before installing this extension, because this extension depends on it!**
+
 This addon would like to color tabs based on the parent tab that opened the tab.  
 So say I am at work searching for a solution to a javascript problem on stackoverflow, so I open a bunch of tabs with possible solutions. Then I get distracted, and I start looking for honey badger images on google images, I open a bunch of tabs with honey badger images.  
 Now all my tabs are mixed up with javascript snippets and honey badgers.
@@ -12,4 +14,7 @@ At the moment this is not possible because of Firefox bug [1320585](https://bugz
 
 So this extension **tries** to get the favicon of the newly opened tab, and changes the color of the favicon to match that of the parent.
 
-**Please install [Tree Style Tab](https://addons.mozilla.org/firefox/addon/tree-style-tab/) before installing this extension, because this extension depends on it!**
+But it will not work
+- on pages that don't allow content scripts (amo for example)
+- on pages that dynamically change the favicon
+- a lot of other cases

src/bg.js

@@ -1,40 +1,45 @@
 const kTST_ID = 'treestyletab@piro.sakura.ne.jp';
 const MY_EXTENSION_NAME = 'tab-groupcolor';
+let tabIcons = {};
 
-var changeIcon = function(color) {
+var changeIcon = function(color, currentIcon, options) {
-	var getFavicon = function(){
-		var favicon = undefined;
-		var nodeList = document.getElementsByTagName("link");
-		for (var i = 0; i < nodeList.length; i++)
-		{
-			if ((nodeList[i].getAttribute("rel") == "icon") || (nodeList[i].getAttribute("rel") == "shortcut icon")) {
-				favicon = nodeList[i].getAttribute("href");
-			}
-		}
-		return favicon;
-	};
-
 	var canvas = document.createElement('canvas');
-	canvas.width = 16;
-	canvas.height = 16;
 	var ctx = canvas.getContext('2d');
 	var img = new Image();
-	img.src = getFavicon();
+
+	if (currentIcon && typeof(currentIcon) !== 'undefined' && 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;
-		ctx.fillRect(0, 0, 2, 16);
+		if (options.globals.orientation === 'vertical') {
+			ctx.fillRect(0, 0, (options.globals.width / 16) * canvas.width, canvas.height);
+		} else {
+			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 selectColor = function (colorNum, colors) {
 		if (colors < 1) {
 			colors = 1; // defaults to one color - avoid divide by zero
 		}
@@ -63,12 +68,23 @@ 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) {
-			return currentTopLevelTabPos;
+
+			//get original favicon for this tab
+			let orginalFavIconUrl = tabIcons[id];
+			if (!orginalFavIconUrl) {
+				orginalFavIconUrl = tabs[i].favIconUrl;
+				tabIcons[id] = orginalFavIconUrl;
+			}
+
+			return {
+				parentIndex: currentTopLevelTabPos,
+				faviconUrl: orginalFavIconUrl
+			};
 		} else {
 			if (tabs[i].children && tabs[i].children.length > 0) {
 				let ret = getTabParent(tabs[i].children, id, currentTopLevelTabPos);
@@ -85,16 +101,36 @@ var updateAllColorsOnAllTabs = async () => {
 	allWindows.forEach(async w => {
 		var tstTabs = await browser.runtime.sendMessage(kTST_ID, {
 			type: 'get-tree',
-			window:  w.id
+			window: w.id
 		});
 
-		for (let i = 0; i < tstTabs.length; i++) {
+		var changeTabs = async (tabs) => {
-			if (tstTabs[i].status === 'complete') {
+
-				browser.tabs.executeScript(tstTabs[i].id, {
+			for (let i = 0; i < tabs.length; i++) {
-					code: '(' + changeIcon.toString() + ')("' + generateRandomColor(getTabParent(tstTabs, tstTabs[i].id)) + '")'
+
-				});
+				if (tabs[i].status === 'complete') {
+					let t = getTabParent(tstTabs, tabs[i].id);
+					let options = await loadOptions();
+					let tabHost = new URL(tabs[i].url).host;
+					if (tabHost) {
+						tabHost = tabHost.toLowerCase();
+					}
+					if (!(options.ignore && options.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) {
+					await changeTabs(tabs[i].children);
+				}
 			}
-		}
+		};
+
+		await changeTabs(tstTabs);
+
 	});
 
 }
@@ -111,18 +147,25 @@ browser.runtime.onMessageExternal.addListener((aMessage, aSender) => {
 	}
 });
 
-//when a tab is created
+//when something happens with a tab
-browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+let tabEvents = ['onAttached', 'onDetached', 'onMoved', 'onRemoved']
-	var tstTab = await browser.runtime.sendMessage(kTST_ID, {
+tabEvents.forEach((ev) => {
-		type: 'get-tree',
+	browser.tabs[ev].addListener((tabId, changeInfo, tab) => {
-		window:  tab.windowId
+		updateAllColorsOnAllTabs();
 	});
-
-	if (tab.status === 'complete') {
-		browser.tabs.executeScript(tab.id, {
-			code: '(' + changeIcon.toString() + ')("' + generateRandomColor(getTabParent(tstTab, tab.id)) + '")'
-		});
-	}
 });
 
+//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();
+});
+
+
 registerToTST(); // aggressive registration on initial installation

src/manifest.json

@@ -1,8 +1,8 @@
 {
-  "description": "color tabs based on their parent.",
+  "description": "Color tabs based on their parent.",
   "manifest_version": 2,
-  "name": "tab-groupcolor",
+  "name": "Color Tab Group",
-  "version": "0.0.1",
+  "version": "0.0.8",
   "homepage_url": "https://git.e.tern.al/s2/tab-groupcolor",
   "icons": {
     "48": "img/icon-48.png"
@@ -14,9 +14,15 @@
     }
   },
   "background": {
-    "scripts": ["bg.js"]
+    "scripts": ["bg.js", "utils.js"]
   },
   "permissions": [
+    "storage",
+    "webNavigation",
     "<all_urls>"
-  ]
+  ],
+  "options_ui": {
+    "browser_style": true,
+    "page": "options/options.html"
+  }
 }

src/options/options.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+</head>
+<body>
+
+<section id="options-section" class="panel">
+
+	<div class="panel-section panel-section-header">
+			<span class="text-section-header">Indicator options</span>
+	</div>
+
+	<div class="panel-section panel-section-formElements">
+
+			<div class="panel-formElements-item browser-style">
+				<label for="indicator-width">Width:</label>
+				<input type="number" id="indicator-width" max="16" min="1">
+			</div>
+
+			<div class="panel-formElements-item browser-style">
+				<label for="indicator-orientation">Orientation:</label>
+				<select id="indicator-orientation">
+					<option value="vertical">Vertical</option>
+					<option value="horizontal">Horizontal</option>
+				</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>
+
+<script src="../utils.js"></script>
+<script src="options.js"></script>
+
+</body>
+</html>

src/options/options.js

@@ -0,0 +1,26 @@
+function persistOptions() {
+	var globals = {}; //global addon options
+
+	globals = {
+		width: document.querySelector('#indicator-width').value,
+		orientation: document.querySelector('#indicator-orientation').value
+	};
+
+	return browser.storage.local.set({
+		globals: globals
+	});
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+	loadOptions().then((options) => {
+		document.querySelector('#indicator-width').value = options.globals.width;
+		document.querySelector('#indicator-orientation').value = options.globals.orientation;
+	});
+});
+
+var list = document.querySelectorAll('select,input,textarea');
+for (var i = 0; i < list.length; i++) {
+	list[i].addEventListener('change', (ev) => {
+		persistOptions();
+	});
+}

src/utils.js

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