s2/tab-groupcolor
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add options

Browse Source
This commit is contained in:
s2
2017-12-12 14:22:32 +01:00
parent 01aa8eba44
commit ad4af7871a
5 changed files with 111 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/bg.js
View File

@@ -1,7 +1,7 @@
const kTST_ID = 'treestyletab@piro.sakura.ne.jp'; const kTST_ID = 'treestyletab@piro.sakura.ne.jp';
const MY_EXTENSION_NAME = 'tab-groupcolor'; const MY_EXTENSION_NAME = 'tab-groupcolor';
var changeIcon = function(color, currentIcon) { var changeIcon = function(color, currentIcon, options) {
var canvas = document.createElement('canvas'); var canvas = document.createElement('canvas');
canvas.width = 16; canvas.width = 16;
canvas.height = 16; canvas.height = 16;
@@ -17,7 +17,12 @@ var changeIcon = function(color, currentIcon) {
img.onload = function() { img.onload = function() {
ctx.drawImage(img, 0, 0); ctx.drawImage(img, 0, 0);
ctx.fillStyle = color; 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'); var link = document.createElement('link');
link.type = 'image/x-icon'; 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 //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++) { for (let i = 0; i < tabs.length; i++) {
//on a root node because there is no opener //on a root node because there is no opener
@@ -62,13 +67,21 @@ var getTabParent = (tabs, id, currentTopLevelTabPos) => {
} }
if (tabs[i].id === id) { 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 { return {
parentIndex: currentTopLevelTabPos, parentIndex: currentTopLevelTabPos,
faviconUrl: tabs[i].favIconUrl faviconUrl: orginalFavIconUrl
}; };
} else { } else {
if (tabs[i].children && tabs[i].children.length > 0) { 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) { if (ret) {
return ret; return ret;
} }
@@ -85,26 +98,28 @@ var updateAllColorsOnAllTabs = async () => {
window: w.id window: w.id
}); });
var changeTabs = (tabs) => { var changeTabs = async (tabs) => {
for (let i = 0; i < tabs.length; i++) { for (let i = 0; i < tabs.length; i++) {
if (tabs[i].status === 'complete') { 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, { loadOptions().then((options) => {
code: '(' + changeIcon.toString() + ')' + browser.tabs.executeScript(tabs[i].id, {
'("' + generateRandomColor(t.parentIndex) + '", "' + t.faviconUrl + '")' code: '(' + changeIcon.toString() + ')' +
'("' + generateRandomColor(t.parentIndex) + '", "' + t.faviconUrl + '", ' + JSON.stringify(options) + ')'
});
}); });
} }
if (tabs[i].children && tabs[i].children.length > 0) { 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 registerToTST(); // aggressive registration on initial installation

10
src/manifest.json
View File

@@ -14,9 +14,15 @@
} }
}, },
"background": { "background": {
"scripts": ["bg.js"] "scripts": ["bg.js", "utils.js"]
}, },
"permissions": [ "permissions": [
"storage",
"sessions",
"<all_urls>" "<all_urls>"
] ],
"options_ui": {
"browser_style": true,
"page": "options/options.html"
}
} }

37
src/options/options.html Normal file
View File

@@ -0,0 +1,37 @@
<!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>

26
src/options/options.js Normal file
View File

@@ -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();
});
}

8
src/utils.js Normal file
View File

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