bo

README.md

@@ -2,8 +2,6 @@
 
 ## 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.
@@ -14,7 +12,4 @@ 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.
 
-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
+**Please install [Tree Style Tab](https://addons.mozilla.org/firefox/addon/tree-style-tab/) before installing this extension, because this extension depends on it!**

src/bg.js

@@ -1,28 +1,17 @@
 const kTST_ID = 'treestyletab@piro.sakura.ne.jp';
 const MY_EXTENSION_NAME = 'tab-groupcolor';
 
-var changeIcon = function(color, currentIcon, options) {
+var changeIcon = function(color, currentIcon) {
 	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') {
 	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() {
 		ctx.drawImage(img, 0, 0);
 		ctx.fillStyle = color;
-		if (options.globals.orientation === 'vertical') {
-			ctx.fillRect(0, 0, options.globals.width, 16);
-		} else {
-			ctx.fillRect(0, 0, 16, options.globals.width);
-		}
-
+		ctx.fillRect(0, 0, 2, 16);
 
 		var link = document.createElement('link');
 		link.type = 'image/x-icon';
@@ -58,7 +47,7 @@ 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
@@ -67,21 +56,13 @@ var getTabParent = async (tabs, id, currentTopLevelTabPos) => {
 		}
 
 		if (tabs[i].id === id) {
-
-			//get original favicon for this tab
-			let orginalFavIconUrl = await browser.sessions.getTabValue(id, 'orginalFavIconUrl');
-			if (!orginalFavIconUrl) {
-				orginalFavIconUrl = tabs[i].favIconUrl;
-				await browser.sessions.setTabValue(id, 'orginalFavIconUrl', orginalFavIconUrl);
-			}
-
 			return {
 				parentIndex: currentTopLevelTabPos,
-				faviconUrl: orginalFavIconUrl
+				faviconUrl: tabs[i].faviconUrl
 			};
 		} 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;
 				}
@@ -98,29 +79,15 @@ var updateAllColorsOnAllTabs = async () => {
 			window:  w.id
 		});
 
-		var changeTabs = async (tabs) => {
-
-			for (let i = 0; i < tabs.length; i++) {
-
-				if (tabs[i].status === 'complete') {
-					let t = await getTabParent(tstTabs, tabs[i].id);
-
-					loadOptions().then((options) => {
-						browser.tabs.executeScript(tabs[i].id, {
+		for (let i = 0; i < tstTabs.length; i++) {
+			if (tstTabs[i].status === 'complete') {
+				let t = getTabParent(tstTabs, tstTabs[i].id);
+				browser.tabs.executeScript(tstTabs[i].id, {
 					code: '(' + changeIcon.toString() + ')' +
-							'("' + generateRandomColor(t.parentIndex) + '", "' + t.faviconUrl + '", ' + JSON.stringify(options) + ')'
-						});
+						'("' + generateRandomColor(t.parentIndex) + '", "' + t.faviconUrl + '")'
 				});
 			}
-
-				if (tabs[i].children && tabs[i].children.length > 0) {
-					await changeTabs(tabs[i].children);
 		}
-			}
-		};
-
-		await changeTabs(tstTabs);
-
 	});
 
 }
@@ -137,18 +104,21 @@ browser.runtime.onMessageExternal.addListener((aMessage, aSender) => {
 	}
 });
 
-//when something happens with a tab
-let tabEvents = ['onUpdated', 'onAttached', 'onDetached', 'onMoved', 'onRemoved']
-tabEvents.forEach((ev) => {
-	browser.tabs[ev].addListener(async (tabId, changeInfo, tab) => {
-		updateAllColorsOnAllTabs();
+//when a tab is created
+browser.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
+	var tstTabs = await browser.runtime.sendMessage(kTST_ID, {
+		type: 'get-tree',
+		window:  tab.windowId
 	});
-});
 
-//when the options are updated
-browser.storage.onChanged.addListener((changes) => {
-	updateAllColorsOnAllTabs();
-});
+	if (tab.status === 'complete') {
+		var t = getTabParent(tstTabs, tab.id);
 
+		browser.tabs.executeScript(tab.id, {
+			code: '(' + changeIcon.toString() + ')' +
+				'("' + generateRandomColor(t.parentIndex) + '", "' + t.faviconUrl + '")'
+		});
+	}
+});
 
 registerToTST(); // aggressive registration on initial installation

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.1",
   "homepage_url": "https://git.e.tern.al/s2/tab-groupcolor",
   "icons": {
     "48": "img/icon-48.png"
@@ -14,15 +14,9 @@
     }
   },
   "background": {
-    "scripts": ["bg.js", "utils.js"]
+    "scripts": ["bg.js"]
   },
   "permissions": [
-    "storage",
-    "sessions",
     "<all_urls>"
-  ],
-  "options_ui": {
-    "browser_style": true,
-    "page": "options/options.html"
-  }
+  ]
 }

src/options/options.html

@@ -1,37 +0,0 @@
-<!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>
-
-</section>
-
-<script src="../utils.js"></script>
-<script src="options.js"></script>
-
-</body>
-</html>

src/options/options.js

@@ -1,26 +0,0 @@
-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');
-for (var i = 0; i < list.length; i++) {
-	list[i].addEventListener('change', (ev) => {
-		persistOptions();
-	});
-}

src/utils.js

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