Skip to content

Commit 4359578

Browse files
MurzNNMurzNN
committed
Version 0.4
1 parent 350f01b commit 4359578

File tree

5 files changed

+51
-78
lines changed

5 files changed

+51
-78
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
Changes in [0.4] (2019-01-06)
2+
============================================================================================
3+
4+
* Added used colors count for improve performance and exclude using similar colors.
5+
6+
* Optimized and speed-up CSS rules applying process.
7+
8+
* Removed custom CSS fields from settings, this already exists in Tree Style Tab options.
9+
110
Changes in [0.3] (2019-01-05)
211
============================================================================================
312

‎background.js‎

Lines changed: 32 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,33 @@ const TST_ID = "treestyletab@piro.sakura.ne.jp";
55
const DEFAULT_SETTINGS = {
66
saturation: 60,
77
lightness: 70,
8-
css: '',
8+
colors: 15,
99
active: {
1010
saturation: 60,
1111
lightness: 60,
12-
css: 'font-weight: bold;',
12+
bold: true,
1313
},
1414
hover: {
1515
saturation: 60,
1616
lightness: 65,
17-
css: '',
1817
},
1918
};
2019

2120
var ColoredTabs = {
2221
init() {
23-
ColoredTabs.state.inited = true;
2422
browser.storage.sync.get(DEFAULT_SETTINGS).then(function(settings) {
23+
// console.log('init settings');
2524
ColoredTabs.settings = settings;
26-
ColoredTabs.state.hashUsed = [];
2725
ColoredTabs.colorizeAllTabs();
2826
browser.tabs.onUpdated.addListener(ColoredTabs.checkTabChanges);
2927
browser.tabs.onCreated.addListener(ColoredTabs.handleCreated);
28+
ColoredTabs.state.inited = true;
29+
// console.log('init settings fin');
3030
});
3131
},
3232

3333
handleCreated(tab) {
34-
console.log("tab url " + tab.url);
34+
// console.log("tab url " + tab.url);
3535
if(tab.url.indexOf('about:') === 0)
3636
return;
3737
let host = new URL(tab.url);
@@ -40,89 +40,61 @@ var ColoredTabs = {
4040
},
4141

4242
checkTabChanges(tabId, changeInfo, tab) {
43-
if(typeof changeInfo.url === 'undefined') {
44-
return;
45-
}
43+
if(typeof changeInfo.url === 'undefined' || tab.url.indexOf('about:') === 0)
44+
return;
4645
let host = new URL(tab.url);
4746
host = host.hostname.toString();
4847
ColoredTabs.colorizeTab(tabId, host);
4948
},
5049

5150
colorizeAllTabs() {
52-
ColoredTabs.state.css = '';
53-
if(ColoredTabs.settings.active.css !== '') {
54-
ColoredTabs.state.css = ColoredTabs.state.css + `
55-
.tab.active {
56-
` + ColoredTabs.settings.active.css + `
57-
}
58-
`;
51+
// console.log('colorizeAllTabs() start');
52+
let css = '';
53+
if(ColoredTabs.settings.active.bold == true) {
54+
css += '.tab.active .label{font-weight:bold}';
5955
}
60-
if(ColoredTabs.settings.hover.css !== '') {
61-
ColoredTabs.state.css = ColoredTabs.state.css + `
62-
.tab:hover {
63-
` + ColoredTabs.settings.hover.css + `
64-
}
65-
`;
56+
for(let i = 0; i < 360; i += (360 / ColoredTabs.settings.colors)) {
57+
let hue = Math.round(i);
58+
css += `
59+
.tab.coloredTabsHue` + hue + ` {background-color: hsl(` + hue + `,` + ColoredTabs.settings.saturation + `%,` + ColoredTabs.settings.lightness + `%);}
60+
.tab.coloredTabsHue` + hue + `.active {background-color: hsl(` + hue + `,` + ColoredTabs.settings.active.saturation + `%,` + ColoredTabs.settings.active.lightness + `%);}
61+
.tab.coloredTabsHue` + hue + `:hover {background-color: hsl(` + hue + `,` + ColoredTabs.settings.hover.saturation + `%,` + ColoredTabs.settings.hover.lightness + `%);}`;
6662
}
63+
// console.log(css);
64+
6765
browser.runtime.sendMessage(TST_ID, {
6866
type: "register-self",
69-
style: ColoredTabs.state.css,
67+
style: css,
7068
});
7169

7270
browser.tabs.query({}).then(function(tabs){
7371
for (let tab of tabs) {
7472
let host = new URL(tab.url);
7573
host = host.hostname.toString();
76-
console.log('colorize tab id ' + tab.id + ' host ' + host);
74+
// console.log('colorize tab id ' + tab.id + ' host ' + host);
7775
ColoredTabs.colorizeTab(tab.id, host);
7876
}
7977
}, onError);
80-
console.log('colorizeAllTabs() fin');
8178
},
8279

83-
colorizeTab(tabId, host, oldHost = null) {
84-
console.log("colorizeTab tabId " + tabId + ", host " + host);
85-
let hash = ColoredTabs.hash(host) % 360;
80+
colorizeTab(tabId, host) {
81+
let hue = Math.round((ColoredTabs.hash(host) % ColoredTabs.settings.colors) * (360 / ColoredTabs.settings.colors));
82+
// console.log("colorizeTab tabId " + tabId + ", host " + host + " hash " + ColoredTabs.hash(host) + " step " + (ColoredTabs.hash(host) % ColoredTabs.settings.colors) + " hue " + hue);
8683

87-
if(typeof ColoredTabs.state.tabHash[tabId] !== 'undefined') {
84+
if(typeof ColoredTabs.state.tabHue[tabId] !== 'undefined') {
8885
browser.runtime.sendMessage(TST_ID, {
8986
type: 'remove-tab-state',
9087
tabs: [tabId],
91-
state: 'coloredTabs' + ColoredTabs.state.tabHash[tabId],
92-
});
93-
}
94-
95-
if(typeof ColoredTabs.state.hashUsed[hash] === 'undefined') {
96-
97-
ColoredTabs.state.hashUsed[hash] = true;
98-
let hashColor = 'hsl(' + hash + ',' + ColoredTabs.settings.saturation + '%,' + ColoredTabs.settings.lightness + '%)';
99-
let hashColorHover = 'hsl(' + hash + ',' + ColoredTabs.settings.hover.saturation + '%,' + ColoredTabs.settings.hover.lightness + '%)';
100-
let hashColorActive = 'hsl(' + hash + ',' + ColoredTabs.settings.active.saturation + '%,' + ColoredTabs.settings.active.lightness + '%)';
101-
102-
ColoredTabs.state.css = ColoredTabs.state.css + `
103-
.tab.coloredTabs` + hash + ` {
104-
background-color: ` + hashColor + `;
105-
}
106-
.tab.coloredTabs` + hash + `:hover {
107-
background-color: ` + hashColorHover + `;
108-
}
109-
.tab.coloredTabs` + hash + `.active {
110-
background-color: ` + hashColorActive + `;
111-
}
112-
`;
113-
114-
browser.runtime.sendMessage(TST_ID, {
115-
type: "register-self",
116-
style: ColoredTabs.state.css,
88+
state: 'coloredTabsHue' + ColoredTabs.state.tabHue[tabId],
11789
});
11890
}
11991

12092
browser.runtime.sendMessage(TST_ID, {
12193
type: 'add-tab-state',
12294
tabs: [tabId],
123-
state: 'coloredTabs' + hash,
95+
state: 'coloredTabsHue' + hue,
12496
});
125-
ColoredTabs.state.tabHash[tabId] = hash;
97+
ColoredTabs.state.tabHue[tabId] = hue;
12698
},
12799

128100
hash(s) {
@@ -132,8 +104,7 @@ var ColoredTabs = {
132104
},
133105

134106
state: {
135-
'hashUsed': {},
136-
'tabHash': {},
107+
'tabHue': {},
137108
'inited': false,
138109
},
139110
}
@@ -169,10 +140,10 @@ async function handleTSTMessage(message, sender) {
169140
registerToTST();
170141
case "sidebar-show":
171142
if(ColoredTabs.state.inited != true) {
172-
console.log('TST ready, initializing ColoredTabs');
143+
// console.log('TST ready, initializing ColoredTabs');
173144
ColoredTabs.init();
174145
} else {
175-
console.log('ColoredTabs already inited');
146+
// console.log('ColoredTabs already inited');
176147
ColoredTabs.colorizeAllTabs();
177148
}
178149
break;

‎manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "TST Colored Tabs",
44
"short_name": "TSTColoredTabs",
55
"description": "Colorize tabs in Tree Style Tab based on hostname.",
6-
"version": "0.3",
6+
"version": "0.4",
77
"author": "Alexey Murz Korepov",
88
"homepage_url": "https://github.com/MurzNN/tst-colored-tabs",
99

‎options.html‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,22 @@
1111
<h3 class="title" >Settings for all tabs</h3>
1212
<div><label>Saturation: <input id="saturation" type="text" size=2/></label></div>
1313
<div><label>Lightness: <input id="lightness" type="text" size=2/></label></div>
14-
<div><label>Custom CSS for colored tab:<br/>
15-
<textarea id="css" rows="2" cols="50"></textarea>
16-
</label></div>
14+
<div><label>Number of colors: <input id="colors" type="text" size=2/></label>
15+
<div class="description">Number of color hues used, maximum is 360, recommended is 15.</div>
16+
</div>
1717

1818
<h3 class="title" >Active tab</h3>
1919
<div><label>Saturation: <input id="active-saturation" type="text" size=2/></label></div>
2020
<div><label>Lightness: <input id="active-lightness" type="text" size=2/></label></div>
21-
<div><label>Custom CSS for active tab:<br/>
22-
<textarea id="active-css" rows="2" cols="50"></textarea>
23-
</label></div>
21+
<div><label><input id="active-bold" type="checkbox"/> Force <strong>bold</strong> text for active tab</label></div>
2422

2523
<h3 class="title" >Hovered tab</h3>
2624
<div><label>Saturation: <input id="hover-saturation" type="text" size=2/></label></div>
2725
<div><label>Lightness: <input id="hover-lightness" type="text" size=2/></label></div>
28-
<div><label>Custom CSS for hovered tab:<br/>
29-
<textarea id="hover-css" rows="2" cols="50"></textarea>
30-
</label></div>
3126

3227
</section>
3328

34-
<input type="button" value="Save preferences" id="save-button"/>
29+
<input type="button" value="Save and apply settings" id="save-button"/>
3530
<input type="button" value="Reset to defaults" id="reset-button"/>
3631

3732
<script src="background.js"></script>

‎options.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,15 @@ function storeSettings() {
66
browser.storage.sync.set({
77
saturation: document.querySelector("#saturation").value,
88
lightness: document.querySelector("#lightness").value,
9-
css: document.querySelector("#css").value,
9+
colors: document.querySelector("#colors").value,
1010
active: {
1111
saturation: document.querySelector("#active-saturation").value,
1212
lightness: document.querySelector("#active-lightness").value,
13-
css: document.querySelector("#active-css").value,
13+
bold: document.querySelector("#active-bold").checked,
1414
},
1515
hover: {
1616
saturation: document.querySelector("#hover-saturation").value,
1717
lightness: document.querySelector("#hover-lightness").value,
18-
css: document.querySelector("#hover-css").value,
1918
},
2019
});
2120
ColoredTabs.init();
@@ -34,15 +33,14 @@ or the default settings if the stored settings are empty.
3433
function updateUI(storedSettings) {
3534
document.querySelector("#saturation").value = storedSettings.saturation || "";
3635
document.querySelector("#lightness").value = storedSettings.lightness || "";
37-
document.querySelector("#css").value = storedSettings.css || "";
36+
document.querySelector("#colors").value = storedSettings.colors || "";
3837

3938
document.querySelector("#active-saturation").value = storedSettings.active.saturation || "";
4039
document.querySelector("#active-lightness").value = storedSettings.active.lightness || "";
41-
document.querySelector("#active-css").value = storedSettings.active.css || "";
40+
document.querySelector("#active-bold").checked = storedSettings.active.bold || "";
4241

4342
document.querySelector("#hover-saturation").value = storedSettings.hover.saturation || "";
4443
document.querySelector("#hover-lightness").value = storedSettings.hover.lightness || "";
45-
document.querySelector("#hover-css").value = storedSettings.hover.css || "";
4644
}
4745

4846
function onError(e) {

0 commit comments

Comments
 (0)