TreeTabsMigration/scripts/theme.js

// Copyright (c) 2017 kroppy. All rights reserved.
// Use of this source code is governed by a Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0) license
// that can be found at https://creativecommons.org/licenses/by-nc-nd/4.0/


function Loadi18n() {
	// toolbar labels
	document.querySelectorAll(".button, .manager_window_toolbar_button").forEach(function(s){
		s.title = chrome.i18n.getMessage(s.id);
	});
	// menu labels and edit group dialog labels
	document.querySelectorAll(".menu_item, .edit_dialog_button, #manager_window_header_title, .manager_window_label").forEach(function(s){
		s.textContent = chrome.i18n.getMessage(s.id);
	});
}

function RestorePinListRowSettings() {
	plist = document.getElementById("pin_list");
	if (opt.pin_list_multi_row) {
		plist.style.whiteSpace = "normal";
		plist.style.overflowX = "hidden";
	} else {
		plist.style.whiteSpace = "";
		plist.style.overflowX = "";
	}
	RefreshGUI();
}

function ApplyTheme(theme) {
	RestoreStateOfGroupsToolbar();
	ApplySizeSet(theme["TabsSizeSetNumber"]);
	ApplyColorsSet(theme["ColorsSet"]);
	ApplyTabsMargins(theme["TabsMargins"]);
	RefreshGUI();
	
	for (var groupId in tt.groups) {
		let groupTitle = document.getElementById("_gte"+groupId);
		if (groupTitle != null && tt.groups[groupId].font == "") {
			groupTitle.style.color = "";
		}
	}
	Loadi18n();
}

// theme colors is an object with css variables (but without --), for example; {"button_background": "#f2f2f2", "filter_box_border": "#cccccc"}
function ApplyColorsSet(ThemeColors){
	let css_variables = "";
	for (let css_variable in ThemeColors) {
		css_variables = css_variables + "--" + css_variable + ":" + ThemeColors[css_variable] + ";";
	}
	for (let si = 0; si < document.styleSheets.length; si++) {
		if (document.styleSheets[si].ownerNode.id == "theme_colors") {
			document.styleSheets[si].deleteRule(document.styleSheets[si].cssRules.length-1);
			document.styleSheets[si].insertRule("body { "+css_variables+" }", document.styleSheets[si].cssRules.length);
		}
	}
}

function ApplySizeSet(size){
	for (let si = 0; si < document.styleSheets.length; si++) {
		if ((document.styleSheets[si].ownerNode.id).match("sizes_preset") != null) {
			if (document.styleSheets[si].ownerNode.id == "sizes_preset_"+size) {
				document.styleSheets.item(si).disabled = false;
			} else {
				document.styleSheets.item(si).disabled = true;
			}
		}
	}
	if (browserId == "F") {
		// for some reason top position for various things is different in firefox?????
		if (size > 1) {
			document.styleSheets[document.styleSheets.length-1].insertRule(".tab_header>.tab_title { margin-top: -1px; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
		} else {
			document.styleSheets[document.styleSheets.length-1].insertRule(".tab_header>.tab_title { margin-top: 0px; }", document.styleSheets[document.styleSheets.length-1].cssRules.length);
		}
	}
}

function ApplyTabsMargins(size){
	for (let si = 0; si < document.styleSheets.length; si++) {
		if ((document.styleSheets[si].ownerNode.id).match("tabs_margin") != null) {
			if (document.styleSheets[si].ownerNode.id == "tabs_margin_"+size) {
				document.styleSheets.item(si).disabled = false;
			} else {
				document.styleSheets.item(si).disabled = true;
			}
		}
	}
}

function GetCurrentToolbar(storage) {
	if (storage["toolbar"]) {
		return storage["toolbar"];
	} else {
		return DefaultToolbar;
	}
}


function GetCurrentTheme(storage) {
	if (storage["current_theme"] && storage["themes"] && storage["themes"][storage["current_theme"]]) {
		let theme = storage["themes"][storage["current_theme"]];
		let correctedTheme = CheckTheme(theme);
			if (correctedTheme.theme_version < 4 && storage["preferences"].show_toolbar == undefined) {
				opt.show_toolbar = correctedTheme.ToolbarShow;
				SavePreferences();
			}
		return correctedTheme;
	} else {
		return DefaultTheme;
	}
}

// OPTIONS PAGE
function LoadTheme(ThemeId, reloadInSidebar) {
	
	document.querySelectorAll(".theme_buttons").forEach(function(s){
		s.disabled = true;
	});
	
	chrome.storage.local.set({current_theme: ThemeId}, function() {
		chrome.storage.local.get(null, function(storage) {
			SelectedTheme = Object.assign({}, GetCurrentTheme(storage));
			setTimeout(function() {
				document.getElementById("new_theme_name").value = SelectedTheme.theme_name;
				setTimeout(function() {
					// SetToolbarEvents(true, false, false, "");
					RemoveToolbarEditEvents();
					
					ApplySizeSet(SelectedTheme["TabsSizeSetNumber"]);
					ApplyColorsSet(SelectedTheme["ColorsSet"]);
					document.getElementById("_gtetab_list").style.color = "";
					document.getElementById("_gtetab_list2").style.color = "";

					if (SelectedTheme["TabsMargins"]) {
						document.getElementById("tabs_margin_spacing")[SelectedTheme["TabsMargins"]].checked = true;
						ApplyTabsMargins(SelectedTheme["TabsMargins"]);
					} else {
						document.getElementById("tabs_margin_spacing")["2"].checked = true;
					}

					if (reloadInSidebar) {
						chrome.runtime.sendMessage({command: "reload_theme", ThemeId: ThemeId, theme: SelectedTheme});
					}
					
					document.querySelectorAll(".theme_buttons").forEach(function(s){
						s.disabled = false;
					});

				}, 200);
			}, 200);
		});
	});
}

function SaveTheme(ThemeId) {
	chrome.storage.local.get(null, function(storage) {
		
		SelectedTheme.theme_version = DefaultTheme.theme_version;
		
		let LSthemes = storage.themes ? Object.assign({}, storage.themes) : {};
		
		LSthemes[ThemeId] = Object.assign({}, SelectedTheme);

		chrome.storage.local.set({themes: LSthemes});

		chrome.runtime.sendMessage({command: "reload_theme", ThemeId: ThemeId, theme: SelectedTheme});
		return SelectedTheme;
	});
}

function AddNewTheme() {
	
	let ThemeId = GenerateRandomID() + GenerateRandomID();
	let ThemeList = document.getElementById("theme_list");
	let ThemeNameBox = document.getElementById("new_theme_name");
	let NewName = ThemeNameBox.value;
	
	if (ThemeNameBox.value == "") {
		alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty"));
		return;
	}

	SelectedTheme = Object.assign({}, DefaultTheme);
	SelectedTheme["ColorsSet"] = {};

	// let Names = [];
	
	// for (let i = 0; i < ThemeList.options.length; i++) {
		// Names.push(ThemeList.options[i].text);
	// }
	
	// while (Names.indexOf(NewName) != -1) {
		// let matched = NewName.match(/\(\d+\)+/);
		// if (matched != null && matched.length > 0) {
			// NewName = NewName.replace(matched[0], ("(" + (parseInt(matched[0].match(/\d+/)[0]) + 1 ) + ")")         );
		// } else {
			// NewName = NewName + "(1)";
		// }
	// }
	
	ThemeNameBox.value = NewName;
	SelectedTheme["theme_name"] = NewName;

	themes.push(ThemeId);

	let ThemeNameOption = document.createElement("option");
	
	ThemeNameOption.value = ThemeId;
	ThemeNameOption.text = NewName;

	ThemeList.add(ThemeNameOption);
	ThemeList.selectedIndex = ThemeList.options.length-1;
	
	SaveTheme(ThemeId);
	setTimeout(function() {
		LoadTheme(ThemeId, true);
	}, 50);
	
	chrome.storage.local.set({current_theme: ThemeId});
	RefreshFields();	
}

function DeleteSelectedTheme() {
	chrome.storage.local.get(null, function(storage) {
		let LSthemes = storage.themes ? Object.assign({}, storage.themes) : {};
		
		let ThemeList = document.getElementById("theme_list");
		
		themes.splice(ThemeList.selectedIndex, 1);
		if (LSthemes[current_theme]) {
			delete LSthemes[current_theme];
		}
		chrome.storage.local.set({themes: LSthemes});
		
		ThemeList.remove(ThemeList.selectedIndex);
	
		current_theme = (ThemeList.options.length > 0) ? ThemeList.value : "default";
		
		
		chrome.storage.local.set({current_theme: current_theme});
		
		if (ThemeList.options.length == 0) {
			current_theme = "";
			SelectedTheme = Object.assign({}, DefaultTheme);
			SelectedTheme["ColorsSet"] = {};
			chrome.storage.local.set({themes: {}});
			setTimeout(function() {
				chrome.runtime.sendMessage({command: "reload_theme", themeName: "", theme: SelectedTheme});
			}, 500);
		}
		LoadTheme(current_theme, true);
		RefreshFields();
	});
}

function RenameSelectedTheme() {
	let ThemeList = document.getElementById("theme_list");
	let ThemeNameBox = document.getElementById("new_theme_name");

	// for (let i = 0; i < ThemeList.options.length; i++) {
		// if (ThemeNameBox.value == ThemeList.options[i].text){
			// alert(chrome.i18n.getMessage("options_there_is_a_theme_with_this_name"));
			// return;
		// }
	// }
	
	if (ThemeNameBox.value == "") {
		alert(chrome.i18n.getMessage("options_theme_name_cannot_be_empty"));
		return;
	}
	
	
	chrome.storage.local.get(null, function(storage) {
		let LSthemes = storage.themes ? Object.assign({}, storage.themes) : {};
		ThemeList.options[ThemeList.selectedIndex].text = ThemeNameBox.value;
		SelectedTheme["theme_name"] = ThemeNameBox.value;
		LSthemes[current_theme]["theme_name"] = ThemeNameBox.value;
		chrome.storage.local.set({themes: LSthemes});
		chrome.storage.local.set({current_theme: current_theme});
	});
}



function CheckTheme(theme) {
	if (theme.theme_version < 2) {
		theme["ColorsSet"]["scrollbar_height"] = theme.ScrollbarPinList + "px";
		theme["ColorsSet"]["scrollbar_width"] = theme.ScrollbarTabList + "px";
	}
	if (theme["TabsMargins"] == undefined) {
		theme["TabsMargins"] = "2";
	}
	if (theme.theme_version < 4) {
		delete theme["ColorsSet"]["active_font_weight"];
		delete theme["ColorsSet"]["expand_lines"];
		delete theme["ColorsSet"]["expand_open_border"];
		delete theme["ColorsSet"]["expand_closed_border"];
		
		if (theme["ColorsSet"]["toolbar_background"]) {
			theme["ColorsSet"]["toolbar_shelf_background"] = theme["ColorsSet"]["toolbar_background"];
			theme["ColorsSet"]["button_on_background"] = theme["ColorsSet"]["toolbar_background"];
		}
		if (theme["ColorsSet"]["button_icons"]) {
			theme["ColorsSet"]["button_on_icons"] = theme["ColorsSet"]["button_icons"];
			theme["ColorsSet"]["button_shelf_icons"] = theme["ColorsSet"]["button_icons"];
		}
		if (theme["ColorsSet"]["button_background"]) {
			theme["ColorsSet"]["button_shelf_background"] = theme["ColorsSet"]["button_background"];
		}
		if (theme["ColorsSet"]["button_hover_background"]) {
			theme["ColorsSet"]["button_shelf_hover_background"] = theme["ColorsSet"]["button_hover_background"];
		}
		if (theme["ColorsSet"]["button_border"]) {
			theme["ColorsSet"]["button_shelf_border"] = theme["ColorsSet"]["button_border"];
		}
		if (theme["ColorsSet"]["button_hover_border"]) {
			theme["ColorsSet"]["button_shelf_hover_border"] = theme["ColorsSet"]["button_hover_border"];
		}
		if (theme["ColorsSet"]["button_icons_hover"]) {
			theme["ColorsSet"]["button_shelf_icons_hover"] = theme["ColorsSet"]["button_icons_hover"];
		}
		
		if (theme["ColorsSet"]["expand_hover_background"]) {
			theme["ColorsSet"]["folder_icon_hover"] = theme["ColorsSet"]["expand_hover_background"];
		}
		if (theme["ColorsSet"]["expand_closed_background"]) {
			theme["ColorsSet"]["folder_icon_closed"] = theme["ColorsSet"]["expand_closed_background"];
		}
		if (theme["ColorsSet"]["expand_open_background"]) {
			theme["ColorsSet"]["folder_icon_open"] = theme["ColorsSet"]["expand_open_background"];
		}
	}
		
	return theme;
}



function ImportTheme() {
	var file = document.getElementById("file_import");
	var fr = new FileReader();
	if (file.files[0] == undefined) return;
	fr.readAsText(file.files[0]);
	fr.onload = function() {
		var data = fr.result;
		file.parentNode.removeChild(file);

		var themeObj = JSON.parse(data);

		if (themeObj.theme_version > DefaultTheme["theme_version"]) {
			alert(chrome.i18n.getMessage("options_loaded_theme_newer_version"));
		}
		if (themeObj.theme_version < DefaultTheme["theme_version"]) {
			alert(chrome.i18n.getMessage("options_loaded_theme_older_version"));
		}

		if (themeObj.theme_version <= DefaultTheme["theme_version"]) {
			let ThemeList = document.getElementById("theme_list");
			let ThemeId = GenerateRandomID() + GenerateRandomID();
			let correctedTheme = CheckTheme(themeObj);
			
			SelectedTheme = Object.assign({}, DefaultTheme);

			for (var val in correctedTheme.ColorsSet) {
				SelectedTheme["ColorsSet"][val] = correctedTheme.ColorsSet[val];
			}
			
			SelectedTheme["TabsSizeSetNumber"] = correctedTheme.TabsSizeSetNumber;
			SelectedTheme["TabsMargins"] = correctedTheme["TabsMargins"];
			SelectedTheme["theme_version"] = DefaultTheme["theme_version"];
			
			// let Names = [];
			// for (let i = 0; i < ThemeList.options.length; i++) {
				// Names.push(ThemeList.options[i].text);
			// }
			
			// if (Names.indexOf(correctedTheme.theme_name) == -1) {
				SelectedTheme["theme_name"] = correctedTheme.theme_name;
			// } else {
				// let NewName = correctedTheme.theme_name;
				// while (Names.indexOf(NewName) != -1) {
					// let matched = NewName.match(/\(\d+\)+/);
					// if (matched != null && matched.length > 0) {
						// NewName = NewName.replace(matched[0], ("(" + (parseInt(matched[0].match(/\d+/)[0]) + 1 ) + ")")         );
					// } else {
						// NewName = NewName + "(1)";
					// }
				// }
				// SelectedTheme["theme_name"] = NewName;
			// }
			
			themes.push(ThemeId);
			SaveTheme(ThemeId);
			
			var theme_name = document.createElement("option");
			
			theme_name.value = ThemeId;
			theme_name.text = SelectedTheme["theme_name"];
			
			ThemeList.add(theme_name);
			ThemeList.selectedIndex = ThemeList.options.length-1;
			
			current_theme = ThemeId;
			document.createElement("new_theme_name").value = ThemeId;
			
			setTimeout(function() {
				LoadTheme(ThemeId, true);
			}, 500);
			RefreshFields();
			DefaultTheme["ColorsSet"] = {};
			chrome.storage.local.set({current_theme: ThemeId});
		}
	}	 
}