diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..ae91b60 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,17 @@ +Changes in [0.2] (2019-01-05) +============================================================================================ + + * Colorize all tabs on extension initialization. + + * Fixed bug with not changing tab color when return to old domain. + + * Added Options page with default options + + * Allow customize CSS styles for all tabs, active and hovered tabs. + + * Use simpler and quicker domain hash function + +Changes in [0.1] (2019-01-04) +====================================================================================================== + + * Initial version diff --git a/background.js b/background.js index ca3bf0c..6bf71bc 100644 --- a/background.js +++ b/background.js @@ -1,250 +1,138 @@ "use strict"; const TST_ID = "treestyletab@piro.sakura.ne.jp"; -// const DEFAULT_SETTINGS = { -// }; - -// The current settings -// let settings; +const DEFAULT_SETTINGS = { + saturation: 60, + lightness: 70, + css: '', + active: { + saturation: 60, + lightness: 60, + css: 'font-weight: bold;', + }, + hover: { + saturation: 60, + lightness: 65, + css: '', + }, +}; var ColoredTabs = { init() { -// console.log("colorizeTab init"); + browser.storage.sync.get(DEFAULT_SETTINGS).then(function(settings) { + ColoredTabs.settings = settings; + ColoredTabs.state.hashUsed = []; + ColoredTabs.colorizeAllTabs(); browser.tabs.onUpdated.addListener(ColoredTabs.checkTabChanges); -// ColoredTabs.registerToTST(); + console.log("colorizeTab inited"); + ColoredTabs.state.inited = true; + }); }, checkTabChanges(tabId, changeInfo, tab) { -// console.log("colorizeTab checkTabChanges tab id = " + tabId + " status " + changeInfo.status + " url " + changeInfo.url); - if (typeof changeInfo.url === 'undefined') { - return; - } -// console.log("colorizeTab checkTabChanges tab id = " + tabId + " url" ); - let host = new URL(tab.url); - host = host.hostname.toString(); - ColoredTabs.colorizeTab(tabId, host); + if(typeof changeInfo.url === 'undefined') { + return; + } + let host = new URL(tab.url); + host = host.hostname.toString(); + ColoredTabs.colorizeTab(tabId, host); + }, + + colorizeAllTabs() { + ColoredTabs.state.css = ''; + if(ColoredTabs.settings.active.css !== '') { + ColoredTabs.state.css = ColoredTabs.state.css + ` + .tab.active { + ` + ColoredTabs.settings.active.css + ` + } + `; + } + if(ColoredTabs.settings.hover.css !== '') { + ColoredTabs.state.css = ColoredTabs.state.css + ` + .tab:hover { + ` + ColoredTabs.settings.hover.css + ` + } + `; + } + browser.runtime.sendMessage(TST_ID, { + type: "register-self", + style: ColoredTabs.state.css, + }); + + browser.tabs.query({}).then(function(tabs){ + for (let tab of tabs) { + let host = new URL(tab.url); + host = host.hostname.toString(); + console.log('colorize tab id ' + tab.id + ' host ' + host); + ColoredTabs.colorizeTab(tab.id, host); + } + }, onError); + console.log('colorizeAllTabs() fin'); }, colorizeTab(tabId, host, oldHost = null) { - let hash = Math.abs(ColoredTabs.hostHash(host)) % 360; + let hash = ColoredTabs.hash(host) % 360; -// let sat = await getOption("saturation"); -// let lum = await getOption("lightness"); + if(typeof ColoredTabs.state.tabHash[tabId] !== 'undefined') { + browser.runtime.sendMessage(TST_ID, { + type: 'remove-tab-state', + tabs: [tabId], + state: 'coloredTabs' + ColoredTabs.state.tabHash[tabId], + }); + } - if(typeof ColoredTabs.settings.hashColors[hash] === 'undefined') { + if(typeof ColoredTabs.state.hashUsed[hash] === 'undefined') { - ColoredTabs.settings.hashColors[hash] = true; + ColoredTabs.state.hashUsed[hash] = true; let hashColor = 'hsl(' + hash + ',' + ColoredTabs.settings.saturation + '%,' + ColoredTabs.settings.lightness + '%)'; - let hashColorHover = 'hsl(' + hash + ',' + '100%,' + ColoredTabs.settings.lightness + '%)'; + let hashColorHover = 'hsl(' + hash + ',' + ColoredTabs.settings.hover.saturation + '%,' + ColoredTabs.settings.hover.lightness + '%)'; + let hashColorActive = 'hsl(' + hash + ',' + ColoredTabs.settings.active.saturation + '%,' + ColoredTabs.settings.active.lightness + '%)'; - ColoredTabs.settings.css = ColoredTabs.settings.css + ` + ColoredTabs.state.css = ColoredTabs.state.css + ` .tab.coloredTabs` + hash + ` { background-color: ` + hashColor + `; } .tab.coloredTabs` + hash + `:hover { background-color: ` + hashColorHover + `; } + .tab.coloredTabs` + hash + `.active { + background-color: ` + hashColorActive + `; + } `; browser.runtime.sendMessage(TST_ID, { - type: "register-self", - style: ColoredTabs.settings.css, + type: "register-self", + style: ColoredTabs.state.css, }); -// console.log(ColoredTabs.settings.hashColors); - console.log(ColoredTabs.settings.css); } -// hash = Math.floor(Math.random() * (3 - 1 + 1)) + 1; -// console.log("colorizeTab tab id = " + tabId + " host = " + host + " hash " + hash + " style coloredTabs" + hash); -// browser.runtime.sendMessage(TST_ID, { -// type: 'register-self', -// style: ` -// .tab.coloredTabs` + hash + ` { -// color: red; -// } -// ` -// }); - browser.runtime.sendMessage(TST_ID, { type: 'add-tab-state', tabs: [tabId], state: 'coloredTabs' + hash, }); - + ColoredTabs.state.tabHash[tabId] = hash; }, -// registerToTST() { -// try { -// const self = browser.management.getSelf(); -// // browser.runtime.sendMessage(TST_ID, { -// // type: "register-self", -// // style: ` -// // .tab.style1 { -// // background-color: red !important; -// // border: 2px solid green !important; -// // } -// // .tab.style2 { -// // background-color: blue !important; -// // border: 5px solid yellow !important; -// // } -// // .tab.style3 { -// // background-color: green !important; -// // border: 5px solid blue !important; -// // } -// // ` -// // }); -// } catch(e) { -// // Could not register -// console.log("Could not register to TST") -// return false; -// } -// -// return true; -// }, - - hostHash(host) { - var hash = ColoredTabs.sha256(host); - var iClr, clrConst = 5381; - for (iClr = 0; iClr < hash.length; iClr++) { - clrConst = ((clrConst << 5) + clrConst) + hash.charCodeAt(iClr); - } - return clrConst; - }, - // Generate a unique hash for a wider color spectrum - sha256(s) { - - var chrsz = 8; - var hexcase = 0; - - function safe_add(x, y) { - var lsw = (x & 0xFFFF) + (y & 0xFFFF); - var msw = (x >> 16) + (y >> 16) + (lsw >> 16); - return (msw << 16) | (lsw & 0xFFFF); - } - - function S(X, n) { - return (X >>> n) | (X << (32 - n)); - } - - function R(X, n) { - return (X >>> n); - } - - function Ch(x, y, z) { - return ((x & y) ^ ((~x) & z)); - } - - function Maj(x, y, z) { - return ((x & y) ^ (x & z) ^ (y & z)); - } - - function Sigma0256(x) { - return (S(x, 2) ^ S(x, 13) ^ S(x, 22)); - } - - function Sigma1256(x) { - return (S(x, 6) ^ S(x, 11) ^ S(x, 25)); - } - - function Gamma0256(x) { - return (S(x, 7) ^ S(x, 18) ^ R(x, 3)); - } - - function Gamma1256(x) { - return (S(x, 17) ^ S(x, 19) ^ R(x, 10)); - } - - function core_sha256(m, l) { - var K = new Array(0x428A2F98, 0x71374491, 0xB5C0FBCF, 0xE9B5DBA5, 0x3956C25B, 0x59F111F1, 0x923F82A4, 0xAB1C5ED5, 0xD807AA98, 0x12835B01, 0x243185BE, 0x550C7DC3, 0x72BE5D74, 0x80DEB1FE, 0x9BDC06A7, 0xC19BF174, 0xE49B69C1, 0xEFBE4786, 0xFC19DC6, 0x240CA1CC, 0x2DE92C6F, 0x4A7484AA, 0x5CB0A9DC, 0x76F988DA, 0x983E5152, 0xA831C66D, 0xB00327C8, 0xBF597FC7, 0xC6E00BF3, 0xD5A79147, 0x6CA6351, 0x14292967, 0x27B70A85, 0x2E1B2138, 0x4D2C6DFC, 0x53380D13, 0x650A7354, 0x766A0ABB, 0x81C2C92E, 0x92722C85, 0xA2BFE8A1, 0xA81A664B, 0xC24B8B70, 0xC76C51A3, 0xD192E819, 0xD6990624, 0xF40E3585, 0x106AA070, 0x19A4C116, 0x1E376C08, 0x2748774C, 0x34B0BCB5, 0x391C0CB3, 0x4ED8AA4A, 0x5B9CCA4F, 0x682E6FF3, 0x748F82EE, 0x78A5636F, 0x84C87814, 0x8CC70208, 0x90BEFFFA, 0xA4506CEB, 0xBEF9A3F7, 0xC67178F2); - var HASH = new Array(0x6A09E667, 0xBB67AE85, 0x3C6EF372, 0xA54FF53A, 0x510E527F, 0x9B05688C, 0x1F83D9AB, 0x5BE0CD19); - var W = new Array(64); - var a, b, c, d, e, f, g, h, i, j; - var T1, T2; - m[l >> 5] |= 0x80 << (24 - l % 32); - m[((l + 64 >> 9) << 4) + 15] = l; - for (var i = 0; i < m.length; i += 16) { - a = HASH[0]; - b = HASH[1]; - c = HASH[2]; - d = HASH[3]; - e = HASH[4]; - f = HASH[5]; - g = HASH[6]; - h = HASH[7]; - for (var j = 0; j < 64; j++) { - if (j < 16) W[j] = m[j + i]; - else W[j] = safe_add(safe_add(safe_add(Gamma1256(W[j - 2]), W[j - 7]), Gamma0256(W[j - 15])), W[j - 16]); - T1 = safe_add(safe_add(safe_add(safe_add(h, Sigma1256(e)), Ch(e, f, g)), K[j]), W[j]); - T2 = safe_add(Sigma0256(a), Maj(a, b, c)); - h = g; - g = f; - f = e; - e = safe_add(d, T1); - d = c; - c = b; - b = a; - a = safe_add(T1, T2); - } - HASH[0] = safe_add(a, HASH[0]); - HASH[1] = safe_add(b, HASH[1]); - HASH[2] = safe_add(c, HASH[2]); - HASH[3] = safe_add(d, HASH[3]); - HASH[4] = safe_add(e, HASH[4]); - HASH[5] = safe_add(f, HASH[5]); - HASH[6] = safe_add(g, HASH[6]); - HASH[7] = safe_add(h, HASH[7]); - } - return HASH; - } - - function str2binb(str) { - var bin = Array(); - var mask = (1 << chrsz) - 1; - for (var i = 0; i < str.length * chrsz; i += chrsz) { - bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (24 - i % 32); - } - return bin; - } - - function Utf8Encode(string) { - string = string.replace(/\r\n/g, "\n"); - var utftext = ""; - for (var n = 0; n < string.length; n++) { - var c = string.charCodeAt(n); - if (c < 128) { - utftext += String.fromCharCode(c); - } else if ((c > 127) && (c < 2048)) { - utftext += String.fromCharCode((c >> 6) | 192); - utftext += String.fromCharCode((c & 63) | 128); - } else { - utftext += String.fromCharCode((c >> 12) | 224); - utftext += String.fromCharCode(((c >> 6) & 63) | 128); - utftext += String.fromCharCode((c & 63) | 128); - } - } - return utftext; - } - - function binb2hex(binarray) { - var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef"; - var str = ""; - for (var i = 0; i < binarray.length * 4; i++) { - str += hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8 + 4)) & 0xF) + - hex_tab.charAt((binarray[i >> 2] >> ((3 - i % 4) * 8)) & 0xF); - } - return str; - } - s = Utf8Encode(s); - return binb2hex(core_sha256(str2binb(s), s.length * chrsz)); + hash(s) { + for(var i=0, h=1; i>>17)>>>0; }, - settings: { - 'saturation': 60, - 'lightness': 70, - 'hashColors': {}, + state: { + 'hashUsed': {}, + 'tabHash': {}, + 'inited': false, }, } -ColoredTabs.init(); +if(ColoredTabs.state.inited != true) { + ColoredTabs.init(); +} + +function onError(error) { + console.log(`Error: ${error}`); +} diff --git a/manifest.json b/manifest.json index 78ae833..1def8bf 100644 --- a/manifest.json +++ b/manifest.json @@ -3,7 +3,7 @@ "name": "TST Colored Tabs", "short_name": "TSTColoredTabs", "description": "Colorize tabs in Tree Style Tab based on hostname.", - "version": "0.1", + "version": "0.2", "author": "Alexey Murz Korepov", "homepage_url": "https://github.com/MurzNN/tst-colored-tabs", diff --git a/options.html b/options.html index 243eb43..fd63491 100644 --- a/options.html +++ b/options.html @@ -7,13 +7,34 @@ -
- - - -
-
-

Changes need a browser restart.

+
+

Settings for all tabs

+
+
+
+ +

Active tab

+
+
+
+ +

Hovered tab

+
+
+
+ +
+ + + + + diff --git a/options.js b/options.js index f8d1a21..e82ea1b 100644 --- a/options.js +++ b/options.js @@ -1,33 +1,62 @@ -"use strict"; +/* +Store the currently selected settings using browser.storage.sync. +*/ -// Load settings and setup listeners -(async () => { - let settings = await browser.storage.local.get(); - applySettings(settings); +function storeSettings() { + browser.storage.sync.set({ + saturation: document.querySelector("#saturation").value, + lightness: document.querySelector("#lightness").value, + css: document.querySelector("#css").value, + active: { + saturation: document.querySelector("#active-saturation").value, + lightness: document.querySelector("#active-lightness").value, + css: document.querySelector("#active-css").value, + }, + hover: { + saturation: document.querySelector("#hover-saturation").value, + lightness: document.querySelector("#hover-lightness").value, + css: document.querySelector("#hover-css").value, + }, + }); + ColoredTabs.init(); +} - for(let input of document.querySelectorAll("input")) { - input.addEventListener("input", handleInputInput); - } -})(); +function resetSettings() { + let settings = DEFAULT_SETTINGS; + updateUI(settings); + ColoredTabs.init(); +} -function applySettings(settings) { - for(let key in settings) { - let element = document.getElementById(key); - if(element) { - element.value = settings[key]; - } - } +/* +Update the options UI with the settings values retrieved from storage, +or the default settings if the stored settings are empty. +*/ +function updateUI(storedSettings) { + document.querySelector("#saturation").value = storedSettings.saturation || ""; + document.querySelector("#lightness").value = storedSettings.lightness || ""; + document.querySelector("#css").value = storedSettings.css || ""; + + document.querySelector("#active-saturation").value = storedSettings.active.saturation || ""; + document.querySelector("#active-lightness").value = storedSettings.active.lightness || ""; + document.querySelector("#active-css").value = storedSettings.active.css || ""; + + document.querySelector("#hover-saturation").value = storedSettings.hover.saturation || ""; + document.querySelector("#hover-lightness").value = storedSettings.hover.lightness || ""; + document.querySelector("#hover-css").value = storedSettings.hover.css || ""; } -function handleInputInput(event) { - let target = event.target; +function onError(e) { + console.error(e); +} - let value = target.value; - if(target.type === "number") { - value = parseInt(value); - } +/* +On opening the options page, fetch stored settings and update the UI with them. +*/ +const gettingStoredSettings = browser.storage.sync.get(DEFAULT_SETTINGS); +gettingStoredSettings.then(updateUI, onError); - browser.storage.local.set({ - [target.id]: value, - }); -} +/* +On submit, save the currently selected settings. +*/ +document.querySelector("#save-button").addEventListener("click", storeSettings); +document.querySelector("#reset-button").addEventListener("click", resetSettings);