Skip to content

Commit

Permalink
Version 0.4
Browse files Browse the repository at this point in the history
  • Loading branch information
@MurzNN
MurzNN committed Jan 5, 2019
1 parent 350f01b commit 4359578
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 78 deletions.
9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
Changes in [0.4] (2019-01-06)
============================================================================================

* Added used colors count for improve performance and exclude using similar colors.

* Optimized and speed-up CSS rules applying process.

* Removed custom CSS fields from settings, this already exists in Tree Style Tab options.

Changes in [0.3] (2019-01-05)
============================================================================================

Expand Down
93 changes: 32 additions & 61 deletions background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,33 @@ const TST_ID = "[email protected]";
const DEFAULT_SETTINGS = {
saturation: 60,
lightness: 70,
css: '',
colors: 15,
active: {
saturation: 60,
lightness: 60,
css: 'font-weight: bold;',
bold: true,
},
hover: {
saturation: 60,
lightness: 65,
css: '',
},
};

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

handleCreated(tab) {
console.log("tab url " + tab.url);
// console.log("tab url " + tab.url);
if(tab.url.indexOf('about:') === 0)
return;
let host = new URL(tab.url);
Expand All @@ -40,89 +40,61 @@ var ColoredTabs = {
},

checkTabChanges(tabId, changeInfo, tab) {
if(typeof changeInfo.url === 'undefined') {
return;
}
if(typeof changeInfo.url === 'undefined' || tab.url.indexOf('about:') === 0)
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 + `
}
`;
// console.log('colorizeAllTabs() start');
let css = '';
if(ColoredTabs.settings.active.bold == true) {
css += '.tab.active .label{font-weight:bold}';
}
if(ColoredTabs.settings.hover.css !== '') {
ColoredTabs.state.css = ColoredTabs.state.css + `
.tab:hover {
` + ColoredTabs.settings.hover.css + `
}
`;
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 + `%);}`;
}
// console.log(css);

browser.runtime.sendMessage(TST_ID, {
type: "register-self",
style: ColoredTabs.state.css,
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);
// console.log('colorize tab id ' + tab.id + ' host ' + host);
ColoredTabs.colorizeTab(tab.id, host);
}
}, onError);
console.log('colorizeAllTabs() fin');
},

colorizeTab(tabId, host, oldHost = null) {
console.log("colorizeTab tabId " + tabId + ", host " + host);
let hash = ColoredTabs.hash(host) % 360;
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(typeof ColoredTabs.state.tabHash[tabId] !== 'undefined') {
if(typeof ColoredTabs.state.tabHue[tabId] !== 'undefined') {
browser.runtime.sendMessage(TST_ID, {
type: 'remove-tab-state',
tabs: [tabId],
state: 'coloredTabs' + ColoredTabs.state.tabHash[tabId],
});
}

if(typeof ColoredTabs.state.hashUsed[hash] === 'undefined') {

ColoredTabs.state.hashUsed[hash] = true;
let hashColor = 'hsl(' + hash + ',' + ColoredTabs.settings.saturation + '%,' + 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.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.state.css,
state: 'coloredTabsHue' + ColoredTabs.state.tabHue[tabId],
});
}

browser.runtime.sendMessage(TST_ID, {
type: 'add-tab-state',
tabs: [tabId],
state: 'coloredTabs' + hash,
state: 'coloredTabsHue' + hue,
});
ColoredTabs.state.tabHash[tabId] = hash;
ColoredTabs.state.tabHue[tabId] = hue;
},

hash(s) {
Expand All @@ -132,8 +104,7 @@ var ColoredTabs = {
},

state: {
'hashUsed': {},
'tabHash': {},
'tabHue': {},
'inited': false,
},
}
Expand Down Expand Up @@ -169,10 +140,10 @@ async function handleTSTMessage(message, sender) {
registerToTST();
case "sidebar-show":
if(ColoredTabs.state.inited != true) {
console.log('TST ready, initializing ColoredTabs');
// console.log('TST ready, initializing ColoredTabs');
ColoredTabs.init();
} else {
console.log('ColoredTabs already inited');
// console.log('ColoredTabs already inited');
ColoredTabs.colorizeAllTabs();
}
break;
Expand Down
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.3",
"version": "0.4",
"author": "Alexey Murz Korepov",
"homepage_url": "https://github.com/MurzNN/tst-colored-tabs",

Expand Down
15 changes: 5 additions & 10 deletions options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,27 +11,22 @@
<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>Custom CSS for colored tab:<br/>
<textarea id="css" rows="2" cols="50"></textarea>
</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>Custom CSS for active tab:<br/>
<textarea id="active-css" rows="2" cols="50"></textarea>
</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>
<div><label>Custom CSS for hovered tab:<br/>
<textarea id="hover-css" rows="2" cols="50"></textarea>
</label></div>

</section>

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

<script src="background.js"></script>
Expand Down
10 changes: 4 additions & 6 deletions options.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,15 @@ function storeSettings() {
browser.storage.sync.set({
saturation: document.querySelector("#saturation").value,
lightness: document.querySelector("#lightness").value,
css: document.querySelector("#css").value,
colors: document.querySelector("#colors").value,
active: {
saturation: document.querySelector("#active-saturation").value,
lightness: document.querySelector("#active-lightness").value,
css: document.querySelector("#active-css").value,
bold: document.querySelector("#active-bold").checked,
},
hover: {
saturation: document.querySelector("#hover-saturation").value,
lightness: document.querySelector("#hover-lightness").value,
css: document.querySelector("#hover-css").value,
},
});
ColoredTabs.init();
Expand All @@ -34,15 +33,14 @@ 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("#colors").value = storedSettings.colors || "";

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("#active-bold").checked = storedSettings.active.bold || "";

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 onError(e) {
Expand Down

0 comments on commit 4359578

Please sign in to comment.