diff --git a/src/bg.js b/src/bg.js index 55a6cec..62bf96f 100644 --- a/src/bg.js +++ b/src/bg.js @@ -1,7 +1,7 @@ const kTST_ID = 'treestyletab@piro.sakura.ne.jp'; const MY_EXTENSION_NAME = 'tab-groupcolor'; -var changeIcon = function(color, currentIcon) { +var changeIcon = function(color, currentIcon, options) { var canvas = document.createElement('canvas'); canvas.width = 16; canvas.height = 16; @@ -17,7 +17,12 @@ var changeIcon = function(color, currentIcon) { img.onload = function() { ctx.drawImage(img, 0, 0); ctx.fillStyle = color; - ctx.fillRect(0, 0, 3, 16); + if (options.globals.orientation === 'vertical') { + ctx.fillRect(0, 0, options.globals.width, 16); + } else { + ctx.fillRect(0, 0, 16, options.globals.width); + } + var link = document.createElement('link'); link.type = 'image/x-icon'; @@ -53,7 +58,7 @@ var registerToTST = async function() { }; //returns the index of the tabs array object that contains the tab with the passed id -var getTabParent = (tabs, id, currentTopLevelTabPos) => { +var getTabParent = async (tabs, id, currentTopLevelTabPos) => { for (let i = 0; i < tabs.length; i++) { //on a root node because there is no opener @@ -62,13 +67,21 @@ var getTabParent = (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: tabs[i].favIconUrl + faviconUrl: orginalFavIconUrl }; } else { if (tabs[i].children && tabs[i].children.length > 0) { - let ret = getTabParent(tabs[i].children, id, currentTopLevelTabPos); + let ret = await getTabParent(tabs[i].children, id, currentTopLevelTabPos); if (ret) { return ret; } @@ -85,26 +98,28 @@ var updateAllColorsOnAllTabs = async () => { window: w.id }); - var changeTabs = (tabs) => { + var changeTabs = async (tabs) => { for (let i = 0; i < tabs.length; i++) { if (tabs[i].status === 'complete') { - let t = getTabParent(tstTabs, tabs[i].id); + let t = await getTabParent(tstTabs, tabs[i].id); - browser.tabs.executeScript(tabs[i].id, { - code: '(' + changeIcon.toString() + ')' + - '("' + generateRandomColor(t.parentIndex) + '", "' + t.faviconUrl + '")' + loadOptions().then((options) => { + 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) { - changeTabs(tabs[i].children); + await changeTabs(tabs[i].children); } } }; - changeTabs(tstTabs); + await changeTabs(tstTabs); }); @@ -130,5 +145,10 @@ tabEvents.forEach((ev) => { }); }); +//when the options are updated +browser.storage.onChanged.addListener((changes) => { + updateAllColorsOnAllTabs(); +}); + registerToTST(); // aggressive registration on initial installation diff --git a/src/manifest.json b/src/manifest.json index 1ec88bb..5a0d4db 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -14,9 +14,15 @@ } }, "background": { - "scripts": ["bg.js"] + "scripts": ["bg.js", "utils.js"] }, "permissions": [ + "storage", + "sessions", "" - ] + ], + "options_ui": { + "browser_style": true, + "page": "options/options.html" + } } diff --git a/src/options/options.html b/src/options/options.html new file mode 100644 index 0000000..13cf5a1 --- /dev/null +++ b/src/options/options.html @@ -0,0 +1,37 @@ + + + + + + + +
+ +
+ Indicator options +
+ +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + + + + + diff --git a/src/options/options.js b/src/options/options.js new file mode 100644 index 0000000..f61d9e3 --- /dev/null +++ b/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'); +for (var i = 0; i < list.length; i++) { + list[i].addEventListener('change', (ev) => { + persistOptions(); + }); +} diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..c363a91 --- /dev/null +++ b/src/utils.js @@ -0,0 +1,8 @@ +function loadOptions() { + return browser.storage.local.get({ + globals: { + width: 3, + orientation: 'vertical' + } + }); +}