Skip to content

Commit

Permalink
Version 0.7 with cool new features
Browse files Browse the repository at this point in the history
  • Loading branch information
@MurzNN
MurzNN committed Mar 22, 2020
1 parent 3b99999 commit f1b8e51
Show file tree
Hide file tree
Showing 6 changed files with 410 additions and 140 deletions.
17 changes: 15 additions & 2 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
Changes in [0.7] (2020-03-23)
============================================================================================

* Implemented setting per-host colors via direct match and regexp

* Implemented re-applying colors after main TST extension upgrade

* Fixed issue with lost settings when saving

* Replaced active and hover tabs tint to filter saturation and brigtness of original color

* Some other code refactor for improve speed and stability

Changes in [0.6] (2019-05-27)
============================================================================================

Expand Down Expand Up @@ -32,9 +45,9 @@ 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.
Expand Down
232 changes: 146 additions & 86 deletions background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,27 +6,67 @@ const DEFAULT_SETTINGS = {
saturation: 60,
lightness: 70,
colors: 15,
active_saturation: 60,
active_lightness: 60,
active_bold: true,
hover_saturation: 60,
hover_lightness: 65,
activeSaturate: 120,
activeBrightness: 120,
activeBold: true,
hoverSaturate: 110,
hoverBrightness: 110,
hosts: [
{ host: 'example.com', regexp: false, color: '#FF7700', disabled: true },
{ host: '.*\\.google\\..*', regexp: true, color: '#7171FF', disabled: true },
],
};

var ColoredTabs = {
init() {
browser.storage.sync.get(DEFAULT_SETTINGS).then(function(settings) {
// console.log('init settings');
ColoredTabs.settings = settings;
ColoredTabs.colorizeAllTabs();
browser.tabs.onUpdated.addListener(ColoredTabs.checkTabChanges);
browser.tabs.onRemoved.addListener(ColoredTabs.removeTabInfo)
// browser.tabs.onCreated.addListener(ColoredTabs.handleCreated);
ColoredTabs.state.inited = true;
// console.log('init settings fin');
});
},

state: {
'inited': false,
},

init() {
browser.storage.sync.get().then(function(settingsStored) {
ColoredTabs.settings = {}
Object.assign(ColoredTabs.settings, DEFAULT_SETTINGS, settingsStored);

ColoredTabs.state = {
'tabsHost': [],
'tabsClass': [],
'inited': false,
};
// console.log(ColoredTabs.settings);

if(ColoredTabs.settings.hosts) {
ColoredTabs.settings.hosts.forEach(function(hostsItem) {
if(hostsItem.disabled !== true && hostsItem.color.length > 3) {
if(hostsItem.regexp == true) {
if(ColoredTabs.state.hostsRegexp === undefined) {
ColoredTabs.state.hostsRegexp = [];
ColoredTabs.state.hostsRegexpColor = [];
}
ColoredTabs.state.hostsRegexp.push(hostsItem.host);
ColoredTabs.state.hostsRegexpColor.push(hostsItem.color);
} else {
if(ColoredTabs.state.hostsMatch === undefined) {
ColoredTabs.state.hostsMatch = [];
ColoredTabs.state.hostsMatchColor = [];
}
ColoredTabs.state.hostsMatch.push(hostsItem.host);
ColoredTabs.state.hostsMatchColor.push(hostsItem.color);
}
}
});
}

ColoredTabs.colorizeAllTabs();
browser.tabs.onUpdated.addListener(ColoredTabs.checkTabChanges);
browser.tabs.onRemoved.addListener(ColoredTabs.removeTabInfo)
// browser.tabs.onCreated.addListener(ColoredTabs.handleCreated);

// console.log(ColoredTabs.state);

ColoredTabs.state.inited = true;
});
},

// handleCreated(tab) {
// console.log("handleCreated tab id " + tab.id + " tab url " + tab.url);
// if(tab.url.indexOf('about:') === 0)
Expand All @@ -35,86 +75,104 @@ var ColoredTabs = {
// host = host.hostname.toString();
// ColoredTabs.colorizeTab(tab.id, host);
// },
checkTabChanges(tabId, changeInfo, tab) {

checkTabChanges(tabId, changeInfo, tab) {
// console.log("checkTabChanges tab id " + tabId + " tab url " + tab.url);
// console.log(changeInfo);
if(typeof changeInfo.url === 'undefined' || tab.url.indexOf('about:') === 0)
return;
let host = new URL(changeInfo.url);
host = host.hostname.toString();
if(host != ColoredTabs.state.tabHost[tabId]) {
ColoredTabs.state.tabHost[tabId] = host;
ColoredTabs.colorizeTab(tabId, host);
}
},
removeTabInfo(tabId, removeInfo) {
if(typeof changeInfo.url === 'undefined' || tab.url.indexOf('about:') === 0)
return;
let host = new URL(changeInfo.url);
host = host.hostname.toString();
if(host != ColoredTabs.state.tabsHost[tabId]) {
ColoredTabs.state.tabsHost[tabId] = host;
ColoredTabs.colorizeTab(tabId, host);
}
},
removeTabInfo(tabId, removeInfo) {
// console.log("removeTabInfo tab id " + tabId);
delete ColoredTabs.state.tabHost[tabId];
delete ColoredTabs.state.tabHue[tabId];
},
colorizeAllTabs() {
delete ColoredTabs.state.tabsHost[tabId];
delete ColoredTabs.state.tabsClass[tabId];
},
colorizeAllTabs() {
// console.log('colorizeAllTabs() start');
let css = '';
if(ColoredTabs.settings.active_bold == true) {
css += '.tab.active .label{font-weight:bold}';
let css = `
.tab.active {filter: saturate(` + ColoredTabs.settings.activeSaturate + `%) brightness(` + ColoredTabs.settings.activeBrightness + `%);}
.tab:hover {filter: saturate(` + ColoredTabs.settings.hoverSaturate + `%) brightness(` + ColoredTabs.settings.hoverBrightness + `%);}`;

if(ColoredTabs.settings.activeBold == true) {
css += '.tab.active .label{font-weight:bold}';
}

for(let i = 0; i < 360; i += (360 / ColoredTabs.settings.colors)) {
let hue = Math.round(i);
css += `.tab.coloredTabsHue` + hue + ` {background-color: hsl(` + hue + `,` + ColoredTabs.settings.saturation + `%,` + ColoredTabs.settings.lightness + `%);}`;
}

if(ColoredTabs.state.hostsMatchColor !== undefined) {
ColoredTabs.state.hostsMatchColor.forEach((element, index) => css += `.tab.coloredTabsHostMatch` + index + ` {background-color: ` + element + `;}`);
}
if(ColoredTabs.state.hostsRegexpColor !== undefined) {
ColoredTabs.state.hostsRegexpColor.forEach((element, index) => css += `.tab.coloredTabsHostRegexp` + index + ` {background-color: ` + element + `;}`);
}
// console.log(css);

browser.runtime.sendMessage(TST_ID, {
type: "register-self",
style: 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);
}
for(let i = 0; i < 360; i += (360 / ColoredTabs.settings.colors)) {
let hue = Math.round(i);
css += `
.tab.coloredTabsHue` + hue + ` {background-color: hsl(` + hue + `,` + ColoredTabs.settings.saturation + `%,` + ColoredTabs.settings.lightness + `%);}
.tab.coloredTabsHue` + hue + `.active {background-color: hsl(` + hue + `,` + ColoredTabs.settings.active_saturation + `%,` + ColoredTabs.settings.active_lightness + `%);}
.tab.coloredTabsHue` + hue + `:hover {background-color: hsl(` + hue + `,` + ColoredTabs.settings.hover_saturation + `%,` + ColoredTabs.settings.hover_lightness + `%);}`;
}, onError);
},

colorizeTab(tabId, host) {
let tabClass = null;
let index = null;
if ((ColoredTabs.state.hostsMatch !== undefined) && (index = ColoredTabs.state.hostsMatch.indexOf(host) > -1)) {
tabClass = 'coloredTabsHostMatch' + ColoredTabs.state.hostsMatch.indexOf(host);
} else if (ColoredTabs.state.hostsRegexp !== undefined) {
for (let i = 0; i < ColoredTabs.state.hostsRegexp.length; i++) {
if(host.match(ColoredTabs.state.hostsRegexp[i])) {
tabClass = 'coloredTabsHostRegexp' + i;
break;
}
}
// console.log(css);

}
if(tabClass === null) {
tabClass = 'coloredTabsHue' + Math.round((ColoredTabs.hash(host) % ColoredTabs.settings.colors) * (360 / ColoredTabs.settings.colors));
}

// console.log("colorizeTab tabId " + tabId + ", host " + host + " hash " + ColoredTabs.hash(host) + " step " + (ColoredTabs.hash(host) % ColoredTabs.settings.colors) + " tabClass " + tabClass);

if(ColoredTabs.state.tabsClass[tabId] != tabClass) {
browser.runtime.sendMessage(TST_ID, {
type: "register-self",
style: css,
type: 'add-tab-state',
tabs: [tabId],
state: tabClass,
});

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);
},

colorizeTab(tabId, host) {
let hue = Math.round((ColoredTabs.hash(host) % ColoredTabs.settings.colors) * (360 / ColoredTabs.settings.colors));
// console.log("colorizeTab tabId " + tabId + ", host " + host + " hash " + ColoredTabs.hash(host) + " step " + (ColoredTabs.hash(host) % ColoredTabs.settings.colors) + " hue " + hue);

if(ColoredTabs.state.tabHue[tabId] != hue) {
if(typeof ColoredTabs.state.tabsClass[tabId] !== undefined) {
browser.runtime.sendMessage(TST_ID, {
type: 'add-tab-state',
type: 'remove-tab-state',
tabs: [tabId],
state: 'coloredTabsHue' + hue,
state: ColoredTabs.state.tabsClass[tabId],
});
if(typeof ColoredTabs.state.tabHue[tabId] !== 'undefined') {
browser.runtime.sendMessage(TST_ID, {
type: 'remove-tab-state',
tabs: [tabId],
state: 'coloredTabsHue' + ColoredTabs.state.tabHue[tabId],
});
}
ColoredTabs.state.tabHue[tabId] = hue;
}
},

hash(s) {
for(var i=0, h=1; i<s.length; i++)
h=Math.imul(h+s.charCodeAt(i)|0, 2654435761);
return (h^h>>>17)>>>0;
},

state: {
'tabHost': [],
'tabHue': [],
'inited': false,
},
ColoredTabs.state.tabsClass[tabId] = tabClass;
}
},

hash(s) {
for(var i=0, h=1; i<s.length; i++)
h=Math.imul(h+s.charCodeAt(i)|0, 2654435761);
return (h^h>>>17)>>>0;
},

}

function onError(error) {
Expand Down Expand Up @@ -148,6 +206,7 @@ async function handleTSTMessage(message, sender) {
switch (message.type) {
case "ready":
registerToTST();
ColoredTabs.init();
case "sidebar-show":
case "permissions-changed":
if(ColoredTabs.state.inited != true) {
Expand All @@ -161,5 +220,6 @@ async function handleTSTMessage(message, sender) {
}
}


registerToTST();
browser.runtime.onMessageExternal.addListener(handleTSTMessage);
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"name": "TST Colored Tabs",
"short_name": "TSTColoredTabs",
"description": "Colorize tabs in Tree Style Tab based on hostname.",
"version": "0.6",
"version": "0.7",
"author": "Alexey Murz Korepov",
"homepage_url": "https://github.com/MurzNN/tst-colored-tabs",

Expand Down
75 changes: 54 additions & 21 deletions options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,65 @@
<head>
<meta charset="utf-8">
</head>
<style>
table.hosts {
width: 100%;
}
</style>

<body>
<form name="form">

<section class="preferences">
<h3 class="title" >Settings for all tabs</h3>
<div><label>Saturation: <input id="saturation" type="text" size=2/></label></div>
<div><label>Lightness: <input id="lightness" type="text" size=2/></label></div>
<div><label>Number of colors: <input id="colors" type="text" size=2/></label>
<div class="description">Number of color hues used, maximum is 360, recommended is 15.</div>
</div>

<h3 class="title" >Active tab</h3>
<div><label>Saturation: <input id="active-saturation" type="text" size=2/></label></div>
<div><label>Lightness: <input id="active-lightness" type="text" size=2/></label></div>
<div><label><input id="active-bold" type="checkbox"/> Force <strong>bold</strong> text for active tab</label></div>

<h3 class="title" >Hovered tab</h3>
<div><label>Saturation: <input id="hover-saturation" type="text" size=2/></label></div>
<div><label>Lightness: <input id="hover-lightness" type="text" size=2/></label></div>

</section>

<input type="button" value="Save and apply settings" id="save-button"/>
<input type="button" value="Reset to defaults" id="reset-button"/>
<section class="preferences">

<h3 class="title">Settings for all tabs</h3>
<div class="browser-style"><label>Saturation: <input id="saturation" type="number" size=2/></label></div>
<div class="browser-style"><label>Lightness: <input id="lightness" type="number" size=2/></label></div>
<div class="browser-style"><label>Number of colors: <input id="colors" type="number" size=2/></label>
<div class="description">Number of color hues used, maximum is 360, recommended is 15.</div>

<h3 class="title">Active tab</h3>
<div class="browser-style"><label for="active-saturate">Saturate %:</label> <input id="active-saturate" type="number" size=2/></div>
<div class="browser-style"><label for="active-brightness">Brightness %:</label> <input id="active-brightness" type="number" size=2/></label></div>
<div class="browser-style"><input id="active-bold" type="checkbox"/> <label for="active-bold">Force <strong>bold</strong> text for active tab</label></div>

<h3 class="title">Hovered tab</h3>
<div class="browser-style"><label for="hover-saturate">Saturate %:</label> <input id="hover-saturate" type="number" size=2/></div>
<div class="browser-style"><label for="hover-brightness">Brightness %:</label> <input id="hover-brightness" type="number" size=2/></div>

<h3 class="title">Per host colors</h3>

<template class="host-item">
<td><input name="host[]" /></td>
<td><input name="regexp[]" type="checkbox" /></td>
<td><input name="color[]" type="color" /></td>
<td><input name="disabled[]" type="checkbox" /></td>
<td><button type="button" class="browser-style add-button">+</button><button type="button" class="browser-style del-button">-</button></td>
</template>

<table class="hosts">
<thead>
<th>Host</th>
<th>Regexp</th>
<th>Color</th>
<th>Disabled</th>
<th>Action</th>
</thead>
<tbody>
</tbody>
</table>
<div class="description">Remove "disabled" checkbox for enable per-host custom colors on needed hosts.
Use "Regexp" checkbox when you want to add wildcard for domains via regular expression line.</div>

</section>

<button class="browser-style" id="save-button">Save and apply settings</button>
<button class="browser-style" id="reset-button">Reset to defaults</button>

</form>

<script src="background.js"></script>
<script src="sanitizer.js"></script>
<script src="options.js"></script>

</body>
Expand Down
Loading

0 comments on commit f1b8e51

Please sign in to comment.